agomizi1cm/Poker
1
0 Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Make the nav bar material nearly opaque

Browse Source 
Content scrolled beneath the translucent nav bar showed through as
blurry gray patches behind the back button. Give the bar its own denser
material so it reads as a solid surface with only a hint of blur.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
agomizi1cmandClaude Opus 5.5 committed 2026-10-21 21:49:52 +09:00
1 parent c3fbfdd12e
commit 7941406163
1 file changed
+9 -4
Download Patch File Download Diff File Expand all files Collapse all files
public/assets/style.css
+9 -4
View File
@@ -43,6 +43,8 @@
--material-thin: rgba(255, 255, 255, 0.55); --material-thin: rgba(255, 255, 255, 0.55);
--material: rgba(250, 250, 252, 0.74); --material: rgba(250, 250, 252, 0.74);
--material-thick: rgba(246, 246, 249, 0.86); --material-thick: rgba(246, 246, 249, 0.86);
/* ナビゲーションバー: 下に潜った中身がぼやけた模様として透けないよう、ほぼ不透明に */
--material-bar: rgba(242, 242, 247, 0.94);
--material-edge: rgba(255, 255, 255, 0.7); --material-edge: rgba(255, 255, 255, 0.7);
--plate: rgba(255, 255, 255, 0.84); --plate: rgba(255, 255, 255, 0.84);
--scrim: rgba(0, 0, 0, 0.3); --scrim: rgba(0, 0, 0, 0.3);
@@ -110,6 +112,7 @@
--material-thin: rgba(44, 44, 46, 0.5); --material-thin: rgba(44, 44, 46, 0.5);
--material: rgba(30, 30, 32, 0.7); --material: rgba(30, 30, 32, 0.7);
--material-thick: rgba(24, 24, 26, 0.84); --material-thick: rgba(24, 24, 26, 0.84);
--material-bar: rgba(12, 12, 13, 0.94);
--material-edge: rgba(255, 255, 255, 0.09); --material-edge: rgba(255, 255, 255, 0.09);
--plate: rgba(28, 28, 30, 0.8); --plate: rgba(28, 28, 30, 0.8);
--scrim: rgba(0, 0, 0, 0.5); --scrim: rgba(0, 0, 0, 0.5);
@@ -127,6 +130,7 @@
--material-thin: #f2f2f7; --material-thin: #f2f2f7;
--material: #f7f7f9; --material: #f7f7f9;
--material-thick: #f2f2f7; --material-thick: #f2f2f7;
--material-bar: #f2f2f7;
--plate: #ffffff; --plate: #ffffff;
} }
} }
@@ -135,6 +139,7 @@
--material-thin: #2c2c2e; --material-thin: #2c2c2e;
--material: #1c1c1e; --material: #1c1c1e;
--material-thick: #1c1c1e; --material-thick: #1c1c1e;
--material-bar: #0c0c0d;
--plate: #1c1c1e; --plate: #1c1c1e;
} }
} }
@@ -250,9 +255,9 @@ a {
content: ""; content: "";
position: absolute; position: absolute;
inset: 0; inset: 0;
background: var(--material); background: var(--material-bar);
-webkit-backdrop-filter: blur(20px) saturate(180%); -webkit-backdrop-filter: blur(30px) saturate(150%);
backdrop-filter: blur(20px) saturate(180%); backdrop-filter: blur(30px) saturate(150%);
opacity: 0; opacity: 0;
transition: opacity 0.2s ease; transition: opacity 0.2s ease;
} }
@@ -264,7 +269,7 @@ a {
top: 100%; top: 100%;
height: 16px; height: 16px;
pointer-events: none; pointer-events: none;
background: linear-gradient(var(--material), transparent); background: linear-gradient(var(--material-bar), transparent);
-webkit-backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
backdrop-filter: blur(6px); backdrop-filter: blur(6px);
-webkit-mask-image: linear-gradient(#000, transparent); -webkit-mask-image: linear-gradient(#000, transparent);