avi/Keynctr
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Glass theme: real frosted-glass look

Browse source 
Translucent surfaces with backdrop blur over an aurora gradient
backdrop, hairline light borders, softened accent tints, frosted
modal scrim, inverted sidebar logo. Scoped entirely to
html[data-theme='glass'] — other themes untouched.
This commit is contained in:
Avi 2026-08-24 19:44:11 -05:00
commit ecb666bc1d
1 changed files with 66 additions and 23 deletions
Download patch file Download diff file Expand all files Collapse all files

89
frontend/src/styles.css
View file

@ -87,31 +87,73 @@
--shadow-modal: 0 12px 40px rgba(0, 0, 0, 0.85), 0 0 32px rgba(255, 20, 147, 0.12);
}
/* "Glass" — muted frosted aesthetic inspired by the Meridian Obsidian theme
(MIT): dark panels, cyan accents, and glass-like transparency simulation. */
/* "Glass" — frosted-glass aesthetic inspired by the Meridian Obsidian theme
(MIT): translucent blurred panels floating over an aurora-lit deep
blue-black field, cyan accents, hairline light borders. */
:root[data-theme='glass'] {
--bg: #0d0d0d;
--surface: #1a1a1f;
--surface-2: #24242a;
--border: #3a3a44;
--border-strong: #4a4a5a;
--text: #e0e0e7;
--text-muted: #888899;
--bg: #0a0d13;
--surface: rgba(23, 29, 41, 0.58);
--surface-2: rgba(255, 255, 255, 0.05);
--surface-hover: rgba(255, 255, 255, 0.09);
--border: rgba(255, 255, 255, 0.1);
--border-strong: rgba(255, 255, 255, 0.2);
--text: #e8ecf4;
--text-muted: #96a2b6;
--primary: #7fdbff;
--primary-hover: #5bc0de;
--primary-soft: #1e2a3a;
--on-primary: #050512;
--danger: #ff6b6b;
--danger-soft: #332a2a;
--warning: #f0ad4f;
--warning-soft: #332a2a;
--success: #5cb85c;
--success-soft: #2ecc71;
--info: #5bc0de;
--info-soft: #1e2c3c;
--primary-hover: #a3e5ff;
--primary-soft: rgba(127, 219, 255, 0.13);
--on-primary: #06121c;
--danger: #ff8080;
--danger-soft: rgba(255, 107, 107, 0.14);
--warning: #ffc46b;
--warning-soft: rgba(240, 173, 79, 0.15);
--success: #7ed99a;
--success-soft: rgba(92, 184, 92, 0.16);
--info: #82c9ea;
--info-soft: rgba(91, 192, 222, 0.14);
--focus: #7fdbff;
--shadow: 0 1px 2px rgba(0, 0, 0, 0.2), 0 8px 24px rgba(0, 0, 0, 0.4);
--shadow-modal: 0 12px 40px rgba(0, 0, 0, 0.5);
--shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 12px 36px rgba(0, 0, 0, 0.38);
--shadow-modal: 0 18px 56px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(255, 255, 255, 0.07) inset;
}
/* Glass scene: the aurora backdrop lives on <body>; panels above it are
translucent and blurred so the glow reads through them. */
html[data-theme='glass'] body {
background:
radial-gradient(1000px 640px at 10% -10%, rgba(127, 219, 255, 0.15), transparent 60%),
radial-gradient(880px 560px at 92% 6%, rgba(150, 130, 255, 0.12), transparent 58%),
radial-gradient(760px 720px at 50% 120%, rgba(91, 192, 222, 0.1), transparent 62%), #0a0d13;
}
html[data-theme='glass'] .app-shell,
html[data-theme='glass'] .main {
background: transparent;
}
/* Frosted panes: every major surface blurs whatever sits behind it. */
html[data-theme='glass'] .card,
html[data-theme='glass'] .sidebar,
html[data-theme='glass'] .modal,
html[data-theme='glass'] .empty-state,
html[data-theme='glass'] .profile-card,
html[data-theme='glass'] .compose-preview {
-webkit-backdrop-filter: blur(18px) saturate(160%);
backdrop-filter: blur(18px) saturate(160%);
}
html[data-theme='glass'] input[type='text'],
html[data-theme='glass'] input[type='search'],
html[data-theme='glass'] input[type='password'],
html[data-theme='glass'] select,
html[data-theme='glass'] textarea {
background: rgba(255, 255, 255, 0.045);
border-color: rgba(255, 255, 255, 0.16);
}
html[data-theme='glass'] .modal-backdrop {
background: rgba(4, 7, 12, 0.5);
-webkit-backdrop-filter: blur(6px);
backdrop-filter: blur(6px);
}
* {
@ -369,7 +411,8 @@ a {
/* The artwork is black-on-white; flip it in dark themes so it stays black
bird on dark tile instead of a glaring white square. */
html[data-theme='dark'] .sidebar-logo img,
html[data-theme='neon'] .sidebar-logo img {
html[data-theme='neon'] .sidebar-logo img,
html[data-theme='glass'] .sidebar-logo img {
filter: invert(1);
}