Lower contrast for shiny pill, higher contrast for toasts

Maybe shouldn't call it shiny pill anymore lol
pull/228/head
Lim Chee Aun 2023-09-21 21:55:30 +08:00
rodzic baca2b5851
commit 9387e37baa
1 zmienionych plików z 17 dodań i 16 usunięć

Wyświetl plik

@ -1737,25 +1737,25 @@ meter.donut[hidden] {
:is(.shiny-pill, :root .toastify.shiny-pill) { :is(.shiny-pill, :root .toastify.shiny-pill) {
pointer-events: auto; pointer-events: auto;
color: var(--button-text-color); color: var(--link-text-color);
text-shadow: 0 calc(var(--hairline-width) * -1) var(--drop-shadow-color); font-weight: 500;
background-color: var(--button-bg-color); text-shadow: 0 1px var(--bg-color);
background-image: linear-gradient( background-color: var(--bg-color);
160deg, border: 1px solid var(--outline-color);
rgba(255, 255, 255, 0.5), box-shadow: 0 0 0 1px var(--bg-blur-color),
rgba(0, 0, 0, 0.1) 0 3px 16px var(--drop-shadow-color),
); 0 6px 16px -3px var(--drop-shadow-color);
box-shadow: 0 3px 8px -1px var(--drop-shadow-color),
0 10px 36px -4px var(--button-bg-blur-color),
inset var(--hairline-width) var(--hairline-width) rgba(255, 255, 255, 0.5);
transition: filter 0.3s;
} }
:is(.shiny-pill, :root .toastify.shiny-pill):hover { :is(.shiny-pill, :root .toastify.shiny-pill):hover {
filter: brightness(1.2); color: var(--text-color);
border-color: var(--link-color);
filter: none;
box-shadow: 0 0 0 1px var(--link-color), 0 3px 16px var(--drop-shadow-color),
0 6px 16px -3px var(--drop-shadow-color);
} }
:is(.shiny-pill, :root .toastify.shiny-pill):active { :is(.shiny-pill, :root .toastify.shiny-pill):active {
transition: none; transition: none;
filter: brightness(0.9); filter: brightness(0.975);
} }
/* TOAST */ /* TOAST */
@ -1767,9 +1767,10 @@ meter.donut[hidden] {
pointer-events: none; pointer-events: none;
color: var(--button-text-color); color: var(--button-text-color);
text-shadow: 0 calc(var(--hairline-width) * -1) var(--drop-shadow-color); text-shadow: 0 calc(var(--hairline-width) * -1) var(--drop-shadow-color);
background-color: var(--button-bg-blur-color); background-color: var(--button-bg-color);
background-image: none; background-image: none;
backdrop-filter: blur(16px); box-shadow: 0 3px 8px -1px var(--drop-shadow-color),
0 10px 36px -4px var(--button-bg-blur-color);
} }
.toastify-bottom { .toastify-bottom {
margin-bottom: env(safe-area-inset-bottom); margin-bottom: env(safe-area-inset-bottom);