@layer compound-tokens, compound-web, shared-components, app-web; @layer compound-tokens, compound-web, shared-components, app-web; @layer compound-tokens{ @layer cpd-semantic, custom, cpd-base; } @layer app-web{ /* Copyright 2024 New Vector Ltd. Copyright 2020 The Matrix.org Foundation C.I.C. SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial Please see LICENSE files in the repository root for full details. */ /* * SCSS variables defining a range of font sizes. * * These are defined in `rem` so that they scale with the `font-size` of the root element (which is adjustable via the * "Font size" setting). They exist to make the job of converting designs (which tend to be based in pixels) into CSS * easier. */ /* * These variables are now *deprecated* and should not be used in new code; instead Compound typographic tokens * should be used. Direct equivalents for these old font size tokens are listed below; where no equivalent exists, * that suggests that the design is using a non-standard font size and should be updated. * * In fact, modern Figma designs should actually use a named Typography style such as "Web/font/heading/sm/semibold", * translates directly to `font: var(--cpd-font-heading-sm-semibold)`. */ /* Compound equivalent: --cpd-font-size-body-xs */ /* Compound equivalent: --cpd-font-size-body-sm */ /* Compound equivalent: --cpd-font-size-body-md */ /* Compound equivalent: --cpd-font-size-body-lg */ /* Compound equivalent: --cpd-font-size-heading-sm */ /* Compound equivalent: --cpd-font-size-heading-md */ /* Compound equivalent: --cpd-font-size-heading-lg */ /* Compound equivalent: --cpd-font-size-heading-xl */ } @layer app-web{ /* * Nunito. * Includes extended Latin and Vietnamese character sets * Current URLs are taken from * https://github.com/alexeiva/NunitoFont/releases/tag/v3.500 * ...in order to include cyrillic. * * Previously, they were * https://fonts.googleapis.com/css?family=Nunito:400,400i,600,600i,700,700i&subset=latin-ext,vietnamese * * We explicitly do not include Nunito's italic variants, as they are not italic enough * and it's better to rely on the browser's built-in obliquing behaviour. */ /* Grab the other fonts from the current theme, so we can override to Inter */ /* in custom fonts if needed. */ } @layer app-web{ /* the 'src' links are relative to the bundle.css, which is in a subdirectory. */ /* Twemoji COLR */ @font-face { font-family: "Twemoji"; font-weight: 400; src: url(../../fonts/Twemoji_Mozilla/TwemojiMozilla-colr.666a113.woff2) format("woff2"); } /* For at least Chrome on Windows 10, we have to explictly add extra weights for the emoji to appear in bold messages, etc. */ @font-face { font-family: "Twemoji"; font-weight: 600; src: url(../../fonts/Twemoji_Mozilla/TwemojiMozilla-colr.666a113.woff2) format("woff2"); } @font-face { font-family: "Twemoji"; font-weight: 700; src: url(../../fonts/Twemoji_Mozilla/TwemojiMozilla-colr.666a113.woff2) format("woff2"); } } @layer app-web{ /* Nunito as the default, for old time's sake on legacy themes. */ /* the 'src' links are relative to the bundle.css, which is in a subdirectory. */ @font-face { font-family: "Nunito"; font-style: normal; font-weight: 400; src: url(../../fonts/Nunito/Nunito-Regular.d3e2991.ttf) format("truetype"); } @font-face { font-family: "Nunito"; font-style: normal; font-weight: 600; src: url(../../fonts/Nunito/Nunito-SemiBold.58f5995.ttf) format("truetype"); } @font-face { font-family: "Nunito"; font-style: normal; font-weight: 700; src: url(../../fonts/Nunito/Nunito-Bold.b3a1698.ttf) format("truetype"); } } @layer app-web{ :root { /* This is set to Twemoji when the user opts into the bundled emoji font */ --emoji-font-family: ""; } /* Nunito lacks combining diacritics, so these will fall through to the next font. Helevetica's diacritics sometimes do not combine nicely (on OSX, at least) and result in a huge horizontal mess. Arial empirically gets it right, hence prioritising Arial here. */ /* Noto Color Emoji contains digits, in fixed-width, therefore causing digits in flowed text to stand out. TODO: Consider putting all emoji fonts to the end rather than the front. */ /* unified palette */ /* try to use these colors when possible */ /* typical text (dark-on-white in light skin) */ /* Commonly used in headings and relevant alt text */ /* used for dialog box text */ /* used for focusing form controls */ /* button UI (white-on-green in light skin) */ /* informational plinth */ /* left-panel style muted accent color */ /* used by RoomDropTarget */ /* used by Autocomplete */ /* selected for hoverover & selected event tiles */ /* used for the hairline dividers in RoomView */ /* used for the border of input text fields */ /* apart from login forms, which have stronger border */ /* used for UserSettings EditableText */ /* scrollbars */ /* context menus */ /* ******************** */ /* Legacy theme backports */ /* Legacy theme backports */ /* ******************** */ /* XXX: Color from dark theme */ /* All of these are from dark theme */ /** * Creating a `semantic` color scale. This will not be needed with the new * visual language, but necessary during the transition period * This abstract the `green` away from where accent shades are used * Take: `background: rgba($accent, 0.1);` * would be transformed to: `background: $accent-300;` * * To use under very rare circumstances, always prefer the semantics defined * in https://compound.element.io/?path=/docs/tokens-semantic-colors--docs */ /* ******************** */ /* ******************** */ /* $event-highlight-bg-color shares this value, */ /* so to not make their order dependent on who depends on who, have a shared value */ /* defined before both */ /* event timestamp */ /* e2e */ /*** ImageView ***/ /* Tabbed views */ /* Buttons */ /* TODO: Verify color */ /* Toggle switch */ /* See non-legacy _light for variable information */ /* Bubble tiles */ /* pinned events indicator */ /* Location sharing */ /* ******************** */ /* ******************** */ body { color-scheme: light; } /* diff highlight colors */ .hljs-addition { background: #dfd; } .hljs-deletion { background: #fdd; } } @layer app-web{ /* Colors from Figma Compound https://www.figma.com/file/X4XTH9iS2KGJ2wFKDqkyed/Compound?node-id=559%3A741 */ /* unified palette */ /* try to use these colors when possible */ /* typical text (dark-on-white in light skin) */ /* used for dialog box text */ /* used for focusing form controls */ /* informational plinth */ /* used by Autocomplete */ /* selected for hoverover & selected event tiles */ /* used for the hairline dividers in RoomView */ /* used for the border of input text fields */ /* scrollbars */ /* context menus */ /* Legacy theme backports */ /** * Creating a `semantic` color scale. This will not be needed with the new * visual language, but necessary during the transition period * This abstract the `green` away from where accent shades are used * Take: `background: rgba($accent, 0.1);` * would be transformed to: `background: $accent-300;` * * To use under very rare circumstances, always prefer the semantics defined * in https://compound.element.io/?path=/docs/tokens-semantic-colors--docs */ /* Legacy theme backports */ /* ******************** */ /* ******************** */ /* event timestamp */ /* Tabbed views */ /* Buttons */ /* TODO: Verify color */ /* Toggle switch */ /* See non-legacy dark for variable information */ /* Bubble tiles */ /* Location sharing */ /* ******************** */ /* ******************** */ body { color-scheme: dark; } /* Nasty hacks to apply a filter to arbitrary monochrome artwork to make it */ /* better match the theme. Typically applied to dark grey 'off' buttons or */ /* light grey 'on' buttons. */ .mx_filterFlipColor { -webkit-filter: invert(1); filter: invert(1); } /* markdown overrides: */ .mx_EventTile_content .markdown-body table tr { background-color: #000000; } .mx_EventTile_content .markdown-body table tr:nth-child(2n) { background-color: #080808; } /* highlight.js overrides: */ .hljs-tag { color: inherit; /* Without this they'd be weirdly blue which doesn't match the theme */ } } @layer app-web{ /* Copyright 2024 New Vector Ltd. Copyright 2019 The Matrix.org Foundation C.I.C. SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial Please see LICENSE files in the repository root for full details. */ /* Colors from Figma Compound https://www.figma.com/file/X4XTH9iS2KGJ2wFKDqkyed/Compound?node-id=559%3A741 */ /* --timeline-background-color */ /* still needs alpha at .5 */ /* still needs alpha at .59 */ /* --roomlist-highlights-color */ /* --sidebar-color */ /* --roomlist-background-color */ /* these were #f2f5f8 instead of #f3f8fd, but close enough */ /* --timeline-text-color */ /* was #212121 */ /* was #45474a */ /* was #4e5054 */ /* was #232f32 */ /* --roomlist-text-secondary-color */ /* --roomlist-separator-color */ /* originally #e5e5e5, but close enough */ /* --timeline-text-secondary-color */ /* was #747474 */ /* was #888888 */ /* --primary-color */ /* --warning-color */ /* still needs alpha at 0.5 */ /* --timeline-highlights-color */ /* redirect some variables away from their hardcoded values in the light theme */ /* --eventbubble colors */ /** * Variation of the accent color. * Generate this colour scale using LeonardoColor * TODO: Add link */ } @layer app-web{ /* autogenerated by rethemendex.sh */ } @layer app-web{ /* Copyright 2024 New Vector Ltd. Copyright 2021 The Matrix.org Foundation C.I.C. SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial Please see LICENSE files in the repository root for full details. */ /** * React Transition Group animations are prefixed with 'mx_rtg--' so that we * know they should not be used anywhere outside of React Transition Groups. */ .mx_rtg--fade-enter { opacity: 0; } .mx_rtg--fade-enter-active { opacity: 1; -webkit-transition: opacity 300ms ease; transition: opacity 300ms ease; } .mx_rtg--fade-exit { opacity: 1; } .mx_rtg--fade-exit-active { opacity: 0; -webkit-transition: opacity 300ms ease; transition: opacity 300ms ease; } :root { --hover-transition: 0.08s cubic-bezier(0.46, 0.03, 0.52, 0.96); /* quadratic */ } @-webkit-keyframes mx--anim-pulse { 0% { opacity: 1; } 50% { opacity: 0.7; } 100% { opacity: 1; } } @keyframes mx--anim-pulse { 0% { opacity: 1; } 50% { opacity: 0.7; } 100% { opacity: 1; } } @-webkit-keyframes mx_Dialog_lightbox_background_keyframes { from { opacity: 0; } to { opacity: 0.85; } } @keyframes mx_Dialog_lightbox_background_keyframes { from { opacity: 0; } to { opacity: 0.85; } } @-webkit-keyframes mx_ImageView_panel_keyframes { from { opacity: 0; } to { opacity: 1; } } @keyframes mx_ImageView_panel_keyframes { from { opacity: 0; } to { opacity: 1; } } @media (prefers-reduced-motion) { @-webkit-keyframes mx--anim-pulse { /* Override all keyframes in reduced-motion */ } @keyframes mx--anim-pulse { /* Override all keyframes in reduced-motion */ } @-webkit-keyframes mx_Dialog_lightbox_background_keyframes { /* Override all keyframes in reduced-motion */ } @keyframes mx_Dialog_lightbox_background_keyframes { /* Override all keyframes in reduced-motion */ } @-webkit-keyframes mx_ImageView_panel_keyframes { /* Override all keyframes in reduced-motion */ } @keyframes mx_ImageView_panel_keyframes { /* Override all keyframes in reduced-motion */ } .mx_rtg--fade-enter-active { -webkit-transition: none; transition: none; } .mx_rtg--fade-exit-active { -webkit-transition: none; transition: none; } } } @layer app-web{ /* Copyright 2024 New Vector Ltd. Copyright 2019-2023 The Matrix.org Foundation C.I.C Copyright 2017-2019 New Vector Ltd Copyright 2017 Vector Creations Ltd Copyright 2015, 2016 OpenMarket Ltd SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial Please see LICENSE files in the repository root for full details. */ } @layer app-web{ /* Copyright 2024 New Vector Ltd. Copyright 2022 The Matrix.org Foundation C.I.C. SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial Please see LICENSE files in the repository root for full details. */ /* SCSS variables representing a range of standard lengths. * * Avoid using these in new code: we cannot adjust their values without causing massive confusion, so they are * effectively equivalent to using hardcoded values. * * In future, we plan to introduce variables named according to their purpose rather than their size. Additionally, * we want switch to custom CSS properties (https://github.com/vector-im/element-web/issues/21656), so we might have * `--spacing-standard` or something. For now, you might as well use hardcoded px values for lengths (except for font * sizes, for which see the `$font-px` variables). */ } @layer app-web{ .maplibregl-map{font:12px/20px Helvetica Neue,Arial,Helvetica,sans-serif;overflow:hidden;position:relative;-webkit-tap-highlight-color:rgb(0 0 0/0)}.maplibregl-canvas{left:0;position:absolute;top:0}.maplibregl-map:-webkit-full-screen{height:100%;width:100%}.maplibregl-map:-ms-fullscreen{height:100%;width:100%}.maplibregl-map:fullscreen{height:100%;width:100%}.maplibregl-ctrl-group button.maplibregl-ctrl-compass{-ms-touch-action:none;touch-action:none}.maplibregl-canvas-container.maplibregl-interactive,.maplibregl-ctrl-group button.maplibregl-ctrl-compass{cursor:-webkit-grab;cursor:grab;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.maplibregl-canvas-container.maplibregl-interactive.maplibregl-track-pointer{cursor:pointer}.maplibregl-canvas-container.maplibregl-interactive:active,.maplibregl-ctrl-group button.maplibregl-ctrl-compass:active{cursor:-webkit-grabbing;cursor:grabbing}.maplibregl-canvas-container.maplibregl-touch-zoom-rotate,.maplibregl-canvas-container.maplibregl-touch-zoom-rotate .maplibregl-canvas{-ms-touch-action:pan-x pan-y;touch-action:pan-x pan-y}.maplibregl-canvas-container.maplibregl-touch-drag-pan,.maplibregl-canvas-container.maplibregl-touch-drag-pan .maplibregl-canvas{-ms-touch-action:pinch-zoom;touch-action:pinch-zoom}.maplibregl-canvas-container.maplibregl-touch-zoom-rotate.maplibregl-touch-drag-pan,.maplibregl-canvas-container.maplibregl-touch-zoom-rotate.maplibregl-touch-drag-pan .maplibregl-canvas{-ms-touch-action:none;touch-action:none}.maplibregl-canvas-container.maplibregl-touch-drag-pan.maplibregl-cooperative-gestures,.maplibregl-canvas-container.maplibregl-touch-drag-pan.maplibregl-cooperative-gestures .maplibregl-canvas{-ms-touch-action:pan-x pan-y;touch-action:pan-x pan-y}.maplibregl-ctrl-bottom-left,.maplibregl-ctrl-bottom-right,.maplibregl-ctrl-top-left,.maplibregl-ctrl-top-right{pointer-events:none;position:absolute;z-index:2}.maplibregl-ctrl-top-left{left:0;top:0}.maplibregl-ctrl-top-right{right:0;top:0}.maplibregl-ctrl-bottom-left{bottom:0;left:0}.maplibregl-ctrl-bottom-right{bottom:0;right:0}.maplibregl-ctrl{clear:both;pointer-events:auto;-webkit-transform:translate(0);transform:translate(0)}.maplibregl-ctrl-top-left .maplibregl-ctrl{float:left;margin:10px 0 0 10px}.maplibregl-ctrl-top-right .maplibregl-ctrl{float:right;margin:10px 10px 0 0}.maplibregl-ctrl-bottom-left .maplibregl-ctrl{float:left;margin:0 0 10px 10px}.maplibregl-ctrl-bottom-right .maplibregl-ctrl{float:right;margin:0 10px 10px 0}.maplibregl-ctrl-group{background:#fff;border-radius:4px}.maplibregl-ctrl-group:not(:empty){-webkit-box-shadow:0 0 0 2px rgba(0,0,0,.1);box-shadow:0 0 0 2px rgba(0,0,0,.1)}@media (forced-colors:active){.maplibregl-ctrl-group:not(:empty){-webkit-box-shadow:0 0 0 2px ButtonText;box-shadow:0 0 0 2px ButtonText}}.maplibregl-ctrl-group button{background-color:transparent;border:0;-webkit-box-sizing:border-box;box-sizing:border-box;cursor:pointer;display:block;height:29px;outline:none;padding:0;width:29px}.maplibregl-ctrl-group button+button{border-top:1px solid #ddd}.maplibregl-ctrl button .maplibregl-ctrl-icon{background-position:50%;background-repeat:no-repeat;display:block;height:100%;width:100%}@media (forced-colors:active){.maplibregl-ctrl-icon{background-color:transparent}.maplibregl-ctrl-group button+button{border-top:1px solid ButtonText}}.maplibregl-ctrl button::-moz-focus-inner{border:0;padding:0}.maplibregl-ctrl-attrib-button:focus,.maplibregl-ctrl-group button:focus{-webkit-box-shadow:0 0 2px 2px #0096ff;box-shadow:0 0 2px 2px #0096ff}.maplibregl-ctrl button:disabled{cursor:not-allowed}.maplibregl-ctrl button:disabled .maplibregl-ctrl-icon{opacity:.25}@media (hover:hover){.maplibregl-ctrl button:not(:disabled):hover{background-color:rgba(0,0,0,.05)}}.maplibregl-ctrl button:not(:disabled):active{background-color:rgba(0,0,0,.05)}.maplibregl-ctrl-group button:focus:focus-visible{-webkit-box-shadow:0 0 2px 2px #0096ff;box-shadow:0 0 2px 2px #0096ff}.maplibregl-ctrl-group button:focus:not(:focus-visible){-webkit-box-shadow:none;box-shadow:none}.maplibregl-ctrl-group button:focus:first-child{border-radius:4px 4px 0 0}.maplibregl-ctrl-group button:focus:last-child{border-radius:0 0 4px 4px}.maplibregl-ctrl-group button:focus:only-child{border-radius:inherit}.maplibregl-ctrl button.maplibregl-ctrl-zoom-out .maplibregl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='29' height='29' fill='%23333' viewBox='0 0 29 29'%3E%3Cpath d='M10 13c-.75 0-1.5.75-1.5 1.5S9.25 16 10 16h9c.75 0 1.5-.75 1.5-1.5S19.75 13 19 13z'/%3E%3C/svg%3E")}.maplibregl-ctrl button.maplibregl-ctrl-zoom-in .maplibregl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='29' height='29' fill='%23333' viewBox='0 0 29 29'%3E%3Cpath d='M14.5 8.5c-.75 0-1.5.75-1.5 1.5v3h-3c-.75 0-1.5.75-1.5 1.5S9.25 16 10 16h3v3c0 .75.75 1.5 1.5 1.5S16 19.75 16 19v-3h3c.75 0 1.5-.75 1.5-1.5S19.75 13 19 13h-3v-3c0-.75-.75-1.5-1.5-1.5'/%3E%3C/svg%3E")}@media (forced-colors:active){.maplibregl-ctrl button.maplibregl-ctrl-zoom-out .maplibregl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='29' height='29' fill='%23fff' viewBox='0 0 29 29'%3E%3Cpath d='M10 13c-.75 0-1.5.75-1.5 1.5S9.25 16 10 16h9c.75 0 1.5-.75 1.5-1.5S19.75 13 19 13z'/%3E%3C/svg%3E")}.maplibregl-ctrl button.maplibregl-ctrl-zoom-in .maplibregl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='29' height='29' fill='%23fff' viewBox='0 0 29 29'%3E%3Cpath d='M14.5 8.5c-.75 0-1.5.75-1.5 1.5v3h-3c-.75 0-1.5.75-1.5 1.5S9.25 16 10 16h3v3c0 .75.75 1.5 1.5 1.5S16 19.75 16 19v-3h3c.75 0 1.5-.75 1.5-1.5S19.75 13 19 13h-3v-3c0-.75-.75-1.5-1.5-1.5'/%3E%3C/svg%3E")}}@media (forced-colors:active) and (prefers-color-scheme:light){.maplibregl-ctrl button.maplibregl-ctrl-zoom-out .maplibregl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='29' height='29' viewBox='0 0 29 29'%3E%3Cpath d='M10 13c-.75 0-1.5.75-1.5 1.5S9.25 16 10 16h9c.75 0 1.5-.75 1.5-1.5S19.75 13 19 13z'/%3E%3C/svg%3E")}.maplibregl-ctrl button.maplibregl-ctrl-zoom-in .maplibregl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='29' height='29' viewBox='0 0 29 29'%3E%3Cpath d='M14.5 8.5c-.75 0-1.5.75-1.5 1.5v3h-3c-.75 0-1.5.75-1.5 1.5S9.25 16 10 16h3v3c0 .75.75 1.5 1.5 1.5S16 19.75 16 19v-3h3c.75 0 1.5-.75 1.5-1.5S19.75 13 19 13h-3v-3c0-.75-.75-1.5-1.5-1.5'/%3E%3C/svg%3E")}}.maplibregl-ctrl button.maplibregl-ctrl-fullscreen .maplibregl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='29' height='29' fill='%23333' viewBox='0 0 29 29'%3E%3Cpath d='M24 16v5.5c0 1.75-.75 2.5-2.5 2.5H16v-1l3-1.5-4-5.5 1-1 5.5 4 1.5-3zM6 16l1.5 3 5.5-4 1 1-4 5.5 3 1.5v1H7.5C5.75 24 5 23.25 5 21.5V16zm7-11v1l-3 1.5 4 5.5-1 1-5.5-4L6 13H5V7.5C5 5.75 5.75 5 7.5 5zm11 2.5c0-1.75-.75-2.5-2.5-2.5H16v1l3 1.5-4 5.5 1 1 5.5-4 1.5 3h1z'/%3E%3C/svg%3E")}.maplibregl-ctrl button.maplibregl-ctrl-shrink .maplibregl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='29' height='29' viewBox='0 0 29 29'%3E%3Cpath d='M18.5 16c-1.75 0-2.5.75-2.5 2.5V24h1l1.5-3 5.5 4 1-1-4-5.5 3-1.5v-1zM13 18.5c0-1.75-.75-2.5-2.5-2.5H5v1l3 1.5L4 24l1 1 5.5-4 1.5 3h1zm3-8c0 1.75.75 2.5 2.5 2.5H24v-1l-3-1.5L25 5l-1-1-5.5 4L17 5h-1zM10.5 13c1.75 0 2.5-.75 2.5-2.5V5h-1l-1.5 3L5 4 4 5l4 5.5L5 12v1z'/%3E%3C/svg%3E")}@media (forced-colors:active){.maplibregl-ctrl button.maplibregl-ctrl-fullscreen .maplibregl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='29' height='29' fill='%23fff' viewBox='0 0 29 29'%3E%3Cpath d='M24 16v5.5c0 1.75-.75 2.5-2.5 2.5H16v-1l3-1.5-4-5.5 1-1 5.5 4 1.5-3zM6 16l1.5 3 5.5-4 1 1-4 5.5 3 1.5v1H7.5C5.75 24 5 23.25 5 21.5V16zm7-11v1l-3 1.5 4 5.5-1 1-5.5-4L6 13H5V7.5C5 5.75 5.75 5 7.5 5zm11 2.5c0-1.75-.75-2.5-2.5-2.5H16v1l3 1.5-4 5.5 1 1 5.5-4 1.5 3h1z'/%3E%3C/svg%3E")}.maplibregl-ctrl button.maplibregl-ctrl-shrink .maplibregl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='29' height='29' fill='%23fff' viewBox='0 0 29 29'%3E%3Cpath d='M18.5 16c-1.75 0-2.5.75-2.5 2.5V24h1l1.5-3 5.5 4 1-1-4-5.5 3-1.5v-1zM13 18.5c0-1.75-.75-2.5-2.5-2.5H5v1l3 1.5L4 24l1 1 5.5-4 1.5 3h1zm3-8c0 1.75.75 2.5 2.5 2.5H24v-1l-3-1.5L25 5l-1-1-5.5 4L17 5h-1zM10.5 13c1.75 0 2.5-.75 2.5-2.5V5h-1l-1.5 3L5 4 4 5l4 5.5L5 12v1z'/%3E%3C/svg%3E")}}@media (forced-colors:active) and (prefers-color-scheme:light){.maplibregl-ctrl button.maplibregl-ctrl-fullscreen .maplibregl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='29' height='29' viewBox='0 0 29 29'%3E%3Cpath d='M24 16v5.5c0 1.75-.75 2.5-2.5 2.5H16v-1l3-1.5-4-5.5 1-1 5.5 4 1.5-3zM6 16l1.5 3 5.5-4 1 1-4 5.5 3 1.5v1H7.5C5.75 24 5 23.25 5 21.5V16zm7-11v1l-3 1.5 4 5.5-1 1-5.5-4L6 13H5V7.5C5 5.75 5.75 5 7.5 5zm11 2.5c0-1.75-.75-2.5-2.5-2.5H16v1l3 1.5-4 5.5 1 1 5.5-4 1.5 3h1z'/%3E%3C/svg%3E")}.maplibregl-ctrl button.maplibregl-ctrl-shrink .maplibregl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='29' height='29' viewBox='0 0 29 29'%3E%3Cpath d='M18.5 16c-1.75 0-2.5.75-2.5 2.5V24h1l1.5-3 5.5 4 1-1-4-5.5 3-1.5v-1zM13 18.5c0-1.75-.75-2.5-2.5-2.5H5v1l3 1.5L4 24l1 1 5.5-4 1.5 3h1zm3-8c0 1.75.75 2.5 2.5 2.5H24v-1l-3-1.5L25 5l-1-1-5.5 4L17 5h-1zM10.5 13c1.75 0 2.5-.75 2.5-2.5V5h-1l-1.5 3L5 4 4 5l4 5.5L5 12v1z'/%3E%3C/svg%3E")}}.maplibregl-ctrl button.maplibregl-ctrl-compass .maplibregl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='29' height='29' fill='%23333' viewBox='0 0 29 29'%3E%3Cpath d='m10.5 14 4-8 4 8z'/%3E%3Cpath fill='%23ccc' d='m10.5 16 4 8 4-8z'/%3E%3C/svg%3E")}@media (forced-colors:active){.maplibregl-ctrl button.maplibregl-ctrl-compass .maplibregl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='29' height='29' fill='%23fff' viewBox='0 0 29 29'%3E%3Cpath d='m10.5 14 4-8 4 8z'/%3E%3Cpath fill='%23ccc' d='m10.5 16 4 8 4-8z'/%3E%3C/svg%3E")}}@media (forced-colors:active) and (prefers-color-scheme:light){.maplibregl-ctrl button.maplibregl-ctrl-compass .maplibregl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='29' height='29' viewBox='0 0 29 29'%3E%3Cpath d='m10.5 14 4-8 4 8z'/%3E%3Cpath fill='%23ccc' d='m10.5 16 4 8 4-8z'/%3E%3C/svg%3E")}}.maplibregl-ctrl button.maplibregl-ctrl-globe .maplibregl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' fill='none' stroke='%23333' viewBox='0 0 22 22'%3E%3Ccircle cx='11' cy='11' r='8.5'/%3E%3Cpath d='M17.5 11c0 4.819-3.02 8.5-6.5 8.5S4.5 15.819 4.5 11 7.52 2.5 11 2.5s6.5 3.681 6.5 8.5Z'/%3E%3Cpath d='M13.5 11c0 2.447-.331 4.64-.853 6.206-.262.785-.562 1.384-.872 1.777-.314.399-.58.517-.775.517s-.461-.118-.775-.517c-.31-.393-.61-.992-.872-1.777C8.831 15.64 8.5 13.446 8.5 11s.331-4.64.853-6.206c.262-.785.562-1.384.872-1.777.314-.399.58-.517.775-.517s.461.118.775.517c.31.393.61.992.872 1.777.522 1.565.853 3.76.853 6.206Z'/%3E%3Cpath d='M11 7.5c-1.909 0-3.622-.166-4.845-.428-.616-.132-1.08-.283-1.379-.434a1.3 1.3 0 0 1-.224-.138q.07-.058.224-.138c.299-.151.763-.302 1.379-.434C7.378 5.666 9.091 5.5 11 5.5s3.622.166 4.845.428c.616.132 1.08.283 1.379.434.105.053.177.1.224.138q-.07.058-.224.138c-.299.151-.763.302-1.379.434-1.223.262-2.936.428-4.845.428ZM4.486 6.436ZM11 16.5c-1.909 0-3.622-.166-4.845-.428-.616-.132-1.08-.283-1.379-.434a1.3 1.3 0 0 1-.224-.138 1.3 1.3 0 0 1 .224-.138c.299-.151.763-.302 1.379-.434C7.378 14.666 9.091 14.5 11 14.5s3.622.166 4.845.428c.616.132 1.08.283 1.379.434.105.053.177.1.224.138a1.3 1.3 0 0 1-.224.138c-.299.151-.763.302-1.379.434-1.223.262-2.936.428-4.845.428Zm-6.514-1.064ZM11 12.5c-2.46 0-4.672-.222-6.255-.574-.796-.177-1.406-.38-1.805-.59a1.5 1.5 0 0 1-.39-.272.3.3 0 0 1-.047-.064.3.3 0 0 1 .048-.064c.066-.073.189-.167.389-.272.399-.21 1.009-.413 1.805-.59C6.328 9.722 8.54 9.5 11 9.5s4.672.222 6.256.574c.795.177 1.405.38 1.804.59.2.105.323.2.39.272a.3.3 0 0 1 .047.064.3.3 0 0 1-.048.064 1.4 1.4 0 0 1-.389.272c-.399.21-1.009.413-1.804.59-1.584.352-3.796.574-6.256.574Zm-8.501-1.51v.002zm0 .018v.002zm17.002.002v-.002zm0-.018v-.002z'/%3E%3C/svg%3E")}.maplibregl-ctrl button.maplibregl-ctrl-globe-enabled .maplibregl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' fill='none' stroke='%2333b5e5' viewBox='0 0 22 22'%3E%3Ccircle cx='11' cy='11' r='8.5'/%3E%3Cpath d='M17.5 11c0 4.819-3.02 8.5-6.5 8.5S4.5 15.819 4.5 11 7.52 2.5 11 2.5s6.5 3.681 6.5 8.5Z'/%3E%3Cpath d='M13.5 11c0 2.447-.331 4.64-.853 6.206-.262.785-.562 1.384-.872 1.777-.314.399-.58.517-.775.517s-.461-.118-.775-.517c-.31-.393-.61-.992-.872-1.777C8.831 15.64 8.5 13.446 8.5 11s.331-4.64.853-6.206c.262-.785.562-1.384.872-1.777.314-.399.58-.517.775-.517s.461.118.775.517c.31.393.61.992.872 1.777.522 1.565.853 3.76.853 6.206Z'/%3E%3Cpath d='M11 7.5c-1.909 0-3.622-.166-4.845-.428-.616-.132-1.08-.283-1.379-.434a1.3 1.3 0 0 1-.224-.138q.07-.058.224-.138c.299-.151.763-.302 1.379-.434C7.378 5.666 9.091 5.5 11 5.5s3.622.166 4.845.428c.616.132 1.08.283 1.379.434.105.053.177.1.224.138q-.07.058-.224.138c-.299.151-.763.302-1.379.434-1.223.262-2.936.428-4.845.428ZM4.486 6.436ZM11 16.5c-1.909 0-3.622-.166-4.845-.428-.616-.132-1.08-.283-1.379-.434a1.3 1.3 0 0 1-.224-.138 1.3 1.3 0 0 1 .224-.138c.299-.151.763-.302 1.379-.434C7.378 14.666 9.091 14.5 11 14.5s3.622.166 4.845.428c.616.132 1.08.283 1.379.434.105.053.177.1.224.138a1.3 1.3 0 0 1-.224.138c-.299.151-.763.302-1.379.434-1.223.262-2.936.428-4.845.428Zm-6.514-1.064ZM11 12.5c-2.46 0-4.672-.222-6.255-.574-.796-.177-1.406-.38-1.805-.59a1.5 1.5 0 0 1-.39-.272.3.3 0 0 1-.047-.064.3.3 0 0 1 .048-.064c.066-.073.189-.167.389-.272.399-.21 1.009-.413 1.805-.59C6.328 9.722 8.54 9.5 11 9.5s4.672.222 6.256.574c.795.177 1.405.38 1.804.59.2.105.323.2.39.272a.3.3 0 0 1 .047.064.3.3 0 0 1-.048.064 1.4 1.4 0 0 1-.389.272c-.399.21-1.009.413-1.804.59-1.584.352-3.796.574-6.256.574Zm-8.501-1.51v.002zm0 .018v.002zm17.002.002v-.002zm0-.018v-.002z'/%3E%3C/svg%3E")}.maplibregl-ctrl button.maplibregl-ctrl-terrain .maplibregl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' fill='%23333' viewBox='0 0 22 22'%3E%3Cpath d='m1.754 13.406 4.453-4.851 3.09 3.09 3.281 3.277.969-.969-3.309-3.312 3.844-4.121 6.148 6.886h1.082v-.855l-7.207-8.07-4.84 5.187L6.169 6.57l-5.48 5.965v.871ZM.688 16.844h20.625v1.375H.688Zm0 0'/%3E%3C/svg%3E")}.maplibregl-ctrl button.maplibregl-ctrl-terrain-enabled .maplibregl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' fill='%2333b5e5' viewBox='0 0 22 22'%3E%3Cpath d='m1.754 13.406 4.453-4.851 3.09 3.09 3.281 3.277.969-.969-3.309-3.312 3.844-4.121 6.148 6.886h1.082v-.855l-7.207-8.07-4.84 5.187L6.169 6.57l-5.48 5.965v.871ZM.688 16.844h20.625v1.375H.688Zm0 0'/%3E%3C/svg%3E")}.maplibregl-ctrl button.maplibregl-ctrl-geolocate .maplibregl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='29' height='29' fill='%23333' viewBox='0 0 20 20'%3E%3Cpath d='M10 4C9 4 9 5 9 5v.1A5 5 0 0 0 5.1 9H5s-1 0-1 1 1 1 1 1h.1A5 5 0 0 0 9 14.9v.1s0 1 1 1 1-1 1-1v-.1a5 5 0 0 0 3.9-3.9h.1s1 0 1-1-1-1-1-1h-.1A5 5 0 0 0 11 5.1V5s0-1-1-1m0 2.5a3.5 3.5 0 1 1 0 7 3.5 3.5 0 1 1 0-7'/%3E%3Ccircle cx='10' cy='10' r='2'/%3E%3C/svg%3E")}.maplibregl-ctrl button.maplibregl-ctrl-geolocate:disabled .maplibregl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='29' height='29' fill='%23aaa' viewBox='0 0 20 20'%3E%3Cpath d='M10 4C9 4 9 5 9 5v.1A5 5 0 0 0 5.1 9H5s-1 0-1 1 1 1 1 1h.1A5 5 0 0 0 9 14.9v.1s0 1 1 1 1-1 1-1v-.1a5 5 0 0 0 3.9-3.9h.1s1 0 1-1-1-1-1-1h-.1A5 5 0 0 0 11 5.1V5s0-1-1-1m0 2.5a3.5 3.5 0 1 1 0 7 3.5 3.5 0 1 1 0-7'/%3E%3Ccircle cx='10' cy='10' r='2'/%3E%3Cpath fill='red' d='m14 5 1 1-9 9-1-1z'/%3E%3C/svg%3E")}.maplibregl-ctrl button.maplibregl-ctrl-geolocate.maplibregl-ctrl-geolocate-active .maplibregl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='29' height='29' fill='%2333b5e5' viewBox='0 0 20 20'%3E%3Cpath d='M10 4C9 4 9 5 9 5v.1A5 5 0 0 0 5.1 9H5s-1 0-1 1 1 1 1 1h.1A5 5 0 0 0 9 14.9v.1s0 1 1 1 1-1 1-1v-.1a5 5 0 0 0 3.9-3.9h.1s1 0 1-1-1-1-1-1h-.1A5 5 0 0 0 11 5.1V5s0-1-1-1m0 2.5a3.5 3.5 0 1 1 0 7 3.5 3.5 0 1 1 0-7'/%3E%3Ccircle cx='10' cy='10' r='2'/%3E%3C/svg%3E")}.maplibregl-ctrl button.maplibregl-ctrl-geolocate.maplibregl-ctrl-geolocate-active-error .maplibregl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='29' height='29' fill='%23e58978' viewBox='0 0 20 20'%3E%3Cpath d='M10 4C9 4 9 5 9 5v.1A5 5 0 0 0 5.1 9H5s-1 0-1 1 1 1 1 1h.1A5 5 0 0 0 9 14.9v.1s0 1 1 1 1-1 1-1v-.1a5 5 0 0 0 3.9-3.9h.1s1 0 1-1-1-1-1-1h-.1A5 5 0 0 0 11 5.1V5s0-1-1-1m0 2.5a3.5 3.5 0 1 1 0 7 3.5 3.5 0 1 1 0-7'/%3E%3Ccircle cx='10' cy='10' r='2'/%3E%3C/svg%3E")}.maplibregl-ctrl button.maplibregl-ctrl-geolocate.maplibregl-ctrl-geolocate-background .maplibregl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='29' height='29' fill='%2333b5e5' viewBox='0 0 20 20'%3E%3Cpath d='M10 4C9 4 9 5 9 5v.1A5 5 0 0 0 5.1 9H5s-1 0-1 1 1 1 1 1h.1A5 5 0 0 0 9 14.9v.1s0 1 1 1 1-1 1-1v-.1a5 5 0 0 0 3.9-3.9h.1s1 0 1-1-1-1-1-1h-.1A5 5 0 0 0 11 5.1V5s0-1-1-1m0 2.5a3.5 3.5 0 1 1 0 7 3.5 3.5 0 1 1 0-7'/%3E%3C/svg%3E")}.maplibregl-ctrl button.maplibregl-ctrl-geolocate.maplibregl-ctrl-geolocate-background-error .maplibregl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='29' height='29' fill='%23e54e33' viewBox='0 0 20 20'%3E%3Cpath d='M10 4C9 4 9 5 9 5v.1A5 5 0 0 0 5.1 9H5s-1 0-1 1 1 1 1 1h.1A5 5 0 0 0 9 14.9v.1s0 1 1 1 1-1 1-1v-.1a5 5 0 0 0 3.9-3.9h.1s1 0 1-1-1-1-1-1h-.1A5 5 0 0 0 11 5.1V5s0-1-1-1m0 2.5a3.5 3.5 0 1 1 0 7 3.5 3.5 0 1 1 0-7'/%3E%3C/svg%3E")}.maplibregl-ctrl button.maplibregl-ctrl-geolocate.maplibregl-ctrl-geolocate-waiting .maplibregl-ctrl-icon{-webkit-animation:maplibregl-spin 2s linear infinite;animation:maplibregl-spin 2s linear infinite}@media (forced-colors:active){.maplibregl-ctrl button.maplibregl-ctrl-geolocate .maplibregl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='29' height='29' fill='%23fff' viewBox='0 0 20 20'%3E%3Cpath d='M10 4C9 4 9 5 9 5v.1A5 5 0 0 0 5.1 9H5s-1 0-1 1 1 1 1 1h.1A5 5 0 0 0 9 14.9v.1s0 1 1 1 1-1 1-1v-.1a5 5 0 0 0 3.9-3.9h.1s1 0 1-1-1-1-1-1h-.1A5 5 0 0 0 11 5.1V5s0-1-1-1m0 2.5a3.5 3.5 0 1 1 0 7 3.5 3.5 0 1 1 0-7'/%3E%3Ccircle cx='10' cy='10' r='2'/%3E%3C/svg%3E")}.maplibregl-ctrl button.maplibregl-ctrl-geolocate:disabled .maplibregl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='29' height='29' fill='%23999' viewBox='0 0 20 20'%3E%3Cpath d='M10 4C9 4 9 5 9 5v.1A5 5 0 0 0 5.1 9H5s-1 0-1 1 1 1 1 1h.1A5 5 0 0 0 9 14.9v.1s0 1 1 1 1-1 1-1v-.1a5 5 0 0 0 3.9-3.9h.1s1 0 1-1-1-1-1-1h-.1A5 5 0 0 0 11 5.1V5s0-1-1-1m0 2.5a3.5 3.5 0 1 1 0 7 3.5 3.5 0 1 1 0-7'/%3E%3Ccircle cx='10' cy='10' r='2'/%3E%3Cpath fill='red' d='m14 5 1 1-9 9-1-1z'/%3E%3C/svg%3E")}.maplibregl-ctrl button.maplibregl-ctrl-geolocate.maplibregl-ctrl-geolocate-active .maplibregl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='29' height='29' fill='%2333b5e5' viewBox='0 0 20 20'%3E%3Cpath d='M10 4C9 4 9 5 9 5v.1A5 5 0 0 0 5.1 9H5s-1 0-1 1 1 1 1 1h.1A5 5 0 0 0 9 14.9v.1s0 1 1 1 1-1 1-1v-.1a5 5 0 0 0 3.9-3.9h.1s1 0 1-1-1-1-1-1h-.1A5 5 0 0 0 11 5.1V5s0-1-1-1m0 2.5a3.5 3.5 0 1 1 0 7 3.5 3.5 0 1 1 0-7'/%3E%3Ccircle cx='10' cy='10' r='2'/%3E%3C/svg%3E")}.maplibregl-ctrl button.maplibregl-ctrl-geolocate.maplibregl-ctrl-geolocate-active-error .maplibregl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='29' height='29' fill='%23e58978' viewBox='0 0 20 20'%3E%3Cpath d='M10 4C9 4 9 5 9 5v.1A5 5 0 0 0 5.1 9H5s-1 0-1 1 1 1 1 1h.1A5 5 0 0 0 9 14.9v.1s0 1 1 1 1-1 1-1v-.1a5 5 0 0 0 3.9-3.9h.1s1 0 1-1-1-1-1-1h-.1A5 5 0 0 0 11 5.1V5s0-1-1-1m0 2.5a3.5 3.5 0 1 1 0 7 3.5 3.5 0 1 1 0-7'/%3E%3Ccircle cx='10' cy='10' r='2'/%3E%3C/svg%3E")}.maplibregl-ctrl button.maplibregl-ctrl-geolocate.maplibregl-ctrl-geolocate-background .maplibregl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='29' height='29' fill='%2333b5e5' viewBox='0 0 20 20'%3E%3Cpath d='M10 4C9 4 9 5 9 5v.1A5 5 0 0 0 5.1 9H5s-1 0-1 1 1 1 1 1h.1A5 5 0 0 0 9 14.9v.1s0 1 1 1 1-1 1-1v-.1a5 5 0 0 0 3.9-3.9h.1s1 0 1-1-1-1-1-1h-.1A5 5 0 0 0 11 5.1V5s0-1-1-1m0 2.5a3.5 3.5 0 1 1 0 7 3.5 3.5 0 1 1 0-7'/%3E%3C/svg%3E")}.maplibregl-ctrl button.maplibregl-ctrl-geolocate.maplibregl-ctrl-geolocate-background-error .maplibregl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='29' height='29' fill='%23e54e33' viewBox='0 0 20 20'%3E%3Cpath d='M10 4C9 4 9 5 9 5v.1A5 5 0 0 0 5.1 9H5s-1 0-1 1 1 1 1 1h.1A5 5 0 0 0 9 14.9v.1s0 1 1 1 1-1 1-1v-.1a5 5 0 0 0 3.9-3.9h.1s1 0 1-1-1-1-1-1h-.1A5 5 0 0 0 11 5.1V5s0-1-1-1m0 2.5a3.5 3.5 0 1 1 0 7 3.5 3.5 0 1 1 0-7'/%3E%3C/svg%3E")}}@media (forced-colors:active) and (prefers-color-scheme:light){.maplibregl-ctrl button.maplibregl-ctrl-geolocate .maplibregl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='29' height='29' viewBox='0 0 20 20'%3E%3Cpath d='M10 4C9 4 9 5 9 5v.1A5 5 0 0 0 5.1 9H5s-1 0-1 1 1 1 1 1h.1A5 5 0 0 0 9 14.9v.1s0 1 1 1 1-1 1-1v-.1a5 5 0 0 0 3.9-3.9h.1s1 0 1-1-1-1-1-1h-.1A5 5 0 0 0 11 5.1V5s0-1-1-1m0 2.5a3.5 3.5 0 1 1 0 7 3.5 3.5 0 1 1 0-7'/%3E%3Ccircle cx='10' cy='10' r='2'/%3E%3C/svg%3E")}.maplibregl-ctrl button.maplibregl-ctrl-geolocate:disabled .maplibregl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='29' height='29' fill='%23666' viewBox='0 0 20 20'%3E%3Cpath d='M10 4C9 4 9 5 9 5v.1A5 5 0 0 0 5.1 9H5s-1 0-1 1 1 1 1 1h.1A5 5 0 0 0 9 14.9v.1s0 1 1 1 1-1 1-1v-.1a5 5 0 0 0 3.9-3.9h.1s1 0 1-1-1-1-1-1h-.1A5 5 0 0 0 11 5.1V5s0-1-1-1m0 2.5a3.5 3.5 0 1 1 0 7 3.5 3.5 0 1 1 0-7'/%3E%3Ccircle cx='10' cy='10' r='2'/%3E%3Cpath fill='red' d='m14 5 1 1-9 9-1-1z'/%3E%3C/svg%3E")}}@-webkit-keyframes maplibregl-spin{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform:rotate(1turn);transform:rotate(1turn)}}@keyframes maplibregl-spin{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform:rotate(1turn);transform:rotate(1turn)}}a.maplibregl-ctrl-logo{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='88' height='23' fill='none'%3E%3Cpath fill='%23000' fill-opacity='.4' fill-rule='evenodd' d='M17.408 16.796h-1.827l2.501-12.095h.198l3.324 6.533.988 2.19.988-2.19 3.258-6.533h.181l2.6 12.095h-1.81l-1.218-5.644-.362-1.71-.658 1.71-2.929 5.644h-.098l-2.914-5.644-.757-1.71-.345 1.71zm1.958-3.42-.726 3.663a1.255 1.255 0 0 1-1.232 1.011h-1.827a1.255 1.255 0 0 1-1.229-1.509l2.501-12.095a1.255 1.255 0 0 1 1.23-1.001h.197a1.25 1.25 0 0 1 1.12.685l3.19 6.273 3.125-6.263a1.25 1.25 0 0 1 1.123-.695h.181a1.255 1.255 0 0 1 1.227.991l1.443 6.71a5 5 0 0 1 .314-.787l.009-.016a4.6 4.6 0 0 1 1.777-1.887c.782-.46 1.668-.667 2.611-.667a4.6 4.6 0 0 1 1.7.32l.306.134c.21-.16.474-.256.759-.256h1.694a1.255 1.255 0 0 1 1.212.925 1.255 1.255 0 0 1 1.212-.925h1.711c.284 0 .545.094.755.252.613-.3 1.312-.45 2.075-.45 1.356 0 2.557.445 3.482 1.4q.47.48.763 1.064V4.701a1.255 1.255 0 0 1 1.255-1.255h1.86A1.255 1.255 0 0 1 54.44 4.7v9.194h2.217c.19 0 .37.043.532.118v-4.77c0-.356.147-.678.385-.906a2.42 2.42 0 0 1-.682-1.71c0-.665.267-1.253.735-1.7a2.45 2.45 0 0 1 1.722-.674 2.43 2.43 0 0 1 1.705.675q.318.302.504.683V4.7a1.255 1.255 0 0 1 1.255-1.255h1.744A1.255 1.255 0 0 1 65.812 4.7v3.335a4.8 4.8 0 0 1 1.526-.246c.938 0 1.817.214 2.59.69a4.47 4.47 0 0 1 1.67 1.743v-.98a1.255 1.255 0 0 1 1.256-1.256h1.777c.233 0 .451.064.639.174a3.4 3.4 0 0 1 1.567-.372c.346 0 .861.02 1.285.232a1.25 1.25 0 0 1 .689 1.004 4.7 4.7 0 0 1 .853-.588c.795-.44 1.675-.647 2.61-.647 1.385 0 2.65.39 3.525 1.396.836.938 1.168 2.173 1.168 3.528q-.001.515-.056 1.051a1.255 1.255 0 0 1-.947 1.09l.408.952a1.255 1.255 0 0 1-.477 1.552c-.418.268-.92.463-1.458.612-.613.171-1.304.244-2.049.244-1.06 0-2.043-.207-2.886-.698l-.015-.008c-.798-.48-1.419-1.135-1.818-1.963l-.004-.008a5.8 5.8 0 0 1-.548-2.512q0-.429.053-.843a1.3 1.3 0 0 1-.333-.086l-.166-.004c-.223 0-.426.062-.643.228-.03.024-.142.139-.142.59v3.883a1.255 1.255 0 0 1-1.256 1.256h-1.777a1.255 1.255 0 0 1-1.256-1.256V15.69l-.032.057a4.8 4.8 0 0 1-1.86 1.833 5.04 5.04 0 0 1-2.484.634 4.5 4.5 0 0 1-1.935-.424 1.25 1.25 0 0 1-.764.258h-1.71a1.255 1.255 0 0 1-1.256-1.255V7.687a2.4 2.4 0 0 1-.428.625c.253.23.412.561.412.93v7.553a1.255 1.255 0 0 1-1.256 1.255h-1.843a1.25 1.25 0 0 1-.894-.373c-.228.23-.544.373-.894.373H51.32a1.255 1.255 0 0 1-1.256-1.255v-1.251l-.061.117a4.7 4.7 0 0 1-1.782 1.884 4.77 4.77 0 0 1-2.485.67 5.6 5.6 0 0 1-1.485-.188l.009 2.764a1.255 1.255 0 0 1-1.255 1.259h-1.729a1.255 1.255 0 0 1-1.255-1.255v-3.537a1.255 1.255 0 0 1-1.167.793h-1.679a1.25 1.25 0 0 1-.77-.263 4.5 4.5 0 0 1-1.945.429c-.885 0-1.724-.21-2.495-.632l-.017-.01a5 5 0 0 1-1.081-.836 1.255 1.255 0 0 1-1.254 1.312h-1.81a1.255 1.255 0 0 1-1.228-.99l-.782-3.625-2.044 3.939a1.25 1.25 0 0 1-1.115.676h-.098a1.25 1.25 0 0 1-1.116-.68l-2.061-3.994zM35.92 16.63l.207-.114.223-.15q.493-.356.735-.785l.061-.118.033 1.332h1.678V9.242h-1.694l-.033 1.267q-.133-.329-.526-.658l-.032-.028a3.2 3.2 0 0 0-.668-.428l-.27-.12a3.3 3.3 0 0 0-1.235-.23q-1.136-.001-1.974.493a3.36 3.36 0 0 0-1.3 1.382q-.445.89-.444 2.074 0 1.2.51 2.107a3.8 3.8 0 0 0 1.382 1.381 3.9 3.9 0 0 0 1.893.477q.795 0 1.455-.33zm-2.789-5.38q-.576.675-.575 1.762 0 1.102.559 1.794.576.675 1.645.675a2.25 2.25 0 0 0 .934-.19 2.2 2.2 0 0 0 .468-.29l.178-.161a2.2 2.2 0 0 0 .397-.561q.244-.5.244-1.15v-.115q0-.708-.296-1.267l-.043-.077a2.2 2.2 0 0 0-.633-.709l-.13-.086-.047-.028a2.1 2.1 0 0 0-1.073-.285q-1.052 0-1.629.692zm2.316 2.706c.163-.17.28-.407.28-.83v-.114c0-.292-.06-.508-.15-.68a.96.96 0 0 0-.353-.389.85.85 0 0 0-.464-.127c-.4 0-.56.114-.664.239l-.01.012c-.148.174-.275.45-.275.945 0 .506.122.801.27.99.097.11.266.224.68.224.303 0 .504-.09.687-.269zm7.545 1.705a2.6 2.6 0 0 0 .331.423q.319.33.755.548l.173.074q.65.255 1.49.255 1.02 0 1.844-.493a3.45 3.45 0 0 0 1.316-1.4q.493-.904.493-2.089 0-1.909-.988-2.913-.988-1.02-2.584-1.02-.898 0-1.575.347a3 3 0 0 0-.415.262l-.199.166a3.4 3.4 0 0 0-.64.82V9.242h-1.712v11.553h1.729l-.017-5.134zm.53-1.138q.206.29.48.5l.155.11.053.034q.51.296 1.119.297 1.07 0 1.645-.675.577-.69.576-1.762 0-1.119-.576-1.777-.558-.675-1.645-.675-.435 0-.835.16a2 2 0 0 0-.284.136 2 2 0 0 0-.363.254 2.2 2.2 0 0 0-.46.569l-.082.162a2.6 2.6 0 0 0-.213 1.072v.115q0 .707.296 1.267l.135.211zm.964-.818a1.1 1.1 0 0 0 .367.385.94.94 0 0 0 .476.118c.423 0 .59-.117.687-.23.159-.194.28-.478.28-.95 0-.53-.133-.8-.266-.952l-.021-.025c-.078-.094-.231-.221-.68-.221a1 1 0 0 0-.503.135l-.012.007a.86.86 0 0 0-.335.343c-.073.133-.132.324-.132.614v.115a1.4 1.4 0 0 0 .14.66zm15.7-6.222q.347-.346.346-.856a1.05 1.05 0 0 0-.345-.79 1.18 1.18 0 0 0-.84-.329q-.51 0-.855.33a1.05 1.05 0 0 0-.346.79q0 .51.346.855.345.346.856.346.51 0 .839-.346zm4.337 9.314.033-1.332q.191.403.59.747l.098.081a4 4 0 0 0 .316.224l.223.122a3.2 3.2 0 0 0 1.44.322 3.8 3.8 0 0 0 1.875-.477 3.5 3.5 0 0 0 1.382-1.366q.527-.89.526-2.09 0-1.184-.444-2.073a3.24 3.24 0 0 0-1.283-1.399q-.823-.51-1.942-.51a3.5 3.5 0 0 0-1.527.344l-.086.043-.165.09a3 3 0 0 0-.33.214q-.432.315-.656.707a2 2 0 0 0-.099.198l.082-1.283V4.701h-1.744v12.095zm.473-2.509a2.5 2.5 0 0 0 .566.7q.117.098.245.18l.144.08a2.1 2.1 0 0 0 .975.232q1.07 0 1.645-.675.576-.69.576-1.778 0-1.102-.576-1.777-.56-.691-1.645-.692a2.2 2.2 0 0 0-1.015.235q-.22.113-.415.282l-.15.142a2.1 2.1 0 0 0-.42.594q-.223.479-.223 1.1v.115q0 .705.293 1.26zm2.616-.293c.157-.191.28-.479.28-.967 0-.51-.13-.79-.276-.961l-.021-.026c-.082-.1-.232-.225-.67-.225a.87.87 0 0 0-.681.279l-.012.011c-.154.155-.274.38-.274.807v.115c0 .285.057.499.144.669a1.1 1.1 0 0 0 .367.405c.137.082.28.123.455.123.423 0 .59-.118.686-.23zm8.266-3.013q.345-.13.724-.14l.069-.002q.493 0 .642.099l.247-1.794q-.196-.099-.717-.099a2.3 2.3 0 0 0-.545.063 2 2 0 0 0-.411.148 2.2 2.2 0 0 0-.4.249 2.5 2.5 0 0 0-.485.499 2.7 2.7 0 0 0-.32.581l-.05.137v-1.48h-1.778v7.553h1.777v-3.884q0-.546.159-.943a1.5 1.5 0 0 1 .466-.636 2.5 2.5 0 0 1 .399-.253 2 2 0 0 1 .224-.099zm9.784 2.656.05-.922q0-1.743-.856-2.698-.838-.97-2.584-.97-1.119-.001-2.007.493a3.46 3.46 0 0 0-1.4 1.382q-.493.906-.493 2.106 0 1.07.428 1.975.428.89 1.332 1.432.906.526 2.255.526.973 0 1.668-.185l.044-.012.135-.04q.613-.184.984-.421l-.542-1.267q-.3.162-.642.274l-.297.087q-.51.131-1.3.131-.954 0-1.497-.444a1.6 1.6 0 0 1-.192-.193q-.366-.44-.512-1.234l-.004-.021zm-5.427-1.256-.003.022h3.752v-.138q-.011-.727-.288-1.118a1 1 0 0 0-.156-.176q-.46-.428-1.316-.428-.986 0-1.494.604-.379.45-.494 1.234zm-27.053 2.77V4.7h-1.86v12.095h5.333V15.15zm7.103-5.908v7.553h-1.843V9.242h1.843z'/%3E%3Cpath fill='%23fff' d='m19.63 11.151-.757-1.71-.345 1.71-1.12 5.644h-1.827L18.083 4.7h.197l3.325 6.533.988 2.19.988-2.19L26.839 4.7h.181l2.6 12.095h-1.81l-1.218-5.644-.362-1.71-.658 1.71-2.93 5.644h-.098l-2.913-5.644zm14.836 5.81q-1.02 0-1.893-.478a3.8 3.8 0 0 1-1.381-1.382q-.51-.906-.51-2.106 0-1.185.444-2.074a3.36 3.36 0 0 1 1.3-1.382q.839-.494 1.974-.494a3.3 3.3 0 0 1 1.234.231 3.3 3.3 0 0 1 .97.575q.396.33.527.659l.033-1.267h1.694v7.553H37.18l-.033-1.332q-.279.593-1.02 1.053a3.17 3.17 0 0 1-1.662.444zm.296-1.482q.938 0 1.58-.642.642-.66.642-1.711v-.115q0-.708-.296-1.267a2.2 2.2 0 0 0-.807-.872 2.1 2.1 0 0 0-1.119-.313q-1.053 0-1.629.692-.575.675-.575 1.76 0 1.103.559 1.795.577.675 1.645.675zm6.521-6.237h1.711v1.4q.906-1.597 2.83-1.597 1.596 0 2.584 1.02.988 1.005.988 2.914 0 1.185-.493 2.09a3.46 3.46 0 0 1-1.316 1.399 3.5 3.5 0 0 1-1.844.493q-.954 0-1.662-.329a2.67 2.67 0 0 1-1.086-.97l.017 5.134h-1.728zm4.048 6.22q1.07 0 1.645-.674.577-.69.576-1.762 0-1.119-.576-1.777-.558-.675-1.645-.675-.592 0-1.12.296-.51.28-.822.823-.296.527-.296 1.234v.115q0 .708.296 1.267.313.543.823.855.51.296 1.119.297z'/%3E%3Cpath fill='%23e1e3e9' d='M51.325 4.7h1.86v10.45h3.473v1.646h-5.333zm7.12 4.542h1.843v7.553h-1.843zm.905-1.415a1.16 1.16 0 0 1-.856-.346 1.17 1.17 0 0 1-.346-.856 1.05 1.05 0 0 1 .346-.79q.346-.329.856-.329.494 0 .839.33a1.05 1.05 0 0 1 .345.79 1.16 1.16 0 0 1-.345.855q-.33.346-.84.346zm7.875 9.133a3.17 3.17 0 0 1-1.662-.444q-.723-.46-1.004-1.053l-.033 1.332h-1.71V4.701h1.743v4.657l-.082 1.283q.279-.658 1.086-1.119a3.5 3.5 0 0 1 1.778-.477q1.119 0 1.942.51a3.24 3.24 0 0 1 1.283 1.4q.445.888.444 2.072 0 1.201-.526 2.09a3.5 3.5 0 0 1-1.382 1.366 3.8 3.8 0 0 1-1.876.477zm-.296-1.481q1.069 0 1.645-.675.577-.69.577-1.778 0-1.102-.577-1.776-.56-.691-1.645-.692a2.12 2.12 0 0 0-1.58.659q-.642.641-.642 1.694v.115q0 .71.296 1.267a2.4 2.4 0 0 0 .807.872 2.1 2.1 0 0 0 1.119.313zm5.927-6.237h1.777v1.481q.263-.757.856-1.217a2.14 2.14 0 0 1 1.349-.46q.527 0 .724.098l-.247 1.794q-.149-.099-.642-.099-.774 0-1.416.494-.626.493-.626 1.58v3.883h-1.777V9.242zm9.534 7.718q-1.35 0-2.255-.526-.904-.543-1.332-1.432a4.6 4.6 0 0 1-.428-1.975q0-1.2.493-2.106a3.46 3.46 0 0 1 1.4-1.382q.889-.495 2.007-.494 1.744 0 2.584.97.855.956.856 2.7 0 .444-.05.92h-5.43q.18 1.005.708 1.45.542.443 1.497.443.79 0 1.3-.131a4 4 0 0 0 .938-.362l.542 1.267q-.411.263-1.119.46-.708.198-1.711.197zm1.596-4.558q.016-1.02-.444-1.432-.46-.428-1.316-.428-1.728 0-1.991 1.86z'/%3E%3Cpath d='M5.074 15.948a.484.657 0 0 0-.486.659v1.84a.484.657 0 0 0 .486.659h4.101a.484.657 0 0 0 .486-.659v-1.84a.484.657 0 0 0-.486-.659zm3.56 1.16H5.617v.838h3.017z' style='fill:%23fff;fill-rule:evenodd;stroke-width:1.03600001'/%3E%3Cg style='stroke-width:1.12603545'%3E%3Cpath d='M-9.408-1.416c-3.833-.025-7.056 2.912-7.08 6.615-.02 3.08 1.653 4.832 3.107 6.268.903.892 1.721 1.74 2.32 2.902l-.525-.004c-.543-.003-.992.304-1.24.639a1.87 1.87 0 0 0-.362 1.121l-.011 1.877c-.003.402.104.787.347 1.125.244.338.688.653 1.23.656l4.142.028c.542.003.99-.306 1.238-.641a1.87 1.87 0 0 0 .363-1.121l.012-1.875a1.87 1.87 0 0 0-.348-1.127c-.243-.338-.688-.653-1.23-.656l-.518-.004c.597-1.145 1.425-1.983 2.348-2.87 1.473-1.414 3.18-3.149 3.2-6.226-.016-3.59-2.923-6.684-6.993-6.707m-.006 1.1v.002c3.274.02 5.92 2.532 5.9 5.6-.017 2.706-1.39 4.026-2.863 5.44-1.034.994-2.118 2.033-2.814 3.633-.018.041-.052.055-.075.065q-.013.004-.02.01a.34.34 0 0 1-.226.084.34.34 0 0 1-.224-.086l-.092-.077c-.699-1.615-1.768-2.669-2.781-3.67-1.454-1.435-2.797-2.762-2.78-5.478.02-3.067 2.7-5.545 5.975-5.523m-.02 2.826c-1.62-.01-2.944 1.315-2.955 2.96-.01 1.646 1.295 2.988 2.916 2.999h.002c1.621.01 2.943-1.316 2.953-2.961.011-1.646-1.294-2.988-2.916-2.998m-.005 1.1c1.017.006 1.829.83 1.822 1.89s-.83 1.874-1.848 1.867c-1.018-.006-1.829-.83-1.822-1.89s.83-1.874 1.848-1.868m-2.155 11.857 4.14.025c.271.002.49.305.487.676l-.013 1.875c-.003.37-.224.67-.495.668l-4.14-.025c-.27-.002-.487-.306-.485-.676l.012-1.875c.003-.37.224-.67.494-.668' style='color:%23000;font-style:normal;font-variant:normal;font-weight:400;font-stretch:normal;font-size:medium;line-height:normal;font-family:sans-serif;font-variant-ligatures:normal;font-variant-position:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-alternates:normal;font-feature-settings:normal;text-indent:0;text-align:start;text-decoration:none;text-decoration-line:none;text-decoration-style:solid;text-decoration-color:%23000;letter-spacing:normal;word-spacing:normal;text-transform:none;writing-mode:lr-tb;direction:ltr;text-orientation:mixed;dominant-baseline:auto;baseline-shift:baseline;text-anchor:start;white-space:normal;shape-padding:0;clip-rule:evenodd;display:inline;overflow:visible;visibility:visible;opacity:1;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:%23000;solid-opacity:1;vector-effect:none;fill:%23000;fill-opacity:.4;fill-rule:evenodd;stroke:none;stroke-width:2.47727823;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto' transform='translate(15.553 2.85)scale(.88807)'/%3E%3Cpath d='M-9.415-.316C-12.69-.338-15.37 2.14-15.39 5.207c-.017 2.716 1.326 4.041 2.78 5.477 1.013 1 2.081 2.055 2.78 3.67l.092.076a.34.34 0 0 0 .225.086.34.34 0 0 0 .227-.083l.019-.01c.022-.009.057-.024.074-.064.697-1.6 1.78-2.64 2.814-3.634 1.473-1.414 2.847-2.733 2.864-5.44.02-3.067-2.627-5.58-5.901-5.601m-.057 8.784c1.621.011 2.944-1.315 2.955-2.96.01-1.646-1.295-2.988-2.916-2.999-1.622-.01-2.945 1.315-2.955 2.96s1.295 2.989 2.916 3' style='clip-rule:evenodd;fill:%23e1e3e9;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:2.47727823;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:.4' transform='translate(15.553 2.85)scale(.88807)'/%3E%3Cpath d='M-11.594 15.465c-.27-.002-.492.297-.494.668l-.012 1.876c-.003.371.214.673.485.675l4.14.027c.271.002.492-.298.495-.668l.012-1.877c.003-.37-.215-.672-.485-.674z' style='clip-rule:evenodd;fill:%23fff;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:2.47727823;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:.4' transform='translate(15.553 2.85)scale(.88807)'/%3E%3C/g%3E%3C/svg%3E");background-repeat:no-repeat;cursor:pointer;display:block;height:23px;margin:0 0 -4px -4px;overflow:hidden;width:88px}a.maplibregl-ctrl-logo.maplibregl-compact{width:14px}@media (forced-colors:active){a.maplibregl-ctrl-logo{background-color:transparent;background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='88' height='23' fill='none'%3E%3Cpath fill='%23000' fill-opacity='.4' fill-rule='evenodd' d='M17.408 16.796h-1.827l2.501-12.095h.198l3.324 6.533.988 2.19.988-2.19 3.258-6.533h.181l2.6 12.095h-1.81l-1.218-5.644-.362-1.71-.658 1.71-2.929 5.644h-.098l-2.914-5.644-.757-1.71-.345 1.71zm1.958-3.42-.726 3.663a1.255 1.255 0 0 1-1.232 1.011h-1.827a1.255 1.255 0 0 1-1.229-1.509l2.501-12.095a1.255 1.255 0 0 1 1.23-1.001h.197a1.25 1.25 0 0 1 1.12.685l3.19 6.273 3.125-6.263a1.25 1.25 0 0 1 1.123-.695h.181a1.255 1.255 0 0 1 1.227.991l1.443 6.71a5 5 0 0 1 .314-.787l.009-.016a4.6 4.6 0 0 1 1.777-1.887c.782-.46 1.668-.667 2.611-.667a4.6 4.6 0 0 1 1.7.32l.306.134c.21-.16.474-.256.759-.256h1.694a1.255 1.255 0 0 1 1.212.925 1.255 1.255 0 0 1 1.212-.925h1.711c.284 0 .545.094.755.252.613-.3 1.312-.45 2.075-.45 1.356 0 2.557.445 3.482 1.4q.47.48.763 1.064V4.701a1.255 1.255 0 0 1 1.255-1.255h1.86A1.255 1.255 0 0 1 54.44 4.7v9.194h2.217c.19 0 .37.043.532.118v-4.77c0-.356.147-.678.385-.906a2.42 2.42 0 0 1-.682-1.71c0-.665.267-1.253.735-1.7a2.45 2.45 0 0 1 1.722-.674 2.43 2.43 0 0 1 1.705.675q.318.302.504.683V4.7a1.255 1.255 0 0 1 1.255-1.255h1.744A1.255 1.255 0 0 1 65.812 4.7v3.335a4.8 4.8 0 0 1 1.526-.246c.938 0 1.817.214 2.59.69a4.47 4.47 0 0 1 1.67 1.743v-.98a1.255 1.255 0 0 1 1.256-1.256h1.777c.233 0 .451.064.639.174a3.4 3.4 0 0 1 1.567-.372c.346 0 .861.02 1.285.232a1.25 1.25 0 0 1 .689 1.004 4.7 4.7 0 0 1 .853-.588c.795-.44 1.675-.647 2.61-.647 1.385 0 2.65.39 3.525 1.396.836.938 1.168 2.173 1.168 3.528q-.001.515-.056 1.051a1.255 1.255 0 0 1-.947 1.09l.408.952a1.255 1.255 0 0 1-.477 1.552c-.418.268-.92.463-1.458.612-.613.171-1.304.244-2.049.244-1.06 0-2.043-.207-2.886-.698l-.015-.008c-.798-.48-1.419-1.135-1.818-1.963l-.004-.008a5.8 5.8 0 0 1-.548-2.512q0-.429.053-.843a1.3 1.3 0 0 1-.333-.086l-.166-.004c-.223 0-.426.062-.643.228-.03.024-.142.139-.142.59v3.883a1.255 1.255 0 0 1-1.256 1.256h-1.777a1.255 1.255 0 0 1-1.256-1.256V15.69l-.032.057a4.8 4.8 0 0 1-1.86 1.833 5.04 5.04 0 0 1-2.484.634 4.5 4.5 0 0 1-1.935-.424 1.25 1.25 0 0 1-.764.258h-1.71a1.255 1.255 0 0 1-1.256-1.255V7.687a2.4 2.4 0 0 1-.428.625c.253.23.412.561.412.93v7.553a1.255 1.255 0 0 1-1.256 1.255h-1.843a1.25 1.25 0 0 1-.894-.373c-.228.23-.544.373-.894.373H51.32a1.255 1.255 0 0 1-1.256-1.255v-1.251l-.061.117a4.7 4.7 0 0 1-1.782 1.884 4.77 4.77 0 0 1-2.485.67 5.6 5.6 0 0 1-1.485-.188l.009 2.764a1.255 1.255 0 0 1-1.255 1.259h-1.729a1.255 1.255 0 0 1-1.255-1.255v-3.537a1.255 1.255 0 0 1-1.167.793h-1.679a1.25 1.25 0 0 1-.77-.263 4.5 4.5 0 0 1-1.945.429c-.885 0-1.724-.21-2.495-.632l-.017-.01a5 5 0 0 1-1.081-.836 1.255 1.255 0 0 1-1.254 1.312h-1.81a1.255 1.255 0 0 1-1.228-.99l-.782-3.625-2.044 3.939a1.25 1.25 0 0 1-1.115.676h-.098a1.25 1.25 0 0 1-1.116-.68l-2.061-3.994zM35.92 16.63l.207-.114.223-.15q.493-.356.735-.785l.061-.118.033 1.332h1.678V9.242h-1.694l-.033 1.267q-.133-.329-.526-.658l-.032-.028a3.2 3.2 0 0 0-.668-.428l-.27-.12a3.3 3.3 0 0 0-1.235-.23q-1.136-.001-1.974.493a3.36 3.36 0 0 0-1.3 1.382q-.445.89-.444 2.074 0 1.2.51 2.107a3.8 3.8 0 0 0 1.382 1.381 3.9 3.9 0 0 0 1.893.477q.795 0 1.455-.33zm-2.789-5.38q-.576.675-.575 1.762 0 1.102.559 1.794.576.675 1.645.675a2.25 2.25 0 0 0 .934-.19 2.2 2.2 0 0 0 .468-.29l.178-.161a2.2 2.2 0 0 0 .397-.561q.244-.5.244-1.15v-.115q0-.708-.296-1.267l-.043-.077a2.2 2.2 0 0 0-.633-.709l-.13-.086-.047-.028a2.1 2.1 0 0 0-1.073-.285q-1.052 0-1.629.692zm2.316 2.706c.163-.17.28-.407.28-.83v-.114c0-.292-.06-.508-.15-.68a.96.96 0 0 0-.353-.389.85.85 0 0 0-.464-.127c-.4 0-.56.114-.664.239l-.01.012c-.148.174-.275.45-.275.945 0 .506.122.801.27.99.097.11.266.224.68.224.303 0 .504-.09.687-.269zm7.545 1.705a2.6 2.6 0 0 0 .331.423q.319.33.755.548l.173.074q.65.255 1.49.255 1.02 0 1.844-.493a3.45 3.45 0 0 0 1.316-1.4q.493-.904.493-2.089 0-1.909-.988-2.913-.988-1.02-2.584-1.02-.898 0-1.575.347a3 3 0 0 0-.415.262l-.199.166a3.4 3.4 0 0 0-.64.82V9.242h-1.712v11.553h1.729l-.017-5.134zm.53-1.138q.206.29.48.5l.155.11.053.034q.51.296 1.119.297 1.07 0 1.645-.675.577-.69.576-1.762 0-1.119-.576-1.777-.558-.675-1.645-.675-.435 0-.835.16a2 2 0 0 0-.284.136 2 2 0 0 0-.363.254 2.2 2.2 0 0 0-.46.569l-.082.162a2.6 2.6 0 0 0-.213 1.072v.115q0 .707.296 1.267l.135.211zm.964-.818a1.1 1.1 0 0 0 .367.385.94.94 0 0 0 .476.118c.423 0 .59-.117.687-.23.159-.194.28-.478.28-.95 0-.53-.133-.8-.266-.952l-.021-.025c-.078-.094-.231-.221-.68-.221a1 1 0 0 0-.503.135l-.012.007a.86.86 0 0 0-.335.343c-.073.133-.132.324-.132.614v.115a1.4 1.4 0 0 0 .14.66zm15.7-6.222q.347-.346.346-.856a1.05 1.05 0 0 0-.345-.79 1.18 1.18 0 0 0-.84-.329q-.51 0-.855.33a1.05 1.05 0 0 0-.346.79q0 .51.346.855.345.346.856.346.51 0 .839-.346zm4.337 9.314.033-1.332q.191.403.59.747l.098.081a4 4 0 0 0 .316.224l.223.122a3.2 3.2 0 0 0 1.44.322 3.8 3.8 0 0 0 1.875-.477 3.5 3.5 0 0 0 1.382-1.366q.527-.89.526-2.09 0-1.184-.444-2.073a3.24 3.24 0 0 0-1.283-1.399q-.823-.51-1.942-.51a3.5 3.5 0 0 0-1.527.344l-.086.043-.165.09a3 3 0 0 0-.33.214q-.432.315-.656.707a2 2 0 0 0-.099.198l.082-1.283V4.701h-1.744v12.095zm.473-2.509a2.5 2.5 0 0 0 .566.7q.117.098.245.18l.144.08a2.1 2.1 0 0 0 .975.232q1.07 0 1.645-.675.576-.69.576-1.778 0-1.102-.576-1.777-.56-.691-1.645-.692a2.2 2.2 0 0 0-1.015.235q-.22.113-.415.282l-.15.142a2.1 2.1 0 0 0-.42.594q-.223.479-.223 1.1v.115q0 .705.293 1.26zm2.616-.293c.157-.191.28-.479.28-.967 0-.51-.13-.79-.276-.961l-.021-.026c-.082-.1-.232-.225-.67-.225a.87.87 0 0 0-.681.279l-.012.011c-.154.155-.274.38-.274.807v.115c0 .285.057.499.144.669a1.1 1.1 0 0 0 .367.405c.137.082.28.123.455.123.423 0 .59-.118.686-.23zm8.266-3.013q.345-.13.724-.14l.069-.002q.493 0 .642.099l.247-1.794q-.196-.099-.717-.099a2.3 2.3 0 0 0-.545.063 2 2 0 0 0-.411.148 2.2 2.2 0 0 0-.4.249 2.5 2.5 0 0 0-.485.499 2.7 2.7 0 0 0-.32.581l-.05.137v-1.48h-1.778v7.553h1.777v-3.884q0-.546.159-.943a1.5 1.5 0 0 1 .466-.636 2.5 2.5 0 0 1 .399-.253 2 2 0 0 1 .224-.099zm9.784 2.656.05-.922q0-1.743-.856-2.698-.838-.97-2.584-.97-1.119-.001-2.007.493a3.46 3.46 0 0 0-1.4 1.382q-.493.906-.493 2.106 0 1.07.428 1.975.428.89 1.332 1.432.906.526 2.255.526.973 0 1.668-.185l.044-.012.135-.04q.613-.184.984-.421l-.542-1.267q-.3.162-.642.274l-.297.087q-.51.131-1.3.131-.954 0-1.497-.444a1.6 1.6 0 0 1-.192-.193q-.366-.44-.512-1.234l-.004-.021zm-5.427-1.256-.003.022h3.752v-.138q-.011-.727-.288-1.118a1 1 0 0 0-.156-.176q-.46-.428-1.316-.428-.986 0-1.494.604-.379.45-.494 1.234zm-27.053 2.77V4.7h-1.86v12.095h5.333V15.15zm7.103-5.908v7.553h-1.843V9.242h1.843z'/%3E%3Cpath fill='%23fff' d='m19.63 11.151-.757-1.71-.345 1.71-1.12 5.644h-1.827L18.083 4.7h.197l3.325 6.533.988 2.19.988-2.19L26.839 4.7h.181l2.6 12.095h-1.81l-1.218-5.644-.362-1.71-.658 1.71-2.93 5.644h-.098l-2.913-5.644zm14.836 5.81q-1.02 0-1.893-.478a3.8 3.8 0 0 1-1.381-1.382q-.51-.906-.51-2.106 0-1.185.444-2.074a3.36 3.36 0 0 1 1.3-1.382q.839-.494 1.974-.494a3.3 3.3 0 0 1 1.234.231 3.3 3.3 0 0 1 .97.575q.396.33.527.659l.033-1.267h1.694v7.553H37.18l-.033-1.332q-.279.593-1.02 1.053a3.17 3.17 0 0 1-1.662.444zm.296-1.482q.938 0 1.58-.642.642-.66.642-1.711v-.115q0-.708-.296-1.267a2.2 2.2 0 0 0-.807-.872 2.1 2.1 0 0 0-1.119-.313q-1.053 0-1.629.692-.575.675-.575 1.76 0 1.103.559 1.795.577.675 1.645.675zm6.521-6.237h1.711v1.4q.906-1.597 2.83-1.597 1.596 0 2.584 1.02.988 1.005.988 2.914 0 1.185-.493 2.09a3.46 3.46 0 0 1-1.316 1.399 3.5 3.5 0 0 1-1.844.493q-.954 0-1.662-.329a2.67 2.67 0 0 1-1.086-.97l.017 5.134h-1.728zm4.048 6.22q1.07 0 1.645-.674.577-.69.576-1.762 0-1.119-.576-1.777-.558-.675-1.645-.675-.592 0-1.12.296-.51.28-.822.823-.296.527-.296 1.234v.115q0 .708.296 1.267.313.543.823.855.51.296 1.119.297z'/%3E%3Cpath fill='%23e1e3e9' d='M51.325 4.7h1.86v10.45h3.473v1.646h-5.333zm7.12 4.542h1.843v7.553h-1.843zm.905-1.415a1.16 1.16 0 0 1-.856-.346 1.17 1.17 0 0 1-.346-.856 1.05 1.05 0 0 1 .346-.79q.346-.329.856-.329.494 0 .839.33a1.05 1.05 0 0 1 .345.79 1.16 1.16 0 0 1-.345.855q-.33.346-.84.346zm7.875 9.133a3.17 3.17 0 0 1-1.662-.444q-.723-.46-1.004-1.053l-.033 1.332h-1.71V4.701h1.743v4.657l-.082 1.283q.279-.658 1.086-1.119a3.5 3.5 0 0 1 1.778-.477q1.119 0 1.942.51a3.24 3.24 0 0 1 1.283 1.4q.445.888.444 2.072 0 1.201-.526 2.09a3.5 3.5 0 0 1-1.382 1.366 3.8 3.8 0 0 1-1.876.477zm-.296-1.481q1.069 0 1.645-.675.577-.69.577-1.778 0-1.102-.577-1.776-.56-.691-1.645-.692a2.12 2.12 0 0 0-1.58.659q-.642.641-.642 1.694v.115q0 .71.296 1.267a2.4 2.4 0 0 0 .807.872 2.1 2.1 0 0 0 1.119.313zm5.927-6.237h1.777v1.481q.263-.757.856-1.217a2.14 2.14 0 0 1 1.349-.46q.527 0 .724.098l-.247 1.794q-.149-.099-.642-.099-.774 0-1.416.494-.626.493-.626 1.58v3.883h-1.777V9.242zm9.534 7.718q-1.35 0-2.255-.526-.904-.543-1.332-1.432a4.6 4.6 0 0 1-.428-1.975q0-1.2.493-2.106a3.46 3.46 0 0 1 1.4-1.382q.889-.495 2.007-.494 1.744 0 2.584.97.855.956.856 2.7 0 .444-.05.92h-5.43q.18 1.005.708 1.45.542.443 1.497.443.79 0 1.3-.131a4 4 0 0 0 .938-.362l.542 1.267q-.411.263-1.119.46-.708.198-1.711.197zm1.596-4.558q.016-1.02-.444-1.432-.46-.428-1.316-.428-1.728 0-1.991 1.86z'/%3E%3Cpath d='M5.074 15.948a.484.657 0 0 0-.486.659v1.84a.484.657 0 0 0 .486.659h4.101a.484.657 0 0 0 .486-.659v-1.84a.484.657 0 0 0-.486-.659zm3.56 1.16H5.617v.838h3.017z' style='fill:%23fff;fill-rule:evenodd;stroke-width:1.03600001'/%3E%3Cg style='stroke-width:1.12603545'%3E%3Cpath d='M-9.408-1.416c-3.833-.025-7.056 2.912-7.08 6.615-.02 3.08 1.653 4.832 3.107 6.268.903.892 1.721 1.74 2.32 2.902l-.525-.004c-.543-.003-.992.304-1.24.639a1.87 1.87 0 0 0-.362 1.121l-.011 1.877c-.003.402.104.787.347 1.125.244.338.688.653 1.23.656l4.142.028c.542.003.99-.306 1.238-.641a1.87 1.87 0 0 0 .363-1.121l.012-1.875a1.87 1.87 0 0 0-.348-1.127c-.243-.338-.688-.653-1.23-.656l-.518-.004c.597-1.145 1.425-1.983 2.348-2.87 1.473-1.414 3.18-3.149 3.2-6.226-.016-3.59-2.923-6.684-6.993-6.707m-.006 1.1v.002c3.274.02 5.92 2.532 5.9 5.6-.017 2.706-1.39 4.026-2.863 5.44-1.034.994-2.118 2.033-2.814 3.633-.018.041-.052.055-.075.065q-.013.004-.02.01a.34.34 0 0 1-.226.084.34.34 0 0 1-.224-.086l-.092-.077c-.699-1.615-1.768-2.669-2.781-3.67-1.454-1.435-2.797-2.762-2.78-5.478.02-3.067 2.7-5.545 5.975-5.523m-.02 2.826c-1.62-.01-2.944 1.315-2.955 2.96-.01 1.646 1.295 2.988 2.916 2.999h.002c1.621.01 2.943-1.316 2.953-2.961.011-1.646-1.294-2.988-2.916-2.998m-.005 1.1c1.017.006 1.829.83 1.822 1.89s-.83 1.874-1.848 1.867c-1.018-.006-1.829-.83-1.822-1.89s.83-1.874 1.848-1.868m-2.155 11.857 4.14.025c.271.002.49.305.487.676l-.013 1.875c-.003.37-.224.67-.495.668l-4.14-.025c-.27-.002-.487-.306-.485-.676l.012-1.875c.003-.37.224-.67.494-.668' style='color:%23000;font-style:normal;font-variant:normal;font-weight:400;font-stretch:normal;font-size:medium;line-height:normal;font-family:sans-serif;font-variant-ligatures:normal;font-variant-position:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-alternates:normal;font-feature-settings:normal;text-indent:0;text-align:start;text-decoration:none;text-decoration-line:none;text-decoration-style:solid;text-decoration-color:%23000;letter-spacing:normal;word-spacing:normal;text-transform:none;writing-mode:lr-tb;direction:ltr;text-orientation:mixed;dominant-baseline:auto;baseline-shift:baseline;text-anchor:start;white-space:normal;shape-padding:0;clip-rule:evenodd;display:inline;overflow:visible;visibility:visible;opacity:1;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:%23000;solid-opacity:1;vector-effect:none;fill:%23000;fill-opacity:.4;fill-rule:evenodd;stroke:none;stroke-width:2.47727823;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto' transform='translate(15.553 2.85)scale(.88807)'/%3E%3Cpath d='M-9.415-.316C-12.69-.338-15.37 2.14-15.39 5.207c-.017 2.716 1.326 4.041 2.78 5.477 1.013 1 2.081 2.055 2.78 3.67l.092.076a.34.34 0 0 0 .225.086.34.34 0 0 0 .227-.083l.019-.01c.022-.009.057-.024.074-.064.697-1.6 1.78-2.64 2.814-3.634 1.473-1.414 2.847-2.733 2.864-5.44.02-3.067-2.627-5.58-5.901-5.601m-.057 8.784c1.621.011 2.944-1.315 2.955-2.96.01-1.646-1.295-2.988-2.916-2.999-1.622-.01-2.945 1.315-2.955 2.96s1.295 2.989 2.916 3' style='clip-rule:evenodd;fill:%23e1e3e9;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:2.47727823;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:.4' transform='translate(15.553 2.85)scale(.88807)'/%3E%3Cpath d='M-11.594 15.465c-.27-.002-.492.297-.494.668l-.012 1.876c-.003.371.214.673.485.675l4.14.027c.271.002.492-.298.495-.668l.012-1.877c.003-.37-.215-.672-.485-.674z' style='clip-rule:evenodd;fill:%23fff;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:2.47727823;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:.4' transform='translate(15.553 2.85)scale(.88807)'/%3E%3C/g%3E%3C/svg%3E")}}@media (forced-colors:active) and (prefers-color-scheme:light){a.maplibregl-ctrl-logo{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='88' height='23' fill='none'%3E%3Cpath fill='%23000' fill-opacity='.4' fill-rule='evenodd' d='M17.408 16.796h-1.827l2.501-12.095h.198l3.324 6.533.988 2.19.988-2.19 3.258-6.533h.181l2.6 12.095h-1.81l-1.218-5.644-.362-1.71-.658 1.71-2.929 5.644h-.098l-2.914-5.644-.757-1.71-.345 1.71zm1.958-3.42-.726 3.663a1.255 1.255 0 0 1-1.232 1.011h-1.827a1.255 1.255 0 0 1-1.229-1.509l2.501-12.095a1.255 1.255 0 0 1 1.23-1.001h.197a1.25 1.25 0 0 1 1.12.685l3.19 6.273 3.125-6.263a1.25 1.25 0 0 1 1.123-.695h.181a1.255 1.255 0 0 1 1.227.991l1.443 6.71a5 5 0 0 1 .314-.787l.009-.016a4.6 4.6 0 0 1 1.777-1.887c.782-.46 1.668-.667 2.611-.667a4.6 4.6 0 0 1 1.7.32l.306.134c.21-.16.474-.256.759-.256h1.694a1.255 1.255 0 0 1 1.212.925 1.255 1.255 0 0 1 1.212-.925h1.711c.284 0 .545.094.755.252.613-.3 1.312-.45 2.075-.45 1.356 0 2.557.445 3.482 1.4q.47.48.763 1.064V4.701a1.255 1.255 0 0 1 1.255-1.255h1.86A1.255 1.255 0 0 1 54.44 4.7v9.194h2.217c.19 0 .37.043.532.118v-4.77c0-.356.147-.678.385-.906a2.42 2.42 0 0 1-.682-1.71c0-.665.267-1.253.735-1.7a2.45 2.45 0 0 1 1.722-.674 2.43 2.43 0 0 1 1.705.675q.318.302.504.683V4.7a1.255 1.255 0 0 1 1.255-1.255h1.744A1.255 1.255 0 0 1 65.812 4.7v3.335a4.8 4.8 0 0 1 1.526-.246c.938 0 1.817.214 2.59.69a4.47 4.47 0 0 1 1.67 1.743v-.98a1.255 1.255 0 0 1 1.256-1.256h1.777c.233 0 .451.064.639.174a3.4 3.4 0 0 1 1.567-.372c.346 0 .861.02 1.285.232a1.25 1.25 0 0 1 .689 1.004 4.7 4.7 0 0 1 .853-.588c.795-.44 1.675-.647 2.61-.647 1.385 0 2.65.39 3.525 1.396.836.938 1.168 2.173 1.168 3.528q-.001.515-.056 1.051a1.255 1.255 0 0 1-.947 1.09l.408.952a1.255 1.255 0 0 1-.477 1.552c-.418.268-.92.463-1.458.612-.613.171-1.304.244-2.049.244-1.06 0-2.043-.207-2.886-.698l-.015-.008c-.798-.48-1.419-1.135-1.818-1.963l-.004-.008a5.8 5.8 0 0 1-.548-2.512q0-.429.053-.843a1.3 1.3 0 0 1-.333-.086l-.166-.004c-.223 0-.426.062-.643.228-.03.024-.142.139-.142.59v3.883a1.255 1.255 0 0 1-1.256 1.256h-1.777a1.255 1.255 0 0 1-1.256-1.256V15.69l-.032.057a4.8 4.8 0 0 1-1.86 1.833 5.04 5.04 0 0 1-2.484.634 4.5 4.5 0 0 1-1.935-.424 1.25 1.25 0 0 1-.764.258h-1.71a1.255 1.255 0 0 1-1.256-1.255V7.687a2.4 2.4 0 0 1-.428.625c.253.23.412.561.412.93v7.553a1.255 1.255 0 0 1-1.256 1.255h-1.843a1.25 1.25 0 0 1-.894-.373c-.228.23-.544.373-.894.373H51.32a1.255 1.255 0 0 1-1.256-1.255v-1.251l-.061.117a4.7 4.7 0 0 1-1.782 1.884 4.77 4.77 0 0 1-2.485.67 5.6 5.6 0 0 1-1.485-.188l.009 2.764a1.255 1.255 0 0 1-1.255 1.259h-1.729a1.255 1.255 0 0 1-1.255-1.255v-3.537a1.255 1.255 0 0 1-1.167.793h-1.679a1.25 1.25 0 0 1-.77-.263 4.5 4.5 0 0 1-1.945.429c-.885 0-1.724-.21-2.495-.632l-.017-.01a5 5 0 0 1-1.081-.836 1.255 1.255 0 0 1-1.254 1.312h-1.81a1.255 1.255 0 0 1-1.228-.99l-.782-3.625-2.044 3.939a1.25 1.25 0 0 1-1.115.676h-.098a1.25 1.25 0 0 1-1.116-.68l-2.061-3.994zM35.92 16.63l.207-.114.223-.15q.493-.356.735-.785l.061-.118.033 1.332h1.678V9.242h-1.694l-.033 1.267q-.133-.329-.526-.658l-.032-.028a3.2 3.2 0 0 0-.668-.428l-.27-.12a3.3 3.3 0 0 0-1.235-.23q-1.136-.001-1.974.493a3.36 3.36 0 0 0-1.3 1.382q-.445.89-.444 2.074 0 1.2.51 2.107a3.8 3.8 0 0 0 1.382 1.381 3.9 3.9 0 0 0 1.893.477q.795 0 1.455-.33zm-2.789-5.38q-.576.675-.575 1.762 0 1.102.559 1.794.576.675 1.645.675a2.25 2.25 0 0 0 .934-.19 2.2 2.2 0 0 0 .468-.29l.178-.161a2.2 2.2 0 0 0 .397-.561q.244-.5.244-1.15v-.115q0-.708-.296-1.267l-.043-.077a2.2 2.2 0 0 0-.633-.709l-.13-.086-.047-.028a2.1 2.1 0 0 0-1.073-.285q-1.052 0-1.629.692zm2.316 2.706c.163-.17.28-.407.28-.83v-.114c0-.292-.06-.508-.15-.68a.96.96 0 0 0-.353-.389.85.85 0 0 0-.464-.127c-.4 0-.56.114-.664.239l-.01.012c-.148.174-.275.45-.275.945 0 .506.122.801.27.99.097.11.266.224.68.224.303 0 .504-.09.687-.269zm7.545 1.705a2.6 2.6 0 0 0 .331.423q.319.33.755.548l.173.074q.65.255 1.49.255 1.02 0 1.844-.493a3.45 3.45 0 0 0 1.316-1.4q.493-.904.493-2.089 0-1.909-.988-2.913-.988-1.02-2.584-1.02-.898 0-1.575.347a3 3 0 0 0-.415.262l-.199.166a3.4 3.4 0 0 0-.64.82V9.242h-1.712v11.553h1.729l-.017-5.134zm.53-1.138q.206.29.48.5l.155.11.053.034q.51.296 1.119.297 1.07 0 1.645-.675.577-.69.576-1.762 0-1.119-.576-1.777-.558-.675-1.645-.675-.435 0-.835.16a2 2 0 0 0-.284.136 2 2 0 0 0-.363.254 2.2 2.2 0 0 0-.46.569l-.082.162a2.6 2.6 0 0 0-.213 1.072v.115q0 .707.296 1.267l.135.211zm.964-.818a1.1 1.1 0 0 0 .367.385.94.94 0 0 0 .476.118c.423 0 .59-.117.687-.23.159-.194.28-.478.28-.95 0-.53-.133-.8-.266-.952l-.021-.025c-.078-.094-.231-.221-.68-.221a1 1 0 0 0-.503.135l-.012.007a.86.86 0 0 0-.335.343c-.073.133-.132.324-.132.614v.115a1.4 1.4 0 0 0 .14.66zm15.7-6.222q.347-.346.346-.856a1.05 1.05 0 0 0-.345-.79 1.18 1.18 0 0 0-.84-.329q-.51 0-.855.33a1.05 1.05 0 0 0-.346.79q0 .51.346.855.345.346.856.346.51 0 .839-.346zm4.337 9.314.033-1.332q.191.403.59.747l.098.081a4 4 0 0 0 .316.224l.223.122a3.2 3.2 0 0 0 1.44.322 3.8 3.8 0 0 0 1.875-.477 3.5 3.5 0 0 0 1.382-1.366q.527-.89.526-2.09 0-1.184-.444-2.073a3.24 3.24 0 0 0-1.283-1.399q-.823-.51-1.942-.51a3.5 3.5 0 0 0-1.527.344l-.086.043-.165.09a3 3 0 0 0-.33.214q-.432.315-.656.707a2 2 0 0 0-.099.198l.082-1.283V4.701h-1.744v12.095zm.473-2.509a2.5 2.5 0 0 0 .566.7q.117.098.245.18l.144.08a2.1 2.1 0 0 0 .975.232q1.07 0 1.645-.675.576-.69.576-1.778 0-1.102-.576-1.777-.56-.691-1.645-.692a2.2 2.2 0 0 0-1.015.235q-.22.113-.415.282l-.15.142a2.1 2.1 0 0 0-.42.594q-.223.479-.223 1.1v.115q0 .705.293 1.26zm2.616-.293c.157-.191.28-.479.28-.967 0-.51-.13-.79-.276-.961l-.021-.026c-.082-.1-.232-.225-.67-.225a.87.87 0 0 0-.681.279l-.012.011c-.154.155-.274.38-.274.807v.115c0 .285.057.499.144.669a1.1 1.1 0 0 0 .367.405c.137.082.28.123.455.123.423 0 .59-.118.686-.23zm8.266-3.013q.345-.13.724-.14l.069-.002q.493 0 .642.099l.247-1.794q-.196-.099-.717-.099a2.3 2.3 0 0 0-.545.063 2 2 0 0 0-.411.148 2.2 2.2 0 0 0-.4.249 2.5 2.5 0 0 0-.485.499 2.7 2.7 0 0 0-.32.581l-.05.137v-1.48h-1.778v7.553h1.777v-3.884q0-.546.159-.943a1.5 1.5 0 0 1 .466-.636 2.5 2.5 0 0 1 .399-.253 2 2 0 0 1 .224-.099zm9.784 2.656.05-.922q0-1.743-.856-2.698-.838-.97-2.584-.97-1.119-.001-2.007.493a3.46 3.46 0 0 0-1.4 1.382q-.493.906-.493 2.106 0 1.07.428 1.975.428.89 1.332 1.432.906.526 2.255.526.973 0 1.668-.185l.044-.012.135-.04q.613-.184.984-.421l-.542-1.267q-.3.162-.642.274l-.297.087q-.51.131-1.3.131-.954 0-1.497-.444a1.6 1.6 0 0 1-.192-.193q-.366-.44-.512-1.234l-.004-.021zm-5.427-1.256-.003.022h3.752v-.138q-.011-.727-.288-1.118a1 1 0 0 0-.156-.176q-.46-.428-1.316-.428-.986 0-1.494.604-.379.45-.494 1.234zm-27.053 2.77V4.7h-1.86v12.095h5.333V15.15zm7.103-5.908v7.553h-1.843V9.242h1.843z'/%3E%3Cpath fill='%23fff' d='m19.63 11.151-.757-1.71-.345 1.71-1.12 5.644h-1.827L18.083 4.7h.197l3.325 6.533.988 2.19.988-2.19L26.839 4.7h.181l2.6 12.095h-1.81l-1.218-5.644-.362-1.71-.658 1.71-2.93 5.644h-.098l-2.913-5.644zm14.836 5.81q-1.02 0-1.893-.478a3.8 3.8 0 0 1-1.381-1.382q-.51-.906-.51-2.106 0-1.185.444-2.074a3.36 3.36 0 0 1 1.3-1.382q.839-.494 1.974-.494a3.3 3.3 0 0 1 1.234.231 3.3 3.3 0 0 1 .97.575q.396.33.527.659l.033-1.267h1.694v7.553H37.18l-.033-1.332q-.279.593-1.02 1.053a3.17 3.17 0 0 1-1.662.444zm.296-1.482q.938 0 1.58-.642.642-.66.642-1.711v-.115q0-.708-.296-1.267a2.2 2.2 0 0 0-.807-.872 2.1 2.1 0 0 0-1.119-.313q-1.053 0-1.629.692-.575.675-.575 1.76 0 1.103.559 1.795.577.675 1.645.675zm6.521-6.237h1.711v1.4q.906-1.597 2.83-1.597 1.596 0 2.584 1.02.988 1.005.988 2.914 0 1.185-.493 2.09a3.46 3.46 0 0 1-1.316 1.399 3.5 3.5 0 0 1-1.844.493q-.954 0-1.662-.329a2.67 2.67 0 0 1-1.086-.97l.017 5.134h-1.728zm4.048 6.22q1.07 0 1.645-.674.577-.69.576-1.762 0-1.119-.576-1.777-.558-.675-1.645-.675-.592 0-1.12.296-.51.28-.822.823-.296.527-.296 1.234v.115q0 .708.296 1.267.313.543.823.855.51.296 1.119.297z'/%3E%3Cpath fill='%23e1e3e9' d='M51.325 4.7h1.86v10.45h3.473v1.646h-5.333zm7.12 4.542h1.843v7.553h-1.843zm.905-1.415a1.16 1.16 0 0 1-.856-.346 1.17 1.17 0 0 1-.346-.856 1.05 1.05 0 0 1 .346-.79q.346-.329.856-.329.494 0 .839.33a1.05 1.05 0 0 1 .345.79 1.16 1.16 0 0 1-.345.855q-.33.346-.84.346zm7.875 9.133a3.17 3.17 0 0 1-1.662-.444q-.723-.46-1.004-1.053l-.033 1.332h-1.71V4.701h1.743v4.657l-.082 1.283q.279-.658 1.086-1.119a3.5 3.5 0 0 1 1.778-.477q1.119 0 1.942.51a3.24 3.24 0 0 1 1.283 1.4q.445.888.444 2.072 0 1.201-.526 2.09a3.5 3.5 0 0 1-1.382 1.366 3.8 3.8 0 0 1-1.876.477zm-.296-1.481q1.069 0 1.645-.675.577-.69.577-1.778 0-1.102-.577-1.776-.56-.691-1.645-.692a2.12 2.12 0 0 0-1.58.659q-.642.641-.642 1.694v.115q0 .71.296 1.267a2.4 2.4 0 0 0 .807.872 2.1 2.1 0 0 0 1.119.313zm5.927-6.237h1.777v1.481q.263-.757.856-1.217a2.14 2.14 0 0 1 1.349-.46q.527 0 .724.098l-.247 1.794q-.149-.099-.642-.099-.774 0-1.416.494-.626.493-.626 1.58v3.883h-1.777V9.242zm9.534 7.718q-1.35 0-2.255-.526-.904-.543-1.332-1.432a4.6 4.6 0 0 1-.428-1.975q0-1.2.493-2.106a3.46 3.46 0 0 1 1.4-1.382q.889-.495 2.007-.494 1.744 0 2.584.97.855.956.856 2.7 0 .444-.05.92h-5.43q.18 1.005.708 1.45.542.443 1.497.443.79 0 1.3-.131a4 4 0 0 0 .938-.362l.542 1.267q-.411.263-1.119.46-.708.198-1.711.197zm1.596-4.558q.016-1.02-.444-1.432-.46-.428-1.316-.428-1.728 0-1.991 1.86z'/%3E%3Cpath d='M5.074 15.948a.484.657 0 0 0-.486.659v1.84a.484.657 0 0 0 .486.659h4.101a.484.657 0 0 0 .486-.659v-1.84a.484.657 0 0 0-.486-.659zm3.56 1.16H5.617v.838h3.017z' style='fill:%23fff;fill-rule:evenodd;stroke-width:1.03600001'/%3E%3Cg style='stroke-width:1.12603545'%3E%3Cpath d='M-9.408-1.416c-3.833-.025-7.056 2.912-7.08 6.615-.02 3.08 1.653 4.832 3.107 6.268.903.892 1.721 1.74 2.32 2.902l-.525-.004c-.543-.003-.992.304-1.24.639a1.87 1.87 0 0 0-.362 1.121l-.011 1.877c-.003.402.104.787.347 1.125.244.338.688.653 1.23.656l4.142.028c.542.003.99-.306 1.238-.641a1.87 1.87 0 0 0 .363-1.121l.012-1.875a1.87 1.87 0 0 0-.348-1.127c-.243-.338-.688-.653-1.23-.656l-.518-.004c.597-1.145 1.425-1.983 2.348-2.87 1.473-1.414 3.18-3.149 3.2-6.226-.016-3.59-2.923-6.684-6.993-6.707m-.006 1.1v.002c3.274.02 5.92 2.532 5.9 5.6-.017 2.706-1.39 4.026-2.863 5.44-1.034.994-2.118 2.033-2.814 3.633-.018.041-.052.055-.075.065q-.013.004-.02.01a.34.34 0 0 1-.226.084.34.34 0 0 1-.224-.086l-.092-.077c-.699-1.615-1.768-2.669-2.781-3.67-1.454-1.435-2.797-2.762-2.78-5.478.02-3.067 2.7-5.545 5.975-5.523m-.02 2.826c-1.62-.01-2.944 1.315-2.955 2.96-.01 1.646 1.295 2.988 2.916 2.999h.002c1.621.01 2.943-1.316 2.953-2.961.011-1.646-1.294-2.988-2.916-2.998m-.005 1.1c1.017.006 1.829.83 1.822 1.89s-.83 1.874-1.848 1.867c-1.018-.006-1.829-.83-1.822-1.89s.83-1.874 1.848-1.868m-2.155 11.857 4.14.025c.271.002.49.305.487.676l-.013 1.875c-.003.37-.224.67-.495.668l-4.14-.025c-.27-.002-.487-.306-.485-.676l.012-1.875c.003-.37.224-.67.494-.668' style='color:%23000;font-style:normal;font-variant:normal;font-weight:400;font-stretch:normal;font-size:medium;line-height:normal;font-family:sans-serif;font-variant-ligatures:normal;font-variant-position:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-alternates:normal;font-feature-settings:normal;text-indent:0;text-align:start;text-decoration:none;text-decoration-line:none;text-decoration-style:solid;text-decoration-color:%23000;letter-spacing:normal;word-spacing:normal;text-transform:none;writing-mode:lr-tb;direction:ltr;text-orientation:mixed;dominant-baseline:auto;baseline-shift:baseline;text-anchor:start;white-space:normal;shape-padding:0;clip-rule:evenodd;display:inline;overflow:visible;visibility:visible;opacity:1;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:%23000;solid-opacity:1;vector-effect:none;fill:%23000;fill-opacity:.4;fill-rule:evenodd;stroke:none;stroke-width:2.47727823;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto' transform='translate(15.553 2.85)scale(.88807)'/%3E%3Cpath d='M-9.415-.316C-12.69-.338-15.37 2.14-15.39 5.207c-.017 2.716 1.326 4.041 2.78 5.477 1.013 1 2.081 2.055 2.78 3.67l.092.076a.34.34 0 0 0 .225.086.34.34 0 0 0 .227-.083l.019-.01c.022-.009.057-.024.074-.064.697-1.6 1.78-2.64 2.814-3.634 1.473-1.414 2.847-2.733 2.864-5.44.02-3.067-2.627-5.58-5.901-5.601m-.057 8.784c1.621.011 2.944-1.315 2.955-2.96.01-1.646-1.295-2.988-2.916-2.999-1.622-.01-2.945 1.315-2.955 2.96s1.295 2.989 2.916 3' style='clip-rule:evenodd;fill:%23e1e3e9;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:2.47727823;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:.4' transform='translate(15.553 2.85)scale(.88807)'/%3E%3Cpath d='M-11.594 15.465c-.27-.002-.492.297-.494.668l-.012 1.876c-.003.371.214.673.485.675l4.14.027c.271.002.492-.298.495-.668l.012-1.877c.003-.37-.215-.672-.485-.674z' style='clip-rule:evenodd;fill:%23fff;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:2.47727823;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:.4' transform='translate(15.553 2.85)scale(.88807)'/%3E%3C/g%3E%3C/svg%3E")}}.maplibregl-ctrl.maplibregl-ctrl-attrib{background-color:hsla(0,0%,100%,.5);margin:0;padding:0 5px}@media screen{.maplibregl-ctrl-attrib.maplibregl-compact{background-color:#fff;border-radius:12px;-webkit-box-sizing:content-box;box-sizing:content-box;color:#000;margin:10px;min-height:20px;padding:2px 24px 2px 0;position:relative}.maplibregl-ctrl-attrib.maplibregl-compact-show{padding:2px 28px 2px 8px;visibility:visible}.maplibregl-ctrl-bottom-left>.maplibregl-ctrl-attrib.maplibregl-compact-show,.maplibregl-ctrl-top-left>.maplibregl-ctrl-attrib.maplibregl-compact-show{border-radius:12px;padding:2px 8px 2px 28px}.maplibregl-ctrl-attrib.maplibregl-compact .maplibregl-ctrl-attrib-inner{display:none}.maplibregl-ctrl-attrib-button{background-color:hsla(0,0%,100%,.5);background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill-rule='evenodd' viewBox='0 0 20 20'%3E%3Cpath d='M4 10a6 6 0 1 0 12 0 6 6 0 1 0-12 0m5-3a1 1 0 1 0 2 0 1 1 0 1 0-2 0m0 3a1 1 0 1 1 2 0v3a1 1 0 1 1-2 0'/%3E%3C/svg%3E");border:0;border-radius:12px;-webkit-box-sizing:border-box;box-sizing:border-box;cursor:pointer;display:none;height:24px;outline:none;position:absolute;right:0;top:0;width:24px}.maplibregl-ctrl-attrib summary.maplibregl-ctrl-attrib-button{-webkit-appearance:none;-moz-appearance:none;appearance:none;list-style:none}.maplibregl-ctrl-attrib summary.maplibregl-ctrl-attrib-button::-webkit-details-marker{display:none}.maplibregl-ctrl-bottom-left .maplibregl-ctrl-attrib-button,.maplibregl-ctrl-top-left .maplibregl-ctrl-attrib-button{left:0}.maplibregl-ctrl-attrib.maplibregl-compact .maplibregl-ctrl-attrib-button,.maplibregl-ctrl-attrib.maplibregl-compact-show .maplibregl-ctrl-attrib-inner{display:block}.maplibregl-ctrl-attrib.maplibregl-compact-show .maplibregl-ctrl-attrib-button{background-color:rgba(0,0,0,.05)}.maplibregl-ctrl-bottom-right>.maplibregl-ctrl-attrib.maplibregl-compact:after{bottom:0;right:0}.maplibregl-ctrl-top-right>.maplibregl-ctrl-attrib.maplibregl-compact:after{right:0;top:0}.maplibregl-ctrl-top-left>.maplibregl-ctrl-attrib.maplibregl-compact:after{left:0;top:0}.maplibregl-ctrl-bottom-left>.maplibregl-ctrl-attrib.maplibregl-compact:after{bottom:0;left:0}}@media screen and (forced-colors:active){.maplibregl-ctrl-attrib.maplibregl-compact:after{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='%23fff' fill-rule='evenodd' viewBox='0 0 20 20'%3E%3Cpath d='M4 10a6 6 0 1 0 12 0 6 6 0 1 0-12 0m5-3a1 1 0 1 0 2 0 1 1 0 1 0-2 0m0 3a1 1 0 1 1 2 0v3a1 1 0 1 1-2 0'/%3E%3C/svg%3E")}}@media screen and (forced-colors:active) and (prefers-color-scheme:light){.maplibregl-ctrl-attrib.maplibregl-compact:after{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill-rule='evenodd' viewBox='0 0 20 20'%3E%3Cpath d='M4 10a6 6 0 1 0 12 0 6 6 0 1 0-12 0m5-3a1 1 0 1 0 2 0 1 1 0 1 0-2 0m0 3a1 1 0 1 1 2 0v3a1 1 0 1 1-2 0'/%3E%3C/svg%3E")}}.maplibregl-ctrl-attrib a{color:rgba(0,0,0,.75);text-decoration:none}.maplibregl-ctrl-attrib a:hover{color:inherit;text-decoration:underline}.maplibregl-attrib-empty{display:none}.maplibregl-ctrl-scale{background-color:hsla(0,0%,100%,.75);border:2px solid #333;border-top:#333;-webkit-box-sizing:border-box;box-sizing:border-box;color:#333;font-size:10px;padding:0 5px;white-space:nowrap}.maplibregl-popup{display:-webkit-box;display:-ms-flexbox;display:flex;left:0;pointer-events:none;position:absolute;top:0;will-change:transform}.maplibregl-popup-anchor-top,.maplibregl-popup-anchor-top-left,.maplibregl-popup-anchor-top-right{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}.maplibregl-popup-anchor-bottom,.maplibregl-popup-anchor-bottom-left,.maplibregl-popup-anchor-bottom-right{-webkit-box-orient:vertical;-webkit-box-direction:reverse;-ms-flex-direction:column-reverse;flex-direction:column-reverse}.maplibregl-popup-anchor-left{-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row}.maplibregl-popup-anchor-right{-webkit-box-orient:horizontal;-webkit-box-direction:reverse;-ms-flex-direction:row-reverse;flex-direction:row-reverse}.maplibregl-popup-tip{border:10px solid transparent;height:0;width:0;z-index:1}.maplibregl-popup-anchor-top .maplibregl-popup-tip{-ms-flex-item-align:center;align-self:center;border-bottom-color:#fff;border-top:none}.maplibregl-popup-anchor-top-left .maplibregl-popup-tip{-ms-flex-item-align:start;align-self:flex-start;border-bottom-color:#fff;border-left:none;border-top:none}.maplibregl-popup-anchor-top-right .maplibregl-popup-tip{-ms-flex-item-align:end;align-self:flex-end;border-bottom-color:#fff;border-right:none;border-top:none}.maplibregl-popup-anchor-bottom .maplibregl-popup-tip{-ms-flex-item-align:center;align-self:center;border-bottom:none;border-top-color:#fff}.maplibregl-popup-anchor-bottom-left .maplibregl-popup-tip{-ms-flex-item-align:start;align-self:flex-start;border-bottom:none;border-left:none;border-top-color:#fff}.maplibregl-popup-anchor-bottom-right .maplibregl-popup-tip{-ms-flex-item-align:end;align-self:flex-end;border-bottom:none;border-right:none;border-top-color:#fff}.maplibregl-popup-anchor-left .maplibregl-popup-tip{-ms-flex-item-align:center;align-self:center;border-left:none;border-right-color:#fff}.maplibregl-popup-anchor-right .maplibregl-popup-tip{-ms-flex-item-align:center;align-self:center;border-left-color:#fff;border-right:none}[dir=rtl] .maplibregl-popup-anchor-left{-webkit-box-orient:horizontal;-webkit-box-direction:reverse;-ms-flex-direction:row-reverse;flex-direction:row-reverse}[dir=rtl] .maplibregl-popup-anchor-right{-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row}[dir=rtl] .maplibregl-popup-anchor-top-left .maplibregl-popup-tip{-ms-flex-item-align:end;align-self:flex-end}[dir=rtl] .maplibregl-popup-anchor-top-right .maplibregl-popup-tip{-ms-flex-item-align:start;align-self:flex-start}[dir=rtl] .maplibregl-popup-anchor-bottom-left .maplibregl-popup-tip{-ms-flex-item-align:end;align-self:flex-end}[dir=rtl] .maplibregl-popup-anchor-bottom-right .maplibregl-popup-tip{-ms-flex-item-align:start;align-self:flex-start}.maplibregl-popup-close-button{background-color:transparent;border:0;border-radius:0 3px 0 0;cursor:pointer;position:absolute;right:0;top:0}.maplibregl-popup-close-button:hover{background-color:rgba(0,0,0,.05)}.maplibregl-popup-content{background:#fff;border-radius:3px;-webkit-box-shadow:0 1px 2px rgba(0,0,0,.1);box-shadow:0 1px 2px rgba(0,0,0,.1);padding:15px 10px;pointer-events:auto;position:relative}.maplibregl-popup-anchor-top-left .maplibregl-popup-content{border-top-left-radius:0}.maplibregl-popup-anchor-top-right .maplibregl-popup-content{border-top-right-radius:0}.maplibregl-popup-anchor-bottom-left .maplibregl-popup-content{border-bottom-left-radius:0}.maplibregl-popup-anchor-bottom-right .maplibregl-popup-content{border-bottom-right-radius:0}.maplibregl-popup-track-pointer{display:none}.maplibregl-popup-track-pointer *{pointer-events:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.maplibregl-map:hover .maplibregl-popup-track-pointer{display:-webkit-box;display:-ms-flexbox;display:flex}.maplibregl-map:active .maplibregl-popup-track-pointer{display:none}.maplibregl-marker{left:0;position:absolute;top:0;-webkit-transition:opacity .2s;transition:opacity .2s;will-change:transform}.maplibregl-user-location-dot,.maplibregl-user-location-dot:before{background-color:#1da1f2;border-radius:50%;height:15px;width:15px}.maplibregl-user-location-dot:before{-webkit-animation:maplibregl-user-location-dot-pulse 2s infinite;animation:maplibregl-user-location-dot-pulse 2s infinite;content:"";position:absolute}.maplibregl-user-location-dot:after{border:2px solid #fff;border-radius:50%;-webkit-box-shadow:0 0 3px rgba(0,0,0,.35);box-shadow:0 0 3px rgba(0,0,0,.35);-webkit-box-sizing:border-box;box-sizing:border-box;content:"";height:19px;left:-2px;position:absolute;top:-2px;width:19px}@media (prefers-reduced-motion:reduce){.maplibregl-user-location-dot:before{-webkit-animation:none;animation:none}}@-webkit-keyframes maplibregl-user-location-dot-pulse{0%{opacity:1;-webkit-transform:scale(1);transform:scale(1)}70%{opacity:0;-webkit-transform:scale(3);transform:scale(3)}to{opacity:0;-webkit-transform:scale(1);transform:scale(1)}}@keyframes maplibregl-user-location-dot-pulse{0%{opacity:1;-webkit-transform:scale(1);transform:scale(1)}70%{opacity:0;-webkit-transform:scale(3);transform:scale(3)}to{opacity:0;-webkit-transform:scale(1);transform:scale(1)}}.maplibregl-user-location-dot-stale{background-color:#aaa}.maplibregl-user-location-dot-stale:after{display:none}.maplibregl-user-location-accuracy-circle{background-color:#1da1f233;border-radius:100%;height:1px;width:1px}.maplibregl-crosshair,.maplibregl-crosshair .maplibregl-interactive,.maplibregl-crosshair .maplibregl-interactive:active{cursor:crosshair}.maplibregl-boxzoom{background:#fff;border:2px dotted #202020;height:0;left:0;opacity:.5;position:absolute;top:0;width:0}.maplibregl-cooperative-gesture-screen{-webkit-box-align:center;-ms-flex-align:center;align-items:center;background:rgba(0,0,0,.4);color:#fff;display:-webkit-box;display:-ms-flexbox;display:flex;font-size:1.4em;inset:0;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;line-height:1.2;opacity:0;padding:1rem;pointer-events:none;position:absolute;-webkit-transition:opacity 1s ease 1s;transition:opacity 1s ease 1s;z-index:99999}.maplibregl-cooperative-gesture-screen.maplibregl-show{opacity:1;-webkit-transition:opacity .05s;transition:opacity .05s}.maplibregl-cooperative-gesture-screen .maplibregl-mobile-message{display:none}@media (hover:none),(pointer:coarse){.maplibregl-cooperative-gesture-screen .maplibregl-desktop-message{display:none}.maplibregl-cooperative-gesture-screen .maplibregl-mobile-message{display:block}}.maplibregl-pseudo-fullscreen{height:100%!important;left:0!important;position:fixed!important;top:0!important;width:100%!important;z-index:99999} } @layer app-web{ :root { --container-border-width: 8px; --container-gap-width: 8px; /* only even numbers should be used because otherwise we get 0.5px margin values. */ --transition-short: 0.1s; --transition-standard: 0.3s; --buttons-dialog-gap-row: 8px; --buttons-dialog-gap-column: 8px; --MBody-border-radius: 8px; --EventTileBubble_margin-block: 10px; --MessageTimestamp-width: 46px; /* 8 + 30 (avatar) + 8 */ /* Expected z-indexes for dialogs: 4000 - Default wrapper index 4009 - Static dialog background 4010 - Static dialog itself 4011 - Standard dialog background 4012 - Standard dialog itself These are set up such that the static dialog always appears underneath the standard dialogs. */ --dialog-zIndex-wrapper-default: 4000; --dialog-zIndex-static-background: 4009; --dialog-zIndex-static: calc(var(--dialog-zIndex-static-background) + 1); /* 4010 */ --dialog-zIndex-standard-background: calc(var(--dialog-zIndex-static) + 1); /* 4011 */ --dialog-zIndex-standard: calc(var(--dialog-zIndex-standard-background) + 1); /* 4012 */ } #matrixchat { /* This is required to ensure Compound tooltips correctly draw where they should with z-index: auto */ contain: strict; } #mx_ContextualMenu_Container, #mx_PersistedElement_container, #mx_Dialog_Container, #mx_Dialog_StaticContainer { /* This is required to ensure Compound tooltips correctly draw where they should with z-index: auto */ isolation: isolate; } /** * Disable pointer events inside the persistentElement container when the room-list is being resized. * This is necessary to avoid the pointer events from being hijacked by the content rendered inside * that div. */ :root:has(.mx_Separator[data-separator="active"]) #mx_PersistedElement_container { pointer-events: none; } /** * We need to increase the specificity of the selector to override the * custom property set by the design tokens package */ [class^="cpd-theme"][class^="cpd-theme"] { /** * The design tokens package currently does not expose the fallback fonts * We want to keep on re-using `$font-family` to not break custom themes * and because we can to use `Twemoji` to display emoji rather than using * system ones */ --cpd-font-family-sans: var(--font-family, "Nunito", var(--emoji-font-family), "Apple Color Emoji", "Segoe UI Emoji", "Arial", "Helvetica", sans-serif, "Noto Color Emoji"); } @media (prefers-reduced-motion) { :root { --transition-short: 0; --transition-standard: 0; } } html { /* hack to stop overscroll bounce on OSX and iOS. N.B. Breaks things when we have legitimate horizontal overscroll */ height: 100%; overflow: hidden; /* Stop similar overscroll bounce in Firefox Nightly for macOS */ -ms-scroll-chaining: none; overscroll-behavior: none; } body { /* !important because compound overrides these font settings for body */ font: var(--cpd-font-body-md-regular) !important; letter-spacing: var(--cpd-font-letter-spacing-body-md) !important; /** * We want to apply Inter Dynamic metrics (https://rsms.me/inter/dynmetrics/) * We need to tweak the `letter-spacing` property and doing so, disables by * default the optional ligatures * `font-feature-settings` allows us to override this behaviour and have the * correct ligatures and the proper dynamic metric spacing. */ -webkit-font-feature-settings: "kern" 1, "liga" 1, "calt" 1 !important; font-feature-settings: "kern" 1, "liga" 1, "calt" 1 !important; background-color: var(--timeline-background-color, var(--cpd-color-bg-canvas-default)); color: var(--timeline-text-color); border: 0px; margin: 0px; /* needed to match the designs correctly on macOS */ /* see https://github.com/vector-im/element-web/issues/11425 */ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } pre, code { font-family: "Fira Code", "", "Apple Color Emoji", "Segoe UI Emoji", "Courier", monospace, "Noto Color Emoji"; font-family: var(--font-family-monospace, "Fira Code", var(--emoji-font-family), "Apple Color Emoji", "Segoe UI Emoji", "Courier", monospace, "Noto Color Emoji"); font-size: 100% !important; } .error, .warning, .text-error, .text-warning { color: #ff5b55; color: var(--alert, #ff5b55); } .text-success { color: #0dbd8b; color: var(--accent-color, #0dbd8b); } .text-muted { color: #a1b2d1; } .text-primary { color: var(--timeline-text-color); } .text-secondary { color: #edf3ff; color: var(--secondary-content, #edf3ff); } .mx_Verified { color: #0dbd8b; } .mx_Untrusted { color: #ff5b55; } b { /* On Firefox, the default weight for `` is `bolder` which results in no bold */ /* effect since we only have specific weights of our fonts available. */ font-weight: bold; } /* Keep the legacy link colour without overriding Compound anchors or shared timestamp styling. */ a:where(:not([data-kind]):not(.mx_MessageTimestamp)):hover, a:where(:not([data-kind]):not(.mx_MessageTimestamp)):link, a:where(:not([data-kind]):not(.mx_MessageTimestamp)):visited { color: var(--primary-color); } :not(.mx_no_textinput):not(.mx_textinput):not(.mx_Field) > input[type="text"], :not(.mx_no_textinput):not(.mx_textinput):not(.mx_Field) > input[type="search"], :not(.mx_no_textinput):not(.mx_textinput):not(.mx_Field) > input[type="password"] { padding: 9px; font: var(--cpd-font-body-md-semibold); font-weight: var(--cpd-font-weight-semibold); min-width: 0; } input[type="text"].mx_textinput_icon, input[type="search"].mx_textinput_icon { padding-left: 36px; background-repeat: no-repeat; background-position: 10px center; } /* FIXME THEME - Tint by CSS rather than referencing a duplicate asset */ input[type="text"].mx_textinput_icon.mx_textinput_search, input[type="search"].mx_textinput_icon.mx_textinput_search { background-image: url(../../icons/search.7258145.svg); } /* dont search UI as not all browsers support it, */ /* we implement it ourselves where needed instead */ input[type="search"]::-webkit-search-decoration, input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-results-button, input[type="search"]::-webkit-search-results-decoration { display: none; } /* Override Firefox's UA style so we get a consistent look across browsers */ input::-webkit-input-placeholder, textarea::-webkit-input-placeholder { opacity: 1; opacity: initial; } input::-moz-placeholder, textarea::-moz-placeholder { opacity: 1; opacity: initial; } input:-ms-input-placeholder, textarea:-ms-input-placeholder { opacity: 1; opacity: initial; } input::-ms-input-placeholder, textarea::-ms-input-placeholder { opacity: 1; opacity: initial; } input::placeholder, textarea::placeholder { opacity: 1; opacity: initial; } input[type="text"], input[type="password"], textarea { background-color: transparent; color: var(--timeline-text-color); } /* Required by Firefox */ textarea { color: var(--timeline-text-color); } input[type="text"]:focus, input[type="password"]:focus, textarea:focus { outline: none; -webkit-box-shadow: none; box-shadow: none; } /* This is used to hide the standard outline added by browsers for */ /* accessible (focusable) components. Not intended for buttons, but */ /* should be used on things like focusable containers where the outline */ /* is usually not helping anyone. */ *:focus:not(:focus-visible) { outline: none; } /* override defaults */ fieldset { display: inline-block; margin-inline: unset; padding-block: unset; padding-inline: unset; min-inline-size: unset; border: none; } summary { cursor: pointer; } legend { padding-inline: unset; border: none; } /* .mx_textinput is a container for a text input */ /* + some other controls like buttons, ... */ /* it has the appearance of a text box so the controls */ /* appear to be part of the input */ .mx_Dialog .mx_textinput > input[type="text"], .mx_Dialog .mx_textinput > input[type="search"], .mx_MatrixChat_wrapper .mx_textinput > input[type="text"], .mx_MatrixChat_wrapper .mx_textinput > input[type="search"] { border: none; -webkit-box-flex: 1; -ms-flex: 1; flex: 1; color: var(--timeline-text-color); } .mx_Dialog :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput) > input[type="text"], .mx_Dialog :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput) > input[type="search"], .mx_Dialog .mx_textinput, .mx_MatrixChat_wrapper :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput) > input[type="text"], .mx_MatrixChat_wrapper :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput) > input[type="search"], .mx_MatrixChat_wrapper .mx_textinput { display: block; -webkit-box-sizing: border-box; box-sizing: border-box; background-color: transparent; color: #61708b; border-radius: 4px; border: 1px solid var(--secondary-hairline-color); /* these things should probably not be defined globally */ margin: 9px; } .mx_Dialog .mx_textinput, .mx_MatrixChat_wrapper .mx_textinput { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .mx_Dialog :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput) > input[type="text"]::-webkit-input-placeholder, .mx_Dialog :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput) > input[type="search"]::-webkit-input-placeholder, .mx_Dialog .mx_textinput input::-webkit-input-placeholder, .mx_MatrixChat_wrapper :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput) > input[type="text"]::-webkit-input-placeholder, .mx_MatrixChat_wrapper :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput) > input[type="search"]::-webkit-input-placeholder, .mx_MatrixChat_wrapper .mx_textinput input::-webkit-input-placeholder { color: var(--cpd-color-text-secondary); } .mx_Dialog :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput) > input[type="text"]::-moz-placeholder, .mx_Dialog :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput) > input[type="search"]::-moz-placeholder, .mx_Dialog .mx_textinput input::-moz-placeholder, .mx_MatrixChat_wrapper :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput) > input[type="text"]::-moz-placeholder, .mx_MatrixChat_wrapper :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput) > input[type="search"]::-moz-placeholder, .mx_MatrixChat_wrapper .mx_textinput input::-moz-placeholder { color: var(--cpd-color-text-secondary); } .mx_Dialog :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput) > input[type="text"]:-ms-input-placeholder, .mx_Dialog :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput) > input[type="search"]:-ms-input-placeholder, .mx_Dialog .mx_textinput input:-ms-input-placeholder, .mx_MatrixChat_wrapper :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput) > input[type="text"]:-ms-input-placeholder, .mx_MatrixChat_wrapper :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput) > input[type="search"]:-ms-input-placeholder, .mx_MatrixChat_wrapper .mx_textinput input:-ms-input-placeholder { color: var(--cpd-color-text-secondary); } .mx_Dialog :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput) > input[type="text"]::-ms-input-placeholder, .mx_Dialog :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput) > input[type="search"]::-ms-input-placeholder, .mx_Dialog .mx_textinput input::-ms-input-placeholder, .mx_MatrixChat_wrapper :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput) > input[type="text"]::-ms-input-placeholder, .mx_MatrixChat_wrapper :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput) > input[type="search"]::-ms-input-placeholder, .mx_MatrixChat_wrapper .mx_textinput input::-ms-input-placeholder { color: var(--cpd-color-text-secondary); } .mx_Dialog :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput) > input[type="text"]::placeholder, .mx_Dialog :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput) > input[type="search"]::placeholder, .mx_Dialog .mx_textinput input::placeholder, .mx_MatrixChat_wrapper :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput) > input[type="text"]::placeholder, .mx_MatrixChat_wrapper :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput) > input[type="search"]::placeholder, .mx_MatrixChat_wrapper .mx_textinput input::placeholder { color: var(--cpd-color-text-secondary); } /* Prevent ugly dotted highlight around selected elements in Firefox */ ::-moz-focus-inner { border: 0; } /* These are magic constants which are excluded from tinting, to let themes */ /* (which only have CSS) tell the app what their non-tinted */ /* colourscheme is by inspecting the stylesheet DOM. */ /* They are not used for layout!! */ #mx_theme_accentColor { color: #0dbd8b; color: var(--accent-color, #0dbd8b); } #mx_theme_secondaryAccentColor { color: var(--roomlist-background-color); } .mx_Dialog_wrapper { position: fixed; z-index: 4000; z-index: var(--dialog-zIndex-wrapper-default); top: 0; left: 0; width: 100%; height: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .mx_Dialog_border { z-index: calc(calc(calc(4009 + 1) + 1) + 1); z-index: var(--dialog-zIndex-standard); position: relative; width: 100%; max-width: -webkit-fit-content; max-width: -moz-fit-content; max-width: fit-content; -webkit-box-sizing: border-box; box-sizing: border-box; max-height: calc(100% - var(--cpd-space-6x)); display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } .mx_Dialog_lightbox .mx_Dialog_border { /* The lightbox isn't so much of a dialog as a fullscreen overlay. We don't want the glass border. */ display: contents; } .mx_Dialog { background-color: var(--timeline-background-color, var(--cpd-color-bg-canvas-default)); color: var(--timeline-text-secondary-color); font-size: 0.9375rem; position: relative; padding: var(--cpd-space-8x) var(--cpd-space-10x); -webkit-box-sizing: border-box; box-sizing: border-box; overflow-y: auto; /* Styles copied/inspired by GroupLayout, ReplyTile, and EventTile variants. */ } .mx_Dialog_staticWrapper .mx_Dialog { z-index: calc(4009 + 1); z-index: var(--dialog-zIndex-static); contain: content; } .mx_Dialog_lightbox .mx_Dialog { border-radius: 0px; background-color: transparent; width: 100%; height: 100%; max-width: 100%; max-height: 100%; pointer-events: none; padding: 0; } .mx_Dialog .markdown-body { font: var(--cpd-font-body-md-regular) !important; letter-spacing: var(--cpd-font-letter-spacing-body-md); font-family: inherit !important; white-space: normal !important; line-height: inherit !important; background-color: inherit; color: inherit; /* inherit the colour from the dark or light theme by default (but not for code blocks) */ /* this selector wrongly applies to code blocks too but we will unset it in the next one */ /* Make h1 and h2 the same size as h3. */ } .mx_Dialog .markdown-body pre, .mx_Dialog .markdown-body code { font-family: "Fira Code", "", "Apple Color Emoji", "Segoe UI Emoji", "Courier", monospace, "Noto Color Emoji" !important; font-family: var(--font-family-monospace, "Fira Code", var(--emoji-font-family), "Apple Color Emoji", "Segoe UI Emoji", "Courier", monospace, "Noto Color Emoji") !important; background-color: #2a3039; } .mx_Dialog .markdown-body code { white-space: pre-wrap; /* don't collapse spaces in inline code blocks */ } .mx_Dialog .markdown-body pre { /* have to use overlay rather than auto otherwise Linux and Windows */ /* Chrome gets very confused about vertical spacing: */ /* https://github.com/vector-im/vector-web/issues/754 */ overflow-x: overlay; overflow-y: visible; } .mx_Dialog .markdown-body pre::-webkit-scrollbar-corner { background: transparent; } .mx_Dialog .markdown-body pre code { white-space: pre; /* we want code blocks to be scrollable and not wrap */ } .mx_Dialog .markdown-body pre code > * { display: inline; } .mx_Dialog .markdown-body h1, .mx_Dialog .markdown-body h2, .mx_Dialog .markdown-body h3, .mx_Dialog .markdown-body h4, .mx_Dialog .markdown-body h5, .mx_Dialog .markdown-body h6 { font-family: inherit !important; color: inherit; } .mx_Dialog .markdown-body h1, .mx_Dialog .markdown-body h2 { font-size: 1.5em; border-bottom: none !important; /* override GFM */ } .mx_Dialog .markdown-body a { color: var(--primary-color); } .mx_Dialog .markdown-body blockquote { border-left: 2px solid var(--cpd-color-border-interactive-primary); color: #edf3ff; color: var(--secondary-content, #edf3ff); border-radius: 2px; padding: 0 10px; } .mx_Dialog_fixedWidth { width: 60vw; max-width: 704px; } .mx_Dialog_background { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: var(--sidebar-color-50pct); z-index: calc(calc(4009 + 1) + 1); z-index: var(--dialog-zIndex-standard-background); } .mx_Dialog_background.mx_Dialog_staticBackground { z-index: 4009; z-index: var(--dialog-zIndex-static-background); } .mx_Dialog_wrapperWithStaticUnder .mx_Dialog_background { /* Roughly half of what it would normally be - we don't want to black out */ /* the app, just make it clear that the dialogs are stacked. */ opacity: 0.4; } .mx_Dialog_lightbox .mx_Dialog_background { opacity: 0.85; background-color: #000; -webkit-animation-name: mx_Dialog_lightbox_background_keyframes; animation-name: mx_Dialog_lightbox_background_keyframes; -webkit-animation-duration: 300ms; animation-duration: 300ms; } .mx_Dialog_titleImage { vertical-align: sub; width: 25px; height: 25px; margin-left: -2px; margin-right: 4px; margin-bottom: 2px; } .mx_Dialog_title { color: var(--timeline-text-color); display: inline-block; width: 100%; -webkit-box-sizing: border-box; box-sizing: border-box; letter-spacing: var(--cpd-font-letter-spacing-heading-lg); } .mx_Dialog_title.danger { color: #ff5b55; color: var(--alert, #ff5b55); } .mx_Dialog_header { position: relative; padding: 0; -webkit-padding-end: 20px; padding-inline-end: 20px; /* Reserve room for the close button */ margin-bottom: var(--cpd-space-2x); } .mx_Dialog_header.mx_Dialog_headerWithButton > .mx_Dialog_title { text-align: center; } .mx_Dialog_cancelButton { width: 20px; height: 20px; padding: var(--cpd-space-1x); border-radius: 14px; background-color: var(--cpd-color-bg-subtle-secondary); } .mx_Dialog_cancelButton:hover { background-color: var(--cpd-color-bg-subtle-primary); } .mx_Dialog_cancelButton svg { width: inherit; height: inherit; vertical-align: top; color: var(--cpd-color-icon-secondary); } .mx_Dialog_cancelButton{ position: absolute; top: var(--cpd-space-4x); right: var(--cpd-space-4x); } .mx_Dialog_content { margin: 24px 0 68px; font: var(--cpd-font-body-md-regular); color: var(--timeline-text-color); word-wrap: break-word; } .mx_Dialog_buttons { margin-top: 20px; -webkit-margin-start: auto; margin-inline-start: auto; text-align: right; } .mx_Dialog_buttons .mx_Dialog_buttons_additive { /* The consumer is responsible for positioning their elements. */ float: left; } .mx_Dialog_buttons .mx_Dialog_buttons_row { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; text-align: left; text-align: initial; -webkit-margin-start: auto; margin-inline-start: auto; /* default gap among elements */ -webkit-column-gap: 8px; -moz-column-gap: 8px; column-gap: 8px; -webkit-column-gap: var(--buttons-dialog-gap-column); -moz-column-gap: var(--buttons-dialog-gap-column); column-gap: var(--buttons-dialog-gap-column); row-gap: 8px; row-gap: var(--buttons-dialog-gap-row); } .mx_Dialog_buttons .mx_Dialog_buttons_row button { margin: 0 !important; /* override the margin settings */ } /* XXX: Our button style are a mess: buttons that happen to appear in dialogs get special styles applied * to them that no button anywhere else in the app gets by default. In practice, buttons in other places * in the app look the same by being AccessibleButtons, or possibly by having explict button classes. * We should go through and have one consistent set of styles for buttons throughout the app. * For now, I am duplicating the selectors here for mx_Dialog and mx_DialogButtons. */ .mx_Dialog button:not( .mx_EncryptionUserSettingsTab button, .mx_EncryptionCard button, .mx_UserProfileSettings button, .mx_ShareDialog button, .mx_UnpinAllDialog button, .mx_ThemeChoicePanel_CustomTheme button, .mx_Dialog_nonDialogButton, .mx_AccessibleButton, .mx_IdentityServerPicker button, .mx_AccessSecretStorageDialog button, .mx_InviteDialog_section button, .mx_InviteDialog_editor button, .mx_UnknownIdentityUsersWarningDialog button, .mx_ThreadActionBar button, .mx_HistoryActionBar button, [class|="maplibregl"] ), .mx_Dialog_buttons button:not(.mx_Dialog_nonDialogButton, .mx_AccessibleButton), .mx_Dialog input[type="submit"], .mx_Dialog_buttons input[type="submit"] { /* align images in buttons (eg spinners) */ vertical-align: middle; border: 0px; border-radius: 24px; font: var(--cpd-font-body-md-regular); color: white; background-color: #2e80de; background-color: var(--cpd-color-bg-action-primary-rest); width: auto; padding: 7px; padding-left: 1.5em; padding-right: 1.5em; cursor: pointer; display: inline-block; /* flip colours for the secondary ones */ } .mx_Dialog button:not( .mx_EncryptionUserSettingsTab button, .mx_EncryptionCard button, .mx_UserProfileSettings button, .mx_ShareDialog button, .mx_UnpinAllDialog button, .mx_ThemeChoicePanel_CustomTheme button, .mx_Dialog_nonDialogButton, .mx_AccessibleButton, .mx_IdentityServerPicker button, .mx_AccessSecretStorageDialog button, .mx_InviteDialog_section button, .mx_InviteDialog_editor button, .mx_UnknownIdentityUsersWarningDialog button, .mx_ThreadActionBar button, .mx_HistoryActionBar button, [class|="maplibregl"] ):not(:focus-visible), .mx_Dialog_buttons button:not(.mx_Dialog_nonDialogButton, .mx_AccessibleButton):not(:focus-visible), .mx_Dialog input[type="submit"]:not(:focus-visible), .mx_Dialog_buttons input[type="submit"]:not(:focus-visible) { outline: none; } .mx_Dialog button:not( .mx_EncryptionUserSettingsTab button, .mx_EncryptionCard button, .mx_UserProfileSettings button, .mx_ShareDialog button, .mx_UnpinAllDialog button, .mx_ThemeChoicePanel_CustomTheme button, .mx_Dialog_nonDialogButton, .mx_AccessibleButton, .mx_IdentityServerPicker button, .mx_AccessSecretStorageDialog button, .mx_InviteDialog_section button, .mx_InviteDialog_editor button, .mx_UnknownIdentityUsersWarningDialog button, .mx_ThreadActionBar button, .mx_HistoryActionBar button, [class|="maplibregl"] ), .mx_Dialog_buttons button:not(.mx_Dialog_nonDialogButton, .mx_AccessibleButton), .mx_Dialog input[type="submit"], .mx_Dialog_buttons input[type="submit"]{ margin-left: 0px; margin-right: 8px; margin-right: 8px; margin-right: var(--buttons-dialog-gap-column); margin-bottom: 5px; font-weight: var(--cpd-font-weight-semibold); border: 1px solid var(--cpd-color-border-interactive-secondary); color: #ffffff; color: var(--cpd-color-text-primary); background-color: transparent; font-family: inherit; } .mx_Dialog button:not( .mx_Dialog_nonDialogButton, [class|="maplibregl"], .mx_AccessibleButton, .mx_UserProfileSettings button, .mx_ThemeChoicePanel_CustomTheme button, .mx_UnpinAllDialog button, .mx_ShareDialog button, .mx_EncryptionUserSettingsTab button, .mx_UnknownIdentityUsersWarningDialog button ):last-child { margin-right: 0px; } .mx_Dialog button:not( .mx_Dialog_nonDialogButton, [class|="maplibregl"], .mx_AccessibleButton, .mx_UserProfileSettings button, .mx_ThemeChoicePanel_CustomTheme button, .mx_UnpinAllDialog button, .mx_ShareDialog button, .mx_EncryptionUserSettingsTab button, .mx_InviteDialog_section button, .mx_InviteDialog_editor button, .mx_UnknownIdentityUsersWarningDialog button ):focus, .mx_Dialog input[type="submit"]:focus, .mx_Dialog_buttons button:not(.mx_Dialog_nonDialogButton, .mx_AccessibleButton):focus, .mx_Dialog_buttons input[type="submit"]:focus { -webkit-filter: brightness(105%); filter: brightness(105%); } .mx_Dialog button.mx_Dialog_primary:not(.mx_Dialog_nonDialogButton, [class|="maplibregl"]), .mx_Dialog input[type="submit"].mx_Dialog_primary, .mx_Dialog_buttons button:not( .mx_Dialog_nonDialogButton, .mx_AccessibleButton, .mx_UserProfileSettings button, .mx_ThemeChoicePanel_CustomTheme button, .mx_UnpinAllDialog button, .mx_ShareDialog button, .mx_EncryptionUserSettingsTab button, .mx_UnknownIdentityUsersWarningDialog button ), .mx_Dialog_buttons input[type="submit"].mx_Dialog_primary { color: var(--cpd-color-text-on-solid-primary); background-color: #2e80de; background-color: var(--cpd-color-bg-action-primary-rest); border-color: #2e80de; border-color: var(--cpd-color-bg-action-primary-rest); min-width: 156px; } .mx_Dialog button.danger:not(.mx_Dialog_nonDialogButton, [class|="maplibregl"]), .mx_Dialog input[type="submit"].danger, .mx_Dialog_buttons button.danger:not( .mx_Dialog_nonDialogButton, .mx_AccessibleButton, .mx_UserProfileSettings button, .mx_ThemeChoicePanel_CustomTheme button, .mx_UnpinAllDialog button, .mx_ShareDialog button, .mx_EncryptionUserSettingsTab button, .mx_UnknownIdentityUsersWarningDialog button ), .mx_Dialog_buttons input[type="submit"].danger { background-color: var(--cpd-color-bg-critical-primary); border: solid 1px var(--cpd-color-bg-critical-primary); color: var(--cpd-color-text-on-solid-primary); } .mx_Dialog button.warning:not(.mx_Dialog_nonDialogButton, [class|="maplibregl"]), .mx_Dialog input[type="submit"].warning { border: solid 1px var(--cpd-color-border-critical-subtle); color: #e0454b; color: var(--cpd-color-text-critical-primary); } .mx_Dialog button:not( .mx_Dialog_nonDialogButton, [class|="maplibregl"], .mx_AccessibleButton, .mx_UserProfileSettings button, .mx_ThemeChoicePanel_CustomTheme button, .mx_UnpinAllDialog button, .mx_ShareDialog button, .mx_EncryptionUserSettingsTab button, .mx_UnknownIdentityUsersWarningDialog button ):disabled, .mx_Dialog input[type="submit"]:disabled, .mx_Dialog_buttons button:not(.mx_Dialog_nonDialogButton, .mx_AccessibleButton):disabled, .mx_Dialog_buttons input[type="submit"]:disabled { background-color: var(--timeline-text-secondary-color); border: solid 1px var(--timeline-text-secondary-color); opacity: 0.7; } /* Spinner Dialog overide */ .mx_Dialog_wrapper.mx_Dialog_spinner { /* This is not a real dialog, so we shouldn't show a glass border */ } .mx_Dialog_wrapper.mx_Dialog_spinner .mx_Dialog_border { display: contents; } .mx_Dialog_wrapper.mx_Dialog_spinner .mx_Dialog { inline-size: auto; block-size: auto; border-radius: 8px; padding: 8px; -webkit-box-shadow: none; box-shadow: none; /* Don't show scroll-bars on spinner dialogs */ overflow-x: hidden; overflow-y: hidden; } /* TODO: Review mx_GeneralButton usage to see if it can use a different class */ /* These classes were brought in from the old UserSettings and are included here to avoid */ /* breaking the app. */ /* Ref: https://github.com/vector-im/element-web/issues/8420 */ .mx_GeneralButton { /* align images in buttons (eg spinners) */ vertical-align: middle; border: 0px; border-radius: 24px; font: var(--cpd-font-body-md-regular); color: white; background-color: #2e80de; background-color: var(--cpd-color-bg-action-primary-rest); width: auto; padding: 7px; padding-left: 1.5em; padding-right: 1.5em; cursor: pointer; display: inline-block; } .mx_GeneralButton:not(:focus-visible) { outline: none; } .mx_GeneralButton{ display: inline; margin: auto; } .mx_TextInputDialog_label { text-align: left; padding-bottom: 12px; } .mx_TextInputDialog_input { font-size: 0.9375rem; border-radius: 3px; border: 1px solid #e7e7e7; padding: 9px; color: var(--timeline-text-color); background-color: var(--timeline-background-color, var(--cpd-color-bg-canvas-default)); } .mx_button_row { margin-top: 69px; } /* username colors */ /* used by SenderProfile & RoomPreviewBar */ .mx_Username_color1 { color: var(--cpd-color-text-decorative-1); } .mx_Username_color2 { color: var(--cpd-color-text-decorative-2); } .mx_Username_color3 { color: var(--cpd-color-text-decorative-3); } .mx_Username_color4 { color: var(--cpd-color-text-decorative-4); } .mx_Username_color5 { color: var(--cpd-color-text-decorative-5); } .mx_Username_color6 { color: var(--cpd-color-text-decorative-6); } .mx_AppWarning, .mx_AppPermission { text-align: center; display: -webkit-box; display: -ms-flexbox; display: flex; height: 100%; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .mx_lineClamp { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; -webkit-line-clamp: var(--mx-line-clamp, 1); overflow: hidden; } /* Layout compatibility hook for timestamp placement in existing app/web timeline surfaces. */ .mx_MessageTimestamp { display: block; /* enable the width setting below */ width: 46px; width: var(--MessageTimestamp-width); } } @layer app-web{ /* Copyright 2024 New Vector Ltd. Copyright 2022 The Matrix.org Foundation C.I.C. SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial Please see LICENSE files in the repository root for full details. */ .mx_BeaconListItem { -webkit-box-sizing: border-box; box-sizing: border-box; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; padding: 12px 0; border-bottom: 1px solid #21262c; border-bottom: 1px solid var(--system, #21262c); cursor: pointer; } .mx_BeaconListItem_avatarIcon { -webkit-box-flex: 0; -ms-flex: 0 0; flex: 0 0; height: 32px; width: 32px; } .mx_BeaconListItem_avatar { -webkit-box-flex: 0; -ms-flex: 0 0; flex: 0 0; -webkit-box-sizing: border-box; box-sizing: border-box; margin-right: 8px; border: 2px solid #5c56f5; border-radius: 50%; } .mx_BeaconListItem_info { -webkit-box-flex: 1; -ms-flex: 1 1 0px; flex: 1 1 0; width: 0; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: stretch; -ms-flex-align: stretch; align-items: stretch; } .mx_BeaconListItem_status { /* override beacon status padding */ padding: 0 !important; margin-bottom: 8px; } .mx_BeaconListItem_status .mx_BeaconStatus_label { font-weight: var(--cpd-font-weight-semibold); } .mx_BeaconListItem_lastUpdated { color: #edf3ff; color: var(--tertiary-content, #edf3ff); font-size: 0.625rem; } .mx_BeaconListItem_interactions { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; } } @layer app-web{ /* Copyright 2024 New Vector Ltd. Copyright 2022 The Matrix.org Foundation C.I.C. SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial Please see LICENSE files in the repository root for full details. */ .mx_BeaconStatus { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; -webkit-box-sizing: border-box; box-sizing: border-box; padding: 8px; color: var(--color); font-size: 0.75rem; } .mx_BeaconStatus_Loading, .mx_BeaconStatus_Stopped { --color: var(--tertiary-content, #edf3ff); } .mx_BeaconStatus_Active, .mx_BeaconStatus_Error { --color: var(--timeline-text-color); } .mx_BeaconStatus_icon { height: 32px; width: 32px; -webkit-box-flex: 0; -ms-flex: 0 0 32px; flex: 0 0 32px; margin-right: 8px; } .mx_BeaconStatus_description { -webkit-box-flex: 1; -ms-flex: 1 1 0px; flex: 1 1 0; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; line-height: 0.875rem; padding-right: 8px; white-space: nowrap; overflow: hidden; } .mx_BeaconStatus_description .mx_BeaconStatus_description_status { text-overflow: ellipsis; overflow: hidden; } .mx_BeaconStatus_expiryTime { color: #edf3ff; color: var(--secondary-content, #edf3ff); } .mx_BeaconStatus_label { margin-bottom: 2px; overflow: hidden; text-overflow: ellipsis; } } @layer app-web{ /* Copyright 2024 New Vector Ltd. Copyright 2022 The Matrix.org Foundation C.I.C. SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial Please see LICENSE files in the repository root for full details. */ .mx_BeaconStatusTooltip { position: absolute; top: 42px; max-width: 150px; height: 38px; -webkit-box-sizing: content-box; box-sizing: content-box; padding-top: 8px; } .mx_BeaconStatusTooltip_inner { position: relative; height: 100%; border-radius: 4px; background: var(--timeline-background-color, var(--cpd-color-bg-canvas-default)); -webkit-box-shadow: 4px 4px 12px 0 #181b21; box-shadow: 4px 4px 12px 0 #181b21; } } @layer app-web{ /* Copyright 2024 New Vector Ltd. Copyright 2022 The Matrix.org Foundation C.I.C. SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial Please see LICENSE files in the repository root for full details. */ .mx_BeaconViewDialog_wrapper .mx_Dialog { padding: 0px; /* Unset contain and position to allow the close button to appear outside the dialog */ contain: unset; position: static; position: initial; } .mx_BeaconViewDialog { /* subtract 0.5px to prevent single-pixel margin due to rounding */ width: calc(80vw - 0.5px); height: calc(80vh - 0.5px); overflow: hidden; /* sidebar is absolutely positioned inside */ position: relative; } .mx_BeaconViewDialog .mx_Dialog_header { margin: 0px; padding: 0px; position: static; position: initial; } .mx_BeaconViewDialog .mx_Dialog_header .mx_Dialog_title { display: none; } .mx_BeaconViewDialog .mx_Dialog_header .mx_Dialog_cancelButton { z-index: 4010; position: fixed; right: 5vw; top: 5vh; width: 20px; height: 20px; background-color: #edf3ff; } .mx_BeaconViewDialog_map { width: 80vw; height: 80vh; border-radius: 8px; } .mx_BeaconViewDialog_mapFallbackMessage { color: #edf3ff; color: var(--secondary-content, #edf3ff); margin-bottom: 16px; } .mx_BeaconViewDialog_viewListButton { position: absolute; top: 24px; left: 24px; } } @layer app-web{ /* Copyright 2024 New Vector Ltd. Copyright 2022 The Matrix.org Foundation C.I.C. SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial Please see LICENSE files in the repository root for full details. */ .mx_DialogOwnBeaconStatus { position: absolute; bottom: 32px; width: 300px; margin-left: -150px; left: 50%; -webkit-box-sizing: border-box; box-sizing: border-box; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; -webkit-box-pack: stretch; -ms-flex-pack: stretch; justify-content: stretch; background: var(--timeline-background-color, var(--cpd-color-bg-canvas-default)); border-radius: 8px; -webkit-box-shadow: 4px 4px 12px 0 #181b21; box-shadow: 4px 4px 12px 0 #181b21; padding: 0 12px; } .mx_DialogOwnBeaconStatus_avatarIcon { -webkit-box-flex: 0; -ms-flex: 0 0; flex: 0 0; height: 32px; width: 32px; margin: 8px 0 8px 0; } .mx_DialogOwnBeaconStatus_avatar { -webkit-box-flex: 0; -ms-flex: 0 0; flex: 0 0; -webkit-box-sizing: border-box; box-sizing: border-box; border: 2px solid #5c56f5; border-radius: 50%; margin: 8px 0 8px 0; } .mx_DialogOwnBeaconStatus_status { -webkit-box-flex: 1; -ms-flex: 1 1; flex: 1 1; padding-right: 0; } } @layer app-web{ /* Copyright 2024 New Vector Ltd. Copyright 2022 The Matrix.org Foundation C.I.C. SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial Please see LICENSE files in the repository root for full details. */ .mx_DialogSidebar { position: absolute; top: 0; left: 0; height: 100%; width: 265px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-sizing: border-box; box-sizing: border-box; padding: 16px; background-color: var(--timeline-background-color, var(--cpd-color-bg-canvas-default)); -webkit-box-shadow: 0px 4px 4px #181b21; box-shadow: 0px 4px 4px #181b21; } .mx_DialogSidebar .mx_DialogSidebar_header { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-flex: 0; -ms-flex: 0 0; flex: 0 0; margin-bottom: 16px; color: var(--timeline-text-color); } .mx_DialogSidebar .mx_DialogSidebar_header .mx_DialogSidebar_closeButtonIcon { color: #edf3ff; color: var(--tertiary-content, #edf3ff); } .mx_DialogSidebar .mx_DialogSidebar_list { list-style: none; padding: 0; margin: 0; -webkit-box-flex: 1; -ms-flex: 1 1 0px; flex: 1 1 0; width: 100%; overflow: auto; } .mx_DialogSidebar_noResults { font: var(--cpd-font-body-md-regular); color: #edf3ff; color: var(--secondary-content, #edf3ff); } } @layer app-web{ /* Copyright 2024 New Vector Ltd. Copyright 2022 The Matrix.org Foundation C.I.C. SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial Please see LICENSE files in the repository root for full details. */ .mx_LeftPanelLiveShareWarning { width: 100%; -webkit-box-sizing: border-box; box-sizing: border-box; padding: 4px; text-align: center; background-color: #0dbd8b; background-color: var(--accent-color, #0dbd8b); color: #fff; font-size: 0.625rem; /* panel backdrops overlay the whole sidepanel */ /* go above to get hover for title */ z-index: 1; } .mx_LeftPanelLiveShareWarning__error { background-color: #ff5b55; background-color: var(--alert, #ff5b55); } } @layer app-web{ /* Copyright 2024 New Vector Ltd. Copyright 2022 The Matrix.org Foundation C.I.C. SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial Please see LICENSE files in the repository root for full details. */ .mx_LiveTimeRemaining { color: #edf3ff; color: var(--secondary-content, #edf3ff); font-size: 0.75rem; } } @layer app-web{ /* Copyright 2024 New Vector Ltd. Copyright 2022 The Matrix.org Foundation C.I.C. SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial Please see LICENSE files in the repository root for full details. */ .mx_OwnBeaconStatus_button { margin-left: 8px; } .mx_EventTile[data-layout="bubble"] .mx_OwnBeaconStatus_button { /* align to top to make room for timestamp */ /* in bubble view */ -ms-flex-item-align: start; align-self: start; } .mx_OwnBeaconStatus_destructiveButton { /* override button link_inline styles */ color: #ff5b55 !important; color: var(--alert, #ff5b55) !important; font-weight: var(--cpd-font-weight-semibold) !important; } } @layer app-web{ /* Copyright 2024 New Vector Ltd. Copyright 2022 The Matrix.org Foundation C.I.C. SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial Please see LICENSE files in the repository root for full details. */ .mx_ShareLatestLocation_icon { height: 13px; width: 13px; color: #edf3ff; color: var(--secondary-content, #edf3ff); } /* double class to be more specific than the general mx_CopyableText CSS rule */ .mx_CopyableText.mx_ShareLatestLocation_copy { /* override copyable text style to make compact */ } .mx_CopyableText.mx_ShareLatestLocation_copy .mx_CopyableText_copyButton { height: 13px; margin-left: 8px !important; position: relative; top: -1px; width: 13px; } .mx_CopyableText.mx_ShareLatestLocation_copy .mx_CopyableText_copyButton::before { background-color: #edf3ff; background-color: var(--secondary-content, #edf3ff); height: 13px; width: 13px; } } @layer app-web{ /* Copyright 2024 New Vector Ltd. Copyright 2022 The Matrix.org Foundation C.I.C. SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial Please see LICENSE files in the repository root for full details. */ .mx_StyledLiveBeaconIcon { -webkit-box-flex: 0; -ms-flex-positive: 0; flex-grow: 0; -ms-flex-negative: 0; flex-shrink: 0; -webkit-box-sizing: border-box; box-sizing: border-box; border-width: 2px; border-style: solid; border-radius: 50%; background-color: #5c56f5; border-color: #5c56f5; padding: 2px; /* colors icon */ color: white; } .mx_StyledLiveBeaconIcon.mx_StyledLiveBeaconIcon_error { background-color: #ff5b55; background-color: var(--alert, #ff5b55); border-color: #ff5b55; border-color: var(--alert, #ff5b55); } .mx_StyledLiveBeaconIcon.mx_StyledLiveBeaconIcon_idle { background-color: #6f7882; background-color: var(--quaternary-content, #6f7882); border-color: #6f7882; border-color: var(--quaternary-content, #6f7882); } } @layer app-web{ /* Copyright 2024 New Vector Ltd. Copyright 2022 The Matrix.org Foundation C.I.C. SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial Please see LICENSE files in the repository root for full details. */ .mx_KebabContextMenu_icon { width: 24px; height: 24px; color: var(--icon-button-color, var(--cpd-color-icon-tertiary)); } } @layer app-web{ /* Copyright 2024 New Vector Ltd. Copyright 2023 The Matrix.org Foundation C.I.C. SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial Please see LICENSE files in the repository root for full details. */ .mx_PollDetailHeader { /* override accessiblebutton style */ font-size: 0.9375rem !important; } .mx_PollDetailHeader_icon { height: 16px; width: 16px; margin-right: 8px; vertical-align: middle; } } @layer app-web{ /* Copyright 2024 New Vector Ltd. Copyright 2023 The Matrix.org Foundation C.I.C. SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial Please see LICENSE files in the repository root for full details. */ .mx_PollListItem { width: 100%; } .mx_PollListItem_content { width: 100%; display: grid; -webkit-box-pack: left; -ms-flex-pack: left; justify-content: left; -webkit-box-align: center; -ms-flex-align: center; align-items: center; grid-gap: 8px; gap: 8px; grid-template-columns: auto auto auto; grid-template-rows: auto; cursor: pointer; color: var(--timeline-text-color); } .mx_PollListItem_icon { height: 14px; width: 14px; color: #6f7882; color: var(--quaternary-content, #6f7882); padding-left: 8px; } .mx_PollListItem_question { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } } @layer app-web{ /* Copyright 2024 New Vector Ltd. Copyright 2023 The Matrix.org Foundation C.I.C. SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial Please see LICENSE files in the repository root for full details. */ .mx_PollListItemEnded { width: 100%; } .mx_PollListItemEnded_content { width: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; color: var(--timeline-text-color); cursor: pointer; } .mx_PollListItemEnded_title { display: grid; -webkit-box-pack: left; -ms-flex-pack: left; justify-content: left; -webkit-box-align: center; -ms-flex-align: center; align-items: center; grid-gap: 8px; gap: 8px; grid-template-columns: -webkit-min-content 1fr -webkit-min-content; grid-template-columns: min-content 1fr min-content; grid-template-rows: auto; } .mx_PollListItemEnded_icon { height: 14px; width: 14px; color: #6f7882; color: var(--quaternary-content, #6f7882); padding-left: 8px; } .mx_PollListItemEnded_date { font-size: 0.75rem; color: #edf3ff; color: var(--secondary-content, #edf3ff); } .mx_PollListItemEnded_question { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .mx_PollListItemEnded_answers { display: grid; grid-gap: 8px; gap: 8px; margin-top: 12px; } .mx_PollListItemEnded_voteCount { /* 6px to match PollOption padding */ margin: 8px 0 0 6px; } } @layer app-web{ /* Copyright 2024 New Vector Ltd. Copyright 2019-2023 The Matrix.org Foundation C.I.C. Copyright 2015, 2016 OpenMarket Ltd SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial Please see LICENSE files in the repository root for full details. */ .mx_AppPermission { font-size: 0.75rem; width: 100%; /* make mx_AppPermission fill width of mx_AppTileBody so that scroll bar appears on the edge */ overflow-y: scroll; } .mx_AppPermission .mx_AppPermission_bolder, .mx_AppPermission .mx_AppPermission_content_bolder { font-weight: var(--cpd-font-weight-semibold); } .mx_AppPermission .mx_AppPermission_content { margin-block: auto; /* place at the center */ } .mx_AppPermission .mx_AppPermission_content > div { margin-block: 12px; } .mx_AppPermission .mx_AppPermission_content .mx_TextWithTooltip_target--helpIcon { display: inline-block; height: 0.875rem; /* align with characters on the same line */ vertical-align: middle; } .mx_AppPermission .mx_AppPermission_content .mx_TextWithTooltip_target--helpIcon .mx_Icon { color: #0dbd8b; color: var(--accent-color, #0dbd8b); } } @layer app-web{ /* Copyright 2024 New Vector Ltd. Copyright 2023 Suguru Hirahara SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial Please see LICENSE files in the repository root for full details. */ .mx_AppWarning { font-size: 1rem; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .mx_AppWarning h4 { margin: 0; padding: 0; } } @layer app-web{ /* Copyright 2024 New Vector Ltd. Copyright 2022 The Matrix.org Foundation C.I.C. SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial Please see LICENSE files in the repository root for full details. */ .mx_FilterDropdown .mx_Dropdown_menu { margin-top: 4px; left: auto; left: initial; right: -12px; width: 232px; padding: 12px; border: 1px solid #6f7882; border: 1px solid var(--quinary-content, #6f7882); border-radius: 8px; -webkit-box-shadow: 0px 1px 3px rgb(23, 25, 28, 0.05); box-shadow: 0px 1px 3px rgb(23, 25, 28, 0.05); background-color: #21262c; background-color: var(--system, #21262c); } .mx_FilterDropdown .mx_Dropdown_menu .mx_Dropdown_option_highlight { background-color: transparent; } .mx_FilterDropdown .mx_Dropdown_input { height: 24px; background-color: transparent; border-color: transparent; color: #edf3ff; color: var(--secondary-content, #edf3ff); border-radius: 4px; } .mx_FilterDropdown .mx_Dropdown_input:focus, .mx_FilterDropdown .mx_Dropdown_input:hover { background-color: #6f7882; background-color: var(--quinary-content, #6f7882); border-color: #6f7882; border-color: var(--quinary-content, #6f7882); } .mx_FilterDropdown .mx_Dropdown_arrow { color: #edf3ff; color: var(--secondary-content, #edf3ff); } .mx_FilterDropdown_option { position: relative; width: 100%; -webkit-box-sizing: border-box; box-sizing: border-box; padding: 8px 0 8px 20px; font-size: 0.75rem; line-height: 0.9375rem; color: var(--timeline-text-color); } .mx_FilterDropdown_optionSelectedIcon { height: 14px; width: 14px; position: absolute; top: 8px; left: 0; } .mx_FilterDropdown_optionLabel { font-weight: var(--cpd-font-weight-semibold); display: block; } .mx_FilterDropdown_optionDescription { color: #edf3ff; color: var(--secondary-content, #edf3ff); margin-top: 4px; } } @layer app-web{ /* Copyright 2024 New Vector Ltd. Copyright 2023 The Matrix.org Foundation C.I.C. SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial Please see LICENSE files in the repository root for full details. */ .mx_FilterTabGroup { color: var(--timeline-text-color); } .mx_FilterTabGroup label { margin-right: 12px; cursor: pointer; } .mx_FilterTabGroup label span { display: inline-block; line-height: 1.5rem; } .mx_FilterTabGroup input[type="radio"] { -webkit-appearance: none; -moz-appearance: none; appearance: none; margin: 0; padding: 0; } .mx_FilterTabGroup input[type="radio"]:focus + span, .mx_FilterTabGroup input[type="radio"]:hover + span { color: #edf3ff; color: var(--secondary-content, #edf3ff); } .mx_FilterTabGroup input[type="radio"]:checked + span { color: #0dbd8b; color: var(--accent-color, #0dbd8b); font-weight: var(--cpd-font-weight-semibold); /* underline */ -webkit-box-shadow: 0 1.5px 0 0 currentColor; box-shadow: 0 1.5px 0 0 currentColor; } } @layer app-web{ /* Copyright 2024 New Vector Ltd. Copyright 2022 The Matrix.org Foundation C.I.C. SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial Please see LICENSE files in the repository root for full details. */ .mx_LearnMore_button { margin-left: 4px; } } @layer app-web{ /* Copyright 2024 New Vector Ltd. Copyright 2022 The Matrix.org Foundation C.I.C. SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial Please see LICENSE files in the repository root for full details. */ .mx_EnableLiveShare { -webkit-box-flex: 1; -ms-flex: 1 1 0px; flex: 1 1 0; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; -webkit-box-align: center; -ms-flex-align: center; align-items: center; padding: 32px 16px; text-align: center; -webkit-box-sizing: border-box; box-sizing: border-box; } .mx_EnableLiveShare_heading { padding-top: 24px; } .mx_EnableLiveShare_icon { height: 58px; width: 58px; } .mx_EnableLiveShare_description { padding: 0 24px; margin-bottom: 32px; line-height: 1.25rem; } .mx_EnableLiveShare_button { margin-top: 32px; height: 48px; width: 100%; } } @layer app-web{ /* Copyright 2024 New Vector Ltd. Copyright 2022 The Matrix.org Foundation C.I.C. SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial Please see LICENSE files in the repository root for full details. */ .mx_LiveDurationDropdown { margin-bottom: 16px; } } @layer app-web{ /* Copyright 2024 New Vector Ltd. Copyright 2022 The Matrix.org Foundation C.I.C. SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial Please see LICENSE files in the repository root for full details. */ .mx_LocationShareMenu { width: 375px; height: 460px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } } @layer app-web{ /* Copyright 2024 New Vector Ltd. Copyright 2022 The Matrix.org Foundation C.I.C. SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial Please see LICENSE files in the repository root for full details. */ .mx_MapError { padding: 100px 32px 0; text-align: center; --mx-map-error-icon-color: var(--secondary-content, #edf3ff); --mx-map-error-icon-size: 58px; } .mx_MapError.mx_MapError_isMinimised { height: 100%; -webkit-box-sizing: border-box; box-sizing: border-box; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; padding: 24px; background-color: var(--panels, var(--cpd-color-gray-600)); font-size: 0.75rem; line-height: 1rem; --mx-map-error-icon-color: var(--alert, #ff5b55); --mx-map-error-icon-size: 26px; } .mx_MapError.mx_MapError_isMinimised .mx_MapError_message { margin: 0; max-width: 275px; } .mx_MapError.mx_MapError_isMinimised .mx_MapError_heading { padding-top: 8px; /* override h3 heading size */ font-size: inherit !important; font-weight: normal !important; } .mx_MapError_message { margin: 16px 0 32px; } .mx_MapError_heading { padding-top: 24px; } .mx_MapError_icon { height: var(--mx-map-error-icon-size); width: var(--mx-map-error-icon-size); color: var(--mx-map-error-icon-color); } } @layer app-web{ /* Copyright 2024 New Vector Ltd. Copyright 2022 The Matrix.org Foundation C.I.C. SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial Please see LICENSE files in the repository root for full details. */ .mx_MapFallback { -webkit-box-sizing: border-box; box-sizing: border-box; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; position: relative; z-index: 0; background-color: #21262c; background-color: var(--system, #21262c); } .mx_MapFallback_bg { position: absolute; top: 0; left: 0; min-height: 100%; min-width: 100%; color: #6f7882; color: var(--quinary-content, #6f7882); z-index: -1; pointer-events: none; } .mx_MapFallback_icon { width: 65px; margin-bottom: 16px; color: #6f7882; color: var(--quaternary-content, #6f7882); } } @layer app-web{ /* Copyright 2024 New Vector Ltd. Copyright 2022 The Matrix.org Foundation C.I.C. SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial Please see LICENSE files in the repository root for full details. */ .mx_Marker_defaultColor { color: #0dbd8b; color: var(--accent-color, #0dbd8b); } .mx_Marker_border { width: 42px; height: 42px; border-radius: 50%; -webkit-filter: drop-shadow(0px 3px 5px rgb(0, 0, 0, 0.2)); filter: drop-shadow(0px 3px 5px rgb(0, 0, 0, 0.2)); background-color: currentColor; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; /* caret down */ } .mx_Marker_border::before { content: ""; border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 5px solid currentColor; position: absolute; bottom: -4px; } .mx_Marker_icon { color: white; height: 20px; } } @layer app-web{ /* Copyright 2024 New Vector Ltd. Copyright 2022 The Matrix.org Foundation C.I.C SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial Please see LICENSE files in the repository root for full details. */ .mx_ShareDialogButtons { position: absolute; width: 100%; height: 0; top: 0; } button.mx_ShareDialogButtons_button { height: 24px; width: 24px; border-radius: 50%; background-color: #6f7882; background-color: var(--quinary-content, #6f7882); opacity: 0.8; text-align: center; color: #edf3ff; color: var(--secondary-content, #edf3ff); position: absolute; top: 16px; } button.mx_ShareDialogButtons_button:hover, button.mx_ShareDialogButtons_button:focus { opacity: 1; } button.mx_ShareDialogButtons_button.left { left: 16px; } button.mx_ShareDialogButtons_button.right { right: 16px; } .mx_ShareDialogButtons_button-icon { width: 20px; height: 20px; margin: 2px; } } @layer app-web{ /* Copyright 2024 New Vector Ltd. Copyright 2022 The Matrix.org Foundation C.I.C. SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial Please see LICENSE files in the repository root for full details. */ .mx_ShareType { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; -webkit-box-align: center; -ms-flex-align: center; align-items: center; padding: 60px 12px 32px; color: var(--timeline-text-color); } .mx_ShareType .mx_ShareType_wrapper_options { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; row-gap: 12px; width: 100%; margin-top: 12px; } .mx_ShareType .mx_ShareType_wrapper_options .mx_ShareType_option { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; padding: 8px 20px; background: none; border: 1px solid #6f7882; border: 1px solid var(--quinary-content, #6f7882); border-radius: 8px; font-size: 0.9375rem; font-family: inherit; line-height: inherit; color: var(--timeline-text-color); } .mx_ShareType .mx_ShareType_wrapper_options .mx_ShareType_option:hover, .mx_ShareType .mx_ShareType_wrapper_options .mx_ShareType_option:focus { border-color: #0dbd8b; border-color: var(--accent-color, #0dbd8b); } .mx_ShareType_badge { height: 60px; width: 60px; margin-bottom: 20px; background-color: #0dbd8b; background-color: var(--accent-color, #0dbd8b); border-radius: 50%; border: 14px solid #0dbd8b; border: 14px solid var(--accent-color, #0dbd8b); /* colors icon */ color: white; -webkit-box-sizing: border-box; box-sizing: border-box; } .mx_ShareType_heading { padding-bottom: 32px; text-align: center; } .mx_ShareType_option-icon { height: 40px; width: 40px; -webkit-box-sizing: border-box; box-sizing: border-box; margin-right: 12px; -webkit-box-flex: 0; -ms-flex: 0 0 40px; flex: 0 0 40px; border-width: 2px; border-style: solid; border-radius: 50%; /* Live is styled by StyledLiveBeaconIcon */ } .mx_ShareType_option-icon.Own { border-color: #0dbd8b; border-color: var(--accent-color, #0dbd8b); } .mx_ShareType_option-icon.Pin { border-color: #0dbd8b; border-color: var(--accent-color, #0dbd8b); background-color: #0dbd8b; background-color: var(--accent-color, #0dbd8b); padding: 7px; /* colors icon */ color: white; } } @layer app-web{ /* Copyright 2024 New Vector Ltd. Copyright 2022 The Matrix.org Foundation C.I.C. SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial Please see LICENSE files in the repository root for full details. */ .mx_ZoomButtons { position: absolute; bottom: 32px; right: 24px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; row-gap: 8px; } .mx_ZoomButtons .mx_ZoomButtons_button { border-radius: 4px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; height: 24px; width: 24px; background: var(--timeline-background-color, var(--cpd-color-bg-canvas-default)); -webkit-box-shadow: 0px 4px 12px rgb(0, 0, 0, 0.25); box-shadow: 0px 4px 12px rgb(0, 0, 0, 0.25); } .mx_ZoomButtons .mx_ZoomButtons_button .mx_ZoomButtons_icon { height: 12px; width: 12px; color: var(--timeline-text-color); } } @layer app-web{ /* Copyright 2024 New Vector Ltd. Copyright 2022 The Matrix.org Foundation C.I.C. SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial Please see LICENSE files in the repository root for full details. */ .mx_MBeaconBody { position: relative; height: 220px; max-width: 325px; width: 100%; border-radius: 8px; border-radius: var(--MBody-border-radius); overflow: hidden; } .mx_MBeaconBody.mx_MBeaconBody_withoutMap { height: auto; } .mx_MBeaconBody.mx_MBeaconBody_withoutMap .mx_MBeaconBody_chin { position: relative; background-color: transparent; } .mx_MBeaconBody_withoutMapContent { background-color: var(--panels, var(--cpd-color-gray-600)); border-radius: 4px; } .mx_MBeaconBody_withoutMapInfoLastUpdated { /* 48px lines up with icon in BeaconStatus */ margin-top: -8px; padding: 0 8px 8px 48px; color: #edf3ff; color: var(--tertiary-content, #edf3ff); font-size: 0.625rem; } .mx_MBeaconBody_map { height: 100%; width: 100%; z-index: 0; /* keeps the entire map under the message action bars */ cursor: pointer; } .mx_MBeaconBody_mapFallback, .mx_MBeaconBody_mapError { /* pushes spinner/icon up */ /* to appear more centered with the footer */ padding-bottom: 50px !important; } .mx_MBeaconBody_mapErrorInteractive { cursor: pointer; } .mx_MBeaconBody_mapFallback { cursor: default; } .mx_MBeaconBody_chin { position: absolute; bottom: 0; width: 100%; background-color: var(--cpd-color-bg-canvas-default); opacity: 0.85; } .mx_EventTile[data-layout="bubble"] .mx_EventTile_line .mx_MBeaconBody { max-width: 100%; width: 450px; } .mx_ReplyTile .mx_MBeaconBody { /* Prevent clicking a beacon within a reply */ pointer-events: none; } } @layer app-web{ /* Copyright 2024 New Vector Ltd. Copyright 2022 The Matrix.org Foundation C.I.C. SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial Please see LICENSE files in the repository root for full details. */ .mx_MediaProcessingError_Icon { margin-right: 4px; vertical-align: text-top; } } @layer app-web{ /* Copyright 2024 New Vector Ltd. Copyright 2023 The Matrix.org Foundation C.I.C. SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial Please see LICENSE files in the repository root for full details. */ .mx_PollOption { border: 1px solid #6f7882; border: 1px solid var(--quinary-content, #6f7882); border-radius: 8px; padding: 6px 12px; background-color: var(--timeline-background-color, var(--cpd-color-bg-canvas-default)); } .mx_PollOption .mx_StyledRadioButton_content, .mx_PollOption .mx_PollOption_endedOption { padding-top: 2px; margin-right: 0px; } .mx_PollOption .mx_StyledRadioButton_spacer { display: none; } .mx_PollOption, /* label has cursor: default in user-agent stylesheet */ /* override */ .mx_PollOption_live-option { cursor: pointer; } .mx_PollOption_content { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } .mx_PollOption_optionVoteCount { color: #edf3ff; color: var(--secondary-content, #edf3ff); font-size: 0.75rem; white-space: nowrap; } .mx_PollOption_winnerIcon { height: 12px; width: 12px; color: var(--cpd-color-icon-accent-tertiary); margin-right: 4px; vertical-align: middle; } .mx_PollOption_checked { /* override checked radio button styling to show checkmark instead */ } .mx_PollOption_checked .mx_PollOption_popularityBackground .mx_PollOption_popularityAmount { background-color: var(--cpd-color-icon-primary); } .mx_PollOption_checked .mx_StyledRadioButton_checked input[type="radio"]:checked + div { border-color: var(--cpd-color-icon-primary); background-color: var(--cpd-color-icon-primary); } .mx_PollOption_checked .mx_StyledRadioButton_checked input[type="radio"]:checked + div div { background: none; } .mx_PollOption_checked .mx_StyledRadioButton_checked input[type="radio"]:checked + div div svg { color: var(--cpd-color-icon-on-solid-primary); width: 12px; height: 12px; margin: -2px; display: block; } .mx_PollOption_ended.mx_PollOption_checked { /* override checked radio button styling to show checkmark instead */ } .mx_PollOption_ended.mx_PollOption_checked .mx_PollOption_popularityBackground .mx_PollOption_popularityAmount { background-color: var(--cpd-color-icon-accent-tertiary); } .mx_PollOption_ended.mx_PollOption_checked .mx_StyledRadioButton_checked input[type="radio"]:checked + div { border-color: var(--cpd-color-icon-accent-tertiary); background-color: var(--cpd-color-icon-accent-tertiary); } /* options not actionable in these states */ .mx_PollOption_checked, .mx_PollOption_ended { pointer-events: none; } .mx_PollOption_popularityBackground { width: 100%; height: 8px; margin-right: 12px; border-radius: 8px; background-color: #21262c; background-color: var(--system, #21262c); margin-top: 8px; } .mx_PollOption_popularityBackground .mx_PollOption_popularityAmount { width: 0%; height: 8px; border-radius: 8px; background-color: var(--cpd-color-icon-primary); } } @layer app-web{ /* Copyright 2024 New Vector Ltd. Copyright 2024 The Matrix.org Foundation C.I.C. Copyright 2019 New Vector Ltd SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial Please see LICENSE files in the repository root for full details. */ /* * These used to live in General User Settings. These components are horribly duplicative * but share the same styles. For now I'm putting them here so I can renamed the general * tab sensibly and before I can refactor these components. */ .mx_AddRemoveThreepids_existing { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .mx_AddRemoveThreepids_existing_address, .mx_AddRemoveThreepids_existing_promptText { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; margin-right: 10px; } .mx_AddRemoveThreepids_existing_button { margin-left: 5px; } .mx_EmailAddressesPhoneNumbers_verify { display: -webkit-box; display: -ms-flexbox; display: flex; } .mx_EmailAddressesPhoneNumbers_existing_button { -webkit-box-pack: right; -ms-flex-pack: right; justify-content: right; } .mx_EmailAddressesPhoneNumbers_verify_instructions { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; } } @layer app-web{ /* Copyright 2024 New Vector Ltd. Copyright 2022 The Matrix.org Foundation C.I.C. SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial Please see LICENSE files in the repository root for full details. */ .mx_CurrentDeviceSection_deviceDetails { /* align with text of session tile */ margin-left: 56px; } } @layer app-web{ /* Copyright 2024 New Vector Ltd. Copyright 2022 The Matrix.org Foundation C.I.C. SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial Please see LICENSE files in the repository root for full details. */ .mx_DeviceDetailHeading { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .mx_DeviceDetailHeading_renameCta { -ms-flex-negative: 0; flex-shrink: 0; } .mx_DeviceDetailHeading_renameForm { display: grid; grid-gap: 16px; gap: 16px; -webkit-box-pack: left; -ms-flex-pack: left; justify-content: left; grid-template-columns: 100%; } .mx_DeviceDetailHeading_renameFormButtons { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; gap: 8px; } .mx_DeviceDetailHeading_renameFormButtons .mx_Spinner { width: auto; -webkit-box-flex: 0; -ms-flex-positive: 0; flex-grow: 0; } .mx_DeviceDetailHeading_renameFormInput { /* override field styles */ margin: 0 0 4px 0 !important; } .mx_DeviceDetailHeading_renameFormHeading { margin: 0; } .mx_DeviceDetailHeading_renameFormError { color: #ff5b55; color: var(--alert, #ff5b55); padding-right: 4px; display: block; } } @layer app-web{ /* Copyright 2024 New Vector Ltd. Copyright 2022 The Matrix.org Foundation C.I.C. SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial Please see LICENSE files in the repository root for full details. */ .mx_DeviceDetails { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-sizing: border-box; box-sizing: border-box; margin-top: 16px; padding: 24px; border-radius: 8px; border: 1px solid #6f7882; border: 1px solid var(--quinary-content, #6f7882); } .mx_DeviceDetails_section { padding-bottom: 20px; margin-bottom: 20px; border-bottom: 1px solid #6f7882; border-bottom: 1px solid var(--quinary-content, #6f7882); display: grid; grid-gap: 24px; gap: 24px; -webkit-box-pack: left; -ms-flex-pack: left; justify-content: left; grid-template-columns: 100%; } .mx_DeviceDetails_section:last-child { padding-bottom: 0; border-bottom: 0; margin-bottom: 0; } .mx_DeviceDetails_sectionHeading { margin: 0; } .mx_DeviceDetails_sectionHeading .mx_DeviceDetails_sectionSubheading { display: block; font-size: 0.75rem; color: #edf3ff; color: var(--secondary-content, #edf3ff); line-height: 0.875rem; margin-top: 4px; } .mx_DeviceDetails_metadataTable { font: var(--cpd-font-body-sm-regular); color: #edf3ff; color: var(--secondary-content, #edf3ff); width: 100%; border-spacing: 0; } .mx_DeviceDetails_metadataTable th { text-transform: uppercase; font-weight: normal; text-align: left; } .mx_DeviceDetails_metadataTable td { padding-top: 8px; } .mx_DeviceDetails_metadataTable .mxDeviceDetails_metadataLabel { width: 160px; } .mx_DeviceDetails_metadataTable .mxDeviceDetails_metadataValue { color: var(--timeline-text-color); } .mx_DeviceDetails_signOutButtonContent { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 4px; } .mx_DeviceDetails_pushNotifications { display: block; } .mx_DeviceDetails_pushNotifications .mx_ToggleSwitch { float: right; } } @layer app-web{ /* Copyright 2024 New Vector Ltd. Copyright 2022 The Matrix.org Foundation C.I.C. SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial Please see LICENSE files in the repository root for full details. */ .mx_DeviceExpandDetailsButton { height: 32px; width: 32px; background: transparent; border-radius: 4px; color: var(--icon-button-color, var(--cpd-color-icon-tertiary)); --icon-transform: rotate(-90deg); } .mx_DeviceExpandDetailsButton:hover { background: #6f7882; background: var(--quinary-content, #6f7882); } .mx_DeviceExpandDetailsButton.mx_DeviceExpandDetailsButton_expanded { --icon-transform: rotate(0deg); background: #21262c; background: var(--system, #21262c); } .mx_DeviceExpandDetailsButton.mx_DeviceExpandDetailsButton_expanded:hover { background: #6f7882; background: var(--quinary-content, #6f7882); } .mx_DeviceExpandDetailsButton_icon { height: 24px; width: 24px; -webkit-transition: all 0.3s; transition: all 0.3s; -webkit-transform: var(--icon-transform); transform: var(--icon-transform); -webkit-transform-origin: center; transform-origin: center; } } @layer app-web{ /* Copyright 2024 New Vector Ltd. Copyright 2022 The Matrix.org Foundation C.I.C. SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial Please see LICENSE files in the repository root for full details. */ .mx_DeviceSecurityCard { width: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; -webkit-box-sizing: border-box; box-sizing: border-box; padding: 16px; border: 1px solid #6f7882; border: 1px solid var(--quinary-content, #6f7882); border-radius: 8px; } .mx_DeviceSecurityCard_icon { -webkit-box-flex: 0; -ms-flex: 0 0 40px; flex: 0 0 40px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; margin-right: 16px; border-radius: 8px; height: 40px; width: 40px; color: var(--icon-color); background-color: var(--background-color); } .mx_DeviceSecurityCard_icon.Verified { --icon-color: #0dbd8b; --background-color: var(--cpd-color-green-300); } .mx_DeviceSecurityCard_icon.Unverified { --icon-color: #ff5b55; --background-color: var(--cpd-color-red-300); } .mx_DeviceSecurityCard_icon.Inactive { --icon-color: var(--secondary-content, #edf3ff); --background-color: var(--panels, var(--cpd-color-gray-600)); } .mx_DeviceSecurityCard_content { -webkit-box-flex: 1; -ms-flex: 1 1; flex: 1 1; } .mx_DeviceSecurityCard_heading { margin: 0 0 4px 0; } .mx_DeviceSecurityCard_description { margin: 0; font: var(--cpd-font-body-sm-regular); color: #edf3ff; color: var(--secondary-content, #edf3ff); } .mx_DeviceSecurityCard_actions { margin-top: 16px; } } @layer app-web{ /* Copyright 2024 New Vector Ltd. Copyright 2022 The Matrix.org Foundation C.I.C. SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial Please see LICENSE files in the repository root for full details. */ .mx_DeviceTile { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -webkit-box-align: center; -ms-flex-align: center; align-items: center; width: 100%; } .mx_DeviceTile_interactive { cursor: pointer; } .mx_DeviceTile_info { -webkit-box-flex: 1; -ms-flex: 1 1 0px; flex: 1 1 0; } .mx_DeviceTile_metadata { margin-top: 4px; font: var(--cpd-font-body-sm-regular); color: #edf3ff; color: var(--secondary-content, #edf3ff); } .mx_DeviceTile_inactiveIcon { height: 14px; margin-right: 8px; vertical-align: middle; } .mx_DeviceTile_actions { display: grid; grid-gap: 8px; gap: 8px; grid-auto-flow: column; margin-left: 8px; } } @layer app-web{ /* Copyright 2024 New Vector Ltd. Copyright 2022 The Matrix.org Foundation C.I.C. SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial Please see LICENSE files in the repository root for full details. */ .mx_DeviceTypeIcon { -webkit-box-flex: 0; -ms-flex: 0 0 auto; flex: 0 0 auto; position: relative; margin-right: 8px; /* creates space for verification icon to overlap */ padding: 0 8px 8px 0; } .mx_DeviceTypeIcon_deviceIconWrapper { --background-color: var(--panels, var(--cpd-color-gray-600)); --icon-color: var(--secondary-content, #edf3ff); height: 40px; width: 40px; -webkit-box-sizing: border-box; box-sizing: border-box; border: 8px solid var(--background-color); border-radius: 50%; color: #edf3ff; color: var(--secondary-content, #edf3ff); color: var(--icon-color); background-color: var(--background-color); } .mx_DeviceTypeIcon_selected .mx_DeviceTypeIcon_deviceIconWrapper { --background-color: var(--timeline-text-color); --icon-color: var(--timeline-background-color, var(--cpd-color-bg-canvas-default)); } .mx_DeviceTypeIcon_deviceIcon { height: 24px; width: 24px; } .mx_DeviceTypeIcon_verificationIcon { position: absolute; bottom: 0; right: 0; height: 24px; width: 24px; -webkit-box-sizing: border-box; box-sizing: border-box; padding: 4px; border: 1px solid #6f7882; border: 1px solid var(--quinary-content, #6f7882); border-radius: 50%; background-color: var(--timeline-background-color, var(--cpd-color-bg-canvas-default)); color: var(--v-icon-color); } .mx_DeviceTypeIcon_verificationIcon.verified { --v-icon-color: #0dbd8b; } .mx_DeviceTypeIcon_verificationIcon.unverified { --v-icon-color: #ff5b55; } } @layer app-web{ /* Copyright 2024 New Vector Ltd. Copyright 2022 The Matrix.org Foundation C.I.C. SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial Please see LICENSE files in the repository root for full details. */ .mx_FilteredDeviceList .mx_Dropdown { -webkit-box-flex: 1; -ms-flex: 1 0 80px; flex: 1 0 80px; } .mx_FilteredDeviceList_list { list-style-type: none; display: grid; grid-gap: 16px; gap: 16px; margin: 0; padding: 0 16px; } .mx_FilteredDeviceList_listItem { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } .mx_FilteredDeviceList_securityCard { margin-bottom: 32px; } .mx_FilteredDeviceList_noResults { width: 100%; text-align: center; margin-bottom: 32px; } .mx_FilteredDeviceList_headerButton { -ms-flex-negative: 0; flex-shrink: 0; /* override inline button styling */ display: -webkit-box !important; display: -ms-flexbox !important; display: flex !important; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; gap: 8px; } .mx_FilteredDeviceList_deviceDetails { /* align with text of session tile */ margin-left: 88px; } } @layer app-web{ /* Copyright 2024 New Vector Ltd. Copyright 2022 The Matrix.org Foundation C.I.C. SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial Please see LICENSE files in the repository root for full details. */ .mx_FilteredDeviceListHeader { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-sizing: border-box; box-sizing: border-box; gap: 16px; width: 100%; height: 48px; padding: 0 16px; margin-bottom: 32px; background-color: var(--panels, var(--cpd-color-gray-600)); border-radius: 8px; color: #edf3ff; color: var(--secondary-content, #edf3ff); /* Higher specificity selector to override the flex-start value */ } .mx_FilteredDeviceListHeader .mx_AccessibleButton.mx_AccessibleButton_hasKind { -ms-flex-item-align: center; align-self: center; } .mx_FilteredDeviceListHeader_label { -webkit-box-flex: 1; -ms-flex: 1 1 100%; flex: 1 1 100%; } } @layer app-web{ /* Copyright 2024 New Vector Ltd. Copyright 2022 The Matrix.org Foundation C.I.C. SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial Please see LICENSE files in the repository root for full details. */ .mx_SecurityRecommendations_spacing { height: 16px; } } @layer app-web{ /* Copyright 2024,2025 New Vector Ltd. Copyright 2022 The Matrix.org Foundation C.I.C. SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial Please see LICENSE files in the repository root for full details. */ .mx_SelectableDeviceTile { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -webkit-box-align: center; -ms-flex-align: center; align-items: center; width: 100%; } .mx_SelectableDeviceTile_checkbox { -webkit-box-flex: 1; -ms-flex: 1 0; flex: 1 0; } .mx_SelectableDeviceTile_checkbox > div { margin-top: auto; margin-bottom: auto; margin-right: var(--cpd-space-1x); } } @layer app-web{ /* * Copyright 2025 New Vector Ltd. * * SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial * Please see LICENSE files in the repository root for full details. */ .mx_KeyStoragePanel_toggleRow { -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; } } @layer app-web{ /* Copyright 2024 New Vector Ltd. Copyright 2022 The Matrix.org Foundation C.I.C. SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial Please see LICENSE files in the repository root for full details. */ .mx_SettingsSubsection { width: 100%; -webkit-box-sizing: border-box; box-sizing: border-box; } .mx_SettingsSubsection.mx_SettingsSubsection_newUi { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; gap: var(--cpd-space-6x); } .mx_SettingsSubsection *[role="separator"] { /** * The gap between subsections is 32px and inside the subsection is 24px. * The separator separates the subsections, so it should have the same gap as the subsections. * We add 12px and the separator spacing (8px) to the top margin to make the separator visually centered between the subsections. * !important because it's overriding compound margin. */ margin-top: var(--cpd-space-5x) !important; } .mx_SettingsSubsection_description { margin-top: 8px; } .mx_SettingsSubsection_text { width: 100%; -webkit-box-sizing: inherit; box-sizing: inherit; color: #edf3ff; color: var(--secondary-content, #edf3ff); } .mx_SettingsSubsection_content { width: 100%; display: grid; grid-gap: var(--cpd-space-4x); gap: var(--cpd-space-4x); /* setting minwidth 0 makes columns definitely sized fixing horizontal overflow */ grid-template-columns: minmax(0, 1fr); justify-items: flex-start; margin-top: 24px; } .mx_SettingsSubsection_content summary { color: #0dbd8b; color: var(--accent-color, #0dbd8b); } .mx_SettingsSubsection_content details[open] summary { margin-bottom: 8px; } .mx_SettingsSubsection_content.mx_SettingsSubsection_contentStretch { justify-items: stretch; } .mx_SettingsSubsection_content.mx_SettingsSubsection_noHeading { margin-top: 0; } .mx_SettingsSubsection_content.mx_SettingsSubsection_content_newUi { gap: var(--cpd-space-6x); margin-top: 0; } .mx_SettingsSubsection_content .mx_SettingsSubsection_dropdown { min-width: 360px; } } @layer app-web{ /* Copyright 2024 New Vector Ltd. Copyright 2022 The Matrix.org Foundation C.I.C. SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial Please see LICENSE files in the repository root for full details. */ .mx_SettingsSubsectionHeading { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; gap: 8px; } .mx_SettingsSubsectionHeading_heading { -webkit-box-flex: 1; -ms-flex: 1 1 100%; flex: 1 1 100%; } } @layer app-web{ /* Copyright 2024 New Vector Ltd. Copyright 2022 The Matrix.org Foundation C.I.C. SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial Please see LICENSE files in the repository root for full details. */ .mx_QuickThemeSwitcher { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .mx_QuickThemeSwitcher .mx_Dropdown { min-width: 100px; margin-left: auto; height: -webkit-min-content; height: -moz-min-content; height: min-content; } .mx_QuickThemeSwitcher .mx_Dropdown_menu { max-height: 70px; } .mx_QuickThemeSwitcher_heading { font-weight: var(--cpd-font-weight-semibold); font-size: 0.75rem; line-height: 0.9375rem; color: #edf3ff; color: var(--secondary-content, #edf3ff); text-transform: uppercase; display: inline-block; margin: 0; } } @layer app-web{ /* Copyright 2024 New Vector Ltd. Copyright 2022 The Matrix.org Foundation C.I.C. SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial Please see LICENSE files in the repository root for full details. */ .mx_Caption { font: var(--cpd-font-body-sm-regular); color: #edf3ff; color: var(--secondary-content, #edf3ff); } .mx_Caption.mx_Caption_error { color: #ff5b55; color: var(--alert, #ff5b55); } } @layer app-web{ /* Copyright 2024 New Vector Ltd. Copyright 2022 The Matrix.org Foundation C.I.C. SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial Please see LICENSE files in the repository root for full details. */ /* * Compound icon * {@link https://www.figma.com/file/X4XTH9iS2KGJ2wFKDqkyed} */ .mx_Icon { -webkit-box-sizing: border-box; box-sizing: border-box; } .mx_Icon_accent { color: #0dbd8b; color: var(--accent-color, #0dbd8b); } .mx_Icon_bg-accent-light { background-color: var(--accent-color-300); } .mx_Icon_alert { color: #ff5b55; color: var(--alert, #ff5b55); } .mx_Icon_circle-40 { border-radius: 20px; -webkit-box-flex: 0; -ms-flex: 0 0 40px; flex: 0 0 40px; height: 40px; padding: 0 12px; width: 40px; } .mx_Icon_8 { -webkit-box-flex: 0; -ms-flex: 0 0 8px; flex: 0 0 8px; height: 8px; width: 8px; } .mx_Icon_10 { -webkit-box-flex: 0; -ms-flex: 0 0 10px; flex: 0 0 10px; height: 10px; width: 10px; } .mx_Icon_12 { -webkit-box-flex: 0; -ms-flex: 0 0 12px; flex: 0 0 12px; height: 12px; width: 12px; } .mx_Icon_16 { -webkit-box-flex: 0; -ms-flex: 0 0 16px; flex: 0 0 16px; height: 16px; width: 16px; } .mx_Icon_24 { -webkit-box-flex: 0; -ms-flex: 0 0 24px; flex: 0 0 24px; height: 24px; width: 24px; } .mx_Icon_32 { -webkit-box-flex: 0; -ms-flex: 0 0 32px; flex: 0 0 32px; height: 32px; width: 32px; } } @layer app-web{ /* Copyright 2024 New Vector Ltd. Copyright 2023 The Matrix.org Foundation C.I.C. SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial Please see LICENSE files in the repository root for full details. */ .mx_SuccessDialog { text-align: center; } .mx_SuccessDialog .mx_Icon { margin-bottom: 16px; } .mx_SuccessDialog .mx_Dialog_header { margin: 0 0 16px; padding: 0; } .mx_SuccessDialog .mx_Dialog_title { margin: 0; } .mx_SuccessDialog .mx_Dialog_content { color: #edf3ff; color: var(--secondary-content, #edf3ff); margin: 0 0 40px; } .mx_SuccessDialog .mx_Dialog_buttons .mx_Dialog_buttons_row { -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .mx_SuccessDialog .mx_Dialog_buttons .mx_Dialog_buttons_row button.mx_Dialog_primary { height: 48px; min-width: 328px; } } @layer app-web{ /* Copyright 2018-2024 New Vector Ltd. SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial Please see LICENSE files in the repository root for full details. */ /* make any scrollbar grey and thin */ html { scrollbar-color: rgba(255, 255, 255, 0.2) transparent; } /* scrollbar-width is not inherited (but -color is, why?!), */ /* so declare it on every element */ * { scrollbar-width: thin; } ::-webkit-scrollbar { width: 6px; height: 6px; } ::-webkit-scrollbar-thumb { border-radius: 3px; background-color: rgba(255, 255, 255, 0.2); } /* make auto-hide scrollbars not transparent again on hover */ .mx_AutoHideScrollbar:hover { scrollbar-color: rgba(255, 255, 255, 0.2) transparent; } .mx_AutoHideScrollbar:hover::-webkit-scrollbar-thumb { background-color: rgba(255, 255, 255, 0.2); } /* make scrollbars transparent for autohide scrollbars */ .mx_AutoHideScrollbar { overflow-x: hidden; overflow-y: auto; overflow-y: overlay; /* where supported */ -ms-overflow-style: -ms-autohiding-scrollbar; } .mx_AutoHideScrollbar::-webkit-scrollbar { background-color: transparent; } .mx_AutoHideScrollbar::-webkit-scrollbar-thumb { background-color: transparent; } .mx_AutoHideScrollbar{ scrollbar-color: transparent transparent; } } @layer app-web{ /* Copyright 2024 New Vector Ltd. Copyright 2022 The Matrix.org Foundation C.I.C. SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial Please see LICENSE files in the repository root for full details. */ .mx_AutocompleteInput { position: relative; } .mx_AutocompleteInput_search_icon { margin-left: 8px; fill: #edf3ff; fill: var(--secondary-content, #edf3ff); } .mx_AutocompleteInput_editor { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-align: center; -ms-flex-align: center; align-items: center; overflow-x: hidden; overflow-y: auto; border: 1px solid #e7e7e7; border-radius: 4px; -webkit-transition: border-color 0.25s; transition: border-color 0.25s; } .mx_AutocompleteInput_editor > input { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; min-width: 40%; resize: none; /* `!important` is required to bypass global input styles. */ margin: 0 !important; padding: 8px 9px; border: none !important; color: var(--timeline-text-color) !important; font-weight: normal !important; } .mx_AutocompleteInput_editor > input::-webkit-input-placeholder { color: var(--timeline-text-color) !important; font-weight: normal !important; } .mx_AutocompleteInput_editor > input::-moz-placeholder { color: var(--timeline-text-color) !important; font-weight: normal !important; } .mx_AutocompleteInput_editor > input:-ms-input-placeholder { color: var(--timeline-text-color) !important; font-weight: normal !important; } .mx_AutocompleteInput_editor > input::-ms-input-placeholder { color: var(--timeline-text-color) !important; font-weight: normal !important; } .mx_AutocompleteInput_editor > input::placeholder { color: var(--timeline-text-color) !important; font-weight: normal !important; } .mx_AutocompleteInput_editor--focused { border-color: #0086e6; border-color: var(--links, #0086e6); } .mx_AutocompleteInput_editor--has-suggestions { border-bottom-left-radius: 0; border-bottom-right-radius: 0; } .mx_AutocompleteInput_editor_selection { display: -webkit-box; display: -ms-flexbox; display: flex; margin-left: 8px; } .mx_AutocompleteInput_editor_selection_pill { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; border-radius: 12px; padding-left: 8px; padding-right: 8px; background-color: var(--cpd-color-text-decorative-1); color: #ffffff; font-size: 0.75rem; } .mx_AutocompleteInput_editor_selection_remove_button svg { vertical-align: middle; } .mx_AutocompleteInput_matches { position: absolute; left: 0; right: 0; background-color: var(--timeline-background-color, var(--cpd-color-bg-canvas-default)); border: 1px solid #0086e6; border: 1px solid var(--links, #0086e6); border-top-color: #e7e7e7; border-bottom-left-radius: 4px; border-bottom-right-radius: 4px; z-index: 1000; } .mx_AutocompleteInput_suggestion { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; padding: 8px; cursor: pointer; } .mx_AutocompleteInput_suggestion > * { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .mx_AutocompleteInput_suggestion:hover { background-color: #6f7882; background-color: var(--quinary-content, #6f7882); border-bottom-left-radius: 4px; border-bottom-right-radius: 4px; } .mx_AutocompleteInput_suggestion--selected { background-color: #6f7882; background-color: var(--quinary-content, #6f7882); } .mx_AutocompleteInput_suggestion--selected:last-child { border-bottom-left-radius: 4px; border-bottom-right-radius: 4px; } .mx_AutocompleteInput_suggestion_title { margin-right: 8px; } .mx_AutocompleteInput_suggestion_description { color: #edf3ff; color: var(--secondary-content, #edf3ff); font-size: 0.75rem; } } @layer app-web{ /* Copyright 2021-2024 New Vector Ltd. SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial Please see LICENSE files in the repository root for full details. */ .mx_BackdropPanel { position: absolute; left: 0; top: 0; height: 100vh; width: 100%; overflow: hidden; -webkit-filter: blur(var(--lp-background-blur)); filter: blur(var(--lp-background-blur)); /* Force a new layer for the backdropPanel so it's better hardware supported */ -webkit-transform: translateZ(0); transform: translateZ(0); } .mx_BackdropPanel--image { position: absolute; top: 0; left: 0; min-height: 100%; z-index: 0; pointer-events: none; overflow: hidden; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } } @layer app-web{ .mx_CompatibilityPage { width: 100%; height: 100%; background-color: #e55; } .mx_CompatibilityPage_box { position: absolute; inset: 0; margin: auto; width: 500px; height: 300px; border: 1px solid; padding: 10px; background-color: #fcc; } } @layer app-web{ /* Copyright 2024 New Vector Ltd. Copyright 2019 The Matrix.org Foundation C.I.C. Copyright 2015, 2016 OpenMarket Ltd SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial Please see LICENSE files in the repository root for full details. */ .mx_ContextualMenu_wrapper { position: fixed; z-index: 5000; } .mx_ContextualMenu_background { position: fixed; top: 0; left: 0; width: 100%; height: 100%; opacity: 1; } .mx_ContextualMenu { border-radius: 12px; -webkit-box-shadow: 0px 4px 24px rgb(0, 0, 0, 0.1); box-shadow: 0px 4px 24px rgb(0, 0, 0, 0.1); background-color: var(--cpd-color-bg-canvas-default); border: var(--cpd-border-width-1) solid var(--cpd-color-border-interactive-secondary); color: var(--timeline-text-color); position: absolute; z-index: 5001; width: -webkit-max-content; width: -moz-max-content; width: max-content; } .mx_ContextualMenu_right { right: 16px; } .mx_ContextualMenu.mx_ContextualMenu_withChevron_right { right: 8px; } .mx_ContextualMenu_chevron_right { position: absolute; right: -8px; top: 0px; width: 0; height: 0; border-top: 8px solid transparent; border-left: 8px solid var(--timeline-background-color, var(--cpd-color-bg-canvas-default)); border-bottom: 8px solid transparent; } .mx_ContextualMenu_left { left: 0; } .mx_ContextualMenu.mx_ContextualMenu_withChevron_left { left: 8px; } .mx_ContextualMenu_chevron_left { position: absolute; left: -8px; top: 0px; width: 0; height: 0; border-top: 8px solid transparent; border-right: 8px solid var(--timeline-background-color, var(--cpd-color-bg-canvas-default)); border-bottom: 8px solid transparent; } .mx_ContextualMenu_top { top: 0; } .mx_ContextualMenu.mx_ContextualMenu_withChevron_top { top: 8px; } .mx_ContextualMenu_chevron_top { position: absolute; left: 0px; top: -8px; width: 0; height: 0; border-left: 8px solid transparent; border-bottom: 8px solid var(--timeline-background-color, var(--cpd-color-bg-canvas-default)); border-right: 8px solid transparent; } .mx_ContextualMenu_bottom { bottom: 0; } .mx_ContextualMenu.mx_ContextualMenu_withChevron_bottom { bottom: 8px; } .mx_ContextualMenu_chevron_bottom { position: absolute; left: 0px; bottom: -8px; width: 0; height: 0; border-left: 8px solid transparent; border-top: 8px solid var(--timeline-background-color, var(--cpd-color-bg-canvas-default)); border-right: 8px solid transparent; } .mx_ContextualMenu_rightAligned { -webkit-transform: translateX(-100%); transform: translateX(-100%); } .mx_ContextualMenu_bottomAligned { -webkit-transform: translateY(-100%); transform: translateY(-100%); } } @layer app-web{ /* Copyright 2024 New Vector Ltd. Copyright 2022 The Matrix.org Foundation C.I.C. SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial Please see LICENSE files in the repository root for full details. */ .mx_ErrorMessage { -webkit-box-align: center; -ms-flex-align: center; align-items: center; color: #ff5b55; color: var(--alert, #ff5b55); display: -webkit-box; display: -ms-flexbox; display: flex; font-size: 0.75rem; gap: 8px; line-height: 1.2em; min-height: 2.4em; } } @layer app-web{ /* Copyright 2024 New Vector Ltd. Copyright 2015, 2016 OpenMarket Ltd SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial Please see LICENSE files in the repository root for full details. */ @-webkit-keyframes mx_FileDropTarget_animation { from { opacity: 0; } to { opacity: 0.95; } } @keyframes mx_FileDropTarget_animation { from { opacity: 0; } to { opacity: 0.95; } } .mx_FileDropTarget { min-width: 0; width: 100%; height: 100%; font-size: 1.125rem; text-align: center; pointer-events: none; background-color: var(--timeline-background-color, var(--cpd-color-bg-canvas-default)); opacity: 0.95; position: absolute; z-index: 3000; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-animation: mx_FileDropTarget_animation; animation: mx_FileDropTarget_animation; -webkit-animation-duration: 0.5s; animation-duration: 0.5s; } @-webkit-keyframes mx_FileDropTarget_image_animation { from { -webkit-transform: scaleX(0); transform: scaleX(0); } to { -webkit-transform: scaleX(1); transform: scaleX(1); } } @keyframes mx_FileDropTarget_image_animation { from { -webkit-transform: scaleX(0); transform: scaleX(0); } to { -webkit-transform: scaleX(1); transform: scaleX(1); } } .mx_FileDropTarget_image { width: 32px; -webkit-animation: mx_FileDropTarget_image_animation; animation: mx_FileDropTarget_image_animation; -webkit-animation-duration: 0.5s; animation-duration: 0.5s; margin-bottom: 16px; } } @layer app-web{ /* Copyright 2024 New Vector Ltd. Copyright 2016 OpenMarket Ltd SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial Please see LICENSE files in the repository root for full details. */ .mx_FilePanel { -webkit-box-ordinal-group: 3; -ms-flex-order: 2; order: 2; -webkit-box-flex: 1; -ms-flex: 1 1 0px; flex: 1 1 0; overflow-y: auto; display: -webkit-box; display: -ms-flexbox; display: flex; /* FIXME: rather than having EventTile's default CSS be for MessagePanel, we should make EventTile a base CSS class and customise it specifically for usage in {Message,File,Notification}Panel. */ /* Overrides for the attachment body tiles */ } .mx_FilePanel .mx_RoomView_messageListWrapper { -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .mx_FilePanel .mx_RoomView_MessageList { width: 100%; gap: var(--cpd-space-6x); } .mx_FilePanel .mx_EventTile { word-break: break-word; padding-top: 0; /* anchor link as wrapper */ } .mx_FilePanel .mx_EventTile + .mx_EventTile { border-top: 1px solid var(--cpd-color-gray-400); padding-top: var(--cpd-space-6x); } .mx_FilePanel .mx_EventTile .mx_EventTile_line { -webkit-padding-start: 0; padding-inline-start: 0; } .mx_FilePanel .mx_EventTile .mx_MFileBody [data-type="download"] { margin-top: var(--cpd-space-4x); } .mx_FilePanel .mx_EventTile .mx_ImageBody { gap: 0; } .mx_FilePanel .mx_EventTile .mx_EventTile_senderDetailsLink { text-decoration: none; margin-bottom: var(--cpd-space-1x); display: block; } .mx_FilePanel .mx_EventTile .mx_EventTile_senderDetailsLink .mx_EventTile_senderDetails { display: -webkit-box; display: -ms-flexbox; display: flex; margin-top: -2px; gap: var(--cpd-space-2x); -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .mx_FilePanel .mx_EventTile .mx_EventTile_senderDetailsLink .mx_EventTile_senderDetails .mx_DisambiguatedProfile { color: #a1b2d1; /* for ellipsis. Color of displayName and mxid is inherited */ } .mx_FilePanel .mx_EventTile .mx_EventTile_senderDetailsLink .mx_EventTile_senderDetails .mx_MessageTimestamp { margin-left: auto; } .mx_FilePanel .mx_EventTile_line { -webkit-margin-end: 0; margin-inline-end: 0; -webkit-padding-start: 0; padding-inline-start: 0; } } @layer app-web{ /* Copyright 2024 New Vector Ltd. Copyright 2022 The Matrix.org Foundation C.I.C. SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial Please see LICENSE files in the repository root for full details. */ .mx_GenericDropdownMenu_button { padding: 3px 4px 3px 8px; border-radius: 4px; line-height: 1.5; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; font-size: 0.75rem; color: #edf3ff; color: var(--secondary-content, #edf3ff); } .mx_GenericDropdownMenu_button svg { width: 18px; height: 18px; float: right; } .mx_GenericDropdownMenu_button:hover, .mx_GenericDropdownMenu_button[aria-expanded="true"] { background: #6f7882; background: var(--quinary-content, #6f7882); } .mx_ContextualMenu_wrapper.mx_GenericDropdownMenu_wrapper .mx_ContextualMenu { position: static; position: initial; font-size: 0.75rem; color: #edf3ff; color: var(--secondary-content, #edf3ff); padding-top: 10px; padding-bottom: 10px; border: 1px solid #6f7882; border: 1px solid var(--quinary-content, #6f7882); -webkit-box-shadow: 0 1px 3px rgb(23, 25, 28, 0.05); box-shadow: 0 1px 3px rgb(23, 25, 28, 0.05); } .mx_ContextualMenu_wrapper.mx_GenericDropdownMenu_wrapper .mx_ContextualMenu_chevron_top { left: auto; right: 22px; border-bottom-color: #6f7882; border-bottom-color: var(--quinary-content, #6f7882); } .mx_ContextualMenu_wrapper.mx_GenericDropdownMenu_wrapper .mx_ContextualMenu_chevron_top::after { content: ""; border: inherit; border-bottom-color: var(--timeline-background-color, var(--cpd-color-bg-canvas-default)); position: absolute; top: 1px; left: -8px; } .mx_ContextualMenu_wrapper.mx_GenericDropdownMenu_wrapper .mx_GenericDropdownMenu_divider { display: block; height: 0; margin-left: 4px; margin-right: 19px; border-top: 1px solid #6f7882; border-top: 1px solid var(--quinary-content, #6f7882); } .mx_ContextualMenu_wrapper.mx_GenericDropdownMenu_wrapper .mx_GenericDropdownMenu_Option { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -webkit-box-align: center; -ms-flex-align: center; align-items: center; padding: 10px 20px 10px 30px; position: relative; } .mx_ContextualMenu_wrapper.mx_GenericDropdownMenu_wrapper .mx_GenericDropdownMenu_Option > .mx_GenericDropdownMenu_Option--label { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1; margin: 0; } .mx_ContextualMenu_wrapper.mx_GenericDropdownMenu_wrapper .mx_GenericDropdownMenu_Option > .mx_GenericDropdownMenu_Option--label span:first-child { color: var(--timeline-text-color); font-weight: var(--cpd-font-weight-semibold); } .mx_ContextualMenu_wrapper.mx_GenericDropdownMenu_wrapper .mx_GenericDropdownMenu_Option.mx_GenericDropdownMenu_Option--header > .mx_GenericDropdownMenu_Option--label span:first-child { font-size: 0.9375rem; } .mx_ContextualMenu_wrapper.mx_GenericDropdownMenu_wrapper .mx_GenericDropdownMenu_Option.mx_GenericDropdownMenu_Option--item:hover { background-color: #343a46; background-color: var(--menu-selected-color, #343a46); } .mx_ContextualMenu_wrapper.mx_GenericDropdownMenu_wrapper .mx_GenericDropdownMenu_Option.mx_GenericDropdownMenu_Option--item .mx_GenericDropdownMenu_Option--checkIcon { width: 16px; height: 16px; margin-left: -22px; margin-right: 6px; color: var(--timeline-text-color); display: inline-block; vertical-align: middle; } } @layer app-web{ /* Copyright 2019-2024 New Vector Ltd. Copyright 2017 Vector Creations Ltd Copyright 2016 OpenMarket Ltd SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial Please see LICENSE files in the repository root for full details. */ .mx_HomePage { display: grid; place-items: center; width: min(100% - 50px, 960px); height: 100%; margin: 0 auto; container-type: inline-size; container-name: homepage; } .mx_HomePage_default { text-align: center; } .mx_HomePage_default img { height: 48px; } .mx_HomePage_default h1 { margin-bottom: 4px; font-weight: var(--cpd-font-weight-semibold); font-size: 2rem; line-height: 1.375; } .mx_HomePage_default h2 { margin-top: 4px; font-weight: var(--cpd-font-weight-semibold); font-size: 1.125rem; line-height: 1.5625rem; color: #a1b2d1; } .mx_HomePage_default .mx_MiniAvatarUploader { margin: 0 auto; } .mx_HomePage_default .mx_HomePage_default_buttons { display: grid; grid-template-columns: repeat(3, 1fr); grid-gap: 5px 40px; gap: 5px 40px; width: 100%; margin-top: 80px; margin-bottom: 20px; } .mx_HomePage_default .mx_HomePage_default_buttons .mx_AccessibleButton { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; gap: 13px; -webkit-box-sizing: border-box; box-sizing: border-box; width: 160px; min-height: 132px; padding: 8px 15px; border-radius: 8px; font-weight: var(--cpd-font-weight-semibold); font-size: 0.9375rem; line-height: 1.25rem; color: #fff; /* on all themes */ background-color: #0dbd8b; background-color: var(--accent-color, #0dbd8b); } .mx_HomePage_default .mx_HomePage_default_buttons .mx_AccessibleButton svg { display: block; width: 100%; height: 40px; -o-object-fit: contain; object-fit: contain; color: #fff; /* on all themes */ } @container homepage (max-width: 559px) { .mx_HomePage_default .mx_HomePage_default_buttons { grid-template-columns: 1fr } .mx_HomePage_default .mx_HomePage_default_buttons .mx_AccessibleButton { -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; width: 100%; min-height: 0; } .mx_HomePage_default .mx_HomePage_default_buttons .mx_AccessibleButton svg { width: 24px; } } } @layer app-web{ /* Copyright 2024 New Vector Ltd. Copyright 2022 The Matrix.org Foundation C.I.C. SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial Please see LICENSE files in the repository root for full details. */ .mx_LargeLoader { -webkit-box-align: center; -ms-flex-align: center; align-items: center; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; height: 100%; } .mx_LargeLoader .mx_Spinner { -webkit-box-flex: initial; -ms-flex: initial; flex: initial; height: auto; margin-bottom: 32px; margin-top: 33vh; } .mx_LargeLoader .mx_LargeLoader_text { font-size: 24px; font-weight: var(--cpd-font-weight-semibold); padding: 0 16px; position: relative; text-align: center; } } @layer app-web{ /* Copyright 2024 New Vector Ltd. Copyright 2020 The Matrix.org Foundation C.I.C. SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial Please see LICENSE files in the repository root for full details. */ .mx_MatrixChat--with-avatar .mx_LeftPanel, .mx_MatrixChat--with-avatar .mx_LeftPanel .mx_LeftPanel_roomListContainer { background-color: transparent; } .mx_LeftPanel_outerWrapper { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; max-width: 50%; position: relative; } .mx_LeftPanel_wrapper, .mx_LeftPanel { --collapsedWidth: 68px; } .mx_LeftPanel_panel .mx_LeftPanel_outerWrapper { height: 100%; max-width: none; } .mx_LeftPanel_panel .mx_LeftPanel_wrapper--user { width: 100%; } .mx_LeftPanel_wrapper { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -webkit-box-flex: 1; -ms-flex: 1; flex: 1; height: 100%; /* ensure space panel is still scrollable with an outer wrapper */ } .mx_LeftPanel_wrapper .mx_LeftPanel_wrapper--user { background-color: var(--roomlist-background-color); display: -webkit-box; display: -ms-flexbox; display: flex; overflow: hidden; position: relative; /* For enhanced visibility under contrast control */ outline: 1px solid transparent; } .mx_LeftPanel_wrapper .mx_LeftPanel_wrapper--user[data-collapsed] { max-width: var(--collapsedWidth); } .mx_LeftPanel { background-color: var(--roomlist-background-color); /* Create a row-based flexbox for the space panel and the room list */ display: -webkit-box; display: -ms-flexbox; display: flex; contain: content; position: relative; -webkit-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1; overflow: hidden; /* Note: The 'room list' in this context is actually everything that isn't the tag */ /* panel, such as the menu options, breadcrumbs, filtering, etc */ /* These styles override the defaults for the minimized (66px) layout */ } .mx_LeftPanel .mx_LeftPanel_roomListContainer { background-color: var(--roomlist-background-color); -webkit-box-flex: 1; -ms-flex: 1 0 0px; flex: 1 0 0; min-width: 0; /* Create another flexbox (this time a column) for the room list components */ display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } .mx_LeftPanel .mx_LeftPanel_roomListContainer .mx_LeftPanel_userHeader { /* 12px top, 12px sides, 20px bottom (using 13px bottom to account * for internal whitespace in the breadcrumbs) */ padding: 12px; -ms-flex-negative: 0; flex-shrink: 0; /* to convince safari's layout engine the flexbox is fine */ /* Create another flexbox column for the rows to stack within */ display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } .mx_LeftPanel .mx_LeftPanel_roomListContainer .mx_LeftPanel_breadcrumbsContainer { overflow-y: hidden; overflow-x: scroll; margin: 12px 12px 0 12px; -webkit-box-flex: 0; -ms-flex: 0 0 auto; flex: 0 0 auto; /* Create yet another flexbox, this time within the row, to ensure items stay */ /* aligned correctly. This is also a row-based flexbox. */ display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; contain: content; } .mx_LeftPanel .mx_LeftPanel_roomListContainer .mx_LeftPanel_breadcrumbsContainer.mx_IndicatorScrollbar_leftOverflow { -webkit-mask-image: -webkit-gradient(linear, left top, right top, from(transparent), color-stop(5%, black)); -webkit-mask-image: linear-gradient(90deg, transparent, black 5%); mask-image: -webkit-gradient(linear, left top, right top, from(transparent), color-stop(5%, black)); mask-image: linear-gradient(90deg, transparent, black 5%); } .mx_LeftPanel .mx_LeftPanel_roomListContainer .mx_LeftPanel_breadcrumbsContainer.mx_IndicatorScrollbar_rightOverflow { -webkit-mask-image: -webkit-gradient(linear, left top, right top, from(black), color-stop(95%, black), to(transparent)); -webkit-mask-image: linear-gradient(90deg, black, black 95%, transparent); mask-image: -webkit-gradient(linear, left top, right top, from(black), color-stop(95%, black), to(transparent)); mask-image: linear-gradient(90deg, black, black 95%, transparent); } .mx_LeftPanel .mx_LeftPanel_roomListContainer .mx_LeftPanel_breadcrumbsContainer.mx_IndicatorScrollbar_rightOverflow.mx_IndicatorScrollbar_leftOverflow { -webkit-mask-image: -webkit-gradient(linear, left top, right top, from(transparent), color-stop(5%, black), color-stop(95%, black), to(transparent)); -webkit-mask-image: linear-gradient(90deg, transparent, black 5%, black 95%, transparent); mask-image: -webkit-gradient(linear, left top, right top, from(transparent), color-stop(5%, black), color-stop(95%, black), to(transparent)); mask-image: linear-gradient(90deg, transparent, black 5%, black 95%, transparent); } .mx_LeftPanel .mx_LeftPanel_roomListContainer .mx_LeftPanel_filterContainer { margin: 0 12px; padding: 12px 0 8px; border-bottom: 1px solid #6f7882; border-bottom: 1px solid var(--quinary-content, #6f7882); -ms-flex-negative: 0; flex-shrink: 0; /* to convince safari's layout engine the flexbox is fine */ /* Create a flexbox to organize the inputs */ display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .mx_LeftPanel .mx_LeftPanel_roomListContainer .mx_LeftPanel_filterContainer + .mx_LegacyRoomListHeader { margin-top: 12px; } .mx_LeftPanel .mx_LeftPanel_roomListContainer .mx_LeftPanel_filterContainer .mx_LeftPanel_dialPadButton, .mx_LeftPanel .mx_LeftPanel_roomListContainer .mx_LeftPanel_filterContainer .mx_LeftPanel_exploreButton { width: 20px; height: 20px; padding: var(--cpd-space-1-5x); border-radius: 8px; background-color: var(--roomlist-highlights-color); margin-left: 8px; /* For enhanced visibility under contrast control */ outline: 1px solid transparent; } .mx_LeftPanel .mx_LeftPanel_roomListContainer .mx_LeftPanel_filterContainer .mx_LeftPanel_dialPadButton svg, .mx_LeftPanel .mx_LeftPanel_roomListContainer .mx_LeftPanel_filterContainer .mx_LeftPanel_exploreButton svg { width: inherit; height: inherit; display: block; color: #edf3ff; color: var(--secondary-content, #edf3ff); } .mx_LeftPanel .mx_LeftPanel_roomListContainer .mx_LeftPanel_filterContainer .mx_LeftPanel_dialPadButton:hover, .mx_LeftPanel .mx_LeftPanel_roomListContainer .mx_LeftPanel_filterContainer .mx_LeftPanel_exploreButton:hover { background-color: #edf3ff; background-color: var(--tertiary-content, #edf3ff); } .mx_LeftPanel .mx_LeftPanel_roomListContainer .mx_LeftPanel_filterContainer .mx_LeftPanel_dialPadButton:hover svg, .mx_LeftPanel .mx_LeftPanel_roomListContainer .mx_LeftPanel_filterContainer .mx_LeftPanel_exploreButton:hover svg { color: var(--timeline-background-color, var(--cpd-color-bg-canvas-default)); } .mx_LeftPanel .mx_LeftPanel_roomListContainer .mx_LegacyRoomListHeader:first-child { margin-top: 12px; } .mx_LeftPanel .mx_LeftPanel_roomListContainer .mx_LeftPanel_roomListWrapper { /* Make the y-scrollbar more responsive */ padding-right: 2px; overflow: hidden; margin-top: 10px; /* so we're not up against the search/filter */ -webkit-box-flex: 1; -ms-flex: 1 0 0px; flex: 1 0 0; /* needed in Safari to properly set flex-basis */ } .mx_LeftPanel .mx_LeftPanel_roomListContainer .mx_LeftPanel_roomListWrapper.mx_LeftPanel_roomListWrapper_stickyBottom { padding-bottom: 32px; } .mx_LeftPanel .mx_LeftPanel_roomListContainer .mx_LeftPanel_roomListWrapper.mx_LeftPanel_roomListWrapper_stickyTop { padding-top: 32px; } .mx_LeftPanel .mx_LeftPanel_roomListContainer .mx_LeftPanel_actualRoomListContainer { position: relative; /* for sticky headers */ height: 100%; /* ensure scrolling still works */ } .mx_LeftPanel.mx_LeftPanel_minimized { -webkit-box-flex: 0; -ms-flex-positive: 0; flex-grow: 0; min-width: 0; min-width: initial; width: auto !important; width: initial !important; } .mx_LeftPanel.mx_LeftPanel_minimized .mx_LeftPanel_roomListContainer { width: var(--collapsedWidth); } .mx_LeftPanel.mx_LeftPanel_minimized .mx_LeftPanel_roomListContainer .mx_LeftPanel_userHeader { -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .mx_LeftPanel.mx_LeftPanel_minimized .mx_LeftPanel_roomListContainer .mx_LeftPanel_filterContainer { /* Organize the flexbox into a centered column layout */ -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .mx_LeftPanel.mx_LeftPanel_minimized .mx_LeftPanel_roomListContainer .mx_LeftPanel_filterContainer .mx_LeftPanel_dialPadButton { margin-left: 0; margin-top: 8px; background-color: transparent; } .mx_LeftPanel.mx_LeftPanel_minimized .mx_LeftPanel_roomListContainer .mx_LeftPanel_filterContainer .mx_LeftPanel_exploreButton { margin-left: 0; margin-top: 8px; } .mx_LeftPanel_newRoomList { /* Thew new rooms list is not designed to be collapsed to just icons. */ /* 224 + 68(spaces bar) was deemed by design to be a good minimum for the left panel. */ --collapsedWidth: 224px; /* Important to force the color on ED titlebar until we remove the old room list */ background-color: var(--cpd-color-bg-canvas-default) !important; } #left-panel .mx_LeftPanel_wrapper--user { /* * Disable background when using the new room list. * This background sometimes shows when the panel is resized and it looks like a thicker border. */ background: none; } } @layer app-web{ /* Copyright 2019-2024 New Vector Ltd. SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial Please see LICENSE files in the repository root for full details. */ .mx_MainSplit { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; min-width: 0; min-height: 0; height: 100%; } .mx_MainSplit > .mx_RightPanel_ResizeWrapper:hover .mx_ResizeHandle--horizontal::before { position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-150%, -50%); transform: translate(-150%, -50%); height: 64px; /* to match width of the ones on roomlist */ width: 4px; border-radius: 4px; content: ""; background-color: var(--timeline-text-color); opacity: 0.8; } } @layer app-web{ /* Copyright 2024 New Vector Ltd. Copyright 2015, 2016 OpenMarket Ltd SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial Please see LICENSE files in the repository root for full details. */ .mx_MatrixChat_splash { position: relative; height: 100%; /* PLX branded loading state: brand mark above a centered spinner on the app background. Replaces the bare/blank centered spinner. */ display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; gap: 28px; background: #0E1621; background: var(--cpd-color-bg-canvas-default, #0E1621); } .mx_MatrixChat_splashLogo { width: 88px; height: 88px; border-radius: 20px; -webkit-box-shadow: 0 8px 32px rgba(0, 0, 0, 0.45); box-shadow: 0 8px 32px rgba(0, 0, 0, 0.45); } /* Re-center the spinner itself: the default Spinner uses absolute centering which we override inside the flex splash. */ .mx_MatrixChat_splash .mx_Spinner { position: static; height: auto; } .mx_MatrixChat_wrapper { display: -webkit-box; display: -ms-flexbox; display: flex; width: 100%; height: 100%; } .mx_MatrixToolbar { -webkit-box-ordinal-group: 2; -ms-flex-order: 1; order: 1; height: 40px; } .mx_MatrixChat { position: relative; width: 100%; height: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-flex: 1; -ms-flex: 1; flex: 1; min-height: 0; } /* not the left panel, and not the resize handle, so the roomview and friends */ .mx_MatrixChat > :not(.mx_LeftPanel):not(.mx_SpacePanel):not(.mx_ResizeHandle):not(.mx_LeftPanel_outerWrapper) { background-color: var(--timeline-background-color, var(--cpd-color-bg-canvas-default)); -webkit-box-flex: 1; -ms-flex: 1 1 0px; flex: 1 1 0; min-width: 0; /* To fix https://github.com/vector-im/element-web/issues/3298 where Safari needed height 100% all the way down to the HomePage. Height does not have to be auto, empirically. */ height: 100%; } .mx_MatrixChat > .mx_ResizeHandle--horizontal:hover { position: relative; } .mx_MatrixChat > .mx_ResizeHandle--horizontal:hover::before { position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); height: 64px; /* to match width of the ones on roomlist */ width: 4px; border-radius: 4px; content: " "; background-color: var(--timeline-text-color); opacity: 0.8; } } @layer app-web{ /* Copyright 2024 New Vector Ltd. Copyright 2020 The Matrix.org Foundation C.I.C. SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial Please see LICENSE files in the repository root for full details. */ .mx_NonUrgentToastContainer { position: absolute; bottom: 30px; left: 28px; z-index: 101; /* same level as other toasts */ } .mx_NonUrgentToastContainer .mx_NonUrgentToastContainer_toast { padding: 10px 12px; border-radius: 8px; width: 320px; font-size: 0.8125rem; margin-top: 8px; /* We don't use variables on the colours because we want it to be the same */ /* in all themes. */ background-color: #17191c; color: #fff; } } @layer app-web{ /* Copyright 2026 Element Creations Ltd. SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial Please see LICENSE files in the repository root for full details. */ .mx_PictureInPictureDragger { cursor: -webkit-grab; cursor: grab; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; left: 0; position: fixed; top: 0; /* Display above any widget elements */ z-index: 102; } .mx_PictureInPictureDragger:active { cursor: -webkit-grabbing; cursor: grabbing; } } @layer app-web{ /* Copyright 2024,2025 New Vector Ltd. Copyright 2021 The Matrix.org Foundation C.I.C. SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial Please see LICENSE files in the repository root for full details. */ .mx_QuickSettingsButton { /* !important override compound */ border-radius: 8px !important; margin: 12px auto 12px; } .mx_QuickSettingsButton svg { fill: #edf3ff; fill: var(--secondary-content, #edf3ff); } .mx_QuickSettingsButton:not(.expanded):hover { /** * override compound default background color when hovered * should disappear when the space panel will be migrated to compound */ background-color: #6f7882 !important; background-color: var(--quaternary-content, #6f7882) !important; color: var(--timeline-text-color); } .mx_QuickSettingsButton:not(.expanded):hover svg { fill: var(--timeline-text-color); } .mx_QuickSettingsButton.expanded { /** * override compound default background color when hovered * should disappear when the space panel will be migrated to compound */ background-color: transparent !important; /* align with settings icon */ margin-left: 21px; margin-right: 8px; width: 100%; /** * modify internal css of the compound component * dirty but we need to add the label into the indicator icon button **/ } .mx_QuickSettingsButton.expanded > div { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .mx_QuickSettingsButton.expanded svg { /* align with settings label */ margin-right: 14px; /* required to set the icon width when into a flex container */ width: 24px; -ms-flex-negative: 0; flex-shrink: 0; } .mx_QuickSettingsButton.expanded .mx_QuickSettingsButton_label { /* !important override compound */ color: #edf3ff !important; color: var(--secondary-content, #edf3ff) !important; } .mx_QuickSettingsButton_ContextMenuWrapper .mx_ContextualMenu { padding: 16px; width: -webkit-max-content; width: -moz-max-content; width: max-content; min-width: 200px; contain: unset; /* let the dropdown paint beyond the context menu */ } .mx_QuickSettingsButton_ContextMenuWrapper .mx_ContextualMenu > div > h2 { font-weight: var(--cpd-font-weight-semibold); font-size: 0.9375rem; line-height: 1.5rem; color: var(--cpd-color-text-secondary); margin: 0 0 16px; } .mx_QuickSettingsButton_ContextMenuWrapper .mx_ContextualMenu .mx_AccessibleButton_hasKind { display: block; margin-top: 4px; } .mx_QuickSettingsButton_ContextMenuWrapper .mx_ContextualMenu > div > h4 { font-weight: var(--cpd-font-weight-semibold); font-size: 0.75rem; line-height: 0.9375rem; text-transform: uppercase; color: var(--cpd-color-text-secondary); margin: 20px 0 12px; position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; } .mx_QuickSettingsButton_ContextMenuWrapper .mx_ContextualMenu .mx_QuickSettingsButton_moreOptionsButton { margin-left: var(--cpd-space-7x); font-size: 0.9375rem; line-height: 1.5rem; color: #ffffff; color: var(--cpd-color-text-primary); position: relative; margin-bottom: 16px; } .mx_QuickSettingsButton_ContextMenuWrapper .mx_ContextualMenu .mx_QuickSettingsButton_option { margin-bottom: var(--cpd-space-3x); } .mx_QuickSettingsButton_ContextMenuWrapper .mx_ContextualMenu .mx_QuickSettingsButton_option label { /* Correctly line up icons and text. */ display: -webkit-box; display: -ms-flexbox; display: flex; } .mx_QuickSettingsButton_ContextMenuWrapper_new_room_list .mx_QuickThemeSwitcher { margin-top: var(--cpd-space-2x); } .mx_QuickSettingsButton_icon { margin-right: var(--cpd-space-1x); color: #edf3ff; color: var(--secondary-content, #edf3ff); width: 18px; height: 18px; margin-top: auto; margin-bottom: auto; } } @layer app-web{ /* Copyright 2024 New Vector Ltd. Copyright 2020 The Matrix.org Foundation C.I.C. Copyright 2015, 2016 OpenMarket Ltd SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial Please see LICENSE files in the repository root for full details. */ .mx_RightPanel { overflow-x: hidden; -webkit-box-flex: 0; -ms-flex: 0 0 auto; flex: 0 0 auto; position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; border-left: 1px solid var(--cpd-color-gray-400); -webkit-box-sizing: border-box; box-sizing: border-box; height: 100%; contain: strict; background-color: var(--cpd-color-bg-canvas-default); } .mx_RightPanel .mx_RoomView_MessageList { padding: 14px 18px; /* top and bottom is 4px smaller to balance with the padding set above */ } .mx_RightPanel .mx_MemberList, .mx_RightPanel .mx_MemberInfo { -webkit-box-ordinal-group: 3; -ms-flex-order: 2; order: 2; -webkit-box-flex: 1; -ms-flex: 1 1 0px; flex: 1 1 0; } .mx_RightPanel .mx_RoomView_messagePanelSpinner { -webkit-box-ordinal-group: 3; -ms-flex-order: 2; order: 2; margin: auto; } } @layer app-web{ /* Copyright 2024 New Vector Ltd. Copyright 2020 The Matrix.org Foundation C.I.C. SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial Please see LICENSE files in the repository root for full details. */ /* Note: this component expects to be contained within a flexbox */ .mx_RoomSearch { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; min-width: 0; border-radius: 8px; background-color: var(--roomlist-highlights-color); /* keep border thickness consistent to prevent movement */ border: 1px solid transparent; height: 28px; padding: 1px; /* Create a flexbox for the icons (easier to manage) */ display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; cursor: pointer; } .mx_RoomSearch .mx_RoomSearch_icon { width: 20px; height: 20px; color: #edf3ff; color: var(--secondary-content, #edf3ff); margin-left: var(--cpd-space-2x); -ms-flex-negative: 0; flex-shrink: 0; } .mx_RoomSearch .mx_RoomSearch_spotlightTriggerText { color: var(--cpd-color-text-secondary); -webkit-box-flex: 1; -ms-flex: 1; flex: 1; min-width: 0; /* the following rules are to match that of a real input field */ overflow: hidden; margin: 9px; font: var(--cpd-font-body-sm-semibold); } .mx_RoomSearch .mx_RoomSearch_shortcutPrompt { border-radius: 6px; background-color: var(--roomlist-highlights-color); padding: 2px 4px; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; font-size: 0.75rem; line-height: 0.9375rem; font-family: inherit; font-weight: var(--cpd-font-weight-semibold); color: var(--timeline-text-secondary-color); margin-right: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .mx_RoomSearch.mx_RoomSearch_minimized { height: 32px; min-height: 32px; width: 32px; -webkit-box-sizing: border-box; box-sizing: border-box; } .mx_RoomSearch.mx_RoomSearch_minimized .mx_RoomSearch_icon { margin: 0 auto; padding: 1px; -ms-flex-item-align: center; align-self: center; } .mx_RoomSearch.mx_RoomSearch_minimized .mx_RoomSearch_shortcutPrompt { display: none; } .mx_RoomSearch:hover { background-color: #edf3ff; background-color: var(--tertiary-content, #edf3ff); } .mx_RoomSearch:hover .mx_RoomSearch_spotlightTriggerText { color: var(--timeline-background-color, var(--cpd-color-bg-canvas-default)); } .mx_RoomSearch:hover .mx_RoomSearch_shortcutPrompt { background-color: var(--timeline-background-color, var(--cpd-color-bg-canvas-default)); color: #edf3ff; color: var(--secondary-content, #edf3ff); } .mx_RoomSearch:hover .mx_RoomSearch_icon { color: var(--timeline-background-color, var(--cpd-color-bg-canvas-default)); } } @layer app-web{ /* Copyright 2024 New Vector Ltd. Copyright 2015, 2016 OpenMarket Ltd SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial Please see LICENSE files in the repository root for full details. */ :root { --RoomView_MessageList-padding: 18px; } .mx_LeftPanel_panel .mx_RoomView_wrapper { height: 100%; } .mx_RoomView_wrapper { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-flex: 1; -ms-flex: 1; flex: 1; position: relative; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; /* Contain the amount of layers rendered by constraining what actually needs re-layering via css */ contain: strict; } .mx_RoomView { word-wrap: break-word; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-flex: 1; -ms-flex: 1; flex: 1; position: relative; } .mx_RoomView .mx_MainSplit { -webkit-box-flex: 1; -ms-flex: 1 1 0px; flex: 1 1 0; } .mx_RoomView .mx_MessageComposer { width: 100%; -webkit-box-flex: 0; -ms-flex: 0 0 auto; flex: 0 0 auto; margin-right: 2px; padding-bottom: 1em; } .mx_RoomView_auxPanel_hiddenHighlights { border-bottom: 1px solid var(--roomlist-separator-color); padding: 10px 26px; color: #ff5b55; color: var(--alert, #ff5b55); cursor: pointer; } .mx_RoomView_messagePanel { width: 100%; overflow-y: auto; -webkit-box-flex: 1; -ms-flex: 1 1 0px; flex: 1 1 0; overflow-anchor: none; } .mx_RoomView_messagePanelSearchSpinner { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; background-image: url(../../img/typing-indicator-2x.e13c259.gif); background-position: center 367px; background-size: 25px; background-repeat: no-repeat; position: relative; } .mx_RoomView_messagePanelSearchSpinner svg { color: var(--timeline-text-secondary-color); width: 50px; height: 50px; position: absolute; top: 286px; left: calc(50% - 25px); } .mx_RoomView_body { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-flex: 1; -ms-flex: 1; flex: 1; min-width: 0; container-type: size; container-name: roomview; } .mx_RoomView_body .mx_RoomView_messagePanel, .mx_RoomView_body .mx_RoomView_messagePanelSpinner, .mx_RoomView_body .mx_RoomView_messagePanelSearchSpinner { -webkit-box-ordinal-group: 3; -ms-flex-order: 2; order: 2; } .mx_RoomView_body .mx_RoomView_timeline { /* offset parent for mx_RoomView_topUnreadMessagesBar */ position: relative; -webkit-box-flex: 1; -ms-flex: 1; flex: 1; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; margin-right: calc(8px / 2); margin-right: calc(var(--container-gap-width) / 2); } .mx_RoomView_statusArea { width: 100%; -webkit-box-flex: 0; -ms-flex: 0 0 auto; flex: 0 0 auto; max-height: 0px; background-color: var(--timeline-background-color, var(--cpd-color-bg-canvas-default)); z-index: 1000; overflow: hidden; -webkit-transition: all 0.2s ease-out; transition: all 0.2s ease-out; } .mx_RoomView_statusArea_expanded { max-height: 100px; } .mx_RoomView_statusAreaBox { margin: auto; min-height: 50px; } .mx_RoomView_statusAreaBox_line { margin-left: 65px; border-top: 1px solid var(--roomlist-separator-color); height: 1px; } .mx_RoomView_messageListWrapper { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; position: relative; } .mx_RoomView_searchResultsPanel .mx_RoomView_messageListWrapper { -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; } .mx_RoomView_searchResultsPanel .mx_RoomView_messageListWrapper > .mx_RoomView_MessageList > li > ol { list-style-type: none; } .mx_RoomView_searchResultsPanel a { text-decoration: none; color: inherit; } .mx_RoomView_empty { font-size: 0.8125rem; padding: 0 24px; margin-right: 30px; text-align: center; margin-bottom: 80px; /* visually center the content (intentional offset) */ } .mx_RoomView_MessageList { list-style-type: none; padding: 18px; padding: var(--RoomView_MessageList-padding); /* mx_ProfileResizer depends on this value */ margin: 0; /* needed as min-height is set to clientHeight in ScrollPanel to prevent shrinking when WhoIsTypingTile is hidden */ -webkit-box-sizing: border-box; box-sizing: border-box; } .mx_RoomView_MessageList li { clear: both; } .mx_ScrollPanel .mx_RoomView_MessageList { position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; content-visibility: auto; contain-intrinsic-size: 50px; } .mx_RoomView--local .mx_ScrollPanel .mx_RoomView_MessageList { -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .mx_RoomView_inCall .mx_RoomView_statusAreaBox_line { margin-top: 2px; border: none; height: 0px; } .mx_RoomView_inCall .mx_MessageComposer_wrapper { border-top: 2px hidden; padding-top: 1px; } .mx_MatrixChat_useCompactLayout .mx_RoomView_MessageList { margin-bottom: 4px; } .mx_MatrixChat_useCompactLayout .mx_RoomView_MessageList h2 { margin-top: 6px; } .mx_MatrixChat_useCompactLayout .mx_RoomView_statusAreaBox { min-height: 42px; } } @layer app-web{ /* Copyright 2024 New Vector Ltd. Copyright 2015, 2016 OpenMarket Ltd SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial Please see LICENSE files in the repository root for full details. */ .mx_SearchBox { -webkit-box-flex: 1; -ms-flex: 1 1 0px; flex: 1 1 0; min-width: 0; min-height: 36px; /* to avoid jumping when the X to clear shows/hides */ } .mx_SearchBox.mx_SearchBox_blurred:not(:hover) { background-color: transparent; } .mx_SearchBox .mx_SearchBox_closeButton { cursor: pointer; height: 16px; width: 16px; padding: 9px; } .mx_SearchBox .mx_SearchBox_closeButton svg { height: inherit; width: inherit; color: var(--cpd-color-icon-secondary); } } @layer app-web{ /* Copyright 2024,2025 New Vector Ltd. Copyright 2021 The Matrix.org Foundation C.I.C. SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial Please see LICENSE files in the repository root for full details. */ .mx_SpaceRoomView_landing .mx_AccessibleButton_kind_link { font-size: inherit; } .mx_SpaceRoomView_landing .mx_SearchBox { margin: 24px 0 16px; } .mx_SpaceRoomView_landing .mx_SpaceHierarchy_noResults { text-align: center; } .mx_SpaceRoomView_landing .mx_SpaceHierarchy_noResults > div { font-size: 0.9375rem; line-height: 1.5rem; color: #edf3ff; color: var(--secondary-content, #edf3ff); } .mx_SpaceRoomView_landing .mx_SpaceHierarchy_listHeader { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-flow: wrap; flex-flow: wrap; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 12px; font-size: 0.9375rem; line-height: 1.5rem; color: var(--timeline-text-color); margin-bottom: 12px; } .mx_SpaceRoomView_landing .mx_SpaceHierarchy_listHeader .mx_SpaceHierarchy_listHeader_header { grid-column-start: 1; font-weight: var(--cpd-font-weight-semibold); margin: 0; } .mx_SpaceRoomView_landing .mx_SpaceHierarchy_listHeader .mx_SpaceHierarchy_listHeader_buttons { grid-column-start: 2; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-flow: wrap; flex-flow: wrap; gap: 12px; min-height: 32px; } .mx_SpaceRoomView_landing .mx_SpaceHierarchy_listHeader .mx_SpaceHierarchy_listHeader_buttons .mx_AccessibleButton { padding: 4px 12px; font-weight: normal; } .mx_SpaceRoomView_landing .mx_SpaceHierarchy_listHeader .mx_AccessibleButton_kind_danger_outline, .mx_SpaceRoomView_landing .mx_SpaceHierarchy_listHeader .mx_AccessibleButton_kind_primary_outline { padding: 3px 12px; /* to account for the 1px border */ } .mx_SpaceRoomView_landing .mx_SpaceHierarchy_error { position: relative; font-weight: var(--cpd-font-weight-semibold); color: #ff5b55; color: var(--alert, #ff5b55); font-size: 0.9375rem; line-height: 1.125rem; margin: 20px auto 12px; padding-left: 24px; width: -webkit-max-content; width: -moz-max-content; width: max-content; } .mx_SpaceRoomView_landing .mx_SpaceHierarchy_error::before { content: ""; position: absolute; height: 16px; width: 16px; left: 0; background-image: url(../../icons/error-solid.7cb2e4d.svg); background-size: cover; background-repeat: no-repeat; } .mx_SpaceRoomView_landing .mx_SpaceHierarchy_roomCount > h3 { display: inline; font-weight: var(--cpd-font-weight-semibold); font-size: 1.125rem; line-height: 1.375rem; color: var(--timeline-text-color); } .mx_SpaceRoomView_landing .mx_SpaceHierarchy_roomCount > span { margin-left: 8px; font-size: 0.9375rem; line-height: 1.5rem; color: #edf3ff; color: var(--secondary-content, #edf3ff); } .mx_SpaceRoomView_landing .mx_SpaceHierarchy_subspace_toggle { position: absolute; left: -1px; top: 10px; height: 16px; width: 16px; border-radius: 4px; background-color: var(--timeline-background-color, var(--cpd-color-bg-canvas-default)); } .mx_SpaceRoomView_landing .mx_SpaceHierarchy_subspace_toggle svg { width: inherit; height: inherit; color: #edf3ff; color: var(--tertiary-content, #edf3ff); -webkit-transform: rotate(270deg); transform: rotate(270deg); } .mx_SpaceRoomView_landing .mx_SpaceHierarchy_subspace_toggle.mx_SpaceHierarchy_subspace_toggle_shown svg { -webkit-transform: rotate(0deg); transform: rotate(0deg); } .mx_SpaceRoomView_landing .mx_SpaceHierarchy_subspace_children { position: relative; padding-left: 12px; } .mx_SpaceRoomView_landing .mx_SpaceHierarchy_list { list-style: none; padding: 0; margin: 0; } .mx_SpaceRoomView_landing .mx_SpaceHierarchy_list li.mx_SpaceHierarchy_roomTileWrapper { list-style: none; } .mx_SpaceRoomView_landing .mx_SpaceHierarchy_list li.mx_SpaceHierarchy_roomTileWrapper .mx_SpaceHierarchy_roomTile { position: relative; padding: 8px 16px; border-radius: 8px; -webkit-box-sizing: border-box; box-sizing: border-box; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; gap: 6px 12px; } .mx_SpaceRoomView_landing .mx_SpaceHierarchy_list li.mx_SpaceHierarchy_roomTileWrapper .mx_SpaceHierarchy_roomTile .mx_SpaceHierarchy_roomTile_item { font-weight: var(--cpd-font-weight-semibold); font-size: 0.9375rem; line-height: 1.125rem; display: grid; grid-template-columns: 20px auto; grid-gap: 6px 8px; gap: 6px 8px; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-flex: 1; -ms-flex: 1; flex: 1; /* wrap action buttons */ } .mx_SpaceRoomView_landing .mx_SpaceHierarchy_list li.mx_SpaceHierarchy_roomTileWrapper .mx_SpaceHierarchy_roomTile .mx_SpaceHierarchy_roomTile_item .mx_SpaceHierarchy_roomTile_avatar { grid-row: 1; grid-column: 1; } .mx_SpaceRoomView_landing .mx_SpaceHierarchy_list li.mx_SpaceHierarchy_roomTileWrapper .mx_SpaceHierarchy_roomTile .mx_SpaceHierarchy_roomTile_item .mx_SpaceHierarchy_roomTile_name { grid-row: 1; grid-column: 2; } .mx_SpaceRoomView_landing .mx_SpaceHierarchy_list li.mx_SpaceHierarchy_roomTileWrapper .mx_SpaceHierarchy_roomTile .mx_SpaceHierarchy_roomTile_item .mx_SpaceHierarchy_roomTile_name .mx_InfoTooltip, .mx_SpaceRoomView_landing .mx_SpaceHierarchy_list li.mx_SpaceHierarchy_roomTileWrapper .mx_SpaceHierarchy_roomTile .mx_SpaceHierarchy_roomTile_item .mx_SpaceHierarchy_roomTile_name .mx_SpaceHierarchy_roomTile_joined { margin-left: 12px; color: #edf3ff; color: var(--tertiary-content, #edf3ff); font-size: 0.75rem; line-height: 0.9375rem; } .mx_SpaceRoomView_landing .mx_SpaceHierarchy_list li.mx_SpaceHierarchy_roomTileWrapper .mx_SpaceHierarchy_roomTile .mx_SpaceHierarchy_roomTile_item .mx_SpaceHierarchy_roomTile_name .mx_InfoTooltip { display: inline-block; } .mx_SpaceRoomView_landing .mx_SpaceHierarchy_list li.mx_SpaceHierarchy_roomTileWrapper .mx_SpaceHierarchy_roomTile .mx_SpaceHierarchy_roomTile_item .mx_SpaceHierarchy_roomTile_name .mx_SpaceHierarchy_roomTile_joined { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; vertical-align: middle; } .mx_SpaceRoomView_landing .mx_SpaceHierarchy_list li.mx_SpaceHierarchy_roomTileWrapper .mx_SpaceHierarchy_roomTile .mx_SpaceHierarchy_roomTile_item .mx_SpaceHierarchy_roomTile_name .mx_SpaceHierarchy_roomTile_joined svg { width: 20px; height: 20px; color: #0dbd8b; color: var(--accent-color, #0dbd8b); } .mx_SpaceRoomView_landing .mx_SpaceHierarchy_list li.mx_SpaceHierarchy_roomTileWrapper .mx_SpaceHierarchy_roomTile .mx_SpaceHierarchy_roomTile_item .mx_SpaceHierarchy_roomTile_info { grid-row: 2; grid-column: 2; font: var(--cpd-font-body-md-regular); font-weight: normal; font-weight: initial; line-height: 1.125rem; color: #edf3ff; color: var(--secondary-content, #edf3ff); display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; } .mx_SpaceRoomView_landing .mx_SpaceHierarchy_list li.mx_SpaceHierarchy_roomTileWrapper .mx_SpaceHierarchy_roomTile .mx_SpaceHierarchy_actions { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-column-gap: 12px; -moz-column-gap: 12px; column-gap: 12px; margin-left: auto; } .mx_SpaceRoomView_landing .mx_SpaceHierarchy_list li.mx_SpaceHierarchy_roomTileWrapper .mx_SpaceHierarchy_roomTile .mx_SpaceHierarchy_actions .mx_AccessibleButton { line-height: 1.5rem; padding: 4px 16px; display: inline-block; visibility: hidden; } .mx_SpaceRoomView_landing .mx_SpaceHierarchy_list li.mx_SpaceHierarchy_roomTileWrapper .mx_SpaceHierarchy_roomTile .mx_SpaceHierarchy_actions .mx_AccessibleButton_kind_danger_outline, .mx_SpaceRoomView_landing .mx_SpaceHierarchy_list li.mx_SpaceHierarchy_roomTileWrapper .mx_SpaceHierarchy_roomTile .mx_SpaceHierarchy_actions .mx_AccessibleButton_kind_primary_outline { padding: 3px 16px; /* to account for the 1px border */ } .mx_SpaceRoomView_landing .mx_SpaceHierarchy_list li.mx_SpaceHierarchy_roomTileWrapper .mx_SpaceHierarchy_roomTile:hover, .mx_SpaceRoomView_landing .mx_SpaceHierarchy_list li.mx_SpaceHierarchy_roomTileWrapper .mx_SpaceHierarchy_roomTile:focus-within { background-color: var(--sidebar-color); } .mx_SpaceRoomView_landing .mx_SpaceHierarchy_list li.mx_SpaceHierarchy_roomTileWrapper .mx_SpaceHierarchy_roomTile:hover .mx_AccessibleButton, .mx_SpaceRoomView_landing .mx_SpaceHierarchy_list li.mx_SpaceHierarchy_roomTileWrapper .mx_SpaceHierarchy_roomTile:focus-within .mx_AccessibleButton { visibility: visible; } .mx_SpaceRoomView_landing .mx_SpaceHierarchy_list li.mx_SpaceHierarchy_roomTileWrapper .mx_SpaceHierarchy_roomTile.mx_SpaceHierarchy_joining .mx_AccessibleButton { visibility: visible; padding: 4px 18px; } .mx_SpaceRoomView_landing .mx_SpaceHierarchy_roomTile::before, .mx_SpaceRoomView_landing .mx_SpaceHierarchy_subspace_children::before { content: ""; position: absolute; background-color: var(--sidebar-color); width: 1px; height: 100%; left: 6px; top: 0; } .mx_SpaceRoomView_landing .mx_SpaceHierarchy_actions .mx_SpaceHierarchy_actionsText { font-weight: normal; font-size: 0.75rem; line-height: 0.9375rem; color: #edf3ff; color: var(--secondary-content, #edf3ff); } .mx_SpaceRoomView_landing > hr { border: none; height: 1px; background-color: rgb(141, 151, 165, 0.2); margin: 20px 0; } .mx_SpaceRoomView_landing .mx_SpaceHierarchy_createRoom { display: block; margin: 16px auto 0; width: -webkit-max-content; width: -moz-max-content; width: max-content; } } @layer app-web{ /* Copyright 2024 New Vector Ltd. Copyright 2021 The Matrix.org Foundation C.I.C. SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial Please see LICENSE files in the repository root for full details. */ .mx_SpacePanel { --activeBackground-color: var(--roomlist-highlights-color); --activeBorder-color: var(--timeline-text-color); --activeBorder-transparent-gap: 1px; --gutterSize: 14px; --height-nested: 24px; --height-topLevel: 32px; background-color: var(--sidebar-color); -webkit-box-flex: 0; -ms-flex: 0 0 auto; flex: 0 0 auto; padding: 0; margin: 0; position: relative; /* Fix for the blurred avatar-background */ z-index: 1; /* For enhanced visibility under contrast control */ outline: 1px solid transparent; /* Create another flexbox so the Panel fills the container */ display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; /* root space buttons are bigger and not indented */ } .mx_SpacePanel.collapsed { width: 68px; } .mx_SpacePanel.newUi { background-color: var(--cpd-color-bg-canvas-default); border-right: 1px solid var(--cpd-color-bg-subtle-primary); } .mx_SpacePanel .mx_SpacePanel_toggleCollapse { position: absolute; width: 18px; height: 18px; border-radius: 50%; background-color: #edf3ff; background-color: var(--tertiary-content, #edf3ff); top: 19px; /* v-align with avatar */ right: -8px; } .mx_SpacePanel .mx_SpacePanel_toggleCollapse svg { height: inherit; width: inherit; display: inline-block; color: var(--timeline-background-color, var(--cpd-color-bg-canvas-default)); /* Slight alignment tweak to center the asset */ margin-left: 1px; } .mx_SpacePanel .mx_SpacePanel_toggleCollapse:not(.expanded) { opacity: 0; } .mx_SpacePanel .mx_SpacePanel_toggleCollapse.expanded svg { -webkit-transform: rotate(180deg); transform: rotate(180deg); /* Slight alignment tweak to center the asset */ margin-left: -1px; } .mx_SpacePanel:hover .mx_SpacePanel_toggleCollapse, .mx_SpacePanel .mx_SpacePanel_toggleCollapse:focus-visible { opacity: 1; /* For enhanced visibility under contrast control */ outline: 1px solid transparent; } .mx_SpacePanel ul { margin: 0; list-style: none; padding: 0; } .mx_SpacePanel .mx_SpaceButton_toggleCollapse { cursor: pointer; } .mx_SpacePanel .mx_SpaceItem_dragging .mx_SpaceButton_toggleCollapse { visibility: hidden; } .mx_SpacePanel .mx_SpaceItem { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -ms-flex-flow: wrap; flex-flow: wrap; } .mx_SpacePanel .mx_SpaceItem.mx_SpaceItem_narrow { -ms-flex-item-align: baseline; align-self: baseline; } .mx_SpacePanel .mx_SpaceItem.collapsed > .mx_SpaceButton > .mx_SpaceButton_toggleCollapse { padding: 0 10px; margin: 0 -10px; } .mx_SpacePanel .mx_SpaceItem.collapsed > .mx_SpaceTreeLevel { display: none; } .mx_SpacePanel .mx_SpaceItem_new { position: relative; } .mx_SpacePanel .mx_SpaceItem:not(.hasSubSpaces) > .mx_SpaceButton { margin-left: var(--gutterSize); min-width: 40px; } .mx_SpacePanel .mx_SpaceButton { border-radius: 8px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; padding: 4px 4px 4px 0; width: 100%; /* Override the unlayered cursor: grab; rule from react-beautiful-dnd */ cursor: pointer !important; } .mx_SpacePanel .mx_SpaceButton.mx_SpaceButton_active:not(.mx_SpaceButton_narrow) .mx_SpaceButton_selectionWrapper { background-color: var(--activeBackground-color); } .mx_SpacePanel .mx_SpaceButton.mx_SpaceButton_active.mx_SpaceButton_narrow .mx_SpaceButton_selectionWrapper { padding: var(--activeBorder-transparent-gap); border: 3px var(--activeBorder-color) solid; } .mx_SpacePanel .mx_SpaceButton .mx_SpaceButton_selectionWrapper { position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-flex: 1; -ms-flex: 1; flex: 1; -webkit-box-align: center; -ms-flex-align: center; align-items: center; border-radius: 12px; padding: 4px; width: calc(100% - 32px); min-width: 0; } .mx_SpacePanel .mx_SpaceButton.mx_SpaceButton_narrow .mx_SpaceButton_selectionWrapper { -webkit-box-flex: initial; -ms-flex: initial; flex: initial; width: 32px; } .mx_SpacePanel .mx_SpaceButton .mx_SpaceButton_name { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; margin-left: 8px; white-space: nowrap; display: block; text-overflow: ellipsis; overflow: hidden; font: var(--cpd-font-body-md-regular); } .mx_SpacePanel .mx_SpaceButton .mx_SpaceButton_toggleCollapse { height: 20px; width: var(--gutterSize); -ms-flex-negative: 0; flex-shrink: 0; padding: 10px 0; } .mx_SpacePanel .mx_SpaceButton .mx_SpaceButton_toggleCollapse svg { width: 20px; height: inherit; display: inline-block; color: #edf3ff; color: var(--tertiary-content, #edf3ff); /* Re-align with parent */ margin-left: -3px; } .mx_SpacePanel .mx_SpaceButton .mx_SpaceButton_icon { /* Calculate height excluding padding to allow svg to inherit */ width: calc(var(--height-topLevel) - 14px); height: calc(var(--height-topLevel) - 14px); -ms-flex-negative: 0; flex-shrink: 0; border-radius: 8px; padding: 7px; background-color: var(--roomlist-highlights-color); } .mx_SpacePanel .mx_SpaceButton .mx_SpaceButton_icon svg { width: inherit; height: inherit; display: block; color: #edf3ff; color: var(--secondary-content, #edf3ff); } .mx_SpacePanel .mx_SpaceButton.mx_SpaceButton_new .mx_SpaceButton_icon { background-color: transparent; background-color: initial; } .mx_SpacePanel .mx_SpaceButton.mx_SpaceButton_new .mx_SpaceButton_icon svg { color: var(--timeline-text-color); -webkit-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; /* TODO transition */ } .mx_SpacePanel .mx_SpaceButton.mx_SpaceButton_newCancel .mx_SpaceButton_icon svg { -webkit-transform: rotate(45deg); transform: rotate(45deg); } .mx_SpacePanel .mx_SpaceButton .mx_SpaceButton_menuButton { width: 16px; height: 16px; padding: var(--cpd-space-0-5x); -ms-flex-negative: 0; flex-shrink: 0; margin-top: auto; margin-bottom: auto; display: none; position: absolute; right: 4px; } .mx_SpacePanel .mx_SpaceButton .mx_SpaceButton_menuButton svg { width: inherit; height: inherit; display: block; color: var(--timeline-text-color); } .mx_SpacePanel .mx_SpaceTreeLevel { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; max-width: 250px; min-width: 0; -webkit-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1; } .mx_SpacePanel .mx_SpaceTreeLevel .mx_SpaceTreeLevel { /* Indent subspaces */ padding-left: 16px; } .mx_SpacePanel .mx_SpaceButton_avatarWrapper { position: relative; line-height: 0; } .mx_SpacePanel .mx_SpacePanel_badgeContainer { /* Create a flexbox to make aligning dot badges easier */ display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; position: absolute; right: -3px; top: -3px; } .mx_SpacePanel .mx_SpacePanel_badgeContainer .mx_NotificationBadge { margin: 0 2px; /* centering */ background-clip: padding-box; } .mx_SpacePanel .mx_SpacePanel_badgeContainer .mx_NotificationBadge_dot { /* make the smaller dot occupy the same width for centering */ margin: 0 -1px 0 0; border: 3px solid var(--sidebar-color); } .mx_SpacePanel .mx_SpacePanel_badgeContainer .mx_NotificationBadge_2char, .mx_SpacePanel .mx_SpacePanel_badgeContainer .mx_NotificationBadge_3char { margin: -5px -5px 0 0; border: 2px solid var(--sidebar-color); } .mx_SpacePanel .mx_SpaceButton:hover:not(.mx_SpaceButton_narrow):not(.mx_SpaceButton_invite) .mx_SpaceButton_menuButton, .mx_SpacePanel .mx_SpaceButton:focus-within:not(.mx_SpaceButton_narrow):not(.mx_SpaceButton_invite) .mx_SpaceButton_menuButton, .mx_SpacePanel .mx_SpaceButton_hasMenuOpen:not(.mx_SpaceButton_narrow):not(.mx_SpaceButton_invite) .mx_SpaceButton_menuButton { display: block; } .mx_SpacePanel .mx_SpaceItem:not(.mx_SpaceItem_new) .mx_SpaceButton:hover:not(.mx_SpaceButton_narrow):not(.mx_SpaceButton_invite) .mx_SpaceButton_name, .mx_SpacePanel .mx_SpaceItem:not(.mx_SpaceItem_new) .mx_SpaceButton:focus-within:not(.mx_SpaceButton_narrow):not(.mx_SpaceButton_invite) .mx_SpaceButton_name, .mx_SpacePanel .mx_SpaceItem:not(.mx_SpaceItem_new) .mx_SpaceButton_hasMenuOpen:not(.mx_SpaceButton_narrow):not(.mx_SpaceButton_invite) .mx_SpaceButton_name { max-width: calc(100% - 56px); } .mx_SpacePanel > .mx_AutoHideScrollbar { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; padding: 0 0 16px 0; scrollbar-gutter: stable; } .mx_SpacePanel > .mx_AutoHideScrollbar.mx_IndicatorScrollbar_topOverflow { -webkit-mask-image: linear-gradient(to bottom, transparent, black 16px); mask-image: linear-gradient(to bottom, transparent, black 16px); } .mx_SpacePanel > .mx_AutoHideScrollbar.mx_IndicatorScrollbar_bottomOverflow { -webkit-mask-image: linear-gradient( to top, transparent, rgb(255, 255, 255, 30%) 4px, rgb(255, 255, 255, 55%) 8px, rgb(255, 255, 255, 75%) 12px, black 16px ); mask-image: linear-gradient( to top, transparent, rgb(255, 255, 255, 30%) 4px, rgb(255, 255, 255, 55%) 8px, rgb(255, 255, 255, 75%) 12px, black 16px ); } .mx_SpacePanel > .mx_AutoHideScrollbar.mx_IndicatorScrollbar_topOverflow.mx_IndicatorScrollbar_bottomOverflow { /* This stacks two gradients on top of one another, which lets us have a fixed pixel offset from both top and bottom for the colour stops. Note the top fade is much smaller because the spaces start close to the top, so otherwise a large gradient suddenly appears when you scroll down. */ -webkit-mask-image: linear-gradient(to bottom, transparent, black 16px), linear-gradient( to top, transparent, rgb(255, 255, 255, 30%) 4px, rgb(255, 255, 255, 55%) 8px, rgb(255, 255, 255, 75%) 12px, black 16px ); mask-image: linear-gradient(to bottom, transparent, black 16px), linear-gradient( to top, transparent, rgb(255, 255, 255, 30%) 4px, rgb(255, 255, 255, 55%) 8px, rgb(255, 255, 255, 75%) 12px, black 16px ); -webkit-mask-position: 0% 0%, 0% 100%; mask-position: 0% 0%, 0% 100%; -webkit-mask-size: calc(100% - 10px) 50%, calc(100% - 10px) 50%; mask-size: calc(100% - 10px) 50%, calc(100% - 10px) 50%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; } .mx_SpacePanel_contextMenu { max-width: 360px; } .mx_SpacePanel_contextMenu .mx_SpacePanel_contextMenu_header { margin: 12px 16px 12px; font-weight: var(--cpd-font-weight-semibold); font-size: 0.9375rem; line-height: 1.125rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .mx_SpacePanel_contextMenu .mx_SpacePanel_contextMenu_separatorLabel { color: #edf3ff; color: var(--tertiary-content, #edf3ff); font-size: 0.625rem; line-height: 0.75rem; font-weight: var(--cpd-font-weight-semibold); } .mx_SpacePanel_sharePublicSpace { margin: 0; } .mx_SpacePanel_Tooltip_KeyboardShortcut kbd { font-family: inherit; text-transform: capitalize; } } @layer app-web{ /* Copyright 2025 Element Creations Ltd. SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial Please see LICENSE files in the repository root for full details. */ .mx_SpacePillButton { position: relative; padding: 16px 32px 16px 72px; width: 432px; -webkit-box-sizing: border-box; box-sizing: border-box; border-radius: 8px; border: 1px solid #e7e7e7; font-size: 1.0625rem; font-weight: var(--cpd-font-weight-semibold); margin: 20px 0; } .mx_SpacePillButton > div { margin-top: 4px; font-weight: normal; font-size: 0.9375rem; color: #edf3ff; color: var(--secondary-content, #edf3ff); } .mx_SpacePillButton svg { position: absolute; content: ""; width: 28px; height: 28px; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); left: 22px; color: #edf3ff; color: var(--tertiary-content, #edf3ff); } .mx_SpacePillButton:hover { border-color: #2e80de; border-color: var(--cpd-color-bg-action-primary-rest); } .mx_SpacePillButton:hover svg { color: var(--cpd-color-icon-primary); } .mx_SpacePillButton:hover > span { color: var(--timeline-text-color); } } @layer app-web{ /* Copyright 2024 New Vector Ltd. Copyright 2021 The Matrix.org Foundation C.I.C. SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial Please see LICENSE files in the repository root for full details. */ .mx_SpaceRoomView { --innerWidth: 428px; overflow-y: auto; -webkit-box-flex: 1; -ms-flex: 1; flex: 1; } .mx_SpaceRoomView .mx_MainSplit > div:first-child { padding: 80px 60px; -webkit-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1; max-height: 100%; overflow-y: auto; } .mx_SpaceRoomView .mx_MainSplit > div:first-child h1 { margin: 0; font-size: 1.5rem; font-weight: var(--cpd-font-weight-semibold); color: var(--timeline-text-color); width: -webkit-max-content; width: -moz-max-content; width: max-content; } .mx_SpaceRoomView .mx_MainSplit > div:first-child .mx_SpaceRoomView_description { font-size: 0.9375rem; color: #edf3ff; color: var(--secondary-content, #edf3ff); margin-top: 12px; margin-bottom: 24px; max-width: var(--innerWidth); } .mx_SpaceRoomView .mx_MainSplit > div:first-child .mx_AddExistingToSpace { max-width: var(--innerWidth); } .mx_SpaceRoomView .mx_MainSplit > div:first-child .mx_AddExistingToSpace .mx_AddExistingToSpace_content { height: calc(100vh - 360px); max-height: 400px; } .mx_SpaceRoomView .mx_MainSplit > div:first-child .mx_SpaceRoomView_buttons { display: block; margin-top: 44px; width: var(--innerWidth); text-align: right; /* button alignment right */ } .mx_SpaceRoomView .mx_MainSplit > div:first-child .mx_SpaceRoomView_buttons .mx_AccessibleButton_hasKind { padding: 8px 22px; margin-left: 16px; } .mx_SpaceRoomView .mx_MainSplit > div:first-child .mx_SpaceRoomView_buttons input.mx_AccessibleButton { border: none; /* override default styles */ } .mx_SpaceRoomView .mx_MainSplit > div:first-child .mx_Field { max-width: var(--innerWidth); } .mx_SpaceRoomView .mx_MainSplit > div:first-child .mx_Field + .mx_Field { margin-top: 28px; } .mx_SpaceRoomView .mx_MainSplit > div:first-child .mx_SpaceRoomView_errorText { font-weight: var(--cpd-font-weight-semibold); font-size: 0.75rem; line-height: 0.9375rem; color: #ff5b55; color: var(--alert, #ff5b55); margin-bottom: 28px; } .mx_SpaceRoomView .mx_MainSplit > div:first-child .mx_AccessibleButton_disabled { cursor: not-allowed; } .mx_SpaceRoomView .mx_SpaceRoomView_landing { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; min-width: 0; } .mx_SpaceRoomView .mx_SpaceRoomView_landing .mx_SpaceRoomView_landing_header { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } .mx_SpaceRoomView .mx_SpaceRoomView_landing .mx_SpaceRoomView_landing_header .mx_BaseAvatar { width: 80px; } .mx_SpaceRoomView .mx_SpaceRoomView_landing .mx_SpaceRoomView_landing_name { margin: 24px 0 16px; font-size: 0.9375rem; color: #edf3ff; color: var(--secondary-content, #edf3ff); } .mx_SpaceRoomView .mx_SpaceRoomView_landing .mx_SpaceRoomView_landing_name > span { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-flow: column; flex-flow: column; gap: 12px 0; } .mx_SpaceRoomView .mx_SpaceRoomView_landing .mx_SpaceRoomView_landing_name > span h1 { display: inline-block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; width: 100%; } .mx_SpaceRoomView .mx_SpaceRoomView_landing .mx_SpaceRoomView_landing_name .mx_SpaceRoomView_landing_inviter .mx_BaseAvatar { margin-right: 4px; vertical-align: middle; } .mx_SpaceRoomView .mx_SpaceRoomView_landing .mx_SpaceRoomView_landing_infoBar { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; gap: 12px; -ms-flex-wrap: wrap; flex-wrap: wrap; line-height: 1.5rem; } .mx_SpaceRoomView .mx_SpaceRoomView_landing .mx_SpaceRoomView_landing_infoBar .mx_SpaceRoomView_landing_infoBar_interactive { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 12px 12px; } .mx_SpaceRoomView .mx_SpaceRoomView_landing .mx_SpaceRoomView_landing_infoBar .mx_SpaceRoomView_landing_infoBar_interactive .mx_FacePile { display: inline-block; cursor: pointer; /* For enhanced visibility under contrast control */ outline: 1px solid transparent; } .mx_SpaceRoomView .mx_SpaceRoomView_landing .mx_SpaceRoomView_landing_infoBar .mx_SpaceRoomView_landing_infoBar_interactive .mx_SpaceRoomView_landing_inviteButton, .mx_SpaceRoomView .mx_SpaceRoomView_landing .mx_SpaceRoomView_landing_infoBar .mx_SpaceRoomView_landing_infoBar_interactive .mx_SpaceRoomView_landing_settingsButton { position: relative; } .mx_SpaceRoomView .mx_SpaceRoomView_landing .mx_SpaceRoomView_landing_infoBar .mx_SpaceRoomView_landing_infoBar_interactive .mx_SpaceRoomView_landing_inviteButton svg, .mx_SpaceRoomView .mx_SpaceRoomView_landing .mx_SpaceRoomView_landing_infoBar .mx_SpaceRoomView_landing_infoBar_interactive .mx_SpaceRoomView_landing_settingsButton svg { position: absolute; } .mx_SpaceRoomView .mx_SpaceRoomView_landing .mx_SpaceRoomView_landing_infoBar .mx_SpaceRoomView_landing_infoBar_interactive .mx_SpaceRoomView_landing_inviteButton { padding: 4px 18px 4px 40px; height: -webkit-min-content; height: -moz-min-content; height: min-content; } .mx_SpaceRoomView .mx_SpaceRoomView_landing .mx_SpaceRoomView_landing_infoBar .mx_SpaceRoomView_landing_infoBar_interactive .mx_SpaceRoomView_landing_inviteButton svg { left: 8px; height: 16px; width: 16px; color: var(--cpd-color-icon-on-solid-primary); } .mx_SpaceRoomView .mx_SpaceRoomView_landing .mx_SpaceRoomView_landing_infoBar .mx_SpaceRoomView_landing_infoBar_interactive .mx_SpaceRoomView_landing_settingsButton { width: 24px; height: 24px; } .mx_SpaceRoomView .mx_SpaceRoomView_landing .mx_SpaceRoomView_landing_infoBar .mx_SpaceRoomView_landing_infoBar_interactive .mx_SpaceRoomView_landing_settingsButton svg { left: 0; top: 0; height: 24px; width: 24px; color: #edf3ff; color: var(--tertiary-content, #edf3ff); } .mx_SpaceRoomView .mx_SpaceRoomView_landing .mx_SpaceRoomView_landing_topic { font-size: 0.9375rem; margin-top: 12px; margin-bottom: 16px; white-space: pre-wrap; word-wrap: break-word; } .mx_SpaceRoomView .mx_SpaceRoomView_landing .mx_SearchBox { margin: 0 0 20px; -webkit-box-flex: 0; -ms-flex: 0; flex: 0; } .mx_SpaceRoomView .mx_SpaceRoomView_inviteTeammates .mx_SpaceRoomView_inviteTeammates_buttons { color: #edf3ff; color: var(--secondary-content, #edf3ff); margin-top: 28px; } .mx_SpaceRoomView .mx_SpaceRoomView_inviteTeammates .mx_SpaceRoomView_inviteTeammates_buttons .mx_AccessibleButton { position: relative; display: inline-block; padding-left: 32px; line-height: 24px; /* to center icons */ color: #ffffff; color: var(--cpd-color-text-primary); font-weight: var(--cpd-font-weight-semibold); text-decoration: underline; } .mx_SpaceRoomView .mx_SpaceRoomView_inviteTeammates .mx_SpaceRoomView_inviteTeammates_buttons .mx_AccessibleButton svg { position: absolute; height: 24px; width: 24px; top: 0; left: 0; color: var(--cpd-color-icon-primary); } .mx_SpaceRoomView .mx_SpaceRoomView_inviteTeammates .mx_SpaceRoomView_inviteTeammates_buttons .mx_AccessibleButton + .mx_AccessibleButton { margin-left: 32px; } } @layer app-web{ /* Copyright 2024 New Vector Ltd. Copyright 2022 The Matrix.org Foundation C.I.C. SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial Please see LICENSE files in the repository root for full details. */ .mx_SplashPage { position: relative; height: 100%; } .mx_SplashPage::before { content: ""; display: block; position: absolute; z-index: -1; opacity: 0.6; background-image: radial-gradient( 53.85% 66.75% at 87.55% 0%, hsl(250deg, 76%, 71%, 0.261) 0%, hsl(250deg, 100%, 88%, 0) 100% ), radial-gradient(41.93% 41.93% at 0% 0%, hsl(222deg, 29%, 20%, 0.28) 0%, hsl(250deg, 100%, 88%, 0) 100%), radial-gradient(100% 100% at 0% 0%, hsl(250deg, 100%, 88%, 0.174) 0%, hsl(0deg, 100%, 86%, 0) 100%), radial-gradient(106.35% 96.26% at 100% 0%, hsl(250deg, 100%, 88%, 0.4) 0%, hsl(167deg, 76%, 82%, 0) 100%); /* blur to reduce color banding issues due to alpha-blending multiple gradients */ -webkit-filter: blur(8px); filter: blur(8px); inset: -9px; -webkit-mask: /* mask to dither resulting combined gradient */ url(../../img/noise.8322d5a.png), /* gradient to apply different amounts of dithering to different parts of the gradient */ linear-gradient( to bottom, /* 10% dithering at the top */ rgb(0, 0, 0, 0.9) 20%, /* 80% dithering at the bottom */ rgb(0, 0, 0, 0.2) 100% ); -webkit-mask: /* mask to dither resulting combined gradient */ url(../../img/noise.8322d5a.png), /* gradient to apply different amounts of dithering to different parts of the gradient */ linear-gradient( to bottom, /* 10% dithering at the top */ rgb(0, 0, 0, 0.9) 20%, /* 80% dithering at the bottom */ rgb(0, 0, 0, 0.2) 100% ); mask: /* mask to dither resulting combined gradient */ url(../../img/noise.8322d5a.png), /* gradient to apply different amounts of dithering to different parts of the gradient */ linear-gradient( to bottom, /* 10% dithering at the top */ rgb(0, 0, 0, 0.9) 20%, /* 80% dithering at the bottom */ rgb(0, 0, 0, 0.2) 100% ); mask: /* mask to dither resulting combined gradient */ url(../../img/noise.8322d5a.png), /* gradient to apply different amounts of dithering to different parts of the gradient */ linear-gradient( to bottom, /* 10% dithering at the top */ rgb(0, 0, 0, 0.9) 20%, /* 80% dithering at the bottom */ rgb(0, 0, 0, 0.2) 100% ); } } @layer app-web{ /* Copyright 2024 New Vector Ltd. Copyright 2021 The Matrix.org Foundation C.I.C. Copyright 2019 New Vector Ltd Copyright 2017 Travis Ralston SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial Please see LICENSE files in the repository root for full details. */ .mx_TabbedView { margin: 0; padding: 0 0 0 var(--cpd-space-8x); display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; inset: 0; margin-top: 8px; } .mx_TabbedView_tabsOnLeft { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; position: absolute; } .mx_TabbedView_tabsOnLeft .mx_TabbedView_tabLabels { width: 220px; max-width: 220px; position: fixed; margin: 0; /* Remove the default value */ padding: 0; /* Remove the default value */ } .mx_TabbedView_tabsOnLeft .mx_TabbedView_tabPanel { margin-left: 280px; /* 220px sidebar + 60px padding */ -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } .mx_TabbedView_tabsOnLeft .mx_TabbedView_tabLabel:hover, .mx_TabbedView_tabsOnLeft .mx_TabbedView_tabLabel_active { color: #edf3ff; } .mx_TabbedView_tabsOnLeft .mx_TabbedView_tabLabel_active { background-color: var(--cpd-color-bg-subtle-secondary); /* For enhanced visibility under contrast control */ outline: 1px solid transparent; } .mx_TabbedView_tabsOnTop { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } .mx_TabbedView_tabsOnTop .mx_TabbedView_tabLabels { display: -webkit-box; display: -ms-flexbox; display: flex; margin-bottom: 8px; } .mx_TabbedView_tabsOnTop .mx_TabbedView_tabLabel { padding-left: 0px; padding-right: 52px; } .mx_TabbedView_tabsOnTop .mx_TabbedView_tabLabel .mx_TabbedView_tabLabel_text { font-size: 15px; color: #edf3ff; color: var(--tertiary-content, #edf3ff); } .mx_TabbedView_tabsOnTop .mx_TabbedView_tabPanel { -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; } .mx_TabbedView_tabsOnTop .mx_TabbedView_tabLabel_active { color: #0dbd8b; color: var(--accent-color, #0dbd8b); } .mx_TabbedView_tabsOnTop .mx_TabbedView_tabLabel_active .mx_TabbedView_tabLabel_text { color: #0dbd8b; color: var(--accent-color, #0dbd8b); } .mx_TabbedView_tabLabels { color: #edf3ff; } .mx_TabbedView_tabLabel { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; vertical-align: text-top; cursor: pointer; padding-block: var(--cpd-space-2x); padding-inline: var(--cpd-space-3x) var(--cpd-space-4x); -webkit-box-sizing: border-box; box-sizing: border-box; min-block-size: 40px; min-inline-size: 40px; border-radius: 24px; font: var(--cpd-font-body-md-medium); position: relative; -webkit-transition: color 0.1s, background-color 0.1s; transition: color 0.1s, background-color 0.1s; } .mx_TabbedView_tabLabel svg { width: 20px; height: 20px; margin-right: var(--cpd-space-3x); } .mx_TabbedView_tabLabel_text { vertical-align: middle; } .mx_TabbedView_tabPanel { -webkit-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1; display: -webkit-box; display: -ms-flexbox; display: flex; min-height: 0; /* firefox */ } .mx_TabbedView_tabPanelContent { -webkit-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1; overflow: auto; min-height: 0; /* firefox */ } /* Hide the labels on tabs, showing only the icons, on narrow viewports. */ @media (max-width: 1024px) { .mx_TabbedView_tabsOnLeft.mx_TabbedView_responsive .mx_TabbedView_tabLabel_text { display: none; } .mx_TabbedView_tabsOnLeft.mx_TabbedView_responsive .mx_TabbedView_tabPanel { margin-left: 72px; /* 40px sidebar + 32px padding */ } .mx_TabbedView_tabsOnLeft.mx_TabbedView_responsive .mx_TabbedView_tabLabels { width: auto; } .mx_TabbedView_tabsOnLeft.mx_TabbedView_responsive .mx_TabbedView_tabLabel { padding-inline: 0 0; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .mx_TabbedView_tabsOnLeft.mx_TabbedView_responsive .mx_TabbedView_tabLabel svg { margin-right: 0; } } } @layer app-web{ /* * Copyright 2024 New Vector Ltd. * Copyright 2024 The Matrix.org Foundation C.I.C. * * SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial * Please see LICENSE files in the repository root for full details. */ .mx_ThreadsActivityCentre_container { display: -webkit-box; display: -ms-flexbox; display: flex; } .mx_ThreadsActivityCentreButton { /* !important override compound */ border-radius: 8px !important; margin: 18px auto auto auto; } .mx_ThreadsActivityCentreButton.expanded { /** * override compound default background color when hovered * should disappear when the space panel will be migrated to compound */ background-color: transparent !important; /* align with settings icon */ margin-left: 21px; margin-right: 8px; width: 100%; /** * modify internal css of the compound component * dirty but we need to add the `Threads` label into the indicator icon button **/ } .mx_ThreadsActivityCentreButton.expanded > div { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .mx_ThreadsActivityCentreButton.expanded > div::before { inline-size: 8px; block-size: 8px; left: 17px; } .mx_ThreadsActivityCentreButton.expanded .mx_ThreadsActivityCentreButton_Icon { /* align with settings label */ margin-right: 14px; /* required to set the icon width when into a flex container */ width: 24px; -ms-flex-negative: 0; flex-shrink: 0; } .mx_ThreadsActivityCentreButton.expanded .mx_ThreadsActivityCentreButton_Text { /* !important override compound */ color: #edf3ff !important; color: var(--secondary-content, #edf3ff) !important; } .mx_ThreadsActivityCentreButton:not(.expanded):hover, .mx_ThreadsActivityCentreButton:not(.expanded):hover .mx_ThreadsActivityCentreButton_Icon { /* !important override compound */ background-color: #6f7882 !important; background-color: var(--quaternary-content, #6f7882) !important; fill: var(--timeline-text-color); } .mx_ThreadsActivityCentreButton .mx_ThreadsActivityCentreButton_Icon { fill: #edf3ff; fill: var(--secondary-content, #edf3ff); } .mx_ThreadsActivityCentre_rows { overflow-y: scroll; /* Let some space at the top and the bottom of the pop-up */ max-height: calc(100vh - 200px); } .mx_ThreadsActivityCentre_rows .mx_ThreadsActivityCentreRow { height: 48px; /* Make the label of the MenuItem stay on one line and truncate with ellipsis if needed */ /* Hide the notification badge on hover — compound's `nav-hint ~ *` rule would normally * do this, but the app-web CSS layer overrides compound-web regardless of specificity. */ } .mx_ThreadsActivityCentre_rows .mx_ThreadsActivityCentreRow > span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; /* Arbitrary size, keep the TAC as the wanted width */ width: 202px; } .mx_ThreadsActivityCentre_rows .mx_ThreadsActivityCentreRow:hover .mx_NotificationBadge { display: none; } .mx_ThreadsActivityCentre_emptyCaption { padding-left: 16px; padding-right: 16px; font-size: 13px; } } @layer app-web{ /* Copyright 2026 Element Creations Ltd. Copyright 2024 New Vector Ltd. Copyright 2019-2021 The Matrix.org Foundation C.I.C. SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial Please see LICENSE files in the repository root for full details. */ .mx_ToastContainer { position: absolute; top: 12px; left: 62px; z-index: 101; display: grid; grid-template-rows: 1fr 28px 8px; } .mx_ToastContainer.mx_ToastContainer_stacked::before { content: ""; margin: 0 var(--cpd-space-1-5x); grid-row: 2 / -1; grid-column: 1; background-color: #21262c; background-color: var(--system, #21262c); -webkit-box-shadow: 0px 4px 20px rgb(0, 0, 0, 0.5); box-shadow: 0px 4px 20px rgb(0, 0, 0, 0.5); border-radius: var(--cpd-space-6x); } .mx_ToastContainer .mx_Toast_toast { grid-row: 1 / 3; grid-column: 1; background-color: var(--cpd-color-bg-canvas-default); color: var(--timeline-text-color); -webkit-box-shadow: 0px 4px 24px rgb(0, 0, 0, 0.1); box-shadow: 0px 4px 24px rgb(0, 0, 0, 0.1); border: var(--cpd-border-width-1) solid var(--cpd-color-border-interactive-secondary); border-radius: var(--cpd-space-3x); overflow: hidden; display: grid; grid-template-columns: 20px 1fr auto; grid-column-gap: var(--cpd-space-2x); -webkit-column-gap: var(--cpd-space-2x); -moz-column-gap: var(--cpd-space-2x); column-gap: var(--cpd-space-2x); grid-row-gap: 4px; row-gap: 4px; -webkit-box-align: center; -ms-flex-align: center; align-items: center; padding: calc(var(--cpd-space-5x) - var(--cpd-border-width-1)); } .mx_ToastContainer .mx_Toast_toast.mx_Toast_hasIcon svg { width: 20px; height: 20px; grid-column: 1; } .mx_ToastContainer .mx_Toast_toast.mx_Toast_hasIcon .mx_Toast_title { grid-column: 2; } .mx_ToastContainer .mx_Toast_toast.mx_Toast_hasIcon .mx_Toast_closebutton { grid-column: 3; } .mx_ToastContainer .mx_Toast_toast:not(.mx_Toast_hasIcon) .mx_Toast_title { grid-column: 1 / -1; } .mx_ToastContainer .mx_Toast_toast .mx_Toast_title { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-column-gap: var(--cpd-space-2x); -moz-column-gap: var(--cpd-space-2x); column-gap: var(--cpd-space-2x); width: 100%; -webkit-box-sizing: border-box; box-sizing: border-box; } .mx_ToastContainer .mx_Toast_toast .mx_Toast_title h2 { margin: 0; font: var(--cpd-font-body-lg-semibold); display: inline; width: auto; } .mx_ToastContainer .mx_Toast_toast .mx_Toast_body { grid-column: 1 / -1; grid-row: 2; } .mx_ToastContainer .mx_Toast_toast .mx_Toast_buttons { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; -webkit-column-gap: var(--cpd-space-2x); -moz-column-gap: var(--cpd-space-2x); column-gap: var(--cpd-space-2x); } .mx_ToastContainer .mx_Toast_toast .mx_Toast_buttons .mx_AccessibleButton { min-width: 96px; -webkit-box-sizing: border-box; box-sizing: border-box; } .mx_ToastContainer .mx_Toast_toast .mx_Toast_description { max-width: 272px; overflow: hidden; text-overflow: ellipsis; margin: var(--cpd-space-1x) 0 11px 0; color: #edf3ff; color: var(--secondary-content, #edf3ff); font: var(--cpd-font-body-sm-regular); } .mx_ToastContainer .mx_Toast_toast .mx_Toast_description a { text-decoration: none; } .mx_ToastContainer .mx_Toast_toast .mx_Toast_deviceID { font-size: 0.625rem; } } @layer app-web{ /* Copyright 2024 New Vector Ltd. Copyright 2015, 2016 , 2021 The Matrix.org Foundation C.I.C. SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial Please see LICENSE files in the repository root for full details. */ .mx_UploadBar { /* line up with the shield area in the composer */ padding: 5px 21px 0; position: relative; display: grid; grid-template: "icon filename cancel" auto "progress progress progress" auto / -webkit-min-content auto -webkit-min-content; grid-template: "icon filename cancel" auto "progress progress progress" auto / min-content auto min-content; grid-gap: var(--cpd-space-1-5x); gap: var(--cpd-space-1-5x); } .mx_UploadBar > svg { grid-area: icon; height: 18px; width: 18px; color: #a1b2d1; align-self: center; } .mx_UploadBar .mx_UploadBar_filename { grid-area: filename; color: #a1b2d1; position: relative; font-size: 0.9375rem; vertical-align: middle; } .mx_UploadBar .mx_UploadBar_cancel { grid-area: cancel; height: 16px; width: 16px; color: #a1b2d1; align-self: center; } .mx_UploadBar .mx_ProgressBar { grid-area: progress; width: 100%; } .mx_ThreadView .mx_UploadBar { padding-left: 0; } } @layer app-web{ /* Copyright 2024 New Vector Ltd. Copyright 2015, 2016 OpenMarket Ltd SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial Please see LICENSE files in the repository root for full details. */ .mx_ViewSource pre { font-size: 0.75rem; padding: 0.5em 1em; word-wrap: break-word; white-space: pre-wrap; overflow-wrap: anywhere; } .mx_ViewSource .mx_ViewSource_header { border-bottom: 1px solid #6f7882; border-bottom: 1px solid var(--quinary-content, #6f7882); padding-bottom: 12px; margin-bottom: 12px; font-family: monospace; } .mx_ViewSource .mx_ViewSource_header .mx_CopyableText { word-break: break-all; } .mx_ViewSource .mx_ViewSource_heading { font-size: 1.0625rem; font-weight: 400; color: var(--timeline-text-color); margin-top: 12px; } .mx_ViewSource .mx_ViewSource_details { margin-top: 12px; } .mx_ViewSource .mx_CopyableText_border { -webkit-box-sizing: border-box; box-sizing: border-box; width: 100%; } } @layer app-web{ /* Copyright 2024 New Vector Ltd. Copyright 2020 The Matrix.org Foundation C.I.C. SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial Please see LICENSE files in the repository root for full details. */ .mx_CompleteSecurity_header { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .mx_E2EIcon.mx_CompleteSecurity_headerIcon { width: 24px; height: 24px; margin-right: 4px; display: inline-block; } .mx_E2EIcon.mx_CompleteSecurity_heroIcon { width: 128px; height: 128px; margin: 0 auto; } .mx_CompleteSecurity_skip { width: 20px; height: 20px; padding: var(--cpd-space-1x); border-radius: 14px; background-color: var(--cpd-color-bg-subtle-secondary); } .mx_CompleteSecurity_skip:hover { background-color: var(--cpd-color-bg-subtle-primary); } .mx_CompleteSecurity_skip svg { width: inherit; height: inherit; vertical-align: top; color: var(--cpd-color-icon-secondary); } .mx_CompleteSecurity_skip{ position: absolute; right: 24px; } .mx_CompleteSecurity_body { font-size: 0.9375rem; } .mx_CompleteSecurity_waiting { color: #edf3ff; color: var(--tertiary-content, #edf3ff); } .mx_CompleteSecurity_actionRow { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; margin-top: 1.75rem; } .mx_CompleteSecurity_actionRow .mx_AccessibleButton { -webkit-margin-start: 18px; margin-inline-start: 18px; } .mx_CompleteSecurity_actionRow .mx_AccessibleButton.warning { color: #ff5b55; color: var(--alert, #ff5b55); } } @layer app-web{ /* Copyright 2024 New Vector Ltd. Copyright 2019-2023 The Matrix.org Foundation C.I.C. SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial Please see LICENSE files in the repository root for full details. */ .mx_ConfirmSessionLockTheftView { width: 100%; height: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .mx_ConfirmSessionLockTheftView_body { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; max-width: 400px; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } } @layer app-web{ /* Copyright 2019-2024 New Vector Ltd. Copyright 2015, 2016 OpenMarket Ltd SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial Please see LICENSE files in the repository root for full details. */ .mx_Login_submit { width: 100%; margin-top: 24px; margin-bottom: 24px; } .mx_Login_loader { display: inline; position: relative; top: 2px; left: 8px; } .mx_Login_loader .mx_Spinner { display: inline; } .mx_Login_loader .mx_Spinner img { width: 16px; height: 16px; } .mx_Login_error { color: #ff5b55; color: var(--alert, #ff5b55); font-weight: bold; text-align: center; margin-top: 12px; margin-bottom: 12px; } .mx_Login_error.mx_Login_serverError { text-align: left; font-weight: normal; } .mx_Login_error.mx_Login_serverError.mx_Login_serverErrorNonFatal { color: #ff8d13; /* Only used here */ } .mx_Login_type_container { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; color: var(--timeline-text-color); } .mx_Login_type_container .mx_Field { margin: 0; } .mx_Login_type_label { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; } .mx_Login_underlinedServerName { width: -webkit-max-content; width: -moz-max-content; width: max-content; border-bottom: 1px dashed #0dbd8b; border-bottom: 1px dashed var(--accent-color, #0dbd8b); } div.mx_AccessibleButton_kind_link.mx_Login_forgot { display: block; margin-top: 24px; } div.mx_AccessibleButton_kind_link.mx_Login_forgot.mx_AccessibleButton_disabled { cursor: not-allowed; } .mx_Login_spinner { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -ms-flex-line-pack: center; align-content: center; padding: 14px; } .mx_Login_fullWidthButton { width: 100%; margin-bottom: 16px; } } @layer app-web{ /* Copyright 2024 New Vector Ltd. Copyright 2015-2024 The Matrix.org Foundation C.I.C. SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial Please see LICENSE files in the repository root for full details. */ .mx_LoginSplashView_migrationProgress { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; width: 100%; height: 100%; } .mx_LoginSplashView_migrationProgress .mx_ProgressBar { height: 8px; width: 600px; border-radius: 8px; } .mx_LoginSplashView_migrationProgress .mx_ProgressBar::-moz-progress-bar { border-radius: 8px; } .mx_LoginSplashView_migrationProgress .mx_ProgressBar::-webkit-progress-bar, .mx_LoginSplashView_migrationProgress .mx_ProgressBar::-webkit-progress-value { border-radius: 8px; } .mx_LoginSplashView_splashButtons { text-align: center; width: 100%; position: absolute; bottom: 30px; } .mx_LoginSplashView_syncError { color: #ffffff; background-color: #df2a8b; /* Only used here */ border-radius: 5px; display: table; padding: 30px; position: absolute; top: 100px; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); } } @layer app-web{ /* Copyright 2024 New Vector Ltd. SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial Please see LICENSE files in the repository root for full details. */ .mx_MobileRegister_body { padding: 32px; height: 100vh; overflow-y: auto; -webkit-box-sizing: border-box; box-sizing: border-box; } } @layer app-web{ /* Copyright 2024 New Vector Ltd. Copyright 2022 The Matrix.org Foundation C.I.C. SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial Please see LICENSE files in the repository root for full details. */ .mx_Register_mainContent { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1; min-height: 270px; } .mx_Register_mainContent p { font: var(--cpd-font-body-md-regular); color: var(--timeline-text-color); } .mx_Register_mainContent p.secondary { color: var(--timeline-text-secondary-color); } .mx_Register_mainContent > img:first-child { margin-bottom: 16px; width: -webkit-max-content; width: -moz-max-content; width: max-content; } .mx_Register_mainContent .mx_Login_submit { margin-bottom: 0; } .mx_Register_footerActions { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; padding-top: 16px; margin-top: 16px; border-top: 1px solid rgb(141, 151, 165, 0.2); } .mx_Register_footerActions > * { -ms-flex-preferred-size: content; flex-basis: content; } } @layer app-web{ /* Copyright 2024 New Vector Ltd. Copyright 2023 The Matrix.org Foundation C.I.C. SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial Please see LICENSE files in the repository root for full details. */ .mx_SessionLockStolenView h1 { font-weight: var(--cpd-font-weight-semibold); font-size: 2rem; text-align: center; } .mx_SessionLockStolenView h2 { margin: 0; font-weight: 500; font-size: 1.5rem; text-align: center; } } @layer app-web{ /* Copyright 2024 New Vector Ltd. Copyright 2021 The Matrix.org Foundation C.I.C. SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial Please see LICENSE files in the repository root for full details. */ .mx_SetupEncryptionBody { width: 600px; } } @layer app-web{ /* PLX Midnight font — Plus Jakarta Sans. @font-face declarations for the PLX primary typeface. Files live in res/fonts/PlusJakartaSans/ and are copied verbatim into the build output by webpack's asset handling (referenced via absolute /res/ URLs, matching the Twemoji pattern in _fonts.pcss). The family is wired as the primary font in _plx-telegram.pcss (--plx-font) with a system-ui fallback. */ @font-face { font-family: "Plus Jakarta Sans"; font-style: normal; font-weight: 400; font-display: swap; src: url(../../fonts/PlusJakartaSans/plus-jakarta-sans-latin-400-normal.9eb2a7e.woff2) format("woff2"); } @font-face { font-family: "Plus Jakarta Sans"; font-style: normal; font-weight: 500; font-display: swap; src: url(../../fonts/PlusJakartaSans/plus-jakarta-sans-latin-500-normal.c313031.woff2) format("woff2"); } @font-face { font-family: "Plus Jakarta Sans"; font-style: normal; font-weight: 600; font-display: swap; src: url(../../fonts/PlusJakartaSans/plus-jakarta-sans-latin-600-normal.7720d76.woff2) format("woff2"); } @font-face { font-family: "Plus Jakarta Sans"; font-style: normal; font-weight: 700; font-display: swap; src: url(../../fonts/PlusJakartaSans/plus-jakarta-sans-latin-700-normal.7cfa130.woff2) format("woff2"); } @font-face { font-family: "Plus Jakarta Sans"; font-style: normal; font-weight: 800; font-display: swap; src: url(../../fonts/PlusJakartaSans/plus-jakarta-sans-latin-800-normal.94c5685.woff2) format("woff2"); } } @layer app-web{ /* PLX Midnight theme overlay. Applied as the last import in the dark theme so it sits at the top of the `app-web` cascade layer and overrides Element's defaults. It maps the PLX "Midnight" design tokens (deep navy on TARDIS blue) onto Element's component selectors and compound design tokens. Robustness notes: - We override the runtime CSS custom properties (--cpd-color-*) rather than SCSS build vars, so this is a single self-contained file with no build-graph coupling. - All colours/radii are sourced from the Midnight design handoff. */ :root { /* ---- PLX / Midnight dark token block ---- */ --plx-accent: #2e80de; /* TARDIS blue — links, active, badges */ --plx-accent-hover: #3a8fe6; /* accent-bright */ --plx-accent-deep: #175fb0; --plx-accent-soft: rgba(46, 128, 222, 0.16); --plx-bg: #0e1621; /* chat area background */ --plx-bg-secondary: #0e1621; /* sidebar / room list bg */ --plx-panel: #17212b; /* sidebar, headers, composer */ --plx-panel-2: #202b36; /* cards, popovers, hover surfaces */ --plx-bubble-in: #182533; /* incoming message bubble */ --plx-bubble-out: #2e80de; /* outgoing (solid fallback; gradient below) */ --plx-bubble-out-grad: linear-gradient(135deg, #2e80de, #175fb0); --plx-bubble-out-meta: rgba(255, 255, 255, 0.65); --plx-text: #ffffff; --plx-text-secondary: #7f91a4; /* dim */ --plx-meta: #7f91a4; --plx-border: rgba(255, 255, 255, 0.06); --plx-divider: rgba(255, 255, 255, 0.06); --plx-row-hover: rgba(255, 255, 255, 0.05); --plx-row-active: var(--plx-accent-soft); --plx-placeholder: #7f91a4; --plx-shadow: rgba(0, 0, 0, 0.45); --plx-online: #4ee07a; --plx-danger: #e0454b; --plx-success: #3ecf8e; --plx-read-tick: #8fd0ff; /* geometry */ --plx-radius-bubble: 16px; --plx-radius-bubble-tight: 4px; --plx-radius-input: 13px; --plx-radius-button: 13px; --plx-radius-card: 14px; --plx-avatar: 52px; --plx-row-height: 60px; --plx-header-height: 60px; --plx-font: "Plus Jakarta Sans", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", sans-serif; --plx-ease-layer: 300ms cubic-bezier(0.33, 1, 0.68, 1); --plx-ease-slide: 300ms cubic-bezier(0.25, 1, 0.5, 1); --plx-ease-select: 200ms ease-out; } /* ---- Accent: flip Element green -> Midnight TARDIS blue ---- Element's accent derives from the compound "green" token ramp and the text-action / primary tokens. Remap them to the PLX blue so buttons, links, active states, the sync spinner and selection all become blue. */ :root, .cpd-theme-dark, [class*="cpd-theme"] { /* Primary typeface: Plus Jakarta Sans propagates app-wide via the Compound sans token (drives body, Compound components, dialogs, …). */ --cpd-font-family-sans: "Plus Jakarta Sans", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", "Twemoji", "Apple Color Emoji", "Segoe UI Emoji", Arial, sans-serif; --cpd-color-text-action-accent: var(--plx-accent); --cpd-color-bg-action-primary-rest: var(--plx-accent); --cpd-color-bg-action-primary-hovered: var(--plx-accent-hover); --cpd-color-bg-action-primary-pressed: var(--plx-accent-deep); --cpd-color-text-primary: var(--plx-text); /* The green ramp is what Element uses for accents and the OWN bubble fill. Repoint the mid ramp to blue so own bubbles + accents follow Midnight. */ --cpd-color-green-300: var(--plx-bubble-out); --cpd-color-green-400: var(--plx-accent); --cpd-color-green-500: var(--plx-accent); --cpd-color-green-600: var(--plx-accent-hover); --cpd-color-green-700: var(--plx-accent-deep); --cpd-color-green-900: #e9f2fb; --cpd-color-green-1100: #e9f2fb; /* incoming bubble = neutral panel */ --cpd-color-gray-300: var(--plx-bubble-in); /* success / online (E2EE active, approve) */ --cpd-color-text-success-primary: var(--plx-success); --cpd-color-icon-success-primary: var(--plx-success); /* danger (sign out, deny) */ --cpd-color-text-critical-primary: var(--plx-danger); } /* ---- App + room background ---- */ .mx_MatrixChat_wrapper, .mx_RoomView, .mx_MainSplit { background-color: #0e1621; background-color: var(--plx-bg); } .mx_LeftPanel, .mx_SpacePanel, .mx_RoomList { background-color: #17212b; background-color: var(--plx-panel); } /* ---- PLX-012: room-list user bar (avatar -> Profile / Settings / Sign out) ---- Midnight chip that hosts the restored UserMenu at the top of the room list. */ .mx_RoomListPanel_userBar { border-bottom: 1px solid rgba(255, 255, 255, 0.06); border-bottom: 1px solid var(--plx-border); background: #17212b; background: var(--plx-panel); } .mx_RoomListPanel_userBar .mx_UserMenu button { border-radius: 10px; padding: 4px 6px; -webkit-transition: background-color 200ms ease-out; transition: background-color 200ms ease-out; -webkit-transition: background-color var(--plx-ease-select); transition: background-color var(--plx-ease-select); } .mx_RoomListPanel_userBar .mx_UserMenu button:hover { background-color: rgba(255, 255, 255, 0.05); background-color: var(--plx-row-hover); } .mx_RoomListPanel_userBar .mx_BaseAvatar, .mx_RoomListPanel_userBar .mx_UserMenu [class*="avatar"] { border-radius: 50%; } /* ---- Typography ---- _common.pcss applies `font: var(--cpd-font-body-md-regular) !important` to body, a Compound composite shorthand that hard-codes Inter as the family and resets font-family. We re-assert the PLX family with !important AFTER it so Plus Jakarta Sans wins app-wide. */ body, .mx_MatrixChat { font-family: "Plus Jakarta Sans", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", sans-serif !important; font-family: var(--plx-font) !important; } /* ================= MESSAGE BUBBLES ================= */ /* Telegram-style Midnight bubbles. Bubble layout is now the app default (see Settings.tsx: layout -> Layout.Bubble). Spec: - outgoing = linear-gradient(135deg,#2E80DE,#175FB0), white text - incoming = #182533, white text - 16px radius, with a 4px "tail" corner on the bottom edge nearest the sender (Telegram look). */ .mx_EventTile[data-layout="bubble"] { --cornerRadius: var(--plx-radius-bubble); --gutterSize: 9px; --maxWidth: 74%; } /* incoming bubble fill + text */ .mx_EventTile[data-layout="bubble"][data-self="false"] .mx_EventTile_line { background: #182533 !important; background: var(--plx-bubble-in) !important; color: #ffffff; color: var(--plx-text); } /* outgoing bubble fill + text (Midnight gradient) PLX-005: scope the gradient to OWN *message* bubbles ONLY. Several non-message tiles also carry data-self="true" (sender is us) but must NOT get the gradient: - .mx_EventTile_info -> "X invited Y" membership/state tiles - .mx_EventTile_bubbleContainer -> "Encryption enabled" crypto/state event tiles - .mx_EventTile_noSender -> sender-less state tiles - tiles whose body is .mx_DecryptionFailureBody -> "can't decrypt" / verify nags Exclude all of them. */ .mx_EventTile[data-layout="bubble"][data-self="true"]:not(.mx_EventTile_info):not(.mx_EventTile_bubbleContainer):not(.mx_EventTile_noSender) .mx_EventTile_line:not(:has(.mx_DecryptionFailureBody)) { background: linear-gradient(135deg, #2e80de, #175fb0) !important; background: var(--plx-bubble-out-grad) !important; color: #ffffff; } /* keep media containers inside outgoing bubbles on the gradient */ .mx_EventTile[data-layout="bubble"][data-self="true"]:not(.mx_EventTile_info):not(.mx_EventTile_bubbleContainer):not(.mx_EventTile_noSender) .mx_MediaBody { background: linear-gradient(135deg, #2e80de, #175fb0) !important; background: var(--plx-bubble-out-grad) !important; } /* PLX-005: state / membership / info / crypto / decryption-failure tiles = neutral, no bubble fill, regardless of who sent them. */ .mx_EventTile[data-layout="bubble"].mx_EventTile_info .mx_EventTile_line, .mx_EventTile[data-layout="bubble"].mx_EventTile_info .mx_EventTile_line .mx_MediaBody, .mx_EventTile[data-layout="bubble"].mx_EventTile_bubbleContainer .mx_EventTile_line, .mx_EventTile[data-layout="bubble"].mx_EventTile_noSender .mx_EventTile_line, .mx_EventTile[data-layout="bubble"] .mx_EventTile_line:has(.mx_DecryptionFailureBody) { background: transparent !important; color: #7f91a4 !important; color: var(--plx-text-secondary) !important; } .mx_EventTile[data-layout="bubble"].mx_EventTile_info .mx_TextualEvent, .mx_EventTile[data-layout="bubble"].mx_EventTile_info .mx_EventTile_content, .mx_EventTile[data-layout="bubble"] .mx_DecryptionFailureBody { color: #7f91a4 !important; color: var(--plx-text-secondary) !important; } .mx_EventTile[data-layout="bubble"][data-self="true"] .mx_EventTile_line .mx_MTextBody, .mx_EventTile[data-layout="bubble"][data-self="true"] .mx_EventTile_line .mx_EventTile_body, .mx_EventTile[data-layout="bubble"][data-self="true"] .mx_EventTile_line a { color: #ffffff; } /* code / quotes inside an outgoing bubble need a translucent dark panel so they stay legible on the blue gradient */ .mx_EventTile[data-layout="bubble"][data-self="true"] .mx_EventTile_line pre, .mx_EventTile[data-layout="bubble"][data-self="true"] .mx_EventTile_line code { background: rgba(0, 0, 0, 0.22); color: #eaf3ff; } .mx_EventTile[data-layout="bubble"][data-self="true"] .mx_EventTile_line blockquote { border-inline-start-color: rgba(255, 255, 255, 0.5); color: rgba(255, 255, 255, 0.85); } /* timestamp / meta inside outgoing bubble */ .mx_EventTile[data-layout="bubble"][data-self="true"] .mx_MessageTimestamp { color: rgba(255, 255, 255, 0.65); color: var(--plx-bubble-out-meta); } /* reply-quote tile sitting inside an outgoing bubble -> readable on gradient */ .mx_EventTile[data-layout="bubble"][data-self="true"] .mx_ReplyChain { border-inline-start-color: rgba(255, 255, 255, 0.55); } .mx_EventTile[data-layout="bubble"][data-self="true"] .mx_ReplyChain .mx_EventTile_body, .mx_EventTile[data-layout="bubble"][data-self="true"] .mx_ReplyChain .mx_DisambiguatedProfile_displayName { color: rgba(255, 255, 255, 0.92) !important; } /* sender name colour (group chats) -> light tint instead of the green ramp */ .mx_EventTile[data-layout="bubble"] .mx_DisambiguatedProfile > span, .mx_EventTile[data-layout="bubble"] .mx_DisambiguatedProfile_displayName { color: #cfe2f6 !important; font-weight: 600; } /* ---- Tail corners (Telegram look) ---- The "tail" is a 4px corner on the bottom edge nearest the sender. The base bubble CSS rounds the far-bottom corner to --cornerRadius; we tighten the near-bottom corner. Continuation tiles also tighten the leading top corner so stacked bubbles read as one group. */ .mx_EventTile[data-layout="bubble"][data-self="false"].mx_EventTile_lastInSection .mx_EventTile_line { border-bottom-left-radius: 4px !important; border-bottom-left-radius: var(--plx-radius-bubble-tight) !important; } .mx_EventTile[data-layout="bubble"][data-self="true"].mx_EventTile_lastInSection .mx_EventTile_line { border-bottom-right-radius: 4px !important; border-bottom-right-radius: var(--plx-radius-bubble-tight) !important; } /* grouped-message leading corner (continuation) -> 4px */ .mx_EventTile[data-layout="bubble"].mx_EventTile_continuation[data-self="false"] .mx_EventTile_line { border-top-left-radius: 4px; border-top-left-radius: var(--plx-radius-bubble-tight); } .mx_EventTile[data-layout="bubble"].mx_EventTile_continuation[data-self="true"] .mx_EventTile_line { border-top-right-radius: 4px; border-top-right-radius: var(--plx-radius-bubble-tight); } /* ================= COMPOSER ================= */ /* Floating rounded panel with a soft lift. */ .mx_MessageComposer { background: transparent; border-top: none; } .mx_MessageComposer_wrapper { background: #17212b; background: var(--plx-panel); border: 1px solid rgba(255, 255, 255, 0.06); border: 1px solid var(--plx-border); border-radius: 18px; -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.45); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.45); -webkit-box-shadow: 0 1px 2px var(--plx-shadow); box-shadow: 0 1px 2px var(--plx-shadow); margin: 0 12px 12px; padding: 2px 6px; } .mx_BasicMessageComposer_input { color: #ffffff; color: var(--plx-text); } .mx_MessageComposer_input::-webkit-input-placeholder { color: #7f91a4; color: var(--plx-placeholder); } .mx_MessageComposer_input::-moz-placeholder { color: #7f91a4; color: var(--plx-placeholder); } .mx_MessageComposer_input:-ms-input-placeholder { color: #7f91a4; color: var(--plx-placeholder); } .mx_MessageComposer_input::-ms-input-placeholder { color: #7f91a4; color: var(--plx-placeholder); } .mx_MessageComposer_input::placeholder, .mx_BasicMessageComposer_input[contenteditable]:empty::before { color: #7f91a4; color: var(--plx-placeholder); } /* send button -> circular accent */ .mx_MessageComposer_sendMessage { background: linear-gradient(135deg, #2e80de, #175fb0); background: var(--plx-bubble-out-grad); border-radius: 50%; } /* ================= ROOM HEADER ================= */ .mx_RoomHeader { height: 60px; height: var(--plx-header-height); background: #17212b; background: var(--plx-panel); border-bottom: 1px solid rgba(255, 255, 255, 0.06); border-bottom: 1px solid var(--plx-border); } .mx_RoomHeader_heading { font-weight: 600; } /* ================= CHAT LIST ROWS ================= */ .mx_RoomTile { border-radius: 10px; -webkit-transition: background-color 200ms ease-out; transition: background-color 200ms ease-out; -webkit-transition: background-color var(--plx-ease-select); transition: background-color var(--plx-ease-select); } .mx_RoomTile:hover { background-color: rgba(255, 255, 255, 0.05) !important; background-color: var(--plx-row-hover) !important; } .mx_RoomTile.mx_RoomTile_selected, .mx_RoomTile[aria-selected="true"] { background-color: rgba(46, 128, 222, 0.16) !important; background-color: var(--plx-row-active) !important; } .mx_RoomTile.mx_RoomTile_selected .mx_RoomTile_title, .mx_RoomTile[aria-selected="true"] .mx_RoomTile_title { color: #2e80de; color: var(--plx-accent); } /* unread badge -> Midnight accent pill */ .mx_NotificationBadge { background-color: #2e80de; background-color: var(--plx-accent); border-radius: 10px; min-width: 20px; height: 20px; font-weight: 600; } /* avatars stay circular */ .mx_RoomTile .mx_BaseAvatar { border-radius: 50%; } /* ================= BUTTONS / RADII ================= */ .mx_AccessibleButton.mx_AccessibleButton_kind_primary, .mx_Dialog_primary { background-color: #2e80de; background-color: var(--plx-accent); border-radius: 13px; border-radius: var(--plx-radius-button); } .mx_AccessibleButton.mx_AccessibleButton_kind_primary:hover, .mx_Dialog_primary:hover { background-color: #3a8fe6; background-color: var(--plx-accent-hover); } /* links */ a, .mx_AccessibleButton_kind_link, .mx_AccessibleButton_kind_link_inline { color: #2e80de; color: var(--plx-accent); } /* ================= AUTH (login) SCREEN ================= */ /* WC-04 note: a tempting "dead duplicate" cleanup here (dropping .mx_AuthPage from this background-color group, since L751 re-sets it with !important) was trialled and REVERTED — the visual-regression harness caught a small but real diff on the 390px mobile auth card (mean-diff 0.0076 > tolerance). Kept as-is to honour "identical look". See playwright/plx-visual/THEME-CLEANUP-PLAN.md. */ .mx_AuthBody, .mx_AuthPage { background-color: #0e1621; background-color: var(--plx-bg); } .mx_AuthBody { color: #ffffff; color: var(--plx-text); } .mx_Login_submit, .mx_AuthBody .mx_AccessibleButton_kind_primary { background: linear-gradient(135deg, #2e80de, #175fb0); background: var(--plx-bubble-out-grad); border-radius: 13px; border-radius: var(--plx-radius-button); } /* ================= 2FA / OTP CODE ENTRY ================= Element renders single-field code entry (MSISDN OTP, recovery-key, and the token-style auth field). Style these toward the Midnight OTP-cell spec: tall rounded fields (radius 13) with an accent border on focus. Where a real 6-cell OTP exists it inherits the same accent/radius tokens. */ .mx_InteractiveAuthEntryComponents_msisdnEntry, .mx_AuthBody input[type="text"].mx_Field_input, .mx_RegistrationToken input, input[name="token"], input[autocomplete="one-time-code"] { border-radius: 13px; border-radius: var(--plx-radius-input); border: 1px solid rgba(255, 255, 255, 0.06); border: 1px solid var(--plx-border); background: #202b36; background: var(--plx-panel-2); color: #ffffff; color: var(--plx-text); letter-spacing: 0.18em; text-align: center; } .mx_InteractiveAuthEntryComponents_msisdnEntry { width: 7em; height: 56px; font-size: 200%; font-weight: 700; } .mx_InteractiveAuthEntryComponents_msisdnEntry:focus, .mx_AuthBody input[type="text"].mx_Field_input:focus, input[autocomplete="one-time-code"]:focus, input[name="token"]:focus { border: 2px solid #2e80de !important; border: 2px solid var(--plx-accent) !important; outline: none; -webkit-box-shadow: 0 0 0 3px rgba(46, 128, 222, 0.16); box-shadow: 0 0 0 3px rgba(46, 128, 222, 0.16); -webkit-box-shadow: 0 0 0 3px var(--plx-accent-soft); box-shadow: 0 0 0 3px var(--plx-accent-soft); } /* Midnight OTP-cell scaffold: if a 6-cell digit group is rendered, each cell is 46x56 with radius 13 and an accent border when active. */ .mx_PlxOtpCell, .cpd-otp-input, [data-otp-cell] { width: 46px; height: 56px; border-radius: 13px; border-radius: var(--plx-radius-input); border: 1px solid rgba(255, 255, 255, 0.06); border: 1px solid var(--plx-border); background: #202b36; background: var(--plx-panel-2); color: #ffffff; color: var(--plx-text); font-size: 24px; font-weight: 700; text-align: center; } .mx_PlxOtpCell:focus, .mx_PlxOtpCell[data-active="true"], [data-otp-cell][data-active="true"] { border: 2px solid #2e80de; border: 2px solid var(--plx-accent); -webkit-box-shadow: 0 0 0 3px rgba(46, 128, 222, 0.16); box-shadow: 0 0 0 3px rgba(46, 128, 222, 0.16); -webkit-box-shadow: 0 0 0 3px var(--plx-accent-soft); box-shadow: 0 0 0 3px var(--plx-accent-soft); } /* ================= REGISTRATION / PENDING-APPROVAL ================= The post-registration screen waits for admin approval. Render a pulsing concentric-ring "awaiting approval" indicator around the clock/spinner. */ .mx_AuthBody .mx_Spinner, .mx_Registration_waitingForApproval .mx_Spinner { position: relative; } /* generic pulsing-rings helper: add class mx_PlxPulseRings (or data-plx-pending) to the pending wrapper to get concentric pulses. */ .mx_PlxPulseRings, [data-plx-pending="true"] { position: relative; } .mx_PlxPulseRings::before, .mx_PlxPulseRings::after, [data-plx-pending="true"]::before, [data-plx-pending="true"]::after { content: ""; position: absolute; inset: 50%; width: 72px; height: 72px; margin: -36px 0 0 -36px; border-radius: 50%; border: 2px solid #2e80de; border: 2px solid var(--plx-accent); opacity: 0; -webkit-transform: scale(0.5); transform: scale(0.5); -webkit-animation: plx-pulse-ring 2.4s cubic-bezier(0.2, 0.6, 0.3, 1) infinite; animation: plx-pulse-ring 2.4s cubic-bezier(0.2, 0.6, 0.3, 1) infinite; pointer-events: none; } .mx_PlxPulseRings::after, [data-plx-pending="true"]::after { -webkit-animation-delay: 1.2s; animation-delay: 1.2s; } @-webkit-keyframes plx-pulse-ring { 0% { opacity: 0.55; -webkit-transform: scale(0.5); transform: scale(0.5); } 70% { opacity: 0; -webkit-transform: scale(1.6); transform: scale(1.6); } 100% { opacity: 0; -webkit-transform: scale(1.6); transform: scale(1.6); } } @keyframes plx-pulse-ring { 0% { opacity: 0.55; -webkit-transform: scale(0.5); transform: scale(0.5); } 70% { opacity: 0; -webkit-transform: scale(1.6); transform: scale(1.6); } 100% { opacity: 0; -webkit-transform: scale(1.6); transform: scale(1.6); } } /* ================= CONVERSATION HEADER + CALL OVERLAY ================= Midnight surfaces, accent call buttons, danger end-call, and an "encrypted" indicator in the success green. The call-button accent / danger colours flow through the remapped $accent and $alert (-> --plx-danger) tokens; we add the surface + encrypted-indicator + pulsing-avatar polish here. */ /* call surfaces -> Midnight panel */ .mx_LegacyCallView, .mx_CallView, .mx_LegacyCallView_content, .mx_LegacyCallView_pip { background-color: #17212b !important; background-color: var(--plx-panel) !important; } /* radial accent backdrop behind the call content */ .mx_LegacyCallView_content { background-image: radial-gradient( circle at 50% 38%, rgba(46, 128, 222, 0.16), transparent 60% ); background-image: radial-gradient( circle at 50% 38%, var(--plx-accent-soft), transparent 60% ); } /* end-call / hangup -> danger circle */ .mx_LegacyCallViewButtons_button_hangup, .mx_CallViewButtons_button_hangup { background-color: #e0454b !important; background-color: var(--plx-danger) !important; } /* "Encrypted call" indicator -> success green with lock */ .mx_LegacyCallViewHeader_secure, .mx_LegacyCallView_status_e2e, .mx_CallView_secure, .mx_E2EIcon_verified { color: #3ecf8e !important; color: var(--plx-success) !important; } /* pulsing ring around the call avatar while connecting */ .mx_LegacyCallView_avatarsContainer .mx_BaseAvatar { position: relative; } .mx_LegacyCallView_avatarsContainer .mx_BaseAvatar::after { content: ""; position: absolute; inset: -8px; border-radius: 50%; border: 2px solid #2e80de; border: 2px solid var(--plx-accent); opacity: 0; -webkit-animation: plx-pulse-ring 2.2s ease-out infinite; animation: plx-pulse-ring 2.2s ease-out infinite; pointer-events: none; } /* conversation header call buttons -> accent on hover */ .mx_RoomHeader .mx_RoomHeader_button:hover { color: #2e80de; color: var(--plx-accent); } /* ================= TRANSITIONS (Midnight easing) ================= */ .mx_RightPanel, .mx_LeftPanel_outerWrapper { -webkit-transition: width 300ms cubic-bezier(0.33, 1, 0.68, 1), -webkit-transform 300ms cubic-bezier(0.33, 1, 0.68, 1); transition: width 300ms cubic-bezier(0.33, 1, 0.68, 1), -webkit-transform 300ms cubic-bezier(0.33, 1, 0.68, 1); transition: transform 300ms cubic-bezier(0.33, 1, 0.68, 1), width 300ms cubic-bezier(0.33, 1, 0.68, 1); transition: transform 300ms cubic-bezier(0.33, 1, 0.68, 1), width 300ms cubic-bezier(0.33, 1, 0.68, 1), -webkit-transform 300ms cubic-bezier(0.33, 1, 0.68, 1); -webkit-transition: width var(--plx-ease-layer), -webkit-transform var(--plx-ease-layer); transition: width var(--plx-ease-layer), -webkit-transform var(--plx-ease-layer); transition: transform var(--plx-ease-layer), width var(--plx-ease-layer); transition: transform var(--plx-ease-layer), width var(--plx-ease-layer), -webkit-transform var(--plx-ease-layer); } /* ===================================================================== PLX MIDNIGHT — Wave #27 contained fixes (PLX-003/004/006/007/008/009/010/011) ===================================================================== */ /* ---------- PLX-003: E2EE banner -> ONE small centered pill ---------- The "This room is end-to-end encrypted" banner ships as .mx_EventTileBubble.mx_cryptoEvent (author-supplied classes, stable). Element renders it as a large full-width blue bar. Collapse it into a compact centered pill: lock + text, accent-soft bg, rounded. */ .mx_EventTileBubble.mx_cryptoEvent, .mx_EventTile_bubbleContainer .mx_EventTileBubble { margin: 10px auto !important; width: -webkit-fit-content !important; width: -moz-fit-content !important; width: fit-content !important; max-width: 90% !important; min-width: 0 !important; padding: 6px 14px !important; display: -webkit-inline-box !important; display: -ms-inline-flexbox !important; display: inline-flex !important; -webkit-box-align: center !important; -ms-flex-align: center !important; align-items: center !important; gap: 8px !important; background: rgba(46, 128, 222, 0.16) !important; background: var(--plx-accent-soft) !important; border: 1px solid rgba(255, 255, 255, 0.06) !important; border: 1px solid var(--plx-border) !important; border-radius: 999px !important; -webkit-box-shadow: none !important; box-shadow: none !important; grid-template-columns: none !important; } .mx_EventTile_bubbleContainer .mx_EventTileBubble > *, .mx_EventTile_bubbleContainer .mx_EventTileBubble [class*="title"] { grid-column: auto !important; grid-row: auto !important; margin: 0 !important; font-size: 12px !important; font-weight: 500 !important; color: #7f91a4 !important; color: var(--plx-text-secondary) !important; } .mx_EventTile_bubbleContainer .mx_EventTileBubble svg { position: static !important; width: 14px !important; height: 14px !important; margin: 0 !important; color: #2e80de !important; color: var(--plx-accent) !important; } .mx_EventTile_bubbleContainer .mx_EventTileBubble [class*="subtitle"] { display: none !important; } /* tighten the inner grid the shared component uses */ .mx_EventTileBubble.mx_cryptoEvent > * { grid-column: auto !important; grid-row: auto !important; margin: 0 !important; } .mx_EventTileBubble.mx_cryptoEvent svg { position: static !important; width: 14px !important; height: 14px !important; margin: 0 !important; color: #2e80de !important; color: var(--plx-accent) !important; } .mx_EventTileBubble.mx_cryptoEvent [class*="title"], .mx_EventTileBubble.mx_cryptoEvent [class*="subtitle"] { font-size: 12px !important; font-weight: 500 !important; color: #7f91a4 !important; color: var(--plx-text-secondary) !important; line-height: 1.2 !important; } /* hide the verbose subtitle / "enable encryption" prompt inside the pill */ .mx_EventTileBubble.mx_cryptoEvent [class*="subtitle"] { display: none !important; } /* PLX-003 (part 2): the timeline "Encryption enabled" m.room.encryption state tile ships as a normal EventTile bubble (.mx_EventTile_bubbleContainer) wrapping an inner .mx_EventTileBubble pill. Previously it leaked the outgoing gradient as a full-width bar (removed above). Here we make the wrapping line fully transparent/borderless and centre it, so ONLY the inner compact pill is visible. */ .mx_EventTile.mx_EventTile_bubbleContainer .mx_EventTile_line { margin: 4px auto !important; width: 100% !important; padding: 0 !important; background: transparent !important; border: none !important; border-radius: 0 !important; -webkit-box-shadow: none !important; box-shadow: none !important; display: -webkit-box !important; display: -ms-flexbox !important; display: flex !important; -webkit-box-pack: center !important; -ms-flex-pack: center !important; justify-content: center !important; } .mx_EventTile.mx_EventTile_bubbleContainer .mx_EventTile_line .mx_EventTile_body, .mx_EventTile.mx_EventTile_bubbleContainer .mx_EventTile_line .mx_TextualEvent { font-size: 12px !important; font-weight: 500 !important; color: #7f91a4 !important; color: var(--plx-text-secondary) !important; } /* ---------- PLX-004: suppress verify-device timeline nag ---------- Seamless TOFU: never prompt the user to verify this device for historical messages. The toast + settings paths are handled in code; this is a CSS backstop for any timeline-level "verify this device" banner. */ .mx_RoomView_body .mx_GenericEventListSummary[data-expanded="false"] .mx_SetupEncryptionBody, .mx_RoomStatusBar_unsentBadge.mx_RoomStatusBar_verifyDevice, [data-testid="cryptoEvent-verify-prompt"], .mx_EventTileBubble.mx_cryptoEvent.mx_cryptoEvent_verify { display: none !important; } /* ---------- PLX-006: chat rows (name + preview + badge) ---------- The shared room-list cell renders room name + message preview + notification decoration. By default the room name uses --cpd-color-text-secondary (dim). Force the room name WHITE and keep the preview dim. data-testid="room-name" is a stable hook; the hashed module classes are scoped to this build. */ [data-testid="room-name"] { color: #ffffff !important; color: var(--plx-text) !important; font-weight: 600 !important; } /* message preview (the dim subtitle under the name) stays dim + ellipsised */ [data-testid="room-name"] + div, [data-testid="room-name"] ~ .mx_Text, [data-testid="room-name"] ~ [class*="ellipsis"] { color: #7f91a4 !important; color: var(--plx-text-secondary) !important; font-size: 13px !important; } /* active/selected row -> accent-soft bg + accent name (the package marks the selected container; we reinforce the Midnight look) */ [class*="_selected"] [data-testid="room-name"], [aria-selected="true"] [data-testid="room-name"] { color: #2e80de !important; color: var(--plx-accent) !important; } [class*="_selected"] [class*="_container"], [aria-selected="true"] [class*="_container"] { background-color: rgba(46, 128, 222, 0.16) !important; background-color: var(--plx-row-active) !important; } /* ---------- PLX-007: folder pills (All / Unread / Direct / Groups) ---------- The pills ship as Compound chips inside [data-testid="primary-filters"]. The filter set + labels are remapped in code/i18n. Here we Midnight-style the active pill: accent-soft bg + accent text. */ [data-testid="primary-filters"] [role="option"][aria-selected="true"], [data-testid="primary-filters"] [aria-pressed="true"], [data-testid="primary-filters"] .mx_ChatFilter_selected, [data-testid="primary-filters"] [class*="_selected"] { background-color: rgba(46, 128, 222, 0.16) !important; background-color: var(--plx-accent-soft) !important; color: #2e80de !important; color: var(--plx-accent) !important; border-color: transparent !important; } [data-testid="primary-filters"] [role="option"], [data-testid="primary-filters"] button { border-radius: 999px !important; } /* ---------- PLX-008: home empty pane (clean Midnight empty-state) ---------- Neutralise Element's flat blue HomePage cards into Midnight panel surfaces. The "Explore Public Rooms" card is removed in HomePage.tsx. */ .mx_HomePage_plx .mx_HomePage_default_wrapper { max-width: 420px; margin: 0 auto; text-align: center; gap: 16px; } .mx_HomePage_plx .mx_HomePage_default_buttons .mx_AccessibleButton { background: #202b36 !important; background: var(--plx-panel-2) !important; color: #ffffff !important; color: var(--plx-text) !important; border: 1px solid rgba(255, 255, 255, 0.06) !important; border: 1px solid var(--plx-border) !important; border-radius: 14px !important; border-radius: var(--plx-radius-card) !important; -webkit-box-shadow: none !important; box-shadow: none !important; } .mx_HomePage_plx .mx_HomePage_default_buttons .mx_AccessibleButton:hover { background: rgba(255, 255, 255, 0.05) !important; background: var(--plx-row-hover) !important; border-color: #2e80de !important; border-color: var(--plx-accent) !important; } .mx_HomePage_plx .mx_HomePage_default_buttons .mx_AccessibleButton::before { background-color: #2e80de !important; background-color: var(--plx-accent) !important; } /* ---------- PLX-009: sign-in button -> WHITE 700 on the gradient ---------- */ .mx_Login_submit, .mx_AuthBody .mx_AccessibleButton_kind_primary, .mx_AuthPage .mx_AccessibleButton_kind_primary, .mx_AuthBody form [type="submit"] { background: linear-gradient(135deg, #2e80de, #175fb0) !important; background: var(--plx-bubble-out-grad) !important; color: #ffffff !important; font-weight: 700 !important; border: none !important; } .mx_Login_submit *, .mx_AuthBody .mx_AccessibleButton_kind_primary * { color: #ffffff !important; } /* ---------- PLX-009b: Welcome-card primary button ("Sign in") -> WHITE label ---------- BUGFIX: the Welcome page renders