/* Copyright 2020 The Matrix.org Foundation C.I.C. Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0 Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License. */ /* * 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. * * That means that, slightly confusingly, `$font-10px` is only *actually* 10px at the default font size: at a base * `font-size` of 15, it is actually 15px. */ /* Path from root SCSS file (such as `light.pcss`) to `res` dir in the source tree */ /* This value is overridden by external themes in `element-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. */ /* the 'src' links are relative to the bundle.css, which is in a subdirectory. */ /* Inter unexpectedly contains various codepoints which collide with emoji, even when variation-16 is applied to request the emoji variant. From eyeballing the emoji picker, these are: 20e3, 23cf, 24c2, 25a0-25c1, 2665, 2764, 2b06, 2b1c. Therefore we define a unicode-range to load which excludes the glyphs (to avoid having to maintain a fork of Inter). */ @font-face { font-family: "Inter"; font-style: normal; font-weight: 400; font-display: swap; unicode-range: U+0000-20e2, U+20e4-23ce, U+23d0-24c1, U+24c3-259f, U+25c2-2664, U+2666-2763, U+2765-2b05, U+2b07-2b1b, U+2b1d-10FFFF; src: url(../../fonts/Inter/Inter-Regular.bed7225.woff2) format("woff2"), url(../../fonts/Inter/Inter-Regular.bf50ebd.woff) format("woff"); } @font-face { font-family: "Inter"; font-style: italic; font-weight: 400; font-display: swap; unicode-range: U+0000-20e2, U+20e4-23ce, U+23d0-24c1, U+24c3-259f, U+25c2-2664, U+2666-2763, U+2765-2b05, U+2b07-2b1b, U+2b1d-10FFFF; src: url(../../fonts/Inter/Inter-Italic.faebbae.woff2) format("woff2"), url(../../fonts/Inter/Inter-Italic.5d145f0.woff) format("woff"); } @font-face { font-family: "Inter"; font-style: normal; font-weight: 500; font-display: swap; unicode-range: U+0000-20e2, U+20e4-23ce, U+23d0-24c1, U+24c3-259f, U+25c2-2664, U+2666-2763, U+2765-2b05, U+2b07-2b1b, U+2b1d-10FFFF; src: url(../../fonts/Inter/Inter-Medium.6be58ea.woff2) format("woff2"), url(../../fonts/Inter/Inter-Medium.3a921b8.woff) format("woff"); } @font-face { font-family: "Inter"; font-style: italic; font-weight: 500; font-display: swap; unicode-range: U+0000-20e2, U+20e4-23ce, U+23d0-24c1, U+24c3-259f, U+25c2-2664, U+2666-2763, U+2765-2b05, U+2b07-2b1b, U+2b1d-10FFFF; src: url(../../fonts/Inter/Inter-MediumItalic.2bbf830.woff2) format("woff2"), url(../../fonts/Inter/Inter-MediumItalic.b247e87.woff) format("woff"); } @font-face { font-family: "Inter"; font-style: normal; font-weight: 600; font-display: swap; unicode-range: U+0000-20e2, U+20e4-23ce, U+23d0-24c1, U+24c3-259f, U+25c2-2664, U+2666-2763, U+2765-2b05, U+2b07-2b1b, U+2b1d-10FFFF; src: url(../../fonts/Inter/Inter-SemiBold.d5a91eb.woff2) format("woff2"), url(../../fonts/Inter/Inter-SemiBold.14478d3.woff) format("woff"); } @font-face { font-family: "Inter"; font-style: italic; font-weight: 600; font-display: swap; unicode-range: U+0000-20e2, U+20e4-23ce, U+23d0-24c1, U+24c3-259f, U+25c2-2664, U+2666-2763, U+2765-2b05, U+2b07-2b1b, U+2b1d-10FFFF; src: url(../../fonts/Inter/Inter-SemiBoldItalic.17942dd.woff2) format("woff2"), url(../../fonts/Inter/Inter-SemiBoldItalic.72033b9.woff) format("woff"); } @font-face { font-family: "Inter"; font-style: normal; font-weight: 700; font-display: swap; unicode-range: U+0000-20e2, U+20e4-23ce, U+23d0-24c1, U+24c3-259f, U+25c2-2664, U+2666-2763, U+2765-2b05, U+2b07-2b1b, U+2b1d-10FFFF; src: url(../../fonts/Inter/Inter-Bold.7824a90.woff2) format("woff2"), url(../../fonts/Inter/Inter-Bold.c0bf89b.woff) format("woff"); } @font-face { font-family: "Inter"; font-style: italic; font-weight: 700; font-display: swap; unicode-range: U+0000-20e2, U+20e4-23ce, U+23d0-24c1, U+24c3-259f, U+25c2-2664, U+2666-2763, U+2765-2b05, U+2b07-2b1b, U+2b1d-10FFFF; src: url(../../fonts/Inter/Inter-BoldItalic.57f0f97.woff2) format("woff2"), url(../../fonts/Inter/Inter-BoldItalic.e151f4f.woff) format("woff"); } /* latin-ext */ @font-face { font-family: "Inconsolata"; font-style: normal; font-weight: 400; src: local("Inconsolata Regular"), local("Inconsolata-Regular"), url(../../fonts/Inconsolata/QldKNThLqRwH-OJ1UHjlKGlX5qhExfHwNJU.97270d9.woff2) format("woff2"); unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* latin */ @font-face { font-family: "Inconsolata"; font-style: normal; font-weight: 400; font-display: swap; src: local("Inconsolata Regular"), local("Inconsolata-Regular"), url(../../fonts/Inconsolata/QldKNThLqRwH-OJ1UHjlKGlZ5qhExfHw.cb56c56.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* latin-ext */ @font-face { font-family: "Inconsolata"; font-style: normal; font-weight: 700; font-display: swap; src: local("Inconsolata Bold"), local("Inconsolata-Bold"), url(../../fonts/Inconsolata/QldXNThLqRwH-OJ1UHjlKGHiw71n5_zaDpwm80E.ac17e29.woff2) format("woff2"); unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* latin */ @font-face { font-family: "Inconsolata"; font-style: normal; font-weight: 700; font-display: swap; src: local("Inconsolata Bold"), local("Inconsolata-Bold"), url(../../fonts/Inconsolata/QldXNThLqRwH-OJ1UHjlKGHiw71p5_zaDpwm.4e23ceb.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* 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.e79365a.ttf) format("truetype"); } @font-face { font-family: "Nunito"; font-style: normal; font-weight: 600; src: url(../../fonts/Nunito/Nunito-SemiBold.bd83689.ttf) format("truetype"); } @font-face { font-family: "Nunito"; font-style: normal; font-weight: 700; src: url(../../fonts/Nunito/Nunito-Bold.8f8b4d6.ttf) format("truetype"); } /* 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. */ /* We fall through to Twemoji for emoji rather than falling through to native Emoji fonts (if any) to ensure cross-browser consistency */ /* 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 */ /* XXX: workaround for Safari 15.3 linear-gradient bug */ /* This color is not intended for use in the app */ /* Legacy theme backports */ /* ******************** */ /* XXX: Color from dark theme */ /* All of these are from dark theme */ /* ******************** */ /* ******************** */ /* $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 */ /* Slider */ /* See non-legacy _light for variable information */ /* FontSlider colors */ /* Bubble tiles */ /* pinned events indicator */ /* Location sharing */ /* ******************** */ /* ******************** */ /* Voice Broadcast */ /* ******************** */ /* ******************** */ body { color-scheme: light; } /* diff highlight colors */ .hljs-addition { background: #dfd; } .hljs-deletion { background: #fdd; } /* Colors from Figma Compound https://www.figma.com/file/X4XTH9iS2KGJ2wFKDqkyed/Compound?node-id=559%3A741 */ /* XXX: workaround for Safari 15.3 linear-gradient bug */ /* 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 */ /* XXX: workaround for Safari 15.3 linear-gradient bug */ /* This color is not intended for use in the app */ /* Legacy theme backports */ /* ******************** */ /* ******************** */ /* event timestamp */ /* Tabbed views */ /* Buttons */ /* TODO: Verify color */ /* Toggle switch */ /* See non-legacy dark for variable information */ /* Appearance tab colors */ /* Bubble tiles */ /* Location sharing */ /* ******************** */ /* ******************** */ /* Voice Broadcast */ /* ******************** */ /* ******************** */ 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 */ } /* Copyright 2019 The Matrix.org Foundation C.I.C. Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0 Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License. */ /* Colors from Figma Compound https://www.figma.com/file/X4XTH9iS2KGJ2wFKDqkyed/Compound?node-id=559%3A741 */ /* XXX: workaround for Safari 15.3 linear-gradient bug https://github.com/vector-im/element-web/issues/21670 */ /* This color is not intended for use in the app */ /* --accent-color */ /* --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 */ /* --username colors (which use a 0-based index) */ /* --timeline-highlights-color */ /* redirect some variables away from their hardcoded values in the light theme */ /* --eventbubble colors */ /* autogenerated by rethemendex.sh */ /* Copyright 2021 The Matrix.org Foundation C.I.C. Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0 Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License. */ /** * 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; } } /* Copyright 2015, 2016 OpenMarket Ltd Copyright 2017 Vector Creations Ltd Copyright 2017 - 2019 New Vector Ltd Copyright 2019 - 2021 The Matrix.org Foundation C.I.C Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0 Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License. */ /* Copyright 2020 The Matrix.org Foundation C.I.C. Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0 Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License. */ :root { --font-normal: 400; --font-semi-bold: 600; } /* Copyright 2022 The Matrix.org Foundation C.I.C. Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0 Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License. */ /* 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). */ .mapboxgl-map,.maplibregl-map{-webkit-tap-highlight-color:rgb(0 0 0/0);font:12px/20px Helvetica Neue,Arial,Helvetica,sans-serif;overflow:hidden;position:relative} .mapboxgl-canvas,.maplibregl-canvas{left:0;position:absolute;top:0} .mapboxgl-map:-webkit-full-screen, .maplibregl-map:-webkit-full-screen{height:100%;width:100%} .mapboxgl-map:-ms-fullscreen, .maplibregl-map:-ms-fullscreen{height:100%;width:100%} .mapboxgl-map:fullscreen,.maplibregl-map:fullscreen{height:100%;width:100%} .mapboxgl-canvas-container.mapboxgl-interactive,.mapboxgl-ctrl-group button.mapboxgl-ctrl-compass,.maplibregl-canvas-container.maplibregl-interactive,.maplibregl-ctrl-group button.maplibregl-ctrl-compass{cursor:-webkit-grab;cursor:grab;-moz-user-select:none;-webkit-user-select:none;-ms-user-select:none;user-select:none} .mapboxgl-canvas-container.mapboxgl-interactive.mapboxgl-track-pointer,.maplibregl-canvas-container.maplibregl-interactive.maplibregl-track-pointer{cursor:pointer} .mapboxgl-canvas-container.mapboxgl-interactive:active,.mapboxgl-ctrl-group button.mapboxgl-ctrl-compass:active,.maplibregl-canvas-container.maplibregl-interactive:active,.maplibregl-ctrl-group button.maplibregl-ctrl-compass:active{cursor:-webkit-grabbing;cursor:grabbing} .mapboxgl-canvas-container.mapboxgl-touch-zoom-rotate,.mapboxgl-canvas-container.mapboxgl-touch-zoom-rotate .mapboxgl-canvas,.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} .mapboxgl-canvas-container.mapboxgl-touch-drag-pan,.mapboxgl-canvas-container.mapboxgl-touch-drag-pan .mapboxgl-canvas,.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} .mapboxgl-canvas-container.mapboxgl-touch-zoom-rotate.mapboxgl-touch-drag-pan,.mapboxgl-canvas-container.mapboxgl-touch-zoom-rotate.mapboxgl-touch-drag-pan .mapboxgl-canvas,.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} .mapboxgl-ctrl-bottom-left,.mapboxgl-ctrl-bottom-right,.mapboxgl-ctrl-top-left,.mapboxgl-ctrl-top-right,.maplibregl-ctrl-bottom-left,.maplibregl-ctrl-bottom-right,.maplibregl-ctrl-top-left,.maplibregl-ctrl-top-right{pointer-events:none;position:absolute;z-index:2} .mapboxgl-ctrl-top-left,.maplibregl-ctrl-top-left{left:0;top:0} .mapboxgl-ctrl-top-right,.maplibregl-ctrl-top-right{right:0;top:0} .mapboxgl-ctrl-bottom-left,.maplibregl-ctrl-bottom-left{bottom:0;left:0} .mapboxgl-ctrl-bottom-right,.maplibregl-ctrl-bottom-right{bottom:0;right:0} .mapboxgl-ctrl,.maplibregl-ctrl{clear:both;pointer-events:auto;-webkit-transform:translate(0);transform:translate(0)} .mapboxgl-ctrl-top-left .mapboxgl-ctrl,.maplibregl-ctrl-top-left .maplibregl-ctrl{float:left;margin:10px 0 0 10px} .mapboxgl-ctrl-top-right .mapboxgl-ctrl,.maplibregl-ctrl-top-right .maplibregl-ctrl{float:right;margin:10px 10px 0 0} .mapboxgl-ctrl-bottom-left .mapboxgl-ctrl,.maplibregl-ctrl-bottom-left .maplibregl-ctrl{float:left;margin:0 0 10px 10px} .mapboxgl-ctrl-bottom-right .mapboxgl-ctrl,.maplibregl-ctrl-bottom-right .maplibregl-ctrl{float:right;margin:0 10px 10px 0} .mapboxgl-ctrl-group,.maplibregl-ctrl-group{background:#fff;border-radius:4px} .mapboxgl-ctrl-group:not(:empty),.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 (-ms-high-contrast:active){.mapboxgl-ctrl-group:not(:empty),.maplibregl-ctrl-group:not(:empty){-webkit-box-shadow:0 0 0 2px ButtonText;box-shadow:0 0 0 2px ButtonText}} .mapboxgl-ctrl-group button,.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} .mapboxgl-ctrl-group button+button,.maplibregl-ctrl-group button+button{border-top:1px solid #ddd} .mapboxgl-ctrl button .mapboxgl-ctrl-icon,.maplibregl-ctrl button .maplibregl-ctrl-icon{background-position:50%;background-repeat:no-repeat;display:block;height:100%;width:100%} @media (-ms-high-contrast:active){.mapboxgl-ctrl-icon,.maplibregl-ctrl-icon{background-color:transparent}.mapboxgl-ctrl-group button+button,.maplibregl-ctrl-group button+button{border-top:1px solid ButtonText}} .mapboxgl-ctrl button::-moz-focus-inner,.maplibregl-ctrl button::-moz-focus-inner{border:0;padding:0} .mapboxgl-ctrl-attrib-button:focus,.mapboxgl-ctrl-group button:focus,.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} .mapboxgl-ctrl button:disabled,.maplibregl-ctrl button:disabled{cursor:not-allowed} .mapboxgl-ctrl button:disabled .mapboxgl-ctrl-icon,.maplibregl-ctrl button:disabled .maplibregl-ctrl-icon{opacity:.25} .mapboxgl-ctrl button:not(:disabled):hover,.maplibregl-ctrl button:not(:disabled):hover{background-color:rgb(0 0 0/5%)} .mapboxgl-ctrl-group button:focus:focus-visible,.maplibregl-ctrl-group button:focus:focus-visible{-webkit-box-shadow:0 0 2px 2px #0096ff;box-shadow:0 0 2px 2px #0096ff} .mapboxgl-ctrl-group button:focus:not(:focus-visible),.maplibregl-ctrl-group button:focus:not(:focus-visible){-webkit-box-shadow:none;box-shadow:none} .mapboxgl-ctrl-group button:focus:first-child,.maplibregl-ctrl-group button:focus:first-child{border-radius:4px 4px 0 0} .mapboxgl-ctrl-group button:focus:last-child,.maplibregl-ctrl-group button:focus:last-child{border-radius:0 0 4px 4px} .mapboxgl-ctrl-group button:focus:only-child,.maplibregl-ctrl-group button:focus:only-child{border-radius:inherit} .mapboxgl-ctrl button.mapboxgl-ctrl-zoom-out .mapboxgl-ctrl-icon,.maplibregl-ctrl button.maplibregl-ctrl-zoom-out .maplibregl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg width='29' height='29' viewBox='0 0 29 29' xmlns='http://www.w3.org/2000/svg' fill='%23333'%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 13h-9z'/%3E%3C/svg%3E")} .mapboxgl-ctrl button.mapboxgl-ctrl-zoom-in .mapboxgl-ctrl-icon,.maplibregl-ctrl button.maplibregl-ctrl-zoom-in .maplibregl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg width='29' height='29' viewBox='0 0 29 29' xmlns='http://www.w3.org/2000/svg' fill='%23333'%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.5z'/%3E%3C/svg%3E")} @media (-ms-high-contrast:active){.mapboxgl-ctrl button.mapboxgl-ctrl-zoom-out .mapboxgl-ctrl-icon,.maplibregl-ctrl button.maplibregl-ctrl-zoom-out .maplibregl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg width='29' height='29' viewBox='0 0 29 29' xmlns='http://www.w3.org/2000/svg' fill='%23fff'%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 13h-9z'/%3E%3C/svg%3E")}.mapboxgl-ctrl button.mapboxgl-ctrl-zoom-in .mapboxgl-ctrl-icon,.maplibregl-ctrl button.maplibregl-ctrl-zoom-in .maplibregl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg width='29' height='29' viewBox='0 0 29 29' xmlns='http://www.w3.org/2000/svg' fill='%23fff'%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.5z'/%3E%3C/svg%3E")}} @media (-ms-high-contrast:black-on-white){.mapboxgl-ctrl button.mapboxgl-ctrl-zoom-out .mapboxgl-ctrl-icon,.maplibregl-ctrl button.maplibregl-ctrl-zoom-out .maplibregl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg width='29' height='29' viewBox='0 0 29 29' xmlns='http://www.w3.org/2000/svg'%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 13h-9z'/%3E%3C/svg%3E")}.mapboxgl-ctrl button.mapboxgl-ctrl-zoom-in .mapboxgl-ctrl-icon,.maplibregl-ctrl button.maplibregl-ctrl-zoom-in .maplibregl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg width='29' height='29' viewBox='0 0 29 29' xmlns='http://www.w3.org/2000/svg'%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.5z'/%3E%3C/svg%3E")}} .mapboxgl-ctrl button.mapboxgl-ctrl-fullscreen .mapboxgl-ctrl-icon,.maplibregl-ctrl button.maplibregl-ctrl-fullscreen .maplibregl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg width='29' height='29' viewBox='0 0 29 29' xmlns='http://www.w3.org/2000/svg' fill='%23333'%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-3h1zM6 16l1.5 3 5.5-4 1 1-4 5.5 3 1.5v1H7.5C5.75 24 5 23.25 5 21.5V16h1zm7-11v1l-3 1.5 4 5.5-1 1-5.5-4L6 13H5V7.5C5 5.75 5.75 5 7.5 5H13zm11 2.5c0-1.75-.75-2.5-2.5-2.5H16v1l3 1.5-4 5.5 1 1 5.5-4 1.5 3h1V7.5z'/%3E%3C/svg%3E")} .mapboxgl-ctrl button.mapboxgl-ctrl-shrink .mapboxgl-ctrl-icon,.maplibregl-ctrl button.maplibregl-ctrl-shrink .maplibregl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg width='29' height='29' viewBox='0 0 29 29' xmlns='http://www.w3.org/2000/svg'%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-1h-5.5zM13 18.5c0-1.75-.75-2.5-2.5-2.5H5v1l3 1.5L4 24l1 1 5.5-4 1.5 3h1v-5.5zm3-8c0 1.75.75 2.5 2.5 2.5H24v-1l-3-1.5L25 5l-1-1-5.5 4L17 5h-1v5.5zM10.5 13c1.75 0 2.5-.75 2.5-2.5V5h-1l-1.5 3L5 4 4 5l4 5.5L5 12v1h5.5z'/%3E%3C/svg%3E")} @media (-ms-high-contrast:active){.mapboxgl-ctrl button.mapboxgl-ctrl-fullscreen .mapboxgl-ctrl-icon,.maplibregl-ctrl button.maplibregl-ctrl-fullscreen .maplibregl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg width='29' height='29' viewBox='0 0 29 29' xmlns='http://www.w3.org/2000/svg' fill='%23fff'%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-3h1zM6 16l1.5 3 5.5-4 1 1-4 5.5 3 1.5v1H7.5C5.75 24 5 23.25 5 21.5V16h1zm7-11v1l-3 1.5 4 5.5-1 1-5.5-4L6 13H5V7.5C5 5.75 5.75 5 7.5 5H13zm11 2.5c0-1.75-.75-2.5-2.5-2.5H16v1l3 1.5-4 5.5 1 1 5.5-4 1.5 3h1V7.5z'/%3E%3C/svg%3E")}.mapboxgl-ctrl button.mapboxgl-ctrl-shrink .mapboxgl-ctrl-icon,.maplibregl-ctrl button.maplibregl-ctrl-shrink .maplibregl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg width='29' height='29' viewBox='0 0 29 29' xmlns='http://www.w3.org/2000/svg' fill='%23fff'%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-1h-5.5zM13 18.5c0-1.75-.75-2.5-2.5-2.5H5v1l3 1.5L4 24l1 1 5.5-4 1.5 3h1v-5.5zm3-8c0 1.75.75 2.5 2.5 2.5H24v-1l-3-1.5L25 5l-1-1-5.5 4L17 5h-1v5.5zM10.5 13c1.75 0 2.5-.75 2.5-2.5V5h-1l-1.5 3L5 4 4 5l4 5.5L5 12v1h5.5z'/%3E%3C/svg%3E")}} @media (-ms-high-contrast:black-on-white){.mapboxgl-ctrl button.mapboxgl-ctrl-fullscreen .mapboxgl-ctrl-icon,.maplibregl-ctrl button.maplibregl-ctrl-fullscreen .maplibregl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg width='29' height='29' viewBox='0 0 29 29' xmlns='http://www.w3.org/2000/svg'%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-3h1zM6 16l1.5 3 5.5-4 1 1-4 5.5 3 1.5v1H7.5C5.75 24 5 23.25 5 21.5V16h1zm7-11v1l-3 1.5 4 5.5-1 1-5.5-4L6 13H5V7.5C5 5.75 5.75 5 7.5 5H13zm11 2.5c0-1.75-.75-2.5-2.5-2.5H16v1l3 1.5-4 5.5 1 1 5.5-4 1.5 3h1V7.5z'/%3E%3C/svg%3E")}.mapboxgl-ctrl button.mapboxgl-ctrl-shrink .mapboxgl-ctrl-icon,.maplibregl-ctrl button.maplibregl-ctrl-shrink .maplibregl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg width='29' height='29' viewBox='0 0 29 29' xmlns='http://www.w3.org/2000/svg'%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-1h-5.5zM13 18.5c0-1.75-.75-2.5-2.5-2.5H5v1l3 1.5L4 24l1 1 5.5-4 1.5 3h1v-5.5zm3-8c0 1.75.75 2.5 2.5 2.5H24v-1l-3-1.5L25 5l-1-1-5.5 4L17 5h-1v5.5zM10.5 13c1.75 0 2.5-.75 2.5-2.5V5h-1l-1.5 3L5 4 4 5l4 5.5L5 12v1h5.5z'/%3E%3C/svg%3E")}} .mapboxgl-ctrl button.mapboxgl-ctrl-compass .mapboxgl-ctrl-icon,.maplibregl-ctrl button.maplibregl-ctrl-compass .maplibregl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg width='29' height='29' viewBox='0 0 29 29' xmlns='http://www.w3.org/2000/svg' fill='%23333'%3E%3Cpath d='m10.5 14 4-8 4 8h-8z'/%3E%3Cpath d='m10.5 16 4 8 4-8h-8z' fill='%23ccc'/%3E%3C/svg%3E")} @media (-ms-high-contrast:active){.mapboxgl-ctrl button.mapboxgl-ctrl-compass .mapboxgl-ctrl-icon,.maplibregl-ctrl button.maplibregl-ctrl-compass .maplibregl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg width='29' height='29' viewBox='0 0 29 29' xmlns='http://www.w3.org/2000/svg' fill='%23fff'%3E%3Cpath d='m10.5 14 4-8 4 8h-8z'/%3E%3Cpath d='m10.5 16 4 8 4-8h-8z' fill='%23999'/%3E%3C/svg%3E")}} @media (-ms-high-contrast:black-on-white){.mapboxgl-ctrl button.mapboxgl-ctrl-compass .mapboxgl-ctrl-icon,.maplibregl-ctrl button.maplibregl-ctrl-compass .maplibregl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg width='29' height='29' viewBox='0 0 29 29' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m10.5 14 4-8 4 8h-8z'/%3E%3Cpath d='m10.5 16 4 8 4-8h-8z' fill='%23ccc'/%3E%3C/svg%3E")}} .mapboxgl-ctrl button.mapboxgl-ctrl-terrain .mapboxgl-ctrl-icon,.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' viewBox='0 0 22 22' fill='%23333'%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")} .mapboxgl-ctrl button.mapboxgl-ctrl-terrain-enabled .mapboxgl-ctrl-icon,.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' viewBox='0 0 22 22' fill='%2333b5e5'%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")} .mapboxgl-ctrl button.mapboxgl-ctrl-geolocate .mapboxgl-ctrl-icon,.maplibregl-ctrl button.maplibregl-ctrl-geolocate .maplibregl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg width='29' height='29' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg' fill='%23333'%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-1zm0 2.5a3.5 3.5 0 1 1 0 7 3.5 3.5 0 1 1 0-7z'/%3E%3Ccircle cx='10' cy='10' r='2'/%3E%3C/svg%3E")} .mapboxgl-ctrl button.mapboxgl-ctrl-geolocate:disabled .mapboxgl-ctrl-icon,.maplibregl-ctrl button.maplibregl-ctrl-geolocate:disabled .maplibregl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg width='29' height='29' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg' fill='%23aaa'%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-1zm0 2.5a3.5 3.5 0 1 1 0 7 3.5 3.5 0 1 1 0-7z'/%3E%3Ccircle cx='10' cy='10' r='2'/%3E%3Cpath d='m14 5 1 1-9 9-1-1 9-9z' fill='red'/%3E%3C/svg%3E")} .mapboxgl-ctrl button.mapboxgl-ctrl-geolocate.mapboxgl-ctrl-geolocate-active .mapboxgl-ctrl-icon,.maplibregl-ctrl button.maplibregl-ctrl-geolocate.maplibregl-ctrl-geolocate-active .maplibregl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg width='29' height='29' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg' fill='%2333b5e5'%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-1zm0 2.5a3.5 3.5 0 1 1 0 7 3.5 3.5 0 1 1 0-7z'/%3E%3Ccircle cx='10' cy='10' r='2'/%3E%3C/svg%3E")} .mapboxgl-ctrl button.mapboxgl-ctrl-geolocate.mapboxgl-ctrl-geolocate-active-error .mapboxgl-ctrl-icon,.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 width='29' height='29' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg' fill='%23e58978'%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-1zm0 2.5a3.5 3.5 0 1 1 0 7 3.5 3.5 0 1 1 0-7z'/%3E%3Ccircle cx='10' cy='10' r='2'/%3E%3C/svg%3E")} .mapboxgl-ctrl button.mapboxgl-ctrl-geolocate.mapboxgl-ctrl-geolocate-background .mapboxgl-ctrl-icon,.maplibregl-ctrl button.maplibregl-ctrl-geolocate.maplibregl-ctrl-geolocate-background .maplibregl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg width='29' height='29' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg' fill='%2333b5e5'%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-1zm0 2.5a3.5 3.5 0 1 1 0 7 3.5 3.5 0 1 1 0-7z'/%3E%3C/svg%3E")} .mapboxgl-ctrl button.mapboxgl-ctrl-geolocate.mapboxgl-ctrl-geolocate-background-error .mapboxgl-ctrl-icon,.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 width='29' height='29' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg' fill='%23e54e33'%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-1zm0 2.5a3.5 3.5 0 1 1 0 7 3.5 3.5 0 1 1 0-7z'/%3E%3C/svg%3E")} .mapboxgl-ctrl button.mapboxgl-ctrl-geolocate.mapboxgl-ctrl-geolocate-waiting .mapboxgl-ctrl-icon,.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 (-ms-high-contrast:active){.mapboxgl-ctrl button.mapboxgl-ctrl-geolocate .mapboxgl-ctrl-icon,.maplibregl-ctrl button.maplibregl-ctrl-geolocate .maplibregl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg width='29' height='29' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg' fill='%23fff'%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-1zm0 2.5a3.5 3.5 0 1 1 0 7 3.5 3.5 0 1 1 0-7z'/%3E%3Ccircle cx='10' cy='10' r='2'/%3E%3C/svg%3E")}.mapboxgl-ctrl button.mapboxgl-ctrl-geolocate:disabled .mapboxgl-ctrl-icon,.maplibregl-ctrl button.maplibregl-ctrl-geolocate:disabled .maplibregl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg width='29' height='29' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg' fill='%23999'%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-1zm0 2.5a3.5 3.5 0 1 1 0 7 3.5 3.5 0 1 1 0-7z'/%3E%3Ccircle cx='10' cy='10' r='2'/%3E%3Cpath d='m14 5 1 1-9 9-1-1 9-9z' fill='red'/%3E%3C/svg%3E")}.mapboxgl-ctrl button.mapboxgl-ctrl-geolocate.mapboxgl-ctrl-geolocate-active .mapboxgl-ctrl-icon,.maplibregl-ctrl button.maplibregl-ctrl-geolocate.maplibregl-ctrl-geolocate-active .maplibregl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg width='29' height='29' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg' fill='%2333b5e5'%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-1zm0 2.5a3.5 3.5 0 1 1 0 7 3.5 3.5 0 1 1 0-7z'/%3E%3Ccircle cx='10' cy='10' r='2'/%3E%3C/svg%3E")}.mapboxgl-ctrl button.mapboxgl-ctrl-geolocate.mapboxgl-ctrl-geolocate-active-error .mapboxgl-ctrl-icon,.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 width='29' height='29' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg' fill='%23e58978'%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-1zm0 2.5a3.5 3.5 0 1 1 0 7 3.5 3.5 0 1 1 0-7z'/%3E%3Ccircle cx='10' cy='10' r='2'/%3E%3C/svg%3E")}.mapboxgl-ctrl button.mapboxgl-ctrl-geolocate.mapboxgl-ctrl-geolocate-background .mapboxgl-ctrl-icon,.maplibregl-ctrl button.maplibregl-ctrl-geolocate.maplibregl-ctrl-geolocate-background .maplibregl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg width='29' height='29' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg' fill='%2333b5e5'%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-1zm0 2.5a3.5 3.5 0 1 1 0 7 3.5 3.5 0 1 1 0-7z'/%3E%3C/svg%3E")}.mapboxgl-ctrl button.mapboxgl-ctrl-geolocate.mapboxgl-ctrl-geolocate-background-error .mapboxgl-ctrl-icon,.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 width='29' height='29' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg' fill='%23e54e33'%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-1zm0 2.5a3.5 3.5 0 1 1 0 7 3.5 3.5 0 1 1 0-7z'/%3E%3C/svg%3E")}} @media (-ms-high-contrast:black-on-white){.mapboxgl-ctrl button.mapboxgl-ctrl-geolocate .mapboxgl-ctrl-icon,.maplibregl-ctrl button.maplibregl-ctrl-geolocate .maplibregl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg width='29' height='29' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg'%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-1zm0 2.5a3.5 3.5 0 1 1 0 7 3.5 3.5 0 1 1 0-7z'/%3E%3Ccircle cx='10' cy='10' r='2'/%3E%3C/svg%3E")}.mapboxgl-ctrl button.mapboxgl-ctrl-geolocate:disabled .mapboxgl-ctrl-icon,.maplibregl-ctrl button.maplibregl-ctrl-geolocate:disabled .maplibregl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg width='29' height='29' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg' fill='%23666'%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-1zm0 2.5a3.5 3.5 0 1 1 0 7 3.5 3.5 0 1 1 0-7z'/%3E%3Ccircle cx='10' cy='10' r='2'/%3E%3Cpath d='m14 5 1 1-9 9-1-1 9-9z' fill='red'/%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.mapboxgl-ctrl-logo,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 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.255 1.255 0 0 1 1.12.685l3.19 6.273 3.125-6.263a1.255 1.255 0 0 1 1.123-.695h.181a1.255 1.255 0 0 1 1.227.991l1.443 6.71a5.11 5.11 0 0 1 .314-.787l.009-.016a4.623 4.623 0 0 1 1.777-1.887c.782-.46 1.668-.667 2.611-.667a4.548 4.548 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.4.314.319.566.676.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.416 2.416 0 0 1-.682-1.71c0-.665.267-1.253.735-1.7a2.448 2.448 0 0 1 1.722-.674 2.43 2.43 0 0 1 1.705.675c.211.2.381.43.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.76 4.76 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.407 3.407 0 0 1 1.567-.372c.346 0 .861.02 1.285.232a1.255 1.255 0 0 1 .689 1.004 4.73 4.73 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.528 0 .343-.02.694-.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.815 5.815 0 0 1-.548-2.512c0-.286.017-.567.053-.843a1.255 1.255 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.778 4.778 0 0 1-1.86 1.833 5.04 5.04 0 0 1-2.484.634 4.47 4.47 0 0 1-1.935-.424 1.252 1.252 0 0 1-.764.258h-1.71a1.255 1.255 0 0 1-1.256-1.255V7.687a2.402 2.402 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.703 4.703 0 0 1-1.782 1.884 4.767 4.767 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.47 4.47 0 0 1-1.945.429c-.885 0-1.724-.21-2.495-.632l-.017-.01a4.983 4.983 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.255 1.255 0 0 1-1.115.676h-.098a1.255 1.255 0 0 1-1.116-.68l-2.061-3.994zM35.92 16.63l.207-.114.223-.15c.329-.237.574-.499.735-.785l.061-.118.033 1.332h1.678V9.242h-1.694l-.033 1.267c-.088-.22-.264-.438-.526-.658l-.032-.028a3.16 3.16 0 0 0-.668-.428l-.27-.12a3.293 3.293 0 0 0-1.235-.23c-.757 0-1.415.163-1.974.493a3.36 3.36 0 0 0-1.3 1.382c-.297.593-.444 1.284-.444 2.074 0 .8.17 1.503.51 2.107a3.795 3.795 0 0 0 1.382 1.381 3.883 3.883 0 0 0 1.893.477c.53 0 1.015-.11 1.455-.33zm-2.789-5.38c-.384.45-.575 1.038-.575 1.762 0 .735.186 1.332.559 1.794.384.45.933.675 1.645.675a2.25 2.25 0 0 0 .934-.19 2.17 2.17 0 0 0 .468-.29l.178-.161a2.163 2.163 0 0 0 .397-.561c.163-.333.244-.717.244-1.15v-.115c0-.472-.098-.894-.296-1.267l-.043-.077a2.211 2.211 0 0 0-.633-.709l-.13-.086-.047-.028a2.099 2.099 0 0 0-1.073-.285c-.702 0-1.244.231-1.629.692zm2.316 2.706c.163-.17.28-.407.28-.83v-.114c0-.292-.06-.508-.15-.68a.958.958 0 0 0-.353-.389.851.851 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.626 2.626 0 0 0 .331.423c.213.22.464.402.755.548l.173.074c.433.17.93.255 1.49.255.68 0 1.295-.165 1.844-.493a3.447 3.447 0 0 0 1.316-1.4c.329-.603.493-1.299.493-2.089 0-1.273-.33-2.243-.988-2.913-.658-.68-1.52-1.02-2.584-1.02-.598 0-1.124.115-1.575.347a2.807 2.807 0 0 0-.415.262l-.199.166a3.35 3.35 0 0 0-.64.82V9.242h-1.712v11.553h1.729l-.017-5.134zm.53-1.138c.137.193.297.36.48.5l.155.11.053.034c.34.197.713.297 1.119.297.714 0 1.262-.225 1.645-.675.385-.46.576-1.048.576-1.762 0-.746-.192-1.338-.576-1.777-.372-.45-.92-.675-1.645-.675-.29 0-.569.053-.835.16a2.366 2.366 0 0 0-.284.136 1.99 1.99 0 0 0-.363.254 2.237 2.237 0 0 0-.46.569l-.082.162a2.56 2.56 0 0 0-.213 1.072v.115c0 .471.098.894.296 1.267l.135.211zm.964-.818a1.11 1.11 0 0 0 .367.385.937.937 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-.221a.995.995 0 0 0-.503.135l-.012.007a.859.859 0 0 0-.335.343c-.073.133-.132.324-.132.614v.115a1.43 1.43 0 0 0 .14.66zm15.7-6.222c.232-.23.346-.516.346-.856a1.053 1.053 0 0 0-.345-.79 1.175 1.175 0 0 0-.84-.329c-.34 0-.625.11-.855.33a1.053 1.053 0 0 0-.346.79c0 .34.115.625.346.855.23.23.516.346.856.346.34 0 .62-.115.839-.346zm4.337 9.314.033-1.332c.128.269.324.518.59.747l.098.081a3.727 3.727 0 0 0 .316.224l.223.122a3.21 3.21 0 0 0 1.44.322 3.785 3.785 0 0 0 1.875-.477 3.52 3.52 0 0 0 1.382-1.366c.352-.593.526-1.29.526-2.09 0-.79-.147-1.48-.444-2.073a3.235 3.235 0 0 0-1.283-1.399c-.549-.34-1.195-.51-1.942-.51a3.476 3.476 0 0 0-1.527.344l-.086.043-.165.09a3.412 3.412 0 0 0-.33.214c-.288.21-.507.446-.656.707a1.893 1.893 0 0 0-.099.198l.082-1.283V4.701h-1.744v12.095zm.473-2.509a2.482 2.482 0 0 0 .566.7c.078.065.159.125.245.18l.144.08a2.105 2.105 0 0 0 .975.232c.713 0 1.262-.225 1.645-.675.384-.46.576-1.053.576-1.778 0-.734-.192-1.327-.576-1.777-.373-.46-.921-.692-1.645-.692a2.18 2.18 0 0 0-1.015.235c-.147.075-.285.17-.415.282l-.15.142a2.086 2.086 0 0 0-.42.594c-.149.32-.223.685-.223 1.1v.115c0 .47.097.89.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.868.868 0 0 0-.681.279l-.012.011c-.154.155-.274.38-.274.807v.115c0 .285.057.499.144.669a1.13 1.13 0 0 0 .367.405c.137.082.28.123.455.123.423 0 .59-.118.686-.23zm8.266-3.013c.23-.087.472-.134.724-.14l.069-.002c.329 0 .542.033.642.099l.247-1.794c-.13-.066-.37-.099-.717-.099a2.3 2.3 0 0 0-.545.063 2.086 2.086 0 0 0-.411.148 2.18 2.18 0 0 0-.4.249 2.482 2.482 0 0 0-.485.499 2.659 2.659 0 0 0-.32.581l-.05.137v-1.48h-1.778v7.553h1.777v-3.884c0-.364.053-.678.159-.943a1.49 1.49 0 0 1 .466-.636 2.52 2.52 0 0 1 .399-.253 2.19 2.19 0 0 1 .224-.099zm9.784 2.656.05-.922c0-1.162-.285-2.062-.856-2.698-.559-.647-1.42-.97-2.584-.97-.746 0-1.415.163-2.007.493a3.462 3.462 0 0 0-1.4 1.382c-.329.604-.493 1.306-.493 2.106 0 .714.143 1.371.428 1.975.285.593.73 1.07 1.332 1.432.604.351 1.355.526 2.255.526.649 0 1.204-.062 1.668-.185l.044-.012.135-.04c.409-.122.736-.263.984-.421l-.542-1.267c-.2.108-.415.199-.642.274l-.297.087c-.34.088-.773.131-1.3.131-.636 0-1.135-.147-1.497-.444a1.573 1.573 0 0 1-.192-.193c-.244-.294-.415-.705-.512-1.234l-.004-.021h5.43zm-5.427-1.256-.003.022h3.752v-.138c-.007-.485-.104-.857-.288-1.118a1.056 1.056 0 0 0-.156-.176c-.307-.285-.746-.428-1.316-.428-.657 0-1.155.202-1.494.604-.253.3-.417.712-.494 1.234zm-27.053 2.77V4.7h-1.86v12.095h5.333V15.15zm7.103-5.908v7.553h-1.843V9.242h1.843z' fill='%23000' fill-opacity='.4' fill-rule='evenodd'/%3E%3Cpath 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.81c-.68 0-1.311-.16-1.893-.478a3.795 3.795 0 0 1-1.381-1.382c-.34-.604-.51-1.306-.51-2.106 0-.79.147-1.482.444-2.074a3.364 3.364 0 0 1 1.3-1.382c.559-.33 1.217-.494 1.974-.494a3.293 3.293 0 0 1 1.234.231 3.341 3.341 0 0 1 .97.575c.264.22.44.439.527.659l.033-1.267h1.694v7.553H37.18l-.033-1.332c-.186.395-.526.746-1.02 1.053a3.167 3.167 0 0 1-1.662.444zm.296-1.482c.626 0 1.152-.214 1.58-.642.428-.44.642-1.01.642-1.711v-.115c0-.472-.098-.894-.296-1.267a2.211 2.211 0 0 0-.807-.872 2.098 2.098 0 0 0-1.119-.313c-.702 0-1.245.231-1.629.692-.384.45-.575 1.037-.575 1.76 0 .736.186 1.333.559 1.795.384.45.933.675 1.645.675zm6.521-6.237h1.711v1.4c.604-1.065 1.547-1.597 2.83-1.597 1.064 0 1.926.34 2.584 1.02.659.67.988 1.641.988 2.914 0 .79-.164 1.487-.493 2.09a3.456 3.456 0 0 1-1.316 1.399 3.51 3.51 0 0 1-1.844.493c-.636 0-1.19-.11-1.662-.329a2.665 2.665 0 0 1-1.086-.97l.017 5.134h-1.728V9.242zm4.048 6.22c.714 0 1.262-.224 1.645-.674.385-.46.576-1.048.576-1.762 0-.746-.192-1.338-.576-1.777-.372-.45-.92-.675-1.645-.675-.395 0-.768.098-1.12.296-.34.187-.613.46-.822.823-.197.351-.296.763-.296 1.234v.115c0 .472.098.894.296 1.267.209.362.483.647.823.855.34.197.713.297 1.119.297z' fill='%23fff'/%3E%3Cpath d='M51.325 4.7h1.86v10.45h3.473v1.646h-5.333zm7.12 4.542h1.843v7.553h-1.843zm.905-1.415a1.159 1.159 0 0 1-.856-.346 1.165 1.165 0 0 1-.346-.856 1.053 1.053 0 0 1 .346-.79c.23-.219.516-.329.856-.329.329 0 .609.11.839.33a1.053 1.053 0 0 1 .345.79 1.159 1.159 0 0 1-.345.855c-.22.23-.5.346-.84.346zm7.875 9.133a3.167 3.167 0 0 1-1.662-.444c-.482-.307-.817-.658-1.004-1.053l-.033 1.332h-1.71V4.701h1.743v4.657l-.082 1.283c.186-.438.548-.812 1.086-1.119a3.486 3.486 0 0 1 1.778-.477c.746 0 1.393.17 1.942.51a3.235 3.235 0 0 1 1.283 1.4c.297.592.444 1.282.444 2.072 0 .8-.175 1.498-.526 2.09a3.52 3.52 0 0 1-1.382 1.366 3.785 3.785 0 0 1-1.876.477zm-.296-1.481c.713 0 1.26-.225 1.645-.675.384-.46.577-1.053.577-1.778 0-.734-.193-1.327-.577-1.776-.373-.46-.921-.692-1.645-.692a2.115 2.115 0 0 0-1.58.659c-.428.428-.642.992-.642 1.694v.115c0 .473.098.895.296 1.267a2.385 2.385 0 0 0 .807.872 2.1 2.1 0 0 0 1.119.313zm5.927-6.237h1.777v1.481c.176-.505.46-.91.856-1.217a2.14 2.14 0 0 1 1.349-.46c.351 0 .593.032.724.098l-.247 1.794c-.099-.066-.313-.099-.642-.099-.516 0-.988.164-1.416.494-.417.329-.626.855-.626 1.58v3.883h-1.777V9.242zm9.534 7.718c-.9 0-1.651-.175-2.255-.526-.603-.362-1.047-.84-1.332-1.432a4.567 4.567 0 0 1-.428-1.975c0-.8.164-1.502.493-2.106a3.462 3.462 0 0 1 1.4-1.382c.592-.33 1.262-.494 2.007-.494 1.163 0 2.024.324 2.584.97.57.637.856 1.537.856 2.7 0 .296-.017.603-.05.92h-5.43c.12.67.356 1.153.708 1.45.362.296.86.443 1.497.443.526 0 .96-.044 1.3-.131a4.123 4.123 0 0 0 .938-.362l.542 1.267c-.274.175-.647.329-1.119.46-.472.132-1.042.197-1.711.197zm1.596-4.558c.01-.68-.137-1.158-.444-1.432-.307-.285-.746-.428-1.316-.428-1.152 0-1.815.62-1.991 1.86h3.752z' fill='%23e1e3e9'/%3E%3Cg fill-rule='evenodd' stroke-width='1.036'%3E%3Cpath d='m8.166 16.146-.002.002a1.54 1.54 0 0 1-2.009 0l-.002-.002-.043-.034-.002-.002-.199-.162H4.377a.657.657 0 0 0-.659.659v1.84a.657.657 0 0 0 .659.659h5.565a.657.657 0 0 0 .659-.659v-1.84a.657.657 0 0 0-.659-.659H8.411l-.202.164zm-1.121-.905a.29.29 0 0 0 .113.023.286.286 0 0 0 .189-.07l.077-.063c.634-.508 4.672-3.743 4.672-7.575 0-2.55-2.215-4.625-4.938-4.625S2.221 5.006 2.221 7.556c0 3.225 2.86 6.027 4.144 7.137h.004l.04.038.484.4.077.063a.628.628 0 0 0 .074.047zm-2.52-.548a16.898 16.898 0 0 1-1.183-1.315C2.187 11.942.967 9.897.967 7.555c0-3.319 2.855-5.88 6.192-5.88 3.338 0 6.193 2.561 6.193 5.881 0 2.34-1.22 4.387-2.376 5.822a16.898 16.898 0 0 1-1.182 1.315h.15a1.912 1.912 0 0 1 1.914 1.914v1.84a1.912 1.912 0 0 1-1.914 1.914H4.377a1.912 1.912 0 0 1-1.914-1.914v-1.84a1.912 1.912 0 0 1 1.914-1.914zm3.82-6.935c0 .692-.55 1.222-1.187 1.222s-1.185-.529-1.185-1.222.548-1.222 1.185-1.222c.638 0 1.186.529 1.186 1.222zm-1.186 2.477c1.348 0 2.442-1.11 2.442-2.478S8.507 5.28 7.159 5.28 4.72 6.39 4.72 7.758s1.092 2.477 2.44 2.477zm2.048 7.71H5.114v-.838h4.093z' fill='%23000' fill-opacity='.4'/%3E%3Cpath d='M2.222 7.555c0-2.55 2.214-4.625 4.937-4.625 2.723 0 4.938 2.075 4.938 4.625 0 3.832-4.038 7.068-4.672 7.575l-.077.063a.286.286 0 0 1-.189.07.286.286 0 0 1-.188-.07l-.077-.063c-.634-.507-4.672-3.743-4.672-7.575zm4.937 2.68c1.348 0 2.442-1.11 2.442-2.478S8.507 5.28 7.159 5.28 4.72 6.39 4.72 7.758s1.092 2.477 2.44 2.477z' fill='%23e1e3e9'/%3E%3Cpath d='M4.377 15.948a.657.657 0 0 0-.659.659v1.84a.657.657 0 0 0 .659.659h5.565a.657.657 0 0 0 .659-.659v-1.84a.657.657 0 0 0-.659-.659zm4.83 1.16H5.114v.838h4.093z' fill='%23fff'/%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.mapboxgl-ctrl-logo.mapboxgl-compact,a.maplibregl-ctrl-logo.maplibregl-compact{width:14px} @media (-ms-high-contrast:active){a.mapboxgl-ctrl-logo,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 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.255 1.255 0 0 1 1.12.685l3.19 6.273 3.125-6.263a1.255 1.255 0 0 1 1.123-.695h.181a1.255 1.255 0 0 1 1.227.991l1.443 6.71a5.11 5.11 0 0 1 .314-.787l.009-.016a4.623 4.623 0 0 1 1.777-1.887c.782-.46 1.668-.667 2.611-.667a4.548 4.548 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.4.314.319.566.676.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.416 2.416 0 0 1-.682-1.71c0-.665.267-1.253.735-1.7a2.448 2.448 0 0 1 1.722-.674 2.43 2.43 0 0 1 1.705.675c.211.2.381.43.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.76 4.76 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.407 3.407 0 0 1 1.567-.372c.346 0 .861.02 1.285.232a1.255 1.255 0 0 1 .689 1.004 4.73 4.73 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.528 0 .343-.02.694-.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.815 5.815 0 0 1-.548-2.512c0-.286.017-.567.053-.843a1.255 1.255 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.778 4.778 0 0 1-1.86 1.833 5.04 5.04 0 0 1-2.484.634 4.47 4.47 0 0 1-1.935-.424 1.252 1.252 0 0 1-.764.258h-1.71a1.255 1.255 0 0 1-1.256-1.255V7.687a2.402 2.402 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.703 4.703 0 0 1-1.782 1.884 4.767 4.767 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.47 4.47 0 0 1-1.945.429c-.885 0-1.724-.21-2.495-.632l-.017-.01a4.983 4.983 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.255 1.255 0 0 1-1.115.676h-.098a1.255 1.255 0 0 1-1.116-.68l-2.061-3.994zM35.92 16.63l.207-.114.223-.15c.329-.237.574-.499.735-.785l.061-.118.033 1.332h1.678V9.242h-1.694l-.033 1.267c-.088-.22-.264-.438-.526-.658l-.032-.028a3.16 3.16 0 0 0-.668-.428l-.27-.12a3.293 3.293 0 0 0-1.235-.23c-.757 0-1.415.163-1.974.493a3.36 3.36 0 0 0-1.3 1.382c-.297.593-.444 1.284-.444 2.074 0 .8.17 1.503.51 2.107a3.795 3.795 0 0 0 1.382 1.381 3.883 3.883 0 0 0 1.893.477c.53 0 1.015-.11 1.455-.33zm-2.789-5.38c-.384.45-.575 1.038-.575 1.762 0 .735.186 1.332.559 1.794.384.45.933.675 1.645.675a2.25 2.25 0 0 0 .934-.19 2.17 2.17 0 0 0 .468-.29l.178-.161a2.163 2.163 0 0 0 .397-.561c.163-.333.244-.717.244-1.15v-.115c0-.472-.098-.894-.296-1.267l-.043-.077a2.211 2.211 0 0 0-.633-.709l-.13-.086-.047-.028a2.099 2.099 0 0 0-1.073-.285c-.702 0-1.244.231-1.629.692zm2.316 2.706c.163-.17.28-.407.28-.83v-.114c0-.292-.06-.508-.15-.68a.958.958 0 0 0-.353-.389.851.851 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.626 2.626 0 0 0 .331.423c.213.22.464.402.755.548l.173.074c.433.17.93.255 1.49.255.68 0 1.295-.165 1.844-.493a3.447 3.447 0 0 0 1.316-1.4c.329-.603.493-1.299.493-2.089 0-1.273-.33-2.243-.988-2.913-.658-.68-1.52-1.02-2.584-1.02-.598 0-1.124.115-1.575.347a2.807 2.807 0 0 0-.415.262l-.199.166a3.35 3.35 0 0 0-.64.82V9.242h-1.712v11.553h1.729l-.017-5.134zm.53-1.138c.137.193.297.36.48.5l.155.11.053.034c.34.197.713.297 1.119.297.714 0 1.262-.225 1.645-.675.385-.46.576-1.048.576-1.762 0-.746-.192-1.338-.576-1.777-.372-.45-.92-.675-1.645-.675-.29 0-.569.053-.835.16a2.366 2.366 0 0 0-.284.136 1.99 1.99 0 0 0-.363.254 2.237 2.237 0 0 0-.46.569l-.082.162a2.56 2.56 0 0 0-.213 1.072v.115c0 .471.098.894.296 1.267l.135.211zm.964-.818a1.11 1.11 0 0 0 .367.385.937.937 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-.221a.995.995 0 0 0-.503.135l-.012.007a.859.859 0 0 0-.335.343c-.073.133-.132.324-.132.614v.115a1.43 1.43 0 0 0 .14.66zm15.7-6.222c.232-.23.346-.516.346-.856a1.053 1.053 0 0 0-.345-.79 1.175 1.175 0 0 0-.84-.329c-.34 0-.625.11-.855.33a1.053 1.053 0 0 0-.346.79c0 .34.115.625.346.855.23.23.516.346.856.346.34 0 .62-.115.839-.346zm4.337 9.314.033-1.332c.128.269.324.518.59.747l.098.081a3.727 3.727 0 0 0 .316.224l.223.122a3.21 3.21 0 0 0 1.44.322 3.785 3.785 0 0 0 1.875-.477 3.52 3.52 0 0 0 1.382-1.366c.352-.593.526-1.29.526-2.09 0-.79-.147-1.48-.444-2.073a3.235 3.235 0 0 0-1.283-1.399c-.549-.34-1.195-.51-1.942-.51a3.476 3.476 0 0 0-1.527.344l-.086.043-.165.09a3.412 3.412 0 0 0-.33.214c-.288.21-.507.446-.656.707a1.893 1.893 0 0 0-.099.198l.082-1.283V4.701h-1.744v12.095zm.473-2.509a2.482 2.482 0 0 0 .566.7c.078.065.159.125.245.18l.144.08a2.105 2.105 0 0 0 .975.232c.713 0 1.262-.225 1.645-.675.384-.46.576-1.053.576-1.778 0-.734-.192-1.327-.576-1.777-.373-.46-.921-.692-1.645-.692a2.18 2.18 0 0 0-1.015.235c-.147.075-.285.17-.415.282l-.15.142a2.086 2.086 0 0 0-.42.594c-.149.32-.223.685-.223 1.1v.115c0 .47.097.89.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.868.868 0 0 0-.681.279l-.012.011c-.154.155-.274.38-.274.807v.115c0 .285.057.499.144.669a1.13 1.13 0 0 0 .367.405c.137.082.28.123.455.123.423 0 .59-.118.686-.23zm8.266-3.013c.23-.087.472-.134.724-.14l.069-.002c.329 0 .542.033.642.099l.247-1.794c-.13-.066-.37-.099-.717-.099a2.3 2.3 0 0 0-.545.063 2.086 2.086 0 0 0-.411.148 2.18 2.18 0 0 0-.4.249 2.482 2.482 0 0 0-.485.499 2.659 2.659 0 0 0-.32.581l-.05.137v-1.48h-1.778v7.553h1.777v-3.884c0-.364.053-.678.159-.943a1.49 1.49 0 0 1 .466-.636 2.52 2.52 0 0 1 .399-.253 2.19 2.19 0 0 1 .224-.099zm9.784 2.656.05-.922c0-1.162-.285-2.062-.856-2.698-.559-.647-1.42-.97-2.584-.97-.746 0-1.415.163-2.007.493a3.462 3.462 0 0 0-1.4 1.382c-.329.604-.493 1.306-.493 2.106 0 .714.143 1.371.428 1.975.285.593.73 1.07 1.332 1.432.604.351 1.355.526 2.255.526.649 0 1.204-.062 1.668-.185l.044-.012.135-.04c.409-.122.736-.263.984-.421l-.542-1.267c-.2.108-.415.199-.642.274l-.297.087c-.34.088-.773.131-1.3.131-.636 0-1.135-.147-1.497-.444a1.573 1.573 0 0 1-.192-.193c-.244-.294-.415-.705-.512-1.234l-.004-.021h5.43zm-5.427-1.256-.003.022h3.752v-.138c-.007-.485-.104-.857-.288-1.118a1.056 1.056 0 0 0-.156-.176c-.307-.285-.746-.428-1.316-.428-.657 0-1.155.202-1.494.604-.253.3-.417.712-.494 1.234zm-27.053 2.77V4.7h-1.86v12.095h5.333V15.15zm7.103-5.908v7.553h-1.843V9.242h1.843z' fill='%23000' fill-opacity='.4' fill-rule='evenodd'/%3E%3Cpath 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.81c-.68 0-1.311-.16-1.893-.478a3.795 3.795 0 0 1-1.381-1.382c-.34-.604-.51-1.306-.51-2.106 0-.79.147-1.482.444-2.074a3.364 3.364 0 0 1 1.3-1.382c.559-.33 1.217-.494 1.974-.494a3.293 3.293 0 0 1 1.234.231 3.341 3.341 0 0 1 .97.575c.264.22.44.439.527.659l.033-1.267h1.694v7.553H37.18l-.033-1.332c-.186.395-.526.746-1.02 1.053a3.167 3.167 0 0 1-1.662.444zm.296-1.482c.626 0 1.152-.214 1.58-.642.428-.44.642-1.01.642-1.711v-.115c0-.472-.098-.894-.296-1.267a2.211 2.211 0 0 0-.807-.872 2.098 2.098 0 0 0-1.119-.313c-.702 0-1.245.231-1.629.692-.384.45-.575 1.037-.575 1.76 0 .736.186 1.333.559 1.795.384.45.933.675 1.645.675zm6.521-6.237h1.711v1.4c.604-1.065 1.547-1.597 2.83-1.597 1.064 0 1.926.34 2.584 1.02.659.67.988 1.641.988 2.914 0 .79-.164 1.487-.493 2.09a3.456 3.456 0 0 1-1.316 1.399 3.51 3.51 0 0 1-1.844.493c-.636 0-1.19-.11-1.662-.329a2.665 2.665 0 0 1-1.086-.97l.017 5.134h-1.728V9.242zm4.048 6.22c.714 0 1.262-.224 1.645-.674.385-.46.576-1.048.576-1.762 0-.746-.192-1.338-.576-1.777-.372-.45-.92-.675-1.645-.675-.395 0-.768.098-1.12.296-.34.187-.613.46-.822.823-.197.351-.296.763-.296 1.234v.115c0 .472.098.894.296 1.267.209.362.483.647.823.855.34.197.713.297 1.119.297z' fill='%23fff'/%3E%3Cpath d='M51.325 4.7h1.86v10.45h3.473v1.646h-5.333zm7.12 4.542h1.843v7.553h-1.843zm.905-1.415a1.159 1.159 0 0 1-.856-.346 1.165 1.165 0 0 1-.346-.856 1.053 1.053 0 0 1 .346-.79c.23-.219.516-.329.856-.329.329 0 .609.11.839.33a1.053 1.053 0 0 1 .345.79 1.159 1.159 0 0 1-.345.855c-.22.23-.5.346-.84.346zm7.875 9.133a3.167 3.167 0 0 1-1.662-.444c-.482-.307-.817-.658-1.004-1.053l-.033 1.332h-1.71V4.701h1.743v4.657l-.082 1.283c.186-.438.548-.812 1.086-1.119a3.486 3.486 0 0 1 1.778-.477c.746 0 1.393.17 1.942.51a3.235 3.235 0 0 1 1.283 1.4c.297.592.444 1.282.444 2.072 0 .8-.175 1.498-.526 2.09a3.52 3.52 0 0 1-1.382 1.366 3.785 3.785 0 0 1-1.876.477zm-.296-1.481c.713 0 1.26-.225 1.645-.675.384-.46.577-1.053.577-1.778 0-.734-.193-1.327-.577-1.776-.373-.46-.921-.692-1.645-.692a2.115 2.115 0 0 0-1.58.659c-.428.428-.642.992-.642 1.694v.115c0 .473.098.895.296 1.267a2.385 2.385 0 0 0 .807.872 2.1 2.1 0 0 0 1.119.313zm5.927-6.237h1.777v1.481c.176-.505.46-.91.856-1.217a2.14 2.14 0 0 1 1.349-.46c.351 0 .593.032.724.098l-.247 1.794c-.099-.066-.313-.099-.642-.099-.516 0-.988.164-1.416.494-.417.329-.626.855-.626 1.58v3.883h-1.777V9.242zm9.534 7.718c-.9 0-1.651-.175-2.255-.526-.603-.362-1.047-.84-1.332-1.432a4.567 4.567 0 0 1-.428-1.975c0-.8.164-1.502.493-2.106a3.462 3.462 0 0 1 1.4-1.382c.592-.33 1.262-.494 2.007-.494 1.163 0 2.024.324 2.584.97.57.637.856 1.537.856 2.7 0 .296-.017.603-.05.92h-5.43c.12.67.356 1.153.708 1.45.362.296.86.443 1.497.443.526 0 .96-.044 1.3-.131a4.123 4.123 0 0 0 .938-.362l.542 1.267c-.274.175-.647.329-1.119.46-.472.132-1.042.197-1.711.197zm1.596-4.558c.01-.68-.137-1.158-.444-1.432-.307-.285-.746-.428-1.316-.428-1.152 0-1.815.62-1.991 1.86h3.752z' fill='%23e1e3e9'/%3E%3Cg fill-rule='evenodd' stroke-width='1.036'%3E%3Cpath d='m8.166 16.146-.002.002a1.54 1.54 0 0 1-2.009 0l-.002-.002-.043-.034-.002-.002-.199-.162H4.377a.657.657 0 0 0-.659.659v1.84a.657.657 0 0 0 .659.659h5.565a.657.657 0 0 0 .659-.659v-1.84a.657.657 0 0 0-.659-.659H8.411l-.202.164zm-1.121-.905a.29.29 0 0 0 .113.023.286.286 0 0 0 .189-.07l.077-.063c.634-.508 4.672-3.743 4.672-7.575 0-2.55-2.215-4.625-4.938-4.625S2.221 5.006 2.221 7.556c0 3.225 2.86 6.027 4.144 7.137h.004l.04.038.484.4.077.063a.628.628 0 0 0 .074.047zm-2.52-.548a16.898 16.898 0 0 1-1.183-1.315C2.187 11.942.967 9.897.967 7.555c0-3.319 2.855-5.88 6.192-5.88 3.338 0 6.193 2.561 6.193 5.881 0 2.34-1.22 4.387-2.376 5.822a16.898 16.898 0 0 1-1.182 1.315h.15a1.912 1.912 0 0 1 1.914 1.914v1.84a1.912 1.912 0 0 1-1.914 1.914H4.377a1.912 1.912 0 0 1-1.914-1.914v-1.84a1.912 1.912 0 0 1 1.914-1.914zm3.82-6.935c0 .692-.55 1.222-1.187 1.222s-1.185-.529-1.185-1.222.548-1.222 1.185-1.222c.638 0 1.186.529 1.186 1.222zm-1.186 2.477c1.348 0 2.442-1.11 2.442-2.478S8.507 5.28 7.159 5.28 4.72 6.39 4.72 7.758s1.092 2.477 2.44 2.477zm2.048 7.71H5.114v-.838h4.093z' fill='%23000' fill-opacity='.4'/%3E%3Cpath d='M2.222 7.555c0-2.55 2.214-4.625 4.937-4.625 2.723 0 4.938 2.075 4.938 4.625 0 3.832-4.038 7.068-4.672 7.575l-.077.063a.286.286 0 0 1-.189.07.286.286 0 0 1-.188-.07l-.077-.063c-.634-.507-4.672-3.743-4.672-7.575zm4.937 2.68c1.348 0 2.442-1.11 2.442-2.478S8.507 5.28 7.159 5.28 4.72 6.39 4.72 7.758s1.092 2.477 2.44 2.477z' fill='%23e1e3e9'/%3E%3Cpath d='M4.377 15.948a.657.657 0 0 0-.659.659v1.84a.657.657 0 0 0 .659.659h5.565a.657.657 0 0 0 .659-.659v-1.84a.657.657 0 0 0-.659-.659zm4.83 1.16H5.114v.838h4.093z' fill='%23fff'/%3E%3C/g%3E%3C/svg%3E")}} @media (-ms-high-contrast:black-on-white){a.mapboxgl-ctrl-logo,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 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.255 1.255 0 0 1 1.12.685l3.19 6.273 3.125-6.263a1.255 1.255 0 0 1 1.123-.695h.181a1.255 1.255 0 0 1 1.227.991l1.443 6.71a5.11 5.11 0 0 1 .314-.787l.009-.016a4.623 4.623 0 0 1 1.777-1.887c.782-.46 1.668-.667 2.611-.667a4.548 4.548 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.4.314.319.566.676.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.416 2.416 0 0 1-.682-1.71c0-.665.267-1.253.735-1.7a2.448 2.448 0 0 1 1.722-.674 2.43 2.43 0 0 1 1.705.675c.211.2.381.43.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.76 4.76 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.407 3.407 0 0 1 1.567-.372c.346 0 .861.02 1.285.232a1.255 1.255 0 0 1 .689 1.004 4.73 4.73 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.528 0 .343-.02.694-.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.815 5.815 0 0 1-.548-2.512c0-.286.017-.567.053-.843a1.255 1.255 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.778 4.778 0 0 1-1.86 1.833 5.04 5.04 0 0 1-2.484.634 4.47 4.47 0 0 1-1.935-.424 1.252 1.252 0 0 1-.764.258h-1.71a1.255 1.255 0 0 1-1.256-1.255V7.687a2.402 2.402 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.703 4.703 0 0 1-1.782 1.884 4.767 4.767 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.47 4.47 0 0 1-1.945.429c-.885 0-1.724-.21-2.495-.632l-.017-.01a4.983 4.983 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.255 1.255 0 0 1-1.115.676h-.098a1.255 1.255 0 0 1-1.116-.68l-2.061-3.994zM35.92 16.63l.207-.114.223-.15c.329-.237.574-.499.735-.785l.061-.118.033 1.332h1.678V9.242h-1.694l-.033 1.267c-.088-.22-.264-.438-.526-.658l-.032-.028a3.16 3.16 0 0 0-.668-.428l-.27-.12a3.293 3.293 0 0 0-1.235-.23c-.757 0-1.415.163-1.974.493a3.36 3.36 0 0 0-1.3 1.382c-.297.593-.444 1.284-.444 2.074 0 .8.17 1.503.51 2.107a3.795 3.795 0 0 0 1.382 1.381 3.883 3.883 0 0 0 1.893.477c.53 0 1.015-.11 1.455-.33zm-2.789-5.38c-.384.45-.575 1.038-.575 1.762 0 .735.186 1.332.559 1.794.384.45.933.675 1.645.675a2.25 2.25 0 0 0 .934-.19 2.17 2.17 0 0 0 .468-.29l.178-.161a2.163 2.163 0 0 0 .397-.561c.163-.333.244-.717.244-1.15v-.115c0-.472-.098-.894-.296-1.267l-.043-.077a2.211 2.211 0 0 0-.633-.709l-.13-.086-.047-.028a2.099 2.099 0 0 0-1.073-.285c-.702 0-1.244.231-1.629.692zm2.316 2.706c.163-.17.28-.407.28-.83v-.114c0-.292-.06-.508-.15-.68a.958.958 0 0 0-.353-.389.851.851 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.626 2.626 0 0 0 .331.423c.213.22.464.402.755.548l.173.074c.433.17.93.255 1.49.255.68 0 1.295-.165 1.844-.493a3.447 3.447 0 0 0 1.316-1.4c.329-.603.493-1.299.493-2.089 0-1.273-.33-2.243-.988-2.913-.658-.68-1.52-1.02-2.584-1.02-.598 0-1.124.115-1.575.347a2.807 2.807 0 0 0-.415.262l-.199.166a3.35 3.35 0 0 0-.64.82V9.242h-1.712v11.553h1.729l-.017-5.134zm.53-1.138c.137.193.297.36.48.5l.155.11.053.034c.34.197.713.297 1.119.297.714 0 1.262-.225 1.645-.675.385-.46.576-1.048.576-1.762 0-.746-.192-1.338-.576-1.777-.372-.45-.92-.675-1.645-.675-.29 0-.569.053-.835.16a2.366 2.366 0 0 0-.284.136 1.99 1.99 0 0 0-.363.254 2.237 2.237 0 0 0-.46.569l-.082.162a2.56 2.56 0 0 0-.213 1.072v.115c0 .471.098.894.296 1.267l.135.211zm.964-.818a1.11 1.11 0 0 0 .367.385.937.937 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-.221a.995.995 0 0 0-.503.135l-.012.007a.859.859 0 0 0-.335.343c-.073.133-.132.324-.132.614v.115a1.43 1.43 0 0 0 .14.66zm15.7-6.222c.232-.23.346-.516.346-.856a1.053 1.053 0 0 0-.345-.79 1.175 1.175 0 0 0-.84-.329c-.34 0-.625.11-.855.33a1.053 1.053 0 0 0-.346.79c0 .34.115.625.346.855.23.23.516.346.856.346.34 0 .62-.115.839-.346zm4.337 9.314.033-1.332c.128.269.324.518.59.747l.098.081a3.727 3.727 0 0 0 .316.224l.223.122a3.21 3.21 0 0 0 1.44.322 3.785 3.785 0 0 0 1.875-.477 3.52 3.52 0 0 0 1.382-1.366c.352-.593.526-1.29.526-2.09 0-.79-.147-1.48-.444-2.073a3.235 3.235 0 0 0-1.283-1.399c-.549-.34-1.195-.51-1.942-.51a3.476 3.476 0 0 0-1.527.344l-.086.043-.165.09a3.412 3.412 0 0 0-.33.214c-.288.21-.507.446-.656.707a1.893 1.893 0 0 0-.099.198l.082-1.283V4.701h-1.744v12.095zm.473-2.509a2.482 2.482 0 0 0 .566.7c.078.065.159.125.245.18l.144.08a2.105 2.105 0 0 0 .975.232c.713 0 1.262-.225 1.645-.675.384-.46.576-1.053.576-1.778 0-.734-.192-1.327-.576-1.777-.373-.46-.921-.692-1.645-.692a2.18 2.18 0 0 0-1.015.235c-.147.075-.285.17-.415.282l-.15.142a2.086 2.086 0 0 0-.42.594c-.149.32-.223.685-.223 1.1v.115c0 .47.097.89.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.868.868 0 0 0-.681.279l-.012.011c-.154.155-.274.38-.274.807v.115c0 .285.057.499.144.669a1.13 1.13 0 0 0 .367.405c.137.082.28.123.455.123.423 0 .59-.118.686-.23zm8.266-3.013c.23-.087.472-.134.724-.14l.069-.002c.329 0 .542.033.642.099l.247-1.794c-.13-.066-.37-.099-.717-.099a2.3 2.3 0 0 0-.545.063 2.086 2.086 0 0 0-.411.148 2.18 2.18 0 0 0-.4.249 2.482 2.482 0 0 0-.485.499 2.659 2.659 0 0 0-.32.581l-.05.137v-1.48h-1.778v7.553h1.777v-3.884c0-.364.053-.678.159-.943a1.49 1.49 0 0 1 .466-.636 2.52 2.52 0 0 1 .399-.253 2.19 2.19 0 0 1 .224-.099zm9.784 2.656.05-.922c0-1.162-.285-2.062-.856-2.698-.559-.647-1.42-.97-2.584-.97-.746 0-1.415.163-2.007.493a3.462 3.462 0 0 0-1.4 1.382c-.329.604-.493 1.306-.493 2.106 0 .714.143 1.371.428 1.975.285.593.73 1.07 1.332 1.432.604.351 1.355.526 2.255.526.649 0 1.204-.062 1.668-.185l.044-.012.135-.04c.409-.122.736-.263.984-.421l-.542-1.267c-.2.108-.415.199-.642.274l-.297.087c-.34.088-.773.131-1.3.131-.636 0-1.135-.147-1.497-.444a1.573 1.573 0 0 1-.192-.193c-.244-.294-.415-.705-.512-1.234l-.004-.021h5.43zm-5.427-1.256-.003.022h3.752v-.138c-.007-.485-.104-.857-.288-1.118a1.056 1.056 0 0 0-.156-.176c-.307-.285-.746-.428-1.316-.428-.657 0-1.155.202-1.494.604-.253.3-.417.712-.494 1.234zm-27.053 2.77V4.7h-1.86v12.095h5.333V15.15zm7.103-5.908v7.553h-1.843V9.242h1.843z' fill='%23000' fill-opacity='.4' fill-rule='evenodd'/%3E%3Cpath 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.81c-.68 0-1.311-.16-1.893-.478a3.795 3.795 0 0 1-1.381-1.382c-.34-.604-.51-1.306-.51-2.106 0-.79.147-1.482.444-2.074a3.364 3.364 0 0 1 1.3-1.382c.559-.33 1.217-.494 1.974-.494a3.293 3.293 0 0 1 1.234.231 3.341 3.341 0 0 1 .97.575c.264.22.44.439.527.659l.033-1.267h1.694v7.553H37.18l-.033-1.332c-.186.395-.526.746-1.02 1.053a3.167 3.167 0 0 1-1.662.444zm.296-1.482c.626 0 1.152-.214 1.58-.642.428-.44.642-1.01.642-1.711v-.115c0-.472-.098-.894-.296-1.267a2.211 2.211 0 0 0-.807-.872 2.098 2.098 0 0 0-1.119-.313c-.702 0-1.245.231-1.629.692-.384.45-.575 1.037-.575 1.76 0 .736.186 1.333.559 1.795.384.45.933.675 1.645.675zm6.521-6.237h1.711v1.4c.604-1.065 1.547-1.597 2.83-1.597 1.064 0 1.926.34 2.584 1.02.659.67.988 1.641.988 2.914 0 .79-.164 1.487-.493 2.09a3.456 3.456 0 0 1-1.316 1.399 3.51 3.51 0 0 1-1.844.493c-.636 0-1.19-.11-1.662-.329a2.665 2.665 0 0 1-1.086-.97l.017 5.134h-1.728V9.242zm4.048 6.22c.714 0 1.262-.224 1.645-.674.385-.46.576-1.048.576-1.762 0-.746-.192-1.338-.576-1.777-.372-.45-.92-.675-1.645-.675-.395 0-.768.098-1.12.296-.34.187-.613.46-.822.823-.197.351-.296.763-.296 1.234v.115c0 .472.098.894.296 1.267.209.362.483.647.823.855.34.197.713.297 1.119.297z' fill='%23fff'/%3E%3Cpath d='M51.325 4.7h1.86v10.45h3.473v1.646h-5.333zm7.12 4.542h1.843v7.553h-1.843zm.905-1.415a1.159 1.159 0 0 1-.856-.346 1.165 1.165 0 0 1-.346-.856 1.053 1.053 0 0 1 .346-.79c.23-.219.516-.329.856-.329.329 0 .609.11.839.33a1.053 1.053 0 0 1 .345.79 1.159 1.159 0 0 1-.345.855c-.22.23-.5.346-.84.346zm7.875 9.133a3.167 3.167 0 0 1-1.662-.444c-.482-.307-.817-.658-1.004-1.053l-.033 1.332h-1.71V4.701h1.743v4.657l-.082 1.283c.186-.438.548-.812 1.086-1.119a3.486 3.486 0 0 1 1.778-.477c.746 0 1.393.17 1.942.51a3.235 3.235 0 0 1 1.283 1.4c.297.592.444 1.282.444 2.072 0 .8-.175 1.498-.526 2.09a3.52 3.52 0 0 1-1.382 1.366 3.785 3.785 0 0 1-1.876.477zm-.296-1.481c.713 0 1.26-.225 1.645-.675.384-.46.577-1.053.577-1.778 0-.734-.193-1.327-.577-1.776-.373-.46-.921-.692-1.645-.692a2.115 2.115 0 0 0-1.58.659c-.428.428-.642.992-.642 1.694v.115c0 .473.098.895.296 1.267a2.385 2.385 0 0 0 .807.872 2.1 2.1 0 0 0 1.119.313zm5.927-6.237h1.777v1.481c.176-.505.46-.91.856-1.217a2.14 2.14 0 0 1 1.349-.46c.351 0 .593.032.724.098l-.247 1.794c-.099-.066-.313-.099-.642-.099-.516 0-.988.164-1.416.494-.417.329-.626.855-.626 1.58v3.883h-1.777V9.242zm9.534 7.718c-.9 0-1.651-.175-2.255-.526-.603-.362-1.047-.84-1.332-1.432a4.567 4.567 0 0 1-.428-1.975c0-.8.164-1.502.493-2.106a3.462 3.462 0 0 1 1.4-1.382c.592-.33 1.262-.494 2.007-.494 1.163 0 2.024.324 2.584.97.57.637.856 1.537.856 2.7 0 .296-.017.603-.05.92h-5.43c.12.67.356 1.153.708 1.45.362.296.86.443 1.497.443.526 0 .96-.044 1.3-.131a4.123 4.123 0 0 0 .938-.362l.542 1.267c-.274.175-.647.329-1.119.46-.472.132-1.042.197-1.711.197zm1.596-4.558c.01-.68-.137-1.158-.444-1.432-.307-.285-.746-.428-1.316-.428-1.152 0-1.815.62-1.991 1.86h3.752z' fill='%23e1e3e9'/%3E%3Cg fill-rule='evenodd' stroke-width='1.036'%3E%3Cpath d='m8.166 16.146-.002.002a1.54 1.54 0 0 1-2.009 0l-.002-.002-.043-.034-.002-.002-.199-.162H4.377a.657.657 0 0 0-.659.659v1.84a.657.657 0 0 0 .659.659h5.565a.657.657 0 0 0 .659-.659v-1.84a.657.657 0 0 0-.659-.659H8.411l-.202.164zm-1.121-.905a.29.29 0 0 0 .113.023.286.286 0 0 0 .189-.07l.077-.063c.634-.508 4.672-3.743 4.672-7.575 0-2.55-2.215-4.625-4.938-4.625S2.221 5.006 2.221 7.556c0 3.225 2.86 6.027 4.144 7.137h.004l.04.038.484.4.077.063a.628.628 0 0 0 .074.047zm-2.52-.548a16.898 16.898 0 0 1-1.183-1.315C2.187 11.942.967 9.897.967 7.555c0-3.319 2.855-5.88 6.192-5.88 3.338 0 6.193 2.561 6.193 5.881 0 2.34-1.22 4.387-2.376 5.822a16.898 16.898 0 0 1-1.182 1.315h.15a1.912 1.912 0 0 1 1.914 1.914v1.84a1.912 1.912 0 0 1-1.914 1.914H4.377a1.912 1.912 0 0 1-1.914-1.914v-1.84a1.912 1.912 0 0 1 1.914-1.914zm3.82-6.935c0 .692-.55 1.222-1.187 1.222s-1.185-.529-1.185-1.222.548-1.222 1.185-1.222c.638 0 1.186.529 1.186 1.222zm-1.186 2.477c1.348 0 2.442-1.11 2.442-2.478S8.507 5.28 7.159 5.28 4.72 6.39 4.72 7.758s1.092 2.477 2.44 2.477zm2.048 7.71H5.114v-.838h4.093z' fill='%23000' fill-opacity='.4'/%3E%3Cpath d='M2.222 7.555c0-2.55 2.214-4.625 4.937-4.625 2.723 0 4.938 2.075 4.938 4.625 0 3.832-4.038 7.068-4.672 7.575l-.077.063a.286.286 0 0 1-.189.07.286.286 0 0 1-.188-.07l-.077-.063c-.634-.507-4.672-3.743-4.672-7.575zm4.937 2.68c1.348 0 2.442-1.11 2.442-2.478S8.507 5.28 7.159 5.28 4.72 6.39 4.72 7.758s1.092 2.477 2.44 2.477z' fill='%23e1e3e9'/%3E%3Cpath d='M4.377 15.948a.657.657 0 0 0-.659.659v1.84a.657.657 0 0 0 .659.659h5.565a.657.657 0 0 0 .659-.659v-1.84a.657.657 0 0 0-.659-.659zm4.83 1.16H5.114v.838h4.093z' fill='%23fff'/%3E%3C/g%3E%3C/svg%3E")}} .mapboxgl-ctrl.mapboxgl-ctrl-attrib,.maplibregl-ctrl.maplibregl-ctrl-attrib{background-color:hsla(0,0%,100%,.5);margin:0;padding:0 5px} @media screen{.mapboxgl-ctrl-attrib.mapboxgl-compact,.maplibregl-ctrl-attrib.maplibregl-compact{background-color:#fff;border-radius:12px;-webkit-box-sizing:content-box;box-sizing:content-box;margin:10px;min-height:20px;padding:2px 24px 2px 0;position:relative}.mapboxgl-ctrl-attrib.mapboxgl-compact-show,.maplibregl-ctrl-attrib.maplibregl-compact-show{padding:2px 28px 2px 8px;visibility:visible}.mapboxgl-ctrl-bottom-left>.mapboxgl-ctrl-attrib.mapboxgl-compact-show,.mapboxgl-ctrl-top-left>.mapboxgl-ctrl-attrib.mapboxgl-compact-show,.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}.mapboxgl-ctrl-attrib.mapboxgl-compact .mapboxgl-ctrl-attrib-inner,.maplibregl-ctrl-attrib.maplibregl-compact .maplibregl-ctrl-attrib-inner{display:none}.mapboxgl-ctrl-attrib-button,.maplibregl-ctrl-attrib-button{background-color:hsla(0,0%,100%,.5);background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg width='24' height='24' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg' fill-rule='evenodd'%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}.mapboxgl-ctrl-bottom-left .mapboxgl-ctrl-attrib-button,.mapboxgl-ctrl-top-left .mapboxgl-ctrl-attrib-button,.maplibregl-ctrl-bottom-left .maplibregl-ctrl-attrib-button,.maplibregl-ctrl-top-left .maplibregl-ctrl-attrib-button{left:0}.mapboxgl-ctrl-attrib.mapboxgl-compact .mapboxgl-ctrl-attrib-button,.mapboxgl-ctrl-attrib.mapboxgl-compact-show .mapboxgl-ctrl-attrib-inner,.maplibregl-ctrl-attrib.maplibregl-compact .maplibregl-ctrl-attrib-button,.maplibregl-ctrl-attrib.maplibregl-compact-show .maplibregl-ctrl-attrib-inner{display:block}.mapboxgl-ctrl-attrib.mapboxgl-compact-show .mapboxgl-ctrl-attrib-button,.maplibregl-ctrl-attrib.maplibregl-compact-show .maplibregl-ctrl-attrib-button{background-color:rgb(0 0 0/5%)}.mapboxgl-ctrl-bottom-right>.mapboxgl-ctrl-attrib.mapboxgl-compact:after,.maplibregl-ctrl-bottom-right>.maplibregl-ctrl-attrib.maplibregl-compact:after{bottom:0;right:0}.mapboxgl-ctrl-top-right>.mapboxgl-ctrl-attrib.mapboxgl-compact:after,.maplibregl-ctrl-top-right>.maplibregl-ctrl-attrib.maplibregl-compact:after{right:0;top:0}.mapboxgl-ctrl-top-left>.mapboxgl-ctrl-attrib.mapboxgl-compact:after,.maplibregl-ctrl-top-left>.maplibregl-ctrl-attrib.maplibregl-compact:after{left:0;top:0}.mapboxgl-ctrl-bottom-left>.mapboxgl-ctrl-attrib.mapboxgl-compact:after,.maplibregl-ctrl-bottom-left>.maplibregl-ctrl-attrib.maplibregl-compact:after{bottom:0;left:0}} @media screen and (-ms-high-contrast:active){.mapboxgl-ctrl-attrib.mapboxgl-compact:after,.maplibregl-ctrl-attrib.maplibregl-compact:after{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg width='24' height='24' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg' fill-rule='evenodd' fill='%23fff'%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 (-ms-high-contrast:black-on-white){.mapboxgl-ctrl-attrib.mapboxgl-compact:after,.maplibregl-ctrl-attrib.maplibregl-compact:after{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg width='24' height='24' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg' fill-rule='evenodd'%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")}} .mapboxgl-ctrl-attrib a,.maplibregl-ctrl-attrib a{color:rgba(0,0,0,.75);text-decoration:none} .mapboxgl-ctrl-attrib a:hover,.maplibregl-ctrl-attrib a:hover{color:inherit;text-decoration:underline} .mapboxgl-attrib-empty,.maplibregl-attrib-empty{display:none} .mapboxgl-ctrl-scale,.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} .mapboxgl-popup,.maplibregl-popup{display:-webkit-box;display:-ms-flexbox;display:flex;left:0;pointer-events:none;position:absolute;top:0;will-change:transform} .mapboxgl-popup-anchor-top,.mapboxgl-popup-anchor-top-left,.mapboxgl-popup-anchor-top-right,.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} .mapboxgl-popup-anchor-bottom,.mapboxgl-popup-anchor-bottom-left,.mapboxgl-popup-anchor-bottom-right,.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} .mapboxgl-popup-anchor-left,.maplibregl-popup-anchor-left{-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row} .mapboxgl-popup-anchor-right,.maplibregl-popup-anchor-right{-webkit-box-orient:horizontal;-webkit-box-direction:reverse;-ms-flex-direction:row-reverse;flex-direction:row-reverse} .mapboxgl-popup-tip,.maplibregl-popup-tip{border:10px solid transparent;height:0;width:0;z-index:1} .mapboxgl-popup-anchor-top .mapboxgl-popup-tip,.maplibregl-popup-anchor-top .maplibregl-popup-tip{-ms-flex-item-align:center;align-self:center;border-bottom-color:#fff;border-top:none} .mapboxgl-popup-anchor-top-left .mapboxgl-popup-tip,.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} .mapboxgl-popup-anchor-top-right .mapboxgl-popup-tip,.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} .mapboxgl-popup-anchor-bottom .mapboxgl-popup-tip,.maplibregl-popup-anchor-bottom .maplibregl-popup-tip{-ms-flex-item-align:center;align-self:center;border-bottom:none;border-top-color:#fff} .mapboxgl-popup-anchor-bottom-left .mapboxgl-popup-tip,.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} .mapboxgl-popup-anchor-bottom-right .mapboxgl-popup-tip,.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} .mapboxgl-popup-anchor-left .mapboxgl-popup-tip,.maplibregl-popup-anchor-left .maplibregl-popup-tip{-ms-flex-item-align:center;align-self:center;border-left:none;border-right-color:#fff} .mapboxgl-popup-anchor-right .mapboxgl-popup-tip,.maplibregl-popup-anchor-right .maplibregl-popup-tip{-ms-flex-item-align:center;align-self:center;border-left-color:#fff;border-right:none} .mapboxgl-popup-close-button,.maplibregl-popup-close-button{background-color:transparent;border:0;border-radius:0 3px 0 0;cursor:pointer;position:absolute;right:0;top:0} .mapboxgl-popup-close-button:hover,.maplibregl-popup-close-button:hover{background-color:rgb(0 0 0/5%)} .mapboxgl-popup-content,.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} .mapboxgl-popup-anchor-top-left .mapboxgl-popup-content,.maplibregl-popup-anchor-top-left .maplibregl-popup-content{border-top-left-radius:0} .mapboxgl-popup-anchor-top-right .mapboxgl-popup-content,.maplibregl-popup-anchor-top-right .maplibregl-popup-content{border-top-right-radius:0} .mapboxgl-popup-anchor-bottom-left .mapboxgl-popup-content,.maplibregl-popup-anchor-bottom-left .maplibregl-popup-content{border-bottom-left-radius:0} .mapboxgl-popup-anchor-bottom-right .mapboxgl-popup-content,.maplibregl-popup-anchor-bottom-right .maplibregl-popup-content{border-bottom-right-radius:0} .mapboxgl-popup-track-pointer,.maplibregl-popup-track-pointer{display:none} .mapboxgl-popup-track-pointer *,.maplibregl-popup-track-pointer *{pointer-events:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none} .mapboxgl-map:hover .mapboxgl-popup-track-pointer,.maplibregl-map:hover .maplibregl-popup-track-pointer{display:-webkit-box;display:-ms-flexbox;display:flex} .mapboxgl-map:active .mapboxgl-popup-track-pointer,.maplibregl-map:active .maplibregl-popup-track-pointer{display:none} .mapboxgl-marker,.maplibregl-marker{left:0;position:absolute;top:0;will-change:transform} .mapboxgl-user-location-dot,.maplibregl-user-location-dot{background-color:#1da1f2;border-radius:50%;height:15px;width:15px} .mapboxgl-user-location-dot:before,.maplibregl-user-location-dot:before{-webkit-animation:maplibregl-user-location-dot-pulse 2s infinite;animation:maplibregl-user-location-dot-pulse 2s infinite;background-color:#1da1f2;border-radius:50%;content:"";height:15px;position:absolute;width:15px} .mapboxgl-user-location-dot:after,.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} @-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)}} .mapboxgl-user-location-dot-stale,.maplibregl-user-location-dot-stale{background-color:#aaa} .mapboxgl-user-location-dot-stale:after,.maplibregl-user-location-dot-stale:after{display:none} .mapboxgl-user-location-accuracy-circle,.maplibregl-user-location-accuracy-circle{background-color:#1da1f233;border-radius:100%;height:1px;width:1px} .mapboxgl-crosshair,.mapboxgl-crosshair .mapboxgl-interactive,.mapboxgl-crosshair .mapboxgl-interactive:active,.maplibregl-crosshair,.maplibregl-crosshair .maplibregl-interactive,.maplibregl-crosshair .maplibregl-interactive:active{cursor:crosshair} .mapboxgl-boxzoom,.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);bottom:0;color:#fff;display:-webkit-box;display:-ms-flexbox;display:flex;font-size:1.4em;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;left:0;line-height:1.2;opacity:0;padding:1rem;pointer-events:none;position:absolute;right:0;top:0;-webkit-transition:opacity 1s ease 1s;transition:opacity 1s ease 1s} .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), (max-width:480px){.maplibregl-cooperative-gesture-screen .maplibregl-desktop-message{display:none}.maplibregl-cooperative-gesture-screen .maplibregl-mobile-message{display:block}} :root { font-size: 10px; --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; /* 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 */ } @media only percy { :root { --percy-color-avatar: var(--username-colors_1, #ac3ba8); --percy-color-displayName: var(--username-colors_0, #368bd6); --percy-color-replyChain-border: var(--username-colors_0, #368bd6); } } @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 { font-family: "Nunito", "Twemoji", "Apple Color Emoji", "Segoe UI Emoji", "Arial", "Helvetica", sans-serif, "Noto Color Emoji"; font-family: var(--font-family, "Nunito", "Twemoji", "Apple Color Emoji", "Segoe UI Emoji", "Arial", "Helvetica", sans-serif, "Noto Color Emoji"); font-size: 1.5rem; background-color: var(--timeline-background-color); 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: "Inconsolata", "Twemoji", "Apple Color Emoji", "Segoe UI Emoji", "Courier", monospace, "Noto Color Emoji"; font-family: var(--font-family-monospace, "Inconsolata", "Twemoji", "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, #0dbd8b); } .text-muted { color: #a1b2d1; } 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; } h2 { color: var(--timeline-text-color); font-weight: 400; font-size: 1.8rem; margin-top: 16px; margin-bottom: 16px; } a:hover, a:link, a:visited { color: var(--primary-color); } input[type="text"], input[type="search"], input[type="password"] { font-family: inherit; padding: 9px; font-size: 1.4rem; font-weight: 600; font-weight: var(--font-semi-bold); 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(../../img/feather-customised/search-input.1871d4f.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 rgba(var(--timeline-text-color), 0.1); /* 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: rgba(97,112,139, 0.75); } .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: rgba(97,112,139, 0.75); } .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: rgba(97,112,139, 0.75); } .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: rgba(97,112,139, 0.75); } .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: rgba(97,112,139, 0.75); } /*** panels ***/ .dark-panel { background-color: var(--roomlist-background-color); } .dark-panel :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput) > input[type="text"], .dark-panel :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput) > input[type="search"], .dark-panel .mx_textinput { color: #61708b; background-color: var(--timeline-background-color); border: none; } .light-panel :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput) > input[type="text"], .light-panel :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput) > input[type="search"], .light-panel .mx_textinput { color: #61708b; background-color: var(--roomlist-background-color); border: none; } /* 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, #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 { background-color: var(--timeline-background-color); color: var(--timeline-text-secondary-color); z-index: calc(calc(calc(4009 + 1) + 1) + 1); z-index: var(--dialog-zIndex-standard); font-size: 1.5rem; position: relative; padding: 24px; max-height: 80%; -webkit-box-shadow: 2px 15px 30px 0 rgba(0, 0, 0, 0.48); box-shadow: 2px 15px 30px 0 rgba(0, 0, 0, 0.48); border-radius: 8px; overflow-y: auto; } .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; } /* Styles copied/inspired by GroupLayout, ReplyTile, and EventTile variants. */ .mx_Dialog .markdown-body { font-family: inherit !important; white-space: normal !important; line-height: inherit !important; color: inherit; /* inherit the colour from the dark or light theme by default (but not for code blocks) */ font-size: 1.4rem; } .mx_Dialog .markdown-body pre, .mx_Dialog .markdown-body code { font-family: "Inconsolata", "Twemoji", "Apple Color Emoji", "Segoe UI Emoji", "Courier", monospace, "Noto Color Emoji" !important; font-family: var(--font-family-monospace, "Inconsolata", "Twemoji", "Apple Color Emoji", "Segoe UI Emoji", "Courier", monospace, "Noto Color Emoji") !important; background-color: #2a3039; } /* this selector wrongly applies to code blocks too but we will unset it in the next one */ .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; } /* Make h1 and h2 the same size as h3. */ .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 #ddd; 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); opacity: 0.8; 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; } .mx_Dialog_title.danger { color: #ff5b55; color: var(--alert, #ff5b55); } .mx_Dialog_header { position: relative; padding: 3px 0; margin-bottom: 10px; } .mx_Dialog_header.mx_Dialog_headerWithButton > .mx_Dialog_title { text-align: center; } .mx_Dialog_header.mx_Dialog_headerWithCancel { padding-right: 20px; /* leave space for the 'X' cancel button */ } .mx_Dialog_header.mx_Dialog_headerWithCancelOnly { padding: 0 20px 0 0; margin: 0; } .mx_Dialog_cancelButton { -webkit-mask: url(../../img/cancel.12c5c12.svg); mask: url(../../img/cancel.12c5c12.svg); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: cover; mask-size: cover; background-color: #9fa9ba; cursor: pointer; position: unset; width: unset; height: unset; width: 18px; height: 18px; position: absolute; top: 10px; right: 0; } .mx_Dialog_content { margin: 24px 0 68px; font-size: 1.4rem; 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 */ grid-column-gap: 8px; -webkit-column-gap: 8px; -moz-column-gap: 8px; column-gap: 8px; grid-column-gap: var(--buttons-dialog-gap-column); -webkit-column-gap: var(--buttons-dialog-gap-column); -moz-column-gap: var(--buttons-dialog-gap-column); column-gap: var(--buttons-dialog-gap-column); grid-row-gap: 8px; row-gap: 8px; grid-row-gap: var(--buttons-dialog-gap-row); 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. * * Elements that should not be styled like a dialog button are mentioned in a :not() pseudo-class. * For the widest browser support, we use multiple :not pseudo-classes instead of :not(.a, .b). */ .mx_Dialog button:not(.mx_Dialog_nonDialogButton):not([class|="maplibregl"]):not(.mx_AccessibleButton), .mx_Dialog input[type="submit"], .mx_Dialog_buttons button:not(.mx_Dialog_nonDialogButton):not(.mx_AccessibleButton), .mx_Dialog_buttons input[type="submit"] { /* align images in buttons (eg spinners) */ vertical-align: middle; border: 0px; border-radius: 8px; font-family: "Nunito", "Twemoji", "Apple Color Emoji", "Segoe UI Emoji", "Arial", "Helvetica", sans-serif, "Noto Color Emoji"; font-family: var(--font-family, "Nunito", "Twemoji", "Apple Color Emoji", "Segoe UI Emoji", "Arial", "Helvetica", sans-serif, "Noto Color Emoji"); font-size: 1.4rem; color: white; background-color: #0dbd8b; background-color: var(--accent, #0dbd8b); 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_Dialog_nonDialogButton):not([class|="maplibregl"]):not(.mx_AccessibleButton):not(.focus-visible), .mx_Dialog input[type="submit"]:not(.focus-visible), .mx_Dialog_buttons button:not(.mx_Dialog_nonDialogButton):not(.mx_AccessibleButton):not(.focus-visible), .mx_Dialog_buttons input[type="submit"]:not(.focus-visible) { outline: none; } .mx_Dialog button:not(.mx_Dialog_nonDialogButton):not([class|="maplibregl"]):not(.mx_AccessibleButton), .mx_Dialog input[type="submit"], .mx_Dialog_buttons button:not(.mx_Dialog_nonDialogButton):not(.mx_AccessibleButton), .mx_Dialog_buttons input[type="submit"] { margin-left: 0px; margin-right: 8px; margin-right: var(--buttons-dialog-gap-column); margin-bottom: 5px; font-weight: 600; font-weight: var(--font-semi-bold); border: 1px solid #0dbd8b; border: 1px solid var(--accent, #0dbd8b); color: #0dbd8b; color: var(--accent, #0dbd8b); background-color: var(--timeline-background-color); font-family: inherit; } .mx_Dialog button:not(.mx_Dialog_nonDialogButton):not([class|="maplibregl"]):not(.mx_AccessibleButton):last-child { margin-right: 0px; } .mx_Dialog button:not(.mx_Dialog_nonDialogButton):not([class|="maplibregl"]):not(.mx_AccessibleButton):focus, .mx_Dialog input[type="submit"]:focus, .mx_Dialog_buttons button:not(.mx_Dialog_nonDialogButton):not(.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):not([class|="maplibregl"]), .mx_Dialog input[type="submit"].mx_Dialog_primary, .mx_Dialog_buttons button.mx_Dialog_primary:not(.mx_Dialog_nonDialogButton):not(.mx_AccessibleButton), .mx_Dialog_buttons input[type="submit"].mx_Dialog_primary { color: #ffffff; background-color: #0dbd8b; background-color: var(--accent, #0dbd8b); min-width: 156px; } .mx_Dialog button.danger:not(.mx_Dialog_nonDialogButton):not([class|="maplibregl"]), .mx_Dialog input[type="submit"].danger, .mx_Dialog_buttons button.danger:not(.mx_Dialog_nonDialogButton):not(.mx_AccessibleButton), .mx_Dialog_buttons input[type="submit"].danger { background-color: #ff5b55; background-color: var(--alert, #ff5b55); border: solid 1px #ff5b55; border: solid 1px var(--alert, #ff5b55); color: #ffffff; } .mx_Dialog button.warning:not(.mx_Dialog_nonDialogButton):not([class|="maplibregl"]), .mx_Dialog input[type="submit"].warning { border: solid 1px #ff5b55; border: solid 1px var(--alert, #ff5b55); color: #ff5b55; color: var(--alert, #ff5b55); } .mx_Dialog button:not(.mx_Dialog_nonDialogButton):not([class|="maplibregl"]):not(.mx_AccessibleButton):disabled, .mx_Dialog input[type="submit"]:disabled, .mx_Dialog_buttons button:not(.mx_Dialog_nonDialogButton):not(.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 .mx_Dialog { width: 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: 8px; font-family: "Nunito", "Twemoji", "Apple Color Emoji", "Segoe UI Emoji", "Arial", "Helvetica", sans-serif, "Noto Color Emoji"; font-family: var(--font-family, "Nunito", "Twemoji", "Apple Color Emoji", "Segoe UI Emoji", "Arial", "Helvetica", sans-serif, "Noto Color Emoji"); font-size: 1.4rem; color: white; background-color: #0dbd8b; background-color: var(--accent, #0dbd8b); 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: 1.5rem; border-radius: 3px; border: 1px solid #e7e7e7; padding: 9px; color: var(--timeline-text-color); background-color: var(--timeline-background-color); } .mx_button_row { margin-top: 69px; } /* username colors */ /* used by SenderProfile & RoomPreviewBar */ .mx_Username_color1 { color: #368bd6; color: var(--username-colors_0, #368bd6); } .mx_Username_color2 { color: #ac3ba8; color: var(--username-colors_1, #ac3ba8); } .mx_Username_color3 { color: var(--accent-color); color: var(--username-colors_2, var(--accent-color)); } .mx_Username_color4 { color: #e64f7a; color: var(--username-colors_3, #e64f7a); } .mx_Username_color5 { color: #ff812d; color: var(--username-colors_4, #ff812d); } .mx_Username_color6 { color: #2dc2c5; color: var(--username-colors_5, #2dc2c5); } .mx_Username_color7 { color: #5c56f5; color: var(--username-colors_6, #5c56f5); } .mx_Username_color8 { color: #74d12c; color: var(--username-colors_7, #74d12c); } /*Responsive design*/ @media (max-width: 1024px) { .mx_Dialog { width: 60% !important; } .mx_Dialog_fixedWidth { width: auto !important; max-width: auto !important; } } /* Copyright 2022 The Matrix.org Foundation C.I.C. Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0 Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License. */ .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: 600; font-weight: var(--font-semi-bold); } .mx_BeaconListItem_lastUpdated { color: #edf3ff; color: var(--tertiary-content, #edf3ff); font-size: 1rem; } .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; } /* Copyright 2022 The Matrix.org Foundation C.I.C. Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0 Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License. */ .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: 1.2rem; } .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: 1.4rem; 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; } /* Copyright 2022 The Matrix.org Foundation C.I.C. Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0 Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License. */ .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); -webkit-box-shadow: 4px 4px 12px 0 #181b21; box-shadow: 4px 4px 12px 0 #181b21; } /* Copyright 2022 The Matrix.org Foundation C.I.C. Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0 Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License. */ .mx_BeaconViewDialog_wrapper .mx_Dialog { padding: 0px; /* Unset contain and position to allow the close button to appear outside the dialog */ contain: unset; position: unset; } .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: unset; } .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; } /* Copyright 2022 The Matrix.org Foundation C.I.C. Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0 Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License. */ .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); 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; } /* Copyright 2022 The Matrix.org Foundation C.I.C. Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0 Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License. */ .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); -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); height: 12px; } .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-size: 1.4rem; color: #edf3ff; color: var(--secondary-content, #edf3ff); } /* Copyright 2022 The Matrix.org Foundation C.I.C. Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0 Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License. */ .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, #0dbd8b); color: #fff; font-size: 1rem; /* 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); } /* Copyright 2022 The Matrix.org Foundation C.I.C. Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0 Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License. */ .mx_LiveTimeRemaining { color: #edf3ff; color: var(--secondary-content, #edf3ff); font-size: 1.2rem; } /* Copyright 2022 The Matrix.org Foundation C.I.C. Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0 Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License. */ .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: 600 !important; font-weight: var(--font-semi-bold) !important; } /* Copyright 2022 The Matrix.org Foundation C.I.C. Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0 Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License. */ .mx_RoomLiveShareWarning { 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: center; -ms-flex-align: center; align-items: center; -webkit-box-sizing: border-box; box-sizing: border-box; padding: 12px 16px; color: var(--timeline-text-color); background-color: #21262c; background-color: var(--system, #21262c); cursor: pointer; } .mx_RoomLiveShareWarning_icon { height: 32px; width: 32px; margin-right: 8px; } .mx_RoomLiveShareWarning_label { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; font-size: 1.5rem; } .mx_RoomLiveShareWarning_spinner { margin-right: 16px; } .mx_RoomLiveShareWarning_closeButton { -webkit-appearance: none; -moz-appearance: none; appearance: none; background: none; border: none; padding: 0; margin: 0; font-size: inherit; font-family: inherit; line-height: inherit; cursor: pointer; margin-left: 16px; } .mx_RoomLiveShareWarning_stopButton { margin-left: 16px; } .mx_RoomLiveShareWarning_closeButtonIcon { height: 1.8rem; padding: 4px; } /* Copyright 2022 The Matrix.org Foundation C.I.C. Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0 Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License. */ .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 */ /* 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; } /* Copyright 2022 The Matrix.org Foundation C.I.C. Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0 Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License. */ .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); } /* Copyright 2022 The Matrix.org Foundation C.I.C. Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0 Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License. */ .mx_KebabContextMenu_icon { width: 24px; color: #edf3ff; color: var(--secondary-content, #edf3ff); } /* Copyright 2023 The Matrix.org Foundation C.I.C. Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0 Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License. */ .mx_PollDetailHeader { /* override accessiblebutton style*/ font-size: 1.5rem !important; } .mx_PollDetailHeader_icon { height: 15px; width: 15px; margin-right: 8px; vertical-align: middle; } /* Copyright 2023 The Matrix.org Foundation C.I.C. Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0 Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License. */ .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; 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; } /* Copyright 2023 The Matrix.org Foundation C.I.C. Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0 Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License. */ .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; 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: 1.2rem; 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; margin-top: 12px; } .mx_PollListItemEnded_voteCount { /* 6px to match PollOption padding*/ margin: 8px 0 0 6px; } /* Copyright 2015, 2016 OpenMarket Ltd Copyright 2019 - 2023 The Matrix.org Foundation C.I.C. Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0 Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License. */ .mx_AppPermission > div { margin-bottom: 12px; } .mx_AppPermission h4 { margin: 0; padding: 0; } .mx_AppPermission .mx_AppPermission_smallText { font-size: 1.2rem; } .mx_AppPermission .mx_AppPermission_bolder { font-weight: 600; font-weight: var(--font-semi-bold); } .mx_AppPermission .mx_AppPermission_helpIcon { margin-top: 1px; margin-right: 2px; width: 10px; height: 10px; display: inline-block; } .mx_AppPermission .mx_AppPermission_helpIcon::before { display: inline-block; background-color: #0dbd8b; background-color: var(--accent, #0dbd8b); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: 12px; mask-size: 12px; width: 12px; height: 12px; -webkit-mask-position: center; mask-position: center; content: ""; vertical-align: middle; -webkit-mask-image: url(../../img/feather-customised/help-circle.6f50a41.svg); mask-image: url(../../img/feather-customised/help-circle.6f50a41.svg); } .mx_Tooltip.mx_Tooltip--appPermission { -webkit-box-shadow: none; box-shadow: none; background-color: var(--sidebar-color); color: #ffffff; border: none; border-radius: 3px; padding: 6px 8px; } .mx_Tooltip.mx_Tooltip--appPermission.mx_Tooltip--appPermission--dark .mx_Tooltip_chevron::after { border-right-color: var(--sidebar-color); } .mx_Tooltip.mx_Tooltip--appPermission ul { list-style-position: inside; padding-left: 2px; margin-left: 0; } /* Copyright 2022 The Matrix.org Foundation C.I.C. Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0 Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License. */ .mx_FilterDropdown .mx_Dropdown_menu { margin-top: 4px; left: unset; 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 rgba(23, 25, 28, 0.05); box-shadow: 0px 1px 3px rgba(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 { background: #edf3ff; background: 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: 1.2rem; line-height: 1.5rem; color: var(--timeline-text-color); } .mx_FilterDropdown_optionSelectedIcon { height: 14px; width: 14px; position: absolute; top: 8px; left: 0; } .mx_FilterDropdown_optionLabel { font-weight: 600; font-weight: var(--font-semi-bold); display: block; } .mx_FilterDropdown_optionDescription { color: #edf3ff; color: var(--secondary-content, #edf3ff); margin-top: 4px; } /* Copyright 2023 The Matrix.org Foundation C.I.C. Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0 Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License. */ .mx_FilterTabGroup { color: var(--timeline-text-color); } .mx_FilterTabGroup label { margin-right: 12px; cursor: pointer; } .mx_FilterTabGroup label span { display: inline-block; line-height: 2.4rem; } .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, #0dbd8b); font-weight: 600; font-weight: var(--font-semi-bold); /* underline*/ -webkit-box-shadow: 0 1.5px 0 0 currentColor; box-shadow: 0 1.5px 0 0 currentColor; } /* Copyright 2022 The Matrix.org Foundation C.I.C. Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0 Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License. */ .mx_LearnMore_button { margin-left: 4px; } /* Copyright 2022 The Matrix.org Foundation C.I.C. Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0 Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License. */ .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: 2rem; } .mx_EnableLiveShare_button { margin-top: 32px; height: 48px; width: 100%; } /* Copyright 2022 The Matrix.org Foundation C.I.C. Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0 Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License. */ .mx_LiveDurationDropdown { margin-bottom: 16px; } /* Copyright 2022 The Matrix.org Foundation C.I.C. Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0 Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License. */ .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; } /* Copyright 2022 The Matrix.org Foundation C.I.C. Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0 Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License. */ .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: rgba(#21262c, 0.9); background-color: rgba(var(--system, #21262c), 0.9); font-size: 1.2rem; line-height: 1.6rem; --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); } .mx_MapError_icon path { fill: var(--mx-map-error-icon-color); } /* Copyright 2022 The Matrix.org Foundation C.I.C. Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0 Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License. */ .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); } /* Copyright 2022 The Matrix.org Foundation C.I.C. Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0 Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License. */ .mx_Marker_defaultColor { color: #0dbd8b; color: var(--accent, #0dbd8b); } .mx_Marker_border { width: 42px; height: 42px; border-radius: 50%; -webkit-filter: drop-shadow(0px 3px 5px rgba(0, 0, 0, 0.2)); filter: drop-shadow(0px 3px 5px rgba(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; } /* Copyright 2022 The Matrix.org Foundation C.I.C Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0 Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License. */ .mx_ShareDialogButtons { position: absolute; width: 100%; height: 0; top: 0; } .mx_ShareDialogButtons_button { -webkit-appearance: none; -moz-appearance: none; appearance: none; background: none; border: none; padding: 0; margin: 0; font-size: inherit; font-family: inherit; line-height: inherit; cursor: pointer; 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; } .mx_ShareDialogButtons_button:hover, .mx_ShareDialogButtons_button:focus { opacity: 1; } .mx_ShareDialogButtons_button.left { left: 16px; } .mx_ShareDialogButtons_button.right { right: 16px; } .mx_ShareDialogButtons_button-icon { height: 10px; margin-top: 3px; } /* Copyright 2022 The Matrix.org Foundation C.I.C. Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0 Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License. */ .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; grid-row-gap: 12px; 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: 1.5rem; 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, #0dbd8b); } .mx_ShareType_badge { height: 60px; width: 60px; margin-bottom: 20px; background-color: #0dbd8b; background-color: var(--accent, #0dbd8b); border-radius: 50%; border: 14px solid #0dbd8b; border: 14px solid var(--accent, #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, #0dbd8b); } .mx_ShareType_option-icon.Pin { border-color: #0dbd8b; border-color: var(--accent, #0dbd8b); background-color: #0dbd8b; background-color: var(--accent, #0dbd8b); padding: 7px; /* colors icon */ color: white; } /* Copyright 2022 The Matrix.org Foundation C.I.C. Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0 Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License. */ .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; grid-row-gap: 8px; 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); -webkit-box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.25); box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.25); } .mx_ZoomButtons .mx_ZoomButtons_button .mx_ZoomButtons_icon { height: 10px; width: 10px; color: var(--timeline-text-color); } /* Copyright 2022 The Matrix.org Foundation C.I.C. Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0 Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License. */ .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: rgba(#21262c, 0.9); background-color: rgba(var(--system, #21262c), 0.9); 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: 1rem; } .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: rgba(24,27,33, 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; } /* Copyright 2022 The Matrix.org Foundation C.I.C. Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0 Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License. */ .mx_MediaProcessingError_Icon { margin-right: 4px; vertical-align: text-top; } /* Copyright 2022 The Matrix.org Foundation C.I.C. Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0 Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License. */ .mx_WidgetPip { width: 320px; height: 220px; border-radius: 8px; contain: paint; color: #edf3ff; cursor: pointer; } .mx_WidgetPip_header, .mx_WidgetPip_footer { position: absolute; left: 0; height: 60px; width: 100%; -webkit-box-sizing: border-box; box-sizing: border-box; -webkit-transition: opacity ease 0.15s; transition: opacity ease 0.15s; } .mx_WidgetPip:not(:hover) > .mx_WidgetPip_header, .mx_WidgetPip:not(:hover) > .mx_WidgetPip_footer { opacity: 0; } .mx_WidgetPip_header { top: 0; padding: 12px; display: -webkit-box; display: -ms-flexbox; display: flex; font-size: 1.2rem; font-weight: 600; font-weight: var(--font-semi-bold); background: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0.9)), to(rgba(0, 0, 0, 0))); background: linear-gradient(rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0)); } .mx_WidgetPip_backButton { height: 24px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; grid-gap: 12px; gap: 12px; } .mx_WidgetPip_backButton > .mx_Icon { color: #c1c6cd; padding: 0; } .mx_WidgetPip_footer { bottom: 0; padding: 12px 8px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; -webkit-box-align: end; -ms-flex-align: end; align-items: flex-end; background: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0)), to(rgba(0, 0, 0, 0.9))); background: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.9)); } /* Copyright 2023 The Matrix.org Foundation C.I.C. Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0 Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License. */ .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); } .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: 1.2rem; white-space: nowrap; } .mx_PollOption_winnerIcon { height: 12px; width: 12px; color: #0dbd8b; color: var(--accent, #0dbd8b); margin-right: 4px; vertical-align: middle; } .mx_PollOption_checked { border-color: #0dbd8b; border-color: var(--accent, #0dbd8b); /* override checked radio button styling*/ } .mx_PollOption_checked .mx_PollOption_popularityBackground .mx_PollOption_popularityAmount { background-color: #0dbd8b; background-color: var(--accent, #0dbd8b); } /* to show checkmark instead*/ .mx_PollOption_checked .mx_StyledRadioButton_checked input[type="radio"] + div { border-width: 2px; border-color: #0dbd8b; border-color: var(--accent, #0dbd8b); background-color: #0dbd8b; background-color: var(--accent, #0dbd8b); background-image: url(../../img/element-icons/check-white.1e3d7f7.svg); background-size: 12px; background-repeat: no-repeat; background-position: center; } .mx_PollOption_checked .mx_StyledRadioButton_checked input[type="radio"] + div div { visibility: hidden; } /* 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: #6f7882; background-color: var(--quaternary-content, #6f7882); } /* Copyright 2022 The Matrix.org Foundation C.I.C. Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0 Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License. */ .mx_CurrentDeviceSection_deviceDetails { /* align with text of session tile*/ margin-left: 56px; } /* Copyright 2022 The Matrix.org Foundation C.I.C. Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0 Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License. */ .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; -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; grid-gap: 8px; 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; } /* Copyright 2022 The Matrix.org Foundation C.I.C. Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0 Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License. */ .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; -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: 1.2rem; color: #edf3ff; color: var(--secondary-content, #edf3ff); line-height: 1.4rem; margin-top: 4px; } .mx_DeviceDetails_metadataTable { font-size: 1.2rem; 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; grid-gap: 4px; gap: 4px; } .mx_DeviceDetails_pushNotifications { display: block; } .mx_DeviceDetails_pushNotifications .mx_ToggleSwitch { float: right; } /* Copyright 2022 The Matrix.org Foundation C.I.C. Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0 Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License. */ .mx_DeviceExpandDetailsButton { height: 32px; width: 32px; background: transparent; border-radius: 4px; color: #edf3ff; color: var(--secondary-content, #edf3ff); --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: 16px; width: 16px; -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; } /* Copyright 2022 The Matrix.org Foundation C.I.C. Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0 Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License. */ .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: rgba(13,189,139, 0.06); } .mx_DeviceSecurityCard_icon.Unverified { --icon-color: #ff5b55; --background-color: rgba(255,91,85, 0.06); } .mx_DeviceSecurityCard_icon.Inactive { --icon-color: var(--secondary-content, #edf3ff); --background-color: var(--system, #21262c); } .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-size: 1.2rem; color: #edf3ff; color: var(--secondary-content, #edf3ff); } .mx_DeviceSecurityCard_actions { margin-top: 16px; } /* Copyright 2022 The Matrix.org Foundation C.I.C. Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0 Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License. */ .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-size: 1.2rem; color: #edf3ff; color: var(--secondary-content, #edf3ff); line-height: 1.4rem; } .mx_DeviceTile_inactiveIcon { height: 14px; margin-right: 8px; vertical-align: middle; } .mx_DeviceTile_actions { display: grid; grid-gap: 8px; grid-auto-flow: column; margin-left: 8px; } /* Copyright 2022 The Matrix.org Foundation C.I.C. Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0 Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License. */ .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(--system, #21262c); --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: 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); } .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); color: var(--v-icon-color); } .mx_DeviceTypeIcon_verificationIcon.verified { --v-icon-color: #0dbd8b; } .mx_DeviceTypeIcon_verificationIcon.unverified { --v-icon-color: #ff5b55; } /* Copyright 2022 The Matrix.org Foundation C.I.C. Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0 Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License. */ .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; 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; grid-gap: 8px; gap: 8px; } .mx_FilteredDeviceList_deviceDetails { /* align with text of session tile*/ margin-left: 88px; } /* Copyright 2022 The Matrix.org Foundation C.I.C. Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0 Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License. */ .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; grid-gap: 16px; gap: 16px; width: 100%; height: 48px; padding: 0 16px; margin-bottom: 32px; background-color: #21262c; background-color: var(--system, #21262c); border-radius: 8px; color: #edf3ff; color: var(--secondary-content, #edf3ff); } .mx_FilteredDeviceListHeader_label { -webkit-box-flex: 1; -ms-flex: 1 1 100%; flex: 1 1 100%; } /* Copyright 2022 The Matrix.org Foundation C.I.C. Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0 Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License. */ .mx_SecurityRecommendations_spacing { height: 16px; } /* Copyright 2022 The Matrix.org Foundation C.I.C. Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0 Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License. */ .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 .mx_Checkbox_background + div { -webkit-box-flex: 1; -ms-flex: 1 0; flex: 1 0; /* override more specific selector */ margin-left: 16px !important; } /* Copyright 2022 The Matrix.org Foundation C.I.C. Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0 Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License. */ .mx_SettingsSubsection { width: 100%; -webkit-box-sizing: border-box; box-sizing: border-box; } .mx_SettingsSubsection_description { margin-top: 8px; } .mx_SettingsSubsection_text { width: 100%; -webkit-box-sizing: inherit; box-sizing: inherit; font-size: 1.5rem; color: #edf3ff; color: var(--secondary-content, #edf3ff); } .mx_SettingsSubsection_content { width: 100%; display: grid; grid-gap: 8px; /* 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, #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; } /* Copyright 2022 The Matrix.org Foundation C.I.C. Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0 Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License. */ .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; grid-gap: 8px; gap: 8px; } .mx_SettingsSubsectionHeading_heading { -webkit-box-flex: 1; -ms-flex: 1 1 100%; flex: 1 1 100%; } /* Copyright 2022 The Matrix.org Foundation C.I.C. Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0 Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License. */ .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: 600; font-weight: var(--font-semi-bold); font-size: 1.2rem; line-height: 1.5rem; color: #edf3ff; color: var(--secondary-content, #edf3ff); text-transform: uppercase; display: inline-block; margin: 0; } /* Copyright 2022 The Matrix.org Foundation C.I.C. Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0 Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License. */ .mx_Caption { font-size: 1.2rem; color: #edf3ff; color: var(--secondary-content, #edf3ff); } .mx_Caption.mx_Caption_error { color: #ff5b55; color: var(--alert, #ff5b55); } /* Copyright 2022 The Matrix.org Foundation C.I.C. Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0 Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License. */ /* * 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, #0dbd8b); } .mx_Icon_bg-accent-light { background-color: rgba(#0dbd8b, 0.1); background-color: rgba(var(--accent, #0dbd8b), 0.1); } .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; } /* Copyright 2023 The Matrix.org Foundation C.I.C. Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0 Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License. */ .mx_SuccessDialog { text-align: center; } .mx_SuccessDialog .mx_Icon { -webkit-mask-box-image: 16px; mask-border: 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; } /* Copyright 2018 New Vector Ltd Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0 Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License. */ /* 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; } /* Copyright 2022 The Matrix.org Foundation C.I.C. Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0 Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License. */ .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: #368bd6; background-color: var(--username-colors_0, #368bd6); color: #ffffff; font-size: 1.2rem; } .mx_AutocompleteInput_editor_selection_remove_button { padding: 0 4px; } .mx_AutocompleteInput_matches { position: absolute; left: 0; right: 0; background-color: var(--timeline-background-color); 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: 1.2rem; } /* Copyright 2021 New Vector Ltd Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0 Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License. */ .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; } .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; } /* Copyright 2015, 2016 OpenMarket Ltd Copyright 2019 The Matrix.org Foundation C.I.C. Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0 Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License. */ .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: 8px; -webkit-box-shadow: 4px 4px 12px 0 #181b21; box-shadow: 4px 4px 12px 0 #181b21; background-color: var(--timeline-background-color); color: var(--timeline-text-color); position: absolute; font-size: 1.4rem; 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); 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); 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); 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); 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%); } /*Responsive design*/ @media (max-width: 1024px){ /* .mx_ContextualMenu_wrapper{ left: 0 !important; } */ .mx_ContextualMenu_background{ left: 0 !important; } .mx_SpaceCreateMenu_wrapper .mx_ContextualMenu .mx_SpaceCreateMenuType{ width: auto !important; } .mx_SpaceCreateMenu_wrapper .mx_ContextualMenu{ width: 100vw !important; } } /* Copyright 2022 The Matrix.org Foundation C.I.C. Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0 Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License. */ .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: 1.2rem; grid-gap: 8px; gap: 8px; line-height: 1.2em; min-height: 2.4em; } /* Copyright 2015, 2016 OpenMarket Ltd Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0 Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License. */ @-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.8rem; text-align: center; pointer-events: none; background-color: var(--timeline-background-color); 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; } /* Copyright 2016 OpenMarket Ltd Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0 Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License. */ .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; } .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%; } .mx_FilePanel .mx_RoomView_MessageList h2 { display: none; } /* 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. */ .mx_FilePanel .mx_EventTile_avatar { display: none; } /* Overrides for the attachment body tiles */ .mx_FilePanel .mx_EventTile { word-break: break-word; margin-top: 10px; padding-top: 0; } .mx_FilePanel .mx_EventTile .mx_EventTile_line { -webkit-padding-start: 0; padding-inline-start: 0; } .mx_FilePanel .mx_EventTile:hover.mx_EventTile_verified .mx_EventTile_line, .mx_FilePanel .mx_EventTile:hover.mx_EventTile_unverified .mx_EventTile_line, .mx_FilePanel .mx_EventTile:hover.mx_EventTile_unknown .mx_EventTile_line { -webkit-box-shadow: none; box-shadow: none; } .mx_FilePanel .mx_EventTile .mx_MFileBody { line-height: 2.4rem; } .mx_FilePanel .mx_EventTile .mx_MFileBody_download { padding-top: 8px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; font-size: 1.4rem; color: #a1b2d1; } .mx_FilePanel .mx_EventTile .mx_MFileBody_download .mx_MImageBody_size { font-size: 1.4rem; text-align: right; white-space: nowrap; } .mx_FilePanel .mx_EventTile .mx_MFileBody_downloadLink { -webkit-box-flex: 1; -ms-flex: 1 1 auto; flex: 1 1 auto; color: var(--timeline-text-secondary-color); } /* anchor link as wrapper */ .mx_FilePanel .mx_EventTile .mx_EventTile_senderDetailsLink { text-decoration: none; } .mx_FilePanel .mx_EventTile .mx_EventTile_senderDetailsLink .mx_EventTile_senderDetails { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; margin-top: -2px; } .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 { text-align: right; font-size: 1.4rem; } .mx_FilePanel .mx_EventTile_line { -webkit-margin-end: 0; margin-inline-end: 0; -webkit-padding-start: 0; padding-inline-start: 0; } .mx_FilePanel_empty::before { --maskImage: url(../../img/element-icons/room/files.ee097b4.svg); /* See: _RightPanel.pcss */ } /* Copyright 2022 The Matrix.org Foundation C.I.C. Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0 Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License. */ .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: 1.2rem; color: #edf3ff; color: var(--secondary-content, #edf3ff); } .mx_GenericDropdownMenu_button:hover, .mx_GenericDropdownMenu_button[aria-expanded="true"] { background: #6f7882; background: var(--quinary-content, #6f7882); } .mx_GenericDropdownMenu_button::before { content: ""; width: 18px; height: 18px; background: currentColor; -webkit-mask-image: url(../../img/feather-customised/chevron-down.663d060.svg); mask-image: url(../../img/feather-customised/chevron-down.663d060.svg); -webkit-mask-size: 100%; mask-size: 100%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; float: right; } .mx_ContextualMenu_wrapper.mx_GenericDropdownMenu_wrapper .mx_ContextualMenu { position: static; position: initial; font-size: 1.2rem; 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 rgba(23, 25, 28, 0.05); box-shadow: 0 1px 3px rgba(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); 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: 600; font-weight: var(--font-semi-bold); } .mx_ContextualMenu_wrapper.mx_GenericDropdownMenu_wrapper .mx_GenericDropdownMenu_Option.mx_GenericDropdownMenu_Option--header > .mx_GenericDropdownMenu_Option--label span:first-child { font-size: 1.5rem; } .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[aria-checked="true"]::before { content: ""; width: 12px; height: 12px; margin-left: -20px; margin-right: 8px; -webkit-mask-image: url(../../img/feather-customised/check.94da327.svg); mask-image: url(../../img/feather-customised/check.94da327.svg); -webkit-mask-size: 100%; mask-size: 100%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; background-color: var(--timeline-text-color); display: inline-block; vertical-align: middle; } .mx_GenericErrorPage { width: 100%; height: 100%; background-color: #fff; 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_GenericErrorPage_box { display: inline; width: 500px; min-height: 125px; border: 1px solid #f22; padding: 10px 10px 20px; background-color: #fcc; } /* Copyright 2016 OpenMarket Ltd Copyright 2017 Vector Creations Ltd Copyright 2019 New Vector Ltd Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0 Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License. */ .mx_HomePage { max-width: 960px; width: 100%; height: 100%; margin-left: auto; margin-right: auto; } .mx_HomePage_default { text-align: center; display: -webkit-box; display: -ms-flexbox; display: flex; } .mx_HomePage_default .mx_HomePage_default_wrapper { margin: auto; } .mx_HomePage_default img { height: 48px; } .mx_HomePage_default h1 { font-weight: 600; font-weight: var(--font-semi-bold); font-size: 3.2rem; line-height: 4.4rem; margin-bottom: 4px; } .mx_HomePage_default h2 { margin-top: 4px; font-weight: 600; font-weight: var(--font-semi-bold); font-size: 1.8rem; line-height: 2.5rem; color: #a1b2d1; } .mx_HomePage_default .mx_MiniAvatarUploader { margin: 0 auto; } .mx_HomePage_default .mx_HomePage_default_buttons { display: -webkit-box; display: -ms-flexbox; display: flex; margin: 60px auto 0; width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; } .mx_HomePage_default .mx_HomePage_default_buttons .mx_AccessibleButton { padding: 73px 8px 15px; /* top: 20px top padding + 40px icon + 13px margin */ width: 160px; min-height: 132px; margin: 20px; position: relative; display: inline-block; border-radius: 8px; vertical-align: top; word-break: break-word; -webkit-box-sizing: border-box; box-sizing: border-box; font-weight: 600; font-weight: var(--font-semi-bold); font-size: 1.5rem; line-height: 2rem; color: #fff; /* on all themes */ background-color: #0dbd8b; background-color: var(--accent, #0dbd8b); } .mx_HomePage_default .mx_HomePage_default_buttons .mx_AccessibleButton::before { top: 20px; left: 60px; /* (160px-40px)/2 */ width: 40px; height: 40px; content: ""; position: absolute; background-color: #fff; /* on all themes */ -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: contain; mask-size: contain; } .mx_HomePage_default .mx_HomePage_default_buttons .mx_AccessibleButton.mx_HomePage_button_sendDm::before { -webkit-mask-image: url(../../img/element-icons/feedback.94401b2.svg); mask-image: url(../../img/element-icons/feedback.94401b2.svg); } .mx_HomePage_default .mx_HomePage_default_buttons .mx_AccessibleButton.mx_HomePage_button_explore::before { -webkit-mask-image: url(../../img/element-icons/roomlist/explore.3bcee74.svg); mask-image: url(../../img/element-icons/roomlist/explore.3bcee74.svg); } .mx_HomePage_default .mx_HomePage_default_buttons .mx_AccessibleButton.mx_HomePage_button_createGroup::before { -webkit-mask-image: url(../../img/element-icons/group-members.483392b.svg); mask-image: url(../../img/element-icons/group-members.483392b.svg); } /*Responsive Design*/ @media (max-width: 1024px){ .mx_HomePage_default .mx_HomePage_default_buttons .mx_AccessibleButton{ width: 90px !important; margin: 10px !important; } .mx_HomePage_default .mx_HomePage_default_buttons .mx_AccessibleButton::before{ left: 25px !important; } } /* Copyright 2022 The Matrix.org Foundation C.I.C. Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0 Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License. */ .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: unset; -ms-flex: unset; flex: unset; height: auto; margin-bottom: 32px; margin-top: 33vh; } .mx_LargeLoader .mx_LargeLoader_text { font-size: 24px; font-weight: 600; font-weight: var(--font-semi-bold); padding: 0 16px; position: relative; text-align: center; } /* Copyright 2020 The Matrix.org Foundation C.I.C. Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0 Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License. */ .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; /* Contain the amount of layers rendered by constraining what actually needs re-layering via css */ contain: layout paint; } .mx_LeftPanel_wrapper, .mx_LeftPanel { --collapsedWidth: 68px; } .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; } .mx_LeftPanel_wrapper .mx_LeftPanel_wrapper--user[data-collapsed] { } .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 */ .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_RoomListHeader { margin-top: 12px; } .mx_LeftPanel .mx_LeftPanel_roomListContainer .mx_LeftPanel_filterContainer .mx_LeftPanel_dialPadButton { width: 32px; height: 32px; border-radius: 8px; background-color: var(--roomlist-highlights-color); position: relative; margin-left: 8px; } .mx_LeftPanel .mx_LeftPanel_roomListContainer .mx_LeftPanel_filterContainer .mx_LeftPanel_dialPadButton::before { content: ""; position: absolute; top: 8px; left: 8px; width: 16px; height: 16px; -webkit-mask-image: url(../../img/element-icons/call/dialpad.6276d21.svg); mask-image: url(../../img/element-icons/call/dialpad.6276d21.svg); -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; background-color: #edf3ff; background-color: var(--secondary-content, #edf3ff); } .mx_LeftPanel .mx_LeftPanel_roomListContainer .mx_LeftPanel_filterContainer .mx_LeftPanel_exploreButton, .mx_LeftPanel .mx_LeftPanel_roomListContainer .mx_LeftPanel_filterContainer .mx_LeftPanel_recentsButton { width: 32px; height: 32px; border-radius: 8px; background-color: var(--roomlist-highlights-color); position: relative; margin-left: 8px; } .mx_LeftPanel .mx_LeftPanel_roomListContainer .mx_LeftPanel_filterContainer .mx_LeftPanel_exploreButton::before, .mx_LeftPanel .mx_LeftPanel_roomListContainer .mx_LeftPanel_filterContainer .mx_LeftPanel_recentsButton::before { content: ""; position: absolute; top: 8px; left: 8px; width: 16px; height: 16px; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; background-color: #edf3ff; background-color: var(--secondary-content, #edf3ff); } .mx_LeftPanel .mx_LeftPanel_roomListContainer .mx_LeftPanel_filterContainer .mx_LeftPanel_exploreButton:hover, .mx_LeftPanel .mx_LeftPanel_roomListContainer .mx_LeftPanel_filterContainer .mx_LeftPanel_recentsButton:hover { background-color: #edf3ff; background-color: var(--tertiary-content, #edf3ff); } .mx_LeftPanel .mx_LeftPanel_roomListContainer .mx_LeftPanel_filterContainer .mx_LeftPanel_exploreButton:hover::before, .mx_LeftPanel .mx_LeftPanel_roomListContainer .mx_LeftPanel_filterContainer .mx_LeftPanel_recentsButton:hover::before { background-color: var(--timeline-background-color); } .mx_LeftPanel .mx_LeftPanel_roomListContainer .mx_LeftPanel_filterContainer .mx_LeftPanel_exploreButton::before { -webkit-mask-image: url(../../img/element-icons/roomlist/explore.3bcee74.svg); mask-image: url(../../img/element-icons/roomlist/explore.3bcee74.svg); } .mx_LeftPanel .mx_LeftPanel_roomListContainer .mx_LeftPanel_filterContainer .mx_LeftPanel_recentsButton::before { -webkit-mask-image: url(../../img/element-icons/clock.96a6b33.svg); mask-image: url(../../img/element-icons/clock.96a6b33.svg); } .mx_LeftPanel .mx_LeftPanel_roomListContainer .mx_RoomListHeader: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 */ } /* These styles override the defaults for the minimized (66px) layout */ .mx_LeftPanel.mx_LeftPanel_minimized { -webkit-box-flex: 0; -ms-flex-positive: 0; flex-grow: 0; min-width: unset; width: unset !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, .mx_LeftPanel.mx_LeftPanel_minimized .mx_LeftPanel_roomListContainer .mx_LeftPanel_filterContainer .mx_LeftPanel_recentsButton { margin-left: 0; margin-top: 8px; } /**/ .LeftPanel_closeBtn { display: none; } #mobile_Panel { display: none; } /*Responsive design*/ @media (max-width: 1024px) { .mx_LeftPanel_outerWrapper { display: none; } #mobile_Panel { /* border: 2px solid red; */ display: none; position: fixed; top: 0; left: 0; width: 100vw; /* Full viewport width */ height: 100vh; /* Full viewport height */ background-color: #fff; /* Background color */ z-index: 1000; /* High z-index to overlay other content */ -webkit-transition: all 0.3s ease; transition: all 0.3s ease; } /* Smooth transition */ #mobile_Panel .mx_LeftPanel_wrapper--user { width: 100vw; } .LeftPanel_closeBtn { display: none; position: absolute; font-size: 35px; top: 50px; background-color: transparent !important; right: 15px; z-index: 10; } } /* Copyright 2019 New Vector Ltd Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0 Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License. */ .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 { padding: 8px; padding: var(--container-gap-width); /* The resizer should be centered: only half of the gap-width is handled by the right panel. */ /* The other half by the RoomView. */ padding-left: calc(8px / 2); padding-left: calc(var(--container-gap-width) / 2); height: calc(100vh - 51px); } /* height of .mx_RoomHeader.light-panel */ .mx_MainSplit > .mx_RightPanel_ResizeWrapper:hover .mx_ResizeHandle--horizontal::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; } /*Responsive design*/ @media (max-width: 1024px){ .mx_RightPanel_ResizeWrapper{ position: absolute !important; top: 38px; right: 0; height: 90% !important; } } /* Copyright 2015, 2016 OpenMarket Ltd Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0 Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License. */ .mx_MatrixChat_splash { position: relative; height: 100%; } .mx_MatrixChat_splashButtons { text-align: center; width: 100%; position: absolute; bottom: 30px; } .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; } .mx_MatrixChat_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%); } /* 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); -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%; } /* We'd like to remove this, but this makes matrixchat's resizehandle's */ /* negative margin greater than its positive padding. If it's the same */ /* or less, Safari and other WebKit based browsers get confused about overflows somehow and */ /* https://github.com/vector-im/element-web/issues/19863 happens. */ .mx_MatrixChat > .mx_ResizeHandle.mx_ResizeHandle--horizontal { margin: 0 calc(-5.5px - 8px / 2) 0 calc(-6.5px + 8px / 2); margin: 0 calc(-5.5px - var(--container-gap-width) / 2) 0 calc(-6.5px + var(--container-gap-width) / 2); /* The condition to prevent bleeding is: (margin-left + margin-right < -11px) */ /* (IF there is NO margin on the leftPanel_wrapper) */ /* The resizeHandle does not change the gap between the left panel and the room view: */ /* the resizeHandle width is: */ /* 11px = 10px (padding) + 1px (width) */ /* and the total negative margin is -12px -> */ /* the handle requires no space */ /* right: -6px left: -6px positions the element exactly on the edge of leftPanel. */ /* left+=1 and right-=1 => resizeHandle moves 1px to the right closer to the center of the gap. */ /* We want the handle to be in the middle of the gap so it is shifted by (var(--container-gap-width) / 2) */ } .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; } /* Copyright 2023 The Matrix.org Foundation C.I.C. Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0 Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License. */ .mx_MessagePanel_myReadMarker { height: 0; margin: 0; padding: 0; border: 0; } .mx_MessagePanel_myReadMarker hr { border-top: solid 1px #0dbd8b; border-top: solid 1px var(--accent, #0dbd8b); border-bottom: solid 1px #0dbd8b; border-bottom: solid 1px var(--accent, #0dbd8b); margin-top: 0; position: relative; top: -1px; z-index: 1; will-change: width; -webkit-transition: width 400ms easeinsine 1s, opacity 400ms easeinsine 1s; transition: width 400ms easeinsine 1s, opacity 400ms easeinsine 1s; width: 99%; opacity: 1; } /* Copyright 2020 The Matrix.org Foundation C.I.C. Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0 Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License. */ .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: 1.3rem; 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; } /* Copyright 2015, 2016 OpenMarket Ltd Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0 Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License. */ .mx_NotificationPanel_empty::before { --maskImage: url(../../img/element-icons/notifications.b4d3969.svg); /* See: _RightPanel.pcss */ } /* Copyright 2021 The Matrix.org Foundation C.I.C. Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0 Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License. */ .mx_QuickSettingsButton { -webkit-box-flex: 0; -ms-flex: 0 0 auto; flex: 0 0 auto; border-radius: 8px; position: relative; margin: 12px auto; color: #edf3ff; color: var(--secondary-content, #edf3ff); min-width: 32px; min-height: 32px; line-height: 32px; } .mx_QuickSettingsButton.expanded { margin-left: 20px; padding-left: 44px; /* align with toggle collapse button text */ padding-right: 8px; } .mx_QuickSettingsButton::before { content: ""; position: absolute; width: 32px; height: 32px; left: 0; -webkit-mask-image: url(../../img/element-icons/settings.0c529f2.svg); mask-image: url(../../img/element-icons/settings.0c529f2.svg); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: 16px; mask-size: 16px; background: #edf3ff; background: var(--secondary-content, #edf3ff); } .mx_QuickSettingsButton:not(.expanded):hover { background-color: #6f7882; background-color: var(--quaternary-content, #6f7882); } .mx_QuickSettingsButton:not(.expanded):hover::before { background-color: var(--timeline-text-color); } .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: 600; font-weight: var(--font-semi-bold); font-size: 1.5rem; line-height: 2.4rem; color: var(--timeline-text-color); 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: 600; font-weight: var(--font-semi-bold); font-size: 1.2rem; line-height: 1.5rem; text-transform: uppercase; color: #edf3ff; color: var(--tertiary-content, #edf3ff); margin: 20px 0 12px; } .mx_QuickSettingsButton_ContextMenuWrapper .mx_ContextualMenu .mx_QuickSettingsButton_pinToSidebarHeading { padding-left: 24px; position: relative; } .mx_QuickSettingsButton_ContextMenuWrapper .mx_ContextualMenu .mx_Checkbox { margin-bottom: 8px; } .mx_QuickSettingsButton_ContextMenuWrapper .mx_ContextualMenu .mx_QuickSettingsButton_favouritesCheckbox .mx_Checkbox_background + div, .mx_QuickSettingsButton_ContextMenuWrapper .mx_ContextualMenu .mx_QuickSettingsButton_peopleCheckbox .mx_Checkbox_background + div { padding-left: 22px; position: relative; margin-left: 6px; font-size: 1.5rem; line-height: 2.4rem; color: #edf3ff; color: var(--secondary-content, #edf3ff); } .mx_QuickSettingsButton_ContextMenuWrapper .mx_ContextualMenu .mx_QuickSettingsButton_moreOptionsButton { padding-left: 22px; margin-left: 22px; font-size: 1.5rem; line-height: 2.4rem; color: #edf3ff; color: var(--secondary-content, #edf3ff); position: relative; margin-bottom: 16px; } /* TODO remove when all icons have fill=currentColor*/ .mx_QuickSettingsButton_icon * { fill: #edf3ff; fill: var(--secondary-content, #edf3ff); } .mx_QuickSettingsButton_icon { color: #edf3ff; color: var(--secondary-content, #edf3ff); width: 16px; height: 16px; position: absolute; left: 0; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); } /* Copyright 2015, 2016 OpenMarket Ltd Copyright 2020 The Matrix.org Foundation C.I.C. Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0 Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License. */ .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-radius: 8px; padding: 8px 0; padding: var(--container-border-width) 0; -webkit-box-sizing: border-box; box-sizing: border-box; height: 100%; contain: strict; } .mx_RightPanel .mx_RoomView_MessageList { padding: 14px 18px; /* top and bottom is 4px smaller to balance with the padding set above */ } /** Fixme - factor this out with the main header **/ .mx_RightPanel_threadsButton::before { -webkit-mask-image: url(../../img/element-icons/room/thread.b1c1a60.svg); mask-image: url(../../img/element-icons/room/thread.b1c1a60.svg); } .mx_RightPanel_notifsButton::before { -webkit-mask-image: url(../../img/element-icons/notifications.b4d3969.svg); mask-image: url(../../img/element-icons/notifications.b4d3969.svg); -webkit-mask-position: center; mask-position: center; } .mx_RightPanel_roomSummaryButton::before { -webkit-mask-image: url(../../img/element-icons/room/room-summary.a377754.svg); mask-image: url(../../img/element-icons/room/room-summary.a377754.svg); -webkit-mask-position: center; mask-position: center; } .mx_RightPanel_pinnedMessagesButton::before { -webkit-mask-image: url(../../img/element-icons/room/pin.8acecb2.svg); mask-image: url(../../img/element-icons/room/pin.8acecb2.svg); -webkit-mask-position: center; mask-position: center; } .mx_RightPanel_timelineCardButton::before { -webkit-mask-image: url(../../img/element-icons/feedback.94401b2.svg); mask-image: url(../../img/element-icons/feedback.94401b2.svg); -webkit-mask-position: center; mask-position: center; } .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; } .mx_RightPanel_empty { margin-right: -28px; } .mx_RightPanel_empty h2 { font-weight: 700; margin: 16px 0; } .mx_RightPanel_empty h2, .mx_RightPanel_empty p { font-size: 1.4rem; } .mx_RightPanel_empty::before { content: ""; display: block; margin: 11px auto 29px auto; height: 42px; width: 42px; background-color: #a1b2d1; -webkit-mask-image: var(--maskImage); mask-image: var(--maskImage); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: contain; mask-size: contain; -webkit-mask-position: center; mask-position: center; } .mx_RightPanel_scopeHeader { margin: 24px; text-align: center; font-weight: 600; font-weight: var(--font-semi-bold); font-size: 1.8rem; line-height: 2.2rem; } .mx_RightPanel_scopeHeader .mx_BaseAvatar { margin-right: 8px; vertical-align: middle; } .mx_RightPanel_scopeHeader .mx_BaseAvatar_image { border-radius: 8px; } /* Copyright 2020 The Matrix.org Foundation C.I.C. Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0 Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License. */ /* 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: 16px; height: 16px; -webkit-mask: url(../../img/element-icons/roomlist/search.df3ab87.svg); mask: url(../../img/element-icons/roomlist/search.df3ab87.svg); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; background-color: #edf3ff; background-color: var(--secondary-content, #edf3ff); margin-left: 7px; margin-bottom: 2px; -ms-flex-negative: 0; flex-shrink: 0; } .mx_RoomSearch .mx_RoomSearch_spotlightTriggerText { font-size: 1.2rem; line-height: 1.6rem; color: #edf3ff; color: var(--tertiary-content, #edf3ff); -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-weight: 600; font-weight: var(--font-semi-bold); } .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: 1.2rem; line-height: 1.5rem; font-family: inherit; font-weight: 600; font-weight: var(--font-semi-bold); 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); } .mx_RoomSearch:hover .mx_RoomSearch_shortcutPrompt { background-color: var(--timeline-background-color); color: #edf3ff; color: var(--secondary-content, #edf3ff); } .mx_RoomSearch:hover .mx_RoomSearch_icon { background-color: var(--timeline-background-color); } /* Copyright 2015, 2016 OpenMarket Ltd Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0 Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License. */ .mx_RoomStatusBar:not(.mx_RoomStatusBar_unsentMessages) { margin-left: 65px; min-height: 50px; } .mx_RoomStatusBar_typingIndicatorAvatars { width: 52px; margin-top: -1px; text-align: left; } .mx_RoomStatusBar_typingIndicatorAvatars .mx_BaseAvatar_image { margin-right: -12px; border: 1px solid var(--timeline-background-color); } .mx_RoomStatusBar_typingIndicatorAvatars .mx_BaseAvatar_initial { padding-left: 1px; padding-top: 1px; } .mx_RoomStatusBar_typingIndicatorRemaining { display: inline-block; color: #acacac; background-color: #ddd; border: 1px solid var(--timeline-background-color); border-radius: 40px; width: 24px; height: 24px; line-height: 2.4rem; font-size: 0.8em; vertical-align: top; text-align: center; position: absolute; } .mx_RoomStatusBar_scrollDownIndicator { cursor: pointer; padding-left: 1px; } .mx_RoomStatusBar_unreadMessagesBar { padding-top: 10px; color: #ff5b55; color: var(--alert, #ff5b55); cursor: pointer; } .mx_RoomStatusBar_connectionLostBar { display: -webkit-box; display: -ms-flexbox; display: flex; margin-top: 19px; min-height: 58px; } .mx_RoomStatusBar_unsentMessages > div[role="alert"] { /* cheat some basic alignment */ display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; min-height: 70px; margin: 12px; padding-left: 16px; background-color: var(--roomlist-background-color); border-radius: 4px; } .mx_RoomStatusBar_unsentMessages .mx_RoomStatusBar_unsentBadge { margin-right: 12px; } .mx_RoomStatusBar_unsentMessages .mx_RoomStatusBar_unsentBadge .mx_NotificationBadge { /* Override sizing from the default badge */ width: 24px !important; height: 24px !important; border-radius: 24px !important; } .mx_RoomStatusBar_unsentMessages .mx_RoomStatusBar_unsentBadge .mx_NotificationBadge .mx_NotificationBadge_count { font-size: 1.6rem !important; /* override default */ } .mx_RoomStatusBar_unsentMessages .mx_RoomStatusBar_unsentTitle { color: #ff5b55; color: var(--alert, #ff5b55); font-size: 1.5rem; } .mx_RoomStatusBar_unsentMessages .mx_RoomStatusBar_unsentDescription { font-size: 1.2rem; } .mx_RoomStatusBar_unsentMessages .mx_RoomStatusBar_unsentButtonBar { -webkit-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1; text-align: right; margin-right: 22px; color: #a1b2d1; } .mx_RoomStatusBar_unsentMessages .mx_RoomStatusBar_unsentButtonBar .mx_AccessibleButton { padding: 5px 10px; padding-left: 30px; /* 18px for the icon, 2px margin to text, 10px regular padding */ display: inline-block; position: relative; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .mx_RoomStatusBar_unsentMessages .mx_RoomStatusBar_unsentButtonBar .mx_AccessibleButton:nth-child(2) { border-left: 1px solid #a1b2d1; } .mx_RoomStatusBar_unsentMessages .mx_RoomStatusBar_unsentButtonBar .mx_AccessibleButton::before { content: ""; position: absolute; left: 10px; /* inset for regular button padding */ background-color: #a1b2d1; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain; width: 18px; height: 18px; top: 50%; /* text sizes are dynamic */ -webkit-transform: translateY(-50%); transform: translateY(-50%); } .mx_RoomStatusBar_unsentMessages .mx_RoomStatusBar_unsentButtonBar .mx_AccessibleButton.mx_RoomStatusBar_unsentCancelAllBtn::before { -webkit-mask-image: url(../../img/element-icons/trashcan.3e3b8b7.svg); mask-image: url(../../img/element-icons/trashcan.3e3b8b7.svg); } .mx_RoomStatusBar_unsentMessages .mx_RoomStatusBar_unsentButtonBar .mx_AccessibleButton.mx_RoomStatusBar_unsentRetry { padding-left: 34px; } /* 28px from above, but +6px to account for the wider icon */ .mx_RoomStatusBar_unsentMessages .mx_RoomStatusBar_unsentButtonBar .mx_AccessibleButton.mx_RoomStatusBar_unsentRetry::before { -webkit-mask-image: url(../../img/element-icons/retry.2bad236.svg); mask-image: url(../../img/element-icons/retry.2bad236.svg); } .mx_RoomStatusBar_unsentMessages .mx_RoomStatusBar_unsentButtonBar .mx_InlineSpinner { vertical-align: middle; margin-right: 5px; top: 1px; } /* just to help the vertical alignment be slightly better */ .mx_RoomStatusBar_unsentMessages .mx_RoomStatusBar_unsentButtonBar .mx_InlineSpinner + span { margin-right: 10px; /* same margin/padding as the rightmost button */ } .mx_RoomStatusBar_connectionLostBar svg { padding-left: 10px; padding-right: 10px; vertical-align: middle; float: left; } .mx_RoomStatusBar_connectionLostBar_title { color: #ff5b55; color: var(--alert, #ff5b55); } .mx_RoomStatusBar_connectionLostBar_desc { color: var(--timeline-text-color); font-size: 1.3rem; opacity: 0.5; padding-bottom: 20px; } .mx_RoomStatusBar_resend_link { color: var(--timeline-text-color) !important; text-decoration: underline !important; cursor: pointer; } .mx_RoomStatusBar_typingBar { height: 50px; line-height: 5rem; color: var(--timeline-text-color); opacity: 0.5; overflow-y: hidden; display: block; } .mx_MatrixChat_useCompactLayout .mx_RoomStatusBar:not(.mx_RoomStatusBar_unsentMessages) { min-height: 40px; } .mx_MatrixChat_useCompactLayout .mx_RoomStatusBar_indicator { margin-top: 10px; } .mx_MatrixChat_useCompactLayout .mx_RoomStatusBar_typingBar { height: 40px; line-height: 4rem; } /* Copyright 2015, 2016 OpenMarket Ltd Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0 Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License. */ :root { --RoomView_MessageList-padding: 18px; } .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; } .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.fd4568d.gif); background-position: center 367px; background-size: 25px; background-repeat: no-repeat; position: relative; } .mx_RoomView_messagePanelSearchSpinner::before { background-color: var(--timeline-text-secondary-color); -webkit-mask: url(../../img/feather-customised/search-input.1871d4f.svg); mask: url(../../img/feather-customised/search-input.1871d4f.svg); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: 50px; mask-size: 50px; content: ""; position: absolute; top: 286px; left: 0; right: 0; height: 50px; } .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; } .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); 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: 1.3rem; 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; } /* Rooms with immersive content */ .mx_RoomView_immersive .mx_RoomHeader_wrapper { border: unset; } .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; } @-webkit-keyframes mx_Indicator_pulse { 0% { -webkit-transform: scale(0.95); transform: scale(0.95); } 70% { -webkit-transform: scale(1); transform: scale(1); } 100% { -webkit-transform: scale(0.95); transform: scale(0.95); } } @keyframes mx_Indicator_pulse { 0% { -webkit-transform: scale(0.95); transform: scale(0.95); } 70% { -webkit-transform: scale(1); transform: scale(1); } 100% { -webkit-transform: scale(0.95); transform: scale(0.95); } } @-webkit-keyframes mx_Indicator_pulse_shadow { 0% { opacity: 0.7; } 70% { -webkit-transform: scale(2.2); transform: scale(2.2); opacity: 0; } 100% { opacity: 0; } } @keyframes mx_Indicator_pulse_shadow { 0% { opacity: 0.7; } 70% { -webkit-transform: scale(2.2); transform: scale(2.2); opacity: 0; } 100% { opacity: 0; } } .mx_Indicator { position: absolute; right: -3px; top: -3px; width: 8px; width: var(--RoomHeader-indicator-dot-size); height: 8px; height: var(--RoomHeader-indicator-dot-size); border-radius: 50%; -webkit-transform: scale(1); transform: scale(1); background: rgba(#ff5b55, 1); background: rgba(var(--RoomHeader-indicator-pulseColor), 1); -webkit-box-shadow: 0 0 0 0 rgba(#ff5b55, 1); box-shadow: 0 0 0 0 rgba(#ff5b55, 1); -webkit-box-shadow: 0 0 0 0 rgba(var(--RoomHeader-indicator-pulseColor), 1); box-shadow: 0 0 0 0 rgba(var(--RoomHeader-indicator-pulseColor), 1); -webkit-animation: mx_Indicator_pulse 2s infinite; animation: mx_Indicator_pulse 2s infinite; -webkit-animation-iteration-count: 1; animation-iteration-count: 1; } .mx_Indicator::after { content: ""; position: absolute; width: inherit; height: inherit; top: 0; left: 0; -webkit-transform: scale(1); transform: scale(1); -webkit-transform-origin: center center; transform-origin: center center; -webkit-animation-name: mx_Indicator_pulse_shadow; animation-name: mx_Indicator_pulse_shadow; -webkit-animation-duration: inherit; animation-duration: inherit; -webkit-animation-iteration-count: inherit; animation-iteration-count: inherit; border-radius: 50%; background: inherit; } /* Copyright 2015, 2016 OpenMarket Ltd Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0 Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License. */ .mx_SearchBox { -webkit-box-flex: 1; -ms-flex: 1 1 0px; flex: 1 1 0; min-width: 0; } .mx_SearchBox.mx_SearchBox_blurred:not(:hover) { background-color: transparent; } .mx_SearchBox .mx_SearchBox_closeButton { cursor: pointer; background-image: url(../../img/icons-close.dbfb7ae.svg); background-repeat: no-repeat; width: 16px; height: 16px; background-position: center; padding: 9px; } /* Copyright 2021 The Matrix.org Foundation C.I.C. Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0 Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License. */ .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: 1.5rem; line-height: 2.4rem; 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; grid-gap: 12px; gap: 12px; font-size: 1.5rem; line-height: 2.4rem; color: var(--timeline-text-color); margin-bottom: 12px; } .mx_SpaceRoomView_landing .mx_SpaceHierarchy_listHeader .mx_SpaceHierarchy_listHeader_header { grid-column-start: 1; font-weight: 600; font-weight: var(--font-semi-bold); 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; grid-gap: 12px; 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: 600; font-weight: var(--font-semi-bold); color: #ff5b55; color: var(--alert, #ff5b55); font-size: 1.5rem; line-height: 1.8rem; 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(../../img/element-icons/warning-badge.3cf4d1a.svg); background-size: cover; background-repeat: no-repeat; } .mx_SpaceRoomView_landing .mx_SpaceHierarchy_roomCount > h3 { display: inline; font-weight: 600; font-weight: var(--font-semi-bold); font-size: 1.8rem; line-height: 2.2rem; color: var(--timeline-text-color); } .mx_SpaceRoomView_landing .mx_SpaceHierarchy_roomCount > span { margin-left: 8px; font-size: 1.5rem; line-height: 2.4rem; color: #edf3ff; color: var(--secondary-content, #edf3ff); } .mx_SpaceRoomView_landing .mx_SpaceHierarchy_subspace .mx_BaseAvatar_image { border-radius: 8px; } .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); } .mx_SpaceRoomView_landing .mx_SpaceHierarchy_subspace_toggle::before { content: ""; position: absolute; top: 0; left: 0; height: 16px; width: 16px; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; background-color: #edf3ff; background-color: var(--tertiary-content, #edf3ff); -webkit-mask-size: 16px; mask-size: 16px; -webkit-transform: rotate(270deg); transform: rotate(270deg); -webkit-mask-image: url(../../img/feather-customised/chevron-down.663d060.svg); mask-image: url(../../img/feather-customised/chevron-down.663d060.svg); } .mx_SpaceRoomView_landing .mx_SpaceHierarchy_subspace_toggle.mx_SpaceHierarchy_subspace_toggle_shown::before { -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; grid-gap: 6px 12px; gap: 6px 12px; } .mx_SpaceRoomView_landing .mx_SpaceHierarchy_list li.mx_SpaceHierarchy_roomTileWrapper .mx_SpaceHierarchy_roomTile .mx_SpaceHierarchy_roomTile_item { font-weight: 600; font-weight: var(--font-semi-bold); font-size: 1.5rem; line-height: 1.8rem; 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: 1.2rem; line-height: 1.5rem; } .mx_SpaceRoomView_landing .mx_SpaceHierarchy_list li.mx_SpaceHierarchy_roomTileWrapper .mx_SpaceHierarchy_roomTile .mx_SpaceHierarchy_roomTile_item .mx_SpaceHierarchy_roomTile_name .mx_InfoTooltip .mx_InfoTooltip_icon, .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 .mx_InfoTooltip_icon { margin-right: 4px; position: relative; vertical-align: text-top; } .mx_SpaceRoomView_landing .mx_SpaceHierarchy_list li.mx_SpaceHierarchy_roomTileWrapper .mx_SpaceHierarchy_roomTile .mx_SpaceHierarchy_roomTile_item .mx_SpaceHierarchy_roomTile_name .mx_InfoTooltip .mx_InfoTooltip_icon::before, .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 .mx_InfoTooltip_icon::before { position: absolute; top: 0; left: 0; } .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: inline; position: relative; padding-left: 16px; } .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::before { content: ""; width: 20px; height: 20px; top: -2px; left: -4px; position: absolute; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; background-color: #0dbd8b; background-color: var(--accent, #0dbd8b); -webkit-mask-image: url(../../img/element-icons/roomlist/checkmark.8e909d3.svg); mask-image: url(../../img/element-icons/roomlist/checkmark.8e909d3.svg); } .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-size: 1.4rem; font-weight: normal; font-weight: initial; line-height: 1.8rem; 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; grid-column-gap: 12px; -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: 2.4rem; 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 .mx_SpaceHierarchy_actions .mx_Checkbox { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; } .mx_SpaceRoomView_landing .mx_SpaceHierarchy_list li.mx_SpaceHierarchy_roomTileWrapper .mx_SpaceHierarchy_roomTile .mx_SpaceHierarchy_actions .mx_Checkbox label { width: 16px; height: 16px; } .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: 1.2rem; line-height: 1.5rem; color: #edf3ff; color: var(--secondary-content, #edf3ff); } .mx_SpaceRoomView_landing > hr { border: none; height: 1px; background-color: rgba(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; } /* Copyright 2021 The Matrix.org Foundation C.I.C. Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0 Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License. */ .mx_SpacePanel { --activeBackground-color: var(--roomlist-highlights-color); --activeBorder-color: var(--timeline-text-color); --activeBorder-transparent-gap: 1px; --gutterSize: 16px; --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; /* 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; } .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::before { content: ""; position: absolute; width: inherit; height: inherit; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; background-color: var(--timeline-background-color); -webkit-mask-image: url(../../img/feather-customised/chevron-down.663d060.svg); mask-image: url(../../img/feather-customised/chevron-down.663d060.svg); -webkit-transform: rotate(270deg); transform: rotate(270deg); } .mx_SpacePanel .mx_SpacePanel_toggleCollapse:not(.expanded) { opacity: 0; } .mx_SpacePanel .mx_SpacePanel_toggleCollapse:not(.expanded)::before { -webkit-mask-position: center 1px; mask-position: center 1px; } .mx_SpacePanel .mx_SpacePanel_toggleCollapse.expanded::before { -webkit-transform: rotate(90deg); transform: rotate(90deg); } .mx_SpacePanel:hover .mx_SpacePanel_toggleCollapse { opacity: 1; } .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; -webkit-transform: rotate(-90deg); transform: rotate(-90deg); } .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%; cursor: pointer; } .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_name { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; margin-left: 8px; white-space: nowrap; display: block; text-overflow: ellipsis; overflow: hidden; font-size: 1.4rem; line-height: 1.8rem; } .mx_SpacePanel .mx_SpaceButton .mx_SpaceButton_toggleCollapse { width: var(--gutterSize); padding: 10px 0; min-width: var(--gutterSize); height: 20px; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: 20px; mask-size: 20px; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; background-color: #edf3ff; background-color: var(--tertiary-content, #edf3ff); -webkit-mask-image: url(../../img/feather-customised/chevron-down.663d060.svg); mask-image: url(../../img/feather-customised/chevron-down.663d060.svg); } .mx_SpacePanel .mx_SpaceButton .mx_SpaceButton_icon { width: var(--height-topLevel); min-width: var(--height-topLevel); height: var(--height-topLevel); border-radius: 8px; position: relative; } .mx_SpacePanel .mx_SpaceButton .mx_SpaceButton_icon::before { position: absolute; content: ""; width: var(--height-topLevel); height: var(--height-topLevel); top: 0; left: 0; -webkit-mask-position: center; mask-position: center; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: 18px; mask-size: 18px; } .mx_SpacePanel .mx_SpaceButton.mx_SpaceButton_home .mx_SpaceButton_icon, .mx_SpacePanel .mx_SpaceButton.mx_SpaceButton_favourites .mx_SpaceButton_icon, .mx_SpacePanel .mx_SpaceButton.mx_SpaceButton_people .mx_SpaceButton_icon, .mx_SpacePanel .mx_SpaceButton.mx_SpaceButton_orphans .mx_SpaceButton_icon { background-color: var(--roomlist-highlights-color); } .mx_SpacePanel .mx_SpaceButton.mx_SpaceButton_home .mx_SpaceButton_icon::before, .mx_SpacePanel .mx_SpaceButton.mx_SpaceButton_favourites .mx_SpaceButton_icon::before, .mx_SpacePanel .mx_SpaceButton.mx_SpaceButton_people .mx_SpaceButton_icon::before, .mx_SpacePanel .mx_SpaceButton.mx_SpaceButton_orphans .mx_SpaceButton_icon::before { background-color: #edf3ff; background-color: var(--secondary-content, #edf3ff); } .mx_SpacePanel .mx_SpaceButton.mx_SpaceButton_home .mx_SpaceButton_icon::before { -webkit-mask-image: url(../../img/element-icons/home.70cb677.svg); mask-image: url(../../img/element-icons/home.70cb677.svg); } .mx_SpacePanel .mx_SpaceButton.mx_SpaceButton_favourites .mx_SpaceButton_icon::before { -webkit-mask-image: url(../../img/element-icons/roomlist/favorite.b47f7d4.svg); mask-image: url(../../img/element-icons/roomlist/favorite.b47f7d4.svg); } .mx_SpacePanel .mx_SpaceButton.mx_SpaceButton_people .mx_SpaceButton_icon::before { -webkit-mask-image: url(../../img/element-icons/room/members.3c127a3.svg); mask-image: url(../../img/element-icons/room/members.3c127a3.svg); } .mx_SpacePanel .mx_SpaceButton.mx_SpaceButton_orphans .mx_SpaceButton_icon::before { -webkit-mask-image: url(../../img/element-icons/roomlist/hash-circle.6635c7b.svg); mask-image: url(../../img/element-icons/roomlist/hash-circle.6635c7b.svg); } .mx_SpacePanel .mx_SpaceButton.mx_SpaceButton_new .mx_SpaceButton_icon::before { background-color: var(--timeline-text-color); -webkit-mask-image: url(../../img/element-icons/plus.baac2b4.svg); mask-image: url(../../img/element-icons/plus.baac2b4.svg); -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::before { -webkit-transform: rotate(45deg); transform: rotate(45deg); } .mx_SpacePanel .mx_SpaceButton .mx_BaseAvatar_image { border-radius: 8px; } .mx_SpacePanel .mx_SpaceButton .mx_SpaceButton_menuButton { width: 20px; min-width: 20px; /* yay flex */ height: 20px; margin-top: auto; margin-bottom: auto; display: none; position: absolute; right: 4px; } .mx_SpacePanel .mx_SpaceButton .mx_SpaceButton_menuButton::before { top: 3px; left: 2px; content: ""; width: 16px; height: 16px; position: absolute; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-image: url(../../img/element-icons/context-menu.131c13c.svg); mask-image: url(../../img/element-icons/context-menu.131c13c.svg); background: 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_BaseAvatar:not(.mx_UserMenu_userAvatar_BaseAvatar) .mx_BaseAvatar_initial { color: #edf3ff; color: var(--secondary-content, #edf3ff); border-radius: 8px; background-color: var(--roomlist-highlights-color); font-size: 1.5rem !important; /* override inline style */ font-weight: 600; font-weight: var(--font-semi-bold); line-height: 1.8rem; } .mx_SpacePanel .mx_SpaceTreeLevel .mx_BaseAvatar:not(.mx_UserMenu_userAvatar_BaseAvatar) .mx_BaseAvatar_initial + .mx_BaseAvatar_image { visibility: hidden; } .mx_SpacePanel .mx_SpaceTreeLevel .mx_SpaceTreeLevel { /* Indent subspaces*/ padding-left: 16px; } .mx_SpacePanel .mx_SpaceButton_avatarWrapper { position: relative; } .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); } /* root space buttons are bigger and not indented */ .mx_SpacePanel > .mx_AutoHideScrollbar { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; padding: 0 8px 16px 0; } .mx_SpacePanel > .mx_AutoHideScrollbar > .mx_SpaceButton { height: var(--height-topLevel); } .mx_SpacePanel > .mx_AutoHideScrollbar > .mx_SpaceButton.mx_SpaceButton_active::before { height: var(--height-topLevel); } .mx_SpacePanel > .mx_AutoHideScrollbar > ul { padding-left: 0; } .mx_SpacePanel > .mx_AutoHideScrollbar.mx_IndicatorScrollbar_topOverflow { -webkit-mask-image: -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(5%, black)); -webkit-mask-image: linear-gradient(180deg, transparent, black 5%); mask-image: -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(5%, black)); mask-image: linear-gradient(180deg, transparent, black 5%); } .mx_SpacePanel > .mx_AutoHideScrollbar.mx_IndicatorScrollbar_bottomOverflow { -webkit-mask-image: -webkit-gradient(linear, left top, left bottom, from(black), color-stop(95%, black), to(transparent)); -webkit-mask-image: linear-gradient(180deg, black, black 95%, transparent); mask-image: -webkit-gradient(linear, left top, left bottom, from(black), color-stop(95%, black), to(transparent)); mask-image: linear-gradient(180deg, black, black 95%, transparent); } .mx_SpacePanel > .mx_AutoHideScrollbar.mx_IndicatorScrollbar_topOverflow.mx_IndicatorScrollbar_bottomOverflow { -webkit-mask-image: -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(5%, black), color-stop(95%, black), to(transparent)); -webkit-mask-image: linear-gradient(180deg, transparent, black 5%, black 95%, transparent); mask-image: -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(5%, black), color-stop(95%, black), to(transparent)); mask-image: linear-gradient(180deg, transparent, black 5%, black 95%, transparent); } .mx_SpacePanel .mx_UserMenu { padding: 0 2px 8px; border-bottom: 1px solid #6f7882; border-bottom: 1px solid var(--quinary-content, #6f7882); margin: 12px 14px 4px 18px; } .mx_SpacePanel_contextMenu { max-width: 360px; } .mx_SpacePanel_contextMenu .mx_SpacePanel_contextMenu_header { margin: 12px 16px 12px; font-weight: 600; font-weight: var(--font-semi-bold); font-size: 1.5rem; line-height: 1.8rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .mx_SpacePanel_contextMenu .mx_SpacePanel_iconHome::before { -webkit-mask-image: url(../../img/element-icons/home.70cb677.svg); mask-image: url(../../img/element-icons/home.70cb677.svg); } .mx_SpacePanel_contextMenu .mx_SpacePanel_iconInvite::before { -webkit-mask-image: url(../../img/element-icons/room/invite.7232ec2.svg); mask-image: url(../../img/element-icons/room/invite.7232ec2.svg); } .mx_SpacePanel_contextMenu .mx_SpacePanel_iconSettings::before { -webkit-mask-image: url(../../img/element-icons/settings.0c529f2.svg); mask-image: url(../../img/element-icons/settings.0c529f2.svg); } .mx_SpacePanel_contextMenu .mx_SpacePanel_iconLeave::before { -webkit-mask-image: url(../../img/element-icons/leave.9ad00a5.svg); mask-image: url(../../img/element-icons/leave.9ad00a5.svg); } .mx_SpacePanel_contextMenu .mx_SpacePanel_iconMembers::before { -webkit-mask-image: url(../../img/element-icons/room/members.3c127a3.svg); mask-image: url(../../img/element-icons/room/members.3c127a3.svg); } .mx_SpacePanel_contextMenu .mx_SpacePanel_iconPlus::before { -webkit-mask-image: url(../../img/element-icons/plus.baac2b4.svg); mask-image: url(../../img/element-icons/plus.baac2b4.svg); } .mx_SpacePanel_contextMenu .mx_SpacePanel_iconExplore::before { -webkit-mask-image: url(../../img/element-icons/roomlist/hash-search.4e9dba5.svg); mask-image: url(../../img/element-icons/roomlist/hash-search.4e9dba5.svg); } .mx_SpacePanel_contextMenu .mx_SpacePanel_iconPreferences::before { -webkit-mask-image: url(../../img/element-icons/settings/preference.ee8ee5b.svg); mask-image: url(../../img/element-icons/settings/preference.ee8ee5b.svg); } .mx_SpacePanel_contextMenu .mx_SpacePanel_noIcon { display: none; } .mx_SpacePanel_contextMenu .mx_SpacePanel_noIcon + .mx_IconizedContextMenu_label { padding-left: 5px !important; /* override default iconized label style to align with header */ } .mx_SpacePanel_contextMenu .mx_SpacePanel_contextMenu_separatorLabel { color: #edf3ff; color: var(--tertiary-content, #edf3ff); font-size: 1rem; line-height: 1.2rem; font-weight: 600; font-weight: var(--font-semi-bold); /*margin-left: 8px;*/ } .mx_SpacePanel_sharePublicSpace { margin: 0; } /* Copyright 2021 The Matrix.org Foundation C.I.C. Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0 Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License. */ .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: 2.4rem; font-weight: 600; font-weight: var(--font-semi-bold); 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: 1.5rem; 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: 600; font-weight: var(--font-semi-bold); font-size: 1.2rem; line-height: 1.5rem; 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_header .mx_BaseAvatar .mx_BaseAvatar_image { border-radius: 12px; } .mx_SpaceRoomView .mx_SpaceRoomView_landing .mx_SpaceRoomView_landing_name { margin: 24px 0 16px; font-size: 1.5rem; 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; grid-gap: 12px 0; 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; grid-gap: 12px; gap: 12px; -ms-flex-wrap: wrap; flex-wrap: wrap; line-height: 2.4rem; } .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; grid-gap: 12px 12px; gap: 12px 12px; } .mx_SpaceRoomView .mx_SpaceRoomView_landing .mx_SpaceRoomView_landing_infoBar .mx_SpaceRoomView_landing_infoBar_interactive .mx_FacePile { display: inline-block; } .mx_SpaceRoomView .mx_SpaceRoomView_landing .mx_SpaceRoomView_landing_infoBar .mx_SpaceRoomView_landing_infoBar_interactive .mx_FacePile .mx_FacePile_faces { cursor: pointer; } .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::before, .mx_SpaceRoomView .mx_SpaceRoomView_landing .mx_SpaceRoomView_landing_infoBar .mx_SpaceRoomView_landing_infoBar_interactive .mx_SpaceRoomView_landing_settingsButton::before { position: absolute; content: ""; -webkit-mask-position: center; mask-position: center; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; } .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::before { left: 8px; height: 16px; width: 16px; background: #fff; /* white icon fill */ -webkit-mask-size: 16px; mask-size: 16px; -webkit-mask-image: url(../../img/element-icons/room/invite.7232ec2.svg); mask-image: url(../../img/element-icons/room/invite.7232ec2.svg); } .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::before { left: 0; top: 0; height: 24px; width: 24px; background: #edf3ff; background: var(--tertiary-content, #edf3ff); -webkit-mask-size: contain; mask-size: contain; -webkit-mask-image: url(../../img/element-icons/settings.0c529f2.svg); mask-image: url(../../img/element-icons/settings.0c529f2.svg); } .mx_SpaceRoomView .mx_SpaceRoomView_landing .mx_SpaceRoomView_landing_topic { font-size: 1.5rem; 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_privateScope > .mx_AccessibleButton { 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.7rem; font-weight: 600; font-weight: var(--font-semi-bold); margin: 20px 0; } .mx_SpaceRoomView .mx_SpaceRoomView_privateScope > .mx_AccessibleButton > div { margin-top: 4px; font-weight: normal; font-size: 1.5rem; color: #edf3ff; color: var(--secondary-content, #edf3ff); } .mx_SpaceRoomView .mx_SpaceRoomView_privateScope > .mx_AccessibleButton::before { position: absolute; content: ""; width: 24px; height: 24px; top: 17px; left: 20px; -webkit-mask-position: center; mask-position: center; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: 24px; mask-size: 24px; background-color: #edf3ff; background-color: var(--tertiary-content, #edf3ff); } .mx_SpaceRoomView .mx_SpaceRoomView_privateScope > .mx_AccessibleButton:hover { border-color: #0dbd8b; border-color: var(--accent, #0dbd8b); } .mx_SpaceRoomView .mx_SpaceRoomView_privateScope > .mx_AccessibleButton:hover::before { background-color: #0dbd8b; background-color: var(--accent, #0dbd8b); } .mx_SpaceRoomView .mx_SpaceRoomView_privateScope > .mx_AccessibleButton:hover > span { color: var(--timeline-text-color); } .mx_SpaceRoomView .mx_SpaceRoomView_privateScope .mx_SpaceRoomView_privateScope_justMeButton::before { -webkit-mask-image: url(../../img/element-icons/room/members.3c127a3.svg); mask-image: url(../../img/element-icons/room/members.3c127a3.svg); } .mx_SpaceRoomView .mx_SpaceRoomView_privateScope .mx_SpaceRoomView_privateScope_meAndMyTeammatesButton::before { -webkit-mask-image: url(../../img/element-icons/group-members.483392b.svg); mask-image: url(../../img/element-icons/group-members.483392b.svg); } .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 */ .mx_SpaceRoomView .mx_SpaceRoomView_inviteTeammates .mx_SpaceRoomView_inviteTeammates_buttons .mx_AccessibleButton::before { content: ""; position: absolute; height: 24px; width: 24px; top: 0; left: 0; background-color: #edf3ff; background-color: var(--secondary-content, #edf3ff); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain; } .mx_SpaceRoomView .mx_SpaceRoomView_inviteTeammates .mx_SpaceRoomView_inviteTeammates_buttons .mx_AccessibleButton + .mx_AccessibleButton { margin-left: 32px; } .mx_SpaceRoomView .mx_SpaceRoomView_inviteTeammates .mx_SpaceRoomView_inviteTeammates_buttons .mx_SpaceRoomView_inviteTeammates_inviteDialogButton { color: #0dbd8b; color: var(--accent, #0dbd8b); } .mx_SpaceRoomView .mx_SpaceRoomView_inviteTeammates .mx_SpaceRoomView_inviteTeammates_buttons .mx_SpaceRoomView_inviteTeammates_inviteDialogButton::before { -webkit-mask-image: url(../../img/element-icons/room/invite.7232ec2.svg); mask-image: url(../../img/element-icons/room/invite.7232ec2.svg); background-color: #0dbd8b; background-color: var(--accent, #0dbd8b); } /* Copyright 2022 The Matrix.org Foundation C.I.C. Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0 Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License. */ .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%, hsla(250deg, 76%, 71%, 0.261) 0%, hsla(250deg, 100%, 88%, 0) 100% ), radial-gradient(41.93% 41.93% at 0% 0%, hsla(222deg, 29%, 20%, 0.28) 0%, hsla(250deg, 100%, 88%, 0) 100%), radial-gradient(100% 100% at 0% 0%, hsla(250deg, 100%, 88%, 0.174) 0%, hsla(0deg, 100%, 86%, 0) 100%), radial-gradient(106.35% 96.26% at 100% 0%, hsla(250deg, 100%, 88%, 0.4) 0%, hsla(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.e8beb45.png), -webkit-gradient( linear, left top, left bottom, color-stop(20%, rgba(0, 0, 0, 0.9)), to(rgba(0, 0, 0, 0.2)) ); -webkit-mask: /* mask to dither resulting combined gradient */ url(../../img/noise.e8beb45.png), linear-gradient( to bottom, rgba(0, 0, 0, 0.9) 20%, rgba(0, 0, 0, 0.2) 100% ); mask: /* mask to dither resulting combined gradient */ url(../../img/noise.e8beb45.png), -webkit-gradient( linear, left top, left bottom, color-stop(20%, rgba(0, 0, 0, 0.9)), to(rgba(0, 0, 0, 0.2)) ); mask: /* mask to dither resulting combined gradient */ url(../../img/noise.e8beb45.png), linear-gradient( to bottom, rgba(0, 0, 0, 0.9) 20%, rgba(0, 0, 0, 0.2) 100% ); } /* Copyright 2017 Travis Ralston Copyright 2019 New Vector Ltd Copyright 2021 The Matrix.org Foundation C.I.C. Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0 Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License. */ .mx_TabbedView { margin: 0; padding: 0 0 0 16px; 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: 170px; max-width: 170px; position: fixed; margin: 0; /* Remove the default value */ padding: 0; /* Remove the default value */ } .mx_TabbedView_tabsOnLeft .mx_TabbedView_tabPanel { margin-left: 240px; /* 170px sidebar + 70px padding */ -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } .mx_TabbedView_tabsOnLeft .mx_TabbedView_tabLabel_active { background-color: #0dbd8b; background-color: var(--accent, #0dbd8b); color: #edf3ff; } .mx_TabbedView_tabsOnLeft .mx_TabbedView_tabLabel_active .mx_TabbedView_maskedIcon::before { background-color: #edf3ff; } .mx_TabbedView_tabsOnLeft .mx_TabbedView_maskedIcon { width: 16px; height: 16px; margin-right: 16px; } .mx_TabbedView_tabsOnLeft .mx_TabbedView_maskedIcon::before { -webkit-mask-size: 16px; mask-size: 16px; width: 16px; height: 16px; } .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, #0dbd8b); } .mx_TabbedView_tabsOnTop .mx_TabbedView_tabLabel_active .mx_TabbedView_tabLabel_text { color: #0dbd8b; color: var(--accent, #0dbd8b); } .mx_TabbedView_tabsOnTop .mx_TabbedView_tabLabel_active .mx_TabbedView_maskedIcon::before { background-color: #0dbd8b; background-color: var(--accent, #0dbd8b); } .mx_TabbedView_tabsOnTop .mx_TabbedView_maskedIcon { width: 22px; height: 22px; margin-left: 0px; margin-right: 8px; } .mx_TabbedView_tabsOnTop .mx_TabbedView_maskedIcon::before { -webkit-mask-size: 22px; mask-size: 22px; width: inherit; height: inherit; } .mx_TabbedView_tabLabels { color: var(--timeline-text-color); } .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: 8px; border-radius: 8px; font-size: 1.3rem; position: relative; } .mx_TabbedView_maskedIcon { display: inline-block; } .mx_TabbedView_maskedIcon::before { display: inline-block; background-color: #a1b2d1; background-color: var(--icon-button-color, #a1b2d1); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; content: ""; } .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 */ } /*Responsive design*/ @media (max-width: 1024px){ .mx_TabbedView_tabLabel_text{ display: none; } .mx_TabbedView_tabsOnLeft .mx_TabbedView_maskedIcon{ margin-right: 0px; } .mx_TabbedView_tabsOnLeft .mx_TabbedView_tabPanel { margin-left: 45px !important; } .mx_TabbedView_tabsOnLeft .mx_TabbedView_tabLabels{ width: auto; max-width: auto; } } /* Copyright 2019-2021 The Matrix.org Foundation C.I.C. Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0 Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License. */ .mx_ToastContainer { position: absolute; top: 0; left: 70px; z-index: 101; padding: 4px; display: grid; grid-template-rows: 1fr 14px 6px; } .mx_ToastContainer.mx_ToastContainer_stacked::before { content: ""; margin: 0 4px; grid-row: 2 / 4; grid-column: 1; background-color: #21262c; background-color: var(--system, #21262c); -webkit-box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.5); box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.5); border-radius: 8px; } .mx_ToastContainer .mx_Toast_toast { grid-row: 1 / 3; grid-column: 1; background-color: #21262c; background-color: var(--system, #21262c); color: var(--timeline-text-color); -webkit-box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.5); box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.5); border-radius: 8px; overflow: hidden; display: grid; grid-template-columns: 22px 1fr; grid-column-gap: 8px; -webkit-column-gap: 8px; -moz-column-gap: 8px; column-gap: 8px; grid-row-gap: 4px; row-gap: 4px; padding: 8px; } .mx_ToastContainer .mx_Toast_toast.mx_Toast_hasIcon::before, .mx_ToastContainer .mx_Toast_toast.mx_Toast_hasIcon::after { content: ""; width: 22px; height: 22px; grid-column: 1; grid-row: 1; -webkit-mask-size: 100%; mask-size: 100%; -webkit-mask-position: center; mask-position: center; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; background-size: 100%; background-repeat: no-repeat; } .mx_ToastContainer .mx_Toast_toast.mx_Toast_hasIcon.mx_Toast_icon_verification::after { -webkit-mask-image: url(../../img/e2e/normal.33e0430.svg); mask-image: url(../../img/e2e/normal.33e0430.svg); background-color: var(--timeline-text-color); } /* white infill for the hollow svg mask */ .mx_ToastContainer .mx_Toast_toast.mx_Toast_hasIcon.mx_Toast_icon_verification_warning::before { background-color: #ffffff; -webkit-mask-image: url(../../img/e2e/normal.33e0430.svg); mask-image: url(../../img/e2e/normal.33e0430.svg); -webkit-mask-size: 80%; mask-size: 80%; } .mx_ToastContainer .mx_Toast_toast.mx_Toast_hasIcon.mx_Toast_icon_verification_warning::after { -webkit-mask-image: url(../../img/e2e/warning.d370b49.svg); mask-image: url(../../img/e2e/warning.d370b49.svg); background-color: #ff5b55; } .mx_ToastContainer .mx_Toast_toast.mx_Toast_hasIcon.mx_Toast_icon_secure_backup::after { -webkit-mask-image: url(../../img/feather-customised/secure-backup.6c0a137.svg); mask-image: url(../../img/feather-customised/secure-backup.6c0a137.svg); background-color: var(--timeline-text-color); } .mx_ToastContainer .mx_Toast_toast.mx_Toast_hasIcon.mx_Toast_icon_labs::after { -webkit-mask-image: url(../../img/element-icons/flask.468e13e.svg); mask-image: url(../../img/element-icons/flask.468e13e.svg); background-color: #edf3ff; background-color: var(--secondary-content, #edf3ff); } .mx_ToastContainer .mx_Toast_toast.mx_Toast_hasIcon .mx_Toast_title, .mx_ToastContainer .mx_Toast_toast.mx_Toast_hasIcon .mx_Toast_body { grid-column: 2; } .mx_ToastContainer .mx_Toast_toast:not(.mx_Toast_hasIcon) { padding-left: 12px; } .mx_ToastContainer .mx_Toast_toast:not(.mx_Toast_hasIcon) .mx_Toast_title { grid-column: 1 / -1; } .mx_ToastContainer .mx_Toast_toast .mx_Toast_title, .mx_ToastContainer .mx_Toast_toast .mx_Toast_description { padding-right: 8px; } .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; grid-column-gap: 8px; -webkit-column-gap: 8px; -moz-column-gap: 8px; column-gap: 8px; width: 100%; -webkit-box-sizing: border-box; box-sizing: border-box; } .mx_ToastContainer .mx_Toast_toast .mx_Toast_title h2 { margin: 0; font-size: 1.5rem; font-weight: 600; font-weight: var(--font-semi-bold); display: inline; width: auto; } .mx_ToastContainer .mx_Toast_toast .mx_Toast_title .mx_Toast_title_countIndicator { font-size: 1.2rem; line-height: 2.2rem; color: #edf3ff; color: var(--secondary-content, #edf3ff); -webkit-margin-start: auto; margin-inline-start: auto; /* on the end side of the div */ } .mx_ToastContainer .mx_Toast_toast .mx_Toast_body { grid-column: 1 / 3; 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; grid-column-gap: 5px; -webkit-column-gap: 5px; -moz-column-gap: 5px; column-gap: 5px; } .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: 4px 0 11px 0; font-size: 1.2rem; } .mx_ToastContainer .mx_Toast_toast .mx_Toast_description a { text-decoration: none; } .mx_ToastContainer .mx_Toast_toast .mx_Toast_detail { color: #edf3ff; color: var(--secondary-content, #edf3ff); } .mx_ToastContainer .mx_Toast_toast .mx_Toast_deviceID { font-size: 1rem; } /* Copyright 2015, 2016, 2021 The Matrix.org Foundation C.I.C. Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0 Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License. */ .mx_UploadBar { padding-left: 65px; /* line up with the shield area in the composer */ position: relative; } .mx_UploadBar .mx_ProgressBar { width: calc(100% - 40px); /* cheating at a right margin */ } .mx_ThreadView .mx_UploadBar { padding-left: 0; } .mx_UploadBar_filename { margin-top: 5px; color: #a1b2d1; position: relative; padding-left: 22px; /* 18px for icon, 4px for padding */ font-size: 1.5rem; vertical-align: middle; } .mx_UploadBar_filename::before { content: ""; height: 18px; width: 18px; position: absolute; top: 0; left: 0; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; background-color: #a1b2d1; -webkit-mask-image: url(../../img/element-icons/upload.ea7aa85.svg); mask-image: url(../../img/element-icons/upload.ea7aa85.svg); } .mx_UploadBar_cancel { position: absolute; top: 0; right: 0; height: 16px; width: 16px; margin-right: 16px; /* align over rightmost button in composer */ -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; background-color: #a1b2d1; -webkit-mask-image: url(../../img/icons-close.dbfb7ae.svg); mask-image: url(../../img/icons-close.dbfb7ae.svg); } /* Copyright 2020 The Matrix.org Foundation C.I.C. Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0 Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License. */ .mx_UserMenu { -webkit-box-sizing: border-box; box-sizing: border-box; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .mx_UserMenu .mx_AccessibleButton { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .mx_UserMenu .mx_AccessibleButton .mx_UserMenu_userAvatar { position: relative; } .mx_UserMenu .mx_AccessibleButton .mx_UserMenu_userAvatar .mx_BaseAvatar { pointer-events: none; /* makes the avatar non-draggable */ } .mx_UserMenu .mx_AccessibleButton .mx_UserMenu_userAvatarLive { -webkit-box-align: center; -ms-flex-align: center; align-items: center; background-color: #ff5b55; background-color: var(--alert, #ff5b55); border-radius: 6px; color: #ffffff; display: -webkit-box; display: -ms-flexbox; display: flex; height: 12px; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; left: 25px; position: absolute; top: 20px; width: 12px; } .mx_UserMenu .mx_UserMenu_name { font-weight: 600; font-weight: var(--font-semi-bold); font-size: 1.5rem; line-height: 2.4rem; margin-left: 10px; } .mx_UserMenu .mx_UserMenu_dndBadge { position: absolute; bottom: -2px; right: -7px; width: 16px; height: 16px; border-radius: 50%; } .mx_UserMenu .mx_UserMenu_dndBadge::before { content: ""; width: 16px; height: 16px; position: absolute; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; background-color: #ff5b55; background-color: var(--alert, #ff5b55); -webkit-mask-image: url(../../img/element-icons/roomlist/dnd.87c6c88.svg); mask-image: url(../../img/element-icons/roomlist/dnd.87c6c88.svg); } .mx_IconizedContextMenu.mx_UserMenu_contextMenu { width: 258px; } .mx_UserMenu_contextMenu.mx_IconizedContextMenu .mx_IconizedContextMenu_optionList_red .mx_AccessibleButton { padding-top: 16px; padding-bottom: 16px; } .mx_UserMenu_contextMenu .mx_UserMenu_contextMenu_header { padding: 20px; /* Create a flexbox to organize the header a bit easier */ display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .mx_UserMenu_contextMenu .mx_UserMenu_contextMenu_header .mx_UserMenu_contextMenu_name { /* Create another flexbox of columns to handle large user IDs */ display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; width: calc(100% - 40px); } /* 40px = 32px theme button + 8px margin to theme button */ .mx_UserMenu_contextMenu .mx_UserMenu_contextMenu_header .mx_UserMenu_contextMenu_name .mx_UserMenu_contextMenu_displayName, .mx_UserMenu_contextMenu .mx_UserMenu_contextMenu_header .mx_UserMenu_contextMenu_name .mx_UserMenu_contextMenu_userId { font-size: 1.5rem; /* Automatically grow subelements to fit the container */ -webkit-box-flex: 1; -ms-flex: 1; flex: 1; width: 100%; /* Ellipsize text overflow */ text-overflow: ellipsis; overflow: hidden; white-space: nowrap; } .mx_UserMenu_contextMenu .mx_UserMenu_contextMenu_header .mx_UserMenu_contextMenu_name .mx_UserMenu_contextMenu_displayName { font-weight: bold; line-height: 2rem; } .mx_UserMenu_contextMenu .mx_UserMenu_contextMenu_header .mx_UserMenu_contextMenu_name .mx_UserMenu_contextMenu_userId { line-height: 2.4rem; } .mx_UserMenu_contextMenu .mx_UserMenu_contextMenu_header .mx_UserMenu_contextMenu_themeButton { min-width: 32px; max-width: 32px; width: 32px; height: 32px; margin-left: 8px; border-radius: 32px; background-color: #e3e8f0; cursor: pointer; /* to make alignment easier, create flexbox for the image */ 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_UserMenu_contextMenu .mx_UserMenu_contextMenu_header.mx_UserMenu_contextMenu_guestPrompts { padding-top: 0; display: inline-block; } .mx_UserMenu_contextMenu .mx_UserMenu_contextMenu_header.mx_UserMenu_contextMenu_guestPrompts > span { font-weight: 600; font-weight: var(--font-semi-bold); display: block; } .mx_UserMenu_contextMenu .mx_UserMenu_contextMenu_header.mx_UserMenu_contextMenu_guestPrompts > span + span { margin-top: 8px; } .mx_UserMenu_contextMenu .mx_IconizedContextMenu_icon { width: 16px; height: 16px; display: block; } .mx_UserMenu_contextMenu .mx_IconizedContextMenu_icon::before { content: ""; width: 16px; height: 16px; display: block; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; background: var(--timeline-text-color); } .mx_UserMenu_contextMenu .mx_UserMenu_iconHome::before { -webkit-mask-image: url(../../img/element-icons/home.70cb677.svg); mask-image: url(../../img/element-icons/home.70cb677.svg); } .mx_UserMenu_contextMenu .mx_UserMenu_iconDnd::before { -webkit-mask-image: url(../../img/element-icons/roomlist/dnd.87c6c88.svg); mask-image: url(../../img/element-icons/roomlist/dnd.87c6c88.svg); } .mx_UserMenu_contextMenu .mx_UserMenu_iconDndOff::before { -webkit-mask-image: url(../../img/element-icons/roomlist/dnd-cross.d9423bf.svg); mask-image: url(../../img/element-icons/roomlist/dnd-cross.d9423bf.svg); } .mx_UserMenu_contextMenu .mx_UserMenu_iconBell::before { -webkit-mask-image: url(../../img/element-icons/notifications.b4d3969.svg); mask-image: url(../../img/element-icons/notifications.b4d3969.svg); } .mx_UserMenu_contextMenu .mx_UserMenu_iconLock::before { -webkit-mask-image: url(../../img/element-icons/security.56b436c.svg); mask-image: url(../../img/element-icons/security.56b436c.svg); } .mx_UserMenu_contextMenu .mx_UserMenu_iconSettings::before { -webkit-mask-image: url(../../img/element-icons/settings.0c529f2.svg); mask-image: url(../../img/element-icons/settings.0c529f2.svg); } .mx_UserMenu_contextMenu .mx_UserMenu_iconMessage::before { -webkit-mask-image: url(../../img/element-icons/feedback.94401b2.svg); mask-image: url(../../img/element-icons/feedback.94401b2.svg); } .mx_UserMenu_contextMenu .mx_UserMenu_iconSignOut::before { -webkit-mask-image: url(../../img/element-icons/leave.9ad00a5.svg); mask-image: url(../../img/element-icons/leave.9ad00a5.svg); } .mx_UserMenu_CustomStatusSection { margin: 0 12px 8px; } .mx_UserMenu_CustomStatusSection .mx_UserMenu_CustomStatusSection_field { position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; } .mx_UserMenu_CustomStatusSection .mx_UserMenu_CustomStatusSection_field.mx_UserMenu_CustomStatusSection_field_hasQuery .mx_UserMenu_CustomStatusSection_clear { display: block; } .mx_UserMenu_CustomStatusSection .mx_UserMenu_CustomStatusSection_field > .mx_UserMenu_CustomStatusSection_input { border: 1px solid #0dbd8b; border: 1px solid var(--accent, #0dbd8b); border-radius: 8px; width: 100%; } .mx_UserMenu_CustomStatusSection .mx_UserMenu_CustomStatusSection_field > .mx_UserMenu_CustomStatusSection_input:focus + .mx_UserMenu_CustomStatusSection_clear { display: block; } .mx_UserMenu_CustomStatusSection .mx_UserMenu_CustomStatusSection_field > .mx_UserMenu_CustomStatusSection_clear { display: none; position: absolute; top: 50%; right: 0; -webkit-transform: translateY(-50%); transform: translateY(-50%); width: 16px; height: 16px; margin-right: 8px; background-color: #6f7882; background-color: var(--quinary-content, #6f7882); border-radius: 50%; } .mx_UserMenu_CustomStatusSection .mx_UserMenu_CustomStatusSection_field > .mx_UserMenu_CustomStatusSection_clear::before { content: ""; position: absolute; width: inherit; height: inherit; -webkit-mask-image: url(../../img/feather-customised/x.816c629.svg); mask-image: url(../../img/feather-customised/x.816c629.svg); -webkit-mask-position: center; mask-position: center; -webkit-mask-size: 12px; mask-size: 12px; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; background-color: #edf3ff; background-color: var(--secondary-content, #edf3ff); } .mx_UserMenu_CustomStatusSection > p { font-size: 1.2rem; line-height: 1.5rem; color: #edf3ff; color: var(--secondary-content, #edf3ff); margin: 4px 0; } .mx_UserMenu_CustomStatusSection .mx_AccessibleButton_kind_primary_outline { display: block; } /* Copyright 2015, 2016 OpenMarket Ltd Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0 Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License. */ .mx_ViewSource pre { font-size: 1.2rem; 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.7rem; 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%; } /* Copyright 2020 The Matrix.org Foundation C.I.C. Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0 Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License. */ .mx_CompleteSecurity_header { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .mx_CompleteSecurity_headerIcon { width: 24px; height: 24px; margin-right: 4px; position: relative; } .mx_CompleteSecurity_heroIcon { width: 128px; height: 128px; position: relative; margin: 0 auto; } .mx_CompleteSecurity_skip { -webkit-mask: url(../../img/cancel.12c5c12.svg); mask: url(../../img/cancel.12c5c12.svg); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: cover; mask-size: cover; background-color: #9fa9ba; cursor: pointer; position: unset; width: unset; height: unset; width: 18px; height: 18px; position: absolute; right: 24px; } .mx_CompleteSecurity_body { font-size: 1.5rem; } .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: 2.8rem; } .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); } /* Copyright 2015, 2016 OpenMarket Ltd Copyright 2019 New Vector Ltd Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0 Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License. */ .mx_Login_submit { /* align images in buttons (eg spinners) */ vertical-align: middle; border: 0px; border-radius: 8px; font-family: "Nunito", "Twemoji", "Apple Color Emoji", "Segoe UI Emoji", "Arial", "Helvetica", sans-serif, "Noto Color Emoji"; font-family: var(--font-family, "Nunito", "Twemoji", "Apple Color Emoji", "Segoe UI Emoji", "Arial", "Helvetica", sans-serif, "Noto Color Emoji"); font-size: 1.4rem; color: white; background-color: #0dbd8b; background-color: var(--accent, #0dbd8b); width: auto; padding: 7px; padding-left: 1.5em; padding-right: 1.5em; cursor: pointer; display: inline-block; } .mx_Login_submit:not(.focus-visible) { outline: none; } .mx_Login_submit { font-size: 15px; font-weight: 600; font-weight: var(--font-semi-bold); width: 100%; margin-top: 24px; margin-bottom: 24px; -webkit-box-sizing: border-box; box-sizing: border-box; text-align: center; } .mx_Login_submit:disabled { opacity: 0.3; cursor: default; } .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, #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; } /* QR Code Modal Styles */ .mx_QrModal_backdrop { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(0, 0, 0, 0.7); 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; z-index: 4000; -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); } .mx_QrModal_container { background: var(--timeline-background-color); border-radius: 12px; max-width: 500px; width: 90%; max-height: 90vh; overflow-y: auto; -webkit-box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3); box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3); -webkit-animation: modalSlideIn 0.3s ease-out; animation: modalSlideIn 0.3s ease-out; } @-webkit-keyframes modalSlideIn { from { opacity: 0; -webkit-transform: translateY(-20px); transform: translateY(-20px); } to { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); } } @keyframes modalSlideIn { from { opacity: 0; -webkit-transform: translateY(-20px); transform: translateY(-20px); } to { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); } } .mx_QrModal_header { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -ms-flex-align: center; align-items: center; padding: 24px 24px 16px; border-bottom: 1px solid #000000; } .mx_QrModal_header h2 { margin: 0; font-size: 20px; font-weight: 600; color: var(--timeline-text-color); } .mx_QrModal_closeButton { font-size: 24px; color: #edf3ff; color: var(--secondary-content, #edf3ff); background: none; border: none; cursor: pointer; padding: 4px 8px; line-height: 1; } .mx_QrModal_closeButton:hover { color: var(--timeline-text-color); } .mx_QrModal_content { padding: 32px 24px; text-align: center; } .mx_QrModal_loading { 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; grid-gap: 16px; gap: 16px; padding: 40px 0; } .mx_QrModal_loading p { margin: 0; color: #edf3ff; color: var(--secondary-content, #edf3ff); } .mx_QrModal_qrCode { 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; grid-gap: 24px; gap: 24px; } .mx_QrModal_qrImage { width: 280px; height: 280px; border: 2px solid #000000; border-radius: 12px; padding: 16px; background: white; -webkit-box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); } .mx_QrModal_instructions { text-align: left; } .mx_QrModal_instructions h3 { margin: 0 0 16px 0; font-size: 16px; font-weight: 600; color: var(--timeline-text-color); text-align: center; } .mx_QrModal_instructions ol { margin: 0; padding-left: 24px; color: #edf3ff; color: var(--secondary-content, #edf3ff); line-height: 1.8; } .mx_QrModal_instructions ol li { margin-bottom: 8px; } .mx_QrModal_waiting { 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; grid-gap: 8px; gap: 8px; padding: 16px; background: #21262c; background: var(--system, #21262c); border-radius: 8px; color: #edf3ff; color: var(--secondary-content, #edf3ff); font-size: 14px; } .mx_QrModal_success { padding: 40px 0; } .mx_QrModal_success .mx_QrModal_successIcon { width: 64px; height: 64px; margin: 0 auto 16px; background: #0dbd8b; background: var(--accent, #0dbd8b); color: white; border-radius: 50%; 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; font-size: 36px; font-weight: bold; -webkit-animation: successPulse 0.5s ease-out; animation: successPulse 0.5s ease-out; } .mx_QrModal_success p { margin: 0; color: var(--timeline-text-color); font-size: 16px; } @-webkit-keyframes successPulse { 0% { -webkit-transform: scale(0); transform: scale(0); } 50% { -webkit-transform: scale(1.1); transform: scale(1.1); } 100% { -webkit-transform: scale(1); transform: scale(1); } } @keyframes successPulse { 0% { -webkit-transform: scale(0); transform: scale(0); } 50% { -webkit-transform: scale(1.1); transform: scale(1.1); } 100% { -webkit-transform: scale(1); transform: scale(1); } } .mx_QrModal_error { padding: 40px 0; } .mx_QrModal_error p { margin: 0 0 24px 0; color: #ff5b55; color: var(--alert, #ff5b55); font-size: 16px; } .mx_QrModal_error .mx_AccessibleButton { min-width: 200px; } .mx_QrModal_footer { padding: 16px 24px 24px; border-top: 1px solid #000000; text-align: center; } .mx_QrModal_footer .mx_QrModal_helpText { margin: 0; color: #edf3ff; color: var(--secondary-content, #edf3ff); font-size: 14px; } .mx_QrModal_footer .mx_QrModal_helpText a { color: #0dbd8b; color: var(--accent, #0dbd8b); text-decoration: none; } .mx_QrModal_footer .mx_QrModal_helpText a:hover { text-decoration: underline; } /* Confirmation Page Styles - "Continue to your account" */ .mx_Confirmation_backdrop { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(0, 0, 0, 0.7); 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; z-index: 4000; -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); } .mx_Confirmation_container { background: var(--timeline-background-color); border-radius: 16px; max-width: 510px; width: 90%; max-height: 90vh; overflow-y: auto; -webkit-box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3); box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3); -webkit-animation: modalSlideIn 0.3s ease-out; animation: modalSlideIn 0.3s ease-out; padding: 45px 35px 15px 35px; } .mx_Confirmation_header { text-align: center; margin-bottom: 30px; } .mx_Confirmation_icon { font-size: 48px; margin-bottom: 16px; } .mx_Confirmation_header h2 { margin: 0 0 8px 0; font-size: 24px; font-weight: 600; color: var(--timeline-text-color); } .mx_Confirmation_subtitle { margin: 0; color: #edf3ff; color: var(--secondary-content, #edf3ff); font-size: 14px; } .mx_Confirmation_card { border-radius: 12px; padding: 20px 10px; margin-bottom: 15px; } .mx_Confirmation_field { margin-bottom: 16px; } .mx_Confirmation_field:last-child { margin-bottom: 0; } .mx_Confirmation_field label { display: block; font-size: 12px; font-weight: 500; color: #edf3ff; color: var(--secondary-content, #edf3ff); margin-bottom: 6px; text-transform: uppercase; letter-spacing: 0.5px; } .mx_Confirmation_displayName { margin: 0; font-size: 14px; font-weight: 600; color: #ffffff; padding: 8px; } .mx_Confirmation_code { display: block; background: var(--timeline-background-color); padding: 10px 10px; border-radius: 6px; font-size: 13px; word-break: break-all; color: var(--timeline-text-color); } .mx_Confirmation_input { width: 100%; padding: 12px 14px; border: 1px solid #000000; border-radius: 8px; font-size: 15px; background: var(--timeline-background-color); color: var(--timeline-text-color); -webkit-box-sizing: border-box; box-sizing: border-box; -webkit-transition: border-color 0.2s, -webkit-box-shadow 0.2s; transition: border-color 0.2s, -webkit-box-shadow 0.2s; transition: border-color 0.2s, box-shadow 0.2s; transition: border-color 0.2s, box-shadow 0.2s, -webkit-box-shadow 0.2s; } .mx_Confirmation_input:focus { outline: none; border-color: #0dbd8b; border-color: var(--accent, #0dbd8b); -webkit-box-shadow: 0 0 0 3px rgba(48, 82, 255, 0.15); box-shadow: 0 0 0 3px rgba(48, 82, 255, 0.15); } .mx_Confirmation_input::-webkit-input-placeholder { color: #edf3ff; color: var(--tertiary-content, #edf3ff); } .mx_Confirmation_input::-moz-placeholder { color: #edf3ff; color: var(--tertiary-content, #edf3ff); } .mx_Confirmation_input:-ms-input-placeholder { color: #edf3ff; color: var(--tertiary-content, #edf3ff); } .mx_Confirmation_input::-ms-input-placeholder { color: #edf3ff; color: var(--tertiary-content, #edf3ff); } .mx_Confirmation_input::placeholder { color: #edf3ff; color: var(--tertiary-content, #edf3ff); } .mx_Confirmation_input:disabled { opacity: 0.6; cursor: not-allowed; } .mx_Confirmation_hint { margin: 8px 0 0 0; font-size: 12px; color: #edf3ff; color: var(--tertiary-content, #edf3ff); } .mx_Confirmation_notice { display: -webkit-box; display: -ms-flexbox; display: flex; grid-gap: 12px; gap: 12px; background: rgba(48, 82, 255, 0.08); border: 1px solid rgba(48, 82, 255, 0.2); border-radius: 10px; padding: 16px; margin-bottom: 30px; } .mx_Confirmation_noticeIcon { font-size: 20px; -ms-flex-negative: 0; flex-shrink: 0; } .mx_Confirmation_noticeTitle { margin: 0 0 4px 0; font-size: 14px; font-weight: 600; color: #0dbd8b; color: var(--accent, #0dbd8b); } .mx_Confirmation_noticeText { margin: 0; font-size: 13px; color: #edf3ff; color: var(--secondary-content, #edf3ff); line-height: 1.5; } .mx_Confirmation_noticeText strong { color: var(--timeline-text-color); } .mx_Confirmation_buttons { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; grid-gap: 12px; gap: 12px; } .mx_Confirmation_continueButton { width: 91%; padding: 14px 24px !important; font-size: 16px !important; font-weight: 600 !important; 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; grid-gap: 8px; gap: 8px; } .mx_Confirmation_cancelButton { width: 91%; padding: 14px 24px !important; font-size: 16px !important; } /* Copyright 2022 The Matrix.org Foundation C.I.C. Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0 Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License. */ .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-size: 1.4rem; 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 rgba(141, 151, 165, 0.2); } .mx_Register_footerActions > * { -ms-flex-preferred-size: content; flex-basis: content; } /* Copyright 2021 The Matrix.org Foundation C.I.C. Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0 Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License. */ .mx_SetupEncryptionBody_reset { color: var(--timeline-text-secondary-color); margin-top: 1.4rem; } .mx_SetupEncryptionBody_reset .mx_SetupEncryptionBody_reset_link.mx_AccessibleButton_kind_link_inline { color: #ff5b55; color: var(--alert, #ff5b55); } /* Copyright 2021 The Matrix.org Foundation C.I.C. Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0 Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License. */ .mx_MediaBody.mx_AudioPlayer_container { padding: 16px 12px 12px 12px; } .mx_MediaBody.mx_AudioPlayer_container .mx_AudioPlayer_primaryContainer { display: -webkit-box; display: -ms-flexbox; display: flex; } .mx_MediaBody.mx_AudioPlayer_container .mx_AudioPlayer_primaryContainer .mx_PlayPauseButton { margin-right: 8px; } .mx_MediaBody.mx_AudioPlayer_container .mx_AudioPlayer_primaryContainer .mx_AudioPlayer_mediaInfo { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; overflow: hidden; } /* makes the ellipsis on the file name work */ .mx_MediaBody.mx_AudioPlayer_container .mx_AudioPlayer_primaryContainer .mx_AudioPlayer_mediaInfo > * { display: block; } .mx_MediaBody.mx_AudioPlayer_container .mx_AudioPlayer_primaryContainer .mx_AudioPlayer_mediaInfo .mx_AudioPlayer_mediaName { color: var(--timeline-text-color); font-size: 1.5rem; line-height: 1.5rem; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; padding-bottom: 4px; /* mimics the line-height differences in the Figma */ } .mx_MediaBody.mx_AudioPlayer_container .mx_AudioPlayer_primaryContainer .mx_AudioPlayer_mediaInfo .mx_AudioPlayer_byline { font-size: 1.2rem; line-height: 1.2rem; } .mx_MediaBody.mx_AudioPlayer_container .mx_AudioPlayer_seek { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .mx_MediaBody.mx_AudioPlayer_container .mx_AudioPlayer_seek .mx_SeekBar { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; } .mx_MediaBody.mx_AudioPlayer_container .mx_AudioPlayer_seek .mx_Clock { min-width: 4.2rem; /* for flexbox */ padding-left: 4px; /* isolate from seek bar */ text-align: justify; white-space: nowrap; } /* Copyright 2021 The Matrix.org Foundation C.I.C. Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0 Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License. */ .mx_PlayPauseButton { position: relative; width: 32px; height: 32px; min-width: 32px; /* for when the button is used in a flexbox */ min-height: 32px; /* for when the button is used in a flexbox */ border-radius: 32px; background-color: #21262c; background-color: var(--system, #21262c); } .mx_PlayPauseButton::before { content: ""; position: absolute; /* sizing varies by icon */ background-color: #edf3ff; background-color: var(--secondary-content, #edf3ff); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: contain; mask-size: contain; } .mx_PlayPauseButton.mx_PlayPauseButton_disabled::before { opacity: 0.5; } .mx_PlayPauseButton.mx_PlayPauseButton_play::before { width: 13px; height: 16px; top: 8px; /* center */ left: 12px; /* center */ -webkit-mask-image: url(../../img/element-icons/play.f3fe34a.svg); mask-image: url(../../img/element-icons/play.f3fe34a.svg); } .mx_PlayPauseButton.mx_PlayPauseButton_pause::before { width: 10px; height: 12px; top: 10px; /* center */ left: 11px; /* center */ -webkit-mask-image: url(../../img/element-icons/pause.f107420.svg); mask-image: url(../../img/element-icons/pause.f107420.svg); } /* Copyright 2021 - 2022 The Matrix.org Foundation C.I.C. Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0 Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License. */ /* Dev note: there's no actual component called . These classes */ /* are shared amongst multiple voice message components. */ /* Container for live recording and playback controls */ .mx_MediaBody.mx_VoiceMessagePrimaryContainer { /* The waveform (right) has a 1px padding on it that we want to account for, otherwise */ /* inherit from mx_MediaBody */ padding-right: 11px; /* Cheat at alignment a bit */ display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; contain: content; } .mx_MediaBody.mx_VoiceMessagePrimaryContainer .mx_Waveform, .mx_MediaBody.mx_VoiceMessagePrimaryContainer .mx_RecordingPlayback_timelineLayoutMiddle { min-width: 0; /* Prevent a blowout */ } /* Waveforms are present in live recording only */ .mx_MediaBody.mx_VoiceMessagePrimaryContainer .mx_Waveform .mx_Waveform_bar { background-color: #6f7882; background-color: var(--quaternary-content, #6f7882); height: 100%; /* Variable set by a JS component */ -webkit-transform: scaleY(max(0.05, var(--barHeight))); transform: scaleY(max(0.05, var(--barHeight))); } .mx_MediaBody.mx_VoiceMessagePrimaryContainer .mx_Waveform .mx_Waveform_bar.mx_Waveform_bar_100pct { /* Small animation to remove the mechanical feel of progress */ -webkit-transition: background-color 250ms ease; transition: background-color 250ms ease; background-color: #edf3ff; background-color: var(--secondary-content, #edf3ff); } .mx_MediaBody.mx_VoiceMessagePrimaryContainer .mx_Clock { width: 4.2rem; /* we're not using a monospace font, so fake it */ min-width: 4.2rem; /* force sensible layouts in awkward flexboxes (file panel, for example) */ padding-right: 6px; /* with the fixed width this ends up as a visual 8px most of the time, as intended. */ padding-left: 8px; /* isolate from recording circle / play control */ } .mx_MediaBody.mx_VoiceMessagePrimaryContainer .mx_RecordingPlayback_timelineLayoutMiddle { margin-left: 8px; margin-right: 6px; position: relative; display: inline-block; -webkit-box-flex: 1; -ms-flex: 1; flex: 1; height: 30px; } /* same height as mx_Waveform, needed for automatic vertical centering */ .mx_MediaBody.mx_VoiceMessagePrimaryContainer .mx_RecordingPlayback_timelineLayoutMiddle .mx_Waveform { left: 0; top: 0; } .mx_MediaBody.mx_VoiceMessagePrimaryContainer .mx_RecordingPlayback_timelineLayoutMiddle .mx_SeekBar { position: absolute; left: 0; height: 30px; top: -2px; /* visually vertically centered */ /* Hide the hairline progress bar since we're at 100% height. Need to have distinct rules */ /* because CSS is weird. */ background: none; /* Make the thumb easier to see. Like the SeekBar original styles, these need to be */ /* distinct. We make it transparent so it doesn't show up on the UI, but also larger */ } .mx_MediaBody.mx_VoiceMessagePrimaryContainer .mx_RecordingPlayback_timelineLayoutMiddle .mx_SeekBar::before { background: none; } .mx_MediaBody.mx_VoiceMessagePrimaryContainer .mx_RecordingPlayback_timelineLayoutMiddle .mx_SeekBar::-moz-range-progress { background: none; } /* move and drag the thumb regardless of hitting the thumb, however. */ .mx_MediaBody.mx_VoiceMessagePrimaryContainer .mx_RecordingPlayback_timelineLayoutMiddle .mx_SeekBar::-webkit-slider-thumb { width: 10px; height: 10px; background-color: transparent; } /* so it's easier to grab by mouse users in some browsers. Most browsers let the user */ .mx_MediaBody.mx_VoiceMessagePrimaryContainer .mx_RecordingPlayback_timelineLayoutMiddle .mx_SeekBar::-moz-range-thumb { width: 10px; height: 10px; background-color: transparent; } /* For timeline-rendered playback, the clock is on the other side of the waveform. */ .mx_MediaBody.mx_VoiceMessagePrimaryContainer .mx_RecordingPlayback_timelineLayoutMiddle + .mx_Clock { text-align: right; /* Take the padding off the clock because it's accounted for by the `timelineLayoutMiddle` */ padding: 0; } /* Copyright 2021 The Matrix.org Foundation C.I.C. Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0 Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License. */ /* CSS inspiration from: */ /* * https://www.w3schools.com/howto/howto_js_rangeslider.asp */ /* * https://stackoverflow.com/a/28283806 */ /* * https://css-tricks.com/styling-cross-browser-compatible-range-inputs-css/ */ .mx_SeekBar { /* Dev note: we deliberately do not have the -ms-track (and friends) selectors because we don't */ /* need to support IE. */ -webkit-appearance: none; -moz-appearance: none; appearance: none; /* default style override */ width: 100%; height: 1px; background: #6f7882; background: var(--quaternary-content, #6f7882); outline: none; /* remove blue selection border */ position: relative; /* for before+after pseudo elements later on */ cursor: pointer; /* This is for webkit support, but we can't limit the functionality of it to just webkit */ /* browsers. Firefox responds to webkit-prefixed values now, which means we can't use media */ /* Increase clickable area for the slider (approximately same size as browser default) */ /* We do it this way to keep the same padding and margins of the element, avoiding margin math. */ } .mx_SeekBar::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; /* default style override */ /* Dev note: This needs to be duplicated with the -moz-range-thumb selector */ /* because otherwise Edge (webkit) will fail to see the styles and just refuse */ /* to apply them. */ width: 8px; height: 8px; border-radius: 8px; background-color: #edf3ff; background-color: var(--tertiary-content, #edf3ff); cursor: pointer; } .mx_SeekBar::-moz-range-thumb { width: 8px; height: 8px; border-radius: 8px; background-color: #edf3ff; background-color: var(--tertiary-content, #edf3ff); cursor: pointer; /* Firefox adds a border on the thumb */ border: none; } /* in firefox, so it's just wasted CPU/GPU time. */ .mx_SeekBar::before { /* ::before to ensure it ends up under the thumb */ content: ""; background-color: #edf3ff; background-color: var(--tertiary-content, #edf3ff); /* Absolute positioning to ensure it overlaps with the existing bar */ position: absolute; top: 0; left: 0; /* Sizing to match the bar */ width: 100%; height: 1px; /* And finally dynamic width without overly hurting the rendering engine. */ -webkit-transform-origin: 0 100%; transform-origin: 0 100%; -webkit-transform: scaleX(var(--fillTo)); transform: scaleX(var(--fillTo)); } /* This is firefox's built-in support for the above, with 100% less hacks. */ .mx_SeekBar::-moz-range-progress { background-color: #edf3ff; background-color: var(--tertiary-content, #edf3ff); height: 1px; } /* or support queries to selectively apply the rule. An upside is that this CSS doesn't work */ .mx_SeekBar:disabled { opacity: 0.5; } /* Source: https://front-back.com/expand-clickable-areas-for-a-better-touch-experience/ */ .mx_SeekBar::after { content: ""; position: absolute; top: -6px; bottom: -6px; left: 0; right: 0; } /* Copyright 2021 The Matrix.org Foundation C.I.C. Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0 Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License. */ .mx_Waveform { position: relative; height: 30px; /* tallest bar can only be 30px */ top: 1px; /* because of our border trick (see below), we're off by 1px of aligntment */ display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; /* so the bars grow from the middle */ overflow: hidden; /* this is cheaper than a `max-height: calc(100% - 4px)` in the bar's CSS. */ /* A bar is meant to be a 2x2 circle when at zero height, and otherwise a 2px wide line */ } /* with rounded caps. */ .mx_Waveform .mx_Waveform_bar { width: 0; /* 0px width means we'll end up using the border as our width */ border: 1px solid transparent; /* transparent means we'll use the background colour */ border-radius: 2px; /* rounded end caps, based on the border */ min-height: 0; /* like the width, we'll rely on the border to give us height */ max-height: 100%; /* this makes the `height: 42%` work on the element */ margin-left: 1px; /* we want 2px between each bar, so 1px on either side for balance */ margin-right: 1px; /* background color is handled by the parent components */ } /* Copyright 2019 New Vector Ltd Copyright 2020 The Matrix.org Foundation C.I.C. Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0 Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License. */ .mx_AuthBody { width: 500px; font-size: 1.2rem; color: var(--timeline-text-secondary-color); background-color: var(--timeline-background-color); border-radius: 0 4px 4px 0; padding: 25px 60px; -webkit-box-sizing: border-box; box-sizing: border-box; } .mx_AuthBody b { font-weight: 600; font-weight: var(--font-semi-bold); } .mx_AuthBody.mx_AuthBody_flex { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } .mx_AuthBody h1 { font-size: 2.4rem; font-weight: 600; font-weight: var(--font-semi-bold); margin-top: 8px; color: var(--timeline-text-color); } .mx_AuthBody h2 { font-size: 1.4rem; font-weight: 600; font-weight: var(--font-semi-bold); color: var(--timeline-text-secondary-color); } .mx_AuthBody h2.mx_AuthBody_centered { text-align: center; } .mx_AuthBody a:link, .mx_AuthBody a:hover, .mx_AuthBody a:visited { color: #0dbd8b; color: var(--accent, #0dbd8b); text-decoration: none; } .mx_AuthBody fieldset { display: block; } .mx_AuthBody .mx_AuthBody_icon { width: 40px; } .mx_AuthBody .mx_AuthBody_lockIcon { color: #edf3ff; color: var(--secondary-content, #edf3ff); height: 32px; margin-bottom: -3px; /* tweak to align all icons on different forgot password steps*/ } .mx_AuthBody .mx_AuthBody_text { margin-bottom: 48px; margin-top: 0; } .mx_AuthBody input[type="text"], .mx_AuthBody input[type="password"] { color: var(--timeline-text-color); } .mx_AuthBody .mx_Field label { color: var(--timeline-text-secondary-color); } .mx_AuthBody .mx_Field input, .mx_AuthBody .mx_Field select { color: var(--timeline-text-color); background-color: var(--timeline-background-color); } .mx_AuthBody .mx_Field input:not(:-moz-placeholder-shown) + label, .mx_AuthBody .mx_Field textarea:not(:-moz-placeholder-shown) + label { background-color: var(--timeline-background-color); } .mx_AuthBody .mx_Field input:not(:-ms-input-placeholder) + label, .mx_AuthBody .mx_Field textarea:not(:-ms-input-placeholder) + label { background-color: var(--timeline-background-color); } .mx_AuthBody .mx_Field_labelAlwaysTopLeft label, .mx_AuthBody .mx_Field select + label, .mx_AuthBody .mx_Field input:focus + label, .mx_AuthBody .mx_Field input:not(:placeholder-shown) + label, .mx_AuthBody .mx_Field textarea:focus + label, .mx_AuthBody .mx_Field textarea:not(:placeholder-shown) + label { background-color: var(--timeline-background-color); } .mx_AuthBody input.error { color: #ff5b55; color: var(--alert, #ff5b55); } .mx_AuthBody .mx_Login_submit { height: 32px; margin-top: 16px; } .mx_AuthBody .mx_ErrorMessage { margin-bottom: 12px; margin-top: 2px; } .mx_AuthBody .mx_Field input { -webkit-box-sizing: border-box; box-sizing: border-box; } .mx_AuthBody .mx_Field_select::before { background-color: var(--timeline-text-color); } .mx_AuthBody .mx_Dropdown { color: var(--timeline-text-color); } .mx_AuthBody .mx_Dropdown_arrow { background: var(--timeline-text-color); } .mx_AuthBody .mx_Dropdown_menu { background-color: var(--timeline-background-color); } .mx_AuthBody .mx_Dropdown_menu .mx_Dropdown_option_highlight { background-color: #dddddd; } /* specialisation for password reset views */ .mx_AuthBody.mx_AuthBody_forgot-password { font-size: 1.4rem; color: var(--timeline-text-color); padding: 50px 32px; min-height: 600px; } .mx_AuthBody.mx_AuthBody_forgot-password h1 { margin: 24px 0; } .mx_AuthBody.mx_AuthBody_forgot-password .mx_AuthBody_button-container { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .mx_AuthBody.mx_AuthBody_forgot-password .mx_Login_submit { font-weight: 600; font-weight: var(--font-semi-bold); margin: 0 0 16px; } .mx_AuthBody.mx_AuthBody_forgot-password .mx_AuthBody_text { margin-bottom: 32px; } .mx_AuthBody.mx_AuthBody_forgot-password .mx_AuthBody_text p { margin: 0 0 8px; } .mx_AuthBody.mx_AuthBody_forgot-password .mx_AuthBody_sign-in-instead-button { font-weight: 600; font-weight: var(--font-semi-bold); padding: 4px; } .mx_AuthBody.mx_AuthBody_forgot-password .mx_AuthBody_fieldRow { margin-bottom: 24px; } .mx_AuthBody.mx_AuthBody_forgot-password .mx_AccessibleButton.mx_AccessibleButton_hasKind { background: none; } .mx_AuthBody.mx_AuthBody_forgot-password .mx_AccessibleButton.mx_AccessibleButton_hasKind:disabled { cursor: default; opacity: 0.4; } .mx_AuthBody_did-not-receive { -webkit-box-align: center; -ms-flex-align: center; align-items: center; color: #edf3ff; color: var(--secondary-content, #edf3ff); display: -webkit-box; display: -ms-flexbox; display: flex; grid-gap: 8px; gap: 8px; } .mx_AuthBody_resend-button { -webkit-box-align: center; -ms-flex-align: center; align-items: center; border-radius: 8px; color: #0dbd8b; color: var(--accent, #0dbd8b); display: -webkit-box; display: -ms-flexbox; display: flex; grid-gap: 4px; gap: 4px; padding: 4px; } .mx_AuthBody_resend-button:hover { background-color: #21262c; background-color: var(--system, #21262c); } .mx_AuthBody_emailPromptIcon { width: 57px; } .mx_AuthBody_emailPromptIcon--shifted { margin-bottom: -17px; /* Prevent layout jump by relative positioning.*/ position: relative; top: -17px; /* This icon is higher than the other icons. Shift up to prevent icon jumping.*/ width: 57px; } .mx_AuthBody_fieldRow { display: -webkit-box; display: -ms-flexbox; display: flex; margin-bottom: 10px; } .mx_AuthBody_fieldRow > .mx_Field { margin: 0 5px; } .mx_AuthBody_fieldRow > .mx_Field:first-child { margin-left: 0; } .mx_AuthBody_fieldRow > .mx_Field:last-child { margin-right: 0; } .mx_AuthBody_paddedFooter { height: 80px; /* height of the submit button + register link */ padding-top: 28px; text-align: center; } .mx_AuthBody_paddedFooter .mx_AuthBody_paddedFooter_title { margin-top: 16px; font-size: 1.5rem; line-height: 2.4rem; } .mx_AuthBody_paddedFooter .mx_AuthBody_paddedFooter_title .mx_InlineSpinner img { vertical-align: sub; margin-right: 5px; } .mx_AuthBody_paddedFooter .mx_AuthBody_paddedFooter_subtitle { margin-top: 8px; font-size: 1rem; line-height: 1.4rem; } .mx_AuthBody_changeFlow { display: block; text-align: center; } .mx_AuthBody_changeFlow > a { font-weight: 600; font-weight: var(--font-semi-bold); } .mx_SSOButtons + .mx_AuthBody_changeFlow { margin-top: 24px; } .mx_AuthBody_spinner { margin: 1em 0; } @media only screen and (max-width: 480px) { .mx_AuthBody { border-radius: 4px; width: auto; max-width: 500px; padding: 10px; } } /* Copyright 2019 New Vector Ltd Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0 Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License. */ .mx_AuthFooter { text-align: center; width: 100%; font-size: 1.4rem; opacity: 0.72; padding: 20px 0; background: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0)), to(rgba(0, 0, 0, 0.8))); background: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.8)); } .mx_AuthFooter a:link, .mx_AuthFooter a:hover, .mx_AuthFooter a:visited { color: #ffffff; margin: 0 22px; } /* Copyright 2019 New Vector Ltd Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0 Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License. */ .mx_AuthHeader { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; width: 206px; padding: 25px 25px; -webkit-box-sizing: border-box; box-sizing: border-box; } @media only screen and (max-width: 480px) { .mx_AuthHeader { display: none; } } /* Copyright 2019 New Vector Ltd Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0 Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License. */ .mx_AuthHeaderLogo { margin-top: 15px; -webkit-box-flex: 1; -ms-flex: 1; flex: 1; padding: 0 25px; } .mx_AuthHeaderLogo img { width: 100%; } @media only screen and (max-width: 480px) { .mx_AuthHeaderLogo { display: none; } } /* Copyright 2019 New Vector Ltd Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0 Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License. */ .mx_AuthPage { width: 100%; min-height: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; background-color: #2e3649; height: 100vh; overflow: auto; } .mx_AuthPage_modal { display: -webkit-box; display: -ms-flexbox; display: flex; margin: 100px auto auto; border-radius: 4px; -webkit-box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.33); box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.33); background-color: var(--timeline-background-color-50pct); } @media only screen and (max-height: 768px) { .mx_AuthPage_modal { margin-top: 50px } } @media only screen and (max-width: 480px) { .mx_AuthPage_modal { margin-top: 0 } } /*Responsive design*/ @media (max-width: 1024px){ .mx_AuthPage{ background: #C2ECFF !important; } .mx_AuthPage_modal{ margin-top: auto !important; } } /* Separator for different login methods */ .mx_AuthPage_separator { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; text-align: center; margin: 24px 0; } .mx_AuthPage_separator::before, .mx_AuthPage_separator::after { content: ""; -webkit-box-flex: 1; -ms-flex: 1; flex: 1; border-bottom: 1px solid #6f7882; border-bottom: 1px solid var(--quinary-content, #6f7882); } .mx_AuthPage_separator span { padding: 0 16px; color: #edf3ff; color: var(--secondary-content, #edf3ff); font-size: 1.4rem; font-weight: 500; text-transform: uppercase; letter-spacing: 0.5px; } .mx_AuthPage_separator:not(:empty)::before { margin-right: 0; } .mx_AuthPage_separator:not(:empty)::after { margin-left: 0; } /* Dark theme support */ .mx_theme_dark .mx_AuthPage_separator::before, .mx_theme_dark .mx_AuthPage_separator::after { border-color: var(--roomlist-background-color); } /* Copyright 2019 New Vector Ltd Copyright 2020 The Matrix.org Foundation C.I.C. Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0 Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License. */ .mx_CompleteSecurityBody { width: 600px; color: var(--timeline-text-color); background-color: var(--timeline-background-color); border-radius: 4px; padding: 20px; -webkit-box-sizing: border-box; box-sizing: border-box; } .mx_CompleteSecurityBody h2 { font-size: 2.4rem; font-weight: 600; font-weight: var(--font-semi-bold); margin-top: 0; } .mx_CompleteSecurityBody h3 { font-size: 1.4rem; font-weight: 600; font-weight: var(--font-semi-bold); } .mx_CompleteSecurityBody a:link, .mx_CompleteSecurityBody a:hover, .mx_CompleteSecurityBody a:visited { color: #0dbd8b; color: var(--accent, #0dbd8b); text-decoration: none; } /* Copyright 2019 New Vector Ltd Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0 Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License. */ .mx_CountryDropdown .mx_Dropdown_input .mx_Dropdown_option { padding: 0 3px; } .mx_CountryDropdown .mx_Dropdown_arrow { padding-right: 3px; } .mx_CountryDropdown_shortOption { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; height: 100%; } .mx_CountryDropdown_option { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } /* Copyright 2017 Vector Creations Ltd Copyright 2023 The Matrix.org Foundation C.I.C. Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0 Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License. */ .mx_InteractiveAuthEntryComponents .mx_InteractiveAuthEntryComponents_termsSubmit { margin-top: 20px; margin-bottom: 5px; width: 100%; -webkit-box-sizing: border-box; box-sizing: border-box; /* prevent overflowing */ } .mx_InteractiveAuthEntryComponents_msisdnWrapper { text-align: center; } .mx_InteractiveAuthEntryComponents_msisdnEntry { font-size: 200%; font-weight: bold; border: 1px solid #c7c7c7; border-radius: 3px; width: 6em; } .mx_InteractiveAuthEntryComponents_msisdnEntry:focus { border: 1px solid #0dbd8b; border: 1px solid var(--accent, #0dbd8b); } .mx_InteractiveAuthEntryComponents_msisdnSubmit { margin-top: 4px; margin-bottom: 5px; } /* XXX: This should be a common button class */ .mx_InteractiveAuthEntryComponents_msisdnSubmit:disabled { background-color: var(--timeline-text-secondary-color); cursor: default; } .mx_InteractiveAuthEntryComponents_termsPolicy { 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: start; -ms-flex-pack: start; justify-content: flex-start; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .mx_InteractiveAuthEntryComponents_passwordSection { width: 300px; } .mx_InteractiveAuthEntryComponents_sso_buttons { 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: end; -ms-flex-pack: end; justify-content: flex-end; margin-top: 20px; } .mx_InteractiveAuthEntryComponents_sso_buttons .mx_AccessibleButton { margin-left: 5px; } /* "Resend" button/link */ .mx_InteractiveAuthEntryComponents_emailWrapper .mx_AccessibleButton_kind_link_inline { /* We need this to be an inline-block so positioning works correctly */ display: inline-block !important; } /* Spinner as end adornment of the "resend" button/link */ .mx_InteractiveAuthEntryComponents_emailWrapper .mx_AccessibleButton_kind_link_inline .mx_Spinner { /* Spinners are usually block elements, but we need it as inline element */ display: -webkit-inline-box !important; display: -ms-inline-flexbox !important; display: inline-flex !important; /* Spinners by default fill all available width, but we don't want that */ width: auto !important; /* We need to center the spinner relative to the button/link */ vertical-align: middle !important; } /* Copyright 2019 New Vector Ltd Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0 Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License. */ .mx_AuthBody_language { width: 100%; } .mx_AuthBody_language .mx_Dropdown_input { border: none; font-size: 1.4rem; font-weight: 600; font-weight: var(--font-semi-bold); color: var(--timeline-text-color); width: auto; } .mx_AuthBody_language .mx_Dropdown_arrow { background: var(--timeline-text-color); } /* Copyright 2022 The Matrix.org Foundation C.I.C. Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0 Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License. */ .mx_LoginWithQRSection .mx_AccessibleButton { margin-right: 12px; } .mx_AuthPage .mx_LoginWithQR .mx_AccessibleButton { display: block !important; } .mx_AuthPage .mx_LoginWithQR .mx_AccessibleButton + .mx_AccessibleButton { margin-top: 8px; } .mx_AuthPage .mx_LoginWithQR .mx_LoginWithQR_separator { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; text-align: center; } .mx_AuthPage .mx_LoginWithQR .mx_LoginWithQR_separator::before, .mx_AuthPage .mx_LoginWithQR .mx_LoginWithQR_separator::after { content: ""; -webkit-box-flex: 1; -ms-flex: 1; flex: 1; border-bottom: 1px solid #6f7882; border-bottom: 1px solid var(--quinary-content, #6f7882); } .mx_AuthPage .mx_LoginWithQR .mx_LoginWithQR_separator:not(:empty)::before { margin-right: 1em; } .mx_AuthPage .mx_LoginWithQR .mx_LoginWithQR_separator:not(:empty)::after { margin-left: 1em; } .mx_AuthPage .mx_LoginWithQR { font-size: 1.5rem; } .mx_UserSettingsDialog .mx_LoginWithQR .mx_AccessibleButton + .mx_AccessibleButton { margin-left: 12px; } .mx_UserSettingsDialog .mx_LoginWithQR { font-size: 1.4rem; } .mx_UserSettingsDialog .mx_LoginWithQR h1 { font-size: 2.4rem; margin-bottom: 0; } .mx_UserSettingsDialog .mx_LoginWithQR li { line-height: 1.8; } .mx_UserSettingsDialog .mx_LoginWithQR .mx_QRCode { padding: 12px 40px; margin: 28px 0; } .mx_UserSettingsDialog .mx_LoginWithQR .mx_LoginWithQR_buttons { text-align: center; } .mx_UserSettingsDialog .mx_LoginWithQR .mx_LoginWithQR_qrWrapper { display: -webkit-box; display: -ms-flexbox; display: flex; } .mx_LoginWithQR { min-height: 350px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } .mx_LoginWithQR .mx_LoginWithQR_centreTitle h1 { text-align: centre; } .mx_LoginWithQR h1 > svg.normal { color: #edf3ff; color: var(--secondary-content, #edf3ff); } .mx_LoginWithQR h1 > svg.error { color: #ff5b55; color: var(--alert, #ff5b55); } .mx_LoginWithQR h1 > svg.success { color: #0dbd8b; color: var(--accent, #0dbd8b); } .mx_LoginWithQR h1 > svg { height: 1.3em; margin-right: 8px; vertical-align: middle; } .mx_LoginWithQR .mx_LoginWithQR_confirmationDigits { text-align: center; margin: 48px auto; font-weight: 600; font-weight: var(--font-semi-bold); font-size: 2.4rem; color: var(--timeline-text-color); } .mx_LoginWithQR .mx_LoginWithQR_confirmationAlert { border: 1px solid #6f7882; border: 1px solid var(--quaternary-content, #6f7882); border-radius: 8px; padding: 8px; line-height: 1.5em; display: -webkit-box; display: -ms-flexbox; display: flex; } .mx_LoginWithQR .mx_LoginWithQR_confirmationAlert svg { height: 30px; } .mx_LoginWithQR .mx_LoginWithQR_separator { margin: 1em 0; } .mx_LoginWithQR ol { list-style-position: inside; -webkit-padding-start: 0; padding-inline-start: 0; } .mx_LoginWithQR ol li::marker { color: #0dbd8b; color: var(--accent, #0dbd8b); } .mx_LoginWithQR .mx_LoginWithQR_BackButton { height: 12px; margin-bottom: 24px; } .mx_LoginWithQR .mx_LoginWithQR_BackButton svg { height: 100%; } .mx_LoginWithQR .mx_LoginWithQR_main { 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; } .mx_LoginWithQR .mx_QRCode { border: 1px solid #6f7882; border: 1px solid var(--quinary-content, #6f7882); border-radius: 8px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .mx_LoginWithQR .mx_LoginWithQR_spinner { -webkit-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1; 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: 100%; } /* Copyright 2020 The Matrix.org Foundation C.I.C. Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0 Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License. */ progress.mx_PassphraseField_progress { -webkit-appearance: none; -moz-appearance: none; appearance: none; width: 100%; border: 0; height: 4px; position: absolute; top: -12px; border-radius: "2px"; } progress.mx_PassphraseField_progress::-moz-progress-bar { border-radius: "2px"; } progress.mx_PassphraseField_progress::-webkit-progress-bar, progress.mx_PassphraseField_progress::-webkit-progress-value { border-radius: "2px"; } progress.mx_PassphraseField_progress { color: #ff5b55; color: var(--alert, #ff5b55); } progress.mx_PassphraseField_progress::-moz-progress-bar { background-color: #ff5b55; background-color: var(--alert, #ff5b55); } progress.mx_PassphraseField_progress::-webkit-progress-value { background-color: #ff5b55; background-color: var(--alert, #ff5b55); } progress.mx_PassphraseField_progress[value="2"], progress.mx_PassphraseField_progress[value="3"] { color: #ff812d; color: var(--username-colors_4, #ff812d); } progress.mx_PassphraseField_progress[value="2"]::-moz-progress-bar, progress.mx_PassphraseField_progress[value="3"]::-moz-progress-bar { background-color: #ff812d; background-color: var(--username-colors_4, #ff812d); } progress.mx_PassphraseField_progress[value="2"]::-webkit-progress-value, progress.mx_PassphraseField_progress[value="3"]::-webkit-progress-value { background-color: #ff812d; background-color: var(--username-colors_4, #ff812d); } progress.mx_PassphraseField_progress[value="4"] { color: #0dbd8b; color: var(--accent, #0dbd8b); } progress.mx_PassphraseField_progress[value="4"]::-moz-progress-bar { background-color: #0dbd8b; background-color: var(--accent, #0dbd8b); } progress.mx_PassphraseField_progress[value="4"]::-webkit-progress-value { background-color: #0dbd8b; background-color: var(--accent, #0dbd8b); } /* Copyright 2019 New Vector Ltd Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0 Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License. */ .mx_Welcome { 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; } .mx_Welcome.mx_WelcomePage_registrationDisabled .mx_ButtonCreateAccount { display: none; } .mx_Welcome .mx_AuthBody_language { width: 160px; margin-bottom: 10px; } /* Copyright 2024 TextRP Foundation Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0 Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License. */ .mx_XRPLWalletLogin { width: 100%; max-width: 480px; margin: 0 auto; padding: 0; } .mx_XRPLWalletLogin_container { background: var(--timeline-background-color); border-radius: 16px; padding: 32px 24px; -webkit-box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08); box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08); border: 1px solid #6f7882; border: 1px solid var(--quinary-content, #6f7882); } /* Header Section */ .mx_XRPLWalletLogin_header { text-align: center; margin-bottom: 32px; } .mx_XRPLWalletLogin_logo { margin-bottom: 16px; } .mx_XRPLWalletLogin_logoIcon { font-size: 48px; display: inline-block; -webkit-animation: pulse 2s infinite; animation: pulse 2s infinite; } @-webkit-keyframes pulse { 0% { -webkit-transform: scale(1); transform: scale(1); } 50% { -webkit-transform: scale(1.05); transform: scale(1.05); } 100% { -webkit-transform: scale(1); transform: scale(1); } } @keyframes pulse { 0% { -webkit-transform: scale(1); transform: scale(1); } 50% { -webkit-transform: scale(1.05); transform: scale(1.05); } 100% { -webkit-transform: scale(1); transform: scale(1); } } .mx_XRPLWalletLogin_title { margin: 0 0 12px 0; font-size: 28px; font-weight: 700; color: var(--timeline-text-color); line-height: 1.2; } .mx_XRPLWalletLogin_subtitle { margin: 0; font-size: 16px; color: #edf3ff; color: var(--secondary-content, #edf3ff); line-height: 1.5; } /* Error Banner */ .mx_XRPLWalletLogin_errorBanner { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; grid-gap: 12px; gap: 12px; background: #fef2f2; border: 1px solid #fecaca; border-radius: 12px; padding: 16px; margin-bottom: 24px; } .mx_XRPLWalletLogin_errorIcon { font-size: 20px; -ms-flex-negative: 0; flex-shrink: 0; margin-top: 2px; } .mx_XRPLWalletLogin_errorContent { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; } .mx_XRPLWalletLogin_errorContent h4 { margin: 0 0 4px 0; font-size: 16px; font-weight: 600; color: #dc2626; } .mx_XRPLWalletLogin_errorContent p { margin: 0; font-size: 14px; color: #7f1d1d; line-height: 1.4; } /* Wallet Cards */ .mx_XRPLWalletLogin_wallets { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; grid-gap: 16px; gap: 16px; margin-bottom: 32px; } .mx_XRPLWalletLogin_card { width: 100%; } .mx_XRPLWalletLogin_cardButton { width: 100%; padding: 0; border: 2px solid #e7e7e7; border-radius: 16px; background: var(--timeline-background-color); cursor: pointer; -webkit-transition: all 0.2s ease; transition: all 0.2s ease; position: relative; overflow: hidden; } .mx_XRPLWalletLogin_cardButton:hover:not(:disabled) { border-color: #0dbd8b; border-color: var(--accent, #0dbd8b); -webkit-transform: translateY(-2px); transform: translateY(-2px); -webkit-box-shadow: 0 8px 25px rgba(0, 0, 0, 0.12); box-shadow: 0 8px 25px rgba(0, 0, 0, 0.12); } .mx_XRPLWalletLogin_cardButton:disabled { opacity: 0.6; cursor: not-allowed; -webkit-transform: none; transform: none; } .mx_XRPLWalletLogin_cardButton:active:not(:disabled) { -webkit-transform: translateY(0); transform: translateY(0); } .mx_XRPLWalletLogin_cardContent { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; padding: 20px 24px; grid-gap: 16px; gap: 16px; } .mx_XRPLWalletLogin_cardIcon { 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; width: 48px; height: 48px; border-radius: 12px; background: #6f7882; background: var(--quaternary-content, #6f7882); -ms-flex-negative: 0; flex-shrink: 0; } .mx_XRPLWalletLogin_emoji { font-size: 24px; line-height: 1; } .mx_XRPLWalletLogin_cardInfo { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; text-align: left; } .mx_XRPLWalletLogin_cardTitle { margin: 0 0 4px 0; font-size: 18px; font-weight: 600; color: var(--timeline-text-color); line-height: 1.2; } .mx_XRPLWalletLogin_cardDescription { margin: 0; font-size: 14px; color: #edf3ff; color: var(--secondary-content, #edf3ff); line-height: 1.3; } .mx_XRPLWalletLogin_cardArrow { 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; -ms-flex-negative: 0; flex-shrink: 0; } .mx_XRPLWalletLogin_arrow { font-size: 20px; color: #edf3ff; color: var(--secondary-content, #edf3ff); -webkit-transition: -webkit-transform 0.2s ease; transition: -webkit-transform 0.2s ease; transition: transform 0.2s ease; transition: transform 0.2s ease, -webkit-transform 0.2s ease; } .mx_XRPLWalletLogin_cardButton:hover:not(:disabled) .mx_XRPLWalletLogin_arrow { -webkit-transform: translateX(4px); transform: translateX(4px); } .mx_XRPLWalletLogin_loadingText { font-size: 14px; color: #edf3ff; color: var(--secondary-content, #edf3ff); font-weight: 500; } /* Wallet-specific styling */ .mx_XRPLWalletLogin_xumm:hover:not(:disabled) { border-color: #3052ff; background: linear-gradient(135deg, #3052ff08, #3052ff04); } .mx_XRPLWalletLogin_xumm .mx_XRPLWalletLogin_cardIcon { background: linear-gradient(135deg, #3052ff, #4461ff); } .mx_XRPLWalletLogin_gem:hover:not(:disabled) { border-color: #00d4aa; background: linear-gradient(135deg, #00d4aa08, #00d4aa04); } .mx_XRPLWalletLogin_gem .mx_XRPLWalletLogin_cardIcon { background: linear-gradient(135deg, #00d4aa, #00e6c0); } .mx_XRPLWalletLogin_crossmark:hover:not(:disabled) { border-color: #ff6b6b; background: linear-gradient(135deg, #ff6b6b08, #ff6b6b04); } .mx_XRPLWalletLogin_crossmark .mx_XRPLWalletLogin_cardIcon { background: linear-gradient(135deg, #ff6b6b, #ff8080); } /* Footer Section */ .mx_XRPLWalletLogin_footer { border-top: 1px solid #6f7882; border-top: 1px solid var(--quinary-content, #6f7882); padding-top: 24px; text-align: center; } .mx_XRPLWalletLogin_security { 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; grid-gap: 8px; gap: 8px; margin-bottom: 16px; } .mx_XRPLWalletLogin_securityIcon { font-size: 16px; } .mx_XRPLWalletLogin_securityText { margin: 0; font-size: 14px; color: #edf3ff; color: var(--secondary-content, #edf3ff); font-weight: 500; } .mx_XRPLWalletLogin_help { margin-top: 16px; } .mx_XRPLWalletLogin_helpText { margin: 0; font-size: 14px; color: #edf3ff; color: var(--tertiary-content, #edf3ff); line-height: 1.4; } .mx_XRPLWalletLogin_helpLink { color: #0dbd8b; color: var(--accent, #0dbd8b); text-decoration: none; font-weight: 500; margin-left: 4px; } .mx_XRPLWalletLogin_helpLink:hover { text-decoration: underline; } /* Responsive Design */ @media (max-width: 480px) { .mx_XRPLWalletLogin_container { padding: 24px 20px; border-radius: 12px; } .mx_XRPLWalletLogin_title { font-size: 24px; } .mx_XRPLWalletLogin_subtitle { font-size: 15px; } .mx_XRPLWalletLogin_cardContent { padding: 16px 20px; grid-gap: 12px; gap: 12px; } .mx_XRPLWalletLogin_cardIcon { width: 40px; height: 40px; } .mx_XRPLWalletLogin_emoji { font-size: 20px; } .mx_XRPLWalletLogin_cardTitle { font-size: 16px; } .mx_XRPLWalletLogin_cardDescription { font-size: 13px; } } @media (max-width: 320px) { .mx_XRPLWalletLogin_container { padding: 20px 16px; } .mx_XRPLWalletLogin_cardContent { padding: 14px 16px; grid-gap: 10px; gap: 10px; } } /* Dark theme support */ .mx_theme_dark .mx_XRPLWalletLogin_container { background: var(--roomlist-background-color); border-color: #e7e7e7; -webkit-box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3); box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3); } .mx_theme_dark .mx_XRPLWalletLogin_cardButton { background: var(--roomlist-background-color); border-color: #e7e7e7; } .mx_theme_dark .mx_XRPLWalletLogin_cardButton:hover:not(:disabled) { background: #6f7882; background: var(--quinary-content, #6f7882); } .mx_theme_dark .mx_XRPLWalletLogin_errorBanner { background: #422006; border-color: #92400e; } .mx_theme_dark .mx_XRPLWalletLogin_errorBanner .mx_XRPLWalletLogin_errorContent h4 { color: #fbbf24; } .mx_theme_dark .mx_XRPLWalletLogin_errorBanner .mx_XRPLWalletLogin_errorContent p { color: #d97706; } /* Copyright 2024 TextRP Foundation Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0 Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License. */ .mx_XRPLAuthCallback { 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; min-height: 400px; padding: 32px; } .mx_XRPLAuthCallback_content { text-align: center; max-width: 400px; width: 100%; } .mx_XRPLAuthCallback_header { margin-bottom: 24px; 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; } .mx_XRPLAuthCallback_success, .mx_XRPLAuthCallback_error { font-size: 48px; line-height: 1; } .mx_XRPLAuthCallback_title { margin: 0 0 16px 0; font-size: 24px; font-weight: 600; color: var(--timeline-text-color); } .mx_XRPLAuthCallback_message { margin: 0 0 24px 0; font-size: 16px; color: #edf3ff; color: var(--secondary-content, #edf3ff); line-height: 1.4; } .mx_XRPLAuthCallback_actions { margin-top: 24px; } .mx_XRPLAuthCallback_retryButton { background: #0dbd8b; background: var(--accent, #0dbd8b); color: #ffffff; border: none; border-radius: 8px; padding: 12px 24px; font-size: 16px; font-weight: 500; cursor: pointer; -webkit-transition: all 0.2s ease; transition: all 0.2s ease; } .mx_XRPLAuthCallback_retryButton:hover { background: #0aa274; /* Darker shade of $accent (#0dbd8b) for hover state */ -webkit-transform: translateY(-1px); transform: translateY(-1px); } .mx_XRPLAuthCallback_retryButton:active { -webkit-transform: translateY(0); transform: translateY(0); } /* Responsive design */ @media (max-width: 480px) { .mx_XRPLAuthCallback { padding: 20px; min-height: 300px; } .mx_XRPLAuthCallback_title { font-size: 20px; } .mx_XRPLAuthCallback_message { font-size: 14px; } } /* Copyright 2015, 2016 OpenMarket Ltd Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0 Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License. */ .mx_BaseAvatar { position: relative; /* In at least Firefox, the case of relative positioned inline elements */ /* (such as mx_BaseAvatar) with absolute positioned children (such as */ /* mx_BaseAvatar_initial) is a dark corner full of spider webs. It will give */ /* different results during full reflow of the page vs. incremental reflow */ /* of small portions. While that's surely a browser bug, we can avoid it by */ /* using `inline-block` instead of the default `inline`. */ /* https://github.com/vector-im/element-web/issues/5594 */ /* https://bugzilla.mozilla.org/show_bug.cgi?id=1535053 */ /* https://bugzilla.mozilla.org/show_bug.cgi?id=255139 */ display: inline-block; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .mx_BaseAvatar.mx_RoomAvatar_isSpaceRoom.mx_BaseAvatar_image, .mx_BaseAvatar.mx_RoomAvatar_isSpaceRoom .mx_BaseAvatar_image { border-radius: 8px; } .mx_BaseAvatar_initial { position: absolute; left: 0; color: #ffffff; text-align: center; speak: none; pointer-events: none; font-weight: normal; } .mx_BaseAvatar_image { -o-object-fit: cover; object-fit: cover; aspect-ratio: 1; border-radius: 125px; vertical-align: top; background-color: var(--timeline-background-color); } /* Percy screenshot test specific CSS */ @media only percy { /* Stick the default room avatar colour, so it doesn't cause a false diff on the screenshot */ .mx_BaseAvatar_initial { background-color: var(--percy-color-avatar) !important; border-radius: 125px; } .mx_RoomAvatar_isSpaceRoom .mx_BaseAvatar_initial { border-radius: 8px; } .mx_BaseAvatar_initial + .mx_BaseAvatar_image { visibility: hidden; } } /* Copyright 2020 The Matrix.org Foundation C.I.C. Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0 Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License. */ .mx_DecoratedRoomAvatar, .mx_ExtraTile { position: relative; contain: content; } .mx_DecoratedRoomAvatar.mx_DecoratedRoomAvatar_cutout .mx_BaseAvatar, .mx_ExtraTile.mx_DecoratedRoomAvatar_cutout .mx_BaseAvatar { -webkit-mask-image: url(../../img/element-icons/roomlist/decorated-avatar-mask.9b9e82f.svg); mask-image: url(../../img/element-icons/roomlist/decorated-avatar-mask.9b9e82f.svg); -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; } .mx_DecoratedRoomAvatar .mx_DecoratedRoomAvatar_icon, .mx_ExtraTile .mx_DecoratedRoomAvatar_icon { position: absolute; /* the following percentage based sizings are to match the scalable svg mask for the cutout */ bottom: -6.25%; right: -6.25%; margin: 12.5%; width: 25%; height: 25%; border-radius: 50%; } .mx_DecoratedRoomAvatar .mx_DecoratedRoomAvatar_icon::before, .mx_ExtraTile .mx_DecoratedRoomAvatar_icon::before { content: ""; width: 100%; height: 100%; right: 0; position: absolute; border-radius: 8px; } .mx_DecoratedRoomAvatar .mx_DecoratedRoomAvatar_icon_globe::before, .mx_ExtraTile .mx_DecoratedRoomAvatar_icon_globe::before { -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; background: #edf3ff; background: var(--secondary-content, #edf3ff); -webkit-mask-image: url(../../img/globe.216f1db.svg); mask-image: url(../../img/globe.216f1db.svg); } .mx_DecoratedRoomAvatar .mx_DecoratedRoomAvatar_icon_offline::before, .mx_ExtraTile .mx_DecoratedRoomAvatar_icon_offline::before { background-color: #e3e8f0; } .mx_DecoratedRoomAvatar .mx_DecoratedRoomAvatar_icon_online::before, .mx_ExtraTile .mx_DecoratedRoomAvatar_icon_online::before { background-color: #0dbd8b; background-color: var(--accent, #0dbd8b); } .mx_DecoratedRoomAvatar .mx_DecoratedRoomAvatar_icon_away::before, .mx_ExtraTile .mx_DecoratedRoomAvatar_icon_away::before { background-color: #d9b072; } .mx_DecoratedRoomAvatar .mx_DecoratedRoomAvatar_icon_busy::before, .mx_ExtraTile .mx_DecoratedRoomAvatar_icon_busy::before { background-color: #ff5b55; } .mx_DecoratedRoomAvatar .mx_NotificationBadge, .mx_DecoratedRoomAvatar .mx_RoomTile_badgeContainer, .mx_ExtraTile .mx_NotificationBadge, .mx_ExtraTile .mx_RoomTile_badgeContainer { position: absolute; top: 0; right: 0; height: 18px; width: 18px; } /* Copyright 2020 The Matrix.org Foundation C.I.C. Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0 Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License. */ .mx_WidgetAvatar { border-radius: 4px; } /* Copyright 2021 The Matrix.org Foundation C.I.C. Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0 Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License. */ .mx_BetaCard { padding: 24px; background-color: #21262c; background-color: var(--system, #21262c); border-radius: 8px; -webkit-box-sizing: border-box; box-sizing: border-box; color: #edf3ff; color: var(--secondary-content, #edf3ff); } .mx_BetaCard .mx_BetaCard_columns { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-flow: wrap; flex-flow: wrap; grid-gap: 20px; gap: 20px; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .mx_BetaCard .mx_BetaCard_columns .mx_BetaCard_columns_description { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; } .mx_BetaCard .mx_BetaCard_columns .mx_BetaCard_columns_description .mx_BetaCard_title { font-weight: 600; font-weight: var(--font-semi-bold); font-size: 1.8rem; line-height: 2.2rem; color: var(--timeline-text-color); margin: 4px 0 14px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; grid-column-gap: 12px; -webkit-column-gap: 12px; -moz-column-gap: 12px; column-gap: 12px; } .mx_BetaCard .mx_BetaCard_columns .mx_BetaCard_columns_description .mx_BetaCard_caption { font-size: 1.5rem; line-height: 2rem; } .mx_BetaCard .mx_BetaCard_columns .mx_BetaCard_columns_description .mx_BetaCard_buttons { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap-reverse; flex-wrap: wrap-reverse; grid-gap: 12px; gap: 12px; margin: 20px auto 0; } .mx_BetaCard .mx_BetaCard_columns .mx_BetaCard_columns_description .mx_BetaCard_buttons .mx_AccessibleButton { padding: 7px 40px; width: auto; -webkit-box-flex: 1; -ms-flex: 1; flex: 1; white-space: nowrap; } /* text might overflow */ .mx_BetaCard .mx_BetaCard_columns .mx_BetaCard_columns_description .mx_BetaCard_buttons .mx_AccessibleButton:nth-child(1) { -webkit-box-ordinal-group: 3; -ms-flex-order: 2; order: 2; /* Place feedback button top and right */ } .mx_BetaCard .mx_BetaCard_columns .mx_BetaCard_columns_description .mx_BetaCard_refreshWarning { margin-top: 8px; font-size: 1rem; text-align: center; } .mx_BetaCard .mx_BetaCard_columns .mx_BetaCard_columns_description .mx_BetaCard_faq { margin-top: 20px; font-size: 1.2rem; line-height: 1.5rem; } .mx_BetaCard .mx_BetaCard_columns .mx_BetaCard_columns_description .mx_BetaCard_faq > h4 { margin: 12px 0 0; } .mx_BetaCard .mx_BetaCard_columns .mx_BetaCard_columns_description .mx_BetaCard_faq > p { margin: 0; } .mx_BetaCard .mx_BetaCard_columns .mx_BetaCard_columns_image_wrapper { margin: auto 0; } .mx_BetaCard .mx_BetaCard_columns .mx_BetaCard_columns_image_wrapper .mx_BetaCard_columns_image { width: 100%; max-width: 300px; -o-object-fit: contain; object-fit: contain; height: 100%; border-radius: 4px; } .mx_BetaCard .mx_BetaCard_relatedSettings .mx_SettingsFlag { margin: 16px 0 0; font-size: 1.5rem; line-height: 2.4rem; color: var(--timeline-text-color); } .mx_BetaCard .mx_BetaCard_relatedSettings .mx_SettingsFlag .mx_SettingsFlag_microcopy { margin-top: 4px; font-size: 1.2rem; line-height: 1.5rem; } .mx_BetaCard_betaPill { background-color: var(--primary-color); padding: 4px 10px; border-radius: 8px; text-transform: uppercase; font-size: 1.2rem; font-weight: 600; font-weight: var(--font-semi-bold); line-height: 15px; color: #ffffff; display: inline-block; vertical-align: text-bottom; word-break: keep-all; } /* avoid multiple lines on CJK language */ .mx_BetaCard_betaPill.mx_AccessibleButton { cursor: pointer; } /* Copyright 2021 Šimon Brandner Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0 Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License. */ .mx_DeviceContextMenu { max-width: 252px; } .mx_DeviceContextMenu .mx_DeviceContextMenu_device_icon { display: none; } .mx_DeviceContextMenu .mx_IconizedContextMenu_label { padding-left: 0 !important; } /* Copyright 2020 - 2023 The Matrix.org Foundation C.I.C. Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0 Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License. */ /* A context menu that largely fits the | [icon] [label] | format. */ .mx_IconizedContextMenu { min-width: 146px; width: -webkit-max-content; width: -moz-max-content; width: max-content; /* override default ul styles*/ margin: 0; padding: 0; } .mx_IconizedContextMenu .mx_IconizedContextMenu_optionList > * { padding-left: 20px; padding-right: 20px; } .mx_IconizedContextMenu .mx_IconizedContextMenu_optionList .mx_IconizedContextMenu_optionList_label { font-size: 1.5rem; font-weight: 600; font-weight: var(--font-semi-bold); } /* the notFirst class is for cases where the optionList might be under a header of sorts. */ .mx_IconizedContextMenu .mx_IconizedContextMenu_optionList:nth-child(n + 2), .mx_IconizedContextMenu .mx_IconizedContextMenu_optionList .mx_IconizedContextMenu_optionList_notFirst { /* This is a bit of a hack when we could just use a simple border-top property, */ /* however we have a (kinda) good reason for doing it this way: we need opacity. */ /* To get the right color, we need an opacity modifier which means we have to work */ /* around the problem. PostCSS doesn't support the opacity() function, and if we */ /* use something like postcss-functions we quickly run into an issue where the */ /* function we would define gets passed a CSS variable for custom themes, which */ /* can't be converted easily even when considering https://stackoverflow.com/a/41265350/7037379 */ /**/ } /* Therefore, we just hack in a line and border the thing ourselves */ .mx_IconizedContextMenu .mx_IconizedContextMenu_optionList:nth-child(n + 2)::before, .mx_IconizedContextMenu .mx_IconizedContextMenu_optionList .mx_IconizedContextMenu_optionList_notFirst::before { border-top: 1px solid var(--timeline-text-color); opacity: 0.1; content: ""; /* Counteract the padding problems (width: 100% ignores the 40px padding, */ /* unless we position it absolutely then it does the right thing). */ width: 100%; position: absolute; left: 0; } /* round the top corners of the top button for the hover effect to be bounded */ .mx_IconizedContextMenu .mx_IconizedContextMenu_optionList:first-child .mx_IconizedContextMenu_item:first-child { border-radius: 8px 8px 0 0; /* radius matches .mx_ContextualMenu */ } /* round the bottom corners of the bottom button for the hover effect to be bounded */ .mx_IconizedContextMenu .mx_IconizedContextMenu_optionList:last-child .mx_IconizedContextMenu_item:last-child { border-radius: 0 0 8px 8px; /* radius matches .mx_ContextualMenu */ } /* round all corners of the only button for the hover effect to be bounded */ .mx_IconizedContextMenu .mx_IconizedContextMenu_optionList:first-child:last-child .mx_IconizedContextMenu_item:first-child:last-child { border-radius: 8px; /* radius matches .mx_ContextualMenu */ } .mx_IconizedContextMenu .mx_IconizedContextMenu_optionList .mx_IconizedContextMenu_item { /* pad the inside of the button so that the hover background is padded too */ padding-top: 12px; padding-bottom: 12px; text-decoration: none; color: var(--timeline-text-color); font-size: 1.5rem; line-height: 2.4rem; /* Create a flexbox to more easily define the list items */ display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .mx_IconizedContextMenu .mx_IconizedContextMenu_optionList .mx_IconizedContextMenu_item:hover, .mx_IconizedContextMenu .mx_IconizedContextMenu_optionList .mx_IconizedContextMenu_item:focus-visible { background-color: #343a46; background-color: var(--menu-selected-color, #343a46); } .mx_IconizedContextMenu .mx_IconizedContextMenu_optionList .mx_IconizedContextMenu_item.mx_AccessibleButton_disabled { opacity: 0.5; cursor: not-allowed; } .mx_IconizedContextMenu .mx_IconizedContextMenu_optionList .mx_IconizedContextMenu_item img, .mx_IconizedContextMenu .mx_IconizedContextMenu_optionList .mx_IconizedContextMenu_item .mx_IconizedContextMenu_icon { /* icons */ width: 16px; min-width: 16px; max-width: 16px; } .mx_IconizedContextMenu .mx_IconizedContextMenu_optionList .mx_IconizedContextMenu_item span.mx_IconizedContextMenu_label { /* labels */ width: 100%; -webkit-box-flex: 1; -ms-flex: 1; flex: 1; /* Ellipsize any text overflow */ text-overflow: ellipsis; overflow: hidden; white-space: nowrap; } .mx_IconizedContextMenu .mx_IconizedContextMenu_optionList .mx_IconizedContextMenu_item .mx_IconizedContextMenu_icon + .mx_IconizedContextMenu_label { padding-left: 14px; } .mx_IconizedContextMenu .mx_IconizedContextMenu_optionList .mx_IconizedContextMenu_item .mx_BetaCard_betaPill { margin-left: 16px; } .mx_IconizedContextMenu .mx_IconizedContextMenu_icon { position: relative; width: 16px; height: 16px; } .mx_IconizedContextMenu .mx_IconizedContextMenu_icon::before { content: ""; width: inherit; height: inherit; position: absolute; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; background-color: #edf3ff; background-color: var(--secondary-content, #edf3ff); } .mx_IconizedContextMenu .mx_IconizedContextMenu_optionList_red .mx_IconizedContextMenu_item { color: #ff5b55 !important; color: var(--alert, #ff5b55) !important; } .mx_IconizedContextMenu .mx_IconizedContextMenu_optionList_red .mx_IconizedContextMenu_icon::before { background-color: #ff5b55; background-color: var(--alert, #ff5b55); } .mx_IconizedContextMenu .mx_IconizedContextMenu_option_red { color: #ff5b55 !important; color: var(--alert, #ff5b55) !important; } .mx_IconizedContextMenu .mx_IconizedContextMenu_option_red .mx_IconizedContextMenu_icon::before { background-color: #ff5b55; background-color: var(--alert, #ff5b55); } .mx_IconizedContextMenu .mx_IconizedContextMenu_active.mx_IconizedContextMenu_item, .mx_IconizedContextMenu .mx_IconizedContextMenu_active .mx_IconizedContextMenu_item { color: #0dbd8b !important; color: var(--accent, #0dbd8b) !important; } .mx_IconizedContextMenu .mx_IconizedContextMenu_active .mx_IconizedContextMenu_icon::before { background-color: #0dbd8b; background-color: var(--accent, #0dbd8b); } .mx_IconizedContextMenu.mx_IconizedContextMenu_compact .mx_IconizedContextMenu_optionList > * { padding: 8px 16px 8px 11px; } .mx_IconizedContextMenu .mx_IconizedContextMenu_checked, .mx_IconizedContextMenu .mx_IconizedContextMenu_unchecked { margin-left: 16px; margin-right: -5px; } .mx_IconizedContextMenu .mx_IconizedContextMenu_developerTools::before { -webkit-mask-image: url(../../img/element-icons/settings/flask.699f7f9.svg); mask-image: url(../../img/element-icons/settings/flask.699f7f9.svg); } .mx_IconizedContextMenu .mx_IconizedContextMenu_checked::before { -webkit-mask-image: url(../../img/element-icons/roomlist/checkmark.8e909d3.svg); mask-image: url(../../img/element-icons/roomlist/checkmark.8e909d3.svg); } .mx_IconizedContextMenu .mx_IconizedContextMenu_unchecked::before { content: unset; } .mx_IconizedContextMenu .mx_IconizedContextMenu_sublabel { margin-left: 20px; color: #edf3ff; color: var(--tertiary-content, #edf3ff); } .mx_IconizedContextMenu_item.mx_IconizedContextMenu_itemDestructive { color: #ff5b55 !important; color: var(--alert, #ff5b55) !important; } /* Copyright 2020 New Vector Ltd Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0 Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License. */ .mx_LegacyCallContextMenu_item { width: 205px; height: 40px; padding-left: 16px; line-height: 40px; vertical-align: center; } /* Copyright 2015, 2016 OpenMarket Ltd Copyright 2021 Michael Weimann Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0 Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License. */ .mx_MessageContextMenu .mx_IconizedContextMenu_icon { width: 16px; height: 16px; display: block; } .mx_MessageContextMenu .mx_IconizedContextMenu_icon::before { content: ""; width: 16px; height: 16px; display: block; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; background: var(--timeline-text-color); } .mx_MessageContextMenu .mx_MessageContextMenu_iconCollapse::before { -webkit-mask-image: url(../../img/element-icons/message/chevron-up.dabdada.svg); mask-image: url(../../img/element-icons/message/chevron-up.dabdada.svg); } .mx_MessageContextMenu .mx_MessageContextMenu_iconReport::before { -webkit-mask-image: url(../../img/element-icons/warning-badge.3cf4d1a.svg); mask-image: url(../../img/element-icons/warning-badge.3cf4d1a.svg); } .mx_MessageContextMenu .mx_MessageContextMenu_iconLink::before { -webkit-mask-image: url(../../img/element-icons/link.3f7cd42.svg); mask-image: url(../../img/element-icons/link.3f7cd42.svg); } .mx_MessageContextMenu .mx_MessageContextMenu_iconPermalink::before { -webkit-mask-image: url(../../img/element-icons/room/share.069290e.svg); mask-image: url(../../img/element-icons/room/share.069290e.svg); } .mx_MessageContextMenu .mx_MessageContextMenu_iconUnhidePreview::before { -webkit-mask-image: url(../../img/element-icons/settings/appearance.c35df33.svg); mask-image: url(../../img/element-icons/settings/appearance.c35df33.svg); } .mx_MessageContextMenu .mx_MessageContextMenu_iconOpenInMapSite::before { -webkit-mask-image: url(../../img/external-link.5014037.svg); mask-image: url(../../img/external-link.5014037.svg); } .mx_MessageContextMenu .mx_MessageContextMenu_iconEndPoll::before { -webkit-mask-image: url(../../img/element-icons/check-white.1e3d7f7.svg); mask-image: url(../../img/element-icons/check-white.1e3d7f7.svg); } .mx_MessageContextMenu .mx_MessageContextMenu_iconForward::before { -webkit-mask-image: url(../../img/element-icons/message/fwd.6612dfa.svg); mask-image: url(../../img/element-icons/message/fwd.6612dfa.svg); } .mx_MessageContextMenu .mx_MessageContextMenu_iconRedact::before { -webkit-mask-image: url(../../img/element-icons/trashcan.3e3b8b7.svg); mask-image: url(../../img/element-icons/trashcan.3e3b8b7.svg); } .mx_MessageContextMenu .mx_MessageContextMenu_iconResend::before { -webkit-mask-image: url(../../img/element-icons/retry.2bad236.svg); mask-image: url(../../img/element-icons/retry.2bad236.svg); } .mx_MessageContextMenu .mx_MessageContextMenu_iconSource::before { -webkit-mask-image: url(../../img/element-icons/room/format-bar/code.c3acfbd.svg); mask-image: url(../../img/element-icons/room/format-bar/code.c3acfbd.svg); } .mx_MessageContextMenu .mx_MessageContextMenu_iconQuote::before { -webkit-mask-image: url(../../img/element-icons/room/format-bar/quote.5fc8cc0.svg); mask-image: url(../../img/element-icons/room/format-bar/quote.5fc8cc0.svg); } .mx_MessageContextMenu .mx_MessageContextMenu_iconPin::before { -webkit-mask-image: url(../../img/element-icons/room/pin-upright.92d1884.svg); mask-image: url(../../img/element-icons/room/pin-upright.92d1884.svg); } .mx_MessageContextMenu .mx_MessageContextMenu_iconUnpin::before { -webkit-mask-image: url(../../img/element-icons/room/pin.8acecb2.svg); mask-image: url(../../img/element-icons/room/pin.8acecb2.svg); } .mx_MessageContextMenu .mx_MessageContextMenu_iconCopy::before { height: 12px; left: 2px; -webkit-mask-image: url(../../img/element-icons/copy.90230e2.svg); mask-image: url(../../img/element-icons/copy.90230e2.svg); position: relative; width: 12px; top: 3px; } .mx_MessageContextMenu .mx_MessageContextMenu_iconEdit::before { -webkit-mask-image: url(../../img/element-icons/room/message-bar/edit.c76811e.svg); mask-image: url(../../img/element-icons/room/message-bar/edit.c76811e.svg); } .mx_MessageContextMenu .mx_MessageContextMenu_iconReply::before { -webkit-mask-image: url(../../img/element-icons/room/message-bar/reply.7b0a0bd.svg); mask-image: url(../../img/element-icons/room/message-bar/reply.7b0a0bd.svg); } .mx_MessageContextMenu .mx_MessageContextMenu_iconReplyInThread::before { -webkit-mask-image: url(../../img/element-icons/message/thread.a8dbd69.svg); mask-image: url(../../img/element-icons/message/thread.a8dbd69.svg); } .mx_MessageContextMenu .mx_MessageContextMenu_iconReact::before { -webkit-mask-image: url(../../img/element-icons/room/message-bar/emoji.97e3e33.svg); mask-image: url(../../img/element-icons/room/message-bar/emoji.97e3e33.svg); } .mx_MessageContextMenu .mx_MessageContextMenu_iconViewInRoom::before { -webkit-mask-image: url(../../img/element-icons/view-in-room.45779b8.svg); mask-image: url(../../img/element-icons/view-in-room.45779b8.svg); } .mx_MessageContextMenu .mx_MessageContextMenu_jumpToEvent::before { -webkit-mask-image: url(../../img/element-icons/child-relationship.132f4cb.svg); mask-image: url(../../img/element-icons/child-relationship.132f4cb.svg); } .mx_RoomGeneralContextMenu_iconStar::before { -webkit-mask-image: url(../../img/element-icons/roomlist/favorite.b47f7d4.svg); mask-image: url(../../img/element-icons/roomlist/favorite.b47f7d4.svg); } .mx_RoomGeneralContextMenu_iconArrowDown::before { -webkit-mask-image: url(../../img/element-icons/roomlist/low-priority.1cdb11b.svg); mask-image: url(../../img/element-icons/roomlist/low-priority.1cdb11b.svg); } .mx_RoomGeneralContextMenu_iconMarkAsRead::before { -webkit-mask-image: url(../../img/element-icons/roomlist/mark-as-read.8a6306a.svg); mask-image: url(../../img/element-icons/roomlist/mark-as-read.8a6306a.svg); } .mx_RoomGeneralContextMenu_iconNotificationsDefault::before { -webkit-mask-image: url(../../img/element-icons/notifications.b4d3969.svg); mask-image: url(../../img/element-icons/notifications.b4d3969.svg); } .mx_RoomGeneralContextMenu_iconNotificationsAllMessages::before { -webkit-mask-image: url(../../img/element-icons/roomlist/notifications-default.913763b.svg); mask-image: url(../../img/element-icons/roomlist/notifications-default.913763b.svg); } .mx_RoomGeneralContextMenu_iconNotificationsMentionsKeywords::before { -webkit-mask-image: url(../../img/element-icons/roomlist/notifications-dm.ceba248.svg); mask-image: url(../../img/element-icons/roomlist/notifications-dm.ceba248.svg); } .mx_RoomGeneralContextMenu_iconNotificationsNone::before { -webkit-mask-image: url(../../img/element-icons/roomlist/notifications-off.94bceac.svg); mask-image: url(../../img/element-icons/roomlist/notifications-off.94bceac.svg); } .mx_RoomGeneralContextMenu_iconPeople::before { -webkit-mask-image: url(../../img/element-icons/room/members.3c127a3.svg); mask-image: url(../../img/element-icons/room/members.3c127a3.svg); } .mx_RoomGeneralContextMenu_iconFiles::before { -webkit-mask-image: url(../../img/element-icons/room/files.ee097b4.svg); mask-image: url(../../img/element-icons/room/files.ee097b4.svg); } .mx_RoomGeneralContextMenu_iconPins::before { -webkit-mask-image: url(../../img/element-icons/room/pin-upright.92d1884.svg); mask-image: url(../../img/element-icons/room/pin-upright.92d1884.svg); } .mx_RoomGeneralContextMenu_iconWidgets::before { -webkit-mask-image: url(../../img/element-icons/room/apps.4933168.svg); mask-image: url(../../img/element-icons/room/apps.4933168.svg); } .mx_RoomGeneralContextMenu_iconSettings::before { -webkit-mask-image: url(../../img/element-icons/settings.0c529f2.svg); mask-image: url(../../img/element-icons/settings.0c529f2.svg); } .mx_RoomGeneralContextMenu_iconExport::before { -webkit-mask-image: url(../../img/element-icons/export.9b2ed5d.svg); mask-image: url(../../img/element-icons/export.9b2ed5d.svg); } .mx_RoomGeneralContextMenu_iconDeveloperTools::before { -webkit-mask-image: url(../../img/element-icons/settings/flask.699f7f9.svg); mask-image: url(../../img/element-icons/settings/flask.699f7f9.svg); } .mx_RoomGeneralContextMenu_iconCopyLink::before { -webkit-mask-image: url(../../img/element-icons/link.3f7cd42.svg); mask-image: url(../../img/element-icons/link.3f7cd42.svg); } .mx_RoomGeneralContextMenu_iconInvite::before { -webkit-mask-image: url(../../img/element-icons/room/invite.7232ec2.svg); mask-image: url(../../img/element-icons/room/invite.7232ec2.svg); } .mx_RoomGeneralContextMenu_iconSignOut::before { -webkit-mask-image: url(../../img/element-icons/leave.9ad00a5.svg); mask-image: url(../../img/element-icons/leave.9ad00a5.svg); } .mx_RoomNotificationContextMenu_iconBell::before { -webkit-mask-image: url(../../img/element-icons/notifications.b4d3969.svg); mask-image: url(../../img/element-icons/notifications.b4d3969.svg); } .mx_RoomNotificationContextMenu_iconBellDot::before { -webkit-mask-image: url(../../img/element-icons/roomlist/notifications-default.913763b.svg); mask-image: url(../../img/element-icons/roomlist/notifications-default.913763b.svg); } .mx_RoomNotificationContextMenu_iconBellMentions::before { -webkit-mask-image: url(../../img/element-icons/roomlist/notifications-dm.ceba248.svg); mask-image: url(../../img/element-icons/roomlist/notifications-dm.ceba248.svg); } .mx_RoomNotificationContextMenu_iconBellCrossed::before { -webkit-mask-image: url(../../img/element-icons/roomlist/notifications-off.94bceac.svg); mask-image: url(../../img/element-icons/roomlist/notifications-off.94bceac.svg); } /* Copyright 2021 The Matrix.org Foundation C.I.C. Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0 Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License. */ .mx_AddExistingToSpaceDialog_wrapper .mx_Dialog { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } .mx_AddExistingToSpace .mx_SearchBox { /* To match the space around the title */ margin: 0 0 15px 0; -webkit-box-flex: 0; -ms-flex-positive: 0; flex-grow: 0; } .mx_AddExistingToSpace .mx_AddExistingToSpace_content { -webkit-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1; } .mx_AddExistingToSpace .mx_AddExistingToSpace_noResults { display: block; margin-top: 24px; } .mx_AddExistingToSpace .mx_AddExistingToSpace_section { margin-right: 12px; } /* provides space for scrollbar so that checkbox and scrollbar do not collide*/ .mx_AddExistingToSpace .mx_AddExistingToSpace_section:not(:first-child) { margin-top: 24px; } .mx_AddExistingToSpace .mx_AddExistingToSpace_section > h3 { margin: 0; color: #edf3ff; color: var(--secondary-content, #edf3ff); font-size: 1.2rem; font-weight: 600; font-weight: var(--font-semi-bold); line-height: 1.5rem; } .mx_AddExistingToSpace .mx_AddExistingToSpace_section .mx_AccessibleButton_kind_link { font-size: 1.2rem; line-height: 1.5rem; margin-top: 8px; } .mx_AddExistingToSpace .mx_AddExistingToSpace_footer { display: -webkit-box; display: -ms-flexbox; display: flex; margin-top: 20px; } .mx_AddExistingToSpace .mx_AddExistingToSpace_footer > span { -webkit-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1; font-size: 1.2rem; line-height: 1.5rem; color: #edf3ff; color: var(--secondary-content, #edf3ff); } .mx_AddExistingToSpace .mx_AddExistingToSpace_footer > span .mx_ProgressBar { height: 8px; width: 100%; border-radius: 8px; } .mx_AddExistingToSpace .mx_AddExistingToSpace_footer > span .mx_ProgressBar::-moz-progress-bar { border-radius: 8px; } .mx_AddExistingToSpace .mx_AddExistingToSpace_footer > span .mx_ProgressBar::-webkit-progress-bar, .mx_AddExistingToSpace .mx_AddExistingToSpace_footer > span .mx_ProgressBar::-webkit-progress-value { border-radius: 8px; } .mx_AddExistingToSpace .mx_AddExistingToSpace_footer > span .mx_AddExistingToSpaceDialog_progressText { margin-top: 8px; font-size: 1.5rem; line-height: 2.4rem; color: var(--timeline-text-color); } .mx_AddExistingToSpace .mx_AddExistingToSpace_footer > span > * { vertical-align: middle; } .mx_AddExistingToSpace .mx_AddExistingToSpace_footer .mx_AddExistingToSpace_error { padding-left: 12px; } .mx_AddExistingToSpace .mx_AddExistingToSpace_footer .mx_AddExistingToSpace_error > img { -ms-flex-item-align: center; align-self: center; } .mx_AddExistingToSpace .mx_AddExistingToSpace_footer .mx_AddExistingToSpace_error .mx_AddExistingToSpace_errorHeading { font-weight: 600; font-weight: var(--font-semi-bold); font-size: 1.5rem; line-height: 1.8rem; color: #ff5b55; color: var(--alert, #ff5b55); } .mx_AddExistingToSpace .mx_AddExistingToSpace_footer .mx_AddExistingToSpace_error .mx_AddExistingToSpace_errorCaption { margin-top: 4px; font-size: 1.2rem; line-height: 1.5rem; color: var(--timeline-text-color); } .mx_AddExistingToSpace .mx_AddExistingToSpace_footer .mx_AccessibleButton { display: inline-block; -ms-flex-item-align: center; align-self: center; } .mx_AddExistingToSpace .mx_AddExistingToSpace_footer .mx_AccessibleButton_kind_primary { padding: 8px 36px; } .mx_AddExistingToSpace .mx_AddExistingToSpace_footer .mx_AddExistingToSpace_retryButton { margin-left: 12px; padding-left: 24px; position: relative; } .mx_AddExistingToSpace .mx_AddExistingToSpace_footer .mx_AddExistingToSpace_retryButton::before { content: ""; position: absolute; background-color: var(--timeline-text-color); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain; -webkit-mask-image: url(../../img/element-icons/retry.2bad236.svg); mask-image: url(../../img/element-icons/retry.2bad236.svg); width: 18px; height: 18px; left: 0; } .mx_AddExistingToSpaceDialog { width: 480px; color: var(--timeline-text-color); display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -ms-flex-wrap: nowrap; flex-wrap: nowrap; min-height: 0; height: 80vh; } .mx_AddExistingToSpaceDialog .mx_AddExistingToSpace { display: contents; } .mx_SubspaceSelector { display: -webkit-box; display: -ms-flexbox; display: flex; } .mx_SubspaceSelector .mx_BaseAvatar_image { border-radius: 8px; margin: 0; vertical-align: unset; } .mx_SubspaceSelector .mx_BaseAvatar { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; margin: auto 16px auto 5px; vertical-align: middle; } .mx_SubspaceSelector > div > h1 { font-weight: 600; font-weight: var(--font-semi-bold); font-size: 1.8rem; line-height: 2.2rem; margin: 0; } .mx_SubspaceSelector .mx_Dropdown_input { border: none; } .mx_SubspaceSelector .mx_Dropdown_input > .mx_Dropdown_option { padding-left: 0; -webkit-box-flex: unset; -ms-flex: unset; flex: unset; height: unset; color: #edf3ff; color: var(--secondary-content, #edf3ff); font-size: 1.5rem; line-height: 2.4rem; } .mx_SubspaceSelector .mx_Dropdown_input > .mx_Dropdown_option .mx_BaseAvatar { display: none; } .mx_SubspaceSelector .mx_Dropdown_input .mx_Dropdown_menu .mx_SubspaceSelector_dropdownOptionActive { color: #0dbd8b; color: var(--accent, #0dbd8b); padding-right: 32px; position: relative; } .mx_SubspaceSelector .mx_Dropdown_input .mx_Dropdown_menu .mx_SubspaceSelector_dropdownOptionActive::before { content: ""; width: 20px; height: 20px; top: 8px; right: 0; position: absolute; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; background-color: #0dbd8b; background-color: var(--accent, #0dbd8b); -webkit-mask-image: url(../../img/element-icons/roomlist/checkmark.8e909d3.svg); mask-image: url(../../img/element-icons/roomlist/checkmark.8e909d3.svg); } .mx_SubspaceSelector .mx_SubspaceSelector_onlySpace { color: #edf3ff; color: var(--secondary-content, #edf3ff); font-size: 1.5rem; line-height: 2.4rem; } .mx_AddExistingToSpace_entry { display: -webkit-box; display: -ms-flexbox; display: flex; margin-top: 12px; } .mx_AddExistingToSpace_entry .mx_DecoratedRoomAvatar, .mx_AddExistingToSpace_entry .mx_BaseAvatar.mx_RoomAvatar_isSpaceRoom { margin-right: 12px; } .mx_AddExistingToSpace_entry img.mx_RoomAvatar_isSpaceRoom, .mx_AddExistingToSpace_entry .mx_RoomAvatar_isSpaceRoom img { border-radius: 8px; } .mx_AddExistingToSpace_entry .mx_AddExistingToSpace_entry_name { font-size: 1.5rem; line-height: 30px; -webkit-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; margin-right: 12px; } .mx_AddExistingToSpace_entry .mx_Checkbox { -webkit-box-align: center; -ms-flex-align: center; align-items: center; } /* Copyright 2021 The Matrix.org Foundation C.I.C. Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0 Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License. */ .mx_AnalyticsLearnMoreDialog { max-width: 500px; } .mx_AnalyticsLearnMoreDialog .mx_AnalyticsLearnMore_image_holder { background-image: url(../../img/element-shiny.9ddee3e.svg); background-repeat: no-repeat; background-position: center top; height: 112px; padding: 20px 0px; } .mx_AnalyticsLearnMoreDialog .mx_Dialog_content { margin-bottom: 0px; } .mx_AnalyticsLearnMoreDialog .mx_AnalyticsLearnMore_copy { border-bottom: 1px solid #000000; padding-bottom: 20px; margin-bottom: 20px; } .mx_AnalyticsLearnMoreDialog a { color: #0dbd8b; color: var(--accent, #0dbd8b); text-decoration: none; } .mx_AnalyticsLearnMoreDialog .mx_AnalyticsLearnMore_bullets { padding-left: 0px; } .mx_AnalyticsLearnMoreDialog .mx_AnalyticsLearnMore_bullets li { background: url(../../img/tick-circle.07c2a4a.svg) no-repeat; list-style-type: none; padding: 2px 0px 20px 32px; vertical-align: middle; } .mx_AppDownloadDialog { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; grid-gap: 32px; gap: 32px; color: var(--timeline-text-color); } .mx_AppDownloadDialog.mx_Dialog_fixedWidth { width: 640px; } .mx_AppDownloadDialog .mx_AppDownloadDialog_desktop { 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; grid-gap: 16px; gap: 16px; } .mx_AppDownloadDialog .mx_AppDownloadDialog_mobile { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; grid-gap: 24px; gap: 24px; } .mx_AppDownloadDialog .mx_AppDownloadDialog_mobile .mx_AppDownloadDialog_app { 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; -ms-flex-preferred-size: 50%; flex-basis: 50%; -webkit-box-align: center; -ms-flex-align: center; align-items: center; grid-gap: 16px; gap: 16px; } .mx_AppDownloadDialog .mx_AppDownloadDialog_mobile .mx_AppDownloadDialog_app .mx_QRCode { /* intentionally hardcoded color to ensure the QR code is readable in any situation */ background: #ffffff; padding: 24px; border: 1px solid #6f7882; border: 1px solid var(--quinary-content, #6f7882); border-radius: 4px; -ms-flex-item-align: stretch; align-self: stretch; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } .mx_AppDownloadDialog .mx_AppDownloadDialog_mobile .mx_AppDownloadDialog_app .mx_QRCode .mx_VerificationQRCode { height: 144px; width: 144px; -ms-interpolation-mode: nearest-neighbor; image-rendering: -webkit-optimize-contrast; image-rendering: -o-pixelated; image-rendering: pixelated; border-radius: 0; } .mx_AppDownloadDialog .mx_AppDownloadDialog_mobile .mx_AppDownloadDialog_app .mx_AppDownloadDialog_info { font-size: 1.2rem; color: #edf3ff; color: var(--tertiary-content, #edf3ff); } .mx_AppDownloadDialog .mx_AppDownloadDialog_mobile .mx_AppDownloadDialog_app .mx_AppDownloadDialog_links { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; grid-gap: 8px; gap: 8px; } .mx_AppDownloadDialog .mx_AppDownloadDialog_mobile .mx_AppDownloadDialog_app .mx_AppDownloadDialog_links .mx_AccessibleButton svg { height: 40px; } .mx_AppDownloadDialog .mx_AppDownloadDialog_legal p { margin: 0; font-size: 1.2rem; color: #edf3ff; color: var(--tertiary-content, #edf3ff); } /* Copyright 2020 The Matrix.org Foundation C.I.C. Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0 Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License. */ .mx_BugReportDialog .mx_BugReportDialog_download .mx_AccessibleButton_kind_link { margin-right: 18px; /* Space between "Downloading logs..." */ } /* Copyright 2021 Robin Townsend Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0 Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License. */ .mx_BulkRedactDialog .mx_Checkbox, .mx_BulkRedactDialog .mx_BulkRedactDialog_checkboxMicrocopy { line-height: 2rem; } .mx_BulkRedactDialog .mx_BulkRedactDialog_checkboxMicrocopy { margin-left: 26px; color: #edf3ff; color: var(--secondary-content, #edf3ff); } /* Copyright 2016 Aviral Dasgupta Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0 Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License. */ .mx_ChangelogDialog_content { max-height: 300px; overflow: auto; } .mx_ChangelogDialog_li { padding: 0.2em; } /* Copyright 2021 The Matrix.org Foundation C.I.C. Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0 Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License. */ /* -------------------------------------------------------------------------------- */ /* DEV NOTE: This stylesheet covers dialogs listed by the compound, including */ /* over multiple React components. The actual inner contents of the dialog should */ /* be in their respective stylesheets. */ /* -------------------------------------------------------------------------------- */ /* Override legacy/default styles for dialogs */ .mx_Dialog_wrapper.mx_CompoundDialog > .mx_Dialog { padding: 0; /* we'll manage it ourselves */ color: var(--timeline-text-color); } .mx_CompoundDialog .mx_Dialog { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } .mx_CompoundDialog .mx_CompoundDialog_header { padding: 32px 32px 16px 32px; } .mx_CompoundDialog .mx_CompoundDialog_header h1 { display: inline-block; font-weight: 600; font-weight: var(--font-semi-bold); font-size: 2.4rem; margin: 0; /* managed by header class */ } .mx_CompoundDialog .mx_CompoundDialog_header .mx_CompoundDialog_cancelButton { -webkit-mask: url(../../img/cancel.12c5c12.svg); mask: url(../../img/cancel.12c5c12.svg); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: cover; mask-size: cover; background-color: #9fa9ba; cursor: pointer; position: unset; width: unset; height: unset; width: 20px; height: 20px; /* Align with middle of title, 34px from right edge */ position: absolute; top: 34px; right: 34px; } .mx_CompoundDialog .mx_CompoundDialog_form { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; min-height: 0; max-height: 100%; } .mx_CompoundDialog .mx_CompoundDialog_content { overflow: auto; padding: 8px 32px; } .mx_CompoundDialog .mx_CompoundDialog_footer { padding: 20px 32px; text-align: right; } .mx_CompoundDialog .mx_CompoundDialog_footer .mx_AccessibleButton { margin-left: 24px; } .mx_ScrollableBaseDialog { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; width: 544px; /* fixed */ height: 516px; /* fixed */ max-width: 100%; min-height: 0; max-height: 80%; } .mx_ScrollableBaseDialog .mx_CompoundDialog_footer { -webkit-box-shadow: 0px -4px 4px rgba(0, 0, 0, 0.05); box-shadow: 0px -4px 4px rgba(0, 0, 0, 0.05); /* hardcoded colour for both themes */ z-index: 1; /* needed to make footer & shadow appear above dialog content */ } /* Copyright 2021 The Matrix.org Foundation C.I.C. Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0 Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License. */ .mx_ConfirmSpaceUserActionDialog_wrapper .mx_Dialog { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; padding: 24px 32px; } .mx_ConfirmSpaceUserActionDialog { width: 440px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -ms-flex-wrap: nowrap; flex-wrap: nowrap; height: 520px; } .mx_ConfirmSpaceUserActionDialog .mx_Dialog_content { margin: 12px 0; -webkit-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1; overflow-y: auto; } .mx_ConfirmSpaceUserActionDialog .mx_ConfirmUserActionDialog_reasonField { margin-bottom: 12px; } .mx_ConfirmSpaceUserActionDialog .mx_ConfirmSpaceUserActionDialog_warning { position: relative; border-radius: 8px; padding: 12px 8px 12px 42px; background-color: var(--roomlist-background-color); font-size: 1.2rem; line-height: 1.5rem; color: #edf3ff; color: var(--secondary-content, #edf3ff); } .mx_ConfirmSpaceUserActionDialog .mx_ConfirmSpaceUserActionDialog_warning::before { content: ""; position: absolute; left: 10px; top: calc(50% - 8px); /* vertical centering */ height: 16px; width: 16px; background-color: #edf3ff; background-color: var(--secondary-content, #edf3ff); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: contain; mask-size: contain; -webkit-mask-image: url(../../img/element-icons/room/room-summary.a377754.svg); mask-image: url(../../img/element-icons/room/room-summary.a377754.svg); -webkit-mask-position: center; mask-position: center; } /* Copyright 2017 Vector Creations Ltd. Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0 Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License. */ .mx_ConfirmUserActionDialog .mx_Dialog_content .mx_ConfirmUserActionDialog_user { min-height: 48px; margin-bottom: 24px; } .mx_ConfirmUserActionDialog_avatar { float: left; margin-right: 20px; } .mx_ConfirmUserActionDialog_name { padding-top: 2px; font-size: 1.8rem; } .mx_ConfirmUserActionDialog_userId { font-size: 1.3rem; } .mx_ConfirmUserActionDialog_reasonField { font-size: 1.4rem; color: var(--timeline-text-color); background-color: var(--timeline-background-color); } /* Copyright 2017 Michael Telatynski <7t3chguy@gmail.com> Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0 Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License. */ .mx_CreateRoomDialog_details { margin-top: 15px; } .mx_CreateRoomDialog_details .mx_CreateRoomDialog_details_summary { list-style: none; font-weight: 600; font-weight: var(--font-semi-bold); cursor: pointer; color: #0dbd8b; color: var(--accent, #0dbd8b); } /* list-style doesn't do it for webkit */ .mx_CreateRoomDialog_details .mx_CreateRoomDialog_details_summary::-webkit-details-marker { display: none; } .mx_CreateRoomDialog_details .mx_CreateRoomDialog_details_summary:not(.focus-visible) { outline: none; } .mx_CreateRoomDialog_details > div { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; margin: 5px 0; } .mx_CreateRoomDialog_details > div input[type="checkbox"] { margin-right: 10px; } .mx_CreateRoomDialog_label { text-align: left; padding-bottom: 12px; } .mx_CreateRoomDialog_input_container { padding-right: 20px; } .mx_CreateRoomDialog_input { font-size: 1.5rem; border-radius: 3px; border: 1px solid #e7e7e7; padding: 9px; color: var(--timeline-text-color); background-color: var(--timeline-background-color); width: 100%; } /* needed to make the alias field only grow as wide as needed */ /* as opposed to full width */ .mx_CreateRoomDialog_aliasContainer { display: -webkit-box; display: -ms-flexbox; display: flex; /* put margin on container so it can collapse with siblings */ margin: 24px 0 10px; } .mx_CreateRoomDialog_aliasContainer .mx_RoomAliasField { margin: 0; } .mx_CreateRoomDialog.mx_Dialog_fixedWidth { width: 450px; } .mx_CreateRoomDialog .mx_Dialog_content { margin-bottom: 40px; } .mx_CreateRoomDialog p, .mx_CreateRoomDialog .mx_Field_input label { color: #a1b2d1; } .mx_CreateRoomDialog .mx_SettingsFlag { display: -webkit-box; display: -ms-flexbox; display: flex; } .mx_CreateRoomDialog .mx_SettingsFlag_label { -webkit-box-flex: 1; -ms-flex: 1 1 0px; flex: 1 1 0; min-width: 0; font-weight: 600; font-weight: var(--font-semi-bold); } .mx_CreateRoomDialog .mx_ToggleSwitch { -webkit-box-flex: 0; -ms-flex: 0 0 auto; flex: 0 0 auto; margin-left: 30px; } .mx_CreateRoomDialog .mx_Dialog_content > .mx_SettingsFlag { margin-top: 24px; } .mx_CreateRoomDialog p { margin: 0 85px 0 0; font-size: 1.2rem; } /* Copyright 2021 The Matrix.org Foundation C.I.C. Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0 Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License. */ .mx_CreateSubspaceDialog_wrapper .mx_Dialog { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } .mx_CreateSubspaceDialog { width: 480px; color: var(--timeline-text-color); display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -ms-flex-wrap: nowrap; flex-wrap: nowrap; min-height: 0; } .mx_CreateSubspaceDialog .mx_CreateSubspaceDialog_content { -webkit-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1; } .mx_CreateSubspaceDialog .mx_CreateSubspaceDialog_content .mx_CreateSubspaceDialog_betaNotice { padding: 12px 16px; border-radius: 8px; background-color: var(--roomlist-background-color); } .mx_CreateSubspaceDialog .mx_CreateSubspaceDialog_content .mx_CreateSubspaceDialog_betaNotice .mx_BetaCard_betaPill { margin-right: 8px; vertical-align: middle; } .mx_CreateSubspaceDialog .mx_CreateSubspaceDialog_content .mx_JoinRuleDropdown + p { color: #a1b2d1; font-size: 1.2rem; } .mx_CreateSubspaceDialog .mx_CreateSubspaceDialog_footer { display: -webkit-box; display: -ms-flexbox; display: flex; margin-top: 20px; } .mx_CreateSubspaceDialog .mx_CreateSubspaceDialog_footer .mx_CreateSubspaceDialog_footer_prompt { -webkit-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1; font-size: 1.2rem; line-height: 1.5rem; color: #edf3ff; color: var(--secondary-content, #edf3ff); } .mx_CreateSubspaceDialog .mx_CreateSubspaceDialog_footer .mx_CreateSubspaceDialog_footer_prompt > * { vertical-align: middle; } .mx_CreateSubspaceDialog .mx_CreateSubspaceDialog_footer .mx_AccessibleButton { display: inline-block; -ms-flex-item-align: center; align-self: center; } .mx_CreateSubspaceDialog .mx_CreateSubspaceDialog_footer .mx_AccessibleButton_kind_primary { margin-left: 16px; padding: 8px 36px; } /* Copyright 2018 New Vector Ltd. Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0 Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License. */ .mx_DeactivateAccountDialog .mx_Dialog_content { margin-bottom: 30px; } .mx_DeactivateAccountDialog .mx_DeactivateAccountDialog_input_section .mx_Field { width: 300px; } /* Copyright 2017 Michael Telatynski <7t3chguy@gmail.com> Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0 Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License. */ .mx_DevtoolsDialog_wrapper .mx_Dialog { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } .mx_DevtoolsDialog_wrapper .mx_Dialog_fixedWidth { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; min-height: 0; max-height: 100%; } .mx_DevtoolsDialog_wrapper .mx_Dialog_fixedWidth .mx_Dialog_buttons button { margin-bottom: 0; } .mx_DevTools_content { overflow-y: auto; } .mx_DevTools_RoomStateExplorer_query { margin-bottom: 10px; } .mx_DevTools_button { font-family: monospace !important; margin-bottom: 8px !important; } .mx_DevTools_RoomStateExplorer_button_hasSpaces { text-decoration: underline; } .mx_DevTools_button.mx_DevTools_RoomStateExplorer_button_emptyString { font-style: italic; } .mx_DevTools_label_left { float: left; } .mx_DevTools_label_right { float: right; } .mx_DevTools_label_bottom { clear: both; border-bottom: 1px solid #e5e5e5; } .mx_DevTools_inputRow { display: table-row; } .mx_DevTools_inputLabelCell { display: table-cell; font-weight: bold; padding-right: 24px; } .mx_DevTools_textarea { font-size: 1.2rem; max-width: 684px; min-height: 250px; padding: 10px; } .mx_DevTools_eventTypeStateKeyGroup { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; } .mx_DevTools_content .mx_Field_input:first-of-type { margin-right: 42px; } .mx_DevTools_VerificationRequest { border: 1px solid #cccccc; border-radius: 3px; padding: 1px 5px; margin-bottom: 6px; font-family: "Inconsolata", "Twemoji", "Apple Color Emoji", "Segoe UI Emoji", "Courier", monospace, "Noto Color Emoji"; font-family: var(--font-family-monospace, "Inconsolata", "Twemoji", "Apple Color Emoji", "Segoe UI Emoji", "Courier", monospace, "Noto Color Emoji"); } .mx_DevTools_VerificationRequest dl { display: grid; grid-template-columns: -webkit-max-content auto; grid-template-columns: max-content auto; margin: 0; } .mx_DevTools_VerificationRequest dd { grid-column-start: 2; } .mx_DevTools_VerificationRequest dd:empty { color: #666666; } .mx_DevTools_VerificationRequest dd:empty::after { content: "(empty)"; } .mx_DevTools_VerificationRequest dt { font-weight: bold; grid-column-start: 1; } .mx_DevTools_VerificationRequest dt::after { content: ":"; } .mx_DevTools_SettingsExplorer table { width: 100%; table-layout: fixed; border-collapse: collapse; } .mx_DevTools_SettingsExplorer table th { /* Colour choice: first one autocomplete gave me. */ border-bottom: 1px solid #0dbd8b; border-bottom: 1px solid var(--accent, #0dbd8b); text-align: left; } .mx_DevTools_SettingsExplorer table td, .mx_DevTools_SettingsExplorer table th { width: 360px; /* "feels right" number */ text-overflow: ellipsis; overflow: hidden; white-space: nowrap; } .mx_DevTools_SettingsExplorer table td + td, .mx_DevTools_SettingsExplorer table th + th { width: auto; } .mx_DevTools_SettingsExplorer table tr:hover { /* Colour choice: first one autocomplete gave me. */ background-color: #0dbd8b; background-color: var(--accent, #0dbd8b); } .mx_DevTools_SettingsExplorer .mx_DevTools_SettingsExplorer_mutable { background-color: #0dbd8b; background-color: var(--accent, #0dbd8b); } .mx_DevTools_SettingsExplorer .mx_DevTools_SettingsExplorer_immutable { background-color: #ff5b55; background-color: var(--alert, #ff5b55); } .mx_DevTools_SettingsExplorer .mx_DevTools_SettingsExplorer_edit { float: right; margin-right: 16px; } .mx_DevTools_SettingsExplorer .mx_DevTools_SettingsExplorer_warning { border: 2px solid #ff5b55; border: 2px solid var(--alert, #ff5b55); border-radius: 4px; padding: 4px; margin-bottom: 8px; } .mx_DevTools_SettingsExplorer_setting { /* override default link button color */ /* as it is the same as the background highlight */ /* used on focus */ color: #0086e6 !important; color: var(--links, #0086e6) !important; } /* Copyright 2021 The Matrix.org Foundation C.I.C. Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0 Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License. */ .mx_ExportDialog .mx_ExportDialog_subheading { font-size: 1.6rem; display: block; font-family: "Nunito", "Twemoji", "Apple Color Emoji", "Segoe UI Emoji", "Arial", "Helvetica", sans-serif, "Noto Color Emoji"; font-family: var(--font-family, "Nunito", "Twemoji", "Apple Color Emoji", "Segoe UI Emoji", "Arial", "Helvetica", sans-serif, "Noto Color Emoji"); font-weight: 600; font-weight: var(--font-semi-bold); color: var(--timeline-text-color); margin-top: 18px; margin-bottom: 12px; } .mx_ExportDialog.mx_ExportDialog_Exporting .mx_ExportDialog_options { pointer-events: none; } .mx_ExportDialog.mx_ExportDialog_Exporting .mx_Field_select::before { display: none; } .mx_ExportDialog.mx_ExportDialog_Exporting .mx_StyledRadioButton input[type="radio"]:checked + div > div { background: var(--timeline-text-secondary-color); } .mx_ExportDialog.mx_ExportDialog_Exporting .mx_StyledRadioButton input[type="radio"]:checked + div { border-color: unset; } .mx_ExportDialog.mx_ExportDialog_Exporting .mx_Field_valid.mx_Field label, .mx_ExportDialog.mx_ExportDialog_Exporting .mx_Field_valid.mx_Field:focus-within label { color: unset; } .mx_ExportDialog.mx_ExportDialog_Exporting .mx_Field_valid.mx_Field, .mx_ExportDialog.mx_ExportDialog_Exporting .mx_Field_valid.mx_Field:focus-within { border-color: #e7e7e7; } .mx_ExportDialog.mx_ExportDialog_Exporting .mx_Checkbox input[type="checkbox"]:checked + label > .mx_Checkbox_background { background: var(--timeline-text-secondary-color); border-color: var(--timeline-text-secondary-color); } .mx_ExportDialog .mx_ExportDialog_progress .mx_Dialog_buttons { margin-top: unset; margin-left: 18px; } .mx_ExportDialog .mx_ExportDialog_progress .mx_Spinner { width: unset; height: unset; -webkit-box-flex: unset; -ms-flex: unset; flex: unset; margin-right: 10px; } .mx_ExportDialog .mx_ExportDialog_progress { 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: end; -ms-flex-pack: end; justify-content: flex-end; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .mx_ExportDialog .mx_StyledRadioButton > .mx_StyledRadioButton_content { margin-top: 5px; margin-bottom: 5px; } .mx_ExportDialog .mx_Field { width: 256px; } .mx_ExportDialog .mx_Field_postfix { padding: 9px 10px; } .mx_ExportDialog_attachments-checkbox { margin-top: 16px; } /* Copyright 2020 The Matrix.org Foundation C.I.C. Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0 Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License. */ .mx_FeedbackDialog hr { margin: 24px 0; border-color: #e7e7e7; } .mx_FeedbackDialog .mx_Dialog_content { margin-bottom: 24px; } .mx_FeedbackDialog .mx_Dialog_content > h2 { margin-bottom: 32px; } .mx_FeedbackDialog .mx_FeedbackDialog_section { position: relative; padding: 12px 52px 12px 68px; border-radius: 8px; border: 1px solid #6f7882; border: 1px solid var(--quinary-content, #6f7882); } .mx_FeedbackDialog .mx_FeedbackDialog_section + .mx_FeedbackDialog_section { margin-top: 16px; } .mx_FeedbackDialog .mx_FeedbackDialog_section > h3 { margin-top: 0; margin-bottom: 8px; font-weight: 600; font-weight: var(--font-semi-bold); font-size: 1.8rem; line-height: 2.2rem; } .mx_FeedbackDialog .mx_FeedbackDialog_section > p { color: #edf3ff; color: var(--secondary-content, #edf3ff); font-size: 1.5rem; line-height: 2.4rem; margin: 8px 0 0; } .mx_FeedbackDialog .mx_FeedbackDialog_section .mx_FeedbackDialog_section_microcopy { font-size: 1.2rem; line-height: 1.5rem; } .mx_FeedbackDialog .mx_FeedbackDialog_section a, .mx_FeedbackDialog .mx_FeedbackDialog_section .mx_AccessibleButton_kind_link { color: #0dbd8b; color: var(--accent, #0dbd8b); text-decoration: underline; } .mx_FeedbackDialog .mx_FeedbackDialog_section::before, .mx_FeedbackDialog .mx_FeedbackDialog_section::after { content: ""; position: absolute; width: 40px; height: 40px; left: 16px; top: 12px; } .mx_FeedbackDialog .mx_FeedbackDialog_section::before { background-color: #a1b2d1; background-color: var(--icon-button-color, #a1b2d1); border-radius: 8px; } .mx_FeedbackDialog .mx_FeedbackDialog_section::after { background: #ffffff; /* TODO */ -webkit-mask-position: center; mask-position: center; -webkit-mask-size: 24px; mask-size: 24px; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; } .mx_FeedbackDialog .mx_FeedbackDialog_reportBug::after { -webkit-mask-image: url(../../img/feather-customised/bug.558664b.svg); mask-image: url(../../img/feather-customised/bug.558664b.svg); } .mx_FeedbackDialog .mx_FeedbackDialog_rateApp .mx_StyledRadioButton { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; font-size: 20px; -webkit-transition: font-size 1s, border 0.5s; transition: font-size 1s, border 0.5s; border-radius: 50%; border: 2px solid transparent; margin-top: 12px; margin-bottom: 24px; vertical-align: top; cursor: pointer; } .mx_FeedbackDialog .mx_FeedbackDialog_rateApp .mx_StyledRadioButton input[type="radio"] + div { display: none; } .mx_FeedbackDialog .mx_FeedbackDialog_rateApp .mx_StyledRadioButton .mx_StyledRadioButton_content { background: #a1b2d1; background: var(--icon-button-color, #a1b2d1); width: 40px; height: 40px; text-align: center; line-height: 40px; border-radius: 20px; margin: 5px; } .mx_FeedbackDialog .mx_FeedbackDialog_rateApp .mx_StyledRadioButton .mx_StyledRadioButton_spacer { display: none; } .mx_FeedbackDialog .mx_FeedbackDialog_rateApp .mx_StyledRadioButton + .mx_StyledRadioButton { margin-left: 16px; } .mx_FeedbackDialog .mx_FeedbackDialog_rateApp .mx_StyledRadioButton_checked { font-size: 24px; border-color: #0dbd8b; border-color: var(--accent, #0dbd8b); } .mx_FeedbackDialog .mx_FeedbackDialog_rateApp::after { -webkit-mask-image: url(../../img/element-icons/feedback.94401b2.svg); mask-image: url(../../img/element-icons/feedback.94401b2.svg); } /* Copyright 2021 Robin Townsend Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0 Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License. */ .mx_ForwardDialog { width: 520px; color: var(--timeline-text-color); display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -ms-flex-wrap: nowrap; flex-wrap: nowrap; min-height: 0; height: 80vh; } .mx_ForwardDialog > h3 { margin: 0 0 6px; color: #edf3ff; color: var(--secondary-content, #edf3ff); font-size: 1.2rem; font-weight: 600; font-weight: var(--font-semi-bold); line-height: 1.5rem; } .mx_ForwardDialog > .mx_ForwardDialog_preview { max-height: 30%; -ms-flex-negative: 0; flex-shrink: 0; overflow-y: auto; /* When forwarding messages from encrypted rooms, EventTile will complain */ /* that our preview is unencrypted, which doesn't actually matter */ } .mx_ForwardDialog > .mx_ForwardDialog_preview .mx_EventTile[data-layout="bubble"] { margin-top: 20px; } .mx_ForwardDialog > .mx_ForwardDialog_preview div { pointer-events: none; } /* We also hide download links to not encourage users to try interacting */ .mx_ForwardDialog > .mx_ForwardDialog_preview .mx_EventTile_msgOption, .mx_ForwardDialog > .mx_ForwardDialog_preview .mx_EventTile_e2eIcon_unencrypted, .mx_ForwardDialog > .mx_ForwardDialog_preview .mx_EventTile_e2eIcon_warning, .mx_ForwardDialog > .mx_ForwardDialog_preview .mx_MFileBody_download { display: none; } .mx_ForwardDialog > hr { width: 100%; border: none; border-top: 1px solid #e7e7e7; margin: 12px 0; } .mx_ForwardDialog > .mx_ForwardList { display: contents; } .mx_ForwardDialog > .mx_ForwardList .mx_SearchBox { /* To match the space around the title */ margin: 0 0 15px 0; -webkit-box-flex: 0; -ms-flex-positive: 0; flex-grow: 0; } .mx_ForwardDialog > .mx_ForwardList .mx_ForwardList_content { -webkit-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1; } .mx_ForwardDialog > .mx_ForwardList .mx_ForwardList_noResults { display: block; margin-top: 24px; } .mx_ForwardDialog > .mx_ForwardList .mx_ForwardList_results:not(:first-child) { margin-top: 24px; } .mx_ForwardDialog > .mx_ForwardList .mx_ForwardList_results .mx_ForwardList_resultsList { padding-right: 8px; } .mx_ForwardDialog > .mx_ForwardList .mx_ForwardList_results .mx_ForwardList_entry { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; height: 32px; padding: 6px; border-radius: 8px; } .mx_ForwardDialog > .mx_ForwardList .mx_ForwardList_results .mx_ForwardList_entry:hover { background-color: var(--sidebar-color); } .mx_ForwardDialog > .mx_ForwardList .mx_ForwardList_results .mx_ForwardList_entry .mx_ForwardList_roomButton { display: -webkit-box; display: -ms-flexbox; display: flex; margin-right: 12px; min-width: 0; } .mx_ForwardDialog > .mx_ForwardList .mx_ForwardList_results .mx_ForwardList_entry .mx_ForwardList_roomButton .mx_DecoratedRoomAvatar { margin-right: 12px; } .mx_ForwardDialog > .mx_ForwardList .mx_ForwardList_results .mx_ForwardList_entry .mx_ForwardList_roomButton .mx_ForwardList_entry_name, .mx_ForwardDialog > .mx_ForwardList .mx_ForwardList_results .mx_ForwardList_entry .mx_ForwardList_roomButton .mx_ForwardList_entry_detail { line-height: 30px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .mx_ForwardDialog > .mx_ForwardList .mx_ForwardList_results .mx_ForwardList_entry .mx_ForwardList_roomButton .mx_ForwardList_entry_name { font-size: 1.5rem; } .mx_ForwardDialog > .mx_ForwardList .mx_ForwardList_results .mx_ForwardList_entry .mx_ForwardList_roomButton .mx_ForwardList_entry_detail { font-size: 1.2rem; margin-left: 8px; color: #edf3ff; color: var(--tertiary-content, #edf3ff); } .mx_ForwardDialog > .mx_ForwardList .mx_ForwardList_results .mx_ForwardList_entry .mx_ForwardList_sendButton { position: relative; margin-left: 12px; } .mx_ForwardDialog > .mx_ForwardList .mx_ForwardList_results .mx_ForwardList_entry .mx_ForwardList_sendButton:not(.mx_ForwardList_canSend) .mx_ForwardList_sendLabel { /* Hide the "Send" label while preserving button size */ visibility: hidden; } .mx_ForwardDialog > .mx_ForwardList .mx_ForwardList_results .mx_ForwardList_entry .mx_ForwardList_sendButton .mx_ForwardList_sendIcon, .mx_ForwardDialog > .mx_ForwardList .mx_ForwardList_results .mx_ForwardList_entry .mx_ForwardList_sendButton .mx_NotificationBadge { position: absolute; } .mx_ForwardDialog > .mx_ForwardList .mx_ForwardList_results .mx_ForwardList_entry .mx_ForwardList_sendButton .mx_NotificationBadge { /* Match the failed to send indicator's color with the disabled button */ background-color: #ffffff; } .mx_ForwardDialog > .mx_ForwardList .mx_ForwardList_results .mx_ForwardList_entry .mx_ForwardList_sendButton.mx_ForwardList_sending .mx_ForwardList_sendIcon { background-color: #0dbd8b; background-color: var(--accent, #0dbd8b); -webkit-mask-image: url(../../img/element-icons/circle-sending.3c01d11.svg); mask-image: url(../../img/element-icons/circle-sending.3c01d11.svg); -webkit-mask-position: center; mask-position: center; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: 14px; mask-size: 14px; width: 14px; height: 14px; } .mx_ForwardDialog > .mx_ForwardList .mx_ForwardList_results .mx_ForwardList_entry .mx_ForwardList_sendButton.mx_ForwardList_sent .mx_ForwardList_sendIcon { background-color: #0dbd8b; background-color: var(--accent, #0dbd8b); -webkit-mask-image: url(../../img/element-icons/circle-sent.8ba4da4.svg); mask-image: url(../../img/element-icons/circle-sent.8ba4da4.svg); -webkit-mask-position: center; mask-position: center; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: 14px; mask-size: 14px; width: 14px; height: 14px; } /*Responsive design*/ @media (max-width: 1024px){ .mx_ForwardDialog{ width: auto !important; } } /* Copyright 2021 The Matrix.org Foundation C.I.C. Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0 Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License. */ .mx_GenericFeatureFeedbackDialog .mx_GenericFeatureFeedbackDialog_subheading { color: var(--timeline-text-color); font-size: 1.4rem; line-height: 2rem; margin-bottom: 24px; } /* Copyright 2019 New Vector Ltd. Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0 Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License. */ .mx_IncomingSasDialog_opponentProfile_image { position: relative; } .mx_IncomingSasDialog_opponentProfile h2 { display: inline-block; margin-left: 10px; } /* Copyright 2019, 2020 The Matrix.org Foundation C.I.C. Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0 Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License. */ .mx_InviteDialog_flexWrapper .mx_Dialog { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } .mx_InviteDialog_transferWrapper .mx_Dialog { padding-bottom: 16px; } .mx_InviteDialog_addressBar { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; /* Right margin for the design. We could apply this to the whole dialog, but then the scrollbar */ /* for the user section gets weird. */ margin: 8px 45px 0 0; } .mx_InviteDialog_addressBar .mx_InviteDialog_editor { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; width: 100%; /* Needed to make the Field inside grow */ background-color: var(--roomlist-background-color); border-radius: 4px; min-height: 25px; -webkit-padding-start: 8px; padding-inline-start: 8px; overflow-x: hidden; overflow-y: auto; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; } .mx_InviteDialog_addressBar .mx_InviteDialog_editor .mx_InviteDialog_userTile { margin: 6px 6px 0 0; display: inline-block; min-width: -webkit-max-content; min-width: -moz-max-content; min-width: max-content; /* prevent manipulation by flexbox */ } /* overrides bunch of our default text input styles */ .mx_InviteDialog_addressBar .mx_InviteDialog_editor > input[type="text"] { margin: 6px 0 !important; height: 24px; line-height: 2.4rem; font-size: 1.4rem; -webkit-padding-start: 12px; padding-inline-start: 12px; border: 0 !important; outline: 0 !important; resize: none; -webkit-box-sizing: border-box; box-sizing: border-box; min-width: 40%; -webkit-box-flex: 1 !important; -ms-flex: 1 !important; flex: 1 !important; color: var(--timeline-text-color) !important; } .mx_InviteDialog_addressBar .mx_InviteDialog_goButton { min-width: 48px; -webkit-margin-start: 10px; margin-inline-start: 10px; height: 25px; line-height: 2.5rem; } .mx_InviteDialog_addressBar .mx_InviteDialog_buttonAndSpinner .mx_Spinner { /* Width and height are required to trick the layout engine. */ width: 20px; height: 20px; -webkit-margin-start: 5px; margin-inline-start: 5px; display: inline-block; vertical-align: middle; } .mx_InviteDialog_section { padding-bottom: 4px; } .mx_InviteDialog_section h3 { font-size: 1.2rem; color: #a1b2d1; font-weight: bold; text-transform: uppercase; } .mx_InviteDialog_section > p { margin: 0; } .mx_InviteDialog_section > span { color: var(--timeline-text-color); } .mx_InviteDialog_section .mx_InviteDialog_section_showMore { margin: 7px 18px; display: block; } .mx_InviteDialog_section_hidden_suggestions_disclaimer { padding: 8px 0 16px 0; font-size: 1.4rem; } .mx_InviteDialog_section_hidden_suggestions_disclaimer > span { color: var(--timeline-text-color); font-weight: 600; font-weight: var(--font-semi-bold); } .mx_InviteDialog_section_hidden_suggestions_disclaimer > p { margin: 0; } .mx_InviteDialog_footer { border-top: 1px solid #e7e7e7; } .mx_InviteDialog_footer > h3 { margin: 12px 0; font-size: 1.2rem; color: #a1b2d1; font-weight: bold; text-transform: uppercase; } .mx_InviteDialog_footer .mx_CopyableText.mx_CopyableText_border { width: unset; /* full width */ margin-bottom: 0; } .mx_InviteDialog_footer .mx_CopyableText.mx_CopyableText_border > a { text-decoration: none; -ms-flex-negative: 1; flex-shrink: 1; overflow: hidden; text-overflow: ellipsis; } /* Many of these styles are stolen from mx_UserPill, but adjusted for the invite dialog. */ .mx_InviteDialog_userTile { -webkit-margin-end: 8px; margin-inline-end: 8px; } .mx_InviteDialog_userTile .mx_InviteDialog_userTile_pill { background-color: #368bd6; background-color: var(--username-colors_0, #368bd6); border-radius: 12px; display: inline-block; height: 24px; line-height: 2.4rem; padding-inline: 8px; color: #ffffff; } /* this is fine without a var because it's for both themes */ .mx_InviteDialog_userTile .mx_InviteDialog_userTile_pill .mx_SearchResultAvatar { border-radius: 20px; position: relative; left: -5px; top: 2px; } .mx_InviteDialog_userTile .mx_InviteDialog_userTile_pill img.mx_SearchResultAvatar { vertical-align: top; } .mx_InviteDialog_userTile .mx_InviteDialog_userTile_pill .mx_InviteDialog_userTile_name { vertical-align: top; } .mx_InviteDialog_userTile .mx_InviteDialog_userTile_pill .mx_SearchResultAvatar_threepidAvatar { background-color: #ffffff; /* this is fine without a var because it's for both themes */ } .mx_InviteDialog_userTile .mx_InviteDialog_userTile_remove { display: inline-block; -webkit-margin-start: 4px; margin-inline-start: 4px; } .mx_InviteDialog_other { /* Prevent the dialog from jumping around randomly when elements change. */ display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; height: 600px; overflow: hidden; } .mx_InviteDialog_other .mx_InviteDialog_addressBar { -webkit-margin-end: 0; margin-inline-end: 0; } .mx_InviteDialog_other .mx_InviteDialog_userSections { -webkit-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1; -webkit-padding-end: 0; padding-inline-end: 0; } .mx_InviteDialog_other .mx_InviteDialog_userSections .mx_InviteDialog_section { padding-bottom: 0; margin-top: 12px; } .mx_InviteDialog_content { 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; overflow: hidden; } .mx_InviteDialog_transfer { width: auto; } .mx_InviteDialog_transfer .mx_InviteDialog_content { width: 496px; height: 430px; overflow: visible; } .mx_InviteDialog_transfer .mx_InviteDialog_content .mx_TabbedView { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -ms-flex-negative: 1; flex-shrink: 1; -webkit-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1; min-height: 0; } .mx_InviteDialog_transfer .mx_InviteDialog_content .mx_TabbedView .mx_TabbedView_tabPanel { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } .mx_InviteDialog_transfer .mx_InviteDialog_content .mx_TabbedView .mx_TabbedView_tabPanel .mx_TabbedView_tabPanelContent { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } .mx_InviteDialog_transfer .mx_InviteDialog_addressBar { margin-top: 8px; } .mx_InviteDialog_transfer input[type="checkbox"] { -webkit-margin-end: 8px; margin-inline-end: 8px; } .mx_InviteDialog_userSections { margin-top: 4px; overflow-y: auto; padding: 0 45px 4px 0; } .mx_InviteDialog_helpText { margin: 0; } .mx_InviteDialog_dialPad { width: 224px; margin-top: 16px; margin-inline: auto; } .mx_InviteDialog_dialPad .mx_InviteDialog_dialPadField { border-top: 0; border-inline: 0; border-radius: 0; margin-top: 0; border-color: #6f7882; border-color: var(--quaternary-content, #6f7882); } .mx_InviteDialog_dialPad .mx_InviteDialog_dialPadField:focus-within { border-color: #0dbd8b; border-color: var(--accent, #0dbd8b); } .mx_InviteDialog_dialPad .mx_InviteDialog_dialPadField input { font-size: 18px; font-weight: 600; font-weight: var(--font-semi-bold); padding-top: 0; } .mx_InviteDialog_dialPad .mx_InviteDialog_dialPadField .mx_Field_postfix { /* Remove border separator between postfix and field content */ border-left: none; } .mx_InviteDialog_dialPad .mx_DialPad { grid-row-gap: 16px; row-gap: 16px; grid-column-gap: 48px; -webkit-column-gap: 48px; -moz-column-gap: 48px; column-gap: 48px; margin-inline: auto; } .mx_InviteDialog_transferConsultConnect { padding-top: 16px; /* This wants a drop shadow the full width of the dialog, so use negative margin to make it full width, * then compensate with padding */ padding-inline: 24px; margin-inline: calc(-1 * 24px); border-top: 1px solid #6f7882; border-top: 1px solid var(--quinary-content, #6f7882); 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; } .mx_InviteDialog_transferConsultConnect_pushRight { -webkit-margin-start: auto; margin-inline-start: auto; } .mx_InviteDialog_userDirectoryIcon::before { -webkit-mask-image: url(../../img/voip/tab-userdirectory.319191d.svg); mask-image: url(../../img/voip/tab-userdirectory.319191d.svg); } .mx_InviteDialog_dialPadIcon::before { -webkit-mask-image: url(../../img/voip/tab-dialpad.0ffd56f.svg); mask-image: url(../../img/voip/tab-dialpad.0ffd56f.svg); } .mx_InviteDialog_tile { cursor: pointer; display: grid; grid-gap: 8px 12px; gap: 8px 12px; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .mx_InviteDialog_tile.mx_InviteDialog_tile--room { /* mx_InviteDialog_tile_avatarStack, mx_InviteDialog_tile_nameStack, time */ grid-template-columns: -webkit-min-content auto auto; grid-template-columns: min-content auto auto; padding: 4px 8px; } .mx_InviteDialog_tile.mx_InviteDialog_tile--room:hover { background-color: var(--roomlist-background-color); border-radius: 4px; } .mx_InviteDialog_tile.mx_InviteDialog_tile--room .mx_InviteDialog_tile--room_selected { border-radius: 36px; background-color: #368bd6; background-color: var(--username-colors_0, #368bd6); } .mx_InviteDialog_tile.mx_InviteDialog_tile--room .mx_InviteDialog_tile--room_selected::before { content: ""; width: 24px; height: 24px; grid-column: 1; grid-row: 1; -webkit-mask-image: url(../../img/feather-customised/check.94da327.svg); mask-image: url(../../img/feather-customised/check.94da327.svg); -webkit-mask-size: 100%; mask-size: 100%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; position: absolute; top: 6px; /* 50% */ left: 6px; /* 50% */ background-color: #ffffff; /* this is fine without a var because it's for both themes */ } .mx_InviteDialog_tile.mx_InviteDialog_tile--room .mx_InviteDialog_tile--room_time { -webkit-margin-start: auto; margin-inline-start: auto; width: -webkit-max-content; width: -moz-max-content; width: max-content; font-size: 1.2rem; color: #a1b2d1; } .mx_InviteDialog_tile.mx_InviteDialog_tile--room .mx_InviteDialog_tile--room_highlight { font-weight: 900; } .mx_InviteDialog_tile.mx_InviteDialog_tile--inviterError { grid-template-columns: -webkit-max-content auto; grid-template-columns: max-content auto; /* max-content = avatar width */ margin-bottom: 24px; } .mx_InviteDialog_tile.mx_InviteDialog_tile--inviterError:last-child { margin-bottom: 0; } .mx_InviteDialog_tile.mx_InviteDialog_tile--inviterError .mx_InviteDialog_tile--inviterError_errorText { grid-row-start: 2; grid-column-start: 2; font-size: 1.5rem; color: #ff5b55; color: var(--alert, #ff5b55); } .mx_InviteDialog_tile * { vertical-align: middle; } .mx_InviteDialog_tile .mx_InviteDialog_tile_avatarStack, .mx_InviteDialog_tile .mx_InviteDialog_tile--room_selected { width: 36px; height: 36px; display: inline-block; position: relative; } .mx_InviteDialog_tile .mx_InviteDialog_tile_avatarStack { grid-row-start: 1; grid-column-start: 1; } .mx_InviteDialog_tile .mx_InviteDialog_tile_avatarStack > * { position: absolute; top: 0; left: 0; } .mx_InviteDialog_tile .mx_InviteDialog_tile_nameStack { grid-row-start: 1; grid-column-start: 2; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-flow: column; flex-flow: column; align-self: center; -webkit-box-align: baseline; -ms-flex-align: baseline; align-items: baseline; grid-gap: 2px 0; gap: 2px 0; overflow: hidden; } .mx_InviteDialog_tile .mx_InviteDialog_tile_nameStack .mx_InviteDialog_tile_nameStack_name, .mx_InviteDialog_tile .mx_InviteDialog_tile_nameStack .mx_InviteDialog_tile_nameStack_userId { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; } .mx_InviteDialog_tile .mx_InviteDialog_tile_nameStack .mx_InviteDialog_tile_nameStack_name { font-size: 1.5rem; font-weight: 600; font-weight: var(--font-semi-bold); color: var(--timeline-text-color); } .mx_InviteDialog_tile .mx_InviteDialog_tile_nameStack .mx_InviteDialog_tile_nameStack_userId { font-size: 1.2rem; color: #a1b2d1; } .mx_InviteDialog_multiInviterError > h4 { font-size: 1.5rem; line-height: 2.4rem; color: #edf3ff; color: var(--secondary-content, #edf3ff); font-weight: normal; } .mx_InviteDialog_identityServer { margin-top: 1em; } .mx_InviteDialog_oneThreepid { font-size: 1.2rem; margin: 8px 0; } /* Copyright 2021 The Matrix.org Foundation C.I.C. Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0 Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License. */ .mx_JoinRuleDropdown { margin-bottom: 8px; font-weight: normal; font-family: "Nunito", "Twemoji", "Apple Color Emoji", "Segoe UI Emoji", "Arial", "Helvetica", sans-serif, "Noto Color Emoji"; font-family: var(--font-family, "Nunito", "Twemoji", "Apple Color Emoji", "Segoe UI Emoji", "Arial", "Helvetica", sans-serif, "Noto Color Emoji"); font-size: 1.4rem; color: var(--timeline-text-color); } .mx_JoinRuleDropdown .mx_Dropdown_input { border: 1px solid #e7e7e7; } .mx_JoinRuleDropdown .mx_Dropdown_option { font-size: 1.4rem; line-height: 3.2rem; height: 32px; min-height: 32px; } .mx_JoinRuleDropdown .mx_Dropdown_option > div { padding-left: 30px; position: relative; } .mx_JoinRuleDropdown .mx_Dropdown_option > div::before { content: ""; position: absolute; height: 16px; width: 16px; left: 6px; top: 8px; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; background-color: #edf3ff; background-color: var(--secondary-content, #edf3ff); } .mx_JoinRuleDropdown .mx_JoinRuleDropdown_invite::before { -webkit-box-sizing: border-box; box-sizing: border-box; -webkit-mask-image: url(../../img/element-icons/lock.0519ea1.svg); mask-image: url(../../img/element-icons/lock.0519ea1.svg); -webkit-mask-size: contain; mask-size: contain; padding: 1px; } .mx_JoinRuleDropdown .mx_JoinRuleDropdown_public::before { -webkit-mask-image: url(../../img/globe.216f1db.svg); mask-image: url(../../img/globe.216f1db.svg); -webkit-mask-size: 12px; mask-size: 12px; } .mx_JoinRuleDropdown .mx_JoinRuleDropdown_restricted::before { -webkit-mask-image: url(../../img/element-icons/group-members.483392b.svg); mask-image: url(../../img/element-icons/group-members.483392b.svg); -webkit-mask-size: contain; mask-size: contain; } /* Copyright 2021 The Matrix.org Foundation C.I.C. Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0 Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License. */ .mx_LeaveSpaceDialog_wrapper .mx_Dialog { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; padding: 24px 32px; } .mx_LeaveSpaceDialog_wrapper .mx_Dialog .mx_LeaveSpaceDialog { width: 440px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -ms-flex-wrap: nowrap; flex-wrap: nowrap; height: 520px; } .mx_LeaveSpaceDialog_wrapper .mx_Dialog .mx_LeaveSpaceDialog .mx_Dialog_content { -webkit-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1; margin: 0; overflow-y: auto; } .mx_LeaveSpaceDialog_wrapper .mx_Dialog .mx_LeaveSpaceDialog .mx_Dialog_content .mx_LeaveSpaceDialog_section_warning { position: relative; border-radius: 8px; margin: 12px 0 0; padding: 12px 8px 12px 42px; background-color: var(--roomlist-background-color); font-size: 1.2rem; line-height: 1.5rem; color: #edf3ff; color: var(--secondary-content, #edf3ff); } .mx_LeaveSpaceDialog_wrapper .mx_Dialog .mx_LeaveSpaceDialog .mx_Dialog_content .mx_LeaveSpaceDialog_section_warning::before { content: ""; position: absolute; left: 10px; top: calc(50% - 8px); /* vertical centering */ height: 16px; width: 16px; background-color: #edf3ff; background-color: var(--secondary-content, #edf3ff); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: contain; mask-size: contain; -webkit-mask-image: url(../../img/element-icons/room/room-summary.a377754.svg); mask-image: url(../../img/element-icons/room/room-summary.a377754.svg); -webkit-mask-position: center; mask-position: center; } .mx_LeaveSpaceDialog_wrapper .mx_Dialog .mx_LeaveSpaceDialog .mx_Dialog_content > p { color: var(--timeline-text-color); } /* Copyright 2022 The Matrix.org Foundation C.I.C. Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0 Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License. */ .mx_LocationViewDialog_wrapper .mx_Dialog { padding: 0px; /* Unset contain and position to allow the close button to appear outside the dialog */ contain: unset; position: unset; } .mx_LocationViewDialog { /* subtract 0.5px to prevent single-pixel margin due to rounding */ width: calc(80vw - 0.5px); height: calc(80vh - 0.5px); overflow: hidden; } .mx_LocationViewDialog .mx_Dialog_header { margin: 0px; padding: 0px; position: unset; } .mx_LocationViewDialog .mx_Dialog_header .mx_Dialog_title { display: none; } .mx_LocationViewDialog .mx_Dialog_header .mx_Dialog_cancelButton { z-index: 4010; position: absolute; right: 5vw; top: 5vh; width: 20px; height: 20px; background-color: #edf3ff; } .mx_LocationViewDialog_map { width: 80vw; height: 80vh; border-radius: 8px; } /* Copyright 2021 The Matrix.org Foundation C.I.C. Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0 Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License. */ .mx_ManageRestrictedJoinRuleDialog_wrapper .mx_Dialog { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } .mx_ManageRestrictedJoinRuleDialog { width: 480px; color: var(--timeline-text-color); display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -ms-flex-wrap: nowrap; flex-wrap: nowrap; min-height: 0; height: 60vh; } .mx_ManageRestrictedJoinRuleDialog .mx_SearchBox { /* To match the space around the title */ margin: 0 0 15px 0; -webkit-box-flex: 0; -ms-flex-positive: 0; flex-grow: 0; } .mx_ManageRestrictedJoinRuleDialog .mx_ManageRestrictedJoinRuleDialog_content { -webkit-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1; } .mx_ManageRestrictedJoinRuleDialog .mx_ManageRestrictedJoinRuleDialog_noResults { display: block; margin-top: 24px; } .mx_ManageRestrictedJoinRuleDialog .mx_ManageRestrictedJoinRuleDialog_section:not(:first-child) { margin-top: 24px; } .mx_ManageRestrictedJoinRuleDialog .mx_ManageRestrictedJoinRuleDialog_section > h3 { margin: 0; color: #edf3ff; color: var(--secondary-content, #edf3ff); font-size: 1.2rem; font-weight: 600; font-weight: var(--font-semi-bold); line-height: 1.5rem; } .mx_ManageRestrictedJoinRuleDialog .mx_ManageRestrictedJoinRuleDialog_section .mx_ManageRestrictedJoinRuleDialog_entry { display: -webkit-box; display: -ms-flexbox; display: flex; margin-top: 12px; } .mx_ManageRestrictedJoinRuleDialog .mx_ManageRestrictedJoinRuleDialog_section .mx_ManageRestrictedJoinRuleDialog_entry > div { -webkit-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1; } .mx_ManageRestrictedJoinRuleDialog .mx_ManageRestrictedJoinRuleDialog_section .mx_ManageRestrictedJoinRuleDialog_entry img.mx_RoomAvatar_isSpaceRoom, .mx_ManageRestrictedJoinRuleDialog .mx_ManageRestrictedJoinRuleDialog_section .mx_ManageRestrictedJoinRuleDialog_entry .mx_RoomAvatar_isSpaceRoom img { border-radius: 4px; } .mx_ManageRestrictedJoinRuleDialog .mx_ManageRestrictedJoinRuleDialog_section .mx_ManageRestrictedJoinRuleDialog_entry .mx_ManageRestrictedJoinRuleDialog_entry_name { margin: 0 8px; font-size: 1.5rem; line-height: 30px; -webkit-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .mx_ManageRestrictedJoinRuleDialog .mx_ManageRestrictedJoinRuleDialog_section .mx_ManageRestrictedJoinRuleDialog_entry .mx_ManageRestrictedJoinRuleDialog_entry_description { margin-top: 8px; font-size: 1.2rem; line-height: 1.5rem; color: #edf3ff; color: var(--tertiary-content, #edf3ff); } .mx_ManageRestrictedJoinRuleDialog .mx_ManageRestrictedJoinRuleDialog_section .mx_ManageRestrictedJoinRuleDialog_entry .mx_Checkbox { -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .mx_ManageRestrictedJoinRuleDialog .mx_ManageRestrictedJoinRuleDialog_section_spaces .mx_BaseAvatar { margin-right: 12px; } .mx_ManageRestrictedJoinRuleDialog .mx_ManageRestrictedJoinRuleDialog_section_spaces .mx_BaseAvatar_image { border-radius: 8px; } .mx_ManageRestrictedJoinRuleDialog .mx_ManageRestrictedJoinRuleDialog_section_info { position: relative; border-radius: 8px; margin: 12px 0; padding: 8px 8px 8px 42px; background-color: var(--roomlist-background-color); font-size: 1.2rem; line-height: 1.5rem; color: #edf3ff; color: var(--secondary-content, #edf3ff); } .mx_ManageRestrictedJoinRuleDialog .mx_ManageRestrictedJoinRuleDialog_section_info::before { content: ""; position: absolute; left: 10px; top: calc(50% - 8px); /* vertical centering */ height: 16px; width: 16px; background-color: #edf3ff; background-color: var(--secondary-content, #edf3ff); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: contain; mask-size: contain; -webkit-mask-image: url(../../img/element-icons/room/room-summary.a377754.svg); mask-image: url(../../img/element-icons/room/room-summary.a377754.svg); -webkit-mask-position: center; mask-position: center; } .mx_ManageRestrictedJoinRuleDialog .mx_ManageRestrictedJoinRuleDialog_footer { margin-top: 20px; } .mx_ManageRestrictedJoinRuleDialog .mx_ManageRestrictedJoinRuleDialog_footer .mx_ManageRestrictedJoinRuleDialog_footer_buttons { display: -webkit-box; display: -ms-flexbox; display: flex; width: -webkit-max-content; width: -moz-max-content; width: max-content; margin-left: auto; } .mx_ManageRestrictedJoinRuleDialog .mx_ManageRestrictedJoinRuleDialog_footer .mx_ManageRestrictedJoinRuleDialog_footer_buttons .mx_AccessibleButton { display: inline-block; } .mx_ManageRestrictedJoinRuleDialog .mx_ManageRestrictedJoinRuleDialog_footer .mx_ManageRestrictedJoinRuleDialog_footer_buttons .mx_AccessibleButton + .mx_AccessibleButton { margin-left: 24px; } /* Copyright 2019 The Matrix.org Foundation C.I.C. Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0 Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License. */ .mx_MessageEditHistoryDialog { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; max-height: 60vh; } .mx_MessageEditHistoryDialog_scrollPanel { -webkit-box-flex: 1; -ms-flex: 1 1 auto; flex: 1 1 auto; } .mx_MessageEditHistoryDialog_error { color: #ff5b55; color: var(--alert, #ff5b55); text-align: center; } .mx_MessageEditHistoryDialog_edits { list-style-type: none; font-size: 1.4rem; padding: 0; color: var(--timeline-text-color); } .mx_MessageEditHistoryDialog_edits span.mx_EditHistoryMessage_deletion, .mx_MessageEditHistoryDialog_edits span.mx_EditHistoryMessage_insertion { padding: 0px 2px; } .mx_MessageEditHistoryDialog_edits .mx_EditHistoryMessage_deletion { color: rgb(255, 76, 85); background-color: rgba(255, 76, 85, 0.1); text-decoration: line-through; } .mx_MessageEditHistoryDialog_edits .mx_EditHistoryMessage_insertion { color: rgb(26, 169, 123); background-color: rgba(26, 169, 123, 0.1); text-decoration: underline; } /* Emulate mx_EventTile[data-layout="group"] */ .mx_MessageEditHistoryDialog_edits .mx_EventTile { padding-top: 0; } .mx_MessageEditHistoryDialog_edits .mx_EventTile .mx_MessageTimestamp { position: absolute; left: 0; text-align: center; } .mx_MessageEditHistoryDialog_edits .mx_EventTile .mx_EventTile_line { padding-top: var(--EventTile_group_line-spacing-block-start); padding-bottom: var(--EventTile_group_line-spacing-block-end); padding-left: var(--EventTile_group_line-spacing-inline-start); line-height: var(--EventTile_group_line-line-height); } .mx_MessageEditHistoryDialog_edits .mx_EventTile .mx_EventTile_line .mx_EventTile_content { margin-right: 0px; } .mx_MessageEditHistoryDialog_edits .mx_MessageActionBar .mx_AccessibleButton { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-padding-start: 8px; padding-inline-start: 8px; -webkit-padding-end: 8px; padding-inline-end: 8px; font-size: 1.5rem; } /* Copyright 2020 The Matrix.org Foundation C.I.C. Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0 Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License. */ .mx_ModalWidgetDialog .mx_ModalWidgetDialog_warning { margin-bottom: 24px; } .mx_ModalWidgetDialog .mx_ModalWidgetDialog_warning > img { vertical-align: middle; margin-right: 8px; } .mx_ModalWidgetDialog .mx_ModalWidgetDialog_buttons { float: right; margin-top: 24px; } .mx_ModalWidgetDialog .mx_ModalWidgetDialog_buttons .mx_AccessibleButton + .mx_AccessibleButton { margin-left: 8px; } .mx_ModalWidgetDialog iframe { width: 100%; height: 450px; border: 0; border-radius: 8px; } /* Copyright 2021 The Matrix.org Foundation C.I.C. Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0 Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License. */ .mx_PollCreateDialog .mx_PollCreateDialog_busy { position: absolute; inset: 0; background-color: rgba(var(--timeline-background-color), 0.6); z-index: 1; } .mx_PollCreateDialog h2 { font-weight: 600; font-weight: var(--font-semi-bold); font-size: 1.5rem; line-height: 2.4rem; margin-top: 0; margin-bottom: 8px; } .mx_PollCreateDialog h2:nth-child(n + 2) { margin-top: 20px; } .mx_PollCreateDialog p { color: #edf3ff; color: var(--secondary-content, #edf3ff); } .mx_PollCreateDialog .mx_PollCreateDialog_option { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; margin-top: 11px; margin-bottom: 16px; } /* 11px from the top will collapse, so this creates a 16px gap between options */ .mx_PollCreateDialog .mx_PollCreateDialog_option .mx_Field { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; margin: 0; } .mx_PollCreateDialog .mx_PollCreateDialog_option .mx_PollCreateDialog_removeOption { margin-left: 12px; width: 20px; height: 20px; border-radius: 50%; background-color: #6f7882; background-color: var(--quinary-content, #6f7882); cursor: pointer; position: relative; } .mx_PollCreateDialog .mx_PollCreateDialog_option .mx_PollCreateDialog_removeOption::before { content: ""; -webkit-mask: url(../../img/element-icons/x-8px.6a5b85d.svg); mask: url(../../img/element-icons/x-8px.6a5b85d.svg); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: cover; mask-size: cover; width: 8px; height: 8px; position: absolute; top: 6px; left: 6px; background-color: #edf3ff; background-color: var(--secondary-content, #edf3ff); } .mx_PollCreateDialog .mx_PollCreateDialog_addOption { padding: 0; margin-bottom: 40px; /* arbitrary to create scrollable area under the poll */ } .mx_PollCreateDialog .mx_AccessibleButton_disabled { opacity: 0.4; } /* Copyright 2020 The Matrix.org Foundation C.I.C. Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0 Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License. */ .mx_RegistrationEmailPromptDialog { width: 417px; } .mx_RegistrationEmailPromptDialog .mx_Dialog_content { margin-bottom: 24px; color: #edf3ff; color: var(--tertiary-content, #edf3ff); } .mx_RegistrationEmailPromptDialog .mx_Dialog_primary { width: 100%; } /* Copyright 2019 New Vector Ltd. Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0 Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License. */ /* ICONS */ /* ========================================================== */ .mx_RoomSettingsDialog_settingsIcon::before { -webkit-mask-image: url(../../img/element-icons/settings.0c529f2.svg); mask-image: url(../../img/element-icons/settings.0c529f2.svg); } .mx_RoomSettingsDialog_voiceIcon::before { -webkit-mask-image: url(../../img/element-icons/call/voice-call.0692925.svg); mask-image: url(../../img/element-icons/call/voice-call.0692925.svg); } .mx_RoomSettingsDialog_securityIcon::before { -webkit-mask-image: url(../../img/element-icons/security.56b436c.svg); mask-image: url(../../img/element-icons/security.56b436c.svg); } .mx_RoomSettingsDialog_rolesIcon::before { -webkit-mask-image: url(../../img/element-icons/room/settings/roles.fda529a.svg); mask-image: url(../../img/element-icons/room/settings/roles.fda529a.svg); } .mx_RoomSettingsDialog_notificationsIcon::before { -webkit-mask-image: url(../../img/element-icons/notifications.b4d3969.svg); mask-image: url(../../img/element-icons/notifications.b4d3969.svg); } .mx_RoomSettingsDialog_bridgesIcon::before { /* This icon is pants, please improve :) */ -webkit-mask-image: url(../../img/feather-customised/bridge.1978354.svg); mask-image: url(../../img/feather-customised/bridge.1978354.svg); } .mx_RoomSettingsDialog_pollsIcon::before { -webkit-mask-image: url(../../img/element-icons/room/composer/poll.6fe3947.svg); mask-image: url(../../img/element-icons/room/composer/poll.6fe3947.svg); } .mx_RoomSettingsDialog_warningIcon::before { -webkit-mask-image: url(../../img/element-icons/room/settings/advanced.20354e9.svg); mask-image: url(../../img/element-icons/room/settings/advanced.20354e9.svg); } .mx_RoomSettingsDialog .mx_Dialog_title { -ms-text-overflow: ellipsis; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; margin: 0 auto; padding-right: 80px; } /* show a different AvatarSetting placeholder for RoomProfileSettings which is basically a clone of ProfileSettings */ .mx_RoomSettingsDialog .mx_AvatarSetting_avatar .mx_AvatarSetting_avatarPlaceholder::before { -webkit-mask: url(../../img/feather-customised/image.4bcd249.svg); mask: url(../../img/feather-customised/image.4bcd249.svg); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: 36px; mask-size: 36px; -webkit-mask-position: center; mask-position: center; } /* Copyright 2020 The Matrix.org Foundation C.I.C. Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0 Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License. */ .mx_RoomSettingsDialog_BridgeList { padding: 0; } .mx_RoomSettingsDialog_BridgeList li { list-style-type: none; } .mx_RoomSettingsDialog_BridgeList li.mx_RoomSettingsDialog_BridgeList_listItem { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; grid-gap: 8px; gap: 8px; padding: 5px; margin-bottom: 8px; /* border-style around each bridge list item */ border-width: 1px 1px; border-color: var(--roomlist-separator-color); border-style: solid; border-radius: 5px; } .mx_RoomSettingsDialog_BridgeList li.mx_RoomSettingsDialog_BridgeList_listItem .mx_RoomSettingsDialog_column_icon .mx_RoomSettingsDialog_protocolIcon, .mx_RoomSettingsDialog_BridgeList li.mx_RoomSettingsDialog_BridgeList_listItem .mx_RoomSettingsDialog_column_icon .mx_RoomSettingsDialog_protocolIcon span, .mx_RoomSettingsDialog_BridgeList li.mx_RoomSettingsDialog_BridgeList_listItem .mx_RoomSettingsDialog_column_icon .mx_RoomSettingsDialog_noProtocolIcon { -webkit-box-sizing: border-box; box-sizing: border-box; border-radius: 5px; border: 1px solid var(--roomlist-separator-color); } .mx_RoomSettingsDialog_BridgeList li.mx_RoomSettingsDialog_BridgeList_listItem .mx_RoomSettingsDialog_column_icon .mx_RoomSettingsDialog_noProtocolIcon, .mx_RoomSettingsDialog_BridgeList li.mx_RoomSettingsDialog_BridgeList_listItem .mx_RoomSettingsDialog_column_icon .mx_RoomSettingsDialog_protocolIcon img { border-radius: 5px; } .mx_RoomSettingsDialog_BridgeList li.mx_RoomSettingsDialog_BridgeList_listItem .mx_RoomSettingsDialog_column_icon .mx_RoomSettingsDialog_noProtocolIcon { width: 48px; height: 48px; background: var(--roomlist-separator-color); } .mx_RoomSettingsDialog_BridgeList li.mx_RoomSettingsDialog_BridgeList_listItem .mx_RoomSettingsDialog_column_icon .mx_RoomSettingsDialog_protocolIcon img { border-width: 1px 1px; border-color: var(--roomlist-separator-color); } .mx_RoomSettingsDialog_BridgeList li.mx_RoomSettingsDialog_BridgeList_listItem .mx_RoomSettingsDialog_column_icon .mx_RoomSettingsDialog_protocolIcon span { /* Correct letter placement */ left: auto; } .mx_RoomSettingsDialog_BridgeList li.mx_RoomSettingsDialog_BridgeList_listItem .mx_RoomSettingsDialog_column_data { display: inline-block; width: 85%; } .mx_RoomSettingsDialog_BridgeList li.mx_RoomSettingsDialog_BridgeList_listItem .mx_RoomSettingsDialog_column_data .mx_RoomSettingsDialog_column_data_details, .mx_RoomSettingsDialog_BridgeList li.mx_RoomSettingsDialog_BridgeList_listItem .mx_RoomSettingsDialog_column_data .mx_RoomSettingsDialog_column_data_metadata, .mx_RoomSettingsDialog_BridgeList li.mx_RoomSettingsDialog_BridgeList_listItem .mx_RoomSettingsDialog_column_data .mx_RoomSettingsDialog_column_data_metadata li, .mx_RoomSettingsDialog_BridgeList li.mx_RoomSettingsDialog_BridgeList_listItem .mx_RoomSettingsDialog_column_data .mx_RoomSettingsDialog_column_data_protocolName { margin-bottom: 0; } .mx_RoomSettingsDialog_BridgeList li.mx_RoomSettingsDialog_BridgeList_listItem .mx_RoomSettingsDialog_column_data .mx_RoomSettingsDialog_column_data_details, .mx_RoomSettingsDialog_BridgeList li.mx_RoomSettingsDialog_BridgeList_listItem .mx_RoomSettingsDialog_column_data .mx_RoomSettingsDialog_column_data_metadata { margin-top: 4px; } .mx_RoomSettingsDialog_BridgeList li.mx_RoomSettingsDialog_BridgeList_listItem .mx_RoomSettingsDialog_column_data .mx_RoomSettingsDialog_column_data_metadata li { margin-top: 8px; } .mx_RoomSettingsDialog_BridgeList li.mx_RoomSettingsDialog_BridgeList_listItem .mx_RoomSettingsDialog_column_data .mx_RoomSettingsDialog_column_data_protocolName { margin-top: 0; font-size: 16pt; color: var(--timeline-text-color); } .mx_RoomSettingsDialog_BridgeList li.mx_RoomSettingsDialog_BridgeList_listItem .mx_RoomSettingsDialog_column_data .mx_RoomSettingsDialog_workspace_channel_details { color: var(--timeline-text-color); font-weight: 600; font-weight: var(--font-semi-bold); } .mx_RoomSettingsDialog_BridgeList li.mx_RoomSettingsDialog_BridgeList_listItem .mx_RoomSettingsDialog_column_data .mx_RoomSettingsDialog_workspace_channel_details .mx_RoomSettingsDialog_channel { -webkit-margin-start: 5px; margin-inline-start: 5px; } .mx_RoomSettingsDialog_BridgeList li.mx_RoomSettingsDialog_BridgeList_listItem .mx_RoomSettingsDialog_column_data .mx_RoomSettingsDialog_metadata { color: #a1b2d1; margin-bottom: 0; overflow-y: visible; text-overflow: ellipsis; white-space: normal; padding: 0; } /* Copyright 2018 New Vector Ltd Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0 Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License. */ .mx_RoomUpgradeDialog { padding-right: 70px; } /* Copyright 2019 - 2021 The Matrix.org Foundation C.I.C. Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0 Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License. */ .mx_RoomUpgradeWarningDialog { max-width: 38vw; width: 38vw; } .mx_RoomUpgradeWarningDialog .mx_RoomUpgradeWarningDialog_progress .mx_ProgressBar { height: 8px; width: 100%; border-radius: 8px; } .mx_RoomUpgradeWarningDialog .mx_RoomUpgradeWarningDialog_progress .mx_ProgressBar::-moz-progress-bar { border-radius: 8px; } .mx_RoomUpgradeWarningDialog .mx_RoomUpgradeWarningDialog_progress .mx_ProgressBar::-webkit-progress-bar, .mx_RoomUpgradeWarningDialog .mx_RoomUpgradeWarningDialog_progress .mx_ProgressBar::-webkit-progress-value { border-radius: 8px; } .mx_RoomUpgradeWarningDialog .mx_RoomUpgradeWarningDialog_progress .mx_RoomUpgradeWarningDialog_progressText { margin-top: 8px; font-size: 1.5rem; line-height: 2.4rem; color: var(--timeline-text-color); } .mx_RoomUpgradeWarningDialog .mx_SettingsFlag { font-weight: 700; } .mx_RoomUpgradeWarningDialog .mx_SettingsFlag .mx_ToggleSwitch { display: inline-block; vertical-align: middle; margin-left: 8px; float: right; } .mx_RoomUpgradeWarningDialog .mx_SettingsFlag .mx_SettingsFlag_label { display: inline-block; vertical-align: middle; } /* Copyright 2020 The Matrix.org Foundation C.I.C. Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0 Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License. */ .mx_ServerOfflineDialog .mx_ServerOfflineDialog_content { padding-right: 85px; color: var(--timeline-text-color); } .mx_ServerOfflineDialog .mx_ServerOfflineDialog_content hr { border-color: var(--timeline-text-color); opacity: 0.1; border-bottom: none; } .mx_ServerOfflineDialog .mx_ServerOfflineDialog_content ul { padding: 16px; } .mx_ServerOfflineDialog .mx_ServerOfflineDialog_content ul li:nth-child(n + 2) { margin-top: 16px; } .mx_ServerOfflineDialog .mx_ServerOfflineDialog_content .mx_ServerOfflineDialog_content_context .mx_ServerOfflineDialog_content_context_timestamp { display: inline-block; width: 115px; color: #a1b2d1; line-height: 24px; /* same as avatar */ vertical-align: top; } .mx_ServerOfflineDialog .mx_ServerOfflineDialog_content .mx_ServerOfflineDialog_content_context .mx_ServerOfflineDialog_content_context_timeline { display: inline-block; width: calc(100% - 155px); } /* 115px timestamp width + 40px right margin */ .mx_ServerOfflineDialog .mx_ServerOfflineDialog_content .mx_ServerOfflineDialog_content_context .mx_ServerOfflineDialog_content_context_timeline .mx_ServerOfflineDialog_content_context_timeline_header span { margin-left: 8px; vertical-align: middle; } .mx_ServerOfflineDialog .mx_ServerOfflineDialog_content .mx_ServerOfflineDialog_content_context .mx_ServerOfflineDialog_content_context_timeline .mx_ServerOfflineDialog_content_context_txn { position: relative; margin-top: 8px; } .mx_ServerOfflineDialog .mx_ServerOfflineDialog_content .mx_ServerOfflineDialog_content_context .mx_ServerOfflineDialog_content_context_timeline .mx_ServerOfflineDialog_content_context_txn .mx_ServerOfflineDialog_content_context_txn_desc { width: calc(100% - 100px); /* 100px is an arbitrary margin for the button */ } .mx_ServerOfflineDialog .mx_ServerOfflineDialog_content .mx_ServerOfflineDialog_content_context .mx_ServerOfflineDialog_content_context_timeline .mx_ServerOfflineDialog_content_context_txn .mx_AccessibleButton { float: right; } /* Copyright 2020 The Matrix.org Foundation C.I.C. Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0 Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License. */ .mx_ServerPickerDialog { width: 468px; -webkit-box-sizing: border-box; box-sizing: border-box; } .mx_ServerPickerDialog .mx_Dialog_content { margin-bottom: 0; } .mx_ServerPickerDialog .mx_Dialog_content > p { color: #edf3ff; color: var(--secondary-content, #edf3ff); font-size: 1.4rem; margin: 16px 0; } .mx_ServerPickerDialog .mx_Dialog_content > p:first-of-type { margin-bottom: 40px; } .mx_ServerPickerDialog .mx_Dialog_content > p:last-of-type { margin: 0 24px 24px; } .mx_ServerPickerDialog .mx_Dialog_content > h2 { font-size: 1.5rem; font-weight: 600; font-weight: var(--font-semi-bold); color: #edf3ff; color: var(--secondary-content, #edf3ff); margin: 16px 0 16px 8px; } .mx_ServerPickerDialog .mx_Dialog_content > a { color: #0dbd8b; color: var(--accent, #0dbd8b); margin-left: 8px; } .mx_ServerPickerDialog .mx_ServerPickerDialog_otherHomeserverRadio input[type="radio"] + div { margin-top: auto; margin-bottom: auto; } .mx_ServerPickerDialog .mx_ServerPickerDialog_otherHomeserver { border-top: none; border-left: none; border-right: none; border-radius: unset; } .mx_ServerPickerDialog .mx_ServerPickerDialog_otherHomeserver > input { padding-left: 0; } .mx_ServerPickerDialog .mx_ServerPickerDialog_otherHomeserver > label { margin-left: 0; } .mx_ServerPickerDialog .mx_AccessibleButton_kind_primary { width: calc(100% - 64px); margin: 0 8px; padding: 15px 18px; } /* Copyright 2017 Vector Creations Ltd Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0 Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License. */ .mx_SetEmailDialog_email_input { border-radius: 3px; border: 1px solid #e7e7e7; padding: 9px; color: rgba(74, 74, 74, 0.9); background-color: var(--timeline-background-color); font-size: 1.5rem; width: 100%; max-width: 280px; margin-bottom: 10px; } .mx_SetEmailDialog_email_input:focus { outline: none; -webkit-box-shadow: none; box-shadow: none; border: 1px solid #0dbd8b; border: 1px solid var(--accent, #0dbd8b); } /* Copyright 2019 New Vector Ltd. Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0 Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License. */ /* Not actually a component but things shared by settings components */ .mx_UserSettingsDialog, .mx_RoomSettingsDialog, .mx_SpaceSettingsDialog, .mx_SpacePreferencesDialog { width: 90vw; max-width: 1000px; /* set the height too since tabbed view scrolls itself. */ height: 80vh; } .mx_UserSettingsDialog .mx_TabbedView, .mx_RoomSettingsDialog .mx_TabbedView, .mx_SpaceSettingsDialog .mx_TabbedView, .mx_SpacePreferencesDialog .mx_TabbedView { top: 65px; } .mx_UserSettingsDialog .mx_TabbedView .mx_SettingsTab, .mx_RoomSettingsDialog .mx_TabbedView .mx_SettingsTab, .mx_SpaceSettingsDialog .mx_TabbedView .mx_SettingsTab, .mx_SpacePreferencesDialog .mx_TabbedView .mx_SettingsTab { -webkit-box-sizing: border-box; box-sizing: border-box; min-width: 580px; padding-right: 100px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; /* Put some padding on the bottom to avoid the settings tab from */ /* colliding harshly with the dialog when scrolled down. */ padding-bottom: 100px; } /* Copyright 2018 New Vector Ltd. Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0 Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License. */ .mx_ShareDialog hr { margin-top: 25px; margin-bottom: 25px; border-color: var(--timeline-text-secondary-color); } .mx_ShareDialog .mx_ShareDialog_content { margin: 10px 0; } .mx_ShareDialog .mx_ShareDialog_content .mx_CopyableText { width: unset; } /* full width */ .mx_ShareDialog .mx_ShareDialog_content .mx_CopyableText > a { text-decoration: none; -ms-flex-negative: 1; flex-shrink: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .mx_ShareDialog_split { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; } .mx_ShareDialog_qrcode_container { float: left; height: 256px; width: 256px; margin-right: 64px; } .mx_ShareDialog_qrcode_container + .mx_ShareDialog_social_container { width: 299px; } .mx_ShareDialog_social_container { display: inline-block; } .mx_ShareDialog_social_icon { display: inline-grid; margin-right: 10px; margin-bottom: 10px; } /* Copyright Michael Telatynski <7t3chguy@gmail.com> Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0 Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License. */ .mx_SlashCommandHelpDialog .mx_SlashCommandHelpDialog_headerRow h2 { margin-bottom: 2px; } .mx_SlashCommandHelpDialog .mx_Dialog_content { margin-top: 12px; margin-bottom: 34px; } /* Copyright 2021 The Matrix.org Foundation C.I.C. Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0 Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License. */ .mx_SpacePreferencesDialog { width: 700px; height: 400px; } .mx_SpacePreferencesDialog > h4 { margin: -12px 0 0; font-weight: normal; font-size: 1.5rem; line-height: 2.4rem; color: #edf3ff; color: var(--secondary-content, #edf3ff); } .mx_SpacePreferencesDialog .mx_TabbedView { top: 80px; } .mx_SpacePreferencesDialog .mx_TabbedView .mx_SettingsTab { min-width: unset; } .mx_SpacePreferencesDialog_appearanceIcon::before { -webkit-mask-image: url(../../img/element-icons/settings/appearance.c35df33.svg); mask-image: url(../../img/element-icons/settings/appearance.c35df33.svg); } /* Copyright 2021 The Matrix.org Foundation C.I.C. Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0 Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License. */ .mx_SpaceSettingsDialog { color: var(--timeline-text-color); } .mx_SpaceSettingsDialog .mx_SpaceSettings_errorText { font-weight: 600; font-weight: var(--font-semi-bold); font-size: 1.2rem; line-height: 1.5rem; color: #ff5b55; color: var(--alert, #ff5b55); margin-bottom: 28px; } .mx_SpaceSettingsDialog .mx_ToggleSwitch { display: inline-block; vertical-align: middle; margin-left: 16px; } .mx_SpaceSettingsDialog .mx_SettingsTab_section .mx_SettingsTab_section_caption { margin-top: 12px; margin-bottom: 20px; } .mx_SpaceSettingsDialog .mx_SettingsTab_section .mx_StyledRadioButton { margin-top: 8px; margin-bottom: 4px; } .mx_SpaceSettingsDialog .mx_SettingsTab_section .mx_StyledRadioButton .mx_StyledRadioButton_content { font-weight: 600; font-weight: var(--font-semi-bold); line-height: 1.8rem; color: var(--timeline-text-color); } .mx_SpaceSettingsDialog .mx_SettingsTab_section .mx_StyledRadioButton + span { font-size: 1.5rem; line-height: 1.8rem; color: #edf3ff; color: var(--secondary-content, #edf3ff); margin-left: 26px; } .mx_SpaceSettingsDialog .mx_SpaceSettingsDialog_buttons { display: -webkit-box; display: -ms-flexbox; display: flex; margin-top: 64px; } .mx_SpaceSettingsDialog .mx_SpaceSettingsDialog_buttons .mx_AccessibleButton { display: inline-block; } .mx_SpaceSettingsDialog .mx_SpaceSettingsDialog_buttons .mx_AccessibleButton_kind_link { margin-left: auto; } .mx_SpaceSettingsDialog .mx_AccessibleButton_hasKind.mx_AccessibleButton_kind_link { font-size: 1.4rem; margin: 7px 18px; } .mx_SpaceSettingsDialog .mx_AccessibleButton_hasKind.mx_AccessibleButton_kind_link.mx_SettingsTab_showAdvanced { margin: 18px 0; } .mx_SpaceSettingsDialog .mx_TabbedView_tabLabel .mx_SpaceSettingsDialog_generalIcon::before { -webkit-mask-image: url(../../img/element-icons/settings.0c529f2.svg); mask-image: url(../../img/element-icons/settings.0c529f2.svg); } .mx_SpaceSettingsDialog .mx_TabbedView_tabLabel .mx_SpaceSettingsDialog_visibilityIcon::before { -webkit-mask-image: url(../../img/element-icons/eye.6df327d.svg); mask-image: url(../../img/element-icons/eye.6df327d.svg); } /* Copyright 2021 The Matrix.org Foundation C.I.C. Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0 Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License. */ .mx_SpotlightDialog_wrapper .mx_Dialog { border-radius: 8px; overflow-y: visible; overflow-y: initial; position: relative; height: 60%; padding: 0; contain: unset; } /* needed for #mx_SpotlightDialog_keyboardPrompt to not be culled */ .mx_SpotlightDialog_wrapper .mx_Dialog #mx_SpotlightDialog_keyboardPrompt { position: absolute; padding: 8px; border-radius: 8px; background-color: var(--timeline-background-color); top: -60px; /* relative to the top of the modal */ left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); font-size: 1.2rem; line-height: 1.5rem; color: #edf3ff; color: var(--secondary-content, #edf3ff); } .mx_SpotlightDialog_wrapper .mx_Dialog #mx_SpotlightDialog_keyboardPrompt kbd { display: inline-block; padding: 2px 4px; margin: 0 4px; border-radius: 6px; background-color: #6f7882; background-color: var(--quinary-content, #6f7882); vertical-align: middle; color: #edf3ff; color: var(--tertiary-content, #edf3ff); /* To avoid any styling inherent with elements */ font-family: inherit; font-weight: inherit; font-size: inherit; } .mx_SpotlightDialog { height: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } .mx_SpotlightDialog .mx_Dialog_header { display: none; } .mx_SpotlightDialog .mx_SpotlightDialog_searchBox { margin: 0; border: none; border-radius: 8px 8px 0 0; padding: 12px 16px; border-bottom: 1px solid #21262c; border-bottom: 1px solid var(--system, #21262c); } .mx_SpotlightDialog .mx_SpotlightDialog_searchBox > .mx_SpotlightDialog_filter { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-line-pack: center; align-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; border-radius: 8px; margin-right: 8px; background-color: #6f7882; background-color: var(--quinary-content, #6f7882); vertical-align: middle; color: var(--timeline-text-color); position: relative; padding: 4px 8px 4px 37px; } .mx_SpotlightDialog .mx_SpotlightDialog_searchBox > .mx_SpotlightDialog_filter::before { background-color: #edf3ff; background-color: var(--secondary-content, #edf3ff); content: ""; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain; width: 18px; height: 18px; position: absolute; left: 8px; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); } .mx_SpotlightDialog .mx_SpotlightDialog_searchBox > .mx_SpotlightDialog_filter.mx_SpotlightDialog_filterPeople::before { -webkit-mask-image: url(../../img/element-icons/room/members.3c127a3.svg); mask-image: url(../../img/element-icons/room/members.3c127a3.svg); } .mx_SpotlightDialog .mx_SpotlightDialog_searchBox > .mx_SpotlightDialog_filter.mx_SpotlightDialog_filterPublicRooms::before { -webkit-mask-image: url(../../img/element-icons/roomlist/explore.3bcee74.svg); mask-image: url(../../img/element-icons/roomlist/explore.3bcee74.svg); } .mx_SpotlightDialog .mx_SpotlightDialog_searchBox > .mx_SpotlightDialog_filter .mx_SpotlightDialog_filter--close { position: relative; display: inline-block; width: 16px; height: 16px; background: #21262c; background: var(--system, #21262c); border-radius: 8px; margin-left: 8px; text-align: center; line-height: 16px; color: #edf3ff; color: var(--secondary-content, #edf3ff); } .mx_SpotlightDialog .mx_SpotlightDialog_searchBox > .mx_SpotlightDialog_filter .mx_SpotlightDialog_filter--close::before { background-color: #edf3ff; background-color: var(--secondary-content, #edf3ff); content: ""; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain; width: 8px; height: 8px; position: absolute; left: 50%; top: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); -webkit-mask-image: url(../../img/cancel-small.6edc931.svg); mask-image: url(../../img/cancel-small.6edc931.svg); } .mx_SpotlightDialog .mx_SpotlightDialog_searchBox > input { display: block; -webkit-box-sizing: border-box; box-sizing: border-box; background-color: transparent; width: 100%; height: 32px; padding: 0; color: #edf3ff; color: var(--tertiary-content, #edf3ff); font-weight: normal; font-size: 1.5rem; line-height: 2.4rem; } .mx_SpotlightDialog .mx_SpotlightDialog_searchBox > .mx_Spinner { -webkit-box-flex: 0; -ms-flex-positive: 0; flex-grow: 0; width: unset; height: unset; margin-left: 16px; } .mx_SpotlightDialog #mx_SpotlightDialog_content { height: 100%; overflow-y: auto; padding: 16px; } .mx_SpotlightDialog #mx_SpotlightDialog_content ul { padding: 0; margin: 0; } .mx_SpotlightDialog #mx_SpotlightDialog_content .mx_SpotlightDialog_section > h4, .mx_SpotlightDialog #mx_SpotlightDialog_content .mx_SpotlightDialog_section > .mx_SpotlightDialog_sectionHeader > h4 { font-weight: 600; font-weight: var(--font-semi-bold); font-size: 1.2rem; line-height: 1.5rem; color: #edf3ff; color: var(--secondary-content, #edf3ff); margin: 0; } .mx_SpotlightDialog #mx_SpotlightDialog_content .mx_SpotlightDialog_section > h4 { margin-bottom: 8px; } .mx_SpotlightDialog #mx_SpotlightDialog_content .mx_SpotlightDialog_section .mx_SpotlightDialog_sectionHeader { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -ms-flex-align: center; align-items: center; margin-bottom: 8px; } .mx_SpotlightDialog #mx_SpotlightDialog_content .mx_SpotlightDialog_section .mx_SpotlightDialog_sectionHeader .mx_SpotlightDialog_options { display: -webkit-box; display: -ms-flexbox; display: flex; grid-gap: 4px; gap: 4px; } .mx_SpotlightDialog #mx_SpotlightDialog_content .mx_SpotlightDialog_section + .mx_SpotlightDialog_section { margin-top: 24px; } .mx_SpotlightDialog #mx_SpotlightDialog_content .mx_SpotlightDialog_recentlyViewed > div { display: -webkit-box; display: -ms-flexbox; display: flex; white-space: nowrap; overflow-x: hidden; margin-right: 1px; /* occlude the 1px visible of the very next tile to prevent it looking broken */ } .mx_SpotlightDialog #mx_SpotlightDialog_content .mx_SpotlightDialog_recentlyViewed .mx_SpotlightDialog_option { border-radius: 8px; padding: 4px; color: var(--timeline-text-color); font-size: 1.2rem; line-height: 1.5rem; display: inline-block; width: 58px; height: 58px; min-width: 58px; -webkit-box-sizing: border-box; box-sizing: border-box; text-align: center; overflow: hidden; text-overflow: ellipsis; } .mx_SpotlightDialog #mx_SpotlightDialog_content .mx_SpotlightDialog_recentlyViewed .mx_SpotlightDialog_option .mx_DecoratedRoomAvatar { margin: 0 9px 4px; /* maintain centering */ } .mx_SpotlightDialog #mx_SpotlightDialog_content .mx_SpotlightDialog_recentlyViewed .mx_SpotlightDialog_option + .mx_SpotlightDialog_option { margin-left: 16px; } .mx_SpotlightDialog #mx_SpotlightDialog_content .mx_SpotlightDialog_recentlyViewed .mx_SpotlightDialog_option:hover, .mx_SpotlightDialog #mx_SpotlightDialog_content .mx_SpotlightDialog_recentlyViewed .mx_SpotlightDialog_option[aria-selected="true"] { background-color: #6f7882; background-color: var(--quinary-content, #6f7882); } .mx_SpotlightDialog #mx_SpotlightDialog_content .mx_SpotlightDialog_results .mx_SpotlightDialog_option, .mx_SpotlightDialog #mx_SpotlightDialog_content .mx_SpotlightDialog_recentSearches .mx_SpotlightDialog_option, .mx_SpotlightDialog #mx_SpotlightDialog_content .mx_SpotlightDialog_otherSearches .mx_SpotlightDialog_option, .mx_SpotlightDialog #mx_SpotlightDialog_content .mx_SpotlightDialog_hiddenResults .mx_SpotlightDialog_option { padding: 6px 4px; border-radius: 8px; font-size: 1.5rem; line-height: 2.4rem; color: var(--timeline-text-color); position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; } .mx_SpotlightDialog #mx_SpotlightDialog_content .mx_SpotlightDialog_results .mx_SpotlightDialog_option .mx_SpotlightDialog_option--endAdornment, .mx_SpotlightDialog #mx_SpotlightDialog_content .mx_SpotlightDialog_recentSearches .mx_SpotlightDialog_option .mx_SpotlightDialog_option--endAdornment, .mx_SpotlightDialog #mx_SpotlightDialog_content .mx_SpotlightDialog_otherSearches .mx_SpotlightDialog_option .mx_SpotlightDialog_option--endAdornment, .mx_SpotlightDialog #mx_SpotlightDialog_content .mx_SpotlightDialog_hiddenResults .mx_SpotlightDialog_option .mx_SpotlightDialog_option--endAdornment { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; margin-left: auto; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; } .mx_SpotlightDialog #mx_SpotlightDialog_content .mx_SpotlightDialog_results .mx_SpotlightDialog_option.mx_SpotlightDialog_result_multiline, .mx_SpotlightDialog #mx_SpotlightDialog_content .mx_SpotlightDialog_recentSearches .mx_SpotlightDialog_option.mx_SpotlightDialog_result_multiline, .mx_SpotlightDialog #mx_SpotlightDialog_content .mx_SpotlightDialog_otherSearches .mx_SpotlightDialog_option.mx_SpotlightDialog_result_multiline, .mx_SpotlightDialog #mx_SpotlightDialog_content .mx_SpotlightDialog_hiddenResults .mx_SpotlightDialog_option.mx_SpotlightDialog_result_multiline { -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; } .mx_SpotlightDialog #mx_SpotlightDialog_content .mx_SpotlightDialog_results .mx_SpotlightDialog_option.mx_SpotlightDialog_result_multiline .mx_AccessibleButton, .mx_SpotlightDialog #mx_SpotlightDialog_content .mx_SpotlightDialog_recentSearches .mx_SpotlightDialog_option.mx_SpotlightDialog_result_multiline .mx_AccessibleButton, .mx_SpotlightDialog #mx_SpotlightDialog_content .mx_SpotlightDialog_otherSearches .mx_SpotlightDialog_option.mx_SpotlightDialog_result_multiline .mx_AccessibleButton, .mx_SpotlightDialog #mx_SpotlightDialog_content .mx_SpotlightDialog_hiddenResults .mx_SpotlightDialog_option.mx_SpotlightDialog_result_multiline .mx_AccessibleButton { padding: 4px 20px; margin: 2px 4px; } .mx_SpotlightDialog #mx_SpotlightDialog_content .mx_SpotlightDialog_results .mx_SpotlightDialog_option.mx_SpotlightDialog_result_multiline .mx_SpotlightDialog_enterPrompt, .mx_SpotlightDialog #mx_SpotlightDialog_content .mx_SpotlightDialog_recentSearches .mx_SpotlightDialog_option.mx_SpotlightDialog_result_multiline .mx_SpotlightDialog_enterPrompt, .mx_SpotlightDialog #mx_SpotlightDialog_content .mx_SpotlightDialog_otherSearches .mx_SpotlightDialog_option.mx_SpotlightDialog_result_multiline .mx_SpotlightDialog_enterPrompt, .mx_SpotlightDialog #mx_SpotlightDialog_content .mx_SpotlightDialog_hiddenResults .mx_SpotlightDialog_option.mx_SpotlightDialog_result_multiline .mx_SpotlightDialog_enterPrompt { margin-top: 9px; margin-right: 8px; } .mx_SpotlightDialog #mx_SpotlightDialog_content .mx_SpotlightDialog_results .mx_SpotlightDialog_option > .mx_SpotlightDialog_metaspaceResult, .mx_SpotlightDialog #mx_SpotlightDialog_content .mx_SpotlightDialog_results .mx_SpotlightDialog_option > .mx_DecoratedRoomAvatar, .mx_SpotlightDialog #mx_SpotlightDialog_content .mx_SpotlightDialog_results .mx_SpotlightDialog_option > .mx_BaseAvatar, .mx_SpotlightDialog #mx_SpotlightDialog_content .mx_SpotlightDialog_recentSearches .mx_SpotlightDialog_option > .mx_SpotlightDialog_metaspaceResult, .mx_SpotlightDialog #mx_SpotlightDialog_content .mx_SpotlightDialog_recentSearches .mx_SpotlightDialog_option > .mx_DecoratedRoomAvatar, .mx_SpotlightDialog #mx_SpotlightDialog_content .mx_SpotlightDialog_recentSearches .mx_SpotlightDialog_option > .mx_BaseAvatar, .mx_SpotlightDialog #mx_SpotlightDialog_content .mx_SpotlightDialog_otherSearches .mx_SpotlightDialog_option > .mx_SpotlightDialog_metaspaceResult, .mx_SpotlightDialog #mx_SpotlightDialog_content .mx_SpotlightDialog_otherSearches .mx_SpotlightDialog_option > .mx_DecoratedRoomAvatar, .mx_SpotlightDialog #mx_SpotlightDialog_content .mx_SpotlightDialog_otherSearches .mx_SpotlightDialog_option > .mx_BaseAvatar, .mx_SpotlightDialog #mx_SpotlightDialog_content .mx_SpotlightDialog_hiddenResults .mx_SpotlightDialog_option > .mx_SpotlightDialog_metaspaceResult, .mx_SpotlightDialog #mx_SpotlightDialog_content .mx_SpotlightDialog_hiddenResults .mx_SpotlightDialog_option > .mx_DecoratedRoomAvatar, .mx_SpotlightDialog #mx_SpotlightDialog_content .mx_SpotlightDialog_hiddenResults .mx_SpotlightDialog_option > .mx_BaseAvatar { margin-right: 8px; width: 24px; height: 24px; } .mx_SpotlightDialog #mx_SpotlightDialog_content .mx_SpotlightDialog_results .mx_SpotlightDialog_option > .mx_SpotlightDialog_metaspaceResult .mx_BaseAvatar, .mx_SpotlightDialog #mx_SpotlightDialog_content .mx_SpotlightDialog_results .mx_SpotlightDialog_option > .mx_DecoratedRoomAvatar .mx_BaseAvatar, .mx_SpotlightDialog #mx_SpotlightDialog_content .mx_SpotlightDialog_results .mx_SpotlightDialog_option > .mx_BaseAvatar .mx_BaseAvatar, .mx_SpotlightDialog #mx_SpotlightDialog_content .mx_SpotlightDialog_recentSearches .mx_SpotlightDialog_option > .mx_SpotlightDialog_metaspaceResult .mx_BaseAvatar, .mx_SpotlightDialog #mx_SpotlightDialog_content .mx_SpotlightDialog_recentSearches .mx_SpotlightDialog_option > .mx_DecoratedRoomAvatar .mx_BaseAvatar, .mx_SpotlightDialog #mx_SpotlightDialog_content .mx_SpotlightDialog_recentSearches .mx_SpotlightDialog_option > .mx_BaseAvatar .mx_BaseAvatar, .mx_SpotlightDialog #mx_SpotlightDialog_content .mx_SpotlightDialog_otherSearches .mx_SpotlightDialog_option > .mx_SpotlightDialog_metaspaceResult .mx_BaseAvatar, .mx_SpotlightDialog #mx_SpotlightDialog_content .mx_SpotlightDialog_otherSearches .mx_SpotlightDialog_option > .mx_DecoratedRoomAvatar .mx_BaseAvatar, .mx_SpotlightDialog #mx_SpotlightDialog_content .mx_SpotlightDialog_otherSearches .mx_SpotlightDialog_option > .mx_BaseAvatar .mx_BaseAvatar, .mx_SpotlightDialog #mx_SpotlightDialog_content .mx_SpotlightDialog_hiddenResults .mx_SpotlightDialog_option > .mx_SpotlightDialog_metaspaceResult .mx_BaseAvatar, .mx_SpotlightDialog #mx_SpotlightDialog_content .mx_SpotlightDialog_hiddenResults .mx_SpotlightDialog_option > .mx_DecoratedRoomAvatar .mx_BaseAvatar, .mx_SpotlightDialog #mx_SpotlightDialog_content .mx_SpotlightDialog_hiddenResults .mx_SpotlightDialog_option > .mx_BaseAvatar .mx_BaseAvatar { width: inherit; height: inherit; } .mx_SpotlightDialog #mx_SpotlightDialog_content .mx_SpotlightDialog_results .mx_SpotlightDialog_option .mx_SpotlightDialog_result_publicRoomDetails, .mx_SpotlightDialog #mx_SpotlightDialog_content .mx_SpotlightDialog_recentSearches .mx_SpotlightDialog_option .mx_SpotlightDialog_result_publicRoomDetails, .mx_SpotlightDialog #mx_SpotlightDialog_content .mx_SpotlightDialog_otherSearches .mx_SpotlightDialog_option .mx_SpotlightDialog_result_publicRoomDetails, .mx_SpotlightDialog #mx_SpotlightDialog_content .mx_SpotlightDialog_hiddenResults .mx_SpotlightDialog_option .mx_SpotlightDialog_result_publicRoomDetails { 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-width: 0; } .mx_SpotlightDialog #mx_SpotlightDialog_content .mx_SpotlightDialog_results .mx_SpotlightDialog_option .mx_SpotlightDialog_result_publicRoomDetails .mx_SpotlightDialog_result_publicRoomHeader, .mx_SpotlightDialog #mx_SpotlightDialog_content .mx_SpotlightDialog_recentSearches .mx_SpotlightDialog_option .mx_SpotlightDialog_result_publicRoomDetails .mx_SpotlightDialog_result_publicRoomHeader, .mx_SpotlightDialog #mx_SpotlightDialog_content .mx_SpotlightDialog_otherSearches .mx_SpotlightDialog_option .mx_SpotlightDialog_result_publicRoomDetails .mx_SpotlightDialog_result_publicRoomHeader, .mx_SpotlightDialog #mx_SpotlightDialog_content .mx_SpotlightDialog_hiddenResults .mx_SpotlightDialog_option .mx_SpotlightDialog_result_publicRoomDetails .mx_SpotlightDialog_result_publicRoomHeader { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; line-height: 2.4rem; margin-right: 8px; } .mx_SpotlightDialog #mx_SpotlightDialog_content .mx_SpotlightDialog_results .mx_SpotlightDialog_option .mx_SpotlightDialog_result_publicRoomDetails .mx_SpotlightDialog_result_publicRoomHeader .mx_SpotlightDialog_result_publicRoomName, .mx_SpotlightDialog #mx_SpotlightDialog_content .mx_SpotlightDialog_recentSearches .mx_SpotlightDialog_option .mx_SpotlightDialog_result_publicRoomDetails .mx_SpotlightDialog_result_publicRoomHeader .mx_SpotlightDialog_result_publicRoomName, .mx_SpotlightDialog #mx_SpotlightDialog_content .mx_SpotlightDialog_otherSearches .mx_SpotlightDialog_option .mx_SpotlightDialog_result_publicRoomDetails .mx_SpotlightDialog_result_publicRoomHeader .mx_SpotlightDialog_result_publicRoomName, .mx_SpotlightDialog #mx_SpotlightDialog_content .mx_SpotlightDialog_hiddenResults .mx_SpotlightDialog_option .mx_SpotlightDialog_result_publicRoomDetails .mx_SpotlightDialog_result_publicRoomHeader .mx_SpotlightDialog_result_publicRoomName { color: var(--timeline-text-color); font-size: 1.5rem; overflow: hidden; text-overflow: ellipsis; } .mx_SpotlightDialog #mx_SpotlightDialog_content .mx_SpotlightDialog_results .mx_SpotlightDialog_option .mx_SpotlightDialog_result_publicRoomDetails .mx_SpotlightDialog_result_publicRoomHeader .mx_SpotlightDialog_result_publicRoomAlias, .mx_SpotlightDialog #mx_SpotlightDialog_content .mx_SpotlightDialog_recentSearches .mx_SpotlightDialog_option .mx_SpotlightDialog_result_publicRoomDetails .mx_SpotlightDialog_result_publicRoomHeader .mx_SpotlightDialog_result_publicRoomAlias, .mx_SpotlightDialog #mx_SpotlightDialog_content .mx_SpotlightDialog_otherSearches .mx_SpotlightDialog_option .mx_SpotlightDialog_result_publicRoomDetails .mx_SpotlightDialog_result_publicRoomHeader .mx_SpotlightDialog_result_publicRoomAlias, .mx_SpotlightDialog #mx_SpotlightDialog_content .mx_SpotlightDialog_hiddenResults .mx_SpotlightDialog_option .mx_SpotlightDialog_result_publicRoomDetails .mx_SpotlightDialog_result_publicRoomHeader .mx_SpotlightDialog_result_publicRoomAlias { color: #edf3ff; color: var(--tertiary-content, #edf3ff); font-size: 1.2rem; margin-left: 8px; overflow: hidden; text-overflow: ellipsis; } .mx_SpotlightDialog #mx_SpotlightDialog_content .mx_SpotlightDialog_results .mx_SpotlightDialog_option .mx_SpotlightDialog_result_publicRoomDetails .mx_SpotlightDialog_result_publicRoomDescription, .mx_SpotlightDialog #mx_SpotlightDialog_content .mx_SpotlightDialog_recentSearches .mx_SpotlightDialog_option .mx_SpotlightDialog_result_publicRoomDetails .mx_SpotlightDialog_result_publicRoomDescription, .mx_SpotlightDialog #mx_SpotlightDialog_content .mx_SpotlightDialog_otherSearches .mx_SpotlightDialog_option .mx_SpotlightDialog_result_publicRoomDetails .mx_SpotlightDialog_result_publicRoomDescription, .mx_SpotlightDialog #mx_SpotlightDialog_content .mx_SpotlightDialog_hiddenResults .mx_SpotlightDialog_option .mx_SpotlightDialog_result_publicRoomDetails .mx_SpotlightDialog_result_publicRoomDescription { color: #edf3ff; color: var(--secondary-content, #edf3ff); font-size: 1.2rem; white-space: normal; word-wrap: break-word; line-height: 2rem; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; } .mx_SpotlightDialog #mx_SpotlightDialog_content .mx_SpotlightDialog_results .mx_SpotlightDialog_option .mx_NotificationBadge, .mx_SpotlightDialog #mx_SpotlightDialog_content .mx_SpotlightDialog_recentSearches .mx_SpotlightDialog_option .mx_NotificationBadge, .mx_SpotlightDialog #mx_SpotlightDialog_content .mx_SpotlightDialog_otherSearches .mx_SpotlightDialog_option .mx_NotificationBadge, .mx_SpotlightDialog #mx_SpotlightDialog_content .mx_SpotlightDialog_hiddenResults .mx_SpotlightDialog_option .mx_NotificationBadge { margin-left: 8px; } .mx_SpotlightDialog #mx_SpotlightDialog_content .mx_SpotlightDialog_results .mx_SpotlightDialog_option .mx_SpotlightDialog_option--menu, .mx_SpotlightDialog #mx_SpotlightDialog_content .mx_SpotlightDialog_results .mx_SpotlightDialog_option .mx_SpotlightDialog_option--notifications, .mx_SpotlightDialog #mx_SpotlightDialog_content .mx_SpotlightDialog_recentSearches .mx_SpotlightDialog_option .mx_SpotlightDialog_option--menu, .mx_SpotlightDialog #mx_SpotlightDialog_content .mx_SpotlightDialog_recentSearches .mx_SpotlightDialog_option .mx_SpotlightDialog_option--notifications, .mx_SpotlightDialog #mx_SpotlightDialog_content .mx_SpotlightDialog_otherSearches .mx_SpotlightDialog_option .mx_SpotlightDialog_option--menu, .mx_SpotlightDialog #mx_SpotlightDialog_content .mx_SpotlightDialog_otherSearches .mx_SpotlightDialog_option .mx_SpotlightDialog_option--notifications, .mx_SpotlightDialog #mx_SpotlightDialog_content .mx_SpotlightDialog_hiddenResults .mx_SpotlightDialog_option .mx_SpotlightDialog_option--menu, .mx_SpotlightDialog #mx_SpotlightDialog_content .mx_SpotlightDialog_hiddenResults .mx_SpotlightDialog_option .mx_SpotlightDialog_option--notifications { width: 20px; min-width: 20px; height: 20px; margin-top: auto; margin-bottom: auto; position: relative; display: none; } .mx_SpotlightDialog #mx_SpotlightDialog_content .mx_SpotlightDialog_results .mx_SpotlightDialog_option .mx_SpotlightDialog_option--menu::before, .mx_SpotlightDialog #mx_SpotlightDialog_content .mx_SpotlightDialog_results .mx_SpotlightDialog_option .mx_SpotlightDialog_option--notifications::before, .mx_SpotlightDialog #mx_SpotlightDialog_content .mx_SpotlightDialog_recentSearches .mx_SpotlightDialog_option .mx_SpotlightDialog_option--menu::before, .mx_SpotlightDialog #mx_SpotlightDialog_content .mx_SpotlightDialog_recentSearches .mx_SpotlightDialog_option .mx_SpotlightDialog_option--notifications::before, .mx_SpotlightDialog #mx_SpotlightDialog_content .mx_SpotlightDialog_otherSearches .mx_SpotlightDialog_option .mx_SpotlightDialog_option--menu::before, .mx_SpotlightDialog #mx_SpotlightDialog_content .mx_SpotlightDialog_otherSearches .mx_SpotlightDialog_option .mx_SpotlightDialog_option--notifications::before, .mx_SpotlightDialog #mx_SpotlightDialog_content .mx_SpotlightDialog_hiddenResults .mx_SpotlightDialog_option .mx_SpotlightDialog_option--menu::before, .mx_SpotlightDialog #mx_SpotlightDialog_content .mx_SpotlightDialog_hiddenResults .mx_SpotlightDialog_option .mx_SpotlightDialog_option--notifications::before { top: 2px; left: 2px; content: ""; width: 16px; height: 16px; position: absolute; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; background: #edf3ff; background: var(--tertiary-content, #edf3ff); } .mx_SpotlightDialog #mx_SpotlightDialog_content .mx_SpotlightDialog_results .mx_SpotlightDialog_option .mx_SpotlightDialog_option--menu:hover::before, .mx_SpotlightDialog #mx_SpotlightDialog_content .mx_SpotlightDialog_results .mx_SpotlightDialog_option .mx_SpotlightDialog_option--menu[aria-selected="true"]::before, .mx_SpotlightDialog #mx_SpotlightDialog_content .mx_SpotlightDialog_results .mx_SpotlightDialog_option .mx_SpotlightDialog_option--notifications:hover::before, .mx_SpotlightDialog #mx_SpotlightDialog_content .mx_SpotlightDialog_results .mx_SpotlightDialog_option .mx_SpotlightDialog_option--notifications[aria-selected="true"]::before, .mx_SpotlightDialog #mx_SpotlightDialog_content .mx_SpotlightDialog_recentSearches .mx_SpotlightDialog_option .mx_SpotlightDialog_option--menu:hover::before, .mx_SpotlightDialog #mx_SpotlightDialog_content .mx_SpotlightDialog_recentSearches .mx_SpotlightDialog_option .mx_SpotlightDialog_option--menu[aria-selected="true"]::before, .mx_SpotlightDialog #mx_SpotlightDialog_content .mx_SpotlightDialog_recentSearches .mx_SpotlightDialog_option .mx_SpotlightDialog_option--notifications:hover::before, .mx_SpotlightDialog #mx_SpotlightDialog_content .mx_SpotlightDialog_recentSearches .mx_SpotlightDialog_option .mx_SpotlightDialog_option--notifications[aria-selected="true"]::before, .mx_SpotlightDialog #mx_SpotlightDialog_content .mx_SpotlightDialog_otherSearches .mx_SpotlightDialog_option .mx_SpotlightDialog_option--menu:hover::before, .mx_SpotlightDialog #mx_SpotlightDialog_content .mx_SpotlightDialog_otherSearches .mx_SpotlightDialog_option .mx_SpotlightDialog_option--menu[aria-selected="true"]::before, .mx_SpotlightDialog #mx_SpotlightDialog_content .mx_SpotlightDialog_otherSearches .mx_SpotlightDialog_option .mx_SpotlightDialog_option--notifications:hover::before, .mx_SpotlightDialog #mx_SpotlightDialog_content .mx_SpotlightDialog_otherSearches .mx_SpotlightDialog_option .mx_SpotlightDialog_option--notifications[aria-selected="true"]::before, .mx_SpotlightDialog #mx_SpotlightDialog_content .mx_SpotlightDialog_hiddenResults .mx_SpotlightDialog_option .mx_SpotlightDialog_option--menu:hover::before, .mx_SpotlightDialog #mx_SpotlightDialog_content .mx_SpotlightDialog_hiddenResults .mx_SpotlightDialog_option .mx_SpotlightDialog_option--menu[aria-selected="true"]::before, .mx_SpotlightDialog #mx_SpotlightDialog_content .mx_SpotlightDialog_hiddenResults .mx_SpotlightDialog_option .mx_SpotlightDialog_option--notifications:hover::before, .mx_SpotlightDialog #mx_SpotlightDialog_content .mx_SpotlightDialog_hiddenResults .mx_SpotlightDialog_option .mx_SpotlightDialog_option--notifications[aria-selected="true"]::before { background-color: #edf3ff; background-color: var(--secondary-content, #edf3ff); } .mx_SpotlightDialog #mx_SpotlightDialog_content .mx_SpotlightDialog_results .mx_SpotlightDialog_option .mx_SpotlightDialog_option--menu::before, .mx_SpotlightDialog #mx_SpotlightDialog_content .mx_SpotlightDialog_recentSearches .mx_SpotlightDialog_option .mx_SpotlightDialog_option--menu::before, .mx_SpotlightDialog #mx_SpotlightDialog_content .mx_SpotlightDialog_otherSearches .mx_SpotlightDialog_option .mx_SpotlightDialog_option--menu::before, .mx_SpotlightDialog #mx_SpotlightDialog_content .mx_SpotlightDialog_hiddenResults .mx_SpotlightDialog_option .mx_SpotlightDialog_option--menu::before { -webkit-mask-image: url(../../img/element-icons/context-menu.131c13c.svg); mask-image: url(../../img/element-icons/context-menu.131c13c.svg); } .mx_SpotlightDialog #mx_SpotlightDialog_content .mx_SpotlightDialog_results .mx_SpotlightDialog_option:hover, .mx_SpotlightDialog #mx_SpotlightDialog_content .mx_SpotlightDialog_results .mx_SpotlightDialog_option[aria-selected="true"], .mx_SpotlightDialog #mx_SpotlightDialog_content .mx_SpotlightDialog_recentSearches .mx_SpotlightDialog_option:hover, .mx_SpotlightDialog #mx_SpotlightDialog_content .mx_SpotlightDialog_recentSearches .mx_SpotlightDialog_option[aria-selected="true"], .mx_SpotlightDialog #mx_SpotlightDialog_content .mx_SpotlightDialog_otherSearches .mx_SpotlightDialog_option:hover, .mx_SpotlightDialog #mx_SpotlightDialog_content .mx_SpotlightDialog_otherSearches .mx_SpotlightDialog_option[aria-selected="true"], .mx_SpotlightDialog #mx_SpotlightDialog_content .mx_SpotlightDialog_hiddenResults .mx_SpotlightDialog_option:hover, .mx_SpotlightDialog #mx_SpotlightDialog_content .mx_SpotlightDialog_hiddenResults .mx_SpotlightDialog_option[aria-selected="true"] { background-color: #21262c; background-color: var(--system, #21262c); } .mx_SpotlightDialog #mx_SpotlightDialog_content .mx_SpotlightDialog_results .mx_SpotlightDialog_option:hover .mx_SpotlightDialog_option--menu, .mx_SpotlightDialog #mx_SpotlightDialog_content .mx_SpotlightDialog_results .mx_SpotlightDialog_option:hover .mx_SpotlightDialog_option--notifications, .mx_SpotlightDialog #mx_SpotlightDialog_content .mx_SpotlightDialog_results .mx_SpotlightDialog_option[aria-selected="true"] .mx_SpotlightDialog_option--menu, .mx_SpotlightDialog #mx_SpotlightDialog_content .mx_SpotlightDialog_results .mx_SpotlightDialog_option[aria-selected="true"] .mx_SpotlightDialog_option--notifications, .mx_SpotlightDialog #mx_SpotlightDialog_content .mx_SpotlightDialog_recentSearches .mx_SpotlightDialog_option:hover .mx_SpotlightDialog_option--menu, .mx_SpotlightDialog #mx_SpotlightDialog_content .mx_SpotlightDialog_recentSearches .mx_SpotlightDialog_option:hover .mx_SpotlightDialog_option--notifications, .mx_SpotlightDialog #mx_SpotlightDialog_content .mx_SpotlightDialog_recentSearches .mx_SpotlightDialog_option[aria-selected="true"] .mx_SpotlightDialog_option--menu, .mx_SpotlightDialog #mx_SpotlightDialog_content .mx_SpotlightDialog_recentSearches .mx_SpotlightDialog_option[aria-selected="true"] .mx_SpotlightDialog_option--notifications, .mx_SpotlightDialog #mx_SpotlightDialog_content .mx_SpotlightDialog_otherSearches .mx_SpotlightDialog_option:hover .mx_SpotlightDialog_option--menu, .mx_SpotlightDialog #mx_SpotlightDialog_content .mx_SpotlightDialog_otherSearches .mx_SpotlightDialog_option:hover .mx_SpotlightDialog_option--notifications, .mx_SpotlightDialog #mx_SpotlightDialog_content .mx_SpotlightDialog_otherSearches .mx_SpotlightDialog_option[aria-selected="true"] .mx_SpotlightDialog_option--menu, .mx_SpotlightDialog #mx_SpotlightDialog_content .mx_SpotlightDialog_otherSearches .mx_SpotlightDialog_option[aria-selected="true"] .mx_SpotlightDialog_option--notifications, .mx_SpotlightDialog #mx_SpotlightDialog_content .mx_SpotlightDialog_hiddenResults .mx_SpotlightDialog_option:hover .mx_SpotlightDialog_option--menu, .mx_SpotlightDialog #mx_SpotlightDialog_content .mx_SpotlightDialog_hiddenResults .mx_SpotlightDialog_option:hover .mx_SpotlightDialog_option--notifications, .mx_SpotlightDialog #mx_SpotlightDialog_content .mx_SpotlightDialog_hiddenResults .mx_SpotlightDialog_option[aria-selected="true"] .mx_SpotlightDialog_option--menu, .mx_SpotlightDialog #mx_SpotlightDialog_content .mx_SpotlightDialog_hiddenResults .mx_SpotlightDialog_option[aria-selected="true"] .mx_SpotlightDialog_option--notifications { display: block; } .mx_SpotlightDialog #mx_SpotlightDialog_content .mx_SpotlightDialog_results .mx_SpotlightDialog_option[aria-selected="true"] .mx_SpotlightDialog_enterPrompt, .mx_SpotlightDialog #mx_SpotlightDialog_content .mx_SpotlightDialog_recentSearches .mx_SpotlightDialog_option[aria-selected="true"] .mx_SpotlightDialog_enterPrompt, .mx_SpotlightDialog #mx_SpotlightDialog_content .mx_SpotlightDialog_otherSearches .mx_SpotlightDialog_option[aria-selected="true"] .mx_SpotlightDialog_enterPrompt, .mx_SpotlightDialog #mx_SpotlightDialog_content .mx_SpotlightDialog_hiddenResults .mx_SpotlightDialog_option[aria-selected="true"] .mx_SpotlightDialog_enterPrompt { display: inline-block; } .mx_SpotlightDialog #mx_SpotlightDialog_content .mx_SpotlightDialog_inviteLink, .mx_SpotlightDialog #mx_SpotlightDialog_content .mx_SpotlightDialog_createRoom { margin-top: 8px; } .mx_SpotlightDialog #mx_SpotlightDialog_content .mx_SpotlightDialog_inviteLink .mx_AccessibleButton, .mx_SpotlightDialog #mx_SpotlightDialog_content .mx_SpotlightDialog_createRoom .mx_AccessibleButton { position: relative; margin: 0; padding: 3px 8px 3px 28px; } .mx_SpotlightDialog #mx_SpotlightDialog_content .mx_SpotlightDialog_inviteLink .mx_AccessibleButton::before, .mx_SpotlightDialog #mx_SpotlightDialog_content .mx_SpotlightDialog_createRoom .mx_AccessibleButton::before { content: ""; display: block; position: absolute; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain; left: 8px; width: 16px; height: 16px; background: #0dbd8b; background: var(--accent, #0dbd8b); } .mx_SpotlightDialog #mx_SpotlightDialog_content .mx_SpotlightDialog_inviteLink .mx_AccessibleButton::before { -webkit-mask-image: url(../../img/element-icons/link.3f7cd42.svg); mask-image: url(../../img/element-icons/link.3f7cd42.svg); } .mx_SpotlightDialog #mx_SpotlightDialog_content .mx_SpotlightDialog_createRoom .mx_AccessibleButton::before { -webkit-mask-image: url(../../img/element-icons/roomlist/hash.e2814db.svg); mask-image: url(../../img/element-icons/roomlist/hash.e2814db.svg); } .mx_SpotlightDialog #mx_SpotlightDialog_content .mx_SpotlightDialog_otherSearches .mx_SpotlightDialog_startChat, .mx_SpotlightDialog #mx_SpotlightDialog_content .mx_SpotlightDialog_otherSearches .mx_SpotlightDialog_joinRoomAlias, .mx_SpotlightDialog #mx_SpotlightDialog_content .mx_SpotlightDialog_otherSearches .mx_SpotlightDialog_explorePublicRooms, .mx_SpotlightDialog #mx_SpotlightDialog_content .mx_SpotlightDialog_otherSearches .mx_SpotlightDialog_startGroupChat { padding-left: 32px; position: relative; } .mx_SpotlightDialog #mx_SpotlightDialog_content .mx_SpotlightDialog_otherSearches .mx_SpotlightDialog_startChat::before, .mx_SpotlightDialog #mx_SpotlightDialog_content .mx_SpotlightDialog_otherSearches .mx_SpotlightDialog_joinRoomAlias::before, .mx_SpotlightDialog #mx_SpotlightDialog_content .mx_SpotlightDialog_otherSearches .mx_SpotlightDialog_explorePublicRooms::before, .mx_SpotlightDialog #mx_SpotlightDialog_content .mx_SpotlightDialog_otherSearches .mx_SpotlightDialog_startGroupChat::before { background-color: #edf3ff; background-color: var(--secondary-content, #edf3ff); content: ""; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain; width: 24px; height: 24px; position: absolute; left: 4px; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); } .mx_SpotlightDialog #mx_SpotlightDialog_content .mx_SpotlightDialog_otherSearches .mx_SpotlightDialog_startChat::before { -webkit-mask-image: url(../../img/element-icons/room/members.3c127a3.svg); mask-image: url(../../img/element-icons/room/members.3c127a3.svg); } .mx_SpotlightDialog #mx_SpotlightDialog_content .mx_SpotlightDialog_otherSearches .mx_SpotlightDialog_joinRoomAlias::before { -webkit-mask-image: url(../../img/element-icons/roomlist/hash-circle.6635c7b.svg); mask-image: url(../../img/element-icons/roomlist/hash-circle.6635c7b.svg); } .mx_SpotlightDialog #mx_SpotlightDialog_content .mx_SpotlightDialog_otherSearches .mx_SpotlightDialog_explorePublicRooms::before { -webkit-mask-image: url(../../img/element-icons/roomlist/explore.3bcee74.svg); mask-image: url(../../img/element-icons/roomlist/explore.3bcee74.svg); } .mx_SpotlightDialog #mx_SpotlightDialog_content .mx_SpotlightDialog_otherSearches .mx_SpotlightDialog_startGroupChat::before { -webkit-mask-image: url(../../img/element-icons/group-members.483392b.svg); mask-image: url(../../img/element-icons/group-members.483392b.svg); } .mx_SpotlightDialog #mx_SpotlightDialog_content .mx_SpotlightDialog_otherSearches .mx_SpotlightDialog_otherSearches_messageSearchText { font-size: 1.5rem; line-height: 2.4rem; } .mx_SpotlightDialog #mx_SpotlightDialog_content .mx_SpotlightDialog_otherSearches .mx_SpotlightDialog_otherSearches_messageSearchIcon { display: inline-block; width: 24px; height: 24px; background-color: #edf3ff; background-color: var(--secondary-content, #edf3ff); vertical-align: text-bottom; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain; -webkit-mask-image: url(../../img/element-icons/room/search-inset.8f291bd.svg); mask-image: url(../../img/element-icons/room/search-inset.8f291bd.svg); } .mx_SpotlightDialog #mx_SpotlightDialog_content .mx_SpotlightDialog_result_details { margin-left: 8px; margin-right: 8px; color: #edf3ff; color: var(--tertiary-content, #edf3ff); font-size: 1.2rem; line-height: 1.5rem; min-width: 0; overflow: hidden; text-overflow: ellipsis; } .mx_SpotlightDialog #mx_SpotlightDialog_content .mx_SpotlightDialog_recentSearches > h4 > .mx_AccessibleButton_kind_link { float: right; font-size: 1.2rem; line-height: 1.5rem; color: #edf3ff; color: var(--secondary-content, #edf3ff); } .mx_SpotlightDialog #mx_SpotlightDialog_content .mx_SpotlightDialog_enterPrompt { padding: 2px 4px; /* To avoid any styling inherent with elements */ font-family: inherit; font-weight: inherit; font-size: 1.2rem; line-height: 1.5rem; color: #edf3ff; color: var(--tertiary-content, #edf3ff); border-radius: 6px; background-color: #6f7882; background-color: var(--quinary-content, #6f7882); margin-right: 4px; display: none; } .mx_SpotlightDialog #mx_SpotlightDialog_content .mx_SpotlightDialog_metaspaceResult { background-color: #edf3ff; background-color: var(--secondary-content, #edf3ff); -webkit-mask-position: center; mask-position: center; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: contain; mask-size: contain; } .mx_SpotlightDialog #mx_SpotlightDialog_content .mx_SpotlightDialog_metaspaceResult.mx_SpotlightDialog_metaspaceResult_home-space { -webkit-mask-image: url(../../img/element-icons/home.70cb677.svg); mask-image: url(../../img/element-icons/home.70cb677.svg); } .mx_SpotlightDialog #mx_SpotlightDialog_content .mx_SpotlightDialog_metaspaceResult.mx_SpotlightDialog_metaspaceResult_favourites-space { -webkit-mask-image: url(../../img/element-icons/roomlist/favorite.b47f7d4.svg); mask-image: url(../../img/element-icons/roomlist/favorite.b47f7d4.svg); } .mx_SpotlightDialog #mx_SpotlightDialog_content .mx_SpotlightDialog_metaspaceResult.mx_SpotlightDialog_metaspaceResult_people-space { -webkit-mask-image: url(../../img/element-icons/room/members.3c127a3.svg); mask-image: url(../../img/element-icons/room/members.3c127a3.svg); } .mx_SpotlightDialog #mx_SpotlightDialog_content .mx_SpotlightDialog_metaspaceResult.mx_SpotlightDialog_metaspaceResult_orphans-space { -webkit-mask-image: url(../../img/element-icons/roomlist/hash-circle.6635c7b.svg); mask-image: url(../../img/element-icons/roomlist/hash-circle.6635c7b.svg); } /* Copyright 2019 The Matrix.org Foundation C.I.C. Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0 Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License. */ /* * To avoid visual glitching of two modals stacking briefly, we customise the * terms dialog sizing when it will appear for the integration manager so that * it gets the same basic size as the IM's own modal. */ .mx_TermsDialog_forIntegrationManager .mx_Dialog { width: 60%; height: 70%; -webkit-box-sizing: border-box; box-sizing: border-box; } .mx_TermsDialog_termsTableHeader { font-weight: bold; text-align: left; } .mx_TermsDialog_termsTable { font-size: 1.2rem; width: 100%; } .mx_TermsDialog_service, .mx_TermsDialog_summary { padding-right: 10px; } /* Copyright 2021 The Matrix.org Foundation C.I.C. Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0 Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License. */ .mx_UntrustedDeviceDialog .mx_Dialog_title { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .mx_UntrustedDeviceDialog .mx_Dialog_title .mx_E2EIcon { margin-left: 0; } .mx_UntrustedDeviceDialog .mx_Dialog_buttons { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; grid-gap: 8px; gap: 8px; } /* Copyright 2019 New Vector Ltd. Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0 Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License. */ .mx_UploadConfirmDialog_fileIcon { margin-right: 5px; } .mx_UploadConfirmDialog_previewOuter { text-align: center; } .mx_UploadConfirmDialog_previewInner { display: inline-block; text-align: left; } .mx_UploadConfirmDialog_imagePreview { max-height: 300px; max-width: 100%; border-radius: 4px; border: 1px solid #9fa9ba; } /* Copyright 2019 New Vector Ltd. Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0 Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License. */ /* ICONS */ /* ========================================================== */ .mx_UserSettingsDialog_settingsIcon::before { -webkit-mask-image: url(../../img/element-icons/settings.0c529f2.svg); mask-image: url(../../img/element-icons/settings.0c529f2.svg); } .mx_UserSettingsDialog_appearanceIcon::before { -webkit-mask-image: url(../../img/element-icons/settings/appearance.c35df33.svg); mask-image: url(../../img/element-icons/settings/appearance.c35df33.svg); } .mx_UserSettingsDialog_voiceIcon::before { -webkit-mask-image: url(../../img/element-icons/call/voice-call.0692925.svg); mask-image: url(../../img/element-icons/call/voice-call.0692925.svg); } .mx_UserSettingsDialog_bellIcon::before { -webkit-mask-image: url(../../img/element-icons/notifications.b4d3969.svg); mask-image: url(../../img/element-icons/notifications.b4d3969.svg); } .mx_UserSettingsDialog_iconMessage::before { -webkit-mask-image: url(../../img/element-icons/check.e8a053d.svg); mask-image: url(../../img/element-icons/check.e8a053d.svg); } .mx_UserSettingsDialog_preferencesIcon::before { -webkit-mask-image: url(../../img/element-icons/settings/preference.ee8ee5b.svg); mask-image: url(../../img/element-icons/settings/preference.ee8ee5b.svg); } .mx_UserSettingsDialog_keyboardIcon::before { -webkit-mask-image: url(../../img/element-icons/settings/keyboard.1df1463.svg); mask-image: url(../../img/element-icons/settings/keyboard.1df1463.svg); } .mx_UserSettingsDialog_sidebarIcon::before { -webkit-mask-image: url(../../img/element-icons/settings/sidebar.aea11f7.svg); mask-image: url(../../img/element-icons/settings/sidebar.aea11f7.svg); } .mx_UserSettingsDialog_securityIcon::before { -webkit-mask-image: url(../../img/element-icons/security.56b436c.svg); mask-image: url(../../img/element-icons/security.56b436c.svg); } .mx_UserSettingsDialog_sessionsIcon::before { -webkit-mask-image: url(../../img/element-icons/settings/devices.d499be6.svg); mask-image: url(../../img/element-icons/settings/devices.d499be6.svg); } .mx_UserSettingsDialog_helpIcon::before { -webkit-mask-image: url(../../img/element-icons/settings/help.175fd0e.svg); mask-image: url(../../img/element-icons/settings/help.175fd0e.svg); } .mx_UserSettingsDialog_labsIcon::before { -webkit-mask-image: url(../../img/element-icons/settings/flask.699f7f9.svg); mask-image: url(../../img/element-icons/settings/flask.699f7f9.svg); } .mx_UserSettingsDialog_mjolnirIcon::before { -webkit-mask-image: url(../../img/element-icons/room/composer/emoji.fd84fe8.svg); mask-image: url(../../img/element-icons/room/composer/emoji.fd84fe8.svg); } /* Copyright 2022 The Matrix.org Foundation C.I.C. Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0 Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License. */ .mx_VerifyEMailDialog { height: auto; top: 300px; } .mx_VerifyEMailDialog .mx_Dialog { color: var(--timeline-text-color); font-size: 1.4rem; padding: 24px 24px 16px; text-align: center; width: 485px; } .mx_VerifyEMailDialog .mx_Dialog h1 { font-size: 2.4rem; font-weight: 600; font-weight: var(--font-semi-bold); } .mx_VerifyEMailDialog .mx_Dialog .mx_VerifyEMailDialog_text-light { color: #edf3ff; color: var(--secondary-content, #edf3ff); line-height: 20px; } .mx_VerifyEMailDialog .mx_Dialog .mx_AuthBody_did-not-receive { -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; margin-bottom: 8px; } .mx_VerifyEMailDialog .mx_Dialog .mx_Dialog_cancelButton { right: 10px; } /* Copyright 2020 The Matrix.org Foundation C.I.C. Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0 Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License. */ .mx_WidgetCapabilitiesPromptDialog .text-muted { font-size: 1.2rem; } .mx_WidgetCapabilitiesPromptDialog .mx_Dialog_content { margin-bottom: 16px; } .mx_WidgetCapabilitiesPromptDialog .mx_WidgetCapabilitiesPromptDialog_cap { margin-top: 20px; font-size: 1.5rem; line-height: 1.5rem; } .mx_WidgetCapabilitiesPromptDialog .mx_WidgetCapabilitiesPromptDialog_cap .mx_WidgetCapabilitiesPromptDialog_byline { color: #a1b2d1; margin-left: 26px; font-size: 1.2rem; line-height: 1.2rem; } .mx_WidgetCapabilitiesPromptDialog .mx_Dialog_buttons { margin-top: 40px; /* double normal */ } .mx_WidgetCapabilitiesPromptDialog .mx_SettingsFlag { line-height: calc(1.4rem + 7px + 7px); /* 7px top & bottom padding */ color: #a1b2d1; font-size: 1.2rem; } .mx_WidgetCapabilitiesPromptDialog .mx_SettingsFlag .mx_ToggleSwitch { /* downsize the switch + ball */ width: 3.2rem; height: 1.5rem; } .mx_WidgetCapabilitiesPromptDialog .mx_SettingsFlag .mx_ToggleSwitch.mx_ToggleSwitch_on > .mx_ToggleSwitch_ball { left: calc(100% - 1.5rem); } .mx_WidgetCapabilitiesPromptDialog .mx_SettingsFlag .mx_ToggleSwitch .mx_ToggleSwitch_ball { width: 1.5rem; height: 1.5rem; border-radius: 1.5rem; } /* Copyright 2018, 2019, 2021 The Matrix.org Foundation C.I.C. Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0 Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License. */ .mx_AccessSecretStorageDialog .mx_AccessSecretStorageDialog_titleWithIcon::before { content: ""; display: inline-block; width: 24px; height: 24px; -webkit-margin-end: 8px; margin-inline-end: 8px; position: relative; top: 5px; background-color: var(--timeline-text-color); } .mx_AccessSecretStorageDialog .mx_AccessSecretStorageDialog_titleWithIcon.mx_AccessSecretStorageDialog_resetBadge::before { /* The image isn't capable of masking, so we use a background instead. */ background-image: url(../../img/element-icons/warning-badge.3cf4d1a.svg); background-size: 24px; background-color: transparent; } .mx_AccessSecretStorageDialog .mx_AccessSecretStorageDialog_titleWithIcon.mx_AccessSecretStorageDialog_secureBackupTitle::before { -webkit-mask-image: url(../../img/feather-customised/secure-backup.6c0a137.svg); mask-image: url(../../img/feather-customised/secure-backup.6c0a137.svg); } .mx_AccessSecretStorageDialog .mx_AccessSecretStorageDialog_titleWithIcon.mx_AccessSecretStorageDialog_securePhraseTitle::before { -webkit-mask-image: url(../../img/feather-customised/secure-phrase.be40c1d.svg); mask-image: url(../../img/feather-customised/secure-phrase.be40c1d.svg); } .mx_AccessSecretStorageDialog .mx_AccessSecretStorageDialog_primaryContainer .mx_AccessSecretStorageDialog_passPhraseInput { width: 300px; border: 1px solid #0dbd8b; border: 1px solid var(--accent, #0dbd8b); border-radius: 5px; } .mx_AccessSecretStorageDialog .mx_AccessSecretStorageDialog_primaryContainer .mx_AccessSecretStorageDialog_keyStatus { height: 30px; } .mx_AccessSecretStorageDialog .mx_AccessSecretStorageDialog_primaryContainer .mx_AccessSecretStorageDialog_recoveryKeyEntry { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .mx_AccessSecretStorageDialog .mx_AccessSecretStorageDialog_primaryContainer .mx_AccessSecretStorageDialog_recoveryKeyEntry .mx_AccessSecretStorageDialog_recoveryKeyEntry_textInput { -webkit-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1; } .mx_AccessSecretStorageDialog .mx_AccessSecretStorageDialog_primaryContainer .mx_AccessSecretStorageDialog_recoveryKeyEntry .mx_AccessSecretStorageDialog_recoveryKeyEntry_entryControlSeparatorText { margin: 16px; } .mx_AccessSecretStorageDialog .mx_AccessSecretStorageDialog_primaryContainer .mx_AccessSecretStorageDialog_recoveryKeyEntry .mx_AccessSecretStorageDialog_recoveryKeyEntry_fileInput { display: none; } .mx_AccessSecretStorageDialog .mx_AccessSecretStorageDialog_primaryContainer .mx_AccessSecretStorageDialog_recoveryKeyFeedback::before { content: ""; display: inline-block; vertical-align: bottom; width: 20px; height: 20px; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: 20px; mask-size: 20px; -webkit-margin-end: 5px; margin-inline-end: 5px; } .mx_AccessSecretStorageDialog .mx_AccessSecretStorageDialog_primaryContainer .mx_AccessSecretStorageDialog_recoveryKeyFeedback.mx_AccessSecretStorageDialog_recoveryKeyFeedback--valid { color: #0dbd8b; color: var(--accent, #0dbd8b); } .mx_AccessSecretStorageDialog .mx_AccessSecretStorageDialog_primaryContainer .mx_AccessSecretStorageDialog_recoveryKeyFeedback.mx_AccessSecretStorageDialog_recoveryKeyFeedback--valid::before { -webkit-mask-image: url(../../img/feather-customised/check.94da327.svg); mask-image: url(../../img/feather-customised/check.94da327.svg); background-color: #0dbd8b; background-color: var(--accent, #0dbd8b); } .mx_AccessSecretStorageDialog .mx_AccessSecretStorageDialog_primaryContainer .mx_AccessSecretStorageDialog_recoveryKeyFeedback.mx_AccessSecretStorageDialog_recoveryKeyFeedback--invalid { color: #ff5b55; color: var(--alert, #ff5b55); } .mx_AccessSecretStorageDialog .mx_AccessSecretStorageDialog_primaryContainer .mx_AccessSecretStorageDialog_recoveryKeyFeedback.mx_AccessSecretStorageDialog_recoveryKeyFeedback--invalid::before { -webkit-mask-image: url(../../img/feather-customised/x.816c629.svg); mask-image: url(../../img/feather-customised/x.816c629.svg); background-color: #ff5b55; background-color: var(--alert, #ff5b55); } .mx_AccessSecretStorageDialog .mx_AccessSecretStorageDialog_primaryContainer .mx_Dialog_buttons { /* 16px icon + 8px padding */ text-align: left; text-align: initial; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-flow: column; flex-flow: column; grid-gap: 14px; gap: 14px; } .mx_AccessSecretStorageDialog .mx_AccessSecretStorageDialog_primaryContainer .mx_Dialog_buttons .mx_Dialog_buttons_additive { float: none; } .mx_AccessSecretStorageDialog .mx_AccessSecretStorageDialog_primaryContainer .mx_Dialog_buttons .mx_Dialog_buttons_additive .mx_AccessSecretStorageDialog_reset { position: relative; -webkit-padding-start: 24px; padding-inline-start: 24px; } .mx_AccessSecretStorageDialog .mx_AccessSecretStorageDialog_primaryContainer .mx_Dialog_buttons .mx_Dialog_buttons_additive .mx_AccessSecretStorageDialog_reset::before { content: ""; display: inline-block; position: absolute; height: 16px; width: 16px; left: 0; top: 2px; /* alignment */ background-image: url(../../img/element-icons/warning-badge.3cf4d1a.svg); background-size: contain; } .mx_AccessSecretStorageDialog .mx_AccessSecretStorageDialog_primaryContainer .mx_Dialog_buttons .mx_Dialog_buttons_additive .mx_AccessSecretStorageDialog_reset .mx_AccessSecretStorageDialog_reset_link { color: #ff5b55; color: var(--alert, #ff5b55); } .mx_AccessSecretStorageDialog .mx_AccessSecretStorageDialog_primaryContainer .mx_Dialog_buttons .mx_Dialog_buttons_row { grid-gap: 16px; gap: 16px; /* TODO: needs normalization */ -webkit-padding-start: 24px; padding-inline-start: 24px; } /* Copyright 2020 The Matrix.org Foundation C.I.C. Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0 Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License. */ .mx_CreateCrossSigningDialog { /* Why you ask? Because CompleteSecurityBody is 600px so this is the width */ /* we end up when in there, but when in our own dialog we set our own width */ /* so need to fix it to something sensible as otherwise we'd end up either */ /* really wide or really narrow depending on the phase. I bet you wish you */ /* never asked. */ width: 560px; } .mx_CreateCrossSigningDialog details .mx_AccessibleButton { margin: 1em 0; /* emulate paragraph spacing because we can't put this button in a paragraph due to HTML rules */ } .mx_CreateCrossSigningDialog .mx_Dialog_title { /* TODO: Consider setting this for all dialog titles. */ margin-bottom: 1em; } /* Copyright 2018 New Vector Ltd Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0 Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License. */ .mx_CreateKeyBackupDialog .mx_Dialog_title { /* TODO: Consider setting this for all dialog titles. */ margin-bottom: 1em; } .mx_CreateKeyBackupDialog_primaryContainer { /* FIXME: plinth colour in new theme(s). background-color: $accent; */ padding: 20px; } .mx_CreateKeyBackupDialog_primaryContainer::after { content: ""; clear: both; display: block; } .mx_CreateKeyBackupDialog_passPhraseContainer { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; } .mx_CreateKeyBackupDialog_passPhraseInput { -webkit-box-flex: 0; -ms-flex: none; flex: none; width: 250px; border: 1px solid #0dbd8b; border: 1px solid var(--accent, #0dbd8b); border-radius: 5px; padding: 10px; margin-bottom: 1em; } .mx_CreateKeyBackupDialog_passPhraseMatch { margin-left: 20px; } .mx_CreateKeyBackupDialog_recoveryKeyHeader { margin-bottom: 1em; } .mx_CreateKeyBackupDialog_recoveryKeyContainer { display: -webkit-box; display: -ms-flexbox; display: flex; } .mx_CreateKeyBackupDialog_recoveryKey { width: 262px; padding: 20px; color: var(--timeline-text-secondary-color); background-color: #22262e; margin-right: 12px; } .mx_CreateKeyBackupDialog_recoveryKeyButtons { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .mx_CreateKeyBackupDialog_recoveryKeyButtons button { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; white-space: nowrap; } .mx_CreateKeyBackupDialog details .mx_AccessibleButton { margin: 1em 0; /* emulate paragraph spacing because we can't put this button in a paragraph due to HTML rules */ } /* Copyright 2018 New Vector Ltd Copyright 2019, 2020 The Matrix.org Foundation C.I.C. Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0 Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License. */ .mx_CreateSecretStorageDialog { /* Why you ask? Because CompleteSecurityBody is 600px so this is the width */ /* we end up when in there, but when in our own dialog we set our own width */ /* so need to fix it to something sensible as otherwise we'd end up either */ /* really wide or really narrow depending on the phase. I bet you wish you */ /* never asked. */ width: 560px; } .mx_CreateSecretStorageDialog.mx_SuccessDialog { padding: 56px; } /* 80px from design - 24px wrapper padding */ .mx_CreateSecretStorageDialog.mx_SuccessDialog .mx_Dialog_title { margin-bottom: 16px; } .mx_CreateSecretStorageDialog .mx_SettingsFlag { display: -webkit-box; display: -ms-flexbox; display: flex; } .mx_CreateSecretStorageDialog .mx_SettingsFlag_label { -webkit-box-flex: 1; -ms-flex: 1 1 0px; flex: 1 1 0; min-width: 0; font-weight: 600; font-weight: var(--font-semi-bold); } .mx_CreateSecretStorageDialog .mx_ToggleSwitch { -webkit-box-flex: 0; -ms-flex: 0 0 auto; flex: 0 0 auto; margin-left: 30px; } .mx_CreateSecretStorageDialog details .mx_AccessibleButton { margin: 1em 0; /* emulate paragraph spacing because we can't put this button in a paragraph due to HTML rules */ } .mx_CreateSecretStorageDialog .mx_Dialog_title { /* TODO: Consider setting this for all dialog titles. */ margin-bottom: 1em; } .mx_CreateSecretStorageDialog_titleWithIcon::before { content: ""; display: inline-block; width: 24px; height: 24px; margin-right: 8px; position: relative; top: 5px; background-color: var(--timeline-text-color); } .mx_CreateSecretStorageDialog_secureBackupTitle::before { -webkit-mask-image: url(../../img/feather-customised/secure-backup.6c0a137.svg); mask-image: url(../../img/feather-customised/secure-backup.6c0a137.svg); } .mx_CreateSecretStorageDialog_securePhraseTitle::before { -webkit-mask-image: url(../../img/feather-customised/secure-phrase.be40c1d.svg); mask-image: url(../../img/feather-customised/secure-phrase.be40c1d.svg); } .mx_CreateSecretStorageDialog_centeredTitle, .mx_CreateSecretStorageDialog_centeredBody { text-align: center; } .mx_CreateSecretStorageDialog_primaryContainer { /* FIXME: plinth colour in new theme(s). background-color: $accent; */ padding-top: 20px; } .mx_CreateSecretStorageDialog_primaryContainer.mx_CreateSecretStorageDialog_recoveryKeyPrimarycontainer { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .mx_CreateSecretStorageDialog_primaryContainer::after { content: ""; clear: both; display: block; } .mx_CreateSecretStorageDialog_primaryContainer .mx_StyledRadioButton { margin-bottom: 16px; padding: 11px; } .mx_CreateSecretStorageDialog_optionTitle { color: var(--timeline-text-color); font-weight: 600; font-weight: var(--font-semi-bold); font-size: 1.8rem; padding-bottom: 10px; } .mx_CreateSecretStorageDialog_optionIcon { display: inline-block; width: 24px; height: 24px; margin-right: 8px; position: relative; top: 5px; background-color: var(--timeline-text-color); } .mx_CreateSecretStorageDialog_optionIcon_securePhrase { -webkit-mask-image: url(../../img/feather-customised/secure-phrase.be40c1d.svg); mask-image: url(../../img/feather-customised/secure-phrase.be40c1d.svg); } .mx_CreateSecretStorageDialog_optionIcon_secureBackup { -webkit-mask-image: url(../../img/feather-customised/secure-backup.6c0a137.svg); mask-image: url(../../img/feather-customised/secure-backup.6c0a137.svg); } .mx_CreateSecretStorageDialog_passPhraseContainer { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; } .mx_Field.mx_CreateSecretStorageDialog_passPhraseField { margin-top: 0px; } .mx_CreateSecretStorageDialog_passPhraseMatch { width: 200px; margin-left: 20px; } .mx_CreateSecretStorageDialog_recoveryKeyContainer { display: inline-block; } .mx_CreateSecretStorageDialog_recoveryKey { font-weight: bold; text-align: center; padding: 20px; color: var(--timeline-text-secondary-color); background-color: #22262e; border-radius: 6px; word-spacing: 1em; margin-bottom: 20px; } .mx_CreateSecretStorageDialog_recoveryKey code { display: inline-block; width: 30rem; } .mx_CreateSecretStorageDialog_recoveryKeyButtons { -webkit-box-align: center; -ms-flex-align: center; align-items: center; display: -webkit-box; display: -ms-flexbox; display: flex; grid-gap: 16px; gap: 16px; } .mx_CreateSecretStorageDialog_recoveryKeyButtons_copyBtn { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } .mx_CreateSecretStorageDialog_recoveryKeyButtons .mx_AccessibleButton { -webkit-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1; white-space: nowrap; } .mx_CreateSecretStorageDialog_continueSpinner { margin-top: 33px; text-align: right; } .mx_CreateSecretStorageDialog_continueSpinner img { width: 20px; height: 20px; } /*Responsive design*/ @media (max-width: 1024px){ .mx_CreateSecretStorageDialog{ width: auto !important; } } /* Copyright 2018 New Vector Ltd Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0 Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License. */ .mx_KeyBackupFailedDialog .mx_Dialog_title { margin-bottom: 32px; } .mx_KeyBackupFailedDialog_title { position: relative; padding-left: 45px; padding-bottom: 10px; } .mx_KeyBackupFailedDialog_title::before { -webkit-mask: url(../../img/e2e/lock-warning-filled.2f94d9a.svg); mask: url(../../img/e2e/lock-warning-filled.2f94d9a.svg); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; background-color: var(--timeline-text-color); content: ""; position: absolute; top: -6px; right: 0; bottom: 0; left: 0; } .mx_KeyBackupFailedDialog .mx_Dialog_buttons { margin-top: 36px; } /* Copyright 2018 New Vector Ltd Copyright 2019 The Matrix.org Foundation C.I.C. Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0 Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License. */ .mx_RestoreKeyBackupDialog_keyStatus { height: 30px; } .mx_RestoreKeyBackupDialog_primaryContainer { /* FIXME: plinth colour in new theme(s). background-color: $accent; */ padding: 20px; } .mx_RestoreKeyBackupDialog_passPhraseInput, .mx_RestoreKeyBackupDialog_recoveryKeyInput { width: 300px; border: 1px solid #0dbd8b; border: 1px solid var(--accent, #0dbd8b); border-radius: 5px; padding: 10px; } .mx_RestoreKeyBackupDialog_content > div { 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: justify; -ms-flex-pack: justify; justify-content: space-between; min-height: 110px; /* Empirically measured */ } /* Copyright 2022 The Matrix.org Foundation C.I.C. Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0 Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License. */ .mx_NetworkDropdown_wrapper .mx_ContextualMenu .mx_GenericDropdownMenu_Option.mx_GenericDropdownMenu_Option--header { padding-top: 12px; padding-bottom: 4px; min-width: 160px; } .mx_NetworkDropdown_wrapper .mx_ContextualMenu .mx_GenericDropdownMenu_Option.mx_GenericDropdownMenu_Option--item { padding-top: 4px; padding-bottom: 4px; } .mx_NetworkDropdown_wrapper .mx_ContextualMenu .mx_GenericDropdownMenu_Option.mx_GenericDropdownMenu_Option--item > .mx_GenericDropdownMenu_Option--label span:first-child { font-weight: normal; } .mx_NetworkDropdown_wrapper .mx_ContextualMenu .mx_GenericDropdownMenu_Option > .mx_GenericDropdownMenu_Option--label { -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -webkit-box-align: baseline; -ms-flex-align: baseline; align-items: baseline; -ms-flex-line-pack: baseline; align-content: baseline; color: var(--timeline-text-color); } .mx_NetworkDropdown_wrapper .mx_ContextualMenu .mx_GenericDropdownMenu_Option > .mx_GenericDropdownMenu_Option--label span:not(:first-child) { margin-left: 4px; color: #edf3ff; color: var(--secondary-content, #edf3ff); } .mx_NetworkDropdown_wrapper .mx_ContextualMenu .mx_GenericDropdownMenu_divider { margin-top: 4px; margin-bottom: 4px; } .mx_NetworkDropdown_addServer { font-weight: normal; font-size: 1.5rem; } .mx_NetworkDropdown_removeServer { position: relative; display: inline-block; width: 16px; height: 16px; background: #6f7882; background: var(--quinary-content, #6f7882); border-radius: 8px; text-align: center; line-height: 16px; color: #edf3ff; color: var(--secondary-content, #edf3ff); margin-left: auto; } .mx_NetworkDropdown_removeServer::before { background-color: #edf3ff; background-color: var(--secondary-content, #edf3ff); content: ""; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain; width: 8px; height: 8px; position: absolute; left: 50%; top: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); -webkit-mask-image: url(../../img/cancel-small.6edc931.svg); mask-image: url(../../img/cancel-small.6edc931.svg); } .mx_NetworkDropdown_dialog .mx_Dialog { width: 45vw; } /* Copyright 2017 Vector Creations Ltd Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0 Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License. */ .mx_AccessibleButton { cursor: pointer; } .mx_AccessibleButton.mx_AccessibleButton_disabled { cursor: not-allowed; } .mx_AccessibleButton.mx_AccessibleButton_disabled.mx_AccessibleButton_kind_primary, .mx_AccessibleButton.mx_AccessibleButton_disabled.mx_AccessibleButton_kind_primary_outline, .mx_AccessibleButton.mx_AccessibleButton_disabled.mx_AccessibleButton_kind_primary_sm, .mx_AccessibleButton.mx_AccessibleButton_disabled.mx_AccessibleButton_kind_link, .mx_AccessibleButton.mx_AccessibleButton_disabled.mx_AccessibleButton_kind_link_accent, .mx_AccessibleButton.mx_AccessibleButton_disabled.mx_AccessibleButton_kind_link_inline, .mx_AccessibleButton.mx_AccessibleButton_disabled.mx_AccessibleButton_kind_danger_inline, .mx_AccessibleButton.mx_AccessibleButton_disabled.mx_AccessibleButton_kind_content_inline, .mx_AccessibleButton.mx_AccessibleButton_disabled.mx_AccessibleButton_kind_link_sm { opacity: 0.4; } .mx_AccessibleButton.mx_AccessibleButton_hasKind { padding: 7px 18px; text-align: center; border-radius: 8px; display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; font-size: 1.4rem; border: none; /* override default