1/** 2 * This file provides styles for the general layout structure. 3 */ 4 5/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */ 6/* col grid */ 7/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */ 8.make-grid(xs); 9 10@media screen { 11 .container { 12 margin: 0 @margin-big; 13 } 14} 15 16/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */ 17/* font sizing */ 18/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */ 19@media @screen_min-xxs { 20 html { 21 font-size: 100%; //16px 22 } 23} 24 25@media @screen_min-xs { 26 html { 27 font-size: 100%; //16px 28 } 29} 30 31@media @screen_min-sm { 32 .make-grid(sm); 33 html { 34 font-size: 100%; //16px 35 } 36} 37 38@media @screen_min-md { 39 .make-grid(md); 40 html { 41 font-size: 87.5%; //14px 42 } 43} 44 45@media @screen_min-lg { 46 .make-grid(lg); 47 html { 48 font-size: 87.5%; //14px 49 } 50} 51 52@media @screen_min-xlg { 53 html { 54 font-size: 93.75%; //15px 55 } 56} 57 58@media @screen_min-xxlg { 59 html { 60 font-size: 100%; //16px 61 } 62} 63 64/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */ 65/* z-indices */ 66/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */ 67@media screen { 68 .nav-direct p { 69 z-index: 1000; // keyboard-navigation overlays always on top 70 } 71 72 .top-header { 73 z-index: 2; // put MagicMatcher-Dropdowns above .content and metabox-tabs 74 } 75 76 #dokuwiki__aside div.nav a { 77 &:hover, &:focus, &:active { 78 z-index: 100; // show label/link above content on hover etc. 79 } 80 } 81 82 .qc-output { 83 z-index: 1; // put qc-output above meta-box 84 } 85 86 #spr__meta-box { 87 z-index: 10; // put meta-box above positioned content-elements such as aggregations, edit-buttons 88 ul.meta-tabs > li.active { 89 z-index: 1; // put the active tab above the meta-content in .tab-pane.active 90 } 91 } 92 93 nav#dokuwiki__pagetools { 94 z-index: 100; // put labels of the pagetools above content on hover etc. 95 } 96 97 #dokuwiki__detail .img-link a::before { 98 z-index: 2; // put 'view original file'-overlay above image 99 } 100 101 /* plug-in do_tasks */ 102 .plugin__do_usertasks_list { 103 z-index: 200; // put tasks-list above pagetools 104 } 105 106 /* plug-in editable */ 107 #dokuwiki__content.main-content div.editbutton_table { 108 z-index: 1; // for IE 109 } 110 111 /* plug-in tabinclude */ 112 div#dwpl-ti-container li.dwpl-ti-tab div.selected { 113 z-index: 1; // put .slected tab above div.dwpl-ti-content-box 114 } 115} 116 117@media @screen_min-md { 118 .wide-content .search.main-sidebar p.toggleSearch { 119 z-index: 1; // put search-toggle-button above #dw__search 120 } 121} 122 123@media @screen_max-md { 124 body.show-mobile-sidebar #dokuwiki__aside { 125 z-index: 200; // mobile sidebar above all except nav-direct 126 } 127} 128 129/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */ 130/* screen sizing */ 131/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */ 132 133// >= 1024 134@media @screen_min-md { 135 136 .content .row > .col-xs-12 { 137 border-radius: 0 @ini_default_border_radius @fix_border-radius @fix_border-radius; // @ini_default_border_radius vs. @fix_border-radius 138 } 139 140 .top-header { 141 position: absolute; 142 top: 0; 143 right: 0; 144 width: 50%; 145 } 146 147 .header, 148 .tools { 149 .row { 150 position: relative; 151 152 > .col-xs-12 { 153 width: @ini_sidebar_width; 154 box-sizing: border-box; 155 } 156 } 157 } 158 159 .header { 160 .row > .col-xs-12 { 161 position: relative; 162 height: 150px; 163 min-height: 6rem; 164 display: table; 165 166 + .col-xs-12 { 167 float: right; 168 width: @ini_site_width; 169 box-sizing: border-box; 170 } 171 } 172 } 173 174 /* + + + + + layout option compact + + + + + */ 175 .header-compact { 176 .header { 177 .row > .col-xs-12 { 178 height: auto; 179 min-height: auto; 180 } 181 } 182 } 183 184 .tools { 185 .row > .col-xs-12 { 186 position: absolute; 187 } 188 } 189 190 .content { 191 .row > .col-xs-12 { 192 position: relative; 193 width: 100%; 194 background-color: #fff; 195 } 196 } 197 198 .showSidebar { 199 .content { 200 .row > .col-xs-12 { 201 width: @ini_site_width; 202 float: right; 203 } 204 } 205 } 206 207 .wide-content { 208 .content { 209 .row > .col-xs-12 { 210 width: auto; 211 float: none; 212 } 213 } 214 215 &.showSidebar { 216 .content { 217 .row > .col-xs-12 { 218 margin-left: @toggle-showsidebar_width; 219 } 220 } 221 } 222 } 223 224 .main-sidebar { 225 &.search { 226 > img { 227 width: 100%; 228 height: auto; 229 } 230 } 231 } 232} 233 234// > 1024 235@media @screen_md-lg { 236 .wide-content.showSidebar { 237 .content { 238 .row > .col-xs-12 { 239 margin-left: 2.3rem; 240 } 241 } 242 } 243} 244 245@media @screen_max-md { 246 .container { 247 margin: 0 1.25rem; 248 } 249 250 .content { 251 position: relative; 252 253 #dokuwiki__pagetools { 254 top: 0; 255 } 256 257 .row > .col-xs-12 #dokuwiki__content::before { 258 display: none; 259 } 260 } 261 262 .tools { 263 .main-sidebar { 264 display: none; 265 } 266 } 267} 268 269@media @screen_max-xxs { 270 @mobileMargin: 4px; 271 272 .container { 273 margin: 0 @mobileMargin; 274 } 275 276 body.show-mobile-sidebar #dokuwiki__aside { 277 left: @mobileMargin; 278 } 279 280 #dokuwiki__footer { 281 .main-footer { 282 > * { 283 padding-left: 2rem; 284 padding-right: 2rem; 285 } 286 } 287 } 288} 289