Define highlight and tab colors as variables

This commit is contained in:
SML 2023-02-09 06:46:13 +08:00
parent 3587a4fe15
commit c111d93840
2 changed files with 33 additions and 8 deletions

View File

@ -3,12 +3,15 @@
:root { :root {
--sanic: #ff0d68; --sanic: #ff0d68;
--sanic-blue: #0369a1; --sanic-blue: #0369a1;
--sanic-yellow: #FFE900; --sanic-yellow: #ffde41;
--sanic-purple: #7e22ce; --sanic-purple: #7e22ce;
--sanic-green: #4d7c0f; --sanic-green: #4d7c0f;
--sanic-tab: #ffffff; --sanic-background: #e2e8f0;
--sanic-background: #f1f5f9; --sanic-text: #1f2937;
--sanic-text: #0f172a; --sanic-tab-background: #f8fafc;
--sanic-tab-text: #0f172a;
--sanic-highlight-background: var(--sanic-yellow);
--sanic-highlight-text: var(--sanic-text);
} }
@media (prefers-color-scheme: dark) { @media (prefers-color-scheme: dark) {
@ -18,9 +21,12 @@
--sanic-yellow: #ffde41; --sanic-yellow: #ffde41;
--sanic-purple: #b19bf8; --sanic-purple: #b19bf8;
--sanic-green: #37d971; --sanic-green: #37d971;
--sanic-tab: #e8e3e3;
--sanic-background: #2b2f3b; --sanic-background: #2b2f3b;
--sanic-text: #ccc; --sanic-text: #f1f5f9;
--sanic-tab-background: #383d4d;
--sanic-tab-text: #cbd5e1;
--sanic-highlight-background: var(--sanic-yellow);
--sanic-highlight-text: #1f2937;
} }
} }

View File

@ -23,20 +23,39 @@ summary {
--tracerite-type: var(--sanic-purple); --tracerite-type: var(--sanic-purple);
--tracerite-exception: var(--sanic); --tracerite-exception: var(--sanic);
--tracerite-highlight: var(--sanic-yellow); --tracerite-highlight: var(--sanic-yellow);
--tracerite-tab: var(--sanic-tab); --tracerite-tab: var(--sanic-tab-background);
--tracerite-tab-text: var(--sanic-tab-text);
} }
.tracerite > h3 { .tracerite > h3 {
margin: 0.5rem 0 !important; margin: 0.5rem 0 !important;
} }
.tracerite .traceback-labels button {
font-size: 0.8rem !important;
line-height: 120% !important;
background: var(--tracerite-tab) !important;
color: var(--tracerite-tab-text) !important;
transition: 0.3s;
}
.tracerite .traceback-labels button:hover {
filter: brightness(120%);
}
.tracerite .traceback-details mark span {
background: var(--sanic-highlight-background);
color: var(--sanic-highlight-text);
}
h1 { h1 {
/*margin-left: -1.5rem; !* Emoji partially in the left margin *!*/ /*margin-left: -1.5rem; !* Emoji partially in the left margin *!*/
} }
h2 { h2 {
margin: 1em 0 0.2em 0; margin: 1em 0 0.2em 0;
font-size: 1.25rem; font-size: 1.25rem;
color: #888; color: var(--sanic-text);
} }
dl.key-value-table { dl.key-value-table {
width: 100%; width: 100%;