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

style: remove controls container and bump surface contrast

Browse Source 
Strip background/border-radius from .controlsStrip so playback
controls float freely. Roughly double all --surface opacity values
for better element visibility against the dark slate background.
This commit is contained in:
Your Name
2026-02-19 16:54:12 +02:00
parent c25df14358
commit 0054654fee
2 changed files with 9 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
src/styles/main.css
View File

@@ -12,13 +12,13 @@
--textMuted:rgba(160,174,204,.72); --textMuted:rgba(160,174,204,.72);
--textDim:rgba(158,174,208,.68); --textDim:rgba(158,174,208,.68);
/* Surfaces — cool-tinted, subtle fills */ /* Surfaces — cool-tinted, subtle fills */
--surface-0:rgba(140,165,220,.02); --surface-0:rgba(140,165,220,.04);
--surface:rgba(140,165,220,.03); --surface:rgba(140,165,220,.06);
--surface-2:rgba(140,165,220,.045); --surface-2:rgba(140,165,220,.09);
--surface-3:rgba(140,165,220,.065); --surface-3:rgba(140,165,220,.12);
--surface-4:rgba(140,165,220,.085); --surface-4:rgba(140,165,220,.15);
--surfaceHover:rgba(140,165,220,.055); --surfaceHover:rgba(140,165,220,.10);
--surfaceActive:rgba(140,165,220,.07); --surfaceActive:rgba(140,165,220,.13);
/* Shadows — minimal */ /* Shadows — minimal */
--shadow:0 8px 24px rgba(0,0,0,.25); --shadow:0 8px 24px rgba(0,0,0,.25);
--shadow2:0 4px 12px rgba(0,0,0,.15); --shadow2:0 4px 12px rgba(0,0,0,.15);

7
src/styles/player.css
View File

@@ -76,15 +76,12 @@ video::cue{
.controlsStrip{ .controlsStrip{
display:flex; align-items:center; justify-content:space-between; gap:8px; flex-wrap:wrap; display:flex; align-items:center; justify-content:space-between; gap:8px; flex-wrap:wrap;
padding:5px 6px; padding:5px 6px;
border-radius:var(--r);
border:none; border:none;
background:var(--surface); background:transparent;
transition:background .2s ease;
} }
.controlsStrip:hover{background:rgba(140,165,220,.04);}
.controlsStrip::after{display:none;} .controlsStrip::after{display:none;}
.stripDivider{width:1px; height:22px; background:rgba(140,160,210,.06); flex:0 0 auto; transition:background .2s ease, height .2s ease;} .stripDivider{width:1px; height:22px; background:rgba(140,160,210,.06); flex:0 0 auto; transition:background .2s ease, height .2s ease;}
.controlsStrip:hover .stripDivider{background:rgba(140,160,210,.09); height:24px;} .controlsStrip:hover .stripDivider{height:24px;}
.group{display:flex; align-items:center; gap:8px; flex-wrap:wrap;} .group{display:flex; align-items:center; gap:8px; flex-wrap:wrap;}
.controlsStrip .iconBtn{box-shadow:none;} .controlsStrip .iconBtn{box-shadow:none;}
.controlsStrip .miniCtl{box-shadow:none;} .controlsStrip .miniCtl{box-shadow:none;}