You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 
 

166 lines
6.5 KiB

  1. /**
  2. * This file provides the basic vars
  3. */
  4. @font_family_screen: arial, sans-serif;
  5. @font_family_print: "Times New Roman", serif;
  6. @nav_direct_background: @ini_background;
  7. @nav_direct_color: @ini_existing;
  8. @background_darker: rgba(230,230,230, .2);
  9. @ini_sidebar_width: (100 - @ini_site_width) - 4;
  10. @height-context-bar: 50px;
  11. @margin-small: 1rem;
  12. @margin-default: 2rem;
  13. @margin-big: 3.07rem;
  14. @nav-margin: 1.3rem;
  15. @small-spacing: .3rem;
  16. @very-small-spacing: .2rem;
  17. @grid: @margin-small;
  18. @toggle-size: 1.75rem;
  19. @transition: ease-out .30s;
  20. @box-shadow-offset: .1em .1em .1em rgba(153,153,153,.5); // tabinclude
  21. @box-shadow: 0 0 .5em rgba(153,153,153,.5); // pagetoolbox hover
  22. @box-shadow-colored: 0 0 .5em fade(@ini_existing, 50%);
  23. @box-shadow-right-bottom: .1em .3rem .5em rgba(153,153,153,.5);
  24. @box-shadow-bottom: 0 .1em .5em rgba(153,153,153,.5); // qc-wrapper (breadcrumb), struct inline-editor
  25. /* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */
  26. /* for programmers customizing */
  27. /* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */
  28. @fix_border-radius: 3px; // inputs, editbox (textarea), buttons, content, code, quicksearch, msg
  29. @toggle-showsidebar_width: 3.47rem; // shown sidebar after toggle
  30. @headericons-margin-xxs: .45rem; // screen xxs margin-top for header icons
  31. @page_padding-top: @margin-small; // padding-top for 'dokuwiki__content'
  32. @page-header_height: 2.8rem; // minimum: 2.8rem (height for breadcrumb, page-header, page-footer)
  33. @meta-box_height: (@page-header_height - @page_padding-top);
  34. @breadcrumb_height: @page-header_height;
  35. @formfield_min-height: 2rem; // min-height for input, textarea, select, keygen
  36. @code-background: #F6F6F6; /* code, pre, samp, kbd */
  37. /* icons */
  38. @noopentasks-background: #ECECEC; /* metabox tabs + num in icons + tabinclude */
  39. @noopentasks-border: #BBB; /* metabox tabs + num in icons + code, pre, samp, kbd */
  40. @noopentasks-color: #666; /* metabox tabs + num in icons + code, pre, samp, kbd */
  41. @wikiicons-border: #CCC; /* usertools, breadcrumbs icons, pagetools box-hover */
  42. /* navigation left */
  43. @menu-margin-lg: 1.3rem;
  44. @quicksearch-button-color: @noopentasks-color; /* autosuggest, submit in quicksearch */
  45. @suggestion-zebra: #EEE;
  46. /* edit mode */
  47. @highlight-odd-ini_text: fade(@ini_background, 95%);
  48. @highlight-even-ini_text: fade(@ini_text, 5%);
  49. @color-editBox: #252525; // editmode for tables, revision states
  50. /* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */
  51. /* fonts */
  52. /* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */
  53. @font-size-very-small: .73rem;
  54. @font-size-small: .88rem;
  55. @font-size-default: 1rem;
  56. @font-size-big: 1.5rem;
  57. @font-size-bigger: 1.75rem;
  58. @line-height-default: 125%;
  59. @line-height-big: 135%;
  60. @line-height-bigger: 140%;
  61. @font-weight-bold: 800;
  62. @font-weight-normal: 400;
  63. @font-scale-factor: .0769;
  64. @font-size-head6: @font-size-default;
  65. @font-size-head5: @font-size-default + @font-scale-factor;
  66. @font-size-head4: @font-size-default + (@font-scale-factor * 3);
  67. @font-size-head3: @font-size-default + (@font-scale-factor * 5);
  68. @font-size-head2: @font-size-default + (@font-scale-factor * 7);
  69. @font-size-head1: @font-size-default + (@font-scale-factor * 9);
  70. /* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */
  71. /* breakpoints */
  72. /* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */
  73. @break-min-xxs: 480;
  74. @break-max-xxs: (@break-min-xxs - 1);
  75. @break-min-xs: 768;
  76. @break-max-xs: (@break-min-xs - 1);
  77. @break-min-sm: 992;
  78. @break-max-sm: (@break-min-sm - 1);
  79. @break-min-md: 1024;
  80. @break-max-md: (@break-min-md - 1);
  81. @break-min-lg: 1200;
  82. @break-max-lg: (@break-min-lg - 1);
  83. @break-min-xlg: 1440;
  84. @break-max-xlg: (@break-min-xlg - 1);
  85. @break-min-xxlg: 1600;
  86. @break-max-xxlg: (@break-min-xxlg - 1);
  87. /* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */
  88. /* media queries for breakpoints */
  89. /* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */
  90. @screen_min-xxs: ~"only screen and (min-width: " ~"@{break-min-xxs}px)";
  91. @screen_max-xxs: ~"only screen and (max-width: " ~"@{break-max-xxs}px)";
  92. @screen_min-xs: ~"only screen and (min-width: " ~"@{break-min-xs}px)";
  93. @screen_max-xs: ~"only screen and (max-width: " ~"@{break-max-xs}px)";
  94. @screen_min-sm: ~"only screen and (min-width: " ~"@{break-min-sm}px)";
  95. @screen_max-sm: ~"only screen and (max-width: " ~"@{break-max-sm}px)";
  96. @screen_min-md: ~"only screen and (min-width: " ~"@{break-min-md}px)";
  97. @screen_max-md: ~"only screen and (max-width: " ~"@{break-max-md}px)";
  98. @screen_min-lg: ~"only screen and (min-width: " ~"@{break-min-lg}px)";
  99. @screen_max-lg: ~"only screen and (max-width: " ~"@{break-max-lg}px)";
  100. @screen_min-xlg: ~"only screen and (min-width: " ~"@{break-min-xlg}px)";
  101. @screen_max-xlg: ~"only screen and (max-width: " ~"@{break-max-xlg}px)";
  102. @screen_min-xxlg: ~"only screen and (min-width: " ~"@{break-min-xxlg}px)";
  103. @screen_max-xxlg: ~"only screen and (max-width: " ~"@{break-max-xxlg}px)";
  104. @screen_only-md: ~"only screen and (min-width: 800px) and (max-width: " ~"@{break-max-md}px)";
  105. @screen_only-xlg: ~"only screen and (min-width: " ~"@{break-min-xlg}px) and (max-width: " ~"@{break-max-xxlg}px)";
  106. @screen_md-xlg: ~"only screen and (min-width: " ~"@{break-min-md}px) and (max-width: " ~"@{break-max-xlg}px)";
  107. @screen_md-lg: ~"only screen and (min-width: " ~"@{break-min-md}px) and (max-width: " ~"@{break-max-lg}px)";
  108. @screen_xs-lg: ~"only screen and (min-width: " ~"@{break-min-xs}px) and (max-width: " ~"@{break-max-md}px)";
  109. /* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */
  110. /* col width */
  111. /* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */
  112. @c12: 100%;
  113. @c11: 91.66666667%;
  114. @c10: 83.33333333%;
  115. @c9: 75%;
  116. @c8: 66.66666667%;
  117. @c7: 58.33333333%;
  118. @c6: 50%;
  119. @c5: 41.66666667%;
  120. @c4: 33.33333333%;
  121. @c3: 25%;
  122. @c2: 16.66666667%;
  123. @c1: 8.33333333%;
  124. @grid-columns: 12;