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