From c6ed5c81dedcf45a6942eb706b85866244801f9c Mon Sep 17 00:00:00 2001 From: Anders Kaseorg Date: Tue, 4 Aug 2020 21:58:56 +0000 Subject: [PATCH] styles: Format CSS with Prettier. Signed-off-by: Anders Kaseorg --- docs/contributing/code-style.md | 6 + docs/testing/linters.md | 2 +- package.json | 1 + static/styles/alerts.scss | 3 +- static/styles/app_components.scss | 12 +- static/styles/components.scss | 6 +- static/styles/compose.scss | 9 +- static/styles/hotspots.scss | 2 +- static/styles/image_upload_widget.scss | 6 +- static/styles/input_pill.scss | 2 +- static/styles/left-sidebar.scss | 6 +- static/styles/lightbox.scss | 7 +- static/styles/message_edit_history.scss | 2 - static/styles/night_mode.scss | 40 +++-- static/styles/popovers.scss | 4 +- static/styles/portico/archive.scss | 3 +- static/styles/portico/billing.scss | 10 +- static/styles/portico/integrations.scss | 18 +-- .../styles/portico/integrations_dev_panel.css | 3 +- static/styles/portico/landing-page.scss | 145 ++++++++++++++---- static/styles/portico/markdown.scss | 14 +- static/styles/portico/portico-signin.scss | 33 ++-- static/styles/portico/portico.scss | 26 ++-- static/styles/portico/stats.scss | 12 +- static/styles/reactions.scss | 2 +- static/styles/recent_topics.scss | 2 +- static/styles/rendered_markdown.scss | 25 ++- static/styles/right-sidebar.scss | 4 +- static/styles/settings.scss | 26 ++-- static/styles/subscriptions.scss | 20 ++- static/styles/user_circles.scss | 8 +- static/styles/widgets.scss | 4 +- static/styles/zulip.scss | 58 ++++--- stylelint.config.js | 46 +----- templates/zerver/emails/email.css | 34 ++-- tools/lint | 4 +- version.py | 2 +- yarn.lock | 5 + 38 files changed, 348 insertions(+), 264 deletions(-) diff --git a/docs/contributing/code-style.md b/docs/contributing/code-style.md index b80ca81d25..5f612d11de 100644 --- a/docs/contributing/code-style.md +++ b/docs/contributing/code-style.md @@ -289,6 +289,12 @@ call a helper function instead. ### 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 dynamic. Instead, define logical classes and put your styles in external CSS files such as `zulip.css`. diff --git a/docs/testing/linters.md b/docs/testing/linters.md index 857001faa4..f4fc6c1408 100644 --- a/docs/testing/linters.md +++ b/docs/testing/linters.md @@ -101,7 +101,7 @@ following checks: - Check Python code with pyflakes. - 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 non-Python code for custom Zulip rules. - Check puppet manifests with the puppet validator. diff --git a/package.json b/package.json index b7724154bf..efebd0a913 100644 --- a/package.json +++ b/package.json @@ -102,6 +102,7 @@ "puppeteer": "^5.2.0", "source-map": "^0.6.1", "stylelint": "^13.0.0", + "stylelint-config-prettier": "^8.0.2", "svgo": "^1.2.2", "swagger-parser": "^10.0.0", "typescript": "^3.5.1", diff --git a/static/styles/alerts.scss b/static/styles/alerts.scss index e95069e81a..3592c21851 100644 --- a/static/styles/alerts.scss +++ b/static/styles/alerts.scss @@ -124,8 +124,7 @@ $alert-error-red: hsl(0, 80%, 40%); color: hsl(0, 7%, 15%); background-color: hsl(0, 7%, 98%); background-color: hsl(0, 7%, 98%); - box-shadow: - inset 0px 11px 10px -10px hsl(0, 7%, 70%), + box-shadow: inset 0px 11px 10px -10px hsl(0, 7%, 70%), inset 0px -11px 10px -10px hsl(0, 7%, 70%); margin-top: 1em; diff --git a/static/styles/app_components.scss b/static/styles/app_components.scss index 23fb0fda0e..86888e44d0 100644 --- a/static/styles/app_components.scss +++ b/static/styles/app_components.scss @@ -315,11 +315,11 @@ .input-append { font-size: 90%; - letter-spacing: -.3em; + letter-spacing: -0.3em; } -.input-append input[type=text], -.new-style input[type=text] { +.input-append input[type="text"], +.new-style input[type="text"] { border-radius: 5px; box-shadow: none; margin: 0px; @@ -401,7 +401,9 @@ .stream-selection-header-colorblock { /* 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; border-radius: 3px 0px 0px 3px; border-bottom: 0px; @@ -448,7 +450,7 @@ &:hover { color: hsl(0, 0%, 20%); 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; } diff --git a/static/styles/components.scss b/static/styles/components.scss index 8839856e00..2724c99464 100644 --- a/static/styles/components.scss +++ b/static/styles/components.scss @@ -8,7 +8,7 @@ position: relative; vertical-align: top; - input[type=checkbox] { + input[type="checkbox"] { position: absolute; clip: rect(0, 0, 0, 0); @@ -30,7 +30,7 @@ border: 1px solid hsla(0, 0%, 0%, 0.6); border-radius: 4px; - filter: brightness(0.80); + filter: brightness(0.8); cursor: pointer; } @@ -48,7 +48,7 @@ } &:disabled ~ span { - opacity: 0.50; + opacity: 0.5; cursor: default; } } diff --git a/static/styles/compose.scss b/static/styles/compose.scss index 139f7d966a..d94f590274 100644 --- a/static/styles/compose.scss +++ b/static/styles/compose.scss @@ -258,7 +258,7 @@ div[id^="message-edit-send-status"], font-weight: bold; color: hsl(0, 0%, 0%); text-shadow: 0 1px 0 hsl(0, 0%, 100%); - opacity: .2; + opacity: 0.2; filter: alpha(opacity=20); float: right; } @@ -266,7 +266,7 @@ div[id^="message-edit-send-status"], .send-status-close:hover, .compose-send-status-close:hover { cursor: pointer; - opacity: .4; + opacity: 0.4; filter: alpha(opacity=40); } @@ -286,7 +286,7 @@ div[id^="message-edit-send-status"], font-weight: bold; color: hsl(0, 0%, 0%); text-shadow: 0 1px 0 hsl(0, 0%, 100%); - opacity: .2; + opacity: 0.2; filter: alpha(opacity=20); } } @@ -375,7 +375,8 @@ input.recipient_box { color: hsl(0, 0%, 100%); &: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%); } } } diff --git a/static/styles/hotspots.scss b/static/styles/hotspots.scss index ac880bb08e..7a7dad56eb 100644 --- a/static/styles/hotspots.scss +++ b/static/styles/hotspots.scss @@ -88,7 +88,7 @@ &::after, &::before { border: solid transparent; - content: ''; + content: ""; height: 0; width: 0; position: absolute; diff --git a/static/styles/image_upload_widget.scss b/static/styles/image_upload_widget.scss index cc9c74d27e..0b5e32fe31 100644 --- a/static/styles/image_upload_widget.scss +++ b/static/styles/image_upload_widget.scss @@ -4,7 +4,6 @@ border-radius: 5px; box-shadow: 0px 0px 10px hsla(0, 0%, 0%, 0.1); - transition: all 0.3s ease; .image-block { @@ -13,7 +12,7 @@ } .image-upload-background { - content: ''; + content: ""; background-color: hsl(0, 0%, 0%); height: 100%; width: 100%; @@ -70,7 +69,7 @@ .upload-spinner-background { background-color: hsl(0, 0%, 10%); - font-size: 0.80rem; + font-size: 0.8rem; width: 100%; opacity: 0.8; height: 100%; @@ -115,7 +114,6 @@ /* SCSS related to settings page user avatar upload widget only */ #user-avatar-upload-widget { - .image_upload_button { border-radius: 5px; box-shadow: 0px 0px 10px hsla(0, 0%, 0%, 0.1); diff --git a/static/styles/input_pill.scss b/static/styles/input_pill.scss index ec68dcc3d1..46d336104d 100644 --- a/static/styles/input_pill.scss +++ b/static/styles/input_pill.scss @@ -84,7 +84,7 @@ outline: none; &.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); backface-visibility: hidden; perspective: 1000px; diff --git a/static/styles/left-sidebar.scss b/static/styles/left-sidebar.scss index fb85bfbd49..116c53290a 100644 --- a/static/styles/left-sidebar.scss +++ b/static/styles/left-sidebar.scss @@ -57,7 +57,7 @@ li.show-more-topics { #streams_inline_cog, #streams_filter_icon { float: right; - opacity: 0.50; + opacity: 0.5; font-size: 13px; margin-top: 3px; margin-left: 10px; @@ -136,7 +136,7 @@ li.show-more-topics { } .inactive_stream { - opacity: .5; + opacity: 0.5; } } @@ -390,7 +390,7 @@ li.top_left_recent_topics { .stream-sidebar-menu-icon { top: 1px; right: 0px; - font-size: 1.0em; + font-size: 1em; text-align: center; padding: 0px 6px 0px 6px; } diff --git a/static/styles/lightbox.scss b/static/styles/lightbox.scss index e29a51d5df..acc496ec79 100644 --- a/static/styles/lightbox.scss +++ b/static/styles/lightbox.scss @@ -19,8 +19,11 @@ max-width: 100%; background-color: hsl(0, 0%, 100%); - background-image: - linear-gradient(45deg, hsl(0, 0%, 80%) 25%, transparent 25%), + background-image: linear-gradient( + 45deg, + 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(135deg, transparent 75%, hsl(0, 0%, 80%) 75%); diff --git a/static/styles/message_edit_history.scss b/static/styles/message_edit_history.scss index 8f013ece64..a9d38ba3be 100644 --- a/static/styles/message_edit_history.scss +++ b/static/styles/message_edit_history.scss @@ -32,5 +32,3 @@ } } } - - diff --git a/static/styles/night_mode.scss b/static/styles/night_mode.scss index c92c7e09c5..70a20f28da 100644 --- a/static/styles/night_mode.scss +++ b/static/styles/night_mode.scss @@ -26,11 +26,11 @@ body.night-mode { .compose-send-status-close { color: hsl(0, 0%, 100%); - opacity: 1.0; + opacity: 1; } .compose-send-status-close:hover { - opacity: .4; + opacity: 0.4; } .message_embed .data-container::after { @@ -50,7 +50,7 @@ body.night-mode { 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); } @@ -109,13 +109,14 @@ body.night-mode { /* 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. */ - .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%); } /* these are converting grey things to "new grey" */ - *[disabled=disabled], - *[readonly=readonly], + *[disabled="disabled"], + *[readonly="readonly"], .sidebar-title, .recipient_row_date { color: inherit; @@ -176,7 +177,7 @@ on a dark background, and don't change the dark labels dark either. */ #search_arrows .pill, .pm_recipient .pill-container .pill { 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); font-weight: 600; } @@ -192,7 +193,10 @@ on a dark background, and don't change the dark labels dark either. */ 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); } @@ -272,8 +276,13 @@ on a dark background, and don't change the dark labels dark either. */ } .overlay, - #subscription_overlay #stream-creation #stream_creation_form #stream_creating_indicator:not(:empty), - .emoji-info-popover .emoji-popover .emoji-popover-emoji:not(.reacted):focus { + #subscription_overlay + #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); } @@ -529,7 +538,11 @@ on a dark background, and don't change the dark labels dark either. */ .rendered_markdown { .user-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); } @@ -756,7 +769,7 @@ on a dark background, and don't change the dark labels dark either. */ .alert.alert-success { color: inherit; - background-color: hsla(161, 60%, 46%, 0.20); + background-color: hsla(161, 60%, 46%, 0.2); 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 { color: hsl(314, 27%, 82%); background-color: hsl(312, 7%, 14%); - box-shadow: - inset 0px 11px 10px -10px hsl(0, 0%, 6%), + box-shadow: inset 0px 11px 10px -10px hsl(0, 0%, 6%), inset 0px -11px 10px -10px hsl(0, 0%, 6%); .line-number { diff --git a/static/styles/popovers.scss b/static/styles/popovers.scss index e3d7d88523..68d92d06ba 100644 --- a/static/styles/popovers.scss +++ b/static/styles/popovers.scss @@ -75,7 +75,7 @@ } input { - box-sizing: inherit; /* IE */ + box-sizing: inherit; /* IE */ box-sizing: initial; width: calc(100% - 13px); @@ -136,7 +136,7 @@ ul { &::before, &::after { - content: ''; + content: ""; flex: 1; border-top: 1px solid hsl(0, 0%, 93%); border-bottom: 1px solid hsl(0, 0%, 100%); diff --git a/static/styles/portico/archive.scss b/static/styles/portico/archive.scss index 8dec251c51..429b1b3530 100644 --- a/static/styles/portico/archive.scss +++ b/static/styles/portico/archive.scss @@ -1,5 +1,6 @@ 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; } diff --git a/static/styles/portico/billing.scss b/static/styles/portico/billing.scss index 0d1e4bde0f..3510421fc0 100644 --- a/static/styles/portico/billing.scss +++ b/static/styles/portico/billing.scss @@ -76,7 +76,7 @@ width: 120px; height: 70px; background-color: hsl(0, 0%, 94%); - transition: all .2s ease; + transition: all 0.2s ease; display: inline-block; text-align: center; cursor: pointer; @@ -120,7 +120,11 @@ font-weight: 400; color: hsl(0, 0%, 100%); 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); border: 0; height: 40px; @@ -128,7 +132,7 @@ span { background: 0; box-shadow: none; - font-family: 'Source Sans Pro', Helvetica, Arial; + font-family: "Source Sans Pro", Helvetica, Arial; font-size: 1.4em; line-height: 20px; } diff --git a/static/styles/portico/integrations.scss b/static/styles/portico/integrations.scss index 6eeb3b4e8a..f7f4d0f6dc 100644 --- a/static/styles/portico/integrations.scss +++ b/static/styles/portico/integrations.scss @@ -115,7 +115,6 @@ $category-text: hsl(219, 23%, 33%); #integration-search { margin-bottom: 30px; - .searchbar { width: calc(100% - 40px); display: flex; @@ -198,14 +197,13 @@ $category-text: hsl(219, 23%, 33%); h4 { font-weight: 400; - font-size: .95em; + font-size: 0.95em; padding: 6px 10px 3px; margin: 3px 0; border-radius: 5px; transition: all 0.3s ease; color: $category-text; - &.selected, &:hover { background-color: $hover-green; @@ -274,7 +272,7 @@ $category-text: hsl(219, 23%, 33%); border-right: 1px solid $light-blue-border; border-bottom: 1px solid $light-blue-border; transition: all 0.3s ease; - font-size: .9em; + font-size: 0.9em; &.selected, &:hover { @@ -342,12 +340,12 @@ $category-text: hsl(219, 23%, 33%); .integration-secondary-line-text { margin: 0; line-height: 10px; - font-size: .65em; + font-size: 0.65em; font-weight: 400; } .integration-category { - font-size: .85em; + font-size: 0.85em; margin-top: 5px; font-weight: 400; color: hsla(216, 23%, 13%, 0.5); @@ -404,7 +402,7 @@ $category-text: hsl(219, 23%, 33%); } .integration-category { - font-size: .8em; + font-size: 0.8em; } } @@ -426,11 +424,11 @@ $category-text: hsl(219, 23%, 33%); } .integration-name { - font-size: .9em; + font-size: 0.9em; } .integration-category { - font-size: .77em; + font-size: 0.77em; } } } @@ -486,7 +484,7 @@ $category-text: hsl(219, 23%, 33%); .categories { order: 2; .integration-category { - font-size: 0.90em; + font-size: 0.9em; font-weight: 400; padding: 6px 3px; margin: 7px 0; diff --git a/static/styles/portico/integrations_dev_panel.css b/static/styles/portico/integrations_dev_panel.css index 8d45103d0a..4c26e6ee48 100644 --- a/static/styles/portico/integrations_dev_panel.css +++ b/static/styles/portico/integrations_dev_panel.css @@ -17,7 +17,8 @@ button { padding-left: 10px; padding-right: 10px; 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 { diff --git a/static/styles/portico/landing-page.scss b/static/styles/portico/landing-page.scss index 149bb7928c..6fc52da5ed 100644 --- a/static/styles/portico/landing-page.scss +++ b/static/styles/portico/landing-page.scss @@ -568,7 +568,11 @@ nav { width: 400px; 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; background-image: url(/static/images/landing-page/notifications.jpg); @@ -739,7 +743,8 @@ nav { font-size: 1.5em; font-weight: 300; 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 { @@ -792,23 +797,43 @@ nav { height: 1100px; &.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 { - 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 { - 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 { - 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 { - 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 { position: relative; margin: -300px auto 0px auto; @@ -1337,7 +1361,10 @@ nav { margin: 20px auto; padding: 30px 20px; 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; box-shadow: 0px 3px 10px hsla(0, 0%, 0%, 0.02); position: relative; @@ -1473,7 +1500,6 @@ nav { } } - .tour .carousel-inner .mobile-hide, .tour .carousel-inner img.mobile-hide, .tour .carousel-inner img.centered-image.mobile-hide { @@ -1542,7 +1568,7 @@ nav { font-size: 2em; top: 50%; font-weight: 400; - opacity: 1.0; + opacity: 1; border-radius: 0; &:hover { @@ -1576,7 +1602,7 @@ nav { text-indent: -999px; cursor: pointer; background-color: hsl(222, 12%, 66%); - transition: background .1s ease; + transition: background 0.1s ease; &::before { position: absolute; @@ -2078,12 +2104,21 @@ nav { 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%; } -.portico-landing.apps .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"] { +.portico-landing.apps + .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%; } @@ -2395,7 +2430,13 @@ nav { 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 { @@ -2462,23 +2503,43 @@ nav { } .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 { - 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 { - 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 { - 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 { - 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 -- */ @@ -2534,7 +2595,6 @@ nav { box-shadow: 0px 0px 10px hsla(0, 0%, 0%, 0.1); - text-align: left; background-color: hsl(0, 0%, 100%); @@ -2669,7 +2729,7 @@ nav { } .pricing-model .pricing-container .text-content .price .price-cents { - font-size: .4em; + font-size: 0.4em; vertical-align: top; position: relative; top: 6px; @@ -2753,7 +2813,11 @@ nav { 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; width: calc(33% - 21px); height: 200px; @@ -2802,7 +2866,6 @@ nav { background-color: hsl(217, 22%, 93%); } - @keyframes box-shadow-pulse { 0% { box-shadow: 0px 0px 0px hsla(170, 47%, 60%, 1); @@ -2833,7 +2896,10 @@ nav { } @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; } } @@ -2867,15 +2933,18 @@ nav { 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 { text-align: center; width: calc(100% - 40px); } } -@media (min-width: 1296px), - (max-width: 985px) and (min-width: 687px) { +@media (min-width: 1296px), (max-width: 985px) and (min-width: 687px) { /* while there are nine, show only two rows of four. */ .portico-landing .testimonials .company-box > div:last-of-type { display: none; @@ -3731,15 +3800,27 @@ nav { want to have the gradients stay darker for longer. */ .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 { - 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 { - background: linear-gradient(5deg, transparent 20%, hsl(49, 71%, 68%) 80%); + background: linear-gradient( + 5deg, + transparent 20%, + hsl(49, 71%, 68%) 80% + ); } } diff --git a/static/styles/portico/markdown.scss b/static/styles/portico/markdown.scss index 1e4a4c1df4..e32210b64a 100644 --- a/static/styles/portico/markdown.scss +++ b/static/styles/portico/markdown.scss @@ -4,8 +4,6 @@ line-height: 1.5; overflow: auto; - - h1[id], h2[id], h3[id], @@ -80,7 +78,6 @@ } } - ul, ol { margin-left: 30px; @@ -201,7 +198,6 @@ box-shadow: none; } - &.emoji-small { width: 20px; box-shadow: none; @@ -272,18 +268,22 @@ top: 2px; &::after { - content: ''; + content: ""; background: hsl(0, 0%, 80%); height: 1.5px; width: 6px; display: block; - margin: .5px -2px; + margin: 0.5px -2px; } } &.orange { 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 { diff --git a/static/styles/portico/portico-signin.scss b/static/styles/portico/portico-signin.scss index b62d0ebf77..04da0e8302 100644 --- a/static/styles/portico/portico-signin.scss +++ b/static/styles/portico/portico-signin.scss @@ -147,7 +147,7 @@ html { display: inline-block; } - input[type=submit] { + input[type="submit"] { color: hsl(0, 0%, 67%); border: 1px solid hsl(0, 0%, 87%); border-radius: 4px; @@ -398,9 +398,9 @@ html { display: inline-block; vertical-align: top; - input[type=text], - input[type=email], - input[type=password] { + input[type="text"], + input[type="email"], + input[type="password"] { padding: 10px 32px 10px 12px; margin: 25px 0 5px; @@ -427,7 +427,7 @@ html { } } - input[type=email] { + input[type="email"] { margin-bottom: 10px; } @@ -442,9 +442,9 @@ html { } &.moving-label { - input[type=text]:invalid + label, - input[type=email]:invalid + label, - input[type=password]:invalid + label { + input[type="text"]:invalid + label, + input[type="email"]:invalid + label, + input[type="password"]:invalid + label { transform: translateY(35px) translateX(14px); font-size: 1.2rem; font-weight: 400; @@ -455,12 +455,12 @@ html { } label, - input[type=text]:focus + label, - input[type=email]:focus + label, - input[type=password]:focus + label, - input[type=text]:valid + label, - input[type=email]:valid + label, - input[type=password]:valid + label { + input[type="text"]:focus + label, + input[type="email"]:focus + label, + input[type="password"]:focus + label, + input[type="text"]:valid + label, + input[type="email"]:valid + label, + input[type="password"]:valid + label { left: 0px; transform: translateY(-0px) translateX(0px); pointer-events: auto; @@ -668,7 +668,8 @@ button.login-social-button { background-repeat: no-repeat; background-position: 13px 50%; 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-top: 0px; @@ -967,7 +968,7 @@ button#register_auth_button_gitlab { } .find-account-link { - color: hsl(165, 100.0%, 14.7%); + color: hsl(165, 100%, 14.7%); } } diff --git a/static/styles/portico/portico.scss b/static/styles/portico/portico.scss index 051eeb30a5..03be8844f9 100644 --- a/static/styles/portico/portico.scss +++ b/static/styles/portico/portico.scss @@ -1,6 +1,6 @@ body { 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%; height: 100%; font-weight: 300; @@ -167,7 +167,7 @@ html { font-size: 1.25em; line-height: 1.5; 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) { margin-top: 20px; @@ -446,7 +446,7 @@ img.screenshot { .laptop-image { width: 787px; height: 414px; - background-image: url('/static/images/landing-page/laptop.png'); + background-image: url("/static/images/landing-page/laptop.png"); background-size: contain; } @@ -1113,7 +1113,6 @@ input.new-organization-button { } } - .little-bullet { display: inline-block; margin-left: 5px; @@ -1134,7 +1133,7 @@ input.new-organization-button { &:hover { text-decoration: none; - background-color: hsla(0, 0%, 100%, 1.0); + background-color: hsla(0, 0%, 100%, 1); color: hsl(170, 50%, 40%); } } @@ -1176,8 +1175,8 @@ input.new-organization-button { .input-group { margin: 15px 0px; - input[type=text], - input[type=password] { + input[type="text"], + input[type="password"] { width: calc(100% - 14px); } @@ -1216,12 +1215,12 @@ input.new-organization-button { } /* --- new settings styling --- */ - input[type=radio], - input[type=checkbox] { + input[type="radio"], + input[type="checkbox"] { margin: 0 10px 0 0; } - input[type=radio] { + input[type="radio"] { position: relative; top: 8px; } @@ -1289,7 +1288,7 @@ input.new-organization-button { } } - #send_confirm input[type=text] { + #send_confirm input[type="text"] { margin-top: 20px; } @@ -1306,7 +1305,7 @@ input.new-organization-button { min-height: calc(100vh - 290px); height: 100%; 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 { @@ -1601,7 +1600,6 @@ input.new-organization-button { margin-left: auto; } - .inline-block { display: inline-block; vertical-align: top; @@ -1656,7 +1654,7 @@ input.new-organization-button { } .documentation-footer { - font-size: .85rem; + font-size: 0.85rem; opacity: 0.8; } diff --git a/static/styles/portico/stats.scss b/static/styles/portico/stats.scss index f8ee66c3ab..261797fac1 100644 --- a/static/styles/portico/stats.scss +++ b/static/styles/portico/stats.scss @@ -1,5 +1,5 @@ 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%); } @@ -113,7 +113,7 @@ p { } .button { - font-family: 'Source Sans Pro', 'Helvetica Neue', sans-serif !important; + font-family: "Source Sans Pro", "Helvetica Neue", sans-serif !important; border: none; border-radius: 4px; outline: none; @@ -176,7 +176,7 @@ p { width: 750px; 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; } } @@ -204,7 +204,7 @@ p { } .spinner::before { - content: ''; + content: ""; box-sizing: border-box; position: absolute; top: 50%; @@ -227,7 +227,9 @@ p { @media (min-width: 1680px) { .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, .right { diff --git a/static/styles/reactions.scss b/static/styles/reactions.scss index 5eb763f707..bde479142c 100644 --- a/static/styles/reactions.scss +++ b/static/styles/reactions.scss @@ -88,7 +88,7 @@ border: 1px solid hsl(200, 100%, 40%); background-color: hsl(195, 50%, 95%); cursor: pointer; - opacity: 1.0; + opacity: 1; color: hsl(200, 100%, 40%); } diff --git a/static/styles/recent_topics.scss b/static/styles/recent_topics.scss index fa1a00e262..4ceca2a892 100644 --- a/static/styles/recent_topics.scss +++ b/static/styles/recent_topics.scss @@ -156,7 +156,7 @@ line-height: 16px; font-size: 12px; font-weight: 400; - letter-spacing: .6px; + letter-spacing: 0.6px; border-radius: 4px; background-color: hsl(0, 0%, 89%); padding: 0 4px; diff --git a/static/styles/rendered_markdown.scss b/static/styles/rendered_markdown.scss index 0462a84da3..3de31c401a 100644 --- a/static/styles/rendered_markdown.scss +++ b/static/styles/rendered_markdown.scss @@ -125,7 +125,11 @@ margin-right: 2px; margin-left: 2px; 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; margin-bottom: 1px; } @@ -174,13 +178,15 @@ .spoiler-content { overflow: hidden; 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; height: 0px; &.spoiler-content-open { 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; height: auto; } @@ -198,7 +204,6 @@ } } - .spoiler-arrow { float: right; width: 13px; @@ -214,7 +219,7 @@ &::before, &::after { position: absolute; - content: ''; + content: ""; display: inline-block; width: 12px; height: 3px; @@ -292,7 +297,7 @@ .twitter-tweet { border: 1px solid hsl(0, 0%, 87%); - padding: .5em .75em; + padding: 0.5em 0.75em; margin-bottom: 0.25em; word-break: break-word; min-height: 48px; @@ -302,7 +307,7 @@ float: left; width: 48px; height: 48px; - margin-right: .75em; + margin-right: 0.75em; } .message_inline_ref { @@ -422,7 +427,11 @@ height: 10%; bottom: 0; - background: linear-gradient(0deg, hsl(0, 0%, 100%), transparent 100%); + background: linear-gradient( + 0deg, + hsl(0, 0%, 100%), + transparent 100% + ); } } diff --git a/static/styles/right-sidebar.scss b/static/styles/right-sidebar.scss index a6037d392c..4633aaff70 100644 --- a/static/styles/right-sidebar.scss +++ b/static/styles/right-sidebar.scss @@ -31,7 +31,7 @@ position: absolute; top: 1px; right: 0px; - font-size: 1.0em; + font-size: 1em; display: none; text-align: center; padding: 0px 6px 0px 6px; @@ -180,7 +180,7 @@ #user_filter_icon { font-size: 13px; - opacity: 0.50; + opacity: 0.5; margin-right: 5px; } } diff --git a/static/styles/settings.scss b/static/styles/settings.scss index f5eda7f7d7..6b4b8f297e 100644 --- a/static/styles/settings.scss +++ b/static/styles/settings.scss @@ -300,7 +300,7 @@ td .button { } } - input[type=text].search { + input[type="text"].search { float: right; margin: 2px 5px 2px 0px; padding: 2px 5px; @@ -370,7 +370,7 @@ td .button { &:hover { outline: none; - box-shadow: 0px 0px 4px hsla(199, 79%, 56%, 1.0); + box-shadow: 0px 0px 4px hsla(199, 79%, 56%, 1); } div, @@ -393,7 +393,7 @@ td .button { color: hsl(0, 0%, 67%); } - [contenteditable=true] { + [contenteditable="true"] { outline: none; } } @@ -426,7 +426,7 @@ td .button { margin: 0px; } -input[type=checkbox] { +input[type="checkbox"] { + .inline-block { margin-left: 10px; } @@ -730,7 +730,7 @@ input[type=checkbox] { .add-new-emoji-box, .add-new-user-group-box, .add-new-default-stream-box { - input[type=text] { + input[type="text"] { padding: 6px; } } @@ -1043,7 +1043,7 @@ input[type=checkbox] { border-bottom: none; } - input[type=radio] { + input[type="radio"] { position: relative; top: -2px; margin: 0px 5px 0px 0px; @@ -1220,11 +1220,11 @@ input[type=checkbox] { visibility: visible; } - input[type=text] { + input[type="text"] { width: calc(100% - 10px - 4px); } - input[type=submit], + input[type="submit"], button { border-radius: 4px; 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; } @@ -1645,7 +1645,7 @@ body:not(.night-mode) #settings_page .custom_user_field .datepicker { #payload_url_inputbox, #service_name_list { - input[type=text] { + input[type="text"] { width: 340px; } } @@ -1662,7 +1662,8 @@ body:not(.night-mode) #settings_page .custom_user_field .datepicker { @supports (-moz-appearance: none) { #settings_page select { -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; } } @@ -1703,7 +1704,8 @@ body:not(.night-mode) #settings_page .custom_user_field .datepicker { outline: 0; 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); } } diff --git a/static/styles/subscriptions.scss b/static/styles/subscriptions.scss index 02d313e395..4eb16690b8 100644 --- a/static/styles/subscriptions.scss +++ b/static/styles/subscriptions.scss @@ -117,7 +117,7 @@ .sp-preview { width: 20px; 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 { @@ -397,7 +397,9 @@ form#add_new_subscription { } .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); 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-radius: 4px; 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 { content: attr(data-no-description); font-style: italic; @@ -915,7 +919,7 @@ form#add_new_subscription { min-width: 10px; max-width: 100%; - &[contenteditable=true] { + &[contenteditable="true"] { display: inline-block; vertical-align: top; color: hsl(170, 48%, 54%); @@ -1035,7 +1039,7 @@ ul.grey-box { padding: 5px 0px; } - input[type=checkbox] { + input[type="checkbox"] { #stream_privacy_modal & { margin-top: 4px; } @@ -1059,14 +1063,14 @@ ul.grey-box { } } - input[type=radio] { + input[type="radio"] { #stream_privacy_modal &, #subscription_overlay & { margin-right: 5px; } } - input[type=text] { + input[type="text"] { width: 5ch; text-align: right; } diff --git a/static/styles/user_circles.scss b/static/styles/user_circles.scss index 671006bf08..81bbae265c 100644 --- a/static/styles/user_circles.scss +++ b/static/styles/user_circles.scss @@ -22,7 +22,11 @@ .user_circle_orange { border-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 { @@ -34,7 +38,7 @@ border-color: hsl(0, 0%, 50%); &::after { - content: ''; + content: ""; background: hsl(0, 0%, 50%); height: 1.5px; // 1px is too thin, 2px is too thick width: 6px; diff --git a/static/styles/widgets.scss b/static/styles/widgets.scss index 076d93df07..edcc7915c8 100644 --- a/static/styles/widgets.scss +++ b/static/styles/widgets.scss @@ -133,7 +133,7 @@ button { margin-left: 5px; &:hover { - opacity: 1.0; + opacity: 1; } } @@ -142,5 +142,5 @@ button { } .current-user-vote { - background-color: hsla(156, 10%, 90%, .9); + background-color: hsla(156, 10%, 90%, 0.9); } diff --git a/static/styles/zulip.scss b/static/styles/zulip.scss index c0ccfafff7..a12967a5c4 100644 --- a/static/styles/zulip.scss +++ b/static/styles/zulip.scss @@ -33,7 +33,8 @@ html { } 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 */ @@ -47,7 +48,8 @@ input, button, select, 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; } @@ -223,7 +225,7 @@ p.n-margin { } .message_edit_notice_hover:hover { - opacity: 1.0; + opacity: 1; } .header { @@ -369,7 +371,7 @@ p.n-margin { textarea, 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 */ @@ -524,7 +526,7 @@ strong { cursor: pointer; &:hover { - opacity: 1.0; + opacity: 1; } } @@ -834,9 +836,9 @@ td.pointer { font-weight: normal; height: 17px; line-height: 17px; - border-top-color: hsla(0, 0%, 0%, 0.0); - border-right-color: hsla(0, 0%, 0%, 0.0); - border-bottom-color: hsla(0, 0%, 0%, 0.0); + border-top-color: hsla(0, 0%, 0%, 0); + border-right-color: hsla(0, 0%, 0%, 0); + border-bottom-color: hsla(0, 0%, 0%, 0); background-color: hsl(0, 0%, 88%); border-left-color: hsl(0, 0%, 88%); border-width: 0px; @@ -865,7 +867,7 @@ td.pointer { border-width: 11px 0 11px 5px; border-color: inherit; z-index: 2; - transform: scale(.9999); + transform: scale(0.9999); } &::before { @@ -879,9 +881,10 @@ td.pointer { margin-top: -14px; border-style: solid; 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; - transform: scale(.9999); + transform: scale(0.9999); } } @@ -928,8 +931,7 @@ td.pointer { &.last_message { .message_header { border-bottom-right-radius: 3px; - box-shadow: - 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%); } @@ -1026,8 +1028,7 @@ td.pointer { .messagebox, .date_row { background-color: hsla(192, 19%, 75%, 0.2); - box-shadow: - inset 2px 0px 0px 0px hsl(0, 0%, 27%), + box-shadow: inset 2px 0px 0px 0px hsl(0, 0%, 27%), -1px 0px 0px 0px hsl(0, 0%, 27%); } } @@ -1094,8 +1095,7 @@ td.pointer { } .messagebox-content { - box-shadow: - inset 0px 0px 0px 2px hsl(215, 47%, 50%), + box-shadow: 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%), @@ -1149,7 +1149,7 @@ td.pointer { } .always_visible_topic_edit { - opacity: .7; + opacity: 0.7; } .on_hover_topic_edit, @@ -1159,7 +1159,7 @@ td.pointer { .on_hover_topic_read { &:hover { cursor: pointer; - opacity: 1.0; + opacity: 1; } } @@ -1232,8 +1232,8 @@ div.message_table { .message_row { position: relative; - border-left: 1px solid hsla(0, 0%, 0%, 0.10); - border-right: 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.1); &.selected_message { z-index: 2; @@ -1360,7 +1360,6 @@ div.focused_table { outline: none; } - .message_edit_topic_propagate { display: inline-block; width: 300px; @@ -1688,7 +1687,7 @@ div.focused_table { padding-right: 20px; border: none; border-radius: 0px; - font-family: 'Source Sans Pro'; + font-family: "Source Sans Pro"; font-weight: 300; line-height: $header_height; } @@ -1898,7 +1897,7 @@ div.focused_table { border-right: 7px solid transparent; border-bottom: 7px solid hsl(0, 0%, 67%); border-left: 7px solid transparent; - content: ''; + content: ""; z-index: 10; } } @@ -2057,7 +2056,7 @@ div.floating_recipient { .checkbox { display: block; - input[type=checkbox] { + input[type="checkbox"] { margin: 5px 0px; float: none; } @@ -2072,7 +2071,7 @@ div.floating_recipient { display: block; } - input[type=checkbox] { + input[type="checkbox"] { margin: 5px 0px; float: none; } @@ -2427,7 +2426,7 @@ div.topic_edit_spinner .loading_indicator_spinner { .deactivated_user .deactivated-user-icon { color: inherit; margin-left: 2px; - font-size: .9em; + font-size: 0.9em; } .no-drag { @@ -2530,7 +2529,7 @@ select.inline_select_topic_edit { top: 0px; .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); border-left: 1px solid hsl(0, 0%, 87%); @@ -2558,7 +2557,6 @@ select.inline_select_topic_edit { margin-right: 41px; } - .nav .dropdown-menu { min-width: 180px; box-shadow: 0px 0px 5px hsla(0, 0%, 0%, 0.2); @@ -2614,7 +2612,7 @@ select.inline_select_topic_edit { top: 0px; .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); border-right: 1px solid hsl(0, 0%, 87%); diff --git a/stylelint.config.js b/stylelint.config.js index 03191aa5a1..851c2e4773 100644 --- a/stylelint.config.js +++ b/stylelint.config.js @@ -1,66 +1,22 @@ "use strict"; module.exports = { + extends: ["stylelint-config-prettier"], rules: { // Stylistic rules for CSS. - "function-comma-space-after": "always", - "function-comma-space-before": "never", - "function-max-empty-lines": 0, "function-whitespace-after": "always", "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-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-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-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", - indentation: 4, // Limit language features "color-no-hex": true, diff --git a/templates/zerver/emails/email.css b/templates/zerver/emails/email.css index 36194bc7cd..7c9c361d9a 100644 --- a/templates/zerver/emails/email.css +++ b/templates/zerver/emails/email.css @@ -178,7 +178,7 @@ a.button:hover { #private-messages { width: 600px; font-size: 12px; - font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; + font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; } .recipient_block { @@ -214,7 +214,7 @@ a.button:hover { .messages { width: 600px; font-size: 12px; - font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; + font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; overflow-y: auto; } @@ -304,52 +304,52 @@ a.button:hover { } @media only screen and (max-width: 620px) { - table[class=body] h1 { + table[class="body"] h1 { font-size: 28px !important; margin-bottom: 10px !important; } - table[class=body] p, - table[class=body] ul, - table[class=body] ol, - table[class=body] td, - table[class=body] span, - table[class=body] a { + table[class="body"] p, + table[class="body"] ul, + table[class="body"] ol, + table[class="body"] td, + table[class="body"] span, + table[class="body"] a { font-size: 16px !important; } - table[class=body] .wrapper { + table[class="body"] .wrapper { padding: 0px 10px 10px 10px; } - table[class=body] .article { + table[class="body"] .article { padding: 10px !important; } - table[class=body] .content { + table[class="body"] .content { padding: 0 !important; } - table[class=body] .container { + table[class="body"] .container { padding: 0 !important; width: 100% !important; } - table[class=body] .main { + table[class="body"] .main { border-left-width: 0 !important; border-radius: 0 !important; border-right-width: 0 !important; } - table[class=body] .btn table { + table[class="body"] .btn table { width: 100% !important; } - table[class=body] .btn a { + table[class="body"] .btn a { width: 100% !important; } - table[class=body] .img-responsive { + table[class="body"] .img-responsive { height: auto !important; max-width: 100% !important; width: auto !important; diff --git a/tools/lint b/tools/lint index 228f65cf56..0f9dfcf6cc 100755 --- a/tools/lint +++ b/tools/lint @@ -92,9 +92,9 @@ def run() -> None: description="Sorts Python import statements", check_arg=['--check-only', '--diff']) 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'], - description="Formats JavaScript and YAML", + description="Formats CSS, JavaScript, YAML", # https://github.com/prettier/prettier/pull/8703 suppress_line=lambda line: line in ["Checking formatting...\n", "All matched files use Prettier code style!\n"]) diff --git a/version.py b/version.py index 49e327a515..a1ed2d5b8a 100644 --- a/version.py +++ b/version.py @@ -44,4 +44,4 @@ API_FEATURE_LEVEL = 27 # historical commits sharing the same major version, in which case a # minor version bump suffices. -PROVISION_VERSION = '95.0' +PROVISION_VERSION = '95.1' diff --git a/yarn.lock b/yarn.lock index 4d5ea8f17d..1a05e561f2 100644 --- a/yarn.lock +++ b/yarn.lock @@ -11340,6 +11340,11 @@ stylehacks@^4.0.0: postcss "^7.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: version "13.6.1" resolved "https://registry.yarnpkg.com/stylelint/-/stylelint-13.6.1.tgz#cc1d76338116d55e8ff2be94c4a4386c1239b878"