Refine link styling

This commit is contained in:
cryptogopher 2024-01-03 00:51:30 +01:00
parent 644fdee98e
commit 18089c316e

View File

@ -77,7 +77,7 @@ input[type=submit] {
padding: 0.4em; padding: 0.4em;
width: fit-content; width: fit-content;
} }
input:not([type=submit]).not([type=checkbox]), input:not([type=submit]):not([type=checkbox]),
select { select {
padding: 0.2rem 0.4rem; padding: 0.2rem 0.4rem;
} }
@ -165,20 +165,20 @@ input[type=text]:read-only {
.navigation > .tab + .tab.right { .navigation > .tab + .tab.right {
margin-inline-start: 4%; margin-inline-start: 4%;
} }
/* TODO: inactive tab color #d0d0d0 or #c7c7c7 */
.navigation > .tab { .navigation > .tab {
border-bottom: solid 3px #c7c7c7; border-bottom: solid 2px #c7c7c7;
display: flex; display: flex;
flex: 1; flex: 1;
font-size: 1rem; font-size: 1rem;
justify-content: center; justify-content: center;
padding-block: 0.3em; padding-block: 0.3em;
} }
.navigation > .tab:hover { .navigation > .tab:hover,
border-bottom: solid 4px #009ade; .navigation > .tab:focus-visible {
background-color: #f3f3f3;
} }
.navigation > .tab.active { .navigation > .tab.active {
border-bottom: solid 4px; border-bottom: solid 4px #009ade;
color: #009ade; color: #009ade;
fill: #009ade; fill: #009ade;
} }
@ -339,22 +339,24 @@ table.items td.actions {
justify-content: end; justify-content: end;
} }
table.items a:hover, /* TODO: replace :hover:focus-visible with proper stye order */
table.items a:focus-visible, table.items td.link a:hover,
table.items a:hover:focus-visible { table.items td.link a:focus-visible,
table.items td.link a:hover:focus-visible {
text-decoration: underline; text-decoration: underline;
text-decoration-thickness: 0.05rem; text-decoration-thickness: 0.05rem;
text-underline-offset: 0.2rem; text-underline-offset: 0.2rem;
} }
table.items a:hover { table.items td.link a:hover {
color: #009ade; color: #009ade;
} }
table.items a:focus-visible { table.items td.link a:focus-visible {
text-decoration-color: #a0a0a0; text-decoration-color: #a0a0a0;
} }
table.items a:hover:focus-visible { table.items td.link a:hover:focus-visible {
color: #006c9b; color: #006c9b;
} }
table.items td:not(:first-child) { table.items td:not(:first-child) {
color: #909090; color: #909090;
fill: #909090; fill: #909090;