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

Move color definitions to variables

Browse Source
This commit is contained in:
cryptogopher 2024-01-20 14:56:10 +01:00
parent 50eedf8b23
commit 1ae5658ebe
1 changed files with 27 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -23,6 +23,15 @@
* light red: #ff1f5b
* */
:root {
--color-focus-gray: #f3f3f3;
--color-border-gray: #dddddd;
--color-nav-gray: #c7c7c7;
--color-gray: #a0a0a0;
--color-table-gray: #909090;
--color-text-gray: #707070;
}
*,
::before,
::after {
@ -69,9 +78,9 @@ a,
button,
input[type=submit] {
align-items: center;
color: #a0a0a0;
color: var(--color-gray);
cursor: pointer;
fill: #a0a0a0;
fill: var(--color-gray);
font-weight: bold;
text-decoration: none;
}
@ -91,7 +100,7 @@ select {
button,
input,
select {
border: solid 1px #a0a0a0;
border: solid 1px var(--color-gray);
border-radius: 0.25em;
}
.button > svg,
@ -108,7 +117,7 @@ button > svg {
.button:focus-visible,
button:focus-visible,
input[type=submit]:focus-visible {
background-color: #f3f3f3;
background-color: var(--color-focus-gray);
}
.button:hover,
button:hover,
@ -148,7 +157,7 @@ input:focus-visible,
select:focus-within,
select:focus-visible {
accent-color: #006c9b;
background-color: #f3f3f3;
background-color: var(--color-focus-gray);
}
input[type=text]:read-only {
border: none;
@ -173,7 +182,7 @@ input[type=text]:read-only {
margin-inline-start: 4%;
}
.navigation > .tab {
border-bottom: solid 2px #c7c7c7;
border-bottom: solid 2px var(--color-nav-gray);
display: flex;
flex: 1;
font-size: 1rem;
@ -182,7 +191,7 @@ input[type=text]:read-only {
}
.navigation > .tab:hover,
.navigation > .tab:focus-visible {
background-color: #f3f3f3;
background-color: var(--color-focus-gray);
}
.navigation > .tab.active {
border-bottom: solid 4px #009ade;
@ -260,7 +269,7 @@ form table {
border-spacing: 0.8rem;
}
form tr td:first-child {
color: #a0a0a0;
color: var(--color-gray);
font-size: 0.9rem;
padding-right: 0.25rem;
text-align: right;
@ -283,7 +292,7 @@ form td.error::after {
position: absolute;
}
form em {
color: #707070;
color: var(--color-text-gray);
font-size: 0.75rem;
font-weight: normal;
}
@ -297,7 +306,7 @@ form input[type=submit] {
table.items {
border-spacing: 0;
border: solid 1px #dddddd;
border: solid 1px var(--color-border-gray);
border-radius: 0.25em;
font-size: 0.85rem;
text-align: left;
@ -307,7 +316,7 @@ table.items thead {
}
table.items thead,
table.items tbody tr:hover {
background-color: #f3f3f3;
background-color: var(--color-focus-gray);
}
table.items th {
padding-block: 0.75em;
@ -323,7 +332,7 @@ table.items td:last-child {
padding-inline-end: 0.1em;
}
table.items td {
border-top: solid 1px #dddddd;
border-top: solid 1px var(--color-border-gray);
min-height: 2.4em;
padding-block: 0.1em;
}
@ -367,18 +376,18 @@ table.items td.link a:hover {
color: #009ade;
}
table.items td.link a:focus-visible {
text-decoration-color: #a0a0a0;
text-decoration-color: var(--color-gray);
}
table.items td.link a:hover:focus-visible {
color: #006c9b;
}
table.items td:not(:first-child) {
color: #909090;
fill: #909090;
color: var(--color-table-gray);
fill: var(--color-table-gray);
}
table.items td.hint {
color: #909090;
color: var(--color-table-gray);
font-style: italic;
font-size: 0.8rem;
padding: 1em;
@ -400,8 +409,8 @@ table.items input[type=submit] {
table.items select:not(:hover),
table.items .button:not(:hover),
table.items button:not(:hover) {
border-color: #dddddd;
color: #909090;
border-color: var(--color-border-gray);
color: var(--color-table-gray);
}
table.items select:focus-within,
table.items select:focus-visible {