styles: Format CSS with Prettier.

Signed-off-by: Anders Kaseorg <anders@zulip.com>

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`.

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.

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",

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:
+            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%);
 
             margin-top: 1em;

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],
+.input-append input[type="text"],
-.new-style 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;
     }

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;
             }
         }

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%);
         }
     }
 }

static/styles/hotspots.scss

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

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);

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;

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;
 }

static/styles/lightbox.scss

@@ -19,8 +19,11 @@
             max-width: 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(45deg, transparent 75%, hsl(0, 0%, 80%) 75%),
                 linear-gradient(135deg, transparent 75%, hsl(0, 0%, 80%) 75%);

static/styles/message_edit_history.scss

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

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],
+    *[disabled="disabled"],
-    *[readonly=readonly],
+    *[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),
+    #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);
     }
 
@@ -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:
+                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%);
 
                 .line-number {

static/styles/popovers.scss

@@ -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%);

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;
 }
 

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;
         }

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;

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 {

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
-.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%;
 }
 
@@ -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),
+@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. */
     .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%
+        );
     }
 }
 

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 {

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="text"],
-        input[type=email],
+        input[type="email"],
-        input[type=password] {
+        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="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);
                 font-size: 1.2rem;
                 font-weight: 400;
@@ -455,12 +455,12 @@ html {
         }
 
         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;
             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%);
     }
 }
 

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="text"],
-        input[type=password] {
+        input[type="password"] {
             width: calc(100% - 14px);
         }
 
@@ -1216,12 +1215,12 @@ input.new-organization-button {
     }
 
     /* --- new settings styling --- */
-    input[type=radio],
+    input[type="radio"],
-    input[type=checkbox] {
+    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;
 }
 

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 {

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%);
         }
 

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;

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%
+            );
         }
     }
 

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;
     }
 }

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);
     }
 }
 

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;
         }

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;

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);
 }

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-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%);
     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:
+            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 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:
+        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%);
     }
 }
@@ -1094,8 +1095,7 @@ td.pointer {
     }
 
     .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%),
@@ -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-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 {
         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%);
 

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,

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"] 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;
     }
 
-    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;

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"])
 

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'

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"