glen/dyna3
1
0
Fork 0
Code Issues 11 Pull Requests 1 Actions Projects Releases 2 Wiki Activity

Give CSS colors meaningful names

Browse Source
This commit is contained in:
Aaron Fenyes 2024-11-14 00:06:55 -08:00
parent 3f3c1739cb
commit 0c8022d78e
1 changed files with 24 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

36
app-proto/main.css
View File

@ -1,7 +1,19 @@
:root {
--text: #fcfcfc; /* almost white */
--text-bright: white;
--text-invalid: #f58fc2; /* bright pink */
--border: #555; /* light gray */
--border-focus: #aaa; /* bright gray */
--border-invalid: #70495c; /* dusky pink */
--selection-highlight: #444; /* medium gray */
--page-background: #222; /* dark gray */
--display-background: #020202; /* almost black */
}
body { body {
margin: 0px; margin: 0px;
color: #fcfcfc; color: var(--text);
background-color: #222; background-color: var(--page-background);
font-family: 'Fira Sans', sans-serif; font-family: 'Fira Sans', sans-serif;
} }
@ -17,7 +29,7 @@ body {
padding: 0px; padding: 0px;
border-width: 0px 1px 0px 0px; border-width: 0px 1px 0px 0px;
border-style: solid; border-style: solid;
border-color: #555; border-color: var(--border);
} }
/* add-remove */ /* add-remove */
@ -57,8 +69,8 @@ summary {
} }
summary.selected { summary.selected {
color: #fff; color: var(--text-bright);
background-color: #444; background-color: var(--selection-highlight);
} }
summary > div, .constraint { summary > div, .constraint {
@ -112,7 +124,7 @@ details[open]:has(li) .element-switch::after {
} }
.constraint.invalid { .constraint.invalid {
color: #f58fc2; color: var(--text-invalid);
} }
.constraint > input[type=checkbox] { .constraint > input[type=checkbox] {
@ -122,12 +134,12 @@ details[open]:has(li) .element-switch::after {
.constraint > input[type=text] { .constraint > input[type=text] {
color: inherit; color: inherit;
background-color: inherit; background-color: inherit;
border: 1px solid #555; border: 1px solid var(--border);
border-radius: 2px; border-radius: 2px;
} }
.constraint.invalid > input[type=text] { .constraint.invalid > input[type=text] {
border-color: #70495c; border-color: var(--border-invalid);
} }
.status { .status {
@ -140,7 +152,7 @@ details[open]:has(li) .element-switch::after {
.invalid > .status::after, details:has(.invalid):not([open]) .status::after { .invalid > .status::after, details:has(.invalid):not([open]) .status::after {
content: '⚠'; content: '⚠';
color: #f58fc2; color: var(--text-invalid);
} }
/* display */ /* display */
@ -149,11 +161,11 @@ canvas {
float: left; float: left;
margin-left: 20px; margin-left: 20px;
margin-top: 20px; margin-top: 20px;
background-color: #020202; background-color: var(--display-background);
border: 1px solid #555; border: 1px solid var(--border);
border-radius: 16px; border-radius: 16px;
} }
canvas:focus { canvas:focus {
border-color: #aaa; border-color: var(--border-focus);
} }