Mirror
/
zulip
mirror of https://github.com/zulip/zulip.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

styles: Use standard CSS nesting syntax. 

CSS nesting is being standardized with the syntactic restriction that
the nested selector cannot start with an identifier.  This was
necessary to allow the syntax to be parsed without lookahead.

https://webkit.org/blog/13813/try-css-nesting-today-in-safari-technology-preview/
https://www.w3.org/TR/css-nesting-1/#syntax

The postcss-nesting plugin used by postcss-preset-env enforces this
restriction.

Signed-off-by: Anders Kaseorg <anders@zulip.com>
This commit is contained in:
Anders Kaseorg 2023-03-17 14:10:10 -07:00 committed by Tim Abbott
parent f03b609bfd
commit 5cdf38b1f7
30 changed files with 539 additions and 539 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
web/styles/app_components.css
View File

@ -473,7 +473,7 @@ div.overlay {
overflow: hidden; overflow: hidden;
white-space: nowrap; white-space: nowrap;
input { & input {
padding-right: 20px; padding-right: 20px;
} }
} }
@ -666,7 +666,7 @@ div.overlay {
color: hsl(0, 0%, 0%); color: hsl(0, 0%, 0%);
border-radius: 4px; border-radius: 4px;
span { & span {
color: hsl(0, 0%, 0%); color: hsl(0, 0%, 0%);
} }
@ -675,7 +675,7 @@ div.overlay {
background-color: hsl(240, 96%, 68%); background-color: hsl(240, 96%, 68%);
color: hsl(0, 0%, 100%); color: hsl(0, 0%, 100%);
span { & span {
color: hsl(0, 0%, 100%); color: hsl(0, 0%, 100%);
transition: all 0.2s ease; transition: all 0.2s ease;
} }
@ -697,7 +697,7 @@ div.overlay {
table-layout: auto; table-layout: auto;
border-collapse: separate; border-collapse: separate;
thead th { & thead th {
color: inherit; color: inherit;
background-color: hsl(0, 0%, 100%); background-color: hsl(0, 0%, 100%);
border-top: 1px solid hsla(0, 0%, 0%, 0.2) !important; border-top: 1px solid hsla(0, 0%, 0%, 0.2) !important;
@ -849,7 +849,7 @@ div.overlay {
.dropdown-list-widget .dropdown-list-wrapper { .dropdown-list-widget .dropdown-list-wrapper {
width: fit-content; width: fit-content;
span { & span {
width: fit-content; width: fit-content;
} }
} }

6
web/styles/components.css
View File

@ -2,14 +2,14 @@
(both web app and portico). */ (both web app and portico). */
.new-style { .new-style {
label.checkbox { & label.checkbox {
padding: 0; padding: 0;
display: inline-block; display: inline-block;
position: relative; position: relative;
vertical-align: top; vertical-align: top;
min-height: 20px; min-height: 20px;
input[type="checkbox"] { & input[type="checkbox"] {
position: absolute; position: absolute;
clip: rect(0, 0, 0, 0); clip: rect(0, 0, 0, 0);
@ -50,7 +50,7 @@
} }
} }
a.no-style { & a.no-style {
color: inherit; color: inherit;
} }
} }

16
web/styles/compose.css
View File

@ -14,7 +14,7 @@
} }
.compose_mobile_button { .compose_mobile_button {
span { & span {
font-size: 1.2em !important; font-size: 1.2em !important;
font-weight: 400; font-weight: 400;
line-height: 1em; line-height: 1em;
@ -109,7 +109,7 @@
margin: 0 5px; margin: 0 5px;
} }
a.narrow_to_compose_recipients { & a.narrow_to_compose_recipients {
background: transparent; background: transparent;
font-size: 18px; font-size: 18px;
padding: 1px; padding: 1px;
@ -252,7 +252,7 @@
align-items: center; align-items: center;
margin-bottom: auto; margin-bottom: auto;
button { & button {
background: transparent; background: transparent;
color: inherit; color: inherit;
font-size: 15px; font-size: 15px;
@ -286,7 +286,7 @@
font-size: 15px; font-size: 15px;
line-height: 18px; line-height: 18px;
p { & p {
margin: 0; /* override bootstrap */ margin: 0; /* override bootstrap */
/* 5px right padding + 10px left-margin of the neighbouring button will match the left padding */ /* 5px right padding + 10px left-margin of the neighbouring button will match the left padding */
padding: 12px 5px 12px 15px; padding: 12px 5px 12px 15px;
@ -564,7 +564,7 @@ input.recipient_box {
gap: 8px; gap: 8px;
padding-top: 4px; padding-top: 4px;
input[type="radio"] { & input[type="radio"] {
position: relative; position: relative;
top: 5px; top: 5px;
width: auto; width: auto;
@ -611,7 +611,7 @@ input.recipient_box {
font-size: 11px; font-size: 11px;
} }
kbd { & kbd {
height: 16px; height: 16px;
padding: 0 4px; padding: 0 4px;
} }
@ -625,7 +625,7 @@ input.recipient_box {
display: none; display: none;
} }
i { & i {
padding-left: 3px; padding-left: 3px;
font-size: 12px; font-size: 12px;
font-weight: 600; font-weight: 600;
@ -775,7 +775,7 @@ a.compose_control_button.hide {
} }
.dropdown-menu { .dropdown-menu {
ul { & ul {
list-style: none; list-style: none;
margin: 0; margin: 0;
background: hsl(0, 0%, 100%); background: hsl(0, 0%, 100%);

52
web/styles/dark_theme.css
View File

@ -3,7 +3,7 @@
%dark-theme { %dark-theme {
color-scheme: dark; color-scheme: dark;
body { & body {
color: hsl(236, 33%, 90%); color: hsl(236, 33%, 90%);
} }
@ -12,20 +12,20 @@
opacity: 1; opacity: 1;
} }
textarea::placeholder, & textarea::placeholder,
input::placeholder { input::placeholder {
@extend .placeholder; @extend .placeholder;
} }
a:hover { & a:hover {
color: hsl(200, 79%, 66%); color: hsl(200, 79%, 66%);
code { & code {
color: hsl(200, 79%, 66%); color: hsl(200, 79%, 66%);
} }
} }
ul.filters a:hover { & ul.filters a:hover {
color: inherit; color: inherit;
} }
@ -68,7 +68,7 @@
.enter_sends_choices { .enter_sends_choices {
color: hsl(236, 33%, 90%); color: hsl(236, 33%, 90%);
kbd { & kbd {
background-color: hsl(211, 29%, 14%); background-color: hsl(211, 29%, 14%);
border-color: hsl(211, 29%, 14%); border-color: hsl(211, 29%, 14%);
box-shadow: inset 0 -1px 0 hsl(210, 5%, 34%, 0.2); box-shadow: inset 0 -1px 0 hsl(210, 5%, 34%, 0.2);
@ -81,7 +81,7 @@
} }
} }
table.table-striped thead.table-sticky-headers th { & table.table-striped thead.table-sticky-headers th {
background-color: hsl(0, 0%, 0%); background-color: hsl(0, 0%, 0%);
&[data-sort]:hover { &[data-sort]:hover {
@ -155,7 +155,7 @@
} }
} }
body, & body,
.app-main, .app-main,
.header-main, .header-main,
.column-middle, .column-middle,
@ -175,7 +175,7 @@
#scroll-to-bottom-button-container { #scroll-to-bottom-button-container {
background: transparent; background: transparent;
span { & span {
color: hsl(0, 0%, 27%); color: hsl(0, 0%, 27%);
} }
} }
@ -291,7 +291,7 @@
} }
} }
textarea.new_message_textarea { & textarea.new_message_textarea {
&.invalid, &.invalid,
&.invalid:focus { &.invalid:focus {
border-color: hsl(3, 73%, 74%); border-color: hsl(3, 73%, 74%);
@ -323,7 +323,7 @@
.streams_popover .sp-container { .streams_popover .sp-container {
background-color: transparent; background-color: transparent;
button { & button {
background-color: hsl(208, 35%, 11%); background-color: hsl(208, 35%, 11%);
border: 1px solid hsl(210, 36%, 4%); border: 1px solid hsl(210, 36%, 4%);
color: hsl(236, 31%, 90%); color: hsl(236, 31%, 90%);
@ -428,7 +428,7 @@
} }
} }
input[type="text"], & input[type="text"],
input[type="email"], input[type="email"],
input[type="password"], input[type="password"],
input[type="number"], input[type="number"],
@ -444,7 +444,7 @@
color: inherit; color: inherit;
} }
select option { & select option {
background-color: hsl(212, 28%, 18%); background-color: hsl(212, 28%, 18%);
color: hsl(236, 33%, 90%); color: hsl(236, 33%, 90%);
} }
@ -526,7 +526,7 @@
box-shadow: 0 0 1px hsl(0, 0%, 98%); box-shadow: 0 0 1px hsl(0, 0%, 98%);
} }
input[type="text"]:focus, & input[type="text"]:focus,
input[type="email"]:focus, input[type="email"]:focus,
input[type="number"]:focus, input[type="number"]:focus,
textarea:focus, textarea:focus,
@ -601,7 +601,7 @@
color: hsla(0, 0%, 90%, 1); color: hsla(0, 0%, 90%, 1);
} }
div.overlay, & div.overlay,
#subscription_overlay #subscription_overlay
#stream-creation #stream-creation
#stream_creation_form #stream_creation_form
@ -616,7 +616,7 @@
background-color: hsla(212, 28%, 8%, 0.75); background-color: hsla(212, 28%, 8%, 0.75);
} }
div.overlay .flex.overlay-content > div, & div.overlay .flex.overlay-content > div,
.dropdown-menu.typeahead, .dropdown-menu.typeahead,
#settings_page, #settings_page,
.informational-overlays .overlay-content { .informational-overlays .overlay-content {
@ -745,7 +745,7 @@
} }
} }
li.active-filter, & li.active-filter,
li.active-sub-filter { li.active-sub-filter {
background-color: hsla(199, 33%, 46%, 0.2); background-color: hsla(199, 33%, 46%, 0.2);
} }
@ -862,7 +862,7 @@
} }
} }
thead, & thead,
.drafts-container .drafts-header, .drafts-container .drafts-header,
.nav > li > a:focus, .nav > li > a:focus,
.nav > li > a:hover, .nav > li > a:hover,
@ -1134,7 +1134,7 @@
} }
} }
time { & time {
background: hsla(0, 0%, 0%, 0.2); background: hsla(0, 0%, 0%, 0.2);
box-shadow: 0 0 0 1px hsla(0, 0%, 0%, 0.4); box-shadow: 0 0 0 1px hsla(0, 0%, 0%, 0.4);
} }
@ -1238,7 +1238,7 @@
#invite-user-modal { #invite-user-modal {
#clipboard_image { #clipboard_image {
path { & path {
fill: hsl(236, 33%, 90%); fill: hsl(236, 33%, 90%);
} }
} }
@ -1313,12 +1313,12 @@
.alert-zulip-logo, .alert-zulip-logo,
.top-messages-logo, .top-messages-logo,
.bottom-messages-logo { .bottom-messages-logo {
svg path { & svg path {
fill: hsl(214, 27%, 18%); fill: hsl(214, 27%, 18%);
stroke: hsl(214, 27%, 18%); stroke: hsl(214, 27%, 18%);
} }
svg circle { & svg circle {
fill: hsl(0, 0%, 100%); fill: hsl(0, 0%, 100%);
stroke: hsl(0, 0%, 100%); stroke: hsl(0, 0%, 100%);
} }
@ -1380,7 +1380,7 @@
#request-progress-status-banner .loading-indicator, #request-progress-status-banner .loading-indicator,
#loading_older_messages_indicator, #loading_older_messages_indicator,
#recent_topics_loading_messages_indicator { #recent_topics_loading_messages_indicator {
path { & path {
fill: hsl(0, 0%, 100%); fill: hsl(0, 0%, 100%);
} }
} }
@ -1396,7 +1396,7 @@
} }
} }
a:not(:active):focus, & a:not(:active):focus,
button:focus, button:focus,
.new-style label.checkbox input[type="checkbox"]:focus ~ span, .new-style label.checkbox input[type="checkbox"]:focus ~ span,
i.fa:focus, i.fa:focus,
@ -1448,8 +1448,8 @@
/* Widgets: Todo */ /* Widgets: Todo */
.todo-widget { .todo-widget {
label.checkbox { & label.checkbox {
input[type="checkbox"] { & input[type="checkbox"] {
~ span { ~ span {
border-color: hsl(185, 40%, 45%); border-color: hsl(185, 40%, 45%);
opacity: 0.7; opacity: 0.7;

4
web/styles/drafts.css
View File

@ -23,7 +23,7 @@
text-align: center; text-align: center;
border-bottom: 1px solid hsl(0, 0%, 87%); border-bottom: 1px solid hsl(0, 0%, 87%);
h1 { & h1 {
margin: 0; margin: 0;
font-size: 1.1em; font-size: 1.1em;
text-transform: uppercase; text-transform: uppercase;
@ -70,7 +70,7 @@
pointer-events: none; pointer-events: none;
} }
h2 { & h2 {
font-size: 1.1em; font-size: 1.1em;
line-height: normal; line-height: normal;
margin-bottom: 5px; margin-bottom: 5px;

12
web/styles/informational_overlays.css
View File

@ -46,13 +46,13 @@
table-layout: fixed; table-layout: fixed;
} }
th { & th {
font-weight: 400; font-weight: 400;
} }
} }
} }
td.operator { & td.operator {
font-size: 0.9em; font-size: 0.9em;
} }
} }
@ -63,7 +63,7 @@
vertical-align: middle; vertical-align: middle;
display: table; display: table;
td.definition { & td.definition {
/* keeps dividing line at same width for all tables in model. */ /* keeps dividing line at same width for all tables in model. */
width: calc(50% - 11px); width: calc(50% - 11px);
text-align: right; text-align: right;
@ -77,7 +77,7 @@
font-size: 0.9em !important; font-size: 0.9em !important;
line-height: 12px; line-height: 12px;
kbd { & kbd {
font-size: 0.9em; font-size: 0.9em;
} }
} }
@ -88,13 +88,13 @@
padding: 0 0.2em 0.2em; padding: 0 0.2em 0.2em;
} }
th { & th {
width: 245px; width: 245px;
text-align: center; text-align: center;
/* aligns table name with dividing line */ /* aligns table name with dividing line */
} }
td:not(.definition) { & td:not(.definition) {
text-align: left; text-align: left;
white-space: normal; white-space: normal;
font-weight: bold; font-weight: bold;

58
web/styles/left_sidebar.css
View File

@ -56,7 +56,7 @@ $before_unread_count_padding: 3px;
} }
li.show-more-topics { li.show-more-topics {
a { & a {
font-size: 12px; font-size: 12px;
margin-left: $topic_resolve_width; margin-left: $topic_resolve_width;
} }
@ -103,17 +103,17 @@ li.show-more-topics {
margin-bottom: 3px; margin-bottom: 3px;
margin-left: 3px; margin-left: 3px;
input { & input {
width: calc(100% - 50px); width: calc(100% - 50px);
} }
} }
li { & li {
a:hover { & a:hover {
text-decoration: none; text-decoration: none;
} }
ul { & ul {
margin-left: 0; margin-left: 0;
&.topic-list li { &.topic-list li {
@ -161,7 +161,7 @@ li.show-more-topics {
} }
.narrows_panel { .narrows_panel {
li a { & li a {
margin-top: 1px; margin-top: 1px;
&:hover { &:hover {
@ -226,22 +226,22 @@ li.show-more-topics {
} }
} }
ul.pm-list { & ul.pm-list {
list-style-type: none; list-style-type: none;
font-weight: 400; font-weight: 400;
margin-left: 0; margin-left: 0;
margin-bottom: 0; margin-bottom: 0;
span.fa-group { & span.fa-group {
font-size: 90%; font-size: 90%;
} }
li.pm-list-item { & li.pm-list-item {
position: relative; position: relative;
padding: 1px 10px 1px 4px; padding: 1px 10px 1px 4px;
margin-left: 2px; margin-left: 2px;
a { & a {
text-decoration: none; text-decoration: none;
color: inherit; color: inherit;
} }
@ -251,12 +251,12 @@ li.show-more-topics {
} }
} }
li#show_more_private_messages { & li#show_more_private_messages {
cursor: pointer; cursor: pointer;
padding-right: 26px; padding-right: 26px;
padding-left: 6px; padding-left: 6px;
a { & a {
font-size: 12px; font-size: 12px;
} }
@ -302,7 +302,7 @@ li.show-more-topics {
margin: 5px auto 5.5px 10px; margin: 5px auto 5.5px 10px;
margin-bottom: $bottom_scrolling_buffer; margin-bottom: $bottom_scrolling_buffer;
i { & i {
min-width: 19px; min-width: 19px;
text-align: center; text-align: center;
@ -316,26 +316,26 @@ ul.filters {
list-style-type: none; list-style-type: none;
margin-left: 0; margin-left: 0;
a { & a {
color: inherit; color: inherit;
} }
hr { & hr {
margin-top: 10px; margin-top: 10px;
margin-bottom: 10px; margin-bottom: 10px;
} }
li.muted_topic, & li.muted_topic,
li.out_of_home_view { li.out_of_home_view {
opacity: 0.5; opacity: 0.5;
} }
li.out_of_home_view { & li.out_of_home_view {
&:hover { &:hover {
opacity: 0.75; opacity: 0.75;
} }
li.muted_topic { & li.muted_topic {
/* If stream is muted, this resets opacity of muted topics in muted /* If stream is muted, this resets opacity of muted topics in muted
stream to 1; since opacity is multiplied down through child stream to 1; since opacity is multiplied down through child
elements, this avoids an unreadably low opacity. */ elements, this avoids an unreadably low opacity. */
@ -385,7 +385,7 @@ li.active-sub-filter {
margin-top: 1px !important; margin-top: 1px !important;
} }
i { & i {
opacity: 0.7; opacity: 0.7;
} }
} }
@ -399,7 +399,7 @@ li.top_left_recent_topics {
padding-top: 1px; padding-top: 1px;
padding-bottom: 1px; padding-bottom: 1px;
a { & a {
display: block; display: block;
} }
} }
@ -470,7 +470,7 @@ li.top_left_recent_topics {
display: none; display: none;
right: 10px; right: 10px;
i { & i {
padding-right: 0.25em; padding-right: 0.25em;
display: inline-block; display: inline-block;
width: 13px; width: 13px;
@ -603,7 +603,7 @@ li.topic-list-item {
text-transform: uppercase; text-transform: uppercase;
margin-left: calc($far_left_gutter_size + 2px); margin-left: calc($far_left_gutter_size + 2px);
i { & i {
margin: 0 6px 0 13px; margin: 0 6px 0 13px;
position: relative; position: relative;
top: 1px; top: 1px;
@ -622,7 +622,7 @@ li.topic-list-item {
background: hsl(0, 0%, 100%); background: hsl(0, 0%, 100%);
z-index: 1; z-index: 1;
input { & input {
padding-right: 20px; padding-right: 20px;
} }
} }
@ -635,7 +635,7 @@ li.topic-list-item {
text-align: center; text-align: center;
margin-right: 12px; margin-right: 12px;
span { & span {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
width: 100%; width: 100%;
@ -644,7 +644,7 @@ li.topic-list-item {
opacity: 0.5; opacity: 0.5;
} }
span::before, & span::before,
span::after { span::after {
content: " "; content: " ";
flex: 1 1; flex: 1 1;
@ -654,11 +654,11 @@ li.topic-list-item {
border-bottom: 1px solid hsl(0, 0%, 100%); border-bottom: 1px solid hsl(0, 0%, 100%);
} }
span::before { & span::before {
margin-right: 0.5em; margin-right: 0.5em;
} }
span::after { & span::after {
margin-left: 0.5em; margin-left: 0.5em;
} }
} }
@ -715,13 +715,13 @@ li.topic-list-item {
color: inherit; color: inherit;
font-size: 12px; font-size: 12px;
span { & span {
display: block; display: block;
padding: 2px 0 2px 4px; padding: 2px 0 2px 4px;
} }
&:hover { &:hover {
span { & span {
background-color: hsla(120, 12.3%, 71.4%, 0.38); background-color: hsla(120, 12.3%, 71.4%, 0.38);
border-radius: 4px; border-radius: 4px;
} }

4
web/styles/lightbox.css
View File

@ -15,7 +15,7 @@
background-repeat: no-repeat; background-repeat: no-repeat;
background-position: center center; background-position: center center;
img { & img {
cursor: move; cursor: move;
max-height: 100%; max-height: 100%;
max-width: 100%; max-width: 100%;
@ -141,7 +141,7 @@
justify-content: center; justify-content: center;
align-items: center; align-items: center;
iframe { & iframe {
/* maintain 16:9 ratio. */ /* maintain 16:9 ratio. */
width: calc((100vh - 65px - 95px) * 16 / 9); width: calc((100vh - 65px - 95px) * 16 / 9);
height: 100%; height: 100%;

6
web/styles/modal.css
View File

@ -180,7 +180,7 @@
padding-bottom: 0; padding-bottom: 0;
} }
hr { & hr {
margin: 10px 0; margin: 10px 0;
} }
@ -195,7 +195,7 @@
#read_receipts_list { #read_receipts_list {
margin-left: 0; margin-left: 0;
li { & li {
.read_receipts_user_avatar { .read_receipts_user_avatar {
display: inline-block; display: inline-block;
height: 20px; height: 20px;
@ -306,7 +306,7 @@
.modal__spinner .loading_indicator_spinner { .modal__spinner .loading_indicator_spinner {
height: 16px; height: 16px;
path { & path {
fill: hsl(0, 0%, 100%); fill: hsl(0, 0%, 100%);
} }
} }

24
web/styles/popovers.css
View File

@ -2,7 +2,7 @@
width: auto; width: auto;
max-width: 100%; max-width: 100%;
hr { & hr {
margin-top: 5px; margin-top: 5px;
margin-bottom: 5px; margin-bottom: 5px;
} }
@ -128,14 +128,14 @@
border-right: none; border-right: none;
} }
input { & input {
box-sizing: inherit; /* IE */ box-sizing: inherit; /* IE */
box-sizing: initial; box-sizing: initial;
width: calc(100% - 13px); width: calc(100% - 13px);
} }
button { & button {
background-color: hsl(0, 0%, 100%); background-color: hsl(0, 0%, 100%);
background-image: none; background-image: none;
border: 1px solid hsl(0, 0%, 80%); border: 1px solid hsl(0, 0%, 80%);
@ -215,7 +215,7 @@ ul {
} }
/* Override bootstrap defaults */ /* Override bootstrap defaults */
hr { & hr {
margin: 5px 0; margin: 5px 0;
} }
@ -384,7 +384,7 @@ ul {
#profile-tab { #profile-tab {
margin: 1px 5px 0; margin: 1px 5px 0;
li.custom_user_field { & li.custom_user_field {
display: block; display: block;
} }
} }
@ -427,7 +427,7 @@ ul {
} }
} }
hr { & hr {
border: 1px solid hsl(0, 0%, 93%); border: 1px solid hsl(0, 0%, 93%);
margin: 5px 0; margin: 5px 0;
} }
@ -529,7 +529,7 @@ ul {
margin: auto; margin: auto;
border-radius: 6px; border-radius: 6px;
tr { & tr {
border-bottom: 1px solid hsl(0, 0%, 87%); border-bottom: 1px solid hsl(0, 0%, 87%);
/* Ensure equal height for rows with a remove-subscription-button and /* Ensure equal height for rows with a remove-subscription-button and
those without one. */ those without one. */
@ -539,7 +539,7 @@ ul {
border-bottom: none; border-bottom: none;
} }
td { & td {
padding: 4px 0; padding: 4px 0;
&:first-of-type { &:first-of-type {
@ -556,7 +556,7 @@ ul {
} }
} }
tbody:empty::after, & tbody:empty::after,
&:empty::after { &:empty::after {
content: attr(data-empty); content: attr(data-empty);
display: block; display: block;
@ -717,7 +717,7 @@ ul {
position: sticky; position: sticky;
padding: 2px; padding: 2px;
input { & input {
flex-grow: 1; flex-grow: 1;
margin: 5px; margin: 5px;
border-radius: 3px; border-radius: 3px;
@ -748,7 +748,7 @@ ul {
background-color: hsl(0, 0%, 0%); background-color: hsl(0, 0%, 0%);
border-radius: 0 0 6px 6px; border-radius: 0 0 6px 6px;
img { & img {
width: 120px; width: 120px;
} }
} }
@ -788,7 +788,7 @@ ul {
} }
#move_topic_modal { #move_topic_modal {
form { & form {
margin: 0; margin: 0;
} }

6
web/styles/portico/activity.css
View File

@ -9,8 +9,8 @@
} }
.table-striped { .table-striped {
tr.recently_active { & tr.recently_active {
td { & td {
background-color: hsl(120, 97%, 83%); background-color: hsl(120, 97%, 83%);
} }
@ -52,7 +52,7 @@ tr.admin td:first-child {
border-radius: 7px; border-radius: 7px;
box-shadow: 0 10px 7px -6px hsl(0, 2%, 45%); box-shadow: 0 10px 7px -6px hsl(0, 2%, 45%);
select { & select {
height: 30px; height: 30px;
width: 220px; width: 220px;
padding: 4px 6px; padding: 4px 6px;

24
web/styles/portico/billing.css
View File

@ -21,7 +21,7 @@
margin: 0 auto; margin: 0 auto;
} }
h1 { & h1 {
margin: 30px 0; margin: 30px 0;
font-weight: bold; font-weight: bold;
} }
@ -34,7 +34,7 @@
border-bottom: 0; border-bottom: 0;
font-size: 1.2em; font-size: 1.2em;
a { & a {
font-weight: bold; font-weight: bold;
} }
} }
@ -51,7 +51,7 @@
.support-link { .support-link {
margin: 10px 20px; margin: 10px 20px;
a, & a,
a:hover, a:hover,
a:visited { a:visited {
color: hsl(170, 47%, 33%); color: hsl(170, 47%, 33%);
@ -61,11 +61,11 @@
.license-management, .license-management,
.payment-schedule { .payment-schedule {
label { & label {
display: inline-block; display: inline-block;
} }
input[type="radio"] { & input[type="radio"] {
display: none; display: none;
&:checked { &:checked {
@ -140,7 +140,7 @@
height: 40px; height: 40px;
margin: 5px 0 0; margin: 5px 0 0;
span { & span {
background: 0; background: 0;
box-shadow: none; box-shadow: none;
font-family: "Source Sans 3", sans-serif; font-family: "Source Sans 3", sans-serif;
@ -157,14 +157,14 @@
.stripe-button-el:enabled:active { .stripe-button-el:enabled:active {
background-color: hsl(169, 70%, 32%); background-color: hsl(169, 70%, 32%);
span { & span {
background: 0; background: 0;
box-shadow: none; box-shadow: none;
} }
} }
.stripe-button-el:disabled { .stripe-button-el:disabled {
span { & span {
background: none; background: none;
} }
} }
@ -310,7 +310,7 @@
display: none; display: none;
} }
select, & select,
input, input,
textarea { textarea {
font-family: inherit; font-family: inherit;
@ -328,12 +328,12 @@ input[name="licenses"] {
} }
#sponsorship-form { #sponsorship-form {
input { & input {
box-sizing: border-box; box-sizing: border-box;
height: 30px; height: 30px;
} }
textarea { & textarea {
box-sizing: border-box; box-sizing: border-box;
color: hsl(0, 0%, 33%); color: hsl(0, 0%, 33%);
background-color: hsl(0, 0%, 100%); background-color: hsl(0, 0%, 100%);
@ -362,7 +362,7 @@ input[name="licenses"] {
} }
} }
select { & select {
height: 30px; height: 30px;
width: 100%; width: 100%;
padding: 4px 6px; padding: 4px 6px;

6
web/styles/portico/email_log.css
View File

@ -17,11 +17,11 @@
} }
#forward_email_modal { #forward_email_modal {
label.radio { & label.radio {
padding-left: 20px; padding-left: 20px;
} }
input[type="radio"] { & input[type="radio"] {
float: left; float: left;
width: auto; width: auto;
cursor: pointer; cursor: pointer;
@ -36,7 +36,7 @@
} }
} }
input[type="checkbox"] { & input[type="checkbox"] {
width: auto; width: auto;
cursor: pointer; cursor: pointer;

14
web/styles/portico/footer.css
View File

@ -11,7 +11,7 @@
background: var(--color-footer-background); background: var(--color-footer-background);
box-sizing: border-box; box-sizing: border-box;
ul { & ul {
/* Override bootstrap defaults */ /* Override bootstrap defaults */
list-style: none; list-style: none;
margin: 0; margin: 0;
@ -51,12 +51,12 @@
flex-direction: column; flex-direction: column;
align-items: flex-start; align-items: flex-start;
li { & li {
margin-bottom: 10px; margin-bottom: 10px;
} }
} }
li { & li {
font-style: normal; font-style: normal;
font-weight: 400; font-weight: 400;
font-size: 16px; font-size: 16px;
@ -66,14 +66,14 @@
transition: border 0.4s ease-out; transition: border 0.4s ease-out;
} }
a, & a,
a:visited { a:visited {
font-weight: 400; font-weight: 400;
font-size: 16px; font-size: 16px;
color: var(--color-links); color: var(--color-links);
} }
a:hover, & a:hover,
a:focus { a:focus {
color: var(--color-links); color: var(--color-links);
border-bottom: 1px solid var(--color-links); border-bottom: 1px solid var(--color-links);
@ -87,7 +87,7 @@
padding: 0 52px; padding: 0 52px;
border-top: 1px solid hsl(0, 0%, 100%, 0.1); border-top: 1px solid hsl(0, 0%, 100%, 0.1);
a { & a {
margin-bottom: 10px; margin-bottom: 10px;
border-bottom: 1px solid var(--color-footer-background); border-bottom: 1px solid var(--color-footer-background);
@ -163,7 +163,7 @@
column-gap: 20px; column-gap: 20px;
justify-content: center; justify-content: center;
a:not(:last-child) { & a:not(:last-child) {
margin-right: 0; margin-right: 0;
} }
} }

32
web/styles/portico/integrations.css
View File

@ -8,7 +8,7 @@ $category-text: hsl(219, 23%, 33%);
color: hsl(0, 0%, 27%); color: hsl(0, 0%, 27%);
font-weight: normal; font-weight: normal;
h1, & h1,
h2, h2,
h3 { h3 {
&:hover::after { &:hover::after {
@ -28,7 +28,7 @@ $category-text: hsl(219, 23%, 33%);
background-color: hsl(0, 0%, 100%); background-color: hsl(0, 0%, 100%);
visibility: hidden; visibility: hidden;
img { & img {
box-shadow: none; box-shadow: none;
border: none; border: none;
} }
@ -64,11 +64,11 @@ $category-text: hsl(219, 23%, 33%);
} }
} }
ol li { & ol li {
list-style: none; list-style: none;
} }
ul li { & ul li {
list-style: circle; list-style: circle;
} }
@ -83,7 +83,7 @@ $category-text: hsl(219, 23%, 33%);
text-align: center; text-align: center;
border-bottom: none; border-bottom: none;
a { & a {
color: inherit; color: inherit;
} }
} }
@ -108,7 +108,7 @@ $category-text: hsl(219, 23%, 33%);
.searchbar-reset { .searchbar-reset {
position: relative; position: relative;
input { & input {
box-shadow: 0 0 7px 2px hsla(0, 0%, 0%, 0.03); box-shadow: 0 0 7px 2px hsla(0, 0%, 0%, 0.03);
font-size: 1em; font-size: 1em;
@ -135,7 +135,7 @@ $category-text: hsl(219, 23%, 33%);
} }
} }
i.fa-search { & i.fa-search {
position: absolute; position: absolute;
left: 20px; left: 20px;
top: 13px; top: 13px;
@ -173,13 +173,13 @@ $category-text: hsl(219, 23%, 33%);
z-index: 10; z-index: 10;
} }
h3 { & h3 {
font-weight: 400; font-weight: 400;
font-size: 1.1em; font-size: 1.1em;
margin: 0; margin: 0;
} }
h4 { & h4 {
font-weight: 400; font-weight: 400;
font-size: 0.95em; font-size: 0.95em;
padding: 6px 10px 3px; padding: 6px 10px 3px;
@ -215,7 +215,7 @@ $category-text: hsl(219, 23%, 33%);
display: none; display: none;
width: 670px; width: 670px;
h3, & h3,
h4 { h4 {
font-weight: 400; font-weight: 400;
margin: 0; margin: 0;
@ -234,7 +234,7 @@ $category-text: hsl(219, 23%, 33%);
border: 1px solid $light-blue-border; border: 1px solid $light-blue-border;
} }
i { & i {
margin-right: 10px; margin-right: 10px;
font-size: 24px; font-size: 24px;
} }
@ -247,12 +247,12 @@ $category-text: hsl(219, 23%, 33%);
margin-right: 25px; margin-right: 25px;
} }
h3 { & h3 {
font-size: 1em; font-size: 1em;
text-align: left; text-align: left;
} }
h4 { & h4 {
border-left: 1px solid $light-blue-border; border-left: 1px solid $light-blue-border;
border-right: 1px solid $light-blue-border; border-right: 1px solid $light-blue-border;
border-bottom: 1px solid $light-blue-border; border-bottom: 1px solid $light-blue-border;
@ -416,7 +416,7 @@ $category-text: hsl(219, 23%, 33%);
font-size: 1em; font-size: 1em;
padding: 10px 0; padding: 10px 0;
p { & p {
padding-bottom: 10px; padding-bottom: 10px;
} }
@ -516,7 +516,7 @@ $category-text: hsl(219, 23%, 33%);
margin-left: 30px; margin-left: 30px;
order: 3; order: 3;
span { & span {
display: inline-block; display: inline-block;
margin-left: 5px; margin-left: 5px;
@ -664,7 +664,7 @@ $category-text: hsl(219, 23%, 33%);
} }
} }
hr { & hr {
margin: 10px 0; margin: 10px 0;
} }

6
web/styles/portico/integrations_dev_panel.css
View File

@ -11,7 +11,7 @@
background-color: hsla(0, 0%, 100%, 0.48); background-color: hsla(0, 0%, 100%, 0.48);
box-shadow: 0 0 40px hsla(0, 0%, 0%, 0.06); box-shadow: 0 0 40px hsla(0, 0%, 0%, 0.06);
textarea { & textarea {
color: hsl(0, 0%, 33%); color: hsl(0, 0%, 33%);
background-color: hsl(0, 0%, 100%); background-color: hsl(0, 0%, 100%);
border-radius: 4px; border-radius: 4px;
@ -38,13 +38,13 @@
} }
} }
select, & select,
textarea, textarea,
input { input {
font-family: inherit; font-family: inherit;
} }
select { & select {
height: 30px; height: 30px;
padding: 4px 6px; padding: 4px 6px;
width: 220px; width: 220px;

252
web/styles/portico/landing_page.css
View File

@ -212,16 +212,16 @@ nav {
&.white { &.white {
background-color: hsl(0, 0%, 100%); background-color: hsl(0, 0%, 100%);
li { & li {
a, & a,
a:hover, a:hover,
a:visited { a:visited {
color: hsl(0, 0%, 27%); color: hsl(0, 0%, 27%);
} }
} }
ul { & ul {
li { & li {
&.active { &.active {
&::after { &::after {
color: hsl(0, 0%, 27%); color: hsl(0, 0%, 27%);
@ -231,7 +231,7 @@ nav {
} }
.brand.logo { .brand.logo {
span { & span {
color: hsl(0, 0%, 27%); color: hsl(0, 0%, 27%);
} }
} }
@ -257,7 +257,7 @@ nav {
.logo { .logo {
top: 7px; top: 7px;
span { & span {
position: relative; position: relative;
left: 5px; left: 5px;
top: 1px; top: 1px;
@ -270,7 +270,7 @@ nav {
} }
} }
ul { & ul {
float: right; float: right;
list-style-type: none; list-style-type: none;
font-weight: 400; font-weight: 400;
@ -288,7 +288,7 @@ nav {
user-select: none; user-select: none;
} }
li, & li,
div.dropdown-label { div.dropdown-label {
position: relative; position: relative;
display: inline-block; display: inline-block;
@ -314,7 +314,7 @@ nav {
} }
} }
i.fa-chevron-down { & i.fa-chevron-down {
position: relative; position: relative;
top: -2px; top: -2px;
font-size: 0.6em; font-size: 0.6em;
@ -327,19 +327,19 @@ nav {
.nav-dropdown { .nav-dropdown {
padding-bottom: 3px; padding-bottom: 3px;
ul { & ul {
width: 300px; width: 300px;
} }
@media (width > 1024px) { @media (width > 1024px) {
ul.product-options { & ul.product-options {
width: 125px; width: 125px;
} }
ul.solutions-options { & ul.solutions-options {
width: 450px; width: 450px;
div.dropdown-column { & div.dropdown-column {
float: left; float: left;
&:first-of-type { &:first-of-type {
@ -348,10 +348,10 @@ nav {
} }
} }
ul.resources-options { & ul.resources-options {
width: 350px; width: 350px;
div.dropdown-column { & div.dropdown-column {
float: left; float: left;
&:first-of-type { &:first-of-type {
@ -362,8 +362,8 @@ nav {
} }
} }
li { & li {
a, & a,
a:hover, a:hover,
a:visited { a:visited {
text-decoration: none; text-decoration: none;
@ -414,7 +414,7 @@ nav {
z-index: -1; z-index: -1;
} }
section { & section {
max-width: 1440px; max-width: 1440px;
display: flex; display: flex;
flex: 1 1 auto; flex: 1 1 auto;
@ -447,12 +447,12 @@ nav {
text-align: center; text-align: center;
} }
h1 { & h1 {
margin: 0; margin: 0;
font-size: 3.7em; font-size: 3.7em;
} }
h2 { & h2 {
font-size: 1.8em; font-size: 1.8em;
margin: 30px auto 0; margin: 30px auto 0;
@ -479,7 +479,7 @@ nav {
background-color: hsl(219, 21%, 21%); background-color: hsl(219, 21%, 21%);
color: hsl(219, 76%, 93%); color: hsl(219, 76%, 93%);
img { & img {
&.overflow-wave { &.overflow-wave {
width: 685px; width: 685px;
right: 0; right: 0;
@ -493,7 +493,7 @@ nav {
} }
} }
h3 { & h3 {
font-size: 3em; font-size: 3em;
} }
@ -501,11 +501,11 @@ nav {
width: 50%; width: 50%;
} }
p { & p {
font-size: 1.2em; font-size: 1.2em;
} }
a.cta { & a.cta {
font-size: 1em; font-size: 1em;
color: hsl(170, 52%, 70%); color: hsl(170, 52%, 70%);
} }
@ -528,7 +528,7 @@ nav {
.features { .features {
max-width: 500px; max-width: 500px;
h2 { & h2 {
margin: 0; margin: 0;
} }
@ -560,7 +560,7 @@ nav {
max-height: 40vw; max-height: 40vw;
} }
h2 { & h2 {
position: relative; position: relative;
margin-bottom: 120px; margin-bottom: 120px;
@ -578,7 +578,7 @@ nav {
z-index: 1; z-index: 1;
h3 { & h3 {
position: relative; position: relative;
margin: 15px 0 15px 50px; margin: 15px 0 15px 50px;
@ -633,7 +633,7 @@ nav {
vertical-align: top; vertical-align: top;
} }
h2 { & h2 {
font-size: 2.5em; font-size: 2.5em;
text-align: center; text-align: center;
margin: 0 10px; margin: 0 10px;
@ -647,7 +647,7 @@ nav {
color: inherit; color: inherit;
} }
a { & a {
&.feature-block { &.feature-block {
&:hover { &:hover {
box-shadow: 0 3px 10px hsl(0, 0%, 75%); box-shadow: 0 3px 10px hsl(0, 0%, 75%);
@ -678,12 +678,12 @@ nav {
} }
.feature-block { .feature-block {
h3 { & h3 {
font-size: 1.2em; font-size: 1.2em;
font-weight: 600; font-weight: 600;
} }
p { & p {
margin: 0; margin: 0;
opacity: 0.8; opacity: 0.8;
@ -715,25 +715,25 @@ nav {
text-align: center; text-align: center;
p { & p {
font-weight: 400; font-weight: 400;
opacity: 0.85; opacity: 0.85;
} }
} }
header { & header {
width: 850px; width: 850px;
display: inline-block; display: inline-block;
text-align: left; text-align: left;
h1 { & h1 {
font-size: 3em; font-size: 3em;
font-weight: 400; font-weight: 400;
text-shadow: 0 0 20px hsla(0, 0%, 100%, 0.2); text-shadow: 0 0 20px hsla(0, 0%, 100%, 0.2);
} }
p { & p {
margin: 30px 0; margin: 30px 0;
font-size: 1.5em; font-size: 1.5em;
@ -743,13 +743,13 @@ nav {
0 0 20px hsla(0, 0%, 100%, 0.2); 0 0 20px hsla(0, 0%, 100%, 0.2);
} }
a { & a {
display: block; display: block;
margin: 20px auto 0; margin: 20px auto 0;
text-align: center; text-align: center;
} }
button { & button {
margin-top: 0; margin-top: 0;
padding: 12px 20px; padding: 12px 20px;
@ -875,7 +875,7 @@ nav {
z-index: 2; z-index: 2;
} }
table { & table {
min-width: 550px; min-width: 550px;
padding: 33px; padding: 33px;
border: 20px solid transparent; border: 20px solid transparent;
@ -885,7 +885,7 @@ nav {
font-weight: 400; font-weight: 400;
color: hsla(0, 0%, 100%, 0.8); color: hsla(0, 0%, 100%, 0.8);
thead th { & thead th {
&:last-of-type { &:last-of-type {
width: 120px; width: 120px;
} }
@ -895,16 +895,16 @@ nav {
} }
} }
td:not(:first-of-type), & td:not(:first-of-type),
th:not(:first-of-type) { th:not(:first-of-type) {
text-align: center; text-align: center;
} }
} }
thead { & thead {
border-bottom: 3px solid hsla(0, 0%, 0%, 0.1); border-bottom: 3px solid hsla(0, 0%, 0%, 0.1);
th { & th {
font-weight: 600; font-weight: 600;
padding: 15px 0; padding: 15px 0;
font-size: 18px; font-size: 18px;
@ -940,10 +940,10 @@ nav {
position: static; position: static;
} }
tbody tr { & tbody tr {
border-bottom: 1px solid hsla(360, 0%, 100%, 0.03); border-bottom: 1px solid hsla(360, 0%, 100%, 0.03);
td { & td {
padding: 10px 0; padding: 10px 0;
&:nth-of-type(1) { &:nth-of-type(1) {
@ -990,7 +990,7 @@ nav {
opacity: 0.4; opacity: 0.4;
} }
a { & a {
font-size: 0.9rem; font-size: 0.9rem;
font-weight: 400; font-weight: 400;
text-transform: uppercase; text-transform: uppercase;
@ -998,7 +998,7 @@ nav {
} }
} }
p { & p {
font-weight: 300; font-weight: 300;
} }
@ -1011,7 +1011,7 @@ nav {
color: hsl(0, 24%, 23%); color: hsl(0, 24%, 23%);
a { & a {
color: hsl(170, 47%, 73%); color: hsl(170, 47%, 73%);
} }
} }
@ -1021,7 +1021,7 @@ nav {
color: hsl(0, 0%, 0%); color: hsl(0, 0%, 0%);
background: none; background: none;
table { & table {
min-width: 650px; min-width: 650px;
.number { .number {
@ -1032,7 +1032,7 @@ nav {
} }
} }
td:first-of-type { & td:first-of-type {
padding: 10px 10px 10px 0; padding: 10px 10px 10px 0;
} }
} }
@ -1048,11 +1048,11 @@ nav {
z-index: 1; z-index: 1;
} }
header { & header {
max-width: 700px; max-width: 700px;
margin: 0 auto; margin: 0 auto;
h1 span { & h1 span {
vertical-align: top; vertical-align: top;
} }
} }
@ -1272,7 +1272,7 @@ nav {
padding: 50px 0; padding: 50px 0;
} }
img { & img {
margin: 0 2%; margin: 0 2%;
width: 28%; width: 28%;
max-width: 500px; max-width: 500px;
@ -1287,7 +1287,7 @@ nav {
text-align: left; text-align: left;
} }
h2 { & h2 {
font-weight: normal; font-weight: normal;
} }
} }
@ -1417,7 +1417,7 @@ nav {
width: 300px; width: 300px;
} }
img { & img {
max-width: 100%; max-width: 100%;
&.zulip-streams-selected { &.zulip-streams-selected {
@ -1507,7 +1507,7 @@ nav {
text-align: center; text-align: center;
vertical-align: top; vertical-align: top;
img { & img {
border: 0; border: 0;
display: block; display: block;
margin: 0 auto; margin: 0 auto;
@ -1568,7 +1568,7 @@ nav {
top: auto; top: auto;
right: auto; right: auto;
li { & li {
position: relative; position: relative;
flex: 0 1 auto; flex: 0 1 auto;
width: 10px; width: 10px;
@ -2169,14 +2169,14 @@ nav {
margin-top: 20px; margin-top: 20px;
font-size: 1.05em; font-size: 1.05em;
p { & p {
line-height: 1.5; line-height: 1.5;
margin: 0; margin: 0;
font-weight: 400; font-weight: 400;
color: hsl(220, 23%, 33%); color: hsl(220, 23%, 33%);
} }
p:last-child { & p:last-child {
margin-top: 10px; margin-top: 10px;
} }
} }
@ -2687,20 +2687,20 @@ nav {
color: hsl(0, 0%, 53%); color: hsl(0, 0%, 53%);
padding-top: 0; padding-top: 0;
p { & p {
padding: 10px; padding: 10px;
} }
p:first-child { & p:first-child {
margin-top: -20px; margin-top: -20px;
} }
p:last-child { & p:last-child {
margin-bottom: 30px; margin-bottom: 30px;
} }
} }
p { & p {
width: 80%; width: 80%;
margin: auto; margin: auto;
text-align: center; text-align: center;
@ -2886,12 +2886,12 @@ nav {
margin: 0 auto; margin: 0 auto;
text-align: center; text-align: center;
span { & span {
color: hsl(0, 0%, 100%); color: hsl(0, 0%, 100%);
} }
} }
ul { & ul {
display: block; display: block;
margin: 20px auto 0; margin: 20px auto 0;
float: none; float: none;
@ -2900,7 +2900,7 @@ nav {
} }
.portico-landing.features-app { .portico-landing.features-app {
section { & section {
&.messages { &.messages {
display: block; display: block;
text-align: center; text-align: center;
@ -2998,7 +2998,7 @@ nav {
} }
.portico-landing.hello .hero { .portico-landing.hello .hero {
header { & header {
width: calc(100% - 50px); width: calc(100% - 50px);
} }
} }
@ -3006,7 +3006,7 @@ nav {
@media (width <= 906px) { @media (width <= 906px) {
.portico-landing.features-app { .portico-landing.features-app {
section { & section {
&.notifications { &.notifications {
padding: 50px 10px; padding: 50px 10px;
@ -3083,7 +3083,7 @@ nav {
display: block; display: block;
} }
img { & img {
display: block; display: block;
width: 300px; width: 300px;
margin: 0 auto; margin: 0 auto;
@ -3140,7 +3140,7 @@ nav {
} }
.portico-landing.hello .hero { .portico-landing.hello .hero {
header { & header {
width: 600px; width: 600px;
} }
} }
@ -3150,13 +3150,13 @@ nav {
} }
.portico-landing.features-app { .portico-landing.features-app {
section { & section {
padding: 0 20px; padding: 0 20px;
&.hero { &.hero {
padding: 50px; padding: 50px;
h1 { & h1 {
font-size: 3em; font-size: 3em;
} }
} }
@ -3244,7 +3244,7 @@ nav {
height: 450px; height: 450px;
} }
header { & header {
width: auto; width: auto;
} }
} }
@ -3264,7 +3264,7 @@ nav {
} }
} }
ul { & ul {
margin-top: 0; margin-top: 0;
text-align: left; text-align: left;
@ -3299,7 +3299,7 @@ nav {
color: initial; color: initial;
} }
li, & li,
div.dropdown div.dropdown-label { div.dropdown div.dropdown-label {
display: block; display: block;
font-size: 1.5em; font-size: 1.5em;
@ -3319,17 +3319,17 @@ nav {
} }
} }
div.dropdown div.dropdown-label.first { & div.dropdown div.dropdown-label.first {
margin-top: 30px; margin-top: 30px;
} }
div.dropdown ul.dropdown-list { & div.dropdown ul.dropdown-list {
position: relative; position: relative;
box-shadow: none; box-shadow: none;
padding-left: 10px; padding-left: 10px;
border: none; border: none;
li { & li {
&:hover { &:hover {
background-color: unset; background-color: unset;
} }
@ -3337,16 +3337,16 @@ nav {
} }
.nav-dropdown { .nav-dropdown {
ul.resources-options, & ul.resources-options,
ul.solutions-options { ul.solutions-options {
div.dropdown-column { & div.dropdown-column {
float: none; float: none;
&:first-child { &:first-child {
padding-bottom: 20px; padding-bottom: 20px;
} }
li.nav-header { & li.nav-header {
font-size: 1em; font-size: 1em;
} }
} }
@ -3355,7 +3355,7 @@ nav {
} }
&.portico-header { &.portico-header {
div.content ul div.nav-dropdown { & div.content ul div.nav-dropdown {
display: block; display: block;
padding-bottom: 0; padding-bottom: 0;
} }
@ -3446,9 +3446,9 @@ nav {
} }
.portico-landing.features-app { .portico-landing.features-app {
section { & section {
&.keyboard-shortcuts { &.keyboard-shortcuts {
img { & img {
&.overflow-wave { &.overflow-wave {
top: -100px; top: -100px;
} }
@ -3460,7 +3460,7 @@ nav {
@media (width <= 550px) { @media (width <= 550px) {
.portico-landing.features-app { .portico-landing.features-app {
section { & section {
&.hero { &.hero {
padding: 50px 20px 20px; padding: 50px 20px 20px;
} }
@ -3468,7 +3468,7 @@ nav {
&.messages { &.messages {
padding: 0 20px; padding: 0 20px;
h2 { & h2 {
font-size: 2em; font-size: 2em;
} }
@ -3506,7 +3506,7 @@ nav {
font-size: 90%; font-size: 90%;
} }
img { & img {
max-width: 100%; max-width: 100%;
&.zulip-streams { &.zulip-streams {
@ -3646,9 +3646,9 @@ nav {
} }
.portico-landing.features-app { .portico-landing.features-app {
section { & section {
&.keyboard-shortcuts { &.keyboard-shortcuts {
img { & img {
&.overflow-wave { &.overflow-wave {
top: -92px; top: -92px;
} }
@ -3660,9 +3660,9 @@ nav {
@media (width <= 360px) { @media (width <= 360px) {
.portico-landing.features-app { .portico-landing.features-app {
section { & section {
.keyboard-shortcuts { .keyboard-shortcuts {
img { & img {
&.overflow-wave { &.overflow-wave {
top: -88px; top: -88px;
} }
@ -3675,9 +3675,9 @@ nav {
/* For iPhone 5/SE device */ /* For iPhone 5/SE device */
@media (width <= 320px) { @media (width <= 320px) {
.portico-landing.features-app { .portico-landing.features-app {
section { & section {
.keyboard-shortcuts { .keyboard-shortcuts {
img { & img {
&.overflow-wave { &.overflow-wave {
top: -78px; top: -78px;
} }
@ -3759,17 +3759,17 @@ nav {
} }
.feature-text { .feature-text {
h1 { & h1 {
font-size: 30px; font-size: 30px;
font-weight: 600; font-weight: 600;
} }
ul { & ul {
list-style: none; list-style: none;
margin-left: 0; margin-left: 0;
} }
ul li { & ul li {
margin-bottom: 15px; margin-bottom: 15px;
&::before { &::before {
@ -3792,26 +3792,26 @@ nav {
} }
.feature-image { .feature-image {
img, & img,
div.quote { div.quote {
width: 400px; width: 400px;
} }
@media (width < 1024px) { @media (width < 1024px) {
div.quote { & div.quote {
width: 300px; width: 300px;
} }
} }
@media (width < 768px) { @media (width < 768px) {
div.quote { & div.quote {
width: auto; width: auto;
} }
} }
} }
.feature-icon { .feature-icon {
img, & img,
div.quote { div.quote {
width: 100px; width: 100px;
} }
@ -3829,8 +3829,8 @@ nav {
.discounts-section { .discounts-section {
text-align: center; text-align: center;
header { & header {
b { & b {
font-weight: 600; font-weight: 600;
color: hsl(169, 45%, 43%); color: hsl(169, 45%, 43%);
} }
@ -3876,7 +3876,7 @@ nav {
outline: none; outline: none;
} }
p { & p {
font-weight: 600; font-weight: 600;
margin-bottom: 0; margin-bottom: 0;
} }
@ -3897,7 +3897,7 @@ nav {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
a { & a {
color: hsl(0, 0%, 100%); color: hsl(0, 0%, 100%);
&.case-study-link { &.case-study-link {
@ -3916,22 +3916,22 @@ nav {
margin: 5px 20px 20px; margin: 5px 20px 20px;
} }
blockquote { & blockquote {
font-size: 18px; font-size: 18px;
} }
blockquote::before { & blockquote::before {
font-size: 20px; font-size: 20px;
font-weight: 800; font-weight: 800;
} }
cite { & cite {
font-style: normal; font-style: normal;
} }
} }
.intro_quote { .intro_quote {
blockquote { & blockquote {
font-size: 17px; font-size: 17px;
font-weight: 400; font-weight: 400;
color: hsl(223, 6%, 25%); color: hsl(223, 6%, 25%);
@ -3941,7 +3941,7 @@ nav {
padding: 20px; padding: 20px;
} }
blockquote::after { & blockquote::after {
content: ""; content: "";
} }
@ -3968,7 +3968,7 @@ nav {
} }
.hero { .hero {
a { & a {
color: hsl(170, 76%, 64%); color: hsl(170, 76%, 64%);
} }
} }
@ -3978,7 +3978,7 @@ nav {
flex-flow: row wrap; flex-flow: row wrap;
justify-content: center; justify-content: center;
a { & a {
color: hsl(170, 47%, 33%); color: hsl(170, 47%, 33%);
font-weight: 600; font-weight: 600;
font-size: 15px; font-size: 15px;
@ -3997,7 +3997,7 @@ nav {
margin: 10px; margin: 10px;
} }
h1 { & h1 {
margin-top: 20px; margin-top: 20px;
text-align: center; text-align: center;
font-weight: 600; font-weight: 600;
@ -4005,13 +4005,13 @@ nav {
padding-bottom: 0; padding-bottom: 0;
} }
ul { & ul {
margin: auto; margin: auto;
max-width: 800px; max-width: 800px;
padding: 30px; padding: 30px;
} }
p { & p {
margin: auto; margin: auto;
max-width: 800px; max-width: 800px;
padding: 30px; padding: 30px;
@ -4032,7 +4032,7 @@ nav {
max-width: 800px; max-width: 800px;
margin: auto; margin: auto;
h1 { & h1 {
text-align: center; text-align: center;
font-weight: 600; font-weight: 600;
margin-bottom: 0; margin-bottom: 0;
@ -4083,7 +4083,7 @@ nav {
font-size: 34px; font-size: 34px;
} }
a { & a {
margin-top: 76px; margin-top: 76px;
} }
} }
@ -4097,7 +4097,7 @@ nav {
padding-bottom: 10px; padding-bottom: 10px;
} }
p { & p {
padding: 0; padding: 0;
margin: 0 0 -10px; margin: 0 0 -10px;
width: 100%; width: 100%;
@ -4121,7 +4121,7 @@ nav {
margin: 50px auto 0; margin: 50px auto 0;
padding: 0 4vw; padding: 0 4vw;
h1 { & h1 {
font-size: 36px; font-size: 36px;
font-weight: 600; font-weight: 600;
} }
@ -4135,7 +4135,7 @@ nav {
margin: 0 10px; margin: 0 10px;
} }
p { & p {
padding: 10px; padding: 10px;
} }
@ -4170,7 +4170,7 @@ nav {
.discounts-section { .discounts-section {
margin: 30px; margin: 30px;
h1 { & h1 {
font-weight: 700 !important; font-weight: 700 !important;
font-size: 26px !important; font-size: 26px !important;
} }
@ -4211,7 +4211,7 @@ nav {
margin: auto; margin: auto;
margin-top: 30px; margin-top: 30px;
a { & a {
min-height: 40px; min-height: 40px;
padding: 7px 0; padding: 7px 0;
} }
@ -4219,7 +4219,7 @@ nav {
@media (width <= 768px) { @media (width <= 768px) {
.register-buttons { .register-buttons {
a { & a {
margin: 10px calc(5vw - 10px); margin: 10px calc(5vw - 10px);
width: clamp(130px, 40vw, 200px); width: clamp(130px, 40vw, 200px);
font-size: 13px; font-size: 13px;
@ -4229,7 +4229,7 @@ nav {
} }
.self-hosting-page { .self-hosting-page {
p { & p {
font-size: 18px !important; font-size: 18px !important;
} }
@ -4276,7 +4276,7 @@ nav {
hsl(169, 65%, 42%) hsl(169, 65%, 42%)
); );
blockquote { & blockquote {
max-width: 700px; max-width: 700px;
margin: auto; margin: auto;
font-size: 24px; font-size: 24px;
@ -4325,7 +4325,7 @@ nav {
height: 400px; height: 400px;
} }
h1 { & h1 {
font-weight: 550; font-weight: 550;
font-size: clamp(24px, 2.5vw, 32px); font-size: clamp(24px, 2.5vw, 32px);
} }
@ -4333,7 +4333,7 @@ nav {
.feature-icon { .feature-icon {
align-self: center; align-self: center;
img { & img {
max-width: 100px; max-width: 100px;
} }
} }
@ -4377,7 +4377,7 @@ nav {
} }
} }
h1 { & h1 {
color: hsl(0, 0%, 100%); color: hsl(0, 0%, 100%);
} }
} }

56
web/styles/portico/markdown.css
View File

@ -4,7 +4,7 @@
line-height: 1.5; line-height: 1.5;
overflow: auto; overflow: auto;
h1[id], & h1[id],
h2[id], h2[id],
h3[id], h3[id],
h4[id] { h4[id] {
@ -15,7 +15,7 @@
} }
} }
h2[id], & h2[id],
h3[id], h3[id],
h4[id] { h4[id] {
&::before { &::before {
@ -24,7 +24,7 @@
} }
} }
h1 { & h1 {
border-bottom: 1px solid hsl(0, 0%, 93%); border-bottom: 1px solid hsl(0, 0%, 93%);
padding-bottom: 10px; padding-bottom: 10px;
margin-bottom: 15px; margin-bottom: 15px;
@ -44,20 +44,20 @@
} }
} }
h2 { & h2 {
font-size: 1.5em; font-size: 1.5em;
line-height: 1.25; line-height: 1.25;
margin: 20px 0 5px; margin: 20px 0 5px;
} }
h3 { & h3 {
font-size: 1.25em; font-size: 1.25em;
line-height: 1.25; line-height: 1.25;
opacity: 1; opacity: 1;
margin: 20px 0 5px; margin: 20px 0 5px;
} }
h1, & h1,
h2, h2,
h3 { h3 {
font-weight: 700; font-weight: 700;
@ -78,7 +78,7 @@
} }
} }
h5, & h5,
h6 { h6 {
margin: 10px 0; margin: 10px 0;
line-height: 20px; line-height: 20px;
@ -87,7 +87,7 @@
/* Since markdown doesn't make it easy to put an HTML element around a /* Since markdown doesn't make it easy to put an HTML element around a
markdown table, we instead have a model of putting an empty div markdown table, we instead have a model of putting an empty div
before it to configure a specific table's styling. */ before it to configure a specific table's styling. */
div.centered_table + table td:not(:first-child), & div.centered_table + table td:not(:first-child),
div.centered_table + table th { div.centered_table + table th {
text-align: center; text-align: center;
} }
@ -108,11 +108,11 @@
left: calc(30px); left: calc(30px);
} }
li { & li {
line-height: 150%; line-height: 150%;
} }
ol { & ol {
counter-reset: item; counter-reset: item;
list-style: none; list-style: none;
@ -144,7 +144,7 @@
.codehilite { .codehilite {
background-color: hsl(0, 0%, 100%); background-color: hsl(0, 0%, 100%);
pre { & pre {
white-space: pre; white-space: pre;
overflow-x: auto; overflow-x: auto;
} }
@ -166,11 +166,11 @@
} }
} }
ul { & ul {
margin: 0 10px 15px 25px; margin: 0 10px 15px 25px;
/* Avoid extra whitespace after nested bulleted lists. */ /* Avoid extra whitespace after nested bulleted lists. */
ul { & ul {
margin: 0 20px; margin: 0 20px;
} }
@ -192,7 +192,7 @@
max-width: 700px; max-width: 700px;
background-color: hsl(0, 0%, 100%); background-color: hsl(0, 0%, 100%);
ol li p:not(:first-child) { & ol li p:not(:first-child) {
display: block; display: block;
} }
@ -204,7 +204,7 @@
} }
} }
i.zulip-icon { & i.zulip-icon {
margin: 0 2px 2px; margin: 0 2px 2px;
vertical-align: middle; vertical-align: middle;
} }
@ -214,20 +214,20 @@
} }
} }
a { & a {
color: hsl(176, 46%, 41%); color: hsl(176, 46%, 41%);
font-weight: 600; font-weight: 600;
code { & code {
color: hsl(176, 46%, 41%); color: hsl(176, 46%, 41%);
} }
} }
strong { & strong {
font-weight: 600; font-weight: 600;
} }
img { & img {
vertical-align: top; vertical-align: top;
box-shadow: 0 0 4px hsla(0, 0%, 0%, 0.05); box-shadow: 0 0 4px hsla(0, 0%, 0%, 0.05);
border: 1px solid hsl(0, 0%, 87%); border: 1px solid hsl(0, 0%, 87%);
@ -269,11 +269,11 @@
padding: 10px; padding: 10px;
margin: 5px 0; margin: 5px 0;
p { & p {
margin-bottom: 0; margin-bottom: 0;
} }
p:first-of-type { & p:first-of-type {
display: inline; display: inline;
} }
} }
@ -342,7 +342,7 @@
} }
} }
kbd { & kbd {
/* Same as kbd in app_components.css */ /* Same as kbd in app_components.css */
display: inline-block; display: inline-block;
border: 1px solid hsl(0, 0%, 80%); border: 1px solid hsl(0, 0%, 80%);
@ -366,7 +366,7 @@
} }
} }
code { & code {
/* Same font-family as zulip.css */ /* Same font-family as zulip.css */
font-family: "Source Code Pro", monospace; font-family: "Source Code Pro", monospace;
/* Same as base rules for code elements in rendered_markdown.css */ /* Same as base rules for code elements in rendered_markdown.css */
@ -381,8 +381,8 @@
background-color: hsl(0, 0%, 93%); background-color: hsl(0, 0%, 93%);
} }
pre { & pre {
code { & code {
font-size: 14px; font-size: 14px;
white-space: pre-wrap; white-space: pre-wrap;
padding: 0; padding: 0;
@ -393,15 +393,15 @@
} }
.code-section { .code-section {
ol { & ol {
margin-left: 15px; margin-left: 15px;
margin-top: 10px; margin-top: 10px;
} }
ul.nav { & ul.nav {
margin: 0; margin: 0;
li { & li {
display: inline-block; display: inline-block;
padding: 5px 14px; padding: 5px 14px;
margin: 0; margin: 0;

70
web/styles/portico/portico.css
View File

@ -65,8 +65,8 @@ html {
background-color: hsl(0, 0%, 98%); background-color: hsl(0, 0%, 98%);
} }
ul.nav { & ul.nav {
li.active { & li.active {
background-color: hsl(0, 0%, 98%); background-color: hsl(0, 0%, 98%);
border-bottom: 1px solid hsl(0, 0%, 98%); border-bottom: 1px solid hsl(0, 0%, 98%);
} }
@ -110,7 +110,7 @@ html {
} }
/* Markdown processor generates lots of spurious <p></p> */ /* Markdown processor generates lots of spurious <p></p> */
p:empty { & p:empty {
margin: 0; margin: 0;
} }
@ -135,7 +135,7 @@ html {
padding: 10px var(--help-sidebar-padding); padding: 10px var(--help-sidebar-padding);
} }
h1 { & h1 {
font-weight: 400; font-weight: 400;
font-size: 1.25em; font-size: 1.25em;
line-height: 1.5; line-height: 1.5;
@ -146,7 +146,7 @@ html {
margin-top: 20px; margin-top: 20px;
margin-bottom: 17px; margin-bottom: 17px;
a::before { & a::before {
display: inline-block; display: inline-block;
font: normal normal normal 14px/1 FontAwesome; font: normal normal normal 14px/1 FontAwesome;
font-size: inherit; font-size: inherit;
@ -157,20 +157,20 @@ html {
} }
} }
h1, & h1,
h2, h2,
h3 { h3 {
&:not(:first-of-type) { &:not(:first-of-type) {
margin-top: 0; margin-top: 0;
} }
a { & a {
color: inherit; color: inherit;
display: block; display: block;
} }
} }
h2 { & h2 {
font-weight: 400; font-weight: 400;
font-size: 1.1em; font-size: 1.1em;
line-height: 1.05; line-height: 1.05;
@ -193,7 +193,7 @@ html {
} }
} }
ul { & ul {
margin: 5px 0 10px var(--help-sidebar-indent); margin: 5px 0 10px var(--help-sidebar-indent);
} }
@ -202,7 +202,7 @@ html {
display: none; display: none;
} }
li { & li {
list-style-type: none; list-style-type: none;
font-size: 0.95em; font-size: 0.95em;
font-weight: 400; font-weight: 400;
@ -210,7 +210,7 @@ html {
cursor: pointer; cursor: pointer;
a { & a {
color: inherit; color: inherit;
display: block; display: block;
@ -227,7 +227,7 @@ html {
} }
} }
a { & a {
&.highlighted { &.highlighted {
background-color: hsl(152, 40%, 42%); background-color: hsl(152, 40%, 42%);
@ -322,12 +322,12 @@ img.screenshot {
.landing-page { .landing-page {
padding: 2em 0; padding: 2em 0;
h2, & h2,
h4 { h4 {
font-weight: lighter; font-weight: lighter;
} }
p { & p {
font-size: 120%; font-size: 120%;
} }
} }
@ -381,11 +381,11 @@ input.text-error {
position: relative; position: relative;
line-height: 0.8; line-height: 0.8;
svg { & svg {
vertical-align: -5px; vertical-align: -5px;
} }
a, & a,
a:focus, a:focus,
a:hover { a:hover {
text-decoration: none; text-decoration: none;
@ -412,7 +412,7 @@ input.text-error {
position: relative; position: relative;
display: inline-block; display: inline-block;
ul { & ul {
display: none; display: none;
position: absolute; position: absolute;
right: 0; right: 0;
@ -436,7 +436,7 @@ input.text-error {
transform: scale(1.8, 1); transform: scale(1.8, 1);
} }
li { & li {
display: list-item; display: list-item;
margin: 0; margin: 0;
padding: 3px 10px; padding: 3px 10px;
@ -449,7 +449,7 @@ input.text-error {
transition: none; transition: none;
} }
a { & a {
display: block; display: block;
margin: 2px 0; margin: 2px 0;
padding: 0; padding: 0;
@ -463,7 +463,7 @@ input.text-error {
background-color: transparent; background-color: transparent;
} }
a i { & a i {
margin-right: 5px; margin-right: 5px;
} }
@ -596,14 +596,14 @@ input.text-error {
font-size: 0.8em; font-size: 0.8em;
opacity: 0.8; opacity: 0.8;
p { & p {
/* Avoid double-applying the 1.2em font-size here */ /* Avoid double-applying the 1.2em font-size here */
font-size: 1em; font-size: 1em;
} }
} }
} }
input { & input {
display: none; display: none;
&:checked + label { &:checked + label {
@ -613,7 +613,7 @@ input.text-error {
} }
} }
label { & label {
font-size: initial; font-size: initial;
display: inline-block; display: inline-block;
padding: 10px; padding: 10px;
@ -641,7 +641,7 @@ input.text-error {
border-radius: 4px; border-radius: 4px;
transition: all 0.3s ease; transition: all 0.3s ease;
a { & a {
color: inherit; color: inherit;
} }
@ -787,7 +787,7 @@ input.new-organization-button {
.top-links { .top-links {
text-align: right; text-align: right;
a { & a {
display: inline-block; display: inline-block;
color: hsl(0, 0%, 100%); color: hsl(0, 0%, 100%);
padding: 2px 7px 1px 8px; padding: 2px 7px 1px 8px;
@ -814,7 +814,7 @@ input.new-organization-button {
text-align: left; text-align: left;
width: 328px; width: 328px;
form { & form {
margin: 0; margin: 0;
} }
@ -830,7 +830,7 @@ input.new-organization-button {
.input-group { .input-group {
margin: 15px 0; margin: 15px 0;
input[type="text"], & input[type="text"],
input[type="password"] { input[type="password"] {
width: calc(100% - 14px); width: calc(100% - 14px);
} }
@ -844,7 +844,7 @@ input.new-organization-button {
} }
} }
p { & p {
margin: 0; margin: 0;
} }
@ -870,17 +870,17 @@ input.new-organization-button {
} }
/* --- new settings styling --- */ /* --- new settings styling --- */
input[type="radio"], & input[type="radio"],
input[type="checkbox"] { input[type="checkbox"] {
margin: 0 10px 0 0; margin: 0 10px 0 0;
} }
input[type="radio"] { & input[type="radio"] {
position: relative; position: relative;
top: 8px; top: 8px;
} }
label { & label {
margin: 0; margin: 0;
padding: 5px 0; padding: 5px 0;
@ -898,7 +898,7 @@ input.new-organization-button {
padding: 10px 0; padding: 10px 0;
border-bottom: 1px solid hsl(0, 0%, 87%); border-bottom: 1px solid hsl(0, 0%, 87%);
label.inline-block { & label.inline-block {
width: 200px; width: 200px;
} }
} }
@ -914,7 +914,7 @@ input.new-organization-button {
} }
#registration-email { #registration-email {
label { & label {
float: left; float: left;
padding-top: 5px; padding-top: 5px;
width: 100%; width: 100%;
@ -1204,7 +1204,7 @@ label.label-title {
#devtools-registration { #devtools-registration {
float: left; float: left;
form { & form {
display: inline; display: inline;
} }
} }
@ -1312,7 +1312,7 @@ label.label-title {
border-bottom: 1px solid hsl(177, 52%, 55%); border-bottom: 1px solid hsl(177, 52%, 55%);
z-index: 5; z-index: 5;
a { & a {
color: hsl(0, 0%, 100%); color: hsl(0, 0%, 100%);
text-decoration: underline; text-decoration: underline;
} }

76
web/styles/portico/portico_signin.css
View File

@ -36,7 +36,7 @@ html {
font-weight: 500; font-weight: 500;
font-size: 0.9em; font-size: 0.9em;
a { & a {
color: hsl(164, 100%, 23%); color: hsl(164, 100%, 23%);
&:hover { &:hover {
@ -52,7 +52,7 @@ html {
font-weight: 500; font-weight: 500;
font-size: 1.2em; font-size: 1.2em;
a { & a {
color: hsl(164, 100%, 23%); color: hsl(164, 100%, 23%);
&:hover { &:hover {
@ -88,7 +88,7 @@ html {
text-align: center; text-align: center;
} }
h2 { & h2 {
font-size: 1em; font-size: 1em;
font-weight: 400; font-weight: 400;
} }
@ -100,7 +100,7 @@ html {
margin: 0 20px; margin: 0 20px;
} }
select { & select {
height: 30px; height: 30px;
padding: 4px 6px; padding: 4px 6px;
width: 220px; width: 220px;
@ -160,7 +160,7 @@ html {
} }
} }
p { & p {
font-size: 19px; font-size: 19px;
} }
} }
@ -244,7 +244,7 @@ html {
display: none; display: none;
line-height: 1; line-height: 1;
i { & i {
margin-right: 5px; margin-right: 5px;
} }
} }
@ -261,7 +261,7 @@ html {
.forgot-password-container { .forgot-password-container {
width: 503px; width: 503px;
h3, & h3,
form { form {
margin-bottom: 0; margin-bottom: 0;
} }
@ -301,7 +301,7 @@ html {
} }
} }
button { & button {
margin-top: 22px; margin-top: 22px;
} }
@ -384,7 +384,7 @@ html {
} }
.new-style { .new-style {
button { & button {
display: inline-block; display: inline-block;
vertical-align: top; vertical-align: top;
padding: 13px 22px; padding: 13px 22px;
@ -440,7 +440,7 @@ html {
line-height: 1.5; line-height: 1.5;
color: hsl(0, 0%, 27%); color: hsl(0, 0%, 27%);
a { & a {
text-decoration: none; text-decoration: none;
} }
@ -492,7 +492,7 @@ html {
display: inline-block; display: inline-block;
vertical-align: top; vertical-align: top;
input[type="text"], & input[type="text"],
input[type="email"], input[type="email"],
input[type="password"], input[type="password"],
textarea, textarea,
@ -525,11 +525,11 @@ html {
} }
} }
input[type="email"] { & input[type="email"] {
margin-bottom: 10px; margin-bottom: 10px;
} }
label { & label {
position: absolute; position: absolute;
top: 0; top: 0;
left: 0; left: 0;
@ -540,7 +540,7 @@ html {
} }
&.moving-label { &.moving-label {
input[type="text"]:invalid + label, & input[type="text"]:invalid + label,
input[type="email"]:invalid + label, input[type="email"]:invalid + label,
input[type="password"]:invalid + label { input[type="password"]:invalid + label {
transform: translateY(39px) translateX(14px); transform: translateY(39px) translateX(14px);
@ -552,7 +552,7 @@ html {
} }
} }
label, & label,
input[type="text"]:focus + label, input[type="text"]:focus + label,
input[type="email"]:focus + label, input[type="email"]:focus + label,
input[type="password"]:focus + label, input[type="password"]:focus + label,
@ -572,12 +572,12 @@ html {
/* The width of the "Organization name" text box /* The width of the "Organization name" text box
right above this one is also 326px. */ right above this one is also 326px. */
select { & select {
width: 326px; width: 326px;
cursor: pointer; cursor: pointer;
} }
p.text-error { & p.text-error {
display: block; display: block;
padding: 0; padding: 0;
@ -591,7 +591,7 @@ html {
left: 1px; left: 1px;
} }
label.text-error { & label.text-error {
display: block; display: block;
top: 0; top: 0;
@ -649,16 +649,16 @@ html {
#change-email-address-visibility-modal { #change-email-address-visibility-modal {
font-weight: 400; font-weight: 400;
label { & label {
font-size: inherit; font-size: inherit;
} }
h1 { & h1 {
font-weight: 600; font-weight: 600;
font-family: inherit; font-family: inherit;
} }
select { & select {
margin-bottom: 10px; margin-bottom: 10px;
width: auto; width: auto;
font-size: 16px; font-size: 16px;
@ -669,11 +669,11 @@ html {
/* -- /accounts/register/ page -- */ /* -- /accounts/register/ page -- */
.portico-page { .portico-page {
.pitch { .pitch {
h1 { & h1 {
margin-bottom: 5px; margin-bottom: 5px;
} }
p { & p {
font-weight: 400; font-weight: 400;
color: hsl(0, 0%, 67%); color: hsl(0, 0%, 67%);
} }
@ -702,7 +702,7 @@ html {
border-bottom: 2px solid hsl(0, 0%, 87%); border-bottom: 2px solid hsl(0, 0%, 87%);
} }
span { & span {
background-color: hsl(0, 0%, 100%); background-color: hsl(0, 0%, 100%);
padding: 0 5px; padding: 0 5px;
} }
@ -801,7 +801,7 @@ html {
} }
.anonymous_access_form { .anonymous_access_form {
button { & button {
/* Avoid excessive space at top of login form */ /* Avoid excessive space at top of login form */
margin-top: 0; margin-top: 0;
} }
@ -882,7 +882,7 @@ button#register_auth_button_gitlab {
padding: 0; padding: 0;
margin: 30px; margin: 30px;
fieldset { & fieldset {
margin: 30px; margin: 30px;
.input-box:last-child { .input-box:last-child {
@ -909,7 +909,7 @@ button#register_auth_button_gitlab {
width: calc(100% - 20px); width: calc(100% - 20px);
} }
label { & label {
position: absolute; position: absolute;
margin: 0; margin: 0;
top: 0; top: 0;
@ -926,13 +926,13 @@ button#register_auth_button_gitlab {
&.support-form-field { &.support-form-field {
width: 450px; width: 450px;
input, & input,
textarea { textarea {
width: 400px; width: 400px;
font-size: 1rem; font-size: 1rem;
} }
textarea { & textarea {
color: hsl(0, 0%, 33%); color: hsl(0, 0%, 33%);
vertical-align: middle; vertical-align: middle;
background-color: hsl(0, 0%, 100%); background-color: hsl(0, 0%, 100%);
@ -1026,7 +1026,7 @@ button#register_auth_button_gitlab {
display: block; display: block;
} }
legend { & legend {
display: block; display: block;
width: 100%; width: 100%;
padding: 0; padding: 0;
@ -1047,7 +1047,7 @@ button#register_auth_button_gitlab {
} }
.input-group { .input-group {
label { & label {
font-size: 1rem; font-size: 1rem;
&.inline-block { &.inline-block {
@ -1133,7 +1133,7 @@ button#register_auth_button_gitlab {
padding: 30px 0 50px; padding: 30px 0 50px;
} }
form { & form {
padding: 0; padding: 0;
margin: 0; margin: 0;
@ -1141,7 +1141,7 @@ button#register_auth_button_gitlab {
background-color: hsl(202, 56%, 91%); background-color: hsl(202, 56%, 91%);
cursor: pointer; cursor: pointer;
i.fa { & i.fa {
color: hsl(203, 63%, 76%); color: hsl(203, 63%, 76%);
} }
} }
@ -1154,7 +1154,7 @@ button#register_auth_button_gitlab {
display: flex; display: flex;
align-items: center; align-items: center;
p { & p {
margin: 0; margin: 0;
font-size: 0.8em; font-size: 0.8em;
@ -1168,7 +1168,7 @@ button#register_auth_button_gitlab {
font-weight: 500; font-weight: 500;
} }
img, & img,
i { i {
width: 35px; width: 35px;
height: 35px; height: 35px;
@ -1176,7 +1176,7 @@ button#register_auth_button_gitlab {
border-radius: 3px; border-radius: 3px;
} }
i.fa { & i.fa {
color: hsl(0, 0%, 67%); color: hsl(0, 0%, 67%);
text-align: center; text-align: center;
line-height: 38px; line-height: 38px;
@ -1258,7 +1258,7 @@ button#register_auth_button_gitlab {
.description { .description {
margin: 20px 0; margin: 20px 0;
a { & a {
color: hsl(200, 100%, 36%); color: hsl(200, 100%, 36%);
} }
} }
@ -1290,7 +1290,7 @@ button#register_auth_button_gitlab {
text-align: center; text-align: center;
} }
button { & button {
width: 328px; width: 328px;
} }
} }

6
web/styles/portico/stats.css
View File

@ -34,7 +34,7 @@ p {
background-color: hsl(0, 0%, 100%); background-color: hsl(0, 0%, 100%);
width: 395px; width: 395px;
h1 { & h1 {
margin-top: 0; margin-top: 0;
font-size: 1.5em; font-size: 1.5em;
} }
@ -53,12 +53,12 @@ p {
border: 2px solid hsl(0, 0%, 93%); border: 2px solid hsl(0, 0%, 93%);
background-color: hsl(0, 0%, 100%); background-color: hsl(0, 0%, 100%);
button { & button {
position: relative; position: relative;
z-index: 1; z-index: 1;
} }
h1 { & h1 {
margin-top: 0; margin-top: 0;
font-size: 1.5em; font-size: 1.5em;
} }

4
web/styles/reactions.css
View File

@ -61,7 +61,7 @@
color: hsl(200, 100%, 40%); color: hsl(200, 100%, 40%);
} }
i { & i {
font-size: 1.3em; font-size: 1.3em;
float: left; float: left;
color: hsl(0, 0%, 33%); color: hsl(0, 0%, 33%);
@ -77,7 +77,7 @@
display: flex; display: flex;
align-items: center; align-items: center;
i { & i {
font-size: 1em; font-size: 1em;
} }

14
web/styles/recent_topics.css
View File

@ -25,7 +25,7 @@
*/ */
min-height: 100vw; min-height: 100vw;
td { & td {
vertical-align: middle; vertical-align: middle;
padding: 3px 8px; padding: 3px 8px;
} }
@ -43,7 +43,7 @@
} }
} }
a { & a {
color: hsl(205, 47%, 42%); color: hsl(205, 47%, 42%);
text-decoration: none; text-decoration: none;
@ -265,7 +265,7 @@
line-height: 24px; line-height: 24px;
} }
tr { & tr {
background-color: hsl(100, 11%, 96%); background-color: hsl(100, 11%, 96%);
&:hover { &:hover {
@ -282,7 +282,7 @@
margin-right: 5px; margin-right: 5px;
} }
thead th { & thead th {
background-color: hsl(0, 0%, 100%); background-color: hsl(0, 0%, 100%);
color: inherit; color: inherit;
border-top: 1px solid hsla(0, 0%, 0%, 0.2) !important; border-top: 1px solid hsla(0, 0%, 0%, 0.2) !important;
@ -328,7 +328,7 @@
width: 25%; width: 25%;
padding: 8px 0 8px 8px; padding: 8px 0 8px 8px;
a { & a {
word-break: break-word; word-break: break-word;
hyphens: auto; hyphens: auto;
} }
@ -337,7 +337,7 @@
.recent_topic_name { .recent_topic_name {
width: 40%; width: 40%;
a { & a {
word-break: break-word; word-break: break-word;
/* No hyphes for word break since it caused hyphens to appear before /* No hyphes for word break since it caused hyphens to appear before
the ellipsis `longText-...` which is not desirable. Ellipsis appears due the ellipsis `longText-...` which is not desirable. Ellipsis appears due
@ -365,7 +365,7 @@
width: 15%; width: 15%;
} }
thead .last_msg_time_header { & thead .last_msg_time_header {
/* The responsive table of bootstrap /* The responsive table of bootstrap
somehow ignores the width of ::after somehow ignores the width of ::after
element. This ensures it is always visible. element. This ensures it is always visible.

60
web/styles/rendered_markdown.css
View File

@ -1,19 +1,19 @@
.rendered_markdown { .rendered_markdown {
/* The default top/bottom margins for paragraphs are small, to make sure /* The default top/bottom margins for paragraphs are small, to make sure
they look nice next to blockquotes, lists, etc. */ they look nice next to blockquotes, lists, etc. */
p { & p {
margin: 3px 0; margin: 3px 0;
} }
/* The spacing between two paragraphs is significantly larger. We /* The spacing between two paragraphs is significantly larger. We
arrange things so that this spacing matches the spacing between arrange things so that this spacing matches the spacing between
paragraphs in two consecutive 1-line messages. */ paragraphs in two consecutive 1-line messages. */
p + p { & p + p {
margin-top: 10px; margin-top: 10px;
} }
/* Ensure bulleted lists are nicely centered in 1-line messages */ /* Ensure bulleted lists are nicely centered in 1-line messages */
ul { & ul {
margin: 2px 0 5px 20px; margin: 2px 0 5px 20px;
} }
@ -24,7 +24,7 @@
} }
/* Ensure ordered lists are nicely centered in 1-line messages */ /* Ensure ordered lists are nicely centered in 1-line messages */
ol { & ol {
margin: 2px 0 5px 20px; margin: 2px 0 5px 20px;
} }
@ -35,18 +35,18 @@
} }
/* Reduce top-margin when a paragraph is followed by an ordered or bulleted list */ /* Reduce top-margin when a paragraph is followed by an ordered or bulleted list */
p + ul, & p + ul,
p + ol { p + ol {
margin-top: 0; margin-top: 0;
} }
hr { & hr {
border-bottom: 1px solid hsl(0, 0%, 87%); border-bottom: 1px solid hsl(0, 0%, 87%);
border-top: 1px solid hsl(0, 0%, 87%); border-top: 1px solid hsl(0, 0%, 87%);
} }
/* Headings */ /* Headings */
h1, & h1,
h2, h2,
h3, h3,
h4, h4,
@ -60,7 +60,7 @@
/* Headings: Ensure that messages that start with a heading don't have /* Headings: Ensure that messages that start with a heading don't have
a weirdly blank area at the very start of the message. */ a weirdly blank area at the very start of the message. */
h1:first-child, & h1:first-child,
h2:first-child, h2:first-child,
h3:first-child, h3:first-child,
h4:first-child, h4:first-child,
@ -71,39 +71,39 @@
/* We use a modest progression of heading sizes to make them stand out /* We use a modest progression of heading sizes to make them stand out
from normal next but avoid taking up too much space. */ from normal next but avoid taking up too much space. */
h1 { & h1 {
font-size: 1.4em; font-size: 1.4em;
} }
h2 { & h2 {
font-size: 1.3em; font-size: 1.3em;
} }
h3 { & h3 {
font-size: 1.2em; font-size: 1.2em;
} }
h4 { & h4 {
font-size: 1.1em; font-size: 1.1em;
} }
h5 { & h5 {
font-size: 1.05em; font-size: 1.05em;
} }
h6 { & h6 {
font-size: 1em; font-size: 1em;
} }
/* Formatting for blockquotes */ /* Formatting for blockquotes */
blockquote { & blockquote {
padding-left: 5px; padding-left: 5px;
margin-left: 10px; margin-left: 10px;
margin-top: 5px; margin-top: 5px;
margin-bottom: 6px; margin-bottom: 6px;
border-left-color: hsl(0, 0%, 87%); border-left-color: hsl(0, 0%, 87%);
p { & p {
line-height: inherit; line-height: inherit;
font-size: inherit; font-size: inherit;
} }
@ -119,7 +119,7 @@
} }
/* Formatting for Markdown tables */ /* Formatting for Markdown tables */
table { & table {
padding-right: 10px; padding-right: 10px;
margin: 5px; margin: 5px;
width: 99%; width: 99%;
@ -129,22 +129,22 @@
white-space: nowrap; white-space: nowrap;
} }
thead { & thead {
background-color: hsl(0, 0%, 93%); background-color: hsl(0, 0%, 93%);
} }
tr { & tr {
display: table-row; display: table-row;
vertical-align: inherit; vertical-align: inherit;
} }
tr th { & tr th {
border: 1px solid hsl(0, 0%, 80%); border: 1px solid hsl(0, 0%, 80%);
padding: 4px; padding: 4px;
text-align: left; text-align: left;
} }
tr td { & tr td {
border: 1px solid hsl(0, 0%, 80%); border: 1px solid hsl(0, 0%, 80%);
padding: 4px; padding: 4px;
} }
@ -182,7 +182,7 @@
} }
/* Timestamps */ /* Timestamps */
time { & time {
background: hsl(0, 0%, 93%); background: hsl(0, 0%, 93%);
border-radius: 3px; border-radius: 3px;
padding: 0 0.2em; padding: 0 0.2em;
@ -345,7 +345,7 @@
background: hsla(0, 0%, 0%, 0.15); background: hsla(0, 0%, 0%, 0.15);
} }
a { & a {
display: block; display: block;
height: 100%; height: 100%;
width: 100%; width: 100%;
@ -424,7 +424,7 @@
margin-left: 10px; margin-left: 10px;
} }
li .message_inline_image img { & li .message_inline_image img {
float: none; float: none;
} }
@ -520,11 +520,11 @@
border: none; border: none;
} }
a { & a {
color: hsl(200, 100%, 40%); color: hsl(200, 100%, 40%);
text-decoration: none; text-decoration: none;
code { & code {
color: hsl(200, 100%, 40%); color: hsl(200, 100%, 40%);
} }
@ -533,13 +533,13 @@
color: hsl(200, 100%, 25%); color: hsl(200, 100%, 25%);
text-decoration: underline; text-decoration: underline;
code { & code {
color: hsl(200, 100%, 25%); color: hsl(200, 100%, 25%);
} }
} }
} }
pre { & pre {
direction: ltr; direction: ltr;
/* code block text is a bit smaller than normal text */ /* code block text is a bit smaller than normal text */
font-size: 0.825em; font-size: 0.825em;
@ -561,7 +561,7 @@
} }
} }
pre code { & pre code {
font-size: inherit; font-size: inherit;
padding: 0; padding: 0;
white-space: inherit; white-space: inherit;
@ -570,7 +570,7 @@
border: 0; border: 0;
} }
code { & code {
/* 11.55px when body is the default 14px; this is chosen to be /* 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 slightly above the 11.5px threshold where the height jumps by a
pixel on most platforms. */ pixel on most platforms. */

14
web/styles/right_sidebar.css
View File

@ -2,7 +2,7 @@
$user_status_emoji_width: 24px; $user_status_emoji_width: 24px;
.right-sidebar { .right-sidebar {
a:hover { & a:hover {
text-decoration: none; text-decoration: none;
} }
} }
@ -18,7 +18,7 @@ $user_status_emoji_width: 24px;
overflow-x: hidden; overflow-x: hidden;
list-style-position: inside; /* Draw the bullets inside our box */ list-style-position: inside; /* Draw the bullets inside our box */
li { & li {
overflow: hidden; overflow: hidden;
white-space: nowrap; white-space: nowrap;
text-overflow: ellipsis; text-overflow: ellipsis;
@ -37,7 +37,7 @@ $user_status_emoji_width: 24px;
text-align: center; text-align: center;
padding: 0 6px; padding: 0 6px;
i { & i {
padding-right: 0.25em; padding-right: 0.25em;
display: inline-block; display: inline-block;
width: 13px; width: 13px;
@ -83,7 +83,7 @@ $user_status_emoji_width: 24px;
display: block; display: block;
} }
a { & a {
color: inherit; color: inherit;
margin-left: 0; margin-left: 0;
} }
@ -171,7 +171,7 @@ $user_status_emoji_width: 24px;
font-size: 90%; font-size: 90%;
} }
span.status-text:not(:empty) { & span.status-text:not(:empty) {
margin-top: -3px; margin-top: -3px;
} }
@ -268,7 +268,7 @@ $user_status_emoji_width: 24px;
} }
#user_search_section { #user_search_section {
input { & input {
white-space: nowrap; white-space: nowrap;
text-overflow: ellipsis; text-overflow: ellipsis;
overflow: hidden; overflow: hidden;
@ -302,7 +302,7 @@ $user_status_emoji_width: 24px;
margin-bottom: 10px; margin-bottom: 10px;
} }
hr { & hr {
width: 90%; width: 90%;
} }
} }

116
web/styles/settings.css
View File

@ -17,7 +17,7 @@ h3,
/* We need settings-section-title here because some legacy settings /* We need settings-section-title here because some legacy settings
widgets use a <div> with this class for their heading. */ widgets use a <div> with this class for their heading. */
.settings-section-title { .settings-section-title {
a { & a {
color: inherit; color: inherit;
} }
@ -75,7 +75,7 @@ h3,
} }
.grid { .grid {
label { & label {
min-width: 200px; min-width: 200px;
} }
@ -91,7 +91,7 @@ h3,
#account-settings, #account-settings,
#profile-field-settings { #profile-field-settings {
.grid { .grid {
label { & label {
min-width: 120px; min-width: 120px;
} }
@ -112,7 +112,7 @@ h3,
} }
.button { .button {
ul { & ul {
text-align: left; text-align: left;
} }
} }
@ -133,7 +133,7 @@ h3,
} }
#admin_profile_fields_table { #admin_profile_fields_table {
th.display, & th.display,
td.display_in_profile_summary_cell { td.display_in_profile_summary_cell {
text-align: center; text-align: center;
} }
@ -195,7 +195,7 @@ h3,
display: inline; display: inline;
margin-right: 4px; margin-right: 4px;
i { & i {
font-size: 22px; font-size: 22px;
cursor: pointer; cursor: pointer;
} }
@ -206,7 +206,7 @@ h3,
} }
.table { .table {
tbody { & tbody {
border-bottom: 1px solid hsl(0, 0%, 87%); border-bottom: 1px solid hsl(0, 0%, 87%);
} }
} }
@ -223,7 +223,7 @@ h3,
} }
#settings_content { #settings_content {
table + .progressive-table-wrapper table tr.user_row td:first-of-type { & table + .progressive-table-wrapper table tr.user_row td:first-of-type {
width: 20%; width: 20%;
} }
@ -265,13 +265,13 @@ td .button {
} }
#language_selection_modal { #language_selection_modal {
table { & table {
width: 90%; width: 90%;
margin-top: 20px; margin-top: 20px;
border-collapse: separate; border-collapse: separate;
} }
td { & td {
padding-top: 1px; padding-top: 1px;
} }
} }
@ -285,7 +285,7 @@ td .button {
display: block; display: block;
} }
form { & form {
margin: 0; margin: 0;
} }
@ -341,7 +341,7 @@ td .button {
/* Messy implementation of buttons with text and a pencil icon in them /* Messy implementation of buttons with text and a pencil icon in them
having spacing before the pencil icon. */ having spacing before the pencil icon. */
button.btn-link i.fa-pencil, & button.btn-link i.fa-pencil,
button[data-dismiss="modal"] i.fa-pencil, button[data-dismiss="modal"] i.fa-pencil,
.dropdown-toggle i.fa-pencil { .dropdown-toggle i.fa-pencil {
margin-left: 3px; margin-left: 3px;
@ -405,7 +405,7 @@ td .button {
margin-bottom: 10px; margin-bottom: 10px;
} }
label.checkbox + label { & label.checkbox + label {
cursor: pointer; cursor: pointer;
} }
} }
@ -434,7 +434,7 @@ input[type="checkbox"] {
} }
.admin-realm-form { .admin-realm-form {
h3 { & h3 {
margin-bottom: 10px; margin-bottom: 10px;
} }
@ -549,7 +549,7 @@ input[type="checkbox"] {
vertical-align: top; vertical-align: top;
} }
img { & img {
margin-right: 6px; margin-right: 6px;
vertical-align: middle; vertical-align: middle;
margin-top: -2px; margin-top: -2px;
@ -567,7 +567,7 @@ input[type="checkbox"] {
#user-notification-settings { #user-notification-settings {
.notification-table { .notification-table {
th, & th,
td { td {
text-align: center; text-align: center;
vertical-align: middle; vertical-align: middle;
@ -578,12 +578,12 @@ input[type="checkbox"] {
padding-right: 0; padding-right: 0;
} }
label { & label {
cursor: default; cursor: default;
} }
} }
td:first-child { & td:first-child {
text-align: left; text-align: left;
font-weight: bold; font-weight: bold;
word-break: break-all; word-break: break-all;
@ -641,18 +641,18 @@ input[type="checkbox"] {
} }
.add-new-default-stream-box { .add-new-default-stream-box {
input[type="text"] { & input[type="text"] {
padding: 6px; padding: 6px;
} }
margin-bottom: 15px; margin-bottom: 15px;
} }
#add-custom-emoji-modal { #add-custom-emoji-modal {
form { & form {
margin: 0; margin: 0;
} }
input[type="text"] { & input[type="text"] {
padding: 6px; padding: 6px;
} }
@ -683,7 +683,7 @@ input[type="checkbox"] {
.add-new-linkifier-box, .add-new-linkifier-box,
.add-new-playground-box { .add-new-playground-box {
button { & button {
margin-left: calc(10em + 20px) !important; margin-left: calc(10em + 20px) !important;
} }
margin-bottom: 15px; margin-bottom: 15px;
@ -769,7 +769,7 @@ input[type="checkbox"] {
.edit-bot-buttons { .edit-bot-buttons {
padding-top: 5px; padding-top: 5px;
button { & button {
background-color: transparent; background-color: transparent;
} }
@ -816,7 +816,7 @@ input[type="checkbox"] {
} }
} }
img.avatar { & img.avatar {
margin: 10px 5px 0 10px; margin: 10px 5px 0 10px;
height: 50px; height: 50px;
width: 50px; width: 50px;
@ -895,18 +895,18 @@ input[type="checkbox"] {
} }
#add-alert-word { #add-alert-word {
form { & form {
margin-bottom: 4px; margin-bottom: 4px;
} }
input { & input {
margin-bottom: 0; margin-bottom: 0;
} }
} }
.admin-linkifier-form, .admin-linkifier-form,
.admin-playground-form { .admin-playground-form {
label { & label {
float: left; float: left;
padding-top: 5px; padding-top: 5px;
width: 10em; width: 10em;
@ -922,7 +922,7 @@ input[type="checkbox"] {
#alert-words-table { #alert-words-table {
margin: 0; margin: 0;
li { & li {
list-style-type: none; list-style-type: none;
&.alert-word-item:first-child { &.alert-word-item:first-child {
@ -968,7 +968,7 @@ input[type="checkbox"] {
.password-div { .password-div {
position: relative; position: relative;
input[type="text"] { & input[type="text"] {
margin-bottom: 10px; margin-bottom: 10px;
} }
@ -999,7 +999,7 @@ label.display-settings-radio-choice-label {
border-bottom: none; border-bottom: none;
} }
input[type="radio"] { & input[type="radio"] {
position: relative; position: relative;
top: -2px; top: -2px;
margin: 0 5px 0 0; margin: 0 5px 0 0;
@ -1099,7 +1099,7 @@ $option_title_width: 180px;
padding: 10px; padding: 10px;
border-radius: 5px; border-radius: 5px;
h4 { & h4 {
font-weight: normal; font-weight: normal;
margin: 0; margin: 0;
display: flex; display: flex;
@ -1107,7 +1107,7 @@ $option_title_width: 180px;
justify-content: left; justify-content: left;
} }
span[contenteditable] { & span[contenteditable] {
display: inline-block; display: inline-block;
word-break: break-all; word-break: break-all;
@ -1118,7 +1118,7 @@ $option_title_width: 180px;
} }
} }
span[contenteditable]:focus, & span[contenteditable]:focus,
span[contenteditable="true"]:hover { span[contenteditable="true"]:hover {
border-bottom: 1px solid hsl(0, 0%, 80%); border-bottom: 1px solid hsl(0, 0%, 80%);
margin-bottom: -1px; margin-bottom: -1px;
@ -1135,7 +1135,7 @@ $option_title_width: 180px;
margin-bottom: 10px; margin-bottom: 10px;
} }
p { & p {
line-height: 2; line-height: 2;
margin: 0; margin: 0;
} }
@ -1152,7 +1152,7 @@ $option_title_width: 180px;
.ntm { .ntm {
cursor: not-allowed; cursor: not-allowed;
h4 > .button { & h4 > .button {
cursor: not-allowed; cursor: not-allowed;
display: none; display: none;
@ -1207,13 +1207,13 @@ $option_title_width: 180px;
vertical-align: middle; vertical-align: middle;
} }
h3 { & h3 {
font-size: 1.5em; font-size: 1.5em;
font-weight: normal; font-weight: normal;
line-height: 1.5; line-height: 1.5;
} }
h5 { & h5 {
font-size: 1.2em; font-size: 1.2em;
font-weight: normal; font-weight: normal;
line-height: 1.2; line-height: 1.2;
@ -1251,13 +1251,13 @@ $option_title_width: 180px;
border-bottom: 1px solid hsl(0, 0%, 87%); border-bottom: 1px solid hsl(0, 0%, 87%);
} }
ul { & ul {
list-style: none; list-style: none;
margin: 0; margin: 0;
padding: 0; padding: 0;
} }
li { & li {
padding: 5px 0; padding: 5px 0;
outline: none; outline: none;
cursor: pointer; cursor: pointer;
@ -1343,7 +1343,7 @@ $option_title_width: 180px;
} }
} }
h1 { & h1 {
text-align: center; text-align: center;
font-size: 1.1em; font-size: 1.1em;
line-height: 1; line-height: 1;
@ -1385,7 +1385,7 @@ $option_title_width: 180px;
box-sizing: border-box; box-sizing: border-box;
border-bottom: 1px solid hsl(0, 0%, 87%); border-bottom: 1px solid hsl(0, 0%, 87%);
h1 .section { & h1 .section {
font-weight: 400; font-weight: 400;
color: inherit; color: inherit;
opacity: 0.6; opacity: 0.6;
@ -1418,7 +1418,7 @@ $option_title_width: 180px;
color: hsl(0, 0%, 67%); color: hsl(0, 0%, 67%);
} }
textarea { & textarea {
width: max(206px, 25vw); width: max(206px, 25vw);
max-width: 320px; max-width: 320px;
height: 80px; height: 80px;
@ -1461,7 +1461,7 @@ $option_title_width: 180px;
vertical-align: middle; vertical-align: middle;
} }
input, & input,
input[type="url"] { input[type="url"] {
/* Override undesired Bootstrap default. */ /* Override undesired Bootstrap default. */
margin-bottom: 0; margin-bottom: 0;
@ -1469,7 +1469,7 @@ $option_title_width: 180px;
} }
.dropdown-list-widget { .dropdown-list-widget {
button.dropdown-toggle { & button.dropdown-toggle {
text-align: left; text-align: left;
.fa-chevron-down { .fa-chevron-down {
@ -1485,7 +1485,7 @@ $option_title_width: 180px;
/* Match settings for select elements. */ /* Match settings for select elements. */
padding: 4px 6px; padding: 4px 6px;
span { & span {
line-height: 20px; line-height: 20px;
height: 1.4em; height: 1.4em;
} }
@ -1496,13 +1496,13 @@ $option_title_width: 180px;
} }
} }
button.multiselect_btn { & button.multiselect_btn {
/* Matches the dropdown input margin so as to keep it aligned */ /* Matches the dropdown input margin so as to keep it aligned */
margin-left: 9px; margin-left: 9px;
margin-top: 4px; margin-top: 4px;
} }
a.dropdown_list_reset_button { & a.dropdown_list_reset_button {
/* Prevent dark theme from overriding background. */ /* Prevent dark theme from overriding background. */
background: unset !important; background: unset !important;
border: none; border: none;
@ -1545,7 +1545,7 @@ $option_title_width: 180px;
the structure cannot be possible since simplebar inserts the structure cannot be possible since simplebar inserts
elements of its own, so we copy over that style elements of its own, so we copy over that style
from bootstrap to here. */ from bootstrap to here. */
li a { & li a {
display: block; display: block;
padding: 3px 20px; padding: 3px 20px;
clear: both; clear: both;
@ -1579,7 +1579,7 @@ $option_title_width: 180px;
width: 90%; width: 90%;
margin: 0 auto; margin: 0 auto;
tbody { & tbody {
border-bottom: none; border-bottom: none;
} }
} }
@ -1604,7 +1604,7 @@ $option_title_width: 180px;
#payload_url_inputbox, #payload_url_inputbox,
#service_name_list { #service_name_list {
input[type="text"] { & input[type="text"] {
width: 340px; width: 340px;
} }
} }
@ -1625,7 +1625,7 @@ $option_title_width: 180px;
.profile-field-choices { .profile-field-choices {
display: inline-block; display: inline-block;
hr { & hr {
margin-top: 0; margin-top: 0;
margin-bottom: 5px; margin-bottom: 5px;
} }
@ -1633,11 +1633,11 @@ $option_title_width: 180px;
.choice-row { .choice-row {
margin-top: 8px; margin-top: 8px;
input { & input {
width: 190px; width: 190px;
} }
button { & button {
margin-left: 2px; margin-left: 2px;
} }
} }
@ -1792,7 +1792,7 @@ $option_title_width: 180px;
/* 48px is the height of settings header and 45px is the height of tab-container */ /* 48px is the height of settings header and 45px is the height of tab-container */
height: calc(100% - 93px); height: calc(100% - 93px);
li.active { & li.active {
/* Don't highlight the active section in the settings list. */ /* Don't highlight the active section in the settings list. */
background: inherit; background: inherit;
border-bottom: 1px solid hsl(0, 0%, 93%); border-bottom: 1px solid hsl(0, 0%, 93%);
@ -1874,7 +1874,7 @@ $option_title_width: 180px;
width: 400px; width: 400px;
} }
label { & label {
margin-bottom: 4px; margin-bottom: 4px;
} }
@ -1883,7 +1883,7 @@ $option_title_width: 180px;
margin-top: 10px; margin-top: 10px;
} }
input { & input {
margin-bottom: 0; margin-bottom: 0;
} }
} }
@ -1891,11 +1891,11 @@ $option_title_width: 180px;
.settings_panel_list_header { .settings_panel_list_header {
position: relative; position: relative;
h3 { & h3 {
display: inline-block; display: inline-block;
} }
input.search { & input.search {
float: right; float: right;
font-size: 1em; font-size: 1em;
max-width: 160px; max-width: 160px;

42
web/styles/subscriptions.css
View File

@ -90,7 +90,7 @@
border: 1px solid hsl(0, 0%, 47%); border: 1px solid hsl(0, 0%, 47%);
} }
span { & span {
position: relative; position: relative;
top: -5px; top: -5px;
} }
@ -153,18 +153,18 @@ h4.user_group_setting_subsection_title {
margin: auto; margin: auto;
border-radius: 6px; border-radius: 6px;
tbody { & tbody {
border-bottom: none; border-bottom: none;
tr:last-of-type { & tr:last-of-type {
border-bottom: none; border-bottom: none;
} }
} }
tr { & tr {
border-bottom: 1px solid hsl(0, 0%, 93%); border-bottom: 1px solid hsl(0, 0%, 93%);
td, & td,
th { th {
padding: 4px 0 4px 5px; padding: 4px 0 4px 5px;
vertical-align: middle; vertical-align: middle;
@ -179,7 +179,7 @@ h4.user_group_setting_subsection_title {
display: inline-block; display: inline-block;
} }
tbody:empty::after, & tbody:empty::after,
&:empty::after { &:empty::after {
content: "No subscribers to this stream."; content: "No subscribers to this stream.";
display: block; display: block;
@ -188,7 +188,7 @@ h4.user_group_setting_subsection_title {
padding: 5px 5px 5px 10px; padding: 5px 5px 5px 10px;
} }
thead th { & thead th {
&:first-of-type { &:first-of-type {
border-top-left-radius: 4px; border-top-left-radius: 4px;
} }
@ -226,7 +226,7 @@ h4.user_group_setting_subsection_title {
.user_group_subscription_request_result, .user_group_subscription_request_result,
.stream_subscription_request_result { .stream_subscription_request_result {
a { & a {
color: inherit; color: inherit;
} }
} }
@ -377,11 +377,11 @@ h4.user_group_setting_subsection_title {
margin-left: 2em; margin-left: 2em;
margin-right: 2em; margin-right: 2em;
span { & span {
color: hsl(0, 0%, 67%); color: hsl(0, 0%, 67%);
} }
button { & button {
padding: 6px 10px 8px; padding: 6px 10px 8px;
display: block; display: block;
margin: 0 auto 10px; margin: 0 auto 10px;
@ -425,7 +425,7 @@ h4.user_group_setting_subsection_title {
} }
} }
input[type="text"].small { & input[type="text"].small {
border: 1px solid hsl(0, 0%, 80%); border: 1px solid hsl(0, 0%, 80%);
border-radius: 4px; border-radius: 4px;
padding: 3px; padding: 3px;
@ -500,14 +500,14 @@ h4.user_group_setting_subsection_title {
.user-group-creation-body, .user-group-creation-body,
.stream-creation-body { .stream-creation-body {
section.block { & section.block {
margin-bottom: 20px; margin-bottom: 20px;
} }
#announce-new-stream { #announce-new-stream {
margin: 25px auto; margin: 25px auto;
div[class^="fa"] { & div[class^="fa"] {
margin-left: 3px; margin-left: 3px;
margin-right: 8px; margin-right: 8px;
} }
@ -530,7 +530,7 @@ h4.user_group_setting_subsection_title {
background-repeat: no-repeat; background-repeat: no-repeat;
background-position: center center; background-position: center center;
svg { & svg {
fill: transparent; fill: transparent;
width: 70%; width: 70%;
margin: 0% 15%; margin: 0% 15%;
@ -709,7 +709,7 @@ h4.user_group_setting_subsection_title {
margin-top: 10px; margin-top: 10px;
margin-bottom: 3px; margin-bottom: 3px;
h5 { & h5 {
display: inline-block; display: inline-block;
} }
} }
@ -914,7 +914,7 @@ h4.user_group_setting_subsection_title {
} }
.subsection-parent .input-group { .subsection-parent .input-group {
input[type="checkbox"] { & input[type="checkbox"] {
margin-top: 0; margin-top: 0;
} }
@ -926,7 +926,7 @@ h4.user_group_setting_subsection_title {
box-shadow: none; box-shadow: none;
} }
input[type="radio"] { & input[type="radio"] {
margin-right: 5px; margin-right: 5px;
} }
@ -945,12 +945,12 @@ div.settings-radio-input-parent {
border-bottom: none; border-bottom: none;
} }
label.radio { & label.radio {
display: inline; display: inline;
margin: 5px; margin: 5px;
} }
input { & input {
float: left; float: left;
width: auto; width: auto;
cursor: pointer; cursor: pointer;
@ -974,7 +974,7 @@ div.settings-radio-input-parent {
margin-bottom: 10px; margin-bottom: 10px;
&.message-retention-setting-group { &.message-retention-setting-group {
input { & input {
width: 5ch; width: 5ch;
text-align: right; text-align: right;
} }
@ -988,7 +988,7 @@ div.settings-radio-input-parent {
height: fit-content; height: fit-content;
} }
select.stream_post_policy_setting { & select.stream_post_policy_setting {
margin-bottom: 10px; margin-bottom: 10px;
} }

6
web/styles/user_status.css
View File

@ -8,7 +8,7 @@
border-color: hsla(0, 0%, 0%, 0.6); border-color: hsla(0, 0%, 0%, 0.6);
border-radius: 5px; border-radius: 5px;
input.user_status { & input.user_status {
width: 95%; width: 95%;
border: none; border: none;
background-color: transparent; background-color: transparent;
@ -38,7 +38,7 @@
} }
/* For custom emojis and smiley icon to take full width. */ /* For custom emojis and smiley icon to take full width. */
img.selected_emoji, & img.selected_emoji,
.smiley_icon { .smiley_icon {
min-width: 20px; min-width: 20px;
} }
@ -61,7 +61,7 @@
padding-top: 15px; padding-top: 15px;
padding-left: 2px; padding-left: 2px;
button.user-status-value:hover { & button.user-status-value:hover {
/* Important is required for generic night them styling to not /* Important is required for generic night them styling to not
have precedence over this. */ have precedence over this. */
color: hsl(200, 100%, 40%) !important; color: hsl(200, 100%, 40%) !important;

20
web/styles/widgets.css
View File

@ -1,14 +1,14 @@
.widget-choices { .widget-choices {
ul { & ul {
padding: 3px; padding: 3px;
} }
li { & li {
padding: 2px; padding: 2px;
list-style: none; list-style: none;
} }
button { & button {
font-weight: 700; font-weight: 700;
color: hsl(240, 100%, 50%); color: hsl(240, 100%, 50%);
} }
@ -27,12 +27,12 @@
margin-right: 4px; margin-right: 4px;
} }
label.checkbox { & label.checkbox {
display: flex; /* Arrange that a multi-line description line wraps properly. */ display: flex; /* Arrange that a multi-line description line wraps properly. */
position: relative; position: relative;
vertical-align: top; vertical-align: top;
input[type="checkbox"] { & input[type="checkbox"] {
~ span { ~ span {
height: 12px; height: 12px;
width: 12px; width: 12px;
@ -71,7 +71,7 @@
.todo-widget, .todo-widget,
.poll-widget { .poll-widget {
h4 { & h4 {
font-size: 18px; font-size: 18px;
font-weight: 600; font-weight: 600;
@ -81,12 +81,12 @@
} }
} }
li { & li {
list-style: none; list-style: none;
margin: 2px 2px 6px 0; margin: 2px 2px 6px 0;
} }
ul { & ul {
margin: 0 0 5px; margin: 0 0 5px;
padding: 0; padding: 0;
} }
@ -99,11 +99,11 @@
} }
/* For the box-shadow to be visible on the left */ /* For the box-shadow to be visible on the left */
input.poll-option { & input.poll-option {
margin-right: 4px; margin-right: 4px;
} }
span.poll-option { & span.poll-option {
font-weight: 600; font-weight: 600;
padding-top: 28px; padding-top: 28px;
} }

62
web/styles/zulip.css
View File

@ -156,11 +156,11 @@ p.n-margin {
padding-left: 26px; padding-left: 26px;
text-indent: -10px; text-indent: -10px;
i { & i {
margin: 0 3px 0 1px; margin: 0 3px 0 1px;
} }
p { & p {
margin: 0; margin: 0;
padding: 4px; padding: 4px;
} }
@ -183,13 +183,13 @@ p.n-margin {
height: 24px; height: 24px;
margin: 0 auto 12px; margin: 0 auto 12px;
svg { & svg {
circle { & circle {
fill: hsl(0, 0%, 27%); fill: hsl(0, 0%, 27%);
stroke: hsl(0, 0%, 27%); stroke: hsl(0, 0%, 27%);
} }
path { & path {
fill: hsl(0, 0%, 100%); fill: hsl(0, 0%, 100%);
stroke: hsl(0, 0%, 100%); stroke: hsl(0, 0%, 100%);
} }
@ -220,7 +220,7 @@ p.n-margin {
top: 50px; top: 50px;
} }
h3 { & h3 {
font-size: 16pt; font-size: 16pt;
margin-top: 2px; margin-top: 2px;
} }
@ -336,7 +336,7 @@ p.n-margin {
.org-info { .org-info {
text-align: center; text-align: center;
a { & a {
white-space: normal; white-space: normal;
} }
} }
@ -359,14 +359,14 @@ p.n-margin {
.org-upgrade { .org-upgrade {
color: hsl(226, 82%, 60%); color: hsl(226, 82%, 60%);
a { & a {
padding: 0; padding: 0;
} }
} }
.org-plan, .org-plan,
.org-upgrade { .org-upgrade {
a { & a {
line-height: 16px; line-height: 16px;
} }
} }
@ -417,7 +417,7 @@ p.n-margin {
/* width of right column - width of gear icon(250px - 45px) */ /* width of right column - width of gear icon(250px - 45px) */
width: 205px; width: 205px;
a { & a {
font-size: calc(16em / 14); font-size: calc(16em / 14);
font-weight: 600; font-weight: 600;
color: hsl(0, 0%, 20%); color: hsl(0, 0%, 20%);
@ -427,7 +427,7 @@ p.n-margin {
color: hsl(0, 0%, 0%); color: hsl(0, 0%, 0%);
} }
i { & i {
margin-right: 3px; margin-right: 3px;
} }
} }
@ -461,7 +461,7 @@ p.n-margin {
text-decoration: none; text-decoration: none;
} }
i { & i {
color: hsl(0, 0%, 20%); color: hsl(0, 0%, 20%);
font-size: 1.6em; font-size: 1.6em;
} }
@ -729,8 +729,8 @@ strong {
basic idea of this fix is to remove decorations from :hover and apply them only basic idea of this fix is to remove decorations from :hover and apply them only
on :focus. */ on :focus. */
.typeahead-menu { .typeahead-menu {
li { & li {
a { & a {
display: block; display: block;
padding: 3px 20px; padding: 3px 20px;
clear: both; clear: both;
@ -1367,7 +1367,7 @@ td.pointer {
} }
.message_sender { .message_sender {
i.zulip-icon.zulip-icon-bot { & i.zulip-icon.zulip-icon-bot {
font-size: 12px; font-size: 12px;
} }
} }
@ -1423,7 +1423,7 @@ td.pointer {
pointer-events: all !important; pointer-events: all !important;
opacity: 1 !important; opacity: 1 !important;
i:focus { & i:focus {
/* Avoid displaying a focus outline outside the popover on the \vdots /* Avoid displaying a focus outline outside the popover on the \vdots
icon when opened via the mouse. */ icon when opened via the mouse. */
outline: 0 !important; outline: 0 !important;
@ -1482,7 +1482,7 @@ div.message_table {
/* We only want padding for the date rows between recipient blocks */ /* We only want padding for the date rows between recipient blocks */
padding-bottom: 0; padding-bottom: 0;
span { & span {
font-size: calc(12em / 14); font-size: calc(12em / 14);
font-style: normal; font-style: normal;
font-weight: 600; font-weight: 600;
@ -1628,11 +1628,11 @@ div.focused_table {
width: 100%; width: 100%;
white-space: nowrap; white-space: nowrap;
label.checkbox { & label.checkbox {
/* Place the checkboxes on their own lines. */ /* Place the checkboxes on their own lines. */
display: block; display: block;
input { & input {
margin: 0; margin: 0;
vertical-align: baseline; vertical-align: baseline;
} }
@ -1642,7 +1642,7 @@ div.focused_table {
} }
} }
label { & label {
display: inline-block; display: inline-block;
margin-right: 10px; margin-right: 10px;
} }
@ -1757,7 +1757,7 @@ div.focused_table {
padding: 7px 3.5px; /* based on having ~41.66% decrease */ padding: 7px 3.5px; /* based on having ~41.66% decrease */
} }
i { & i {
margin: 0 3px 0 5px; margin: 0 3px 0 5px;
} }
@ -1900,7 +1900,7 @@ div.focused_table {
display: inline-block; display: inline-block;
float: right; float: right;
ul.nav { & ul.nav {
margin: 0; margin: 0;
.dropdown-toggle, .dropdown-toggle,
@ -1923,13 +1923,13 @@ div.focused_table {
opacity: 1; opacity: 1;
} }
li.dropdown.open .dropdown-toggle { & li.dropdown.open .dropdown-toggle {
background: none; background: none;
opacity: 1; opacity: 1;
text-shadow: none; text-shadow: none;
} }
li.dropdown li.divider { & li.dropdown li.divider {
margin-left: 15px; margin-left: 15px;
margin-right: 15px; margin-right: 15px;
} }
@ -2071,7 +2071,7 @@ nav {
} }
} }
a { & a {
&.no-style:hover { &.no-style:hover {
text-decoration: none; text-decoration: none;
cursor: pointer; cursor: pointer;
@ -2140,7 +2140,7 @@ nav {
.checkbox { .checkbox {
display: block; display: block;
input[type="checkbox"] { & input[type="checkbox"] {
margin: 5px 0; margin: 5px 0;
float: none; float: none;
} }
@ -2260,7 +2260,7 @@ select.invite-as {
} }
#invite-stream-checkboxes { #invite-stream-checkboxes {
i.zulip-icon-globe { & i.zulip-icon-globe {
font-size: 80%; font-size: 80%;
} }
} }
@ -2430,7 +2430,7 @@ select.invite-as {
margin-bottom: 10px; margin-bottom: 10px;
} }
textarea { & textarea {
width: 100%; width: 100%;
min-width: 206px; min-width: 206px;
box-sizing: border-box; box-sizing: border-box;
@ -2503,7 +2503,7 @@ select.invite-as {
overflow: hidden; overflow: hidden;
transition: all 0.4s ease; transition: all 0.4s ease;
i { & i {
cursor: pointer; cursor: pointer;
&.hide_copy_icon { &.hide_copy_icon {
@ -2585,7 +2585,7 @@ select.invite-as {
height: 40px; height: 40px;
} }
i.fa-copy { & i.fa-copy {
cursor: pointer; cursor: pointer;
} }
} }
@ -2849,7 +2849,7 @@ select.invite-as {
background: hsl(240, 96%, 68%, 0.5); background: hsl(240, 96%, 68%, 0.5);
border-radius: 50%; border-radius: 50%;
i { & i {
color: hsl(0, 0%, 100%); color: hsl(0, 0%, 100%);
margin: 0 auto; margin: 0 auto;
font-size: 21px; font-size: 21px;