mirror of
https://github.com/zulip/zulip.git
synced 2026-06-24 21:08:25 +08:00
a84eea9b84
This involves in two changes for styling. 1. The alert class is moved from alert.css to app_components.css as this class serves nothing but to default .alert elements to be hidden. This is only required in the webapp but not portico pages (where .alert elements are preferred to be shown by default). 2. The import statement for alert.css is moved from app.js to common.js, so that both the webapp and the portico pages can share the styles. This will be fine to share the styles as .alert-display, .alert-animations, .alert-box are more specific then .alert and they use nested class to define styles for inner elements. Undoes #17936 properly.
520 lines
11 KiB
CSS
520 lines
11 KiB
CSS
/* Reusable, object-oriented CSS base components for the Zulip webapp
|
|
(not included in the portico CSS) */
|
|
|
|
.flex {
|
|
width: 100%;
|
|
height: 100%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
/* Inserting this collapsed row between two flex items will make
|
|
* the flex item that comes after it break to a new row */
|
|
.break-row {
|
|
flex-basis: 100%;
|
|
height: 0;
|
|
}
|
|
|
|
.hide {
|
|
display: none;
|
|
}
|
|
|
|
.light {
|
|
font-weight: 300;
|
|
}
|
|
|
|
.inline-block {
|
|
display: inline-block;
|
|
}
|
|
|
|
.display-block {
|
|
display: block !important;
|
|
}
|
|
|
|
.box-shadow {
|
|
box-shadow: 0 0 10px hsla(0, 0%, 0%, 0.1);
|
|
}
|
|
|
|
.bg-white {
|
|
background-color: hsl(0, 0%, 100%);
|
|
}
|
|
|
|
.clear-float {
|
|
clear: both;
|
|
}
|
|
|
|
.invisible {
|
|
visibility: hidden;
|
|
}
|
|
|
|
.new-style {
|
|
/* -- base button styling -- */
|
|
.button {
|
|
padding: 7px 14px;
|
|
margin: 0;
|
|
min-width: 130px;
|
|
|
|
font-weight: 400;
|
|
line-height: normal;
|
|
text-align: center;
|
|
|
|
background-color: hsl(0, 0%, 100%);
|
|
color: inherit;
|
|
outline: none;
|
|
border: 1px solid hsl(0, 0%, 80%);
|
|
border-radius: 2px;
|
|
|
|
box-shadow: none;
|
|
|
|
cursor: pointer;
|
|
transition: all 0.2s ease;
|
|
|
|
/* -- button style variations -- */
|
|
&.no-style {
|
|
padding: 0;
|
|
background-color: transparent;
|
|
border: none;
|
|
min-width: 0;
|
|
width: auto;
|
|
outline: none;
|
|
box-shadow: none !important;
|
|
}
|
|
|
|
&.rounded {
|
|
border-radius: 4px;
|
|
}
|
|
|
|
&.green {
|
|
background-color: hsl(150, 31%, 53%);
|
|
}
|
|
|
|
&.grey {
|
|
background-color: hsl(0, 0%, 67%);
|
|
}
|
|
|
|
&.standalone {
|
|
margin-top: 10px;
|
|
}
|
|
|
|
&.small {
|
|
font-size: 0.8rem;
|
|
min-width: inherit;
|
|
padding: 6px 10px;
|
|
}
|
|
|
|
&.small-flex {
|
|
width: auto;
|
|
min-width: inherit;
|
|
}
|
|
|
|
&:hover,
|
|
&:focus {
|
|
border-color: hsl(0, 0%, 60%);
|
|
}
|
|
|
|
&:active {
|
|
border-color: hsl(0, 0%, 60%);
|
|
color: inherit;
|
|
background-color: hsl(0, 0%, 95%);
|
|
}
|
|
|
|
&.sea-green {
|
|
color: hsl(156, 41%, 40%);
|
|
border-color: hsl(156, 28%, 70%);
|
|
|
|
&:hover,
|
|
&:focus {
|
|
border-color: hsl(156, 30%, 50%);
|
|
}
|
|
|
|
&:active {
|
|
border-color: hsl(156, 30%, 40%);
|
|
color: hsl(156, 44%, 43%);
|
|
background-color: hsl(154, 33%, 96%);
|
|
}
|
|
}
|
|
|
|
&.btn-warning {
|
|
color: hsl(35, 70%, 56%);
|
|
border-color: hsl(35, 98%, 84%);
|
|
|
|
&:hover,
|
|
&:focus {
|
|
border-color: hsl(35, 55%, 70%);
|
|
}
|
|
|
|
&:active {
|
|
color: hsl(35, 82%, 40%);
|
|
border-color: hsl(35, 55%, 70%);
|
|
background-color: hsl(33, 48%, 96%);
|
|
}
|
|
}
|
|
|
|
&.btn-danger {
|
|
color: hsl(357, 64%, 72%);
|
|
border-color: hsl(4, 56%, 82%);
|
|
|
|
&:hover,
|
|
&:focus {
|
|
border-color: hsl(2, 46%, 68%);
|
|
}
|
|
|
|
&:active {
|
|
color: hsl(357, 55%, 63%);
|
|
border-color: hsl(2, 46%, 68%);
|
|
background-color: hsl(7, 82%, 98%);
|
|
}
|
|
}
|
|
|
|
&.btn-link {
|
|
color: hsl(208, 56%, 53%);
|
|
text-decoration: none;
|
|
|
|
&:hover,
|
|
&:focus {
|
|
color: hsl(208, 56%, 38%);
|
|
}
|
|
}
|
|
|
|
&:disabled {
|
|
cursor: not-allowed;
|
|
filter: saturate(0);
|
|
background-color: hsl(0, 0%, 93%);
|
|
color: hsl(0, 3%, 52%);
|
|
|
|
&:hover {
|
|
background-color: hsl(0, 0%, 93%);
|
|
color: hsl(156, 39%, 54%);
|
|
border-color: hsl(156, 39%, 77%);
|
|
}
|
|
}
|
|
}
|
|
|
|
/* -- tab switcher -- */
|
|
|
|
.tab-switcher {
|
|
font-weight: initial;
|
|
margin: 2px 4px;
|
|
display: inline-block;
|
|
|
|
.ind-tab {
|
|
display: inline-block;
|
|
width: 90px;
|
|
margin: 0 -0.5px;
|
|
text-align: center;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
vertical-align: bottom; /* See https://stackoverflow.com/a/43266155/ */
|
|
padding: 3px 10px;
|
|
background-color: hsl(0, 0%, 100%);
|
|
cursor: pointer;
|
|
justify-content: center;
|
|
align-items: center;
|
|
|
|
&:focus {
|
|
outline: none;
|
|
}
|
|
|
|
&:not(.selected) {
|
|
border: 1px solid hsl(0, 0%, 80%);
|
|
}
|
|
|
|
&.first {
|
|
border-radius: 5px 0 0 5px;
|
|
border-right: 1px solid transparent;
|
|
}
|
|
|
|
&.middle {
|
|
border-right: 1px solid transparent;
|
|
}
|
|
|
|
&.last {
|
|
border-radius: 0 5px 5px 0;
|
|
}
|
|
|
|
&.selected {
|
|
position: relative;
|
|
background-color: hsl(0, 0%, 53%);
|
|
color: hsl(0, 0%, 100%);
|
|
border: 1px solid hsl(0, 0%, 47%);
|
|
z-index: 2;
|
|
}
|
|
|
|
&.disabled {
|
|
pointer-events: none;
|
|
color: hsl(0, 0%, 80%);
|
|
border-color: hsl(0, 0%, 87%);
|
|
}
|
|
}
|
|
|
|
&.large .ind-tab {
|
|
width: 100%;
|
|
}
|
|
|
|
&.allow-overflow {
|
|
display: flex;
|
|
|
|
.ind-tab {
|
|
display: flex;
|
|
text-overflow: initial;
|
|
white-space: initial;
|
|
vertical-align: middle;
|
|
}
|
|
}
|
|
}
|
|
|
|
.stream_sorter_toggle {
|
|
margin-left: auto;
|
|
}
|
|
}
|
|
|
|
/* -- unified overlay design component -- */
|
|
div.overlay {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
-webkit-overflow-scrolling: touch;
|
|
|
|
background-color: hsla(0, 0%, 13%, 0.8);
|
|
z-index: 105;
|
|
|
|
pointer-events: none;
|
|
opacity: 0;
|
|
visibility: hidden;
|
|
|
|
transition: all 0.2s ease-in;
|
|
overflow: hidden;
|
|
|
|
.overlay-content {
|
|
transform: translateY(20px);
|
|
transition: transform 0.2s ease-in;
|
|
z-index: 102;
|
|
}
|
|
|
|
&.show {
|
|
opacity: 1;
|
|
pointer-events: all;
|
|
visibility: visible;
|
|
transition: opacity 0.2s ease-out;
|
|
|
|
.overlay-content {
|
|
transform: translateY(0);
|
|
transition-timing-function: ease-out;
|
|
}
|
|
}
|
|
}
|
|
|
|
.input-append {
|
|
font-size: 90%;
|
|
letter-spacing: -0.3em;
|
|
display: block;
|
|
}
|
|
|
|
.input-append input[type="text"],
|
|
.new-style input[type="text"] {
|
|
border-radius: 5px;
|
|
box-shadow: none;
|
|
margin: 0;
|
|
}
|
|
|
|
.clear_search_button {
|
|
&:hover {
|
|
color: hsl(0, 0%, 0%);
|
|
}
|
|
|
|
&:disabled {
|
|
visibility: hidden;
|
|
}
|
|
|
|
&,
|
|
&:focus,
|
|
&:active,
|
|
&:disabled:hover {
|
|
position: relative;
|
|
right: 20px;
|
|
background: none;
|
|
border: none;
|
|
text-align: center;
|
|
padding-top: 8px;
|
|
padding-left: 4px;
|
|
color: hsl(0, 0%, 80%);
|
|
text-shadow: none;
|
|
outline: none !important;
|
|
box-shadow: none;
|
|
z-index: 5;
|
|
|
|
.user_status_overlay & {
|
|
margin-left: -26px;
|
|
right: 0;
|
|
padding-top: 6px;
|
|
}
|
|
}
|
|
}
|
|
|
|
.grey-box {
|
|
margin: 0;
|
|
padding: 5px 10px;
|
|
background-color: hsl(0, 0%, 98%);
|
|
border: 1px solid hsl(0, 0%, 87%);
|
|
border-radius: 4px;
|
|
|
|
list-style-type: none;
|
|
}
|
|
|
|
.white-box {
|
|
background-color: hsl(0, 0%, 100%);
|
|
border: 1px solid hsl(0, 0%, 87%);
|
|
}
|
|
|
|
.guest-avatar {
|
|
position: relative;
|
|
overflow: hidden;
|
|
|
|
&::after {
|
|
content: " ";
|
|
background-color: hsl(0, 0%, 47%);
|
|
position: absolute;
|
|
bottom: -30%;
|
|
right: -30%;
|
|
width: 50%;
|
|
height: 50%;
|
|
transform: rotate(45deg);
|
|
}
|
|
}
|
|
|
|
@media (width < $md_min) {
|
|
/* Override Bootstrap's responsive grid to display input at full width */
|
|
.input-append .stream-list-filter {
|
|
/* Input width = 100% - 10px margin x2 - 6px padding x2 - 1px border x2. */
|
|
width: calc(100% - 34px);
|
|
margin-left: 10px;
|
|
}
|
|
}
|
|
|
|
.stream-selection-header-colorblock {
|
|
/* box-shadow: 0px 2px 3px hsl(0, 0%, 80%); */
|
|
box-shadow: inset 0 2px 1px -2px hsl(0, 0%, 20%),
|
|
inset 2px 0 1px -2px hsl(0, 0%, 20%),
|
|
inset 0 -2px 1px -2px hsl(0, 0%, 20%);
|
|
width: 10px;
|
|
border-radius: 3px 0 0 3px;
|
|
border-bottom: 0;
|
|
}
|
|
|
|
.stream_header_colorblock {
|
|
@extend .stream-selection-header-colorblock;
|
|
margin-bottom: 5px;
|
|
z-index: 1;
|
|
}
|
|
|
|
.edit-controls .fa-angle-right,
|
|
.topic_stream_edit_header .fa-angle-right {
|
|
font-size: 0.9em;
|
|
-webkit-text-stroke: 0.05em;
|
|
position: relative;
|
|
margin: 0 5px;
|
|
top: 9px;
|
|
}
|
|
|
|
/* Standard loading indicators generated by the loading.js API */
|
|
.loading_indicator_spinner {
|
|
/* If you change these, make sure to adjust the constants in
|
|
loading.make_indicator as well */
|
|
height: 38px;
|
|
width: 38px;
|
|
float: left;
|
|
}
|
|
|
|
.loading_indicator_text {
|
|
/* If you change these, make sure to adjust the constants in
|
|
loading.make_indicator as well */
|
|
margin-left: 5px;
|
|
font-size: 1.2em;
|
|
font-weight: 300;
|
|
line-height: 38px;
|
|
}
|
|
|
|
.upgrade-tip {
|
|
&::before {
|
|
content: "\f135";
|
|
}
|
|
|
|
&:hover {
|
|
color: hsl(0, 0%, 20%);
|
|
border: 1px solid hsl(49, 20%, 60%);
|
|
box-shadow: 0 0 4px hsla(199, 79%, 56%, 0.2);
|
|
|
|
text-decoration: none;
|
|
}
|
|
}
|
|
|
|
.upgrade-tip,
|
|
.tip {
|
|
position: relative;
|
|
display: block;
|
|
background-color: hsl(46, 63%, 95%);
|
|
border: 1px solid hsl(49, 20%, 84%);
|
|
border-radius: 4px;
|
|
padding: 10px;
|
|
margin: 10px 0;
|
|
font-size: 1rem;
|
|
line-height: 1.5;
|
|
color: hsl(0, 0%, 40%);
|
|
|
|
&::before {
|
|
display: inline;
|
|
margin-right: 8px;
|
|
|
|
font-family: FontAwesome;
|
|
font-weight: 600;
|
|
}
|
|
}
|
|
|
|
.tip::before {
|
|
content: "\f0a2";
|
|
}
|
|
|
|
/* We are mostly consistent in how we style
|
|
unread counts, except for starred messages.
|
|
This is the common section.
|
|
*/
|
|
.unread_count {
|
|
float: right;
|
|
padding: 0 4px;
|
|
height: 16px;
|
|
line-height: 16px;
|
|
font-size: 12px;
|
|
font-weight: normal;
|
|
letter-spacing: 0.6px;
|
|
border-radius: 4px;
|
|
background-color: hsl(105, 2%, 50%);
|
|
color: hsl(0, 0%, 100%);
|
|
}
|
|
|
|
/* Implement the webapp's default-hidden convention for alert
|
|
elements. Portico pages lack this CSS and thus show them by
|
|
default. */
|
|
.alert {
|
|
display: none;
|
|
|
|
&.show {
|
|
display: block;
|
|
}
|
|
|
|
&#organization-status {
|
|
margin: 20px;
|
|
}
|
|
|
|
&.stream_create_info {
|
|
margin: 10px 10px 0 10px;
|
|
}
|
|
|
|
.bankruptcy_unread_count {
|
|
font-weight: 600;
|
|
}
|
|
}
|