1/* =Theme 2----------------------------------------------- */ 3 4/* Body */ 5body { 6 overflow-x: hidden; 7 padding: 40px 0 0; 8 width: 100%; 9 background: @ini_text_alt; 10 color: @ini_text; 11 -ms-word-wrap: break-word; 12 word-wrap: break-word; 13} 14body:after, 15body:before { 16 content: ''; 17 display: block; 18 position: fixed; 19 z-index: -1; 20 top: 0; 21 height: 200%; 22} 23body:after { 24 left: 0; 25 width: 300px; 26 background: @ini_theme_color; 27} 28body:before { 29 left: 300px; 30 width: 100px; 31 background: @ini_text_alt; 32} 33 34/* Page */ 35#writr__page { 36 z-index: 1; 37 margin: 0; 38 width: (@ini_content_width + 400px); 39} 40#writr__page:before { 41 content: ''; 42 display: block; 43 position: fixed; 44 z-index: -1; 45 top: 0; 46 left: 400px; 47 width: @ini_content_width; 48 height: 100%; 49 background: @ini_background; 50} 51 52/* Content */ 53.site-content{ 54 z-index: 0; 55} 56 57/* Header */ 58.site-header { 59 background: @ini_theme_color; 60 color: @ini_background; 61} 62.site-logo { 63 display: block; 64 margin: 0 0 20px; 65 text-align: center; 66} 67.site-logo img { 68 display: block; 69} 70.site-branding { 71 position: relative; 72 padding: 0; 73 margin: 0 0 20px; 74 text-align: center; 75 76 p { 77 margin: 0; 78 } 79} 80.site-title { 81 padding: 0 0 5px; 82 margin: 0; 83 font-size: 20px; 84 font-weight: bold; 85 text-transform: uppercase; 86} 87.site-title a { 88 display: inline-block; 89 color: @ini_background; 90 text-decoration: none; 91} 92.site-title a:hover { 93 color: @ini_theme_color_alt; 94} 95.site-description { 96 margin: 0 0 20px; 97 color: @ini_background; 98 font-size: 12px; 99 text-transform: uppercase; 100} 101 102/* Primary */ 103.content-area { 104 text-align: left; 105 float: right; 106 width: @ini_content_width; 107 height: auto; 108 padding: 0 40px; 109 background: @ini_background; 110 -webkit-box-sizing: border-box; 111 -moz-box-sizing: border-box; 112 box-sizing: border-box; 113} 114 115/* Sidebar */ 116.widget-area, 117.widget-area a, 118.widget-area h1, 119.widget-area h2, 120.widget-area h3, 121.widget-area h4, 122.widget-area h5, 123.widget-area h6 { 124 color: @ini_background; 125} 126.widget-area a:hover, 127.widget-area a:focus, 128.widget-area a:active { 129 color: @ini_background_neu; 130} 131.widget-area { 132 width: 220px; 133} 134.site-info { 135 padding: 0 0 40px; 136 color: @ini_background; 137 font-size: 12px; 138 text-align: center; 139} 140.site-info a { 141 color: @ini_background; 142 text-decoration: none; 143} 144.site-info a:hover { 145 color: @ini_theme_color_alt; 146} 147.page-footer { 148 font-size: 14px; 149 padding: 20px 40px; 150 margin: 40px -40px 0; 151 width: @ini_content_width; 152 background-color: @ini_background_alt; 153 154 // Hide page path in the page footer 155 bdi:first-child { 156 display: none; 157 } 158} 159 160/* =DokuWiki-specific 161----------------------------------------------- */ 162 163/* Breadcrumbs */ 164div.breadcrumbs { 165 background-color: @ini_background_alt; 166 margin: 0 0 20px -40px; 167 padding: 15px 40px; 168 position: relative; 169 width: @ini_content_width; 170 font-size: 14px; 171 172 a { 173 text-decoration: none; 174 } 175} 176body:not(.mode_show) div.breadcrumbs { 177 display: none; 178} 179 180/* TOC */ 181#dw__toc { 182 width: 240px; 183 184 h3 { 185 font-size: 14px; 186 margin-bottom: 0; 187 padding: 10px; 188 } 189 > div { 190 padding: 0 10px 10px; 191 } 192 ul li { 193 font-size: 14px; 194 line-height: inherit; 195 } 196 ul ul { 197 padding-left: 20px; 198 } 199 ul ul ul { 200 padding-left: 15px; 201 } 202 li li { 203 list-style: square; 204 color: lighten(@ini_text, 40%); 205 } 206 a { 207 text-decoration: none; 208 } 209} 210 211/* Section editing */ 212.secedit input.button, /* @deprecated since Detritus */ 213.secedit button { 214 padding: 5px 10px; 215} 216.dokuwiki div.section_highlight { 217 margin: 0 -40px; 218 padding: 0 20px; 219 border-width: 0 20px; 220} 221.dokuwiki a[rel="tag"] { 222 display: inline-block; 223 padding: 5px 10px; 224 margin: 0 5px 5px 0; 225 background: @ini_theme_color; 226 color: #fff; 227 font-size: 12px; 228 text-decoration: none; 229} 230 231/* Modal windows */ 232.dokuwiki form.search div.ajax_qsearch { 233 left: auto; 234 right: -13.5em; 235 top: -10px; 236} 237.JSpopup { 238 border: 2px solid @ini_background_neu; 239 border-radius: 20px; 240 color: @ini_text; 241 padding: 10px; 242 font-size: 14px; 243} 244 245.mock-layout { 246 background-color: @ini_background; 247 padding: 0; 248 width: auto; 249 250 &::after { 251 width: 40px; 252 } 253 &::before { 254 width: 20px; 255 left: 40px; 256 } 257 258 > div { 259 padding: 20px 20px 20px 80px !important; 260 } 261} 262 263/* Fullscreen media manager */ 264.mode_media { 265 .mock-layout; 266 267 #writr__sidebar-toggle, 268 #writr__masthead .site-branding, 269 #writr__masthead .search-form, 270 #writr__site-navigation, 271 #writr__secondary, 272 .breadcrumbs, 273 .page-footer { 274 display: none; 275 } 276 #writr__page, 277 .content-area { 278 width: auto; 279 } 280 .content-area { 281 padding: 0; 282 } 283 284 /* show only logo in sidebar */ 285 #writr__sidebar { 286 float: none; 287 padding: 0; 288 width: auto; 289 position: static; 290 .site-header { 291 background-color: transparent; 292 position: absolute; 293 top: 15px; 294 left: 5px; 295 } 296 .site-logo { 297 display: inline-block; 298 img { 299 width: 50px; 300 height: 50px; 301 } 302 } 303 } 304} 305 306/* Popup media manager */ 307.media-popup { 308 padding: 0; 309 310 &, 311 &::before, 312 &::after { 313 background-color: @ini_background; 314 } 315 316 #mediamgr__aside > div, 317 #mediamgr__content > div { 318 padding: 5px; 319 } 320 321 #media__tree { 322 li > ul { 323 margin-left: 0; 324 } 325 ul li li { 326 margin-left: 1em; 327 } 328 } 329} 330 331/* Image detail page */ 332.detail-page { 333 .mock-layout; 334 335 p.back a .genericon { 336 vertical-align: middle; 337 text-decoration: none; 338 margin: 0 5px 0 -8px; 339 } 340} 341