Perfect_Python500/MineGeo
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Float glass header and document moderator applications
Some checks failed
Deploy MineGeo to Dokploy / deploy (push) Failing after 6m16s
Details

Browse Source
This commit is contained in:
perfect_python500
2026-10-31 12:06:22 +05:00
parent 50b27cf498
commit 48d4058e06
4 changed files with 60 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

40
app/site-glass.css
View File

@@ -1,14 +1,20 @@
/* A restrained frosted-glass treatment for the shared site navigation. */
.site-header {
--site-header-glass: rgb(8 11 16 / 0.78);
--site-header-glass: rgb(8 11 16 / 0.68);
position: sticky;
inset-block-start: 0;
inset-block-start: 16px;
z-index: 40;
height: 72px;
margin: 16px clamp(12px, 2vw, 28px) 0;
overflow: visible;
background: var(--bg);
border-bottom-color: rgb(235 242 250 / 0.14);
border: 1px solid rgb(235 242 250 / 0.16);
border-radius: 22px;
box-shadow:
inset 0 1px rgb(255 255 255 / 0.055),
0 8px 24px rgb(3 6 10 / 0.12);
inset 0 1px rgb(255 255 255 / 0.12),
inset 0 -1px rgb(255 255 255 / 0.025),
0 12px 36px rgb(3 6 10 / 0.24),
0 2px 8px rgb(3 6 10 / 0.16);
transition:
background-color 160ms ease,
border-color 160ms ease;
@@ -17,8 +23,8 @@
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
.site-header {
background: var(--site-header-glass);
backdrop-filter: blur(7px) saturate(135%);
-webkit-backdrop-filter: blur(7px) saturate(135%);
backdrop-filter: blur(18px) saturate(160%);
-webkit-backdrop-filter: blur(18px) saturate(160%);
}
}
@@ -36,11 +42,22 @@
}
html[data-theme="light"] .site-header {
--site-header-glass: rgb(246 249 242 / 0.78);
border-bottom-color: rgb(52 76 43 / 0.18);
--site-header-glass: rgb(246 249 242 / 0.72);
border-color: rgb(52 76 43 / 0.18);
box-shadow:
inset 0 1px rgb(255 255 255 / 0.72),
0 8px 24px rgb(39 58 33 / 0.08);
inset 0 1px rgb(255 255 255 / 0.82),
inset 0 -1px rgb(255 255 255 / 0.28),
0 12px 36px rgb(39 58 33 / 0.12),
0 2px 8px rgb(39 58 33 / 0.06);
}
@media (max-width: 700px) {
.site-header {
inset-block-start: 10px;
height: 60px;
margin: 10px 10px 0;
border-radius: 18px;
}
}
@media (prefers-reduced-transparency: reduce) {
@@ -58,6 +75,7 @@ html[data-theme="light"] .site-header {
.site-header::before {
position: absolute;
inset: 0;
border-radius: inherit;
pointer-events: none;
content: "";
background: