mirror of
https://github.com/systemd/systemd
synced 2024-10-02 22:37:25 +00:00
docs: add dark mode
Respect the user agent property `prefers-color-scheme` by rendering the documentation in dark mode, if requested. Reorganise CSS to store the color palette into CSS variables and reference these from another set of CSS variables that are dynamically switched based on the prefers-color-scheme media query. Light mode variables stay they same as before, but to ease color mixing, the current RGB values have been transformed to HSL (using chrome devtools). The current body background is now --sd-gray-extralight, the current body color is now --sd-gray-extradark. Other gray-variations, needed for dark-mode constrasts are derived from these colors using HSL lightness shifting. The systemd brand black color is used as dark mode background and a matching extralight gray font color has been selected. The link font-weight is reduced to 400 in dark mode, as the green color on dark ground becomes to overwhelming with a bold font. The systemd logo color is dynamically swapped by using the special fill value `currentColor` for dark/light-mode depending parts – as per specification on brand.systemd.io
This commit is contained in:
Benjamin Franzke
parent
62bbb96d00
commit
9b266e4349
|
|
@ -5,7 +5,9 @@
|
|||
<div class="wrapper">
|
||||
|
||||
<a class="page-logo" href="{{ site.baseurl }}/">
|
||||
<img src="/assets/page-logo.svg" alt="systemd">
|
||||
<svg width="202" height="26" viewBox="0 0 202 26">
|
||||
<use href="/assets/systemd-logo.svg#systemd-logo"/>
|
||||
</svg>
|
||||
</a>
|
||||
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" width="202" height="26">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="202" height="26" viewBox="0 0 202 26" id="systemd-logo">
|
||||
<!-- SPDX-License-Identifier: LGPL-2.1-or-later -->
|
||||
<path d="M0 0v26h10v-4H4V4h6V0zm76 0v4h6v18h-6v4h10V0z" color="#000" fill="#201a26"/>
|
||||
<path d="M113.498 14.926q-4.5-.96-4.5-3.878 0-1.079.609-1.981.621-.902 1.781-1.441 1.16-.54 2.707-.54 1.63 0 2.848.528 1.219.516 1.875 1.453.656.926.656 2.121h-3.539q0-.762-.457-1.183-.457-.434-1.394-.434-.774 0-1.243.363-.457.364-.457.938 0 .55.516.89.527.34 1.781.575 1.5.28 2.543.738 1.043.445 1.653 1.242.62.797.62 2.027 0 1.114-.667 2.004-.657.88-1.887 1.383-1.219.504-2.836.504-1.711 0-2.965-.621-1.242-.633-1.898-1.617-.645-.985-.645-2.051h3.34q.036.914.656 1.36.621.433 1.594.433.902 0 1.383-.34.492-.351.492-.937 0-.364-.223-.61-.21-.258-.773-.48-.55-.223-1.57-.446zm19.384-7.606l-5.086 14.58q-.293.831-.726 1.523-.434.703-1.266 1.195-.832.504-2.098.504-.457 0-.75-.048-.281-.046-.785-.176v-2.672q.176.02.527.02.95 0 1.418-.293.47-.293.715-.961l.352-.926-4.43-12.738h3.797l2.262 7.687 2.285-7.687zm5.884 7.606q-4.5-.96-4.5-3.878 0-1.079.61-1.981.62-.902 1.781-1.441 1.16-.54 2.707-.54 1.629 0 2.848.528 1.218.516 1.875 1.453.656.926.656 2.121h-3.539q0-.762-.457-1.183-.457-.434-1.395-.434-.773 0-1.242.363-.457.364-.457.938 0 .55.516.89.527.34 1.781.575 1.5.28 2.543.738 1.043.445 1.652 1.242.621.797.621 2.027 0 1.114-.668 2.004-.656.88-1.886 1.383-1.219.504-2.836.504-1.711 0-2.965-.621-1.242-.633-1.899-1.617-.644-.985-.644-2.051h3.34q.036.914.656 1.36.621.433 1.594.433.902 0 1.383-.34.492-.351.492-.937 0-.364-.223-.61-.21-.258-.773-.48-.551-.223-1.57-.446zm13.983 2.403q.574 0 .984-.082v2.66q-.914.328-2.086.328-3.727 0-3.727-3.797V9.899h-1.793V7.321h1.793v-3.14h3.54v3.14h2.132v2.578h-2.133v6.129q0 .75.293 1.031.293.27.997.27zm14.228-2.519h-8.016q.2 1.183.985 1.886.785.691 2.015.691.914 0 1.688-.34.785-.351 1.336-1.042l1.699 1.957q-.668.96-1.957 1.617-1.278.656-3 .656-1.946 0-3.387-.82-1.43-.82-2.203-2.227-.762-1.406-.762-3.105v-.446q0-1.898.715-3.386.715-1.489 2.063-2.32 1.347-.844 3.187-.844 1.793 0 3.059.761 1.265.762 1.922 2.168.656 1.395.656 3.293zm-3.469-2.65q-.024-1.03-.574-1.628-.54-.598-1.617-.598-1.008 0-1.582.668-.563.668-.739 1.84h4.512zm19.923-5.073q1.934 0 2.989 1.148 1.054 1.148 1.054 3.727v8.039h-3.539V11.95q0-.797-.21-1.23-.212-.446-.61-.61-.387-.164-.984-.164-.715 0-1.219.352-.504.34-.797.972.02.082.02.27V20h-3.54v-8.015q0-.797-.21-1.242-.211-.445-.61-.621-.386-.176-.996-.176-.68 0-1.183.304-.492.293-.797.844V20h-3.539V7.32h3.316l.118 1.419q.633-.797 1.547-1.22.926-.433 2.086-.433 1.172 0 2.016.48.855.47 1.312 1.442.633-.926 1.582-1.418.961-.504 2.203-.504zM201.398 2v18h-3.187l-.176-1.359q-1.243 1.594-3.212 1.594-1.535 0-2.66-.82-1.113-.832-1.699-2.285-.574-1.454-.574-3.317v-.246q0-1.934.574-3.398.586-1.465 1.7-2.274 1.124-.808 2.683-.808 1.805 0 3.012 1.37V2.001zm-5.672 15.376q1.488 0 2.133-1.266v-4.898q-.61-1.266-2.11-1.266-1.207 0-1.77.984-.55.985-.55 2.637v.246q0 1.629.54 2.602.55.96 1.757.96z" fill="#201a26"/>
|
||||
<path d="M0 0v26h10v-4H4V4h6V0zm76 0v4h6v18h-6v4h10V0z" fill="currentColor"/>
|
||||
<path d="M113.498 14.926q-4.5-.96-4.5-3.878 0-1.079.609-1.981.621-.902 1.781-1.441 1.16-.54 2.707-.54 1.63 0 2.848.528 1.219.516 1.875 1.453.656.926.656 2.121h-3.539q0-.762-.457-1.183-.457-.434-1.394-.434-.774 0-1.243.363-.457.364-.457.938 0 .55.516.89.527.34 1.781.575 1.5.28 2.543.738 1.043.445 1.653 1.242.62.797.62 2.027 0 1.114-.667 2.004-.657.88-1.887 1.383-1.219.504-2.836.504-1.711 0-2.965-.621-1.242-.633-1.898-1.617-.645-.985-.645-2.051h3.34q.036.914.656 1.36.621.433 1.594.433.902 0 1.383-.34.492-.351.492-.937 0-.364-.223-.61-.21-.258-.773-.48-.55-.223-1.57-.446zm19.384-7.606l-5.086 14.58q-.293.831-.726 1.523-.434.703-1.266 1.195-.832.504-2.098.504-.457 0-.75-.048-.281-.046-.785-.176v-2.672q.176.02.527.02.95 0 1.418-.293.47-.293.715-.961l.352-.926-4.43-12.738h3.797l2.262 7.687 2.285-7.687zm5.884 7.606q-4.5-.96-4.5-3.878 0-1.079.61-1.981.62-.902 1.781-1.441 1.16-.54 2.707-.54 1.629 0 2.848.528 1.218.516 1.875 1.453.656.926.656 2.121h-3.539q0-.762-.457-1.183-.457-.434-1.395-.434-.773 0-1.242.363-.457.364-.457.938 0 .55.516.89.527.34 1.781.575 1.5.28 2.543.738 1.043.445 1.652 1.242.621.797.621 2.027 0 1.114-.668 2.004-.656.88-1.886 1.383-1.219.504-2.836.504-1.711 0-2.965-.621-1.242-.633-1.899-1.617-.644-.985-.644-2.051h3.34q.036.914.656 1.36.621.433 1.594.433.902 0 1.383-.34.492-.351.492-.937 0-.364-.223-.61-.21-.258-.773-.48-.551-.223-1.57-.446zm13.983 2.403q.574 0 .984-.082v2.66q-.914.328-2.086.328-3.727 0-3.727-3.797V9.899h-1.793V7.321h1.793v-3.14h3.54v3.14h2.132v2.578h-2.133v6.129q0 .75.293 1.031.293.27.997.27zm14.228-2.519h-8.016q.2 1.183.985 1.886.785.691 2.015.691.914 0 1.688-.34.785-.351 1.336-1.042l1.699 1.957q-.668.96-1.957 1.617-1.278.656-3 .656-1.946 0-3.387-.82-1.43-.82-2.203-2.227-.762-1.406-.762-3.105v-.446q0-1.898.715-3.386.715-1.489 2.063-2.32 1.347-.844 3.187-.844 1.793 0 3.059.761 1.265.762 1.922 2.168.656 1.395.656 3.293zm-3.469-2.65q-.024-1.03-.574-1.628-.54-.598-1.617-.598-1.008 0-1.582.668-.563.668-.739 1.84h4.512zm19.923-5.073q1.934 0 2.989 1.148 1.054 1.148 1.054 3.727v8.039h-3.539V11.95q0-.797-.21-1.23-.212-.446-.61-.61-.387-.164-.984-.164-.715 0-1.219.352-.504.34-.797.972.02.082.02.27V20h-3.54v-8.015q0-.797-.21-1.242-.211-.445-.61-.621-.386-.176-.996-.176-.68 0-1.183.304-.492.293-.797.844V20h-3.539V7.32h3.316l.118 1.419q.633-.797 1.547-1.22.926-.433 2.086-.433 1.172 0 2.016.48.855.47 1.312 1.442.633-.926 1.582-1.418.961-.504 2.203-.504zM201.398 2v18h-3.187l-.176-1.359q-1.243 1.594-3.212 1.594-1.535 0-2.66-.82-1.113-.832-1.699-2.285-.574-1.454-.574-3.317v-.246q0-1.934.574-3.398.586-1.465 1.7-2.274 1.124-.808 2.683-.808 1.805 0 3.012 1.37V2.001zm-5.672 15.376q1.488 0 2.133-1.266v-4.898q-.61-1.266-2.11-1.266-1.207 0-1.77.984-.55.985-.55 2.637v.246q0 1.629.54 2.602.55.96 1.757.96z" fill="currentColor"/>
|
||||
<path d="M45 13L63 3v20z" fill="#30d475"/>
|
||||
<circle cx="30" cy="13" r="9" fill="#30d475"/>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 3 KiB After Width: | Height: | Size: 3.1 KiB |
574
docs/style.css
574
docs/style.css
|
|
@ -12,6 +12,52 @@
|
|||
font-weight: 600;
|
||||
}
|
||||
|
||||
/* Variables */
|
||||
:root {
|
||||
--sd-brand-black: hsl(270, 19%, 13%); /* #201A26; */
|
||||
--sd-brand-green: hsl(145, 66%, 51%); /* #30D475; */
|
||||
--sd-brand-white: #fff;
|
||||
|
||||
--sd-green: hsl(145, 66%, 43%); /* #26b763 */
|
||||
--sd-gray-extralight: hsl(30, 10%, 96%); /* #f6f5f4 */
|
||||
--sd-gray-light: hsl(30, 10%, 92%);
|
||||
--sd-gray: hsl(30, 10%, 85%);
|
||||
--sd-gray-dark: hsl(257, 23%, 20%);
|
||||
--sd-gray-extradark: hsl(257, 23%, 16%); /* #241f31 */
|
||||
|
||||
--sd-highlight-bg-light: rgba(255, 255, 255, 1);
|
||||
--sd-highlight-bg-dark: rgba(0, 0, 0, .6);
|
||||
--sd-highlight-inline-bg-light: rgba(0, 0, 0, 0.07);
|
||||
--sd-highlight-inline-bg-dark: rgba(255, 255, 255, 0.1);
|
||||
|
||||
--sd-font-weight-normal: 400;
|
||||
--sd-font-weight-bold: 600;
|
||||
|
||||
/* Light mode variables */
|
||||
--sd-foreground-color: var(--sd-gray-extradark);
|
||||
--sd-background-color: var(--sd-gray-extralight);
|
||||
--sd-logo-color: var(--sd-brand-black);
|
||||
--sd-link-color: var(--sd-green);
|
||||
--sd-small-color: var(--sd-gray-dark);
|
||||
--sd-highlight-bg: var(--sd-highlight-bg-light);
|
||||
--sd-highlight-inline-bg: var(--sd-highlight-inline-bg-light);
|
||||
--sd-link-font-weight: var(--sd-font-weight-bold);
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:root {
|
||||
color-scheme: dark;
|
||||
--sd-foreground-color: var(--sd-gray);
|
||||
--sd-background-color: var(--sd-brand-black);
|
||||
--sd-logo-color: var(--sd-brand-white);
|
||||
--sd-link-color: var(--sd-brand-green);
|
||||
--sd-small-color: var(--sd-gray);
|
||||
--sd-highlight-bg: var(--sd-highlight-bg-dark);
|
||||
--sd-highlight-inline-bg: var(--sd-highlight-inline-bg-dark);
|
||||
--sd-link-font-weight: var(--sd-font-weight-normal);
|
||||
}
|
||||
}
|
||||
|
||||
/* Typography */
|
||||
* {
|
||||
-moz-box-sizing: border-box;
|
||||
|
|
@ -27,8 +73,8 @@ html, body {
|
|||
line-height: 1.6;
|
||||
}
|
||||
body {
|
||||
color: #241f31;
|
||||
background-color: #f6f5f4;
|
||||
color: var(--sd-foreground-color);
|
||||
background-color: var(--sd-background-color);
|
||||
}
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
margin: 1rem 0 0.625rem;
|
||||
|
|
@ -57,9 +103,9 @@ h3 {
|
|||
font-size: 1.15rem;
|
||||
}
|
||||
a {
|
||||
font-weight: 600;
|
||||
font-weight: var(--sd-link-font-weight);
|
||||
text-decoration: none;
|
||||
color: #26b763;
|
||||
color: var(--sd-link-color);
|
||||
cursor: pointer;
|
||||
}
|
||||
a:hover {
|
||||
|
|
@ -69,7 +115,7 @@ b {
|
|||
font-weight: 600;
|
||||
}
|
||||
small {
|
||||
color: #777;
|
||||
color: var(--sd-small-color);
|
||||
}
|
||||
hr {
|
||||
margin: 3rem auto 4rem;
|
||||
|
|
@ -89,8 +135,9 @@ hr {
|
|||
.page-logo {
|
||||
display: block;
|
||||
padding: 5rem 0 3rem;
|
||||
color: var(--sd-logo-color);
|
||||
}
|
||||
.page-logo > img {
|
||||
.page-logo > svg {
|
||||
display: block;
|
||||
width: 12.625em;
|
||||
height: auto;
|
||||
|
|
@ -98,16 +145,16 @@ hr {
|
|||
}
|
||||
|
||||
.brand-white {
|
||||
background-color: #fff;
|
||||
background-color: var(--sd-brand-white);
|
||||
}
|
||||
|
||||
.brand-green {
|
||||
background-color: #30D475;
|
||||
background-color: var(--sd-brand-green);
|
||||
}
|
||||
|
||||
.brand-black {
|
||||
background-color: #201A26;
|
||||
color: white;
|
||||
background-color: var(--sd-brand-black);
|
||||
color: var(--sd-white);
|
||||
}
|
||||
|
||||
.page-link::after {
|
||||
|
|
@ -132,221 +179,306 @@ tbody td {
|
|||
/* Generated with: rougify style github | sed '/background-color: #f8f8f8/d' */
|
||||
.highlight table td { padding: 5px; }
|
||||
.highlight table pre { margin: 0; }
|
||||
.highlight .cm {
|
||||
color: #999988;
|
||||
font-style: italic;
|
||||
}
|
||||
.highlight .cp {
|
||||
color: #999999;
|
||||
font-weight: bold;
|
||||
}
|
||||
.highlight .c1 {
|
||||
color: #999988;
|
||||
font-style: italic;
|
||||
}
|
||||
.highlight .cs {
|
||||
color: #999999;
|
||||
font-weight: bold;
|
||||
font-style: italic;
|
||||
}
|
||||
.highlight .c, .highlight .ch, .highlight .cd, .highlight .cpf {
|
||||
color: #999988;
|
||||
font-style: italic;
|
||||
}
|
||||
.highlight .err {
|
||||
color: #a61717;
|
||||
background-color: #e3d2d2;
|
||||
}
|
||||
.highlight .gd {
|
||||
color: #000000;
|
||||
background-color: #ffdddd;
|
||||
}
|
||||
.highlight .ge {
|
||||
color: #000000;
|
||||
font-style: italic;
|
||||
}
|
||||
.highlight .gr {
|
||||
color: #aa0000;
|
||||
}
|
||||
.highlight .gh {
|
||||
color: #999999;
|
||||
}
|
||||
.highlight .gi {
|
||||
color: #000000;
|
||||
background-color: #ddffdd;
|
||||
}
|
||||
.highlight .go {
|
||||
color: #888888;
|
||||
}
|
||||
.highlight .gp {
|
||||
color: #555555;
|
||||
}
|
||||
.highlight .gs {
|
||||
font-weight: bold;
|
||||
}
|
||||
.highlight .gu {
|
||||
color: #aaaaaa;
|
||||
}
|
||||
.highlight .gt {
|
||||
color: #aa0000;
|
||||
}
|
||||
.highlight .kc {
|
||||
color: #000000;
|
||||
font-weight: bold;
|
||||
}
|
||||
.highlight .kd {
|
||||
color: #000000;
|
||||
font-weight: bold;
|
||||
}
|
||||
.highlight .kn {
|
||||
color: #000000;
|
||||
font-weight: bold;
|
||||
}
|
||||
.highlight .kp {
|
||||
color: #000000;
|
||||
font-weight: bold;
|
||||
}
|
||||
.highlight .kr {
|
||||
color: #000000;
|
||||
font-weight: bold;
|
||||
}
|
||||
.highlight .kt {
|
||||
color: #445588;
|
||||
font-weight: bold;
|
||||
}
|
||||
.highlight .k, .highlight .kv {
|
||||
color: #000000;
|
||||
font-weight: bold;
|
||||
}
|
||||
.highlight .mf {
|
||||
color: #009999;
|
||||
}
|
||||
.highlight .mh {
|
||||
color: #009999;
|
||||
}
|
||||
.highlight .il {
|
||||
color: #009999;
|
||||
}
|
||||
.highlight .mi {
|
||||
color: #009999;
|
||||
}
|
||||
.highlight .mo {
|
||||
color: #009999;
|
||||
}
|
||||
.highlight .m, .highlight .mb, .highlight .mx {
|
||||
color: #009999;
|
||||
}
|
||||
.highlight .sa {
|
||||
color: #000000;
|
||||
font-weight: bold;
|
||||
}
|
||||
.highlight .sb {
|
||||
color: #d14;
|
||||
}
|
||||
.highlight .sc {
|
||||
color: #d14;
|
||||
}
|
||||
.highlight .sd {
|
||||
color: #d14;
|
||||
}
|
||||
.highlight .s2 {
|
||||
color: #d14;
|
||||
}
|
||||
.highlight .se {
|
||||
color: #d14;
|
||||
}
|
||||
.highlight .sh {
|
||||
color: #d14;
|
||||
}
|
||||
.highlight .si {
|
||||
color: #d14;
|
||||
}
|
||||
.highlight .sx {
|
||||
color: #d14;
|
||||
}
|
||||
.highlight .sr {
|
||||
color: #009926;
|
||||
}
|
||||
.highlight .s1 {
|
||||
color: #d14;
|
||||
}
|
||||
.highlight .ss {
|
||||
color: #990073;
|
||||
}
|
||||
.highlight .s, .highlight .dl {
|
||||
color: #d14;
|
||||
}
|
||||
.highlight .na {
|
||||
color: #008080;
|
||||
}
|
||||
.highlight .bp {
|
||||
color: #999999;
|
||||
}
|
||||
.highlight .nb {
|
||||
color: #0086B3;
|
||||
}
|
||||
.highlight .nc {
|
||||
color: #445588;
|
||||
font-weight: bold;
|
||||
}
|
||||
.highlight .no {
|
||||
color: #008080;
|
||||
}
|
||||
.highlight .nd {
|
||||
color: #3c5d5d;
|
||||
font-weight: bold;
|
||||
}
|
||||
.highlight .ni {
|
||||
color: #800080;
|
||||
}
|
||||
.highlight .ne {
|
||||
color: #990000;
|
||||
font-weight: bold;
|
||||
}
|
||||
.highlight .nf, .highlight .fm {
|
||||
color: #990000;
|
||||
font-weight: bold;
|
||||
}
|
||||
.highlight .nl {
|
||||
color: #990000;
|
||||
font-weight: bold;
|
||||
}
|
||||
.highlight .nn {
|
||||
color: #555555;
|
||||
}
|
||||
.highlight .nt {
|
||||
color: #000080;
|
||||
}
|
||||
.highlight .vc {
|
||||
color: #008080;
|
||||
}
|
||||
.highlight .vg {
|
||||
color: #008080;
|
||||
}
|
||||
.highlight .vi {
|
||||
color: #008080;
|
||||
}
|
||||
.highlight .nv, .highlight .vm {
|
||||
color: #008080;
|
||||
}
|
||||
.highlight .ow {
|
||||
color: #000000;
|
||||
font-weight: bold;
|
||||
}
|
||||
.highlight .o {
|
||||
color: #000000;
|
||||
font-weight: bold;
|
||||
}
|
||||
.highlight .w {
|
||||
color: #bbbbbb;
|
||||
|
||||
@media (prefers-color-scheme: light) {
|
||||
.highlight .cm {
|
||||
color: #999988;
|
||||
font-style: italic;
|
||||
}
|
||||
.highlight .cp {
|
||||
color: #999999;
|
||||
font-weight: bold;
|
||||
}
|
||||
.highlight .c1 {
|
||||
color: #999988;
|
||||
font-style: italic;
|
||||
}
|
||||
.highlight .cs {
|
||||
color: #999999;
|
||||
font-weight: bold;
|
||||
font-style: italic;
|
||||
}
|
||||
.highlight .c, .highlight .ch, .highlight .cd, .highlight .cpf {
|
||||
color: #999988;
|
||||
font-style: italic;
|
||||
}
|
||||
.highlight .err {
|
||||
color: #a61717;
|
||||
background-color: #e3d2d2;
|
||||
}
|
||||
.highlight .gd {
|
||||
color: #000000;
|
||||
background-color: #ffdddd;
|
||||
}
|
||||
.highlight .ge {
|
||||
color: #000000;
|
||||
font-style: italic;
|
||||
}
|
||||
.highlight .gr {
|
||||
color: #aa0000;
|
||||
}
|
||||
.highlight .gh {
|
||||
color: #999999;
|
||||
}
|
||||
.highlight .gi {
|
||||
color: #000000;
|
||||
background-color: #ddffdd;
|
||||
}
|
||||
.highlight .go {
|
||||
color: #888888;
|
||||
}
|
||||
.highlight .gp {
|
||||
color: #555555;
|
||||
}
|
||||
.highlight .gs {
|
||||
font-weight: bold;
|
||||
}
|
||||
.highlight .gu {
|
||||
color: #aaaaaa;
|
||||
}
|
||||
.highlight .gt {
|
||||
color: #aa0000;
|
||||
}
|
||||
.highlight .kc {
|
||||
color: #000000;
|
||||
font-weight: bold;
|
||||
}
|
||||
.highlight .kd {
|
||||
color: #000000;
|
||||
font-weight: bold;
|
||||
}
|
||||
.highlight .kn {
|
||||
color: #000000;
|
||||
font-weight: bold;
|
||||
}
|
||||
.highlight .kp {
|
||||
color: #000000;
|
||||
font-weight: bold;
|
||||
}
|
||||
.highlight .kr {
|
||||
color: #000000;
|
||||
font-weight: bold;
|
||||
}
|
||||
.highlight .kt {
|
||||
color: #445588;
|
||||
font-weight: bold;
|
||||
}
|
||||
.highlight .k, .highlight .kv {
|
||||
color: #000000;
|
||||
font-weight: bold;
|
||||
}
|
||||
.highlight .mf {
|
||||
color: #009999;
|
||||
}
|
||||
.highlight .mh {
|
||||
color: #009999;
|
||||
}
|
||||
.highlight .il {
|
||||
color: #009999;
|
||||
}
|
||||
.highlight .mi {
|
||||
color: #009999;
|
||||
}
|
||||
.highlight .mo {
|
||||
color: #009999;
|
||||
}
|
||||
.highlight .m, .highlight .mb, .highlight .mx {
|
||||
color: #009999;
|
||||
}
|
||||
.highlight .sa {
|
||||
color: #000000;
|
||||
font-weight: bold;
|
||||
}
|
||||
.highlight .sb {
|
||||
color: #d14;
|
||||
}
|
||||
.highlight .sc {
|
||||
color: #d14;
|
||||
}
|
||||
.highlight .sd {
|
||||
color: #d14;
|
||||
}
|
||||
.highlight .s2 {
|
||||
color: #d14;
|
||||
}
|
||||
.highlight .se {
|
||||
color: #d14;
|
||||
}
|
||||
.highlight .sh {
|
||||
color: #d14;
|
||||
}
|
||||
.highlight .si {
|
||||
color: #d14;
|
||||
}
|
||||
.highlight .sx {
|
||||
color: #d14;
|
||||
}
|
||||
.highlight .sr {
|
||||
color: #009926;
|
||||
}
|
||||
.highlight .s1 {
|
||||
color: #d14;
|
||||
}
|
||||
.highlight .ss {
|
||||
color: #990073;
|
||||
}
|
||||
.highlight .s, .highlight .dl {
|
||||
color: #d14;
|
||||
}
|
||||
.highlight .na {
|
||||
color: #008080;
|
||||
}
|
||||
.highlight .bp {
|
||||
color: #999999;
|
||||
}
|
||||
.highlight .nb {
|
||||
color: #0086B3;
|
||||
}
|
||||
.highlight .nc {
|
||||
color: #445588;
|
||||
font-weight: bold;
|
||||
}
|
||||
.highlight .no {
|
||||
color: #008080;
|
||||
}
|
||||
.highlight .nd {
|
||||
color: #3c5d5d;
|
||||
font-weight: bold;
|
||||
}
|
||||
.highlight .ni {
|
||||
color: #800080;
|
||||
}
|
||||
.highlight .ne {
|
||||
color: #990000;
|
||||
font-weight: bold;
|
||||
}
|
||||
.highlight .nf, .highlight .fm {
|
||||
color: #990000;
|
||||
font-weight: bold;
|
||||
}
|
||||
.highlight .nl {
|
||||
color: #990000;
|
||||
font-weight: bold;
|
||||
}
|
||||
.highlight .nn {
|
||||
color: #555555;
|
||||
}
|
||||
.highlight .nt {
|
||||
color: #000080;
|
||||
}
|
||||
.highlight .vc {
|
||||
color: #008080;
|
||||
}
|
||||
.highlight .vg {
|
||||
color: #008080;
|
||||
}
|
||||
.highlight .vi {
|
||||
color: #008080;
|
||||
}
|
||||
.highlight .nv, .highlight .vm {
|
||||
color: #008080;
|
||||
}
|
||||
.highlight .ow {
|
||||
color: #000000;
|
||||
font-weight: bold;
|
||||
}
|
||||
.highlight .o {
|
||||
color: #000000;
|
||||
font-weight: bold;
|
||||
}
|
||||
.highlight .w {
|
||||
color: #bbbbbb;
|
||||
}
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
/* rouge "base16.dark" code highlight */
|
||||
/* generated with: rougify style base16.dark | sed '/background-color: #151515/d' */
|
||||
.highlight, .highlight .w {
|
||||
color: #d0d0d0;
|
||||
}
|
||||
.highlight .err {
|
||||
color: #151515;
|
||||
background-color: #ac4142;
|
||||
}
|
||||
.highlight .c, .highlight .ch, .highlight .cd, .highlight .cm, .highlight .cpf, .highlight .c1, .highlight .cs {
|
||||
color: #505050;
|
||||
}
|
||||
.highlight .cp {
|
||||
color: #f4bf75;
|
||||
}
|
||||
.highlight .nt {
|
||||
color: #f4bf75;
|
||||
}
|
||||
.highlight .o, .highlight .ow {
|
||||
color: #d0d0d0;
|
||||
}
|
||||
.highlight .p, .highlight .pi {
|
||||
color: #d0d0d0;
|
||||
}
|
||||
.highlight .gi {
|
||||
color: #90a959;
|
||||
}
|
||||
.highlight .gd {
|
||||
color: #ac4142;
|
||||
}
|
||||
.highlight .gh {
|
||||
color: #6a9fb5;
|
||||
font-weight: bold;
|
||||
}
|
||||
.highlight .k, .highlight .kn, .highlight .kp, .highlight .kr, .highlight .kv {
|
||||
color: #aa759f;
|
||||
}
|
||||
.highlight .kc {
|
||||
color: #d28445;
|
||||
}
|
||||
.highlight .kt {
|
||||
color: #d28445;
|
||||
}
|
||||
.highlight .kd {
|
||||
color: #d28445;
|
||||
}
|
||||
.highlight .s, .highlight .sb, .highlight .sc, .highlight .dl, .highlight .sd, .highlight .s2, .highlight .sh, .highlight .sx, .highlight .s1 {
|
||||
color: #90a959;
|
||||
}
|
||||
.highlight .sa {
|
||||
color: #aa759f;
|
||||
}
|
||||
.highlight .sr {
|
||||
color: #75b5aa;
|
||||
}
|
||||
.highlight .si {
|
||||
color: #8f5536;
|
||||
}
|
||||
.highlight .se {
|
||||
color: #8f5536;
|
||||
}
|
||||
.highlight .nn {
|
||||
color: #f4bf75;
|
||||
}
|
||||
.highlight .nc {
|
||||
color: #f4bf75;
|
||||
}
|
||||
.highlight .no {
|
||||
color: #f4bf75;
|
||||
}
|
||||
.highlight .na {
|
||||
color: #6a9fb5;
|
||||
}
|
||||
.highlight .m, .highlight .mb, .highlight .mf, .highlight .mh, .highlight .mi, .highlight .il, .highlight .mo, .highlight .mx {
|
||||
color: #90a959;
|
||||
}
|
||||
.highlight .ss {
|
||||
color: #90a959;
|
||||
}
|
||||
}
|
||||
|
||||
/* Code Blocks */
|
||||
.highlighter-rouge {
|
||||
padding: 2px 1rem;
|
||||
border-radius: 5px;
|
||||
background-color: white;
|
||||
color: var(--sd-foreground-color);
|
||||
background-color: var(--sd-highlight-bg);
|
||||
|
||||
overflow: auto;
|
||||
}
|
||||
|
|
@ -358,5 +490,9 @@ tbody td {
|
|||
/* Inline Code */
|
||||
code.highlighter-rouge {
|
||||
padding: 2px 6px;
|
||||
background-color: rgba(0,0,0, 0.07);
|
||||
background-color: var(--sd-highlight-inline-bg);
|
||||
}
|
||||
|
||||
a code.highlighter-rouge {
|
||||
color: inherit;
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue