/* umg-ux-nov4.css v1 (Nov 4 2026; owner umg-ummahchat; UX upgrade, tq 48) LOADED AFTER ummahchat-theme.css (v76) so a same-specificity tie goes to this file. It changes NOTHING in the theme file: to roll back, remove its from index.html (the staged script does this on --rollback). TOKEN SYSTEM The estate system (design-system-umg: tokens.json), as --uc-* variables on :root (day) and body.cpd-theme-dark (night). Day ground cream #FAF8F3, ink #0F1F17, one action green #0A7B3D; night ground #0B1510, ink #F8F5EC, mint action #34D399. LAYOUT Home is a quiet column: greeting, one next step, rooms as rows. The forest rail and room list stay (the product's signature "digital majlis"); they are not restyled here beyond tap size. SIGNATURE The arch tile (umg-my-rooms.css): a mihrab-shaped first-letter tile in place of a round avatar, on Home only. MOTION Transform and opacity only, 150 to 160 ms, cubic-bezier(.2,.8,.2,1). Off under prefers-reduced-motion. None on any sacred text. is_dark:false NOTE config.json registers the custom theme as LIGHT, so every Compound --cpd-color-* token resolves LIGHT even on the forest rail. This file states every colour it paints. The NIGHT block below only applies under body.cpd-theme-dark (Element's own Dark theme, which the theme file's Section 49 used to hide; section N1 unhides it and calls it Night). WHAT ELEMENT DOES NOT LET US CHANGE: see the staged script's report. No Element source is patched here. */ /* ================= FONTS: self-hosted (CSP font-src 'self'); no third-party font host ================= */ @font-face{font-family:'Literata';font-style:normal;font-weight:500;font-display:swap;src:url(fonts/literata-latin-500-normal.woff2) format('woff2')} @font-face{font-family:'Literata';font-style:normal;font-weight:600;font-display:swap;src:url(fonts/literata-latin-600-normal.woff2) format('woff2')} @font-face{font-family:'Instrument Sans';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/instrument-sans-latin-400-normal.woff2) format('woff2')} @font-face{font-family:'Instrument Sans';font-style:normal;font-weight:500;font-display:swap;src:url(fonts/instrument-sans-latin-500-normal.woff2) format('woff2')} @font-face{font-family:'Instrument Sans';font-style:normal;font-weight:600;font-display:swap;src:url(fonts/instrument-sans-latin-600-normal.woff2) format('woff2')} /* ================= TOKENS ================= */ :root{ --uc-ground:#FAF8F3;--uc-surface:#FFFFFF;--uc-sunken:#F0EDE3; --uc-ink:#0F1F17;--uc-ink-soft:#4A5C52;--uc-line:#6F7B74;--uc-hair:rgba(15,31,23,.12); --uc-action:#0A7B3D;--uc-action-press:#166534;--uc-on-action:#FFFFFF; --uc-tint-mint:#EAF7EE;--uc-tint-ink:#0A6B35;--uc-err:#B42318; --uc-ease:cubic-bezier(.2,.8,.2,1); } body.cpd-theme-dark{ --uc-ground:#0B1510;--uc-surface:#14221A;--uc-sunken:#101C15; --uc-ink:#F8F5EC;--uc-ink-soft:#B9C6BD;--uc-line:#7E9487;--uc-hair:rgba(248,245,236,.14); --uc-action:#34D399;--uc-action-press:#6EE7B7;--uc-on-action:#0B1510; --uc-tint-mint:#173427;--uc-tint-ink:#6EE7B7;--uc-err:#FF9C8F; } /* ================= HOME ================= */ body .mx_HomePage.mx_HomePage{ background:var(--uc-ground)!important;color:var(--uc-ink); display:flex!important;flex-direction:column;align-items:center;justify-content:flex-start; overflow-y:auto;width:100%!important; } body .mx_HomePage.mx_HomePage::before{display:none!important} /* the 12% gold star of the old theme: gone, calmer page */ body .mx_HomePage.mx_HomePage > .mx_HomePage_body{width:100%;flex:none} /* the floating buttons: their jobs moved into Home (umg-my-rooms.js presses them). They stay in the DOM so those presses work. */ #umg-nfr-btn,#umg-dbh-btn{display:none!important} /* ================= PHONE (the room list is collapsed to 0 px by Element here; Home is the map) ================= */ @media (max-width:999px){ /* the white drag handle between the rail and the page, on Home */ body:not([data-uc-room-open]) .mx_SpacePanel + div + div{display:none!important} } @media (max-width:768px){ /* 44 px tap targets in the rail, the room header and the composer */ .mx_SpacePanel :is(button,[role=button],[role=treeitem],[role=tab]):not([class*="otificationBadge"]){min-width:44px;min-height:44px} .mx_SpacePanel :is([aria-label="Expand"],[aria-label="Create a space"]){display:none!important} /* the rail-widening arrow: 18 px, and no use with one or two spaces */ [class*="_icon-button_"]{--cpd-icon-button-size:44px!important} .mx_MessageComposer :is(button,[role=button]){min-width:44px;min-height:44px} .mx_GenericEventListSummary_toggle{display:inline-flex;align-items:center;min-height:44px} } @media (max-width:560px){ /* room header: the room NAME was squeezed to nothing. Give the name the room, drop what a phone cannot use. */ header.mx_RoomHeader > button[aria-label="Open room settings"]{display:none!important} header.mx_RoomHeader button[aria-label^="You do not have permission"]{display:none!important} header.mx_RoomHeader > div:has(.mx_FacePile){display:none!important} /* the face pile (79 px): Room info lists the members */ header.mx_RoomHeader .mx_RoomHeader_info [role="heading"]{max-width:none!important;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} header.mx_RoomHeader .mx_RoomHeader_infoWrapper{flex:1 1 0!important;min-width:0!important;max-width:none!important} header.mx_RoomHeader .mx_RoomHeader_info{min-width:0;max-width:100%} header.mx_RoomHeader :is(.mx_RoomHeader_heading,.mx_RoomHeader_truncated,.mx_RoomHeader_info > *){min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} } /* ================= PRESS STATE for our own buttons (pointer only) ================= */ @media (hover:hover) and (pointer:fine){ #umg-my-rooms .umg-mr-primary:hover{transform:translateY(-1px)} } @media (prefers-reduced-motion:reduce){ *{scroll-behavior:auto!important} } /* ================= SETTINGS ON A PHONE ================= Probed Nov 4 at 390 px (Element 1.12.30): the dialog is fixed 390x844 but its content box is 0 px tall and the tab view sits absolute at y=98 with a height of 844, so the panel ran off the bottom; the tab list was an icon-only column 489 px tall. Now: a title bar, a row of LABELLED tabs you swipe, one scrolling panel. */ @media (max-width:768px){ body .mx_UserSettingsDialog{display:flex!important;flex-direction:column;position:fixed!important;inset:0!important;width:100vw!important;max-width:100vw!important;height:100dvh!important;max-height:100dvh!important;margin:0!important;padding:0!important;border-radius:0!important;overflow:hidden;background:var(--uc-ground)!important;color:var(--uc-ink)} body .mx_UserSettingsDialog .mx_Dialog_header{flex:none;display:flex;align-items:center;min-height:60px;padding:8px 64px 8px 16px;border-bottom:1px solid var(--uc-hair)} body .mx_UserSettingsDialog .mx_Dialog_title{margin:0;font-family:'Literata',Georgia,serif;font-weight:500;font-size:20px;line-height:1.2;color:var(--uc-ink)} body .mx_UserSettingsDialog .mx_UserSettingsDialog_title_strong{font-weight:600} body .mx_UserSettingsDialog .mx_Dialog_cancelButton{top:8px;right:8px} body .mx_UserSettingsDialog .mx_SettingsDialog_content{flex:1 1 0;min-height:0;height:auto!important;display:flex;flex-direction:column;position:relative;overflow:hidden} body .mx_UserSettingsDialog .mx_TabbedView{position:static!important;inset:auto!important;display:flex;flex-direction:column;flex:1 1 0;min-height:0;width:100%;height:auto!important} body .mx_UserSettingsDialog .mx_TabbedView_tabLabels{position:static!important;flex:none;display:flex!important;flex-direction:row;align-items:center;gap:6px;overflow-x:auto;overflow-y:hidden;width:100%!important;max-width:none!important;height:auto!important;margin:0;padding:8px 12px;border-bottom:1px solid var(--uc-hair);scrollbar-width:none;-webkit-mask-image:linear-gradient(to right,#000 calc(100% - 32px),transparent)!important;mask-image:linear-gradient(to right,#000 calc(100% - 32px),transparent)!important} body .mx_UserSettingsDialog .mx_TabbedView_tabLabels::-webkit-scrollbar{display:none} body .mx_UserSettingsDialog .mx_TabbedView_tabLabel{flex:none;display:flex!important;align-items:center;gap:8px;min-height:44px;width:auto!important;padding:0 14px!important;border-radius:22px;color:var(--uc-ink);background:transparent;white-space:nowrap} body .mx_UserSettingsDialog .mx_TabbedView_tabLabel svg{flex:none;width:20px;height:20px} body .mx_UserSettingsDialog .mx_TabbedView_tabLabel_text{display:inline!important;position:static!important;font-size:15px;font-weight:500;color:inherit} body .mx_UserSettingsDialog .mx_TabbedView_tabLabel_active{background:var(--uc-tint-mint)!important;color:var(--uc-tint-ink)!important;box-shadow:none!important} body .mx_UserSettingsDialog .mx_TabbedView_tabLabel_active::before,body .mx_UserSettingsDialog .mx_TabbedView_tabLabel_active::after{display:none!important} body .mx_UserSettingsDialog .mx_TabbedView_tabPanel{flex:1 1 0;min-height:0;width:100%!important;max-width:none!important;margin:0!important;display:flex;flex-direction:column;overflow:hidden} body .mx_UserSettingsDialog .mx_TabbedView_tabPanelContent{flex:1 1 0;min-height:0;height:auto!important;overflow-y:auto;padding:16px!important} body .mx_UserSettingsDialog .mx_SettingsTab{width:100%!important;max-width:100%!important;padding:0!important} body .mx_UserSettingsDialog .mx_SettingsTab_sections{display:flex!important;flex-direction:column;gap:24px;width:100%!important} body .mx_UserSettingsDialog .mx_SettingsSection{width:100%!important;max-width:100%!important} body .mx_UserSettingsDialog :is(.mx_SettingsTab,.mx_SettingsTab_sections,.mx_SettingsSection,.mx_SettingsSubsection,.mx_SettingsSubsection_content,.mx_SettingsFlag,.mx_SettingsFlag_label){min-width:0!important;max-width:100%!important;box-sizing:border-box} body .mx_UserSettingsDialog .mx_TabbedView_tabPanelContent{overflow-x:hidden} } /* tooltips that stick after a tap (a phone has no hover): off on touch screens. Every control keeps its aria-label. */ @media (hover:none),(max-width:768px){ [role="tooltip"],[class*="_tooltip_"]{display:none!important} } /* the integration-manager switch: the manager is off in config.json, so the switch would do nothing */ .mx_UserSettingsDialog form.mx_SetIntegrationManager{display:none!important} /* ================= NIGHT (section N1): Element's own Dark theme, offered as "Night" ================= The theme file's Section 49 hid Dark, High contrast and Match system because picking Dark gave an unstyled stock theme. This block styles it with the estate night values and shows the Dark option. High contrast and Match system stay hidden. A night layer needs EVERY surface (design-system quality.md: a token flip once left white cards on cream text at 1.09:1), so it is checked surface by surface in a real browser. Night is a member's choice (Settings, Appearance). No member is moved to it. */ body .mx_ThemeChoicePanel_themeSelector:has(input[name="themeSelector"][value="dark"]){display:block!important} body #mx_QuickSettingsButton_themePickerDropdown__dark{display:block!important} body.cpd-theme-dark.cpd-theme-dark{ /* Element's dark palette is a blue-grey ramp (#101317 up to white). Re-tint the ramp to the estate night greens; every semantic token follows it. */ --cpd-color-theme-bg:#0B1510; --cpd-color-gray-100:#0E1913;--cpd-color-gray-200:#101C15;--cpd-color-gray-300:#14221A;--cpd-color-gray-400:#1B2D22; --cpd-color-gray-500:#243A2D;--cpd-color-gray-600:#2E4637;--cpd-color-gray-700:#4A6556;--cpd-color-gray-800:#7E9487; --cpd-color-gray-900:#98AEA2;--cpd-color-gray-1000:#AEBFB4;--cpd-color-gray-1100:#C4D0C8;--cpd-color-gray-1200:#DAE3DD; --cpd-color-gray-1300:#EDF1EA;--cpd-color-gray-1400:#F8F5EC; /* the one action colour: mint at night, dark ink on it */ --cpd-color-bg-action-primary-rest:#34D399;--cpd-color-bg-action-primary-hovered:#6EE7B7;--cpd-color-bg-action-primary-pressed:#6EE7B7; --cpd-color-text-on-solid-primary:#0B1510; --cpd-color-text-action-accent:#34D399;--cpd-color-icon-accent-primary:#34D399;--cpd-color-border-focused:#34D399; color-scheme:dark; } /* night, surface by surface: the places where our light theme painted cream with !important */ body.cpd-theme-dark :is(.mx_SpotlightDialog,.mx_SpotlightDialog_wrapper,[class*="_spotlightDialog_"]){background-color:var(--uc-surface)!important;color:var(--uc-ink)!important} body.cpd-theme-dark :is(.mx_SpotlightDialog_searchBox,.mx_SpotlightDialog_searchBox input,[class*="_searchBox_"] input){background-color:var(--uc-sunken)!important;color:var(--uc-ink)!important;border-color:var(--uc-hair)!important} body.cpd-theme-dark :is(.mx_SpotlightDialog_option,[class*="_option_"][class*="_spotlight_"]){color:var(--uc-ink)!important} body.cpd-theme-dark :is(.mx_SpotlightDialog_option:hover,[class*="_option_"][class*="_spotlight_"]:hover){background-color:var(--uc-sunken)!important} body.cpd-theme-dark :is([class*="_optionSection_"],.mx_SpotlightDialog_section h4){color:var(--uc-ink-soft)!important} body.cpd-theme-dark :is(#umg-dbh-card,[class*="umg-nfr-card"],#umg-nfr-card){background:var(--uc-surface)!important;color:var(--uc-ink)!important;border:1px solid var(--uc-hair)} body.cpd-theme-dark :is(#umg-dbh-card,[class*="umg-nfr-card"],#umg-nfr-card) :is(h2,label,p,div,span,li){color:var(--uc-ink)!important} body.cpd-theme-dark :is(#umg-dbh-card,[class*="umg-nfr-card"],#umg-nfr-card) .umg-nfr-sub{color:var(--uc-ink-soft)!important} body.cpd-theme-dark :is(#umg-dbh-card,[class*="umg-nfr-card"],#umg-nfr-card) input{background:var(--uc-sunken)!important;color:var(--uc-ink)!important;border:1px solid var(--uc-line)!important} body.cpd-theme-dark :is(.umg-nfr-btn-primary,#umg-dbh-card button[type="submit"]){background:var(--uc-action)!important;color:var(--uc-on-action)!important;border-color:var(--uc-action)!important} body.cpd-theme-dark :is(.umg-nfr-btn-secondary,.umg-nfr-btn-outline){background:transparent!important;color:var(--uc-ink)!important;border:1px solid var(--uc-line)!important} body.cpd-theme-dark .mx_UserSettingsDialog .mx_TabbedView_tabLabel :is(.mx_TabbedView_tabLabel_text,svg,path){color:var(--uc-ink)!important;background:transparent!important} body.cpd-theme-dark .mx_UserSettingsDialog .mx_TabbedView_tabLabel_active :is(.mx_TabbedView_tabLabel_text,svg){color:var(--uc-tint-ink)!important} body.cpd-theme-dark :is(.mx_EmojiPicker,.mx_EmojiPicker_header,.mx_EmojiPicker_body,.mx_EmojiPicker_footer,.mx_EmojiPicker_preview,.mx_EmojiPicker_search,.mx_EmojiPicker_category,.mx_EmojiPicker_list){background-color:var(--uc-surface)!important;color:var(--uc-ink)!important} body.cpd-theme-dark .mx_EmojiPicker :is(input,.mx_Field input){background-color:var(--uc-sunken)!important;color:var(--uc-ink)!important;border-color:var(--uc-line)!important} body.cpd-theme-dark .mx_EmojiPicker :is(h2,h3,.mx_EmojiPicker_category_label,.mx_EmojiPicker_name){color:var(--uc-ink-soft)!important} /* ================= FIRST-RUN CARD: the recovery-password overlay (copy is in umg-e2ee-recovery.js) ================= Seen by every new member on their first screen. Was: 18 px title centred, 11 to 13 px helper text at 3:1, a link-sized "Not now", 40 px inputs. Now: left-aligned, 17 px help, 4.5:1 or better, 48 px fields and buttons, "Not now" as a real button. Day and night. */ #umg-e2ee-recovery-card{text-align:left;max-width:440px;background:var(--uc-ground);color:var(--uc-ink);border-top:0;border:1px solid var(--uc-hair);border-radius:20px;padding:28px 24px 24px;font-family:'Instrument Sans',system-ui,sans-serif} #umg-e2ee-recovery-card h2{font-family:'Literata',Georgia,serif;font-weight:600;font-size:24px;line-height:1.2;margin:14px 0 10px;color:var(--uc-ink);text-wrap:balance} #umg-e2ee-recovery-card .umg-e2ee-icon{margin:0;width:52px;height:56px;border-radius:26px 26px 10px 10px;background:var(--uc-tint-mint);color:var(--uc-tint-ink)} #umg-e2ee-recovery-card .umg-e2ee-sub{font-size:16px;line-height:1.5;color:var(--uc-ink-soft);margin:0 0 18px} #umg-e2ee-recovery-card label{font-size:15px;font-weight:600;color:var(--uc-ink);margin:14px 0 6px} #umg-e2ee-recovery-card input[type="password"]{min-height:48px;font-size:16px;border:1px solid var(--uc-line);border-radius:12px;background:var(--uc-surface);color:var(--uc-ink)} #umg-e2ee-recovery-card input[type="password"]:focus{border-color:var(--uc-action);outline:3px solid var(--uc-action);outline-offset:1px} #umg-e2ee-recovery-card .umg-e2ee-rules{font-size:14px;color:var(--uc-ink-soft);line-height:1.6} #umg-e2ee-recovery-card .umg-e2ee-rule-ok{color:var(--uc-tint-ink);font-weight:600} #umg-e2ee-recovery-card .umg-e2ee-footnote{font-size:14px;color:var(--uc-ink-soft);margin-top:16px;line-height:1.5} #umg-e2ee-recovery-card .umg-e2ee-btn-primary{min-height:52px;border-radius:12px;background:var(--uc-action);color:var(--uc-on-action);font-size:17px;font-weight:600;margin-top:18px} #umg-e2ee-recovery-card .umg-e2ee-btn-primary:hover{background:var(--uc-action-press)} #umg-e2ee-recovery-card .umg-e2ee-btn-primary:disabled{opacity:1;background:var(--uc-sunken);color:var(--uc-ink-soft);border:1px solid var(--uc-hair)} #umg-e2ee-recovery-card :is(.umg-e2ee-btn-secondary,.umg-e2ee-btn-notnow){display:flex;align-items:center;justify-content:center;width:100%;min-height:48px;margin-top:10px;border:1px solid var(--uc-line);border-radius:12px;background:transparent;color:var(--uc-ink);font:inherit;font-size:16px;font-weight:600;text-decoration:none;cursor:pointer} #umg-e2ee-recovery-card :is(.umg-e2ee-btn-secondary,.umg-e2ee-btn-notnow):hover{background:var(--uc-sunken)} #umg-e2ee-recovery-card .umg-e2ee-error{font-size:15px;color:var(--uc-err);background:transparent;border:1px solid var(--uc-err)} @media (max-width:480px){#umg-e2ee-recovery-card{padding:24px 20px 20px;border-radius:20px}} /* the app was 47 px shorter than a phone screen: a white band under the rail (body background showed through). One viewport, one app. */ @media (max-width:999px){ html,body{background-color:var(--uc-ground)} #matrixchat,.mx_MatrixChat_wrapper,.mx_MatrixChat{min-height:100dvh} } /* public-room directory on a phone: the Matrix address and the Enter-key hint squeezed the room name to "The Lob...". Names wrap, View and Join are 44 px. */ @media (max-width:560px){ .mx_SpotlightDialog_result_publicRoomAlias,.mx_SpotlightDialog_enterPrompt{display:none!important} .mx_SpotlightDialog_result_publicRoomName{white-space:normal!important;overflow:visible!important;text-overflow:clip!important} .mx_SpotlightDialog_result_publicRoomHeader{flex-wrap:wrap} .mx_SpotlightDialog_option--endAdornment .mx_AccessibleButton{min-height:44px;min-width:68px;display:inline-flex;align-items:center;justify-content:center} } /* night: the phone back chevron was dark on dark */ body.cpd-theme-dark #umg-mobile-back-btn{color:var(--uc-ink)!important;background:var(--uc-sunken)!important}