mirror of
https://github.com/zulip/zulip.git
synced 2026-06-30 21:11:04 +08:00
ccdbdb35b2
Previously, the HTML structure of unread banners continued to utilize the old stylings. We are currently in the process of simplifing both the compose banner and unread banner stylings into one. These change will update the HTML structure to be the same as the compose banner and use the new stylings.
974 lines
20 KiB
CSS
974 lines
20 KiB
CSS
#compose_buttons {
|
|
text-align: right;
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
|
|
.new_message_button {
|
|
margin-left: 4px;
|
|
|
|
.button.small {
|
|
font-size: 1em;
|
|
padding: 3px 10px;
|
|
vertical-align: middle;
|
|
}
|
|
|
|
.compose_mobile_button {
|
|
& span {
|
|
font-size: 1.2em !important;
|
|
font-weight: 400;
|
|
line-height: 1em;
|
|
}
|
|
}
|
|
}
|
|
|
|
.reply_button_container {
|
|
flex: 1;
|
|
min-width: 0;
|
|
margin-left: 0;
|
|
|
|
.compose_reply_button {
|
|
width: 100%;
|
|
text-align: left;
|
|
overflow: hidden;
|
|
white-space: nowrap;
|
|
text-overflow: ellipsis;
|
|
}
|
|
}
|
|
|
|
.mobile_button_container {
|
|
@media (width >= $sm_min) {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
.stream_button_container,
|
|
.private_button_container {
|
|
@media (width < $sm_min) {
|
|
display: none;
|
|
}
|
|
}
|
|
}
|
|
|
|
/* Main geometry for this element is in zulip.css */
|
|
#compose-content {
|
|
background-color: hsl(232deg 30% 92%);
|
|
transition: background-color 200ms linear;
|
|
padding: 4px 4px 8px;
|
|
border: 1px solid hsl(0deg 0% 0% / 10%);
|
|
border-radius: 9px 9px 0 0;
|
|
box-shadow: 0 0 0 hsl(236deg 11% 28%);
|
|
height: 100%;
|
|
display: flex;
|
|
flex-flow: column;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.message_comp {
|
|
display: none;
|
|
padding: 5px 10px 0 5px;
|
|
|
|
#compose_banners {
|
|
max-height: min(25vh, 240px);
|
|
overflow-y: auto;
|
|
}
|
|
}
|
|
|
|
.autocomplete_secondary {
|
|
opacity: 0.8;
|
|
}
|
|
|
|
.active .autocomplete_secondary {
|
|
opacity: 1;
|
|
}
|
|
|
|
.narrow_to_compose_recipient_current_view_help {
|
|
margin: 0;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
.compose_table {
|
|
height: 100%;
|
|
display: flex;
|
|
flex-flow: column;
|
|
|
|
.stream-selection-header-colorblock {
|
|
box-shadow: none;
|
|
border: 1px solid hsl(0deg 0% 80%);
|
|
border-right: none;
|
|
|
|
&.message_header_private_message {
|
|
border-radius: 3px 0 0 3px;
|
|
border-bottom: 0;
|
|
background-color: hsl(0deg 0% 27%);
|
|
}
|
|
}
|
|
|
|
#compose-recipient {
|
|
&.compose-recipient-direct-selected {
|
|
#compose_select_recipient_widget {
|
|
border-radius: 4px !important;
|
|
}
|
|
|
|
.stream_header_colorblock {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
.topic-marker-container {
|
|
/* Ensure the marker ( < ) stays centered vertically
|
|
with the dropdown, even when adjacent stacking pills
|
|
in, e.g., a group DM. */
|
|
display: flex;
|
|
align-items: center;
|
|
height: var(--compose-recipient-box-min-height);
|
|
|
|
.fa-angle-right {
|
|
font-size: 0.9em;
|
|
-webkit-text-stroke: 0.05em;
|
|
align-self: center;
|
|
margin: 0 5px;
|
|
}
|
|
}
|
|
|
|
& a.narrow_to_compose_recipients {
|
|
background: transparent;
|
|
font-size: 18px;
|
|
padding: 0 1px;
|
|
align-self: center;
|
|
line-height: 20px;
|
|
opacity: 0.7;
|
|
border: 0;
|
|
margin-left: 3px;
|
|
text-decoration: none;
|
|
color: inherit;
|
|
|
|
&:hover {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
}
|
|
|
|
#compose-direct-recipient {
|
|
flex-grow: 1;
|
|
}
|
|
|
|
.message_header {
|
|
background: none;
|
|
background-color: hsl(0deg 0% 92%);
|
|
border: none;
|
|
border-radius: 0;
|
|
box-shadow: none !important;
|
|
}
|
|
|
|
.messagebox {
|
|
box-shadow: none !important;
|
|
}
|
|
}
|
|
|
|
#send_message_form {
|
|
margin: 0;
|
|
height: 100%;
|
|
|
|
.messagebox-wrapper {
|
|
flex: 1;
|
|
}
|
|
|
|
.messagebox {
|
|
/* normally 5px 14px; pull in the right and bottom a bit */
|
|
cursor: default;
|
|
padding: 0;
|
|
background: none;
|
|
box-shadow: none;
|
|
border: none;
|
|
height: 100%;
|
|
display: flex;
|
|
flex-flow: column;
|
|
}
|
|
|
|
.message_content {
|
|
margin-right: 0;
|
|
}
|
|
}
|
|
|
|
#below-compose-content {
|
|
display: flex;
|
|
flex-direction: column;
|
|
width: 100%;
|
|
margin-top: 6px;
|
|
margin-bottom: -2px;
|
|
|
|
.compose_bottom_top_container {
|
|
display: flex;
|
|
}
|
|
|
|
.compose_bottom_bottom_container {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
}
|
|
}
|
|
|
|
#compose_limit_indicator {
|
|
margin-right: 8px;
|
|
font-size: 12px;
|
|
color: hsl(39deg 100% 50%);
|
|
align-self: center;
|
|
|
|
&.over_limit {
|
|
color: hsl(0deg 76% 65%);
|
|
font-weight: bold;
|
|
}
|
|
}
|
|
|
|
#compose {
|
|
position: fixed;
|
|
bottom: 0;
|
|
left: 0;
|
|
z-index: 4;
|
|
}
|
|
|
|
#compose-container {
|
|
display: flex;
|
|
flex-direction: column;
|
|
width: 100%;
|
|
margin: auto;
|
|
}
|
|
|
|
#compose_top {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: flex-start;
|
|
padding-bottom: 5px;
|
|
}
|
|
|
|
#compose_top_right {
|
|
display: flex;
|
|
align-items: center;
|
|
height: var(--compose-recipient-box-min-height);
|
|
|
|
& button {
|
|
background: transparent;
|
|
color: inherit;
|
|
font-size: 15px;
|
|
font-weight: normal;
|
|
line-height: 20px;
|
|
opacity: 0.7;
|
|
border: 0;
|
|
padding: 0;
|
|
margin-left: 4px;
|
|
vertical-align: unset;
|
|
text-shadow: none;
|
|
|
|
&:hover {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
}
|
|
|
|
.collapse_composebox_button,
|
|
#compose_close {
|
|
display: none;
|
|
}
|
|
|
|
.main-view-banner {
|
|
margin-bottom: 20px;
|
|
border-radius: 5px;
|
|
border: 1px solid;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
font-size: 15px;
|
|
line-height: 18px;
|
|
|
|
& p {
|
|
margin: 0; /* override bootstrap */
|
|
/* 5px right padding + 10px left-margin of the neighbouring button will match the left padding */
|
|
padding: 8px 5px 8px 15px;
|
|
}
|
|
|
|
.banner_content {
|
|
flex-grow: 1;
|
|
}
|
|
|
|
.main-view-banner-action-button {
|
|
border: none;
|
|
border-radius: 4px;
|
|
padding: 5px 10px;
|
|
font-weight: 600;
|
|
margin-left: 10px;
|
|
margin-top: 4.5px;
|
|
margin-bottom: 4.5px;
|
|
height: 32px;
|
|
white-space: nowrap;
|
|
|
|
/* Extra margin to ensure the layout is identical when there is no
|
|
close button. */
|
|
&.right_edge {
|
|
margin-right: 10px;
|
|
}
|
|
}
|
|
|
|
.main-view-banner-close-button {
|
|
font-size: 16px;
|
|
text-decoration: none;
|
|
padding: 9px 8px;
|
|
}
|
|
|
|
&.success {
|
|
background-color: hsl(147deg 43% 92%);
|
|
border: 1px solid hsl(147deg 57% 25% / 40%);
|
|
color: hsl(147deg 57% 25%);
|
|
|
|
.main-view-banner-close-button {
|
|
color: hsl(147deg 57% 25% / 50%);
|
|
|
|
&:hover {
|
|
color: hsl(147deg 57% 25%);
|
|
}
|
|
|
|
&:active {
|
|
color: hsl(147deg 57% 25% / 75%);
|
|
}
|
|
}
|
|
|
|
.main-view-banner-action-button {
|
|
background-color: hsl(147deg 57% 25% / 10%);
|
|
color: inherit;
|
|
|
|
&:hover {
|
|
background-color: hsl(147deg 57% 25% / 12%);
|
|
}
|
|
|
|
&:active {
|
|
background-color: hsl(147deg 57% 25% / 15%);
|
|
}
|
|
}
|
|
}
|
|
|
|
/* warning and warning-style classes have the same CSS; this is since
|
|
the warning class has some associated javascript which we do not want
|
|
for some of the banners, for which we use the warning-style class. */
|
|
&.warning,
|
|
&.warning-style {
|
|
background-color: hsl(50deg 75% 92%);
|
|
border-color: hsl(38deg 44% 27% / 40%);
|
|
color: hsl(38deg 44% 27%);
|
|
|
|
.main-view-banner-close-button {
|
|
color: hsl(38deg 44% 27% / 50%);
|
|
|
|
&:hover {
|
|
color: hsl(38deg 44% 27%);
|
|
}
|
|
|
|
&:active {
|
|
color: hsl(38deg 44% 27% / 75%);
|
|
}
|
|
}
|
|
|
|
.main-view-banner-action-button {
|
|
background-color: hsl(38deg 44% 27% / 10%);
|
|
color: inherit;
|
|
|
|
&:hover {
|
|
background-color: hsl(38deg 44% 27% / 12%);
|
|
}
|
|
|
|
&:active {
|
|
background-color: hsl(38deg 44% 27% / 15%);
|
|
}
|
|
}
|
|
}
|
|
|
|
&.error {
|
|
background-color: hsl(4deg 35% 90%);
|
|
border-color: hsl(3deg 57% 33% / 40%);
|
|
color: hsl(4deg 58% 33%);
|
|
|
|
.main-view-banner-close-button {
|
|
color: hsl(4deg 58% 33% / 50%);
|
|
|
|
&:hover {
|
|
color: hsl(4deg 58% 33%);
|
|
}
|
|
|
|
&:active {
|
|
color: hsl(4deg 58% 33% / 75%);
|
|
}
|
|
}
|
|
|
|
.main-view-banner-action-button {
|
|
background-color: hsl(3deg 57% 33% / 10%);
|
|
color: inherit;
|
|
|
|
&:hover {
|
|
background-color: hsl(3deg 57% 33% / 12%);
|
|
}
|
|
|
|
&:active {
|
|
background-color: hsl(3deg 57% 33% / 15%);
|
|
}
|
|
}
|
|
}
|
|
|
|
&.info {
|
|
background-color: hsl(204deg 58% 92%);
|
|
border-color: hsl(204deg 49% 29% / 40%);
|
|
position: relative;
|
|
color: hsl(204deg 49% 29%);
|
|
|
|
.main-view-banner-close-button {
|
|
color: hsl(204deg 49% 29% / 50%);
|
|
|
|
&:hover {
|
|
color: hsl(204deg 49% 29%);
|
|
}
|
|
|
|
&:active {
|
|
color: hsl(204deg 49% 29% / 75%);
|
|
}
|
|
}
|
|
|
|
.main-view-banner-action-button {
|
|
background-color: hsl(204deg 49% 29% / 10%);
|
|
color: inherit;
|
|
|
|
&:hover {
|
|
background-color: hsl(204deg 49% 29% / 12%);
|
|
}
|
|
|
|
&:active {
|
|
background-color: hsl(204deg 49% 29% / 15%);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.upload_banner {
|
|
overflow: hidden;
|
|
|
|
&.hidden {
|
|
display: none;
|
|
}
|
|
|
|
.moving_bar {
|
|
position: absolute;
|
|
width: 0;
|
|
/* The progress updates seem to come every second or so,
|
|
so this is the smoothest it can probably get. */
|
|
transition: width 1s ease-in-out;
|
|
background: hsl(204deg 63% 85%);
|
|
top: 0;
|
|
bottom: 0;
|
|
}
|
|
|
|
.upload_msg,
|
|
.main-view-banner-close-button {
|
|
z-index: 1;
|
|
position: relative;
|
|
}
|
|
}
|
|
|
|
.composition-area {
|
|
position: relative;
|
|
flex: 1;
|
|
}
|
|
|
|
@keyframes message-limit-flash {
|
|
0% {
|
|
box-shadow: none;
|
|
}
|
|
|
|
100% {
|
|
box-shadow: 0 0 0 1pt hsl(0deg 76% 65%);
|
|
}
|
|
}
|
|
|
|
textarea.new_message_textarea {
|
|
display: table-cell;
|
|
width: calc(100% - 12px);
|
|
padding: 5px;
|
|
height: 1.5em;
|
|
max-height: 22em;
|
|
margin-bottom: 0;
|
|
resize: vertical !important;
|
|
margin-top: 5px;
|
|
border-radius: 4px;
|
|
color: hsl(0deg 0% 33%);
|
|
background-color: hsl(0deg 0% 100%);
|
|
|
|
&.over_limit,
|
|
&.over_limit:focus {
|
|
box-shadow: 0 0 0 1pt hsl(0deg 76% 65%);
|
|
|
|
&.flash {
|
|
animation: message-limit-flash 0.5s ease-in-out infinite;
|
|
}
|
|
}
|
|
|
|
&:read-only,
|
|
&:disabled {
|
|
cursor: not-allowed;
|
|
background-color: hsl(0deg 0% 93%);
|
|
}
|
|
|
|
&.invalid,
|
|
&.invalid:focus {
|
|
border: 1px solid hsl(3deg 57% 33%);
|
|
box-shadow: 0 0 2px hsl(3deg 57% 33%);
|
|
}
|
|
}
|
|
|
|
textarea.new_message_textarea,
|
|
.compose_table .recipient_box {
|
|
border: 1px solid hsl(0deg 0% 0% / 20%);
|
|
box-shadow: none;
|
|
transition: border 0.2s ease;
|
|
color: var(--color-text-default);
|
|
|
|
&:focus {
|
|
outline: 0;
|
|
border: 1px solid hsl(0deg 0% 67%);
|
|
box-shadow: none;
|
|
}
|
|
}
|
|
|
|
input.recipient_box {
|
|
margin: 0;
|
|
padding: 0 6px;
|
|
height: auto;
|
|
border-radius: 3px;
|
|
}
|
|
|
|
#compose_select_recipient_widget {
|
|
border-radius: 0 4px 4px 0;
|
|
width: auto;
|
|
outline: none;
|
|
|
|
&.dropdown-widget-button {
|
|
padding: 0 6px;
|
|
}
|
|
}
|
|
|
|
#stream_message_recipient_topic.recipient_box {
|
|
width: 100%;
|
|
/* This width roughly corresponds to how long of a topic can appear in
|
|
the left sidebar with a single digit unread count without being
|
|
cut off. */
|
|
max-width: 175px;
|
|
}
|
|
|
|
#private_message_recipient.recipient_box {
|
|
width: 100%;
|
|
}
|
|
|
|
#compose-send-button {
|
|
padding: 3px 12px;
|
|
margin-bottom: 0;
|
|
font-weight: 600;
|
|
font-size: 0.9em;
|
|
border-radius: 4px 0 0 4px;
|
|
|
|
.loader {
|
|
display: none;
|
|
position: relative;
|
|
top: -6px;
|
|
}
|
|
}
|
|
|
|
.enter_sends_choices {
|
|
.enter_sends_choice {
|
|
display: flex;
|
|
gap: 8px;
|
|
padding-top: 4px;
|
|
|
|
& input[type="radio"] {
|
|
position: relative;
|
|
top: 5px;
|
|
width: auto;
|
|
cursor: pointer;
|
|
margin: 4px 0 0;
|
|
|
|
&:focus {
|
|
outline: 1px dotted hsl(0deg 0% 20%);
|
|
outline: 5px auto -webkit-focus-ring-color;
|
|
outline-offset: -2px;
|
|
}
|
|
}
|
|
|
|
&:first-child {
|
|
padding: 0 0 4px;
|
|
border-bottom: 1px solid hsl(0deg 0% 0% / 20%);
|
|
}
|
|
}
|
|
|
|
.enter_sends_choice_text {
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.enter_sends_minor,
|
|
.enter_sends_minor kbd {
|
|
opacity: 0.9;
|
|
font-size: 11px;
|
|
color: hsl(0deg 0% 50%);
|
|
}
|
|
}
|
|
|
|
.open_enter_sends_dialog {
|
|
font-size: 12px;
|
|
height: 14px;
|
|
padding-left: 4px;
|
|
opacity: 0.7;
|
|
margin-bottom: 5px;
|
|
position: relative;
|
|
top: -2px;
|
|
cursor: pointer;
|
|
|
|
@media (width < $mm_min) {
|
|
font-size: 11px;
|
|
}
|
|
|
|
& kbd {
|
|
height: 16px;
|
|
padding: 0 4px;
|
|
}
|
|
|
|
&:hover {
|
|
opacity: 1;
|
|
}
|
|
|
|
.enter_sends_true,
|
|
.enter_sends_false {
|
|
display: none;
|
|
}
|
|
|
|
& i {
|
|
padding-left: 3px;
|
|
font-size: 12px;
|
|
font-weight: 600;
|
|
}
|
|
}
|
|
|
|
#compose-recipient {
|
|
display: flex;
|
|
width: 100%;
|
|
/* Use this containing flex element to
|
|
establish the minimum height of all its
|
|
children; the default `align-items: stretch`
|
|
(which is set on any flexbox without specifying
|
|
it) ensures that the child flex items will
|
|
always stretch to fit the height set here;
|
|
larger heights, such as on group-DM pills,
|
|
will allow this to grow as needed.
|
|
Child flex items like chevrons take
|
|
`align-self: center` to center only
|
|
themselves, where necessary. */
|
|
min-height: var(--compose-recipient-box-min-height);
|
|
}
|
|
|
|
.tippy-content .compose_control_buttons_container {
|
|
.compose_gif_icon {
|
|
bottom: 5px;
|
|
}
|
|
}
|
|
|
|
.compose_control_buttons_container {
|
|
margin-right: auto;
|
|
display: flex;
|
|
gap: 4px;
|
|
align-items: center;
|
|
|
|
.compose_gif_icon {
|
|
font-size: 22px;
|
|
height: 18px;
|
|
line-height: 18px;
|
|
}
|
|
|
|
.fa-eye {
|
|
position: relative;
|
|
top: -0.7px;
|
|
}
|
|
|
|
.compose_control_menu {
|
|
padding: 0 7px;
|
|
font-size: 15px;
|
|
}
|
|
|
|
.compose_control_menu_wrapper {
|
|
opacity: 0.7;
|
|
padding: 0;
|
|
margin: 0;
|
|
|
|
&:hover {
|
|
opacity: 1;
|
|
}
|
|
|
|
.compose_control_menu {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
.hide-sm,
|
|
.hide-lg {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 4px;
|
|
padding: 0;
|
|
margin: 0;
|
|
}
|
|
|
|
.divider {
|
|
color: hsl(0deg 0% 75%);
|
|
font-size: 20px;
|
|
margin: 0 3px;
|
|
}
|
|
|
|
.compose_draft_button {
|
|
font-size: 15px;
|
|
font-weight: 600;
|
|
font-family: "Source Sans 3", sans-serif;
|
|
padding: 0 5px;
|
|
position: relative;
|
|
top: 0.7px;
|
|
}
|
|
|
|
.compose_help_button {
|
|
font-size: 20px;
|
|
line-height: 17px;
|
|
}
|
|
}
|
|
|
|
.compose_right_float_container {
|
|
display: flex;
|
|
flex-direction: row;
|
|
white-space: nowrap;
|
|
margin-top: 2px;
|
|
height: 24px;
|
|
|
|
&.disabled-compose-send-button-container {
|
|
cursor: not-allowed;
|
|
|
|
& button {
|
|
pointer-events: none;
|
|
background-color: hsl(0deg 0% 65%);
|
|
}
|
|
}
|
|
}
|
|
|
|
a.compose_control_button {
|
|
padding: 5px;
|
|
opacity: 0.7;
|
|
color: inherit;
|
|
text-decoration: none;
|
|
font-size: 17px;
|
|
text-align: center;
|
|
|
|
&:hover {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
/* This is used to override the
|
|
* properties of `a.compose_control_button`
|
|
* without using `!important`.
|
|
*/
|
|
a.compose_control_button.hide {
|
|
display: none;
|
|
}
|
|
|
|
.drag {
|
|
display: none;
|
|
height: 18px;
|
|
width: 100%;
|
|
top: 23px;
|
|
position: relative;
|
|
cursor: ns-resize;
|
|
}
|
|
|
|
.preview_message_area {
|
|
/* minus 5px padding. */
|
|
width: calc(100% - 12px);
|
|
padding: 5px;
|
|
margin-top: 5px;
|
|
/* the maximum height the textarea gets to. */
|
|
max-height: 308px;
|
|
/* the minimum height the textarea collapses to. */
|
|
min-height: 42px;
|
|
overflow: auto;
|
|
|
|
border: 1px solid hsl(0deg 0% 67%);
|
|
border-radius: 4px;
|
|
background-color: hsl(0deg 0% 98%);
|
|
cursor: not-allowed;
|
|
}
|
|
|
|
.markdown_preview_spinner {
|
|
margin: auto;
|
|
}
|
|
|
|
#compose_recipient_selection_dropdown {
|
|
display: flex;
|
|
justify-content: flex-start;
|
|
height: var(--compose-recipient-box-min-height);
|
|
|
|
.stream_header_colorblock {
|
|
margin: 0;
|
|
}
|
|
|
|
.dropdown-toggle {
|
|
border-radius: 0 4px 4px 0 !important;
|
|
display: flex;
|
|
min-width: 0;
|
|
}
|
|
|
|
.dropdown-menu {
|
|
/* The Bootstrap default of 160px wraps too early.
|
|
TODO: Replace this with a max-width and natural scaling? */
|
|
width: 200px;
|
|
top: auto;
|
|
left: -10px;
|
|
}
|
|
|
|
.dropup .dropdown-menu {
|
|
bottom: 100%;
|
|
margin-bottom: 17px;
|
|
}
|
|
|
|
#compose_select_recipient_name {
|
|
flex-grow: 1;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
color: var(--color-text-default);
|
|
|
|
.stream-privacy-type-icon {
|
|
font-size: 13px;
|
|
width: 13px;
|
|
height: 13px;
|
|
position: relative;
|
|
top: 2px;
|
|
}
|
|
}
|
|
|
|
.dropdown-list-body .list_item a {
|
|
white-space: normal;
|
|
}
|
|
|
|
.fa-chevron-down {
|
|
float: right;
|
|
padding-left: 5px;
|
|
color: hsl(0deg 0% 58%);
|
|
font-weight: lighter;
|
|
}
|
|
|
|
/* This is the "Select a stream" default message */
|
|
.text-warning {
|
|
color: inherit;
|
|
}
|
|
}
|
|
|
|
.dropdown-menu {
|
|
& ul {
|
|
list-style: none;
|
|
margin: 0;
|
|
background: hsl(0deg 0% 100%);
|
|
}
|
|
|
|
.typeahead-header {
|
|
margin: 0;
|
|
padding-left: 20px;
|
|
padding-right: 20px;
|
|
padding-top: 4px;
|
|
border-top: 1px solid hsl(0deg 0% 0% / 20%);
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
#typeahead-header-text {
|
|
font-size: 12px;
|
|
}
|
|
|
|
&.typeahead {
|
|
background: hsl(0deg 0% 100%);
|
|
}
|
|
}
|
|
|
|
.compose_mobile_stream_button i,
|
|
.compose_mobile_private_button i {
|
|
margin-right: 4px;
|
|
}
|
|
|
|
/* `^` icon located next to `Send` / `Scheduled` button which shows
|
|
options to schedule the message. */
|
|
#send_later {
|
|
display: flex;
|
|
align-items: center;
|
|
float: right;
|
|
color: hsl(0deg 0% 100%);
|
|
border-radius: 0 4px 4px 0;
|
|
padding: 0;
|
|
margin: 0;
|
|
|
|
.zulip-icon {
|
|
padding: 5px 9px;
|
|
}
|
|
|
|
.separator-line {
|
|
background-color: hsl(0deg 0% 100% / 65%);
|
|
height: 70%;
|
|
width: 1px;
|
|
}
|
|
|
|
&:hover,
|
|
&:focus {
|
|
box-shadow: none;
|
|
}
|
|
}
|
|
|
|
@media (width < $xl_min) {
|
|
#compose-content {
|
|
margin-right: 7px;
|
|
}
|
|
}
|
|
|
|
@media (width < $md_min) {
|
|
#compose-content {
|
|
margin-right: 7px;
|
|
margin-left: 7px;
|
|
}
|
|
}
|
|
|
|
@media (width < $mm_min) {
|
|
#compose-content {
|
|
margin-right: 5px;
|
|
margin-left: 5px;
|
|
}
|
|
}
|
|
|
|
#compose.compose-fullscreen {
|
|
z-index: 99;
|
|
|
|
#compose-container {
|
|
height: 100%;
|
|
}
|
|
|
|
.message_comp {
|
|
flex: 1;
|
|
display: flex !important;
|
|
flex-flow: column;
|
|
}
|
|
|
|
#compose-textarea,
|
|
#preview_message_area {
|
|
/* Setting height to 0 is necessary to make the flex+Simplebar
|
|
combination work correctly, without pushing the compose
|
|
controls offscreen when previewing a very tall message. */
|
|
max-height: none !important;
|
|
height: 0;
|
|
flex: 1;
|
|
}
|
|
}
|