8221fa277bIn the dokuwiki standard template __background__ is the variable defining the background-color of the content. It is one of the guaranteed placeholder that every template must provide. Hence we should use it with the way it is used in the default template, so other plugins can rely on it and look consistently. Also some other base-dokuwiki styles still use it accordingly, for example the footnotes. SPR-954
479 lines
11 KiB
Text
Executable file
479 lines
11 KiB
Text
Executable file
/**
|
|
* This file provides the basic vars and reset styles.
|
|
*
|
|
* @author Jana Deutschlaender <deutschlaender@cosmocode.de>
|
|
*/
|
|
|
|
|
|
/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */
|
|
/* global vars */
|
|
/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */
|
|
|
|
@font_family_screen: arial, sans-serif;
|
|
@font_family_print: "Times New Roman", serif;
|
|
|
|
@nav_direct_background: @ini_background;
|
|
@nav_direct_color: @ini_existing;
|
|
|
|
@ini_sidebar_width: (100 - @ini_site_width) - 4;
|
|
|
|
@height-context-bar: 50px;
|
|
|
|
@margin-small: 1rem;
|
|
@margin-default: 2rem;
|
|
@margin-big: 3.07rem;
|
|
|
|
@small-spacing: .3rem;
|
|
@very-small-spacing: .2rem;
|
|
|
|
@grid: @margin-small;
|
|
@toggle-size: 1.75rem;
|
|
|
|
@transition: ease-out .30s;
|
|
|
|
@box-shadow-offset: .1em .1em .1em rgba(153,153,153,.5); // tabinclude
|
|
@box-shadow: 0 0 .5em rgba(153,153,153,.5); // pagetoolbox hover
|
|
@box-shadow-colored: 0 0 .5em fade(@ini_existing, 50%);
|
|
@box-shadow-right-bottom: .1em .3rem .5em rgba(153,153,153,.5);
|
|
@box-shadow-bottom: 0 .1em .5em rgba(153,153,153,.5); // qc-wrapper (breadcrumb), struct inline-editor
|
|
|
|
|
|
/* + + + for programmers customizing + + + */
|
|
|
|
@fix_border-radius: 3px; // inputs, editbox (textarea), buttons, content, code, quicksearch, msg
|
|
|
|
@toggle-showsidebar_width: 3.07rem; // shown sidebar after toggle
|
|
|
|
@headericons-margin-xxs: .45rem; // screen xxs margin-top for header icons
|
|
|
|
@page_padding-top: @margin-small; // padding-top for 'dokuwiki__content'
|
|
@page-header_height: 2.8rem; // minimum: 2.8rem (height for breadcrumb, page-header, page-footer)
|
|
@meta-box_height: (@page-header_height - @page_padding-top);
|
|
@breadcrumb_height: @page-header_height;
|
|
|
|
@formfield_min-height: 2rem; // min-height for input, textarea, select, keygen
|
|
|
|
@code-background: #F6F6F6; /* code, pre, samp, kbd */
|
|
|
|
|
|
/* icons */
|
|
@noopentasks-background: #ECECEC; /* metabox tabs + num in icons + tabinclude */
|
|
@noopentasks-border: #BBB; /* metabox tabs + num in icons + code, pre, samp, kbd */
|
|
@noopentasks-color: #666; /* metabox tabs + num in icons + code, pre, samp, kbd */
|
|
@wikiicons-border: #CCC; /* usertools, breadcrumbs icons, pagetools box-hover */
|
|
|
|
|
|
|
|
/* navigation left */
|
|
@menu-margin-lg: 1.3rem;
|
|
|
|
@quicksearch-button-color: @noopentasks-color; /* autosuggest, submit in quicksearch */
|
|
@suggestion-zebra: #EEE;
|
|
|
|
|
|
/* edit mode */
|
|
@highlight-odd-ini_text: fade(@ini_background, 95%);
|
|
@highlight-even-ini_text: fade(@ini_text, 5%);
|
|
@color-editBox: #252525; // editmode for tables, revision states
|
|
|
|
|
|
//@nolinkedicon-ini_background: fade(@ini_background_site, 10%);
|
|
//@opacity-ini_nav_menu_color: fade(@ini_nav_menu_color, 40%);
|
|
|
|
|
|
/* + + + + + + + + + + + + + + + + + + + + + + + + + + */
|
|
/* fonts */
|
|
|
|
@font-size-very-small: .73rem;
|
|
@font-size-small: .88rem;
|
|
@font-size-default: 1rem;
|
|
@font-size-big: 1.5rem;
|
|
@font-size-bigger: 1.75rem;
|
|
|
|
@line-height-default: 125%;
|
|
@line-height-big: 135%;
|
|
@line-height-bigger: 140%;
|
|
|
|
@font-weight-bold: 800;
|
|
@font-weight-normal: 400;
|
|
|
|
@font-scale-factor: .0769;
|
|
|
|
@font-size-head6: @font-size-default;
|
|
@font-size-head5: @font-size-default + @font-scale-factor;
|
|
@font-size-head4: @font-size-default + (@font-scale-factor * 3);
|
|
@font-size-head3: @font-size-default + (@font-scale-factor * 5);
|
|
@font-size-head2: @font-size-default + (@font-scale-factor * 7);
|
|
@font-size-head1: @font-size-default + (@font-scale-factor * 9);
|
|
|
|
|
|
/* + + + + + + + + + + + + + + + + + + + + + + + + + + */
|
|
/* breakpoints */
|
|
|
|
@break-min-xxs: 480;
|
|
@break-max-xxs: (@break-min-xxs - 1);
|
|
|
|
@break-min-xs: 768;
|
|
@break-max-xs: (@break-min-xs - 1);
|
|
|
|
@break-min-sm: 992;
|
|
@break-max-sm: (@break-min-sm - 1);
|
|
|
|
@break-min-md: 1024;
|
|
@break-max-md: (@break-min-md - 1);
|
|
|
|
@break-min-lg: 1200;
|
|
@break-max-lg: (@break-min-lg - 1);
|
|
|
|
@break-min-xlg: 1440;
|
|
@break-max-xlg: (@break-min-xlg - 1);
|
|
|
|
@break-min-xxlg: 1600;
|
|
@break-max-xxlg: (@break-min-xxlg - 1);
|
|
|
|
|
|
/* + + + + + + + + + + + + + + + + + + + + + + + + + + */
|
|
/* media queries for breakpoints */
|
|
|
|
@screen_min-xxs: ~"only screen and (min-width: " ~"@{break-min-xxs}px)";
|
|
@screen_max-xxs: ~"only screen and (max-width: " ~"@{break-max-xxs}px)";
|
|
|
|
@screen_min-xs: ~"only screen and (min-width: " ~"@{break-min-xs}px)";
|
|
@screen_max-xs: ~"only screen and (max-width: " ~"@{break-max-xs}px)";
|
|
|
|
@screen_min-sm: ~"only screen and (min-width: " ~"@{break-min-sm}px)";
|
|
@screen_max-sm: ~"only screen and (max-width: " ~"@{break-max-sm}px)";
|
|
|
|
@screen_min-md: ~"only screen and (min-width: " ~"@{break-min-md}px)";
|
|
@screen_max-md: ~"only screen and (max-width: " ~"@{break-max-md}px)";
|
|
|
|
@screen_min-lg: ~"only screen and (min-width: " ~"@{break-min-lg}px)";
|
|
@screen_max-lg: ~"only screen and (max-width: " ~"@{break-max-lg}px)";
|
|
|
|
@screen_min-xlg: ~"only screen and (min-width: " ~"@{break-min-xlg}px)";
|
|
@screen_max-xlg: ~"only screen and (max-width: " ~"@{break-max-xlg}px)";
|
|
|
|
@screen_min-xxlg: ~"only screen and (min-width: " ~"@{break-min-xxlg}px)";
|
|
@screen_max-xxlg: ~"only screen and (max-width: " ~"@{break-max-xxlg}px)";
|
|
|
|
@screen_only-md: ~"only screen and (min-width: 800px) and (max-width: " ~"@{break-max-md}px)";
|
|
@screen_only-xlg: ~"only screen and (min-width: " ~"@{break-min-xlg}px) and (max-width: " ~"@{break-max-xxlg}px)";
|
|
@screen_md-xlg: ~"only screen and (min-width: " ~"@{break-min-md}px) and (max-width: " ~"@{break-max-xlg}px)";
|
|
@screen_md-lg: ~"only screen and (min-width: " ~"@{break-min-md}px) and (max-width: " ~"@{break-max-lg}px)";
|
|
@screen_xs-lg: ~"only screen and (min-width: " ~"@{break-min-xs}px) and (max-width: " ~"@{break-max-md}px)";
|
|
|
|
|
|
/* + + + + + + + + + + + + + + + + + + + + + + + + + + */
|
|
/* col width */
|
|
|
|
@c12: 100%;
|
|
@c11: 91.66666667%;
|
|
@c10: 83.33333333%;
|
|
@c9: 75%;
|
|
@c8: 66.66666667%;
|
|
@c7: 58.33333333%;
|
|
@c6: 50%;
|
|
@c5: 41.66666667%;
|
|
@c4: 33.33333333%;
|
|
@c3: 25%;
|
|
@c2: 16.66666667%;
|
|
@c1: 8.33333333%;
|
|
|
|
@grid-columns: 12;
|
|
|
|
|
|
/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */
|
|
/* all media */
|
|
/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */
|
|
|
|
html,
|
|
body {
|
|
.reset();
|
|
font-size: 100.1%;
|
|
}
|
|
|
|
header,
|
|
.nav-direct{
|
|
.elementsReset();
|
|
}
|
|
|
|
div, span, object,
|
|
h1, h2, h3, h4, h5, h6, p, blockquote,
|
|
a, abbr, em,acronym, img, strong,
|
|
dl, dt, dd, ol, ul, li,
|
|
fieldset, form, label, legend,
|
|
table, caption, tbody, tfoot, thead, tr, th, td,
|
|
input, select, option, textarea, button {
|
|
font-size: 1rem;
|
|
line-height: 100%;
|
|
}
|
|
|
|
|
|
ol,
|
|
ul {
|
|
list-style: none outside none;
|
|
}
|
|
|
|
blockquote,
|
|
q {
|
|
quotes: none;
|
|
}
|
|
|
|
acronym {
|
|
cursor: help;
|
|
border-bottom: dotted 1px @ini_text;
|
|
}
|
|
|
|
*:focus {
|
|
outline: 0;
|
|
}
|
|
|
|
table{
|
|
border-collapse: collapse;
|
|
border-spacing: 0;
|
|
empty-cells: show;
|
|
caption-side: top;
|
|
}
|
|
|
|
caption,
|
|
th,
|
|
td {
|
|
text-align: left;
|
|
vertical-align: top;
|
|
}
|
|
|
|
img {
|
|
display: block;
|
|
float: none;
|
|
border: none 0;
|
|
line-height: @line-height-default;
|
|
}
|
|
|
|
*,
|
|
div,
|
|
nav,
|
|
header {
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
header,
|
|
footer,
|
|
.container,
|
|
.row, nav,
|
|
nav > ul {
|
|
&::before,
|
|
&::after {
|
|
display: table;
|
|
content: ' ';
|
|
clear: both;
|
|
}
|
|
}
|
|
|
|
|
|
/* + + + + + + + + + + + + + + + + + + + + + + + + + + */
|
|
/* css behaviour */
|
|
|
|
.sr-out {
|
|
.sr-out();
|
|
}
|
|
|
|
.sr-only {
|
|
.sr-only();
|
|
}
|
|
|
|
.clearer{
|
|
clear: both;
|
|
}
|
|
|
|
.structure,
|
|
.none,
|
|
.mobile-only {
|
|
display: none;
|
|
}
|
|
|
|
.mobile-only {
|
|
display: none;
|
|
|
|
@media @screen_max-md {
|
|
display: inline-block;
|
|
}
|
|
}
|
|
|
|
.mobile-hide {
|
|
display: inline-block;
|
|
|
|
@media @screen_max-md {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
.desktop-only {
|
|
display: none;
|
|
@media @screen_min-md {
|
|
display: inline-block;
|
|
}
|
|
}
|
|
|
|
|
|
/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */
|
|
/* screen only */
|
|
/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */
|
|
|
|
@media screen {
|
|
html {
|
|
-ms-text-size-adjust: 100%;
|
|
-webkit-text-size-adjust: 100%;
|
|
}
|
|
|
|
article, aside, details, figcaption, figure, footer, header,
|
|
main, menu, nav, section, summary {
|
|
display: block;
|
|
}
|
|
|
|
audio,
|
|
canvas,
|
|
progress,
|
|
video {
|
|
display: inline-block;
|
|
vertical-align: baseline;
|
|
}
|
|
|
|
audio:not([controls]) {
|
|
display: none;
|
|
height: 0;
|
|
}
|
|
|
|
[hidden],
|
|
template {
|
|
display: none;
|
|
}
|
|
|
|
a:active,
|
|
a:hover {
|
|
outline: 0;
|
|
}
|
|
|
|
abbr[title] {
|
|
border-bottom: 1px dotted;
|
|
}
|
|
|
|
small {
|
|
font-size: 80%;
|
|
}
|
|
|
|
sub,
|
|
sup {
|
|
font-size: 75%;
|
|
line-height: 0;
|
|
position: relative;
|
|
vertical-align: baseline;
|
|
}
|
|
|
|
sup {
|
|
top: -0.5em;
|
|
}
|
|
|
|
sub {
|
|
bottom: -0.25em;
|
|
}
|
|
|
|
svg:not(:root) {
|
|
overflow: hidden;
|
|
}
|
|
|
|
hr {
|
|
box-sizing: content-box;
|
|
height: 0;
|
|
}
|
|
|
|
pre {
|
|
overflow: auto;
|
|
}
|
|
|
|
code,
|
|
kbd,
|
|
pre,
|
|
samp {
|
|
font-family: monospace, monospace;
|
|
font-size: 1em;
|
|
}
|
|
|
|
button,
|
|
input,
|
|
optgroup,
|
|
select,
|
|
textarea {
|
|
color: inherit;
|
|
font: inherit;
|
|
margin: 0;
|
|
}
|
|
|
|
button,
|
|
select {
|
|
text-transform: none;
|
|
}
|
|
|
|
button {
|
|
overflow: visible;
|
|
}
|
|
|
|
input {
|
|
&[type="checkbox"],
|
|
&[type="radio"] {
|
|
box-sizing: border-box;
|
|
padding: 0;
|
|
}
|
|
|
|
&[type="number"] {
|
|
&::-webkit-inner-spin-button,
|
|
&::-webkit-outer-spin-button {
|
|
height: auto;
|
|
}
|
|
}
|
|
|
|
&[type="search"] {
|
|
-webkit-appearance: textfield;
|
|
box-sizing: content-box;
|
|
|
|
&::-webkit-search-cancel-button,
|
|
&::-webkit-search-decoration {
|
|
-webkit-appearance: none;
|
|
}
|
|
}
|
|
}
|
|
|
|
legend {
|
|
border: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
textarea {
|
|
overflow: auto;
|
|
}
|
|
|
|
table {
|
|
border-collapse: collapse;
|
|
border-spacing: 0;
|
|
}
|
|
|
|
td,
|
|
th {
|
|
padding: 0;
|
|
}
|
|
|
|
html, body {
|
|
font-family: @font_family_screen;
|
|
color: @ini_text;
|
|
}
|
|
}
|
|
|
|
|
|
/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */
|
|
/* print only */
|
|
/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */
|
|
|
|
@media print {
|
|
body {
|
|
font-size: 12pt;
|
|
}
|
|
}
|