dokuwiki-template-sprintdoc.../css/base.less
Michael Große 3f9d4d521a
Merge branch 'master' into pageattributes
Adjusted some more files to account for changes in the over 100 commits
in master since the creation of this branch.

SPR-869
2017-04-11 16:13:02 +02:00

472 lines
10 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_content;
@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); // pagetools, tabinclude
@box-shadow: 0 0 .5em rgba(153,153,153,.5);
@box-shadow-colored: 0 0 .5em fade(@ini_existing, 50%);
@box-shadow-right-bottom: 0.1em 0.3rem 0.5em rgba(153,153,153,.5);
@box-shadow-bottom: 0 .1em .5em rgba(153,153,153,.5); // qc-wrapper - breadcrumb
/* + + + for programmers customizing + + + */
@fix_border-radius: 3px;
@toggle-showsidebar_width: 3.07rem; // shown sidebar after toggle
@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
//@metanav-ini_background: rgba(0, 0, 0, .1);
/* icons */
@noopentasks-background: #ECECEC; /* metabox tabs + num in icons + tabinclude + code, pre, samp, kbd */
@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 */
@quicksearch-button-color: @noopentasks-color; /* autosuggest, submit in quicksearch */
@suggestion-zebra: #EEE;
/* edit mode */
@highlight-odd-ini_text: fade(@ini_background_content, 95%);
@highlight-even-ini_text: fade(@ini_text, 5%);
@color-editBox: #252525; // editmode for tables
//@nolinkedicon-ini_background: fade(@ini_background, 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-lg: ~"only screen and (min-width: " ~"@{break-min-md}px) and (max-width: " ~"@{break-max-xlg}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;
}
}