quoije/oscars-pool
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Tweak light-mode navbar loading styles

Browse Source
This commit is contained in:
Mathieu Moran
2026-02-01 22:55:27 -05:00
parent 6016538b63
commit 0fcb5d702f
1 changed files with 21 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/css/app.css
+21 -2
View File
@@ -410,8 +410,8 @@ body:not(.i18n-ready) .navbar .navbar-text,
body:not(.i18n-ready) .navbar .btn { body:not(.i18n-ready) .navbar .btn {
transition: filter 220ms ease, opacity 220ms ease, transform 220ms ease; transition: filter 220ms ease, opacity 220ms ease, transform 220ms ease;
/* Light mode & default: muted appearance while i18n loads. */ /* Light mode & default: muted appearance while i18n loads. */
filter: blur(1.2px) saturate(0.95); filter: blur(0.8px) saturate(0.97);
opacity: 0.45; opacity: 0.55;
transform: translateY(-1px); transform: translateY(-1px);
pointer-events: none; pointer-events: none;
} }
@@ -421,6 +421,15 @@ html:not([data-theme="dark"]) body:not(.i18n-ready) nav.navbar,
html:not([data-theme="dark"]) body:not(.i18n-ready) .navbar { html:not([data-theme="dark"]) body:not(.i18n-ready) .navbar {
opacity: 1; opacity: 1;
transform: none; transform: none;
filter: none;
border: none;
outline: none;
box-shadow: none;
}
/* Light mode: match page background to navbar during loading to avoid edge lines. */
html:not([data-theme="dark"]) body:not(.i18n-ready) {
background-color: var(--app-navbar);
} }
/* Dark mode: keep the original soft blur effect while loading /* Dark mode: keep the original soft blur effect while loading
@@ -997,6 +1006,16 @@ body.i18n-ready .navbar .btn {
background: rgba(255, 255, 255, 0.12); background: rgba(255, 255, 255, 0.12);
} }
/* Light mode navbar buttons */
.navbar-custom .btn-outline-light {
color: rgba(255, 255, 255, 0.9);
border-color: rgba(255, 255, 255, 0.25);
}
.navbar-custom .btn-outline-light:hover {
background: rgba(255, 255, 255, 0.08);
}
html[data-theme="dark"] .btn-outline-dark { html[data-theme="dark"] .btn-outline-dark {
color: var(--app-text); color: var(--app-text);
border-color: var(--app-border); border-color: var(--app-border);