/* Llama -- Winamp 2.x, the classic base skin. * * Every value below was sampled out of the original bitmaps as webamp.org * serves them (MAIN.BMP, TITLEBAR.BMP, CBUTTONS.BMP, SHUFREP.BMP, VOLUME.BMP, * POSBAR.BMP, EQMAIN.BMP), not eyeballed from a screenshot. The two facts that * decide whether this reads as Winamp or as "a dark theme with bevels": * * 1. the window is a blue-purple slate (#39395a), not grey, and * 2. every control is LIGHTER than the window (#bdced6) with a DARK glyph. * * #39395a window body #bdced6 control face * #1e1f25 title bar #efffff control highlight * #6c6c7e frame ridge #4a5a6b control shadow * #101019 frame rim #2f374d control glyph / label * #ecce7a title groove, gold #f4eac7 posbar thumb, cream * #ffffff title groove, white #c6b335 equalizer column, gold * #000000 display / playlist #d97c1f volume grill, orange * #00ff00 phosphor green #1cae12 balance grill, green * #0000c6 pledit SelectedBG #efbe66 title-bar hardware * * Sizes are 2x the original 275x116 so the type can be legible; proportions, * arrangement and colour are the original's. */ [data-skin="llama"] { /* page -- the desktop the windows sit on */ --bg-page: #07111f; --bg-page-texture: none; --bg-page-lights: none; --surface-blur: none; --surface-panel: #192a3d; --surface-raised: #35485d; --surface-sunken: #0b1522; --surface-row: #000000; --surface-row-active: #5c7098; /* ink -- the pale blue-grey Winamp letters its body text in */ --ink-primary: #eef3f7; --ink-secondary: #a7b2c0; --ink-muted: #8796a8; --ink-on-accent: #0f1a2b; --ink-on-active-row: #ffffff; --ink-on-row: #00ff00; --ink-on-row-dim: #00b000; /* accent */ --accent: #a7b2c0; --focus-shadow: 0 0 12px rgba(167, 178, 192, 0.58); --accent-secondary: #ffb347; --danger: #c50c12; --positive: #718095; /* readout -- flat black behind phosphor, with the analyser's dot grid */ --readout-bg: #000000; --readout-ink: #7cff6b; --readout-ink-dim: #49b943; --readout-glow: 0 0 6px rgba(0, 255, 0, 0.30); --readout-texture: repeating-linear-gradient(0deg, rgba(96, 104, 200, 0.16) 0 1px, rgba(0, 0, 0, 0) 1px 4px), repeating-linear-gradient(90deg, rgba(96, 104, 200, 0.16) 0 1px, rgba(0, 0, 0, 0) 1px 4px); /* chrome -- near-black bar, white title, olive-gold hardware, and the groove */ --chrome-bg: #152438; --chrome-shadow: inset 0 1px 0 #75859a, inset 0 2px 0 #29394c, inset 0 -1px 0 #050b12, inset 0 -2px 0 #2f4052; --chrome-ink: #ffffff; --chrome-height: 28px; --chrome-font: Silkscreen, monospace; --chrome-size: 13px; --chrome-tracking: 0.16em; --chrome-transform: uppercase; --chrome-text-align: center; --chrome-buttons: flex; --chrome-button-size: 18px; --chrome-button-pad: 0px; --chrome-button-bg: #6b5d43; --chrome-close-display: inline-flex; --chrome-close-bg: #efbe66; /* Two distinct gold rails separated by a steel/dark groove, sampled from the classic Winamp titlebar reference at native pixel density. */ --chrome-rail: url("/llama/controls/title-rail.png"); --chrome-rail-display: flex; --chrome-title-bg: transparent; --chrome-title-border: 0 solid transparent; --chrome-title-padding: 0; --chrome-title-radius: 0; --chrome-button-border-width: 0px; --chrome-button-minimize-image: url("/llama/controls/window-minimize.png"); --chrome-button-maximize-image: url("/llama/controls/window-maximize.png"); --chrome-button-close-image: url("/llama/controls/window-close.png"); --chrome-button-ink: transparent; /* edge -- the window is a dark rim with a light ridge just inside it */ --edge-width: 2px; --edge-radius: 2px; --edge-radius-sm: 1px; --edge-radius-pill: 0px; --edge-top: #6d7f91; --edge-left: #6d7f91; --edge-right: #050b12; --edge-bottom: #050b12; --edge-inset-top: #050b12; --edge-inset-left: #050b12; --edge-inset-right: #6d7f91; --edge-inset-bottom: #6d7f91; --edge-hairline: #4d6074; --device-radius: 42px; --edge-shadow: inset 1px 1px 0 #2b3d52, inset -1px -1px 0 #0a111b; --edge-shadow-float: inset 1px 1px 0 #2b3d52, inset -1px -1px 0 #0a111b, 2px 2px 0 #050b12; /* control -- light faces, dark glyphs, near-white highlight */ --control-height: 34px; --control-radius: 0px; --control-face: #b9c4ce; --control-texture: url("/llama/controls/button-face-tile.png"); --control-frame-image: url("/llama/controls/button-frame.png"); --control-frame-image-active: url("/llama/controls/button-frame-active.png"); --control-frame-slice: 7 7 6 7; --control-frame-width: 7px 7px 6px 7px; --control-frame-outset: 0; --control-face-active: #8996a3; --control-ghost-hover-face: rgba(167, 178, 192, 0.10); --control-border-width: 1px; --control-icon-border-width: 2px; --control-decrement-icon: url("/llama/icons/remove.svg"); --control-increment-icon: url("/llama/icons/add.svg"); --control-ink: #0f1a2b; --control-font: Silkscreen, monospace; --control-size: 11px; --control-tracking: 0.04em; --control-transform: uppercase; --control-light: #eef3f7; --control-dark: #405164; --control-shadow: none; --control-shadow-hover: none; --control-shadow-active: none; --control-icon-shadow: none; --control-icon-shadow-active: none; --control-content-shadow: 1px 1px 0 #d6dde4; --control-content-shadow-active: -1px -1px 0 #d6dde4; --control-hover-filter: brightness(1.035); --control-pad: var(--space-3); /* room actions -- the transport row already speaks in bitmap glyphs, and a Winamp window separates its parts with bevels rather than rules */ --action-lift: 0px; --action-icon-display: none; --action-divider-width: 0px; --action-divider-gap: 0px; /* meter -- the orange volume grill and the cream posbar thumb */ --meter-track: #30304c; --meter-fill: linear-gradient(180deg, #9b5d21 0 25%, #bf6d1b 25% 50%, #d97c1f 50% 75%, #db842f 75%); --meter-height: 8px; --meter-radius: 0px; --meter-thumb: #f4eac7; --meter-thumb-width: 58px; --meter-thumb-height: 20px; /* visualizer -- the analyser's green bars under a gold cap */ --viz-gradient: linear-gradient(#ffb347 0 25%, #a6db43 25% 52%, #7cff6b 52% 100%); --viz-gap: 1px; --viz-radius: 0px; --viz-floor: 0.15; /* art */ --art-radius: 0px; --art-bg: #000000; --art-ink: #00ff00; --art-texture: repeating-linear-gradient(0deg, rgba(96, 104, 200, 0.16) 0 1px, rgba(0, 0, 0, 0) 1px 4px), repeating-linear-gradient(90deg, rgba(96, 104, 200, 0.16) 0 1px, rgba(0, 0, 0, 0) 1px 4px); --art-label: transparent; --art-spindle: transparent; --art-hole: transparent; --art-spin: none; /* type -- scaled up from the original bitmap fonts for legibility */ --font-display: Silkscreen, "Courier New", monospace; --font-body: Inter, "DejaVu Sans", Arial, sans-serif; --font-readout: VT323, monospace; --font-label: Silkscreen, monospace; --label-size: 10px; --label-tracking: 0.06em; --label-transform: uppercase; --label-weight: 400; --title-tracking: 0.06em; --title-transform: uppercase; --title-weight: 700; --body-line: 1.45; /* motion */ --viz-period: 620ms; --marquee-duration: 16s; --bg-lights-drift: none; --ease: linear; /* structural overrides */ --panel-pad: var(--space-3); --row-height: 34px; --text-md: 14px; }