Mirror/MarginaliaSearch
1
0
Fork 0
mirror of https://github.com/MarginaliaSearch/MarginaliaSearch.git synced 2025-02-24 13:19:02 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

(search, WIP) Convert SCSS variables to CSS custom properties for dynamic theming

Browse Source
This commit is contained in:
Sam Storment 2024-05-08 22:13:24 -05:00
parent c837321df1
commit c38766c5a6
1 changed files with 128 additions and 76 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

204
code/services-application/search-service/resources/static/search/serp.scss
View File

@ -1,33 +1,87 @@
$nicotine-dark: #acae89; // $nicotine-dark: #acae89;
$nicotine-light: #f8f8ee; // $nicotine-light: #f8f8ee;
$fg-dark: #000; // $fg-dark: #000;
$fg-light: #fff; // $fg-light: #fff;
$highlight-dark: #2f4858; // $highlight-dark: #2f4858;
$highlight-light: #3F5F6F; // $highlight-light: #3F5F6F;
$highlight-light2: #eee; // $highlight-light2: #eee;
$border-color: #ccc; // $border-color: #ccc;
$border-color2: #aaa; // $border-color2: #aaa;
$heading-fonts: serif; // $heading-fonts: serif;
$visited: #fcc; // $visited: #fcc;
:root {
--clr-bg: #fff;
--clr-text: #000; // $fg-dark
--clr-bg-page: #f8f8ee; // $nicotine-light
--clr-bg-theme: #3F5F6F; // $highlight-light
--clr-text-theme: #fff; // $fg-light
--clr-bg-highlight: #eee; // $highlight-light2
--clr-text-highlight: #111111;
--clr-bg-accent: #acae89; // $nicotine-dark
--clr-text-visited: #fcc; // $visited
--clr-border: #ccc; // $border-color
--clr-border-dim: #aaa; // $border-color2
--clr-border-dark: #888;
--clr-shadow: var(--clr-border);
--font-family: sans-serif;
--font-size: 14px;
--font-family-heading: serif; // $heading-fonts
}
@media (prefers-color-scheme: dark) {
:root {
--clr-bg: #2f2f2f;
--clr-text: #ddd;
--clr-bg-page: #161616;
--clr-bg-theme: #111111;
--clr-text-theme: var(--clr-text);
--clr-bg-highlight: #606060;
--clr-text-highlight: #eee;
--clr-bg-accent: var(--clr-bg);
--clr-border: #666666;
--clr-border-dim: #444444;
--clr-border-dark: #222222;
--clr-shadow: #000;
}
}
* { * {
box-sizing: border-box; box-sizing: border-box;
} }
html {
color-scheme: light dark;
}
h1 a, h2 a { h1 a, h2 a {
color: $fg-light; color: var(--clr-text-theme);
} }
h1 a:visited, h2 a:visited { h1 a:visited, h2 a:visited {
color: $visited; color: var(--clr-text-visited);
} }
progress { progress {
width: 10ch; width: 10ch;
} }
body { body {
background-color: $nicotine-light; background-color: var(--clr-bg-page);
color: $fg-dark; color: var(--clr-text);
font-family: sans-serif; font-family: var(--font-family);
font-size: 14px; font-size: var(--font-size);
line-height: 1.6; line-height: 1.6;
margin-left: auto; margin-left: auto;
margin-right: auto; margin-right: auto;
@ -99,28 +153,28 @@ body {
li { li {
display: inline; display: inline;
padding: 1ch; padding: 1ch;
background-color: $highlight-light2; background-color: var(--clr-bg-highlight);
a { a {
text-decoration: none; text-decoration: none;
display: inline-block; display: inline-block;
color: #000; color: var(--clr-text-highlight);
} }
} }
li.current { li.current {
background-color: $highlight-light; background-color: var(--clr-bg-theme);
a { a {
color: #fff; color: var(--clr-text-theme);
} }
} }
} }
} }
.dialog { .dialog {
border: 1px solid $border-color2; border: 1px solid var(--clr-border-dim);
box-shadow: 0 0 1ch $border-color; box-shadow: 0 0 1ch var(--clr-shadow);
background-color: #fff; background-color: var(--clr-bg);
padding: 1ch; padding: 1ch;
h2 { h2 {
@ -129,22 +183,22 @@ body {
font-weight: normal; font-weight: normal;
padding: 0.5ch; padding: 0.5ch;
font-size: 12pt; font-size: 12pt;
background-color: $highlight-light; background-color: var(--clr-bg-theme);
color: #fff; color: var(--clr-text-theme);
} }
} }
header { header {
background-color: $nicotine-dark; background-color: var(--clr-bg-accent);
color: #fff; color: var(--clr-text);
border: 1px solid #888; border: 1px solid var(--clr-border-dark);
box-shadow: 0 0 0.5ch #888; box-shadow: 0 0 0.5ch var(--clr-border-dark);
margin-bottom: 1ch; margin-bottom: 1ch;
nav { nav {
a { a {
text-decoration: none; text-decoration: none;
color: #000; color: var(--clr-text);
padding: .5ch; padding: .5ch;
display: inline-block; display: inline-block;
@ -160,8 +214,8 @@ header {
} }
a:hover, a:focus { a:hover, a:focus {
background: #2f4858; background: var(--clr-bg-theme);
color: #fff !important; color: var(--clr-text-theme);
} }
} }
} }
@ -210,11 +264,11 @@ header {
@extend .heading; @extend .heading;
} }
background-color: #fff; background-color: var(--clr-);
padding: 1ch; padding: 1ch;
margin: 1ch; margin: 1ch;
border: 1px solid $border-color2; border: 1px solid var(--clr-border-dim);
box-shadow: 0 0 1ch $border-color; box-shadow: 0 0 1ch var(--clr-shadow);
} }
section.cards { section.cards {
@ -276,7 +330,8 @@ section.cards {
.positions { .positions {
box-shadow: 0 0 2px #888; box-shadow: 0 0 2px #888;
background-color: #e4e4e4; background-color: var(--clr-bg-highlight);
color: var(--clr-text-highlight);
padding: 2px; padding: 2px;
margin-right: -1ch; margin-right: -1ch;
margin-left: 1ch; margin-left: 1ch;
@ -297,13 +352,13 @@ footer {
h1 { h1 {
font-weight: normal; font-weight: normal;
border-bottom: 4px solid $highlight-light; border-bottom: 4px solid var(--clr-bg-theme);
} }
h2 { h2 {
font-size: 14pt; font-size: 14pt;
font-weight: normal; font-weight: normal;
border-bottom: 2px solid $highlight-dark; border-bottom: 2px solid var(--clr-bg-theme);
width: 80%; width: 80%;
} }
@ -312,9 +367,9 @@ footer {
flex-basis: 40ch; flex-basis: 40ch;
flex-grow: 1.1; flex-grow: 1.1;
background-color: #fff; background-color: var(--clr-bg);
border-left: 1px solid $border-color2; border-left: 1px solid var(--clr-border-dim);
box-shadow: -1px -1px 5px $border-color; box-shadow: -1px -1px 5px var(--clr-shadow);
padding-left: 1ch; padding-left: 1ch;
padding-right: 1ch; padding-right: 1ch;
@ -329,18 +384,18 @@ footer {
} }
.shadowbox { .shadowbox {
box-shadow: 0 0 1ch $border-color2; box-shadow: 0 0 1ch var(--clr-shadow);
border: 1px solid $border-color; border: 1px solid var(--clr-border);
} }
.heading { .heading {
margin: 0; margin: 0;
padding: 0.5ch; padding: 0.5ch;
background-color: $highlight-light; background-color: var(--clr-bg-theme);
border-bottom: 1px solid $border-color2; border-bottom: 1px solid var(--clr-border-dim);
font-family: $heading-fonts; font-family: var(--font-family-heading);
font-weight: normal; font-weight: normal;
color: $fg-light; color: var(--clr-text-theme);
font-size: 12pt; font-size: 12pt;
word-break: break-word; word-break: break-word;
} }
@ -440,7 +495,7 @@ footer {
@extend .shadowbox; @extend .shadowbox;
padding: 0.5ch; padding: 0.5ch;
background-color: $fg-light; background-color: var(--clr-bg);
display: grid; display: grid;
grid-template-columns: max-content 0 auto max-content; grid-template-columns: max-content 0 auto max-content;
grid-gap: 0.5ch; grid-gap: 0.5ch;
@ -452,9 +507,9 @@ footer {
padding: 0.5ch; padding: 0.5ch;
font-size: 14pt; font-size: 14pt;
word-break: keep-all; word-break: keep-all;
background-color: $highlight-light; background-color: var(--clr-bg-theme);
color: $fg-light; color: var(--clr-text-theme);
font-family: $heading-fonts; font-family: var(--font-family-heading);
font-weight: normal; font-weight: normal;
border: 1px solid; border: 1px solid;
text-align: center; text-align: center;
@ -469,16 +524,13 @@ footer {
font-family: monospace; font-family: monospace;
font-size: 12pt; font-size: 12pt;
padding: 0.5ch; padding: 0.5ch;
border: 1px solid $border-color2; border: 1px solid var(--clr-border-dim);
background-color: $fg-light;
color: $fg-dark;
} }
input[type="submit"] { input[type="submit"] {
font-size: 12pt; font-size: 12pt;
border: 1px solid $border-color2; border: 1px solid var(--clr-border-dim);
background-color: $fg-light; background-color: var(--clr-bg);
color: $fg-dark;
} }
.suggestions { .suggestions {
@ -528,22 +580,22 @@ footer {
#filters { #filters {
@extend .shadowbox; @extend .shadowbox;
margin-top: 1ch; margin-top: 1ch;
background-color: $fg-light; background-color: var(--clr-bg);
h2 { h2 {
@extend .heading; @extend .heading;
background-color: $highlight-light; background-color: var(--clr-bg-theme);
} }
h3 { h3 {
@extend .heading; @extend .heading;
background-color: $highlight-light2; background-color: var(--clr-bg-highlight);
font-family: sans-serif; font-family: sans-serif;
color: #000; color: #000;
border-bottom: 1px solid #000; border-bottom: 1px solid #000;
} }
hr { hr {
border-top: 0.5px solid $border-color2; border-top: 0.5px solid var(--clr-border-dim);
border-bottom: none; border-bottom: none;
} }
ul { ul {
@ -553,17 +605,17 @@ footer {
li { li {
padding: 1ch; padding: 1ch;
a { a {
color: $fg-dark; color: inherit;
text-decoration: none; text-decoration: none;
} }
a:hover, a:focus { a:hover, a:focus {
border-bottom: 1px solid $highlight-light; border-bottom: 1px solid var(--clr-bg-theme);
} }
} }
li.current { li.current {
border-left: 4px solid $highlight-light; border-left: 4px solid var(--clr-bg-theme);
background-color: $highlight-light2; background-color: var(--clr-bg-highlight);
a { a {
margin-left: -4px; margin-left: -4px;
} }
@ -576,46 +628,46 @@ footer {
margin: 1ch 0 2ch 0; margin: 1ch 0 2ch 0;
.url { .url {
background-color: $highlight-light; background-color: var(--clr-bg-theme);
padding-left: 0.5ch; padding-left: 0.5ch;
a { a {
word-break: break-all; word-break: break-all;
font-family: monospace; font-family: monospace;
font-size: 8pt; font-size: 8pt;
color: $fg-light; color: var(--clr-text-theme);
text-shadow: 0 0 1ch #000; // guarantee decent contrast across background colors text-shadow: 0 0 1ch #000; // guarantee decent contrast across background colors
} }
a:visited { a:visited {
color: $visited; color: var(--clr-text-visited);
} }
} }
h2 { h2 {
a { a {
word-break: break-all; word-break: break-all;
color: $fg-dark; color: var(--clr-text);
text-decoration: none; text-decoration: none;
} }
font-size: 12pt; font-size: 12pt;
@extend .heading; @extend .heading;
background-color: $highlight-light2; background-color:var(--clr-bg-highlight);
} }
.description { .description {
background-color: $fg-light; background-color: var(--clr-bg);
word-break: break-word; word-break: break-word;
padding: 1ch; padding: 1ch;
margin: 0; margin: 0;
} }
ul.additional-results { ul.additional-results {
background-color: $fg-light; background-color: var(--clr-bg);
padding: 1ch; padding: 1ch;
list-style: none; list-style: none;
margin: 0; margin: 0;
a { a {
color: $fg-dark; color: inherit;
} }
} }
} }
@ -631,7 +683,7 @@ footer {
display: flex; display: flex;
font-size: 10pt; font-size: 10pt;
padding: 1ch; padding: 1ch;
background-color: #eee; background-color: var(--clr-bg-highlight);
> * { > * {
margin-right: 1ch; margin-right: 1ch;
@ -645,7 +697,7 @@ footer {
padding-left: 4px; padding-left: 4px;
} }
a { a {
color: #000; color: var(--clr-text-highlight);
} }
} }