refactor color usage
This commit is contained in:
parent
fda2214aea
commit
192e59d9f8
7 changed files with 409 additions and 377 deletions
108
style.css
108
style.css
|
|
@ -268,9 +268,6 @@
|
|||
--color-rose-900: #881337;
|
||||
--color-rose-950: #4c0519;
|
||||
/* End: Colors from Tailwind CSS */
|
||||
--color-red: #971616;
|
||||
--color-orange: #cc6300;
|
||||
--color-green: #19942e;
|
||||
--bg-type-u: #006ab3;
|
||||
--bg-type-s: #1a962b;
|
||||
--bg-type-a: #f39100;
|
||||
|
|
@ -280,17 +277,25 @@
|
|||
--bg-type-a-disabled: #dfd8cf;
|
||||
--bg-type-r-disabled: #b3b3b3;
|
||||
--color-type-disabled: var(--color-gray-400);
|
||||
--color-line-U1: #006ab3;
|
||||
--color-line-U2: #e2001a;
|
||||
--color-line-U3: #ffdd00;
|
||||
--color-line-U4: #0098a1;
|
||||
--color-line-S1: #1a962b;
|
||||
--color-line-S2: #b51143;
|
||||
--color-line-S3: #622181;
|
||||
--color-line-S4: #be148e;
|
||||
--color-line-S5: #0089bb;
|
||||
--color-line-S6: #d3da00;
|
||||
--bg: var(--color-gray-50);
|
||||
--text: var(--color-gray-950);
|
||||
--text-secondary: var(--color-gray-700);
|
||||
--nav-bg: hsl(210, 60%, 50%);
|
||||
--nav-bg-hover: hsl(210, 60%, 30%);
|
||||
--nav-bg-visited: hsl(250, 60%, 50%);
|
||||
--nav-text-visited: hsl(250, 60%, 93%);
|
||||
--nav-text: hsl(210, 60%, 93%);
|
||||
--link: hsl(210, 60%, 30%);
|
||||
--link-hover: hsl(210, 60%, 10%);
|
||||
--link-visited: hsl(250, 60%, 30%);
|
||||
--nav-bg: var(--color-indigo-400);
|
||||
--nav-bg-hover: var(--color-indigo-200);
|
||||
--nav-bg-visited: var(--color-purple-400);
|
||||
--link: var(--color-indigo-600);
|
||||
--link-hover: var(--color-indigo-800);
|
||||
--link-visited: var(--color-purple-600);
|
||||
--station-bg: var(--color-gray-50);
|
||||
--station-bg-hover: var(--color-gray-400);
|
||||
--station-border: var(--color-gray-400);
|
||||
|
|
@ -308,25 +313,25 @@
|
|||
}
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:root {
|
||||
--bg: var(--color-gray-950);
|
||||
--text: var(--color-gray-50);
|
||||
--text-secondary: var(--color-gray-400);
|
||||
--nav-bg: hsl(210, 60%, 30%);
|
||||
--nav-bg-hover: hsl(210, 60%, 10%);
|
||||
--nav-bg-visited: hsl(250, 60%, 30%);
|
||||
--link: hsl(210, 60%, 60%);
|
||||
--link-hover: hsl(210, 60%, 60%);
|
||||
--link-visited: hsl(250, 60%, 70%);
|
||||
--station-bg: var(--color-gray-950);
|
||||
--station-bg-hover: var(--color-gray-600);
|
||||
--station-border: var(--color-gray-600);
|
||||
--station-border-hover: var(--color-gray-400);
|
||||
--elevator-bg: var(--color-gray-900);
|
||||
--bg-type-u-disabled: #627f93;
|
||||
--bg-type-s-disabled: #688b6d;
|
||||
--bg-type-a-disabled: #aa987f;
|
||||
--bg-type-r-disabled: #333333;
|
||||
--color-type-disabled: var(--color-gray-200);
|
||||
--bg: var(--color-gray-950);
|
||||
--text: var(--color-gray-50);
|
||||
--text-secondary: var(--color-gray-400);
|
||||
--nav-bg: var(--color-indigo-800);
|
||||
--nav-bg-hover: var(--color-indigo-950);
|
||||
--nav-bg-visited: var(--color-purple-800);
|
||||
--link: var(--color-indigo-400);
|
||||
--link-hover: var(--color-indigo-200);
|
||||
--link-visited: var(--color-purple-400);
|
||||
--station-bg: var(--color-gray-950);
|
||||
--station-bg-hover: var(--color-gray-600);
|
||||
--station-border: var(--color-gray-600);
|
||||
--station-border-hover: var(--color-gray-400);
|
||||
--elevator-bg: var(--color-gray-900);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -371,15 +376,15 @@ body.has-dialog {
|
|||
}
|
||||
|
||||
.text-red {
|
||||
color: var(--color-red);
|
||||
color: var(--color-red-800);
|
||||
}
|
||||
|
||||
.text-orange {
|
||||
color: var(--color-orange);
|
||||
color: var(--color-orange-500);
|
||||
}
|
||||
|
||||
.text-green {
|
||||
color: var(--color-green);
|
||||
color: var(--color-green-600);
|
||||
}
|
||||
|
||||
body {
|
||||
|
|
@ -397,7 +402,7 @@ a {
|
|||
color: var(--link);
|
||||
text-decoration: none;
|
||||
}
|
||||
a:hover {
|
||||
a:hover, a:visited:hover {
|
||||
text-decoration: underline;
|
||||
color: var(--link-hover);
|
||||
}
|
||||
|
|
@ -415,18 +420,18 @@ nav ul {
|
|||
}
|
||||
nav ul li a {
|
||||
font-weight: bold;
|
||||
color: var(--nav-text);
|
||||
color: var(--text);
|
||||
text-decoration: none;
|
||||
background-color: var(--nav-bg);
|
||||
padding: var(--space-m) var(--space-l);
|
||||
cursor: pointer;
|
||||
}
|
||||
nav ul li a:hover {
|
||||
nav ul li a:hover, nav ul li a:visited:hover {
|
||||
text-decoration: underline;
|
||||
background-color: var(--nav-bg-hover);
|
||||
}
|
||||
nav ul li a:visited {
|
||||
color: var(--nav-text-visited);
|
||||
color: var(--text);
|
||||
background-color: var(--nav-bg-visited);
|
||||
}
|
||||
|
||||
|
|
@ -515,7 +520,7 @@ button.loadOSM {
|
|||
}
|
||||
|
||||
div#errorMessage {
|
||||
border: solid 2px var(--color-red);
|
||||
border: solid 2px var(--color-red-600);
|
||||
border-radius: var(--item-radius);
|
||||
padding: var(--space-xl) var(--space-xl);
|
||||
margin-top: var(--space-l);
|
||||
|
|
@ -838,55 +843,58 @@ span.lineChip, span.typeChip, button.typeChip {
|
|||
}
|
||||
span.lineChip[data-type=U], span.typeChip[data-type=U], button.typeChip[data-type=U] {
|
||||
background-color: var(--bg-type-u);
|
||||
color: #ffffff;
|
||||
color: var(--color-white);
|
||||
}
|
||||
span.lineChip[data-type=U][data-line=U1], span.typeChip[data-type=U][data-line=U1], button.typeChip[data-type=U][data-line=U1] {
|
||||
background-color: #006ab3;
|
||||
background-color: var(--color-line-U1);
|
||||
}
|
||||
span.lineChip[data-type=U][data-line=U2], span.typeChip[data-type=U][data-line=U2], button.typeChip[data-type=U][data-line=U2] {
|
||||
background-color: #e2001a;
|
||||
background-color: var(--color-line-U2);
|
||||
}
|
||||
span.lineChip[data-type=U][data-line=U3], span.typeChip[data-type=U][data-line=U3], button.typeChip[data-type=U][data-line=U3] {
|
||||
background-color: #ffdd00;
|
||||
color: #000000;
|
||||
background-color: var(--color-line-U3);
|
||||
color: var(--color-black);
|
||||
}
|
||||
span.lineChip[data-type=U][data-line=U4], span.typeChip[data-type=U][data-line=U4], button.typeChip[data-type=U][data-line=U4] {
|
||||
background-color: #0098a1;
|
||||
background-color: var(--color-line-U4);
|
||||
}
|
||||
span.lineChip[data-type=U][data-line=U5], span.typeChip[data-type=U][data-line=U5], button.typeChip[data-type=U][data-line=U5] {
|
||||
background-color: var(--color-line-U5);
|
||||
}
|
||||
span.lineChip[data-type=S], span.typeChip[data-type=S], button.typeChip[data-type=S] {
|
||||
background-color: var(--bg-type-s);
|
||||
color: #ffffff;
|
||||
color: var(--color-white);
|
||||
}
|
||||
span.lineChip[data-type=S][data-line=S1], span.typeChip[data-type=S][data-line=S1], button.typeChip[data-type=S][data-line=S1] {
|
||||
background-color: #1a962b;
|
||||
background-color: var(--color-line-S1);
|
||||
}
|
||||
span.lineChip[data-type=S][data-line=S2], span.typeChip[data-type=S][data-line=S2], button.typeChip[data-type=S][data-line=S2] {
|
||||
background-color: #b51143;
|
||||
background-color: var(--color-line-S2);
|
||||
}
|
||||
span.lineChip[data-type=S][data-line=S3], span.typeChip[data-type=S][data-line=S3], button.typeChip[data-type=S][data-line=S3] {
|
||||
background-color: #622181;
|
||||
background-color: var(--color-line-S3);
|
||||
}
|
||||
span.lineChip[data-type=S][data-line=S4], span.typeChip[data-type=S][data-line=S4], button.typeChip[data-type=S][data-line=S4] {
|
||||
background-color: #be148e;
|
||||
background-color: var(--color-line-S4);
|
||||
}
|
||||
span.lineChip[data-type=S][data-line=S5], span.typeChip[data-type=S][data-line=S5], button.typeChip[data-type=S][data-line=S5] {
|
||||
background-color: #0089bb;
|
||||
background-color: var(--color-line-S5);
|
||||
}
|
||||
span.lineChip[data-type=S][data-line=S6], span.typeChip[data-type=S][data-line=S6], button.typeChip[data-type=S][data-line=S6] {
|
||||
background-color: #d3da00;
|
||||
color: #000000;
|
||||
background-color: var(--color-line-S6);
|
||||
color: var(--color-black);
|
||||
}
|
||||
span.lineChip[data-type=A], span.typeChip[data-type=A], button.typeChip[data-type=A] {
|
||||
background-color: var(--bg-type-a);
|
||||
color: #ffffff;
|
||||
color: var(--color-white);
|
||||
}
|
||||
span.lineChip[data-type=R], span.typeChip[data-type=R], button.typeChip[data-type=R] {
|
||||
background-color: var(--bg-type-r);
|
||||
color: #ffffff;
|
||||
color: var(--color-white);
|
||||
}
|
||||
@media (prefers-color-scheme: dark) {
|
||||
span.lineChip[data-type=R], span.typeChip[data-type=R], button.typeChip[data-type=R] {
|
||||
border: solid 2px #ffffff;
|
||||
border: solid 2px var(--color-white);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue