@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,500;12..96,600;12..96,700;12..96,800&family=Hanken+Grotesk:wght@400;500;600;700&display=swap');
/* ═══════════════════════════════════════════════════════════════════════
CHORD · HALO — the app's MAIN theme
───────────────────────────────────────────────────────────────────────
Floating glass-panel look layered over style.css (which stays as the
base layout/token layer). Rules are scoped under `body.skin-halo`; the
class is set statically on in index.html — there is no toggle.
Builds glass from --dark-bg + --brand (always solid colors) so all 11
themes work — never color-mix(--sidebar-bg) (gradient in some themes).
═══════════════════════════════════════════════════════════════════════ */
body.skin-halo {
--halo-glass: color-mix(in srgb, var(--dark-bg) 70%, transparent);
--halo-glass-2: color-mix(in srgb, var(--dark-bg) 80%, transparent);
--halo-chat: color-mix(in srgb, var(--dark-bg) 74%, transparent);
--halo-bd: color-mix(in srgb, #fff 11%, transparent);
--halo-bd-soft: color-mix(in srgb, #fff 7%, transparent);
--halo-blur: blur(22px) saturate(140%);
--halo-hi: inset 0 1px 0 color-mix(in srgb, #fff 9%, transparent);
--halo-r-lg: 22px;
--halo-r-md: 16px;
--halo-r-sm: 12px;
--halo-glow: 0 8px 30px color-mix(in srgb, var(--brand) 22%, transparent);
font-family: 'Hanken Grotesk', 'Open Sans', system-ui, sans-serif;
/* Ambient backdrop — deep base + two soft brand auras */
background:
radial-gradient(1150px 640px at 6% -10%, color-mix(in srgb, var(--brand) 18%, transparent), transparent 60%),
radial-gradient(1050px 600px at 108% 112%, color-mix(in srgb, var(--brand) 13%, transparent), transparent 55%),
var(--dark-bg) !important;
}
/* Headings / identity → Bricolage; numerals lined */
body.skin-halo :is(#server-name, #chat-channel-name, .msg-author,
.member-section-title, .channel-welcome h2, .friends-section-title,
.modal h2, .modal h3, .ucp-name) {
font-family: 'Bricolage Grotesque', 'Hanken Grotesk', sans-serif;
letter-spacing: -0.01em;
}
/* ── Frame: padding + gaps turn stacked regions into floating panels ───── */
body.skin-halo #titlebar { background: transparent; }
body.skin-halo #app {
background: transparent;
/* preserve the app's 32px fixed-titlebar clearance, then add a 14px frame */
padding: 46px 14px 14px;
gap: 12px;
}
@media (max-width: 900px) {
/* mobile uses a slide-in drawer; defer to the app's own layout */
body.skin-halo #app { padding: 0; }
/* keep the drawer at the classic width (no rail↔sidebar gap budget on mobile) */
body.skin-halo #left-col { width: calc(var(--rail-w, 72px) + var(--sidebar-w, 240px)); }
}
/* #left-col's classic width is just rail+sidebar (no gap budget); the Halo
rail↔sidebar gap (#left-top gap:12) overflows it and eats the sidebar↔chat
gap. Add the 12px so the column fits its content → consistent 12px gaps,
and the bottom dock spans the full sidebar width. (auto-tracks --rail-w /
--sidebar-w for nav-expanded + sidebar-collapsed states.) */
body.skin-halo #left-col { width: calc(var(--rail-w, 72px) + var(--sidebar-w, 240px) + 12px); gap: 12px; overflow: visible; }
body.skin-halo #left-top { gap: 12px; overflow: visible; background: transparent; }
/* Chat header FUSES with the chat body into one card (gap:0); the member list
floats as a separate full-height card → #main-col is the positioning context. */
body.skin-halo #main-col { gap: 0; overflow: visible; position: relative; }
/* gap:0 — the member list is absolute (out of flow) and a 0-width #channel-info
flex sibling + a 12px gap was shrinking #chat 12px narrower than the header
(header looked like it overflowed right). With gap:0 the chat fills to the
header's right edge; the member gutter is reserved via margin-right below. */
body.skin-halo #main-row { gap: 0; overflow: visible; min-height: 0; }
/* if the channel-info / media panel opens (replaces members), give it its gap */
body.skin-halo #channel-info:not(.hidden) { margin-left: 12px; }
/* Shared glass panel recipe (#chat-header handled separately — it fuses w/ #chat) */
body.skin-halo :is(#server-rail, #sidebar, #chat, #member-list) {
border: 1px solid var(--halo-bd);
-webkit-backdrop-filter: var(--halo-blur);
backdrop-filter: var(--halo-blur);
box-shadow: var(--ds-shadow-2), var(--halo-hi);
}
/* ── Server rail → floating pill ───────────────────────────────────────── */
body.skin-halo #server-rail {
background: var(--halo-glass);
border-radius: var(--halo-r-lg);
padding: 12px 0 10px;
gap: 8px;
overflow-y: auto;
overflow-x: hidden;
}
body.skin-halo .server-icon {
box-shadow: inset 0 0 0 1px var(--halo-bd-soft);
transition: border-radius .3s var(--ease-menu-open),
transform .18s var(--ease-out),
box-shadow .2s var(--ease), background .18s var(--ease);
}
body.skin-halo .server-icon:hover {
transform: translateY(-1px);
border-radius: 16px;
box-shadow: inset 0 0 0 1px var(--halo-bd), 0 6px 16px rgba(0,0,0,.35);
}
body.skin-halo .server-icon.active {
border-radius: 16px;
box-shadow: 0 0 0 2px var(--brand), var(--halo-glow);
}
body.skin-halo .server-separator { background: var(--halo-bd); }
/* ── Sidebar card ──────────────────────────────────────────────────────── */
body.skin-halo #sidebar {
background: var(--halo-glass);
border-radius: var(--halo-r-lg);
border-right: 1px solid var(--halo-bd);
overflow: hidden;
}
body.skin-halo #sidebar-header {
background-color: transparent; /* was `background:` (shorthand) which wiped the banner image's size/position → black box */
border-bottom: 1px solid var(--halo-bd-soft);
font-family: 'Bricolage Grotesque', sans-serif;
font-weight: 700;
}
body.skin-halo #sidebar-header:hover { background-color: var(--hover-bg); }
/* Banner servers (boost lvl 2+): keep the inline banner image, restore the
cover/center fill the shorthand had reset, drop the divider line. The classic
::after legibility gradient + white text still apply (skin doesn't touch them). */
body.skin-halo #sidebar-header.has-banner {
background-color: transparent;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
border-bottom: none;
}
body.skin-halo #sidebar-header.has-banner:hover { background-color: transparent; }
/* Category labels + channel items */
body.skin-halo .category-header {
letter-spacing: .06em;
font-weight: 700;
opacity: .72;
}
body.skin-halo .channel-item {
border-radius: var(--halo-r-sm);
margin: 2px 8px;
transition: background .15s var(--ease), color .15s var(--ease),
padding-left .18s var(--ease-out);
}
body.skin-halo .channel-item:hover {
background: color-mix(in srgb, #fff 5%, transparent);
padding-left: 14px;
}
body.skin-halo .channel-item.active {
background: color-mix(in srgb, var(--brand) 16%, transparent);
box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--brand) 26%, transparent);
}
body.skin-halo .channel-item.active::before {
content: '';
position: absolute;
left: -8px; top: 50%; transform: translateY(-50%);
width: 4px; height: 18px; border-radius: 0 4px 4px 0;
background: var(--ds-grad);
}
/* Halo draws its own brand bar via ::before above; suppress the classic
(unscoped) .channel-item.active::after gradient bar so only ONE shows. */
body.skin-halo .channel-item.active::after { content: none; display: none; }
/* Boost gauge host glow (if present) */
body.skin-halo #boost-gauge-host:not(:empty) {
margin: 4px 8px 2px;
}
/* ── Dock: floating user + voice bars under the sidebar ────────────────── */
body.skin-halo #left-dock {
background: transparent;
border-top: none; /* kill the classic full-width seam line (the "old style" giveaway) */
/* indent to the sidebar's left edge; flush right so the pill = sidebar width */
padding: 0 0 0 calc(var(--rail-w, 72px) + 12px);
gap: 8px;
}
body.skin-halo #user-panel {
background: var(--halo-glass-2);
border: 1px solid var(--halo-bd);
-webkit-backdrop-filter: var(--halo-blur);
backdrop-filter: var(--halo-blur);
border-radius: var(--halo-r-md);
box-shadow: var(--ds-shadow-1), var(--halo-hi);
height: 56px;
}
body.skin-halo #voice-bar {
margin: 0 !important;
background: color-mix(in srgb, var(--green) 16%, var(--halo-glass-2));
border: 1px solid color-mix(in srgb, var(--green) 34%, transparent);
border-radius: var(--halo-r-md);
box-shadow: var(--ds-shadow-1), 0 0 22px color-mix(in srgb, var(--green) 16%, transparent);
}
/* ── Header → integrated TOP of the chat card (NOT a separate floating bar,
NOT spanning over the member list). Confined to the chat width below. ─── */
body.skin-halo #chat-header {
background: linear-gradient(165deg,
color-mix(in srgb, var(--dark-bg) 66%, transparent),
color-mix(in srgb, var(--dark-bg) 78%, transparent));
border: 1px solid var(--halo-bd);
border-bottom: 1px solid var(--halo-bd-soft);
border-radius: var(--halo-r-lg) var(--halo-r-lg) 0 0;
-webkit-backdrop-filter: var(--halo-blur);
backdrop-filter: var(--halo-blur);
height: 55px;
padding: 0 18px;
z-index: 1;
}
body.skin-halo #chat-channel-name { font-weight: 800; }
body.skin-halo .chat-header-divider { background: var(--halo-bd); }
/* Header action buttons → 32×32 soft squares, glass hover (target spec) */
body.skin-halo .chat-header-tools { gap: 3px; }
body.skin-halo .header-tool-btn {
width: 32px; height: 32px;
border-radius: 9px;
color: var(--muted);
transition: background .14s var(--ease), color .14s var(--ease);
}
body.skin-halo .header-tool-btn:hover {
background: color-mix(in srgb, #fff 7%, transparent);
color: var(--header);
}
body.skin-halo .header-tool-btn.active {
background: color-mix(in srgb, var(--brand) 16%, transparent);
color: var(--brand);
}
body.skin-halo .header-tool-btn .ui-ico { width: 18px; height: 18px; }
/* Search → compact "🔍 Ara" glass pill that expands on focus (target spec).
Collapsed: search icon (::before) + "Ara" label (::after); the real input's
text/placeholder are transparent so the long dynamic placeholder never shows.
Focus: pill widens, label hides, input text + placeholder return. */
body.skin-halo .header-search-bar {
position: relative;
width: 96px; height: 32px;
margin-left: 6px;
padding: 0 11px 0 32px;
border-radius: 10px;
background: color-mix(in srgb, var(--dark-bg) 52%, transparent);
border: 1px solid transparent;
-webkit-backdrop-filter: var(--halo-blur);
backdrop-filter: var(--halo-blur);
transition: width .2s var(--ease), border-color .16s var(--ease), box-shadow .16s var(--ease);
}
body.skin-halo .header-search-bar::before {
content: ''; position: absolute; left: 10px; top: 50%; transform: translateY(-50%);
width: 15px; height: 15px; opacity: .6; pointer-events: none;
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='15' viewBox='0 0 24 24' fill='none' stroke='%23a0a0a8' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M21 21l-4-4'/%3E%3C/svg%3E") center/contain no-repeat;
}
body.skin-halo .header-search-bar::after {
content: 'Ara'; position: absolute; left: 32px; top: 50%; transform: translateY(-50%);
font-size: 13px; color: var(--muted); pointer-events: none;
}
body.skin-halo .header-search-bar input { color: transparent; }
body.skin-halo .header-search-bar input::placeholder { color: transparent; }
body.skin-halo .header-search-bar:hover { border-color: var(--halo-bd); }
body.skin-halo .header-search-bar:focus-within {
width: 300px;
border-color: color-mix(in srgb, var(--brand) 55%, transparent);
box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 22%, transparent);
}
body.skin-halo .header-search-bar:focus-within::after { display: none; }
body.skin-halo .header-search-bar:focus-within input { color: var(--text); }
body.skin-halo .header-search-bar:focus-within input::placeholder { color: var(--muted); }
/* ── Chat card body → fused with the header; 165° glass gradient (target
--chatSurface) so it reads as one continuous card, not the flat old box ── */
body.skin-halo #chat {
background: linear-gradient(165deg,
color-mix(in srgb, var(--dark-bg) 64%, transparent) 0%,
color-mix(in srgb, var(--dark-bg) 78%, transparent) 100%);
border-top: none;
border-radius: 0 0 var(--halo-r-lg) var(--halo-r-lg);
overflow: hidden;
}
body.skin-halo #messages { padding-top: 8px; }
body.skin-halo .channel-welcome { padding: 28px 18px 12px; }
/* Message rows → hover lift with rounded highlight */
body.skin-halo .msg-group {
border-radius: var(--halo-r-sm);
margin: 1px 10px;
padding-left: 12px; padding-right: 12px;
transition: background .14s var(--ease);
}
body.skin-halo .msg-group:hover {
background: color-mix(in srgb, #fff 4%, transparent);
}
/* Mention accent: the classic square gold ::before bar (left:0) poked out of
Halo's rounded corners AND my brand inset bar doubled it. Use ONE gold inset
bar (box-shadow follows the border-radius → clean rounded corners) + gold
tint, and hide the classic ::before. No overflow:hidden (would clip the
hover toolbar that floats above the row). */
body.skin-halo .msg-group.mentioned {
background: color-mix(in srgb, #faa81a 10%, transparent);
box-shadow: inset 3px 0 0 #faa81a;
}
body.skin-halo .msg-group.mentioned::before { display: none; }
body.skin-halo .msg-author { font-weight: 700; }
body.skin-halo .msg-avatar { border-radius: 32% !important; }
body.skin-halo .msg-toolbar {
background: var(--halo-glass-2);
border: 1px solid var(--halo-bd);
-webkit-backdrop-filter: var(--halo-blur);
backdrop-filter: var(--halo-blur);
border-radius: var(--halo-r-sm);
box-shadow: var(--ds-shadow-3), var(--halo-hi);
}
body.skin-halo .msg-img { border-radius: var(--halo-r-sm); }
body.skin-halo .msg-reply-quote { border-radius: 8px; }
/* ── Composer → single glass pill with focus glow (handoff spec) ────────── */
/* #input-area carries a classic rgba(255,255,255,.05) bg + shadow + border —
the unwanted "layer behind the chatbox". Strip it so only the .input-wrapper
pill sits on the chat surface. */
body.skin-halo #input-area { padding: 0 16px 16px; margin: 0; background: transparent; box-shadow: none; border: none; }
body.skin-halo .input-wrapper {
background: color-mix(in srgb, var(--dark-bg) 52%, transparent);
border: 1px solid var(--halo-bd);
-webkit-backdrop-filter: var(--halo-blur);
backdrop-filter: var(--halo-blur);
border-radius: 17px;
box-shadow: var(--raise, 0 6px 18px rgba(0,0,0,.3)), var(--halo-hi);
transition: border-color .18s var(--ease), box-shadow .18s var(--ease);
}
body.skin-halo .input-wrapper:focus-within {
border-color: color-mix(in srgb, var(--brand) 55%, transparent);
box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 22%, transparent), var(--halo-hi);
}
/* file-add button → 36×36 soft square; turns brand on hover */
body.skin-halo #attach-btn {
border-radius: 11px;
/* .input-wrapper align-items:flex-end olduğundan 36px'lik "+" satırın altına
yapışıyordu; ilk satıra hizala + 4px üst boşlukla ((44-36)/2) boş composer'da
dikeyde optik ortala, çok satırlıda ilk satırda sabit kalsın. */
align-self: flex-start;
margin-top: 4px;
transition: background .15s var(--ease), color .15s var(--ease);
}
body.skin-halo #attach-btn:hover {
background: color-mix(in srgb, var(--brand) 16%, transparent);
color: var(--brand);
}
body.skin-halo .send-btn {
background: var(--ds-grad);
color: #fff;
border-radius: 10px;
}
/* ── User dock avatar → 34px squircle + 12px status dot w/ ring (spec) ───── */
body.skin-halo #user-panel .up-av-wrap { width: 34px; height: 34px; }
body.skin-halo #user-panel .up-av-wrap img,
body.skin-halo #user-panel .up-av-wrap canvas,
body.skin-halo #user-panel .up-av-wrap .avatar,
body.skin-halo #user-panel .up-av {
width: 34px !important; height: 34px !important;
border-radius: 30% !important;
}
body.skin-halo #user-panel .up-av-wrap .status-dot {
width: 12px; height: 12px;
border: 2.5px solid var(--input-bg, var(--sidebar-bg));
right: -2px; bottom: -2px;
}
/* ── Member list → separate full-height card, top-aligned with the chat
header (floats over the reserved right gutter, NOT under the header). ─── */
body.skin-halo #member-list {
background: var(--halo-glass);
border-radius: var(--halo-r-lg);
padding: 10px;
}
@media (min-width: 901px) {
/* Desktop-only: on mobile the member list is an m-sheet drawer — these rules
were squeezing the chat by a phantom 252px gutter there. */
body.skin-halo #member-list:not(.hidden) {
position: absolute;
top: 0; right: 0; bottom: 0;
width: var(--member-w, 240px);
min-width: var(--member-w, 240px);
z-index: 2;
}
/* Reserve the right gutter for the floating member card — only when shown
(:has collapses it the moment the member list is toggled off). */
body.skin-halo #main-col:has(#member-list:not(.hidden)) #chat-header,
body.skin-halo #main-col:has(#member-list:not(.hidden)) #main-row {
margin-right: calc(var(--member-w, 240px) + 12px);
}
}
body.skin-halo .member-section-title {
letter-spacing: .05em;
font-weight: 700;
opacity: .74;
}
body.skin-halo .member-item {
border-radius: var(--halo-r-sm);
transition: background .14s var(--ease), transform .12s var(--ease-out);
}
body.skin-halo .member-item:hover {
background: color-mix(in srgb, #fff 5%, transparent);
}
/* ── Floating surfaces: modals / tooltip / pickers / menus ─────────────── */
body.skin-halo .modal {
background: var(--halo-glass-2);
border: 1px solid var(--halo-bd);
-webkit-backdrop-filter: var(--halo-blur);
backdrop-filter: var(--halo-blur);
border-radius: var(--halo-r-lg);
box-shadow: var(--ds-shadow-3), var(--halo-hi);
}
body.skin-halo .modal-overlay {
background: color-mix(in srgb, var(--dark-bg) 60%, transparent);
-webkit-backdrop-filter: blur(6px);
backdrop-filter: blur(6px);
}
body.skin-halo :is(.tooltip, .chord-picker, .emoji-picker, .server-dropdown) {
background: var(--halo-glass-2);
border: 1px solid var(--halo-bd);
-webkit-backdrop-filter: var(--halo-blur);
backdrop-filter: var(--halo-blur);
border-radius: var(--halo-r-md);
box-shadow: var(--ds-shadow-3), var(--halo-hi);
}
/* ── Slim translucent scrollbars ───────────────────────────────────────── */
body.skin-halo ::-webkit-scrollbar { width: 9px; height: 9px; }
body.skin-halo ::-webkit-scrollbar-thumb {
background: color-mix(in srgb, #fff 12%, transparent);
border-radius: 999px;
border: 2px solid transparent;
background-clip: padding-box;
}
body.skin-halo ::-webkit-scrollbar-thumb:hover {
background: color-mix(in srgb, #fff 20%, transparent);
background-clip: padding-box;
}
body.skin-halo ::-webkit-scrollbar-track { background: transparent; }
/* ═══════════════════════════════════════════════════════════════════════
HALO COVERAGE EXTENSION — rail squircles + settings + store + every menu
The first pass skinned the main chat shell; this carries Halo into the
surfaces it missed so the look is consistent everywhere the user goes.
All still scoped under body.skin-halo → classic stays untouched.
═══════════════════════════════════════════════════════════════════════ */
/* ── Server rail icons → squircles. The app sets `border-radius:50%` INLINE on
the avatar ![]()
, which beats the .server-icon container rules and kept the
icons circular. Override the glyph + img so they read as squircles (the
design target), while the active ring/scale from the first pass still show. */
body.skin-halo .server-icon .si-glyph { border-radius: 28%; overflow: hidden; }
body.skin-halo .server-icon .si-glyph img { border-radius: 28% !important; }
body.skin-halo .server-icon { border-radius: 16px; }
body.skin-halo .server-icon.home-icon .si-glyph,
body.skin-halo .server-icon.nav-btn .si-glyph { overflow: visible; }
/* ── Settings (full-modal) → floating glass panel ──────────────────────── */
body.skin-halo .full-modal {
background: color-mix(in srgb, var(--dark-bg) 60%, transparent);
-webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
body.skin-halo .fm-panel {
background: var(--halo-glass-2);
border: 1px solid var(--halo-bd);
-webkit-backdrop-filter: var(--halo-blur); backdrop-filter: var(--halo-blur);
border-radius: var(--halo-r-lg);
box-shadow: var(--ds-shadow-3), var(--halo-hi);
}
body.skin-halo .fm-nav { background: transparent; }
body.skin-halo .fm-nav-item { border-radius: var(--halo-r-sm); }
body.skin-halo .fm-nav-item.active {
background: color-mix(in srgb, var(--brand) 16%, transparent);
box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--brand) 26%, transparent);
}
body.skin-halo :is(.full-modal h1, .full-modal h2, .full-modal h3) {
font-family: 'Bricolage Grotesque', 'Hanken Grotesk', sans-serif;
letter-spacing: -0.01em;
}
body.skin-halo :is(.fm-field input, .fm-field select, .fm-field textarea, .fm-field .csel-control) {
border-radius: var(--halo-r-sm);
}
/* ── Store → glass cards ───────────────────────────────────────────────── */
/* Not: açılan Sunucu Takviyeleri görünümünün Halo stili artık dosyanın
sonundaki "REV. 3" bölümünde (tasarım paketi Rev. 3 ile yenilendi). */
body.skin-halo .store-history-btn {
border-radius: var(--halo-r-md);
border: 1px solid var(--halo-bd-soft);
}
/* ── Every popover / menu / card → the same glass recipe ───────────────── */
body.skin-halo :is(.ctx-menu, .user-popup, .user-card, .user-card-v2,
.pf-edit-popup, .reaction-picker-popup, .mention-dropdown, .csel-menu,
.qs-box, .badge-tooltip) {
background: var(--halo-glass-2);
border: 1px solid var(--halo-bd);
-webkit-backdrop-filter: var(--halo-blur); backdrop-filter: var(--halo-blur);
border-radius: var(--halo-r-md);
box-shadow: var(--ds-shadow-3), var(--halo-hi);
}
body.skin-halo .ctx-item { border-radius: 8px; }
body.skin-halo .csel-opt { border-radius: 8px; }
body.skin-halo .csel-control { border-radius: var(--halo-r-sm); }
/* ── Titlebar (Halo): breadcrumb on the left + palette on the right ─────────
Hide the centered label but keep .tb-center as a flex:1 spacer so the palette
+ window controls stay pinned to the right edge. */
body.skin-halo .tb-ctx { display: none; }
body.skin-halo .tb-breadcrumb { display: flex; gap: 8px; }
body.skin-halo .tb-palette-btn{ display: inline-flex; border-radius: 9px; }
body.skin-halo .tb-bread-ico img { border-radius: 7px !important; box-shadow: inset 0 0 0 1px var(--halo-bd-soft); }
body.skin-halo .tb-bread-name { font-family: 'Bricolage Grotesque', sans-serif; letter-spacing: -.01em; }
body.skin-halo .tb-bread-channel { opacity: .68; font-weight: 600; }
body.skin-halo .tb-bread-sep { opacity: .5; }
/* ── Boost target → VERTICAL progress card (matches the Halo mockup):
row 1 ⚡ Takviye Hedefi
row 2 ▓▓▓▓▓▓░░░ (7px gradient progress bar, driven by --pct)
row 3 19 / 30 Takviye (sublabel)
Pure CSS over the existing markup (tag · count · chev) — chev hidden, the
classic absolute ::before fill is re-flowed into a real progress bar. ──── */
body.skin-halo #boost-gauge-host:not(:empty) { margin: 11px 11px 4px; }
body.skin-halo .boost-gauge { margin: 0; }
body.skin-halo .boost-pill {
display: flex;
flex-direction: column;
align-items: stretch;
gap: 8px;
width: 100%;
padding: 11px 13px;
border-radius: var(--halo-r-sm);
background: linear-gradient(135deg,
color-mix(in srgb, var(--brand) 18%, transparent),
color-mix(in srgb, var(--brand) 5%, transparent));
border: 1px solid color-mix(in srgb, var(--brand) 24%, transparent);
box-shadow: var(--halo-hi);
text-align: left;
overflow: visible;
}
body.skin-halo .boost-pill:hover {
background: linear-gradient(135deg,
color-mix(in srgb, var(--brand) 24%, transparent),
color-mix(in srgb, var(--brand) 8%, transparent));
}
body.skin-halo .boost-pill-tag {
order: 0;
font-family: 'Bricolage Grotesque', sans-serif;
font-weight: 700;
font-size: 13px;
display: flex;
align-items: center;
gap: 7px;
color: var(--header);
}
/* the progress bar: classic fill (absolute, width:--pct) → static 7px track+fill */
body.skin-halo .boost-pill::before {
content: '';
display: block;
order: 1;
position: static;
inset: auto;
width: auto;
height: 7px;
border-radius: 4px;
background:
linear-gradient(90deg, var(--brand), #b58bff, var(--brand)) left center / var(--pct, 0%) 100% no-repeat,
color-mix(in srgb, #fff 13%, transparent);
}
body.skin-halo .boost-pill-count {
order: 2;
font-size: 11px;
font-weight: 600;
opacity: .82;
position: static;
}
body.skin-halo .boost-pill-chev { display: none; }
/* ── User panel: drop the base heavy box-shadow that fought the glass ──────── */
body.skin-halo #user-panel { box-shadow: var(--ds-shadow-1), var(--halo-hi); }
/* ── Member list: a touch more breathing room for rich presence ────────────── */
body.skin-halo .member-item { margin: 1px 4px; }
/* ════════════════════════════════════════════════════════════════════════════
Halo DESKTOP layout: full-height server rail + user dock MERGED into the
sidebar card (target Halo). The rail was clipped to #left-top (above the
dock) → looked "half-finished"; the dock was a separate floating pill. Here
the rail floats full-height and the sidebar + user dock become ONE card
(dock = the card's bottom). Desktop-only — mobile keeps the slide-in drawer.
(min-width wins over the non-media #server-rail/#sidebar/#user-panel rules
above by source order, with no specificity change.)
════════════════════════════════════════════════════════════════════════════ */
@media (min-width: 901px) {
body.skin-halo #left-col { position: relative; gap: 0; }
/* rail → full-height floating column (absolute so it spans past the dock) */
body.skin-halo #server-rail {
position: absolute;
left: 0; top: 0; bottom: 0;
width: var(--rail-w, 72px);
}
/* the sidebar (still in #left-top, flex:1) clears the now-absolute rail */
body.skin-halo #left-top { padding-left: calc(var(--rail-w, 72px) + 12px); }
/* sidebar = TOP of the merged card: round only the top, drop the bottom edge */
body.skin-halo #sidebar {
border-radius: var(--halo-r-lg) var(--halo-r-lg) 0 0;
border-bottom: none;
}
/* dock is just the alignment container; the card continues on #user-panel */
body.skin-halo #left-dock {
background: transparent;
border: none;
padding: 0 0 0 calc(var(--rail-w, 72px) + 12px);
}
/* user panel = BOTTOM of the merged card (continues the sidebar glass) */
body.skin-halo #user-panel {
background: var(--halo-glass);
border: 1px solid var(--halo-bd);
border-top: 1px solid var(--halo-bd-soft); /* divider from the channel list */
border-radius: 0 0 var(--halo-r-lg) var(--halo-r-lg);
box-shadow: var(--ds-shadow-2);
-webkit-backdrop-filter: var(--halo-blur);
backdrop-filter: var(--halo-blur);
height: 54px;
}
}
/* ════════════════════════════════════════════════════════════════════════════
HALO COVERAGE COMPLETION — re-skin the 61 surfaces the audit found uncovered
(voice/call, profile cards, popovers, settings content, onboarding, store/home,
transient). All scoped under body.skin-halo; visual-only. Authored 2026-06-29.
════════════════════════════════════════════════════════════════════════════ */
/* ═══════════════════════════════════════════════════════════════
HALO · VOICE & VIDEO
Glass shell for server voice stage, DM/GDM call, incoming-call
banner, who's-in-voice hover card, and screen-share picker modal.
Visual-only overrides; classic geometry untouched.
═══════════════════════════════════════════════════════════════ */
/* ── Server voice empty hero ───────────────────────────────── */
body.skin-halo .vc-hero-glyph {
background: color-mix(in srgb, #fff 6%, transparent);
border: 1px solid var(--halo-bd-soft);
box-shadow: var(--halo-hi);
}
body.skin-halo .vc-hero-join {
background: var(--ds-grad);
border-radius: var(--halo-r-sm);
box-shadow: var(--halo-glow);
}
/* ── Server participant cards ──────────────────────────────── */
body.skin-halo .vc-card {
background:
radial-gradient(120% 120% at 50% 0%, color-mix(in srgb, var(--brand) 12%, transparent) 0%, transparent 60%),
var(--halo-glass);
border: 1px solid var(--halo-bd);
border-radius: var(--halo-r-md);
-webkit-backdrop-filter: var(--halo-blur);
backdrop-filter: var(--halo-blur);
box-shadow: var(--ds-shadow-2), var(--halo-hi);
}
body.skin-halo .vc-card:hover {
border-color: var(--halo-bd);
box-shadow: var(--ds-shadow-3), var(--halo-hi);
}
/* speaking ring → soft green glow */
body.skin-halo .vc-card.vc-speaking {
border-color: transparent;
}
body.skin-halo .vc-card-avatar { z-index: 1; }
body.skin-halo .vc-card-footer {
background: linear-gradient(transparent, color-mix(in srgb, #000 78%, transparent));
}
body.skin-halo .vc-card-stop-watch {
background: color-mix(in srgb, #000 50%, transparent);
}
body.skin-halo .vc-card-stop-watch:hover { background: var(--red); }
/* zoomed card keeps glass frame */
body.skin-halo .vc-card.vc-card-zoomed {
border: 1px solid color-mix(in srgb, var(--brand) 40%, transparent) !important;
border-radius: var(--halo-r-lg) !important;
background: var(--halo-glass-2) !important;
box-shadow: var(--ds-shadow-3), var(--halo-glow) !important;
}
/* screen-share / stream overlay on a card */
body.skin-halo .vc-stream-overlay {
background: color-mix(in srgb, var(--dark-bg) 60%, transparent);
-webkit-backdrop-filter: var(--halo-blur);
backdrop-filter: var(--halo-blur);
border-radius: inherit;
}
body.skin-halo .vc-watch-btn {
background: var(--ds-grad) !important;
box-shadow: var(--halo-glow) !important;
}
/* ── Server voice control bar (floating glass pill) ────────── */
body.skin-halo .vc-controls {
background: var(--halo-glass);
-webkit-backdrop-filter: var(--halo-blur);
backdrop-filter: var(--halo-blur);
border: 1px solid var(--halo-bd);
border-top: 1px solid var(--halo-bd);
box-shadow: var(--ds-shadow-2), var(--halo-hi);
}
body.skin-halo .vc-ctrl-btn {
background: color-mix(in srgb, #fff 7%, transparent);
color: var(--text);
}
body.skin-halo .vc-ctrl-btn:hover {
background: color-mix(in srgb, #fff 13%, transparent);
color: var(--header);
box-shadow: var(--ds-shadow-1);
}
/* swap classic blurple active → brand */
body.skin-halo .vc-ctrl-btn.active {
background: color-mix(in srgb, var(--brand) 16%, transparent);
color: var(--brand);
box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--brand) 26%, transparent);
}
body.skin-halo .vc-ctrl-btn.muted {
background: color-mix(in srgb, var(--red) 18%, transparent);
color: var(--red);
box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--red) 40%, transparent);
}
body.skin-halo .vc-ctrl-disconnect {
background: var(--red);
box-shadow: 0 4px 14px color-mix(in srgb, var(--red) 45%, transparent);
}
body.skin-halo .vc-ctrl-disconnect:hover {
background: #c0392b;
box-shadow: 0 6px 20px color-mix(in srgb, var(--red) 60%, transparent);
}
body.skin-halo .vc-ctrl-stop-stream {
background: color-mix(in srgb, var(--red) 18%, transparent);
border-radius: var(--halo-r-sm);
}
body.skin-halo .vc-ctrl-stop-stream:hover { background: var(--red); color: #fff; }
/* view-action buttons */
body.skin-halo .vc-view-btn {
background: color-mix(in srgb, #fff 6%, transparent);
border-radius: var(--halo-r-sm);
color: var(--text);
}
body.skin-halo .vc-view-btn:hover {
background: color-mix(in srgb, #fff 12%, transparent);
color: var(--header);
}
body.skin-halo .vc-view-btn.primary {
background: var(--ds-grad);
color: #fff;
box-shadow: var(--halo-glow);
}
body.skin-halo .vc-view-btn.primary:hover { filter: brightness(1.06); }
/* ═══════════════════════════════════════════════════════════════
DM / GDM CALL
═══════════════════════════════════════════════════════════════ */
body.skin-halo #dm-call-panel {
background: var(--halo-glass);
-webkit-backdrop-filter: var(--halo-blur);
backdrop-filter: var(--halo-blur);
border-bottom: 1px solid var(--halo-bd);
}
body.skin-halo .call-grid { background: transparent; }
/* call cards */
body.skin-halo .call-card,
body.skin-halo .call-grid .call-card {
background: var(--halo-glass);
border: 1px solid var(--halo-bd);
border-radius: var(--halo-r-md);
-webkit-backdrop-filter: var(--halo-blur);
backdrop-filter: var(--halo-blur);
box-shadow: var(--ds-shadow-2), var(--halo-hi);
}
body.skin-halo .call-card.call-card-zoomed {
border: 1px solid color-mix(in srgb, var(--brand) 40%, transparent) !important;
box-shadow: var(--ds-shadow-3), var(--halo-glow) !important;
}
body.skin-halo .call-card-footer {
background: linear-gradient(transparent, color-mix(in srgb, #000 78%, transparent));
}
body.skin-halo .call-screen-card .call-stream-overlay {
background: color-mix(in srgb, var(--dark-bg) 60%, transparent);
-webkit-backdrop-filter: var(--halo-blur);
backdrop-filter: var(--halo-blur);
}
body.skin-halo .call-watch-btn {
background: var(--ds-grad);
border-radius: var(--halo-r-sm);
box-shadow: var(--halo-glow);
}
body.skin-halo .call-watch-btn:hover { filter: brightness(1.06); }
body.skin-halo .call-stop-watch {
background: color-mix(in srgb, #000 50%, transparent);
}
body.skin-halo .call-stop-watch:hover { background: var(--red); }
/* call control bar (floating glass pill) */
body.skin-halo .call-controls {
background: var(--halo-glass);
-webkit-backdrop-filter: var(--halo-blur);
backdrop-filter: var(--halo-blur);
border: 1px solid var(--halo-bd);
box-shadow: var(--ds-shadow-2), var(--halo-hi);
}
body.skin-halo .call-ctrl {
background: color-mix(in srgb, #fff 7%, transparent);
color: #fff;
}
body.skin-halo .call-ctrl:hover {
background: color-mix(in srgb, #fff 13%, transparent);
box-shadow: var(--ds-shadow-1);
}
body.skin-halo .call-ctrl.off { background: #fff; color: #000; }
/* swap classic blurple active → brand */
body.skin-halo .call-ctrl.active {
background: color-mix(in srgb, var(--brand) 22%, transparent);
color: #fff;
box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--brand) 30%, transparent);
}
body.skin-halo .call-ctrl.call-hangup { background: var(--red); }
body.skin-halo .call-ctrl.call-hangup:hover { background: #c0392b; }
/* ── Call preview grid (tiles sit ON the call panel glass) ─── */
body.skin-halo .cpv-tile {
background: color-mix(in srgb, #fff 5%, transparent);
border: 1px solid var(--halo-bd-soft);
border-radius: var(--halo-r-sm);
}
body.skin-halo .cpv-tile:hover { background: color-mix(in srgb, #fff 9%, transparent); }
body.skin-halo .cpv-watch {
background: color-mix(in srgb, #fff 12%, transparent);
border-radius: 10px;
}
body.skin-halo .cpv-btn { box-shadow: var(--ds-shadow-1); }
/* swap hardcoded #5865f2 / #23a55a */
body.skin-halo .cpv-video { background: var(--ds-grad); }
body.skin-halo .cpv-call { background: #23A55A; }
/* ── Group-call ringing row ────────────────────────────────── */
body.skin-halo .call-ring-row {
background: var(--halo-glass-2);
-webkit-backdrop-filter: var(--halo-blur);
backdrop-filter: var(--halo-blur);
border-bottom: 1px solid var(--halo-bd);
}
/* ringing ring uses hardcoded blurple rgba → brand */
body.skin-halo .crm-tile.ringing .crm-av {
box-shadow: 0 0 0 0 color-mix(in srgb, var(--brand) 55%, transparent);
}
body.skin-halo .crm-tile.ringing .crm-av::after {
border-color: var(--brand);
}
body.skin-halo .crm-tile.joined .crm-av::after {
border-color: #23A55A;
}
/* ═══════════════════════════════════════════════════════════════
INCOMING CALL BANNER (glass)
═══════════════════════════════════════════════════════════════ */
body.skin-halo .incoming-call-banner {
background: var(--halo-glass);
-webkit-backdrop-filter: var(--halo-blur);
backdrop-filter: var(--halo-blur);
border: 1px solid var(--halo-bd);
border-radius: var(--halo-r-md);
box-shadow: var(--ds-shadow-3), var(--halo-hi);
}
body.skin-halo .incoming-call-banner .ic-accept { background: var(--green); }
body.skin-halo .incoming-call-banner .ic-decline { background: var(--red); }
/* ═══════════════════════════════════════════════════════════════
SERVER "WHO'S IN VOICE" HOVER CARD (glass popover)
═══════════════════════════════════════════════════════════════ */
body.skin-halo #srv-voice-card {
background: var(--halo-glass);
-webkit-backdrop-filter: var(--halo-blur);
backdrop-filter: var(--halo-blur);
border: 1px solid var(--halo-bd);
border-radius: var(--halo-r-md);
box-shadow: var(--ds-shadow-3), var(--halo-hi);
}
body.skin-halo #srv-voice-card .svc-live {
background: #ED4245;
}
/* ═══════════════════════════════════════════════════════════════
SCREEN-SHARE PICKER MODAL (its own overlay/modal)
═══════════════════════════════════════════════════════════════ */
body.skin-halo .ssp-overlay {
background: color-mix(in srgb, #000 55%, transparent);
-webkit-backdrop-filter: blur(4px);
backdrop-filter: blur(4px);
}
body.skin-halo .ssp-modal {
background: var(--halo-glass-2);
-webkit-backdrop-filter: var(--halo-blur);
backdrop-filter: var(--halo-blur);
border: 1px solid var(--halo-bd);
border-radius: var(--halo-r-lg);
box-shadow: var(--ds-shadow-3), var(--halo-hi);
}
/* tab underline → brand (already brand; keep) */
body.skin-halo .ssp-tab.active::after { background: var(--brand); }
/* source tiles sit ON the modal glass */
body.skin-halo .ssp-item {
background: color-mix(in srgb, #fff 5%, transparent);
border: 2px solid transparent;
border-radius: var(--halo-r-sm);
}
body.skin-halo .ssp-item:hover {
box-shadow: var(--ds-shadow-2);
}
/* swap hardcoded blurple selected ring → brand */
body.skin-halo .ssp-item.selected {
border-color: color-mix(in srgb, var(--brand) 60%, transparent);
box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--brand) 26%, transparent),
0 0 0 3px color-mix(in srgb, var(--brand) 22%, transparent);
}
/* settings strip + footer translucent */
body.skin-halo .ssp-settings {
background: color-mix(in srgb, var(--dark-bg) 45%, transparent);
border-top: 1px solid var(--halo-bd-soft);
}
body.skin-halo .ssp-tabs,
body.skin-halo .ssp-foot {
border-color: var(--halo-bd-soft);
}
/* quality pills (chips) */
body.skin-halo .ssp-pill {
background: color-mix(in srgb, var(--dark-bg) 55%, transparent);
border: 1px solid var(--halo-bd-soft);
border-radius: 10px;
}
body.skin-halo .ssp-pill:hover {
background: color-mix(in srgb, #fff 8%, transparent);
}
body.skin-halo .ssp-pill.active {
background: color-mix(in srgb, var(--brand) 16%, transparent);
border-color: color-mix(in srgb, var(--brand) 26%, transparent);
color: var(--header);
box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--brand) 26%, transparent);
}
body.skin-halo .ssp-pill.active small { color: var(--muted); }
/* toggle switch track → brand when on */
body.skin-halo .ssp-switch .ssp-track {
background: color-mix(in srgb, var(--dark-bg) 55%, transparent);
}
body.skin-halo .ssp-switch input:checked + .ssp-track { background: var(--brand); }
/* ═══════════════════════════════════════════════════════════════════════
HALO · Profile & user cards
Scoped under body.skin-halo — classic look untouched when skin is off.
═══════════════════════════════════════════════════════════════════════ */
/* ── Compact popout card root → glass (skin.css glass :is() omits it) ───── */
body.skin-halo .user-card-compact {
background: var(--halo-glass-2);
border: 1px solid var(--halo-bd);
-webkit-backdrop-filter: var(--halo-blur); backdrop-filter: var(--halo-blur);
border-radius: var(--halo-r-md);
box-shadow: var(--ds-shadow-3), var(--halo-hi);
}
/* avatar ring + status ring: OPAK --dark-bg (yarı saydam cam banner'ı
sızdırıp foto/çerçeve arasında boşluk izlenimi veriyordu) */
body.skin-halo .user-card-compact .ucc-avatar-wrap {
box-shadow: 0 0 0 6px var(--dark-bg);
}
body.skin-halo .user-card-compact .ucc-avatar-wrap .m-status {
border-color: var(--dark-bg);
}
/* compact card · action buttons */
body.skin-halo .ucc-btn { border-radius: 10px; }
body.skin-halo .ucc-btn.primary { background: var(--ds-grad); color: #fff; }
body.skin-halo .ucc-btn.primary:hover {
background: var(--ds-grad); filter: brightness(1.06);
box-shadow: 0 4px 14px color-mix(in srgb, var(--brand) 32%, transparent);
}
body.skin-halo .ucc-btn.icon {
background: color-mix(in srgb, #fff 6%, transparent);
border: 1px solid var(--halo-bd-soft);
color: var(--muted);
}
body.skin-halo .ucc-btn.icon:hover {
background: color-mix(in srgb, #fff 11%, transparent);
color: var(--header);
}
/* compact card · bio + conn pills + "Profili Görüntüle" → translucent inner */
body.skin-halo .ucc-bio {
background: color-mix(in srgb, #fff 6%, transparent);
border: 1px solid var(--halo-bd-soft);
border-radius: var(--halo-r-sm);
}
body.skin-halo .ucc-conn-pill {
background: color-mix(in srgb, #fff 6%, transparent);
border: 1px solid var(--halo-bd-soft);
color: var(--header);
}
body.skin-halo .ucc-conn-pill:hover {
background: color-mix(in srgb, #fff 11%, transparent);
border-color: color-mix(in srgb, var(--brand) 45%, transparent);
}
body.skin-halo .ucc-view-full {
background: color-mix(in srgb, #fff 6%, transparent);
border: 1px solid var(--halo-bd-soft);
border-radius: var(--halo-r-sm);
color: var(--text);
}
body.skin-halo .ucc-view-full:hover {
background: color-mix(in srgb, var(--brand) 16%, transparent);
border-color: color-mix(in srgb, var(--brand) 26%, transparent);
color: var(--header);
}
/* ── Full profile card V2 (root already glass) → inner blocks ──────────── */
/* tabs strip: drop the opaque chat-bg, soften the divider */
body.skin-halo .user-card-v2 .ucp-tabs {
background: transparent;
border-bottom: 1px solid var(--halo-bd-soft);
}
/* themed active underline already uses var(--ds-grad) in base skin; keep it */
/* secondary/icon button → glass chip; primary already var(--ds-grad) */
body.skin-halo .user-card-v2 .ucp-btn.icon {
background: color-mix(in srgb, #fff 6%, transparent);
border: 1px solid var(--halo-bd-soft);
color: var(--muted);
}
body.skin-halo .user-card-v2 .ucp-btn.icon:hover {
background: color-mix(in srgb, #fff 11%, transparent);
color: var(--header);
}
/* bio + connection rows + date/since items → translucent inner cards */
body.skin-halo .user-card-v2 .ucp-bio,
body.skin-halo .ucp-conn-row,
body.skin-halo .ucp-since-row {
background: color-mix(in srgb, #fff 6%, transparent);
border: 1px solid var(--halo-bd-soft);
border-radius: var(--halo-r-sm);
}
body.skin-halo .ucp-conn-row:hover {
background: color-mix(in srgb, #fff 11%, transparent);
border-color: color-mix(in srgb, var(--brand) 45%, transparent);
}
/* "since" icon coin → brand tint stays, just match radius vibe */
body.skin-halo .ucp-since-icon {
background: color-mix(in srgb, var(--brand) 18%, transparent);
}
/* ── DM profile side panel ─────────────────────────────────────────────── */
/* no-banner fallback (inline var(--input-bg)) — see inlineRefactors for the
markup move; here we re-skin the avatar ring that reads off sidebar bg */
body.skin-halo .dpp-av-border {
border-color: color-mix(in srgb, var(--dark-bg) 80%, transparent);
background: color-mix(in srgb, var(--dark-bg) 80%, transparent);
}
body.skin-halo .dpp-section {
border-top: 1px solid var(--halo-bd-soft);
}
body.skin-halo .dpp-add-btn {
border-radius: var(--halo-r-sm);
background: var(--ds-grad); color: #fff;
}
body.skin-halo .dpp-add-btn:hover {
background: var(--ds-grad); filter: brightness(1.06);
}
body.skin-halo .dpp-view-full {
background: color-mix(in srgb, #fff 4%, transparent);
border-top: 1px solid var(--halo-bd-soft);
color: var(--brand);
}
body.skin-halo .dpp-view-full:hover {
background: color-mix(in srgb, #fff 9%, transparent);
}
/* DM-panel no-banner fallback class (added via inlineRefactors) */
body.skin-halo .dpp-banner.is-empty {
background: color-mix(in srgb, var(--brand) 14%, transparent);
}
/* ── Connection chips (verified accounts) → glass chip ─────────────────── */
body.skin-halo .conn-chip {
background: color-mix(in srgb, #fff 6%, transparent);
border: 1px solid var(--halo-bd-soft);
color: var(--text);
}
body.skin-halo .conn-chip:hover {
background: color-mix(in srgb, #fff 11%, transparent);
}
/* keep semantic green verified mark as-is (#23A55A) */
/* ── Profile edit popup → soft brand-tint hover (compare .ctx-item) ─────── */
body.skin-halo .pf-edit-item { border-radius: 8px; }
body.skin-halo .pf-edit-item:hover {
background: color-mix(in srgb, var(--brand) 16%, transparent);
color: var(--header);
}
body.skin-halo .pf-edit-item.danger:hover {
background: color-mix(in srgb, var(--red) 18%, transparent);
color: var(--red);
}
/* ── Activity cards (Spotify / game) inside profiles ───────────────────── */
body.skin-halo .user-activity {
background: color-mix(in srgb, #fff 6%, transparent);
border: 1px solid var(--halo-bd-soft);
border-radius: var(--halo-r-sm);
}
/* keep the semantic accent stripes (Spotify green / brand) */
body.skin-halo .user-activity--game { border-left-color: var(--brand); }
/* progress bar: subtle track on glass; Spotify green fill kept */
body.skin-halo .act-progress-bar {
background: color-mix(in srgb, #fff 12%, transparent);
}
/* action buttons */
body.skin-halo .act-btn { border-radius: 10px; }
body.skin-halo .act-btn-listen {
background: color-mix(in srgb, #fff 6%, transparent);
border-color: var(--halo-bd-soft);
color: var(--text);
}
body.skin-halo .act-btn-listen:hover {
background: color-mix(in srgb, #fff 11%, transparent);
}
/* .act-btn-spotify stays brand-of-Spotify green */
/* ── Status popup (container .user-popup already glass) → soft rows ─────── */
body.skin-halo .up-popup-item { border-radius: 9px; }
body.skin-halo .up-popup-item:hover {
background: color-mix(in srgb, #fff 8%, transparent);
}
body.skin-halo .up-popup-item.active {
background: color-mix(in srgb, var(--brand) 16%, transparent);
box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--brand) 26%, transparent);
color: var(--header);
}
body.skin-halo .up-popup-item.danger:hover {
background: color-mix(in srgb, var(--red) 16%, transparent);
}
body.skin-halo .up-popup-sep {
background: var(--halo-bd-soft);
}
/* ── Member role toggle popup rows (markup moved to .role-toggle-row by the
inlineRefactors edit; here is the glass skin once inline bg is removed) ─ */
body.skin-halo .role-toggle-row {
background: color-mix(in srgb, #fff 6%, transparent);
border: 1px solid var(--halo-bd-soft);
border-radius: var(--halo-r-sm);
}
body.skin-halo .role-toggle-row:hover {
background: color-mix(in srgb, #fff 11%, transparent) !important;
}
body.skin-halo .role-toggle-row.has-role {
background: color-mix(in srgb, var(--brand) 16%, transparent) !important;
box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--brand) 26%, transparent);
}
/* ════════════════════════════════════════
HALO — Popovers, menus & inline pickers
════════════════════════════════════════ */
/* ── Pins popover (ID root → glass :is() rule can't reach it) ── */
body.skin-halo #pins-pop {
background: var(--halo-glass);
border: 1px solid var(--halo-bd);
-webkit-backdrop-filter: var(--halo-blur);
backdrop-filter: var(--halo-blur);
box-shadow: var(--ds-shadow-2), var(--halo-hi);
border-radius: var(--halo-r-lg);
}
body.skin-halo .pins-head { border-bottom: 1px solid var(--halo-bd-soft); }
/* Inner pin rows → soft translucent tiles on the glass */
body.skin-halo .pin-card {
background: color-mix(in srgb, #fff 6%, transparent);
border: 1px solid var(--halo-bd-soft);
border-radius: var(--halo-r-sm);
}
body.skin-halo .pin-card:hover {
background: color-mix(in srgb, #fff 9%, transparent);
border-color: color-mix(in srgb, var(--brand) 30%, transparent);
}
/* ── On-message reactions ── */
body.skin-halo .reaction-pill {
background: color-mix(in srgb, #fff 6%, transparent);
border: 1px solid var(--halo-bd-soft);
border-radius: 999px;
}
body.skin-halo .reaction-pill:hover {
background: color-mix(in srgb, var(--brand) 14%, transparent);
border-color: color-mix(in srgb, var(--brand) 26%, transparent);
}
body.skin-halo .reaction-pill.mine {
background: color-mix(in srgb, var(--brand) 16%, transparent);
border-color: transparent;
box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--brand) 26%, transparent);
}
/* ── Quick switcher: hard solid brand block → soft brand-tint selection ── */
body.skin-halo .qs-item.sel {
background: color-mix(in srgb, var(--brand) 16%, transparent);
border-radius: var(--halo-r-sm);
box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--brand) 26%, transparent);
}
body.skin-halo .qs-item.sel .qs-name { color: var(--text); }
body.skin-halo .qs-item.sel .qs-sub { color: var(--muted); }
/* ── Reaction picker buttons (container already glass) → soft hover ── */
body.skin-halo .rp-btn { border-radius: var(--halo-r-sm); }
body.skin-halo .rp-btn:hover {
background: color-mix(in srgb, #fff 8%, transparent);
}
/* ── Context menu inner: soften the hard separator line ── */
body.skin-halo .ctx-sep { background: var(--halo-bd-soft); }
/* ═══════════════════════════════════════════════════════════════════════
CHORD · HALO SKIN — Settings & management modal CONTENT
The .fm- and .modal shell is already glass; this re-skins the inner controls
(role editor, channel perms, server settings, invite, create, report,
new DM/GDM, badge manager, admin panel). Inner cards → translucent + soft
radii; inputs → .fm-field recipe; toggles keep semantic green; classic chat apps
blurple swapped to --brand.
═══════════════════════════════════════════════════════════════════════ */
/* ── Shared input/select/textarea recipe inside modals ── */
body.skin-halo :is(
.modal-field input, .modal-field select,
.ms-role-select,
.invite-modal-search, .invite-field-wrap,
.adp-input, .adp-select, .sv-sys-select,
.kb-action,
.adm-shop-grid input[type="text"], .adm-shop-grid input[type="number"],
.adm-shop-grid select, .ase-wide textarea, .ase-wide input,
.ase-feat-row select, .ase-feat-row input, .ase-row-2 input, .ase-row-2 select,
.sv-disc-editor textarea, .sv-rule-inp
) {
background: color-mix(in srgb, var(--dark-bg) 55%, transparent);
border: 1px solid var(--halo-bd);
border-radius: var(--halo-r-sm);
box-shadow: none;
}
body.skin-halo :is(
.modal-field input, .modal-field select,
.ms-role-select,
.adp-input, .adp-select, .sv-sys-select, .kb-action,
.adm-shop-grid input, .adm-shop-grid select,
.ase-wide textarea, .ase-wide input,
.ase-feat-row select, .ase-feat-row input, .ase-row-2 input, .ase-row-2 select,
.sv-disc-editor textarea, .sv-rule-inp
):focus {
outline: none;
border-color: var(--brand);
box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 22%, transparent);
}
/* focus-within for wrapper fields that hold a bare input */
body.skin-halo :is(.invite-modal-search, .invite-field-wrap):focus-within {
outline: none;
border-color: var(--brand);
box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 22%, transparent);
}
/* native