/* ============================================================================ base.css — skin-AGNOSTIC structure for the buddy list. This file owns layout, geometry, and behaviour (flex, positioning, sizing, animations). It paints using CSS custom properties only — it declares NO literal colours, fonts, or chrome styling of its own. A skin file (skins/.css) supplies the *primitive* variables (palette, font, desktop, titlebar, accent); base derives the *composite* variables (the Win98 bevel border triples) and the rest of the chrome from them. Because CSS custom properties resolve lazily at use-site, base can reference primitives that a later-loaded skin file defines — declaration order between the two stylesheets doesn't matter. To add a skin: copy skins/_template.css, fill in the primitives, register it in skins.js. You only touch a skin file unless the DOM shape itself changes. ============================================================================ */ :root { /* Composite chrome derived from skin primitives. A flat-bordered skin can override these three directly with a single colour and ignore --hi/--sh. */ --bevel-out: var(--hi) var(--sh-dk) var(--sh-dk) var(--hi); /* raised */ --bevel-in: var(--sh) var(--hi) var(--hi) var(--sh); /* sunken */ --bevel-press: var(--sh-dk) var(--hi) var(--hi) var(--sh-dk); /* pressed */ /* Geometry knobs a skin may override (default = sharp Win98 corners). */ --win-radius: 0px; --tb-radius: 0px; --btn-radius: 0px; --input-radius: 0px; --list-radius: 0px; --av-radius: 3px; --win-border-w: 2px; } * { box-sizing: border-box; } /* `display:flex` on #app/.imwin would otherwise beat the UA [hidden] rule. */ [hidden] { display: none !important; } /* small inline spinner for loading states */ .spin { display: inline-block; width: 11px; height: 11px; vertical-align: -1px; border: 2px solid rgba(0,0,0,.18); border-top-color: var(--accent); border-radius: 50%; animation: spin .7s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } /* The "desktop" lives ONLY on , anchored to the viewport, so it's a single backdrop. (The windows are position:fixed, so would otherwise collapse and paint its own mismatched box on top.) */ html { min-height: 100%; background: var(--desktop); background-attachment: fixed; } body { margin: 0; min-height: 100vh; font-family: var(--font); font-size: var(--font-size); color: var(--fg); } /* ---- window chrome ---- */ .window { /* floating + draggable, like the IM windows. JS sets px left/top (clearing the transform) on first show, so the default below is just the pre-JS centered position. */ position: fixed; top: 24px; left: 50%; transform: translateX(-50%); z-index: 10; width: 320px; max-width: 100%; background: var(--win-bg); border: var(--win-border-w) solid; border-color: var(--bevel-out); border-radius: var(--win-radius); box-shadow: var(--win-shadow); padding: 2px; } .titlebar { display: flex; align-items: center; justify-content: space-between; background: var(--titlebar-bg); color: var(--titlebar-fg); font-weight: var(--titlebar-weight, bold); padding: 3px 4px 3px 6px; text-shadow: var(--titlebar-shadow); border-radius: var(--tb-radius) var(--tb-radius) 0 0; user-select: none; cursor: move; } .tb-title { font-size: 12px; } .tb-btns { display: flex; gap: 2px; } .tb-btns i { width: 16px; height: 14px; display: grid; place-items: center; background: var(--tbbtn-bg); border: 1px solid; border-color: var(--tbbtn-border, var(--bevel-out)); border-radius: var(--tbbtn-radius, 0); color: var(--tbbtn-fg); font-style: normal; font-size: 9px; line-height: 1; } #app-close { cursor: pointer; } #app-close:active { border-color: var(--bevel-press); } /* ---- sign-on screen ---- */ .signon { width: 300px; } .signon-body { padding: 18px 18px 14px; text-align: center; } .runner-big { width: 64px; margin: 0 auto 4px; } .runner-big svg { width: 64px; height: 64px; filter: drop-shadow(2px 2px 0 rgba(0,0,0,.25)); } .signon h1 { margin: 2px 0 6px; font-size: 22px; letter-spacing: .5px; color: var(--heading-fg, inherit); } .tagline { margin: 0 0 16px; color: var(--muted-fg); font-size: 12px; line-height: 1.4; } .fld { display: block; text-align: left; font-size: 11px; color: var(--label-fg); margin-bottom: 12px; font-weight: bold; } .ta-wrap { position: relative; margin-top: 3px; } input[type=text] { width: 100%; padding: 5px 6px; font: inherit; font-weight: normal; border: 2px solid; border-color: var(--bevel-in); border-radius: var(--input-radius); background: var(--input-bg); color: var(--input-fg); } input:focus { outline: 1px dotted var(--focus, var(--accent)); outline-offset: -3px; } .btn { font: inherit; padding: 6px 18px; cursor: pointer; background: var(--btn-bg); color: var(--btn-fg); border: 2px solid; border-color: var(--bevel-out); border-radius: var(--btn-radius); } .btn:active { border-color: var(--bevel-press); } .btn:disabled { color: var(--sh); cursor: default; } .btn.primary { font-weight: bold; min-width: 110px; } .btn.link { border: none; background: none; color: var(--link); text-decoration: underline; padding: 6px; display: block; margin: 8px auto 0; } .snd-check { display: flex; align-items: center; justify-content: center; gap: 6px; margin: 10px 0 0; font-size: 12px; color: var(--muted-fg); cursor: pointer; user-select: none; } .snd-check input { cursor: pointer; margin: 0; } .status { min-height: 16px; margin: 10px 0 4px; font-size: 11px; color: var(--warn-fg); } .fineprint { font-size: 10px; color: var(--faint-fg); line-height: 1.4; margin: 8px 0 0; } /* skin switcher — a dock of client-logo tiles pinned bottom-center, always on top so it stays reachable over any window. The tray tint reads on both light (MSN/Adium) and dark (Trillian) desktops. */ .skin-bar { position: fixed; left: 50%; transform: translateX(-50%); bottom: 34px; z-index: 4000; display: flex; gap: 8px; align-items: center; padding: 6px 9px; border-radius: 13px; background: rgba(0,0,0,.30); box-shadow: 0 3px 16px rgba(0,0,0,.32), inset 0 1px 0 rgba(255,255,255,.12); -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px); } .skin-btn { width: 34px; height: 34px; padding: 0; border: none; cursor: pointer; background: none; border-radius: 9px; line-height: 0; opacity: .6; transition: opacity .12s ease, transform .12s ease; } .skin-btn svg { width: 34px; height: 34px; display: block; } .skin-btn:hover, .skin-btn:focus-visible { opacity: 1; transform: translateY(-2px); outline: none; } .skin-btn.active { opacity: 1; box-shadow: 0 0 0 2px #fff, 0 2px 9px rgba(0,0,0,.4); } /* ---- buddy list app ---- */ #app { display: flex; flex-direction: column; width: 300px; height: 460px; min-width: 240px; min-height: 220px; max-width: 96vw; max-height: 92vh; resize: both; overflow: hidden; } .menubar { display: flex; align-items: center; gap: 6px; padding: 4px 6px; border-bottom: 1px solid var(--divider); background: var(--win-bg-lt); flex: none; } .menubar .me { font-size: 12px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--fg); } .menubar .spacer { flex: 1; } /* small connection indicator dot (detail lives in the About window) */ .conn-dot { width: 9px; height: 9px; border-radius: 50%; flex: none; border: 1px solid rgba(0,0,0,.35); } .conn-dot.connecting { background: var(--dot-connecting); } .conn-dot.live { background: var(--dot-on); } .conn-dot.down { background: var(--dot-down); } .iconbtn { border: 2px solid; border-color: var(--bevel-out); background: var(--btn-bg); color: var(--btn-fg); cursor: pointer; font-weight: bold; font-size: 12px; line-height: 1; width: 20px; height: 20px; flex: none; border-radius: var(--btn-radius); } .iconbtn:active { border-color: var(--bevel-press); } /* sound toggle — clearly readable on/off, not a faint icon */ .sound-toggle { font: inherit; font-size: 11px; font-weight: bold; cursor: pointer; flex: none; padding: 2px 8px; border: 2px solid; border-color: var(--bevel-out); border-radius: var(--btn-radius); } .sound-toggle.on { background: var(--snd-on-bg); color: var(--snd-on-fg); } .sound-toggle.off { background: var(--snd-off-bg); color: var(--snd-off-fg); } .sound-toggle:active { border-color: var(--bevel-press); } .toolbar { display: flex; align-items: center; justify-content: space-between; padding: 4px 8px; font-size: 11px; color: var(--muted-fg); border-bottom: 1px solid var(--divider); } .toolbar select { font: inherit; font-size: 11px; } .clock { font-variant-numeric: tabular-nums; color: var(--faint-fg); } .note { margin: 0; padding: 4px 8px; font-size: 10px; background: var(--note-bg); color: var(--note-fg); border-bottom: 1px solid var(--divider); } /* ---- the list ---- */ .list { flex: 1 1 auto; min-height: 60px; overflow-y: auto; background: var(--list-bg); border: 2px solid; border-color: var(--bevel-in); border-radius: var(--list-radius); margin: 2px; } .group-hd { background: var(--group-bg); color: var(--group-fg); font-weight: bold; font-size: 12px; padding: 3px 6px; cursor: pointer; user-select: none; border-bottom: 1px solid var(--group-border); position: sticky; top: 0; } .group-hd .tw { display: inline-block; width: 12px; color: var(--group-tw); font-size: 9px; } .buddies { list-style: none; margin: 0; padding: 2px 0; } .buddy { display: flex; align-items: center; gap: 6px; padding: 3px 8px 3px 10px; cursor: pointer; } .buddy:hover { background: var(--row-hover); } .runner { width: 20px; height: 20px; flex: none; } .runner .body { stroke: var(--runner-body); } .runner .body circle { fill: var(--runner-body); } .runner .ink { stroke: var(--runner-ink); } .runner .ink circle { fill: var(--runner-ink); } .buddy.offline .runner .body { stroke: var(--runner-off-body); } .buddy.offline .runner .body circle { fill: var(--runner-off-body); } .buddy.offline .runner .ink { stroke: var(--runner-off-ink); } .buddy.offline .runner .ink circle { fill: var(--runner-off-ink); } .buddy.idle .runner { opacity: .7; } .bd-av { width: 22px; height: 22px; border-radius: var(--av-radius); object-fit: cover; flex: none; border: 1px solid var(--av-border); } .bd-av.blank { display: grid; place-items: center; background: var(--av-blank-bg); color: var(--av-blank-fg); font-size: 11px; font-weight: bold; } .bd-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.15; } .bd-name { font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .bd-sub { font-size: 10px; color: var(--sub-fg); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .buddy.online .bd-name { color: var(--name-online); font-weight: bold; } .buddy.idle .bd-name { color: var(--name-idle); } .buddy.offline .bd-name { color: var(--name-offline); } .buddy.offline .bd-av { filter: grayscale(1); opacity: .6; } .buddy.idle .bd-av { filter: grayscale(.4); } .buddy.flash { animation: pop 2.2s ease-out; } @keyframes pop { 0% { background: var(--flash-from); } 15% { background: var(--flash-mid); } 100% { background: transparent; } } /* ---- typeahead dropdown (shared shape with sort-friends) ---- */ .ta-list { position: absolute; z-index: 20; left: 0; right: 0; top: 100%; margin: 0; padding: 2px; list-style: none; background: var(--list-bg); border: 2px solid; border-color: var(--bevel-in); max-height: 220px; overflow-y: auto; box-shadow: 2px 2px 6px rgba(0,0,0,.3); } .ta-item { display: flex; align-items: center; gap: 7px; padding: 4px 6px; cursor: pointer; } .ta-item.active, .ta-item:hover { background: var(--row-hover); } .ta-av { width: 22px; height: 22px; border-radius: var(--av-radius); object-fit: cover; flex: none; } .ta-av.ta-blank { display: grid; place-items: center; background: var(--av-blank-bg); color: var(--av-blank-fg); font-size: 11px; font-weight: bold; } .ta-text { display: flex; flex-direction: column; line-height: 1.1; min-width: 0; } .ta-name { font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--fg); } .ta-handle { font-size: 10px; color: var(--faint-fg); } /* ---- IM / chat windows ---- */ .imwin { position: fixed; width: 300px; height: 340px; min-width: 220px; min-height: 200px; max-width: 96vw; max-height: 92vh; resize: both; overflow: hidden; background: var(--win-bg); border: var(--win-border-w) solid; border-color: var(--bevel-out); border-radius: var(--win-radius); box-shadow: var(--win-shadow); padding: 2px; display: flex; flex-direction: column; } /* the About window is content-sized, not a resizable scroller */ .imwin.about { height: auto; resize: none; } .imwin.min { height: auto !important; resize: none; } .imwin.min .im-sub, .imwin.min .im-log, .imwin.min .im-composer { display: none; } .im-tb { cursor: move; flex: none; } .im-tb .im-x, .im-tb .im-min { cursor: pointer; } .im-sub { font-size: 11px; color: var(--muted-fg); padding: 3px 6px; flex: none; background: var(--win-bg-lt); border-bottom: 1px solid var(--divider); } .im-sub a { color: var(--link); } .im-log { flex: 1 1 auto; min-height: 60px; overflow-y: auto; background: var(--list-bg); color: var(--fg); border: 2px solid; border-color: var(--bevel-in); margin: 2px; padding: 4px 6px; font-size: 12px; line-height: 1.35; } .im-loading, .im-sys { color: var(--faint-fg); font-size: 11px; text-align: center; padding: 6px 0; } .im-sys { font-style: italic; } .im-deep { position: sticky; top: 0; z-index: 1; font-size: 10px; text-align: center; color: var(--note-fg); background: var(--note-bg); border-bottom: 1px solid var(--note-border); padding: 2px 0; } .im-line { margin: 0 0 7px; } .im-name { color: var(--im-them); font-weight: bold; } /* "their" colour */ .im-line.mine .im-name { color: var(--im-mine); } /* your messages */ .im-time { color: var(--faint-fg); font-size: 10px; margin-left: 4px; } .im-body { margin-top: 1px; } .im-body .verb { color: var(--muted-fg); font-size: 11px; } .im-body .q { display: block; margin: 2px 0 0; padding: 3px 7px; border-left: 3px solid var(--quote-bar); background: var(--quote-bg); color: var(--quote-fg); border-radius: 2px; white-space: pre-wrap; word-break: break-word; } .im-body a.q-link { text-decoration: none; cursor: pointer; } .im-body a.q-link:hover { background: var(--quote-bg-hover); border-left-color: var(--quote-bar-hover); } .im-body .q-who { color: var(--im-mine); font-weight: bold; } .im-new .q, .im-new .verb { animation: imflash 1.8s ease-out; } @keyframes imflash { 0% { background: var(--flash-from); } 100% { background: inherit; } } .im-composer { display: flex; gap: 3px; padding: 3px; flex: none; } .im-input { flex: 1; padding: 4px 6px; font: inherit; font-size: 12px; border: 2px solid; border-color: var(--bevel-in); background: var(--input-bg); color: var(--input-fg); border-radius: var(--input-radius); } .im-send { padding: 4px 12px; font-weight: bold; } @media (max-width: 640px) { .imwin { left: 4px !important; right: 4px; width: auto; } } /* ---- About / status window ---- */ .about { width: 300px; } .about-body { padding: 10px 12px 12px; font-size: 12px; line-height: 1.45; color: var(--fg); overflow-y: auto; } .about-body p { margin: 0 0 10px; } .about-body .ab-h { margin: 12px 0 5px; font-weight: bold; font-size: 11px; text-transform: uppercase; letter-spacing: .5px; color: var(--muted-fg); border-bottom: 1px solid var(--divider); padding-bottom: 2px; } .ab-legend { list-style: none; margin: 0 0 8px; padding: 0; } .ab-legend li { display: flex; align-items: baseline; gap: 7px; margin: 0 0 4px; } .ab-dot { width: 9px; height: 9px; border-radius: 50%; flex: none; position: relative; top: 1px; border: 1px solid rgba(0,0,0,.35); } .ab-dot.on { background: var(--dot-on); } .ab-dot.idle { background: var(--dot-idle); } .ab-dot.off { background: var(--dot-off); } .ab-note { font-size: 11px; color: var(--muted-fg); } .ab-status { background: var(--input-bg); border: 2px solid; border-color: var(--bevel-in); padding: 6px 8px; font-size: 11px; line-height: 1.6; } .ab-conn { font-weight: bold; } .ab-conn.connecting { color: var(--conn-connecting); } .ab-conn.live { color: var(--conn-live); } .ab-conn.down { color: var(--conn-down); } .ab-dim { color: var(--faint-fg); } .ab-foot { margin-top: 10px; font-size: 10px; color: var(--faint-fg); } .ab-foot a { color: var(--link); } /* ---- footer ---- */ /* bottom-right so the centered skin dock owns the bottom-center of the page */ .credit { position: fixed; right: 12px; bottom: 12px; margin: 0; font-size: 11px; color: var(--credit-fg); text-align: right; } .credit a { color: var(--credit-link); }