chore: format

less/admin.less

@@ -1,14 +1,14 @@
-@import "common/common";
+@import 'common/common';
 
-@import "admin/AdminHeader";
+@import 'admin/AdminHeader';
-@import "admin/AdminNav";
+@import 'admin/AdminNav';
-@import "admin/DashboardPage";
+@import 'admin/DashboardPage';
-@import "admin/BasicsPage";
+@import 'admin/BasicsPage';
-@import "admin/PermissionsPage";
+@import 'admin/PermissionsPage';
-@import "admin/EditGroupModal";
+@import 'admin/EditGroupModal';
-@import "admin/ExtensionPage";
+@import 'admin/ExtensionPage';
-@import "admin/ExtensionWidget";
+@import 'admin/ExtensionWidget';
-@import "admin/AppearancePage";
+@import 'admin/AppearancePage';
-@import "admin/MailPage";
+@import 'admin/MailPage';
-@import "admin/NoJs";
+@import 'admin/NoJs';
-@import "admin/UsersListPage";
+@import 'admin/UsersListPage';

less/admin/AdminNav.less

@@ -25,7 +25,7 @@
       margin: 10px;
 
       .SearchBar {
-        width: 100%
+        width: 100%;
       }
     }
   }
@@ -43,8 +43,8 @@
 @media @tablet {
   .AdminNav {
     .item-search,
-    li[class^="item-category"],
+    li[class^='item-category'],
-    li[class^="item-extension"],
+    li[class^='item-extension'],
     .AdminLinkButton-description {
       display: none !important;
     }
@@ -68,12 +68,11 @@
   }
 }
 
-
 @media @desktop-up {
   .App-nav {
     position: absolute;
     top: var(--header-height);
-    height: ~"calc(100vh - var(--header-height))";
+    height: ~'calc(100vh - var(--header-height))';
     width: var(--admin-pane-width);
     box-shadow: 0 6px 6px var(--shadow-color);
     background: var(--body-bg);
@@ -168,7 +167,6 @@
       padding: 0;
     }
   }
-
 }
 
 .AdminLinkButton-description {
@@ -195,7 +193,7 @@
 .ExtensionNavButton {
   .Button-label {
     display: inline-block;
-    max-width: ~"calc(100% - 18px)";
+    max-width: ~'calc(100% - 18px)';
     overflow: hidden;
     text-overflow: ellipsis;
     vertical-align: middle;

less/admin/DashboardPage.less

@@ -30,7 +30,7 @@
       margin-right: 30px;
       vertical-align: middle;
 
-      &[class^="item-version-"] {
+      &[class^='item-version-'] {
         max-width: 100px;
         white-space: nowrap;
         overflow: hidden;

less/admin/ExtensionPage.less

@@ -59,7 +59,6 @@
         color: var(--muted-color);
         margin-left: 13px;
 
-
         > a {
           color: var(--muted-color);
         }
@@ -85,13 +84,16 @@
         position: relative;
       }
 
-      .item-website, .item-source, .item-documentation {
+      .item-website,
+      .item-source,
+      .item-documentation {
         display: none;
       }
     }
   }
 
-  &-settings, &-permissions {
+  &-settings,
+  &-permissions {
     .ExtensionPage-subHeader {
       margin: 5px 0px;
     }

less/admin/ExtensionWidget.less

@@ -58,7 +58,7 @@
 }
 
 .ExtensionListItem {
-  transition: .15s ease-in-out;
+  transition: 0.15s ease-in-out;
 
   &:hover {
     transform: scale(1.05);
@@ -84,7 +84,7 @@
   color: var(--control-color);
   border-radius: 6px;
   display: inline-flex;
-  font-size: calc(~"var(--size) / 2");
+  font-size: calc(~'var(--size) / 2');
   text-align: center;
   align-items: center;
   justify-content: center;

less/admin/MailPage.less

@@ -8,7 +8,8 @@
     }
   }
 
-  button, .Alert {
+  button,
+  .Alert {
     margin-bottom: 20px;
   }
 
@@ -20,7 +21,6 @@
 }
 
 .MailPage-MailSettings-input {
-
   label {
     display: block;
     margin-bottom: 7px;

less/admin/PermissionsPage.less

@@ -32,7 +32,6 @@
   }
 }
 
-
 .PermissionsPage-permissions {
   margin: 20px 0 30px;
   overflow-x: auto;
@@ -42,7 +41,8 @@
 .PermissionGrid {
   white-space: nowrap;
 
-  td, th {
+  td,
+  th {
     padding: 5px;
     text-align: left;
   }
@@ -134,14 +134,16 @@
 .PermissionGrid-section {
   background: var(--body-bg);
 
-  td, th {
+  td,
+  th {
     padding-top: 10px;
   }
 }
 .PermissionGrid-child {
   background: var(--body-bg);
 
-  td, th {
+  td,
+  th {
     position: relative;
   }
   th {

less/admin/UsersListPage.less

@@ -16,7 +16,7 @@
     // Table refreshing overlay
     &--loadingPage {
       &::after {
-        content: "";
+        content: '';
         display: block;
         position: absolute;
         top: 0;
@@ -53,7 +53,7 @@
       display: flex;
       align-items: center;
 
-      &[data-column-name="editUser"] {
+      &[data-column-name='editUser'] {
         padding: 0;
         position: relative;
       }
@@ -100,7 +100,7 @@
     display: flex;
     flex-grow: 1;
 
-    &[data-email-shown="false"] {
+    &[data-email-shown='false'] {
       .UserList-emailAddress {
         user-select: none;
         filter: blur(4px);

less/common/Alert.less

@@ -23,7 +23,8 @@
 .Alert--success {
   .Alert--color(var(--alert-success-color), var(--alert-success-bg));
 
-  a, a:hover {
+  a,
+  a:hover {
     text-decoration: underline;
   }
 }
@@ -41,7 +42,8 @@
     display: inline-block;
     margin: 0 5px;
 
-    > a, > .Button {
+    > a,
+    > .Button {
       text-transform: uppercase;
       font-size: 12px;
       font-weight: bold;

less/common/App.less

@@ -27,13 +27,16 @@
       box-shadow: 0 2px 6px var(--shadow-color);
     }
   }
-  .App-primaryControl, .App-titleControl, .App-backControl {
+  .App-primaryControl,
+  .App-titleControl,
+  .App-backControl {
     position: absolute !important;
-    z-index: calc(~"var(--zindex-header) + 1");
+    z-index: calc(~'var(--zindex-header) + 1');
     top: 0 !important;
     margin: 0;
 
-    .App.affix &, .Composer & {
+    .App.affix &,
+    .Composer & {
       position: fixed !important;
     }
 
@@ -59,15 +62,18 @@
     right: 0;
 
     &.Dropdown {
-      .Button, .Button-caret {
+      .Button,
+      .Button-caret {
         display: none !important;
       }
-      .Dropdown-toggle, .Button-icon {
+      .Dropdown-toggle,
+      .Button-icon {
         display: block !important;
       }
     }
   }
-  .App-primaryControl, .App-backControl {
+  .App-primaryControl,
+  .App-backControl {
     margin: 0 !important;
 
     > .Button {
@@ -90,7 +96,8 @@
     text-align: center;
     color: var(--header-color) !important;
 
-    &, > .Button {
+    &,
+    > .Button {
       font-size: 16px;
     }
     > .Button {
@@ -137,7 +144,7 @@
     top: 0;
     bottom: 0;
     box-shadow: 0 2px 6px var(--shadow-color);
-    transform: translateX(calc(~"-6px - var(--drawer-width)"));
+    transform: translateX(calc(~'-6px - var(--drawer-width)'));
     transition: transform 0.2s;
     z-index: var(--zindex-modal);
 
@@ -200,12 +207,15 @@
     > li {
       padding: 0 10px 0;
     }
-    .FormControl, .ButtonGroup, .Button {
+    .FormControl,
+    .ButtonGroup,
+    .Button {
       width: 100%;
       text-align: left;
     }
     .Dropdown-menu {
-      .ButtonGroup, .Button {
+      .ButtonGroup,
+      .Button {
         width: auto;
       }
     }
@@ -254,7 +264,8 @@
     margin-right: 25px;
   }
   .Header-controls {
-    &, > li {
+    &,
+    > li {
       display: inline-block;
       vertical-align: middle;
     }

less/common/Avatar.less

@@ -11,7 +11,7 @@
   width: var(--size);
   height: var(--size);
   border-radius: 100%;
-  font-size: calc(~"var(--size) / 2");
+  font-size: calc(~'var(--size) / 2');
 
   img {
     display: inline-block;

less/common/Badge.less

@@ -2,7 +2,7 @@
   .Badge--size(22px);
   width: var(--size);
   height: var(--size);
-  border-radius: calc(~"var(--size) / 2");
+  border-radius: calc(~'var(--size) / 2');
   background: var(--badge-bg);
   color: var(--badge-color);
   display: inline-flex;
@@ -15,8 +15,9 @@
     display: none;
   }
 
-  &, .Badge-icon {
+  &,
-    font-size: calc(~"0.56 * var(--size)");
+  .Badge-icon {
+    font-size: calc(~'0.56 * var(--size)');
   }
 }
 
@@ -29,7 +30,8 @@
   padding: 0;
   list-style: none;
 
-  &, > li {
+  &,
+  > li {
     display: inline-block;
   }
 }

less/common/Button.less

@@ -27,7 +27,8 @@
       border-top-right-radius: 0;
       border-bottom-right-radius: 0;
     }
-    &:last-child:not(:first-child), &.Dropdown-toggle:not(:first-child) {
+    &:last-child:not(:first-child),
+    &.Dropdown-toggle:not(:first-child) {
       border-top-left-radius: 0;
       border-bottom-left-radius: 0;
     }
@@ -64,7 +65,7 @@
   &:active,
   &.active,
   .open > &.Dropdown-toggle {
-    .box-shadow(inset 0 3px 5px rgba(0, 0, 0, .125));
+    .box-shadow(inset 0 3px 5px rgba(0, 0, 0, 0.125));
   }
 
   &.disabled,
@@ -192,7 +193,8 @@
   text-align: center;
   padding: 8px 0;
 
-  .Button-label, .Button-caret {
+  .Button-label,
+  .Button-caret {
     display: none;
   }
   .Button-icon {

less/common/Checkbox.less

@@ -4,7 +4,7 @@
   margin: 0;
   position: relative;
 
-  input[type="checkbox"] {
+  input[type='checkbox'] {
     position: absolute;
     z-index: 1;
 
@@ -20,7 +20,7 @@
 
     cursor: pointer;
 
-    .add-keyboard-focus-ring-nearby("+ .Checkbox-display");
+    .add-keyboard-focus-ring-nearby('+ .Checkbox-display');
   }
 }
 .Checkbox--switch {
@@ -29,7 +29,7 @@
   padding-left: var(--left-pad);
   margin: 5px 0;
 
-  input[type="checkbox"] {
+  input[type='checkbox'] {
     top: -4px;
     width: 50px;
     height: 28px;
@@ -37,7 +37,7 @@
 
   .Checkbox-display {
     float: left;
-    margin-left: calc(~"0px - var(--left-pad)");
+    margin-left: calc(~'0px - var(--left-pad)');
     margin-top: -4px;
   }
 }
@@ -88,7 +88,7 @@
     }
   }
   &:before {
-    content: " ";
+    content: ' ';
     background: var(--body-bg);
     border-radius: 11px;
     box-shadow: 0 2px 4px var(--shadow-color);

less/common/ColorInput.less

@@ -1,7 +1,8 @@
 .ColorInput {
   position: relative;
 
-  &-preview, &-icon {
+  &-preview,
+  &-icon {
     position: absolute;
     right: 8px;
     bottom: 8px;

less/common/Dropdown.less

@@ -24,7 +24,9 @@
   }
 
   > li {
-    > a, > button, > span {
+    > a,
+    > button,
+    > span {
       padding: 8px 15px;
       display: block;
       width: 100%;
@@ -59,13 +61,15 @@
         background: none !important;
       }
     }
-    > a, > button {
+    > a,
+    > button {
       &:hover {
         background: var(--control-bg);
       }
     }
     &.active {
-      > a, > button {
+      > a,
+      > button {
         background: var(--control-bg);
       }
     }
@@ -100,17 +104,15 @@
   height: 1px;
 }
 
-
 .dropdown-backdrop {
   position: fixed;
   left: 0;
   right: 0;
   bottom: 0;
   top: 0;
-  z-index: calc(~"var(--zindex-dropdown) - 10");
+  z-index: calc(~'var(--zindex-dropdown) - 10');
 }
 
-
 .Dropdown--split {
   .Dropdown-toggle .Button-icon {
     display: none;
@@ -131,7 +133,8 @@
 
   @media @tablet-up {
     .Dropdown-menu li:first-child {
-      &, + li.Dropdown-separator {
+      &,
+      + li.Dropdown-separator {
         display: none;
       }
     }
@@ -156,7 +159,6 @@
   }
 }
 
-
 @media @phone {
   .Dropdown.open {
     z-index: var(--zindex-modal);
@@ -182,7 +184,8 @@
     transition: transform 0.3s, visibility 0s 0.3s;
 
     > li {
-      > a, > button {
+      > a,
+      > button {
         background: var(--body-bg);
         font-size: 16px;
         padding: 15px 20px;
@@ -200,8 +203,10 @@
       }
     }
     > .active {
-      > a, > button {
+      > a,
-        &, &:hover {
+      > button {
+        &,
+        &:hover {
           background: var(--primary-color) !important;
           color: #fff !important;
         }

less/common/Form.less

@@ -9,9 +9,9 @@
 .Form--centered {
   text-align: center;
 
-  .FormControl[type=text],
+  .FormControl[type='text'],
-  .FormControl[type=email],
+  .FormControl[type='email'],
-  .FormControl[type=password],
+  .FormControl[type='password'],
   .Button {
     margin: 0 auto;
     text-align: center;

less/common/FormControl.less

@@ -1,5 +1,5 @@
 .FormControl {
-  --transition: border-color .15s, background .15s;
+  --transition: border-color 0.15s, background 0.15s;
   display: block;
   width: 100%;
   height: 36px;

less/common/Modal.less

@@ -147,7 +147,7 @@
       transform: none !important;
     }
     &:before {
-      content: " ";
+      content: ' ';
       .header-background();
       position: absolute;
     }
@@ -183,7 +183,6 @@
     z-index: 1;
   }
   .Modal-content {
-
     border: 0;
     border-radius: var(--border-radius);
     box-shadow: 0 7px 15px var(--shadow-color);

less/common/Navigation.less

@@ -28,7 +28,8 @@
   .Navigation-pin {
     display: block;
   }
-  .hasPane.panePinned, .hasPane.paneShowing {
+  .hasPane.panePinned,
+  .hasPane.paneShowing {
     .Navigation-back {
       border-radius: var(--border-radius) 0 0 var(--border-radius) !important;
     }

less/common/Search.less

@@ -14,8 +14,8 @@
     }
 
     // ...so we display the ring around the icon inside the button, with an offset
-    .add-keyboard-focus-ring-nearby("> *");
+    .add-keyboard-focus-ring-nearby('> *');
-    .add-keyboard-focus-ring-nearby-offset("> *", 4px);
+    .add-keyboard-focus-ring-nearby-offset('> *', 4px);
   }
 }
 @media @tablet-up {

less/common/Table.less

@@ -8,16 +8,21 @@
     text-align: start;
   }
 
-  td, th {
+  td,
+  th {
     border-bottom: 1px solid var(--body-bg);
     color: var(--control-color);
   }
 
-  td, th, .Checkbox, &-controls-item {
+  td,
+  th,
+  .Checkbox,
+  &-controls-item {
     padding: 10px 15px;
   }
 
-  & &-checkbox, & &-controls {
+  & &-checkbox,
+  & &-controls {
     padding: 0;
   }
 
@@ -55,7 +60,8 @@
       cursor: pointer;
     }
 
-    &.highlighted .Checkbox, .Checkbox:hover {
+    &.highlighted .Checkbox,
+    .Checkbox:hover {
       &:not(.disabled) {
         background: var(--control-bg-shaded);
       }

less/common/TextEditor.less

@@ -7,7 +7,9 @@
   font-size: 14px;
   line-height: 1.7;
 
-  &, &:focus, &[disabled] {
+  &,
+  &:focus,
+  &[disabled] {
     background: none;
     border: 0;
   }

less/common/Tooltip.less

@@ -14,11 +14,25 @@
   opacity: 0;
   transition: opacity 0.15s linear;
 
-  &.in     { opacity: 1; }
+  &.in {
-  &.top    { margin-top:  -3px; padding: var(--tooltip-arrow-width) 0; }
+    opacity: 1;
-  &.right  { margin-left:  3px; padding: 0 var(--tooltip-arrow-width); }
+  }
-  &.bottom { margin-top:   3px; padding: var(--tooltip-arrow-width) 0; }
+  &.top {
-  &.left   { margin-left: -3px; padding: 0 var(--tooltip-arrow-width); }
+    margin-top: -3px;
+    padding: var(--tooltip-arrow-width) 0;
+  }
+  &.right {
+    margin-left: 3px;
+    padding: 0 var(--tooltip-arrow-width);
+  }
+  &.bottom {
+    margin-top: 3px;
+    padding: var(--tooltip-arrow-width) 0;
+  }
+  &.left {
+    margin-left: -3px;
+    padding: 0 var(--tooltip-arrow-width);
+  }
 }
 
 // Wrapper for the tooltip content
@@ -46,28 +60,28 @@
   &.top .tooltip-arrow {
     bottom: 0;
     left: 50%;
-    margin-left: calc(~"0px - var(--tooltip-arrow-width)");
+    margin-left: calc(~'0px - var(--tooltip-arrow-width)');
     border-width: var(--tooltip-arrow-width) var(--tooltip-arrow-width) 0;
     border-top-color: var(--tooltip-bg);
   }
   &.right .tooltip-arrow {
     top: 50%;
     left: 0;
-    margin-top: calc(~"0px - var(--tooltip-arrow-width)");
+    margin-top: calc(~'0px - var(--tooltip-arrow-width)');
     border-width: var(--tooltip-arrow-width) var(--tooltip-arrow-width) var(--tooltip-arrow-width) 0;
     border-right-color: var(--tooltip-bg);
   }
   &.left .tooltip-arrow {
     top: 50%;
     right: 0;
-    margin-top: calc(~"0px - var(--tooltip-arrow-width)");
+    margin-top: calc(~'0px - var(--tooltip-arrow-width)');
     border-width: var(--tooltip-arrow-width) 0 var(--tooltip-arrow-width) var(--tooltip-arrow-width);
     border-left-color: var(--tooltip-bg);
   }
   &.bottom .tooltip-arrow {
     top: 0;
     left: 50%;
-    margin-left: calc(~"0px - var(--tooltip-arrow-width)");
+    margin-left: calc(~'0px - var(--tooltip-arrow-width)');
     border-width: 0 var(--tooltip-arrow-width) var(--tooltip-arrow-width);
     border-bottom-color: var(--tooltip-bg);
   }

less/common/common.less

@@ -1,34 +1,34 @@
-@import "fontawesome";
+@import 'fontawesome';
-@import "brands";
+@import 'brands';
-@import "regular";
+@import 'regular';
-@import "solid";
+@import 'solid';
-@fa-font-path: "./fonts";
+@fa-font-path: './fonts';
 
-@import "normalize";
+@import 'normalize';
-@import "print";
+@import 'print';
-@import "root";
+@import 'root';
-@import "scaffolding";
+@import 'scaffolding';
-@import "sideNav";
+@import 'sideNav';
 
-@import "App";
+@import 'App';
-@import "Alert";
+@import 'Alert';
-@import "AlertManager";
+@import 'AlertManager';
-@import "Avatar";
+@import 'Avatar';
-@import "Badge";
+@import 'Badge';
-@import "Button";
+@import 'Button';
-@import "Checkbox";
+@import 'Checkbox';
-@import "ColorInput";
+@import 'ColorInput';
-@import "Dropdown";
+@import 'Dropdown';
-@import "EditUserModal";
+@import 'EditUserModal';
-@import "Form";
+@import 'Form';
-@import "FormControl";
+@import 'FormControl';
-@import "LoadingIndicator";
+@import 'LoadingIndicator';
-@import "Modal";
+@import 'Modal';
-@import "Navigation";
+@import 'Navigation';
-@import "Placeholder";
+@import 'Placeholder';
-@import "Search";
+@import 'Search';
-@import "Select";
+@import 'Select';
-@import "Table";
+@import 'Table';
-@import "TextEditor";
+@import 'TextEditor';
-@import "Tooltip";
+@import 'Tooltip';
-@import "ValidationError";
+@import 'ValidationError';

less/common/mixins.less

@@ -1,7 +1,7 @@
-@import "mixins/accessibility.less";
+@import 'mixins/accessibility.less';
-@import "mixins/border-radius.less";
+@import 'mixins/border-radius.less';
-@import "mixins/button-color.less";
+@import 'mixins/button-color.less';
-@import "mixins/clearfix.less";
+@import 'mixins/clearfix.less';
-@import "mixins/light-contents.less";
+@import 'mixins/light-contents.less';
-@import "mixins/header-background.less";
+@import 'mixins/header-background.less';
-@import "mixins/vendor-prefixes.less";
+@import 'mixins/vendor-prefixes.less';

less/common/mixins/accessibility.less

@@ -50,7 +50,7 @@
  *? button :focus-within { <styles>  }
  */
 .add-keyboard-focus-ring(@customFocusSelector) {
-  @realFocusSelector: ~"@{customFocusSelector}";
+  @realFocusSelector: ~'@{customFocusSelector}';
 
   &@{realFocusSelector} {
     #private.__focus-ring-styles();
@@ -69,7 +69,7 @@
  *? button:focus-within + .myOtherElement { <styles> }
  */
 .add-keyboard-focus-ring-nearby(@nearbySelector) {
-  @realNearbySelector: ~"@{nearbySelector}";
+  @realNearbySelector: ~'@{nearbySelector}';
 
   // We need to declare these separately, otherwise
   // browsers will ignore `:focus-visible` as they
@@ -124,7 +124,7 @@
     outline-offset: @offset;
   }
 
-  @realFocusSelector: ~"@{customFocusSelector}";
+  @realFocusSelector: ~'@{customFocusSelector}';
 
   &@{realFocusSelector} {
     .offset();
@@ -143,7 +143,7 @@
  *? button:focus-within + .myOtherElement { <styles> }
  */
 .add-keyboard-focus-ring-nearby-offset(@nearbySelector, @offset) {
-  @realNearbySelector: ~"@{nearbySelector}";
+  @realNearbySelector: ~'@{nearbySelector}';
 
   .offset() {
     outline-offset: @offset;

less/common/mixins/button-color.less

@@ -14,7 +14,7 @@
  * }
  */
 .Button--color-vars(@color; @background; @name: 'button') {
-  @componentName: ~"@{name}";
+  @componentName: ~'@{name}';
 
   --@{componentName}-color: @color;
   --@{componentName}-bg: @background;
@@ -24,11 +24,11 @@
 }
 
 .Button--color-auto(@name: 'button') {
-  --button-color: var(~"--@{name}-color");
+  --button-color: var(~'--@{name}-color');
-  --button-bg: var(~"--@{name}-bg");
+  --button-bg: var(~'--@{name}-bg');
-  --button-bg-hover: var(~"--@{name}-bg-hover");
+  --button-bg-hover: var(~'--@{name}-bg-hover');
-  --button-bg-active: var(~"--@{name}-bg-active");
+  --button-bg-active: var(~'--@{name}-bg-active');
-  --button-bg-disabled: var(~"--@{name}-bg-disabled");
+  --button-bg-disabled: var(~'--@{name}-bg-disabled');
 }
 
 /**

less/common/mixins/clearfix.less

@@ -13,7 +13,7 @@
 .clearfix() {
   &:before,
   &:after {
-    content: " "; // 1
+    content: ' '; // 1
     display: table; // 2
   }
   &:after {

less/common/mixins/light-contents.less

@@ -1,26 +1,29 @@
 // This is a mixin which styles components (buttons, inputs, etc.) for use on
 // dark backgrounds.
 .light-contents(@color: #fff; @control-bg: fade(#000, 10%); @control-color: #fff; @name: 'light-content') {
-  &, a {
+  &,
-    color: var(~"--@{name}-color", @color);
+  a {
+    color: var(~'--@{name}-color', @color);
   }
-  .Button--link, .Search-input {
+  .Button--link,
-    color: var(~"--@{name}-control-color", @control-color);
+  .Search-input {
+    color: var(~'--@{name}-control-color', @control-color);
   }
   .FormControl {
-    background: var(~"--@{name}-control-bg", @control-bg);
+    background: var(~'--@{name}-control-bg', @control-bg);
     border: 0;
-    color: var(~"--@{name}-control-color", @control-color);
+    color: var(~'--@{name}-control-color', @control-color);
-    .placeholder(var(~"--@{name}-control-color", @control-color));
+    .placeholder(var(~'--@{name}-control-color', @control-color));
 
     &:focus {
       color: @color;
-      background: var(~"--@{name}-control-bg-shaded", fadein(darken(@control-bg, 5%), 10%));
+      background: var(~'--@{name}-control-bg-shaded', fadein(darken(@control-bg, 5%), 10%));
     }
   }
-  .Button, .Button:hover {
+  .Button,
-    color: var(~"--@{name}-control-color", @control-color);
+  .Button:hover {
-    background: var(~"--@{name}-control-bg", @control-bg);
+    color: var(~'--@{name}-control-color', @control-color);
+    background: var(~'--@{name}-control-bg', @control-bg);
   }
   .Button--flat {
     background: transparent;
@@ -30,13 +33,13 @@
   .Button:focus,
   .Button.focus,
   .open > .Dropdown-toggle.Button {
-    background: var(~"--@{name}-control-bg-fadedin", fadein(@control-bg, 5%));
+    background: var(~'--@{name}-control-bg-fadedin', fadein(@control-bg, 5%));
-    color: var(~"--@{name}-control-color", @control-color);
+    color: var(~'--@{name}-control-color', @control-color);
   }
 }
 
 .light-contents-vars(@color: #fff; @control-bg: fade(#000, 10%); @control-color: #fff; @name: 'light-content') {
-  @componentName: ~"@{name}";
+  @componentName: ~'@{name}';
 
   --@{componentName}-color: @color;
   --@{componentName}-control-color: @control-color;

less/common/normalize.less

@@ -169,9 +169,9 @@ select {
  */
 
 button,
-[type="button"],
+[type='button'],
-[type="reset"],
+[type='reset'],
-[type="submit"] {
+[type='submit'] {
   -webkit-appearance: button;
 }
 
@@ -180,9 +180,9 @@ button,
  */
 
 button::-moz-focus-inner,
-[type="button"]::-moz-focus-inner,
+[type='button']::-moz-focus-inner,
-[type="reset"]::-moz-focus-inner,
+[type='reset']::-moz-focus-inner,
-[type="submit"]::-moz-focus-inner {
+[type='submit']::-moz-focus-inner {
   border-style: none;
   padding: 0;
 }
@@ -192,9 +192,9 @@ button::-moz-focus-inner,
  */
 
 button:-moz-focusring,
-[type="button"]:-moz-focusring,
+[type='button']:-moz-focusring,
-[type="reset"]:-moz-focusring,
+[type='reset']:-moz-focusring,
-[type="submit"]:-moz-focusring {
+[type='submit']:-moz-focusring {
   outline: 1px dotted ButtonText;
 }
 
@@ -232,8 +232,8 @@ progress {
  * Correct the cursor style of increment and decrement buttons in Chrome.
  */
 
-[type="number"]::-webkit-inner-spin-button,
+[type='number']::-webkit-inner-spin-button,
-[type="number"]::-webkit-outer-spin-button {
+[type='number']::-webkit-outer-spin-button {
   height: auto;
 }
 
@@ -242,7 +242,7 @@ progress {
  * 2. Correct the outline style in Safari.
  */
 
-[type="search"] {
+[type='search'] {
   -webkit-appearance: textfield; /* 1 */
   outline-offset: -2px; /* 2 */
 }
@@ -251,7 +251,7 @@ progress {
  * Remove the inner padding in Chrome and Safari on macOS.
  */
 
-[type="search"]::-webkit-search-decoration {
+[type='search']::-webkit-search-decoration {
   -webkit-appearance: none;
 }
 

less/common/print.less

@@ -21,18 +21,18 @@
   }
 
   a[href]:after {
-        content: " (" attr(href) ")";
+    content: ' (' attr(href) ')';
   }
 
   abbr[title]:after {
-        content: " (" attr(title) ")";
+    content: ' (' attr(title) ')';
   }
 
   // Don't show links that are fragment identifiers,
   // or use the `javascript:` pseudo protocol
-    a[href^="#"]:after,
+  a[href^='#']:after,
-    a[href^="javascript:"]:after {
+  a[href^='javascript:']:after {
-        content: "";
+    content: '';
   }
 
   pre,

less/common/root.less

@@ -1,5 +1,4 @@
 :root {
-
   // ---------------------------------
   // COLORS
 
@@ -52,8 +51,8 @@
   --switch-on-color: #58a400;
   --switch-off-color: #d0021b;
 
-  --enabled-color:                 #2ECC40;
+  --enabled-color: #2ecc40;
-  --disabled-color:                #FF4136;
+  --disabled-color: #ff4136;
 
   --validation-error-color: @validation-error-color;
 
@@ -112,8 +111,16 @@
   --screen-desktop-max: @screen-desktop-max;
   --screen-desktop-hd: @screen-desktop-hd;
 
-  @media @phone { --flarum-screen: phone; }
+  @media @phone {
-  @media @tablet { --flarum-screen: tablet; }
+    --flarum-screen: phone;
-  @media @desktop { --flarum-screen: desktop; }
+  }
-  @media @desktop-hd { --flarum-screen: desktop-hd; }
+  @media @tablet {
+    --flarum-screen: tablet;
+  }
+  @media @desktop {
+    --flarum-screen: desktop;
+  }
+  @media @desktop-hd {
+    --flarum-screen: desktop-hd;
+  }
 }

less/common/scaffolding.less

@@ -9,13 +9,18 @@
 body {
   background: var(--body-bg);
   color: var(--text-color);
-  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Ubuntu, Cantarell, Oxygen, Roboto, Helvetica, Arial, sans-serif;
+  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Ubuntu, Cantarell, Oxygen, Roboto, Helvetica, Arial, sans-serif;
   font-size: 13px;
   line-height: 1.5;
   overflow-y: scroll;
 }
 
-h1, h2, h3, h4, h5, h6 {
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
   line-height: 1.3;
 }
 
@@ -73,7 +78,7 @@ p {
 }
 
 mark {
-  background: #FFE300;
+  background: #ffe300;
   padding: 1px;
   border-radius: var(--border-radius);
   box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1);
@@ -94,7 +99,7 @@ legend {
   margin-bottom: 10px;
   color: var(--text-color);
 }
-input[type="search"] {
+input[type='search'] {
   -webkit-appearance: none;
 }
 
@@ -104,8 +109,8 @@ input[type="search"] {
   margin-bottom: 5px;
   cursor: pointer;
 
-  input[type=checkbox],
+  input[type='checkbox'],
-  input[type=radio] {
+  input[type='radio'] {
     margin-left: -20px;
     margin-top: 2px;
     float: left;
@@ -114,7 +119,7 @@ input[type="search"] {
 
 .fade {
   opacity: 0;
-  transition: opacity .15s linear;
+  transition: opacity 0.15s linear;
   &.in {
     opacity: 1;
   }

less/common/sideNav.less

@@ -60,7 +60,8 @@
     flex-shrink: 0;
     margin-right: 50px;
 
-    &, > ul {
+    &,
+    > ul {
       width: 190px;
     }
     > ul {
@@ -83,7 +84,7 @@
   -webkit-overflow-scrolling: touch;
 
   &:after {
-    content: " ";
+    content: ' ';
     position: absolute;
     left: 0;
     right: 0;
@@ -91,7 +92,8 @@
     border-bottom: 1px solid var(--control-bg);
   }
 
-  > ul > li, .Dropdown-menu > li {
+  > ul > li,
+  .Dropdown-menu > li {
     display: inline-block;
     margin: 0 20px 0 0;
     vertical-align: top;

less/common/variables.less

@@ -1,8 +1,8 @@
 // ---------------------------------
 // CONFIG
 
-@config-primary-color:             #536F90;
+@config-primary-color: #536f90;
-@config-secondary-color:           #536F90;
+@config-secondary-color: #536f90;
 @config-dark-mode: false;
 @config-colored-header: false;
 
@@ -76,8 +76,8 @@
 @alert-error-bg: @error-color;
 @alert-error-color: #fff;
 
-@alert-success-bg:                 #B4F1AF;
+@alert-success-bg: #b4f1af;
-@alert-success-color:              #33722D;
+@alert-success-color: #33722d;
 
 @validation-error-color: @error-color;
 
@@ -133,13 +133,13 @@
 
 @screen-desktop-hd: 1100px;
 
-@phone:                            ~"(max-width: @{screen-phone-max})";
+@phone: ~'(max-width: @{screen-phone-max})';
-@tablet:                           ~"(min-width: @{screen-tablet}) and (max-width: @{screen-tablet-max})";
+@tablet: ~'(min-width: @{screen-tablet}) and (max-width: @{screen-tablet-max})';
-@desktop:                          ~"(min-width: @{screen-desktop}) and (max-width: @{screen-desktop-max})";
+@desktop: ~'(min-width: @{screen-desktop}) and (max-width: @{screen-desktop-max})';
-@desktop-hd:                       ~"(min-width: @{screen-desktop-hd})";
+@desktop-hd: ~'(min-width: @{screen-desktop-hd})';
 
-@tablet-up:                        ~"(min-width: @{screen-tablet})";
+@tablet-up: ~'(min-width: @{screen-tablet})';
-@desktop-up:                       ~"(min-width: @{screen-desktop})";
+@desktop-up: ~'(min-width: @{screen-desktop})';
 
 // ---------------------------------
 // COMPONENTS
@@ -147,4 +147,4 @@
 @tooltip-bg: rgba(0, 0, 0, 0.9);
 @tooltip-color: #fff;
 
-@online-user-circle-color:         #7FBA00;
+@online-user-circle-color: #7fba00;

less/forum.less

@@ -1,24 +1,24 @@
-@import "common/common";
+@import 'common/common';
 
-@import "forum/ActivityPage";
+@import 'forum/ActivityPage';
-@import "forum/AvatarEditor";
+@import 'forum/AvatarEditor';
-@import "forum/Composer";
+@import 'forum/Composer';
-@import "forum/DiscussionHero";
+@import 'forum/DiscussionHero';
-@import "forum/DiscussionList";
+@import 'forum/DiscussionList';
-@import "forum/DiscussionListItem";
+@import 'forum/DiscussionListItem';
-@import "forum/DiscussionPage";
+@import 'forum/DiscussionPage';
-@import "forum/Hero";
+@import 'forum/Hero';
-@import "forum/IndexPage";
+@import 'forum/IndexPage';
-@import "forum/LogInButton";
+@import 'forum/LogInButton';
-@import "forum/LogInModal";
+@import 'forum/LogInModal';
-@import "forum/NotificationGrid";
+@import 'forum/NotificationGrid';
-@import "forum/NotificationList";
+@import 'forum/NotificationList';
-@import "forum/NotificationsDropdown";
+@import 'forum/NotificationsDropdown';
-@import "forum/Post";
+@import 'forum/Post';
-@import "forum/PostStream";
+@import 'forum/PostStream';
-@import "forum/Scrubber";
+@import 'forum/Scrubber';
-@import "forum/SettingsPage";
+@import 'forum/SettingsPage';
-@import "forum/SignUpModal";
+@import 'forum/SignUpModal';
-@import "forum/Slidable";
+@import 'forum/Slidable';
-@import "forum/UserCard";
+@import 'forum/UserCard';
-@import "forum/UserPage";
+@import 'forum/UserPage';

less/forum/ActivityPage.less

@@ -26,7 +26,8 @@
   position: relative;
   z-index: 1;
 
-  &, a {
+  &,
+  a {
     color: var(--muted-color);
   }
   a {

less/forum/Composer.less

@@ -41,18 +41,23 @@
     line-height: 1.5em;
     color: var(--secondary-color);
 
-    &, input, a {
+    &,
+    input,
+    a {
       font-size: 14px;
       font-weight: normal;
     }
-    input, a {
+    input,
+    a {
       color: inherit;
     }
     input {
       font-size: 16px;
       width: 500px;
 
-      &, &[disabled], &:focus {
+      &,
+      &[disabled],
+      &:focus {
         background: none;
         border: 0;
         padding: 0 20px 0 0;
@@ -127,7 +132,7 @@
       }
 
       &:before {
-        content: " ";
+        content: ' ';
         .header-background();
         position: absolute;
         opacity: 0;
@@ -139,7 +144,7 @@
 
       & .Composer-controls {
         position: static;
-        z-index: calc(~"var(--zindex-header) + 1");
+        z-index: calc(~'var(--zindex-header) + 1');
 
         li:not(.App-backControl) {
           display: none;
@@ -159,7 +164,7 @@
     right: 0;
     bottom: 0;
     left: 0;
-    z-index: calc(~"var(--zindex-composer) - 1");
+    z-index: calc(~'var(--zindex-composer) - 1');
     background-color: var(--overlay-bg);
     opacity: 0.9;
   }
@@ -185,10 +190,10 @@
       }
 
       .normal &:first-child {
-        margin: calc(~"0px - var(--header-height-phone)") 50px 0;
+        margin: calc(~'0px - var(--header-height-phone)') 50px 0;
         text-align: center;
         position: relative;
-        z-index: calc(~"var(--zindex-header) + 1");
+        z-index: calc(~'var(--zindex-header) + 1');
         border: 0;
         white-space: nowrap;
         overflow: hidden;
@@ -230,7 +235,8 @@
     height: 300px;
     transition: background 0.2s, box-shadow 0.2s;
 
-    &.active, &.fullScreen {
+    &.active,
+    &.fullScreen {
       background: var(--body-bg);
     }
     &.active:not(.fullScreen) {
@@ -279,7 +285,8 @@
     margin-bottom: -17px;
     position: relative;
 
-    .minimized &, .fullScreen & {
+    .minimized &,
+    .fullScreen & {
       display: none;
     }
   }
@@ -287,14 +294,16 @@
     float: left;
     .Avatar--size(64px);
 
-    .minimized &, .fullScreen & {
+    .minimized &,
+    .fullScreen & {
       display: none;
     }
   }
   .ComposerBody-content {
     margin-left: 85px;
 
-    .minimized &, .fullScreen & {
+    .minimized &,
+    .fullScreen & {
       margin-left: 0;
     }
   }

less/forum/DiscussionListItem.less

@@ -176,8 +176,6 @@
   }
 }
 
-
-
 @media @tablet-up {
   .DiscussionListItem {
     position: relative;

less/forum/DiscussionPage.less

@@ -15,7 +15,8 @@
       margin: 15px;
       display: inline-block;
 
-      &.item-controls, &.item-scrubber {
+      &.item-controls,
+      &.item-scrubber {
         margin: 0;
         display: block;
       }
@@ -26,7 +27,8 @@
   .DiscussionPage-nav {
     float: right;
 
-    &, > ul {
+    &,
+    > ul {
       width: 150px;
     }
     > ul {
@@ -38,7 +40,8 @@
         margin-bottom: 10px;
       }
     }
-    .ButtonGroup, .Button {
+    .ButtonGroup,
+    .Button {
       width: 100%;
     }
     .ButtonGroup:not(.itemCount1) {
@@ -69,12 +72,12 @@
 
 @media @tablet-up {
   .DiscussionPage-list {
-    left: calc(~"-6px - var(--pane-width)");
+    left: calc(~'-6px - var(--pane-width)');
     position: absolute;
     z-index: var(--zindex-pane);
     overflow: auto;
     top: var(--header-height);
-    height: ~"calc(100vh - var(--header-height))";
+    height: ~'calc(100vh - var(--header-height))';
     width: var(--pane-width);
     background: var(--body-bg);
     padding-bottom: 40px;
@@ -132,7 +135,8 @@
     }
   }
   // When the pane is pinned, move the other page content inwards
-  .App-content, .App-footer {
+  .App-content,
+  .App-footer {
     .hasPane.panePinned & {
       margin-left: var(--pane-width);
 

less/forum/IndexPage.less

@@ -17,7 +17,8 @@
 .IndexPage-toolbar {
   margin-bottom: 15px;
 }
-.IndexPage-toolbar-view, .IndexPage-toolbar-action {
+.IndexPage-toolbar-view,
+.IndexPage-toolbar-action {
   display: inline-block;
   margin: 0;
   list-style: none;

less/forum/NotificationList.less

@@ -85,7 +85,7 @@
     padding-right: var(--overlap);
 
     .Badge {
-      margin-right: calc(~"0px - var(--overlap)");
+      margin-right: calc(~'0px - var(--overlap)');
       position: relative;
       .Badge--size(21px);
     }
@@ -107,8 +107,8 @@
   grid-template-columns: auto auto 1fr auto;
 
   grid-template-areas:
-    "avatar icon title   button"
+    'avatar icon title   button'
-    "x      x    excerpt excerpt";
+    'x      x    excerpt excerpt';
 
   align-items: baseline;
   row-gap: 1px;

less/forum/Post.less

@@ -20,7 +20,8 @@
   margin-bottom: 15px;
   color: var(--muted-color);
 
-  &, a {
+  &,
+  a {
     color: var(--muted-color);
   }
   > ul {
@@ -43,7 +44,8 @@
   h3 {
     display: inline;
   }
-  h3, h3 a {
+  h3,
+  h3 a {
     color: var(--heading-color);
     font-weight: bold;
     font-size: 14px;
@@ -95,14 +97,19 @@
   overflow: auto;
   overflow-wrap: break-word;
 
-  p, ul, ol, blockquote {
+  p,
+  ul,
+  ol,
+  blockquote {
     margin-bottom: 1em;
   }
   a {
     border-bottom: 1px solid var(--control-bg);
     font-weight: 600;
 
-    &:hover, &:focus, &:active {
+    &:hover,
+    &:focus,
+    &:active {
       text-decoration: none;
       border-color: var(--link-color);
     }
@@ -120,13 +127,13 @@
   }
   // Inline code
   code {
-    font-family: source-code-pro, Monaco, Consolas, "Courier New", monospace;
+    font-family: source-code-pro, Monaco, Consolas, 'Courier New', monospace;
     padding: 5px;
     background: var(--code-bg);
     color: var(--code-color);
     line-height: 1.3;
     font-size: 90%;
-    border-radius: 4px
+    border-radius: 4px;
   }
   // Code blocks
   pre {
@@ -149,10 +156,15 @@
       overflow-x: auto;
       // Backwards compatibility for browsers that don't support `max()`
       max-height: 50vh;
-      max-height: ~"max(50vh, 250px)";
+      max-height: ~'max(50vh, 250px)';
     }
   }
-  h1, h2, h3, h4, h5, h6 {
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
     margin-top: 1em;
     margin-bottom: 16px;
     font-weight: bold;
@@ -169,17 +181,20 @@
   h4 {
     font-size: 125%;
   }
-  h5, h6 {
+  h5,
+  h6 {
     font-size: 100%;
   }
   h6 {
     color: var(--muted-more-color);
   }
-  img, iframe {
+  img,
+  iframe {
     max-width: 100%;
   }
 }
-.Post-body, .Post-preview {
+.Post-body,
+.Post-preview {
   > *:first-child {
     margin-top: 0 !important;
   }
@@ -190,18 +205,27 @@
 }
 
 .Post--hidden {
-  .Post-header, .Post-header a, .PostUser h3, .PostUser h3 a {
+  .Post-header,
+  .Post-header a,
+  .PostUser h3,
+  .PostUser h3 a {
     color: var(--muted-more-color);
   }
   &:not(.revealContent) {
     .Post-header {
       margin-bottom: 0;
     }
-    .Post-body, .Post-footer, h3 .Avatar, .PostUser-badges {
+    .Post-body,
+    .Post-footer,
+    h3 .Avatar,
+    .PostUser-badges {
       display: none;
     }
   }
-  .Post-body, .Post-footer, h3 .Avatar, .PostUser-badges {
+  .Post-body,
+  .Post-footer,
+  h3 .Avatar,
+  .PostUser-badges {
     opacity: 0.5;
   }
   .Post-header .Button--more {
@@ -227,7 +251,8 @@
   color: var(--text-color);
   font-weight: bold;
 }
-.PostMeta-time, .PostMeta-ip {
+.PostMeta-time,
+.PostMeta-ip {
   margin-left: 5px;
 }
 .PostMeta-permalink {
@@ -248,7 +273,8 @@
   float: left;
 }
 .EventPost {
-  &, a {
+  &,
+  a {
     color: var(--muted-color);
   }
   a {
@@ -259,13 +285,15 @@
   font-size: 14px;
 }
 
-.Post-footer, .Post-actions {
+.Post-footer,
+.Post-actions {
   > ul {
     list-style-type: none;
     padding: 0;
     margin: 0;
   }
-  &, a {
+  &,
+  a {
     color: var(--muted-color);
   }
   a {
@@ -303,7 +331,8 @@
 
   transition: opacity 0.2s;
 
-  .EventPost &, .Post--hidden:not(.revealContent) & {
+  .EventPost &,
+  .Post--hidden:not(.revealContent) & {
     margin-top: -27px;
     margin-bottom: -15px;
   }
@@ -322,7 +351,9 @@
       vertical-align: top;
     }
   }
-  .Post:hover &, .Post:focus-within &, &.open {
+  .Post:hover &,
+  .Post:focus-within &,
+  &.open {
     opacity: 1;
   }
 }
@@ -389,7 +420,8 @@
   .Post {
     padding-left: 20px + @avatar-column-width;
   }
-  .CommentPost:not(.Post--hidden), .ReplyPlaceholder {
+  .CommentPost:not(.Post--hidden),
+  .ReplyPlaceholder {
     min-height: 64px + 40px; // avatar height + padding
   }
   .PostUser-avatar {

less/forum/PostStream.less

@@ -18,9 +18,15 @@
 }
 
 @keyframes blink {
-  0% {opacity: 0.5}
+  0% {
-  50% {opacity: 1}
+    opacity: 0.5;
-  100% {opacity: 0.5}
+  }
+  50% {
+    opacity: 1;
+  }
+  100% {
+    opacity: 0.5;
+  }
 }
 .LoadingPost {
   animation: blink 1s linear infinite;
@@ -58,9 +64,15 @@
 }
 
 @keyframes pulsate {
-  0% {transform: scale(1)}
+  0% {
-  50% {transform: scale(1.02)}
+    transform: scale(1);
-  100% {transform: scale(1)}
+  }
+  50% {
+    transform: scale(1.02);
+  }
+  100% {
+    transform: scale(1);
+  }
 }
 .pulsate {
   animation: pulsate 1s ease-in-out infinite;
@@ -70,8 +82,12 @@
 }
 
 @keyframes fadeIn {
-  0% {opacity: 0}
+  0% {
-  100% {opacity: 1}
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
 }
 .fadeIn {
   animation: fadeIn 0.4s ease-in-out;

less/forum/Scrubber.less

@@ -7,7 +7,8 @@
       font-size: 14px;
       margin-right: 2px;
     }
-    &:hover, &:focus {
+    &:hover,
+    &:focus {
       text-decoration: none;
       color: var(--link-color);
     }
@@ -21,7 +22,8 @@
   cursor: pointer;
   .user-select(none);
 }
-.Scrubber-before, .Scrubber-after {
+.Scrubber-before,
+.Scrubber-after {
   border-left: 1px solid var(--control-bg);
 }
 .Scrubber-unread {

less/forum/SettingsPage.less

@@ -26,4 +26,3 @@
     margin-right: 5px;
   }
 }
-

less/forum/UserCard.less

@@ -15,7 +15,8 @@
   width: 500px;
   box-shadow: 0 2px 6px var(--shadow-color);
 
-  &, .darkenBackground {
+  &,
+  .darkenBackground {
     border-radius: var(--border-radius);
   }
   .container {
@@ -76,9 +77,10 @@
   margin: 0 0 0 15px;
   padding: 0;
 
-  &, > li {
+  &,
+  > li {
     display: inline-block;
-    margin-right: 5px
+    margin-right: 5px;
   }
 }
 .UserCard-info {