lashman/tutorialvault
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1 Wiki Activity

WCAG AAA contrast, speed menu z-index, custom app icon

Browse Source
This commit is contained in:
lashman
2026-02-19 18:23:38 +02:00
parent 2a173c1dff
commit 4fddb02336
29 changed files with 147 additions and 52 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
src/styles/main.css
View File

@@ -1,5 +1,6 @@
:root{
--zoom:1;
/* Type scale - Minor Third (1.2) from 13px base: 10 · 11 · 12 · 13 · 15 · 17 · 19 */
/* Base backgrounds - cool dark slate, lighter */
--bg0:#0f1117; --bg1:#151821;
/* Strokes - cool, very subtle */
@@ -9,8 +10,8 @@
--strokeStrong:rgba(140,160,210,.14);
/* Text - cool white hierarchy */
--text:rgba(218,225,240,.90);
--textMuted:rgba(160,174,204,.72);
--textDim:rgba(158,174,208,.68);
--textMuted:rgba(185,196,222,.86);
--textDim:rgba(172,184,214,.88);
/* Surfaces - cool-tinted, subtle fills */
--surface-0:rgba(140,165,220,.04);
--surface:rgba(140,165,220,.06);
@@ -34,7 +35,7 @@
/* Fonts */
--mono:"Space Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
--sans:"Inter", ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
--brand:"Fraunces", Georgia, "Times New Roman", serif;
--brand:"Bricolage Grotesque", "Inter", ui-sans-serif, system-ui, sans-serif;
/* Icons - cool */
--icon:rgba(160,175,210,.62);
--iconStrong:rgba(200,212,238,.75);
@@ -58,7 +59,7 @@ body{
margin:0; padding:0; font-family:var(--sans); color:var(--text); overflow:hidden;
width:100vw; height:100vh;
font-weight:400;
line-height:1.4;
line-height:1.45;
background:
radial-gradient(900px 600px at 8% 3%, rgba(100,140,210,.04), transparent 55%),
radial-gradient(600px 400px at 92% 97%, rgba(90,120,180,.03), transparent 60%),
@@ -197,9 +198,9 @@ body{
.brandText{min-width:0; position:relative; z-index:1;}
.appName{
font-family:var(--brand);
font-weight:800;
font-size:18px;
line-height:1.02;
font-weight:700;
font-size:19px;
line-height:1.1;
letter-spacing:-.02em;
margin:0; padding:0;
transition:text-shadow .3s var(--ease-spring), color .2s ease;
@@ -218,7 +219,7 @@ body{
transition:color .3s var(--ease-spring);
}
.brand:hover .tagline{
color:rgba(180,192,218,.82);
color:rgba(192,202,226,.90);
}
.actions{
@@ -429,7 +430,7 @@ body{
.dropdownPortal::-webkit-scrollbar-thumb{background:rgba(140,160,210,.10); border-radius:999px;}
.dropdownPortal::-webkit-scrollbar-button{width:0; height:0; display:none;}
.dropItem{display:flex; align-items:center; gap:10px; padding:10px 12px; border-radius:var(--r3); cursor:pointer; user-select:none; color:var(--text); font-weight:600; font-size:13px; letter-spacing:0; line-height:1.25; transition:all .2s var(--ease-bounce); position:relative;}
.dropItem{display:flex; align-items:center; gap:10px; padding:10px 12px; border-radius:var(--r3); cursor:pointer; user-select:none; color:var(--text); font-weight:500; font-size:13px; letter-spacing:0; line-height:1.25; transition:all .2s var(--ease-bounce); position:relative;}
.dropItem:hover{background:var(--surfaceHover); padding-left:16px; padding-right:36px;}
.dropItem:active{transform:scale(.98); transition-duration:.08s;}
.dropIcon{width:18px; height:18px; display:flex; align-items:center; justify-content:center; flex:0 0 auto; opacity:.9; transition:transform .25s var(--ease-bounce), opacity .15s ease;}
@@ -446,7 +447,7 @@ body{
.seg{display:inline-flex; border:none; border-radius:var(--r2); overflow:hidden; background:var(--surface-2); transition:background .15s ease;}
.seg:hover{background:var(--surface-3);}
.seg .btn{border:none; box-shadow:none; border-radius:0; padding:8px 9px; background:transparent; font-weight:800; transform:none;}
.seg .btn{border:none; box-shadow:none; border-radius:0; padding:8px 9px; background:transparent; font-weight:700; transform:none;}
.seg .btn:hover{background:var(--surface-3); transform:none; box-shadow:none;}
.seg .btn:active{background:var(--surface-4); transform:scale(.95);}
.seg .mid{border-left:1px solid rgba(140,160,210,.06); border-right:1px solid rgba(140,160,210,.06); min-width:62px; font-variant-numeric:tabular-nums;}