/*!*****************************************************************************************************************************************************************************************************************************************************************************!*\ !*** css ../node_modules/.pnpm/css-loader@7.1.4_webpack@5.106.2/node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!../node_modules/.pnpm/webfonts-loader@8.1.1/node_modules/webfonts-loader/index.js??ruleSet[1].rules[2].use[2]!./icons/zulip-icons.font.cjs ***! \*****************************************************************************************************************************************************************************************************************************************************************************/ /* Custom Zulip icons generated with webfont-loader */ @font-face { font-family: 'zulip-icons'; src: url("files/zulip-icons.woff2") format("woff2"); font-weight: normal; font-style: normal; font-display: block; } i.zulip-icon { font-family: 'zulip-icons' !important; font-style: normal !important; font-weight: normal !important; font-variant: normal !important; text-transform: none; font-size: inherit; line-height: 100%; text-decoration: inherit; display: inline-block; speak: none; } .zulip-icon::before { font-family: 'zulip-icons' !important; font-style: normal; font-weight: normal !important; vertical-align: top; } .zulip-icon.zulip-icon-account::before { content: "\f101"; } .zulip-icon.zulip-icon-alarm-clock::before { content: "\f102"; } .zulip-icon.zulip-icon-all-messages::before { content: "\f103"; } .zulip-icon.zulip-icon-archive::before { content: "\f104"; } .zulip-icon.zulip-icon-arrow-down::before { content: "\f105"; } .zulip-icon.zulip-icon-arrow-left-circle::before { content: "\f106"; } .zulip-icon.zulip-icon-arrow-left::before { content: "\f107"; } .zulip-icon.zulip-icon-at-sign::before { content: "\f108"; } .zulip-icon.zulip-icon-atlassian::before { content: "\f109"; } .zulip-icon.zulip-icon-attachment::before { content: "\f10a"; } .zulip-icon.zulip-icon-bar-chart::before { content: "\f10b"; } .zulip-icon.zulip-icon-behance::before { content: "\f10c"; } .zulip-icon.zulip-icon-bitbucket::before { content: "\f10d"; } .zulip-icon.zulip-icon-bluesky::before { content: "\f10e"; } .zulip-icon.zulip-icon-bold::before { content: "\f10f"; } .zulip-icon.zulip-icon-bot::before { content: "\f110"; } .zulip-icon.zulip-icon-browse-channels::before { content: "\f111"; } .zulip-icon.zulip-icon-building::before { content: "\f112"; } .zulip-icon.zulip-icon-calendar-clock::before { content: "\f113"; } .zulip-icon.zulip-icon-calendar-days::before { content: "\f114"; } .zulip-icon.zulip-icon-calendar::before { content: "\f115"; } .zulip-icon.zulip-icon-check-x::before { content: "\f116"; } .zulip-icon.zulip-icon-check::before { content: "\f117"; } .zulip-icon.zulip-icon-chevron-down::before { content: "\f118"; } .zulip-icon.zulip-icon-chevron-left::before { content: "\f119"; } .zulip-icon.zulip-icon-chevron-right::before { content: "\f11a"; } .zulip-icon.zulip-icon-circle-x::before { content: "\f11b"; } .zulip-icon.zulip-icon-clock::before { content: "\f11c"; } .zulip-icon.zulip-icon-close-small::before { content: "\f11d"; } .zulip-icon.zulip-icon-close::before { content: "\f11e"; } .zulip-icon.zulip-icon-code::before { content: "\f11f"; } .zulip-icon.zulip-icon-codeberg::before { content: "\f120"; } .zulip-icon.zulip-icon-collapse-diagonal::before { content: "\f121"; } .zulip-icon.zulip-icon-collapse::before { content: "\f122"; } .zulip-icon.zulip-icon-compose-edit::before { content: "\f123"; } .zulip-icon.zulip-icon-compose-scroll-left::before { content: "\f124"; } .zulip-icon.zulip-icon-compose-scroll-right::before { content: "\f125"; } .zulip-icon.zulip-icon-copy::before { content: "\f126"; } .zulip-icon.zulip-icon-corner-down-right::before { content: "\f127"; } .zulip-icon.zulip-icon-credit-card::before { content: "\f128"; } .zulip-icon.zulip-icon-deactivated-circle::before { content: "\f129"; } .zulip-icon.zulip-icon-discord::before { content: "\f12a"; } .zulip-icon.zulip-icon-dm-groups-3::before { content: "\f12b"; } .zulip-icon.zulip-icon-download::before { content: "\f12c"; } .zulip-icon.zulip-icon-drafts::before { content: "\f12d"; } .zulip-icon.zulip-icon-dribbble::before { content: "\f12e"; } .zulip-icon.zulip-icon-edit::before { content: "\f12f"; } .zulip-icon.zulip-icon-equal::before { content: "\f130"; } .zulip-icon.zulip-icon-exclamation-circle::before { content: "\f131"; } .zulip-icon.zulip-icon-expand-both-diagonals::before { content: "\f132"; } .zulip-icon.zulip-icon-expand-diagonal::before { content: "\f133"; } .zulip-icon.zulip-icon-expand::before { content: "\f134"; } .zulip-icon.zulip-icon-external-link::before { content: "\f135"; } .zulip-icon.zulip-icon-eye::before { content: "\f136"; } .zulip-icon.zulip-icon-f-globe::before { content: "\f137"; } .zulip-icon.zulip-icon-facebook::before { content: "\f138"; } .zulip-icon.zulip-icon-file-check::before { content: "\f139"; } .zulip-icon.zulip-icon-file-text::before { content: "\f13a"; } .zulip-icon.zulip-icon-flag::before { content: "\f13b"; } .zulip-icon.zulip-icon-folder-chevron::before { content: "\f13c"; } .zulip-icon.zulip-icon-folder-cog::before { content: "\f13d"; } .zulip-icon.zulip-icon-folder-search::before { content: "\f13e"; } .zulip-icon.zulip-icon-folder::before { content: "\f13f"; } .zulip-icon.zulip-icon-follow::before { content: "\f140"; } .zulip-icon.zulip-icon-forward-message::before { content: "\f141"; } .zulip-icon.zulip-icon-gear::before { content: "\f142"; } .zulip-icon.zulip-icon-gif::before { content: "\f143"; } .zulip-icon.zulip-icon-git-pull-request::before { content: "\f144"; } .zulip-icon.zulip-icon-github::before { content: "\f145"; } .zulip-icon.zulip-icon-gitlab::before { content: "\f146"; } .zulip-icon.zulip-icon-globe::before { content: "\f147"; } .zulip-icon.zulip-icon-grip-vertical::before { content: "\f148"; } .zulip-icon.zulip-icon-handshake::before { content: "\f149"; } .zulip-icon.zulip-icon-hash::before { content: "\f14a"; } .zulip-icon.zulip-icon-hashtag::before { content: "\f14b"; } .zulip-icon.zulip-icon-heading-triangle-right::before { content: "\f14c"; } .zulip-icon.zulip-icon-heart::before { content: "\f14d"; } .zulip-icon.zulip-icon-help-bigger::before { content: "\f14e"; } .zulip-icon.zulip-icon-help::before { content: "\f14f"; } .zulip-icon.zulip-icon-hide::before { content: "\f150"; } .zulip-icon.zulip-icon-house::before { content: "\f151"; } .zulip-icon.zulip-icon-id-card::before { content: "\f152"; } .zulip-icon.zulip-icon-inbound-link::before { content: "\f153"; } .zulip-icon.zulip-icon-inbox::before { content: "\f154"; } .zulip-icon.zulip-icon-info::before { content: "\f155"; } .zulip-icon.zulip-icon-inherit::before { content: "\f156"; } .zulip-icon.zulip-icon-instagram::before { content: "\f157"; } .zulip-icon.zulip-icon-internal-link::before { content: "\f158"; } .zulip-icon.zulip-icon-italic::before { content: "\f159"; } .zulip-icon.zulip-icon-keyboard::before { content: "\f15a"; } .zulip-icon.zulip-icon-life-buoy::before { content: "\f15b"; } .zulip-icon.zulip-icon-lightbulb::before { content: "\f15c"; } .zulip-icon.zulip-icon-line-height-big::before { content: "\f15d"; } .zulip-icon.zulip-icon-link-2::before { content: "\f15e"; } .zulip-icon.zulip-icon-link-alt::before { content: "\f15f"; } .zulip-icon.zulip-icon-link::before { content: "\f160"; } .zulip-icon.zulip-icon-linkedin::before { content: "\f161"; } .zulip-icon.zulip-icon-loader-circle::before { content: "\f162"; } .zulip-icon.zulip-icon-lock::before { content: "\f163"; } .zulip-icon.zulip-icon-log-in-navbar::before { content: "\f164"; } .zulip-icon.zulip-icon-log-in::before { content: "\f165"; } .zulip-icon.zulip-icon-log-out::before { content: "\f166"; } .zulip-icon.zulip-icon-mac-command::before { content: "\f167"; } .zulip-icon.zulip-icon-manage-search::before { content: "\f168"; } .zulip-icon.zulip-icon-mark-as-read::before { content: "\f169"; } .zulip-icon.zulip-icon-mark-as-unread::before { content: "\f16a"; } .zulip-icon.zulip-icon-masked-unread::before { content: "\f16b"; } .zulip-icon.zulip-icon-mastodon::before { content: "\f16c"; } .zulip-icon.zulip-icon-math::before { content: "\f16d"; } .zulip-icon.zulip-icon-maximize-diagonal::before { content: "\f16e"; } .zulip-icon.zulip-icon-medium::before { content: "\f16f"; } .zulip-icon.zulip-icon-message-square-text::before { content: "\f170"; } .zulip-icon.zulip-icon-message-square::before { content: "\f171"; } .zulip-icon.zulip-icon-minus::before { content: "\f172"; } .zulip-icon.zulip-icon-mobile-arrow-left-right::before { content: "\f173"; } .zulip-icon.zulip-icon-mobile-camera::before { content: "\f174"; } .zulip-icon.zulip-icon-mobile-image::before { content: "\f175"; } .zulip-icon.zulip-icon-mobile-menu::before { content: "\f176"; } .zulip-icon.zulip-icon-monitor::before { content: "\f177"; } .zulip-icon.zulip-icon-moon::before { content: "\f178"; } .zulip-icon.zulip-icon-more-vertical-spread::before { content: "\f179"; } .zulip-icon.zulip-icon-more-vertical::before { content: "\f17a"; } .zulip-icon.zulip-icon-move-alt::before { content: "\f17b"; } .zulip-icon.zulip-icon-mute::before { content: "\f17c"; } .zulip-icon.zulip-icon-ordered-list::before { content: "\f17d"; } .zulip-icon.zulip-icon-panel-left-dashed::before { content: "\f17e"; } .zulip-icon.zulip-icon-panel-left::before { content: "\f17f"; } .zulip-icon.zulip-icon-past-time::before { content: "\f180"; } .zulip-icon.zulip-icon-pencil::before { content: "\f181"; } .zulip-icon.zulip-icon-pin::before { content: "\f182"; } .zulip-icon.zulip-icon-pinterest::before { content: "\f183"; } .zulip-icon.zulip-icon-pipette::before { content: "\f184"; } .zulip-icon.zulip-icon-placeholder::before { content: "\f185"; } .zulip-icon.zulip-icon-play-circle::before { content: "\f186"; } .zulip-icon.zulip-icon-plus::before { content: "\f187"; } .zulip-icon.zulip-icon-poll::before { content: "\f188"; } .zulip-icon.zulip-icon-preview::before { content: "\f189"; } .zulip-icon.zulip-icon-question::before { content: "\f18a"; } .zulip-icon.zulip-icon-quote-and-reply::before { content: "\f18b"; } .zulip-icon.zulip-icon-quote-message::before { content: "\f18c"; } .zulip-icon.zulip-icon-quote::before { content: "\f18d"; } .zulip-icon.zulip-icon-readreceipts::before { content: "\f18e"; } .zulip-icon.zulip-icon-recent::before { content: "\f18f"; } .zulip-icon.zulip-icon-reddit::before { content: "\f190"; } .zulip-icon.zulip-icon-refresh-cw::before { content: "\f191"; } .zulip-icon.zulip-icon-rename::before { content: "\f192"; } .zulip-icon.zulip-icon-reply::before { content: "\f193"; } .zulip-icon.zulip-icon-reset::before { content: "\f194"; } .zulip-icon.zulip-icon-rocket::before { content: "\f195"; } .zulip-icon.zulip-icon-search-inbox::before { content: "\f196"; } .zulip-icon.zulip-icon-search::before { content: "\f197"; } .zulip-icon.zulip-icon-send-dm::before { content: "\f198"; } .zulip-icon.zulip-icon-send::before { content: "\f199"; } .zulip-icon.zulip-icon-show::before { content: "\f19a"; } .zulip-icon.zulip-icon-smart-toy::before { content: "\f19b"; } .zulip-icon.zulip-icon-smile-bigger::before { content: "\f19c"; } .zulip-icon.zulip-icon-smile-smaller::before { content: "\f19d"; } .zulip-icon.zulip-icon-smile::before { content: "\f19e"; } .zulip-icon.zulip-icon-snapchat::before { content: "\f19f"; } .zulip-icon.zulip-icon-sort-arrow-down::before { content: "\f1a0"; } .zulip-icon.zulip-icon-source::before { content: "\f1a1"; } .zulip-icon.zulip-icon-spoiler::before { content: "\f1a2"; } .zulip-icon.zulip-icon-square-plus::before { content: "\f1a3"; } .zulip-icon.zulip-icon-star-filled::before { content: "\f1a4"; } .zulip-icon.zulip-icon-star::before { content: "\f1a5"; } .zulip-icon.zulip-icon-stop-circle::before { content: "\f1a6"; } .zulip-icon.zulip-icon-strikethrough::before { content: "\f1a7"; } .zulip-icon.zulip-icon-subscriber-check::before { content: "\f1a8"; } .zulip-icon.zulip-icon-subscriber-plus::before { content: "\f1a9"; } .zulip-icon.zulip-icon-sun::before { content: "\f1aa"; } .zulip-icon.zulip-icon-threads::before { content: "\f1ab"; } .zulip-icon.zulip-icon-tiktok::before { content: "\f1ac"; } .zulip-icon.zulip-icon-time::before { content: "\f1ad"; } .zulip-icon.zulip-icon-todo-list::before { content: "\f1ae"; } .zulip-icon.zulip-icon-tool::before { content: "\f1af"; } .zulip-icon.zulip-icon-topic-list::before { content: "\f1b0"; } .zulip-icon.zulip-icon-topic::before { content: "\f1b1"; } .zulip-icon.zulip-icon-trash::before { content: "\f1b2"; } .zulip-icon.zulip-icon-triple-users::before { content: "\f1b3"; } .zulip-icon.zulip-icon-twitch::before { content: "\f1b4"; } .zulip-icon.zulip-icon-type-big::before { content: "\f1b5"; } .zulip-icon.zulip-icon-unarchive::before { content: "\f1b6"; } .zulip-icon.zulip-icon-unmute::before { content: "\f1b7"; } .zulip-icon.zulip-icon-unordered-list::before { content: "\f1b8"; } .zulip-icon.zulip-icon-unpin::before { content: "\f1b9"; } .zulip-icon.zulip-icon-unread::before { content: "\f1ba"; } .zulip-icon.zulip-icon-user-circle-active::before { content: "\f1bb"; } .zulip-icon.zulip-icon-user-circle-deactivated::before { content: "\f1bc"; } .zulip-icon.zulip-icon-user-circle-idle::before { content: "\f1bd"; } .zulip-icon.zulip-icon-user-circle-offline::before { content: "\f1be"; } .zulip-icon.zulip-icon-user-cog::before { content: "\f1bf"; } .zulip-icon.zulip-icon-user-group-cog::before { content: "\f1c0"; } .zulip-icon.zulip-icon-user-group-edit::before { content: "\f1c1"; } .zulip-icon.zulip-icon-user-group-plus::before { content: "\f1c2"; } .zulip-icon.zulip-icon-user-group-x::before { content: "\f1c3"; } .zulip-icon.zulip-icon-user-group::before { content: "\f1c4"; } .zulip-icon.zulip-icon-user-list::before { content: "\f1c5"; } .zulip-icon.zulip-icon-user-plus::before { content: "\f1c6"; } .zulip-icon.zulip-icon-user-x::before { content: "\f1c7"; } .zulip-icon.zulip-icon-user::before { content: "\f1c8"; } .zulip-icon.zulip-icon-users::before { content: "\f1c9"; } .zulip-icon.zulip-icon-video-call::before { content: "\f1ca"; } .zulip-icon.zulip-icon-voice-call::before { content: "\f1cb"; } .zulip-icon.zulip-icon-x-circle::before { content: "\f1cc"; } .zulip-icon.zulip-icon-x::before { content: "\f1cd"; } .zulip-icon.zulip-icon-youtube::before { content: "\f1ce"; } /*!*********************************************************************************************************************************************************************************************************************************************************************************************************************!*\ !*** css ../node_modules/.pnpm/css-loader@7.1.4_webpack@5.106.2/node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[5].use[1]!../node_modules/.pnpm/postcss-loader@8.2.1_postcss@8.5.10_typescript@6.0.2_webpack@5.106.2/node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[5].use[2]!./styles/alerts.css ***! \*********************************************************************************************************************************************************************************************************************************************************************************************************************/ :root { --color-alert-red: hsl(16deg 60% 45%); --color-alert-error-red: hsl(0deg 80% 40%); } .alert-display { display: none; } .alert-display.show { display: block; } /* TODO: Remove these animations in favour of those in web/styles/banners.css, once all the alert popups have been converted to use the new banner component. */ .alert-animations.show { animation-name: fadeIn; animation-duration: 0.3s; animation-fill-mode: forwards; } .alert-animations.fade-out { animation-name: fadeOut; animation-duration: 0.3s; animation-fill-mode: forwards; } .alert-animations .faded { opacity: 0.7; } .home-error-bar { display: none; } /* alert box component changes */ #alert-popup-container { /* Ensure alert box remains in viewport, regardless of scroll position in message list. */ position: fixed; /* Offset to account for the top padding + 5px from the top. */ top: calc(5px + (-1 * var(--popup-banner-translate-y-distance))); left: 50%; transform: translateX(-50%); width: 100%; max-width: 900px; z-index: 220; max-height: 100%; overflow-y: auto; overscroll-behavior: contain; /* Set top padding to account for the translate-y motion of the animation to prevent the vertical scroll bar from appearing. */ padding-top: var(--popup-banner-translate-y-distance); } @media (width < 992px) { #alert-popup-container { max-width: 90%; } } .alert-box { display: flex; /* Using column-reverse flex direction enables a stack-like behavior where the most recent alert is always on top. */ flex-direction: column-reverse; justify-content: center; gap: 5px; } .alert-box .alert.show { animation-name: fadeIn; animation-duration: 0.3s; animation-fill-mode: forwards; } .alert-box .alert.fade-out { animation-name: fadeOut; animation-duration: 0.3s; animation-fill-mode: forwards; } .alert-box .alert .faded { opacity: 0.7; } .alert-box .alert { box-sizing: border-box; width: 100%; border-radius: 4px; background-color: hsl(0deg 0% 100%); position: relative; /* gives room for the error icon and the exit button. */ padding: 10px 50px; text-shadow: none; color: var(--color-alert-red); border: 1px solid var(--color-alert-red); box-shadow: 0 0 2px var(--color-alert-red); } .alert-box .alert::before { float: left; margin-left: -38px; font-family: FontAwesome; font-size: 1.3em; line-height: 1; overflow: hidden; content: "\f071"; color: hsl(16deg 60% 55%); } .alert-box .alert::after { clear: both; content: ""; display: table; } .alert-box .alert.alert-error { color: var(--color-alert-error-red); border: 1px solid var(--color-alert-error-red); box-shadow: 0 0 2px var(--color-alert-error-red); } .alert-box .alert.alert-error::before { color: var(--color-alert-error-red); } .alert-box .alert .exit { float: right; margin: -10px -50px -10px 0; padding: 13px 10px; font-size: 2.5em; font-weight: 300; line-height: 1ex; overflow: hidden; cursor: pointer; } .alert-box .alert .exit::after { content: "\d7"; } /* animation section */ @keyframes fadeIn { 0% { opacity: 0; transform: translateY( calc(-1 * var(--popup-banner-translate-y-distance)) ); } 100% { opacity: 1; transform: translateY(0); } } @keyframes fadeOut { 0% { opacity: 1; transform: translateY(0); } 100% { opacity: 0; transform: translateY( calc(-1 * var(--popup-banner-translate-y-distance)) ); } } .update-read-flags-for-narrow-banner .banner-close-button { /* Disable pointer events to prevent user interaction, since this button is repurposed as a loading indicator. */ pointer-events: none; } /*!***********************************************************************************************************************************************************************************************************************************************************************************************************************!*\ !*** css ../node_modules/.pnpm/css-loader@7.1.4_webpack@5.106.2/node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[5].use[1]!../node_modules/.pnpm/postcss-loader@8.2.1_postcss@8.5.10_typescript@6.0.2_webpack@5.106.2/node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[5].use[2]!./styles/blueslip.css ***! \***********************************************************************************************************************************************************************************************************************************************************************************************************************/ .blueslip-display { display: none; } .blueslip-display.show { display: block; } .blueslip-animations.show { animation-name: fadeIn; animation-duration: 0.3s; animation-fill-mode: forwards; } .blueslip-animations.fade-out { animation-name: fadeOut; animation-duration: 0.3s; animation-fill-mode: forwards; } .blueslip-error-container { /* We define this variable here since this is shared with portico. */ --blueslip-overlay-translate-y-distance: 100px; position: fixed; /* Offset to account for the top padding + 5px from the top. */ top: calc(5px + (-1 * var(--blueslip-overlay-translate-y-distance))); left: 50%; transform: translateX(-50%); width: 100%; max-width: min(calc(100% - 20px), 1100px); z-index: 230; /* Subtract 5px to account for the bottom margin and another 5px to account for the top. */ max-height: calc(100vh - 10px); overflow-y: auto; overscroll-behavior: contain; /* Set top padding to account for the translate-y motion of the animation to prevent the vertical scroll bar from appearing. */ padding-top: var(--blueslip-overlay-translate-y-distance); display: flex; /* Using column-reverse flex direction enables a stack-like behavior where the most recent error is always on top. */ flex-direction: column-reverse; gap: 5px; } .stacktrace { display: none; } .stacktrace.show { display: block; } .stacktrace.show { animation-name: fadeIn; animation-duration: 0.3s; animation-fill-mode: forwards; } .stacktrace.fade-out { animation-name: fadeOut; animation-duration: 0.3s; animation-fill-mode: forwards; } .stacktrace { box-sizing: border-box; width: 100%; pointer-events: auto; font-size: 1rem; color: hsl(0deg 80% 40%); padding: 1rem 0; background-color: hsl(0deg 100% 98%); border-radius: 4px; border: 1px solid hsl(0deg 80% 40%); box-shadow: 0 0 2px hsl(0deg 80% 40%); } .stacktrace .stacktrace-header { display: flex; justify-content: space-between; align-items: center; } .stacktrace .stacktrace-header .message { flex: 1 1 auto; } .stacktrace .stacktrace-header .warning-symbol,.stacktrace .stacktrace-header .exit { flex: 0 0 auto; font-size: 1.3rem; padding: 0 1rem; } .stacktrace .stacktrace-header .exit::after { cursor: pointer; font-size: 2.3rem; content: "\d7"; line-height: 0.5; } .stacktrace .stacktrace-more-info { font-size: 0.85rem; white-space: pre; font-family: "Source Code Pro", monospace; margin-left: 3.3rem; margin-bottom: 0.5rem; padding: 0.5rem; background-color: hsl(0deg 7% 98%); } .stacktrace .stacktrace-content { font-family: "Source Code Pro", monospace; font-size: 0.85rem; margin-bottom: 0.5rem; } .stacktrace .stacktrace-content .stackframe { overflow-wrap: break-word; padding-left: calc(3.3rem - 14px); padding-right: 1rem; } .stacktrace .expand { cursor: pointer; color: hsl(0deg 32% 83%); } .stacktrace .expand:hover { color: hsl(0deg 0% 20%); } .stacktrace .subtle { color: hsl(0deg 7% 45%); } .stacktrace .code-context { color: hsl(0deg 7% 15%); background-color: hsl(0deg 7% 98%); box-shadow: inset 0 11px 10px -10px hsl(0deg 7% 70%), inset 0 -11px 10px -10px hsl(0deg 7% 70%); margin-top: 1em; margin-bottom: 1em; } .stacktrace .code-context .code-context-content { padding: 1rem 0; white-space: pre; overflow-x: auto; } .stacktrace .code-context .line-number { width: 3rem; display: inline-block; text-align: right; color: hsl(0deg 7% 35%); } .stacktrace .code-context .focus-line { background-color: hsl(0deg 7% 90%); width: 100%; } /*!********************************************************************************************************************************************************************************************************************************************************************************************************************!*\ !*** css ../node_modules/.pnpm/css-loader@7.1.4_webpack@5.106.2/node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[5].use[1]!../node_modules/.pnpm/postcss-loader@8.2.1_postcss@8.5.10_typescript@6.0.2_webpack@5.106.2/node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[5].use[2]!./styles/modal.css ***! \********************************************************************************************************************************************************************************************************************************************************************************************************************/ /* Styles for the Micromodal-based modals */ :root { /* Exit buttons are sometimes Cancel, but sometimes other "Nah, forget it" actions. */ --color-exit-button-text: hsl(0deg 0% 0%); --color-exit-button-border: hsl(300deg 2% 11% / 30%); --color-exit-button-background: hsl(226deg 1% 42% / 20%); --color-exit-button-background-interactive: hsl(226deg 1% 42% / 27%); /* Since modals are also present in portico and billing pages, we define the modal related variables directly here in the modal.css — which is a part of the common.ts bundle shared between portico and main app. */ --color-background-modal-overlay: color-mix( in oklch, hsl(0deg 0% 0%) 25%, transparent ); --csstools-light-dark-toggle--0: var(--csstools-color-scheme--light) color-mix(in oklch, hsl(0deg 0% 100%) 85%, transparent); --color-modal-heading-text: var(--csstools-light-dark-toggle--0, hsl(0deg 0% 15%)); --csstools-light-dark-toggle--1: var(--csstools-color-scheme--light) hsl(0deg 0% 14%); --color-background-modal: var(--csstools-light-dark-toggle--1, hsl(0deg 0% 93%)); --csstools-light-dark-toggle--2: var(--csstools-color-scheme--light) hsl(0deg 0% 20%); --color-background-modal-bar: var(--csstools-light-dark-toggle--2, hsl(0deg 0% 96%)); --csstools-light-dark-toggle--3: var(--csstools-color-scheme--light) color-mix(in oklch, hsl(0deg 0% 100%) 15%, transparent); --color-border-modal: var(--csstools-light-dark-toggle--3, hsl(0deg 0% 55%)); --csstools-light-dark-toggle--4: var(--csstools-color-scheme--light) color-mix(in oklch, hsl(0deg 0% 100%) 12%, transparent); --color-border-modal-bar: var(--csstools-light-dark-toggle--4, hsl(0deg 0% 76%)); } @supports (color: color-mix(in lch, red, blue)) and (color: hsl(0 0% 0% / 0)) and (color: light-dark(red, red)) { :root { --color-modal-heading-text: light-dark( hsl(0deg 0% 15%), color-mix(in oklch, hsl(0deg 0% 100%) 85%, transparent) ); } } @supports (color: hsl(0 0% 0% / 0)) and (color: light-dark(red, red)) { :root { --color-background-modal: light-dark(hsl(0deg 0% 93%), hsl(0deg 0% 14%)); --color-background-modal-bar: light-dark( hsl(0deg 0% 96%), hsl(0deg 0% 20%) ); } } @supports (color: color-mix(in lch, red, blue)) and (color: hsl(0 0% 0% / 0)) and (color: light-dark(red, red)) { :root { --color-border-modal: light-dark( hsl(0deg 0% 55%), color-mix(in oklch, hsl(0deg 0% 100%) 15%, transparent) ); --color-border-modal-bar: light-dark( hsl(0deg 0% 76%), color-mix(in oklch, hsl(0deg 0% 100%) 12%, transparent) ); } } @supports not (color: light-dark(tan, tan)) { :root * { --csstools-light-dark-toggle--0: var(--csstools-color-scheme--light) color-mix(in oklch, hsl(0deg 0% 100%) 85%, transparent); --color-modal-heading-text: var(--csstools-light-dark-toggle--0, hsl(0deg 0% 15%)); --csstools-light-dark-toggle--1: var(--csstools-color-scheme--light) hsl(0deg 0% 14%); --color-background-modal: var(--csstools-light-dark-toggle--1, hsl(0deg 0% 93%)); --csstools-light-dark-toggle--2: var(--csstools-color-scheme--light) hsl(0deg 0% 20%); --color-background-modal-bar: var(--csstools-light-dark-toggle--2, hsl(0deg 0% 96%)); --csstools-light-dark-toggle--3: var(--csstools-color-scheme--light) color-mix(in oklch, hsl(0deg 0% 100%) 15%, transparent); --color-border-modal: var(--csstools-light-dark-toggle--3, hsl(0deg 0% 55%)); --csstools-light-dark-toggle--4: var(--csstools-color-scheme--light) color-mix(in oklch, hsl(0deg 0% 100%) 12%, transparent); --color-border-modal-bar: var(--csstools-light-dark-toggle--4, hsl(0deg 0% 76%)); } } .modal__overlay { position: fixed; inset: 0; background: var(--color-background-modal-overlay); display: flex; justify-content: center; align-items: center; z-index: 105; } .modal__container { display: flex; flex-direction: column; background-color: var(--color-background-modal); max-width: calc(100% - 32px); max-height: 96%; width: 37.1428em; /* 520px at 14px em */ overflow: hidden; border: 1px solid var(--color-border-modal); border-radius: 7px; box-sizing: border-box; } .modal__header { display: grid; /* The grid structure uses two grid columns to define the area for the modal close button, with the rightmost column being used for the close button and to also serve as the right padding and the column to its left accounts for the space of modal close button icon width - right padding. */ grid-template: ". modal-header-content modal-close-button modal-close-button" 2.75em /* 44px at 16px/1em */ ". modal-header-content . ." minmax(0, auto) ". modal-tab-switcher modal-tab-switcher ." minmax(0, auto) / 1em minmax(0, 1fr) minmax(0, auto) 1em; /* 16px at 16px/1em */ background-color: var(--color-background-modal-bar); } .modal__header:has( + .modal__content) { border-bottom: 1px solid var(--color-border-modal-bar); } .modal__header-content { grid-area: modal-header-content; /* 10px at 16px/1em */ padding: 0.625em 0; } .modal__footer { display: flex; justify-content: flex-end; align-items: center; /* 8px 16px 12px 16px at 16px/1em */ padding: 0.5em 1em 0.75em; background-color: var(--color-background-modal-bar); } .modal__content + .modal__footer { /* These styles apply only when the modal content is present in the modal. */ padding: 0.75em 1em; /* 12px 16px at 16px/1em */ border-top: 1px solid var(--color-border-modal-bar); } .modal__title { margin: 0; /* 20px at 16px/1em */ font-size: 1.25em; font-weight: 650; line-height: 1.2; /* 24px at 20px/1em */ overflow: hidden; overflow-wrap: break-word; color: var(--color-modal-heading-text); } .modal__title .icon-button { /* 16px icon + 4px padding = 24px icon button, which matches with the line height of the modal title. */ padding: 0.25em; /* 4px at 16px/1em */ } /* help_link_widget margin for the fa-circle-o. */ .modal__title .help_link_widget { margin-left: 5px; } .modal__title:has(.stream-or-topic-reference) { /* Reduce the font weight of headings that include stream or topic references (e.g., topic move/rename modals). */ font-weight: 450; } .modal__title:has(.stream-or-topic-reference) .stream-or-topic-reference { /* Make the stream or topic references more prominent. */ font-weight: 600; } .modal__subtitle { margin-top: 0.875em; /* 14px at 16px/1em */ line-height: 1.25; /* 20px at 16px/1em */ } .modal__close { grid-area: modal-close-button; align-self: center; } .modal__close:focus-visible { outline-offset: -2px !important; } .modal__content { display: flex; flex-direction: column; /* 14px 16px at 16px/1em */ padding: 0.875em 1em; /* Prevent the appearance of a horizontal native scrollbar at certain info-density/zoom levels. */ overflow: hidden auto; /* Set a max-width, less the 1em of left and right padding specified above. */ max-width: calc(100% - 2em); } .modal__content > .simplebar-wrapper { /* Compensate the 3em reduced in modal_content so it positions itself correctly */ max-width: calc(100% + 3em); } #api_key_value { font-family: "Source Code Pro", monospace; font-size: 1em; } .modal__button { /* We need the backup value for billing related html files where this variable is not defined. */ font-size: var(--base-font-size-px, 14px); font-family: inherit; padding: 8px 16px; background-color: hsl(0deg 0% 90%); border-radius: 4px; border-width: 0; cursor: pointer; text-transform: none; overflow: visible; line-height: 1.15; margin: 0; will-change: transform; backface-visibility: hidden; transform: translateZ(0); transition: transform 0.25s ease-out; } .modal__button:hover { -webkit-text-decoration: none; text-decoration: none; } .modal__button:disabled { cursor: not-allowed; opacity: 0.5; } .modal__button:focus, .modal__button:hover { transform: scale(1.05); /* The extremely subtle 1.05 scale can cause a gap to appear between the outline and button background color; this negative offset preserves the scale effect, but also covers any tiny gaps owing to subtle scaling. */ outline-offset: -1px; } .dialog_exit_button { color: var(--color-exit-button-text); background: var(--color-exit-button-background); border: 1px solid var(--color-exit-button-border); } .dialog_exit_button:hover { background: var(--color-exit-button-background-interactive); } .dialog_submit_button { margin-left: 12px; background-color: hsl(240deg 96% 68%); color: hsl(0deg 0% 100%) !important; } .modal__tab-switcher-container { grid-area: modal-tab-switcher; font-weight: initial; padding-bottom: 0.5em; /* 8px at 16px/1em */ } /* Modal-specific CSS belongs below this point. */ #user-profile-modal .modal__container { height: var(--user-profile-modal-height); } #user-profile-modal .name { color: var(--color-user-profile-field-name); font-weight: 600; margin-right: 10px; overflow-wrap: break-word; } #user-profile-modal .value { vertical-align: top; overflow-wrap: anywhere; } #user-profile-modal #exit-sign { /* 24px at 14px/1em */ font-size: 1.7143em; line-height: 1; } #user-profile-modal .tabcontent { margin: 1px 5px 0; } #user-profile-modal #profile-tab li.custom_user_field { display: block; } #user-profile-modal .top { display: flex; justify-content: space-between; } @media (width < 425px) { #user-profile-modal .top { flex-direction: column-reverse; } } #user-profile-modal #avatar { display: inline-block; height: 180px; width: 180px; background-size: cover; background-position: center; border-radius: 5px; box-shadow: 0 0 0 1px hsl(0deg 0% 0% / 20%); } #user-profile-modal #avatar.guest-avatar::after { outline: 9px solid hsl(0deg 0% 100%); } #user-profile-modal .user-profile-header-actions { display: flex; gap: 5px; } #user-profile-modal .deactivated-user-icon { vertical-align: middle; font-size: 0.7em; } #user-profile-modal #default-section { vertical-align: top; } #user-profile-modal #default-section .default-field { margin-bottom: 10px; } #user-profile-modal hr { border: 1px solid hsl(0deg 0% 93%); margin: 5px 0; } #user-profile-modal #content .field-section { margin-bottom: 10px; } #user-profile-modal #content .field-section[data-type="2"] .value { overflow-wrap: break-word; } #user-profile-modal #content .rendered_markdown p { margin: 0; } #user-profile-modal .col-left { padding: 0 10px 0 0; } #user-profile-modal .col-right { width: fit-content; } #user-profile-modal .tab-data .active { display: block; } #user-profile-modal .tab-data { margin-bottom: var(--user-profile-modal-body-margin-bottom); } #user-profile-modal.prevent-user-modal-content-scrolling .modal__content { flex-grow: 1; } #user-profile-modal.prevent-user-modal-content-scrolling .modal__content .simplebar-content { height: 100%; box-sizing: border-box; } #user-profile-modal.prevent-user-modal-content-scrolling .tab-data { height: calc(100% - var(--user-profile-modal-body-margin-bottom)); } #user-profile-modal.prevent-user-modal-content-scrolling .tabcontent { height: 100%; } #user-profile-modal .group-tab-element-header,#user-profile-modal .stream-tab-element-header { margin: 0; display: inline-block; font-weight: 600; /* 18px at 16px/1em */ font-size: 1.125em; } #user-profile-modal #user-profile-groups-tab,#user-profile-modal #user-profile-streams-tab { display: grid; grid-template: "alert" auto "top" minmax(0, 1fr) "bottom" auto / minmax(0, 1fr); } #user-profile-modal #user-profile-groups-tab .stream_list_info:has(.banner) { grid-area: alert; margin-bottom: 8px; } #user-profile-modal #user-profile-streams-tab .stream_list_info:has(.banner) { grid-area: alert; margin-bottom: 8px; } #user-profile-modal #user-profile-groups-tab .user-profile-group-list-alert:has(.banner) { grid-area: alert; margin-bottom: 8px; } #user-profile-modal #user-profile-streams-tab .user-profile-group-list-alert:has(.banner) { grid-area: alert; margin-bottom: 8px; } #user-profile-modal #user-profile-groups-tab .stream-list-loader:not(:empty) { margin: auto; /* center the spinner */ } #user-profile-modal #user-profile-streams-tab .stream-list-loader:not(:empty) { margin: auto; /* center the spinner */ } #user-profile-modal #user-profile-groups-tab .stream-list-loader:not(:empty) .loading_indicator_spinner { margin-top: 10px; } #user-profile-modal #user-profile-streams-tab .stream-list-loader:not(:empty) .loading_indicator_spinner { margin-top: 10px; } #user-profile-modal #user-profile-groups-tab .error-message:not(:empty) { color: var(--color-alert-error-red); text-align: center; margin-top: 20px; } #user-profile-modal #user-profile-streams-tab .error-message:not(:empty) { color: var(--color-alert-error-red); text-align: center; margin-top: 20px; } #user-profile-modal #user-profile-groups-tab .stream-list-bottom-section,#user-profile-modal #user-profile-streams-tab .stream-list-bottom-section,#user-profile-modal #user-profile-groups-tab .group-list-bottom-section,#user-profile-modal #user-profile-streams-tab .group-list-bottom-section { grid-area: bottom; } #user-profile-modal #user-profile-groups-tab .user_profile_subscribe_widget,#user-profile-modal #user-profile-streams-tab .user_profile_subscribe_widget { display: flex; justify-content: space-between; align-items: baseline; padding-top: 2px; gap: 10px; } #user-profile-modal #user-profile-groups-tab .dropdown_widget_value,#user-profile-modal #user-profile-streams-tab .dropdown_widget_value { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #user-profile-modal .group-list-top-section,#user-profile-modal .stream-list-top-section { grid-area: top; margin-top: 0.3125em; margin-bottom: 0.75em; } @media (width < 768px) { #user-profile-modal .group-list-top-section,#user-profile-modal .stream-list-top-section { display: block; } #user-profile-modal .group-list-top-section .header-section,#user-profile-modal .stream-list-top-section .header-section { width: 100%; } } #user-profile-modal .manage-profile-tab-footer:not(.manage-profile-tab-active) { display: none; } .folder-channels-list-header { margin: 0; font-weight: 600; font-size: 1.125em; /* 18px at 16px em */ } #user-profile-modal .group-list-container, #user-profile-modal .stream-list-container { height: calc(100% - var(--header-line-height)); } #edit_channel_folder .stream-list-container { height: 30vh; } #edit_channel_folder .add_channel_folder_widget { display: flex; justify-content: space-between; margin-bottom: 10px; gap: 10px; } #edit_channel_folder .add_channel_folder_widget .dropdown-widget-button { max-width: 100%; width: var(--modal-input-width); } #edit_channel_folder .add_channel_folder_widget .dropdown-widget-button .dropdown_widget_value { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #channel_folder_banner:has(.banner) { margin-bottom: 10px; } #user-profile-modal .group-list-container, #user-profile-modal .stream-list-container, #edit_channel_folder .stream-list-container { border-radius: 4px; background-color: var(--background-color-user-profile-list-container); border: 1px solid var(--color-border-user-profile-list-container); padding: 0.25em 0.25em 0; margin-bottom: 5px; -webkit-overflow-scrolling: touch; } #user-profile-modal .group-list-container .modal-group-list-row,#user-profile-modal .stream-list-container .modal-group-list-row,#edit_channel_folder .stream-list-container .modal-group-list-row,#user-profile-modal .group-list-container .modal-channel-list-row,#user-profile-modal .stream-list-container .modal-channel-list-row,#edit_channel_folder .stream-list-container .modal-channel-list-row { display: flex; justify-content: space-between; padding-right: 0.625em; align-items: center; -webkit-text-decoration: none; text-decoration: none; border-bottom: none; border-radius: 4px; color: var(--color-dropdown-item); } #user-profile-modal .group-list-container .modal-group-list-row .list-row-content,#user-profile-modal .stream-list-container .modal-group-list-row .list-row-content,#edit_channel_folder .stream-list-container .modal-group-list-row .list-row-content,#user-profile-modal .group-list-container .modal-channel-list-row .list-row-content,#user-profile-modal .stream-list-container .modal-channel-list-row .list-row-content,#edit_channel_folder .stream-list-container .modal-channel-list-row .list-row-content { display: flex; overflow: hidden; border-radius: 4px; padding: 0.3125em 0.5em; cursor: pointer; } #user-profile-modal .group-list-container .modal-group-list-row .list-row-content:focus-visible { outline: 1px solid var(--color-outline-focus); outline-offset: -2px; } #user-profile-modal .stream-list-container .modal-group-list-row .list-row-content:focus-visible { outline: 1px solid var(--color-outline-focus); outline-offset: -2px; } #edit_channel_folder .stream-list-container .modal-group-list-row .list-row-content:focus-visible { outline: 1px solid var(--color-outline-focus); outline-offset: -2px; } #user-profile-modal .group-list-container .modal-channel-list-row .list-row-content:focus-visible { outline: 1px solid var(--color-outline-focus); outline-offset: -2px; } #user-profile-modal .stream-list-container .modal-channel-list-row .list-row-content:focus-visible { outline: 1px solid var(--color-outline-focus); outline-offset: -2px; } #edit_channel_folder .stream-list-container .modal-channel-list-row .list-row-content:focus-visible { outline: 1px solid var(--color-outline-focus); outline-offset: -2px; } #user-profile-modal .group-list-container .modal-group-list-row .stream-privacy,#user-profile-modal .stream-list-container .modal-group-list-row .stream-privacy,#edit_channel_folder .stream-list-container .modal-group-list-row .stream-privacy,#user-profile-modal .group-list-container .modal-channel-list-row .stream-privacy,#user-profile-modal .stream-list-container .modal-channel-list-row .stream-privacy,#edit_channel_folder .stream-list-container .modal-channel-list-row .stream-privacy { display: flex; align-items: center; } #user-profile-modal .group-list-container .modal-group-list-row .filter-icon i,#user-profile-modal .stream-list-container .modal-group-list-row .filter-icon i,#edit_channel_folder .stream-list-container .modal-group-list-row .filter-icon i,#user-profile-modal .group-list-container .modal-channel-list-row .filter-icon i,#user-profile-modal .stream-list-container .modal-channel-list-row .filter-icon i,#edit_channel_folder .stream-list-container .modal-channel-list-row .filter-icon i { padding-right: 3px; } #user-profile-modal .group-list-container .modal-group-list-row .list-item-name,#user-profile-modal .stream-list-container .modal-group-list-row .list-item-name,#edit_channel_folder .stream-list-container .modal-group-list-row .list-item-name,#user-profile-modal .group-list-container .modal-channel-list-row .list-item-name,#user-profile-modal .stream-list-container .modal-channel-list-row .list-item-name,#edit_channel_folder .stream-list-container .modal-channel-list-row .list-item-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #user-profile-modal .group-list-container .modal-list-scroll-container,#user-profile-modal .stream-list-container .modal-list-scroll-container,#edit_channel_folder .stream-list-container .modal-list-scroll-container { /* We set max-height to remaining height of stream-list-container so that we don't clip it. Search field height takes up 2em of total. */ height: calc(100% - 2em); } #user-profile-modal .group-list-container .modal-list-scroll-container .modal-item-list,#user-profile-modal .stream-list-container .modal-list-scroll-container .modal-item-list,#edit_channel_folder .stream-list-container .modal-list-scroll-container .modal-item-list { list-style: none; margin: 0; } .user-profile-name-heading { display: flex; align-items: center; justify-content: center; gap: 10px; /* Padding for icon outlines to occupy the space so that they don't get clipped. */ padding: 0 1px; /* This line-height is to increase the vertical clickable areas on the icons. */ line-height: 1.2727em; /* 28px at 22px font-size at 14px em */ } .user-profile-name-heading .user-profile-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #user-profile-modal .save-success { vertical-align: top; background-color: transparent; border-radius: 4px; margin-right: 10px; color: hsl(156deg 30% 50%); padding: 0.5rem 1rem; line-height: 1.15; } #user-profile-modal .save-success:not(:empty) { border: 1px solid hsl(156deg 30% 50%); } #read_receipts_error, #dialog_error { margin-bottom: 10px; } .modal__header #dialog_error { margin-top: 10px; } #read_receipts_modal .modal__container { width: 25.7142em; /* 360px at 14px em */ } #read_receipts_modal .modal__container .modal__content { /* When showing read receipts, we use simplebar to make the list scrollable. It requires this to be flex. */ display: flex; /* Setting a minimum height prevents the loading indicator appearing/disappearing from resizing the modal in the common case that one is requesting read receipts for direct messages. */ min-height: 120px; /* Setting a maximum height is just for aesthetics; the modal looks weird if its aspect ratio gets too stretched. */ max-height: 480px; /* For the notification bot error, we want to keep the modal clean and small. The 16px padding is intended to match the padding at the top of the modal. */ } #read_receipts_modal .modal__container .modal__content.compact { min-height: unset; padding-bottom: 16px; } #read_receipts_modal .modal__header { padding-bottom: 0; } #read_receipts_modal .loading_indicator { margin: auto; } #read_receipts_modal .read_receipts_list { /* Override legacy bootstrap ul margins. */ margin: 0; } #read_receipts_modal .read_receipts_list li .read_receipts_user_avatar { display: inline-block; height: 1.25em; /* 20px at 16px font-size at 14px em */ width: 1.25em; /* 20px at 16px font-size at 14px em */ position: relative; right: 8px; border-radius: 4px; } #read_receipts_modal .read_receipts_list li { margin: 2px 0; list-style-type: none; overflow-x: hidden; padding-left: 10px; white-space: nowrap; text-overflow: ellipsis; cursor: pointer; line-height: 1.625em; /* 26px at 16px font-size at 14px em */ } #read_receipts_modal .read_receipts_list li:hover { --csstools-light-dark-toggle--5: var(--csstools-color-scheme--light) hsl(0deg 0% 100% / 5%); background-color: var(--csstools-light-dark-toggle--5, hsl(0deg 0% 0% / 5%)); background-color: light-dark( hsl(0deg 0% 0% / 5%), hsl(0deg 0% 100% / 5%) ); } #read_receipts_modal .read_receipts_list li:active { --csstools-light-dark-toggle--6: var(--csstools-color-scheme--light) hsl(0deg 0% 100% / 10%); background-color: var(--csstools-light-dark-toggle--6, hsl(0deg 0% 0% / 10%)); background-color: light-dark( hsl(0deg 0% 0% / 10%), hsl(0deg 0% 100% / 10%) ); outline: none; } #read_receipts_modal .read_receipts_list li:focus { --csstools-light-dark-toggle--7: var(--csstools-color-scheme--light) hsl(0deg 0% 100% / 10%); background-color: var(--csstools-light-dark-toggle--7, hsl(0deg 0% 0% / 10%)); background-color: light-dark( hsl(0deg 0% 0% / 10%), hsl(0deg 0% 100% / 10%) ); outline: none; } .deactivate-actions { margin-top: 0.625em; } .email_field { margin-top: 10px; } .email_field .email_field_textarea { margin-bottom: 10px; } .email_field .border-top { border-top: 1px solid hsl(300deg 2% 11% / 30%); padding-top: 10px; } .email_field .email-body { margin-left: 20px; margin-top: 20px; } @keyframes mmfadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes mmfadeOut { from { opacity: 1; } to { opacity: 0; } } .micromodal { display: none; } .micromodal.modal--opening, .micromodal.modal--open { display: block; } .micromodal[aria-hidden="true"] .modal__overlay { animation: mmfadeOut 75ms cubic-bezier(0, 0, 0.2, 1); } .micromodal[aria-hidden="false"] .modal__overlay { animation: mmfadeIn 120ms cubic-bezier(0, 0, 0.2, 1); } .micromodal[aria-hidden="true"] .modal__container { animation: mmfadeOut 75ms cubic-bezier(0, 0, 0.2, 1); } .micromodal[aria-hidden="false"] .modal__container { animation: mmfadeIn 120ms cubic-bezier(0, 0, 0.2, 1); } .micromodal .modal__container, .micromodal .modal__overlay { will-change: transform; } .micromodal .modal__content.footer-hidden { margin-bottom: 1.25em; } .modal__spinner .loading_indicator_spinner { height: 16px; } .modal__spinner .loading_indicator_spinner path { fill: hsl(0deg 0% 100%); } .modal__spinner { display: flex; align-items: center; justify-content: center; } .time-input-formatted-description { font-style: italic; opacity: 0.7; } #demo-owner-update-email-field-hint { opacity: 0.7; } #sender_channel_email_address_widget { width: 12.875em; /* 206px at 16px/em */ } #copy_email_address_modal { width: 800px; } #copy_email_address_modal .inline { display: inline; } #copy_email_address_modal .question-which-parts { padding-bottom: 10px; } #copy_email_address_modal .stream-email-header { font-size: 1.125em; /* 18px at 16px/em */ } .modal_select { width: var(--modal-input-width); padding: 4px 25px 4px 6px; color: var(--color-text-default); border-radius: 4px; border: var(--input-border-width) solid var(--color-border-legacy-input); cursor: pointer; background-color: var(--color-background-legacy-input); max-width: 100%; font-size: inherit; } .modal_select:disabled { cursor: not-allowed; /* The background-color of select elements inside modal is different than the others in settings pages, because the background of the modal is brighter than the setting page. */ background-color: var(--color-background-disabled-modal-select); /* This is reset for other browsers to use Chrome's opacity. */ opacity: 0.7; } .modal-field-label { margin-bottom: var(--margin-bottom-field-description); /* Avoid having the clickable area extend to the full width of the containing element */ width: fit-content; } .modal__body .dropdown-widget-button,.overlay-content .dropdown-widget-button,.modal__body .dropdown_widget_with_label_wrapper,.overlay-content .dropdown_widget_with_label_wrapper { width: var(--modal-input-width); } .modal__body .dropdown-widget-button,.modal__content .dropdown-widget-button,.modal__body .dropdown_widget_with_label_wrapper,.modal__content .dropdown_widget_with_label_wrapper { max-width: 100%; } .modal_password_input, .modal_url_input, .modal_text_input { padding: var(--input-vertical-padding) var(--input-horizontal-padding); color: var(--color-text-default); border-radius: 4px; border: var(--input-border-width) solid hsl(0deg 0% 80%); box-shadow: inset 0 1px 1px hsl(0deg 0% 0% / 7.5%); transition: border-color linear 0.2s, box-shadow linear 0.2s; /* Subtract (2 * horizontal padding) + (2 * border width) */ width: calc( var(--modal-input-width) - 2 * var(--input-horizontal-padding) - 2 * var(--input-border-width) ); max-width: calc( 100% - 2 * var(--input-horizontal-padding) - 2 * var(--input-border-width) ); font-family: inherit; } .modal_password_input:focus,.modal_url_input:focus,.modal_text_input:focus { border-color: hsl(206deg 80% 62% / 80%); outline: 0; box-shadow: inset 0 1px 1px hsl(0deg 0% 0% / 7.5%), 0 0 8px hsl(206deg 80% 62% / 60%); } .modal__container .modal_text_input:read-only { background-color: var(--background-color-readonly-modal-input); opacity: var(--opacity-readonly-modal-input); } .modal-textarea { width: 100%; box-sizing: border-box; resize: vertical; /* We set the minimum height of textarea to be enough for two lines of text. Since box-sizing is set to "border-box", we also add 2 * var(--input-vertical-padding) + 2 * var(--input-border-width). */ min-height: calc( 2em * var(--base-line-height-unitless) + 2 * var(--input-vertical-padding) + 2 * var(--input-border-width) ); } #add-realm-domain-widget .modal_text_input { width: 14.7143em; /* 206px at 14px em */ } .edit_profile_field_choices_container:not(#does-not-exist) .modal_text_input,#profile_field_choices .modal_text_input { margin-bottom: 0; } .edit_profile_field_choices_container:not(#does-not-exist) .choice-row,#profile_field_choices .choice-row { display: flex; align-items: center; } .choice-row .icon-button,.option-row .icon-button { font-size: 1.1em; } #create_bot_short_name, #edit_bot_short_name { /* A shorter dropdown width (~200px at 14px em) to ensure the email all fits on one line. */ width: 14em; } #edit_bot_short_name.invalid { border-color: var(--color-invalid-input-border); box-shadow: var(--invalid-input-box-shadow); } .email_change_container .settings-field-hint { color: var(--color-text-settings-field-hint); font-size: 0.9em; } #add-poll-modal, #add-todo-modal { /* this height allows 3-4 option rows to fit in without need for scrolling */ height: 32.1428em; /* 450px / 14px em */ overflow: hidden; } #add-poll-modal .modal__content,#add-todo-modal .modal__content { flex-grow: 1; } #add-poll-modal .modal__content .simplebar-content,#add-todo-modal .modal__content .simplebar-content { box-sizing: border-box; height: 100%; } #add-poll-modal #add-poll-form,#add-todo-modal #add-poll-form,#add-poll-modal #add-todo-form,#add-todo-modal #add-todo-form { display: flex; flex-direction: column; overflow: hidden; height: 100%; } #add-poll-modal #add-poll-form .poll-label,#add-todo-modal #add-poll-form .poll-label,#add-poll-modal #add-todo-form .poll-label,#add-todo-modal #add-todo-form .poll-label,#add-poll-modal #add-poll-form .todo-label,#add-todo-modal #add-poll-form .todo-label,#add-poll-modal #add-todo-form .todo-label,#add-todo-modal #add-todo-form .todo-label { font-weight: bold; margin: 5px 0; } #add-poll-modal #add-poll-form .poll-question-input-container,#add-todo-modal #add-poll-form .poll-question-input-container,#add-poll-modal #add-todo-form .poll-question-input-container,#add-todo-modal #add-todo-form .poll-question-input-container,#add-poll-modal #add-poll-form .todo-title-input-container,#add-todo-modal #add-poll-form .todo-title-input-container,#add-poll-modal #add-todo-form .todo-title-input-container,#add-todo-modal #add-todo-form .todo-title-input-container { display: flex; margin-bottom: 10px; } #add-poll-modal #add-poll-form .poll-question-input-container #poll-question-input,#add-todo-modal #add-poll-form .poll-question-input-container #poll-question-input,#add-poll-modal #add-todo-form .poll-question-input-container #poll-question-input,#add-todo-modal #add-todo-form .poll-question-input-container #poll-question-input,#add-poll-modal #add-poll-form .todo-title-input-container #poll-question-input,#add-todo-modal #add-poll-form .todo-title-input-container #poll-question-input,#add-poll-modal #add-todo-form .todo-title-input-container #poll-question-input,#add-todo-modal #add-todo-form .todo-title-input-container #poll-question-input,#add-poll-modal #add-poll-form .poll-question-input-container #todo-title-input,#add-todo-modal #add-poll-form .poll-question-input-container #todo-title-input,#add-poll-modal #add-todo-form .poll-question-input-container #todo-title-input,#add-todo-modal #add-todo-form .poll-question-input-container #todo-title-input,#add-poll-modal #add-poll-form .todo-title-input-container #todo-title-input,#add-todo-modal #add-poll-form .todo-title-input-container #todo-title-input,#add-poll-modal #add-todo-form .todo-title-input-container #todo-title-input,#add-todo-modal #add-todo-form .todo-title-input-container #todo-title-input { flex-grow: 1; } #add-poll-modal #add-poll-form .poll-options-list,#add-todo-modal #add-poll-form .poll-options-list,#add-poll-modal #add-todo-form .poll-options-list,#add-todo-modal #add-todo-form .poll-options-list,#add-poll-modal #add-poll-form .todo-options-list,#add-todo-modal #add-poll-form .todo-options-list,#add-poll-modal #add-todo-form .todo-options-list,#add-todo-modal #add-todo-form .todo-options-list { margin: 0; height: 0; overflow: auto; flex-grow: 1; padding-top: 2px; padding-right: var(--width-simplebar-scroll-hover); } #add-poll-modal #add-poll-form .poll-options-list .option-row,#add-todo-modal #add-poll-form .poll-options-list .option-row,#add-poll-modal #add-todo-form .poll-options-list .option-row,#add-todo-modal #add-todo-form .poll-options-list .option-row,#add-poll-modal #add-poll-form .todo-options-list .option-row,#add-todo-modal #add-poll-form .todo-options-list .option-row,#add-poll-modal #add-todo-form .todo-options-list .option-row,#add-todo-modal #add-todo-form .todo-options-list .option-row { list-style-type: none; cursor: move; margin-top: 10px; padding: 0; display: flex; align-items: center; gap: 10px; } #add-poll-modal #add-poll-form .poll-options-list .option-row .drag-icon,#add-todo-modal #add-poll-form .poll-options-list .option-row .drag-icon,#add-poll-modal #add-todo-form .poll-options-list .option-row .drag-icon,#add-todo-modal #add-todo-form .poll-options-list .option-row .drag-icon,#add-poll-modal #add-poll-form .todo-options-list .option-row .drag-icon,#add-todo-modal #add-poll-form .todo-options-list .option-row .drag-icon,#add-poll-modal #add-todo-form .todo-options-list .option-row .drag-icon,#add-todo-modal #add-todo-form .todo-options-list .option-row .drag-icon { color: hsl(0deg 0% 75%); } #add-poll-modal #add-poll-form .poll-options-list .option-row .poll-option-input,#add-todo-modal #add-poll-form .poll-options-list .option-row .poll-option-input,#add-poll-modal #add-todo-form .poll-options-list .option-row .poll-option-input,#add-todo-modal #add-todo-form .poll-options-list .option-row .poll-option-input,#add-poll-modal #add-poll-form .todo-options-list .option-row .poll-option-input,#add-todo-modal #add-poll-form .todo-options-list .option-row .poll-option-input,#add-poll-modal #add-todo-form .todo-options-list .option-row .poll-option-input,#add-todo-modal #add-todo-form .todo-options-list .option-row .poll-option-input { /* Overwrite .modal_text_input margin to keep vertical centering. */ margin-bottom: 0; flex-grow: 1; } #add-poll-modal #add-poll-form .poll-options-list .option-row .todo-input,#add-todo-modal #add-poll-form .poll-options-list .option-row .todo-input,#add-poll-modal #add-todo-form .poll-options-list .option-row .todo-input,#add-todo-modal #add-todo-form .poll-options-list .option-row .todo-input,#add-poll-modal #add-poll-form .todo-options-list .option-row .todo-input,#add-todo-modal #add-poll-form .todo-options-list .option-row .todo-input,#add-poll-modal #add-todo-form .todo-options-list .option-row .todo-input,#add-todo-modal #add-todo-form .todo-options-list .option-row .todo-input { flex: 1 1 auto; margin-bottom: 0; max-width: 30%; } #add-poll-modal #add-poll-form .poll-options-list .option-row .todo-description-container,#add-todo-modal #add-poll-form .poll-options-list .option-row .todo-description-container,#add-poll-modal #add-todo-form .poll-options-list .option-row .todo-description-container,#add-todo-modal #add-todo-form .poll-options-list .option-row .todo-description-container,#add-poll-modal #add-poll-form .todo-options-list .option-row .todo-description-container,#add-todo-modal #add-poll-form .todo-options-list .option-row .todo-description-container,#add-poll-modal #add-todo-form .todo-options-list .option-row .todo-description-container,#add-todo-modal #add-todo-form .todo-options-list .option-row .todo-description-container { flex: 1 1 auto; display: flex; min-width: 0; } #add-poll-modal #add-poll-form .poll-options-list .option-row .todo-description-container .todo-description-input,#add-todo-modal #add-poll-form .poll-options-list .option-row .todo-description-container .todo-description-input,#add-poll-modal #add-todo-form .poll-options-list .option-row .todo-description-container .todo-description-input,#add-todo-modal #add-todo-form .poll-options-list .option-row .todo-description-container .todo-description-input,#add-poll-modal #add-poll-form .todo-options-list .option-row .todo-description-container .todo-description-input,#add-todo-modal #add-poll-form .todo-options-list .option-row .todo-description-container .todo-description-input,#add-poll-modal #add-todo-form .todo-options-list .option-row .todo-description-container .todo-description-input,#add-todo-modal #add-todo-form .todo-options-list .option-row .todo-description-container .todo-description-input { flex-grow: 1; margin-bottom: 0; } #add-poll-modal #add-poll-form .poll-options-list .option-row:first-child { margin-top: 0; } #add-todo-modal #add-poll-form .poll-options-list .option-row:first-child { margin-top: 0; } #add-poll-modal #add-todo-form .poll-options-list .option-row:first-child { margin-top: 0; } #add-todo-modal #add-todo-form .poll-options-list .option-row:first-child { margin-top: 0; } #add-poll-modal #add-poll-form .todo-options-list .option-row:first-child { margin-top: 0; } #add-todo-modal #add-poll-form .todo-options-list .option-row:first-child { margin-top: 0; } #add-poll-modal #add-todo-form .todo-options-list .option-row:first-child { margin-top: 0; } #add-todo-modal #add-todo-form .todo-options-list .option-row:first-child { margin-top: 0; } #add-poll-modal #add-poll-form .poll-options-list .option-row:last-child { cursor: default; } #add-todo-modal #add-poll-form .poll-options-list .option-row:last-child { cursor: default; } #add-poll-modal #add-todo-form .poll-options-list .option-row:last-child { cursor: default; } #add-todo-modal #add-todo-form .poll-options-list .option-row:last-child { cursor: default; } #add-poll-modal #add-poll-form .todo-options-list .option-row:last-child { cursor: default; } #add-todo-modal #add-poll-form .todo-options-list .option-row:last-child { cursor: default; } #add-poll-modal #add-todo-form .todo-options-list .option-row:last-child { cursor: default; } #add-todo-modal #add-todo-form .todo-options-list .option-row:last-child { cursor: default; } #add-poll-modal #add-poll-form .poll-options-list .option-row:last-child .delete-option { visibility: hidden; } #add-todo-modal #add-poll-form .poll-options-list .option-row:last-child .delete-option { visibility: hidden; } #add-poll-modal #add-todo-form .poll-options-list .option-row:last-child .delete-option { visibility: hidden; } #add-todo-modal #add-todo-form .poll-options-list .option-row:last-child .delete-option { visibility: hidden; } #add-poll-modal #add-poll-form .todo-options-list .option-row:last-child .delete-option { visibility: hidden; } #add-todo-modal #add-poll-form .todo-options-list .option-row:last-child .delete-option { visibility: hidden; } #add-poll-modal #add-todo-form .todo-options-list .option-row:last-child .delete-option { visibility: hidden; } #add-todo-modal #add-todo-form .todo-options-list .option-row:last-child .delete-option { visibility: hidden; } #add-poll-modal #add-poll-form .poll-options-list .option-row:last-child .drag-icon { visibility: hidden; } #add-todo-modal #add-poll-form .poll-options-list .option-row:last-child .drag-icon { visibility: hidden; } #add-poll-modal #add-todo-form .poll-options-list .option-row:last-child .drag-icon { visibility: hidden; } #add-todo-modal #add-todo-form .poll-options-list .option-row:last-child .drag-icon { visibility: hidden; } #add-poll-modal #add-poll-form .todo-options-list .option-row:last-child .drag-icon { visibility: hidden; } #add-todo-modal #add-poll-form .todo-options-list .option-row:last-child .drag-icon { visibility: hidden; } #add-poll-modal #add-todo-form .todo-options-list .option-row:last-child .drag-icon { visibility: hidden; } #add-todo-modal #add-todo-form .todo-options-list .option-row:last-child .drag-icon { visibility: hidden; } @media (max-width: 576px) { #add-poll-modal #add-poll-form .option-row .todo-input,#add-todo-modal #add-poll-form .option-row .todo-input,#add-poll-modal #add-todo-form .option-row .todo-input,#add-todo-modal #add-todo-form .option-row .todo-input { width: 100%; min-width: 90px; } #add-poll-modal #add-poll-form .option-row .todo-description-container .todo-description-input,#add-todo-modal #add-poll-form .option-row .todo-description-container .todo-description-input,#add-poll-modal #add-todo-form .option-row .todo-description-container .todo-description-input,#add-todo-modal #add-todo-form .option-row .todo-description-container .todo-description-input { width: 100%; min-width: 90px; } } #introduce-zulip-view-modal i { vertical-align: middle; } #introduce-zulip-view-modal .keyboard-button { color: var(--color-hotkey-hint); font-size: 0.75em; /* 12px at 16px/em */ font-weight: 500; padding: 0.125em 0.25em; /* 2px 4px at 16px/em */ border-radius: 3px; border: 1px solid var(--color-hotkey-hint); } #generate-integration-url-modal #integrations-event-container .integration-all-events-buttons { display: flex; gap: 10px; margin: 5px 0 10px; } #generate-integration-url-modal #integrations-event-container #integrations-event-options .integration-event-wrapper { margin: var(--settings-nested-checkbox-vertical-margins); } #generate-integration-url-modal #integrations-event-container #integrations-event-options .integration-event-name { word-break: break-all; } #generate-integration-url-modal #integration-url-config-options-container { /* Same bottom margin as that of input-group, to maintain consistent gap between fields. */ margin-bottom: 1.25em; /* 20px at 16px/em */ } .slack-topics-dropdown-dropdown-list-container { /* 250px at 14px */ width: 17.8571em; } .dialog-widget-footer-minor-text { font-size: smaller; font-style: italic; margin-right: auto; } #topic-summary-modal { width: 45em; } #navigation-tour-video-modal { width: 97vw; max-width: 1024px; } #navigation-tour-video-modal .modal__content { overflow: hidden; } #navigation-tour-video-modal #navigation-tour-video-wrapper { display: flex; justify-content: center; align-items: center; } #navigation-tour-video-modal #navigation-tour-video-wrapper::after { content: ""; position: absolute; background-image: url(files/images/play_button.svg); background-size: contain; background-repeat: no-repeat; background-position: center; background-color: transparent; width: 20%; height: 20%; pointer-events: none; } #navigation-tour-video-modal #navigation-tour-video-wrapper.hide-play-button::after { content: none; background-image: none; } #navigation-tour-video-modal #navigation-tour-video { width: 100%; aspect-ratio: 16 / 9; cursor: pointer; border: 1px solid hsl(0deg 0% 50%); } #navigation-tour-video-modal #navigation-tour-video.dimmed-background { opacity: 0.4; } #navigation-tour-video-modal #navigation-tour-video-ended-button-wrapper { position: absolute; display: flex; flex-direction: column; align-items: center; width: 100%; visibility: hidden; } #navigation-tour-video-modal #navigation-tour-video-ended-button-wrapper #navigation-tour-video-ended-button { color: hsl(0deg 0% 100%) !important; cursor: pointer; font-size: 200%; padding: 1% 5%; border-radius: 8px; border: 1px solid hsl(0deg 0% 100%); transition: transform 0.25s ease-out; font-family: inherit; } #navigation-tour-video-modal #navigation-tour-video-ended-button-wrapper #navigation-tour-video-ended-button:hover { transform: scale(1.05); } ul.modal-options-list { list-style: none; margin: 0; } .modal-option-content { box-sizing: border-box; display: flex; flex-flow: row nowrap; align-items: flex-start; gap: 0.4375em; /* 7px at 16px/1em */ padding: 0.25em 0.5em; /* 4px 8px at 16px/1em */ line-height: 1.25em; /* 20px at 16px/1em */ color: var(--color-text-default); border-radius: 4px; } .modal-option-content:focus { /* Override the default focus style */ outline: none !important; color: inherit; -webkit-text-decoration: none; text-decoration: none; } .modal-option-content:hover,.modal-option-content:focus-visible { color: var(--color-text-default); background: var(--color-background-hover-popover-menu); -webkit-text-decoration: none; text-decoration: none; } .modal-option-content:focus-visible { outline: 1px solid var(--color-outline-focus) !important; outline-offset: -1px; } .modal-option-content:active { background: var(--color-background-active-popover-menu); } #users_to_reset_configuration { width: 100%; } #change_group_info_modal .user-group-info-modal-fields { display: flex; flex-direction: column; gap: 0.625em; /* 10px at 16px/1em */ } /* ============================================================== * MODAL MARGIN OVERRIDES * Some elements inside the modal content area have default * margins applied to them from other CSS files. * While these margins worked well in the previous modal design, * they create unwanted extra space between the modal content * and the modal footer in the redesigned modals. * * TODO: Remove these overrides once we implement a standardized * flexbox/grid structure for the modal content. * ============================================================== */ .modal__content p:last-of-type { /* Override default value for

tags in bootstrap.app.css */ margin-bottom: 0; } .modal__content .input-group:last-of-type { /* Override default value for input-group in settings.css. */ margin-bottom: 0; } .modal__content .modal-form { /* Override default value for form in bootstrap.app.css */ margin-bottom: 0; } .modal__content .modal-options-list { /* Override default value for