modified styles regarding icons since these all come as SVGs now

This commit is contained in:
Tobias 2023-09-02 00:40:45 +02:00
parent 806a51b628
commit 0b13e53d4a

View File

@ -57,6 +57,8 @@ body {
background-size: cover; background-size: cover;
} }
.svg-icons { display: none; }
.icon { fill: $fg; } .icon { fill: $fg; }
.sr2-button:focus-visible { .sr2-button:focus-visible {
@ -97,10 +99,10 @@ header.navbar {
margin-right: 3px; margin-right: 3px;
width: 38px; width: 38px;
img { svg {
width: 32px; width: 32px;
height: 32px; height: 32px;
filter: invert(34%) sepia(78%) saturate(7014%) hue-rotate(316deg) brightness(95%) contrast(105%); fill: $fg;
} }
} }
@ -262,7 +264,7 @@ header.navbar {
.damage-dropdown, .damage-dropdown,
.actions-dropdown { .actions-dropdown {
display: inline-block; display: inline-block;
position: relative; position: relative; // required in order to center dropdowns vertically
} }
.damage-monitor, .damage-monitor,
@ -275,24 +277,18 @@ header.navbar {
padding-top: 10px; padding-top: 10px;
padding-bottom: 10px; padding-bottom: 10px;
position: absolute; position: absolute;
// top: calc(100% - 2px);
// transition: transform .25s ease-in-out;
z-index: 200; z-index: 200;
// center element horizontally w/ respect to parent
right: 50%; right: 50%;
transform: translateX(50%); transform: translateX(50%);
opacity: 0%; // transition: fade in/out
transition: opacity .2s ease-in-out, visibility .2s; transition: opacity .2s ease-in-out, visibility .2s;
opacity: 0%;
visibility: hidden; visibility: hidden;
} }
//.damage-monitor { left: calc(100vw - 1em); }
//.actions-menu { left: calc(100vw + 3.5em); }
//.seen { transform: translateX(-100vw); }
.seen { .seen {
visibility: visible; visibility: visible;
opacity: 100%; opacity: 100%;
@ -337,6 +333,11 @@ header.navbar {
background: radial-gradient(circle at center, $fg-bright, $fg); background: radial-gradient(circle at center, $fg-bright, $fg);
box-shadow: 0 0 3px $fg-bright, 0 0 6px $fg, 0 0 12px $fg-dark; box-shadow: 0 0 3px $fg-bright, 0 0 6px $fg, 0 0 12px $fg-dark;
} }
svg {
height: 16px;
width: 16px;
}
} }
@ -369,7 +370,7 @@ footer {
user-select: auto; user-select: auto;
a { a {
color: hotpink; color: $bg-bright;
text-decoration: none; text-decoration: none;
} }
} }