Template:Template journal/styles.css: Difference between revisions
From All Skies Encyclopaedia
imported>Grufo (Style links) |
imported>Repakr (Added dark mode support) |
||
| (4 intermediate revisions by 3 users not shown) | |||
| Line 1: | Line 1: | ||
div.tj-box { |
div.tj-box { |
||
font-family: monospace; |
font-family: 'Menlo', 'Consolas', 'Liberation Mono', 'Courier New', monospace; |
||
white-space: pre; |
|||
padding: 1em; |
padding: 1em; |
||
white-space: pre-wrap; |
white-space: pre-wrap; |
||
overflow-x: hidden; |
overflow-x: hidden; |
||
word-wrap: break-word; |
word-wrap: break-word; |
||
background-color: #f8f9fa; |
background-color: var(--background-color-neutral-subtle, #f8f9fa); |
||
color: #000; |
color: var(--color-emphasized, #000); |
||
border: 1px solid #eaecf0; |
border: 1px solid var(--border-color-muted, #eaecf0); |
||
line-height: 1.3; |
line-height: 1.3; |
||
tab-size: 4; |
tab-size: 4; |
||
vertical-align: baseline; |
|||
margin: 0; |
|||
} |
} |
||
| Line 30: | Line 31: | ||
font-style: italic; |
font-style: italic; |
||
color: #933; |
color: #933; |
||
} |
|||
/* Dark mode support */ |
|||
@media screen { |
|||
html.skin-theme-clientpref-night div.tj-box span.tj-tn, |
|||
html.skin-theme-clientpref-night div.tj-box span.tj-tn a, |
|||
html.skin-theme-clientpref-night div.tj-box span.tj-tn a:link, |
|||
html.skin-theme-clientpref-night div.tj-box span.tj-tn a:visited, |
|||
html.skin-theme-clientpref-night div.tj-box span.tj-tn a:hover { |
|||
color: #6383E7; |
|||
} |
|||
html.skin-theme-clientpref-night div.tj-box span.tj-an { |
|||
color: #339a60; |
|||
} |
|||
html.skin-theme-clientpref-night div.tj-box span.tj-ac { |
|||
color: #D07373; |
|||
} |
|||
} |
|||
@media screen and (prefers-color-scheme: dark) { |
|||
html.skin-theme-clientpref-os div.tj-box span.tj-tn, |
|||
html.skin-theme-clientpref-os div.tj-box span.tj-tn a, |
|||
html.skin-theme-clientpref-os div.tj-box span.tj-tn a:link, |
|||
html.skin-theme-clientpref-os div.tj-box span.tj-tn a:visited, |
|||
html.skin-theme-clientpref-os div.tj-box span.tj-tn a:hover { |
|||
color: #6383E7; |
|||
} |
|||
html.skin-theme-clientpref-os div.tj-box span.tj-an { |
|||
color: #339a60; |
|||
} |
|||
html.skin-theme-clientpref-os div.tj-box span.tj-ac { |
|||
color: #D07373; |
|||
} |
|||
} |
} |
||
Latest revision as of 07:03, 8 August 2024
div.tj-box {
font-family: 'Menlo', 'Consolas', 'Liberation Mono', 'Courier New', monospace;
padding: 1em;
white-space: pre-wrap;
overflow-x: hidden;
word-wrap: break-word;
background-color: var(--background-color-neutral-subtle, #f8f9fa);
color: var(--color-emphasized, #000);
border: 1px solid var(--border-color-muted, #eaecf0);
line-height: 1.3;
tab-size: 4;
vertical-align: baseline;
margin: 0;
}
div.tj-box span.tj-tn,
div.tj-box span.tj-tn a,
div.tj-box span.tj-tn a:link,
div.tj-box span.tj-tn a:visited,
div.tj-box span.tj-tn a:hover {
font-weight: bold;
color: #4169e1;
}
div.tj-box span.tj-an {
font-weight: bold;
color: #2e8b57;
}
div.tj-box span.tj-ac {
font-style: italic;
color: #933;
}
/* Dark mode support */
@media screen {
html.skin-theme-clientpref-night div.tj-box span.tj-tn,
html.skin-theme-clientpref-night div.tj-box span.tj-tn a,
html.skin-theme-clientpref-night div.tj-box span.tj-tn a:link,
html.skin-theme-clientpref-night div.tj-box span.tj-tn a:visited,
html.skin-theme-clientpref-night div.tj-box span.tj-tn a:hover {
color: #6383E7;
}
html.skin-theme-clientpref-night div.tj-box span.tj-an {
color: #339a60;
}
html.skin-theme-clientpref-night div.tj-box span.tj-ac {
color: #D07373;
}
}
@media screen and (prefers-color-scheme: dark) {
html.skin-theme-clientpref-os div.tj-box span.tj-tn,
html.skin-theme-clientpref-os div.tj-box span.tj-tn a,
html.skin-theme-clientpref-os div.tj-box span.tj-tn a:link,
html.skin-theme-clientpref-os div.tj-box span.tj-tn a:visited,
html.skin-theme-clientpref-os div.tj-box span.tj-tn a:hover {
color: #6383E7;
}
html.skin-theme-clientpref-os div.tj-box span.tj-an {
color: #339a60;
}
html.skin-theme-clientpref-os div.tj-box span.tj-ac {
color: #D07373;
}
}
