Repository navigation
Expand file tree
/
Copy pathstyle.css
More file actions
46 lines (34 loc) · 8.33 KB
/
Copy pathstyle.css
File metadata and controls
46 lines (34 loc) · 8.33 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
*{box-sizing:border-box}body{margin:0;background:#08060e;color:#f8efff;font:18px Arial;height:100vh;overflow:hidden}
main{height:100%;padding:28px 12px 22px;display:flex;flex-direction:column;gap:6px}header{height:56px;padding-right:56px;flex-shrink:0;display:flex;align-items:center;gap:8px}
button{font:20px Arial;color:#fff;background:#30203f;border:1px solid #744193;border-radius:8px;min-height:56px;padding:8px 12px;touch-action:manipulation;flex-shrink:0}button.active{background:#ff2397;border-color:#ff2397;font-weight:bold}button:disabled{opacity:.4}button:focus-visible{outline:3px solid #27ead5;outline-offset:2px}
#back{min-width:78px}.now-playing{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px}#track{font-size:20px;line-height:24px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.now-playing small{font-size:14px;color:#27ead5;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#transport{display:flex;gap:6px}#transport button{min-width:60px;padding:8px;font-size:19px;font-weight:bold}#togglePlayback{min-width:78px!important;background:#ff2397;border-color:#ff2397}#menuToggle{min-width:68px}#fullscreen{min-width:94px;padding:10px 14px;font-weight:bold}
section{flex:1;min-height:0;position:relative}section[hidden],[hidden]{display:none!important}#visualizer{display:flex;flex-basis:0}.canvas-wrap{flex:1;min-height:0;position:relative;border:1px solid #583269;border-radius:10px;overflow:hidden}canvas{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;display:block}
#captureStatus{position:absolute;top:8px;left:12px;right:12px;font-size:15px;line-height:20px;color:#c7afd9;pointer-events:none;text-shadow:0 1px 4px #000;background:#08060e99;width:max-content;max-width:calc(100% - 24px);padding:3px 6px;border-radius:5px}
.visual-full header,.visual-full footer,.visual-full #captureStatus,.visual-full #musicMenu{display:none!important}.visual-full main{padding:0;gap:0}.visual-full .canvas-wrap{border:0;border-radius:0}
#musicMenu{position:fixed;top:0;right:0;bottom:0;left:0;z-index:20;background:#08060ef5;display:flex;align-items:stretch;padding:16px 64px 24px 20px}
.menu-card{background:#160e21;border:1px solid #744193;border-radius:14px;width:100%;min-height:0;padding:14px;display:flex;flex-direction:column}
.menu-heading{display:flex;align-items:center;justify-content:space-between;flex-shrink:0;margin-bottom:12px}.menu-heading strong{color:#ff2397;font-size:25px}.menu-heading button{min-width:120px;font-size:22px}
.menu-body{display:grid;grid-template-columns:148px minmax(0,1fr);grid-gap:18px;min-height:0;flex:1}.menu-body h2{font-size:18px;font-weight:700;letter-spacing:1px;color:#c7afd9;margin:0 0 10px}.menu-pages{min-height:0;overflow-y:auto;border-right:1px solid #583269;padding-right:14px}
#tabs{display:grid;grid-template-columns:1fr;grid-gap:8px}#tabs button{width:100%;min-height:52px;margin:0;text-align:left;padding:10px 14px;font-size:21px;line-height:26px;white-space:normal}
.menu-visuals{min-width:0;min-height:0;overflow-y:auto}.modes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-gap:10px}.modes button{width:100%;margin:0;min-height:66px;font-size:21px;line-height:25px;padding:10px;white-space:normal;overflow-wrap:break-word}
.menu-actions{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-gap:10px;margin-top:12px}.menu-actions button{min-width:0;font-size:20px;padding:10px 8px;white-space:normal}#capture{background:#744193}
#visualAdjust>button{margin-bottom:18px;min-width:124px}#visualAdjust .hint{margin-top:18px}.hint{color:#c7afd9;font-size:17px;line-height:1.4;margin:0}
.scroll,#lyrics{overflow-y:auto;touch-action:pan-y}.refresh,#refreshLyrics{position:sticky;top:0;z-index:1;width:100%;font-size:21px;margin-bottom:8px}#lyricText{white-space:pre-wrap;font-size:28px;line-height:1.55;margin:10px 0;padding:0 10px 35px}.list{display:flex;flex-direction:column;gap:7px}.item{display:flex;align-items:center;gap:12px;padding:10px;background:#1d112a;border-left:3px solid #27ead5;border-radius:7px;min-height:78px}.item .text{flex:1;min-width:0;overflow:hidden}.item strong{display:block;font-size:20px;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.item small{display:block;color:#c7afd9;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.item button{min-width:88px}.list-error{font-size:24px;line-height:1.4;padding:20px;background:#241431;border-left:4px solid #ff2397;margin:0}
footer{position:fixed;left:20px;right:20px;bottom:28px;z-index:5;font-size:16px;color:#27ead5;background:#08060ee6;border-radius:6px;padding:6px;pointer-events:none}footer:empty{display:none}#video{overflow-y:auto}#embed iframe{width:100%;height:100%;border:0}
/* Chromium 69 supports grid gap, but not flex gap. Use explicit spacing. */
main,header,#transport,.now-playing{gap:0}main>header{margin-bottom:6px}header>*+*{margin-left:8px}#transport>*+*{margin-left:6px}.now-playing small{margin-top:4px}
.sensitivity{display:block;background:#241431;border-radius:10px;padding:10px 16px}.sensitivity span{display:flex;justify-content:space-between;font-size:22px}.sensitivity strong{color:#27ead5}.sensitivity small{display:block;color:#c7afd9;font-size:16px}.sensitivity input{display:block;width:100%;height:52px;margin:0;-webkit-appearance:none;background:transparent;touch-action:pan-x}.sensitivity input::-webkit-slider-runnable-track{height:12px;background:#744193;border-radius:6px}.sensitivity input::-webkit-slider-thumb{-webkit-appearance:none;width:38px;height:38px;margin-top:-13px;border:3px solid white;border-radius:50%;background:#27ead5}
#sensitivityHud{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:8;pointer-events:none;opacity:0;transition:opacity 250ms;background:rgba(16,8,27,.74);border:1px solid #b782ff88;border-radius:18px;padding:18px 30px;text-align:center;min-width:190px}#sensitivityHud.show{opacity:1}#sensitivityHud span{display:block;font-size:21px;color:#c7afd9}#sensitivityHud strong{display:block;font-size:48px;color:#27ead5}#sensitivityHud small{font-size:17px;color:#c7afd9}.sensitivity-meter{height:90px;width:18px;margin:8px auto 12px;background:#74419366;border-radius:9px;position:relative;overflow:hidden}#sensitivityHudFill{position:absolute;left:0;bottom:0;width:100%;background:#27ead5;box-shadow:0 0 14px #27ead5}
#captureStatus{top:auto;bottom:8px}
#runnerAdjust .sensitivity+.sensitivity{margin-top:12px}#runnerAdjust .sensitivity span{font-size:21px}
.lyrics-toolbar{position:sticky;top:0;z-index:3;display:flex;align-items:center;background:#08060e;padding:0 0 8px}.lyrics-toolbar #refreshLyrics{position:static;width:auto;min-width:120px;margin:0 12px 0 0}.lyrics-toolbar #followLyrics{margin-right:12px;background:#744193;min-width:145px}#lyricMode{font-size:16px;color:#c7afd9}#lyricText{padding-bottom:45%;padding-top:12px}.lyric-line{margin:0 0 26px;padding:8px 10px;color:#8e7a9e;line-height:1.4;font-size:28px;transition:color 180ms,background 180ms;border-radius:8px;white-space:pre-wrap}.lyric-line.current{color:#27ead5;background:#211431;font-weight:700}
#restoreControls{display:none;position:absolute;left:16px;bottom:18px;z-index:12;min-width:52px;min-height:48px;padding:4px;background:#160e21b8;font-size:28px}.visual-full #restoreControls{display:block}
#transport button,#fullscreen,#menuToggle{display:flex;align-items:center;justify-content:center;width:56px;min-width:56px!important;height:56px;padding:12px}#transport button svg,#fullscreen svg,#menuToggle svg,#restoreControls svg{display:block;pointer-events:none}#restoreControls{padding:10px}#restoreControls svg{margin:auto}
#motionSpeedLabel{display:inline}
#backdropReactionLabel{display:inline}
/* Fixed slots keep transport controls anchored while titles and state change. */
header{display:grid;grid-template-columns:78px 56px minmax(0,1fr) 180px 56px;grid-column-gap:8px}header>*+*{margin-left:0}#transport{width:180px}.now-playing{overflow:hidden}#followLyrics[hidden]{display:block!important;visibility:hidden;pointer-events:none}.menu-actions button{font-weight:400}.menu-actions button.active{font-weight:400}
#closeMenu{display:flex;align-items:center;justify-content:center;min-width:144px;min-height:56px;background:#173431;border:2px solid #27ead5;color:#bafff4}#closeMenu svg{display:block;pointer-events:none;margin-right:10px}
/* Preserve scene proportions when the player row is hidden or the viewport changes. */
canvas{object-fit:contain;object-position:center;background:#08060e}