1308 lines
No EOL
24 KiB
Text
1308 lines
No EOL
24 KiB
Text
/**
|
|
* This contains the most basic layouts and styles
|
|
* @author Sascha Leib <sascha@leib.be>
|
|
*/
|
|
|
|
html, body, * {
|
|
font-family: @ini_default_fonts;
|
|
margin: 0;
|
|
padding: 0;
|
|
scrollbar-gutter: auto;
|
|
scrollbar-width: thin;
|
|
scrollbar-color: @ini_blockquote @ini_background_site;
|
|
}
|
|
html {
|
|
scroll-behavior: smooth;
|
|
}
|
|
body {
|
|
background-color: @ini_background_site;
|
|
font-size: @ini_default_font_size;
|
|
}
|
|
|
|
/* scrollbar styles */
|
|
::-webkit-scrollbar {
|
|
width: .5rem;
|
|
}
|
|
::-webkit-scrollbar-track {
|
|
background: @ini_background_site;
|
|
}
|
|
::-webkit-scrollbar-thumb {
|
|
border-radius: .25rem;
|
|
background: @ini_blockquote;
|
|
}
|
|
::-webkit-scrollbar-thumb:hover {
|
|
background: @ini_separator;
|
|
}
|
|
|
|
#skip-link {
|
|
& {
|
|
position: fixed;
|
|
left: 4pt;
|
|
top: 4pt;
|
|
width: auto;
|
|
z-index: 9999;
|
|
}
|
|
a {
|
|
position: absolute;
|
|
background-color: @ini_background;
|
|
font-size: 1.25em;
|
|
color: @ini_link;
|
|
height: 1px;
|
|
overflow: hidden;
|
|
clip: rect(1px, 1px, 1px, 1px);
|
|
}
|
|
a:focus {
|
|
position: static;
|
|
display: inline-block;
|
|
padding: 8px;
|
|
height: auto;
|
|
clip: auto;
|
|
overflow: visible;
|
|
outline: 2px solid @ini_focus_color;
|
|
}
|
|
&:focus {
|
|
display: block;
|
|
}
|
|
}
|
|
|
|
.sronly {
|
|
position: absolute;
|
|
width: 0;
|
|
height: 0;
|
|
overflow: hidden;
|
|
display: block;
|
|
}
|
|
.printonly,
|
|
.print-only,
|
|
.wrap_print-only {
|
|
display: none;
|
|
}
|
|
div.no {
|
|
display: inline;
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
#globalTools {
|
|
& {
|
|
grid-column: 2 / span 2;
|
|
grid-row: 1;
|
|
text-align: right;
|
|
font-size: 10pt;
|
|
}
|
|
a:link {
|
|
text-decoration: none;
|
|
}
|
|
}
|
|
#gSiteTools {
|
|
& {
|
|
justify-self: start;
|
|
}
|
|
& select {
|
|
display: none;
|
|
}
|
|
}
|
|
#gUserTools {
|
|
& {
|
|
justify-self: end;
|
|
padding-right: .5rem;
|
|
}
|
|
ul {
|
|
list-style: none inside;
|
|
display: block;
|
|
}
|
|
ul li {
|
|
display: inline;
|
|
}
|
|
ul li::before {
|
|
content: '\00B7';
|
|
display: inline-block;
|
|
width: .35em;
|
|
padding-right: .35em;
|
|
}
|
|
ul li:first-child::before {
|
|
content: '';
|
|
}
|
|
}
|
|
|
|
#header-layout,
|
|
#footer-layout {
|
|
width: 100%;
|
|
}
|
|
|
|
#header-layout > header {
|
|
width: 100%;
|
|
max-width: @ini_site_width;
|
|
margin: 0 auto;
|
|
padding-top: .25rem;
|
|
display: grid;
|
|
grid-template-columns: @ini_sidebar_width auto @ini_sidebar_width;
|
|
grid-template-rows: auto auto auto;
|
|
justify-items: stretch;
|
|
}
|
|
|
|
#siteLogo {
|
|
& {
|
|
grid-column: 1;
|
|
grid-row: 1 / span 3;
|
|
column-gap: 8px;
|
|
padding: 0 .25em 0 .5em;
|
|
display: grid;
|
|
grid-template-columns: 64px auto;
|
|
grid-template-rows: auto auto;
|
|
}
|
|
.logo {
|
|
margin-top: 3pt;
|
|
grid-column: 1;
|
|
grid-row: 1 / span 2;
|
|
}
|
|
.logo img {
|
|
width: 64px;
|
|
height: auto;
|
|
}
|
|
.title,
|
|
.claim {
|
|
grid-column: 2;
|
|
grid-row: 2;
|
|
align-self: start;
|
|
font-size: 10pt;
|
|
padding-right: .5em;
|
|
max-width: e("calc(") @ini_sidebar_width e(" - 80px)")
|
|
}
|
|
.title {
|
|
grid-row: 1;
|
|
align-self: center;
|
|
font-size: 14pt;
|
|
line-height: 1em;
|
|
margin: 0;
|
|
}
|
|
.title * {
|
|
/* font-family: @ini_headline_fonts;
|
|
font-size: 13pt; */
|
|
}
|
|
}
|
|
|
|
#phSearch {
|
|
& {
|
|
grid-column: 2;
|
|
grid-row: 2;
|
|
padding: .5em 0;
|
|
}
|
|
form {
|
|
|
|
& > div.search-field {
|
|
width: 100%;
|
|
display: grid;
|
|
grid-template-columns: auto 20pt 20pt;
|
|
place-items: stretch;
|
|
border: @ini_border solid 1pt;
|
|
background: @ini_background;
|
|
border-radius: 4pt;
|
|
-moz-box-shadow: inset 0 0 3pt @ini_border;
|
|
-webkit-box-shadow: inset 0 0 3pt @ini_border;
|
|
box-shadow: inset 0 0 3pt @ini_border;
|
|
outline: transparent solid 2pt;
|
|
}
|
|
|
|
& .search-popup {
|
|
position: absolute;
|
|
width: 100%;
|
|
height: 5pt;
|
|
margin-right: 21pt;
|
|
}
|
|
|
|
> div {
|
|
&.search-field.focus {
|
|
outline-color: @ini_focus_color;
|
|
}
|
|
input {
|
|
grid-column: 1;
|
|
grid-row: 1;
|
|
z-index: 23;
|
|
font-size: large;
|
|
padding: 2pt 0 2pt 4pt;
|
|
border: transparent none 0;
|
|
border-radius: 3pt;
|
|
background-color: transparent;
|
|
}
|
|
input:focus {
|
|
outline: transparent none 0;
|
|
}
|
|
button {
|
|
color: @ini_text;
|
|
border: transparent solid 1pt;
|
|
background: transparent none no-repeat center;
|
|
background-size: 13pt;
|
|
width: 2em;
|
|
height: 2em;
|
|
border-radius: 3pt;
|
|
overflow: hidden;
|
|
margin: 1pt 1pt 1pt 0;
|
|
height: auto;
|
|
outline: transparent solid 2pt;
|
|
}
|
|
button[type=reset] {
|
|
background-image: url('images/delete.svg');
|
|
border-right: @ini_border solid 1pt;
|
|
}
|
|
button[type=submit] {
|
|
background-image: url('images/search.svg');
|
|
}
|
|
button:hover {
|
|
background-color: @ini_background_neu;
|
|
border-color: @ini_border;
|
|
}
|
|
button:focus {
|
|
background-color: @ini_background_neu;
|
|
}
|
|
}
|
|
|
|
}
|
|
}
|
|
#qsearch__out {
|
|
& {
|
|
z-index: 20;
|
|
position: relative;
|
|
left: 0;
|
|
width: auto;
|
|
padding: 0;
|
|
white-space: nowrap;
|
|
font-size: 1rem;
|
|
background-color: @ini_background_site;
|
|
-moz-box-shadow: 2px 2px 2px 0 rgba(0,0,0,.5);
|
|
-webkit-box-shadow: 2px 2px 2px 0 rgba(0,0,0,.5);
|
|
box-shadow: 2px 2px 2px 0 rgba(0,0,0,.5);
|
|
}
|
|
strong {
|
|
display: none;
|
|
padding: 2pt;
|
|
font-weight: normal;
|
|
}
|
|
ul {
|
|
border: @ini_border solid 1px;
|
|
border-top-width: 0;
|
|
max-height: 11em;
|
|
}
|
|
li {
|
|
border-top: @ini_border solid 1px;
|
|
}
|
|
a {
|
|
display: block;
|
|
padding: 2pt 0 2pt 4pt;
|
|
border: transparent solid 2px;
|
|
overflow: hidden;
|
|
text-overflow: '\2025';
|
|
}
|
|
a:focus {
|
|
border-color: @ini_focus_color;
|
|
}
|
|
}
|
|
|
|
#phTools{ }
|
|
#phInclude {
|
|
grid-column: 2 / span 2;
|
|
grid-row: 3;
|
|
margin-right: 2pt;
|
|
}
|
|
|
|
#main-layout {
|
|
width: 100%;
|
|
max-width: @ini_site_width;
|
|
margin: 0 auto;
|
|
display: flex;
|
|
flex-direction: row;
|
|
flex-wrap: nowrap;
|
|
justify-content: space-between;
|
|
align-items: stretch;
|
|
align-content: flex-start;
|
|
}
|
|
|
|
#sidebar {
|
|
& {
|
|
width: @ini_sidebar_width;
|
|
max-width: @ini_sidebar_width;
|
|
flex-grow: 0;
|
|
}
|
|
&.toggle.hide,
|
|
&.toggle.alt {
|
|
max-width: 1em;
|
|
}
|
|
p, ul, ol {
|
|
padding-left: 1.25em;
|
|
}
|
|
ul {
|
|
list-style: square outside;
|
|
}
|
|
ul ~ ul, ul ~ ol,
|
|
ol ~ ul, ol ~ ol {
|
|
margin-top: .5em;
|
|
}
|
|
ul li, ol li {
|
|
color: @ini_text_alt;
|
|
padding: .1em 0;
|
|
}
|
|
dl dt {
|
|
font-weight: bold;
|
|
}
|
|
a:link, a:visited {
|
|
color: @ini_link;
|
|
}
|
|
.home a::before {
|
|
content: ' ';
|
|
display: inline-block;
|
|
width: 10pt;
|
|
height: 1em;
|
|
background: transparent url('images/home.svg') no-repeat no-repeat 0 4px;
|
|
background-size: .8em;
|
|
padding-right: 3pt;
|
|
}
|
|
.curid {
|
|
font-weight: bold;
|
|
}
|
|
h3, h4 {
|
|
font-size: 1.1rem;
|
|
margin: 0.25em 2pt;
|
|
}
|
|
& > button.tg_button {
|
|
float: right;
|
|
display: block;
|
|
background-color: transparent;
|
|
border: transparent none 0;
|
|
margin-right: 2px;
|
|
font-size: 1.5rem;
|
|
}
|
|
& > button:focus {
|
|
outline: @ini_focus_color solid 2px;
|
|
}
|
|
& > button.tg_button span {
|
|
display: none;
|
|
}
|
|
&.hide > button.tg_button,
|
|
&.alt > button.tg_button {
|
|
margin-left: 0;
|
|
width: 11pt;
|
|
}
|
|
& > button.tg_button::after {
|
|
content: '\2039';
|
|
color: @ini_link;
|
|
display: inline-block;
|
|
width: .75em;
|
|
height: 1.25em;
|
|
text-align: center;
|
|
}
|
|
&.hide>button.tg_button span,
|
|
&.alt>button.tg_button span {
|
|
display: none;
|
|
}
|
|
&.hide>button.tg_button::after,
|
|
&.alt>button.tg_button::after {
|
|
content: '\203A';
|
|
width: auto;
|
|
}
|
|
|
|
.tg_content {
|
|
line-height: 1.5em;
|
|
font-size: 11.5pt;
|
|
}
|
|
|
|
hr {
|
|
border: 0;
|
|
height: 1pt;
|
|
background: @ini_text_alt;
|
|
background-image: linear-gradient(to right, @ini_background_alt, @ini_text_alt, @ini_background_alt);
|
|
margin: .5em 1em .5em 0;
|
|
}
|
|
}
|
|
|
|
#sbNavigation {
|
|
margin: 1em .25em 0 1em;
|
|
}
|
|
#navBreadCrumbs {
|
|
margin-left: .5em;
|
|
}
|
|
#navBreadCrumbs ol {
|
|
list-style: decimal outside;
|
|
padding-left: 2em;
|
|
}
|
|
|
|
|
|
#navYouAreHere {
|
|
& {
|
|
display: flex;
|
|
flex-flow: row nowrap;
|
|
position: relative;
|
|
top: 0;
|
|
left: 0;
|
|
height: 16pt;
|
|
overflow: hidden;
|
|
white-space: nowrap;
|
|
}
|
|
h4 {
|
|
display: none /*inline-block */;
|
|
font-family: @ini_default_fonts;
|
|
font-weight: normal;
|
|
font-size: small;
|
|
line-height: 1.5em;
|
|
margin: 0 .5em 0 0;
|
|
}
|
|
ol {
|
|
& {
|
|
list-style: none inside;
|
|
display: flex;
|
|
line-height: 1.5em;
|
|
height: 100pt;
|
|
padding-left: 0;
|
|
margin: 0 2pt 0 0;
|
|
font-size: small;
|
|
overflow: scroll hidden;
|
|
}
|
|
li {
|
|
& {
|
|
color: @ini_headlines;
|
|
display: inline;
|
|
margin-bottom: 0;
|
|
max-width: 20em;
|
|
min-width: 2.2em;
|
|
overflow: hidden;
|
|
text-overflow: '\202F...';
|
|
}
|
|
|
|
&:last-child { flex-shrink: 1; }
|
|
&:nth-last-child(2) { flex-shrink: 2; }
|
|
&:nth-last-child(3) { flex-shrink: 3; }
|
|
&:nth-last-child(4) { flex-shrink: 4; }
|
|
&:nth-last-child(5) { flex-shrink: 5; }
|
|
&:nth-last-child(6) { flex-shrink: 6; }
|
|
|
|
&.home {
|
|
min-width: 14px;
|
|
flex-shrink: 0 !important;
|
|
}
|
|
|
|
&::before {
|
|
content: '\25B8';
|
|
padding: 0 2pt;
|
|
color: @ini_text_alt;
|
|
}
|
|
&.home::before {
|
|
content: '';
|
|
padding: 0;
|
|
}
|
|
&.home a {
|
|
display: inline-block;
|
|
width: 14px;
|
|
overflow: hidden;
|
|
}
|
|
&.home a::before {
|
|
content: ' ';
|
|
display: inline-block;
|
|
width: 14px;
|
|
height: 1em;
|
|
background: transparent url('images/home.svg') no-repeat left bottom;
|
|
filter: hue-rotate(-80deg);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
/* fix for issue with homepage */
|
|
body.home #navYouAreHere ol li:last-child {
|
|
display: none;
|
|
}
|
|
|
|
/* Table of Contents */
|
|
#toc {
|
|
& {
|
|
clear: both;
|
|
float: right;
|
|
width: auto;
|
|
min-width: 32px;
|
|
padding-left: .25em;
|
|
line-height: 1.5em;
|
|
text-align: left;
|
|
max-width: @ini_toc_width;
|
|
background-color: transparent;
|
|
border: transparent none 0;
|
|
border-left: @ini_border solid 1pt;
|
|
}
|
|
ol {
|
|
list-style: none inside;
|
|
padding: 0 0 0 1em;
|
|
margin: 0;
|
|
}
|
|
ol li {
|
|
font-size: small;
|
|
line-height: 1.25em;
|
|
margin: .5em 0;
|
|
}
|
|
a[href^='#']:link,
|
|
a[href^='#']:visited {
|
|
color: @ini_inpage;
|
|
}
|
|
}
|
|
|
|
#toc-menubutton {
|
|
background: transparent;
|
|
margin-left: .5em;
|
|
padding: 0 .25em;
|
|
width: auto;
|
|
height: auto;
|
|
overflow: hidden;
|
|
border: transparent 0 none;
|
|
border-radius: 3pt;
|
|
}
|
|
#toc-menubutton > span {
|
|
font-family: @ini_headline_fonts;
|
|
line-height: 1.5em;
|
|
font-weight: bold;
|
|
color: @ini_headlines;
|
|
}
|
|
#toc-menubutton::after {
|
|
content: '\203A';
|
|
display: inline-block;
|
|
width: 1.5em;
|
|
text-align: center;
|
|
}
|
|
|
|
.hide #toc-menubutton::after,
|
|
.alt #toc-menubutton::after {
|
|
content: '\2630';
|
|
}
|
|
|
|
.hide #toc-menubutton>span,
|
|
.alt #toc-menubutton>span {
|
|
display: none;
|
|
}
|
|
|
|
main {
|
|
& {
|
|
width: e("calc(90% - 5px)");
|
|
flex-grow: 100;
|
|
background-color: @ini_background;
|
|
color: @ini_text;
|
|
line-height: 1.5em;
|
|
padding: 1.5em 5% .75em 5%;
|
|
border: @ini_border solid 1px;
|
|
border-radius: 5px;
|
|
}
|
|
|
|
/* edit buttons */
|
|
.secedit {
|
|
float: right;
|
|
margin-top: -22pt;
|
|
line-height: 0;
|
|
}
|
|
.secedit button {
|
|
border: @ini_border solid 1pt;
|
|
background-color: transparent;
|
|
color: transparent;
|
|
width: 20pt;
|
|
height: 20pt;
|
|
border-radius: 50%;
|
|
font-size: 0;
|
|
cursor: pointer;
|
|
}
|
|
.secedit button::before {
|
|
content: ' ';
|
|
display: inline-block;
|
|
width: 13pt;
|
|
height: 13pt;
|
|
padding: 2pt;
|
|
background: transparent url('images/edit.svg') no-repeat center;
|
|
background-size: 10pt;
|
|
}
|
|
.secedit button:hover {
|
|
background-color: @ini_highlight;
|
|
border: @ini_text_alt solid 1pt;
|
|
}
|
|
.secedit button:focus {
|
|
background-color: @ini_highlight;
|
|
border: @ini_focus_color solid 2px;
|
|
outline: transparent none 0;
|
|
}
|
|
.secedit button:hover::before {
|
|
}
|
|
|
|
.section_highlight {
|
|
border-radius: .5em;
|
|
outline: orange dashed 3px;
|
|
}
|
|
|
|
/* Definition List styles: */
|
|
dt { font-weight: 600; }
|
|
dd { margin-left: 1.25em; margin-bottom: .5em; }
|
|
dl.compact {
|
|
display: grid;
|
|
grid-template-columns: minmax(8em,min-content) auto;
|
|
}
|
|
dl.compact dt { grid-column-start: 1; }
|
|
dl.compact dd { grid-column-start: 2; margin-bottom: 0; }
|
|
|
|
/* math fonts */
|
|
math, .math, .math *,
|
|
.wrap_math, .wrap_math * {
|
|
font-family: @ini_math_fonts;
|
|
font-size: 12pt;
|
|
line-height: 1em;
|
|
}
|
|
|
|
/* figure block */
|
|
figure {
|
|
& {
|
|
padding: .5em;
|
|
overflow: hidden;
|
|
}
|
|
figcaption {
|
|
clear: left;
|
|
margin-top: .5em;
|
|
font-size: smaller;
|
|
line-height: 1.4em;
|
|
}
|
|
figcaption p {
|
|
margin-bottom: 0;
|
|
}
|
|
figcaption.centered {
|
|
text-align: center;
|
|
}
|
|
& > *:first-child {
|
|
margin-top: .25em;
|
|
}
|
|
table {
|
|
background-color: @ini_background;
|
|
margin: 0;
|
|
}
|
|
div.table {
|
|
margin: 0;
|
|
}
|
|
& > p {
|
|
margin: 0;
|
|
}
|
|
}
|
|
|
|
& > footer {
|
|
margin-top: 1em;
|
|
padding-top: 1em;
|
|
text-align: right;
|
|
}
|
|
& > footer p.docInfo {
|
|
display: inline-block;
|
|
border-top: @ini_separator solid 1px;
|
|
padding-top: .5em;
|
|
padding-left: 5%;
|
|
font-size: small;
|
|
color: @ini_text_alt;
|
|
}
|
|
}
|
|
|
|
body.mediadetail {
|
|
figure {
|
|
img {
|
|
background: transparent url('images/transparency.gif');
|
|
}
|
|
table {
|
|
&.img_detail,
|
|
&.img_detail th,
|
|
&.img_detail td {
|
|
border: none;
|
|
}
|
|
&.img_detail th {
|
|
text-align: right;
|
|
white-space: nowrap;
|
|
border: none;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
#footer-layout {
|
|
& {
|
|
padding-top: 1.5em;
|
|
}
|
|
& > footer {
|
|
& {
|
|
width: 100%;
|
|
max-width: @ini_site_width;
|
|
margin: 0 auto;
|
|
display: grid;
|
|
grid-template-columns: @ini_sidebar_width 1fr 1fr 1fr;
|
|
grid-template-rows: auto auto;
|
|
grid-gap: 6pt;
|
|
align-items: stretch;
|
|
}
|
|
.ftSection {
|
|
padding-left: 1em;
|
|
}
|
|
.ftSection ul {
|
|
list-style: none inside;
|
|
padding-left: .5em;
|
|
}
|
|
.ftSection ul li {
|
|
margin-bottom: .5em;
|
|
font-size: small;
|
|
}
|
|
.ftSection ul li a {
|
|
white-space: nowrap;
|
|
}
|
|
h4 {
|
|
color: @ini_headlines;
|
|
margin: 0 0 1em 0;
|
|
font-family: @ini_headline_fonts;
|
|
font-size: 1rem;
|
|
}
|
|
|
|
#ftPlaceholder>* {
|
|
display: none;
|
|
}
|
|
}
|
|
}
|
|
|
|
#ftLicenseButtons {
|
|
& {
|
|
grid-row: 2;
|
|
grid-column: 2 / span 3;
|
|
text-align: center;
|
|
font-size: small;
|
|
padding-top: 1em;
|
|
}
|
|
hr {
|
|
border: 0;
|
|
height: 1pt;
|
|
background: #333;
|
|
background-image: linear-gradient(to right, @ini_background_alt, @ini_text_alt, @ini_background_alt);
|
|
}
|
|
p.license {
|
|
margin: .5em 0 1em 0;
|
|
font-size: small;
|
|
color: @ini_text_alt;
|
|
}
|
|
p.license bdi {
|
|
display: block;
|
|
width: 100%;
|
|
}
|
|
}
|
|
|
|
/* togglers */
|
|
.toggle .tg_button.active {
|
|
color: @ini_link;
|
|
cursor: pointer;
|
|
}
|
|
.toggle .tg_content,
|
|
.toggle.auto .tg_content,
|
|
.toggle.show .tg_content {
|
|
display: initial;
|
|
}
|
|
.toggle.hide .tg_content,
|
|
.toggle.alt .tg_content {
|
|
display: none;
|
|
}
|
|
|
|
/* config overrides */
|
|
#config__manager {
|
|
#dw__configform {
|
|
|
|
.selectiondefault {
|
|
background-color: @ini_background_alt;
|
|
}
|
|
.selection input {
|
|
margin-left: .5em;
|
|
}
|
|
|
|
& p:last-child {
|
|
position: -webkit-sticky; /* Safari */
|
|
position: sticky;
|
|
bottom: 0;
|
|
box-sizing: border-box;
|
|
background-color: rgba(255,255,255,.67);
|
|
border: @ini_border solid 2pt;
|
|
padding: .5em 0;
|
|
z-index: 9;
|
|
display: grid;
|
|
grid-template-columns: auto auto;
|
|
justify-items: center;
|
|
}
|
|
p:last-child button {
|
|
border: @ini_border solid 2pt;
|
|
padding: .25em .5em;
|
|
}
|
|
p:last-child button[type=submit] {
|
|
background-color: #ccddff;
|
|
}
|
|
}
|
|
|
|
fieldset {
|
|
background-color: transparent;
|
|
color: inherit;
|
|
}
|
|
|
|
table {
|
|
th, td {
|
|
border: none;
|
|
}
|
|
td.label span.outkey {
|
|
background-color: inherit;
|
|
}
|
|
|
|
tr.default .input,
|
|
tr .input {
|
|
background-color: transparent;
|
|
}
|
|
}
|
|
}
|
|
#extension__list {
|
|
.legend a.info, .legend a.info.close {
|
|
width: 22px;
|
|
height: 22px;
|
|
background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M11 9H13V7H11M12 20C7.59 20 4 16.41 4 12C4 7.59 7.59 4 12 4C16.41 4 20 7.59 20 12C20 16.41 16.41 20 12 20M12 2A10 10 0 0 0 2 12A10 10 0 0 0 12 22A10 10 0 0 0 22 12A10 10 0 0 0 12 2M11 17H13V11H11V17Z' style='fill:%23ADADB3'/%3E%3C/svg%3E") center no-repeat;
|
|
background-size: 24px;
|
|
border-radius: 50%;
|
|
margin-bottom: .5em;
|
|
}
|
|
}
|
|
|
|
/* RTL Overrides */
|
|
[dir=rtl] {
|
|
#phSearch form .search-popup {
|
|
margin-right: 0;
|
|
margin-left: 21pt;
|
|
}
|
|
#phSearch form > div input {
|
|
padding-right: 4pt;
|
|
}
|
|
|
|
#globalTools {
|
|
text-align: left;
|
|
}
|
|
#gUserTools {
|
|
padding: 0 0 0 .5rem;
|
|
}
|
|
|
|
#toc {
|
|
float: left;
|
|
border-left: transparent 0;
|
|
border-right: #CCC solid 1pt;
|
|
}
|
|
#toc ol {
|
|
padding: 0 1em 0 0;
|
|
}
|
|
|
|
.secedit {
|
|
float: left;
|
|
}
|
|
|
|
#navYouAreHere ol li::before {
|
|
content: '\25C2';
|
|
}
|
|
#navYouAreHere ol li.home::before {
|
|
content: '';
|
|
}
|
|
|
|
#sidebar {
|
|
> button.tg_button {
|
|
float: left;
|
|
}
|
|
|
|
p, ul, ol {
|
|
padding-left: 0;
|
|
padding-right: 1.25em;
|
|
}
|
|
}
|
|
#sbNavigation {
|
|
margin: 1em 1em 0 .25em;
|
|
}
|
|
main {
|
|
figure figcaption {
|
|
clear: right;
|
|
}
|
|
|
|
& > footer {
|
|
text-align: left;
|
|
}
|
|
& > footer p.docInfo {
|
|
padding-left: 0;
|
|
padding-right: 5%;
|
|
}
|
|
}
|
|
}
|
|
|
|
/* dark mode overrides */
|
|
@media screen and (prefers-color-scheme: dark) {
|
|
|
|
body.darkmode {
|
|
|
|
& { background-color: @ini_background_site_dark; color: @ini_text_dark; }
|
|
#skip-link a { background-color: @ini_background_dark;color: @ini_link_dark;}
|
|
#navYouAreHere ol {
|
|
li { color: @ini_headlines_dark;}
|
|
li::before { color: @ini_text_alt_dark;}
|
|
}
|
|
#phSearch form > div {
|
|
&.search-field { border-color: @ini_border_dark; background: @ini_background_dark; }
|
|
input { color: @ini_text_dark; }
|
|
button {color: @ini_text_dark; }
|
|
button[type="reset"] {border-right-color: @ini_border_dark; }
|
|
}
|
|
#qsearch__out {
|
|
& { background-color: @ini_background_site_dark; }
|
|
ul, li { border-color: @ini_border_dark; }
|
|
}
|
|
|
|
#config__manager {
|
|
#dw__configform {
|
|
|
|
.selectiondefault {
|
|
background-color: @ini_background_alt_dark;
|
|
}
|
|
.selectiondefault label {
|
|
color: @ini_text_dark;
|
|
}
|
|
|
|
p:last-child {
|
|
& {
|
|
background-color: rgba(57,57,61,.67);
|
|
border-color: @ini_border_dark;
|
|
}
|
|
button {
|
|
background-color: @ini_background_dark;
|
|
border-color: @ini_border_dark;
|
|
color: @ini_missing_dark;
|
|
}
|
|
button[type=submit] {
|
|
border-color: @ini_existing_dark;
|
|
background-color: @ini_background_dark;
|
|
color: @ini_existing_dark;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
#sbNavigation {
|
|
h1, h2, h3, h4, h5, h6 { color: @ini_headlines_dark; }
|
|
}
|
|
#sidebar {
|
|
hr { background-image: linear-gradient(to right, @ini_background_site_dark, @ini_text_alt, @ini_background_site_dark); }
|
|
a:link, a:visited { color: @ini_link_dark; }
|
|
li::marker { color: @ini_text_dark; }
|
|
}
|
|
|
|
#toc {
|
|
& { border-color: @ini_border_dark; }
|
|
#toc-menubutton,
|
|
#toc-menubutton span { color: @ini_headlines_dark; }
|
|
a[href^='#']:link, a[href^='#']:visited { color: @ini_inpage_dark; }
|
|
}
|
|
|
|
main {
|
|
& { background-color: @ini_background_dark; color: @ini_text_dark; border-color: @ini_background_dark; }
|
|
h1, h2, h3, h4, h5, h6 { color: @ini_headlines_dark; }
|
|
& > footer p.docInfo { color: @ini_text_alt_dark; }
|
|
figure table { background-color: @ini_background_dark; }
|
|
}
|
|
|
|
#footer-layout > footer h4 { color: @ini_headlines_dark; }
|
|
|
|
#ftLicenseButtons {
|
|
p.license { color: @ini_text_alt_dark; }
|
|
hr { background-image: linear-gradient(to right, @ini_background_site_dark, @ini_text_dark, @ini_background_site_dark); }
|
|
}
|
|
|
|
/* Extension Manager: */
|
|
#extension__manager{
|
|
.panelHeader { background-color: @ini_background_alt_dark; }
|
|
ul.tabs li a { background-color: @ini_background_dark; border-color: @ini_border_dark; color: @ini_text_dark }
|
|
ul.tabs li.active a { background-color: @ini_background_alt_dark; border-color: @ini_text_dark; }
|
|
tr .input, tr.default .input { color: @ini_text_dark; }
|
|
}
|
|
#extension__list ul.extensionList li { color: @ini_text_dark; }
|
|
}
|
|
|
|
/* dark scrollbar styles for webkit browsers: */
|
|
&::-webkit-scrollbar-track {
|
|
background: @ini_background_site_dark;
|
|
}
|
|
&::-webkit-scrollbar-thumb {
|
|
background: @ini_background_alt_dark;
|
|
}
|
|
&::-webkit-scrollbar-thumb:hover {
|
|
background: @ini_background_dark;
|
|
}
|
|
/* dark scrollbars for firefox: */
|
|
* { scrollbar-color: @ini_background_alt_dark @ini_background_site_dark; }
|
|
}
|
|
|
|
/* tablet break point */
|
|
@media all and (max-width: @ini_tablet_width) {
|
|
#header-layout > header {
|
|
margin: 0;
|
|
grid-template-columns: e("repeat(2, auto)");
|
|
grid-template-rows: e("repeat(4, auto)");
|
|
}
|
|
#header-layout > header #siteLogo {
|
|
grid-column: 1;
|
|
grid-row: 1;
|
|
}
|
|
#header-layout > header #globalTools {
|
|
grid-row: 1;
|
|
grid-column: 2;
|
|
}
|
|
#header-layout>header #globalTools ul li {
|
|
display: block;
|
|
margin-bottom: .5em;
|
|
}
|
|
#header-layout>header #globalTools ul li:before {
|
|
content: '';
|
|
}
|
|
#header-layout>header #phSearch {
|
|
grid-row: 2;
|
|
grid-column: 1 / span 2;
|
|
padding: .5em 1em 0 68px;
|
|
}
|
|
[dir=rtl] #header-layout>header #phSearch {
|
|
padding: .5em 68px 0 1em;
|
|
}
|
|
#header-layout>header #phTools {
|
|
grid-row: 3;
|
|
grid-column: 1 / span 2;
|
|
}
|
|
#header-layout>header #phInclude {
|
|
grid-row: 4;
|
|
grid-column: 1 / span 2;
|
|
margin: 0 6pt 5pt 64px;
|
|
}
|
|
|
|
#qsearch__out ul {
|
|
max-height: 100%;
|
|
}
|
|
|
|
#main-layout {
|
|
display: block;
|
|
}
|
|
|
|
#sidebar.toggle {
|
|
width: auto;
|
|
margin-left: .5em;
|
|
padding: 0;
|
|
position: relative;
|
|
top: -2.25em;
|
|
height: .25em;
|
|
}
|
|
#sidebar > button.tg_button,
|
|
[dir=rtl] #sidebar > button.tg_button {
|
|
float: none;
|
|
}
|
|
#sidebar.auto > button.tg_button,
|
|
#sidebar.hide > button.tg_button,
|
|
#sidebar.alt > button.tg_button,
|
|
#sidebar.show > button.tg_button {
|
|
width: 1.5em;
|
|
}
|
|
#sidebar > button.tg_button span {
|
|
display: none;
|
|
}
|
|
|
|
#sidebar > button.tg_button::after {
|
|
content: '\2630';
|
|
}
|
|
#sidebar.hide>button.tg_button::after,
|
|
#sidebar.alt>button.tg_button::after {
|
|
content: '\2715';
|
|
}
|
|
|
|
#sidebar .tg_content {
|
|
min-width: @ini_sidebar_width;
|
|
padding-right: 0;
|
|
margin-top: 10px;
|
|
padding-bottom: 1em;
|
|
background-color: @ini_background_site;
|
|
position: absolute;
|
|
z-index: 18;
|
|
border: @ini_border solid 1px;
|
|
-moz-box-shadow: 2px 2px 2px @ini_border;
|
|
-webkit-box-shadow: 2px 2px 2px @ini_border;
|
|
box-shadow: 2px 2px 2px @ini_border;
|
|
}
|
|
|
|
#sidebar .tg_content:before {
|
|
content: ' ';
|
|
z-index: 19;
|
|
width: 0;
|
|
height: 0;
|
|
position: absolute;
|
|
top: -10px;
|
|
left: 7px;
|
|
border-width: 0 10px 10px;
|
|
border-style: solid;
|
|
border-color: transparent;
|
|
border-bottom-color: @ini_border;
|
|
}
|
|
#sidebar .tg_content:after {
|
|
content: ' ';
|
|
z-index: 20;
|
|
width: 0;
|
|
height: 0;
|
|
position: absolute;
|
|
top: -8px;
|
|
left: 8px;
|
|
border-width: 0 9px 8px;
|
|
border-style: solid;
|
|
border-color: transparent;
|
|
border-bottom-color: @ini_background_site;
|
|
}
|
|
|
|
[dir=rtl] {
|
|
#sidebar .tg_content {
|
|
right: 5px;
|
|
}
|
|
#sidebar .tg_content:before {
|
|
right: 7px;
|
|
}
|
|
#sidebar .tg_content:after {
|
|
right: 8px;
|
|
}
|
|
}
|
|
|
|
#sbNavigation {
|
|
padding-left: .5em;
|
|
margin-left: 0;
|
|
}
|
|
#sidebar h3,
|
|
#sidebar h4 {
|
|
font-size: 1rem;
|
|
padding: .25em 0 .25em 2pt;
|
|
}
|
|
#sidebar ul, #sidebar ol {
|
|
margin-left: .5em;
|
|
}
|
|
#sidebar ul ul, #sidebar ol ol,
|
|
#sidebar ul ol, #sidebar ol ul {
|
|
margin-left: 0;
|
|
}
|
|
#sidebar p,
|
|
#sidebar li {
|
|
font-size: small;
|
|
padding: .25em 0 .25em .25em;
|
|
}
|
|
|
|
main {
|
|
width: auto;
|
|
box-shadow: 0 0 0 0 transparent;
|
|
}
|
|
|
|
.toggle .tg_content,
|
|
.toggle.alt .tg_content,
|
|
.toggle.show .tg_content {
|
|
display: initial;
|
|
}
|
|
.toggle.auto .tg_content {
|
|
display: none;
|
|
}
|
|
|
|
#toc.hide h3::after,
|
|
#toc.auto h3::after {
|
|
content: '\2630';
|
|
}
|
|
#toc.alt h3::after {
|
|
content: '\203A';
|
|
}
|
|
|
|
#toc.hide h3 > span,
|
|
#toc.auto h3 > span {
|
|
display: none;
|
|
}
|
|
#toc.alt h3 > span {
|
|
display: inline-block;
|
|
}
|
|
|
|
#footer-layout > footer {
|
|
grid-template-columns: 12pt 1fr 1fr 1fr;
|
|
}
|
|
}
|
|
|
|
@media all and (max-width: @ini_tablet_width) and (prefers-color-scheme: dark) {
|
|
body.darkmode #sidebar {
|
|
.tg_content {
|
|
& {
|
|
background-color: @ini_background_dark;
|
|
border-color: @ini_border_dark;
|
|
-moz-box-shadow: 3px 3px 3px @ini_background_site_dark;
|
|
-webkit-box-shadow: 3px 3px 3px @ini_background_site_dark;
|
|
box-shadow: 3px 3px 3px @ini_background_site_dark;
|
|
}
|
|
&::before {
|
|
border-bottom-color: @ini_border_dark;
|
|
}
|
|
&::after {
|
|
border-bottom-color: @ini_background_dark;
|
|
}
|
|
}
|
|
hr {
|
|
background: @ini_link_dark;
|
|
background-image: linear-gradient(to right, @ini_background_dark, @ini_headlines_dark, @ini_background_dark);
|
|
}
|
|
}
|
|
}
|
|
|
|
/* medium break point: */
|
|
@media all and (max-width: @ini_phone_width) {
|
|
#footer-layout {
|
|
& {
|
|
padding-top: .5em;
|
|
}
|
|
& > footer {
|
|
& {
|
|
grid-template-columns: 100%;
|
|
grid-template-rows: auto auto auto auto auto;
|
|
}
|
|
.ftSection {
|
|
grid-column: 1;
|
|
padding: 0 .25em 0 .5em;
|
|
white-space: normal;
|
|
}
|
|
.ftSection ul {
|
|
padding-left: 0;
|
|
}
|
|
.ftSection li {
|
|
display: inline-block;
|
|
}
|
|
.ftSection li::before {
|
|
content: '\00B7';
|
|
display: inline;
|
|
width: .35em;
|
|
padding: 0 .35em;
|
|
}
|
|
.ftSection li:first-child::before {
|
|
content: '';
|
|
padding-left: 0;
|
|
}
|
|
|
|
#ftPlaceholder {
|
|
grid-row: 1;
|
|
}
|
|
#ftInclude {
|
|
grid-row: 2;
|
|
}
|
|
#ftSiteTools {
|
|
grid-row: 3;
|
|
}
|
|
#ftPageTools {
|
|
grid-row: 4;
|
|
}
|
|
#ftLicenseButtons {
|
|
grid-column: 1;
|
|
grid-row: 5;
|
|
}
|
|
|
|
h4 {
|
|
margin-bottom: .5em;
|
|
}
|
|
}
|
|
}
|
|
|
|
main blockquote {
|
|
margin-left: .15em;
|
|
margin-right: 0;
|
|
}
|
|
main ul, main ol {
|
|
margin-left: .5em;
|
|
margin-right: 0;
|
|
padding-left: .75em;
|
|
}
|
|
} |