diff --git a/src/app.css b/src/app.css index 5fe2293d..efcfe12a 100644 --- a/src/app.css +++ b/src/app.css @@ -734,12 +734,7 @@ a[href^='http'][rel*='nofollow']:visited:not(:has(div)) { margin-top: 16px; transform: translate(-50%, 0); font-size: 90%; - background: linear-gradient( - to bottom, - var(--button-bg-blur-color), - var(--button-bg-color) - ); - backdrop-filter: blur(16px); + background-color: var(--button-bg-color); box-shadow: 0 3px 8px -1px var(--drop-shadow-color), 0 10px 36px -4px var(--button-bg-blur-color); } @@ -938,7 +933,8 @@ button.carousel-dot:is(.active, [disabled].active) { filter: none; } #compose-button:active { - filter: brightness(0.75); + transform: scale(0.95); + transition: none; } #compose-button .icon { filter: drop-shadow(0 1px 2px var(--button-bg-color)); @@ -1082,7 +1078,7 @@ button.carousel-dot:is(.active, [disabled].active) { .glass-menu { background-color: var(--bg-blur-color); backdrop-filter: blur(8px) saturate(3); - border: 0; + border: var(--hairline-width) solid var(--bg-color); box-shadow: 0 3px 8px -1px var(--drop-shadow-color); } .glass-menu .szh-menu__item--hover { @@ -1147,12 +1143,7 @@ meter.donut:is(.danger, .explode):after { /* TOAST */ :root .toastify { - background-image: linear-gradient( - to bottom, - var(--button-bg-blur-color), - var(--button-bg-color) - ); - backdrop-filter: blur(16px); + background-color: var(--button-bg-color); color: var(--button-text-color); border-radius: 10em; padding: 8px 16px; diff --git a/src/components/shortcuts.css b/src/components/shortcuts.css index 53771c61..48ecc17f 100644 --- a/src/components/shortcuts.css +++ b/src/components/shortcuts.css @@ -9,6 +9,7 @@ z-index: 101; box-shadow: 0 3px 8px -1px var(--drop-shadow-color); transition: all 0.3s ease-in-out; + border: var(--hairline-width) solid var(--bg-color); } #shortcuts-button .icon { transform: translateY(2px); /* Balance the icon's vertical alignment */ @@ -24,7 +25,8 @@ filter: none; } #shortcuts-button:active { - filter: brightness(0.75); + transform: scale(0.95); + transition: none; } @media (min-width: calc(40em + 56px + 8px)) {