Add liquid glass filter definitions to site layout
All checks were successful
Deploy MineGeo to Dokploy / deploy (push) Successful in 10m3s
All checks were successful
Deploy MineGeo to Dokploy / deploy (push) Successful in 10m3s
This commit is contained in:
@@ -21,6 +21,7 @@ import "./community.css";
|
||||
import "./community-social.css";
|
||||
import "./cinematic-intro.css";
|
||||
import "./tournaments.css";
|
||||
import "./site-glass.css";
|
||||
import { themeInitScript } from "@/shared/theme";
|
||||
import { SiteSettingsProvider } from "@/components/SiteSettingsProvider";
|
||||
import { initialSiteSettings } from "@/lib/site-settings";
|
||||
@@ -52,6 +53,64 @@ export default async function RootLayout({
|
||||
<script dangerouslySetInnerHTML={{ __html: themeInitScript }} />
|
||||
</head>
|
||||
<body>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
className="site-filter-definitions"
|
||||
focusable="false"
|
||||
>
|
||||
<defs>
|
||||
<filter
|
||||
id="liquid-glass-distortion"
|
||||
x="-10%"
|
||||
y="-20%"
|
||||
width="120%"
|
||||
height="140%"
|
||||
colorInterpolationFilters="sRGB"
|
||||
>
|
||||
<feTurbulence
|
||||
type="fractalNoise"
|
||||
baseFrequency="0.012 0.055"
|
||||
numOctaves={2}
|
||||
seed={7}
|
||||
result="glass-noise"
|
||||
/>
|
||||
<feGaussianBlur
|
||||
in="glass-noise"
|
||||
stdDeviation="2.5"
|
||||
result="soft-glass-noise"
|
||||
/>
|
||||
<feDisplacementMap
|
||||
in="SourceGraphic"
|
||||
in2="soft-glass-noise"
|
||||
scale={18}
|
||||
xChannelSelector="R"
|
||||
yChannelSelector="G"
|
||||
result="refracted-backdrop"
|
||||
/>
|
||||
<feSpecularLighting
|
||||
in="soft-glass-noise"
|
||||
surfaceScale={3}
|
||||
specularConstant={0.55}
|
||||
specularExponent={32}
|
||||
lightingColor="#fff"
|
||||
result="glass-highlight"
|
||||
>
|
||||
<feDistantLight azimuth={315} elevation={55} />
|
||||
</feSpecularLighting>
|
||||
<feComposite
|
||||
in="glass-highlight"
|
||||
in2="SourceAlpha"
|
||||
operator="in"
|
||||
result="bounded-highlight"
|
||||
/>
|
||||
<feBlend
|
||||
in="refracted-backdrop"
|
||||
in2="bounded-highlight"
|
||||
mode="screen"
|
||||
/>
|
||||
</filter>
|
||||
</defs>
|
||||
</svg>
|
||||
<a className="skip-link" href="#main-content">
|
||||
{t("Skip to content")}
|
||||
</a>
|
||||
|
||||
173
app/site-glass.css
Normal file
173
app/site-glass.css
Normal file
@@ -0,0 +1,173 @@
|
||||
/* A restrained frosted-glass treatment for the shared site navigation. */
|
||||
.site-header {
|
||||
--site-header-glass: rgb(8 11 16 / 0.78);
|
||||
position: sticky;
|
||||
inset-block-start: 0;
|
||||
z-index: 40;
|
||||
background: var(--bg);
|
||||
border-bottom-color: rgb(235 242 250 / 0.14);
|
||||
box-shadow:
|
||||
inset 0 1px rgb(255 255 255 / 0.055),
|
||||
0 8px 24px rgb(3 6 10 / 0.12);
|
||||
transition:
|
||||
background-color 160ms ease,
|
||||
border-color 160ms ease;
|
||||
}
|
||||
|
||||
@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%);
|
||||
}
|
||||
}
|
||||
|
||||
@supports (backdrop-filter: url("#liquid-glass-distortion")) {
|
||||
.site-header {
|
||||
backdrop-filter: url("#liquid-glass-distortion") blur(5px) saturate(135%);
|
||||
}
|
||||
}
|
||||
|
||||
@supports (-webkit-backdrop-filter: url("#liquid-glass-distortion")) {
|
||||
.site-header {
|
||||
-webkit-backdrop-filter: url("#liquid-glass-distortion") blur(5px)
|
||||
saturate(135%);
|
||||
}
|
||||
}
|
||||
|
||||
html[data-theme="light"] .site-header {
|
||||
--site-header-glass: rgb(246 249 242 / 0.78);
|
||||
border-bottom-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);
|
||||
}
|
||||
|
||||
@media (prefers-reduced-transparency: reduce) {
|
||||
.site-header {
|
||||
background: var(--bg);
|
||||
backdrop-filter: none;
|
||||
-webkit-backdrop-filter: none;
|
||||
}
|
||||
|
||||
.site-header::before {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.site-header::before {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
pointer-events: none;
|
||||
content: "";
|
||||
background:
|
||||
linear-gradient(
|
||||
112deg,
|
||||
rgb(255 255 255 / 0.09),
|
||||
transparent 24%,
|
||||
transparent 76%,
|
||||
rgb(255 255 255 / 0.035)
|
||||
),
|
||||
linear-gradient(180deg, rgb(255 255 255 / 0.045), transparent 70%);
|
||||
}
|
||||
|
||||
.site-header .header-inner {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
html[data-theme="light"] .site-header::before {
|
||||
background:
|
||||
linear-gradient(
|
||||
112deg,
|
||||
rgb(255 255 255 / 0.55),
|
||||
transparent 24%,
|
||||
transparent 76%,
|
||||
rgb(255 255 255 / 0.18)
|
||||
),
|
||||
linear-gradient(180deg, rgb(255 255 255 / 0.34), transparent 70%);
|
||||
}
|
||||
|
||||
.site-filter-definitions {
|
||||
position: absolute;
|
||||
width: 0;
|
||||
height: 0;
|
||||
overflow: hidden;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
/* Keep the secondary support label quiet until someone points to or focuses it. */
|
||||
.header-report {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.header-report > span {
|
||||
display: block;
|
||||
position: absolute;
|
||||
inset-block-start: calc(100% + 9px);
|
||||
inset-inline-start: 50%;
|
||||
z-index: 2;
|
||||
max-width: min(14rem, calc(100vw - 24px));
|
||||
padding: 6px 9px;
|
||||
border: 1px solid var(--line);
|
||||
border-radius: 5px;
|
||||
background: var(--panel);
|
||||
box-shadow: 0 5px 16px rgb(3 6 10 / 0.2);
|
||||
color: var(--text);
|
||||
font-size: 11px;
|
||||
line-height: 1.35;
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
pointer-events: none;
|
||||
transform: translate(-50%, -3px);
|
||||
transition:
|
||||
opacity 140ms ease,
|
||||
transform 140ms ease,
|
||||
visibility 140ms ease;
|
||||
}
|
||||
|
||||
.header-report:is(:hover, :focus-visible) > span {
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
transform: translate(-50%, 0);
|
||||
}
|
||||
|
||||
/* The header icon carries this action above phone width, so avoid a duplicate menu row. */
|
||||
@media (max-width: 1200px) and (min-width: 601px) {
|
||||
.site-navigation .nav-support {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
/* Touch screens cannot reveal hover labels; keep the action clear there. */
|
||||
@media (hover: none) {
|
||||
.header-report > span {
|
||||
position: static;
|
||||
max-width: none;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
border-radius: 0;
|
||||
background: transparent;
|
||||
box-shadow: none;
|
||||
color: inherit;
|
||||
font-size: inherit;
|
||||
line-height: inherit;
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
transform: none;
|
||||
}
|
||||
}
|
||||
|
||||
@media (hover: none) and (max-width: 1000px) {
|
||||
.header-report {
|
||||
width: auto;
|
||||
padding-inline: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.site-header,
|
||||
.header-report > span {
|
||||
transition: none;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user