722 lines
30 KiB
CSS
722 lines
30 KiB
CSS
/* ──────────────────────────────────────────
|
|
§ Color Strategy
|
|
──────────────────────────────────────────
|
|
Teal #99FFE4 — primary accent (sparingly)
|
|
focus, links, selected indicator,
|
|
primary buttons, online status
|
|
Orange #FFC799 — attention only
|
|
unread badges, @me mentions,
|
|
away status, warnings
|
|
Red #FF8080 — danger / error / busy
|
|
White #FFFFFF — active/selected text emphasis
|
|
Gray #A0A0A0 — default UI text, icons, labels
|
|
────────────────────────────────────────── */
|
|
|
|
/* ═══════════════════════════════════════════
|
|
CORE TOKENS — set on all RC scope tiers
|
|
═══════════════════════════════════════════ */
|
|
|
|
:root,
|
|
body,
|
|
.rcx-content--main,
|
|
.rcx-tile,
|
|
.rcx-sidebar--main,
|
|
.rcx-sidepanel,
|
|
.rcx-navbar {
|
|
|
|
/* ── Strokes ── */
|
|
--rcx-color-stroke-extra-light: #1C1C1C !important;
|
|
--rcx-color-stroke-light: #232323 !important;
|
|
--rcx-color-stroke-medium: #303030 !important;
|
|
--rcx-color-stroke-dark: #A0A0A0 !important;
|
|
--rcx-color-stroke-extra-dark: #C0C0C0 !important;
|
|
--rcx-color-stroke-extra-light-highlight: #99FFE420 !important;
|
|
--rcx-color-stroke-highlight: #99FFE4 !important;
|
|
--rcx-color-stroke-extra-light-error: #FF808030 !important;
|
|
--rcx-color-stroke-error: #FF8080 !important;
|
|
|
|
/* ── Surfaces ── */
|
|
--rcx-color-surface-light: #0F0F0F !important;
|
|
--rcx-color-surface-tint: #131313 !important;
|
|
--rcx-color-surface-room: #0F0F0F !important;
|
|
--rcx-color-surface-neutral: #1A1A1A !important;
|
|
--rcx-color-surface-disabled: #0E0E0E !important;
|
|
--rcx-color-surface-hover: #181818 !important;
|
|
--rcx-color-surface-selected: #1E1E1E !important;
|
|
--rcx-color-surface-dark: #A0A0A0 !important;
|
|
--rcx-color-surface-featured: #0D1F1A !important;
|
|
--rcx-color-surface-featured-hover: #122A23 !important;
|
|
--rcx-color-surface-overlay: rgba(0, 0, 0, 0.72) !important;
|
|
--rcx-color-surface-sidebar: #101010 !important;
|
|
|
|
/* ── Shadows ── */
|
|
--rcx-color-shadow-highlight: rgba(153, 255, 228, 0.08) !important;
|
|
--rcx-color-shadow-danger: rgba(255, 128, 128, 0.08) !important;
|
|
--rcx-color-shadow-elevation-border: #1C1C1C !important;
|
|
--rcx-color-shadow-elevation-1: rgba(0, 0, 0, 0.5) !important;
|
|
--rcx-color-shadow-elevation-2x: rgba(0, 0, 0, 0.4) !important;
|
|
--rcx-color-shadow-elevation-2y: rgba(0, 0, 0, 0.3) !important;
|
|
|
|
/* ── Font colors ── */
|
|
--rcx-color-font-white: #141414 !important;
|
|
--rcx-color-font-disabled: #404040 !important;
|
|
--rcx-color-font-annotation: #606060 !important;
|
|
--rcx-color-font-hint: #606060 !important;
|
|
--rcx-color-font-secondary-info: #808080 !important;
|
|
--rcx-color-font-default: #B0B0B0 !important;
|
|
--rcx-color-font-titles-labels: #E0E0E0 !important;
|
|
--rcx-color-font-info: #808080 !important;
|
|
--rcx-color-font-danger: #FF8080 !important;
|
|
--rcx-color-font-pure-black: #101010 !important;
|
|
--rcx-color-font-pure-white: #FFFFFF !important;
|
|
|
|
/* ── Status backgrounds ── */
|
|
--rcx-color-status-background-info: #99FFE410 !important;
|
|
--rcx-color-status-background-success: #99FFE410 !important;
|
|
--rcx-color-status-background-danger: #FF808010 !important;
|
|
--rcx-color-status-background-warning: #FFC79910 !important;
|
|
--rcx-color-status-background-warning-2: #1A1508 !important;
|
|
--rcx-color-status-background-service-1: #99FFE408 !important;
|
|
--rcx-color-status-background-service-2: #99FFE408 !important;
|
|
--rcx-color-status-background-service-3: #0D1F1A !important;
|
|
|
|
/* ── Status font ── */
|
|
--rcx-color-status-font-on-info: #99FFE4 !important;
|
|
--rcx-color-status-font-on-success: #99FFE4 !important;
|
|
--rcx-color-status-font-on-danger: #FF8080 !important;
|
|
--rcx-color-status-font-on-warning: #FFC799 !important;
|
|
--rcx-color-status-font-on-warning-2: #FFFFFF !important;
|
|
--rcx-color-status-font-on-service-1: #808080 !important;
|
|
--rcx-color-status-font-on-service-2: #808080 !important;
|
|
--rcx-color-status-font-on-service-3: #FFFFFF !important;
|
|
|
|
/* ── Badge backgrounds ── */
|
|
--rcx-color-badge-background-level-0: #232323 !important;
|
|
--rcx-color-badge-background-level-1: #303030 !important;
|
|
--rcx-color-badge-background-level-2: #99FFE4 !important;
|
|
--rcx-color-badge-background-level-3: #FFC799 !important;
|
|
--rcx-color-badge-background-level-4: #FF8080 !important;
|
|
|
|
/* ── Status bullets ── */
|
|
--rcx-color-status-bullet-online: #99FFE4 !important;
|
|
--rcx-color-status-bullet-away: #FFC799 !important;
|
|
--rcx-color-status-bullet-busy: #FF8080 !important;
|
|
--rcx-color-status-bullet-disabled: #404040 !important;
|
|
--rcx-color-status-bullet-offline: #404040 !important;
|
|
--rcx-color-status-bullet-loading: #606060 !important;
|
|
|
|
/* ── Primary button (teal) ── */
|
|
--rcx-color-button-background-primary-default: #99FFE4 !important;
|
|
--rcx-color-button-background-primary-hover: #AAFFEA !important;
|
|
--rcx-color-button-background-primary-press: #7AE0C8 !important;
|
|
--rcx-color-button-background-primary-focus: #AAFFEA !important;
|
|
--rcx-color-button-background-primary-keyfocus: #99FFE4 !important;
|
|
--rcx-color-button-background-primary-disabled: #99FFE440 !important;
|
|
|
|
/* ── Secondary button ── */
|
|
--rcx-color-button-background-secondary-default: #181818 !important;
|
|
--rcx-color-button-background-secondary-hover: #1E1E1E !important;
|
|
--rcx-color-button-background-secondary-press: #232323 !important;
|
|
--rcx-color-button-background-secondary-focus: #1E1E1E !important;
|
|
--rcx-color-button-background-secondary-keyfocus: #181818 !important;
|
|
--rcx-color-button-background-secondary-disabled: #18181840 !important;
|
|
|
|
/* ── Secondary-danger button ── */
|
|
--rcx-color-button-background-secondary-danger-default: #181818 !important;
|
|
--rcx-color-button-background-secondary-danger-hover: #201515 !important;
|
|
--rcx-color-button-background-secondary-danger-press: #281A1A !important;
|
|
--rcx-color-button-background-secondary-danger-focus: #201515 !important;
|
|
--rcx-color-button-background-secondary-danger-keyfocus: #181818 !important;
|
|
--rcx-color-button-background-secondary-danger-disabled: #18181840 !important;
|
|
|
|
/* ── Danger button ── */
|
|
--rcx-color-button-background-danger-default: #FF8080 !important;
|
|
--rcx-color-button-background-danger-hover: #FF9494 !important;
|
|
--rcx-color-button-background-danger-press: #E06B6B !important;
|
|
--rcx-color-button-background-danger-focus: #FF9494 !important;
|
|
--rcx-color-button-background-danger-keyfocus: #FF8080 !important;
|
|
--rcx-color-button-background-danger-disabled: #FF808040 !important;
|
|
|
|
/* ── Success button ── */
|
|
--rcx-color-button-background-success-default: #99FFE4 !important;
|
|
--rcx-color-button-background-success-hover: #AAFFEA !important;
|
|
--rcx-color-button-background-success-press: #7AE0C8 !important;
|
|
--rcx-color-button-background-success-focus: #AAFFEA !important;
|
|
--rcx-color-button-background-success-keyfocus: #99FFE4 !important;
|
|
--rcx-color-button-background-success-disabled: #99FFE440 !important;
|
|
|
|
/* ── Button font ── */
|
|
--rcx-color-button-font-on-primary: #000000 !important;
|
|
--rcx-color-button-font-on-primary-disabled: #00000050 !important;
|
|
--rcx-color-button-font-on-secondary: #B0B0B0 !important;
|
|
--rcx-color-button-font-on-secondary-disabled: #40404080 !important;
|
|
--rcx-color-button-font-on-secondary-danger: #FF8080 !important;
|
|
--rcx-color-button-font-on-secondary-danger-disabled: #FF808040 !important;
|
|
--rcx-color-button-font-on-danger: #000000 !important;
|
|
--rcx-color-button-font-on-danger-disabled: #00000050 !important;
|
|
--rcx-color-button-font-on-success: #000000 !important;
|
|
--rcx-color-button-font-on-success-disabled: #00000050 !important;
|
|
}
|
|
|
|
/* ═══════════════════════════════════════════
|
|
COMPONENT TOKENS
|
|
═══════════════════════════════════════════ */
|
|
|
|
:root,
|
|
body,
|
|
.rcx-content--main,
|
|
.rcx-tile,
|
|
.rcx-sidebar--main,
|
|
.rcx-sidepanel,
|
|
.rcx-navbar {
|
|
|
|
/* ── Links (teal, understated) ── */
|
|
--rcx-link-color: #7AD4BE !important;
|
|
--rcx-link-active-color: #99FFE4 !important;
|
|
--rcx-link-focus-color: #99FFE4 !important;
|
|
--rcx-link-visited-color: #5CB8A2 !important;
|
|
--rcx-link-focus-outline-color: rgba(153, 255, 228, 0.3) !important;
|
|
|
|
/* ── Inputs ── */
|
|
--rcx-input-colors-background-color: #141414 !important;
|
|
--rcx-input-colors-border-color: #232323 !important;
|
|
--rcx-input-colors-color: #E0E0E0 !important;
|
|
--rcx-input-colors-placeholder-color: #404040 !important;
|
|
--rcx-input-colors-focus-border-color: #99FFE4 !important;
|
|
--rcx-input-colors-focus-shadow-color: rgba(153, 255, 228, 0.1) !important;
|
|
--rcx-input-colors-focus-caret-color: #99FFE4 !important;
|
|
--rcx-input-colors-focus-icon-color: #99FFE4 !important;
|
|
--rcx-input-colors-hover-border-color: #303030 !important;
|
|
--rcx-input-colors-active-border-color: #99FFE4 !important;
|
|
--rcx-input-colors-active-caret-color: #99FFE4 !important;
|
|
--rcx-input-colors-disabled-background-color: #0E0E0E !important;
|
|
--rcx-input-colors-disabled-border-color: #1C1C1C !important;
|
|
--rcx-input-colors-disabled-color: #404040 !important;
|
|
--rcx-input-colors-invalid-border-color: #FF8080 !important;
|
|
--rcx-input-colors-invalid-focus-border-color: #FF8080 !important;
|
|
--rcx-input-colors-invalid-focus-shadow-color: rgba(255, 128, 128, 0.1) !important;
|
|
|
|
/* ── Messages ── */
|
|
--rcx-message-background-color: #101010 !important;
|
|
--rcx-message-background-color-hover: #141414 !important;
|
|
--rcx-message-background-color-selected: #181818 !important;
|
|
--rcx-message-background-color-editing: #12150E !important;
|
|
--rcx-message-divider-background-color: #1C1C1C !important;
|
|
--rcx-message-divider-color: #404040 !important;
|
|
--rcx-message-divider-background-color-unread: #99FFE4 !important;
|
|
--rcx-message-divider-color-unread: #99FFE4 !important;
|
|
|
|
/* ── Message reactions ── */
|
|
--rcx-message-reaction-background-color: #181818 !important;
|
|
--rcx-message-reaction-border-color: #232323 !important;
|
|
--rcx-message-reaction-color: #808080 !important;
|
|
--rcx-message-reaction-hover-background-color: #1E1E1E !important;
|
|
--rcx-message-reaction-hover-border-color: #303030 !important;
|
|
|
|
/* ── Message generic preview ── */
|
|
--rcx-message-generic-preview-border-color: #232323 !important;
|
|
--rcx-message-generic-preview-content-background-color: #141414 !important;
|
|
--rcx-message-generic-preview-context-color: #606060 !important;
|
|
--rcx-message-generic-preview-title-color: #E0E0E0 !important;
|
|
--rcx-message-generic-preview-description-color: #808080 !important;
|
|
--rcx-message-generic-preview-icon-background-color: #181818 !important;
|
|
|
|
/* ── Message highlights ── */
|
|
--rcx-message-highlight-colors-critical-color: #FF8080 !important;
|
|
--rcx-message-highlight-colors-background-critical-color: #FF808010 !important;
|
|
--rcx-message-highlight-colors-relevant-color: #FFC799 !important;
|
|
--rcx-message-highlight-colors-background-relevant-color: #FFC79910 !important;
|
|
--rcx-message-highlight-colors-other-color: #808080 !important;
|
|
--rcx-message-highlight-colors-background-other-color: #181818 !important;
|
|
|
|
/* ── Message status ── */
|
|
--rcx-message-status-variant-color-primary: #99FFE4 !important;
|
|
--rcx-message-status-variant-color-success: #99FFE4 !important;
|
|
--rcx-message-status-variant-color-danger: #FF8080 !important;
|
|
--rcx-message-status-variant-color-warning: #FFC799 !important;
|
|
|
|
/* ── Sidebar (elevated, distinct from chat) ── */
|
|
--rcx-sidebar-color-surface-default: #0A0A0A !important;
|
|
--rcx-sidebar-color-surface-hover: #141414 !important;
|
|
--rcx-sidebar-color-surface-selected: #151515 !important;
|
|
--rcx-sidebar-color-font-default: #808080 !important;
|
|
--rcx-sidebar-color-font-title: #B0B0B0 !important;
|
|
--rcx-sidebar-color-font-active: #E0E0E0 !important;
|
|
--rcx-link-color: #808080 !important;
|
|
--rcx-sidebar-accordion-border-color: #1C1C1C !important;
|
|
--rcx-sidebar-color-stroke-extra-light: #1C1C1C !important;
|
|
--rcx-sidebar-item-background-color-featured: #0D1F1A !important;
|
|
--rcx-sidebar-item-background-color-featured-hover: #122A23 !important;
|
|
--rcx-sidebar-item-color: #808080 !important;
|
|
--rcx-sidebar-item-color-featured: #99FFE4 !important;
|
|
--rcx-sidebar-item-color-highlighted: #E0E0E0 !important;
|
|
--rcx-sidebar-link-color: #7AD4BE !important;
|
|
--rcx-sidebar-footer-box-shadow: none !important;
|
|
--rcx-sidebar-footer-highlight-color: #99FFE4 !important;
|
|
--rcx-sidebar-banner-background-default: #181818 !important;
|
|
--rcx-sidebar-banner-color-default: #808080 !important;
|
|
--rcx-sidebar-banner-background-info: #0D1A18 !important;
|
|
--rcx-sidebar-banner-background-success: #0D1A18 !important;
|
|
--rcx-sidebar-banner-background-warning: #1A1508 !important;
|
|
--rcx-sidebar-banner-background-danger: #1A0D0D !important;
|
|
|
|
/* ── Badges (orange for unread — the one place it pops) ── */
|
|
--rcx-badge-colors-primary-background-color: #FFC799 !important;
|
|
--rcx-badge-colors-primary-color: #000000 !important;
|
|
--rcx-badge-colors-secondary-background-color: #303030 !important;
|
|
--rcx-badge-colors-secondary-color: #B0B0B0 !important;
|
|
--rcx-badge-colors-danger-background-color: #FF8080 !important;
|
|
--rcx-badge-colors-danger-color: #000000 !important;
|
|
--rcx-badge-colors-warning-background-color: #FFC799 !important;
|
|
--rcx-badge-colors-warning-color: #000000 !important;
|
|
--rcx-badge-colors-ghost-background-color: transparent !important;
|
|
--rcx-badge-colors-ghost-color: #606060 !important;
|
|
--rcx-badge-colors-disabled-background-color: #232323 !important;
|
|
--rcx-badge-colors-disabled-color: #404040 !important;
|
|
|
|
/* ── Tags ── */
|
|
--rcx-tag-colors-default-background-color: #181818 !important;
|
|
--rcx-tag-colors-default-color: #808080 !important;
|
|
--rcx-tag-colors-primary-background-color: #99FFE420 !important;
|
|
--rcx-tag-colors-primary-color: #99FFE4 !important;
|
|
--rcx-tag-colors-secondary-background-color: #232323 !important;
|
|
--rcx-tag-colors-secondary-color: #808080 !important;
|
|
--rcx-tag-colors-danger-background-color: #FF808015 !important;
|
|
--rcx-tag-colors-danger-color: #FF8080 !important;
|
|
--rcx-tag-colors-warning-background-color: #FFC79915 !important;
|
|
--rcx-tag-colors-warning-color: #FFC799 !important;
|
|
|
|
/* ── Tabs ── */
|
|
--rcx-tabs-color: #606060 !important;
|
|
--rcx-tabs-selected-color: #E0E0E0 !important;
|
|
--rcx-tabs-selected-border-color: #99FFE4 !important;
|
|
--rcx-tabs-hover-border-color: #303030 !important;
|
|
--rcx-tabs-hover-selected-color: #FFFFFF !important;
|
|
--rcx-tabs-hover-selected-border-color: #99FFE4 !important;
|
|
--rcx-tabs-focus-border-color: #99FFE4 !important;
|
|
--rcx-tabs-focus-shadow-color: rgba(153, 255, 228, 0.1) !important;
|
|
|
|
/* ── Toastbar ── */
|
|
--rcx-toastbar-background-color: #181818 !important;
|
|
--rcx-toastbar-color: #E0E0E0 !important;
|
|
--rcx-toastbar-success-color: #99FFE4 !important;
|
|
--rcx-toastbar-error-color: #FF8080 !important;
|
|
--rcx-toastbar-progressbar-background-color: #99FFE4 !important;
|
|
|
|
/* ── Tooltip ── */
|
|
--rcx-tooltip-dark-background-color: #181818 !important;
|
|
--rcx-tooltip-dark-text-color: #B0B0B0 !important;
|
|
--rcx-tooltip-light-background-color: #E0E0E0 !important;
|
|
--rcx-tooltip-light-text-color: #101010 !important;
|
|
|
|
/* ── Callout ── */
|
|
--rcx-callout-background-color: #141414 !important;
|
|
--rcx-callout-text-color: #B0B0B0 !important;
|
|
--rcx-callout-default-color: #808080 !important;
|
|
--rcx-callout-info-color: #99FFE4 !important;
|
|
--rcx-callout-success-color: #99FFE4 !important;
|
|
--rcx-callout-warning-color: #FFC799 !important;
|
|
--rcx-callout-danger-color: #FF8080 !important;
|
|
|
|
/* ── Cards ── */
|
|
--rcx-card-background-color: #141414 !important;
|
|
--rcx-card-color: #B0B0B0 !important;
|
|
|
|
/* ── Banner ── */
|
|
--rcx-banner-colors-neutral-background-color: #181818 !important;
|
|
--rcx-banner-colors-neutral-color: #B0B0B0 !important;
|
|
--rcx-banner-colors-info-color: #99FFE4 !important;
|
|
--rcx-banner-colors-success-color: #99FFE4 !important;
|
|
--rcx-banner-colors-warning-color: #FFC799 !important;
|
|
--rcx-banner-colors-danger-color: #FF8080 !important;
|
|
|
|
/* Announcement */
|
|
--rcx-color-announcement-text: var(--rcx-color-font-default) !important;
|
|
|
|
/* ── Divider ── */
|
|
--rcx-divider-color: #1C1C1C !important;
|
|
|
|
/* ── Progress bar ── */
|
|
--rcx-progress-bar-color-background: #232323 !important;
|
|
--rcx-progress-bar-color-shine: #99FFE4 !important;
|
|
|
|
/* ── Chip ── */
|
|
--rcx-chip-background-color: #181818 !important;
|
|
--rcx-chip-border-color: #232323 !important;
|
|
--rcx-chip-color: #B0B0B0 !important;
|
|
--rcx-chip-hover-background-color: #1E1E1E !important;
|
|
--rcx-chip-hover-border-color: #303030 !important;
|
|
--rcx-chip-focus-border-color: #99FFE4 !important;
|
|
--rcx-chip-focus-shadow-color: rgba(153, 255, 228, 0.1) !important;
|
|
|
|
/* ── Icon buttons ── */
|
|
--rcx-color-button-icon-color: #606060 !important;
|
|
--rcx-color-button-icon-hover-background-color: #181818 !important;
|
|
--rcx-color-button-icon-hover-border-color: transparent !important;
|
|
--rcx-color-button-icon-pressed-background-color: #1E1E1E !important;
|
|
--rcx-color-button-icon-pressed-border-color: transparent !important;
|
|
--rcx-color-button-icon-focus-border-color: #99FFE4 !important;
|
|
--rcx-color-button-icon-focus-shadow-color: rgba(153, 255, 228, 0.1) !important;
|
|
--rcx-color-button-icon-disabled-color: #303030 !important;
|
|
--rcx-color-button-icon-danger-color: #FF8080 !important;
|
|
--rcx-color-button-icon-success-color: #99FFE4 !important;
|
|
--rcx-color-button-icon-warning-color: #FFC799 !important;
|
|
--rcx-color-button-icon-info-color: #808080 !important;
|
|
|
|
/* ── Option / states ── */
|
|
--rcx-option-color-variant-primary: #E0E0E0 !important;
|
|
--rcx-option-color-variant-danger: #FF8080 !important;
|
|
--rcx-option-color-variant-success: #99FFE4 !important;
|
|
--rcx-option-color-variant-warning: #FFC799 !important;
|
|
--rcx-states-icons-color-primary: #808080 !important;
|
|
--rcx-states-icons-color-success: #99FFE4 !important;
|
|
--rcx-states-icons-color-danger: #FF8080 !important;
|
|
--rcx-states-icons-color-warning: #FFC799 !important;
|
|
|
|
/* ── Modal ── */
|
|
--rcx-modal-border-radius: 4px !important;
|
|
|
|
/* ── Legacy vars ── */
|
|
--content-background-color: #101010 !important;
|
|
--sidebar-background: #101010 !important;
|
|
--primary-action-color: #99FFE4 !important;
|
|
--primary-font-color: #B0B0B0 !important;
|
|
--secondary-font-color: #606060 !important;
|
|
--flex-nav-background: #101010 !important;
|
|
--custom-scrollbar-color: #23232380 !important;
|
|
--rooms-list-empty-text-color: #404040 !important;
|
|
--rc-color-primary-light: #99FFE410 !important;
|
|
--rc-color-alert: #FFC799 !important;
|
|
--rc-color-error: #FF8080 !important;
|
|
--rc-color-success: #99FFE4 !important;
|
|
|
|
/* ── Neutral scale ── */
|
|
--rcx-color-neutral-100: #E0E0E0 !important;
|
|
--rcx-color-neutral-200: #B0B0B0 !important;
|
|
--rcx-color-neutral-250: #A0A0A0 !important;
|
|
--rcx-color-neutral-300: #808080 !important;
|
|
--rcx-color-neutral-400: #606060 !important;
|
|
--rcx-color-neutral-450: #404040 !important;
|
|
--rcx-color-neutral-500: #303030 !important;
|
|
--rcx-color-neutral-600: #232323 !important;
|
|
--rcx-color-neutral-700: #1E1E1E !important;
|
|
--rcx-color-neutral-800: #181818 !important;
|
|
--rcx-color-neutral-900: #101010 !important;
|
|
|
|
/* ── Accent scale (blue → teal) ── */
|
|
--rcx-color-blue-200: #99FFE418 !important;
|
|
--rcx-color-blue-500: #99FFE4 !important;
|
|
--rcx-color-blue-600: #7AE0C8 !important;
|
|
--rcx-color-blue-700: #5CC0A8 !important;
|
|
|
|
/* ── Green scale ── */
|
|
--rcx-color-green-200: #99FFE415 !important;
|
|
--rcx-color-green-400: #66D9B8 !important;
|
|
--rcx-color-green-800: #99FFE4 !important;
|
|
--rcx-color-green-900: #7AE0C8 !important;
|
|
--rcx-color-green-1000: #5CC0A8 !important;
|
|
|
|
/* ── Red scale ── */
|
|
--rcx-color-red-100: #FF808008 !important;
|
|
--rcx-color-red-200: #FF808015 !important;
|
|
--rcx-color-red-300: #FF808030 !important;
|
|
--rcx-color-red-500: #FF8080 !important;
|
|
--rcx-color-red-600: #E06B6B !important;
|
|
--rcx-color-red-700: #C05555 !important;
|
|
--rcx-color-red-800: #A04040 !important;
|
|
|
|
/* ── Yellow scale ── */
|
|
--rcx-color-yellow-100: #FFC79908 !important;
|
|
--rcx-color-yellow-200: #FFC79915 !important;
|
|
--rcx-color-yellow-400: #FFC799 !important;
|
|
--rcx-color-yellow-500: #FFC799 !important;
|
|
--rcx-color-yellow-600: #E0AA7A !important;
|
|
--rcx-color-yellow-800: #C4905E !important;
|
|
--rcx-color-yellow-900: #A07850 !important;
|
|
|
|
/* ── Purple scale ── */
|
|
--rcx-color-purple-700: #0D1F1A !important;
|
|
--rcx-color-purple-800: #122A23 !important;
|
|
--rcx-color-orange-500: #FFC799 !important;
|
|
|
|
/* ── Fonts: iA Writer Duo S ── */
|
|
--rcx-font-family-mono: "iA Writer Duo S", "Geist Mono", "JetBrains Mono", "SF Mono", monospace !important;
|
|
--rcx-font-family-sans: "iA Writer Duo S", "Geist Mono", "JetBrains Mono", "SF Mono", monospace !important;
|
|
--body-font-family: "iA Writer Duo S", "Geist Mono", "JetBrains Mono", "SF Mono", monospace !important;
|
|
}
|
|
|
|
|
|
/* ═══════════════════════════════════════════
|
|
TERMINAL AESTHETICS
|
|
═══════════════════════════════════════════ */
|
|
|
|
/* ── Global iA Writer Duo S ── */
|
|
body,
|
|
body *:not(.rcx-icon):not([class*="rcx-icon--"]):not([class*="fontello"]) {
|
|
font-family: "iA Writer Duo S", "Geist Mono", "JetBrains Mono", "SF Mono", monospace !important;
|
|
}
|
|
|
|
/* ── Preserve icon fonts ── */
|
|
[class*="fontello"] {
|
|
font-family: fontello !important;
|
|
}
|
|
.rcx-icon,
|
|
[class*="rcx-icon--"] {
|
|
font-family: RocketChat !important;
|
|
}
|
|
|
|
/* ── Aesthetic scanlines & digital grain ──
|
|
body::after {
|
|
content: "";
|
|
position: fixed;
|
|
inset: 0;
|
|
z-index: 999999;
|
|
pointer-events: none;
|
|
background: repeating-linear-gradient(
|
|
0deg,
|
|
transparent,
|
|
transparent 2px,
|
|
rgba(153, 255, 228, 0.02) 2px,
|
|
rgba(153, 255, 228, 0.02) 4px
|
|
);
|
|
}*/
|
|
|
|
/* ── Focus ring (teal glow) ──
|
|
*:focus-visible {
|
|
outline: 1px solid #99FFE4 !important;
|
|
outline-offset: 0px;
|
|
box-shadow: 0 0 8px rgba(153, 255, 228, 0.3), inset 0 0 8px rgba(153, 255, 228, 0.1) !important;
|
|
} */
|
|
|
|
/* ── Scrollbar ── */
|
|
* {
|
|
scrollbar-width: thin;
|
|
scrollbar-color: #23232380 transparent;
|
|
}
|
|
::-webkit-scrollbar { width: 5px; height: 5px; }
|
|
::-webkit-scrollbar-track { background: transparent; }
|
|
::-webkit-scrollbar-thumb { background: #232323; border-radius: 3px; }
|
|
::-webkit-scrollbar-thumb:hover { background: #303030; }
|
|
::-webkit-scrollbar-corner { background: transparent; }
|
|
|
|
/* ── Selection ── */
|
|
::selection {
|
|
background: rgba(153, 255, 228, 0.15) !important;
|
|
color: #FFFFFF !important;
|
|
}
|
|
|
|
/* ── Code blocks ── */
|
|
.rcx-message-body code,
|
|
code.code-colors,
|
|
.rcx-box--with-inline-elements code,
|
|
pre code,
|
|
.hljs {
|
|
background: #0C0C0C !important;
|
|
color: #99FFE4 !important;
|
|
border: 1px solid #1C1C1C !important;
|
|
border-radius: 2px !important;
|
|
}
|
|
pre,
|
|
.rcx-message-body pre {
|
|
background: #0C0C0C !important;
|
|
border: 1px solid #1C1C1C !important;
|
|
border-left: 2px solid #303030 !important;
|
|
border-radius: 0 !important;
|
|
padding: 12px 16px !important;
|
|
}
|
|
|
|
/* ── Blockquotes ── */
|
|
.rcx-message-body blockquote,
|
|
blockquote {
|
|
border-left: 2px solid #303030 !important;
|
|
background: #0E0E0E !important;
|
|
color: #808080 !important;
|
|
padding: 8px 16px !important;
|
|
margin: 4px 0 !important;
|
|
border-radius: 0 !important;
|
|
}
|
|
|
|
/* ── Message composer (slight elevation) ── */
|
|
.rc-message-box,
|
|
.rcx-message-composer,
|
|
.messages-container-main .footer {
|
|
background: #121212 !important;
|
|
border-color: #1A1A1A !important;
|
|
/*border-top: 1px solid #1A1A1A !important; */
|
|
border-top: none;
|
|
}
|
|
|
|
.messages-container-main .rc-message-box.footer {
|
|
background: #0f0f0f !important;
|
|
}
|
|
|
|
|
|
.rc-message-box textarea,
|
|
.rcx-message-composer textarea,
|
|
.rc-message-box__textarea {
|
|
background: transparent !important;
|
|
color: #B0B0B0 !important;
|
|
}
|
|
.rcx-message-composer:focus-within,
|
|
.rc-message-box:focus-within {
|
|
border-color: #99FFE450 !important;
|
|
box-shadow: none !important;
|
|
}
|
|
|
|
/* ── Sidebar interactions (premium feel) ── */
|
|
.rcx-sidebar-item--selected,
|
|
.rcx-sidebar-item:active,
|
|
.rcx-sidebar-item[aria-selected="true"] {
|
|
background-color: #0F0F0F !important;
|
|
border-left: 3px solid #99FFE4 !important;
|
|
padding-left: calc(16px - 3px) !important;
|
|
box-shadow: inset 3px 0 0 #99FFE420, inset -1px 0 0 rgba(153, 255, 228, 0.1) !important;
|
|
}
|
|
.rcx-sidebar-item--clickable:hover,
|
|
.rcx-sidebar-item--clickable.is-hovered {
|
|
background-color: #121212 !important;
|
|
border-left-color: #99FFE480 !important;
|
|
transition: all 120ms cubic-bezier(0.4, 0, 0.2, 1) !important;
|
|
}
|
|
.rcx-sidebar-item--clickable {
|
|
transition: all 120ms cubic-bezier(0.4, 0, 0.2, 1) !important;
|
|
}
|
|
|
|
/* ── Sidebar divider & separation (neon accent) ── */
|
|
.rcx-sidebar {
|
|
border-right: 1px solid #161616 !important;
|
|
box-shadow: 1px 0 0 rgba(153, 255, 228, 0.08) !important;
|
|
}
|
|
.rcx-sidebar .rcx-divider {
|
|
border-color: #151515 !important;
|
|
margin: 12px 0 !important;
|
|
}
|
|
|
|
/* ── Sidebar section titles (aesthetic caps) ── */
|
|
.rcx-sidebar-title,
|
|
.rcx-sidebar-topbar--section {
|
|
color: #444444 !important;
|
|
letter-spacing: 0.12em;
|
|
text-transform: uppercase;
|
|
font-size: 0.65rem !important;
|
|
font-weight: 700;
|
|
margin: 12px 16px 6px !important;
|
|
padding: 0 !important;
|
|
}
|
|
|
|
/* ── Header & separators ── */
|
|
.rcx-room-header {
|
|
background: #0F0F0F !important;
|
|
border-bottom: 1px solid #1A1A1A !important;
|
|
}
|
|
nav.rcx-sidebar-header {
|
|
background: #0A0A0A !important;
|
|
border-bottom: 1px solid #161616 !important;
|
|
}
|
|
|
|
/* ── Sidebar footer ── */
|
|
.rcx-sidebar-footer {
|
|
background: #0A0A0A !important;
|
|
border-top: 1px solid #161616 !important;
|
|
}
|
|
|
|
/* ── Vertical bar / panels ── */
|
|
.rcx-vertical-bar,
|
|
.rcx-vertical-bar__content,
|
|
.rcx-vertical-bar__header,
|
|
.rcx-contextual-bar {
|
|
background: #0F0F0F !important;
|
|
border-left: 1px solid #1A1A1A !important;
|
|
}
|
|
|
|
|
|
/* ── Option menus ── */
|
|
.rcx-option:hover,
|
|
.rcx-option--focus {
|
|
background: #181818 !important;
|
|
}
|
|
.rcx-option--selected {
|
|
background: #1E1E1E !important;
|
|
}
|
|
|
|
/* ── Modal backdrop ── */
|
|
.rcx-modal__backdrop {
|
|
background: rgba(0, 0, 0, 0.72) !important;
|
|
}
|
|
|
|
/* ── Popover / dropdown ── */
|
|
.rcx-popover,
|
|
.rcx-dropdown {
|
|
background: #141414 !important;
|
|
border: 1px solid #1C1C1C !important;
|
|
}
|
|
|
|
/* ── Unread bar (teal) ── */
|
|
.rcx-message-divider--unread::before,
|
|
.rcx-message-divider--unread::after {
|
|
background-color: #99FFE4 !important;
|
|
}
|
|
|
|
/* ── Mentions: @me gets orange (attention), others are subtle ── */
|
|
.rcx-message-body .mention-link {
|
|
color: #B0B0B0 !important;
|
|
background: rgba(255, 255, 255, 0.04) !important;
|
|
border-radius: 2px;
|
|
padding: 1px 4px;
|
|
}
|
|
.rcx-message-body .mention-link--me {
|
|
color: #FFC799 !important;
|
|
background: rgba(255, 199, 153, 0.08) !important;
|
|
}
|
|
|
|
/* ── Emoji picker ── */
|
|
.rcx-emoji-picker {
|
|
background: #101010 !important;
|
|
border: 1px solid #1C1C1C !important;
|
|
}
|
|
|
|
/* ── Progress bar ── */
|
|
.rcx-progress-bar__fill {
|
|
background: #99FFE4 !important;
|
|
}
|
|
|
|
/* ── Message divider bar ── */
|
|
.rcx-message-divider__bar {
|
|
background: #1C1C1C !important;
|
|
}
|
|
|
|
/* ── Sidebar search input ── */
|
|
.rcx-sidebar-topbar__wrapper input,
|
|
.rcx-sidebar-topbar__wrapper .rcx-input-box {
|
|
background: #141414 !important;
|
|
border-color: #232323 !important;
|
|
color: #B0B0B0 !important;
|
|
}
|
|
|
|
/* ── Sidebar links (tight, glowy on select) ── */
|
|
.rcx-sidebar a,
|
|
.rcx-sidebar-item__link {
|
|
color: #666666 !important;
|
|
transition: color 120ms cubic-bezier(0.4, 0, 0.2, 1) !important;
|
|
font-weight: 500;
|
|
}
|
|
.rcx-sidebar-item--clickable:hover a,
|
|
.rcx-sidebar-item--clickable.is-hovered a {
|
|
color: #888888 !important;
|
|
}
|
|
.rcx-sidebar-item--selected a,
|
|
.rcx-sidebar-item[aria-selected="true"] a,
|
|
.rcx-sidebar-item--selected .rcx-sidebar-item__link,
|
|
.rcx-sidebar-item[aria-selected="true"] .rcx-sidebar-item__link {
|
|
color: #99FFE4 !important;
|
|
text-shadow: 0 0 8px rgba(153, 255, 228, 0.3) !important;
|
|
font-weight: 600;
|
|
}
|
|
|
|
/* ── Room header links (muted teal) ── */
|
|
.rcx-room-header a {
|
|
color: #5CB8A2 !important;
|
|
}
|
|
.rcx-room-header a:hover {
|
|
color: #7AD4BE !important;
|
|
} |