Karavel/fixin.me
0
0
Fork 0
forked from fixin.me/fixin.me
Code Pull Requests Activity

Use variables for remaining colors

Browse Source
This commit is contained in:
cryptogopher 2024-12-31 19:29:01 +01:00
parent c8c8d8cd70
commit 3379794c6b
1 changed files with 25 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

52
app/assets/stylesheets/application.css
View File

@ -16,13 +16,6 @@
*= require_self *= require_self
*/ */
/* Colors:
* dark blue: #006c9b
* light blue: #009ade
* dark red: #b21237
* light red: #ff1f5b
* */
:root { :root {
--color-focus-gray: #f3f3f3; --color-focus-gray: #f3f3f3;
--color-border-gray: #dddddd; --color-border-gray: #dddddd;
@ -31,6 +24,11 @@
--color-table-gray: #909090; --color-table-gray: #909090;
--color-text-gray: #707070; --color-text-gray: #707070;
--color-dark-blue: #006c9b;
--color-blue: #009ade;
--color-dark-red: #b21237;
--color-red: #ff1f5b;
--z-index-flashes: 100; --z-index-flashes: 100;
--z-index-table-row-outline: 10; --z-index-table-row-outline: 10;
} }
@ -41,7 +39,7 @@
box-sizing: border-box; box-sizing: border-box;
} }
::selection { ::selection {
background-color: #009ade; background-color: var(--color-blue);
color: white; color: white;
} }
:focus-visible { :focus-visible {
@ -132,18 +130,18 @@ input[type=submit]:focus-visible {
.button:hover, .button:hover,
button:hover, button:hover,
input[type=submit]:hover { input[type=submit]:hover {
background-color: #009ade; background-color: var(--color-blue);
border-color: #009ade; border-color: var(--color-blue);
color: white; color: white;
fill: white; fill: white;
} }
.dangerous:hover { .dangerous:hover {
background-color: #ff1f5b; background-color: var(--color-red);
border-color: #ff1f5b; border-color: var(--color-red);
} }
input[type=checkbox] { input[type=checkbox] {
accent-color: #009ade; accent-color: var(--color-blue);
appearance: none; appearance: none;
-webkit-appearance: none; -webkit-appearance: none;
display: flex; display: flex;
@ -158,8 +156,8 @@ input[type=checkbox]:checked {
input:hover, input:hover,
select:hover, select:hover,
textarea:hover { textarea:hover {
border-color: #009ade; border-color: var(--color-blue);
outline: solid 1px #009ade; outline: solid 1px var(--color-blue);
} }
select:hover { select:hover {
cursor: pointer; cursor: pointer;
@ -168,7 +166,7 @@ input:focus-visible,
select:focus-within, select:focus-within,
select:focus-visible, select:focus-visible,
textarea:focus-visible { textarea:focus-visible {
accent-color: #006c9b; accent-color: var(--color-dark-blue);
background-color: var(--color-focus-gray); background-color: var(--color-focus-gray);
} }
input[type=text]:read-only, input[type=text]:read-only,
@ -205,9 +203,9 @@ textarea:read-only {
background-color: var(--color-focus-gray); background-color: var(--color-focus-gray);
} }
.navigation > .tab.active { .navigation > .tab.active {
border-bottom: solid 4px #009ade; border-bottom: solid 4px var(--color-blue);
color: #009ade; color: var(--color-blue);
fill: #009ade; fill: var(--color-blue);
} }
@ -249,8 +247,8 @@ textarea:read-only {
width: 1.4em; width: 1.4em;
} }
.flash.alert { .flash.alert {
border-color: #ff1f5b; border-color: var(--color-red);
background-color: #ff1f5b; background-color: var(--color-red);
} }
.flash.notice:before { .flash.notice:before {
content: url('pictograms/check-circle-outline.svg'); content: url('pictograms/check-circle-outline.svg');
@ -259,8 +257,8 @@ textarea:read-only {
width: 1.4em; width: 1.4em;
} }
.flash.notice { .flash.notice {
border-color: #009ade; border-color: var(--color-blue);
background-color: #009ade; background-color: var(--color-blue);
} }
.flash > div { .flash > div {
grid-column: 2; grid-column: 2;
@ -297,7 +295,7 @@ form label.required {
} }
form label.error, form label.error,
form td.error::after { form td.error::after {
color: #ff1f5b; color: var(--color-red);
} }
form td.error { form td.error {
display: -webkit-box; display: -webkit-box;
@ -391,7 +389,7 @@ table.items tr.dropzone::after {
content: ''; content: '';
inset: 1px 0 0 0; inset: 1px 0 0 0;
position: absolute; position: absolute;
outline: dashed 2px #009ade; outline: dashed 2px var(--color-blue);
outline-offset: -1px; outline-offset: -1px;
z-index: var(--z-index-table-row-outline); z-index: var(--z-index-table-row-outline);
} }
@ -412,13 +410,13 @@ table.items td.link a:hover:focus-visible {
text-underline-offset: 0.2rem; text-underline-offset: 0.2rem;
} }
table.items td.link a:hover { table.items td.link a:hover {
color: #009ade; color: var(--color-blue);
} }
table.items td.link a:focus-visible { table.items td.link a:focus-visible {
text-decoration-color: var(--color-gray); text-decoration-color: var(--color-gray);
} }
table.items td.link a:hover:focus-visible { table.items td.link a:hover:focus-visible {
color: #006c9b; color: var(--color-dark-blue);
} }
table.items td:not(:first-child), table.items td:not(:first-child),