/* ========================================================================== FILE assets/edgelit-skins-extra.css UPLOAD TO public_html/assets/edgelit-skins-extra.css LOAD on the home page, after assets/aes-skins.css WHAT IT IS EdgelitCV's own colourways for the Winamp chassis, from the CV review's "Assessed by three models" panel (Jace, 24 October: "develop a skin which matches the attached image"). aes-skins.css stays AES's byte for byte; these sit beside it and are offered by the SKIN button as two more colourways. VERSION R18 (2026-10-24) CHANGES R18: new. Two colourways: EdgelitCV the panel as it is: navy, a fine grid, a red hairline frame, and the three assessors' colours (blue, green, orange); EdgelitCV Light the same graphics on a light panel. The seek bar is the review's ATS score bar: a blue run ending in a lit white dot. The volume is the third assessor's orange; the switches that are on are the second assessor's green. ========================================================================== */ /* -- EDGELITCV (dark, as the review panel) ------------------------------- */ #player.aes-skin--edgelit { --k-font: "Rajdhani", "Helvetica Neue", Arial, sans-serif; --k-font-lcd: "Share Tech Mono", "Courier New", monospace; /* The panel: navy, with the review's fine grid laid over it. */ --k-shell: repeating-linear-gradient(0deg, rgba(120,140,220,.07) 0 1px, transparent 1px 14px), repeating-linear-gradient(90deg, rgba(120,140,220,.07) 0 1px, transparent 1px 14px), linear-gradient(180deg, #131E3D, #0A1228); --k-edge: #2A3A78; --k-bevel-hi: #33447F; --k-bevel-lo: #070C1C; /* The title bar carries the legend's three colours as a lit strip. */ --k-title: linear-gradient(90deg, #5B6CFF 0 33.3%, #1FD173 33.3% 66.6%, #FF8A1F 66.6% 100%) left bottom / 100% 1px no-repeat, linear-gradient(180deg, #1C2850 0%, #131D3C 60%, #0E1630 100%); --k-title-fg: #E6ECFF; --k-lcd: #070D1E; --k-lcd-inset: rgba(0,0,0,.85); --k-lcd-fg: #A9B8FF; --k-lcd-dim: #4F5C8E; --k-lcd-glow: rgba(120,140,255,.50); --k-btn: linear-gradient(180deg, #1F2C57, #141E3E); --k-btn-hover: linear-gradient(180deg, #26356A, #182447); --k-btn-down: #0B1330; --k-btn-fg: #C9D4F0; --k-btn-fg-hi: #FFFFFF; --k-accent: #FF8A1F; --k-trough: #0B1226; --k-fill: linear-gradient(90deg, #3E57E6, #8FA0FF); --k-fill-hi: rgba(220,228,255,.35); --k-list-fg: #A7B3D6; --k-list-hover: #16224A; --k-list-on: #24337A; --k-list-on-fg: #FFFFFF; --k-list-dead: #4A5578; --k-chip-on: #0E3B27; --k-chip-on-edge: #1FD173; --k-chip-on-fg: #5BF0A0; --k-viz-1: #3E57E6; --k-viz-2: #FF8A1F; } /* -- EDGELITCV LIGHT (the same graphics on a light panel) ---------------- */ #player.aes-skin--edgelit-light { --k-font: "Rajdhani", "Helvetica Neue", Arial, sans-serif; --k-font-lcd: "Share Tech Mono", "Courier New", monospace; --k-shell: repeating-linear-gradient(0deg, rgba(40,60,140,.08) 0 1px, transparent 1px 14px), repeating-linear-gradient(90deg, rgba(40,60,140,.08) 0 1px, transparent 1px 14px), linear-gradient(180deg, #F8FAFF, #E6EBF6); --k-edge: #B9C4E2; --k-bevel-hi: #FFFFFF; --k-bevel-lo: rgba(20,30,70,.12); --k-title: linear-gradient(90deg, #4A5BEA 0 33.3%, #16B562 33.3% 66.6%, #F07A10 66.6% 100%) left bottom / 100% 2px no-repeat, linear-gradient(180deg, #FFFFFF 0%, #EEF2FB 60%, #E3E9F6 100%); --k-title-fg: #1B2A5A; /* The display windows are light too: blue figures, as on the review's light cards, with a soft blue glow. */ --k-lcd: #F5F8FF; --k-lcd-inset: rgba(20,30,80,.16); --k-lcd-fg: #2A3FD6; --k-lcd-dim: #8A96BE; --k-lcd-glow: rgba(62,87,230,.22); --k-btn: linear-gradient(180deg, #FFFFFF, #E6EBF6); --k-btn-hover: linear-gradient(180deg, #FFFFFF, #DCE3F3); --k-btn-down: #D2DAEE; --k-btn-fg: #2A3A6A; --k-btn-fg-hi: #0E1A40; --k-accent: #F07A10; --k-trough: #DCE2F0; --k-fill: linear-gradient(90deg, #3E57E6, #8FA0FF); --k-fill-hi: rgba(255,255,255,.45); --k-list-fg: #2E3D6B; --k-list-hover: #E6ECFA; --k-list-on: #3E57E6; --k-list-on-fg: #FFFFFF; --k-list-dead: #A9B3CF; --k-chip-on: #DDF7E9; --k-chip-on-edge: #16B562; --k-chip-on-fg: #0E7A40; --k-viz-1: #4A5BEA; --k-viz-2: #F07A10; } /* -- what both share ------------------------------------------------------ */ /* The outer frame is the review panel's red hairline, lit; inside it every edge stays blue, as the panel's cards are. */ #player.aes-skin--edgelit, #player.aes-skin--edgelit-light { border-color: #C8102E; box-shadow: inset 1px 1px 0 var(--k-bevel-hi), inset -1px -1px 0 var(--k-bevel-lo), 0 0 0 1px rgba(200,16,46,.30), 0 0 18px rgba(200,16,46,.22), 0 12px 34px rgba(0,0,0,.45); } /* The title in the site's heading face, as the panel's headings are. */ #player.aes-skin--edgelit .aes-wamp-name, #player.aes-skin--edgelit-light .aes-wamp-name { font-family: "Orbitron", "Rajdhani", sans-serif; letter-spacing: .18em; } /* The ATS score bar: a blue run ending in a lit white dot. */ #player.aes-skin--edgelit .pseek, #player.aes-skin--edgelit-light .pseek { border-radius: 6px; overflow: visible; } #player.aes-skin--edgelit .pseek-fill, #player.aes-skin--edgelit-light .pseek-fill { border-radius: 6px; box-shadow: 0 0 10px rgba(91,108,255,.55); } #player.aes-skin--edgelit .pseek-fill::after, #player.aes-skin--edgelit-light .pseek-fill::after { content: ""; position: absolute; right: -5px; top: 50%; width: 9px; height: 9px; border-radius: 50%; transform: translateY(-50%); background: #FFFFFF; box-shadow: 0 0 0 2px rgba(143,160,255,.55), 0 0 10px rgba(143,160,255,.9); }