mirror of
https://github.com/zulip/zulip.git
synced 2026-06-12 21:00:58 +08:00
624fea2e8e
This commit adds a cancel button to the upload banner, replacing the previous close icon. Now, the cancel button is used to cancel the upload process, while the close icon is used to remove the upload banner without interrupting the upload. A new case has been added to the switch statement in the 'upload.js' file to handle the functionality of hiding the banner called 'upload_banner_hide_button'. Replaced the functionality of the 'compose_banner_close_banner' case inside the switch statement with a new case called 'upload_banner_cancel_button'. The cancel button is now assigned the selector 'upload_banner_cancel_button'. `Cancel` button is only preset for banner which tracks progress while a file is being uploaded. To maintain consistency with other banners, the cancel button's dimensions and color have been adjusted to match the style of other buttons present in different banners. Fixes: #21156
969 lines
20 KiB
CSS
969 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,
|
|
.upload_banner_cancel_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,
|
|
.upload_banner_cancel_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 {
|
|
flex-grow: 1;
|
|
}
|
|
|
|
.upload_msg,
|
|
.main-view-banner-close-button,
|
|
.upload_banner_cancel_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 {
|
|
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);
|
|
}
|
|
|
|
.compose_control_buttons_container {
|
|
margin-right: auto;
|
|
display: flex;
|
|
gap: 4px;
|
|
align-items: center;
|
|
|
|
/* We use the selector in this manner to maintain specificity. */
|
|
.compose_control_button_container .compose_gif_icon {
|
|
font-size: 22px;
|
|
|
|
/* Remove top and bottom padding. This is necessary
|
|
* because `compose_gif_icon` is no longer a flex item. */
|
|
padding: 0 5px;
|
|
}
|
|
|
|
.compose_control_button {
|
|
padding: 5px;
|
|
opacity: 0.7;
|
|
color: inherit;
|
|
text-decoration: none;
|
|
font-size: 17px;
|
|
text-align: center;
|
|
|
|
&:hover {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
.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%);
|
|
}
|
|
}
|
|
}
|
|
|
|
.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;
|
|
}
|
|
}
|