/* ======================================================================= RDXEXP — SWISS-FLAT LAYER (modules-aware) Save as: public/css/enhanced-layout-flat.css Load after your main/enhanced CSS. ======================================================================= */ /* ---- Base tokens (flat) ---- Default theme: OLIVE PRINT (soft paper w/ olive-gray ink) Colors chosen from your list: - surface-0 = Mushroom II #F9F8F4 - surface-1 = Pebble #EDECE2 - ink-0 = Floor #343531 - ink-1 = Pony #4F4F4A - rule = AccentGray #E2E2D5 */ :root { --surface-0:#666D6B; /* Asmodius */ --surface-1:#2B2A29; /* smokeSignal */ --ink-0:#E2E2E2; /* Elephant (light text) */ --ink-1:#B7BAB5; /* Maybe (secondary text) */ --rule:#515151; /* Modern Button (borders) */ --accent:#707069; /* Malcolm (olive accent) */ --cta1-dark: #383834; /* eclipse */ --r-0:0; --shadow-none:none; --fs-0: 10px; /* was 12px */ --fs-1: 11px; /* was 13px */ --fs-2: 12px; /* was 14px */ --fs-3: 14px; /* was 16px */ --fs-4: 16px; /* was 18px */ --sp-1: 2px; /* was 4px */ --sp-2: 4px; /* was 8px */ --sp-3: 6px; /* was 12px */ --sp-4: 8px; /* was 16px */ --sp-5: 12px; /* was 24px */ --sp-6: 16px; /* was 32px */ --ink-muted:#888B87; /* SilverFox, for subtle elements */ --rule-dim:#A5A2A2; /* Tech Support, softer line */ } /* ===== Optional theme variants (toggle by class on ) ===== */ /* INDUSTRIAL: crisper neutral UI */ .theme-industrial { --surface-0:#ECECEC; /* Silver Lining */ --surface-1:#E5E5E5; /* AppleStore */ --ink-0:#282825; /* Seurat */ --ink-1:#515151; /* Modern Button */ --rule:#DADADA; /* Morning Mist */ --accent:#00b3a3; /* or swap to --accent-neutral below */ --ink-muted:#7A7272; /* Wednesday */ --rule-dim:#BFBFBF; /* Weathered Stone */ } /* NIGHT: warm charcoal dark mode */ .theme-night { --surface-0:#282825; /* Seurat */ --surface-1:#3D3A36; /* Barcelona */ --ink-0:#E2E2E2; /* Elephant */ --ink-1:#D9D9D9; /* Glacier */ --rule:#C9C7C5; /* SilverWitch 2 */ --accent:#9DAA9F; /* NEW-Reed, soft sage accent */ --ink-muted:#A0A39F; /* SilverWitch */ --rule-dim:#AAA9A3; /* Sharky */ } /* Optional neutral accent swatches you can use anywhere */ :root { --accent-neutral:#ADACA1; /* Technique */ --accent-neutral-2:#A0A39F; /* SilverWitch */ } /* Optional gray scale refs (handy for utilities) */ :root { --g-50:#F9F8F4; /* Mushroom II */ --g-100:#EDECE2; /* Pebble */ --g-150:#E4E8E2; /* Naples */ --g-200:#E0E0D5; /* Eiderdown */ --g-300:#C6C4BE; /* SilverFox */ --g-400:#BFC4BB; /* Pussy Cat */ --g-500:#A0A39F; /* SilverWitch */ --g-600:#8B8C85; /* Apple */ --g-700:#666D6B; /* Asmodius */ --g-800:#4F4F4A; /* Pony */ --g-900:#343531; /* Floor */ --g-950:#2B2A29; /* smokeSignal */ } /* Remove glossy stuff globally (keeps your engine math intact) */ *{ border-radius:var(--r-0) !important; } .header,.controls-section,.library,.playlist-button,.tape-container, input[type="range"]::-webkit-slider-thumb,input[type="range"]::-moz-range-thumb{ box-shadow:var(--shadow-none) !important; background-image:none !important; } /* ----------------------------------------------------------------------- TitleScreen (TitleScreen.js expects #titlePage, #playerPage + .fade-out) ----------------------------------------------------------------------- */ #titlePage{ background:var(--surface-1); color:var(--ink-0); min-height:min(100dvh, 100vh); display:grid; place-items:center; text-align:center; border-bottom:1px solid var(--rule); padding:var(--sp-6); } #titlePage .title-text{ font-size:clamp(28px,3.5vw,48px); line-height:1.2; letter-spacing:-0.01em; text-transform:uppercase; /* optional Swiss flavor */ margin-bottom:var(--sp-4); } #titlePage .subtitle{ font-size:var(--fs-3); color:var(--ink-1); } /* Minimal “fade” (no blur/gradient) */ #titlePage.fade-out{ opacity:0; transition:opacity 220ms ease; } #playerPage.hidden{ display:none; } /* ----------------------------------------------------------------------- Controls + Time (EventHandler/UIController IDs) ----------------------------------------------------------------------- */ /* Buttons (IDs from EventHandler mappings) */ #playButton,#stopButton,#pauseButton,#prevButton,#nextButton, #BKshuffleButton,#FWDshuffleButton,#repeatButton,#ejectButton{ display:inline-grid; place-items:center; width:36px;height:36px; background:var(--surface-0); transition:border-color 120ms ease, transform 120ms ease, background 120ms ease; cursor:pointer; } #playButton:hover,#stopButton:hover,#pauseButton:hover,#prevButton:hover,#nextButton:hover, #BKshuffleButton:hover,#FWDshuffleButton:hover,#repeatButton:hover,#ejectButton:hover{ border-color:var(--ink-1); } #playButton:active,#stopButton:active,#pauseButton:active,#prevButton:active,#nextButton:active, #BKshuffleButton:active,#FWDshuffleButton:active,#repeatButton:active,#ejectButton:active{ transform:translateY(1px); } /* Repeat active state (UIController toggles .active) */ #repeatButton.active{ background:var(--accent); border-color:var(--accent); color:#fff; } /* Time displays (UIController queries these classes) */ .elapsed-time,.total-time,.VolAmt{ font-variant-numeric:tabular-nums; font-size: var(--fs-1); letter-spacing:0; color:var(--ink-0); } .VolAmt{ font-weight:200; font-size: var(--fs-3);} /* Seekbar (UIController sets value/max and --buffered %) */ #seekBar{ -webkit-appearance:none; appearance:none; width:100%; height:18px; background:transparent; } #seekBar::-webkit-slider-track{ height:2px; background:var(--cta1-dark); border-radius:0; } #seekBar::-moz-range-track{ height:2px; background:var(--cta1-dark); } #seekBar::-webkit-slider-thumb{ -webkit-appearance:none; appearance:none; width:20px;height:20px; border:1px solid var(--ink-0); background:var(--cta1-dark); border-radius:0; margin-top:-7px; } #seekBar::-moz-range-thumb{ width:20px;height:20px; border:1px solid var(--ink-0); background:var(--cta1-dark); border-radius:0; } /* Buffered rail (pure CSS, flat) */ #seekBar{ background: linear-gradient(90deg, var(--ink-1) 0 0) no-repeat 0 100%/0 2px, linear-gradient(90deg, var(--rule) 0 0) 0 100%/100% 2px no-repeat; } #seekBar{ background-size: var(--buffered,0%) 2px, 100% 2px; } /* Volume */ /* Volume Control - Match seekBar styling */ #volumeControl { -webkit-appearance: none; appearance: none; width: 170px; height: 28px; background: transparent; border: 1px solid var(--cta1-dark); padding: var(--sp-1); } #volumeControl::-webkit-slider-track { height: 2px; background: var(--cta1-dark); border-radius: 0; } #volumeControl::-moz-range-track { height: 2px; background: var(--cta1-dark); } #volumeControl::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 20px; height: 20px; border: 1px solid var(--ink-0); background: var(--cta1-dark); border-radius: 0; margin-top: 10px; margin-bottom: 7px; } #volumeControl::-moz-range-thumb { width: 20px; height: 20px; border: 1px solid var(--ink-0); background: var(--cta1-dark); border-radius: 0; } /* File display wrapper (UIController uses .file-upload-wrapper) */ .file-upload-wrapper{ background:var(--surface-0); border:1px solid var(--rule); padding:var(--sp-3) var(--sp-4); min-height:36px; } .file-upload-wrapper.loading{ background:var(--surface-1); } /* ----------------------------------------------------------------------- Library (LibraryRenderer uses .container1 and builds structure) ----------------------------------------------------------------------- */ .container1{ background:var(--surface-0); border:1px solid var(--rule); padding:var(--sp-5); } .container1 > h2{ margin:0 0 var(--sp-3) 0; font-size:var(--fs-4); font-weight: 100; letter-spacing:.02em; } #libraryList{ list-style:none; margin:0; padding:0; } /* Library item (each tape) */ .library-item{ padding: var(--sp-5); border-bottom:1px solid var(--rule); } .library-item:last-child{ border-bottom:0; } /* Tape row with nested playlist toggle */ .tape-container{ position:relative; display:flex; align-items:center; justify-content:space-between; padding:var(--sp-2) var(--sp-2); transition:background 120ms ease; } .tape-container:hover{ background:var(--surface-1); } .tape-container::before{ content:""; position:absolute; inset:0 auto 0 0; width:3px; background:transparent; } .tape-container:hover::before{ background:var(--accent); } .library-item.current-track .tape-container{ background:#eef8f6; } /* accent tint */ .tape-main{ cursor:pointer; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;font-weight: 100; } /* Playlist toggle button */ .playlist-button{ border:1px solid var(--ink-1); padding:2px 10px; background:var(--surface-0); text-transform:lowercase; font-size:var(--fs-2); transition:background 120ms ease, color 120ms ease, border-color 120ms ease; } .playlist-button:hover{ background:var(--ink-1); color:#fff; border-color:var(--ink-1); } /* Nested playlist container */ .playlist-content{ padding:0 var(--sp-4) var(--sp-3); } .song-list{ display:grid; gap:var(--sp-2); } /* Song item row */ .song-item{ display:flex; align-items:center; justify-content:space-between; padding:8px 0; border-bottom:1px dotted var(--rule); } .song-item:last-child{ border-bottom:0; } .song-item.current-song{ background:#f0fbf8; } /* subtle accent tint */ /* Song info block */ .song-info{ min-width:0; cursor:pointer; } .song-title{ font-size:var(--fs-3); line-height:1.3; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .song-details{ font-size:var(--fs-1); color:var(--ink-1); } /* Actions: favorites star (no glow) */ .song-actions{ display:flex; gap:8px; } .favorite-btn{ width:20px; height:20px; border:1px solid var(--rule); background:var(--surface-0); position:relative; cursor:pointer; } .favorite-btn::before{ content:"★"; /* pure glyph, flat */ position:absolute; inset:0; display:grid; place-items:center; font-size:12px; color:#888; } .favorite-btn.is-favorite{ border-color:var(--accent); background:#e7faf7; } .favorite-btn.is-favorite::before{ color:#00a090; } /* Favorites section (built by LibraryRenderer) */ .favorites-section{ border:1px solid var(--rule); background:var(--surface-0); margin:var(--sp-4) 0; } .favorites-header{ display:flex; align-items:center; justify-content:space-between; padding:var(--sp-3) var(--sp-4); border-bottom:1px solid var(--rule); } .favorites-header h3{ margin:0; font-size:var(--fs-3); letter-spacing:.02em; } .favorites-toggle{ border:1px solid var(--ink-1); background:var(--surface-0); padding:2px 10px; text-transform:lowercase; font-size:var(--fs-2); } .favorites-content{ padding:var(--sp-3) var(--sp-4); } .favorite-item{ display:flex; align-items:center; justify-content:space-between; padding:6px 0; border-bottom:1px dotted var(--rule); } .favorite-item:last-child{ border-bottom:0; } .favorite-info .favorite-title{ font-size:var(--fs-3); } .favorite-info .favorite-details{ font-size:var(--fs-1); color:var(--ink-1); } .favorite-actions .jump-btn, .favorite-actions .remove-btn{ width:28px; height:28px; display:grid; place-items:center; border:1px solid var(--rule); background:var(--surface-0); cursor:pointer; } .favorite-actions .jump-btn:hover, .favorite-actions .remove-btn:hover{ border-color:var(--ink-1); } /* Empty/error states that LibraryRenderer injects */ .empty-state,.error-state{ border:1px dashed var(--rule); padding:var(--sp-5); background:var(--surface-1); color:var(--ink-1); } .error-state button{ border:1px solid var(--ink-1); background:var(--surface-0); padding:2px 10px; margin-top:var(--sp-3); } /* ----------------------------------------------------------------------- Accessibility & motion ----------------------------------------------------------------------- */ :where(a,button,[role="button"],input,select,textarea):focus-visible{ outline:2px solid var(--accent); outline-offset:2px; } @media (prefers-reduced-motion:reduce){ *,*::before,*::after{ transition-duration:.01ms !important; animation-duration:.01ms !important; } } /* Mobile Portrait Header Fix - Add to enhanced-layout-flat.css */ @media (max-width: 480px) and (orientation: portrait) { .header-container { grid-template-areas: "logo time" "file now"; grid-template-columns: 1fr auto; grid-template-rows: auto auto; gap: 2px 8px; padding: 6px 12px; } .header { height: auto; min-height: 56px; } /* Make text smaller and more compact */ .header .file-info, .header .now-play { font-size: 11px; padding: 4px 6px; min-width: 0; line-height: 1.2; } /* Adjust time display */ .header .time-box { font-size: 12px; padding: 2px 4px; } /* Ensure logo stays readable */ .header .logo img { height: 20px; } } /* Extra narrow screens */ @media (max-width: 360px) { .header-container { gap: 1px 6px; padding: 4px 8px; } .header .file-info, .header .now-play { font-size: 10px; padding: 3px 5px; } } /* Multi-Library Styles - Add to enhanced-layout-flat.css */ /* Multi-libraries container */ .multi-libraries-container { display: grid; gap: var(--sp-2); } /* Library section */ .library-section { border: 1px solid var(--rule); background: var(--surface-0); overflow: hidden; } .library-section:last-child { margin-bottom: 0; } /* Section header */ .library-section-header { display: flex; align-items: center; justify-content: space-between; padding: var(--sp-3) var(--sp-4); background: var(--surface-1); border-bottom: 1px solid var(--rule); cursor: pointer; transition: background 120ms ease; } .library-section-header:hover { background: var(--g-800); } .section-header-main { display: flex; align-items: center; gap: var(--sp-3); flex: 1; } .section-icon { font-size: 18px; min-width: 24px; text-align: center; } .section-title { font-size: var(--fs-3); font-weight: 300; letter-spacing: 0.02em; text-transform: uppercase; } .section-count { font-size: var(--fs-1); color: var(--ink-1); margin-left: auto; } .section-header-controls { display: flex; align-items: center; } .section-toggle { background: none; border: 1px solid var(--rule); width: 28px; height: 28px; display: grid; place-items: center; cursor: pointer; transition: border-color 120ms ease, background 120ms ease; } .section-toggle:hover { border-color: var(--ink-1); background: var(--surface-0); } .toggle-icon { font-size: 12px; color: var(--ink-0); } /* Section content */ .library-section-content { transition: all 300ms ease; } .library-list { list-style: none; margin: 0; padding: 0; } .library-list .library-item { border-bottom: 1px solid var(--rule-dim); } .library-list .library-item:last-child { border-bottom: 0; } /* States */ .loading-state, .empty-library, .error-state, .collapsed-placeholder { padding: var(--sp-4); text-align: center; color: var(--ink-1); font-size: var(--fs-2); } .loading-state { background: var(--surface-1); border-top: 1px solid var(--rule); } .empty-library { background: var(--g-950); color: var(--ink-muted); } .error-state { background: var(--g-800); color: var(--ink-0); } .error-state button { margin-top: var(--sp-2); padding: var(--sp-1) var(--sp-3); border: 1px solid var(--rule); background: var(--surface-0); color: var(--ink-0); cursor: pointer; } .collapsed-placeholder { font-style: italic; color: var(--ink-muted); } /* Expanded section styling */ .library-section[data-expanded="true"] .library-section-header { background: var(--accent); color: #fff; } .library-section[data-expanded="true"] .section-title, .library-section[data-expanded="true"] .section-count, .library-section[data-expanded="true"] .toggle-icon { color: #fff; } /* Mobile responsive */ @media (max-width: 768px) { .section-header-main { gap: var(--sp-2); } .section-icon { font-size: 16px; min-width: 20px; } .section-title { font-size: var(--fs-2); } .section-count { font-size: var(--fs-0); } .section-toggle { width: 24px; height: 24px; } .library-section-content { animation-duration: 200ms; } } /* Animation classes for smooth expand/collapse */ .library-section-content.expanding { animation: expandSection 300ms ease-out; } .library-section-content.collapsing { animation: collapseSection 300ms ease-in; } @keyframes expandSection { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } } @keyframes collapseSection { from { opacity: 1; transform: translateY(0); } to { opacity: 0; transform: translateY(-10px); } } /* ADD THESE STYLES TO enhanced-layout-flat.css */ /* Section header controls container */ .section-header-controls { display: flex; align-items: center; gap: var(--sp-2); } /* Section loop button */ .section-loop-btn { background: none; border: 1px solid rgba(255, 255, 255, 0.3); padding: 4px 6px; border-radius: 3px; cursor: pointer; transition: all 0.3s ease; display: flex; align-items: center; justify-content: center; min-width: 28px; height: 24px; } .section-loop-btn .loop-icon { width: 14px; height: 14px; filter: brightness(0) invert(1); /* Makes the icon white */ transition: all 0.3s ease; } .section-loop-btn:hover { background-color: rgba(255, 255, 255, 0.1); border-color: rgba(255, 255, 255, 0.5); transform: scale(1.05); } .section-loop-btn:hover .loop-icon { transform: scale(1.1); } .section-loop-btn.active { background-color: rgba(255, 255, 255, 0.2); border-color: white; } .section-loop-btn.active .loop-icon { filter: brightness(0) invert(1); animation: pulse 2s infinite; } @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.6; } } /* Ensure section header has proper flexbox layout */ .library-section-header { display: flex; align-items: center; justify-content: space-between; padding: var(--sp-3) var(--sp-4); background: var(--surface-1); border-bottom: 1px solid var(--rule); cursor: pointer; transition: background 120ms ease; }