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

styles: Format CSS with Prettier. 

Signed-off-by: Anders Kaseorg <anders@zulip.com>
This commit is contained in:
Anders Kaseorg 2020-08-04 21:58:56 +00:00
parent 6c0afbb68d
commit c6ed5c81de
38 changed files with 348 additions and 264 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
docs/contributing/code-style.md
View File

@ -289,6 +289,12 @@ call a helper function instead.
### HTML / CSS ### HTML / CSS
Our CSS is formatted with [Prettier](https://prettier.io/). You can
ask Prettier to reformat all code via our [linter
tool](../testing/linters.md) with `tools/lint --only=prettier --fix`.
You can also [integrate it with your
editor](https://prettier.io/docs/en/editors.html).
Avoid using the `style=` attribute unless the styling is actually Avoid using the `style=` attribute unless the styling is actually
dynamic. Instead, define logical classes and put your styles in dynamic. Instead, define logical classes and put your styles in
external CSS files such as `zulip.css`. external CSS files such as `zulip.css`.

2
docs/testing/linters.md
View File

@ -101,7 +101,7 @@ following checks:
- Check Python code with pyflakes. - Check Python code with pyflakes.
- Check JavaScript and TypeScript code with eslint. - Check JavaScript and TypeScript code with eslint.
- Check JavaScript, TypeScript, and YAML formatting with Prettier. - Check CSS, JavaScript, TypeScript, and YAML formatting with Prettier.
- Check Python code for custom Zulip rules. - Check Python code for custom Zulip rules.
- Check non-Python code for custom Zulip rules. - Check non-Python code for custom Zulip rules.
- Check puppet manifests with the puppet validator. - Check puppet manifests with the puppet validator.

1
package.json
View File

@ -102,6 +102,7 @@
"puppeteer": "^5.2.0", "puppeteer": "^5.2.0",
"source-map": "^0.6.1", "source-map": "^0.6.1",
"stylelint": "^13.0.0", "stylelint": "^13.0.0",
"stylelint-config-prettier": "^8.0.2",
"svgo": "^1.2.2", "svgo": "^1.2.2",
"swagger-parser": "^10.0.0", "swagger-parser": "^10.0.0",
"typescript": "^3.5.1", "typescript": "^3.5.1",

3
static/styles/alerts.scss
View File

@ -124,8 +124,7 @@ $alert-error-red: hsl(0, 80%, 40%);
color: hsl(0, 7%, 15%); color: hsl(0, 7%, 15%);
background-color: hsl(0, 7%, 98%); background-color: hsl(0, 7%, 98%);
background-color: hsl(0, 7%, 98%); background-color: hsl(0, 7%, 98%);
box-shadow: box-shadow: inset 0px 11px 10px -10px hsl(0, 7%, 70%),
inset 0px 11px 10px -10px hsl(0, 7%, 70%),
inset 0px -11px 10px -10px hsl(0, 7%, 70%); inset 0px -11px 10px -10px hsl(0, 7%, 70%);
margin-top: 1em; margin-top: 1em;

12
static/styles/app_components.scss
View File

@ -315,11 +315,11 @@
.input-append { .input-append {
font-size: 90%; font-size: 90%;
letter-spacing: -.3em; letter-spacing: -0.3em;
} }
.input-append input[type=text], .input-append input[type="text"],
.new-style input[type=text] { .new-style input[type="text"] {
border-radius: 5px; border-radius: 5px;
box-shadow: none; box-shadow: none;
margin: 0px; margin: 0px;
@ -401,7 +401,9 @@
.stream-selection-header-colorblock { .stream-selection-header-colorblock {
/* box-shadow: 0px 2px 3px hsl(0, 0%, 80%); */ /* box-shadow: 0px 2px 3px hsl(0, 0%, 80%); */
box-shadow: inset 0px 2px 1px -2px hsl(0, 0%, 20%), inset 2px 0px 1px -2px hsl(0, 0%, 20%), inset 0px -2px 1px -2px hsl(0, 0%, 20%); box-shadow: inset 0px 2px 1px -2px hsl(0, 0%, 20%),
inset 2px 0px 1px -2px hsl(0, 0%, 20%),
inset 0px -2px 1px -2px hsl(0, 0%, 20%);
width: 10px; width: 10px;
border-radius: 3px 0px 0px 3px; border-radius: 3px 0px 0px 3px;
border-bottom: 0px; border-bottom: 0px;
@ -448,7 +450,7 @@
&:hover { &:hover {
color: hsl(0, 0%, 20%); color: hsl(0, 0%, 20%);
border: 1px solid hsl(49, 20%, 60%); border: 1px solid hsl(49, 20%, 60%);
box-shadow: 0px 0px 4px hsla(199, 79%, 56%, .2); box-shadow: 0px 0px 4px hsla(199, 79%, 56%, 0.2);
text-decoration: none; text-decoration: none;
} }

6
static/styles/components.scss
View File

@ -8,7 +8,7 @@
position: relative; position: relative;
vertical-align: top; vertical-align: top;
input[type=checkbox] { input[type="checkbox"] {
position: absolute; position: absolute;
clip: rect(0, 0, 0, 0); clip: rect(0, 0, 0, 0);
@ -30,7 +30,7 @@
border: 1px solid hsla(0, 0%, 0%, 0.6); border: 1px solid hsla(0, 0%, 0%, 0.6);
border-radius: 4px; border-radius: 4px;
filter: brightness(0.80); filter: brightness(0.8);
cursor: pointer; cursor: pointer;
} }
@ -48,7 +48,7 @@
} }
&:disabled ~ span { &:disabled ~ span {
opacity: 0.50; opacity: 0.5;
cursor: default; cursor: default;
} }
} }

9
static/styles/compose.scss
View File

@ -258,7 +258,7 @@ div[id^="message-edit-send-status"],
font-weight: bold; font-weight: bold;
color: hsl(0, 0%, 0%); color: hsl(0, 0%, 0%);
text-shadow: 0 1px 0 hsl(0, 0%, 100%); text-shadow: 0 1px 0 hsl(0, 0%, 100%);
opacity: .2; opacity: 0.2;
filter: alpha(opacity=20); filter: alpha(opacity=20);
float: right; float: right;
} }
@ -266,7 +266,7 @@ div[id^="message-edit-send-status"],
.send-status-close:hover, .send-status-close:hover,
.compose-send-status-close:hover { .compose-send-status-close:hover {
cursor: pointer; cursor: pointer;
opacity: .4; opacity: 0.4;
filter: alpha(opacity=40); filter: alpha(opacity=40);
} }
@ -286,7 +286,7 @@ div[id^="message-edit-send-status"],
font-weight: bold; font-weight: bold;
color: hsl(0, 0%, 0%); color: hsl(0, 0%, 0%);
text-shadow: 0 1px 0 hsl(0, 0%, 100%); text-shadow: 0 1px 0 hsl(0, 0%, 100%);
opacity: .2; opacity: 0.2;
filter: alpha(opacity=20); filter: alpha(opacity=20);
} }
} }
@ -375,7 +375,8 @@ input.recipient_box {
color: hsl(0, 0%, 100%); color: hsl(0, 0%, 100%);
&:focus { &:focus {
box-shadow: 0px 0px 10px hsl(170, 48%, 54%), 0px 0px 5px hsl(170, 48%, 54%); box-shadow: 0px 0px 10px hsl(170, 48%, 54%),
0px 0px 5px hsl(170, 48%, 54%);
} }
} }
} }

2
static/styles/hotspots.scss
View File

@ -88,7 +88,7 @@
&::after, &::after,
&::before { &::before {
border: solid transparent; border: solid transparent;
content: ''; content: "";
height: 0; height: 0;
width: 0; width: 0;
position: absolute; position: absolute;

6
static/styles/image_upload_widget.scss
View File

@ -4,7 +4,6 @@
border-radius: 5px; border-radius: 5px;
box-shadow: 0px 0px 10px hsla(0, 0%, 0%, 0.1); box-shadow: 0px 0px 10px hsla(0, 0%, 0%, 0.1);
transition: all 0.3s ease; transition: all 0.3s ease;
.image-block { .image-block {
@ -13,7 +12,7 @@
} }
.image-upload-background { .image-upload-background {
content: ''; content: "";
background-color: hsl(0, 0%, 0%); background-color: hsl(0, 0%, 0%);
height: 100%; height: 100%;
width: 100%; width: 100%;
@ -70,7 +69,7 @@
.upload-spinner-background { .upload-spinner-background {
background-color: hsl(0, 0%, 10%); background-color: hsl(0, 0%, 10%);
font-size: 0.80rem; font-size: 0.8rem;
width: 100%; width: 100%;
opacity: 0.8; opacity: 0.8;
height: 100%; height: 100%;
@ -115,7 +114,6 @@
/* SCSS related to settings page user avatar upload widget only */ /* SCSS related to settings page user avatar upload widget only */
#user-avatar-upload-widget { #user-avatar-upload-widget {
.image_upload_button { .image_upload_button {
border-radius: 5px; border-radius: 5px;
box-shadow: 0px 0px 10px hsla(0, 0%, 0%, 0.1); box-shadow: 0px 0px 10px hsla(0, 0%, 0%, 0.1);

2
static/styles/input_pill.scss
View File

@ -84,7 +84,7 @@
outline: none; outline: none;
&.shake { &.shake {
animation: shake 0.3s cubic-bezier(.36, .07, .19, .97) both; animation: shake 0.3s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0);
backface-visibility: hidden; backface-visibility: hidden;
perspective: 1000px; perspective: 1000px;

6
static/styles/left-sidebar.scss
View File

@ -57,7 +57,7 @@ li.show-more-topics {
#streams_inline_cog, #streams_inline_cog,
#streams_filter_icon { #streams_filter_icon {
float: right; float: right;
opacity: 0.50; opacity: 0.5;
font-size: 13px; font-size: 13px;
margin-top: 3px; margin-top: 3px;
margin-left: 10px; margin-left: 10px;
@ -136,7 +136,7 @@ li.show-more-topics {
} }
.inactive_stream { .inactive_stream {
opacity: .5; opacity: 0.5;
} }
} }
@ -390,7 +390,7 @@ li.top_left_recent_topics {
.stream-sidebar-menu-icon { .stream-sidebar-menu-icon {
top: 1px; top: 1px;
right: 0px; right: 0px;
font-size: 1.0em; font-size: 1em;
text-align: center; text-align: center;
padding: 0px 6px 0px 6px; padding: 0px 6px 0px 6px;
} }

7
static/styles/lightbox.scss
View File

@ -19,8 +19,11 @@
max-width: 100%; max-width: 100%;
background-color: hsl(0, 0%, 100%); background-color: hsl(0, 0%, 100%);
background-image: background-image: linear-gradient(
linear-gradient(45deg, hsl(0, 0%, 80%) 25%, transparent 25%), 45deg,
hsl(0, 0%, 80%) 25%,
transparent 25%
),
linear-gradient(135deg, hsl(0, 0%, 80%) 25%, transparent 25%), linear-gradient(135deg, hsl(0, 0%, 80%) 25%, transparent 25%),
linear-gradient(45deg, transparent 75%, hsl(0, 0%, 80%) 75%), linear-gradient(45deg, transparent 75%, hsl(0, 0%, 80%) 75%),
linear-gradient(135deg, transparent 75%, hsl(0, 0%, 80%) 75%); linear-gradient(135deg, transparent 75%, hsl(0, 0%, 80%) 75%);

2
static/styles/message_edit_history.scss
View File

@ -32,5 +32,3 @@
} }
} }
} }

40
static/styles/night_mode.scss
View File

@ -26,11 +26,11 @@ body.night-mode {
.compose-send-status-close { .compose-send-status-close {
color: hsl(0, 0%, 100%); color: hsl(0, 0%, 100%);
opacity: 1.0; opacity: 1;
} }
.compose-send-status-close:hover { .compose-send-status-close:hover {
opacity: .4; opacity: 0.4;
} }
.message_embed .data-container::after { .message_embed .data-container::after {
@ -50,7 +50,7 @@ body.night-mode {
color: hsl(212, 28%, 18%); color: hsl(212, 28%, 18%);
} }
.new-style label.checkbox input[type=checkbox] ~ span { .new-style label.checkbox input[type="checkbox"] ~ span {
border-color: hsla(0, 0%, 100%, 0.4); border-color: hsla(0, 0%, 100%, 0.4);
} }
@ -109,13 +109,14 @@ body.night-mode {
/* do not turn the .message_header .stream_label text dark on hover because they're /* do not turn the .message_header .stream_label text dark on hover because they're
on a dark background, and don't change the dark labels dark either. */ on a dark background, and don't change the dark labels dark either. */
.message_header:not(.dark_background) a.stream_label:not(.dark_background):hover { .message_header:not(.dark_background)
a.stream_label:not(.dark_background):hover {
color: hsl(212, 28%, 18%); color: hsl(212, 28%, 18%);
} }
/* these are converting grey things to "new grey" */ /* these are converting grey things to "new grey" */
*[disabled=disabled], *[disabled="disabled"],
*[readonly=readonly], *[readonly="readonly"],
.sidebar-title, .sidebar-title,
.recipient_row_date { .recipient_row_date {
color: inherit; color: inherit;
@ -176,7 +177,7 @@ on a dark background, and don't change the dark labels dark either. */
#search_arrows .pill, #search_arrows .pill,
.pm_recipient .pill-container .pill { .pm_recipient .pill-container .pill {
color: inherit; color: inherit;
border: 1px solid hsla(0, 0%, 0%, 0.50); border: 1px solid hsla(0, 0%, 0%, 0.5);
background-color: hsla(0, 0%, 0%, 0.25); background-color: hsla(0, 0%, 0%, 0.25);
font-weight: 600; font-weight: 600;
} }
@ -192,7 +193,10 @@ on a dark background, and don't change the dark labels dark either. */
background-color: transparent; background-color: transparent;
} }
.emoji-info-popover .emoji-popover .emoji-popover-category-tabs .emoji-popover-tab-item.active { .emoji-info-popover
.emoji-popover
.emoji-popover-category-tabs
.emoji-popover-tab-item.active {
background-color: hsla(0, 0%, 0%, 0.5); background-color: hsla(0, 0%, 0%, 0.5);
} }
@ -272,8 +276,13 @@ on a dark background, and don't change the dark labels dark either. */
} }
.overlay, .overlay,
#subscription_overlay #stream-creation #stream_creation_form #stream_creating_indicator:not(:empty), #subscription_overlay
.emoji-info-popover .emoji-popover .emoji-popover-emoji:not(.reacted):focus { #stream-creation
#stream_creation_form
#stream_creating_indicator:not(:empty),
.emoji-info-popover
.emoji-popover
.emoji-popover-emoji:not(.reacted):focus {
background-color: hsla(212, 28%, 8%, 0.75); background-color: hsla(212, 28%, 8%, 0.75);
} }
@ -529,7 +538,11 @@ on a dark background, and don't change the dark labels dark either. */
.rendered_markdown { .rendered_markdown {
.user-mention, .user-mention,
.user-group-mention { .user-group-mention {
background: linear-gradient(to bottom, hsla(0, 0%, 0%, 0.2) 0%, hsla(0, 0%, 0%, 0.1) 100%); background: linear-gradient(
to bottom,
hsla(0, 0%, 0%, 0.2) 0%,
hsla(0, 0%, 0%, 0.1) 100%
);
box-shadow: 0px 0px 0px 1px hsla(0, 0%, 0%, 0.4); box-shadow: 0px 0px 0px 1px hsla(0, 0%, 0%, 0.4);
} }
@ -756,7 +769,7 @@ on a dark background, and don't change the dark labels dark either. */
.alert.alert-success { .alert.alert-success {
color: inherit; color: inherit;
background-color: hsla(161, 60%, 46%, 0.20); background-color: hsla(161, 60%, 46%, 0.2);
border-color: hsl(165, 68%, 37%); border-color: hsl(165, 68%, 37%);
} }
@ -794,8 +807,7 @@ on a dark background, and don't change the dark labels dark either. */
.code-context { .code-context {
color: hsl(314, 27%, 82%); color: hsl(314, 27%, 82%);
background-color: hsl(312, 7%, 14%); background-color: hsl(312, 7%, 14%);
box-shadow: box-shadow: inset 0px 11px 10px -10px hsl(0, 0%, 6%),
inset 0px 11px 10px -10px hsl(0, 0%, 6%),
inset 0px -11px 10px -10px hsl(0, 0%, 6%); inset 0px -11px 10px -10px hsl(0, 0%, 6%);
.line-number { .line-number {

4
static/styles/popovers.scss
View File

@ -75,7 +75,7 @@
} }
input { input {
box-sizing: inherit; /* IE */ box-sizing: inherit; /* IE */
box-sizing: initial; box-sizing: initial;
width: calc(100% - 13px); width: calc(100% - 13px);
@ -136,7 +136,7 @@ ul {
&::before, &::before,
&::after { &::after {
content: ''; content: "";
flex: 1; flex: 1;
border-top: 1px solid hsl(0, 0%, 93%); border-top: 1px solid hsl(0, 0%, 93%);
border-bottom: 1px solid hsl(0, 0%, 100%); border-bottom: 1px solid hsl(0, 0%, 100%);

3
static/styles/portico/archive.scss
View File

@ -1,5 +1,6 @@
body { body {
font-family: 'Source Sans Pro', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-family: "Source Sans Pro", "Helvetica Neue", Helvetica, Arial,
sans-serif;
font-size: 14px; font-size: 14px;
} }

10
static/styles/portico/billing.scss
View File

@ -76,7 +76,7 @@
width: 120px; width: 120px;
height: 70px; height: 70px;
background-color: hsl(0, 0%, 94%); background-color: hsl(0, 0%, 94%);
transition: all .2s ease; transition: all 0.2s ease;
display: inline-block; display: inline-block;
text-align: center; text-align: center;
cursor: pointer; cursor: pointer;
@ -120,7 +120,11 @@
font-weight: 400; font-weight: 400;
color: hsl(0, 0%, 100%); color: hsl(0, 0%, 100%);
background-color: hsl(185, 38%, 55%); background-color: hsl(185, 38%, 55%);
background: linear-gradient(145deg, hsl(191, 56%, 55%), hsl(169, 65%, 42%)); background: linear-gradient(
145deg,
hsl(191, 56%, 55%),
hsl(169, 65%, 42%)
);
box-shadow: 0px 3px 10px hsla(0, 0%, 0%, 0.2); box-shadow: 0px 3px 10px hsla(0, 0%, 0%, 0.2);
border: 0; border: 0;
height: 40px; height: 40px;
@ -128,7 +132,7 @@
span { span {
background: 0; background: 0;
box-shadow: none; box-shadow: none;
font-family: 'Source Sans Pro', Helvetica, Arial; font-family: "Source Sans Pro", Helvetica, Arial;
font-size: 1.4em; font-size: 1.4em;
line-height: 20px; line-height: 20px;
} }

18
static/styles/portico/integrations.scss
View File

@ -115,7 +115,6 @@ $category-text: hsl(219, 23%, 33%);
#integration-search { #integration-search {
margin-bottom: 30px; margin-bottom: 30px;
.searchbar { .searchbar {
width: calc(100% - 40px); width: calc(100% - 40px);
display: flex; display: flex;
@ -198,14 +197,13 @@ $category-text: hsl(219, 23%, 33%);
h4 { h4 {
font-weight: 400; font-weight: 400;
font-size: .95em; font-size: 0.95em;
padding: 6px 10px 3px; padding: 6px 10px 3px;
margin: 3px 0; margin: 3px 0;
border-radius: 5px; border-radius: 5px;
transition: all 0.3s ease; transition: all 0.3s ease;
color: $category-text; color: $category-text;
&.selected, &.selected,
&:hover { &:hover {
background-color: $hover-green; background-color: $hover-green;
@ -274,7 +272,7 @@ $category-text: hsl(219, 23%, 33%);
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;
transition: all 0.3s ease; transition: all 0.3s ease;
font-size: .9em; font-size: 0.9em;
&.selected, &.selected,
&:hover { &:hover {
@ -342,12 +340,12 @@ $category-text: hsl(219, 23%, 33%);
.integration-secondary-line-text { .integration-secondary-line-text {
margin: 0; margin: 0;
line-height: 10px; line-height: 10px;
font-size: .65em; font-size: 0.65em;
font-weight: 400; font-weight: 400;
} }
.integration-category { .integration-category {
font-size: .85em; font-size: 0.85em;
margin-top: 5px; margin-top: 5px;
font-weight: 400; font-weight: 400;
color: hsla(216, 23%, 13%, 0.5); color: hsla(216, 23%, 13%, 0.5);
@ -404,7 +402,7 @@ $category-text: hsl(219, 23%, 33%);
} }
.integration-category { .integration-category {
font-size: .8em; font-size: 0.8em;
} }
} }
@ -426,11 +424,11 @@ $category-text: hsl(219, 23%, 33%);
} }
.integration-name { .integration-name {
font-size: .9em; font-size: 0.9em;
} }
.integration-category { .integration-category {
font-size: .77em; font-size: 0.77em;
} }
} }
} }
@ -486,7 +484,7 @@ $category-text: hsl(219, 23%, 33%);
.categories { .categories {
order: 2; order: 2;
.integration-category { .integration-category {
font-size: 0.90em; font-size: 0.9em;
font-weight: 400; font-weight: 400;
padding: 6px 3px; padding: 6px 3px;
margin: 7px 0; margin: 7px 0;

3
static/styles/portico/integrations_dev_panel.css
View File

@ -17,7 +17,8 @@ button {
padding-left: 10px; padding-left: 10px;
padding-right: 10px; padding-right: 10px;
background-color: hsl(173, 100%, 98%); background-color: hsl(173, 100%, 98%);
box-shadow: 8px 4px 8px 0 hsla(0, 0%, 0%, 0.2), 0 6px 20px 0 hsla(0, 0%, 0%, 0.19); box-shadow: 8px 4px 8px 0 hsla(0, 0%, 0%, 0.2),
0 6px 20px 0 hsla(0, 0%, 0%, 0.19);
} }
#fixture_body { #fixture_body {

145
static/styles/portico/landing-page.scss
View File

@ -568,7 +568,11 @@ nav {
width: 400px; width: 400px;
height: 280px; height: 280px;
background: linear-gradient(135deg, hsla(0, 0%, 0%, 0.05), hsla(0, 0%, 0%, 0.2)); background: linear-gradient(
135deg,
hsla(0, 0%, 0%, 0.05),
hsla(0, 0%, 0%, 0.2)
);
border-radius: 4px; border-radius: 4px;
background-image: url(/static/images/landing-page/notifications.jpg); background-image: url(/static/images/landing-page/notifications.jpg);
@ -739,7 +743,8 @@ nav {
font-size: 1.5em; font-size: 1.5em;
font-weight: 300; font-weight: 300;
line-height: 1.4; line-height: 1.4;
text-shadow: 0px 0px 5px hsla(164, 74%, 15%, 0.3), 0px 0px 20px hsla(0, 0%, 100%, 0.2); text-shadow: 0px 0px 5px hsla(164, 74%, 15%, 0.3),
0px 0px 20px hsla(0, 0%, 100%, 0.2);
} }
a { a {
@ -792,23 +797,43 @@ nav {
height: 1100px; height: 1100px;
&.dark-blue { &.dark-blue {
background: linear-gradient(10deg, hsla(196, 58%, 14%, 0) 50%, hsla(196, 58%, 14%, 0.7)); background: linear-gradient(
10deg,
hsla(196, 58%, 14%, 0) 50%,
hsla(196, 58%, 14%, 0.7)
);
} }
&.green { &.green {
background: linear-gradient(-25deg, hsla(156, 47%, 47%, 0) 40%, hsl(156, 47%, 47%)); background: linear-gradient(
-25deg,
hsla(156, 47%, 47%, 0) 40%,
hsl(156, 47%, 47%)
);
} }
&.blue { &.blue {
background: linear-gradient(25deg, hsla(196, 38%, 51%, 0) 40%, hsl(196, 38%, 51%)); background: linear-gradient(
25deg,
hsla(196, 38%, 51%, 0) 40%,
hsl(196, 38%, 51%)
);
} }
&.sunburst { &.sunburst {
background: linear-gradient(5deg, hsla(49, 71%, 68%, 0) 20%, hsl(49, 71%, 68%)); background: linear-gradient(
5deg,
hsla(49, 71%, 68%, 0) 20%,
hsl(49, 71%, 68%)
);
} }
&.white-fade { &.white-fade {
background: linear-gradient(0deg, hsl(0, 0%, 98%) 0%, hsla(0, 0%, 98%, 0) 40%); background: linear-gradient(
0deg,
hsl(0, 0%, 98%) 0%,
hsla(0, 0%, 98%, 0) 40%
);
} }
} }
@ -1144,7 +1169,6 @@ nav {
} }
} }
.portico-landing.hello .screen { .portico-landing.hello .screen {
position: relative; position: relative;
margin: -300px auto 0px auto; margin: -300px auto 0px auto;
@ -1337,7 +1361,10 @@ nav {
margin: 20px auto; margin: 20px auto;
padding: 30px 20px; padding: 30px 20px;
background-color: hsla(220, 20%, 97%, 0.6); background-color: hsla(220, 20%, 97%, 0.6);
background: linear-gradient(hsla(220, 20%, 97%, 0.4), hsla(220, 20%, 97%, 0.9)); background: linear-gradient(
hsla(220, 20%, 97%, 0.4),
hsla(220, 20%, 97%, 0.9)
);
border-radius: 12px; border-radius: 12px;
box-shadow: 0px 3px 10px hsla(0, 0%, 0%, 0.02); box-shadow: 0px 3px 10px hsla(0, 0%, 0%, 0.02);
position: relative; position: relative;
@ -1473,7 +1500,6 @@ nav {
} }
} }
.tour .carousel-inner .mobile-hide, .tour .carousel-inner .mobile-hide,
.tour .carousel-inner img.mobile-hide, .tour .carousel-inner img.mobile-hide,
.tour .carousel-inner img.centered-image.mobile-hide { .tour .carousel-inner img.centered-image.mobile-hide {
@ -1542,7 +1568,7 @@ nav {
font-size: 2em; font-size: 2em;
top: 50%; top: 50%;
font-weight: 400; font-weight: 400;
opacity: 1.0; opacity: 1;
border-radius: 0; border-radius: 0;
&:hover { &:hover {
@ -1576,7 +1602,7 @@ nav {
text-indent: -999px; text-indent: -999px;
cursor: pointer; cursor: pointer;
background-color: hsl(222, 12%, 66%); background-color: hsl(222, 12%, 66%);
transition: background .1s ease; transition: background 0.1s ease;
&::before { &::before {
position: absolute; position: absolute;
@ -2078,12 +2104,21 @@ nav {
max-width: 600px; max-width: 600px;
} }
.portico-landing.apps .hero .image img[src="/static/images/landing-page/tar.gz.svg"] { .portico-landing.apps
.hero
.image
img[src="/static/images/landing-page/tar.gz.svg"] {
width: 50%; width: 50%;
} }
.portico-landing.apps .hero .image img[src="/static/images/app-screenshots/zulip-android.png"], .portico-landing.apps
.portico-landing.apps .hero .image img[src="/static/images/app-screenshots/zulip-iphone-rough.png"] { .hero
.image
img[src="/static/images/app-screenshots/zulip-android.png"],
.portico-landing.apps
.hero
.image
img[src="/static/images/app-screenshots/zulip-iphone-rough.png"] {
height: 85%; height: 85%;
} }
@ -2395,7 +2430,13 @@ nav {
transform: translateY(-110px); transform: translateY(-110px);
background: linear-gradient(90deg, hsl(0, 0%, 27%) 0%, hsl(0, 0%, 33%) 8%, hsl(0, 0%, 33%) 92%, hsl(0, 0%, 27%) 100%); background: linear-gradient(
90deg,
hsl(0, 0%, 27%) 0%,
hsl(0, 0%, 33%) 8%,
hsl(0, 0%, 33%) 92%,
hsl(0, 0%, 27%) 100%
);
} }
.portico-landing.hello .apps .screen .center-page { .portico-landing.hello .apps .screen .center-page {
@ -2462,23 +2503,43 @@ nav {
} }
.gradients .gradient.dark-blue { .gradients .gradient.dark-blue {
background: linear-gradient(10deg, hsla(196, 58%, 14%, 0) 50%, hsla(196, 58%, 14%, 0.7)); background: linear-gradient(
10deg,
hsla(196, 58%, 14%, 0) 50%,
hsla(196, 58%, 14%, 0.7)
);
} }
.gradients .gradient.green { .gradients .gradient.green {
background: linear-gradient(-25deg, hsla(156, 47%, 47%, 0) 40%, hsl(156, 47%, 47%)); background: linear-gradient(
-25deg,
hsla(156, 47%, 47%, 0) 40%,
hsl(156, 47%, 47%)
);
} }
.gradients .gradient.blue { .gradients .gradient.blue {
background: linear-gradient(25deg, hsla(196, 38%, 51%, 0) 40%, hsl(196, 38%, 51%)); background: linear-gradient(
25deg,
hsla(196, 38%, 51%, 0) 40%,
hsl(196, 38%, 51%)
);
} }
.gradients .gradient.sunburst { .gradients .gradient.sunburst {
background: linear-gradient(5deg, hsla(49, 71%, 68%, 0) 20%, hsl(49, 71%, 68%)); background: linear-gradient(
5deg,
hsla(49, 71%, 68%, 0) 20%,
hsl(49, 71%, 68%)
);
} }
.gradients .gradient.white-fade { .gradients .gradient.white-fade {
background: linear-gradient(0deg, hsl(0, 0%, 98%) 0%, hsla(0, 0%, 98%, 0) 40%); background: linear-gradient(
0deg,
hsl(0, 0%, 98%) 0%,
hsla(0, 0%, 98%, 0) 40%
);
} }
/* -- pricing css -- */ /* -- pricing css -- */
@ -2534,7 +2595,6 @@ nav {
box-shadow: 0px 0px 10px hsla(0, 0%, 0%, 0.1); box-shadow: 0px 0px 10px hsla(0, 0%, 0%, 0.1);
text-align: left; text-align: left;
background-color: hsl(0, 0%, 100%); background-color: hsl(0, 0%, 100%);
@ -2669,7 +2729,7 @@ nav {
} }
.pricing-model .pricing-container .text-content .price .price-cents { .pricing-model .pricing-container .text-content .price .price-cents {
font-size: .4em; font-size: 0.4em;
vertical-align: top; vertical-align: top;
position: relative; position: relative;
top: 6px; top: 6px;
@ -2753,7 +2813,11 @@ nav {
text-align: center; text-align: center;
} }
.pricing-overlay.pricing-model .info-box .text-content .feature-detail-box .feature { .pricing-overlay.pricing-model
.info-box
.text-content
.feature-detail-box
.feature {
display: inline-block; display: inline-block;
width: calc(33% - 21px); width: calc(33% - 21px);
height: 200px; height: 200px;
@ -2802,7 +2866,6 @@ nav {
background-color: hsl(217, 22%, 93%); background-color: hsl(217, 22%, 93%);
} }
@keyframes box-shadow-pulse { @keyframes box-shadow-pulse {
0% { 0% {
box-shadow: 0px 0px 0px hsla(170, 47%, 60%, 1); box-shadow: 0px 0px 0px hsla(170, 47%, 60%, 1);
@ -2833,7 +2896,10 @@ nav {
} }
@media (max-width: 1390px) { @media (max-width: 1390px) {
.portico-landing.plans .pricing-container .block:not(:first-child) .responsive-title { .portico-landing.plans
.pricing-container
.block:not(:first-child)
.responsive-title {
color: inherit; color: inherit;
} }
} }
@ -2867,15 +2933,18 @@ nav {
height: auto; height: auto;
} }
.portico-landing.apps .main .details-box[data-name="linux"] .image .platform, .portico-landing.apps
.main
.details-box[data-name="linux"]
.image
.platform,
.portico-landing.apps .main .details-box[data-name="linux"] .instructions { .portico-landing.apps .main .details-box[data-name="linux"] .instructions {
text-align: center; text-align: center;
width: calc(100% - 40px); width: calc(100% - 40px);
} }
} }
@media (min-width: 1296px), @media (min-width: 1296px), (max-width: 985px) and (min-width: 687px) {
(max-width: 985px) and (min-width: 687px) {
/* while there are nine, show only two rows of four. */ /* while there are nine, show only two rows of four. */
.portico-landing .testimonials .company-box > div:last-of-type { .portico-landing .testimonials .company-box > div:last-of-type {
display: none; display: none;
@ -3731,15 +3800,27 @@ nav {
want to have the gradients stay darker for longer. want to have the gradients stay darker for longer.
*/ */
.gradients .gradient.green { .gradients .gradient.green {
background: linear-gradient(-25deg, transparent 10%, hsl(156, 47%, 47%) 80%); background: linear-gradient(
-25deg,
transparent 10%,
hsl(156, 47%, 47%) 80%
);
} }
.gradients .gradient.blue { .gradients .gradient.blue {
background: linear-gradient(25deg, transparent 10%, hsl(196, 38%, 51%) 80%); background: linear-gradient(
25deg,
transparent 10%,
hsl(196, 38%, 51%) 80%
);
} }
.gradients .gradient.sunburst { .gradients .gradient.sunburst {
background: linear-gradient(5deg, transparent 20%, hsl(49, 71%, 68%) 80%); background: linear-gradient(
5deg,
transparent 20%,
hsl(49, 71%, 68%) 80%
);
} }
} }

14
static/styles/portico/markdown.scss
View File

@ -4,8 +4,6 @@
line-height: 1.5; line-height: 1.5;
overflow: auto; overflow: auto;
h1[id], h1[id],
h2[id], h2[id],
h3[id], h3[id],
@ -80,7 +78,6 @@
} }
} }
ul, ul,
ol { ol {
margin-left: 30px; margin-left: 30px;
@ -201,7 +198,6 @@
box-shadow: none; box-shadow: none;
} }
&.emoji-small { &.emoji-small {
width: 20px; width: 20px;
box-shadow: none; box-shadow: none;
@ -272,18 +268,22 @@
top: 2px; top: 2px;
&::after { &::after {
content: ''; content: "";
background: hsl(0, 0%, 80%); background: hsl(0, 0%, 80%);
height: 1.5px; height: 1.5px;
width: 6px; width: 6px;
display: block; display: block;
margin: .5px -2px; margin: 0.5px -2px;
} }
} }
&.orange { &.orange {
border: 1px solid hsl(29, 84%, 51%); border: 1px solid hsl(29, 84%, 51%);
background: linear-gradient(to bottom, hsla(0, 0%, 100%, 0.0) 50%, hsla(29, 84%, 51%, 1.0) 50%); background: linear-gradient(
to bottom,
hsla(0, 0%, 100%, 0) 50%,
hsla(29, 84%, 51%, 1) 50%
);
} }
&.green { &.green {

33
static/styles/portico/portico-signin.scss
View File

@ -147,7 +147,7 @@ html {
display: inline-block; display: inline-block;
} }
input[type=submit] { input[type="submit"] {
color: hsl(0, 0%, 67%); color: hsl(0, 0%, 67%);
border: 1px solid hsl(0, 0%, 87%); border: 1px solid hsl(0, 0%, 87%);
border-radius: 4px; border-radius: 4px;
@ -398,9 +398,9 @@ 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"] {
padding: 10px 32px 10px 12px; padding: 10px 32px 10px 12px;
margin: 25px 0 5px; margin: 25px 0 5px;
@ -427,7 +427,7 @@ html {
} }
} }
input[type=email] { input[type="email"] {
margin-bottom: 10px; margin-bottom: 10px;
} }
@ -442,9 +442,9 @@ 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(35px) translateX(14px); transform: translateY(35px) translateX(14px);
font-size: 1.2rem; font-size: 1.2rem;
font-weight: 400; font-weight: 400;
@ -455,12 +455,12 @@ 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,
input[type=text]:valid + label, input[type="text"]:valid + label,
input[type=email]:valid + label, input[type="email"]:valid + label,
input[type=password]:valid + label { input[type="password"]:valid + label {
left: 0px; left: 0px;
transform: translateY(-0px) translateX(0px); transform: translateY(-0px) translateX(0px);
pointer-events: auto; pointer-events: auto;
@ -668,7 +668,8 @@ button.login-social-button {
background-repeat: no-repeat; background-repeat: no-repeat;
background-position: 13px 50%; background-position: 13px 50%;
background-color: hsl(0, 0%, 100%); background-color: hsl(0, 0%, 100%);
box-shadow: 0px 1px 3px hsla(0, 0%, 0%, 0.3), 0px 0px 5px hsla(0, 0%, 0%, 0.1); box-shadow: 0px 1px 3px hsla(0, 0%, 0%, 0.3),
0px 0px 5px hsla(0, 0%, 0%, 0.1);
margin-left: 0px; margin-left: 0px;
margin-top: 0px; margin-top: 0px;
@ -967,7 +968,7 @@ button#register_auth_button_gitlab {
} }
.find-account-link { .find-account-link {
color: hsl(165, 100.0%, 14.7%); color: hsl(165, 100%, 14.7%);
} }
} }

26
static/styles/portico/portico.scss
View File

@ -1,6 +1,6 @@
body { body {
background-color: hsl(0, 0%, 98%); background-color: hsl(0, 0%, 98%);
font-family: 'Source Sans Pro', Helvetica, Arial, sans-serif; font-family: "Source Sans Pro", Helvetica, Arial, sans-serif;
line-height: 150%; line-height: 150%;
height: 100%; height: 100%;
font-weight: 300; font-weight: 300;
@ -167,7 +167,7 @@ html {
font-size: 1.25em; font-size: 1.25em;
line-height: 1.5; line-height: 1.5;
margin-bottom: 0px; margin-bottom: 0px;
border-bottom: 1px solid hsla(0, 0, 100%, .6); border-bottom: 1px solid hsla(0, 0, 100%, 0.6);
&:not(:first-of-type) { &:not(:first-of-type) {
margin-top: 20px; margin-top: 20px;
@ -446,7 +446,7 @@ img.screenshot {
.laptop-image { .laptop-image {
width: 787px; width: 787px;
height: 414px; height: 414px;
background-image: url('/static/images/landing-page/laptop.png'); background-image: url("/static/images/landing-page/laptop.png");
background-size: contain; background-size: contain;
} }
@ -1113,7 +1113,6 @@ input.new-organization-button {
} }
} }
.little-bullet { .little-bullet {
display: inline-block; display: inline-block;
margin-left: 5px; margin-left: 5px;
@ -1134,7 +1133,7 @@ input.new-organization-button {
&:hover { &:hover {
text-decoration: none; text-decoration: none;
background-color: hsla(0, 0%, 100%, 1.0); background-color: hsla(0, 0%, 100%, 1);
color: hsl(170, 50%, 40%); color: hsl(170, 50%, 40%);
} }
} }
@ -1176,8 +1175,8 @@ input.new-organization-button {
.input-group { .input-group {
margin: 15px 0px; margin: 15px 0px;
input[type=text], input[type="text"],
input[type=password] { input[type="password"] {
width: calc(100% - 14px); width: calc(100% - 14px);
} }
@ -1216,12 +1215,12 @@ 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;
} }
@ -1289,7 +1288,7 @@ input.new-organization-button {
} }
} }
#send_confirm input[type=text] { #send_confirm input[type="text"] {
margin-top: 20px; margin-top: 20px;
} }
@ -1306,7 +1305,7 @@ input.new-organization-button {
min-height: calc(100vh - 290px); min-height: calc(100vh - 290px);
height: 100%; height: 100%;
background-color: hsl(163, 42%, 85%); background-color: hsl(163, 42%, 85%);
font-family: 'Source Sans Pro', Helvetica, Arial, sans-serif; font-family: "Source Sans Pro", Helvetica, Arial, sans-serif;
} }
.error_page .container { .error_page .container {
@ -1601,7 +1600,6 @@ input.new-organization-button {
margin-left: auto; margin-left: auto;
} }
.inline-block { .inline-block {
display: inline-block; display: inline-block;
vertical-align: top; vertical-align: top;
@ -1656,7 +1654,7 @@ input.new-organization-button {
} }
.documentation-footer { .documentation-footer {
font-size: .85rem; font-size: 0.85rem;
opacity: 0.8; opacity: 0.8;
} }

12
static/styles/portico/stats.scss
View File

@ -1,5 +1,5 @@
body { body {
font-family: 'Source Sans Pro', 'Helvetica Neue', sans-serif !important; font-family: "Source Sans Pro", "Helvetica Neue", sans-serif !important;
background-color: hsl(0, 0%, 98%); background-color: hsl(0, 0%, 98%);
} }
@ -113,7 +113,7 @@ p {
} }
.button { .button {
font-family: 'Source Sans Pro', 'Helvetica Neue', sans-serif !important; font-family: "Source Sans Pro", "Helvetica Neue", sans-serif !important;
border: none; border: none;
border-radius: 4px; border-radius: 4px;
outline: none; outline: none;
@ -176,7 +176,7 @@ p {
width: 750px; width: 750px;
position: relative; position: relative;
&[last_value_is_partial='true'] .points path:last-of-type { &[last_value_is_partial="true"] .points path:last-of-type {
opacity: 0.5; opacity: 0.5;
} }
} }
@ -204,7 +204,7 @@ p {
} }
.spinner::before { .spinner::before {
content: ''; content: "";
box-sizing: border-box; box-sizing: border-box;
position: absolute; position: absolute;
top: 50%; top: 50%;
@ -227,7 +227,9 @@ p {
@media (min-width: 1680px) { @media (min-width: 1680px) {
.center-charts { .center-charts {
width: calc(816px * 2); /* 790px + 4px for borders + 2px for il-block + 20px margins */ width: calc(
816px * 2
); /* 790px + 4px for borders + 2px for il-block + 20px margins */
.left, .left,
.right { .right {

2
static/styles/reactions.scss
View File

@ -88,7 +88,7 @@
border: 1px solid hsl(200, 100%, 40%); border: 1px solid hsl(200, 100%, 40%);
background-color: hsl(195, 50%, 95%); background-color: hsl(195, 50%, 95%);
cursor: pointer; cursor: pointer;
opacity: 1.0; opacity: 1;
color: hsl(200, 100%, 40%); color: hsl(200, 100%, 40%);
} }

2
static/styles/recent_topics.scss
View File

@ -156,7 +156,7 @@
line-height: 16px; line-height: 16px;
font-size: 12px; font-size: 12px;
font-weight: 400; font-weight: 400;
letter-spacing: .6px; letter-spacing: 0.6px;
border-radius: 4px; border-radius: 4px;
background-color: hsl(0, 0%, 89%); background-color: hsl(0, 0%, 89%);
padding: 0 4px; padding: 0 4px;

25
static/styles/rendered_markdown.scss
View File

@ -125,7 +125,11 @@
margin-right: 2px; margin-right: 2px;
margin-left: 2px; margin-left: 2px;
white-space: nowrap; white-space: nowrap;
background: linear-gradient(to bottom, hsla(0, 0%, 0%, 0.1) 0%, hsla(0, 0%, 0%, 0.0) 100%); background: linear-gradient(
to bottom,
hsla(0, 0%, 0%, 0.1) 0%,
hsla(0, 0%, 0%, 0) 100%
);
display: inline-block; display: inline-block;
margin-bottom: 1px; margin-bottom: 1px;
} }
@ -174,13 +178,15 @@
.spoiler-content { .spoiler-content {
overflow: hidden; overflow: hidden;
border-top: hsl(0, 0%, 50%) 0px solid; border-top: hsl(0, 0%, 50%) 0px solid;
transition: height 0.4s ease-in-out, border-top 0.4s step-end, padding 0.4s step-end; transition: height 0.4s ease-in-out, border-top 0.4s step-end,
padding 0.4s step-end;
padding: 0px; padding: 0px;
height: 0px; height: 0px;
&.spoiler-content-open { &.spoiler-content-open {
border-top: hsl(0, 0%, 50%) 1px solid; border-top: hsl(0, 0%, 50%) 1px solid;
transition: height 0.4s ease-in-out, border-top 0.4s step-start, padding 0.4s step-start; transition: height 0.4s ease-in-out, border-top 0.4s step-start,
padding 0.4s step-start;
padding: 5px; padding: 5px;
height: auto; height: auto;
} }
@ -198,7 +204,6 @@
} }
} }
.spoiler-arrow { .spoiler-arrow {
float: right; float: right;
width: 13px; width: 13px;
@ -214,7 +219,7 @@
&::before, &::before,
&::after { &::after {
position: absolute; position: absolute;
content: ''; content: "";
display: inline-block; display: inline-block;
width: 12px; width: 12px;
height: 3px; height: 3px;
@ -292,7 +297,7 @@
.twitter-tweet { .twitter-tweet {
border: 1px solid hsl(0, 0%, 87%); border: 1px solid hsl(0, 0%, 87%);
padding: .5em .75em; padding: 0.5em 0.75em;
margin-bottom: 0.25em; margin-bottom: 0.25em;
word-break: break-word; word-break: break-word;
min-height: 48px; min-height: 48px;
@ -302,7 +307,7 @@
float: left; float: left;
width: 48px; width: 48px;
height: 48px; height: 48px;
margin-right: .75em; margin-right: 0.75em;
} }
.message_inline_ref { .message_inline_ref {
@ -422,7 +427,11 @@
height: 10%; height: 10%;
bottom: 0; bottom: 0;
background: linear-gradient(0deg, hsl(0, 0%, 100%), transparent 100%); background: linear-gradient(
0deg,
hsl(0, 0%, 100%),
transparent 100%
);
} }
} }

4
static/styles/right-sidebar.scss
View File

@ -31,7 +31,7 @@
position: absolute; position: absolute;
top: 1px; top: 1px;
right: 0px; right: 0px;
font-size: 1.0em; font-size: 1em;
display: none; display: none;
text-align: center; text-align: center;
padding: 0px 6px 0px 6px; padding: 0px 6px 0px 6px;
@ -180,7 +180,7 @@
#user_filter_icon { #user_filter_icon {
font-size: 13px; font-size: 13px;
opacity: 0.50; opacity: 0.5;
margin-right: 5px; margin-right: 5px;
} }
} }

26
static/styles/settings.scss
View File

@ -300,7 +300,7 @@ td .button {
} }
} }
input[type=text].search { input[type="text"].search {
float: right; float: right;
margin: 2px 5px 2px 0px; margin: 2px 5px 2px 0px;
padding: 2px 5px; padding: 2px 5px;
@ -370,7 +370,7 @@ td .button {
&:hover { &:hover {
outline: none; outline: none;
box-shadow: 0px 0px 4px hsla(199, 79%, 56%, 1.0); box-shadow: 0px 0px 4px hsla(199, 79%, 56%, 1);
} }
div, div,
@ -393,7 +393,7 @@ td .button {
color: hsl(0, 0%, 67%); color: hsl(0, 0%, 67%);
} }
[contenteditable=true] { [contenteditable="true"] {
outline: none; outline: none;
} }
} }
@ -426,7 +426,7 @@ td .button {
margin: 0px; margin: 0px;
} }
input[type=checkbox] { input[type="checkbox"] {
+ .inline-block { + .inline-block {
margin-left: 10px; margin-left: 10px;
} }
@ -730,7 +730,7 @@ input[type=checkbox] {
.add-new-emoji-box, .add-new-emoji-box,
.add-new-user-group-box, .add-new-user-group-box,
.add-new-default-stream-box { .add-new-default-stream-box {
input[type=text] { input[type="text"] {
padding: 6px; padding: 6px;
} }
} }
@ -1043,7 +1043,7 @@ input[type=checkbox] {
border-bottom: none; border-bottom: none;
} }
input[type=radio] { input[type="radio"] {
position: relative; position: relative;
top: -2px; top: -2px;
margin: 0px 5px 0px 0px; margin: 0px 5px 0px 0px;
@ -1220,11 +1220,11 @@ input[type=checkbox] {
visibility: visible; visibility: visible;
} }
input[type=text] { input[type="text"] {
width: calc(100% - 10px - 4px); width: calc(100% - 10px - 4px);
} }
input[type=submit], input[type="submit"],
button { button {
border-radius: 4px; border-radius: 4px;
outline: none; outline: none;
@ -1583,7 +1583,7 @@ body:not(.night-mode) #settings_page .custom_user_field .datepicker {
} }
} }
.dropdown-search > input[type=text] { .dropdown-search > input[type="text"] {
margin: 9px; margin: 9px;
} }
@ -1645,7 +1645,7 @@ body:not(.night-mode) #settings_page .custom_user_field .datepicker {
#payload_url_inputbox, #payload_url_inputbox,
#service_name_list { #service_name_list {
input[type=text] { input[type="text"] {
width: 340px; width: 340px;
} }
} }
@ -1662,7 +1662,8 @@ body:not(.night-mode) #settings_page .custom_user_field .datepicker {
@supports (-moz-appearance: none) { @supports (-moz-appearance: none) {
#settings_page select { #settings_page select {
-moz-appearance: none; -moz-appearance: none;
background: hsl(0, 0%, 100%) url('../images/dropdown.png') right / 20px no-repeat; background: hsl(0, 0%, 100%) url("../images/dropdown.png") right / 20px
no-repeat;
padding-right: 20px; padding-right: 20px;
} }
} }
@ -1703,7 +1704,8 @@ body:not(.night-mode) #settings_page .custom_user_field .datepicker {
outline: 0; outline: 0;
outline: 1px dotted \9; outline: 1px dotted \9;
box-shadow: inset 0 1px 1px hsla(0, 0%, 0%, 0.075), 0 0 8px hsla(206, 80%, 62%, 0.6); box-shadow: inset 0 1px 1px hsla(0, 0%, 0%, 0.075),
0 0 8px hsla(206, 80%, 62%, 0.6);
} }
} }

20
static/styles/subscriptions.scss
View File

@ -117,7 +117,7 @@
.sp-preview { .sp-preview {
width: 20px; width: 20px;
border: none; border: none;
box-shadow: 0px 0px 1px hsla(0, 0%, 0%, 1.0); box-shadow: 0px 0px 1px hsla(0, 0%, 0%, 1);
} }
.sp-replacer { .sp-replacer {
@ -397,7 +397,9 @@ form#add_new_subscription {
} }
.subscriptions-container .subscriptions-header.slide-left .fa-chevron-left, .subscriptions-container .subscriptions-header.slide-left .fa-chevron-left,
#settings_overlay_container .settings-header.mobile.slide-left .fa-chevron-left { #settings_overlay_container
.settings-header.mobile.slide-left
.fa-chevron-left {
transform: translate(-0px, 0px); transform: translate(-0px, 0px);
opacity: 1; opacity: 1;
} }
@ -529,7 +531,7 @@ form#add_new_subscription {
} }
} }
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;
@ -779,7 +781,9 @@ form#add_new_subscription {
} }
} }
#subscription_overlay .stream-description .stream-description-editable:empty::after, #subscription_overlay
.stream-description
.stream-description-editable:empty::after,
.stream-row .sub-info-box .description:empty::after { .stream-row .sub-info-box .description:empty::after {
content: attr(data-no-description); content: attr(data-no-description);
font-style: italic; font-style: italic;
@ -915,7 +919,7 @@ form#add_new_subscription {
min-width: 10px; min-width: 10px;
max-width: 100%; max-width: 100%;
&[contenteditable=true] { &[contenteditable="true"] {
display: inline-block; display: inline-block;
vertical-align: top; vertical-align: top;
color: hsl(170, 48%, 54%); color: hsl(170, 48%, 54%);
@ -1035,7 +1039,7 @@ ul.grey-box {
padding: 5px 0px; padding: 5px 0px;
} }
input[type=checkbox] { input[type="checkbox"] {
#stream_privacy_modal & { #stream_privacy_modal & {
margin-top: 4px; margin-top: 4px;
} }
@ -1059,14 +1063,14 @@ ul.grey-box {
} }
} }
input[type=radio] { input[type="radio"] {
#stream_privacy_modal &, #stream_privacy_modal &,
#subscription_overlay & { #subscription_overlay & {
margin-right: 5px; margin-right: 5px;
} }
} }
input[type=text] { input[type="text"] {
width: 5ch; width: 5ch;
text-align: right; text-align: right;
} }

8
static/styles/user_circles.scss
View File

@ -22,7 +22,11 @@
.user_circle_orange { .user_circle_orange {
border-color: hsl(29, 84%, 51%); border-color: hsl(29, 84%, 51%);
background-color: hsl(29, 84%, 51%); background-color: hsl(29, 84%, 51%);
background: linear-gradient(to bottom, hsla(0, 0%, 100%, 0.0) 50%, hsla(29, 84%, 51%, 1.0) 50%); background: linear-gradient(
to bottom,
hsla(0, 0%, 100%, 0) 50%,
hsla(29, 84%, 51%, 1) 50%
);
} }
.user_circle_empty { .user_circle_empty {
@ -34,7 +38,7 @@
border-color: hsl(0, 0%, 50%); border-color: hsl(0, 0%, 50%);
&::after { &::after {
content: ''; content: "";
background: hsl(0, 0%, 50%); background: hsl(0, 0%, 50%);
height: 1.5px; // 1px is too thin, 2px is too thick height: 1.5px; // 1px is too thin, 2px is too thick
width: 6px; width: 6px;

4
static/styles/widgets.scss
View File

@ -133,7 +133,7 @@ button {
margin-left: 5px; margin-left: 5px;
&:hover { &:hover {
opacity: 1.0; opacity: 1;
} }
} }
@ -142,5 +142,5 @@ button {
} }
.current-user-vote { .current-user-vote {
background-color: hsla(156, 10%, 90%, .9); background-color: hsla(156, 10%, 90%, 0.9);
} }

58
static/styles/zulip.scss
View File

@ -33,7 +33,8 @@ html {
} }
body { body {
font-family: 'Source Sans Pro', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-family: "Source Sans Pro", "Helvetica Neue", Helvetica, Arial,
sans-serif;
} }
/* Common background color */ /* Common background color */
@ -47,7 +48,8 @@ input,
button, button,
select, select,
textarea { textarea {
font-family: 'Source Sans Pro', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-family: "Source Sans Pro", "Helvetica Neue", Helvetica, Arial,
sans-serif;
line-height: normal; line-height: normal;
} }
@ -223,7 +225,7 @@ p.n-margin {
} }
.message_edit_notice_hover:hover { .message_edit_notice_hover:hover {
opacity: 1.0; opacity: 1;
} }
.header { .header {
@ -369,7 +371,7 @@ p.n-margin {
textarea, textarea,
input { input {
font-family: 'Source Sans Pro', Helvetica, Arial, sans-serif; font-family: "Source Sans Pro", Helvetica, Arial, sans-serif;
} }
/* Override Bootstrap's fixed sizes for various elements */ /* Override Bootstrap's fixed sizes for various elements */
@ -524,7 +526,7 @@ strong {
cursor: pointer; cursor: pointer;
&:hover { &:hover {
opacity: 1.0; opacity: 1;
} }
} }
@ -834,9 +836,9 @@ td.pointer {
font-weight: normal; font-weight: normal;
height: 17px; height: 17px;
line-height: 17px; line-height: 17px;
border-top-color: hsla(0, 0%, 0%, 0.0); border-top-color: hsla(0, 0%, 0%, 0);
border-right-color: hsla(0, 0%, 0%, 0.0); border-right-color: hsla(0, 0%, 0%, 0);
border-bottom-color: hsla(0, 0%, 0%, 0.0); border-bottom-color: hsla(0, 0%, 0%, 0);
background-color: hsl(0, 0%, 88%); background-color: hsl(0, 0%, 88%);
border-left-color: hsl(0, 0%, 88%); border-left-color: hsl(0, 0%, 88%);
border-width: 0px; border-width: 0px;
@ -865,7 +867,7 @@ td.pointer {
border-width: 11px 0 11px 5px; border-width: 11px 0 11px 5px;
border-color: inherit; border-color: inherit;
z-index: 2; z-index: 2;
transform: scale(.9999); transform: scale(0.9999);
} }
&::before { &::before {
@ -879,9 +881,10 @@ td.pointer {
margin-top: -14px; margin-top: -14px;
border-style: solid; border-style: solid;
border-width: 14px 0 14px 6px; border-width: 14px 0 14px 6px;
border-color: hsla(0, 0%, 0%, 0.0) hsla(0, 0%, 0%, 0.0) hsla(0, 0%, 0%, 0.0) transparent; border-color: hsla(0, 0%, 0%, 0) hsla(0, 0%, 0%, 0) hsla(0, 0%, 0%, 0)
transparent;
z-index: 1; z-index: 1;
transform: scale(.9999); transform: scale(0.9999);
} }
} }
@ -928,8 +931,7 @@ td.pointer {
&.last_message { &.last_message {
.message_header { .message_header {
border-bottom-right-radius: 3px; border-bottom-right-radius: 3px;
box-shadow: box-shadow: inset 0px 2px 1px -2px hsl(0, 0%, 20%),
inset 0px 2px 1px -2px hsl(0, 0%, 20%),
inset -2px 0px 1px -2px hsl(0, 0%, 20%), inset -2px 0px 1px -2px hsl(0, 0%, 20%),
inset 0px -2px 1px -2px hsl(0, 0%, 20%); inset 0px -2px 1px -2px hsl(0, 0%, 20%);
} }
@ -1026,8 +1028,7 @@ td.pointer {
.messagebox, .messagebox,
.date_row { .date_row {
background-color: hsla(192, 19%, 75%, 0.2); background-color: hsla(192, 19%, 75%, 0.2);
box-shadow: box-shadow: inset 2px 0px 0px 0px hsl(0, 0%, 27%),
inset 2px 0px 0px 0px hsl(0, 0%, 27%),
-1px 0px 0px 0px hsl(0, 0%, 27%); -1px 0px 0px 0px hsl(0, 0%, 27%);
} }
} }
@ -1094,8 +1095,7 @@ td.pointer {
} }
.messagebox-content { .messagebox-content {
box-shadow: box-shadow: inset 0px 0px 0px 2px hsl(215, 47%, 50%),
inset 0px 0px 0px 2px hsl(215, 47%, 50%),
-1px -1px 0px 0px hsl(215, 47%, 50%), -1px -1px 0px 0px hsl(215, 47%, 50%),
1px 1px 0px 0px hsl(215, 47%, 50%), 1px 1px 0px 0px hsl(215, 47%, 50%),
-1px 1px 0px 0px hsl(215, 47%, 50%), -1px 1px 0px 0px hsl(215, 47%, 50%),
@ -1149,7 +1149,7 @@ td.pointer {
} }
.always_visible_topic_edit { .always_visible_topic_edit {
opacity: .7; opacity: 0.7;
} }
.on_hover_topic_edit, .on_hover_topic_edit,
@ -1159,7 +1159,7 @@ td.pointer {
.on_hover_topic_read { .on_hover_topic_read {
&:hover { &:hover {
cursor: pointer; cursor: pointer;
opacity: 1.0; opacity: 1;
} }
} }
@ -1232,8 +1232,8 @@ div.message_table {
.message_row { .message_row {
position: relative; position: relative;
border-left: 1px solid hsla(0, 0%, 0%, 0.10); border-left: 1px solid hsla(0, 0%, 0%, 0.1);
border-right: 1px solid hsla(0, 0%, 0%, 0.10); border-right: 1px solid hsla(0, 0%, 0%, 0.1);
&.selected_message { &.selected_message {
z-index: 2; z-index: 2;
@ -1360,7 +1360,6 @@ div.focused_table {
outline: none; outline: none;
} }
.message_edit_topic_propagate { .message_edit_topic_propagate {
display: inline-block; display: inline-block;
width: 300px; width: 300px;
@ -1688,7 +1687,7 @@ div.focused_table {
padding-right: 20px; padding-right: 20px;
border: none; border: none;
border-radius: 0px; border-radius: 0px;
font-family: 'Source Sans Pro'; font-family: "Source Sans Pro";
font-weight: 300; font-weight: 300;
line-height: $header_height; line-height: $header_height;
} }
@ -1898,7 +1897,7 @@ div.focused_table {
border-right: 7px solid transparent; border-right: 7px solid transparent;
border-bottom: 7px solid hsl(0, 0%, 67%); border-bottom: 7px solid hsl(0, 0%, 67%);
border-left: 7px solid transparent; border-left: 7px solid transparent;
content: ''; content: "";
z-index: 10; z-index: 10;
} }
} }
@ -2057,7 +2056,7 @@ div.floating_recipient {
.checkbox { .checkbox {
display: block; display: block;
input[type=checkbox] { input[type="checkbox"] {
margin: 5px 0px; margin: 5px 0px;
float: none; float: none;
} }
@ -2072,7 +2071,7 @@ div.floating_recipient {
display: block; display: block;
} }
input[type=checkbox] { input[type="checkbox"] {
margin: 5px 0px; margin: 5px 0px;
float: none; float: none;
} }
@ -2427,7 +2426,7 @@ div.topic_edit_spinner .loading_indicator_spinner {
.deactivated_user .deactivated-user-icon { .deactivated_user .deactivated-user-icon {
color: inherit; color: inherit;
margin-left: 2px; margin-left: 2px;
font-size: .9em; font-size: 0.9em;
} }
.no-drag { .no-drag {
@ -2530,7 +2529,7 @@ select.inline_select_topic_edit {
top: 0px; top: 0px;
.right-sidebar { .right-sidebar {
background-color: hsla(0, 0%, 100%, 1.0); background-color: hsla(0, 0%, 100%, 1);
box-shadow: 0px -2px 3px 0px hsla(0, 0%, 0%, 0.1); box-shadow: 0px -2px 3px 0px hsla(0, 0%, 0%, 0.1);
border-left: 1px solid hsl(0, 0%, 87%); border-left: 1px solid hsl(0, 0%, 87%);
@ -2558,7 +2557,6 @@ select.inline_select_topic_edit {
margin-right: 41px; margin-right: 41px;
} }
.nav .dropdown-menu { .nav .dropdown-menu {
min-width: 180px; min-width: 180px;
box-shadow: 0px 0px 5px hsla(0, 0%, 0%, 0.2); box-shadow: 0px 0px 5px hsla(0, 0%, 0%, 0.2);
@ -2614,7 +2612,7 @@ select.inline_select_topic_edit {
top: 0px; top: 0px;
.left-sidebar { .left-sidebar {
background-color: hsla(0, 0%, 100%, 1.0); background-color: hsla(0, 0%, 100%, 1);
box-shadow: 0px 2px 3px 0px hsla(0, 0%, 0%, 0.1); box-shadow: 0px 2px 3px 0px hsla(0, 0%, 0%, 0.1);
border-right: 1px solid hsl(0, 0%, 87%); border-right: 1px solid hsl(0, 0%, 87%);

46
stylelint.config.js
View File

@ -1,66 +1,22 @@
"use strict"; "use strict";
module.exports = { module.exports = {
extends: ["stylelint-config-prettier"],
rules: { rules: {
// Stylistic rules for CSS. // Stylistic rules for CSS.
"function-comma-space-after": "always",
"function-comma-space-before": "never",
"function-max-empty-lines": 0,
"function-whitespace-after": "always", "function-whitespace-after": "always",
"value-keyword-case": "lower", "value-keyword-case": "lower",
"value-list-comma-newline-after": "always-multi-line",
"value-list-comma-space-after": "always-single-line",
"value-list-comma-space-before": "never",
"value-list-max-empty-lines": 0,
"unit-case": "lower",
"property-case": "lower",
"color-hex-case": "lower",
"declaration-bang-space-before": "always",
"declaration-colon-newline-after": "always-multi-line",
"declaration-colon-space-after": "always-single-line",
"declaration-colon-space-before": "never",
"declaration-block-semicolon-newline-after": "always",
"declaration-block-semicolon-space-before": "never",
"declaration-block-trailing-semicolon": "always",
"block-closing-brace-empty-line-before": "never",
"block-closing-brace-newline-after": "always",
"block-closing-brace-newline-before": "always",
"block-opening-brace-newline-after": "always",
"block-opening-brace-space-before": "always",
"selector-attribute-brackets-space-inside": "never",
"selector-attribute-operator-space-after": "never", "selector-attribute-operator-space-after": "never",
"selector-attribute-operator-space-before": "never", "selector-attribute-operator-space-before": "never",
"selector-combinator-space-after": "always",
"selector-combinator-space-before": "always",
"selector-descendant-combinator-no-non-space": true,
"selector-pseudo-class-parentheses-space-inside": "never",
"selector-pseudo-element-case": "lower",
"selector-pseudo-element-colon-notation": "double", "selector-pseudo-element-colon-notation": "double",
"selector-type-case": "lower", "selector-type-case": "lower",
"selector-list-comma-newline-after": "always",
"selector-list-comma-space-before": "never",
"media-feature-colon-space-after": "always",
"media-feature-colon-space-before": "never",
"media-feature-name-case": "lower",
"media-feature-parentheses-space-inside": "never",
"media-feature-range-operator-space-after": "always", "media-feature-range-operator-space-after": "always",
"media-feature-range-operator-space-before": "always", "media-feature-range-operator-space-before": "always",
"media-query-list-comma-newline-after": "always",
"media-query-list-comma-space-before": "never",
"at-rule-name-case": "lower",
"at-rule-name-space-after": "always",
"at-rule-semicolon-newline-after": "always",
"at-rule-semicolon-space-before": "never",
"comment-whitespace-inside": "always", "comment-whitespace-inside": "always",
indentation: 4,
// Limit language features // Limit language features
"color-no-hex": true, "color-no-hex": true,

34
templates/zerver/emails/email.css
View File

@ -178,7 +178,7 @@ a.button:hover {
#private-messages { #private-messages {
width: 600px; width: 600px;
font-size: 12px; font-size: 12px;
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
} }
.recipient_block { .recipient_block {
@ -214,7 +214,7 @@ a.button:hover {
.messages { .messages {
width: 600px; width: 600px;
font-size: 12px; font-size: 12px;
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
overflow-y: auto; overflow-y: auto;
} }
@ -304,52 +304,52 @@ a.button:hover {
} }
@media only screen and (max-width: 620px) { @media only screen and (max-width: 620px) {
table[class=body] h1 { table[class="body"] h1 {
font-size: 28px !important; font-size: 28px !important;
margin-bottom: 10px !important; margin-bottom: 10px !important;
} }
table[class=body] p, table[class="body"] p,
table[class=body] ul, table[class="body"] ul,
table[class=body] ol, table[class="body"] ol,
table[class=body] td, table[class="body"] td,
table[class=body] span, table[class="body"] span,
table[class=body] a { table[class="body"] a {
font-size: 16px !important; font-size: 16px !important;
} }
table[class=body] .wrapper { table[class="body"] .wrapper {
padding: 0px 10px 10px 10px; padding: 0px 10px 10px 10px;
} }
table[class=body] .article { table[class="body"] .article {
padding: 10px !important; padding: 10px !important;
} }
table[class=body] .content { table[class="body"] .content {
padding: 0 !important; padding: 0 !important;
} }
table[class=body] .container { table[class="body"] .container {
padding: 0 !important; padding: 0 !important;
width: 100% !important; width: 100% !important;
} }
table[class=body] .main { table[class="body"] .main {
border-left-width: 0 !important; border-left-width: 0 !important;
border-radius: 0 !important; border-radius: 0 !important;
border-right-width: 0 !important; border-right-width: 0 !important;
} }
table[class=body] .btn table { table[class="body"] .btn table {
width: 100% !important; width: 100% !important;
} }
table[class=body] .btn a { table[class="body"] .btn a {
width: 100% !important; width: 100% !important;
} }
table[class=body] .img-responsive { table[class="body"] .img-responsive {
height: auto !important; height: auto !important;
max-width: 100% !important; max-width: 100% !important;
width: auto !important; width: auto !important;

4
tools/lint
View File

@ -92,9 +92,9 @@ def run() -> None:
description="Sorts Python import statements", description="Sorts Python import statements",
check_arg=['--check-only', '--diff']) check_arg=['--check-only', '--diff'])
linter_config.external_linter('prettier', ['node_modules/.bin/prettier', '--check'], linter_config.external_linter('prettier', ['node_modules/.bin/prettier', '--check'],
['js', 'json', 'ts', 'yaml', 'yml'], ['css', 'js', 'json', 'scss', 'ts', 'yaml', 'yml'],
fix_arg=['--write'], fix_arg=['--write'],
description="Formats JavaScript and YAML", description="Formats CSS, JavaScript, YAML",
# https://github.com/prettier/prettier/pull/8703 # https://github.com/prettier/prettier/pull/8703
suppress_line=lambda line: line in ["Checking formatting...\n", "All matched files use Prettier code style!\n"]) suppress_line=lambda line: line in ["Checking formatting...\n", "All matched files use Prettier code style!\n"])

2
version.py
View File

@ -44,4 +44,4 @@ API_FEATURE_LEVEL = 27
# historical commits sharing the same major version, in which case a # historical commits sharing the same major version, in which case a
# minor version bump suffices. # minor version bump suffices.
PROVISION_VERSION = '95.0' PROVISION_VERSION = '95.1'

5
yarn.lock
View File

@ -11340,6 +11340,11 @@ stylehacks@^4.0.0:
postcss "^7.0.0" postcss "^7.0.0"
postcss-selector-parser "^3.0.0" postcss-selector-parser "^3.0.0"
stylelint-config-prettier@^8.0.2:
version "8.0.2"
resolved "https://registry.yarnpkg.com/stylelint-config-prettier/-/stylelint-config-prettier-8.0.2.tgz#da9de33da4c56893cbe7e26df239a7374045e14e"
integrity sha512-TN1l93iVTXpF9NJstlvP7nOu9zY2k+mN0NSFQ/VEGz15ZIP9ohdDZTtCWHs5LjctAhSAzaILULGbgiM0ItId3A==
stylelint@^13.0.0: stylelint@^13.0.0:
version "13.6.1" version "13.6.1"
resolved "https://registry.yarnpkg.com/stylelint/-/stylelint-13.6.1.tgz#cc1d76338116d55e8ff2be94c4a4386c1239b878" resolved "https://registry.yarnpkg.com/stylelint/-/stylelint-13.6.1.tgz#cc1d76338116d55e8ff2be94c4a4386c1239b878"