64898b2c79
Some checks failed
Code scanning / CodeQL (push) Failing after 15s
Zulip production suite / Ubuntu 22.04 production build (push) Failing after 26s
Zulip production suite / Debian 12 production install with custom db name and user (push) Has been skipped
Zulip production suite / Ubuntu 22.04 production install and PostgreSQL upgrade with pgroonga (push) Has been skipped
Zulip production suite / Ubuntu 24.04 production install (push) Has been skipped
Zulip production suite / Ubuntu 26.04 production install (push) Has been skipped
Zulip production suite / Debian 13 production install (push) Has been skipped
Zulip production suite / 7.0 Version Upgrade (push) Has been skipped
Zulip production suite / 8.0 Version Upgrade (push) Has been skipped
Zulip production suite / 6.0 Version Upgrade (push) Has been skipped
Zulip production suite / 10.0 Version Upgrade (push) Has been skipped
Zulip production suite / 9.0 Version Upgrade (push) Has been skipped
Zulip production suite / 12.0 Version Upgrade (push) Has been skipped
Zulip production suite / 11.0 Version Upgrade (push) Has been skipped
GitHub Actions Security Analysis with zizmor / zizmor (push) Failing after 3s
Zulip CI / Debian 12 (Python 3.11, backend + documentation) (push) Failing after 26s
Zulip CI / Ubuntu 22.04 (Python 3.10, backend + frontend) (push) Failing after 3s
Zulip CI / Ubuntu 24.04 (Python 3.12, backend) (push) Failing after 25s
Zulip CI / Ubuntu 26.04 (Python 3.14, backend) (push) Failing after 25s
Zulip CI / Debian 13 (Python 3.13, backend) (push) Failing after 28s
Zulip production suite / Required jobs (push) Has been cancelled
Zulip CI / Required jobs (push) Has been cancelled
API Documentation Update Check / check-feature-level-updated (push) Has been cancelled
API Documentation Update Check / notify-if-api-docs-changed (push) Has been cancelled
1317 lines
32 KiB
CSS
1317 lines
32 KiB
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-background: hsl(226deg 1% 42% / 20%);
|
|
--color-exit-button-background-interactive: hsl(226deg 1% 42% / 27%);
|
|
--color-background-modal-confirm-button: light-dark(
|
|
hsl(240deg 80% 66%),
|
|
hsl(245deg 55% 50%)
|
|
);
|
|
--color-background-modal-confirm-button-hover: light-dark(
|
|
hsl(240deg 63% 59%),
|
|
hsl(245deg 60% 58%)
|
|
);
|
|
--color-background-modal-confirm-button-active: light-dark(
|
|
hsl(240deg 55% 51%),
|
|
hsl(245deg 65% 42%)
|
|
);
|
|
--color-text-modal-cancel-button: light-dark(
|
|
hsl(229deg 9% 36%),
|
|
hsl(229deg 10% 70%)
|
|
);
|
|
--color-background-modal-cancel-button-hover: light-dark(
|
|
hsl(229deg 9% 36% / 7%),
|
|
hsl(230deg 9% 60% / 14%)
|
|
);
|
|
--color-background-modal-cancel-button-active: light-dark(
|
|
hsl(229deg 9% 36% / 11%),
|
|
hsl(0deg 0% 0% / 12%)
|
|
);
|
|
|
|
/* 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
|
|
);
|
|
--color-modal-heading-text: light-dark(
|
|
hsl(0deg 0% 15%),
|
|
color-mix(in oklch, hsl(0deg 0% 100%) 85%, transparent)
|
|
);
|
|
--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%)
|
|
);
|
|
--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)
|
|
);
|
|
}
|
|
|
|
.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 ." 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);
|
|
|
|
&: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);
|
|
|
|
.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. */
|
|
.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;
|
|
|
|
.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;
|
|
/* Offset the close button to the right so that the
|
|
X lines up with the other visual elements, but
|
|
the padded clickable area is maintained. */
|
|
margin-right: calc(var(--icon-button-padding) * -1);
|
|
|
|
&: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);
|
|
|
|
> .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;
|
|
|
|
&:hover {
|
|
text-decoration: none;
|
|
}
|
|
|
|
&:disabled {
|
|
cursor: not-allowed;
|
|
opacity: 0.5;
|
|
}
|
|
}
|
|
|
|
.modal__button:focus:not(.dialog_submit_button, .dialog_exit_button),
|
|
.modal__button:hover:not(.dialog_submit_button, .dialog_exit_button) {
|
|
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-text-modal-cancel-button);
|
|
background: transparent;
|
|
|
|
&:hover {
|
|
background: var(--color-background-modal-cancel-button-hover);
|
|
}
|
|
|
|
&:active {
|
|
background: var(--color-background-modal-cancel-button-active);
|
|
}
|
|
}
|
|
|
|
.dialog_submit_button {
|
|
margin-left: 12px;
|
|
background-color: var(--color-background-modal-confirm-button);
|
|
color: hsl(0deg 0% 100%) !important;
|
|
|
|
&:hover {
|
|
background-color: var(--color-background-modal-confirm-button-hover);
|
|
}
|
|
|
|
&:active {
|
|
background-color: var(--color-background-modal-confirm-button-active);
|
|
}
|
|
|
|
&.dangerous_action_button {
|
|
background-color: var(--color-background-danger-solid-action-button);
|
|
|
|
&:hover {
|
|
background-color: var(
|
|
--color-background-danger-solid-action-button-hover
|
|
);
|
|
}
|
|
|
|
&:active {
|
|
background-color: var(
|
|
--color-background-danger-solid-action-button-active
|
|
);
|
|
}
|
|
}
|
|
}
|
|
|
|
.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);
|
|
}
|
|
|
|
.name {
|
|
color: var(--color-user-profile-field-name);
|
|
font-weight: 600;
|
|
margin-right: 10px;
|
|
overflow-wrap: break-word;
|
|
}
|
|
|
|
.value {
|
|
vertical-align: top;
|
|
overflow-wrap: anywhere;
|
|
}
|
|
|
|
#exit-sign {
|
|
/* 24px at 14px/1em */
|
|
font-size: 1.7143em;
|
|
line-height: 1;
|
|
}
|
|
|
|
.tab-switcher {
|
|
margin: 2px;
|
|
}
|
|
|
|
.tabcontent {
|
|
margin: 1px 2.5px 0 1.5px;
|
|
}
|
|
|
|
#profile-tab {
|
|
& li.custom_user_field {
|
|
display: block;
|
|
}
|
|
}
|
|
|
|
.top {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
@media (width < $ml_min) {
|
|
.top {
|
|
flex-direction: column-reverse;
|
|
}
|
|
}
|
|
|
|
#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%);
|
|
|
|
&.guest-avatar::after {
|
|
outline: 9px solid hsl(0deg 0% 100%);
|
|
}
|
|
}
|
|
|
|
.user-profile-header-actions {
|
|
display: flex;
|
|
gap: 5px;
|
|
}
|
|
|
|
.deactivated-user-icon {
|
|
vertical-align: middle;
|
|
font-size: 0.7em;
|
|
}
|
|
|
|
#default-section {
|
|
vertical-align: top;
|
|
|
|
.default-field {
|
|
margin-bottom: 10px;
|
|
}
|
|
}
|
|
|
|
& hr {
|
|
border: 1px solid hsl(0deg 0% 93%);
|
|
margin: 5px 0;
|
|
}
|
|
|
|
#content {
|
|
.field-section {
|
|
margin-bottom: 10px;
|
|
|
|
&[data-type="2"] .value {
|
|
overflow-wrap: break-word;
|
|
}
|
|
}
|
|
|
|
.rendered_markdown p {
|
|
margin: 0;
|
|
}
|
|
}
|
|
|
|
.col-left {
|
|
padding: 0 10px 0 0;
|
|
}
|
|
|
|
.col-right {
|
|
width: fit-content;
|
|
}
|
|
|
|
.tab-data {
|
|
.active {
|
|
display: block;
|
|
}
|
|
|
|
margin-bottom: var(--user-profile-modal-body-margin-bottom);
|
|
}
|
|
|
|
&.prevent-user-modal-content-scrolling {
|
|
.modal__content {
|
|
flex-grow: 1;
|
|
|
|
.simplebar-content {
|
|
height: 100%;
|
|
box-sizing: border-box;
|
|
}
|
|
}
|
|
|
|
.tab-data {
|
|
height: calc(100% - var(--user-profile-modal-body-margin-bottom));
|
|
}
|
|
|
|
.tabcontent {
|
|
height: 100%;
|
|
}
|
|
}
|
|
|
|
.group-tab-element-header,
|
|
.stream-tab-element-header {
|
|
margin: 0;
|
|
display: inline-block;
|
|
font-weight: 600;
|
|
/* 18px at 16px/1em */
|
|
font-size: 1.125em;
|
|
line-height: var(--header-line-height);
|
|
}
|
|
|
|
#user-profile-groups-tab,
|
|
#user-profile-streams-tab {
|
|
display: grid;
|
|
grid-template:
|
|
"alert" auto
|
|
"top" minmax(0, 1fr)
|
|
"bottom" auto
|
|
/ minmax(0, 1fr);
|
|
|
|
.stream_list_info:has(.banner),
|
|
.user-profile-group-list-alert:has(.banner) {
|
|
grid-area: alert;
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
.stream-list-loader:not(:empty) {
|
|
margin: auto; /* center the spinner */
|
|
|
|
.loading_indicator_spinner {
|
|
margin-top: 10px;
|
|
}
|
|
}
|
|
|
|
.error-message:not(:empty) {
|
|
color: var(--color-alert-error-red);
|
|
text-align: center;
|
|
margin-top: 20px;
|
|
}
|
|
|
|
.stream-list-bottom-section,
|
|
.group-list-bottom-section {
|
|
grid-area: bottom;
|
|
}
|
|
|
|
.user_profile_subscribe_widget {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: baseline;
|
|
padding-top: 2px;
|
|
gap: 10px;
|
|
}
|
|
|
|
.dropdown_widget_value {
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
}
|
|
|
|
.group-list-top-section,
|
|
.stream-list-top-section {
|
|
grid-area: top;
|
|
margin-top: 0.3125em;
|
|
margin-bottom: 0.75em;
|
|
}
|
|
|
|
@media (width < $md_min) {
|
|
.group-list-top-section,
|
|
.stream-list-top-section {
|
|
display: block;
|
|
|
|
.header-section {
|
|
width: 100%;
|
|
}
|
|
}
|
|
}
|
|
|
|
.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 */
|
|
line-height: var(--header-line-height);
|
|
}
|
|
|
|
#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;
|
|
}
|
|
|
|
.add_channel_folder_widget {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
margin-bottom: 10px;
|
|
gap: 10px;
|
|
|
|
.dropdown-widget-button {
|
|
max-width: 100%;
|
|
width: var(--modal-input-width);
|
|
|
|
.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;
|
|
|
|
.modal-group-list-row,
|
|
.modal-channel-list-row {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
padding-right: 0.625em;
|
|
align-items: center;
|
|
text-decoration: none;
|
|
border-bottom: none;
|
|
border-radius: 4px;
|
|
color: var(--color-dropdown-item);
|
|
|
|
.list-row-content {
|
|
display: flex;
|
|
overflow: hidden;
|
|
border-radius: 4px;
|
|
padding: 0.3125em 0.5em;
|
|
cursor: pointer;
|
|
|
|
&:focus-visible {
|
|
outline: 1px solid var(--color-outline-focus);
|
|
outline-offset: -2px;
|
|
}
|
|
}
|
|
|
|
.stream-privacy {
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.filter-icon i {
|
|
padding-right: 3px;
|
|
}
|
|
|
|
.list-item-name {
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
}
|
|
|
|
.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);
|
|
|
|
.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 {
|
|
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;
|
|
|
|
&: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 */
|
|
|
|
.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. */
|
|
&.compact {
|
|
min-height: unset;
|
|
padding-bottom: 16px;
|
|
}
|
|
}
|
|
}
|
|
|
|
.modal__header {
|
|
padding-bottom: 0;
|
|
}
|
|
|
|
.loading_indicator {
|
|
margin: auto;
|
|
}
|
|
|
|
.read_receipts_list {
|
|
/* Override legacy bootstrap ul margins. */
|
|
margin: 0;
|
|
|
|
& 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;
|
|
}
|
|
|
|
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 */
|
|
|
|
&:hover {
|
|
background-color: light-dark(
|
|
hsl(0deg 0% 0% / 5%),
|
|
hsl(0deg 0% 100% / 5%)
|
|
);
|
|
}
|
|
|
|
&:active,
|
|
&:focus {
|
|
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_textarea {
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
.border-top {
|
|
border-top: 1px solid hsl(300deg 2% 11% / 30%);
|
|
padding-top: 10px;
|
|
}
|
|
|
|
.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;
|
|
|
|
& 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;
|
|
|
|
.inline {
|
|
display: inline;
|
|
}
|
|
|
|
.question-which-parts {
|
|
padding-bottom: 10px;
|
|
}
|
|
|
|
.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;
|
|
|
|
&: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,
|
|
.overlay-content {
|
|
.dropdown-widget-button,
|
|
.dropdown_widget_with_label_wrapper {
|
|
width: var(--modal-input-width);
|
|
}
|
|
}
|
|
|
|
.modal__body,
|
|
.modal__content {
|
|
.dropdown-widget-button,
|
|
.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;
|
|
|
|
&: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,
|
|
#profile_field_choices {
|
|
.modal_text_input {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.choice-row {
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
}
|
|
|
|
.choice-row,
|
|
.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;
|
|
|
|
.modal__content {
|
|
flex-grow: 1;
|
|
|
|
.simplebar-content {
|
|
box-sizing: border-box;
|
|
height: 100%;
|
|
}
|
|
}
|
|
|
|
#add-poll-form,
|
|
#add-todo-form {
|
|
display: flex;
|
|
flex-direction: column;
|
|
overflow: hidden;
|
|
height: 100%;
|
|
|
|
.poll-label,
|
|
.todo-label {
|
|
font-weight: bold;
|
|
margin: 5px 0;
|
|
}
|
|
|
|
.poll-question-input-container,
|
|
.todo-title-input-container {
|
|
display: flex;
|
|
margin-bottom: 10px;
|
|
|
|
#poll-question-input,
|
|
#todo-title-input {
|
|
flex-grow: 1;
|
|
}
|
|
}
|
|
|
|
.poll-options-list,
|
|
.todo-options-list {
|
|
margin: 0;
|
|
height: 0;
|
|
overflow: auto;
|
|
flex-grow: 1;
|
|
padding-top: 2px;
|
|
padding-right: var(--width-simplebar-scroll-hover);
|
|
|
|
.option-row {
|
|
list-style-type: none;
|
|
cursor: move;
|
|
margin-top: 10px;
|
|
padding: 0;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
|
|
.drag-icon {
|
|
color: hsl(0deg 0% 75%);
|
|
}
|
|
|
|
.poll-option-input {
|
|
/* Overwrite .modal_text_input margin to keep vertical centering. */
|
|
margin-bottom: 0;
|
|
flex-grow: 1;
|
|
}
|
|
|
|
.todo-input {
|
|
flex: 1 1 auto;
|
|
margin-bottom: 0;
|
|
max-width: 30%;
|
|
}
|
|
|
|
.todo-description-container {
|
|
flex: 1 1 auto;
|
|
display: flex;
|
|
min-width: 0;
|
|
|
|
.todo-description-input {
|
|
flex-grow: 1;
|
|
margin-bottom: 0;
|
|
}
|
|
}
|
|
}
|
|
|
|
.option-row:first-child {
|
|
margin-top: 0;
|
|
}
|
|
|
|
.option-row:last-child {
|
|
cursor: default;
|
|
|
|
.delete-option {
|
|
visibility: hidden;
|
|
}
|
|
|
|
.drag-icon {
|
|
visibility: hidden;
|
|
}
|
|
}
|
|
}
|
|
|
|
@media (max-width: $sm_min) {
|
|
.option-row {
|
|
.todo-input {
|
|
width: 100%;
|
|
min-width: 90px;
|
|
}
|
|
|
|
.todo-description-container {
|
|
.todo-description-input {
|
|
width: 100%;
|
|
min-width: 90px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
#introduce-zulip-view-modal {
|
|
i {
|
|
vertical-align: middle;
|
|
}
|
|
|
|
.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;
|
|
}
|
|
|
|
#integrations-event-options {
|
|
.integration-event-wrapper {
|
|
margin: var(--settings-nested-checkbox-vertical-margins);
|
|
}
|
|
|
|
.integration-event-name {
|
|
word-break: break-all;
|
|
}
|
|
}
|
|
}
|
|
|
|
#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;
|
|
|
|
.modal__content {
|
|
overflow: hidden;
|
|
}
|
|
|
|
#navigation-tour-video-wrapper {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
|
|
&::after {
|
|
content: "";
|
|
position: absolute;
|
|
background-image: url("../images/play_button.svg");
|
|
background-size: contain;
|
|
background-repeat: no-repeat;
|
|
background-position: center;
|
|
background-color: transparent;
|
|
width: 20%;
|
|
height: 20%;
|
|
pointer-events: none;
|
|
}
|
|
|
|
&.hide-play-button::after {
|
|
content: none;
|
|
background-image: none;
|
|
}
|
|
}
|
|
|
|
#navigation-tour-video {
|
|
width: 100%;
|
|
aspect-ratio: 16 / 9;
|
|
cursor: pointer;
|
|
border: 1px solid hsl(0deg 0% 50%);
|
|
|
|
&.dimmed-background {
|
|
opacity: 0.4;
|
|
}
|
|
}
|
|
|
|
#navigation-tour-video-ended-button-wrapper {
|
|
position: absolute;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
width: 100%;
|
|
visibility: hidden;
|
|
|
|
#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;
|
|
|
|
&: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;
|
|
|
|
&:focus {
|
|
/* Override the default focus style */
|
|
outline: none !important;
|
|
color: inherit;
|
|
text-decoration: none;
|
|
}
|
|
|
|
&:hover,
|
|
&:focus-visible {
|
|
color: var(--color-text-default);
|
|
background: var(--color-background-hover-popover-menu);
|
|
text-decoration: none;
|
|
}
|
|
|
|
&:focus-visible {
|
|
outline: 1px solid var(--color-outline-focus) !important;
|
|
outline-offset: -1px;
|
|
}
|
|
|
|
&: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 <p> 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 <ul> in bootstrap.app.css */
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
/* ==============================================================
|
|
* END MODAL MARGIN OVERRIDES
|
|
* ============================================================== */
|