436 lines
9.4 KiB
Text
436 lines
9.4 KiB
Text
/**
|
|
* This contains the content styling
|
|
* @author Sascha Leib <sascha@leib.be>
|
|
*/
|
|
|
|
body {
|
|
overflow: hidden auto;
|
|
}
|
|
|
|
.dokuwiki main {
|
|
p,
|
|
blockquote,
|
|
div.table {
|
|
margin-bottom: .5em;
|
|
margin-top: .5em;
|
|
}
|
|
|
|
/* headlines: */
|
|
h1, h2, h3, h4, h5, h6 {
|
|
font-family: @ini_headline_fonts;
|
|
color: @ini_headlines;
|
|
margin: 1em 0 1em 0;
|
|
line-height: 1.1em;
|
|
}
|
|
h1 { font-size: 2em; }
|
|
h2 { font-size: 1.5em; }
|
|
h3 { font-size: 1.125em; }
|
|
h4 { font-size: 1em; }
|
|
h5 { font-size: .875em; }
|
|
h6 { font-size: .75em; }
|
|
h1 *, h2 *, h3 *, h4 *, h5 *, h6 * {
|
|
font-family: inherit;
|
|
font-size: inherit;
|
|
color: inherit;
|
|
margin: inherit;
|
|
line-height: inherit;
|
|
}
|
|
/* Definition Terms are like Headlines in many ways */
|
|
dl dt {
|
|
font-family: @ini_headline_fonts;
|
|
color: @ini_headlines;
|
|
}
|
|
dl.compact dl { /* except in compact mode */
|
|
font-weight: 600;
|
|
font-family: inherit;
|
|
color: inherit;
|
|
}
|
|
|
|
/* make strike-through and underline more useful! */
|
|
u {
|
|
-webkit-text-decoration-color: #F30;
|
|
-webkit-text-decoration-line: underline;
|
|
-webkit-text-decoration-style: wavy;
|
|
-webkit-text-decoration-thickness: .7pt;
|
|
text-decoration: underline #F30 wavy .7pt;
|
|
}
|
|
s, del {
|
|
-webkit-text-decoration-color: rgba(255,0,0,.5);
|
|
-webkit-text-decoration-line: line-through;
|
|
-webkit-text-decoration-style: solid;
|
|
-webkit-text-decoration-thickness: .1em;
|
|
text-decoration: line-through rgba(255,0,0,.5) solid .1em;
|
|
}
|
|
|
|
/* lists: */
|
|
ul, ol {
|
|
margin: 0 2em 1em 1em;
|
|
padding-left: 1.75em;
|
|
}
|
|
ul { list-style: square outside; }
|
|
ul ul { list-style-type: disc; }
|
|
ul ul ul { list-style-type: none; }
|
|
ul ul ul li {margin-left: 1em; }
|
|
ul ul ul li:before { display: block; content: '\2043'; text-align:center; float: left; width: 1em; margin-left: -1em; }
|
|
ul ul ul ul li:before { content: '\FE63' }
|
|
ul ul ul ul ul li:before { content: '\00B7' }
|
|
|
|
/* numbered lists vary by nestling: */
|
|
ol { list-style: decimal outside; }
|
|
ol ol { list-style-type: lower-alpha; }
|
|
ol ol ol { list-style-type: lower-roman; }
|
|
ol ol ol ol { list-style-type: lower-greek; }
|
|
ol ol ol ol ol { list-style-type: decimal-leading-zero; font-size: .96em;}
|
|
ol ol ol ol ol ol { list-style-type: upper-alpha; font-size: .96em;}
|
|
ul ul ul ol li { margin-left: 0; }
|
|
ul ul ul ol li:before { display: none; content: ''; }
|
|
|
|
li::marker {
|
|
color: #666;
|
|
}
|
|
|
|
ul ul, ul ol,
|
|
ol ul, ol ol {
|
|
margin-bottom: 0;
|
|
padding-left: .25em;
|
|
}
|
|
|
|
/* horizontal rules */
|
|
hr {
|
|
border: #666 solid 0;
|
|
border-top-width: 1pt;
|
|
height: 0;
|
|
margin: 3pt 0;
|
|
}
|
|
|
|
tt, blockquote tt,
|
|
pre, pre *,
|
|
code, code *,
|
|
blockquote code {
|
|
font-family: @ini_mono_fonts;
|
|
}
|
|
code, blockquote code {
|
|
border: @ini_border solid 1px;
|
|
border-radius: 3pt;
|
|
padding: 0 2pt;
|
|
}
|
|
pre {
|
|
overflow-x: auto;
|
|
white-space: pre-wrap;
|
|
word-wrap: normal;
|
|
border: 1px solid @ini_border;
|
|
border-radius: 2px;
|
|
box-shadow: inset 0 0 .5em @ini_border;
|
|
padding: .3em;
|
|
}
|
|
|
|
/* overwrite pre styling for CodeMirror plugin: */
|
|
.CodeMirror pre {
|
|
max-width: 100%;
|
|
}
|
|
/* quotes: */
|
|
blockquote {
|
|
border: @ini_blockquote solid 0;
|
|
border-width: 0 0 0 .4em;
|
|
border-radius: .5em;
|
|
padding: .25em 0 .25em .75em;
|
|
margin: 0 2em 1em 1em;
|
|
font-family: @ini_alt_fonts;
|
|
font-size: @ini_alt_font_size;
|
|
hanging-punctuation: first allow-end;
|
|
}
|
|
blockquote * {
|
|
font-family: @ini_alt_fonts;
|
|
}
|
|
|
|
svg {
|
|
display: block;
|
|
fill-rule: evenodd;
|
|
clip-rule: evenodd;
|
|
stroke-linejoin: round;
|
|
stroke-miterlimit: 1.5;
|
|
}
|
|
svg.math {
|
|
margin-left: 15px
|
|
}
|
|
|
|
/* tables */
|
|
div.table {
|
|
overflow-x: auto;
|
|
}
|
|
table {
|
|
& {
|
|
border-collapse: collapse;
|
|
empty-cells: show;
|
|
border-spacing: 0;
|
|
font-size: smaller;
|
|
border: 1px solid @ini_border;
|
|
margin-bottom: 1em;
|
|
}
|
|
th, td {
|
|
padding: .5em .3em;
|
|
vertical-align: top;
|
|
border: 1px solid @ini_border;
|
|
line-height: 1.25em;
|
|
}
|
|
th.centeralign, td.centeralign {
|
|
text-align: center;
|
|
}
|
|
th.rightalign, td.rightalign {
|
|
text-align: right;
|
|
}
|
|
th {
|
|
font-weight: bold;
|
|
background-color: @ini_background_alt;
|
|
text-align: left;
|
|
}
|
|
&.inline {
|
|
min-width: 50%;
|
|
margin-bottom: 0;
|
|
}
|
|
&.inline tr:hover td {
|
|
background-color: @ini_background_alt;
|
|
}
|
|
&.inline tr:hover th {
|
|
background-color: @ini_border;
|
|
}
|
|
}
|
|
|
|
/* asides */
|
|
aside {
|
|
& > * {
|
|
margin: .25em 0;
|
|
}
|
|
&.float-left, &.float-right {
|
|
width: 50%;
|
|
max-width: 220px;
|
|
min-width: 150px;
|
|
font-size: smaller;
|
|
line-height: 1.5em;
|
|
}
|
|
&.float-left {
|
|
clear: left;
|
|
float: left;
|
|
margin-right: .5em;
|
|
}
|
|
&.float-right {
|
|
clear: right;
|
|
float: right;
|
|
margin-left: .5em;
|
|
}
|
|
& footer {
|
|
line-height: 1.1em;
|
|
}
|
|
}
|
|
|
|
/* images */
|
|
img {
|
|
max-width: 100%;
|
|
height: auto;
|
|
}
|
|
|
|
/* abbbreviations a reslightly widened and made smaller */
|
|
abbr {
|
|
letter-spacing: .01em;
|
|
font-size: 97%;
|
|
}
|
|
|
|
/* extra styles for ad-hoc tags: */
|
|
kbd {
|
|
padding: .15em .25em;
|
|
margin: 0 .1em;
|
|
font-size: 85%;
|
|
color: @ini_headlines;
|
|
border: @ini_border solid 1px;
|
|
border-radius: .25em;
|
|
display: inline-block;
|
|
white-space: nowrap;
|
|
line-height: 1.2em;
|
|
letter-spacing: .03em;
|
|
}
|
|
kbd kbd {
|
|
background-color: @ini_background_alt;
|
|
-webkit-box-shadow: 0 .1em 0 rgba(0,0,0,0.25);
|
|
box-shadow: 0 .1em 0 rgba(0,0,0,0.25);
|
|
font-weight: bold;
|
|
}
|
|
samp {
|
|
background-color: @ini_background_alt;
|
|
font-family: @ini_mono_fonts;
|
|
white-space: nowrap;
|
|
}
|
|
mark {
|
|
background-color: @ini_highlight;
|
|
}
|
|
|
|
/* box / notification classes */
|
|
.box, .wrap_box,
|
|
.outline, .wrap_outline {
|
|
padding: 1pt .5em;
|
|
margin: .5em 0;
|
|
}
|
|
.box, .wrap_box {
|
|
background-color: @ini_background_alt;
|
|
}
|
|
.rounded, .wrap_rounded {
|
|
border-radius: .5em;
|
|
}
|
|
|
|
/* hyphenation only in the main-content */
|
|
p, li {
|
|
word-wrap: break-word;
|
|
overflow-wrap: break-word;
|
|
hyphens: auto;
|
|
-ms-hyphens: auto;
|
|
-moz-hyphens: auto;
|
|
-webkit-hyphens: auto;
|
|
hyphenate-limit-chars: 6 2 3;
|
|
}
|
|
|
|
/* footnotes section */
|
|
div.footnotes {
|
|
border-top: transparent 0 none;
|
|
margin-top: 1.5em;
|
|
font-size: smaller;
|
|
}
|
|
div.footnotes:before {
|
|
content: ' ';
|
|
display: block;
|
|
width: 33%;
|
|
min-width: 5em;
|
|
border-top: @ini_border solid 1.5pt;
|
|
height: .5em;
|
|
}
|
|
div.footnotes div.fn {
|
|
margin-left: 1em;
|
|
}
|
|
}
|
|
|
|
/* footnotes and similar poups: */
|
|
.JSpopup {
|
|
background-color: @ini_background;
|
|
color: @ini_text;
|
|
border: @ini_border solid 1px;
|
|
padding: .25em;
|
|
box-shadow: 2px 2px 4px rgba(0, 0, 0, .5);
|
|
}
|
|
|
|
|
|
/* on the homepage only, reduce the H1 top margin: */
|
|
body.home h1:first-child { margin-top: .5em; }
|
|
|
|
|
|
[dir=rtl] {
|
|
main {
|
|
blockquote {
|
|
border-width: 0 .4em 0 0;
|
|
padding: .25em .75em .25em 0;
|
|
margin: 0 1em 1em 2em;
|
|
}
|
|
|
|
ul, ol {
|
|
margin-left: 0;
|
|
margin-right: .5em;
|
|
padding-left: 0;
|
|
padding-right: .25em;
|
|
}
|
|
ul li, ol li {
|
|
width: 100%;
|
|
}
|
|
|
|
ul ul ul li:before {
|
|
float: right;
|
|
margin-left: 0;
|
|
margin-right: -1em;
|
|
}
|
|
|
|
}
|
|
}
|
|
|
|
/* tablet break point: */
|
|
@media (max-width: @ini_tablet_width) {
|
|
|
|
/* tighter hyphenation for narrower screens */
|
|
#main-content p, #main-content li {
|
|
hyphenate-limit-chars: 5 2 2;
|
|
}
|
|
}
|
|
|
|
/* phone break point: */
|
|
@media (max-width: @ini_phone_width) {
|
|
|
|
.nophone, .wrap_nophone {
|
|
display: none !important;
|
|
}
|
|
|
|
main aside {
|
|
width: 100%;
|
|
max-width: initial;
|
|
float: none;
|
|
margin-left: 0;
|
|
}
|
|
}
|
|
|
|
/* dark mode overrides */
|
|
@media (prefers-color-scheme: dark) {
|
|
|
|
body.darkmode {
|
|
main {
|
|
h1, h2, h3, h4, h5, h6, dt { color: @ini_headlines_dark; }
|
|
table {
|
|
& { border-color: @ini_border_dark; }
|
|
&.inline tr:hover td,
|
|
&.inline tr:hover th { background-color: @ini_border_dark; }
|
|
th { background-color: rgba(255,255,255,0.05); }
|
|
}
|
|
#acl_manager table tr:hover { background-color: rgba(255,255,255,0.1); }
|
|
code,
|
|
blockquote { border-color: @ini_blockquote_dark }
|
|
blockquote code { border-color: @ini_border_dark; }
|
|
kbd {color: @ini_headlines_dark;border-color: @ini_border_dark;}
|
|
kbd kbd {background-color: @ini_background_alt_dark;}
|
|
samp {background-color: @ini_background_alt_dark;}
|
|
pre {border-color: @ini_border_dark; box-shadow: inset 0 0 .5em @ini_background_site_dark;}
|
|
dl dt { color: @ini_headlines_dark; }
|
|
|
|
/* overrides for PRE blocks: */
|
|
pre.code {
|
|
.me1 {color: #3C3;}
|
|
.kw2 {color: #0C7;}
|
|
.kw3 {color: #0CF;}
|
|
}
|
|
|
|
div.error {background-color: #4B2F36; color: #FFB3D2; border-color: #743E4C;}
|
|
div.success {background-color: #28381F; color: #FBE2A1; border-color: #37562E;}
|
|
div.notify {background-color: #42381F; color: #FCE2A1; border-color: #56562E;}
|
|
|
|
/* colour overrides for Wrap Plugin */
|
|
.wrap_hi {background-color: @ini_highlight; color: #000;}
|
|
.wrap_box, .box {background-color: @ini_background_alt_dark; color: inherit;}
|
|
.wrap_outline, .outline {border-color: @ini_border_dark; color: inherit}
|
|
.red, .wrap_red { color: #E53935; }
|
|
.green, .wrap_green { color: #00E676; }
|
|
.wrap_tip {background-color: #47391B;}
|
|
.wrap_important {background-color: #603000;}
|
|
.wrap_alert, .wrap_danger {background-color: #4C0909;}
|
|
.wrap_help, .wrap_info {background-color: #112847;}
|
|
.wrap_download, .wrap_safety {background-color: #1C3802;}
|
|
.wrap_todo, .wrap_notice {background-color: #004A7F;}
|
|
.wrap_caution {background-color: #fcffaa;}
|
|
.wrap_warning {background-color: #FFC9AA;}
|
|
|
|
/* MathML fixes */
|
|
merror { background-color: @ini_highlight; color: red; }
|
|
|
|
}
|
|
|
|
/* footnote and similar poups: */
|
|
.JSpopup {
|
|
background-color: @ini_background_site_dark;
|
|
color: @ini_text_dark;
|
|
border-color: @ini_border_dark;
|
|
box-shadow: 2px 2px 4px #000;
|
|
}
|
|
}
|
|
}
|
|
|