/*!**************************************************************************************************************************************************************************!*\
!*** css ../node_modules/.pnpm/css-loader@7.1.2_webpack@5.102.1/node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[5].use[1]!./third/bootstrap/css/bootstrap.app.css ***!
\**************************************************************************************************************************************************************************/
/*!
* Bootstrap v2.3.2
*
* Copyright 2012 Twitter, Inc
* Licensed under the Apache License v2.0
* http://www.apache.org/licenses/LICENSE-2.0
*
* Designed and built with all the love in the world @twitter by @mdo and @fat.
*/
a:focus {
outline: thin dotted #333;
outline: 5px auto -webkit-focus-ring-color;
outline-offset: -2px;
}
a:hover,
a:active {
outline: 0;
}
img {
/* Responsive images (ensure images don't scale beyond their parents) */
max-width: 100%;
/* Part 1: Set a maximum relative to the parent */
height: auto;
/* Part 2: Scale the height according to the width, otherwise you get stretching */
vertical-align: middle;
border: 0;
}
button {
-webkit-appearance: button;
}
p {
margin: 0 0 10px;
}
h1,
h2,
h3,
h4 {
margin: 10px 0;
font-family: inherit;
font-weight: bold;
line-height: 20px;
color: inherit;
text-rendering: optimizelegibility;
}
h1,
h2,
h3 {
line-height: 40px;
}
h1 {
font-size: 38.5px;
}
h2 {
font-size: 31.5px;
}
h3 {
font-size: 24.5px;
}
h4 {
font-size: 17.5px;
}
ul,
ol {
padding: 0;
margin: 0 0 10px 25px;
}
ul ul,
ul ol,
ol ol,
ol ul {
margin-bottom: 0;
}
hr {
margin: 20px 0;
border: 0;
border-top: 1px solid #eeeeee;
border-bottom: 1px solid #ffffff;
}
form {
margin: 0 0 20px;
}
label {
display: block;
margin-bottom: 5px;
}
input[disabled],
input[readonly] {
cursor: not-allowed;
background-color: #eeeeee;
}
input:focus:invalid {
color: #b94a48;
border-color: #ee5f5b;
}
input:focus:invalid:focus {
border-color: #e9322d;
-webkit-box-shadow: 0 0 6px #f8b9b7;
-moz-box-shadow: 0 0 6px #f8b9b7;
box-shadow: 0 0 6px #f8b9b7;
}
/* Bootstrap alert CSS rules that have not been replaced with our own
designs. */
.alert {
padding: 8px 35px 8px 14px;
margin-bottom: 20px;
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
background-color: #fcf8e3;
border: 1px solid #fbeed5;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
}
.alert.alert-error {
background-color: #f2dede;
border-color: #eed3d7;
color: #b94a48;
}
.alert.alert-success {
background-color: #dff0d8;
border-color: #d6e9c6;
color: #468847;
}
.alert.alert-success h4 {
color: #468847;
}
.alert,
.alert h4 {
color: #c09853;
}
.alert h4 {
margin: 0;
}
/*!**************************************************************************************************************************************************************************!*\
!*** css ../node_modules/.pnpm/css-loader@7.1.2_webpack@5.102.1/node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[5].use[1]!./third/bootstrap/css/bootstrap-btn.css ***!
\**************************************************************************************************************************************************************************/
/*!
Software from "Bootstrap" is Copyright (c) 2011-2014 Twitter, Inc. and is provided
under the following license (the Bootstrap software has been modified):
--
The MIT License (MIT)
Copyright (c) 2011-2014 Twitter, Inc
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in
all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
THE SOFTWARE.
*/
/*!
* Bootstrap v3.1.1 (http://getbootstrap.com)
* Copyright 2011-2014 Twitter, Inc.
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
*/
.bootstrap-btn {
display: inline-block;
padding: 6px 12px;
margin-bottom: 0;
font-size: 14px;
font-weight: normal;
line-height: 1.42857143;
text-align: center;
white-space: nowrap;
vertical-align: middle;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
background-image: none;
border: 1px solid transparent;
border-radius: 0px;
}
.bootstrap-btn:focus,
.bootstrap-btn:active:focus,
.bootstrap-btn.active:focus {
outline: thin dotted;
outline: 5px auto -webkit-focus-ring-color;
outline-offset: -2px;
}
.bootstrap-btn:hover,
.bootstrap-btn:focus {
color: #333;
text-decoration: none;
}
.bootstrap-btn:active,
.bootstrap-btn.active {
background-image: none;
outline: 0;
-webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125);
box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125);
}
.bootstrap-btn.disabled,
.bootstrap-btn[disabled] {
pointer-events: none;
cursor: not-allowed;
-webkit-box-shadow: none;
box-shadow: none;
opacity: .65;
}
/*!***********************************************************************************************************************************************************************************************************************************************************************************************************************!*\
!*** css ../node_modules/.pnpm/css-loader@7.1.2_webpack@5.102.1/node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[6].use[1]!../node_modules/.pnpm/postcss-loader@8.2.0_postcss@8.5.6_typescript@5.9.3_webpack@5.102.1/node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[6].use[2]!./styles/typeahead.css ***!
\***********************************************************************************************************************************************************************************************************************************************************************************************************************/
/* CSS for Bootstrap typeahead */
.dropdown-menu {
display: none;
min-width: 160px;
list-style: none;
}
.open > .dropdown-menu {
display: block;
}
.typeahead {
z-index: 1051;
}
.typeahead.dropdown-menu .typeahead-menu .simplebar-content {
min-width: max-content;
}
.typeahead.dropdown-menu .typeahead-menu .simplebar-content > li {
overflow-wrap: anywhere;
}
.typeahead.dropdown-menu .typeahead-menu .simplebar-content > li > a {
display: flex;
align-items: center;
padding: 0.2142em 0.7142em; /* 3px 10px at 14px em */
gap: 0.3571em; /* 5px at 14px em */
font-weight: normal;
/* We want to keep this `max-width` less than 320px. */
max-width: 292px;
line-height: 1.43; /* 20px / 14px */
color: var(--color-dropdown-item);
white-space: nowrap;
}
@media (min-width: 425px) {
.typeahead.dropdown-menu .typeahead-menu .simplebar-content > li > a {
/* Scale up with font size on larger widths. */
/* 292px / 14px */
max-width: 20.86em;
}
}
/* hidden text just to maintain line height for a blank option */
.typeahead.dropdown-menu .typeahead-menu .simplebar-content > li > a strong:empty::after {
content: ".";
visibility: hidden;
}
.typeahead.dropdown-menu .typeahead-menu .simplebar-content > li > a:hover,.typeahead.dropdown-menu .typeahead-menu .simplebar-content > li > a:focus {
-webkit-text-decoration: none;
text-decoration: none;
outline: 0;
}
.typeahead.dropdown-menu .typeahead-menu .simplebar-content > li > a .user-circle {
/* 11px at 16px/1em */
font-size: 0.6875em;
align-self: center;
/* TODO: A grid rewrite of typeahead rows
should help to obviate these kinds of
fiddly spacing hacks. */
margin-right: 2px;
margin-left: -2px;
}
.typeahead.dropdown-menu .typeahead-menu .simplebar-content > li > a.topic-typeahead-link {
gap: 5px;
}
.typeahead.dropdown-menu .typeahead-menu .simplebar-content > li > a.topic-edit-typeahead {
display: flex;
flex-wrap: wrap;
}
.typeahead.dropdown-menu .typeahead-menu .simplebar-content > li > a.topic-edit-typeahead .typeahead-strong-section {
/* We want to wrap the topic but preserve
original white spaces sequence too. */
white-space: pre-wrap;
}
.typeahead.dropdown-menu .typeahead-menu .simplebar-content > li > a .typeahead-text-container {
display: flex;
align-self: center;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
gap: 3px;
align-items: baseline;
}
.typeahead.dropdown-menu .typeahead-menu .simplebar-content > li > a .compose-stream-name {
overflow: visible;
gap: 0;
}
.typeahead.dropdown-menu .typeahead-menu .simplebar-content > li .stream-to-topic-arrow {
margin-left: 0.375em; /* 6px at 16px em */
cursor: default;
color: var(--color-compose-chevron-arrow);
-webkit-text-decoration: none;
text-decoration: none;
}
.typeahead.dropdown-menu .typeahead-menu .simplebar-content .active > a,.typeahead.dropdown-menu .typeahead-menu .simplebar-content .active > a:hover,.typeahead.dropdown-menu .typeahead-menu .simplebar-content .active > a:focus {
color: var(--color-active-dropdown-item);
background-color: var(--background-color-active-typeahead-item);
}
.typeahead.dropdown-menu .typeahead-menu .simplebar-content .active > a .user-circle-offline {
/* Ensure better contrast on highlighted
typeahead items. */
color: var(--color-user-circle-offline-typeahead-highlight);
}
.typeahead.dropdown-menu .typeahead-menu .simplebar-content .pronouns,.typeahead.dropdown-menu .typeahead-menu .simplebar-content .autocomplete_secondary {
align-self: baseline;
opacity: 0.8;
font-size: 85%;
overflow: hidden;
text-overflow: ellipsis;
}
.typeahead.dropdown-menu .typeahead-menu .simplebar-content .pronouns > a,.typeahead.dropdown-menu .typeahead-menu .simplebar-content .autocomplete_secondary > a {
color: var(--color-dropdown-item);
text-decoration: underline;
-webkit-text-decoration: underline solid currentColor;
text-decoration: underline solid currentColor;
text-decoration-thickness: 1px;
-webkit-text-decoration: underline 1px;
text-decoration: underline 1px;
text-decoration-color: var(--color-dropdown-item-link-underline);
opacity: 0.6;
}
.typeahead.dropdown-menu .typeahead-menu .simplebar-content .autocomplete_secondary {
flex: 1 1 0;
}
.typeahead.dropdown-menu .typeahead-menu .simplebar-content .active .pronouns,.typeahead.dropdown-menu .typeahead-menu .simplebar-content .active .autocomplete_secondary {
opacity: 1;
}
.typeahead.dropdown-menu .typeahead-menu {
list-style: none;
margin: 4px 0;
max-height: min(248px, 95vh);
overflow-y: auto;
}
.typeahead.dropdown-menu .typeahead-footer {
margin: 0;
padding: 4px 10px;
border-top: 1px solid hsl(0deg 0% 0% / 20%);
display: flex;
align-items: center;
}
.typeahead.dropdown-menu #typeahead-footer-text {
color: var(--color-dropdown-item);
font-size: 0.8571em; /* 12px at 14px/em */
}
.typeahead.dropdown-menu a strong.typeahead-strong-section {
/* Can't use flex to display this item if
we want `text-overflow: ellipsis` to work
which only works on block elements. */
overflow: hidden;
text-overflow: ellipsis;
white-space: pre;
align-items: baseline;
font-weight: 500;
}
.typeahead.dropdown-menu a strong.typeahead-strong-section .channel-privacy-type-icon {
margin-right: 3px;
}
.typeahead-option-label-container {
display: flex !important;
justify-content: space-between;
}
.typeahead-option-label-container > strong {
margin-right: 14px;
}
.typeahead-option-label-container .typeahead-option-label {
color: var(--color-typeahead-option-label);
}
/* For FontAwesome icons and zulip icons used in place of images for some users. */
.typeahead-image {
font-size: 1.3571em; /* 19px at 14px em */
display: inline-block;
height: 1.1052em; /* 21px at 19px/1em */
width: 1.1052em; /* 21px at 19px/1em */
border-radius: 4px;
text-align: center;
}
.typeahead-image.zulip-icon-user-group {
font-size: 1.3571em; /* 19px at 14px em */
}
.typeahead-image.no-presence-circle {
/* 0.6875 * var(--base-font-size) is the width of presence
circle, no margin (-2px left margin + 2px right margin = 0px)
of the presence circle and 0.3571 * var(--base-font-size-px)
is gap between the presence circle and avatar.
Cannot directly use 0.6875em or 0.3571em
since font-size for user group icon is different from the
font size used to calculate presence circle width and gap. */
margin-left: calc((0.6875 + 0.3571) * var(--base-font-size-px));
}
.typeahead-text-container i.zulip-icon-bot {
align-self: center;
}
/*
Negates the extra 3px left margin from `.status-emoji` in zulip.css, which,
combined with .typeahead-text-container's `gap`, created unintended spacing.
The typeahead's spacing is now managed only by `gap` in
.typeahead-text-container.
*/
.typeahead-text-container .status-emoji {
margin-left: 0;
}
/*!**********************************************************************************************************************************************************************************************************************************************************************************************************************!*\
!*** css ../node_modules/.pnpm/css-loader@7.1.2_webpack@5.102.1/node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[6].use[1]!../node_modules/.pnpm/postcss-loader@8.2.0_postcss@8.5.6_typescript@5.9.3_webpack@5.102.1/node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[6].use[2]!./styles/tooltips.css ***!
\**********************************************************************************************************************************************************************************************************************************************************************************************************************/
[data-tippy-root] {
/* Since tooltip elements are sometimes inside elements
* which have different font-family, we force font-family
* for tooltips here.
*/
font-family: "Source Sans 3 VF", sans-serif !important;
overflow-wrap: anywhere;
/* Contains stylistic variant of upper-case character "I" in Source Sans 3 */
font-feature-settings: "ss01" on;
/* Affects all tippy tooltips not using any theme. */
}
[data-tippy-root] .tippy-box:not([data-theme]) {
background: var(--color-background-tippy-box);
border-radius: 5px;
/* 14px at 14px/1em */
font-size: var(--base-font-size-px);
/* 25px at 14px/1em */
min-height: 1.7857em;
box-sizing: border-box;
}
[data-tippy-root] .tippy-box:not([data-theme]) .tippy-content {
box-sizing: inherit;
display: flex;
align-items: center;
padding: 5px 10px;
/* 14px at 14px/1em */
font-size: var(--base-font-size-px);
/* 20px at 14px/1em */
line-height: 1.4286em;
/* Don't inherit font-weight when
a Tippy attaches to a parent */
font-weight: normal;
color: hsl(0deg 0% 100%);
}
[data-tippy-root] .tippy-box:not([data-theme]) .tippy-arrow::before {
/* This affects the arrow for tooltips and doesn't have any impact on arrows for popovers.
* The transform property scales down the size of the arrow, giving it a thinner appearance.
* https://atomiks.github.io/tippyjs/v6/themes/#changing-the-arrow-size
*/
transform: scale(0.75);
}
[data-tippy-root] .tippy-box:not([data-theme]) .tooltip-inner-content {
/* 17px at 14px/1em */
line-height: 1.2143em;
}
[data-tippy-root] .tippy-box[data-placement^="top"]:not([data-theme]) > .tippy-arrow::before {
border-top-color: var(--color-background-tippy-box);
}
[data-tippy-root] .tippy-box[data-placement^="bottom"]:not([data-theme]) > .tippy-arrow::before {
border-bottom-color: var(--color-background-tippy-box);
}
[data-tippy-root] .tippy-box[data-placement^="left"]:not([data-theme]) > .tippy-arrow::before {
border-left-color: var(--color-background-tippy-box);
}
[data-tippy-root] .tippy-box[data-placement^="right"]:not([data-theme]) > .tippy-arrow::before {
border-right-color: var(--color-background-tippy-box);
}
[data-tippy-root] .tippy-arrow::before {
/* `.tippy-arrow:before` element sometimes
* inherits the height of the parent, we
* don't want any height here since we
* want it to remain an triangle.
* The bug was only found in Firefox.
*/
height: 0 !important;
}
[data-tippy-root] {
/* If the text in the tooltips stretches to multiple lines,
* we want the lines to be left-indented and not right-indented
* by default.
*/
text-align: left;
}
[data-tippy-root] .tooltip-hotkey-hints {
box-sizing: inherit;
display: flex;
align-self: flex-start;
margin: 0 -5px 0 10px;
gap: 4px;
}
[data-tippy-root] span.tooltip-hotkey-hint {
border: 1px solid hsl(225deg 100% 84%);
border-radius: 3px;
color: hsl(225deg 100% 84%);
padding: 0 5px;
text-align: center;
white-space: nowrap;
}
[data-tippy-root] .channel-privacy-type-icon {
width: 9px;
padding-left: 2px;
top: 0.5px;
}
/* If the reference of the tooltip is went offscreen while scrolling,
the tooltip will be visible until the scrolling stops. Popper adds
`data-reference-hidden` attribute to those tooltips whole reference is
hidden. Since tooltips have `absolute` position, they can occupy scroll
space offscreen and cause document to have the wrong scroll height.
Setting `display: none` makes sure it doesn't occupy any offscreen space.
NOTE: This data attribute has changed each time in the past 3 releases and
if we upgrade tippy from v6, we should check if this attribute is still valid.
See https://github.com/atomiks/tippyjs/issues/555 for some discussion on this.
*/
[data-tippy-root] [data-reference-hidden]:not(.show-when-reference-hidden) {
display: none;
}
/*!************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
!*** css ../node_modules/.pnpm/css-loader@7.1.2_webpack@5.102.1/node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[6].use[1]!../node_modules/.pnpm/postcss-loader@8.2.0_postcss@8.5.6_typescript@5.9.3_webpack@5.102.1/node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[6].use[2]!./styles/components.css ***!
\************************************************************************************************************************************************************************************************************************************************************************************************************************/
/* Reusable, object-oriented CSS base components for all Zulip pages
(both web app and portico). */
label.checkbox {
padding: 0;
display: inline-block;
position: relative;
vertical-align: top;
min-height: 20px;
}
label.checkbox input[type="checkbox"] {
position: absolute;
clip-path: rect(0 0 0 0);
}
label.checkbox input[type="checkbox"] ~ .rendered-checkbox {
display: inline-block;
vertical-align: middle;
position: relative;
top: -2px;
padding: 2px;
margin: 0 5px 0 0;
height: 10px;
width: 10px;
font-weight: 300;
line-height: 0.8;
font-size: 1.3rem;
text-align: center;
/* Color variables are not imported to the portico, so we duplicate
the light-mode color value here as a fallback. */
border: 1px solid
var(--color-border-rendered-checkbox, hsl(0deg 0% 0% / 60%));
border-radius: 4px;
cursor: pointer;
}
label.checkbox input[type="checkbox"]:checked ~ .rendered-checkbox {
/* As with the border color above, we duplicate
the light-mode SVG URL value here as a fallback. */
background-image: var(
--svg-url-rendered-checkbox,
url(files/images/checkbox.svg)
);
background-size: 85%;
background-position: 50% 50%;
background-repeat: no-repeat;
}
label.checkbox input[type="checkbox"]:disabled ~ .rendered-checkbox {
opacity: 0.5;
cursor: not-allowed;
}
label.checkbox:has(.enter_sends) {
vertical-align: middle;
}
a.no-style {
color: inherit;
}
a.no-underline,
a.no-underline:hover,
a.no-underline:focus {
-webkit-text-decoration: none;
text-decoration: none;
}
.italic {
font-style: italic;
}
.simplebar-track .simplebar-scrollbar::before {
background-color: hsl(0deg 0% 0%);
box-shadow: 0 0 0 1px hsl(0deg 0% 100% / 33%);
}
.simplebar-track.simplebar-vertical {
transition: width 0.2s ease 1s; /* stylelint-disable-line plugin/no-low-performance-animation-properties */
}
.simplebar-track.simplebar-vertical.simplebar-hover {
width: 15px;
transition: width 0.2s ease; /* stylelint-disable-line plugin/no-low-performance-animation-properties */
}
.simplebar-track.simplebar-horizontal {
transition: height 0.2s ease 1s; /* stylelint-disable-line plugin/no-low-performance-animation-properties */
}
.simplebar-track.simplebar-horizontal.simplebar-hover {
height: 15px;
transition: height 0.2s ease; /* stylelint-disable-line plugin/no-low-performance-animation-properties */
}
i.zulip-icon.zulip-icon-bot {
color: var(--color-icon-bot);
}
/* Hide the somewhat buggy browser show password feature in IE, Edge,
since it duplicates our own "show password" widget. */
input::-ms-reveal {
display: none;
}
.password-div {
position: relative;
}
.password-div .password_visibility_toggle {
position: absolute;
right: 10px;
top: 42px;
opacity: 0.6;
}
.password-div .password_visibility_toggle:hover {
opacity: 1;
}
select.bootstrap-focus-style:focus {
outline: 1px dotted hsl(0deg 0% 20%);
outline: 5px auto -webkit-focus-ring-color;
outline-offset: -2px;
transition: none;
}
/*!*******************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
!*** css ../node_modules/.pnpm/css-loader@7.1.2_webpack@5.102.1/node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[6].use[1]!../node_modules/.pnpm/postcss-loader@8.2.0_postcss@8.5.6_typescript@5.9.3_webpack@5.102.1/node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[6].use[2]!./styles/rendered_markdown.css ***!
\*******************************************************************************************************************************************************************************************************************************************************************************************************************************/
/* We use a custom counter here for Safari to
get better control of its counter positioning.
Because Safari does not recognize `content`
properties on `::marker`, the style here better
approximates the same styles set on `::marker`
below. */
@counter-style numbers {
system: numeric;
symbols: "0" "1" "2" "3" "4" "5" "6" "7" "8" "9";
suffix: ".";
}
.rendered_markdown p {
margin: 0 0 var(--markdown-interelement-space-px);
}
.rendered_markdown p:has( + ul, + ol) {
/* When a paragraph is immediately followed
by a list sibling, we reduce the paragraph's
ordinary bottom space by half. */
margin-bottom: calc(var(--markdown-interelement-space-px) / 2);
}
/* The spacing between two paragraphs is double the usual value.
We coordinate this spacing matches so that it matches the
spacing between paragraphs in two consecutive 1-line messages. */
.rendered_markdown p + p {
margin-top: var(--markdown-interelement-doubled-space-px);
}
.rendered_markdown ul {
margin: 0 0 var(--markdown-interelement-space-px) 0;
/* Because browsers use inline padding, we set the
same property here to offset bullets. */
padding-inline-start: 1.1ch;
/* By setting Unicode characters of our own, we
gain better, cross-browser alignment of bullets. */
list-style-type: "•";
}
.rendered_markdown ul ul {
list-style-type: "◦";
}
.rendered_markdown ul ul ul {
list-style-type: "▪︎";
}
.rendered_markdown ul > li {
/* This aligns bullets to roughly the
center of a single-digit counter.
11.2px at 16px/1em */
padding-inline-start: 0.7em;
}
.rendered_markdown ul > li::marker {
/* This is an eyeballed value, but it makes the
otherwise diminutive markers specified above
both larger *and* better vertically centered. */
font-size: 1.3em;
/* We do not want the line-height for the item text
affected by the larger font-size, though. So we
zero it out. */
line-height: 0;
}
.rendered_markdown ol {
/* For the sake of Safari, we reference the `numbers`
counter defined on `@counter-style` above. */
list-style: numbers;
/* To preserve the `start` attribute on lists that
begin with a number other than 1, we update the
`counter-reset` in postprocess_content.ts. */
counter-reset: count;
margin: 0 0 var(--markdown-interelement-space-px) 0;
/* Because browsers use inline padding, we set the
same here to offset the counters. */
padding-inline-start: 2.1ch;
}
.rendered_markdown ol > li {
counter-increment: count 1;
/* 3.2px at 16px/1em */
padding-inline-start: 0.2em;
}
.rendered_markdown ol > li::marker {
content: counter(count, decimal) ". ";
}
/* To avoid cutting off the focus ring on links, we set
padding on first children most likely to take links.
We account for this extra space on `.message_content`. */
.rendered_markdown > p:first-child,.rendered_markdown > ul:first-child,.rendered_markdown > ol:first-child {
padding-top: var(--message-box-link-focus-ring-block-padding);
}
/* We set margin according to the length of the longest list counter.
The values here keep the counters flush left, just like paragraph
text. */
.rendered_markdown .counter-length-1 {
padding-inline-start: 2.1ch;
}
.rendered_markdown .counter-length-2 {
padding-inline-start: 3.1ch;
}
.rendered_markdown .counter-length-3 {
padding-inline-start: 4.1ch;
}
.rendered_markdown .counter-length-4 {
padding-inline-start: 5.1ch;
}
.rendered_markdown .counter-length-5 {
padding-inline-start: 6.1ch;
}
.rendered_markdown .counter-length-6 {
padding-inline-start: 7.1ch;
}
.rendered_markdown hr {
border-bottom: 1px solid hsl(0deg 0% 87%);
border-top: 1px solid hsl(0deg 0% 87%);
/* Override Bootstrap with doubled interelement space */
margin: calc(var(--markdown-interelement-space-px) * 2) 0;
}
/* Headings */
.rendered_markdown h1,.rendered_markdown h2,.rendered_markdown h3,.rendered_markdown h4,.rendered_markdown h5,.rendered_markdown h6 {
font-weight: 600;
line-height: 1.4;
/* Headings take a margin-top because of the pronounced extra
space they require, but are zeroed out below when they open
a message. */
margin-top: 15px;
margin-bottom: var(--markdown-interelement-space-px);
}
/* Headings: Ensure that messages that start with a heading don't have
a weirdly blank area at the very start of the message. */
.rendered_markdown h1:first-child,.rendered_markdown h2:first-child,.rendered_markdown h3:first-child,.rendered_markdown h4:first-child,.rendered_markdown h5:first-child,.rendered_markdown h6:first-child {
margin-top: 0;
}
/* We use a modest progression of heading sizes to make them stand out
from normal next but avoid taking up too much space. */
.rendered_markdown h1 {
font-size: 1.4em;
}
.rendered_markdown h2 {
font-size: 1.3em;
}
.rendered_markdown h3 {
font-size: 1.2em;
}
.rendered_markdown h4 {
font-size: 1.1em;
}
.rendered_markdown h5 {
font-size: 1.05em;
}
.rendered_markdown h6 {
font-size: 1em;
}
/* Formatting for blockquotes */
.rendered_markdown blockquote {
/* This keeps the blockquote text block
aligned with list-item text blocks.
12.4px at 16px/1em */
padding: 0;
padding-inline-start: 0.775em;
}
.rendered_markdown blockquote,.rendered_markdown .message_embed {
/* We want to keep the border roughly centered
with bullets and single-digit list markers.
3.5px at 16px/1em */
margin: 0 0 var(--markdown-interelement-space-px) 0;
margin-inline-start: 0.2188em;
border-inline-start: 4px solid
var(--color-text-message-blockquote-border);
}
/* Formatting for Markdown tables */
.rendered_markdown table {
padding-right: 10px;
margin: 0 5px var(--markdown-interelement-space-px);
width: 99%;
display: block;
max-width: -moz-fit-content;
max-width: fit-content;
overflow-x: auto;
white-space: nowrap;
border-collapse: collapse;
}
.rendered_markdown thead {
background-color: var(--color-background-rendered-markdown-thead);
}
.rendered_markdown tr {
display: table-row;
vertical-align: inherit;
}
.rendered_markdown tr th {
border: 1px solid var(--color-border-rendered-markdown-table);
padding: 4px;
text-align: left;
}
.rendered_markdown tr td {
border: 1px solid var(--color-border-rendered-markdown-table);
padding: 4px;
}
/* Emoji; sized to be easily understood while not overwhelming text. */
.rendered_markdown .emoji {
/* The box for emoji is allowed to be larger than the size of the
line-height. */
height: var(--length-line-oversize-block);
width: var(--length-line-oversize-block);
/* A negative top and bottom margin adjustment allows emoji
to size larger than the size of the line, without disturbing
the surrounding lines of text. */
margin: var(--length-line-oversize-block-margin-adjust) auto;
/* We set the alignment programmatically, as an em value.
Because the negative margins above are equal, top and bottom,
this vertical offset value works without adjustment for
oversize emoji blocks. */
vertical-align: var(--line-fitted-vertical-align-offset-em);
}
/* Mentions and alert words */
.rendered_markdown .user-group-mention,.rendered_markdown .user-mention,.rendered_markdown .topic-mention {
padding: 0 3px;
border-radius: 3px;
white-space: nowrap;
/* Reduce the font-size to reduce the
footprint of the background highlight. */
font-size: 0.95em;
}
.rendered_markdown .mention-content-wrapper {
/* Restore the font-size to match the rest
of the message area. */
font-size: 1.0526em;
}
.rendered_markdown .user-mention {
color: var(--color-text-other-mention);
background-color: var(--color-background-text-direct-mention);
}
.rendered_markdown .user-mention.user-mention-me {
color: var(--color-text-self-direct-mention);
font-weight: 600;
}
.rendered_markdown .user-mention:hover {
background-color: var(--color-background-text-hover-direct-mention);
}
.rendered_markdown .user-mention,.rendered_markdown .user-group-mention {
/* We have to explicitly mention this for compose box preview
where cursor is set to not-allowed */
cursor: pointer;
}
/* We show the same cursor as the parent element for `@all`
mention */
.rendered_markdown .user-mention-all {
cursor: inherit;
}
.rendered_markdown .user-mention[data-user-id="*"],.rendered_markdown .user-group-mention,.rendered_markdown .topic-mention {
color: var(--color-text-other-mention);
background-color: var(--color-background-text-group-mention);
}
.rendered_markdown .user-mention.user-mention-me[data-user-id="*"],.rendered_markdown .user-group-mention.user-mention-me:not(.does-not-exist),.rendered_markdown .topic-mention.user-mention-me:not(.does-not-exist) {
color: var(--color-text-self-group-mention);
font-weight: 600;
}
.rendered_markdown .stream-topic {
/* Display whitespace within topics. */
white-space: pre-wrap;
}
.rendered_markdown .user-group-mention:hover {
background-color: var(--color-background-text-hover-group-mention);
}
.rendered_markdown .alert-word {
background-color: var(--color-background-alert-word);
}
/* Timestamps */
.rendered_markdown time {
background: hsl(0deg 0% 93%);
border-radius: 3px;
box-shadow: 0 0 0 1px hsl(0deg 0% 80%);
white-space: nowrap;
margin: 0 2px;
/* Reduce the font-size to reduce the
footprint of the timestamp block. */
font-size: 0.95em;
}
.rendered_markdown time .timestamp-content-wrapper {
/* Restore the font-size to match the rest
of the message area, and apply the layout
for the icon. */
font-size: 1.0526em;
padding: 0 0.2em;
display: inline-flex;
align-items: baseline;
gap: 3px;
}
.rendered_markdown time .markdown-timestamp-icon {
align-self: center;
}
/* LaTeX styling */
.rendered_markdown .katex-display {
/* KaTeX sometimes overdraws its bounding box by a little, so we
enlarge its scrolling area by adding 3px of padding to its top
and bottom. To prevent what will appear as extra whitespace,
we reduce surrounding margins by the same 3px. */
padding: 3px 0;
margin: -3px 0;
overflow: auto hidden;
}
.rendered_markdown .katex-mathml annotation {
/* Because annotations are never displayable, browser user-agent
stylesheets mark them as not displayable, which has the
side effect of having them not be included in the HTML
version of copying the content. Override this, so KaTeX can
be copy/pasted within Zulip. */
-webkit-user-select: all;
user-select: all;
display: inline;
}
.rendered_markdown .tex-error {
color: hsl(0deg 0% 50%);
}
/* Spoiler styling */
.rendered_markdown .spoiler-block {
border: hsl(0deg 0% 50%) 1px solid;
padding: 2px 8px 2px 10px;
border-radius: 10px;
/* Space any subsequent Markdown content the same
distance as adjacent paragraphs are spaced. */
margin: 0 0 var(--markdown-interelement-doubled-space-px);
}
.rendered_markdown .spoiler-block .spoiler-header {
/* We use flexbox to display the spoiler message
and button. */
display: flex;
align-items: center;
padding: 8px 5px;
font-weight: bold;
}
.rendered_markdown .spoiler-block .spoiler-header .spoiler-header-text {
/* Disallow margin from ordinary rendered-markdown
elements. The header's vertical space is handled
independently by padding on .spoiler-header. */
margin-bottom: 0;
/* Message grows to push the arrow to the right,
but shrinks so as to allow long multi-line
spoiler messages to wrap. */
flex: 1 1 auto;
}
.rendered_markdown .spoiler-block .spoiler-header time {
/* Time tag pushes the arrow out of view when overflow,
adding white-space property prevents this by wrapping
the element */
white-space: normal;
}
.rendered_markdown .spoiler-block .spoiler-content {
overflow: hidden;
border-top: hsl(0deg 0% 50%) 0 solid;
transition:
/* stylelint-disable-next-line plugin/no-low-performance-animation-properties */
height 0.4s ease-in-out,
border-top 0.4s step-end,
padding 0.4s step-end; /* stylelint-disable-line plugin/no-low-performance-animation-properties */
padding: 0;
height: 0;
}
.rendered_markdown .spoiler-block .spoiler-content.spoiler-content-open {
border-top: hsl(0deg 0% 50%) 1px solid;
transition:
/* stylelint-disable-next-line plugin/no-low-performance-animation-properties */
height 0.4s ease-in-out,
border-top 0.4s step-start,
padding 0.4s step-start; /* stylelint-disable-line plugin/no-low-performance-animation-properties */
padding: 5px;
height: auto;
}
.rendered_markdown .spoiler-block .spoiler-button {
/* Keep the button to a consistent right-hand edge. */
padding-right: 3px;
}
.rendered_markdown .spoiler-block .spoiler-button:hover .spoiler-arrow::before {
background-color: hsl(0deg 0% 50%);
}
.rendered_markdown .spoiler-block .spoiler-button:hover .spoiler-arrow::after {
background-color: hsl(0deg 0% 50%);
}
.rendered_markdown .spoiler-block .spoiler-arrow {
float: right;
width: 15px;
cursor: pointer;
transition: transform 0.4s ease;
transform: rotate(45deg);
}
.rendered_markdown .spoiler-block .spoiler-arrow::before {
position: absolute;
content: "";
display: inline-block;
width: 12px;
height: 3px;
background-color: hsl(0deg 0% 83%);
transition: transform 0.4s ease;
}
.rendered_markdown .spoiler-block .spoiler-arrow::after {
position: absolute;
content: "";
display: inline-block;
width: 12px;
height: 3px;
background-color: hsl(0deg 0% 83%);
transition: transform 0.4s ease;
}
.rendered_markdown .spoiler-block .spoiler-arrow::after {
position: absolute;
transform: rotate(90deg);
top: -5px;
left: 5px;
}
.rendered_markdown .spoiler-block .spoiler-arrow.spoiler-button-open {
transform: rotate(45deg) translate(-5px, -5px);
}
.rendered_markdown .spoiler-block .spoiler-arrow.spoiler-button-open::before {
transform: translate(10px, 0);
}
.rendered_markdown .spoiler-block .spoiler-arrow.spoiler-button-open::after {
transform: rotate(90deg) translate(10px, 0);
}
/* embedded link previews */
.rendered_markdown .message-thumbnail-gallery {
display: flex;
flex-flow: row wrap;
place-items: center center;
gap: 5px;
margin-bottom: var(--markdown-interelement-space-px);
}
/* We used to use this for certain dropbox previews, we are keeping
this around as to not break any previous instances of these
previews. */
.rendered_markdown .message_inline_image_title {
font-weight: bold;
}
.rendered_markdown .twitter-image,.rendered_markdown .message-media-preview-image,.rendered_markdown .message-media-preview-video {
/* Set a background for the image; the background will be visible
behind the width of the transparent border. */
border: solid 3px transparent;
transition: background 0.3s ease;
background: var(--color-background-image-thumbnail);
}
.rendered_markdown .twitter-image:hover,.rendered_markdown .message-media-preview-image:hover,.rendered_markdown .message-media-preview-video:hover {
background: var(--color-background-image-thumbnail-hover);
}
.rendered_markdown .twitter-image .media-anchor-element,.rendered_markdown .message-media-preview-image .media-anchor-element,.rendered_markdown .message-media-preview-video .media-anchor-element {
display: block;
}
.rendered_markdown .twitter-image .media-image-element,.rendered_markdown .message-media-preview-image .media-image-element,.rendered_markdown .message-media-preview-video .media-image-element {
display: block;
object-fit: scale-down;
/* Sizing CSS for inline images requires care, because images load
asynchronously, and browsers will unfortunately jump your
scroll position when elements load above the current
position in the message feed in a way that changes the
height of elements. (As of March 2022, both Firefox and
Chrome exhibit this problem, though in Chrome it is pretty
subtle).
We prevent this by utilizing dimensions on the `` elements,
but further care is needed because different layout mechanisms,
including inline-block, can ignore those dimensions. For that
reason, we enforce a minimum 4em square for "dinky" images,
and set the scaled-down width on all others via JavaScript.
If there are several images next to each other, we display
them in a grid format; the same considerations require
use to either use a scrollable region or set a predictable
size for images so that the browser statically knows whether
it'll need to overflow. We choose predictable sizes here. */
/* Ensure a reasonable clickable area on
extremely tall or extremely wide images. */
min-width: 4em;
min-height: 4em;
/* Constrain height to 10em, but otherwise keep
the width to the size of the gallery, and
therefore the message area. */
max-height: 10em;
max-width: 100%;
/* Allow height and width to grow as needed, though
note we set the scaled-down `width` property on
each image in JavaScript to keep flexbox from
collapsing to the min-height and min-width values
set above... */
width: auto;
height: auto;
}
.rendered_markdown .twitter-image img.image-loading-placeholder,.rendered_markdown .message-media-preview-image img.image-loading-placeholder,.rendered_markdown .message-media-preview-video img.image-loading-placeholder {
content: var(--svg-url-thumbnail-loader);
}
.rendered_markdown .twitter-tweet {
border: 1px solid hsl(0deg 0% 87%);
padding: 0.5em 0.75em;
margin-bottom: 0.25em;
overflow-wrap: anywhere;
min-height: 48px;
}
.rendered_markdown .twitter-avatar {
float: left;
width: 48px;
height: 48px;
margin-right: 0.75em;
}
/* We used to use this for certain dropbox previews, we are keeping
this around as to not break any previous instances of these
previews. */
.rendered_markdown .message_inline_ref {
margin-bottom: var(--markdown-interelement-space-px);
margin-inline-start: 5px;
height: 50px;
display: block !important;
border: none !important;
}
.rendered_markdown .media-image-element {
cursor: zoom-in;
}
.rendered_markdown .youtube-video .media-image-element,.rendered_markdown .vimeo-video .media-image-element,.rendered_markdown .embed-video .media-image-element {
cursor: pointer;
}
.rendered_markdown .youtube-video .media-image-element {
/* We do this for the sake of increasing
the size of older YouTube thumbnail
previews, but there are no ill effects
on newer preview images. */
object-fit: contain;
}
.rendered_markdown .message_inline_video,.rendered_markdown .message_inline_animated_image_still,.rendered_markdown .youtube-video .media-anchor-element {
/* Once collections of thumbnails are set to render as
flex items, this can be updated to use `display: grid`
instead of `display: inline-grid`. */
display: inline-grid;
grid-template: "media" minmax(0, auto) / minmax(0, auto);
place-items: center center;
}
.rendered_markdown .message_inline_video:not(.does-not-exist):hover::after {
transform: scale(1);
}
.rendered_markdown .message_inline_animated_image_still:not(.does-not-exist):hover::after {
transform: scale(1);
}
.rendered_markdown .youtube-video .media-anchor-element:hover::after {
transform: scale(1);
}
/* The .media-anchor-selector is for all media
except YouTube, which needs to place
.media-image-element on the grid. */
.rendered_markdown .message_inline_video:not(.does-not-exist) .media-anchor-element,.rendered_markdown .message_inline_animated_image_still:not(.does-not-exist) .media-anchor-element,.rendered_markdown .youtube-video .media-anchor-element .media-anchor-element,.rendered_markdown .message_inline_video:not(.does-not-exist) .media-image-element,.rendered_markdown .message_inline_animated_image_still:not(.does-not-exist) .media-image-element,.rendered_markdown .youtube-video .media-anchor-element .media-image-element {
grid-area: media;
}
.rendered_markdown .message_inline_video:not(.does-not-exist)::after {
grid-area: media;
content: "";
background-image: url(files/images/play_button.svg);
background-position: center center;
background-repeat: no-repeat;
/* 32px at 14px/1em */
background-size: 2.2857em;
/* Match the box to the play button's
background-size value. */
width: 2.2857em;
height: 2.2857em;
border-radius: 100%;
transform: scale(0.8);
transition: transform 0.2s;
}
.rendered_markdown .message_inline_animated_image_still:not(.does-not-exist)::after {
grid-area: media;
content: "";
background-image: url(files/images/play_button.svg);
background-position: center center;
background-repeat: no-repeat;
/* 32px at 14px/1em */
background-size: 2.2857em;
/* Match the box to the play button's
background-size value. */
width: 2.2857em;
height: 2.2857em;
border-radius: 100%;
transform: scale(0.8);
transition: transform 0.2s;
}
.rendered_markdown .youtube-video .media-anchor-element::after {
grid-area: media;
content: "";
background-image: url(files/images/play_button.svg);
background-position: center center;
background-repeat: no-repeat;
/* 32px at 14px/1em */
background-size: 2.2857em;
/* Match the box to the play button's
background-size value. */
width: 2.2857em;
height: 2.2857em;
border-radius: 100%;
transform: scale(0.8);
transition: transform 0.2s;
}
.rendered_markdown .message_inline_video:not(.does-not-exist) .media-video-element,.rendered_markdown .message_inline_animated_image_still:not(.does-not-exist) .media-video-element,.rendered_markdown .youtube-video .media-anchor-element .media-video-element {
display: block;
object-fit: contain;
/* Since we do not yet read height and width
values for media thumbnails, we carry forward
reasonable dimensions for a landscape thumbnail
here. */
height: 8em;
width: 12em;
}
.rendered_markdown .youtube-video .media-anchor-element {
/* We display the youtube-video anchor
as a grid, not inline grid, to avoid
additional space beneath the thumbnail. */
display: grid;
}
.rendered_markdown .media-audio-wrapper {
vertical-align: middle;
display: inline-flex;
align-items: center;
max-width: 100%;
}
.rendered_markdown .media-audio-element {
flex: 0 1 auto;
/* Allow browser-native media players
to resize in narrow viewports. */
max-width: calc(100% - 30px);
}
.rendered_markdown .media-audio-download {
flex: 0 0 20px;
margin-left: 5px;
display: flex;
place-content: center center;
}
.rendered_markdown .media-audio-download:hover {
-webkit-text-decoration: none;
text-decoration: none;
}
.rendered_markdown .message_embed {
display: grid;
grid-template-columns:
[thumbnail-start] var(--length-message-preview-embeds)
[thumbnail-end fader-start data-container-start] minmax(0, 1fr)
[data-container-end fader-end];
grid-template-rows:
[border-start thumbnail-start data-container-start] calc(
var(--length-message-preview-embeds) - 10%
)
[fader-start] 10% [data-container-end thumbnail-end border-end fader-end];
-moz-column-gap: 5px;
column-gap: 5px;
/* We want to control the height without worrying about
padding... */
box-sizing: border-box;
/* ...though we will account for 10px of padding in the
height itself, so that the fade effect on long description
text works as expected. */
height: calc(var(--length-message-preview-embeds) + 10px);
padding: 5px;
}
.rendered_markdown .message_embed .message_embed_title {
font-size: 1.2em;
/* 5px at 16.8px (1.2 * 14px) */
margin-top: -0.2976em;
/* We set the markdown link colors here so
that the ellipsis takes it on truncated
lines. The ellipsis will not take an
underline even if we specify one, so
that is deliberately omitted here. */
color: var(--color-markdown-link);
}
.rendered_markdown .message_embed .message_embed_title:hover {
color: var(--color-markdown-link-hover);
}
.rendered_markdown .message_embed .message_embed_title .message-embed-title-link {
/* Line-clamp lines seem to have a small
interline area that's not clickable
unless we set the anchor to display as
a block. */
display: block;
}
.rendered_markdown .message_embed .message_embed_title,.rendered_markdown .message_embed .message_embed_description {
/* Clamp multi-line titles and descriptions
to two lines. */
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
/* Break overflowing words as necessary. */
overflow-wrap: break-word;
}
.rendered_markdown .message_embed .message_embed_image {
display: block;
grid-area: thumbnail;
/* Keep the embed image square. */
max-height: var(--length-message-preview-embeds);
background-size: cover;
background-position: center;
}
.rendered_markdown .message_embed .data-container {
grid-area: data-container;
}
.rendered_markdown a:not(.icon-button) {
color: var(--color-markdown-link);
-webkit-text-decoration: none;
text-decoration: none;
}
.rendered_markdown a:not(.icon-button) code {
color: var(--color-markdown-code-link);
}
.rendered_markdown a:not(.icon-button):hover,.rendered_markdown a:not(.icon-button):focus {
color: var(--color-markdown-link-hover);
-webkit-text-decoration: underline;
text-decoration: underline;
}
.rendered_markdown a:not(.icon-button):hover code,.rendered_markdown a:not(.icon-button):focus code {
color: var(--color-markdown-code-link-hover);
}
.rendered_markdown pre {
direction: ltr;
/* code block text is a bit smaller than normal text */
font-size: 0.825em;
line-height: 1.4;
white-space: pre;
overflow-x: auto;
word-break: break-all;
overflow-wrap: normal;
margin: 0 0 var(--markdown-interelement-space-px);
padding: 5px 7px 3px;
display: block;
border-radius: 4px;
}
.rendered_markdown pre:hover .code-buttons-container {
visibility: visible;
}
/* Hide the code buttons container when the user is
clicking on the code block other than the buttons.
This allows the user to select part of the the code
without the buttons interfering with the selection. */
.rendered_markdown pre:active .code-buttons-container:not(:hover) {
visibility: hidden;
}
.rendered_markdown pre code {
font-size: inherit;
padding: 0;
white-space: inherit;
overflow-x: scroll;
/* Unset to avoid compounding alpha values */
background-color: unset;
color: inherit;
border: 0;
}
.rendered_markdown code {
/* 11.55px when body is the default 14px; this is chosen to be
slightly above the 11.5px threshold where the height jumps by a
pixel on most platforms. */
font-size: 0.825em;
unicode-bidi: embed;
direction: ltr;
white-space: pre-wrap;
/* 1px at 14px/1em */
padding: 0.0714em 2px;
color: var(--color-markdown-code-text);
background-color: var(--color-markdown-code-background);
border-radius: 3px;
}
/* Container for buttons inside code blocks. */
.rendered_markdown .code-buttons-container {
/* Break white-space treatment inherited from
*/
white-space: collapse;
/* Present buttons in a flexbox layout. */
display: flex;
align-items: center;
gap: 3px;
/* Having absolute positioning here ensures that the element
doesn't scroll along with the code div in narrow windows */
position: absolute;
top: 4px;
right: 0;
padding: 0 4px;
/* Invisible unless
is hovered. */
visibility: hidden;
z-index: 0;
}
/* The properties of the code_external_link button are copied from the
copy-button class in app_components.css. */
.rendered_markdown .code_external_link {
display: flex;
border-radius: 4px;
color: var(--color-copy-button);
/* 2px at 16px/1em */
padding: 0.125em;
cursor: pointer;
}
.rendered_markdown .code_external_link :focus-visible {
background-color: var(--color-copy-button-square-bg-hover);
}
.rendered_markdown .code_external_link:hover {
background-color: var(--color-copy-button-square-bg-hover);
}
.rendered_markdown .code_external_link:active {
background-color: var(--color-copy-button-square-bg-active);
color: var(--color-copy-button-square-active);
}
.rendered_markdown .copy_codeblock,.rendered_markdown .code_external_link {
font-size: 1.1363em;
border: 1px solid var(--color-copy-button-square-bg-active);
-webkit-backdrop-filter: blur(20px);
backdrop-filter: blur(20px);
}
.group_mention .rendered_markdown pre,.direct_mention .rendered_markdown pre {
background-color: var(--color-markdown-pre-background-mentions);
border-color: var(--color-markdown-pre-border-mentions);
}
.group_mention .rendered_markdown code,.direct_mention .rendered_markdown code {
background-color: var(--color-markdown-code-background-mentions);
}
.group_mention .rendered_markdown pre code,.direct_mention .rendered_markdown pre code {
background-color: unset;
border-color: unset;
}
.preview_content .copy_codeblock {
/* We avoid displaying copy_codeblock button in previews, because it
feels odd given that you can just copy-paste the code out of
the "edit" state. We may change this decision when we add
menu options for viewing the code in a coding playground. */
display: none;
}
.informational-overlays .copy_codeblock {
display: none;
}
.message_edit_history_content .copy_codeblock {
/* Copy code block button is hidden in edit history, this is done
because of issues faced in copying code blocks in edit history
modal. This may be changed later as we decide upon a proper ux
for displaying edit-history. */
display: none;
}
.message_edit_history_content .code_external_link {
right: 5px;
}
.preview_content .code_external_link {
right: 12px;
}
@media (max-width: 575.98px) {
.rendered_markdown .message_embed {
height: auto;
}
.rendered_markdown .message_embed .message_embed_image {
width: 100%;
height: 100px;
}
.rendered_markdown .message_embed .data-container {
display: block;
max-width: 100%;
margin-top: 10px;
}
}
.codehilite {
display: block !important;
border: none !important;
background: none !important;
/* Set a relative positioning context to more precisely
position .code-buttons-container. This eliminates
problems with positioning shifts associated with
code blocks in spoilers, too. */
position: relative;
}
.codehilite pre {
color: var(--color-markdown-pre-text);
/* This is necessary to remove the background color
set by Pygments. */
background-color: var(--color-markdown-pre-background);
border: 1px solid var(--color-markdown-pre-border);
}
/* Both the horizontal scrollbar in as well as
vertical scrollbar in the is styled similarly. */
/* Ensure the horizontal scrollbar is visible on Mac */
.message_edit_form textarea::-webkit-scrollbar {
height: 8px;
width: 10px;
background-color: hsl(0deg 0% 0% / 5%);
}
.rendered_markdown pre::-webkit-scrollbar {
height: 8px;
width: 10px;
background-color: hsl(0deg 0% 0% / 5%);
}
.message_edit_form textarea::-webkit-scrollbar-thumb {
background-color: hsl(0deg 0% 0% / 30%);
border-radius: 20px;
cursor: auto;
-webkit-transition: background-color 0.2s ease;
transition: background-color 0.2s ease;
}
.rendered_markdown pre::-webkit-scrollbar-thumb {
background-color: hsl(0deg 0% 0% / 30%);
border-radius: 20px;
cursor: auto;
-webkit-transition: background-color 0.2s ease;
transition: background-color 0.2s ease;
}
.message_edit_form textarea::-webkit-scrollbar-thumb:hover {
background-color: hsl(0deg 0% 0% / 60%);
}
.rendered_markdown pre::-webkit-scrollbar-thumb:hover {
background-color: hsl(0deg 0% 0% / 60%);
}
/* Search highlight used in both topics and rendered_markdown */
.highlight {
background-color: hsl(51deg 100% 79%);
}
/* For elements where we want to show as much markdown content we can
in a single line and then hide the overflowing part. */
/* Any element which can `wrap` in the above defined elements. */
.single-line-rendered-markdown code,.single-line-rendered-markdown .stream-topic {
white-space: nowrap;
}
.user-mention i.zulip-icon-bot {
vertical-align: middle;
position: relative;
top: -1px;
padding-left: 0.3em;
}
/*!*******************************************************************************************************************************************************************************************************************************************************************************************************************!*\
!*** css ../node_modules/.pnpm/css-loader@7.1.2_webpack@5.102.1/node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[6].use[1]!../node_modules/.pnpm/postcss-loader@8.2.0_postcss@8.5.6_typescript@5.9.3_webpack@5.102.1/node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[6].use[2]!./styles/zulip.css ***!
\*******************************************************************************************************************************************************************************************************************************************************************************************************************/
html {
overflow: hidden scroll;
overscroll-behavior-y: none;
width: calc(100% - var(--disabled-scrollbar-width));
}
body,
html {
height: 100%;
touch-action: manipulation;
}
.column-middle,
#main_div {
background-color: var(--color-background);
}
#app-loading.loaded {
display: none !important; /* We are now loaded, by definition. */
}
body {
width: 100%;
margin: 0;
padding: 0;
font-size: var(--base-font-size-px);
/* The line-height used in most of the UI should be at least
its legacy value, but should expand with larger base
line-height values. */
line-height: max(
var(--legacy-body-line-height-unitless),
var(--base-line-height-unitless)
);
font-family: "Source Sans 3 VF", sans-serif;
color: var(--color-text-default);
background-color: var(--color-background);
/* Implementation for fluid layout width setting. */
}
body .header-main,body .app .app-main,body #compose-container {
max-width: calc(
var(--left-sidebar-max-width) + var(--message-area-max-width) +
var(--right-sidebar-max-width)
);
}
/* When sidebars are manually hidden, we set the max-width
for the layout to a different maximum width. This keeps
the message area predictably readable. */
body.hide-left-sidebar:not(.fluid_layout_width) .header-main,body.hide-left-sidebar:not(.fluid_layout_width) .app .app-main,body.hide-left-sidebar:not(.fluid_layout_width) #compose-container {
max-width: calc(
var(--message-area-max-width) + var(--right-sidebar-max-width)
);
/* When we're less than the xl_min breakpoint, we instead
constrain to just the message area's max-width, since
the right column will be hidden below that point. */
}
@container header-container (width < 75em) {
body.hide-left-sidebar:not(.fluid_layout_width) .header-main,body.hide-left-sidebar:not(.fluid_layout_width) .app .app-main,body.hide-left-sidebar:not(.fluid_layout_width) #compose-container {
max-width: var(--message-area-max-width);
}
}
@container app (width < 75em) {
body.hide-left-sidebar:not(.fluid_layout_width) .header-main,body.hide-left-sidebar:not(.fluid_layout_width) .app .app-main,body.hide-left-sidebar:not(.fluid_layout_width) #compose-container {
max-width: var(--message-area-max-width);
}
}
/* Fallback media query. */
@media (max-width: 1199.98px) {
body.without-container-query-support.hide-left-sidebar:not(.fluid_layout_width) .header-main,body.without-container-query-support.hide-left-sidebar:not(.fluid_layout_width) .app .app-main,body.without-container-query-support.hide-left-sidebar:not(.fluid_layout_width) #compose-container {
max-width: var(--message-area-max-width);
}
}
body.hide-right-sidebar:not(.fluid_layout_width) .header-main,body.hide-right-sidebar:not(.fluid_layout_width) .app .app-main,body.hide-right-sidebar:not(.fluid_layout_width) #compose-container {
max-width: calc(
var(--left-sidebar-max-width) + var(--message-area-max-width)
);
}
body.hide-left-sidebar.hide-right-sidebar:not(.fluid_layout_width) .header-main,body.hide-left-sidebar.hide-right-sidebar:not(.fluid_layout_width) .app .app-main,body.hide-left-sidebar.hide-right-sidebar:not(.fluid_layout_width) #compose-container {
max-width: var(--message-area-max-width);
}
body.fluid_layout_width .header-main,body.fluid_layout_width .app .app-main,body.fluid_layout_width #compose-container {
max-width: inherit;
}
input,
button {
/* Browsers default to inline-block,
so preserve this value. */
vertical-align: middle;
/* Preserve normal font-weight, though
it appears UA stylesheets do not set
the weight to other values. */
font-weight: normal;
/* Likewise with zeroed margin. */
margin: 0;
/* Reset these values from Firefox's
UA stylesheet (still present in
April 2025) */
}
input::-moz-focus-inner {
padding: 0;
border: 0;
}
button::-moz-focus-inner {
padding: 0;
border: 0;
}
input,
button,
select,
textarea {
font-family: "Source Sans 3 VF", sans-serif;
/* Disable bootstrap size CSS; we want to use our default font size on
body for input elements. */
line-height: normal;
font-size: inherit;
}
blockquote p {
font-weight: normal;
}
/* These colors are typically overridden,
but referencing them as variables prevents
specificity wars and ugly :not() selectors,
especially in dark theme. */
a {
cursor: pointer;
color: var(--color-text-generic-link);
-webkit-text-decoration: none;
text-decoration: none;
}
a:hover,
a:focus {
color: var(--color-text-generic-link-interactive);
-webkit-text-decoration: underline;
text-decoration: underline;
}
a:hover code,a:focus code {
color: var(--color-text-generic-link-interactive);
}
code,
pre {
font-family: "Source Code Pro", monospace;
}
.no-select {
-webkit-user-select: none;
user-select: none;
}
.text-select {
-webkit-user-select: text;
user-select: text;
}
p.n-margin {
margin: 10px 0 0;
}
.small-line-height {
line-height: 1.1;
}
.float-left {
float: left;
}
.float-right {
float: right;
}
.float-clear {
clear: both;
}
.no-margin {
margin: 0;
}
.history-limited-box {
color: hsl(16deg 60% 45%);
border: 1px solid hsl(16deg 60% 45%);
box-shadow: 0 0 2px hsl(16deg 60% 45%);
}
.all-messages-search-caution {
border: 1px solid hsl(192deg 19% 75% / 20%);
box-shadow: 0 0 2px hsl(192deg 19% 75% / 20%);
}
.history-limited-box,
.all-messages-search-caution {
border-radius: 4px;
display: none;
margin: 0 auto 12px;
padding: 5px;
/* Difference should be 16px to accommodate the icon. */
/* This emulates hanging indent. */
padding-left: 26px;
text-indent: -10px;
}
.history-limited-box .all-messages-search-caution-icon,.all-messages-search-caution .all-messages-search-caution-icon {
margin: 0 3px 0 1px;
}
.history-limited-box p,.all-messages-search-caution p {
margin: 0;
padding: 4px;
}
.messages-logo-svg {
width: 1.7188em; /* 27.5px at 16px/1em */
}
.bottom-messages-logo {
display: none;
}
.alert-zulip-logo,
.top-messages-logo,
.bottom-messages-logo {
width: 1.7143em; /* 24px at 14px/em */
height: 1.7143em;
margin: 0 auto 0.8571em; /* 12px at 14px/em */
}
.alert-zulip-logo svg circle,.top-messages-logo svg circle,.bottom-messages-logo svg circle {
fill: var(--color-zulip-logo);
stroke: var(--color-zulip-logo);
}
.alert-zulip-logo svg path,.top-messages-logo svg path,.bottom-messages-logo svg path {
fill: var(--color-zulip-logo-z);
stroke: var(--color-zulip-logo-z);
}
.loading.alert-zulip-logo circle,.loading.top-messages-logo circle,.loading.bottom-messages-logo circle {
fill: var(--color-zulip-logo-loading);
stroke: var(--color-zulip-logo-loading);
}
.top-messages-logo {
/* Since padding under message header is not transparent
we need to position it below the padding. */
padding-top: var(--header-padding-bottom);
}
/* See https://web.dev/animations-guide/#triggers before adding any funny animation properties here. */
@keyframes feedback-slide-in {
from {
transform: translateY(-120%);
opacity: 0;
}
to {
transform: translateY(50px);
opacity: 1;
}
}
@keyframes feedback-slide-out {
from {
transform: translateY(50px);
opacity: 1;
}
to {
transform: translateY(-120%);
opacity: 0;
}
}
#feedback_container {
display: none;
position: fixed;
width: 400px;
top: 0;
left: calc(50vw - 220px);
padding: 15px;
background-color: var(--color-background-modal);
border-radius: 5px;
box-shadow: 0 0 30px hsl(0deg 0% 0% / 25%);
z-index: 110;
}
@container app (width < 48em) {
#feedback_container {
width: calc(90% - 30px);
left: 5%;
top: 5%;
}
}
#feedback_container.show-feedback-container {
display: block;
animation: feedback-slide-in 0.6s forwards;
}
#feedback_container.slide-out-feedback-container {
animation: feedback-slide-out 0.6s;
}
#feedback_container h3 {
font-size: 16pt;
margin-top: 2px;
}
#feedback_container .exit-me {
margin: 0 0 0 5px;
}
#feedback_container .float-header {
display: flex;
align-items: center;
}
#feedback_container .feedback-button-container {
display: flex;
align-items: center;
margin-left: auto;
}
#navbar-fixed-container {
position: fixed;
top: 0;
z-index: 102;
}
/* Adjust width of any fixed / absolute positioned elements that might be visible in
the background when a overlay / modal is open. */
#navbar-fixed-container,
#compose {
width: calc(100% - var(--disabled-scrollbar-width));
}
.header {
width: 100%;
height: var(--header-height);
/* Since the headers are sticky, we need non-transparent background. */
background-color: var(--color-background);
/* Add 1px box-shadow below header so that if there is a gap between sticky header
and header at some zoom level, it is covered by this */
box-shadow: 0 1px 0 0 var(--color-background);
}
#navbar-middle .column-middle-inner,
.header,
#message_view_header {
background-color: var(--color-background-navbar);
box-shadow: inset 0 -1px 0 var(--color-navbar-bottom-border);
}
.app {
min-width: 100%;
min-height: 100%;
z-index: 99;
}
.app-main,
.header-main {
width: 100%;
margin: 0 auto;
padding: 0;
position: relative;
}
/* Move simplebar scrollbar to the left so that
browser scrollbar doesn't overlap with it. */
body.has-overlay-scrollbar .app-main .column-right .simplebar-track.simplebar-vertical {
right: var(--browser-overlay-scrollbar-width);
}
/* Styles for popovers rendered as an overlay at the
center of the screen, primarily used in mobile sizes. */
#popover-overlay-background {
position: fixed;
inset: 0;
/* Needs to be higher than the 105 for div.overlay so that the
emoji picker can render on top of the user status picker. */
z-index: 106;
background-color: hsl(0deg 0% 0% / 70%);
}
.white-space-preserve-wrap {
white-space: pre-wrap;
}
.white-space-preserve {
white-space: pre;
}
.white-space-nowrap {
white-space: nowrap;
}
/* Set flex display on login buttons only in the
spectator view. We want them to display none
otherwise. */
.spectator-view #top_navbar .column-right .spectator_login_buttons {
display: flex;
}
/* This applies to column-left both in navbar and app. */
.column-right {
width: var(--right-sidebar-width);
max-width: var(--right-sidebar-max-width);
position: absolute;
right: 0;
top: 0;
}
.column-right .spectator_login_buttons {
/* Allow the login buttons flexbox to
grow and shrink to fit the available
area. */
flex: 1 1 0;
/* Use a flexbox gap of 7px between the
buttons to reflect the outer 7px of space. */
gap: 7px;
/* Don't allow login buttons flexbox to
break out of the allotted right-column
space. */
overflow: hidden;
/* This should be removed once the navbar
has been rewritten entirely with modern
layout methods. For now, we pull this up
so that the buttons and search box are
the same height and their boxes sit on the
same invisible line. */
margin-top: -1px;
/* Prevent collisions with the search box. */
margin-left: 15px;
}
.column-right .spectator_login_buttons a {
font-size: calc(16em / 14);
/* Vertically size the buttons to
match the search box. */
line-height: 28px;
font-weight: 450;
letter-spacing: 0.03ch;
/* Allow individual buttons to grow
and shrink inside their containers,
with padding to prevent text from
sitting against the edge of the button. */
flex: 1 1 0;
padding: 0 4px;
/* Center the text nodes within the
flex items. */
text-align: center;
/* Internationalization: disallow wrapping,
and display an ellipsis when there's not
space enough to accommodate the button
text. */
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
/* Button curvature and transitions. */
border-radius: 4px;
transition: transform 100ms ease-out;
}
.column-right .spectator_login_buttons a:hover,.column-right .spectator_login_buttons a:focus {
-webkit-text-decoration: none;
text-decoration: none;
}
.column-right .spectator_login_buttons a:active {
transform: scale(0.98);
}
.column-right .spectator_login_buttons a i {
margin-right: 3px;
}
.column-right .spectator_login_buttons .login_button {
color: var(
--color-navbar-spectator-medium-attention-brand-button-text
);
background-color: var(
--color-navbar-spectator-medium-attention-brand-button-background
);
}
.column-right .spectator_login_buttons .login_button:hover,.column-right .spectator_login_buttons .login_button:focus {
color: var(
--color-navbar-spectator-medium-attention-brand-button-text
);
background-color: var(
--color-navbar-spectator-medium-attention-brand-button-background-hover
);
}
.column-right .spectator_login_buttons .login_button:active {
color: var(
--color-navbar-spectator-medium-attention-brand-button-text
);
background-color: var(
--color-navbar-spectator-medium-attention-brand-button-background-active
);
}
.column-right .spectator_narrow_login_button {
position: absolute;
top: 0;
right: 0;
height: var(--header-height);
width: var(--header-height);
}
@media (min-width: 1200px) and (min-height: 600px) {
.column-right .spectator_narrow_login_button {
display: none;
}
}
.column-right .spectator_narrow_login_button .login_button {
display: flex;
justify-content: center;
align-items: center;
height: 100%;
}
.column-right .spectator_narrow_login_button .login_button:hover {
-webkit-text-decoration: none;
text-decoration: none;
}
.column-right .spectator_narrow_login_button .login_button i {
color: var(--color-navbar-icon);
font-size: 1.6em;
}
/* This applies to column-left both in navbar and app. */
.column-left {
width: var(--left-sidebar-width);
max-width: var(--left-sidebar-width);
position: absolute;
left: 0;
top: 0;
}
.app-main .column-right.expanded,
.app-main .column-left.expanded {
/* We share a baseline z-index to make
sure overlays respect the .topmost-overlay
below. */
z-index: 10;
}
.app-main .column-right.expanded.topmost-overlay,
.app-main .column-left.expanded.topmost-overlay {
z-index: 15;
}
#message_feed_container,
.app-main .column-left .left-sidebar,
.app-main .column-right .right-sidebar {
padding-top: calc(
var(--navbar-fixed-height) + var(--header-padding-bottom)
);
}
.app-main {
height: 100%;
min-height: 100%;
}
.app-main::after {
/* We use `content` values to determine
viewport state from JavaScript; this
hides the values without disrupting
the document flow. */
position: absolute;
display: none;
}
.app-main .column-left .left-sidebar,.app-main .column-right .right-sidebar {
position: fixed;
z-index: 100;
}
.app-main .column-left .left-sidebar {
width: var(--left-sidebar-width);
padding-left: var(--left-sidebar-padding-left);
}
.app-main .column-right .right-sidebar {
padding-left: var(--right-sidebar-left-spacing);
width: var(--right-sidebar-width);
}
.app-main .column-middle {
min-height: 100%;
/* We need `overflow-y: visible` for sticky headers to work. */
}
/* We test for spec-aligned container query support
using these styles. */
.container-query-test {
/* Keep the test div from rendering. */
visibility: hidden;
/* Establish a container. */
container: test-container / inline-size;
/* Establish a positioning context that
conforming browsers will ignore. */
position: relative;
top: 100px;
}
.container-query-test .container-query-test-child {
/* Non-spec aligned browsers will keep
this element to the top of the containing
; spec-aligned browsers move it to the
top of the viewport. We check for this in
information_density.ts */
position: fixed;
top: 0;
}
/* With spec-aligned container support, we
can establish em-aware containers to
query as needed.
Note that container queries can only
act on children of the container, so
at least for now, we include separate
queries for #header-container in the
navbar as well as .app-main in capable
browsers.
*/
.with-container-query-support #header-container {
container: header-container / inline-size;
}
.with-container-query-support .app {
container: app / inline-size;
}
.column-middle,
#compose-content {
margin-right: var(--right-sidebar-width);
margin-left: calc(
var(--left-sidebar-width) + var(--left-sidebar-padding-left)
);
position: relative;
}
textarea,
input {
font-family: "Source Sans 3 VF", sans-serif;
}
/* Override browsers that use
`cursor: default` */
label,
button {
cursor: pointer;
}
/* Override Bootstrap's fixed sizes for various elements */
textarea,
label {
font-size: inherit;
line-height: inherit;
}
button:focus {
outline: 0;
}
/* Bootstrap's focus outline uses -webkit-focus-ring-color which doesn't exist in Firefox */
a:not(:active):focus,
button:focus-visible,
label.checkbox input[type="checkbox"]:focus ~ .rendered-checkbox,
i.fa:focus,
i.zulip-icon:focus-visible,
[role="button"]:focus {
outline: 2px solid var(--color-outline-focus);
/* TODO: change solid to auto once the Chromium bug #1105822 is fixed */
}
/* List of text-like input types taken from Bootstrap */
input[type="text"]:not(.input-element),input[type="password"]:not(.input-element),input[type="datetime"]:not(.input-element),input[type="datetime-local"]:not(.input-element),input[type="date"]:not(.input-element),input[type="month"]:not(.input-element),input[type="time"]:not(.input-element),input[type="week"]:not(.input-element),input[type="number"]:not(.input-element),input[type="email"]:not(.input-element),input[type="url"]:not(.input-element),input[type="search"]:not(.input-element),input[type="tel"]:not(.input-element),input[type="color"]:not(.input-element) {
font-size: inherit;
height: 1.4em;
background-color: var(--color-background-legacy-input);
border-color: var(--color-border-legacy-input);
}
input[type="text"]:not(.input-element):focus,input[type="password"]:not(.input-element):focus,input[type="datetime"]:not(.input-element):focus,input[type="datetime-local"]:not(.input-element):focus,input[type="date"]:not(.input-element):focus,input[type="month"]:not(.input-element):focus,input[type="time"]:not(.input-element):focus,input[type="week"]:not(.input-element):focus,input[type="number"]:not(.input-element):focus,input[type="email"]:not(.input-element):focus,input[type="url"]:not(.input-element):focus,input[type="search"]:not(.input-element):focus,input[type="tel"]:not(.input-element):focus,input[type="color"]:not(.input-element):focus {
border-color: var(--color-border-legacy-input-focus);
}
li,
.table th,
.table td {
line-height: inherit;
}
.bootstrap-btn {
font-size: inherit;
height: auto;
line-height: 100%;
}
/* Classes which style copy buttons */
.copy_button_base {
outline-color: hsl(0deg 0% 73%);
height: 18px;
width: 10px;
padding: 6px;
display: block;
/* The below two avoids the padded element from displaying
its own border and background color */
border: none;
background-clip: content-box;
}
.copy_button_base:hover svg path {
fill: var(--color-fill-hover-copy-icon);
}
.copy_message {
position: absolute;
top: 5px;
right: 5px;
height: 1em;
-webkit-backdrop-filter: blur(20px);
backdrop-filter: blur(20px);
outline: 1px solid var(--color-copy-button-square-bg-active);
}
#copy_generated_link_container {
display: flex;
gap: 4px;
align-items: center;
}
#copy_generated_invite_link {
position: relative;
right: -30px;
}
/* Classes for hiding and showing controls */
.notdisplayed {
display: none !important;
}
.notvisible {
visibility: hidden !important;
width: 0 !important;
min-width: 0 !important;
min-height: 0 !important;
height: 0 !important;
overflow: hidden !important;
position: absolute !important;
}
/* Lighter strong */
strong {
font-weight: 600;
}
.preserve_spaces {
white-space: pre-wrap;
}
.logout {
white-space: nowrap;
}
.buddy_list_tooltip_content {
text-align: left;
overflow-wrap: break-word;
/* 280px at 14px/1em */
max-width: 20em;
}
#change_visibility_policy_button_tooltip {
text-align: left;
}
#change_visibility_policy_button_tooltip .tooltip-privacy-icon {
position: relative;
display: inline-block;
}
#change_visibility_policy_button_tooltip .tooltip-privacy-icon .zulip-icon-lock {
margin-top: -0.15em !important;
}
#change_visibility_policy_button_tooltip .tooltip-privacy-icon i {
position: absolute;
top: 0.1667em;
}
#change_visibility_policy_button_tooltip .privacy-tooltip-stream-name {
margin-left: 1.25em;
}
.narrow-filter {
display: block;
position: relative;
}
@keyframes pulse-unread {
/* Only unread dots in collapsed Views
have offset variables set; all others
will fall back to 0 (no offset). */
0% {
transform: scale(1) translateX(var(--unread-dot-x-offset, 0));
}
50% {
transform: scale(var(--pulse-unread-scale-max))
translateX(var(--unread-dot-x-offset-scaled, 0));
}
100% {
transform: scale(1) translateX(var(--unread-dot-x-offset, 0));
}
}
.new-unread .unread_count {
animation: 2s ease-in-out 2 pulse-unread;
}
.messagebox-content .slow-send-spinner {
display: block;
font-size: 0.8571em; /* 12px at 14px/em */
text-align: right;
opacity: 0.8;
color: var(--color-text-default);
animation: rotate 1s infinite linear;
}
.star:hover {
cursor: pointer;
}
.copy-paste-text {
/* Hide the text that we want copy paste to capture */
position: absolute;
left: -99999px;
}
@keyframes rotate {
from {
transform: rotate(0deg);
}
to {
transform: rotate(359deg);
}
}
@keyframes fadeInMessage {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@keyframes fadeInEditNotice {
0% {
transform: translateX(-10px);
}
100% {
transform: translateX(0);
}
}
.selected_message .messagebox-content {
/* We add an outline and shift it inside the message so that without
any vertical padding changes, we can have the outline surrounding
the message without overflowing the boundary of the message in any case. */
outline: 1px solid var(--color-selected-message-outline);
border-radius: 5px;
outline-offset: -1px;
}
@media (hover: none) {
.selected_msg_for_touchscreen .message_reactions .reaction_button {
visibility: visible;
pointer-events: all;
}
}
/* Make the action icon on the message row
always visible while the popover is open */
.has_actions_popover .actions_hover {
visibility: visible !important;
pointer-events: all !important;
opacity: 1 !important;
}
.has_actions_popover .actions_hover i:focus {
/* Avoid displaying a focus outline outside the popover on the \vdots
icon when opened via the mouse. */
outline: 0 !important;
}
.has_actions_popover .info {
opacity: 1;
visibility: visible;
}
.small {
font-size: 80%;
}
.tiny {
font-size: 60%;
}
div.message-list {
border-collapse: separate;
margin-left: auto;
display: none;
width: 100%;
}
div.focused-message-list {
display: block;
}
/* In conversation view, always show the recipient bar action buttons */
div.focused-message-list.is-conversation-view .recipient_row .recipient_bar_controls {
opacity: 1;
transition: opacity 0.15s ease-in;
}
.rtl {
direction: rtl;
}
.topic_edit {
display: none;
flex-grow: 1;
}
.topic_edit .alert {
display: inline-block;
margin: 0;
padding: 0 10px;
line-height: 17px;
}
.topic_edit_form {
display: flex;
align-items: center;
gap: 5px;
margin: 0;
padding-right: 5px;
position: relative;
}
.inline_topic_edit {
flex: 1;
line-height: 1.2142em;
padding: 0 5px;
color: var(--color-text-default);
border-radius: 4px;
border: 1px solid hsl(0deg 0% 80%);
transition:
border-color linear 0.2s,
box-shadow linear 0.2s;
}
.inline_topic_edit: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%);
}
.inline_topic_edit.empty-topic-display::placeholder {
color: inherit;
}
.inline-topic-edit-placeholder {
position: absolute;
left: 5px;
max-width: 65%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
pointer-events: none;
visibility: hidden;
}
.inline-topic-edit-placeholder-visible {
visibility: visible;
}
.topic_edit_save {
--csstools-light-dark-toggle--0: var(--csstools-color-scheme--light) hsl(0deg 0% 0% / 60%);
border-color: var(--csstools-light-dark-toggle--0, hsl(0deg 0% 0% / 10%));
border-color: light-dark(hsl(0deg 0% 0% / 10%), hsl(0deg 0% 0% / 60%));
border-width: 1px;
border-style: solid;
background-clip: padding-box;
}
.information-settings .user-profile-picture,
.user_sidebar_entry.with_avatar .user-profile-picture,
.inline_profile_picture {
display: inline-block;
/* Don't inherit the line-height from message-avatar;
this preserves the dimensions and rounded corners
on the image itself. */
line-height: 1;
vertical-align: top;
border-radius: 4px;
overflow: hidden;
}
.information-settings .user-profile-picture.guest-avatar:not(.does-not-exist)::after {
outline: 2px solid hsl(0deg 0% 100%);
}
.user_sidebar_entry.with_avatar .user-profile-picture.guest-avatar::after {
outline: 2px solid hsl(0deg 0% 100%);
}
.guest-avatar.inline_profile_picture:not(.does-not-exist):not(.does-not-exist)::after {
outline: 2px solid hsl(0deg 0% 100%);
}
.inline_profile_picture {
width: var(--message-box-avatar-width);
height: var(--message-box-avatar-height);
}
.information-settings .user-profile-picture,
.user_sidebar_entry.with_avatar .user-profile-picture {
width: var(--right-sidebar-avatar-width);
height: var(--right-sidebar-avatar-height);
margin-right: var(--right-sidebar-avatar-right-margin);
}
.streamname {
font-weight: bold;
}
.top-navbar-container {
/* Calculate right margin so that title and description
elements can truncate and not collide with or run underneath
with the search section. */
margin-right: calc(
var(--search-box-width) + var(--navbar-content-righthand-offset)
);
overflow: hidden;
text-overflow: ellipsis;
}
.top-navbar-container-allow-description-extension {
overflow: visible;
}
#streamlist-toggle {
display: none;
position: absolute;
top: 0;
left: 0;
text-align: center;
}
.hide-streamlist-toggle-visibility,
.hide-navbar-buttons-visibility {
visibility: hidden;
}
#header-container .left-sidebar-toggle-button {
-webkit-text-decoration: none;
text-decoration: none;
color: var(--color-navbar-icon);
display: flex;
position: relative;
align-items: center;
justify-content: center;
width: var(--header-height);
height: var(--header-height);
}
#header-container .left-sidebar-toggle-button:hover {
background-color: var(--color-header-button-hover);
}
#header-container .left-sidebar-toggle-button:hover .left-sidebar-toggle-unreadcount {
border-color: var(--color-header-button-hover-no-alpha);
}
#header-container .left-sidebar-toggle-button:active {
background-color: var(--color-header-button-focus);
}
#header-container .left-sidebar-toggle-button:focus {
outline: 0;
}
#header-container .left-sidebar-toggle-button:focus-visible {
outline: none;
background-color: var(--color-header-button-focus);
}
#header-container .left-sidebar-toggle-button:active .left-sidebar-toggle-unreadcount {
border-color: var(--color-header-button-focus-no-alpha);
}
#header-container .left-sidebar-toggle-button:focus-visible .left-sidebar-toggle-unreadcount {
border-color: var(--color-header-button-focus-no-alpha);
}
.left-sidebar-toggle-unreadcount {
position: absolute;
display: none;
/* 6px at 16px/1em */
height: 0.375em;
width: 0.375em;
background-color: var(--color-navbar-icon);
/* 2px at 16px/1em */
border: 0.125em solid var(--color-background-navbar);
/* 6px at 16px/1em */
border-radius: 0.375em;
padding: 0;
/* At 16px/1em, the toggle icon is 20px on a side, which is
half the width of its container (40px on a side). To
place the 10px-wide unread counter correctly, then, we
set it to 25% of the right of the container, or 10px,
and likewise 25% down from the top of the container,
also 10px. */
top: 25%;
right: 25%;
}
nav .column-left {
text-align: left;
display: flex;
justify-content: left;
gap: 4px;
}
nav .column-left .brand {
display: flex;
align-items: center;
}
nav .column-left .nav-logo {
display: inline-block;
height: 1.25em; /* 20px at 16px em */
max-width: var(--realm-logo-max-width);
}
@media (max-height: 599.98px) {
nav .column-left .nav-logo {
height: 0.9375em; /* 15px at 16px em */
}
}
nav .column-left .left-sidebar-toggle-button .left-sidebar-toggle-unreadcount {
/* The toggle icon is half the width of its container
and is at the center of the container.
So, the left width starts from left 25% of the container
and ends till 75% of the container's width.
Similarly, vertically, the dot is starts at the top 25% of
the container's height and ends at 75% of the total height
So, the top right corner of the icon is at 25% from top and
75% from the right. This is the location where we place the
unread indicator dot. */
top: 25%;
right: 25%;
}
nav a.no-style:hover {
-webkit-text-decoration: none;
text-decoration: none;
cursor: pointer;
}
nav a .no-style {
-webkit-text-decoration: none;
text-decoration: none;
}
#bottom_whitespace {
display: block;
height: var(--max-unmaximized-compose-height);
}
.operator_value {
font-family: "Source Code Pro", monospace;
color: hsl(353deg 70% 65%);
}
.operator {
font-family: "Source Code Pro", monospace;
}
#loading_older_messages_indicator,
#loading_more_indicator {
margin: 10px;
}
#loading_older_messages_indicator_box_container,
#loading_more_indicator_box_container {
position: absolute;
left: 50%;
/* Override the base rules in app_components.css, which would require
coordination with loading.make_indicator */
}
#loading_older_messages_indicator_box_container .loading_indicator_spinner,#loading_more_indicator_box_container .loading_indicator_spinner {
height: 2.7143em; /* 38px at 14px/em */
width: 2.7143em; /* 38px at 14px/em */
}
#loading_older_messages_indicator_box,
#loading_more_indicator_box {
position: relative;
left: -1.3571em; /* 50% of 38px = 19px at 14px/em */
top: -3.0714em; /* -43px at 14px/em */
z-index: 1;
border-radius: 6px;
}
#page_loading_indicator {
margin: 10px auto;
}
#page_loading_indicator_box_container {
position: absolute;
left: 50%;
}
#page_loading_indicator_box {
position: relative;
/* 50% of 38px = 19px at 14px/1em */
left: -1.3571em;
/* -43px at 14px/1em */
top: -3.0714em;
z-index: 1;
border-radius: 6px;
}
#create_stream_subscribers {
margin-top: 10px;
}
#create_stream_subscribers .checkbox {
display: block;
}
#create_stream_subscribers .checkbox input[type="checkbox"] {
margin: 5px 0;
float: none;
}
.sub_button_row {
text-align: center;
}
div.topic_edit_spinner {
display: flex;
align-items: center;
width: 1.2em; /* 18px at 15px/em (from font size set in .message-header-contents) */
height: 1.2em; /* 18px at 15px/em */
}
div.topic_edit_spinner .loading_indicator_spinner {
width: 0.9333em; /* 14px at 15px/em (from font size set in .message-header-contents) */
height: 0.9333em; /* 14px at 15px/em */
}
div.topic_edit_spinner .loading_indicator_spinner path {
fill: var(--color-recipient-bar-controls-spinner);
}
.custom-time-input-value,
#invite-user-form {
margin: 0;
}
.invite-user-select {
vertical-align: middle;
}
#multiuse_invite_link {
width: 100%;
text-overflow: ellipsis;
white-space: nowrap;
display: inline-block;
overflow: hidden;
vertical-align: bottom;
}
#invite-user-form .loading_indicator_spinner {
height: 1em;
width: -moz-fit-content;
width: fit-content;
display: inline-block;
float: none;
margin: 0 5px;
}
.add-user-group-container,
.add_streams_container {
display: inline-flex;
align-items: center;
width: 100%;
}
#invite_welcome_custom_message_text {
resize: vertical;
height: 8em;
width: 100%;
box-sizing: border-box;
}
.custom-time-input-value {
width: 5ch;
margin-right: 15px;
padding: 4px 6px;
color: var(--color-text-default);
border-radius: 4px;
border: 1px 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;
}
.custom-time-input-value: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%);
}
.custom-time-input-unit {
width: auto;
}
.empty_feed_notice {
max-width: 42.8571em;
margin: 0 auto;
padding: 3em 1em;
text-align: center;
}
.empty-feed-notice-title {
font-size: 1.5em;
font-weight: 400;
line-height: inherit;
overflow-wrap: break-word;
}
.empty-feed-notice-description {
font-size: 1.1em;
}
.empty-feed-notice-description .search-query-word {
overflow-wrap: break-word;
}
.message-fade,
.user_sidebar_entry.user-fade {
opacity: 0.4;
}
.emoji {
height: 25px;
width: 25px;
/* Maintain `vertical-align` for inline-block styles in messages: */
vertical-align: middle;
/* But, for all others, use flexbox and its align-self property.
What is excellent about this is that flexbox will ignore the
`vertical-align` value, while inline-block contexts will ignore
the `align-self` property: */
align-self: center;
}
.status-emoji {
/* 16px at 14px/1em */
height: 1.1429em;
width: 1.1429em;
/* We are setting minimum width here because when the user's name is very long,
emoji's width decreases and causes it to break. */
min-width: 1.1429em;
/* In most contexts, status emoji appear immediately after a name
field with no margin. Position the status emoji with 3px of left
margin to space it from the name, and set no right margin so
that any components to the right appear equally distant as they
would be from a name. */
margin-left: 3px;
margin-right: 0;
}
/* FIXME: Combine this rule with the one in portico.css somehow? */
#pw_strength {
width: 100%;
height: 10px;
margin-bottom: 0;
}
.screen {
position: absolute;
left: 0;
top: 0;
background-color: hsl(0deg 0% 0%);
z-index: 20000;
}
.deactivated_user .deactivated-user-icon {
color: inherit;
margin-left: 2px;
font-size: 0.9em;
}
.no-drag {
-webkit-user-drag: none;
-webkit-user-select: none;
user-select: none;
}
/* Hide the up and down arrows in the Flatpickr datepicker year */
.flatpickr-calendar .flatpickr-months .numInputWrapper span {
display: none;
}
.flatpickr-calendar .flatpickr-time-separator {
position: relative;
left: 5px;
}
.flatpickr-calendar .flatpickr-time input {
margin: 0 5px;
min-height: 30px;
}
.flatpickr-calendar .flatpickr-confirm {
color: hsl(0deg 0% 100%);
background-color: hsl(213deg 90% 65%);
font-size: var(--flatpickr-confirm-button-font-size);
font-weight: 600;
}
@media (max-width: 767.98px) {
.flatpickr-calendar {
/* Center align flatpickr on mobile
* devices so that it doesn't go out of
* the viewport. */
left: 0 !important;
right: 0 !important;
margin: auto;
}
.flatpickr-calendar::after,.flatpickr-calendar::before {
border-top-width: 0 !important;
}
}
#about-zulip .exit {
font-size: 1.5rem;
font-weight: 600;
background-color: transparent;
border: none;
position: absolute;
right: 8px;
z-index: 1;
color: hsl(0deg 0% 67%);
}
#about-zulip .overlay-content {
width: 440px;
border-radius: 4px;
}
#about-zulip .zulip-version-info,#about-zulip .zulip-merge-base-info {
display: flex;
align-items: center;
gap: 5px;
}
#about-zulip .about-zulip-logo {
text-align: center;
margin: 30px;
}
#about-zulip .about-zulip-logo img {
height: 40px;
}
#about-zulip .overlay-body {
max-height: 60vh;
padding: 15px;
}
@media (max-width: 1199.98px) or (max-height: 599.98px) {
.spectator-view #navbar-middle {
/* = (width of button, square with header) * 3 (number of buttons) + 10px extra margin. */
margin-right: calc(var(--header-height) * 3 + 10px);
}
.spectator-view #help-menu,.spectator-view #gear-menu {
position: relative;
right: var(--header-height);
}
.spectator-view #top_navbar .column-right .spectator_login_buttons {
display: none;
}
.header-main .column-right {
/* For a diminutive right column in the navbar,
allow the width to be that of the flexing
button elements. */
width: auto;
}
}
@media (max-width: 767.98px) {
.spectator-view #navbar-middle {
/* = (width of button, square with header) * 3 (number of buttons) */
margin-right: calc(var(--header-height) * 3);
}
.spectator-view .header-main .column-right {
width: calc(var(--header-height) * 3);
}
}
.hide-right-sidebar .app-main .column-right {
display: none;
}
.hide-right-sidebar .app-main .column-right.expanded {
/* In the extended state, we open the sidebar
to its maximum possible size (otherwise, it
would be unnecessarily too narrow). */
--right-sidebar-width: var(--right-sidebar-max-width);
display: block;
position: absolute;
float: none;
right: 15px;
top: 0;
}
.hide-right-sidebar .app-main .column-right.expanded .simplebar-track.simplebar-vertical {
right: 0;
}
.hide-right-sidebar .app-main .column-right.expanded .right-sidebar {
box-shadow: 0 -2px 3px 0 hsl(0deg 0% 0% / 10%);
border-left: 1px solid var(--color-border-sidebar);
height: 100%;
width: var(--right-sidebar-width);
right: 0;
background-color: var(--color-background);
}
.hide-right-sidebar #navbar-middle {
margin-right: var(--right-column-collapsed-sidebar-width);
}
.hide-right-sidebar #compose-content,.hide-right-sidebar .app-main .column-middle {
margin-right: 7px;
}
.hide-right-sidebar-by-visibility .app-main .column-right {
visibility: hidden;
}
.left-sidebar-toggle-button .zulip-icon-panel-left {
display: none;
}
.column-middle.expanded .left-sidebar-toggle-button .zulip-icon-panel-left {
display: none;
}
.column-middle.expanded .left-sidebar-toggle-button .zulip-icon-panel-left-dashed {
display: block;
}
.hide-left-sidebar .app-main .left-sidebar-toggle-button .zulip-icon-panel-left {
display: block;
}
.hide-left-sidebar .app-main .left-sidebar-toggle-button .zulip-icon-panel-left-dashed {
display: none;
}
.hide-left-sidebar .app-main .column-left {
display: none;
}
.hide-left-sidebar .app-main .column-left.expanded {
/* In the extended state, we open the sidebar
to its maximum possible size (otherwise, it
would be unnecessarily too narrow). */
--left-sidebar-width: var(--left-sidebar-max-width);
display: block;
position: absolute;
float: none;
left: 0;
top: 0;
}
.hide-left-sidebar .app-main .column-left.expanded .left-sidebar {
background-color: var(--color-background);
box-shadow: 0 2px 3px 0 hsl(0deg 0% 0% / 10%);
border-right: 1px solid var(--color-border-sidebar);
height: 100%;
padding-left: 10px;
width: var(--left-sidebar-width);
}
.hide-left-sidebar #compose-content,.hide-left-sidebar .app-main .column-middle {
margin-left: 7px;
}
@container header-container (width > 48em) {
.hide-left-sidebar #navbar-middle {
margin-left: var(--middle-column-left-margin-fluid-layout);
}
}
@container header-container (width < 75em) {
.hide-left-sidebar #top_navbar .column-left {
width: auto;
}
}
@container header-container (width < 48em) {
.hide-left-sidebar #navbar-middle {
margin-left: 0;
}
}
@container app (width < 75em) {
.hide-left-sidebar #compose-content,.hide-left-sidebar .app-main .column-middle {
margin-left: 7px;
}
}
/* Media-query fallback for the cinched-up logo presentation. */
@media (min-width: 768.02px) {
.without-container-query-support.hide-left-sidebar #navbar-middle {
margin-left: var(--middle-column-left-margin-fluid-layout);
}
}
/* User can clearly see the unread count in the left sidebar. So,
we don't need an indicator here as it will only serve as a disctraction. */
body:not(.hide-left-sidebar) #header-container .column-left .left-sidebar-toggle-unreadcount {
display: none !important;
}
/* The large Log In button for spectators makes this rule
inappropriate for that view. */
@container header-container (width < 75em) {
body:not(.spectator-view) #navbar-middle {
/* = (width of button, square with header) * 4 (number of buttons) + 3px extra margin. */
margin-right: var(--right-column-collapsed-sidebar-width);
}
}
/* We have some regrettable but temporarily necessary code duplication
in the queries that follow.
In browsers that support spec-aligned, em-aware container queries,
we query on the app-main container. That enables breakpoints that
look best at a chose base font size.
However, in browsers that lag the spec, we fall back to the original
media queries. The layout will not look as good as it could, but
essential scrolling behavior will be maintained. */
@container app (width < 75em) {
.app-main .column-right {
display: none;
}
.app-main .column-right.expanded {
/* In the extended state, we open the sidebar
to its maximum possible size (otherwise, it
would be unnecessarily too narrow). */
--right-sidebar-width: var(--right-sidebar-max-width);
display: block;
position: absolute;
float: none;
right: 15px;
top: 0;
}
.app-main .column-right.expanded .simplebar-track.simplebar-vertical {
right: 0;
}
.app-main .column-right.expanded .right-sidebar {
box-shadow: 0 -2px 3px 0 hsl(0deg 0% 0% / 10%);
border-left: 1px solid var(--color-border-sidebar);
height: 100%;
width: var(--right-sidebar-width);
right: 0;
background-color: var(--color-background);
}
.app-main .column-middle {
margin-right: 7px;
}
#typing_notifications,
#scheduled_message_indicator,
#compose-content {
margin-right: 7px;
}
}
@container header-container (width < 48em) {
.header-main .column-left {
display: none;
}
#navbar-middle {
margin-left: 0;
}
#streamlist-toggle {
display: block;
}
.top-navbar-container {
/* The --header-height variable is used to make
the squared toggle area, so we offset it
accordingly. */
margin-left: var(--header-height);
}
}
@container app (width < 48em) {
.app-main .left-sidebar-toggle-button .zulip-icon-panel-left {
display: block;
}
.app-main .left-sidebar-toggle-button .zulip-icon-panel-left-dashed {
display: none;
}
.app-main .column-left {
display: none;
}
.app-main .column-left.expanded {
/* In the extended state, we open the sidebar
to its maximum possible size (otherwise, it
would be unnecessarily too narrow). */
--left-sidebar-width: var(--left-sidebar-max-width);
display: block;
position: absolute;
float: none;
left: 0;
top: 0;
}
.app-main .column-left.expanded .left-sidebar {
background-color: var(--color-background);
box-shadow: 0 2px 3px 0 hsl(0deg 0% 0% / 10%);
border-right: 1px solid var(--color-border-sidebar);
height: 100%;
padding-left: 10px;
width: var(--left-sidebar-width);
}
.app-main .column-middle {
margin-left: 7px;
margin-right: 7px;
}
.app-main .column-middle .column-middle-inner {
margin-left: 0;
margin-right: 0;
}
#typing_notifications,
#scheduled_message_indicator,
#compose-content {
margin-left: 7px;
}
}
@container app (width <= 26.5625em) {
.column-right.expanded,
.column-left.expanded {
width: 100vw;
max-width: 100%;
}
.app-main .column-right.expanded .right-sidebar,
.app-main .column-left.expanded .left-sidebar {
width: 100vw;
max-width: 100%;
}
}
@container header-container (width <= 36em) {
.narrow_description {
display: none;
}
}
/* Begin fallback media queries. */
@media (max-width: 1199.98px) {
.without-container-query-support .app-main .column-right {
display: none;
}
.without-container-query-support .app-main .column-right.expanded {
/* In the extended state, we open the sidebar
to its maximum possible size (otherwise, it
would be unnecessarily too narrow). */
--right-sidebar-width: var(--right-sidebar-max-width);
display: block;
position: absolute;
float: none;
right: 15px;
top: 0;
}
.without-container-query-support .app-main .column-right.expanded .simplebar-track.simplebar-vertical {
right: 0;
}
.without-container-query-support .app-main .column-right.expanded .right-sidebar {
box-shadow: 0 -2px 3px 0 hsl(0deg 0% 0% / 10%);
border-left: 1px solid var(--color-border-sidebar);
height: 100%;
width: var(--right-sidebar-width);
right: 0;
background-color: var(--color-background);
}
.without-container-query-support .app-main .column-middle {
margin-right: 7px;
}
.without-container-query-support #navbar-middle {
/* = (width of button, square with header) * 4 (number of buttons) + 3px extra margin. */
margin-right: calc(var(--header-height) * 4 + 3px);
}
.without-container-query-support #typing_notifications,.without-container-query-support #scheduled_message_indicator,.without-container-query-support #compose-content {
margin-right: 7px;
}
.without-container-query-support .hide-left-sidebar #compose-content,.without-container-query-support .hide-left-sidebar .app-main .column-middle {
margin-left: 7px;
}
.without-container-query-support .hide-left-sidebar #top_navbar .column-left {
width: auto;
}
}
@media (max-width: 767.98px) {
.without-container-query-support .app-main .left-sidebar-toggle-button .zulip-icon-panel-left {
display: block;
}
.without-container-query-support .app-main .left-sidebar-toggle-button .zulip-icon-panel-left-dashed {
display: none;
}
.without-container-query-support .app-main .column-left {
display: none;
}
.without-container-query-support .app-main .column-left.expanded {
/* In the extended state, we open the sidebar
to its maximum possible size (otherwise, it
would be unnecessarily too narrow). */
--left-sidebar-width: var(--left-sidebar-max-width);
display: block;
position: absolute;
float: none;
left: 0;
top: 0;
}
.without-container-query-support .app-main .column-left.expanded .left-sidebar {
background-color: var(--color-background);
box-shadow: 0 2px 3px 0 hsl(0deg 0% 0% / 10%);
border-right: 1px solid var(--color-border-sidebar);
height: 100%;
padding-left: 10px;
width: var(--left-sidebar-width);
}
.without-container-query-support .app-main .column-middle {
margin-left: 7px;
margin-right: 7px;
}
.without-container-query-support .app-main .column-middle .column-middle-inner {
margin-left: 0;
margin-right: 0;
}
.without-container-query-support .header-main .column-left {
display: none;
}
.without-container-query-support #navbar-middle {
margin-left: 0;
}
.without-container-query-support #streamlist-toggle {
display: block;
}
.without-container-query-support .top-navbar-container {
margin-left: 40px;
}
.without-container-query-support #feedback_container {
width: calc(90% - 30px);
left: 5%;
top: 5%;
}
.without-container-query-support #typing_notifications,.without-container-query-support #scheduled_message_indicator,.without-container-query-support #compose-content {
margin-left: 7px;
}
}
@media (max-width: 425px) {
.without-container-query-support .column-right.expanded,.without-container-query-support .column-left.expanded {
width: 100vw;
max-width: 100%;
}
.without-container-query-support .app-main .column-right.expanded .right-sidebar,.without-container-query-support .app-main .column-left.expanded .left-sidebar {
width: 100vw;
max-width: 100%;
}
}
@media (max-width: 576px) {
.without-container-query-support .narrow_description {
display: none;
}
}
/* End fallback media queries. */
/* Begin viewport state queries. */
/* We sometimes need the state of the viewport in JavaScript;
by setting values on `content:`, we can query instead for
those, independent of whether it's a container or media query
responsible for layout. See for example `sidebar_ui.ts`.
These queries for greater than or equal to should be ordered
smallest to largest. */
/* Adjustments for smaller viewports are critical
regardless of info-density settings, so we
don't include a container-query check here. */
@media (max-width: 767.98px) {
.app-main::after {
content: "lt_md_min";
}
}
@container app (width >= 48em) {
.app-main::after {
content: "gte_md_min";
}
}
@media (min-width: 768px) {
.without-container-query-support .app-main::after {
content: "gte_md_min";
}
}
@container app (width >= 75em) {
.app-main::after {
content: "gte_md_min gte_xl_min";
}
}
@media (min-width: 1200px) {
.without-container-query-support .app-main::after {
content: "gte_md_min gte_xl_min";
}
}
/* End viewport state queries. */
@media (max-height: 599.98px) {
.app-main .column-right.expanded .right-sidebar,
.app-main .column-left.expanded .left-sidebar {
margin-top: var(--navbar-fixed-height);
/* For very short screen sizes, skip the relatively large top padding. */
padding-top: 0;
}
/* TODO: Properly and accurately align the
topmost headers on the left and right
sidebar. */
.app-main .column-right.expanded .right-sidebar-items {
margin-top: 10px;
}
.app-main .column-left.expanded .left-sidebar-navigation-area {
margin-top: 10px;
}
/* Usually the styling is applied directly to the icon, but here
the icon is `position: static`, so we can't. */
.search_closed {
top: 5px;
}
#streamlist-toggle,
#message_view_header,
#searchbox,
.header {
line-height: var(--header-height);
height: var(--header-height);
}
.spectator_narrow_login_button {
height: var(--header-height) !important;
}
.left-sidebar-toggle-button {
height: var(--header-height);
}
nav
.column-left
.left-sidebar-toggle-button
.left-sidebar-toggle-unreadcount {
top: 5px;
left: 16px;
}
.left-sidebar-toggle-unreadcount {
/* Adjust in response to shorter navbar. */
top: 5px;
right: 4px;
}
#top_navbar .column-right #personal-menu .header-button-avatar {
width: 1.25em; /* 20px at 16px em */
height: 1.25em; /* 20px at 16px em */
}
}
/* As these adjustments are properly the province of
the viewport, we do not present these mm_min queries
in a corresponding container query block. */
@media (max-width: 374.98px) {
html {
overflow-x: hidden;
}
/* We don't want user to experience Zulip below this width since
we don't develop features for below this width. */
body,
html,
.app-main,
.header-main {
min-width: 320px;
}
#compose #compose-content {
margin-right: 5px;
margin-left: 5px;
}
}
#scroll-to-bottom-button-container {
display: block;
position: absolute;
bottom: 41px;
right: 0;
visibility: hidden;
opacity: 0;
transition:
visibility 500ms,
opacity 500ms ease-in-out;
}
#scroll-to-bottom-button-container.show {
visibility: visible;
opacity: 1;
}
#scroll-to-bottom-button-container #scroll-to-bottom-button-clickable-area {
width: 3.75em; /* 60px at 16px em */
height: 3.75em; /* 60px at 16px em */
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
}
#scroll-to-bottom-button-container #scroll-to-bottom-button-clickable-area:hover #scroll-to-bottom-button {
background: hsl(240deg 96% 68%);
}
#scroll-to-bottom-button-container #scroll-to-bottom-button-clickable-area #scroll-to-bottom-button {
text-align: center;
width: 2.5em; /* 40px at 16px em */
height: 2.5em; /* 40px at 16px em */
background: hsl(240deg 96% 68% / 50%);
border-radius: 50%;
display: flex;
align-items: center;
}
#scroll-to-bottom-button-container #scroll-to-bottom-button-clickable-area #scroll-to-bottom-button .scroll-to-bottom-icon {
color: hsl(0deg 0% 100%);
margin: 0 auto;
font-size: 1.3125em; /* 21px at 16px em */
}
.spectator_login_for_image_button {
max-width: 250px;
height: 50px;
}
.spectator_login_for_image_button :hover {
-webkit-text-decoration: none;
text-decoration: none;
}
.spectator_login_for_image_button .login_button {
padding: 5px;
margin-top: 5px;
}
.spectator_login_for_image_button .login_button .fa {
top: 1px;
}
.simplebar-content-wrapper {
/* `simplebar-content-wrapper` has `tabindex=-1` set, which makes sure
that it does not get focus when navigating via a keyboard.
But in a few situations, we programmatically focus this
element, and in this case, we don't want to see the outline. */
outline: none;
/* This prevents the popover from closing once the top/bottom is reached */
overscroll-behavior: contain;
}
.popover-filter-input-wrapper {
display: flex;
}
.popover-filter-input-wrapper .popover-filter-input {
background: var(--color-background-widget-input);
color: var(--color-text-dropdown-input);
width: 100%;
margin: 4px 4px 2px;
}
.popover-filter-input-wrapper .popover-filter-input:focus {
background: hsl(0deg 0% 100%);
border: 1px solid hsl(229.09deg 21.57% 10% / 80%);
box-shadow: 0 0 6px hsl(228deg 9.8% 20% / 30%);
}
.dropdown-list-container .dropdown-list-wrapper {
/* Sync with `max-height` in dropdown_widget. */
max-height: 210px;
/* 200px/14px */
min-width: 14.285em;
}
.dropdown-list-container .dropdown-list-wrapper .dropdown-list {
list-style: none;
margin: 0;
}
.dropdown-list-container.folder_id-dropdown-list-container {
width: calc(var(--modal-input-width) * 0.75);
/* Alignment adjustments on channel-folder selector. */
}
.dropdown-list-container.folder_id-dropdown-list-container .dropdown-list-item-name:has(.dropdown-list-buttons) {
/* We hold the first row height to 28px at 16px/1em
for the sake of the buttons plus their padding. */
grid-template-rows: 1.75em minmax(0, auto);
/* We also align everything to start, so that we can
offset the text from the top to align it with the
buttons. */
align-items: start;
}
.dropdown-list-container.folder_id-dropdown-list-container .dropdown-list-item-name:has(.dropdown-list-buttons) .dropdown-list-text-neutral {
/* 0.2em is an eyeballed value that keeps the buttons
well aligned with the first/only line of text. */
padding-top: 0.2em;
align-self: start;
}
.dropdown-list-container .no-dropdown-items {
color: hsl(0deg 0% 60%);
display: none;
padding: 3px 10px 3px 8px;
font-weight: 400;
line-height: 20px;
white-space: normal;
}
.dropdown-list-container .dropdown-list .dropdown-list-item-common-styles {
display: grid;
grid-template:
"privacy-icon item-label " min-content
"item-description item-description" minmax(0, min-content) / minmax(
0,
auto
)
minmax(0, 1fr);
color: var(--color-dropdown-item);
padding: 3px 10px 3px 8px;
font-weight: 400;
white-space: normal;
/* Keep the line-height stable, instead of using the
user-set line-height, so that the icon is always
vertically centered properly. */
line-height: 1.214;
}
.dropdown-list-container .dropdown-list .dropdown-list-item-common-styles .channel-privacy-type-icon {
grid-area: privacy-icon;
line-height: 1.214;
font-size: 0.93em;
/* We set only the width so that flexbox
can do its work to properly center,
regardless of the height. */
width: 0.93em;
padding-right: 5px;
/* Override the [data-tippy-root] style in
`tooltips.css`.
Because we are manually holding icon
alignment to the first/only line of a
channel, we make this adjustment here.
Calculated by eye to look good at 12px-20px. */
top: 0.05em;
}
.dropdown-list-container .dropdown-list .dropdown-list-item-common-styles .decorated-channel-name {
grid-area: item-label;
}
.dropdown-list-container .dropdown-list .dropdown-list-item-common-styles .dropdown-list-item-description {
grid-area: item-description;
}
.dropdown-list-container .dropdown-list .dropdown-list-item-common-styles .dropdown-list-item-name {
grid-area: item-label;
display: grid;
grid-template:
"item-text item-buttons" minmax(0, auto)
"item-text . " minmax(0, auto) / minmax(0, 1fr)
minmax(0, auto);
align-items: center;
}
.dropdown-list-container .dropdown-list .dropdown-list-item-common-styles .dropdown-list-item-name:has(.dropdown-list-buttons) {
grid-template-rows: 1.75em minmax(0, auto);
align-items: start;
}
.dropdown-list-container .dropdown-list .dropdown-list-item-common-styles .dropdown-list-item-name:has(.dropdown-list-buttons) .dropdown-list-text-neutral {
padding-top: 0.2em;
align-self: start;
}
.dropdown-list-container .dropdown-list .dropdown-list-item-common-styles .dropdown-list-item-name .dropdown-list-text-neutral {
grid-area: item-text;
align-self: center;
}
/* This correctly places neutral text items
appearing without a wrapping
`.dropdown-list-item-name` class. */
.dropdown-list-container .dropdown-list .dropdown-list-item-common-styles .dropdown-list-text-neutral {
grid-area: item-label;
align-self: center;
}
.dropdown-list-container .dropdown-list .dropdown-list-item-common-styles .dropdown-list-buttons {
grid-area: item-buttons;
display: flex;
visibility: hidden;
}
.dropdown-list-container .dropdown-list .dropdown-list-item-common-styles:focus,.dropdown-list-container .dropdown-list .dropdown-list-item-common-styles:hover {
color: var(--color-dropdown-item);
-webkit-text-decoration: none;
text-decoration: none;
background-color: var(--background-color-active-dropdown-item);
outline: none;
}
.dropdown-list-container .dropdown-list .dropdown-list-item-common-styles:focus .dropdown-list-delete,.dropdown-list-container .dropdown-list .dropdown-list-item-common-styles:hover .dropdown-list-delete,.dropdown-list-container .dropdown-list .dropdown-list-item-common-styles:focus .dropdown-list-edit,.dropdown-list-container .dropdown-list .dropdown-list-item-common-styles:hover .dropdown-list-edit {
visibility: visible;
}
.dropdown-list-container .list-item {
color: var(--color-dropdown-item);
}
.dropdown-list-container .list-item:focus,.dropdown-list-container .list-item.current_selection {
background-color: var(--background-color-active-dropdown-item);
outline: none;
}
.inbox-filter-dropdown-list-container,
.recent-view-filter-dropdown-list-container {
overflow: visible;
}
.inbox-filter-dropdown-list-container .list-item:focus,.recent-view-filter-dropdown-list-container .list-item:focus {
border-radius: 4px;
outline: 1px solid var(--color-outline-focus) !important;
outline-offset: -2px;
background-color: transparent;
}
.inbox-filter-dropdown-list-container .list-item.current_user_setting,.recent-view-filter-dropdown-list-container .list-item.current_user_setting {
background-color: var(--background-color-active-dropdown-item);
outline: none;
}
.dropdown-list-item-common-styles .dropdown-list-text-selected {
font-weight: 700;
}
#scheduled_messages_overlay .error-icon-message-recipient {
width: 15px;
height: 100%;
display: flex;
align-items: center;
justify-content: flex-end;
flex-grow: 1;
color: var(--color-failed-message-send-icon);
}
#scheduled_messages_overlay .error-icon-message-recipient .zulip-icon {
padding: 5px;
}
.emoji-popover-tab-item .zulip-icon-star {
position: relative;
top: 2px;
}
.header-main .column-right {
display: flex;
justify-content: flex-end;
align-items: center;
}
.header-main .column-right a:focus {
filter: none;
outline: 0;
}
.header-button {
width: var(--header-height);
height: var(--header-height);
display: flex;
justify-content: center;
align-items: center;
}
.header-button:hover,.header-button:focus {
-webkit-text-decoration: none;
text-decoration: none;
}
.header-button:hover {
background-color: var(--color-header-button-hover);
}
.header-button:active {
background-color: var(--color-header-button-focus);
}
.header-button:focus-visible {
outline: none;
background-color: var(--color-header-button-focus);
}
.header-button .zulip-icon {
color: var(--color-navbar-icon);
}
.header-button .zulip-icon-gear {
font-size: 1.125em; /* 18px at 16px em */
}
.header-button .zulip-icon-help-bigger,.header-button .zulip-icon-user-list {
font-size: 1.25em; /* 20px at 16px em */
}
.header-button .zulip-icon-help {
position: relative;
top: 0.5px;
right: -0.5px;
}
.left-sidebar-toggle-button .zulip-icon-panel-left,.left-sidebar-toggle-button .zulip-icon-panel-left-dashed {
font-size: 1.25em; /* 20px at 16px em */
}
#personal-menu .header-button-avatar {
/* Put styling on div rather than img to gracefully handle
uBlock Origin blocking of gravatar, which seems to make
the img disappear. */
width: 1.5em; /* 24px at 16px em */
height: 1.5em; /* 24px at 16px em */
background-size: cover;
border-radius: 4px;
background-color: var(--color-background-image-loader);
border: 1px solid var(--color-border-personal-menu-avatar);
overflow: hidden;
}
#personal-menu .header-button-avatar .header-button-avatar-image {
/* Overcome `vertical-align: middle`. This prevents the
avatar in the navbar from being lower by a pixel. */
display: block;
}
#personal-menu .header-button-avatar:has(.avatar-loaded) {
background-color: transparent;
border-color: transparent;
}
.default-language-display,
.empty-topic-display,
.empty-topic-placeholder-display::placeholder,
.drafts-unknown-msg-header-field {
font-style: italic;
}
.popover-menu-user-avatar-container.deactivated,
.inline_profile_picture.deactivated {
position: relative;
}
.popover-menu-user-avatar-container.deactivated > img,.inline_profile_picture.deactivated > img {
opacity: 0.5;
}
.popover-menu-user-avatar-container.deactivated .deactivated-user-icon,.inline_profile_picture.deactivated .deactivated-user-icon {
background-color: var(--color-background);
color: var(--color-user-circle-deactivated);
padding: 2px;
font-size: 0.8em;
position: absolute;
border-radius: 10px;
bottom: -2px;
right: -2px;
}
/*!*********************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
!*** css ../node_modules/.pnpm/css-loader@7.1.2_webpack@5.102.1/node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[6].use[1]!../node_modules/.pnpm/postcss-loader@8.2.0_postcss@8.5.6_typescript@5.9.3_webpack@5.102.1/node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[6].use[2]!./styles/message_view_header.css ***!
\*********************************************************************************************************************************************************************************************************************************************************************************************************************************/
#message_view_header {
color: var(--color-text-message-view-header);
z-index: 2;
float: left;
height: var(--header-height);
width: 100%;
line-height: var(--header-height);
display: flex;
align-items: baseline;
white-space: nowrap;
cursor: default;
}
#message_view_header .hidden {
display: none;
}
/* TODO: Remove the `.navbar_title` span from the `message_view_header.hbs`
template. That span predates the use of flexbox, and makes it so that
elements like the `.narrow_description` have different line-height and
sizing contexts depending on whether it's a view or a narrow being shown. */
#message_view_header .message-header-stream-settings-button,#message_view_header .navbar_title {
padding: 0 2px 0 6px;
overflow: hidden;
text-overflow: ellipsis;
color: inherit;
-webkit-text-decoration: none;
text-decoration: none;
/* Create a flex container for the icon and
stream name. */
display: flex;
/* We want to use baseline alignment so that the
stream name and narrow description sit on
the same invisible line. */
align-items: baseline;
}
#message_view_header .message-header-stream-settings-button .zulip-icon,#message_view_header .navbar_title .zulip-icon {
/* Pull the icon out of baseline alignment,
and center with stream name. */
align-self: center;
}
#message_view_header .message-header-stream-settings-button .zulip-icon-inbox,#message_view_header .navbar_title .zulip-icon-inbox {
/* 16px at 16px em, inherited from .navbar_title */
font-size: 1em;
}
@media (max-height: 599.98px) {
#message_view_header .message-header-stream-settings-button,#message_view_header .navbar_title {
padding: 0 3.5px; /* based on having ~41.66% decrease */
}
}
#message_view_header .message-header-stream-settings-button .navbar-icon,#message_view_header .navbar_title .navbar-icon {
margin: 0 6px 0 5px;
/* Align all icons to center. */
align-self: center;
}
#message_view_header .message-header-navbar-title {
font-weight: 600;
/* 16px at 14px em */
font-size: 1.1429em;
/* Allow long navbar titles (e.g., stream names) to collapse. */
flex: 0 1 auto;
overflow: hidden;
text-overflow: ellipsis;
}
#message_view_header .message-header-navbar-title .channel-privacy-type-icon {
width: auto;
}
#message_view_header .message-header-archived {
color: var(--color-text-message-header-archived);
cursor: default;
padding-left: 5px;
}
#message_view_header .narrow_description {
/* Flexbox's baseline alignment is responsible for
matching the description's baseline to the title.
Here, normal just ensures a comfortable, i18n-friendly
line height for the description. */
line-height: normal;
background: none;
color: inherit;
font-weight: 400;
/* Padding to the left separates the description from the
view label or channel name; padding to the right keeps
the description from getting too close to the closed
search box--with a pleasing equidistant space in both
places. */
padding: 0 10px;
overflow: hidden;
text-overflow: ellipsis;
/* The very last element in the navbar is the search icon, the second
last element is the narrow description (even if it is empty when a
channel contains no description). The flex-grow property ensures this
element takes up the entirety of the white space, while flex-shrink
accommodates narrower viewports. Setting flex-basis 0 enables an
ellipsis to be displayed, as the 0 takes the place of the max-content
default that would otherwise run titles under the search box. */
flex: 1 1 0;
margin: 0;
}
#message_view_header .narrow_description .help_link_widget,#message_view_header .narrow_description .fa {
margin: 0;
}
#message_view_header .narrow_description .fa-question-circle-o {
/* Override relative position for sake of
Chrome paint bug that keeps the circle
visible when ellipses are showing. */
position: static;
}
#message_view_header .narrow_description .help_link_widget {
/* With relative positioning no longer
in effect, we vertically align the
help icon with an inline-block assist,
which is present on the .fa class. */
vertical-align: middle;
}
#message_view_header .view-description-extended {
overflow-wrap: break-word;
-webkit-hyphens: auto;
hyphens: auto;
overflow: hidden;
white-space: normal;
background-color: var(--color-background-navbar);
border-radius: 5px;
animation: expand-extended-description 100ms ease-in both;
}
#message_view_header .view-description-extended.leaving-extended-view-description {
animation: contract-extended-description 100ms ease-in both !important;
}
/* Media Queries */
@media only screen and (max-width: 620px) {
.view-description-extended {
padding-top: 0.5em !important;
}
}
/* stylelint-disable plugin/no-low-performance-animation-properties */
@keyframes expand-extended-description {
from {
max-height: var(--header-height);
padding-bottom: 0;
}
to {
max-height: 1000px;
padding-bottom: 5px;
}
}
@keyframes contract-extended-description {
from {
max-height: 1000px;
padding-bottom: 5px;
}
to {
max-height: var(--header-height);
padding-bottom: 0;
}
}
/*!****************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
!*** css ../node_modules/.pnpm/css-loader@7.1.2_webpack@5.102.1/node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[6].use[1]!../node_modules/.pnpm/postcss-loader@8.2.0_postcss@8.5.6_typescript@5.9.3_webpack@5.102.1/node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[6].use[2]!./styles/message_header.css ***!
\****************************************************************************************************************************************************************************************************************************************************************************************************************************/
.message_header {
vertical-align: middle;
text-align: left;
/* We can overflow-y if the font size gets big */
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-weight: 600;
position: relative;
z-index: 0;
background-color: var(--color-background);
}
.message_header .message-header-contents {
font-size: 1.0714em; /* 15px at 14px em */
line-height: 1.2;
display: flex;
align-items: center;
justify-content: space-between;
height: 1.8666em; /* 28px at 15px em */
border: 1px solid var(--color-message-header-contents-border);
border-bottom-color: var(--color-message-header-contents-border-bottom);
border-radius: 7px 7px 0 0;
}
.message_header.message_header_stream {
/* Add box shadow to hide message border (first one) and message
selected box shadow (second one) that are visible
due to top borders of sticky recipient bar being curved. */
box-shadow:
-1px -5px 0 5px var(--color-background),
1px -5px 0 0 var(--color-background);
}
.message_header.message_header_stream .message_label_clickable {
-webkit-user-select: text;
user-select: text;
color: var(--color-text-message-header);
}
.message_header.message_header_stream .message_label_clickable:hover {
color: var(--color-text-message-header);
-webkit-text-decoration: none;
text-decoration: none;
}
.message_header.message_header_stream .message_label_clickable:focus {
outline: none;
-webkit-text-decoration: none;
text-decoration: none;
}
.message_header.message_header_stream .stream_topic_separator {
line-height: 0;
color: var(--color-message-header-icon-non-interactive);
position: relative;
top: 0.5px;
}
.message_header.message_header_stream .stream_topic {
display: inline-block;
padding: 5px 6px 5px 2px;
height: 1.2142em; /* 17px at 14px em */
line-height: 1.2142em; /* 17px at 14px em */
overflow: hidden;
text-overflow: ellipsis;
}
.message_header.message_header_stream .stream_topic .message_label_clickable.narrows_by_topic {
position: relative;
top: 0.5px;
overflow: hidden;
text-overflow: ellipsis;
}
.message_header.message_header_stream .stream_topic .message_label_clickable.narrows_by_topic span.stream-topic-inner {
white-space: pre;
}
.message_header.message_header_stream .stream-privacy i {
font-size: 1.0714em; /* 15px at 14px em */
}
.message_header.message_header_stream .stream-privacy i.zulip-icon-globe,.message_header.message_header_stream .stream-privacy i.zulip-icon-hashtag {
position: relative;
top: -0.5px;
}
.message_header.message_header_stream .recipient_bar_controls {
opacity: 0;
transition: opacity 0.15s ease-out;
}
.message_header.message_header_stream .recipient_bar_controls:focus-within {
opacity: 1;
transition: opacity 0.1s ease-in;
}
/* Show the bar controls on hover with a slight delay */
.message_header.message_header_stream:hover .recipient_bar_controls {
opacity: 1;
transition: opacity 0.15s ease-in 0.1s;
}
/* Always show controls when header is sticky */
.message_header.message_header_stream.sticky_header .recipient_bar_controls {
opacity: 1;
transition: opacity 0.15s ease-in;
}
.message_header_private_message {
/* This is required for box-shadow appear above the message content. */
z-index: 1;
box-shadow:
-1px -5px 0 5px var(--color-background),
1px -5px 0 0 var(--color-background);
background-color: var(--color-background);
}
.message_header_private_message .message-header-contents {
border-color: var(--color-private-message-header-border);
border-bottom-color: var(--color-private-message-header-border-bottom);
background-color: var(--color-background-private-message-header);
}
.message_header_private_message .message_label_clickable {
-webkit-user-select: text;
user-select: text;
display: flex;
padding: 5px 0 5px 10px;
font-weight: 600;
height: 1.4142em; /* 19px at 14px em */
line-height: 1.4142em; /* 19px at 14px em */
color: var(--color-text-message-header);
}
.message_header_private_message .message_label_clickable:hover {
color: var(--color-text-message-header) !important;
-webkit-text-decoration: none;
text-decoration: none;
}
.message_header_private_message .message_label_clickable:focus {
outline: none;
-webkit-text-decoration: none;
text-decoration: none;
}
.message_header_private_message .message_label_clickable .private_message_header_icon {
font-size: 1.0714em; /* 15px at 14px em */
position: relative;
top: 1px;
width: 1.0666em; /* 16px at 15px em */
height: 1.0666em; /* 16px at 15px em */
}
.message_header_private_message .message_label_clickable .private_message_header_name {
overflow: hidden;
text-overflow: ellipsis;
}
.message_header_private_message .message_label_clickable .private_message_header_name i.zulip-icon-bot {
vertical-align: middle;
position: relative;
top: -1px;
padding-left: 0.3em;
}
.message-feed .recipient_row {
/* Browser overlaps extra top padding of message header and
the bottom border message if this margin is not present. */
margin-bottom: 1px;
border-radius: 5px;
}
.message-feed .recipient_row .message_row:last-of-type {
border-radius: 0 0 7px 7px;
border-bottom: 1px solid var(--color-message-list-border);
}
.message-feed .recipient_row .message_row:last-of-type .unread-marker-fill {
border-radius: 0 0 0 7px;
height: calc(100% - 2px);
}
.message-feed .recipient_row .message_row:last-of-type .messagebox {
border-radius: 0 0 7px 7px;
padding-bottom: 4px;
}
.message-feed .recipient_row .message_header + .message_row .messagebox {
padding-top: 5px;
}
.message-feed .message_header {
position: sticky;
top: var(--navbar-fixed-height);
/* Needs to be higher than the z-index of date_row. */
z-index: 4;
box-shadow: 0 -1px 0 0 var(--color-background);
}
.message-feed .message_header .message-header-contents {
margin-top: var(--header-padding-bottom);
}
.message-feed .message_header.sticky_header {
box-shadow: var(--unread-marker-left) -1px 0 0
var(--color-background);
}
.message-feed .message_header.sticky_header .recipient_row_date {
display: block;
}
.stream_label {
display: flex;
align-items: center;
gap: 5px;
padding: 5px 2px 5px 10px;
height: 1.2142em; /* 17px at 14px em */
line-height: 1.2142em; /* 17px at 14px em */
position: relative;
top: 0.5px;
-webkit-text-decoration: none;
text-decoration: none;
font-weight: 600;
overflow: hidden;
}
.stream_label .zulip-icon.zulip-icon-globe {
position: relative;
top: 1px;
}
.stream_label:hover {
-webkit-text-decoration: none;
text-decoration: none;
}
.stream_label .stream-privacy {
min-width: unset;
width: 1.1428em; /* 16px at 14px em */
height: 1.1428em; /* 16px at 14px em */
display: flex;
justify-content: center;
align-items: center;
}
.stream_label .stream-privacy .hashtag {
padding-right: 0;
}
.stream_label .stream-privacy .hashtag::after {
font-size: 1.1428em; /* 16px at 14px em */
}
.stream_label .message-header-stream-name {
overflow: hidden;
text-overflow: ellipsis;
}
.stream_label .message-header-stream-archived {
color: var(--color-text-message-header-archived);
}
.recipient_bar_controls {
display: flex;
flex-grow: 1;
align-items: center;
}
.on_hover_topic_read {
opacity: 0.7;
}
.on_hover_topic_read:hover {
cursor: pointer;
opacity: 1;
}
.recipient_row_date {
color: var(--color-date);
font-size: calc(12em / 14);
padding: 0 10px;
text-align: right;
display: flex;
align-items: center;
font-style: normal;
font-weight: 600;
line-height: 17px; /* identical to box height, or 131% */
letter-spacing: 0.04em;
text-transform: uppercase;
padding-top: 1px;
/* Display the date when unchanged only for sticky headers. */
}
.recipient_row_date.recipient_row_date_unchanged {
display: none;
}
.sticky_header .recipient_row_date.recipient_row_date_unchanged {
display: block;
}
.recipient_row_date.hide-date-separator-header {
display: none;
}
.recipient_bar_icon {
color: var(--color-message-header-icon-interactive);
opacity: 0.2;
padding-left: 6px;
padding-right: 6px;
}
.recipient_bar_icon:hover {
opacity: 0.4 !important;
cursor: pointer;
}
/*!*************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
!*** css ../node_modules/.pnpm/css-loader@7.1.2_webpack@5.102.1/node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[6].use[1]!../node_modules/.pnpm/postcss-loader@8.2.0_postcss@8.5.6_typescript@5.9.3_webpack@5.102.1/node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[6].use[2]!./styles/message_row.css ***!
\*************************************************************************************************************************************************************************************************************************************************************************************************************************/
.with-container-query-support #message-lists-container {
container: message-lists / inline-size;
}
.message_row {
display: grid;
/* Prevent the messagebox column from overflowing the 1fr
space allotted by specifying `minmax(0,1fr)`, which
sets 0 as the minimum size, not the grid default of
`auto`. */
grid-template: auto auto / 2px minmax(0, 1fr);
grid-template-areas:
"date_unread_marker date_row "
"message_unread_marker messagebox";
border-left: 1px solid var(--color-message-list-border);
border-right: 1px solid var(--color-message-list-border);
background-color: var(--color-background-stream-message-content);
}
.message_row.private-message {
background-color: var(--color-background-private-message-content);
}
.message_row.private-message .data-container::after {
background: linear-gradient(
0deg,
var(--color-background-private-message-content),
transparent 100%
);
}
.message_row.direct_mention {
background-color: var(--color-background-direct-mention);
}
.message_row.direct_mention .message_embed .data-container::after {
background: linear-gradient(
0deg,
var(--color-background-direct-mention),
transparent 100%
);
}
.message_row.group_mention {
background-color: var(--color-background-group-mention);
}
.message_row.group_mention .message_embed .data-container::after {
background: linear-gradient(
0deg,
var(--color-background-group-mention),
transparent 100%
);
}
.message_row.sender_info_hovered .sender_name {
cursor: pointer;
/* TODO: Refactor the teetering nested classes
above so that !important can be removed. */
color: var(--color-text-sender-name-hover) !important;
}
.message_row.sender_info_hovered .message-avatar {
cursor: pointer;
}
.messagebox {
grid-area: messagebox;
overflow-wrap: break-word;
border: none;
/* The left padding value accounts for a 2px
unread marker, ensuring a uniform 5px of
padding on either side of the message box. */
padding: 0 5px 0 3px;
}
.messagebox:hover .message_controls > .message_control_button {
opacity: 1;
visibility: visible;
}
.messagebox-content {
display: grid;
align-content: baseline;
padding-left: 10px;
/* Prevent the message column from overflowing the 1fr
space allotted by specifying `minmax(0,1fr)`, which
sets 0 as the minimum size, not the grid default of
`auto`.
The calculated `--message-box-timestamp-column-width`
should match `max-content` exactly, but `max-content`
ensures the timestamp will always have enough space
in the column. */
grid-template:
minmax(var(--message-box-sender-line-height), auto) repeat(3, auto) /
var(--message-box-avatar-column-width) minmax(0, 1fr) max-content
8px minmax(var(--message-box-timestamp-column-width), max-content);
/* Named grid areas provide flexibility for positioning grid items
reliably, even if the row or column definitions of the grid change. */
grid-template-areas:
"edited message controls . time"
". message . . . "
". more . . . "
". reactions . . . ";
}
.messagebox-content.content_edit_mode {
cursor: default;
/* Set the controls area to 0 to give more space
to the edit/source view area. */
grid-template-columns:
var(--message-box-avatar-column-width) minmax(0, 1fr)
0 8px minmax(
var(--message-box-timestamp-column-width),
max-content
);
}
.messagebox-content .message_edit_notice {
grid-area: edited;
align-self: center;
}
.messagebox-content .edit-notifications {
grid-area: edited;
align-self: center;
}
.messagebox-content .slow-send-spinner {
display: none;
place-self: center end;
position: unset;
margin-top: 1px;
margin-right: 10px;
text-align: end;
grid-area: time;
}
.messagebox-content .message_content:not(.status-message) {
grid-area: message;
padding: var(--message-box-markdown-aligned-vertical-space) 0 0;
color: var(--color-text-message-default);
/* We explicitly set line-height here so that
the message area is not beholden to the legacy
`max()` declaration on `body`. */
line-height: var(--base-line-height-unitless);
min-height: 17px;
display: block;
position: relative;
overflow: hidden;
/* For the sake of paragraphs and lists that include
links, we adjust the vertical space here to keep
it uniform. */
}
.messagebox-content .message_content:not(.status-message):has( > p:first-child, > ol:first-child, > ul:first-child) {
padding-top: calc(
var(--message-box-markdown-aligned-vertical-space) -
var(--message-box-link-focus-ring-block-padding)
);
}
.messagebox-content .message_content:not(.status-message):empty {
display: none;
}
.messagebox-content .message_content.condensed:not(.status-message) {
max-height: 8.5em;
min-height: 0;
overflow: hidden;
-webkit-mask-image: linear-gradient(
to top,
hsl(0deg 0% 100% / 0%) 0%,
hsl(0deg 0% 100%) 60px
);
mask-image: linear-gradient(
to top,
hsl(0deg 0% 100% / 0%) 0%,
hsl(0deg 0% 100%) 60px
);
-webkit-mask-size: cover;
mask-size: cover;
}
.messagebox-content .message_content.collapsed:not(.status-message) {
padding: 0;
max-height: 0;
min-height: 0;
overflow: hidden;
}
.messagebox-content .message_reactions {
grid-area: reactions;
display: flex;
/* Allow reactions to wrap in mobile viewports */
flex-wrap: wrap;
/* Keep reactions aligned to start (top), so that the
margin on the reaction button doesn't appear to
stretch the reactions taller. */
align-items: flex-start;
/* Control reaction spacing with a gap */
gap: 4px;
}
.messagebox-content .message_edit {
grid-area: message;
/* Align self to start, rather than baseline, so the baseline
is preserved from the message itself--keeping the time,
edit message, and controls at the same vertical alignment. */
align-self: start;
margin-top: var(--message-box-vertical-margin);
}
.messagebox-content .message_length_controller {
grid-area: more;
}
.messagebox-content .collapsed ~ .message_length_controller {
/* When content is collapsed, the length controller
should occupy the space ordinarily assigned to
the message. */
grid-area: message;
/* However, don't let the SHOW MORE button participate
in the baseline group. */
align-self: start;
}
.messagebox-content .collapsed ~ .message_length_controller .message_length_toggle {
/* Ensure that a collapsed message maintains the
same space around the toggle button as any other
message-row content. */
margin: 4px 0;
}
.messagebox-content .message_length_toggle {
width: 100%;
height: 1.714em; /* 24px / 14px em */
margin-bottom: var(--message-box-markdown-aligned-vertical-space);
color: var(--color-text-show-more-less-button);
background-color: var(--color-show-more-less-button-background);
border-radius: 4px;
border: none;
outline: none;
font-feature-settings: "smcp", "c2sc";
font-variant: all-small-caps;
}
.messagebox-content .message_length_toggle:hover {
background-color: var(
--color-show-more-less-button-background-hover
);
}
.messagebox-content .message_length_toggle:active {
background-color: var(
--color-show-more-less-button-background-active
);
scale: 0.98;
}
.messagebox-content.content_edit_mode .message_length_controller {
/* If entering edit mode on a collapsed message,
just hide the controller area. This preserves
the collapsed state of the message, which need
not be touched. We just need to hide the button.
This works for condensed messages, too. */
display: none;
}
.messagebox-includes-sender .messagebox-content {
grid-template-areas:
"avatar sender controls . time"
"avatar message . . . "
". more . . . "
". reactions . . . ";
}
.messagebox-includes-sender .messagebox-content .message_edit {
/* No top margin when there's a sender row */
margin-top: 0;
}
.messagebox-includes-sender .messagebox-content.is-me-message {
grid-template-areas:
". . . . . "
"avatar sender controls . time"
"avatar sender . . . "
". more . . . "
". reactions . . . ";
grid-template-rows:
var(--message-box-vertical-margin) var(
--message-box-avatar-height
)
minmax(0, auto) repeat(3, auto);
/* We align items to the baseline on me messages,
and unset the align-content property. */
align-items: baseline;
align-content: unset;
}
.messagebox-includes-sender .messagebox-content.is-me-message .message-avatar {
/* Set the line-height to match the height of the avatar image
to center me-messages within the baseline group. */
line-height: var(--message-box-avatar-height);
align-self: baseline;
/* Because the avatar may be the tallest element in a
single-line me message, this margin preserves the
overall height of the message box. */
margin-bottom: var(--message-box-vertical-margin);
}
.messagebox-includes-sender .messagebox-content.is-me-message .message-avatar .inline_profile_picture {
/* We adjust the vertical space in me messages via
the grid definition above. */
margin-top: 0;
}
.messagebox-includes-sender .messagebox-content.is-me-message .message_controls {
/* Because the controls height is smaller than the
available grid row height on me-messages, we
align to center here. */
align-self: center;
}
.messagebox-includes-sender .messagebox-content.is-me-message .message_edit_notice {
/* Unset the margin on a typical sender line. */
margin-left: 0;
}
.messagebox-includes-sender .messagebox-content.is-me-message .message_sender {
/* Don't display message sender as flexbox for me-messages. */
display: block;
/* Set the same line-height as on message content for
me-messages. */
line-height: var(--base-line-height-unitless);
/* Ensure the same spacing below messages as for any other
paragraph. */
padding-bottom: var(
--message-box-markdown-aligned-vertical-space
);
/* Don't allow an ellipsis to display on me-messages. This is
an edge case that can happen with elements such as the
inline audio player. */
overflow: visible;
/* Display message components inline, with wrapping white-space,
so the sender name and message display as a continuous line
of wrapping text. */
}
.messagebox-includes-sender .messagebox-content.is-me-message .message_sender .sender_name {
white-space: normal;
display: inline;
}
.messagebox-includes-sender .messagebox-content.is-me-message .message_sender .sender_name_text {
max-width: 100%;
}
.messagebox-includes-sender .messagebox-content.is-me-message.content_edit_mode .message_sender {
/* Keep the me-message participating in the baseline */
visibility: hidden;
}
.messagebox-includes-sender .messagebox-content.is-me-message.content_edit_mode .message_edit {
/* Use the sender grid area for the me-message edit/view-source box */
grid-area: sender;
margin-top: var(--message-box-vertical-margin);
}
.messagebox-includes-sender .messagebox-content .message-avatar {
grid-area: avatar;
/* The picture should not participate in the baseline group. */
align-self: start;
}
.messagebox-includes-sender .messagebox-content .message-avatar .inline_profile_picture {
/* Setting the margin inside this element prevents
unwanted shifts in the placement of especially
sender-line elements on the .messagebox-content
grid. */
margin-top: var(--message-box-vertical-margin);
}
.messagebox-includes-sender .messagebox-content .status-message {
font-weight: normal;
}
.messagebox-includes-sender .messagebox-content .message_content {
/* Pull message content up closer to sender to
let the text baseline sit adjacent the bottom
of the avatar. We also need to account for the
padding atop .message_content. */
margin-top: calc(
(
var(--message-box-markdown-aligned-vertical-space) *
0.5 * -1
) -
var(--message-box-markdown-aligned-vertical-space)
);
grid-area: message;
}
.messagebox-includes-sender .messagebox-content .message_edit_notice {
/* When the edit notice is inline, as on edited me-messages,
the inline-block and accompanying vertical-align styles will
apply */
display: inline-block;
vertical-align: baseline;
/* A bit of margin here helps these not look associated with the name. */
margin-left: 4px;
/* Unset the padding, align-self used on edited notices under the avatar. */
padding-right: 0;
align-self: unset;
}
.messagebox-includes-sender .messagebox-content .message_edit_notice.hide {
display: none;
}
.messagebox-includes-sender .messagebox-content .message_sender {
overflow: hidden;
text-overflow: ellipsis;
grid-area: sender;
display: flex;
/* A generous line-height on the sender name is necessary
for internationalization and non-Western Latin character
sets. */
line-height: var(--message-box-sender-line-height);
/* Ensure flexed sender info (name, status emoji, inline EDITED)
forms a baseline group, which will participate with the
message-box grid's baseline group, too. */
align-items: baseline;
}
.messagebox-includes-sender .messagebox-content .message_sender .zulip-icon.zulip-icon-bot {
align-self: center;
margin-left: 5px;
/* The bot icon is center-aligned but appears
slightly misaligned with the bot name text due
to its shape. Adding a negative top margin ensures
it's proper alignment. */
margin-top: -0.12em;
}
.messagebox-includes-sender .messagebox-content .message_sender .sender_name {
display: inline-flex;
font-weight: 700;
color: var(--color-text-sender-name);
-moz-column-gap: 3px;
column-gap: 3px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
outline: none;
align-self: baseline;
}
.messagebox-includes-sender .messagebox-content .message_sender .sender_name .sender_name_text {
overflow: hidden;
white-space: nowrap;
display: inline-flex;
}
.messagebox-includes-sender .messagebox-content .message_sender .sender_name .sender_name_text .user-name {
overflow: hidden;
text-overflow: ellipsis;
}
.messagebox-includes-sender .collapsed ~ .message_length_controller .message_length_toggle {
/* Collapse top margin to avoid extra space
between the button and sender line. */
margin-top: 0;
}
.message_controls {
grid-area: controls;
/* Let the controls occupy the entire height
of the row; inner flexboxes handle the
centering of the icons. */
align-self: stretch;
/* Controls flex to the height of the top
row of the message box, and center
themselves within it. */
display: flex;
align-items: center;
/* Ensure square icons for better centering. */
line-height: 1;
}
@container message-lists (width < 36em) {
/* This is intended to target the first message_controls child
when there are 3 displayed. */
.message_controls .message_control_button:nth-last-child(3) {
display: none;
}
}
/* Media-query fallback. Note that because we're treating
#message-lists-container as its own container, we can
express a much simpler query there. The more complex
conditions are necessary only for media queries. */
@media (max-width: 575.98px), ((min-width: 768px) and (max-width: 848.98px)) {
/* This is intended to target the first message_controls child
when there are 3 displayed. */
.message_controls .without-container-query-support .message_control_button:nth-last-child(3) {
display: none;
}
}
/* This is a bit tricky; we need to reserve space for the message
controls even when the message isn't hovered, so that hover
doesn't disturb the layout. Usually that would be just
visibility: hidden, but that cannot be animated, so we set
opacity as well, which can be animated. */
.message_controls .message_control_button {
opacity: 0;
visibility: hidden;
transition: 0.2s ease;
transition-property: opacity, visibility;
/* Allow buttons to grow to fill the available space,
in concord with the column calculated for the
.messagebox-content grid. */
flex: 1 0 0;
/* Set the height to 100% to effectively flex open
on the vertical axis. */
height: 100%;
/* Control buttons are their own flex containers,
to more gracefully center the icons. */
display: flex;
place-items: center center;
color: var(--color-message-action-visible);
}
.message_controls .message_control_button .emoji-message-control-button-container {
/* This button has an extra div for Tippy purposes,
so it becomes its own flex container. */
display: flex;
}
.message_controls .message_control_button .message-controls-icon {
cursor: pointer;
/* The icon body is 16px square at 16px/1em; the clickable
area for the icon is 26px wide by 25px tall, so these
values ensure a 26px x 25px clickable area for the icon. */
/* 2.5px at 16px/1em; 3px at 16px/1em */
padding: 0.1563em 0.1875em;
}
.message_controls .message_control_button .message-controls-icon::before {
/* We specify block display so the
scaling transform below works as
expected. */
display: block;
}
.message_controls .message_control_button .message-controls-icon:active::before {
transform: scale(0.92);
transform-origin: center;
outline: 0;
}
.message_controls .message_control_button .message-controls-icon:focus {
/* Remove the outline but do not color on focus;
focus-visible is more appropriate for the color
changes, as it only applies color when focus
is achieved from a keyboard or other pointerless
device. */
outline: 0;
}
.message_controls .message_control_button .message-controls-icon:focus-visible {
outline: 0;
color: var(--color-message-action-interactive);
}
.message_controls .message_control_button .message-controls-icon:hover {
outline: 0;
color: var(--color-message-action-interactive);
}
/* Separate hover colors for stars */
.message_controls .message_control_button .message-controls-icon.star:focus-visible {
color: var(--color-message-star-action);
}
.message_controls .message_control_button .message-controls-icon.star:hover {
color: var(--color-message-star-action);
}
/* Tooltips should not follow the width restrictions of their parent element. */
.message_controls [data-tippy-root] {
width: max-content;
overflow-wrap: unset;
}
.message_controls .edit_content {
width: var(--message-box-icon-width);
}
.message_controls .edit_content .move_message_button,.message_controls .edit_content .edit_content_button {
display: none;
}
.message_controls .edit_content.can-edit-content .edit_content_button {
display: inline;
}
.message_controls .edit_content.can-move-message .move_message_button {
display: inline;
}
.message_controls .failed_message_action {
color: var(--color-failed-message-send-icon);
font-weight: bold;
padding: 1px;
opacity: 1;
visibility: visible;
}
.message_controls .failed_message_action .rotating {
animation: rotate 1s infinite linear;
}
.message_controls .star_container:not(.empty-star) {
/* Color, opacity, and visibility, as though the message is hovered. */
color: var(--color-message-star-action);
opacity: 1;
visibility: visible !important;
}
.unread_marker {
margin-left: var(--unread-marker-left);
opacity: 0;
transition: opacity 0.3s ease-out;
}
.unread_marker.slow_fade {
transition: opacity 2s ease-out;
}
.unread_marker.fast_fade {
transition: opacity 0.3s ease-out;
}
.unread_marker.date_unread_marker {
grid-area: date_unread_marker;
}
.unread_marker.date_unread_marker .unread-marker-fill {
border-radius: 0 !important;
height: 100% !important;
}
.unread_marker.message_unread_marker {
grid-area: message_unread_marker;
}
.unread-marker-fill {
height: 100%;
width: 2px;
background: linear-gradient(
90deg,
var(--color-unread-marker) 30%,
hsl(217deg 64% 59% / 0%)
);
}
.unread .unread_marker {
transition: opacity 0.3s ease-out;
opacity: 1;
}
.message-time {
justify-self: end;
padding-right: 5px;
/* Maintain first-line baseline regardless of
what happens in the message-content area (e.g., a
collapsed message, or source/edit view). This
line-height also keeps EDITED/MOVED messages
in place, care of their baseline-group participation
within the grid. */
line-height: var(--message-box-sender-line-height);
grid-area: time;
display: block;
/* 13px at 14px/1em */
font-size: 0.9286em;
font-weight: 350;
text-align: end;
opacity: 0.8;
color: var(--color-text-default);
letter-spacing: 0.02em;
/* Disable blue link styling for the message timestamp link. */
}
.message-time:hover {
-webkit-text-decoration: none;
text-decoration: none;
color: var(--color-message-action-interactive);
}
.message-time.notvisible {
/* This happens when message failed to send. We don't want to
display time but still want it to occupy space. */
width: 45px !important;
position: unset !important;
}
/* Message-editing styles */
.message-edit-buttons-and-timer {
margin-top: 5px;
display: flex;
gap: 5px;
/* Allow items to occupy full height.
This is especially important for
buttons that are flex items. */
align-items: stretch;
}
.message-actions-button {
box-sizing: border-box;
align-self: stretch;
/* Display the actions buttons as
flex containers for positioning
text and spinners. */
display: flex;
align-items: center;
justify-content: center;
/* 28px at 16px/1em, per Vlad's spec. */
height: 1.75em;
/* 65px at 16px/1em, which is the width of
the Cancel button. */
min-width: 4.0625em;
padding: 0 10px;
border-radius: 4px;
border: 0;
line-height: 1;
}
.message-actions-button:focus {
outline: none;
}
.message-actions-button:focus-visible {
outline: 2px solid var(--color-outline-focus);
}
.message_edit_save {
/* Match Save button's basic colors to
the compose box Send button. */
color: var(--color-compose-send-button-icon-color);
background-color: var(--color-compose-send-button-background);
}
.message_edit_save:hover {
background-color: var(
--color-compose-send-button-background-interactive
);
}
.message_edit_save:disabled {
/* Replicate disabled values, without any color shifts. */
cursor: not-allowed;
opacity: 0.5;
}
.message_edit_cancel,
.message_edit_close {
color: var(--color-exit-button-text);
background: var(--color-exit-button-background);
}
.message_edit_cancel:hover,.message_edit_close:hover {
background: var(--color-exit-button-background-interactive);
}
.edit-content-container {
border-radius: 4px;
border: 1px solid var(--color-message-content-container-border);
transition: border-color 0.2s ease;
display: grid;
grid-template-areas: "message-edit-content";
}
.edit-content-container:has(.message_edit_content:focus) {
border-color: var(--color-message-content-container-border-focus);
}
.edit-content-container .message-edit-textbox {
/* Setting `position:relative` on this container ensures that .copy-button
(a possible immediate child with `position: absolute`) is positioned
relative to this container instead of . */
position: relative;
grid-area: message-edit-content;
}
.edit-content-container .message-edit-textbox .textarea-over-limit {
background-color: var(
--color-compose-message-content-background-over-limit
);
}
.edit-content-container .message-edit-textbox .textarea-approaching-limit {
background-color: var(
--color-compose-message-content-background-approaching-limit
);
}
.message_edit_content {
max-height: var(--max-message-edit-height);
width: 100%;
min-width: 206px;
min-height: 52px;
box-sizing: border-box;
/* Setting resize as none hides the bottom right diagonal box
(which even has a background color of its own!). */
resize: none !important;
color: var(--color-text-default);
background-color: hsl(0deg 0% 100%);
border-radius: 3px;
vertical-align: middle;
border: none;
/* Match textarea padding to compose box and
message-edit preview area. */
padding: 5px 5px 0;
margin: 0;
box-shadow: none;
}
.message_edit_content:focus {
outline: 0;
}
.message_edit_content:read-only,.message_edit_content:disabled {
cursor: not-allowed;
}
/* The selector needs to be written this way to override the specificity
of the base style defined for a read-only textarea in dark mode. */
.message_edit_form .edit-controls textarea.message_edit_content:read-only {
opacity: 1;
}
.message-editing-animation {
display: inline-flex;
align-items: baseline;
margin-left: 3px;
width: 40px;
height: 5px;
/* Avoid this animation element blocking clicks on .edit-notifications
to display the message's edit history. */
pointer-events: none;
}
.message-editing-animation .y-animated-dot {
width: 4px;
height: 4px;
background-color: hsl(0deg 0% 53%);
border-radius: 50%;
margin-left: 3px;
opacity: 0;
}
.message-editing-animation .y-animated-dot:nth-child(1) {
animation: typing 1s infinite 0.2s;
}
.message-editing-animation .y-animated-dot:nth-child(2) {
animation: typing 1s infinite 0.4s;
}
.message-editing-animation .y-animated-dot:nth-child(3) {
animation: typing 1s infinite 0.6s;
}
@keyframes typing {
0% {
opacity: 0;
transform: translateY(0);
}
50% {
opacity: 1;
transform: translateY(-3px);
}
100% {
opacity: 0;
transform: translateY(0);
}
}
.message_edit_countdown_timer {
text-align: right;
display: inline;
color: hsl(0deg 0% 63%);
}
.message_edit_countdown_timer.expired {
color: hsl(4deg 58% 33%);
}
.message-edit-timer {
display: none;
/* Center vertically relative to
buttons. */
align-self: center;
/* Use flexbox to position to far right of
the Save and Cancel buttons. */
margin-left: auto;
}
.message-edit-feature-group {
border-radius: 0 0 3px 3px;
background-color: var(--color-message-formatting-controls-container);
/* margin on either side to let the border of
.edit-content-container show through. */
margin: 0 1px;
}
.message_edit_save .loader {
display: none;
/* 28px at 16px/1em */
height: 1.75em;
width: 1.75em;
grid-area: button-display;
justify-self: center;
z-index: 1;
}
.message_edit_save:has(.showing-button-spinner) {
/* We want to maintain the width of the Save button
in an i18n friendly way; this quick grid ensures
that the width of the text holds the button open,
while the styles above ensure the spinner's
centering. */
display: grid;
grid-template: "button-display";
}
.showing-button-spinner {
visibility: hidden;
grid-area: button-display;
z-index: 0;
}
.edit-controls .button-wrapper {
cursor: not-allowed;
}
.message-edit-button-disabled {
pointer-events: none;
}
/* Reduce some of the heavy padding from Bootstrap. */
.message_edit_form {
margin-bottom: 10px;
cursor: default;
}
.message_edit_form .edit-form {
/* Override Bootstrap. */
margin-bottom: 0;
}
.message_edit_form .edit-controls {
margin-left: 0;
margin-top: 0;
}
.message_edit_form .preview_message_area {
max-height: var(--max-message-edit-height);
grid-area: message-edit-content;
}
.message_edit_notice {
/* 10px at 14px/1em */
font-size: 0.7143em;
opacity: 0.5;
-webkit-user-select: none;
user-select: none;
white-space: nowrap;
overflow-x: hidden;
overflow-x: clip;
text-overflow: ellipsis;
padding-right: 5.5px;
cursor: pointer;
}
.fade-in-message {
animation-name: fadeInMessage;
animation-duration: 1s;
animation-iteration-count: 1;
}
.fade-in-message .message_edit_notice {
animation-name: fadeInEditNotice;
animation-duration: 1s;
animation-iteration-count: 1;
}
.message_edit_notice_hover:hover {
opacity: 1;
}
/* Locally echoed messages. */
.locally-echoed .message-time {
opacity: 0;
/* Don't show pointer when message-time doesn't have a link. */
cursor: default;
}
/* Show the spinner only for messages that are still locally echoed. */
.locally-echoed .slow-send-spinner {
display: unset !important;
cursor: default;
}
/* Placehold the control buttons, unless there's a failure. */
.locally-echoed .messagebox:hover .message_controls .message_control_button:not(.failed_message_action) {
visibility: hidden;
}
/* The actual star icon is not added to the DOM when a
message is locally echoed, so we set the equivalent
width on its container. */
.locally-echoed .star_container {
width: var(--message-box-icon-width);
}
/* See https://stackoverflow.com/questions/2717480/css-selector-for-first-element-with-class/8539107#8539107
for details on how this works */
.recipient_row .message_row.unread .date_unread_marker {
display: none;
}
/* Select all but the first .message_row.unread,
and remove the properties set from the previous rule. */
.recipient_row .message_row.unread ~ .message_row.unread .date_unread_marker {
display: block;
}
.date_row {
grid-area: date_row;
}
.date_row .timerender-content {
display: block;
overflow: hidden;
text-transform: uppercase;
font-size: calc(12em / 14);
font-style: normal;
font-weight: 600;
line-height: 17px; /* identical to box height, or 131% */
text-align: right;
letter-spacing: 0.04em;
color: var(--color-date);
/* Right padding matches time in message row and date in recipient row. */
padding: 8px 6px 8px 4px;
}
.date_row .timerender-content::before {
width: 100%;
}
.date_row .timerender-content::after {
width: 6px;
left: 0.25em;
/* Align date with message time and recipient bar date. */
margin-right: -1px;
}
.bookend {
margin-top: 10px;
background-color: transparent;
padding-bottom: 10px;
text-align: center;
}
.bookend .stream-status {
opacity: 0.6;
}
.bookend .stream-status i {
font-size: 0.7143em; /* 10px at 14px / em */
/* TODO: Don't use relative positioning here. */
position: relative;
top: 0.1em; /* 1px at 10px / em */
margin-left: 0.2em; /* 2px at 10px / em */
}
.bookend .stream-status .zulip-icon.zulip-icon-lock {
font-size: 0.8571em; /* 12px at 14px / em */
top: 0.0833em; /* 1px at 12px / em */
margin-left: 0.1667em; /* 2px at 12px / em */
}
.bookend-label {
font-size: 1em;
display: block;
padding: 4px;
overflow: hidden;
}
.bookend-label::before,.bookend-label::after {
width: 50%;
}
.bookend-label::after {
left: 0.25em;
margin-right: -50%;
}
/* Only show links on the trailing bookend. */
.bookend-channel-settings-link {
display: none;
}
.trailing_bookend .bookend-channel-settings-link {
display: inline;
}
.bookend-label::before,
.bookend-label::after,
.date_row .timerender-content::before,
.date_row .timerender-content::after {
display: inline-block;
position: relative;
content: " ";
vertical-align: middle;
height: 0;
border-bottom: 1px solid var(--color-border-message-group-spacer-line);
}
.bookend-label::before,
.date_row .timerender-content::before {
right: 0.25em;
margin-left: -50%;
}
/*!**********************************************************************************************************************************************************************************************************************************************************************************************************************!*\
!*** css ../node_modules/.pnpm/css-loader@7.1.2_webpack@5.102.1/node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[6].use[1]!../node_modules/.pnpm/postcss-loader@8.2.0_postcss@8.5.6_typescript@5.9.3_webpack@5.102.1/node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[6].use[2]!./styles/settings.css ***!
\**********************************************************************************************************************************************************************************************************************************************************************************************************************/
label {
margin: 0;
}
label:not(.does-not-exist) .fa-info-circle,h4:not(.does-not-exist) .fa-info-circle,h3:not(.does-not-exist) .fa-info-circle,.settings-section-title .fa-info-circle {
top: 1px;
position: relative;
}
/* TODO: This should ideally be added to help_link_widget.hbs,
allowing us to deduplicate at least the opacity CSS with the
fa-question-circle-o logic above. */
.settings-info-icon {
padding-left: 3px;
opacity: 0.7;
}
.settings-info-icon:hover {
opacity: 1;
}
a.help_link_widget {
opacity: 0.7;
color: inherit;
margin-left: 3px;
}
a.help_link_widget .fa-question-circle-o {
position: relative;
top: 1px;
}
a.help_link_widget:hover {
color: inherit;
opacity: 1;
}
h3:not(.does-not-exist) .help_link_widget,.settings-section-title .help_link_widget {
margin-left: 5px;
}
.profile-settings-form {
display: flex;
justify-content: space-between;
flex-wrap: wrap-reverse;
}
.profile-main-panel {
margin-right: 20px;
}
.profile-side-panel {
margin-right: 10px;
}
.admin_profile_fields_table th.display,.admin_profile_fields_table th.required,.admin_profile_fields_table td.display_in_profile_summary_cell,.admin_profile_fields_table td.required-cell {
text-align: center;
}
.user-details-title {
display: inline-block;
min-width: 80px;
font-weight: 600;
padding-right: 5px;
}
.user-avatar-section .inline-block {
box-shadow: 0 0 10px hsl(0deg 0% 0% / 10%);
}
#change_password_modal,
#change_email_modal {
width: 34.2857em; /* 480px at 14px/em */
max-width: 90vw;
}
#change-email-form-input-email {
max-width: 90%;
}
#change_email_modal #change_email_form {
margin: 0;
}
.disabled_setting_tooltip {
cursor: not-allowed;
}
#account-settings .deactivate_realm_button {
margin-left: 10px;
}
#change_email_button:disabled {
pointer-events: none;
}
#user_deactivate_account_button:disabled {
pointer-events: none;
}
.deactivate_realm_button:not(#does-not-exist):disabled {
pointer-events: none;
}
#api_key_button:disabled {
pointer-events: none;
}
#user_email_address_visibility:disabled {
pointer-events: none;
}
#change_email_button,
#change_password {
min-width: 0;
}
.change-email {
display: flex;
gap: 0.5rem;
}
.admin-realm-description,
.admin-realm-welcome-message-custom-text {
height: 12em;
width: 100%;
max-width: 500px;
box-sizing: border-box;
}
.admin-realm-welcome-message-custom-text {
margin-bottom: 10px;
}
#welcome_message_custom_text_buttons_container {
display: inline-flex;
/* 5px at 16px em */
gap: 0.3125em;
align-items: center;
}
.setting_notification_sound,
.play_notification_sound {
margin-right: 4px;
}
.play_notification_sound .notification-sound-icon {
font-size: 1.5714em; /* 22px at 14px / em */
/* Visually center with chevron in select */
line-height: 1.8571em; /* 26px at 14px / em */
cursor: pointer;
}
.setting_notification_sound {
text-transform: capitalize;
}
.table tbody {
border-bottom: 1px solid hsl(0deg 0% 87%);
}
.wrapped-table {
overflow-wrap: anywhere;
overflow-wrap: break-word;
white-space: pre-wrap;
white-space: normal;
}
#settings_content table + .progressive-table-wrapper table tr.user_row td:first-of-type {
width: 20%;
}
#uploaded_files_table > tr > td:nth-of-type(1),
#attachments-settings .upload-file-name {
word-break: break-all;
}
.upload-mentioned-in,
.upload-date {
word-break: normal;
}
#linkifier-settings #linkifier_pattern,#linkifier-settings #linkifier_template {
width: calc(100% - 10em - 6em);
}
#playground-settings #playground_pygments_language,#playground-settings #playground_name,#playground-settings #playground_url_template {
width: calc(100% - 10em - 6em);
}
#language_selection_modal table {
width: 90%;
margin-top: 20px;
border-collapse: separate;
}
#language_selection_modal td {
padding-top: 1px;
}
.settings-section {
display: none;
width: calc(100% - 40px);
margin: 20px;
}
.settings-section.show {
display: block;
}
.settings-section form {
margin: 0;
}
.settings-section .no-padding {
padding: 0;
}
.settings-section .settings-section-title {
font-size: 1.4em;
font-weight: 400;
margin: 10px 0;
}
.settings-section .settings-section-title.transparent {
background-color: transparent;
color: inherit;
}
.settings-section .table-sticky-headers {
position: sticky;
top: 0;
z-index: 1;
}
.settings-section #admin_page_users_loading_indicator,.settings-section #attachments_loading_indicator,.settings-section #admin_page_deactivated_users_loading_indicator,.settings-section #admin_page_bots_loading_indicator {
margin: 0 auto;
}
.settings-section .loading_indicator_text {
font-size: 0.8571em; /* 12px at 14px/em */
font-weight: 400;
vertical-align: middle;
line-height: inherit;
display: inline-block;
float: none;
margin-top: 9px;
}
.settings-section .inline {
display: inline !important;
}
.settings-section .hidden-email {
font-style: italic;
}
/* Originally the icon inherits the color of label, but when the setting
is disabled, the color of the label is changed and thus the icon becomes
too light. So, we set the color explicitly to original color of label to
keep the color of the icon same even when the setting is disabled. */
.settings-section #id_realm_enable_spectator_access_label a {
color: var(--color-realm-enable-spectator-access-link);
}
/* The height and width of this should match input fields in settings
menu. We try to keep the padding and height the same, and both without
border-box box-sizing.
These styles should be kept in sync with the styles for .settings_select
in subscriptions.css */
.settings-section .settings_select {
box-sizing: unset;
/* Subtract 1px border on each side and 25+6 padding */
width: calc(var(--modal-input-width) - 33px);
max-width: 100%;
padding-top: 4px;
padding-bottom: 4px;
height: 1.4em; /* To match height of input elements */
}
.settings-section .account-settings-heading {
margin-right: 10px;
}
/* Make this one less wide because it's indented, so that the right
edge lines up with other dropdown menus. Usual 33px plus 23px extra
margin. */
#id_realm_jitsi_server_url {
width: calc(var(--modal-input-width) - 33px - 23px);
}
/* list_select is similar to settings_select, but without the height styling. */
.settings_select,
.list_select {
padding: 0 25px 0 6px;
color: var(--color-text-default);
border-radius: 4px;
border: 1px solid hsl(0deg 0% 80%);
cursor: pointer;
background-color: hsl(0deg 0% 100%);
}
.settings_select:disabled {
cursor: not-allowed;
background-color: hsl(0deg 0% 93%);
/* This is reset for other browsers to use Chrome's opacity. */
opacity: 0.7;
}
.list_select:disabled {
cursor: not-allowed;
background-color: hsl(0deg 0% 93%);
/* This is reset for other browsers to use Chrome's opacity. */
opacity: 0.7;
}
/* For consistent custom select dropdowns that match with dropdown-widget */
select.modal_select,
select.list_select,
select.settings_select {
-webkit-appearance: none;
appearance: none;
background-image: var(--icon-chevron-down);
background-repeat: no-repeat;
background-position: 98%;
background-size: 1em;
}
#admin-active-users-list .table tr:first-of-type td {
border-top: none;
}
#admin-bot-list .table tr:first-of-type td {
border-top: none;
}
.user_role,
.profile_field_type,
.bot_type,
.last_active {
word-break: normal;
}
.export_url_spinner .loading_indicator_spinner,.last_active .loading_indicator_spinner {
width: 1.25em;
height: auto;
display: flex;
align-items: center;
margin: 0;
margin-left: 0.5em; /* The spinner is left-justified with a slight left margin to look good. */
}
.input-group {
margin: 0 0 1.25em; /* 20px at 16px/em */
}
.input-group label.checkbox + label {
cursor: pointer;
}
.input-group .message_count {
margin: 10px 0 0;
}
/* Class for displaying an input with an
auxiliary control, e.g., the play button
next to the notification sound dropdown. */
.input-element-with-control {
display: flex;
align-items: center;
/* Preserve the effective space allotted
inside the input group.
Select element: --modal-input-width
Button element: ~29px
Right margin: 4px */
max-width: calc(var(--modal-input-width) + 29px + 4px);
}
.input-element-with-control .settings_select {
/* Hold the settings select to its usual value;
a TODO would be to fix up the min- and max-
width values on the parent class, as the
min-width always applies, and max-width: 100%
has no meaning without an actual width:
declaration. */
max-width: var(--modal-input-width);
/* Disregard the min-width from the main
.settings_select selector. */
min-width: 0;
/* Allow the select to grow within the flex
container to keep the play button in the
viewport, and not force dodgy looking wrap
onto a second line. */
flex: 1 0 auto;
}
.no-margin {
margin: 0;
}
input[type="checkbox"] + .inline-block {
margin-left: 10px;
}
input[type="checkbox"] .inline-block {
margin: -2px 0 0;
}
.decorated-stream-name-dropdown-widget .dropdown_widget_value {
/* The max-width should account for the
16px-square box (at 16px/1em) for the
chevron icon. */
max-width: calc(100% - 1em);
display: flex;
align-items: baseline;
/* Mimic the space from the previous inline
layout. */
gap: 0.4ch;
}
.decorated-stream-name-dropdown-widget .decorated-channel-name {
overflow-x: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.allow-subdomains,
.new-realm-domain-allow-subdomains {
margin: 0 !important;
}
.realm_domains_info {
margin-bottom: 0;
}
.admin-realm-form h3 {
margin: 10px 0 5px;
}
.admin-realm-form .subsection-header h3 {
display: inline;
}
.preferences-settings-form .subsection-header h3,.notification-settings-form .subsection-header h3 {
display: inline-block;
margin: 10px 0 5px;
}
.preferences-settings-form .tip,.notification-settings-form .tip {
width: -moz-fit-content;
width: fit-content;
margin-top: 0;
}
.send_test_notification {
margin-bottom: 15px;
}
.preferences-settings-form .tab-picker {
width: 325px;
}
.information-density-settings {
display: flex;
gap: 2em;
margin: 0 0 20px;
}
.information-density-settings.disabled-setting .display-value {
opacity: 0.4;
}
.information-density-settings .display-value {
background-color: var(--color-background-popover);
font-size: 1.15em;
line-height: 1;
display: flex;
align-items: center;
padding: 0.25em 0.375em;
}
.information-density-settings .zulip-icon {
font-size: 1.15em;
width: 1.15em;
height: 1.15em;
}
#stream-specific-notify-table .reset_stream_notifications {
opacity: 0;
visibility: hidden;
transition: 0.2s ease;
transition-property: opacity, visibility;
}
#stream-specific-notify-table .reset_stream_notifications:hover {
cursor: pointer;
}
#stream-specific-notify-table .reset_stream_notifications:active {
outline: none;
}
#stream-specific-notify-table .unmute_stream:hover {
cursor: pointer;
}
#stream-specific-notify-table .unmute_stream:focus {
outline: none;
}
#stream-specific-notify-table .stream-controls {
display: flex;
align-items: center;
/* This gap matches a single space character. */
gap: 0.4ch;
}
#stream-specific-notify-table .stream-controls .stream-privacy {
display: flex;
}
#stream-specific-notify-table .stream-controls:hover .reset_stream_notifications {
opacity: 1;
visibility: visible;
}
#confirm_reset_stream_notifications_modal .channel-privacy-type-icon {
padding-left: 3px;
padding-right: 0;
width: auto;
}
#customizable_stream_notifications_table .dropdown-widget-button {
/* 225px at 16px/1em */
width: 14.0625em;
}
#customizable_stream_notifications_table .dropdown-widget-button:focus {
outline: none;
}
#customizable_stream_notifications_table .dropdown-widget-button:focus-visible {
outline: 2px solid var(--color-outline-focus);
}
.advanced-configurations-container .advance-config-toggle-area {
cursor: pointer;
display: flex;
align-items: center;
gap: 0 0.625em;
}
.advanced-configurations-container .advance-config-toggle-area .stream_setting_subsection_title {
margin: 4px 0;
}
.advanced-configurations-container .advance-config-toggle-area .toggle-advanced-configurations-icon {
font-size: 1.4286em; /* 20px at 14px / em */
}
.advanced-configurations-container .advanced-configurations-collapase-view .admin-permissions-tip {
margin-bottom: 1em;
}
.organization-settings-parent {
padding-top: 5px;
}
#id_org_profile_preview {
width: max-content;
display: flex;
gap: 5px;
align-items: center;
margin-bottom: 20px;
}
.inline-block.organization-permissions-parent {
padding-top: 5px;
}
#org-other-permissions .tip {
margin-top: 0;
}
.language_selection_widget .language_selection_button {
-webkit-text-decoration: none;
text-decoration: none;
min-width: 0;
}
#user_enter_sends_label kbd,
#realm_enter_sends_label kbd {
/* 14px at 15px/1em */
font-size: 0.9333em;
font-style: normal;
font-weight: 500;
color: var(--color-kbd-enter-sends);
position: relative;
bottom: 1px;
margin: 0 2px;
}
.overlay-keyboard-shortcuts .popover-menu-hotkey-hints {
display: inline-flex;
padding-left: 0;
}
.edit-attachment-buttons {
display: inline-block;
vertical-align: middle;
}
.remove-alert-word {
margin-top: 1px;
}
.alert-word-status-banner {
margin-bottom: 20px;
}
.alert-notification {
display: inline-flex;
align-items: center;
vertical-align: top;
height: auto !important;
width: auto !important;
white-space: break-spaces !important;
overflow-wrap: anywhere;
background-color: transparent;
border-radius: 4px;
color: hsl(156deg 30% 50%);
padding: 3px 10px;
}
.alert-notification.account-alert-notification {
margin: 0 0 10px;
vertical-align: middle;
}
.alert-notification:not(:empty) {
border: 1px solid hsl(156deg 30% 50%);
}
.alert-notification.alert-error {
color: hsl(2deg 46% 68%);
border-color: hsl(2deg 46% 68%);
}
.alert-notification .loading_indicator_spinner {
width: 0.9283em; /* 13px at 14px/em */
height: 1.4286em; /* 20px at 14px/em */
margin: 0;
}
/* make the spinner green like the text and box. */
.alert-notification .loading_indicator_spinner svg path {
fill: hsl(178deg 100% 40%);
}
.alert-notification .loading_indicator_text {
margin-top: 0;
font-size: inherit;
vertical-align: top;
}
.alert-notification img {
margin-right: 6px;
}
.alert-notification .settings-save-checkmark {
width: 0.9285em; /* 13px at 14px/em */
}
#profile-field-settings #admin-add-profile-field-status {
margin-top: 4px;
}
#add-custom-profile-field-button {
margin-top: auto;
margin-bottom: 12px;
padding: 4px 14px;
}
#user-notification-settings .notification-table thead,#realm-user-default-settings .notification-table thead {
background-color: var(--color-background-notification-table-thead);
}
#user-notification-settings .notification-table th,#realm-user-default-settings .notification-table th,#user-notification-settings .notification-table td,#realm-user-default-settings .notification-table td {
text-align: center;
vertical-align: middle;
cursor: default;
}
#user-notification-settings .notification-table th .stream-privacy span.hashtag,#realm-user-default-settings .notification-table th .stream-privacy span.hashtag,#user-notification-settings .notification-table td .stream-privacy span.hashtag,#realm-user-default-settings .notification-table td .stream-privacy span.hashtag,#user-notification-settings .notification-table th .filter-icon i,#realm-user-default-settings .notification-table th .filter-icon i,#user-notification-settings .notification-table td .filter-icon i,#realm-user-default-settings .notification-table td .filter-icon i {
padding-right: 0;
}
#user-notification-settings .notification-table th label,#realm-user-default-settings .notification-table th label,#user-notification-settings .notification-table td label,#realm-user-default-settings .notification-table td label {
cursor: default;
}
#user-notification-settings .notification-table td:first-child {
text-align: left;
font-weight: bold;
word-break: break-all;
}
#realm-user-default-settings .notification-table td:first-child {
text-align: left;
font-weight: bold;
word-break: break-all;
}
#convert-demo-organization-form .domain_label {
display: inline-block;
}
#edit-user-form .alert-notification.custom-field-status,
#profile-settings .alert-notification.custom-field-status,
#profile-settings .alert-notification.full-name-status,
#profile-settings .alert-notification.timezone-setting-status {
padding-top: 0;
padding-bottom: 0;
margin-top: 0;
padding-left: 0;
margin-left: 5px;
border: none;
}
#profile-settings .custom-profile-fields-form .custom_user_field label,#profile-settings .full-name-change-container label,#profile-settings .timezone-setting-form label {
min-width: -moz-fit-content;
min-width: fit-content;
}
#profile-settings .person_picker {
/* Subtract 2 * (2px padding) + 2 * (1px border) */
min-width: calc(var(--modal-input-width) - 6px);
}
#profile-settings textarea {
/* Subtract 6px of padding from side */
width: calc(var(--modal-input-width) - 12px);
}
.required-symbol {
color: hsl(0deg 66% 60%);
}
.settings-profile-user-field {
margin-top: 5px;
max-width: -moz-fit-content;
max-width: fit-content;
}
.settings-profile-user-field > .settings_url_input {
margin-bottom: 0;
}
.settings-profile-user-field.editable-date-field {
display: grid;
grid-template-areas: "datepicker close-button";
grid-template-columns: minmax(0, 1fr) 1.4285em; /* 20px at 14px em */
align-items: center;
width: var(--modal-input-width);
}
.control-label-disabled {
color: hsl(0deg 0% 50%);
}
.admin-realm-message-retention-days {
width: 5ch;
text-align: right;
}
.delete-choice {
display: inline-flex;
}
.delete-choice.hide {
display: none;
}
#add-default-stream-modal .dropdown-widget-button {
display: inline-flex;
}
#add-default-stream-modal .default_stream_choices_table {
margin-top: 2px;
}
#add-default-stream-modal .choice-row {
margin-bottom: 10px;
}
#add-default-stream-modal .choice-row:last-of-type .delete-choice {
display: none;
}
.add_default_streams_button_container {
display: flex;
flex-wrap: wrap;
margin-top: auto;
margin-bottom: 12px;
gap: 6px;
}
.add_default_streams_button_container #show-add-default-streams-modal {
padding-top: 0;
padding-bottom: 0;
min-width: 0;
}
#add-custom-emoji-modal form {
margin: 0;
}
#add-custom-emoji-modal input[type="text"] {
padding: 6px;
}
#add-custom-emoji-modal .emoji_name_input {
margin-top: 10px;
}
#add-custom-emoji-modal #emoji-file-name {
white-space: nowrap;
font-style: italic;
color: hsl(0deg 0% 67%);
}
#add-custom-emoji-modal #emoji_preview_text {
margin-top: 6px;
}
#emoji_file_input_error {
vertical-align: middle;
}
.add-new-linkifier-box button,.add-new-playground-box button {
margin-left: calc(10em + 20px) !important;
}
.add-new-linkifier-box,
.add-new-playground-box {
margin-bottom: 15px;
}
.add-new-linkifier-box .checkbox,.add-new-playground-box .checkbox {
margin-top: 5px;
}
.settings-highlight-box .wrapper {
margin: 10px 0;
}
.admin_profile_fields_table .movable-row .move-handle,.edit_profile_field_choices_container .movable-row .move-handle,.profile_field_choices_table .movable-row .move-handle,.admin_linkifiers_table .movable-row .move-handle,.admin_channel_folders_table .movable-row .move-handle {
cursor: move;
-webkit-user-select: none;
user-select: none;
margin-right: 5px;
}
.admin_profile_fields_table .movable-row .fa-ellipsis-v,.edit_profile_field_choices_container .movable-row .fa-ellipsis-v,.profile_field_choices_table .movable-row .fa-ellipsis-v,.admin_linkifiers_table .movable-row .fa-ellipsis-v,.admin_channel_folders_table .movable-row .fa-ellipsis-v {
color: hsl(0deg 0% 75%);
position: relative;
top: 1px;
}
#admin-linkifier-pattern-status,
#admin-linkifier-template-status {
margin: 20px 0 0;
}
#organization-permissions .dropdown-widget-button {
color: var(--color-text-default);
}
#organization-settings .dropdown-widget-button {
color: var(--color-text-default);
}
.org-permissions-form .pill-container {
/* Subtract 2 * (2px padding) + 2 * (1px border) */
min-width: calc(var(--modal-input-width) - 6px);
}
.org-permissions-form .pill-container .input:first-child:empty::before {
opacity: 0.5;
content: attr(data-placeholder);
}
.progressive-table-wrapper {
position: relative;
max-height: calc(95vh - 220px);
overflow: auto;
width: 100%;
}
#admin-default-channels-list .progressive-table-wrapper {
max-height: calc(95vh - 280px);
}
#bot-settings .add-a-new-bot {
margin-bottom: 2px;
margin-top: 10px;
}
#bot-settings hr {
margin: 10px 0;
border-color: hsl(0deg 0% 85%);
}
#bot-settings .config-download-text {
margin-left: 5px;
}
#bot-settings .ind-tab {
width: auto;
min-width: 90px;
}
.bots_list {
list-style-type: none;
margin-left: 0;
}
.bots_list .bot-card-image {
vertical-align: top;
}
.bots_list .bot-card-name {
font-weight: 600;
font-size: 1.1rem;
margin: 7px 5px;
overflow: hidden;
line-height: 1.3em;
text-overflow: ellipsis;
white-space: pre;
}
.bots_list .bot-card-regenerate-bot-api-key {
position: relative;
margin-left: 5px;
color: hsl(0deg 0% 67%);
transition: color 0.3s ease;
}
.bots_list .bot-card-regenerate-bot-api-key:hover {
color: hsl(0deg 0% 27%);
}
.bots_list .edit-bot-buttons {
padding-top: 5px;
}
.bots_list .edit-bot-buttons button {
background-color: transparent;
}
.bots_list .edit-bot-buttons .bootstrap-btn {
padding: 4px;
}
.bots_list .edit-bot-buttons .sea-green {
color: hsl(177deg 70% 46%);
}
.bots_list .edit-bot-buttons .blue {
color: hsl(203deg 77% 56%);
}
.bots_list .edit-bot-buttons .danger-red {
color: hsl(0deg 56% 73%);
}
.bots_list .edit-bot-buttons .copy_zuliprc {
color: hsl(51deg 90% 50%);
}
.bots_list .edit-bot-buttons .purple {
color: hsl(278deg 62% 68%);
}
.bots_list .edit-bot-buttons .steel-blue {
color: hsl(207deg 44% 49%);
}
.bots_list .bot-information-box {
position: relative;
display: inline-block;
width: calc(50% - 10px);
margin: 5px;
border-radius: 4px;
box-sizing: border-box;
overflow: auto;
}
.bots_list .bot-information-box .bot-card-details {
display: inline-block;
width: calc(100% - 75px);
}
.bots_list img.bot-card-avatar {
margin: 10px 5px 0 10px;
height: 50px;
width: 50px;
border-radius: 4px;
vertical-align: top;
box-shadow: 0 0 4px hsl(0deg 0% 0% / 10%);
}
.bots_list .bot-card-email,.bots_list .bot-card-type {
margin-bottom: 5px;
}
.bots_list .bot-card-email .bot-card-value,.bots_list .bot-card-api-key .bot-card-api-key-value-and-button {
display: block;
margin-left: 0;
overflow-wrap: break-word;
word-break: break-all;
white-space: normal;
}
.bots_list .bot-card-api-key .bot-card-api-key-value-and-button {
font-family: "Source Code Pro", monospace;
font-size: 0.85em;
display: flex;
}
.bots_list .bot-card-info {
padding: 10px;
}
.bots_list .bot-card-field {
text-transform: uppercase;
font-weight: 600;
color: hsl(0deg 0% 67%);
}
#inactive_bots_list .bot_info .reactivate_bot {
margin-top: 5px;
}
.edit_bot_form {
font-size: 100%;
margin: 0;
padding: 0;
}
.edit_bot_form .buttons {
margin: 10px 0 5px;
}
.edit_bot_form #current_bot_avatar_image {
margin: 5px 0 8px;
}
.edit_bot_form .edit_bot_avatar_preview_text {
display: none;
}
#add_bot_preview_text {
display: none;
}
.edit_bot_avatar_preview_image,
#add_bot_preview_image {
height: 100px;
width: 100px;
margin: 2px 0 8px;
}
#add-alert-word form {
margin-bottom: 4px;
}
#add-alert-word input {
margin-bottom: 0;
}
.admin-linkifier-form label,.admin-playground-form label {
float: left;
padding-top: 5px;
width: 10em;
text-align: right;
margin-right: 20px;
}
.admin-profile-field-form #custom_external_account_url_pattern input,
#edit-custom-profile-field-form-modal .custom_external_account_detail input {
width: 70%;
}
#alert-words-table {
margin: 0;
}
#alert-words-table li {
list-style-type: none;
}
#alert-words-table li.alert-word-item:first-child {
background: none;
margin-top: 8px;
}
#alert-words-table .alert_word_listing .value {
overflow-wrap: break-word;
word-break: break-all;
white-space: normal;
}
#alert-words-table .edit-attachment-buttons {
position: absolute;
right: 20px;
top: 0;
}
#change_password_modal #change_password_container {
margin: 0;
}
#api_key_status {
margin: 0 0 10px;
}
#download_zuliprc {
color: hsl(0deg 0% 100%);
-webkit-text-decoration: none;
text-decoration: none;
}
#realm_domains_table {
margin: 0;
}
#api_key_form .settings-password-div,#change_password_modal .settings-password-div {
display: flex;
flex-wrap: wrap;
}
#api_key_form .settings-password-div .modal-field-label,#change_password_modal .settings-password-div .modal-field-label {
/* Keep the label to its own
line in the wrapping flexbox. */
flex: 0 0 100%;
}
#api_key_form .settings-password-div .password-input-row,#change_password_modal .settings-password-div .password-input-row {
display: flex;
margin-bottom: 10px;
/* This helps us in making sure that the
password_visibility_toggle does not look
misaligned in small screens where that component
increases in height on small screens. */
max-height: 2em;
}
#api_key_form .settings-password-div .password-input-row .modal_password_input,#change_password_modal .settings-password-div .password-input-row .modal_password_input {
/* The usual width of input is 206px, but we reduce
it by 30px to make way for the padding. */
width: 176px;
padding-right: 30px;
/* Override the original 10px value so that we can
set the margin-bottom in the parent div instead. */
margin-bottom: 0;
}
#api_key_form .settings-password-div .password-input-row .password_visibility_toggle,#change_password_modal .settings-password-div .password-input-row .password_visibility_toggle {
/* We're going to use flexbox, not
positioning, to get the clear button
over top of the input. This -2em
margin accomplishes that, in tandem
with the 2em width of this element,
which is shared with the ending
anchor element in left sidebar header
rows. We're using em instead of pixels
so the whitespace between the input box
and the icon doesn't decrease when the
icon's font-size increases when switching
from 14px info density to 16px info density
mode. */
width: 2em;
margin-left: -2em;
/* Make the button itself a flex container,
so we can perfectly center the X icon. */
display: flex;
justify-content: center;
align-items: center;
opacity: 0.6;
}
#api_key_form .settings-password-div .password-input-row .password_visibility_toggle:hover,#change_password_modal .settings-password-div .password-input-row .password_visibility_toggle:hover {
opacity: 1;
}
#api_key_form .settings-password-div .password-input-row .settings-forgot-password,#change_password_modal .settings-password-div .password-input-row .settings-forgot-password {
/* Make the link itself a flex container,
so we can perfectly center the text
in relation to the input box. */
display: flex;
align-items: center;
margin-left: 10px;
}
.emojiset_choices,
.user_list_style_values {
padding: 0 10px;
}
label.preferences-radio-choice-label {
border-bottom: 1px solid hsl(0deg 0% 0% / 20%);
padding: 8px 0 10px;
display: flex;
}
label.preferences-radio-choice-label:last-of-type {
border-bottom: none;
}
label.preferences-radio-choice-label input[type="radio"] {
position: relative;
top: -2px;
margin: 0 5px 0 0;
width: auto;
cursor: pointer;
}
label.preferences-radio-choice-label input[type="radio"]:focus {
outline: 1px dotted hsl(0deg 0% 20%);
outline: 5px auto -webkit-focus-ring-color;
outline-offset: -2px;
}
label.preferences-radio-choice-label input[type="radio"]:disabled {
cursor: not-allowed;
}
label.preferences-radio-choice-label input[type="radio"]:checked + .preferences-radio-choice-text {
font-weight: 600;
}
label.preferences-radio-choice-label .right {
/* Push to far right in flex container. */
margin-left: auto;
}
.emojiset_choices {
width: 25em; /* 350px / 14px em */
}
.emojiset_choices .emoji {
height: 22px;
width: 22px;
}
.user_list_style_values {
max-width: 25em; /* 350px / 14px em */
}
.user_list_style_values .preferences-radio-choice-label {
display: grid;
grid-template-columns: 10.7143em auto; /* 150px / 14px em */
justify-content: left;
margin-right: 6px;
}
.user_list_style_values .preferences-radio-choice-label .right {
margin-left: unset;
}
.user_list_style_values .preview {
white-space: nowrap;
overflow: hidden;
}
.user_list_style_values .preview .user-name-and-status-text {
display: flex;
flex-direction: column;
}
.user_list_style_values .preview .user-name-and-status-emoji .user-name {
max-width: 100%;
overflow: hidden;
}
.user_list_style_values .preview .status-text {
opacity: 0.75;
font-size: 90%;
}
.user_list_style_values .preview .status-text:not(:empty) {
margin-top: -3px;
}
.open-user-form {
min-width: initial !important;
}
#api_key_buttons {
display: inline-flex;
}
#api_key_buttons .regenerate_api_key {
margin-right: 5px;
}
.right.show .emoji_alt_code {
/* This better aligns the example alt code
with the other emoji styles. */
margin-right: 1px;
}
.download_bot_zuliprc,
.copy_zuliprc,
.open_bots_subscribed_streams,
.manage-bot-button,
.deactivate-bot-button {
display: inline-flex;
align-items: center;
}
/* -- new settings overlay -- */
#settings_page {
height: 95vh;
width: 97vw;
max-width: 73.1429em; /* 1024px at 14px em */
margin: 2.5vh auto;
overflow: hidden;
border-radius: 4px;
}
#settings_page .time-limit-custom-input {
width: 5ch;
text-align: right;
}
#settings_page .realm-time-limit-label {
vertical-align: middle;
}
#settings_page h3 {
font-size: 1.5em;
font-weight: normal;
line-height: 1.5;
}
#settings_page h5 {
font-size: 1em;
font-weight: normal;
line-height: 1.2;
margin: 10px 0;
}
#settings_page .sidebar-wrapper {
float: left;
position: relative;
width: var(--settings-sidebar-width);
height: 100%;
}
#settings_page .sidebar-wrapper .tab-container {
box-sizing: border-box;
height: var(--settings-overlay-header-height);
display: flex;
align-items: center;
justify-content: center;
background-color: var(--color-background-modal-bar);
border-bottom: 1px solid var(--color-border-modal-bar);
}
#settings_page .sidebar-wrapper .tab-container .tab-switcher {
display: flex;
justify-content: center;
}
#settings_page .sidebar-wrapper .tab-container .tab-switcher .ind-tab {
width: auto;
min-width: 6.7857em; /* 95px at 14px em */
}
#settings_page .sidebar {
height: calc(100% - var(--settings-overlay-header-height));
overflow-y: auto;
border-right: 1px solid var(--color-border-modal);
}
#settings_page .sidebar .header {
height: auto;
position: relative;
width: calc(100% - 20px);
padding: 10px;
text-align: center;
text-transform: uppercase;
background-color: var(--color-background-modal-bar);
border-bottom: 1px solid var(--color-border-modal-bar);
}
#settings_page .sidebar .sidebar-item {
display: grid;
/* 3.5714em is 50px at 14px/1em -- the legacy height of these rows. */
/* 2.8571em is 40px at 14px/1em */
grid-template:
"starting-anchor-element row-content ending-anchor-element" 3.5714em / 2.8571em minmax(
0,
1fr
)
minmax(34px, auto);
align-items: center;
outline: none;
cursor: pointer;
transition:
background-color 0.2s ease,
border-bottom 0.2s ease;
border-bottom: 1px solid var(--color-border-modal);
}
#settings_page .sidebar .sidebar-item:last-of-type .text {
border-bottom: none;
}
#settings_page .sidebar .sidebar-item.active {
/* TODO: Check with Vlad about highlight
colors such as this. */
background-color: var(--color-active-row-modal);
}
#settings_page .sidebar .sidebar-item .sidebar-item-icon {
font-size: 1.4em;
text-align: center;
color: hsl(0deg 0% 53%);
}
#settings_page .sidebar .sidebar-item .text {
/* Hyphenate for internationalization */
-webkit-hyphens: auto;
hyphens: auto;
}
#settings_page .sidebar .sidebar-item .locked {
font-size: 1em;
text-align: center;
color: hsl(0deg 0% 62%);
}
#settings_page .sidebar .collapse-settings-button,#settings_page .sidebar .collapse-settings-button > #toggle_collapse_chevron {
color: var(--color-text-url);
}
#settings_page .sidebar .collapse-settings-button:not(#does-not-exist):hover,#settings_page .sidebar .collapse-settings-button > #toggle_collapse_chevron:hover {
cursor: pointer;
color: var(--color-text-url-hover);
}
#settings_page .sidebar .org-settings-list {
display: none;
}
#settings_page .sidebar .hide-org-settings {
display: none;
}
#settings_page .sidebar .normal-settings-list,#settings_page .sidebar .org-settings-list {
position: relative;
list-style: none;
margin: 0;
padding: 0;
}
#settings_page .settings-header {
padding-top: 1px;
display: flex;
align-items: center;
justify-content: center;
}
#settings_page .settings-header.mobile {
display: none;
border-bottom: 1px solid var(--color-border-modal-bar);
}
#settings_page .settings-header.mobile .fa-chevron-left {
float: left;
}
#settings_page .settings-header h1 {
text-align: center;
font-size: 1.1em;
line-height: 1;
text-transform: uppercase;
}
#settings_page .settings-header .exit {
font-weight: 600;
position: absolute;
right: 0.7142em; /* 10px at 14px em */
color: hsl(0deg 0% 67%);
cursor: pointer;
}
#settings_page .settings-header .exit-sign {
font-size: 1.5em;
font-weight: 600;
cursor: pointer;
}
#settings_page .content-wrapper {
position: absolute;
left: var(--settings-sidebar-width);
width: calc(100% - var(--settings-sidebar-width));
height: 100%;
overflow: hidden;
}
#settings_page .content-wrapper .settings-header {
width: 100%;
height: var(--settings-overlay-header-height);
box-sizing: border-box;
border-bottom: 1px solid var(--color-border-modal-bar);
background-color: var(--color-background-modal-bar);
}
#settings_page .content-wrapper .settings-header h1 .section {
font-weight: 400;
color: inherit;
opacity: 0.6;
}
#settings_page .content-wrapper #settings_content {
position: relative;
width: 100%;
height: calc(100% - var(--settings-overlay-header-height));
float: left;
overflow: auto;
background-color: hsl(0deg 0% 0% / 2%);
}
#settings_page .preferences-settings-form select {
width: var(--modal-input-width);
}
.time-limit-custom-input,
.realm_jitsi_server_url_custom_input {
padding: 4px 6px;
color: var(--color-text-default);
border: 1px solid hsl(0deg 0% 80%);
transition:
border-color linear 0.2s,
box-shadow linear 0.2s;
}
.time-limit-custom-input:focus,.realm_jitsi_server_url_custom_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%);
}
#realm_jitsi_server_url_setting {
display: flex;
flex-wrap: wrap;
gap: 15px;
}
#realm_jitsi_server_url_setting .jitsi_server_url_custom_input_label {
margin-bottom: var(--margin-bottom-field-description);
}
#profile-settings .custom_user_field,#edit-user-form .custom_user_field {
padding-bottom: 20px;
}
#profile-settings .custom_user_field textarea,#edit-user-form .custom_user_field textarea {
height: 80px;
}
#profile-settings .custom_user_field:hover .remove_date,#edit-user-form .custom_user_field:hover .remove_date {
display: inline-flex;
}
#profile-settings .custom_user_field .remove_date,#edit-user-form .custom_user_field .remove_date {
opacity: 0.5;
display: none;
cursor: pointer;
grid-area: close-button;
z-index: 5;
}
#profile-settings .custom_user_field .remove_date:hover,#edit-user-form .custom_user_field .remove_date:hover {
opacity: 1;
}
#profile-settings .custom_user_field .datepicker,#edit-user-form .custom_user_field .datepicker {
cursor: default;
padding-right: 1.4285em; /* 20px at 14px em */
/* full input width minus right padding and
6px left padding from .settings_text_input
and 1px border on each side */
max-width: calc(var(--modal-input-width) - 1.4285em - 8px);
}
#profile-settings .custom_user_field input.datepicker[disabled],#edit-user-form .custom_user_field input.datepicker[disabled] {
cursor: not-allowed;
}
#profile-settings #show_my_user_profile_modal,#edit-user-form #show_my_user_profile_modal {
width: 100%;
top: 20px;
position: sticky;
}
#profile-settings #show_my_user_profile_modal .show-user-profile-icon,#edit-user-form #show_my_user_profile_modal .show-user-profile-icon {
padding-left: 2px;
vertical-align: middle;
}
#edit-user-form .person_picker {
/* Subtract (1px border and 2px of padding) on each side */
min-width: calc(var(--modal-input-width) - 6px);
}
#edit-user-form textarea {
/* Subtract (1px border and 6px padding) on each side */
width: calc(var(--modal-input-width) - 14px);
}
#manage-profile-tab #edit-user-form .name-setting,#manage-profile-tab #bot-edit-form .name-setting {
margin-bottom: 10px;
}
#manage-profile-tab input,#manage-profile-tab input[type="url"],#manage-profile-tab textarea,#manage-profile-tab select {
/* Override undesired Bootstrap default. */
margin-bottom: 0;
}
.subsection-failed-status p {
background-color: hsl(0deg 43% 91%);
padding: 2px 6px;
border-radius: 4px;
margin: 0 0 0 5px;
}
#muted_topics_table {
width: 90%;
margin: 0 auto;
}
#muted_topics_table tbody {
border-bottom: none;
}
#payload_url_inputbox input[type="text"] {
width: 340px;
}
.settings-field-label {
margin-bottom: var(--margin-bottom-field-description);
/* Avoid having the clickable area extend to the full width of the containing element */
width: -moz-fit-content;
width: fit-content;
}
.settings-profile-user-field-hint {
color: var(--color-text-settings-field-hint);
/* We effectively eliminate the margin-bottom on
.settings-field-label by pulling .field-hint
up a corresponding negative value. This cinches
things up a little tighter, given the generous
line-height (20px) on