/* LocalRock Element Web — Custom CSS * Injected via nginx sub_filter into Element's . * Applies brand typography, spacing, and layout refinements * that config.json custom_themes cannot control. */ /* ── Serif on editorial surfaces ────────────────────────────── */ /* Message bodies */ .mx_EventTile_body, .mx_EventTile_content, .mx_MTextBody { font-family: 'Source Serif 4', Georgia, 'Noto Serif', serif !important; font-size: 17px !important; line-height: 1.5 !important; } /* Room names / headings */ .mx_RoomHeader_name, .mx_RoomTile_title, .mx_RoomPreviewBar_title, .mx_RoomView_header h2, .mx_SpacePanel_heading, .mx_RoomSublist_headerText, .mx_UserInfo_profile h2 { font-family: 'Source Serif 4', Georgia, 'Noto Serif', serif !important; } /* Dialog titles */ .mx_Dialog_title, .mx_BaseDialog_header h1, .mx_InviteDialog_title, .mx_SettingsTab_heading, .mx_SettingsSubsection_heading { font-family: 'Source Serif 4', Georgia, 'Noto Serif', serif !important; } /* Auth page heading */ .mx_AuthPage h1, .mx_AuthPage h2, .mx_AuthPage_modalBlur h1, .mx_AuthPage_modalBlur h2, .mx_Welcome h1, .mx_Welcome h2 { font-family: 'Source Serif 4', Georgia, 'Noto Serif', serif !important; } /* ── Sans-serif on UI elements (explicit, prevent inheritance) ── */ .mx_MessageTimestamp, .mx_DisambiguatedProfile, .mx_SenderProfile, .mx_ReplyChain_show, .mx_ReadReceiptGroup, .mx_ReactionsRow, .mx_AccessibleButton, .mx_Field label, .mx_Field input, .mx_Field textarea, .mx_Dropdown, .mx_ContextualMenu, .mx_UserMenu, .mx_LeftPanel_filterContainer, .mx_SearchBox, .mx_NotificationBadge, .mx_RoomTile_subtitle, .mx_RoomTile_badge { font-family: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif !important; } /* ── Border radius normalization ────────────────────────────── */ .mx_Dialog, .mx_RoomTile, .mx_AccessibleButton, .mx_Field input, .mx_Field textarea, .mx_MessageComposer_wrapper, .mx_EventTile, .mx_EventTile_reply, .mx_EventTile_content, .mx_ReplyChain_wrapper, .mx_InlineSpinner, .mx_Pill, .mx_Tag, .mx_NotificationBadge, .mx_BaseAvatar, .mx_ContextualMenu, .mx_Tooltip { border-radius: 8px !important; } /* ── Warm scrollbars ────────────────────────────────────────── */ ::-webkit-scrollbar { width: 8px; height: 8px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background-color: #D4CFC9; border-radius: 4px; } ::-webkit-scrollbar-thumb:hover { background-color: #A6A099; } /* Dark mode scrollbars */ .cpd-theme-dark ::-webkit-scrollbar-thumb, [class*="dark"] ::-webkit-scrollbar-thumb { background-color: #504C48; } .cpd-theme-dark ::-webkit-scrollbar-thumb:hover, [class*="dark"] ::-webkit-scrollbar-thumb:hover { background-color: #6D6862; } /* Firefox scrollbar */ * { scrollbar-width: thin; scrollbar-color: #D4CFC9 transparent; } .cpd-theme-dark *, [class*="dark"] * { scrollbar-color: #504C48 transparent; } /* ── Auth page background ───────────────────────────────────── */ .mx_AuthPage, .mx_AuthPage_modalBlur { background-color: #F2EDE4 !important; } .cpd-theme-dark .mx_AuthPage, .cpd-theme-dark .mx_AuthPage_modalBlur, [class*="dark"] .mx_AuthPage, [class*="dark"] .mx_AuthPage_modalBlur { background-color: #1E1E1E !important; }