115 lines
8.4 KiB
CSS
115 lines
8.4 KiB
CSS
/* FLAME HQ estate skin v2.1.0 (2026-08-24, prime-4) — palette MEASURED from the rendered
|
|
* Nextcloud/Blackbox theme (drive.b2bgrowth.systems, dark): primary #E76927 (hover #EB7D44),
|
|
* ground #0d0d0f, panel #141419, hover #1b1b21, text #EBEBEB, muted #999999, hairline
|
|
* borders rgba(255,255,255,.07), radius 8px, primary buttons FILLED orange / white text.
|
|
* Served at /flame-hq/flame-hq.css via nginx sub_filter. HOST-EDITABLE, no restart. */
|
|
:root { color-scheme: dark; }
|
|
:root, .cpd-theme-light, .cpd-theme-dark {
|
|
--cpd-color-bg-canvas-default: #0d0d0f;
|
|
--cpd-color-bg-canvas-disabled: #0d0d0f;
|
|
--cpd-color-bg-subtle-primary: #1b1b21;
|
|
--cpd-color-bg-subtle-secondary: #141419;
|
|
--cpd-color-bg-action-primary-rest: #E76927;
|
|
--cpd-color-bg-action-primary-hovered: #EB7D44;
|
|
--cpd-color-bg-action-primary-pressed: #d55f20;
|
|
--cpd-color-bg-action-secondary-rest: transparent;
|
|
--cpd-color-bg-action-secondary-hovered: #1b1b21;
|
|
--cpd-color-bg-accent-rest: #E76927;
|
|
--cpd-color-bg-accent-hovered: #EB7D44;
|
|
--cpd-color-bg-critical-primary: #E76927;
|
|
--cpd-color-bg-critical-subtle: rgba(231,105,39,0.16);
|
|
--cpd-color-text-primary: #EBEBEB;
|
|
--cpd-color-text-secondary: #999999;
|
|
--cpd-color-text-placeholder: #6f6f6f;
|
|
--cpd-color-text-action-accent: #E76927;
|
|
--cpd-color-text-link-external: #EB7D44;
|
|
--cpd-color-text-on-solid-primary: #ffffff;
|
|
--cpd-color-text-critical-primary: #EB7D44;
|
|
--cpd-color-icon-primary: #EBEBEB;
|
|
--cpd-color-icon-secondary: #999999;
|
|
--cpd-color-icon-tertiary: #8a8a8a;
|
|
--cpd-color-icon-accent-primary: #E76927;
|
|
--cpd-color-icon-accent-tertiary: #E76927;
|
|
--cpd-color-icon-on-solid-primary: #ffffff;
|
|
--cpd-color-icon-critical-primary: #EB7D44;
|
|
--cpd-color-border-interactive-primary: rgba(255,255,255,0.10);
|
|
--cpd-color-border-interactive-secondary: rgba(255,255,255,0.07);
|
|
--cpd-color-border-interactive-hovered: #E76927;
|
|
--cpd-color-border-focused: #E76927;
|
|
--cpd-color-border-critical-primary: #E76927;
|
|
--cpd-color-border-critical-subtle: rgba(231,105,39,0.4);
|
|
--cpd-color-border-disabled: rgba(255,255,255,0.07);
|
|
--cpd-font-family-sans: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
|
|
/* legacy element vars */
|
|
--accent: #E76927; --accent-color: #E76927; --primary-color: #E76927; --alert: #E76927;
|
|
--roomlist-highlights-color: rgba(231,105,39,0.16);
|
|
--panel-actions: #1b1b21;
|
|
}
|
|
body, .mx_MatrixChat, .mx_MatrixChat_wrapper { font-family: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; }
|
|
|
|
/* ---------- pre-login (auth) page ---------- */
|
|
.mx_AuthPage { background: #0d0d0f !important; }
|
|
.mx_AuthPage .mx_AuthBody, .mx_AuthBody { background: #141419 !important; color: #EBEBEB !important; border: 1px solid rgba(255,255,255,0.07); border-radius: 8px; }
|
|
.mx_AuthBody h1, .mx_AuthBody h2, .mx_AuthBody h3, .mx_AuthBody label, .mx_AuthHeader { color: #EBEBEB !important; }
|
|
.mx_AuthBody input, .mx_AuthBody .mx_Field input, .mx_AuthBody .mx_Field select { background: #0d0d0f !important; color: #EBEBEB !important; border-color: rgba(255,255,255,0.10) !important; border-radius: 8px; }
|
|
.mx_AuthBody .mx_Field input:focus { border-color: #E76927 !important; }
|
|
.mx_AuthFooter, .mx_AuthFooter a { color: #999999 !important; }
|
|
.mx_AuthBody a { color: #EB7D44 !important; }
|
|
.mx_SSOButton { background: #E76927 !important; color: #ffffff !important; border: 0 !important; border-radius: 8px !important; font-weight: 600; }
|
|
.mx_SSOButton:hover { background: #EB7D44 !important; }
|
|
.mx_AuthHeaderLogo img, .mx_AuthHeader img { max-height: 112px !important; max-width: 112px !important; object-fit: contain; }
|
|
.mx_Welcome, .mx_WelcomePage, .mx_EmbeddedPage, .mx_EmbeddedPage iframe { background: #0d0d0f !important; color: #EBEBEB !important; }
|
|
.mx_EmbeddedPage iframe { border: 0; }
|
|
|
|
/* ---------- app chrome ---------- */
|
|
.mx_SpacePanel { background: #0d0d0f !important; border-right: 1px solid rgba(255,255,255,0.07); }
|
|
.mx_LeftPanel, .mx_RoomListPanel, .mx_RoomList, .mx_RoomListView { background: #0d0d0f !important; }
|
|
.mx_LeftPanel { border-right: 1px solid rgba(255,255,255,0.07) !important; }
|
|
.mx_RoomHeader, .mx_RoomView_body, .mx_MessageComposer, .mx_RoomView_timeline { background: #0d0d0f !important; }
|
|
.mx_RoomHeader { border-bottom: 1px solid rgba(255,255,255,0.07) !important; }
|
|
.mx_MessageComposer_wrapper { border-top: 1px solid rgba(255,255,255,0.07) !important; padding-left: 16px !important; /* v2.1.1: collapse dead 42px E2E gutter (shield hidden by owner law) that read as a black square clipping the composer left edge */ }
|
|
.mx_BasicMessageComposer_input, .mx_MessageComposer .mx_MessageComposer_row { background: #141419 !important; border-radius: 8px; }
|
|
/* selected / hovered room (v2.1): Element 1.12 room list uses CSS-module hashed classes and paints the
|
|
* row with Compound tokens --cpd-color-bg-action-tertiary-{hovered,selected} (light grey stock).
|
|
* Override the TOKENS (hash-proof) + hash-agnostic selectors: orange tint selected, panel-dark hover. */
|
|
:root, .cpd-theme-light, .cpd-theme-dark {
|
|
--cpd-color-bg-action-tertiary-rest: transparent;
|
|
--cpd-color-bg-action-tertiary-hovered: #1b1b21;
|
|
--cpd-color-bg-action-tertiary-selected: rgba(231,105,39,0.16);
|
|
--cpd-color-bg-action-tertiary-pressed: rgba(231,105,39,0.24);
|
|
--cpd-color-bg-action-secondary-pressed: #1b1b21;
|
|
}
|
|
[class*="_roomListItem_"][class*="_selected_"] [class*="_container_"] { background-color: rgba(231,105,39,0.16) !important; }
|
|
[class*="_roomListItem_"]:hover [class*="_container_"] { background-color: #1b1b21 !important; }
|
|
[class*="_roomListItem_"][class*="_selected_"]:hover [class*="_container_"] { background-color: rgba(231,105,39,0.22) !important; }
|
|
[class*="_roomListItem_"][class*="_selected_"], [class*="_roomListItem_"]:hover { color: #EBEBEB !important; }
|
|
.mx_RoomTile_selected, .mx_RoomTile:hover, .mx_EntityTile:hover, .mx_MemberTileView:hover, .mx_AccessibleButton_hasKind.mx_AccessibleButton_kind_secondary:hover { background: #1b1b21 !important; color: #EBEBEB !important; }
|
|
/* filter chips + primary actions: filled orange / white when active */
|
|
.mx_RoomListHeader_filter[aria-selected="true"], .mx_RoomListPrimaryFilters_button[aria-selected="true"], .mx_RoomListPrimaryFilters [aria-selected="true"] { background: #E76927 !important; color: #ffffff !important; border-color: #E76927 !important; }
|
|
.mx_AccessibleButton_kind_primary { background: #E76927 !important; color: #ffffff !important; border-radius: 8px !important; }
|
|
.mx_AccessibleButton_kind_primary:hover { background: #EB7D44 !important; }
|
|
/* unread badges: orange, like the estate */
|
|
.mx_NotificationBadge_level_notification, .mx_NotificationBadge_level_highlight { background: #E76927 !important; color: #ffffff !important; border: 0 !important; }
|
|
.mx_NotificationBadge_dot { background: #E76927 !important; }
|
|
|
|
/* ---------- home ---------- */
|
|
.mx_HomePage_default_wrapper h1 { color: #EBEBEB !important; }
|
|
.mx_HomePage_default_wrapper h4 { color: #999999 !important; }
|
|
.mx_HomePage_default_wrapper img { width: 112px !important; height: 112px !important; }
|
|
.mx_HomePage_default_buttons .mx_AccessibleButton { background: #141419 !important; color: #EBEBEB !important; border: 1px solid rgba(255,255,255,0.10) !important; border-radius: 8px !important; }
|
|
.mx_HomePage_default_buttons .mx_AccessibleButton:hover { border-color: #E76927 !important; background: #1b1b21 !important; }
|
|
.mx_HomePage_default_buttons .mx_AccessibleButton::before { background-color: #E76927 !important; }
|
|
.mx_HomePage_button_explore, .mx_HomePage_button_exploreRooms { display: none !important; }
|
|
|
|
/* ---------- owner law 2026-08-24: no E2E shields / unverified red dots ---------- */
|
|
.mx_EventTile_e2eIcon, .mx_EventTile_e2eIcon_warning, .mx_EventTile_e2eIcon_unverified, .mx_EventTile_e2eIcon_unknown,
|
|
.mx_E2EIcon, .mx_E2EIcon_warning, .mx_E2EIcon_normal,
|
|
.mx_RoomTile_e2eIcon, .mx_DecoratedRoomAvatar_icon_e2e, .mx_UserInfo_verifyButton,
|
|
.mx_MessagePanel_e2eIcon, .mx_RoomHeader_e2eIcon { display: none !important; }
|
|
|
|
/* ---------- v2.1.2 (owner 2026-08-24): ONLINE presence dot = standard green ---------- */
|
|
/* The skin's global --cpd-color-icon-accent-primary (#E76927) also tinted the online presence
|
|
* dot orange. Scope online back to Element's own success green; away (unavailable) / busy (dnd) /
|
|
* offline keep their stock tertiary/quaternary greys - semantics untouched. */
|
|
.mx_PresenceIconView_online { color: var(--cpd-color-text-success-primary, #0DBD8B) !important; }
|