1/** 2 * This file provides the basic/reset styles. 3 */ 4 5/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */ 6/* global vars */ 7/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */ 8@font_family_screen: arial, sans-serif; 9@font_family_print: "Times New Roman", serif; 10 11@nav_direct_background: @ini_background; 12@nav_direct_color: @ini_existing; 13 14@background_darker: rgba(230,230,230, .2); 15@ini_sidebar_width: (100 - @ini_site_width) - 4; 16 17@height-context-bar: 50px; 18 19@margin-small: 1rem; 20@margin-default: 2rem; 21@margin-big: 3.07rem; 22@nav-margin: 1.3rem; 23 24@small-spacing: .3rem; 25@very-small-spacing: .2rem; 26 27@grid: @margin-small; 28@toggle-size: 1.75rem; 29 30@transition: ease-out .30s; 31 32@box-shadow-offset: .1em .1em .1em rgba(153,153,153,.5); // tabinclude 33@box-shadow: 0 0 .5em rgba(153,153,153,.5); // pagetoolbox hover 34@box-shadow-colored: 0 0 .5em fade(@ini_existing, 50%); 35@box-shadow-right-bottom: .1em .3rem .5em rgba(153,153,153,.5); 36@box-shadow-bottom: 0 .1em .5em rgba(153,153,153,.5); // qc-wrapper (breadcrumb), struct inline-editor 37 38/* + + + for programmers customizing + + + */ 39@fix_border-radius: 3px; // inputs, editbox (textarea), buttons, content, code, quicksearch, msg 40 41@toggle-showsidebar_width: 3.47rem; // shown sidebar after toggle 42 43@headericons-margin-xxs: .45rem; // screen xxs margin-top for header icons 44 45@page_padding-top: @margin-small; // padding-top for 'dokuwiki__content' 46@page-header_height: 2.8rem; // minimum: 2.8rem (height for breadcrumb, page-header, page-footer) 47@meta-box_height: (@page-header_height - @page_padding-top); 48@breadcrumb_height: @page-header_height; 49 50@formfield_min-height: 2rem; // min-height for input, textarea, select, keygen 51 52@code-background: #F6F6F6; /* code, pre, samp, kbd */ 53 54/* icons */ 55@noopentasks-background: #ECECEC; /* metabox tabs + num in icons + tabinclude */ 56@noopentasks-border: #BBB; /* metabox tabs + num in icons + code, pre, samp, kbd */ 57@noopentasks-color: #666; /* metabox tabs + num in icons + code, pre, samp, kbd */ 58@wikiicons-border: #CCC; /* usertools, breadcrumbs icons, pagetools box-hover */ 59 60/* navigation left */ 61@menu-margin-lg: 1.3rem; 62 63@quicksearch-button-color: @noopentasks-color; /* autosuggest, submit in quicksearch */ 64@suggestion-zebra: #EEE; 65 66/* edit mode */ 67@highlight-odd-ini_text: fade(@ini_background, 95%); 68@highlight-even-ini_text: fade(@ini_text, 5%); 69@color-editBox: #252525; // editmode for tables, revision states 70 71//@nolinkedicon-ini_background: fade(@ini_background_site, 10%); 72//@opacity-ini_nav_menu_color: fade(@ini_nav_menu_color, 40%); 73 74/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */ 75/* fonts */ 76/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */ 77@font-size-very-small: .73rem; 78@font-size-small: .88rem; 79@font-size-default: 1rem; 80@font-size-big: 1.5rem; 81@font-size-bigger: 1.75rem; 82 83@line-height-default: 125%; 84@line-height-big: 135%; 85@line-height-bigger: 140%; 86 87@font-weight-bold: 800; 88@font-weight-normal: 400; 89 90@font-scale-factor: .0769; 91 92@font-size-head6: @font-size-default; 93@font-size-head5: @font-size-default + @font-scale-factor; 94@font-size-head4: @font-size-default + (@font-scale-factor * 3); 95@font-size-head3: @font-size-default + (@font-scale-factor * 5); 96@font-size-head2: @font-size-default + (@font-scale-factor * 7); 97@font-size-head1: @font-size-default + (@font-scale-factor * 9); 98 99/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */ 100/* breakpoints */ 101/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */ 102@break-min-xxs: 480; 103@break-max-xxs: (@break-min-xxs - 1); 104 105@break-min-xs: 768; 106@break-max-xs: (@break-min-xs - 1); 107 108@break-min-sm: 992; 109@break-max-sm: (@break-min-sm - 1); 110 111@break-min-md: 1024; 112@break-max-md: (@break-min-md - 1); 113 114@break-min-lg: 1200; 115@break-max-lg: (@break-min-lg - 1); 116 117@break-min-xlg: 1440; 118@break-max-xlg: (@break-min-xlg - 1); 119 120@break-min-xxlg: 1600; 121@break-max-xxlg: (@break-min-xxlg - 1); 122 123/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */ 124/* media queries for breakpoints */ 125/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */ 126@screen_min-xxs: ~"only screen and (min-width: " ~"@{break-min-xxs}px)"; 127@screen_max-xxs: ~"only screen and (max-width: " ~"@{break-max-xxs}px)"; 128 129@screen_min-xs: ~"only screen and (min-width: " ~"@{break-min-xs}px)"; 130@screen_max-xs: ~"only screen and (max-width: " ~"@{break-max-xs}px)"; 131 132@screen_min-sm: ~"only screen and (min-width: " ~"@{break-min-sm}px)"; 133@screen_max-sm: ~"only screen and (max-width: " ~"@{break-max-sm}px)"; 134 135@screen_min-md: ~"only screen and (min-width: " ~"@{break-min-md}px)"; 136@screen_max-md: ~"only screen and (max-width: " ~"@{break-max-md}px)"; 137 138@screen_min-lg: ~"only screen and (min-width: " ~"@{break-min-lg}px)"; 139@screen_max-lg: ~"only screen and (max-width: " ~"@{break-max-lg}px)"; 140 141@screen_min-xlg: ~"only screen and (min-width: " ~"@{break-min-xlg}px)"; 142@screen_max-xlg: ~"only screen and (max-width: " ~"@{break-max-xlg}px)"; 143 144@screen_min-xxlg: ~"only screen and (min-width: " ~"@{break-min-xxlg}px)"; 145@screen_max-xxlg: ~"only screen and (max-width: " ~"@{break-max-xxlg}px)"; 146 147@screen_only-md: ~"only screen and (min-width: 800px) and (max-width: " ~"@{break-max-md}px)"; 148@screen_only-xlg: ~"only screen and (min-width: " ~"@{break-min-xlg}px) and (max-width: " ~"@{break-max-xxlg}px)"; 149@screen_md-xlg: ~"only screen and (min-width: " ~"@{break-min-md}px) and (max-width: " ~"@{break-max-xlg}px)"; 150@screen_md-lg: ~"only screen and (min-width: " ~"@{break-min-md}px) and (max-width: " ~"@{break-max-lg}px)"; 151@screen_xs-lg: ~"only screen and (min-width: " ~"@{break-min-xs}px) and (max-width: " ~"@{break-max-md}px)"; 152 153/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */ 154/* col width */ 155/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */ 156@c12: 100%; 157@c11: 91.66666667%; 158@c10: 83.33333333%; 159@c9: 75%; 160@c8: 66.66666667%; 161@c7: 58.33333333%; 162@c6: 50%; 163@c5: 41.66666667%; 164@c4: 33.33333333%; 165@c3: 25%; 166@c2: 16.66666667%; 167@c1: 8.33333333%; 168 169@grid-columns: 12; 170 171 172 173/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */ 174/* all media */ 175/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */ 176html, 177body { 178 .reset(); 179 font-size: 100.1%; 180} 181 182header, 183.nav-direct{ 184 .elementsReset(); 185} 186 187ol, 188ul { 189 list-style: none outside none; 190} 191 192blockquote, 193q { 194 quotes: none; 195} 196 197acronym { 198 cursor: help; 199 border-bottom: dotted 1px @ini_text; 200} 201 202*:focus { 203 outline: 0; 204} 205 206table{ 207 border-collapse: collapse; 208 border-spacing: 0; 209 empty-cells: show; 210 caption-side: top; 211} 212 213caption, 214th, 215td { 216 text-align: left; 217 vertical-align: top; 218} 219 220img { 221 display: block; 222 float: none; 223 border: none 0; 224 line-height: @line-height-default; 225} 226 227*, 228div, 229nav, 230header { 231 box-sizing: border-box; 232} 233 234header, 235footer, 236.container, 237.row, nav, 238nav > ul { 239 &::before, 240 &::after { 241 display: table; 242 content: ' '; 243 clear: both; 244 } 245} 246 247/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */ 248/* css behaviour */ 249/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */ 250.sr-out { 251 .sr-out(); 252} 253 254.sr-only { 255 .sr-only(); 256} 257 258.clearer{ 259 clear: both; 260} 261 262.structure, 263.none, 264.mobile-only { 265 display: none; 266} 267 268.mobile-only { 269 display: none; 270 271 @media @screen_max-md { 272 display: inline-block; 273 } 274} 275 276.mobile-hide { 277 display: inline-block; 278 279 @media @screen_max-md { 280 display: none; 281 } 282} 283 284.desktop-only { 285 display: none; 286 @media @screen_min-md { 287 display: inline-block; 288 } 289} 290 291/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */ 292/* screen only */ 293/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */ 294 295@media screen { 296 html { 297 -ms-text-size-adjust: 100%; 298 -webkit-text-size-adjust: 100%; 299 } 300 301 article, aside, details, figcaption, figure, footer, header, 302 main, menu, nav, section, summary { 303 display: block; 304 } 305 306 audio, 307 canvas, 308 progress, 309 video { 310 display: inline-block; 311 vertical-align: baseline; 312 } 313 314 audio:not([controls]) { 315 display: none; 316 height: 0; 317 } 318 319 [hidden], 320 template { 321 display: none; 322 } 323 324 a:active, 325 a:hover { 326 outline: 0; 327 } 328 329 abbr[title] { 330 border-bottom: 1px dotted; 331 } 332 333 small { 334 font-size: 80%; 335 } 336 337 svg:not(:root) { 338 overflow: hidden; 339 } 340 341 hr { 342 box-sizing: content-box; 343 height: 0; 344 } 345 346 pre { 347 overflow: auto; 348 } 349 350 code, 351 kbd, 352 pre, 353 samp { 354 font-family: monospace, monospace; 355 font-size: 1em; 356 } 357 358 button, 359 input, 360 optgroup, 361 select, 362 textarea { 363 color: inherit; 364 font: inherit; 365 margin: 0; 366 } 367 368 button, 369 select { 370 text-transform: none; 371 } 372 373 button { 374 overflow: visible; 375 } 376 377 input { 378 &[type="checkbox"], 379 &[type="radio"] { 380 box-sizing: border-box; 381 padding: 0; 382 } 383 384 &[type="number"] { 385 &::-webkit-inner-spin-button, 386 &::-webkit-outer-spin-button { 387 height: auto; 388 } 389 } 390 391 &[type="search"] { 392 -webkit-appearance: textfield; 393 box-sizing: content-box; 394 395 &::-webkit-search-cancel-button, 396 &::-webkit-search-decoration { 397 -webkit-appearance: none; 398 } 399 } 400 } 401 402 legend { 403 border: 0; 404 padding: 0; 405 } 406 407 textarea { 408 overflow: auto; 409 } 410 411 table { 412 border-collapse: collapse; 413 border-spacing: 0; 414 } 415 416 td, 417 th { 418 padding: 0; 419 } 420 421 html, body { 422 font-family: @font_family_screen; 423 color: @ini_text; 424 } 425} 426 427/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */ 428/* print only */ 429/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */ 430@media print { 431 body { 432 font-size: 12pt; 433 } 434} 435