Skip to content

Instantly share code, notes, and snippets.

@philhartung

philhartung/main.12345678.min.css

Created May 5, 2026 09:17
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save philhartung/3a115e1b13d70e7b2ad176432952786d to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save philhartung/3a115e1b13d70e7b2ad176432952786d to your computer and use it in GitHub Desktop.
Download ZIP
MkDocs Asciidoc CSS
Raw
main.12345678.min.css
/* =========================================
LINE NUMBERS & BASIC UTILITIES
========================================= */
td.linenos.gl {
padding-right: 5px !important;
border-right: 1px solid grey;
}
.linenotable .code pre {
padding-left: 5px !important;
}
.linenotable pre {
margin-top: 0;
margin-bottom: 0;
}
.linenotable .linenos,
.linenotable .lineno {
user-select: none; /* Standard syntax */
-webkit-user-select: none; /* Safari/Chrome */
-moz-user-select: none; /* Firefox */
-ms-user-select: none; /* Older IE/Edge versions */
}
.line-through {
text-decoration: line-through;
}
/* =========================================
1. STANDARD / LIGHT THEME (Neutral Grays)
========================================= */
/* Container for full width and scrollability */
.md-typeset__table {
width: 100% !important;
overflow-x: auto;
margin: 2rem 0;
padding-bottom: 1rem !important;
border-radius: 6px;
background-color: #ffffff !important;
box-shadow: none !important;
}
.md-typeset__table table {
width: 100% !important;
min-width: 100% !important;
border-collapse: collapse !important;
text-align: left;
color: #333333 !important;
background-color: #ffffff !important;
font-family: system-ui, -apple-system, sans-serif;
font-size: 0.95rem;
}
/* Table caption */
.md-typeset__table caption.title {
caption-side: top;
text-align: left;
font-weight: 600;
padding: 1rem 1.5rem;
color: #666666 !important;
background-color: #ffffff !important;
border-bottom: 2px solid #dddddd !important;
}
/* Cells and headers */
.md-typeset__table th,
.md-typeset__table td {
padding: 12px 16px !important;
border: none !important;
border-bottom: 1px solid #dddddd !important;
}
/* Remove border from last row for clean padding */
.md-typeset__table tbody tr:last-child td {
border-bottom: none !important;
}
.md-typeset__table th {
background-color: #f5f5f5 !important;
color: #111111 !important;
font-weight: 600 !important;
text-transform: uppercase;
font-size: 0.85rem;
letter-spacing: 0.05em;
}
/* Zebra striping (Light) */
.md-typeset__table tbody tr:nth-child(even) td {
background-color: #fafafa !important;
}
/* Hover effect (Light) */
.md-typeset__table tbody tr:hover td {
background-color: #eeeeee !important;
}
/* Fix paragraphs inside cells */
.md-typeset__table p.tableblock {
margin: 0 !important;
padding: 0 !important;
color: inherit !important;
}
/* =========================================
2. DARK THEME (Adapted to Backstage UI)
========================================= */
@media (prefers-color-scheme: dark) {
.md-typeset__table {
background-color: #282828 !important;
box-shadow: none !important; /* <--- Box-Shadow removed */
}
.md-typeset__table table {
color: #e0e0e0 !important;
background-color: #282828 !important;
}
.md-typeset__table caption.title {
color: #aaaaaa !important;
background-color: #282828 !important;
border-bottom: 2px solid #444444 !important;
}
.md-typeset__table th,
.md-typeset__table td {
border-bottom: 1px solid #444444 !important;
}
.md-typeset__table th {
background-color: #1e1e1e !important;
color: #ffffff !important;
}
.md-typeset__table tbody tr:nth-child(even) td {
background-color: #2e2e2e !important;
}
.md-typeset__table tbody tr:hover td {
background-color: #383838 !important;
}
}
/* =========================================
3. MANUAL DARK MODE (Fallback)
========================================= */
[data-md-color-scheme="slate"] .md-typeset__table,
[data-theme="dark"] .md-typeset__table {
background-color: #282828 !important;
box-shadow: none !important; /* <--- Box-Shadow removed */
}
[data-md-color-scheme="slate"] .md-typeset__table table,
[data-theme="dark"] .md-typeset__table table {
color: #e0e0e0 !important;
background-color: #282828 !important;
}
[data-md-color-scheme="slate"] .md-typeset__table caption.title,
[data-theme="dark"] .md-typeset__table caption.title {
color: #aaaaaa !important;
background-color: #282828 !important;
border-bottom: 2px solid #444444 !important;
}
[data-md-color-scheme="slate"] .md-typeset__table th,
[data-theme="dark"] .md-typeset__table th,
[data-md-color-scheme="slate"] .md-typeset__table td,
[data-theme="dark"] .md-typeset__table td {
border-bottom: 1px solid #444444 !important;
}
[data-md-color-scheme="slate"] .md-typeset__table th,
[data-theme="dark"] .md-typeset__table th {
background-color: #1e1e1e !important;
color: #ffffff !important;
}
[data-md-color-scheme="slate"] .md-typeset__table tbody tr:nth-child(even) td,
[data-theme="dark"] .md-typeset__table tbody tr:nth-child(even) td {
background-color: #2e2e2e !important;
}
[data-md-color-scheme="slate"] .md-typeset__table tbody tr:hover td,
[data-theme="dark"] .md-typeset__table tbody tr:hover td {
background-color: #383838 !important;
}
/* =========================================
CHECKLISTS
========================================= */
/* Basic list formatting */
.ulist.checklist ul {
list-style-type: none;
padding-left: 0;
margin: 0;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
font-size: 14px;
}
.ulist.checklist li {
margin-bottom: 8px;
}
.ulist.checklist p {
margin: 0;
display: flex;
align-items: flex-start;
line-height: 1.5;
}
/* Override FontAwesome & style checkbox base */
.ulist.checklist i.fa {
display: inline-flex;
justify-content: center;
align-items: center;
width: 16px;
height: 16px;
min-width: 16px; /* Prevents squishing with long text */
margin-right: 8px;
margin-top: 3px; /* Visually centers the box with the text */
border-radius: 3px;
box-sizing: border-box;
}
/* Removes default FontAwesome icons */
.ulist.checklist i.fa::before {
content: none !important;
}
.ulist.checklist i.fa-check-square-o {
background-color: #57ab5a; /* Green shade similar to screenshot */
border: 1px solid #57ab5a;
}
@media (prefers-color-scheme: light) {
/* --- Status: Open (Unchecked) --- */
.ulist.checklist i.fa-square-o {
border: 2px solid #d0d7de;
background-color: #ffffff;
}
.ulist.checklist i.fa-check-square-o::after {
content: "";
display: block;
width: 4px;
height: 8px;
border: solid white;
border-width: 0 2px 2px 0;
transform: rotate(45deg);
margin-bottom: 2px;
}
}
@media (prefers-color-scheme: dark) {
/* --- Status: Open (Unchecked) --- */
.ulist.checklist i.fa-square-o {
border: 2px solid #4c4c4c;
background-color: #333333;
}
.ulist.checklist i.fa-check-square-o::after {
content: "";
display: block;
width: 4px;
height: 8px;
border: solid #333333;
border-width: 0 2px 2px 0;
transform: rotate(45deg);
margin-bottom: 2px;
}
}
/* =========================================
CODE CALLOUTS & LISTS
========================================= */
/* 1. Shared design for code callouts and list numbers */
.conum::after,
.colist li::before {
display: inline-block;
background-color: #007bff; /* A distinct color for connection */
color: white;
width: 20px;
height: 20px;
border-radius: 50%;
text-align: center;
line-height: 20px; /* Vertically centers the text */
font-size: 12px;
font-weight: bold;
font-style: normal; /* Important for the <i> tag */
}
/* 2. Specific styling for callouts IN the code */
.conum::after {
content: attr(data-value); /* Gets the number from data-value="1" */
margin-left: 8px; /* Some spacing to the code */
cursor: help; /* Indicates that an explanation is available */
}
/* 3. List preparation (hide standard numbers) */
.colist {
list-style-type: none; /* Hides normal "1., 2., 3." */
counter-reset: callout; /* Starts a custom CSS counter */
padding-left: 0;
margin-top: 15px;
}
/* 4. Layout of individual list items */
.colist li {
position: relative;
counter-increment: callout; /* Increments counter per <li> */
padding-left: 32px; /* Makes room for our round badge */
margin-bottom: 10px;
line-height: 1.5;
}
/* 5. Insert numbers BEFORE list items */
.colist li::before {
content: counter(callout); /* Inserts the current counter value */
position: absolute;
left: 0;
top: 2px; /* Adjusts height to the text */
}
/* =========================================
BASE STYLES (Structure, Spacing, Typography)
Applicable to both themes
========================================= */
.exampleblock {
margin: 1.5em 0;
border-radius: 6px;
}
.exampleblock > .title {
font-weight: 600;
padding: 0.5em 1em;
border-top-left-radius: 6px;
border-top-right-radius: 6px;
}
.exampleblock > .content {
padding: 1em;
}
.exampleblock > .content > .paragraph:last-child p {
margin-bottom: 0;
}
.sidebarblock {
margin: 1.5em 0;
border-radius: 0 6px 6px 0;
padding: 1.2em 1.5em;
}
.sidebarblock > .content > .title {
font-size: 1.15em;
font-weight: bold;
margin-bottom: 0.5em;
}
.sidebarblock > .content > .paragraph:last-child p {
margin-bottom: 0;
}
/* =========================================
LIGHT THEME BLOCKS
Fixed, light colors for good contrast
========================================= */
@media (prefers-color-scheme: light) {
.exampleblock {
background-color: #ffffff;
border: 1px solid #e1e4e8;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}
.exampleblock > .title {
background-color: #f6f8fa;
border-bottom: 1px solid #e1e4e8;
}
.sidebarblock {
background-color: #f1f5f9;
border-left: 4px solid #94a3b8;
}
}
/* =========================================
DARK THEME BLOCKS
Transparent overlays to adapt to the background
========================================= */
@media (prefers-color-scheme: dark) {
.exampleblock {
background-color: rgba(255, 255, 255, 0.03);
border: 1px solid rgba(255, 255, 255, 0.1);
/* Shadows often unnecessary in dark mode, hence omitted here */
}
.exampleblock > .title {
background-color: rgba(255, 255, 255, 0.05);
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.sidebarblock {
background-color: rgba(148, 163, 184, 0.1);
border-left: 4px solid #64748b;
}
}
/* =========================================
1. DEFINITION LISTS: STRUCTURE & SPACING (Always valid)
========================================= */
.dlist dl {
margin-top: 1.5em;
margin-bottom: 1.5em;
}
.dlist dt.hdlist1 {
font-weight: bold;
font-size: 1.05em;
margin-top: 1.2em;
margin-bottom: 0.4em;
}
.dlist dd {
margin-left: 0;
margin-bottom: 1.5em;
padding-left: 1.5rem;
padding-top: 0.5em;
padding-bottom: 0.5em;
border-radius: 0 4px 4px 0;
}
.dlist dd p {
margin-top: 0;
margin-bottom: 0.8em;
line-height: 1.6;
}
.dlist dd p:last-child,
.dlist dd .paragraph:last-child p {
margin-bottom: 0;
}
/* =========================================
2. DEFINITION LISTS: LIGHT THEME COLORS
========================================= */
@media (prefers-color-scheme: light) {
.dlist dd {
/* Dark line and dark, transparent background for light pages */
border-left: 3px solid rgba(0, 0, 0, 0.2);
background-color: rgba(0, 0, 0, 0.02);
}
}
/* =========================================
3. DEFINITION LISTS: DARK THEME COLORS
========================================= */
@media (prefers-color-scheme: dark) {
.dlist dd {
/* Light line and light, transparent background for dark pages */
border-left: 3px solid rgba(255, 255, 255, 0.2);
background-color: rgba(255, 255, 255, 0.03);
}
}
/* =========================================
UI ELEMENTS: BASE STRUCTURE (Independent of theme)
========================================= */
/* --- Keyboard shortcuts (kbd) --- */
.keyseq kbd {
display: inline-block;
border-style: solid;
border-width: 1px;
border-bottom-width: 2px;
border-radius: 4px;
padding: 0.1em 0.5em;
font-family: inherit;
font-size: 0.85em;
line-height: 1.4;
vertical-align: middle;
margin: 0 0.1em;
}
/* --- Menu paths --- */
.menuseq .menu,
.menuseq .menuitem {
font-weight: 600;
}
/* Fallback for the missing FontAwesome arrow */
.menuseq .caret::before {
content: "›";
font-style: normal;
font-weight: bold;
font-size: 1.2em;
margin: 0 4px;
}
/* --- UI Buttons --- */
.button {
display: inline-block;
border-style: solid;
border-width: 1px;
border-radius: 4px;
padding: 0.25em 0.8em;
font-weight: 600;
font-size: 0.9em;
vertical-align: middle;
margin: 0 0.2em;
cursor: pointer;
}
/* =========================================
UI ELEMENTS: LIGHT MODE COLORS
========================================= */
@media (prefers-color-scheme: light) {
.keyseq kbd {
background-color: #f6f8fa;
color: #24292e;
border-color: #d1d5da;
}
.menuseq .caret::before {
color: #586069;
}
.button {
background-color: #0366d6; /* Slightly brighter, richer blue for Light Mode */
color: #ffffff;
border-color: #0366d6;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
}
/* =========================================
UI ELEMENTS: DARK MODE COLORS
========================================= */
@media (prefers-color-scheme: dark) {
.keyseq kbd {
background-color: #1f2b38;
color: #e1e3e5;
border-color: #5a6673;
}
.menuseq .caret::before {
color: #a0a8b1;
}
.button {
background-color: #1f75cb; /* Suitable blue for Dark Mode */
color: #ffffff;
border-color: #1b68b3;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25); /* Slightly stronger shadow on dark background */
}
}
/* =========================================
AUTO-GENERATED THEME: SOLARIZED
========================================= */
@media (prefers-color-scheme: light) {
pre { line-height: 125%; }
td.linenos .normal { color: inherit; background-color: transparent; padding-left: 5px; padding-right: 5px; }
span.linenos { color: inherit; background-color: transparent; padding-left: 5px; padding-right: 5px; }
td.linenos .special { color: #000000; background-color: #ffffc0; padding-left: 5px; padding-right: 5px; }
span.linenos.special { color: #000000; background-color: #ffffc0; padding-left: 5px; padding-right: 5px; }
.highlight .hll { background-color: #93a1a1 }
.highlight, .highlight code { background: #fdf6e3; color: #586E75 }
.highlight .c { color: #839496 } /* Comment */
.highlight .err { color: #DC322F } /* Error */
.highlight .k { color: #6C71C4 } /* Keyword */
.highlight .l { color: #859900 } /* Literal */
.highlight .o { color: #2AA198 } /* Operator */
.highlight .ch { color: #839496 } /* Comment.Hashbang */
.highlight .cm { color: #839496 } /* Comment.Multiline */
.highlight .cp { color: #D33682 } /* Comment.Preproc */
.highlight .cpf { color: #859900 } /* Comment.PreprocFile */
.highlight .c1 { color: #839496 } /* Comment.Single */
.highlight .cs { color: #839496 } /* Comment.Special */
.highlight .kc { color: #6C71C4 } /* Keyword.Constant */
.highlight .kd { color: #6C71C4 } /* Keyword.Declaration */
.highlight .kn { color: #6C71C4 } /* Keyword.Namespace */
.highlight .kp { color: #6C71C4 } /* Keyword.Pseudo */
.highlight .kr { color: #6C71C4 } /* Keyword.Reserved */
.highlight .kt { color: #DC322F } /* Keyword.Type */
.highlight .ld { color: #859900 } /* Literal.Date */
.highlight .m { color: #CB4B16 } /* Literal.Number */
.highlight .s { color: #859900 } /* Literal.String */
.highlight .na { color: #268BD2 } /* Name.Attribute */
.highlight .nb { color: #268BD2 } /* Name.Builtin */
.highlight .nc { color: #268BD2 } /* Name.Class */
.highlight .no { color: #CB4B16 } /* Name.Constant */
.highlight .nd { color: #CB4B16 } /* Name.Decorator */
.highlight .nf { color: #268BD2 } /* Name.Function */
.highlight .nn { color: #268BD2 } /* Name.Namespace */
.highlight .nt { color: #6C71C4 } /* Name.Tag */
.highlight .nv { color: #268BD2 } /* Name.Variable */
.highlight .ow { color: #6C71C4 } /* Operator.Word */
.highlight .w { color: #586E75 } /* Text.Whitespace */
.highlight .mb { color: #CB4B16 } /* Literal.Number.Bin */
.highlight .mf { color: #CB4B16 } /* Literal.Number.Float */
.highlight .mh { color: #CB4B16 } /* Literal.Number.Hex */
.highlight .mi { color: #CB4B16 } /* Literal.Number.Integer */
.highlight .mo { color: #CB4B16 } /* Literal.Number.Oct */
.highlight .sa { color: #859900 } /* Literal.String.Affix */
.highlight .sb { color: #859900 } /* Literal.String.Backtick */
.highlight .sc { color: #859900 } /* Literal.String.Char */
.highlight .dl { color: #859900 } /* Literal.String.Delimiter */
.highlight .sd { color: #859900 } /* Literal.String.Doc */
.highlight .s2 { color: #859900 } /* Literal.String.Double */
.highlight .se { color: #859900 } /* Literal.String.Escape */
.highlight .sh { color: #859900 } /* Literal.String.Heredoc */
.highlight .si { color: #D33682 } /* Literal.String.Interpol */
.highlight .sx { color: #859900 } /* Literal.String.Other */
.highlight .sr { color: #2AA198 } /* Literal.String.Regex */
.highlight .s1 { color: #859900 } /* Literal.String.Single */
.highlight .ss { color: #CB4B16 } /* Literal.String.Symbol */
.highlight .bp { color: #DC322F } /* Name.Builtin.Pseudo */
.highlight .fm { color: #268BD2 } /* Name.Function.Magic */
.highlight .vc { color: #268BD2 } /* Name.Variable.Class */
.highlight .vg { color: #268BD2 } /* Name.Variable.Global */
.highlight .vi { color: #DC322F } /* Name.Variable.Instance */
.highlight .vm { color: #268BD2 } /* Name.Variable.Magic */
.highlight .il { color: #CB4B16 } /* Literal.Number.Integer.Long */
figure.kroki { background-color: #fff; border-radius: 6px; }
}
@media (prefers-color-scheme: dark) {
pre { line-height: 125%; }
td.linenos .normal { color: inherit; background-color: transparent; padding-left: 5px; padding-right: 5px; }
span.linenos { color: inherit; background-color: transparent; padding-left: 5px; padding-right: 5px; }
td.linenos .special { color: #000000; background-color: #ffffc0; padding-left: 5px; padding-right: 5px; }
span.linenos.special { color: #000000; background-color: #ffffc0; padding-left: 5px; padding-right: 5px; }
.highlight .hll { background-color: #586e75 }
.highlight, .highlight code { background: #002b36; color: #93A1A1 }
.highlight .c { color: #657B83 } /* Comment */
.highlight .err { color: #DC322F } /* Error */
.highlight .k { color: #6C71C4 } /* Keyword */
.highlight .l { color: #859900 } /* Literal */
.highlight .o { color: #2AA198 } /* Operator */
.highlight .ch { color: #657B83 } /* Comment.Hashbang */
.highlight .cm { color: #657B83 } /* Comment.Multiline */
.highlight .cp { color: #D33682 } /* Comment.Preproc */
.highlight .cpf { color: #859900 } /* Comment.PreprocFile */
.highlight .c1 { color: #657B83 } /* Comment.Single */
.highlight .cs { color: #657B83 } /* Comment.Special */
.highlight .kc { color: #6C71C4 } /* Keyword.Constant */
.highlight .kd { color: #6C71C4 } /* Keyword.Declaration */
.highlight .kn { color: #6C71C4 } /* Keyword.Namespace */
.highlight .kp { color: #6C71C4 } /* Keyword.Pseudo */
.highlight .kr { color: #6C71C4 } /* Keyword.Reserved */
.highlight .kt { color: #DC322F } /* Keyword.Type */
.highlight .ld { color: #859900 } /* Literal.Date */
.highlight .m { color: #CB4B16 } /* Literal.Number */
.highlight .s { color: #859900 } /* Literal.String */
.highlight .na { color: #268BD2 } /* Name.Attribute */
.highlight .nb { color: #268BD2 } /* Name.Builtin */
.highlight .nc { color: #268BD2 } /* Name.Class */
.highlight .no { color: #CB4B16 } /* Name.Constant */
.highlight .nd { color: #CB4B16 } /* Name.Decorator */
.highlight .nf { color: #268BD2 } /* Name.Function */
.highlight .nn { color: #268BD2 } /* Name.Namespace */
.highlight .nt { color: #6C71C4 } /* Name.Tag */
.highlight .nv { color: #268BD2 } /* Name.Variable */
.highlight .ow { color: #6C71C4 } /* Operator.Word */
.highlight .w { color: #93A1A1 } /* Text.Whitespace */
.highlight .mb { color: #CB4B16 } /* Literal.Number.Bin */
.highlight .mf { color: #CB4B16 } /* Literal.Number.Float */
.highlight .mh { color: #CB4B16 } /* Literal.Number.Hex */
.highlight .mi { color: #CB4B16 } /* Literal.Number.Integer */
.highlight .mo { color: #CB4B16 } /* Literal.Number.Oct */
.highlight .sa { color: #859900 } /* Literal.String.Affix */
.highlight .sb { color: #859900 } /* Literal.String.Backtick */
.highlight .sc { color: #859900 } /* Literal.String.Char */
.highlight .dl { color: #859900 } /* Literal.String.Delimiter */
.highlight .sd { color: #859900 } /* Literal.String.Doc */
.highlight .s2 { color: #859900 } /* Literal.String.Double */
.highlight .se { color: #859900 } /* Literal.String.Escape */
.highlight .sh { color: #859900 } /* Literal.String.Heredoc */
.highlight .si { color: #D33682 } /* Literal.String.Interpol */
.highlight .sx { color: #859900 } /* Literal.String.Other */
.highlight .sr { color: #2AA198 } /* Literal.String.Regex */
.highlight .s1 { color: #859900 } /* Literal.String.Single */
.highlight .ss { color: #CB4B16 } /* Literal.String.Symbol */
.highlight .bp { color: #DC322F } /* Name.Builtin.Pseudo */
.highlight .fm { color: #268BD2 } /* Name.Function.Magic */
.highlight .vc { color: #268BD2 } /* Name.Variable.Class */
.highlight .vg { color: #268BD2 } /* Name.Variable.Global */
.highlight .vi { color: #DC322F } /* Name.Variable.Instance */
.highlight .vm { color: #268BD2 } /* Name.Variable.Magic */
.highlight .il { color: #CB4B16 } /* Literal.Number.Integer.Long */
figure.kroki { background-color: #777; border-radius: 6px; } /* Kroki Figure Background */
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment