mirror of
https://github.com/zulip/zulip.git
synced 2026-06-30 21:11:04 +08:00
c1675913a2
Ever since we started bundling the app with webpack, there’s been less and less overlap between our ‘static’ directory (files belonging to the frontend app) and Django’s interpretation of the ‘static’ directory (files served directly to the web). Split the app out to its own ‘web’ directory outside of ‘static’, and remove all the custom collectstatic --ignore rules. This makes it much clearer what’s actually being served to the web, and what’s being bundled by webpack. It also shrinks the release tarball by 3%. Signed-off-by: Anders Kaseorg <[email protected]>
858 lines
17 KiB
CSS
858 lines
17 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 {
|
|
border-top: 1px solid hsla(0, 0%, 0%, 0.07);
|
|
transition: background-color 200ms linear;
|
|
padding: 4px 4px 8px;
|
|
border-left: 1px solid hsl(0, 0%, 93%);
|
|
border-right: 1px solid hsl(0, 0%, 93%);
|
|
height: 100%;
|
|
display: flex;
|
|
flex-flow: column;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.message_comp {
|
|
display: none;
|
|
padding: 5px 10px 0 5px;
|
|
}
|
|
|
|
.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 {
|
|
&.message_header_private_message {
|
|
border-radius: 3px 0 0 3px;
|
|
border-bottom: 0;
|
|
background-color: hsl(0, 0%, 27%);
|
|
}
|
|
}
|
|
|
|
.right_part {
|
|
padding: 0;
|
|
display: flex;
|
|
align-items: center;
|
|
flex: 1;
|
|
|
|
.fa-angle-right {
|
|
font-size: 0.9em;
|
|
-webkit-text-stroke: 0.05em;
|
|
position: relative;
|
|
margin: 0 5px;
|
|
}
|
|
|
|
a.narrow_to_compose_recipients {
|
|
background: transparent;
|
|
font-size: 18px;
|
|
padding: 1px;
|
|
line-height: 20px;
|
|
opacity: 0.7;
|
|
border: 0;
|
|
margin-left: 3px;
|
|
text-decoration: none;
|
|
color: inherit;
|
|
|
|
&:hover {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
}
|
|
|
|
.pm_recipient {
|
|
margin-left: 5px;
|
|
display: flex;
|
|
align-items: center;
|
|
width: 100%;
|
|
}
|
|
|
|
#private-message .to_text {
|
|
vertical-align: middle;
|
|
|
|
font-weight: 600;
|
|
}
|
|
|
|
#compose-lock-icon,
|
|
#compose-globe-icon {
|
|
position: relative;
|
|
left: 6px;
|
|
top: 0.5px;
|
|
width: 0;
|
|
}
|
|
|
|
#compose-globe-icon {
|
|
left: 4.5px;
|
|
|
|
.zulip-icon-globe {
|
|
font-size: 12px;
|
|
}
|
|
}
|
|
|
|
.message_header {
|
|
background: none;
|
|
background-color: hsl(0, 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(39, 100%, 50%);
|
|
align-self: center;
|
|
|
|
&.over_limit {
|
|
color: hsl(0, 76%, 65%);
|
|
font-weight: bold;
|
|
}
|
|
}
|
|
|
|
#compose {
|
|
position: fixed;
|
|
bottom: 0;
|
|
left: 0;
|
|
z-index: 4;
|
|
width: 100%;
|
|
|
|
background-color: hsl(0, 0%, 100%);
|
|
}
|
|
|
|
#compose-container {
|
|
display: flex;
|
|
flex-direction: column;
|
|
width: 100%;
|
|
/* This should match the value for .app-main */
|
|
max-width: 1400px;
|
|
margin: auto;
|
|
}
|
|
|
|
#compose_top {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
padding-bottom: 5px;
|
|
}
|
|
|
|
#compose_top_right {
|
|
display: flex;
|
|
align-items: center;
|
|
margin-bottom: auto;
|
|
|
|
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;
|
|
}
|
|
|
|
.compose_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: 12px 5px 12px 15px;
|
|
}
|
|
|
|
.banner_content {
|
|
flex-grow: 1;
|
|
}
|
|
|
|
.compose_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;
|
|
}
|
|
}
|
|
|
|
.compose_banner_close_button {
|
|
font-size: 17px;
|
|
text-decoration: none;
|
|
padding: 12px 10px;
|
|
}
|
|
|
|
&.success {
|
|
background-color: hsl(147, 43%, 92%);
|
|
border: 1px solid hsla(147, 57%, 25%, 0.4);
|
|
color: hsl(147, 57%, 25%);
|
|
|
|
.compose_banner_close_button {
|
|
color: hsla(147, 57%, 25%, 0.5);
|
|
|
|
&:hover {
|
|
color: hsl(147, 57%, 25%);
|
|
}
|
|
|
|
&:active {
|
|
color: hsla(147, 57%, 25%, 0.75);
|
|
}
|
|
}
|
|
}
|
|
|
|
&.warning {
|
|
background-color: hsl(50, 75%, 92%);
|
|
border-color: hsla(38, 44%, 27%, 0.4);
|
|
color: hsl(38, 44%, 27%);
|
|
|
|
.compose_banner_close_button {
|
|
color: hsla(38, 44%, 27%, 0.5);
|
|
|
|
&:hover {
|
|
color: hsl(38, 44%, 27%);
|
|
}
|
|
|
|
&:active {
|
|
color: hsla(38, 44%, 27%, 0.75);
|
|
}
|
|
}
|
|
|
|
.compose_banner_action_button {
|
|
background-color: hsla(38, 44%, 27%, 0.1);
|
|
color: inherit;
|
|
|
|
&:hover {
|
|
background-color: hsla(38, 44%, 27%, 0.12);
|
|
}
|
|
|
|
&:active {
|
|
background-color: hsla(38, 44%, 27%, 0.15);
|
|
}
|
|
}
|
|
}
|
|
|
|
&.error {
|
|
background-color: hsl(4, 35%, 90%);
|
|
border-color: hsla(3, 57%, 33%, 0.4);
|
|
color: hsl(4, 58%, 33%);
|
|
|
|
.compose_banner_close_button {
|
|
color: hsla(4, 58%, 33%, 0.5);
|
|
|
|
&:hover {
|
|
color: hsl(4, 58%, 33%);
|
|
}
|
|
|
|
&:active {
|
|
color: hsla(4, 58%, 33%, 0.75);
|
|
}
|
|
}
|
|
|
|
.compose_banner_action_button {
|
|
background-color: hsla(3, 57%, 33%, 0.1);
|
|
color: inherit;
|
|
|
|
&:hover {
|
|
background-color: hsla(3, 57%, 33%, 0.12);
|
|
}
|
|
|
|
&:active {
|
|
background-color: hsla(3, 57%, 33%, 0.15);
|
|
}
|
|
}
|
|
}
|
|
|
|
&.info {
|
|
background-color: hsl(204, 58%, 92%);
|
|
border-color: hsla(204, 49%, 29%, 0.4);
|
|
position: relative;
|
|
color: hsl(204, 49%, 29%);
|
|
|
|
.compose_banner_close_button {
|
|
color: hsla(204, 49%, 29%, 0.5);
|
|
|
|
&:hover {
|
|
color: hsl(204, 49%, 29%);
|
|
}
|
|
|
|
&:active {
|
|
color: hsla(204, 49%, 29%, 0.75);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.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(204, 63%, 85%);
|
|
top: 0;
|
|
bottom: 0;
|
|
}
|
|
|
|
.upload_msg,
|
|
.compose_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(0, 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(0, 0%, 33%);
|
|
background-color: hsl(0, 0%, 100%);
|
|
|
|
&.over_limit,
|
|
&.over_limit:focus {
|
|
box-shadow: 0 0 0 1pt hsl(0, 76%, 65%);
|
|
|
|
&.flash {
|
|
animation: message-limit-flash 0.5s ease-in-out infinite;
|
|
}
|
|
}
|
|
|
|
&:read-only,
|
|
&:disabled {
|
|
cursor: not-allowed;
|
|
background-color: hsl(0, 0%, 93%);
|
|
}
|
|
|
|
&.invalid,
|
|
&.invalid:focus {
|
|
border: 1px solid hsl(3, 57%, 33%);
|
|
box-shadow: 0 0 2px hsl(3, 57%, 33%);
|
|
}
|
|
}
|
|
|
|
textarea.new_message_textarea,
|
|
.compose_table .recipient_box {
|
|
border: 1px solid hsla(0, 0%, 0%, 0.2);
|
|
box-shadow: none;
|
|
transition: border 0.2s ease;
|
|
|
|
&:focus {
|
|
outline: 0;
|
|
border: 1px solid hsl(0, 0%, 67%);
|
|
box-shadow: none;
|
|
}
|
|
}
|
|
|
|
input.recipient_box {
|
|
margin: 0;
|
|
height: 1.1em;
|
|
border-radius: 3px;
|
|
}
|
|
|
|
#stream_message_recipient_stream.recipient_box {
|
|
width: 20%;
|
|
border-radius: 0 3px 3px 0;
|
|
border-left: 0;
|
|
|
|
@media (width > $sm_min) {
|
|
min-width: 120px;
|
|
}
|
|
|
|
&:focus {
|
|
border-left: none;
|
|
}
|
|
|
|
&.lock-padding {
|
|
padding-left: 20px;
|
|
}
|
|
}
|
|
|
|
#stream_message_recipient_topic.recipient_box {
|
|
/* 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. */
|
|
width: 175px;
|
|
}
|
|
|
|
#private_message_recipient.recipient_box {
|
|
width: 100%;
|
|
}
|
|
|
|
#compose-send-button {
|
|
height: 24px;
|
|
padding-top: 3px;
|
|
padding-bottom: 3px;
|
|
margin-bottom: 0;
|
|
font-weight: 600;
|
|
font-size: 0.9em;
|
|
|
|
.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(0, 0%, 20%);
|
|
outline: 5px auto -webkit-focus-ring-color;
|
|
outline-offset: -2px;
|
|
}
|
|
}
|
|
|
|
&:first-child {
|
|
padding: 0 0 4px;
|
|
border-bottom: 1px solid hsla(0, 0%, 0%, 0.2);
|
|
}
|
|
}
|
|
|
|
.enter_sends_choice_text {
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.enter_sends_minor,
|
|
.enter_sends_minor kbd {
|
|
opacity: 0.9;
|
|
font-size: 11px;
|
|
color: hsl(0, 0%, 50%);
|
|
}
|
|
}
|
|
|
|
.enter_sends {
|
|
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;
|
|
}
|
|
}
|
|
|
|
#stream-message,
|
|
#private-message {
|
|
display: flex;
|
|
}
|
|
|
|
#private-message {
|
|
align-items: center;
|
|
width: 100%;
|
|
}
|
|
|
|
.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(0, 0%, 88%);
|
|
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: column;
|
|
align-items: flex-end;
|
|
white-space: nowrap;
|
|
gap: 4px;
|
|
margin-top: 2px;
|
|
}
|
|
|
|
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(0, 0%, 67%);
|
|
border-radius: 4px;
|
|
background-color: hsla(0, 0%, 0%, 0.02);
|
|
cursor: not-allowed;
|
|
}
|
|
|
|
.markdown_preview_spinner {
|
|
margin: auto;
|
|
}
|
|
|
|
.dropdown-menu {
|
|
ul {
|
|
list-style: none;
|
|
margin: 0;
|
|
background: hsl(0, 0%, 100%);
|
|
}
|
|
|
|
.typeahead-header {
|
|
margin: 0;
|
|
padding-left: 20px;
|
|
padding-right: 20px;
|
|
padding-top: 4px;
|
|
border-top: 1px solid hsla(0, 0%, 0%, 0.2);
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
#typeahead-header-text {
|
|
font-size: 12px;
|
|
}
|
|
|
|
&.typeahead {
|
|
background: hsl(0, 0%, 100%);
|
|
}
|
|
}
|
|
|
|
.compose_mobile_stream_button i,
|
|
.compose_mobile_private_button i {
|
|
margin-right: 4px;
|
|
}
|
|
|
|
@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) {
|
|
#stream_message_recipient_topic.recipient_box {
|
|
/* The max-width here is designed to allow this to share space with
|
|
the Stream input in small windows, without leaving empty space. */
|
|
max-width: calc(100% - 90px);
|
|
min-width: 110px;
|
|
}
|
|
|
|
#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;
|
|
}
|
|
}
|