/* ========================================================================== css/theme_skin.css — applies a theme's --th-* tokens to the chatWS UI. Inert unless (system/themes.php). Each theme in css/themes//theme.css only defines tokens + background art; this file is the single place that knows chatWS's selectors. Roles follow CodyChat's theme grammar: header .bhead -> top bar foot .bfoot -> footer bar chat .back_chat -> chat column log .mbubble -> message bubble panel .back_panel -> side panels menu .back_menu -> float menus modal .back_modal -> boxes / popups box .back_box -> cards in boxes input input/.back_input priv .back_priv -> PM box accent .theme_color / .theme_btn muted .default_color !important is used on surfaces the core already forces (mobile rules). ========================================================================== */ /* ── 1. Re-point the core design tokens so var()-driven rules follow ─────── */ .cws-themed { --bg-primary: var(--th-chat-bg); --bg-secondary: var(--th-panel-bg); --bg-tertiary: var(--th-box-bg); --bg-hover: var(--th-hover); --bg-active: var(--th-selected); --bg-panel: var(--th-panel-bg); --bg-chat: var(--th-priv-bg); --bg-card: var(--th-modal-bg); --text-primary: var(--th-text); --text-secondary:var(--th-text); --text-muted: var(--th-sub-text); /* --th-muted is a border/button grey in CodyChat themes (#333 in Cody) — not a text colour */ --accent-blue: var(--th-accent); --accent-blue-hover: var(--th-accent); --accent: var(--th-accent); --accent-danger: var(--th-danger); --border-subtle: var(--th-border); --border-medium: var(--th-border); --border-strong: var(--th-border); --muted: var(--th-sub-text); color-scheme: dark; } .cws-themed.cws-tone-light { color-scheme: light; } /* ── 2. Page + chat column ────────────────────────────────────────────── */ .cws-themed { background-color: var(--th-page-bg) !important; color: var(--th-text) !important; } /* body stays transparent: page art (body::before, z-index:-1) must paint over the background but under body's own box. */ .cws-themed body { background: transparent !important; color: var(--th-text) !important; } .cws-themed body { font-family: var(--th-font, inherit); } .cws-themed #app, .cws-themed .main, .cws-themed .layout-shell, .cws-themed .chat, .cws-themed #messages, .cws-themed .messages, .cws-themed .side-left { background: transparent !important; } .cws-themed .chat-center { background: var(--th-chat-bg) !important; position: relative; isolation: isolate; /* theme art (::before, z-index:-1) paints under the messages */ } .cws-themed .chat-center::before { position: absolute; inset: 0; } /* ── 3. Header + footer bars ──────────────────────────────────────────── */ .cws-themed .topbar, .cws-themed .chat-header { background: var(--th-header-bg) !important; color: var(--th-header-text) !important; border-bottom-color: var(--th-header-line) !important; } .cws-themed .topbar .brand, .cws-themed .topbar .topbar-icon-btn, .cws-themed .topbar .hamburger-btn, .cws-themed .topbar i { color: var(--th-header-text) !important; } .cws-themed .topbar .topbar-icon-btn:hover, .cws-themed .topbar .hamburger-btn:hover, .cws-themed .topbar .hamburger-btn.active { background: rgba(127,127,127,.18) !important; } .cws-themed .chat-footer-bar, .cws-themed #chatFooterBar { background: var(--th-foot-bg) !important; color: var(--th-foot-text) !important; border-top-color: var(--th-border) !important; } .cws-themed .footer-menu-btn { color: var(--th-foot-text) !important; opacity: .75; } .cws-themed .footer-menu-btn:hover, .cws-themed .footer-menu-btn.active { opacity: 1; color: var(--th-accent) !important; background: rgba(127,127,127,.14) !important; } /* ── 4. Messages ──────────────────────────────────────────────────────── */ .cws-themed .message-user { color: var(--th-user-name); } .cws-themed .message-time, .cws-themed .typing, .cws-themed .typing-indicator { color: var(--th-date-text) !important; } .cws-themed .message-text { color: var(--th-text); } /* Gradient text keeps its own clip/fill; neon keeps its glow. */ .cws-themed .msg-text[style*="background-clip"] { color: transparent; } .cws-themed .message.system .message-text, .cws-themed .message--bot .bot-jl, .cws-themed .message--bot .bot-act { color: var(--th-system-text) !important; } /* bot lines' user names were hard-coded near-white (#e5e5e5): invisible on light themes */ .cws-themed .message--bot .bot-jl b, .cws-themed .message--bot .bot-act b { color: var(--th-user-name, var(--th-text)) !important; } .cws-themed .message-text a, .cws-themed .pm-msg-text a { color: var(--th-link) !important; } .cws-themed .message-avatar, .cws-themed .msg_avatar { background: var(--th-item-bg) !important; } /* CodyChat log bubble (.mbubble / manifest background_log). A member's own bubble style (.msg-bubble) keeps priority. */ .cws-themed .message:not(.system):not(.message--bot) .message-body > .message-text, .cws-themed .message:not(.system):not(.message--bot) > .message-text { background: var(--th-log-bg); padding: 6px 11px; border-radius: 12px; display: table; max-width: 100%; box-sizing: border-box; margin-top: 3px; } .cws-themed .msg-bubble .message-text { background: none !important; padding: 0 !important; margin: 0 !important; } /* An image / video on its own reads better without a bubble around it. */ .cws-themed .message:not(.system):not(.message--bot) .message-body > .message-text:has(> .embed-block:only-child) { background: none; padding: 0; } .cws-themed .mention { color: var(--th-accent) !important; } .cws-themed .mention:hover { background: var(--th-hover) !important; } .cws-themed .msg-quote, .cws-themed .pmx-quote { background: var(--th-quote-bg) !important; border-left-color: var(--th-accent) !important; } .cws-themed .msg-quote-name, .cws-themed .quote-bar-label { color: var(--th-accent) !important; } .cws-themed .msg-quote-text, .cws-themed .quote-bar-snippet { color: var(--th-quote-text) !important; opacity: .8; } .cws-themed .quote-bar { background: var(--th-inputbar-bg) !important; border-top: 1px solid var(--th-border) !important; } .cws-themed .quote-bar-label span { color: var(--th-text) !important; } .cws-themed #roomTopicBanner { background: var(--th-topic-bg) !important; color: var(--th-topic-text) !important; border-color: var(--th-border) !important; } /* ── 5. Composer ──────────────────────────────────────────────────────── */ .cws-themed .chat-input { background: var(--th-inputbar-bg) !important; border-top: 1px solid var(--th-inputbar-line) !important; } .cws-themed input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="color"]), .cws-themed textarea, .cws-themed select, .cws-themed #messageInput, .cws-themed #pmInput, .cws-themed .pm-search-input, .cws-themed .rpanel-search-input, .cws-themed .st-select, .cws-themed .pe-input, .cws-themed .sb-input, .cws-themed .lobby-search input, .cws-themed .plus-panel-search input { background: var(--th-input-bg) !important; color: var(--th-input-text) !important; border-color: var(--th-input-border) !important; } .cws-themed input::placeholder, .cws-themed textarea::placeholder { color: var(--th-sub-text) !important; opacity: .85; } .cws-themed .chat-attach-btn, .cws-themed .chat-emo-btn, .cws-themed .chat-plus-btn { color: var(--th-sub-text) !important; } .cws-themed .chat-attach-btn:hover, .cws-themed .chat-emo-btn:hover, .cws-themed .chat-plus-btn:hover, .cws-themed .chat-plus-btn.active { color: var(--th-accent) !important; background: var(--th-hover) !important; } /* ── 6. Buttons ───────────────────────────────────────────────────────── */ .cws-themed .send-btn, .cws-themed #sendBtn, .cws-themed .pm-send-btn, .cws-themed .btn.primary, .cws-themed .btn-primary, .cws-themed .create-room-btn, .cws-themed .rl-create-btn, .cws-themed .roomListJoin, .cws-themed #saveSettingsBtn, .cws-themed .st-btn.primary, .cws-themed .st-tab.active, .cws-themed .pe-save-btn, .cws-themed .pe-tab.active, .cws-themed .sb-btn.primary, .cws-themed .cws-card-btn.primary, .cws-themed .cws-card-btn.actions, .cws-themed #popupActions, .cws-themed .cws-pw-btn.primary, .cws-themed .uc-btn.primary, .cws-themed .profile-modal-btn.primary, .cws-themed .lobby-join:not(.off), .cws-themed .cws-login-primary { background: var(--th-btn-bg) !important; color: var(--th-btn-text) !important; border-color: transparent !important; } .cws-themed .send-btn i, .cws-themed .pm-send-btn i, .cws-themed .btn.primary i { color: var(--th-btn-text) !important; } .cws-themed .btn:not(.primary):not(.danger), .cws-themed .btn-secondary, .cws-themed #userInfoPopup .btn:not(.closeBtn), .cws-themed .st-btn.ghost, .cws-themed .sb-btn.ghost, .cws-themed .cws-card-btn.ghost, .cws-themed .cws-card-btn.icon-btn, .cws-themed .pe-pill-btn.ghost, .cws-themed .uc-btn.secondary, .cws-themed .profile-modal-btn.secondary, .cws-themed .boxControls .btn { background: var(--th-btn2-bg) !important; color: var(--th-btn2-text) !important; } .cws-themed .btn.danger, .cws-themed .btn-danger, .cws-themed .sb-btn.danger { background: var(--th-danger) !important; color: #fff !important; } /* ── 7. Floating menus ────────────────────────────────────────────────── */ .cws-themed .float-menu, .cws-themed .attach-menu, .cws-themed .plus-menu, .cws-themed .pmx-menu, .cws-themed #_cwsDotMenu { background: var(--th-menu-bg) !important; color: var(--th-text) !important; border-color: var(--th-border) !important; box-shadow: var(--th-shadow), 0 10px 30px rgba(0,0,0,.25) !important; } .cws-themed .menu-header, .cws-themed .menu-current-room { background: var(--th-item-bg) !important; border-color: var(--th-border) !important; } .cws-themed .menu-username, .cws-themed .menu-room-name, .cws-themed .menu-item, .cws-themed .plus-menu-item, .cws-themed .pmx-menu button, .cws-themed #_cwsDotMenu div, .cws-themed #_cwsDotMenu button { color: var(--th-text) !important; } .cws-themed .menu-user-rank, .cws-themed .menu-section-title, .cws-themed .menu-room-label { color: var(--th-sub-text) !important; } .cws-themed .menu-item i, .cws-themed .pmx-menu button i, .cws-themed .sb-row i { color: var(--th-menu-icon) !important; } .cws-themed .menu-item:hover, .cws-themed .plus-menu-item:hover, .cws-themed .pmx-menu button:hover, .cws-themed .sb-row:hover, .cws-themed .pe-menu-item:hover, .cws-themed .attach-item:hover { background: var(--th-hover) !important; } .cws-themed .menu-item.danger, .cws-themed .menu-item.danger i, .cws-themed .pmx-menu button.danger, .cws-themed .pmx-menu button.danger i { color: var(--th-danger) !important; } .cws-themed .plus-menu-icon { background: var(--th-item-bg) !important; } /* ── 8. Side panels (user list, friends, PM inbox, right panel) ───────── */ .cws-themed .right-panel, .cws-themed .rpanel, .cws-themed .pm-inbox-panel, .cws-themed #pmInboxPanel, .cws-themed .friends-panel { background: var(--th-panel-bg) !important; color: var(--th-text) !important; border-color: var(--th-border) !important; } .cws-themed .right-panel-body, .cws-themed .rpanel-content { background: transparent !important; } .cws-themed .rpanel-tabbar, .cws-themed .pm-inbox-header { background: var(--th-item-bg) !important; border-color: var(--th-border) !important; } .cws-themed .rpanel-tab { color: var(--th-sub-text) !important; } .cws-themed .rpanel-tab.active { color: var(--th-accent) !important; background: var(--th-selected) !important; } .cws-themed .rpanel-tab.active::after { background: var(--th-accent) !important; } .cws-themed .rpanel-username, .cws-themed .ul-name, .cws-themed .pmName, .cws-themed .pmx-name, .cws-themed .pm-inbox-title, .cws-themed .friend-name, .cws-themed .rpanel-section-title { color: var(--th-text) !important; } .cws-themed .rpanel-rank, .cws-themed .ul-mood, .cws-themed .ul-count, .cws-themed .pmPreview, .cws-themed .pmx-time, .cws-themed .rpanel-empty, .cws-themed .rpanel-loading, .cws-themed .pm-empty, .cws-themed .pm-loading, .cws-themed .pm-load-more, .cws-themed .friend-status { color: var(--th-sub-text) !important; } .cws-themed .rpanel-user-row:hover, .cws-themed .ul-item:hover, .cws-themed .pmRow:hover, .cws-themed .list-item.clickable:hover, .cws-themed .friend-item:hover { background: var(--th-hover) !important; } .cws-themed .pmRow.unread { background: var(--th-selected) !important; } .cws-themed .ul-badge, .cws-themed .pm-unread-badge { background: var(--th-accent) !important; color: var(--th-btn-text) !important; } .cws-themed .list-item { background: var(--th-item-bg) !important; } /* ── 9. Boxes, popups, modals ─────────────────────────────────────────── */ .cws-themed .element-box, .cws-themed .popup, .cws-themed #userInfoPopup, .cws-themed .profileBox, .cws-themed #profileViewBox, .cws-themed .modalBox, .cws-themed .alertBox, .cws-themed .warnBox, .cws-themed .giftBox, .cws-themed .profile-modal-overlay, .cws-themed .pe-overlay, .cws-themed .cws-pw, .cws-themed .cwsyt-backdrop { background-color: var(--th-backdrop) !important; } .cws-themed .menu-backdrop, .cws-themed .right-panel-backdrop, .cws-themed .rpanel-backdrop { background: rgba(0,0,0,.35) !important; } .cws-themed .element-box-inner, .cws-themed .popup-content, .cws-themed #userInfoPopup .popupContent, .cws-themed #popupBody, .cws-themed .profileBoxInner, .cws-themed .modalContent, .cws-themed .alertInner, .cws-themed .warnInner, .cws-themed .profile-modal, .cws-themed .profile-edit-modal, .cws-themed .pe-sheet, .cws-themed .user-card-compact, .cws-themed .user-card-popup, .cws-themed #cwsUserCard, .cws-themed .cws-pw-card, .cws-themed .st-box, .cws-themed .card { background: var(--th-modal-bg) !important; color: var(--th-text) !important; border-color: var(--th-border) !important; } .cws-themed .element-close, .cws-themed .element-box-inner > .element-close, .cws-themed .st-x, .cws-themed .sb-x, .cws-themed .gift-x, .cws-themed .plus-panel-close, .cws-themed .pm-close-btn, .cws-themed .pm-ctrl-btn { background: var(--th-item-bg) !important; color: var(--th-text) !important; } .cws-themed .element-header, .cws-themed .profile-edit-header, .cws-themed .profile-edit-footer, .cws-themed .st-foot { background: var(--th-modal-top-bg) !important; color: var(--th-modal-top-text) !important; border-color: var(--th-border) !important; } .cws-themed .st-tabs, .cws-themed .st-group, .cws-themed .profile-stat, .cws-themed .profile-bio-section, .cws-themed .profile-info-icon, .cws-themed .profile-upload-preview, .cws-themed #cwsCardStats, .cws-themed .user-card-header, .cws-themed .gift-item, .cws-themed .gift-card, .cws-themed .sb-kv, .cws-themed .sb-hist-row, .cws-themed .sb-ipuser, .cws-themed .rl-card, .cws-themed .room_item, .cws-themed .roomListItem, .cws-themed .us-filters, .cws-themed .lobby-room, .cws-themed .lobby-stat, .cws-themed .lobby-chip { background: var(--th-box-bg) !important; border-color: var(--th-border) !important; } .cws-themed .rl-card.current, .cws-themed .lobby-chip.active, .cws-themed .cws-status-opt.active, .cws-themed .us-filter-btn.on { background: var(--th-selected) !important; color: var(--th-accent) !important; } .cws-themed .st-tab:not(.active) { color: var(--th-sub-text) !important; } .cws-themed .st-switch input:checked + span { background: var(--th-accent) !important; } .cws-themed .profile-stat-value, .cws-themed .st-title i, .cws-themed .gift-picker-title i, .cws-themed .lobby-title i { color: var(--th-accent) !important; } .cws-themed .profile-modal-header, .cws-themed .profileHeaderArea { background: var(--th-header-bg) !important; } /* ── 10. Private messages ─────────────────────────────────────────────── */ .cws-themed #pmBox, .cws-themed .pm-box { background: var(--th-priv-bg) !important; color: var(--th-text) !important; border-color: var(--th-border) !important; } .cws-themed .pm-box-header, .cws-themed #pmBoxHeader { background: var(--th-ptop-bg) !important; color: var(--th-ptop-text) !important; border-color: var(--th-border) !important; } .cws-themed .pm-box-header .pm-box-name, .cws-themed .pm-box-header .pm-ctrl-btn { color: var(--th-ptop-text) !important; } .cws-themed .pm-box-header .pm-box-status { color: var(--th-ptop-text) !important; opacity: .7; } .cws-themed .pm-box-header .pm-ctrl-btn { background: transparent !important; } .cws-themed .pm-box-input, .cws-themed #pmInputRow { background: var(--th-inputbar-bg) !important; border-color: var(--th-inputbar-line) !important; } .cws-themed .pm-msg.mine .pm-msg-text { background: var(--th-pm-mine-bg) !important; color: var(--th-pm-mine-text) !important; } .cws-themed .pm-msg.theirs .pm-msg-text { background: var(--th-pm-their-bg) !important; color: var(--th-pm-their-text) !important; } .cws-themed .pm-msg-meta, .cws-themed .pmx-seen { color: var(--th-date-text) !important; } .cws-themed .pmx-reply, .cws-themed .pmx-locked { background: var(--th-item-bg) !important; border-color: var(--th-border) !important; } .cws-themed .pmx-new-below { background: var(--th-accent) !important; color: var(--th-btn-text) !important; } .cws-themed .pm-dock-chip { border-color: var(--th-border) !important; background: var(--th-panel-bg) !important; } .cws-themed .pm-dock-chip.has-unread { border-color: var(--th-accent) !important; } .cws-themed .pm-dock-name { background: var(--th-menu-bg) !important; color: var(--th-text) !important; } /* ── 11. Pickers (emoticons, + menu panel, YouTube player) ───────────── */ .cws-themed .emo-panel, .cws-themed .plus-panel { background: var(--th-menu-bg) !important; border-color: var(--th-border) !important; } .cws-themed .emo-panel-tabs, .cws-themed .plus-panel-head, .cws-themed .plus-panel-foot { border-color: var(--th-border) !important; } .cws-themed .emo-tab.active, .cws-themed .plus-panel-tab.active { background: var(--th-selected) !important; color: var(--th-accent) !important; } .cws-themed .emo-item:hover, .cws-themed .emo-tab:hover, .cws-themed .plus-panel-tab:hover { background: var(--th-hover) !important; } .cws-themed .plus-panel-title, .cws-themed .ytp-item, .cws-themed .ytp-title { color: var(--th-text) !important; } .cws-themed .ytp-chan, .cws-themed .ytp-label, .cws-themed .gfp-label, .cws-themed .plus-panel-msg, .cws-themed .plus-panel-tab { color: var(--th-sub-text) !important; } .cws-themed .ytp-item:hover { background: var(--th-hover) !important; } .cws-themed .cwsyt { background: var(--th-modal-bg) !important; border-color: var(--th-border) !important; } .cws-themed .cwsyt-head { background: var(--th-modal-top-bg) !important; } .cws-themed .cwsyt-title, .cws-themed .cwsyt-btn { color: var(--th-modal-top-text) !important; } /* ── 12. Lobby ────────────────────────────────────────────────────────── */ .cws-themed .lobby-room-desc, .cws-themed .lobby-sub, .cws-themed .lobby-stat span, .cws-themed .lobby-users { color: var(--th-sub-text) !important; } .cws-themed .lobby-users.live { color: var(--th-ok) !important; } .cws-themed .lobby-room:hover, .cws-themed .lobby-room:focus-visible { border-color: var(--th-accent) !important; } /* ── 13. Lines, scrollbars ────────────────────────────────────────────── */ .cws-themed ::-webkit-scrollbar-track { background: transparent !important; } .cws-themed ::-webkit-scrollbar-thumb { background: var(--th-selected) !important; } .cws-themed ::-webkit-scrollbar-thumb:hover { background: var(--th-muted) !important; } /* ── 14. Light themes: chatWS hard-codes pale text in many places ───── */ .cws-tone-light .message-text, .cws-tone-light .msg-text:not([style*="color"]), /* a member's own text colour / bubble contrast stays */ .cws-tone-light .pm-msg-text, .cws-tone-light .menu-item, .cws-tone-light .menu-username, .cws-tone-light .room-name, .cws-tone-light .rl-name, .cws-tone-light .rl-card, .cws-tone-light .st-lbl, .cws-tone-light .st-title, .cws-tone-light .st-box, .cws-tone-light .st-group, .cws-tone-light .pe-hero-name, .cws-tone-light .pe-label, .cws-tone-light .pe-mi-label, .cws-tone-light .sb-hero-name, .cws-tone-light .sb-label, .cws-tone-light .gift-card-title, .cws-tone-light .gift-picker-title, .cws-tone-light .profile-modal-username, .cws-tone-light .profile-info-value, .cws-tone-light .profile-bio-text, .cws-tone-light .profile-section-title, .cws-tone-light .profile-label, .cws-tone-light .uc-name, .cws-tone-light #cwsCardName, .cws-tone-light .cws-stat b, .cws-tone-light .lobby-room-name, .cws-tone-light .lobby-title, .cws-tone-light .element-box-inner, .cws-tone-light .element-box-inner h2, .cws-tone-light .element-box-inner h3, .cws-tone-light .popup-content, .cws-tone-light .popup-content h3, .cws-tone-light .form-group label, .cws-tone-light .us-filters label, .cws-tone-light .us-check, .cws-tone-light .ytp-title, .cws-tone-light .plus-menu-item, .cws-tone-light .cws-status-opt, .cws-tone-light #cwsStatusCurrent, .cws-tone-light .cws-status-head { color: var(--th-text) !important; } .cws-tone-light .st-sub, .cws-tone-light .st-note, .cws-tone-light .st-count, .cws-tone-light .pe-muted, .cws-tone-light .sb-hint, .cws-tone-light .profile-modal-meta, .cws-tone-light .profile-info-label, .cws-tone-light .profile-stat-label, .cws-tone-light .room-desc, .cws-tone-light .room-users, .cws-tone-light .rl-desc, .cws-tone-light #cwsCardBio, .cws-tone-light .cws-stat span, .cws-tone-light .uc-rank, .cws-tone-light .field-hint { color: var(--th-sub-text) !important; } /* white-alpha overlays vanish on light surfaces — give them a dark alpha */ .cws-tone-light .message-avatar, .cws-tone-light .msg_avatar, .cws-tone-light .plus-menu-icon { background: rgba(0,0,0,.05) !important; } .cws-tone-light .emo-panel, .cws-tone-light .plus-panel, .cws-tone-light .float-menu, .cws-tone-light .element-box-inner, .cws-tone-light #pmBox, .cws-tone-light .popup-content { box-shadow: 0 10px 30px rgba(0,0,0,.18) !important; } /* Catch-all for element boxes that carry their own inline