Add prettier

.github/workflows/lint.yml

···
 
       - run: 'yarn lint --max-warnings 89 > /dev/null'
 
+      - run: yarn pretty
+
       - run: ./bin/update_licence.sh -nf
 
       - name: Run PHPCS

.prettierignore

···
+/*
+!/resources
+/resources/*
+!/resources/css

.prettierrc

···
+{}

package.json

···
     "dev": "yarn run development",
     "development": "cross-env NODE_ENV=development webpack",
     "lint": "eslint --cache 'resources/js/**/*.{js,ts,tsx}' 'tests/karma/**/*.{ts,tsx}' '*.js'",
+    "pretty": "prettier --check resources/css/**/*.less",
     "prod": "yarn run production",
     "production": "cross-env NODE_ENV=production webpack",
     "watch": "yarn run development --watch",
···
     "photoswipe": "^4.1.1",
     "postcss": "^8.4.31",
     "postcss-loader": "^7.3.3",
+    "prettier": "^3.3.3",
     "qtip2": "https://github.com/notbakaneko/qTip2.git#cd5f038667d2b23a44f4274c46de01834d704ce6",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",

resources/css/app.less

···
 @import "~inter-ui/inter.css";
 
 @import "~bootstrap/less/bootstrap";
-@import 'bootstrap-overrides';
+@import "bootstrap-overrides";
 
 @import "~qtip2/dist/jquery.qtip.css";
 @import "~photoswipe/dist/photoswipe.css";

resources/css/base.less

···
   margin: 10px 0 0 0;
 }
 
-h1, h2, h3, h4, h5, h6 {
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
   color: @osu-colour-c1;
 }
 
 a {
   .link-default();
   outline-style: none;
-  &:link, &:visited, &:hover, &:active { outline-style: none; }
+  &:link,
+  &:visited,
+  &:hover,
+  &:active {
+    outline-style: none;
+  }
 
   text-decoration: none;
-  &:hover { text-decoration: underline; }
+  &:hover {
+    text-decoration: underline;
+  }
 
   transition: color 80ms linear;
 }
···
 }
 
 @font-face {
-  font-family: 'FontAwesomeExtra';
-  src: url('~@fonts/extra/extra.eot?1280178');
-  src: url('~@fonts/extra/extra.eot?1280178#iefix') format('embedded-opentype'),
-       url('~@fonts/extra/extra.woff2?1280178') format('woff2'),
-       url('~@fonts/extra/extra.woff?1280178') format('woff'),
-       url('~@fonts/extra/extra.ttf?1280178') format('truetype'),
-       url('~@fonts/extra/extra.svg?1280178#extra') format('svg');
+  font-family: "FontAwesomeExtra";
+  src: url("~@fonts/extra/extra.eot?1280178");
+  src:
+    url("~@fonts/extra/extra.eot?1280178#iefix") format("embedded-opentype"),
+    url("~@fonts/extra/extra.woff2?1280178") format("woff2"),
+    url("~@fonts/extra/extra.woff?1280178") format("woff"),
+    url("~@fonts/extra/extra.ttf?1280178") format("truetype"),
+    url("~@fonts/extra/extra.svg?1280178#extra") format("svg");
   font-weight: normal;
   font-style: normal;
 }
···
   font-weight: 600;
 }
 
-input[type="checkbox"], input[type="radio"] {
+input[type="checkbox"],
+input[type="radio"] {
   margin: 2px 0 0;
 }
 
-a[disabled] { &:extend(.btn[disabled]); }
+a[disabled] {
+  &:extend(.btn[disabled]);
+}
 
-.clickable-row { cursor: pointer; }
+.clickable-row {
+  cursor: pointer;
+}
 
 [data-visibility] {
   will-change: opacity;

resources/css/bbcode.less

···
     position: relative;
 
     &::before {
-      content: '';
+      content: "";
       position: absolute;
       left: 0;
       top: 0;
···
     max-width: 100%;
   }
 
-  ol, ul {
+  ol,
+  ul {
     padding-left: 20px;
   }
 

resources/css/bem/account-edit-entry.less

···
     // placeholder to prevent triggering dragleave when entring child element
     &::after {
       .full-size();
-      content: '';
+      content: "";
     }
   }
 
···
       padding-left: (@label-width + 10px);
     }
 
-    .@{top}[data-form-error-state=error] & {
+    .@{top}[data-form-error-state="error"] & {
       display: block;
     }
   }
···
       border-color: @osu-colour-l1;
     }
 
-    .@{top}[data-form-error-state=error] & {
+    .@{top}[data-form-error-state="error"] & {
       border-color: @red;
     }
 

resources/css/bem/account-edit-status.less

···
     &--saved {
       color: @green;
 
-      [data-account-edit-state=saved] & {
+      [data-account-edit-state="saved"] & {
         opacity: 1;
       }
     }
···
         }
       }
 
-      [data-account-edit-state=saving] & {
+      [data-account-edit-state="saving"] & {
         opacity: 1;
       }
     }

resources/css/bem/account-edit.less

···
     &::after {
       .inner-shadow-top();
       .full-size();
-      content: '';
+      content: "";
       pointer-events: none;
     }
   }

resources/css/bem/admin-contest-entry.less

···
   }
 
   &__column {
-    && { // bootstrap override
+    && {
+      // bootstrap override
       vertical-align: middle;
     }
 

resources/css/bem/admin-menu.less

···
     width: @admin-menu-icon-width;
     background-color: #333;
 
-    &:hover, &.js-menu--active {
+    &:hover,
+    &.js-menu--active {
       background-color: @blue-darker;
     }
   }

resources/css/bem/artist-album.less

···
     &--new {
       &::after {
         .full-size();
-        content: '';
-        background: linear-gradient(to left, @osu-colour-orange-1 0%, transparent 30%)
+        content: "";
+        background: linear-gradient(
+          to left,
+          @osu-colour-orange-1 0%,
+          transparent 30%
+        );
       }
     }
   }

resources/css/bem/artist-link-button.less

···
 
   transition: 0.1s ease-out;
 
-  &:hover, &:focus {
+  &:hover,
+  &:focus {
     color: white;
     text-decoration: none;
   }

resources/css/bem/artist-sidebar-album.less

···
   flex-direction: column;
   align-items: center;
 
-  &:hover, &:active {
+  &:hover,
+  &:active {
     color: white;
     text-decoration: none;
   }

resources/css/bem/artist-track-search-form-switches.less

···
     text-align: center;
     white-space: nowrap;
 
-    &:focus, &:active {
+    &:focus,
+    &:active {
       color: hsl(var(--hsl-c1));
     }
 

resources/css/bem/artist-track-search-form.less

···
     text-align: center;
     white-space: nowrap;
 
-    &:focus, &:active {
+    &:focus,
+    &:active {
       color: hsl(var(--hsl-c1));
     }
 

resources/css/bem/artist-track.less

···
   }
 
   &--original {
-    background-image: linear-gradient(to right, hsla(var(--hsl-pink-1), 0.2), hsla(var(--hsl-pink-1), 0) 50%);
+    background-image: linear-gradient(
+      to right,
+      hsla(var(--hsl-pink-1), 0.2),
+      hsla(var(--hsl-pink-1), 0) 50%
+    );
   }
 
   &__button {

resources/css/bem/artist.less

···
       margin-bottom: 10px;
     }
 
-    > h1, h2, h3, h4, h5, h6 {
+    > h1,
+    h2,
+    h3,
+    h4,
+    h5,
+    h6 {
       color: white;
     }
 

resources/css/bem/audio-player.less

···
 
   @_height: 40px;
 
-  --current-time: '0:00';
-  --duration: '0:00';
+  --current-time: "0:00";
+  --duration: "0:00";
   --progress: 0;
 
   height: @_height;
···
     border-radius: 10000px;
     --current-head-opacity: 0;
     --bar: 0;
-    transition: height 100ms, opacity 100ms;
+    transition:
+      height 100ms,
+      opacity 100ms;
     user-select: none;
     position: relative;
 
     // extended hover area
     &::before {
       position: absolute;
-      content: '';
+      content: "";
       display: block;
       left: -5px;
       right: $left;
···
       bottom: $top;
     }
 
-    &:hover, &[data-audio-dragging="1"] {
+    &:hover,
+    &[data-audio-dragging="1"] {
       height: 6px;
       --current-head-opacity: 1;
     }
···
       background-color: @osu-colour-h1;
       right: (-$width / 2);
       top: calc(50% - ($width / 2));
-      content: '';
+      content: "";
       display: block;
       opacity: var(--current-head-opacity);
       transition: inherit;
···
     min-width: (@_colon + @_number * 3);
 
     &::before {
-      content: var(--timestamp, '');
+      content: var(--timestamp, "");
     }
 
     .@{_top}[data-audio-time-format="minute"] & {
···
 
     &--total {
       color: @osu-colour-c2;
-      --timestamp: '--:--';
+      --timestamp: "--:--";
 
       .@{_top}[data-audio-has-duration="1"] & {
         --timestamp: var(--duration);

resources/css/bem/avatar.less

···
     box-shadow: none;
     border-radius: 50%;
     overflow: hidden;
-    transition: width var(--header-pinned-animation-duration), height var(--header-pinned-animation-duration);
+    transition:
+      width var(--header-pinned-animation-duration),
+      height var(--header-pinned-animation-duration);
     position: relative;
 
     .@{header-pinned} & {
···
       height: @nav2-avatar-height--pinned;
     }
 
-    &.js-click-menu--active, &:hover {
+    &.js-click-menu--active,
+    &:hover {
       box-shadow: inset 0 0 0 3px hsl(var(--hsl-c1));
     }
   }
···
   &--restricted {
     &::before {
       .full-size();
-      content: '';
-      background-image: url('~@images/layout/exclamation-icon.svg');
+      content: "";
+      background-image: url("~@images/layout/exclamation-icon.svg");
       background-size: 60%;
       background-position: center;
       background-repeat: no-repeat;

resources/css/bem/badge-achievement.less

···
 
   &--dynamic-height {
     flex: none;
-    width: (1em * @_big-width / @_big-height );
+    width: (1em * @_big-width / @_big-height);
     height: 1em;
   }
 

resources/css/bem/bbcode-editor.less

···
       font-size: @font-size--title-small;
     }
 
-    .@{_top}[data-state=preview] & {
+    .@{_top}[data-state="preview"] & {
       display: none;
     }
 
-    .@{_top}[data-state=loading-preview] & {
+    .@{_top}[data-state="loading-preview"] & {
       opacity: 0.5;
       pointer-events: none;
     }
 
     .@{_top}--beatmapset-description-editor & {
       // approximation of 80vh - 3 lines of button bars and editor padding
-      max-height: calc(80vh - 2 * @editor-padding - 2 * @content-padding - 3 * (1em + 2 * @buttons-margin));
+      max-height: calc(
+        80vh - 2 * @editor-padding - 2 * @content-padding - 3 *
+          (1em + 2 * @buttons-margin)
+      );
     }
   }
 
···
     &--deactivate {
       display: none;
 
-      .js-forum-topic-reply[data-state=stick] & {
+      .js-forum-topic-reply[data-state="stick"] & {
         display: block;
       }
     }
 
     &--hide-on-preview {
-      .@{_top}[data-state=loading-preview] &,
-      .@{_top}[data-state=preview] & {
+      .@{_top}[data-state="loading-preview"] &,
+      .@{_top}[data-state="preview"] & {
         display: none;
       }
     }
 
     &--hide-on-write {
-      .@{_top}[data-state=write] & {
+      .@{_top}[data-state="write"] & {
         display: none;
       }
     }
···
     }
 
     &--toolbar {
-      .@{_top}[data-state=loading-preview] &,
-      .@{_top}[data-state=preview] & {
+      .@{_top}[data-state="loading-preview"] &,
+      .@{_top}[data-state="preview"] & {
         display: none;
       }
     }
···
   &__preview {
     display: none;
 
-    .@{_top}[data-state=preview] & {
+    .@{_top}[data-state="preview"] & {
       display: block;
       min-height: 0;
       overflow-y: auto;

resources/css/bem/beatmap-discussion-editor-insertion-menu.less

···
   pointer-events: none; // as to not impede text-selection/etc within the editor itself
 
   &::before {
-    content: '';
+    content: "";
     background: @osu-colour-b3;
     position: absolute;
     top: 9px;

resources/css/bem/beatmap-discussion-editor.less

···
     position: relative; // Slate's placeholder element has width: 100% directly set on it...
 
     .@{_top}--readonly & {
-        &:hover .@{_top}__hover-menu {
-          display: none;
-        }
+      &:hover .@{_top}__hover-menu {
+        display: none;
+      }
     }
 
     &:hover .@{_top}__hover-menu {

resources/css/bem/beatmap-discussion-post.less

···
 
   @_content-gutter-base: 15px;
 
-  transition: background-color .1s ease-in-out;
+  transition: background-color 0.1s ease-in-out;
   // margin here instead of padding on __content to make Chrome anchor when images above load in.
   // even 1 px margin is enough to fix the shifting.
   margin: 10px 0;
···
 
     &::before {
       .full-size();
-      content: '';
+      content: "";
       background-color: hsl(var(--hsl-blue-3));
       width: 5px;
     }
···
 
     .@{_top}--reply & {
       &::after {
-        content: '';
+        content: "";
         height: 1px;
         align-self: center;
         flex: 1;
···
       min-height: 3em;
 
       // --reply part to override top modifier
-      &, .@{_top}--reply & {
+      &,
+      .@{_top}--reply & {
         font-size: @font-size--phone-input;
 
         @media @desktop {

resources/css/bem/beatmap-discussion-system-post.less

···
     // the fancy green line
     &::after {
       flex: 1;
-      content: '';
+      content: "";
       background-color: @resolved-color;
       align-self: center;
       height: 1px;

resources/css/bem/beatmap-discussion-user-card.less

···
   }
 
   &__user-badge {
-    min-height:16px;
+    min-height: 16px;
     margin-top: 2px;
   }
 

resources/css/bem/beatmap-discussion-vote.less

···
   font-size: 12px;
 
   &--up {
-    &, &:hover {
+    &,
+    &:hover {
       color: @osu-colour-lime-3;
     }
   }
 
   &--down {
-    &, &:hover {
+    &,
+    &:hover {
       color: @osu-colour-orange-2;
     }
   }

resources/css/bem/beatmap-discussion.less

···
 
       &::before {
         .full-size();
-        content: '';
+        content: "";
         width: 1px;
         right: 100%;
-        background-image: linear-gradient(to bottom, hsla(var(--hsl-b1), 0), @osu-colour-b1 50%, hsla(var(--hsl-b1), 0));
+        background-image: linear-gradient(
+          to bottom,
+          hsla(var(--hsl-b1), 0),
+          @osu-colour-b1 50%,
+          hsla(var(--hsl-b1), 0)
+        );
       }
     }
   }
···
     &::before {
       @media @mobile {
         overflow-anchor: none;
-        content: '';
+        content: "";
         position: absolute;
         right: 0;
         top: 0;
···
       .thicker-box-shadow();
       &::after {
         .full-size();
-        content: '';
+        content: "";
         background: fade(white, 15%);
         pointer-events: none;
         opacity: 0.5;
-        animation: flash .5s;
+        animation: flash 0.5s;
         @keyframes flash {
-          0% { opacity: 1; }
-          100% { opacity: 0.5; }
+          0% {
+            opacity: 1;
+          }
+          100% {
+            opacity: 0.5;
+          }
         }
       }
     }
···
     // hopefully enough for type and resolve status icons.
     width: 50px;
 
-    .@{_top}--timeline &, .@{_top}--preview & {
+    .@{_top}--timeline &,
+    .@{_top}--preview & {
       // with timestamp, timeline's line and dot.
       width: 110px;
     }
···
     .@{_top}--unread & {
       &::before {
         .full-size();
-        content: '';
+        content: "";
         background-color: @blue-darker;
         width: 5px;
       }

resources/css/bem/beatmap-discussions.less

···
     left: @_discussions-horizontal-padding;
 
     width: @_timeline-line-width;
-    height: calc(100% - (@_mode-circle-diameter + @_discussions-vertical-padding * 2));
+    height: calc(
+      100% - (@_mode-circle-diameter + @_discussions-vertical-padding * 2)
+    );
 
     margin: 0 ((@_mode-circle-diameter - @_timeline-line-width) / 2);
 

resources/css/bem/beatmap-pack.less

···
   width: 100%;
   margin: 2px 0;
 
-  &.js-accordion__item--expanded, &--expanded  {
+  &.js-accordion__item--expanded,
+  &--expanded {
     .thicker-box-shadow();
     z-index: 1;
   }
···
     background-color: @osu-colour-b3;
     display: flex;
 
-    .js-accordion__item--expanded &, .@{_top}--expanded & {
+    .js-accordion__item--expanded &,
+    .@{_top}--expanded & {
       background-color: @osu-colour-b2;
     }
 
···
   }
 
   &__name {
-    .js-accordion__item--expanded &, .@{_top}--expanded & {
+    .js-accordion__item--expanded &,
+    .@{_top}--expanded & {
       font-weight: 600;
     }
   }

resources/css/bem/beatmaps-popup.less

···
   }
 
   &::before {
-    content: '';
+    content: "";
     .thick-box-shadow();
     border: 2px solid hsl(var(--hsl-h1));
     height: calc(100% + var(--panel-height));

resources/css/bem/beatmapset-activities.less

···
 // See the LICENCE file in the repository root for full licence text.
 
 .beatmapset-activities {
+  color: white;
 
+  h2,
+  h3 {
     color: white;
+  }
 
-    h2, h3 {
-        color: white;
-    }
+  &__post-grow {
+    flex-grow: 1;
+  }
 
-    &__post-grow {
-        flex-grow: 1;
-    }
-
-    &__discussion-post {
-        display: flex;
-        margin-bottom: 10px;
-    }
+  &__discussion-post {
+    display: flex;
+    margin-bottom: 10px;
+  }
 
-    &__spinner {
-        display: flex;
-        flex: 1;
-        justify-content: center;
-        padding: 20px;
-    }
+  &__spinner {
+    display: flex;
+    flex: 1;
+    justify-content: center;
+    padding: 20px;
+  }
 
-    &__timeline-icon-margin {
-        margin: 10px !important;
-    }
+  &__timeline-icon-margin {
+    margin: 10px !important;
+  }
 
-    &__user-upvote-list {
-        display: flex;
-        flex-wrap: wrap;
-    }
+  &__user-upvote-list {
+    display: flex;
+    flex-wrap: wrap;
+  }
 
-    &__user-upvote-panel {
-        display: flex;
-        margin: 10px;
-        width: 200px;
-    }
+  &__user-upvote-panel {
+    display: flex;
+    margin: 10px;
+    width: 200px;
+  }
 
-    &__vote-icon-spacer {
-        margin: 10px 5px 10px 0px;
-    }
+  &__vote-icon-spacer {
+    margin: 10px 5px 10px 0px;
+  }
 
-    &__vote-link {
-        pointer-events: auto;
-    }
+  &__vote-link {
+    pointer-events: auto;
+  }
 
-    &__vote-user-panel {
-        width: 50px;
-        flex-shrink: 0;
-    }
+  &__vote-user-panel {
+    width: 50px;
+    flex-shrink: 0;
+  }
 
-    .js-usercard {
-        pointer-events: auto;
-    }
+  .js-usercard {
+    pointer-events: auto;
+  }
 }

resources/css/bem/beatmapset-beatmap-picker.less

···
     &::before {
       .full-size();
       border-radius: @border-radius--large;
-      content: '';
+      content: "";
       background-color: hsla(var(--hsl-b6), 0.5);
       width: calc(100% - @gutter);
       height: calc(100% - @gutter);

resources/css/bem/beatmapset-cover-admin.less

···
 // Copyright (c) ppy Pty Ltd <[e-mail]>. Licensed under the GNU Affero General Public License v3.0.
 // See the LICENCE file in the repository root for full licence text.
 
- .beatmapset-cover-admin {
-    &__img {
-      max-width: 100%;
-    }
+.beatmapset-cover-admin {
+  &__img {
+    max-width: 100%;
   }
+}

resources/css/bem/beatmapset-cover.less

···
   width: 45px;
   height: 30px;
   border-radius: var(--border-radius, 6px);
-  .at2x('~@images/layout/beatmaps/default-bg.png');
+  .at2x("~@images/layout/beatmaps/default-bg.png");
   background-position: center;
   background-size: cover;
   vertical-align: middle;
···
 
   &::before {
     .full-size();
-    content: '';
+    content: "";
     border-radius: inherit;
     background-image: var(--bg);
     background-position: center;

resources/css/bem/beatmapset-discussions-chart.less

···
 
   &::before {
     --border-size: 2px;
-    content: '';
+    content: "";
     position: absolute;
     width: 100%;
     bottom: 0;
···
 
     &::before {
       display: block;
-      content: '';
+      content: "";
       flex: 1;
       width: 1px;
-      background-image: linear-gradient(to top, hsl(var(--hsl-c1)), hsl(var(--hsl-c1)) 10%, hsla(var(--hsl-c1), 0) 70%);
+      background-image: linear-gradient(
+        to top,
+        hsl(var(--hsl-c1)),
+        hsl(var(--hsl-c1)) 10%,
+        hsla(var(--hsl-c1), 0) 70%
+      );
       transform: scaleX(var(--line-scale));
     }
 
     &::after {
       .fa();
-      content: var(--icon, '');
+      content: var(--icon, "");
       font-size: 12px; // icon size
       font-weight: var(--icon-weight);
       color: var(--icon-colour);

resources/css/bem/beatmapset-header.less

···
     color: #fff;
 
     &--favourites {
-      &:hover, &:visited, &:link, &:active {
+      &:hover,
+      &:visited,
+      &:link,
+      &:active {
         text-decoration: none;
         color: #fff;
       }
···
     }
 
     &--favourited {
-      &:hover, &:link {
+      &:hover,
+      &:link {
         color: @pink-darker;
       }
     }

resources/css/bem/beatmapset-panel.less

···
 
 .beatmapset-panel {
   .desktop-hover() {
-    --info-bg: linear-gradient(0.25turn, hsl(var(--hsl-b4)), hsla(var(--hsl-b4), 0.8));
+    --info-bg: linear-gradient(
+      0.25turn,
+      hsl(var(--hsl-b4)),
+      hsla(var(--hsl-b4), 0.8)
+    );
     --menu-opacity: 1;
     --menu-container-width: @_menu-width-visible;
     --play-bg: hsla(var(--hsl-b6), 0.8);
···
 
   // Extend by 1px on respective corner to prevent gap on some zoom levels.
   // Sizing is based on @border-radius--large.
-  @_top-left-inverted-corner-path: path('M-1 -1 L-1 10 L0 10 A10 10 0 0 1 10 0 L10 -1 Z');
-  @_bottom-left-inverted-corner-path: path('M-1 11 L-1 0 L0 0 A10 10 0 0 0 10 10 L10 11 Z');
-  @_top-right-inverted-corner-path: path('M11 -1 L11 10 L10 10 A10 10 0 0 0 0 0 L0 -1 Z');
-  @_bottom-right-inverted-corner-path: path('M11 11 L11 0 L10 0 A10 10 0 0 1 0 10 L 0 11 Z');
+  @_top-left-inverted-corner-path: path(
+    "M-1 -1 L-1 10 L0 10 A10 10 0 0 1 10 0 L10 -1 Z"
+  );
+  @_bottom-left-inverted-corner-path: path(
+    "M-1 11 L-1 0 L0 0 A10 10 0 0 0 10 10 L10 11 Z"
+  );
+  @_top-right-inverted-corner-path: path(
+    "M11 -1 L11 10 L10 10 A10 10 0 0 0 0 0 L0 -1 Z"
+  );
+  @_bottom-right-inverted-corner-path: path(
+    "M11 11 L11 0 L10 0 A10 10 0 0 1 0 10 L 0 11 Z"
+  );
 
   --border-cover-opacity: 0;
   // For elements which provide overall beatmap link.
···
   --play-icon-opacity: 0;
   --play-width: 80px;
   --source-display: flex;
-  --stats-grid-template: "hype nominations favourite-count play-count date" / auto auto auto auto auto;
+  --stats-grid-template: "hype nominations favourite-count play-count date" /
+    auto auto auto auto auto;
   --stats-opacity: 1;
   --transition: all 150ms ease-in-out;
 
···
 
   @media @desktop {
     --global-beatmap-link-pointer-events: auto;
-    --info-bg: linear-gradient(0.25turn, hsl(var(--hsl-b2)), hsla(var(--hsl-b2), 0.8));
+    --info-bg: linear-gradient(
+      0.25turn,
+      hsl(var(--hsl-b2)),
+      hsla(var(--hsl-b2), 0.8)
+    );
     --menu-bg: hsl(var(--hsl-b3));
     --menu-container-width: @_menu-width;
     --main-height: 100%;
···
 
   // hide bottom radius when cover is shown
   &::before {
-    content: '';
+    content: "";
     background-color: inherit;
     height: @border-radius--large;
     width: 100%;
···
   &--size-extra {
     @media @desktop {
       --panel-height: @beatmapset-panel-extra-height-desktop;
-      --stats-grid-template: "favourite-count hype date" "play-count nominations ." / auto auto auto;
+      --stats-grid-template: "favourite-count hype date"
+        "play-count nominations ." / auto auto auto;
       --stats-opacity: 1;
       --play-width: 140px;
     }
···
 
     // solid cover for mobile
     &::after {
-      content: '';
+      content: "";
       position: absolute;
       display: block;
       width: calc(100% - var(--play-width));
···
     flex-direction: column;
     // Adjust radius to prevent bleeding of the underneath cover
     // when hover background (of &__play) is active.
-    border-radius: (@border-radius--large - 1px) 0 0 (@border-radius--large - 1px);
+    border-radius: (@border-radius--large - 1px) 0 0
+      (@border-radius--large - 1px);
   }
 
   &__info-row {
···
       font-weight: bold;
 
       &::after {
-        content: '\a0';
+        content: "\a0";
       }
     }
 
···
       overflow: visible;
     }
 
-    &::after, &::before {
-      content: '';
+    &::after,
+    &::before {
+      content: "";
       width: @border-radius--large;
       height: $width;
       position: absolute;
···
     position: relative;
     // Adjust radius to prevent bleeding of the underneath cover
     // when hover background is active.
-    border-radius: (@border-radius--large - 1px) 0 0 (@border-radius--large - 1px);
+    border-radius: (@border-radius--large - 1px) 0 0
+      (@border-radius--large - 1px);
 
-    &::after, &::before {
-      content: '';
+    &::after,
+    &::before {
+      content: "";
       width: @border-radius--large;
       height: $width;
       position: absolute;

resources/css/bem/beatmapsets-search.less

···
 
     &::after {
       .full-size();
-      content: '';
+      content: "";
       background-color: hsla(var(--hsl-b1), 80%);
     }
   }

resources/css/bem/bootstrap/modal-header.less

···
     .default-text-shadow();
     font-style: normal;
     font-size: 24px;
-    color: #FFF;
+    color: #fff;
 
     position: absolute;
     margin: 10px;

resources/css/bem/btn-circle.less

···
 
     .link-hover({
       box-shadow: none;
-    })
+    });
   }
 
   &--page-toggle-detail {
···
     }
   }
 
-  &--activated, &.js-activated {
+  &--activated,
+  &.js-activated {
     background-color: @osu-colour-h2;
     color: @osu-colour-b5;
 
···
     opacity: var(--normal-opacity);
     transition: var(--transition);
 
-    .@{top}:hover &, .@{top}:active & {
+    .@{top}:hover &,
+    .@{top}:active & {
       opacity: var(--hover-opacity);
     }
 

resources/css/bem/btn-home.less

···
   .link-white();
 
   border-radius: @border-radius-large;
-  background-image: url('~@images/backgrounds/button.svg');
+  background-image: url("~@images/backgrounds/button.svg");
   background-size: 175%;
   background-position: center;
 
···
   --bg-move: 0px;
   --border-size: 3px;
   --move: 0px;
-  --inset-colour: hsl(var(--colour-h), var(--colour-s), calc(var(--colour-l) - 10%));
+  --inset-colour: hsl(
+    var(--colour-h),
+    var(--colour-s),
+    calc(var(--colour-l) - 10%)
+  );
 
   transform: translate(0, var(--move));
-  background-color: hsl(var(--colour-h), var(--colour-s), calc(var(--colour-l) + var(--bg-l-adjust)));
+  background-color: hsl(
+    var(--colour-h),
+    var(--colour-s),
+    calc(var(--colour-l) + var(--bg-l-adjust))
+  );
   background-position: calc(50% + var(--bg-move)) 50%;
 
   box-shadow:
     0 calc(var(--border-size) - var(--move)) var(--inset-colour),
-    0 calc(var(--border-size) + @box-shadow-y - var(--move)) @box-shadow-radius @box-shadow-color;
+    0 calc(var(--border-size) + @box-shadow-y - var(--move)) @box-shadow-radius
+      @box-shadow-color;
 
   &:focus {
     --bg-move: -10px;

resources/css/bem/btn-osu-big.less

···
     background: var(--active-bg);
   }
 
-  &[disabled], &--disabled {
+  &[disabled],
+  &--disabled {
     cursor: default;
     background: var(--disabled-bg);
     color: var(--disabled-colour);
···
     flex-direction: column;
     --bg-colour: hsl(var(--hsl-blue-3));
     --bg: var(--bg-colour) center/150% url("~@images/backgrounds/button.svg");
-    --hover-bg: var(--bg-colour) calc(50% - 20px) 50%/150% url("~@images/backgrounds/button.svg");
+    --hover-bg: var(--bg-colour) calc(50% - 20px) 50%/150%
+      url("~@images/backgrounds/button.svg");
   }
 
   &--download-lazer {
···
     white-space: normal;
   }
 
-  &--activated, &.js-activated {
+  &--activated,
+  &.js-activated {
     --bg: hsl(var(--hsl-h2));
     --colour: hsl(var(--hsl-c1));
     --hover-colour: hsl(var(--hsl-c1));
···
       justify-content: center;
     }
 
-    .@{top}--comment-editor, .@{top}--chat-send & {
+    .@{top}--comment-editor,
+    .@{top}--chat-send & {
       font-size: 120%;
     }
 

resources/css/bem/chat-conversation-list-item.less

···
 
   @media @desktop {
     &:hover {
-      background: linear-gradient(to right, @osu-colour-b5 @tile-margin, @osu-colour-b3 33%, @osu-colour-b3 100%);
+      background: linear-gradient(
+        to right,
+        @osu-colour-b5 @tile-margin,
+        @osu-colour-b3 33%,
+        @osu-colour-b3 100%
+      );
     }
   }
 
···
 
   &--selected {
     color: white;
-    background: linear-gradient(to right, @osu-colour-b5 @tile-margin, @osu-colour-b4 33%, @osu-colour-b4 100%);
+    background: linear-gradient(
+      to right,
+      @osu-colour-b5 @tile-margin,
+      @osu-colour-b4 33%,
+      @osu-colour-b4 100%
+    );
     @media @mobile {
       background: @osu-colour-b4;
     }
···
       opacity: 0.5;
       .full-size();
       border-radius: 1px;
-      content: '';
+      content: "";
       box-shadow: 0 0 5px lighten(@green, 10%);
       animation: glow-pulse 2s infinite;
     }

resources/css/bem/chat-conversation-panel.less

···
   position: relative;
 
   @media @mobile {
-    overflow-y: hidden; // Needed to limit the height of the panel so chat-conversation is scrollable and
-                        // chat-conversation-list doesn't become 0 height on mobile.
-                        // height: 100% alone doesn't work.
-                        // The panel itself should not be scrollable.
+    // Needed to limit the height of the panel so chat-conversation is scrollable and
+    // chat-conversation-list doesn't become 0 height on mobile.
+    // height: 100% alone doesn't work.
+    // The panel itself should not be scrollable.
+    overflow-y: hidden;
   }
 
   &__instructions {

resources/css/bem/chat-conversation.less

···
   -webkit-overflow-scrolling: touch;
 
   &::after {
-    content: '';
+    content: "";
     display: block;
     padding-bottom: 80px;
 
···
     height: 1.5em;
 
     &::before {
-      content: '';
+      content: "";
       background: @osu-colour-h1;
       position: absolute;
       left: 0;
···
       content: attr(data-content);
       position: relative;
       display: inline-block;
-      padding: 0 .5em;
+      padding: 0 0.5em;
       line-height: 1.5em;
       color: @osu-colour-h1;
       background-color: @osu-colour-b4;

resources/css/bem/chat-input.less

···
   bottom: 0;
   text-align: right;
 
-  background: linear-gradient(to bottom, hsla(var(--hsl-b4), 0), hsla(var(--hsl-b4), 0.95) 40%, hsla(var(--hsl-b4), 0.95) 100%);
-  width: calc(100% - 20px); // this prevents the gradient drawing over the browser's scroll-bar
+  background: linear-gradient(
+    to bottom,
+    hsla(var(--hsl-b4), 0),
+    hsla(var(--hsl-b4), 0.95) 40%,
+    hsla(var(--hsl-b4), 0.95) 100%
+  );
+  // this prevents the gradient drawing over the browser's scroll-bar
+  width: calc(100% - 20px);
   padding: 10px 30px 15px 50px;
 
   align-items: center;
···
     position: fixed;
     font-size: 16px;
     padding-right: 0;
-    padding-left: 20px
+    padding-left: 20px;
   }
 
   &__box {

resources/css/bem/chat-message-item.less

···
     }
   }
 }
-

resources/css/bem/circular-progress.less

···
     margin-top: @thickness;
     margin-left: @thickness;
     display: block;
-    content: '';
+    content: "";
     border-radius: 50%;
     background-color: var(--circle-center-fill);
     width: 1em - (@thickness * 2);
···
     color: var(--label-colour);
     display: var(--label-display);
   }
-
 
   &__circle {
     position: absolute;

resources/css/bem/comment.less

···
 
       &::after {
         display: block;
-        content: '';
+        content: "";
         position: absolute;
         bottom: 0;
         left: 0;
         width: 100%;
         height: calc(var(--line-height) * 3);
-        background-image: linear-gradient(to bottom, hsla(var(--comments-bg-hsl), 0), hsl(var(--comments-bg-hsl)));
+        background-image: linear-gradient(
+          to bottom,
+          hsla(var(--comments-bg-hsl), 0),
+          hsl(var(--comments-bg-hsl))
+        );
         pointer-events: none;
       }
     }

resources/css/bem/contest-art-entry.less

···
   }
 
   &__thumbnail {
-    width: calc(var(--thumbnail-size) * var(--thumbnail-scale) * var(--thumbnail-width-multiplier));
-    height: calc(var(--thumbnail-size) * var(--thumbnail-scale) * var(--thumbnail-height-multiplier));
+    width: calc(
+      var(--thumbnail-size) * var(--thumbnail-scale) *
+        var(--thumbnail-width-multiplier)
+    );
+    height: calc(
+      var(--thumbnail-size) * var(--thumbnail-scale) *
+        var(--thumbnail-height-multiplier)
+    );
     box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
     background-size: cover;
     background-position: top;
···
   }
 
   &__vote-link-banner {
-    --base-size: calc(0.25 * var(--thumbnail-size) * var(--vote-link-banner-scale));
+    --base-size: calc(
+      0.25 * var(--thumbnail-size) * var(--vote-link-banner-scale)
+    );
     position: absolute;
     right: 0;
     bottom: 0;
···
     justify-content: center;
 
     &::before {
-      content: '';
+      content: "";
       position: absolute;
       width: 100%;
       height: 100%;
       border-style: solid;
       border-width: 0 0 var(--base-size) var(--base-size);
-      border-color: transparent transparent var(--vote-link-banner-bg) transparent;
+      border-color: transparent transparent var(--vote-link-banner-bg)
+        transparent;
     }
   }
 }

resources/css/bem/contest-judge-entry-range-input.less

···
   margin-top: 10px;
   max-width: 500px;
 
-  input[type='range'] {
+  input[type="range"] {
     -webkit-appearance: none;
     appearance: none;
     background: transparent;

resources/css/bem/contest-list-item.less

···
     height: 90px;
   }
 
-  &:active, &:focus, &:hover {
+  &:active,
+  &:focus,
+  &:hover {
     color: white;
     text-decoration: none;
   }

resources/css/bem/contest-userentry.less

···
   }
 
   &--new {
-    &:hover, .@{_top}--dragndrop-hover& {
+    &:hover,
+    .@{_top}--dragndrop-hover& {
       background-color: @osu-colour-b3;
       transform: scale(1.01);
     }

resources/css/bem/contest.less

···
     padding-top: 20px;
     padding-bottom: 20px;
 
-    > h1, h2, h3, h4, h5, h6 {
+    > h1,
+    h2,
+    h3,
+    h4,
+    h5,
+    h6 {
       color: @osu-colour-c1;
     }
   }
···
     padding: 10px;
 
     color: white;
-    &:hover, &:visited, &:link, &:active {
+    &:hover,
+    &:visited,
+    &:link,
+    &:active {
       color: white;
       text-decoration: none;
     }
···
   &__section-toggle {
     transition: all 300ms;
     transform: rotateZ(0deg);
-    .@{_top}__group-heading[aria-expanded='true'] & {
+    .@{_top}__group-heading[aria-expanded="true"] & {
       transform: rotateZ(180deg);
     }
   }
···
     width: 32px;
     &--art {
       width: inherit;
-      margin-right: 10px
+      margin-right: 10px;
     }
   }
 
···
     .center-content();
     color: rgba(1, 1, 1, 0.5);
 
-    &:hover, &:focus {
+    &:hover,
+    &:focus {
       color: rgba(1, 1, 1, 0.75);
       font-size: inherit;
       text-decoration: none;
···
     &--selected {
       font-size: inherit;
       color: @contest-selected-colour;
-      &:hover, &:focus {
+      &:hover,
+      &:focus {
         color: fade(@contest-selected-colour, 75%);
       }
     }
···
     &--selected-art {
       font-size: inherit;
       color: white;
-      &:hover, &:focus {
+      &:hover,
+      &:focus {
         color: fade(white, 50%);
       }
     }

resources/css/bem/dialog-form.less

···
   }
 
   &__logo {
-    background-image: url('~@images/layout/osu-logo-white.svg');
+    background-image: url("~@images/layout/osu-logo-white.svg");
     background-position: contain;
 
     flex: none;
···
       color: @purple-light;
 
       &::after {
-        content: '\a0'; // prevent div from collapsing when empty
+        content: "\a0"; // prevent div from collapsing when empty
       }
     }
 
···
     }
 
     &--header {
-      .at2x-simple('~@images/headers/oauth-login.jpg');
+      .at2x-simple("~@images/headers/oauth-login.jpg");
       .center-content();
       margin-left: 0;
       margin-right: 0;

resources/css/bem/download-page-header.less

···
       pointer-events: none;
 
       &::before {
-        content: '•';
+        content: "•";
       }
     }
   }
···
       }
     }
 
-    &::after, &::before {
-      content: '';
+    &::after,
+    &::before {
+      content: "";
       display: block;
       flex: 1;
       background-color: hsl(var(--hsl-b2));

resources/css/bem/download-page.less

···
 
     @media @desktop {
       flex-direction: row;
-    justify-content: space-between;
+      justify-content: space-between;
     }
   }
 

resources/css/bem/flag-country.less

···
 
 .flag-country {
   --height: 1em;
-  --width-height-ratio: calc(100 / 72); // Original flag svg ratio; using a different ratio turns the flag into a blurry mess on Chrome.
+  // Original flag svg ratio; using a different ratio turns the flag into a blurry mess on Chrome.
+  --width-height-ratio: calc(100 / 72);
 
   height: var(--height);
   width: calc(var(--height) * var(--width-height-ratio));
···
     border-radius: inherit;
     filter: contrast(0) brightness(2);
     opacity: 0.25;
-    content: '';
+    content: "";
   }
 
   &--flat {

resources/css/bem/footer.less

···
       margin-bottom: 5px;
     }
 
-    &:hover, &:focus, &:active {
+    &:hover,
+    &:focus,
+    &:active {
       color: @osu-colour-l1;
     }
 

resources/css/bem/form-select.less

···
   &::after {
     .fas();
     .center-content();
-    content: '\f078';
+    content: "\f078";
     padding: 0 10px;
     position: absolute;
     right: 0;

resources/css/bem/forum-cover-edit.less

···
   }
 
   &__cover {
-    .at2x-simple('~@images/headers/forum-topic-covers/forum-cover-category-osu.jpg');
+    .at2x-simple("~@images/headers/forum-topic-covers/forum-cover-category-osu.jpg");
     width: 100%;
     border-radius: @border-radius-large;
     height: 0;

resources/css/bem/forum-item-stripe.less

···
   transition: @forum-item-animate;
 
   &::after {
-    content: '';
+    content: "";
     .full-size();
     border-radius: @border-radius-base 0 0 @border-radius-base;
     background-color: var(--forum-item-background-color);
···
   }
 
   &::before {
-    content: '';
+    content: "";
     .full-size();
     border-radius: @border-radius-base 0 0 @border-radius-base;
     background-color: var(--forum-bg);
   }
 
-  .forum-item:hover &, .forum-topic-entry:hover & {
+  .forum-item:hover &,
+  .forum-topic-entry:hover & {
     color: var(--forum-item-background-color-hover);
     width: 25px;
 

resources/css/bem/forum-list.less

···
     position: relative;
 
     @media @desktop {
-      display :none;
+      display: none;
     }
   }
 

resources/css/bem/forum-poll-container.less

···
     }
 
     &--form {
-      .@{_top}[data-page=form][data-edit="0"] & {
+      .@{_top}[data-page="form"][data-edit="0"] & {
         display: block;
       }
     }
 
     &--results {
-      .@{_top}[data-page=results][data-edit="0"] & {
+      .@{_top}[data-page="results"][data-edit="0"] & {
         display: block;
       }
     }

resources/css/bem/forum-post-info.less

···
     &--registration {
       font-size: @font-size--normal;
 
-      strong  {
+      strong {
         font-weight: 600;
       }
     }

resources/css/bem/forum-title.less

···
   flex: 1;
 
   &::before {
-    content: '';
+    content: "";
     position: absolute;
     height: 80%;
     width: 3px;

resources/css/bem/forum-topic-nav.less

···
         display: none;
       }
     }
-
   }
 
   &__mobile-float {
···
     position: absolute;
     left: 0;
     bottom: 100%;
-    transition: width 500ms ease-out, height 120ms ease-out;
+    transition:
+      width 500ms ease-out,
+      height 120ms ease-out;
     cursor: pointer;
     backface-visibility: hidden;
 
···
 
     // easier targeting
     &::after {
-      content: '';
+      content: "";
       position: absolute;
       left: 0;
       bottom: 100%;
···
     width: 100%;
     height: var(--main-height);
   }
-
 
   &__seek-tooltip {
     position: absolute;
-    bottom: calc(var(--main-height) + @_seek-bar-height-desktop-hover + @_seek-tooltip-arrow-height);
+    bottom: calc(
+      var(--main-height) + @_seek-bar-height-desktop-hover +
+        @_seek-tooltip-arrow-height
+    );
 
     display: flex;
     width: 0;
···
     flex: none;
 
     &::before {
-      content: '';
+      content: "";
       position: absolute;
       top: 100%;
       left: 50%;

resources/css/bem/forum-user-badge.less

···
 // See the LICENCE file in the repository root for full licence text.
 
 .forum-user-badge {
-    background-color: @osu-colour-b6;
-    color: @osu-colour-lime-2;
-    font-size: @font-size--tiny;
-    font-weight: 600;
-    padding: 2px 10px;
-    border-radius: 10000px;
-    text-transform: uppercase;
+  background-color: @osu-colour-b6;
+  color: @osu-colour-lime-2;
+  font-size: @font-size--tiny;
+  font-weight: 600;
+  padding: 2px 10px;
+  border-radius: 10000px;
+  text-transform: uppercase;
 
-    @media @desktop {
-      font-size: @font-size--small;
-    }
+  @media @desktop {
+    font-size: @font-size--small;
+  }
 }

resources/css/bem/header-nav-mobile.less

···
     position: relative;
 
     &::before {
-      content: '';
+      content: "";
       z-index: @z-index--simple-menu-hover-object;
       width: 100%;
       height: 4px;

resources/css/bem/header-nav-v4.less

···
     gap: 20px;
 
     &::before {
-      content: '';
+      content: "";
       position: absolute;
       bottom: 0;
       width: 100%;
···
 
     @media @desktop {
       &::before {
-        content: '';
+        content: "";
         position: absolute;
         bottom: -2px;
         height: 5px;

resources/css/bem/header-v4.less

···
     display: flex;
     justify-content: center;
     overflow: hidden;
-    .at2x-fallback(--header-bg, '~@images/headers/generic.jpg');
+    .at2x-fallback(--header-bg, "~@images/headers/generic.jpg");
 
     &::before {
-      content: '';
-      background-image: linear-gradient(to right, @osu-colour-d5, transparent 200px, transparent 1000px, @osu-colour-d5 1200px);
+      content: "";
+      background-image: linear-gradient(
+        to right,
+        @osu-colour-d5,
+        transparent 200px,
+        transparent 1000px,
+        @osu-colour-d5 1200px
+      );
       background-position: center;
       height: 100%;
       width: 1200px;
···
     }
 
     .@{_top}--beatmappacks & {
-      .at2x-simple('~@images/headers/beatmappacks.jpg');
+      .at2x-simple("~@images/headers/beatmappacks.jpg");
     }
 
     .@{_top}--changelog & {
-      .at2x-simple('~@images/headers/changelog.jpg');
+      .at2x-simple("~@images/headers/changelog.jpg");
     }
 
     .@{_top}--chat & {
-      .at2x-simple('~@images/headers/chat.jpg');
+      .at2x-simple("~@images/headers/chat.jpg");
       filter: hue-rotate(115deg); // fix colour
 
       &::before {
···
     }
 
     .@{_top}--contests & {
-      .at2x-fallback(--header-bg, '~@images/headers/contest.jpg');
+      .at2x-fallback(--header-bg, "~@images/headers/contest.jpg");
     }
 
     .@{_top}--forum & {
···
     }
 
     .@{_top}--forums-index & {
-      .at2x-simple('~@images/headers/forum-index.jpg');
+      .at2x-simple("~@images/headers/forum-index.jpg");
     }
 
     .@{_top}--help & {
···
     }
 
     .@{_top}--mp-history & {
-      .at2x-simple('~@images/headers/mp-history.jpg');
+      .at2x-simple("~@images/headers/mp-history.jpg");
     }
 
     .@{_top}--news & {
-      .at2x-simple('~@images/headers/news.png');
+      .at2x-simple("~@images/headers/news.png");
     }
 
     .@{_top}--password-reset & {
-      .at2x-simple('~@images/headers/password-reset.jpg');
+      .at2x-simple("~@images/headers/password-reset.jpg");
     }
 
     .@{_top}--rankings & {
-      .at2x-simple('~@images/headers/rankings.jpg');
+      .at2x-simple("~@images/headers/rankings.jpg");
     }
 
     .@{_top}--search & {
-      .at2x-simple('~@images/headers/search.jpg');
+      .at2x-simple("~@images/headers/search.jpg");
     }
 
     .@{_top}--store & {
       opacity: 0.7;
-      .at2x-simple('~@images/headers/store.png');
+      .at2x-simple("~@images/headers/store.png");
     }
 
     .@{_top}--supporter & {
       opacity: 0.2;
-      .at2x-simple('~@images/headers/supporter.jpg');
+      .at2x-simple("~@images/headers/supporter.jpg");
     }
 
     .@{_top}--tournaments & {
-      .at2x-simple('~@images/headers/tournament-v2.jpg');
+      .at2x-simple("~@images/headers/tournament-v2.jpg");
     }
 
     .@{_top}--users & {
···
   }
 
   &__icon {
-    background-image: url('~@images/icons/home.svg');
+    background-image: url("~@images/icons/home.svg");
     background-repeat: no-repeat;
     background-position: center;
     align-self: stretch;
···
     background-size: 75%;
 
     .@{_top}--artist & {
-      background-image: url('~@images/icons/artists.svg');
+      background-image: url("~@images/icons/artists.svg");
     }
 
     .@{_top}--artists & {
-      background-image: url('~@images/icons/artists.svg');
+      background-image: url("~@images/icons/artists.svg");
     }
 
     .@{_top}--beatmappacks & {
-      background-image: url('~@images/icons/beatmappacks.svg');
+      background-image: url("~@images/icons/beatmappacks.svg");
     }
 
     .@{_top}--beatmapset & {
-      background-image: url('~@images/icons/beatmapsets.svg');
+      background-image: url("~@images/icons/beatmapsets.svg");
     }
 
     .@{_top}--beatmapsets & {
-      background-image: url('~@images/icons/beatmapsets.svg');
+      background-image: url("~@images/icons/beatmapsets.svg");
     }
 
     .@{_top}--changelog & {
-      background-image: url('~@images/icons/changelog.svg');
+      background-image: url("~@images/icons/changelog.svg");
     }
 
     .@{_top}--chat & {
-      background-image: url('~@images/icons/chat.svg');
+      background-image: url("~@images/icons/chat.svg");
     }
 
     .@{_top}--comments & {
-      background-image: url('~@images/icons/chat.svg');
+      background-image: url("~@images/icons/chat.svg");
     }
 
     .@{_top}--contests & {
-      background-image: url('~@images/icons/contests.svg');
+      background-image: url("~@images/icons/contests.svg");
     }
 
     .@{_top}--error & {
-      background-image: url('~@images/icons/notifications.svg');
+      background-image: url("~@images/icons/notifications.svg");
     }
 
     .@{_top}--forum & {
-      background-image: url('~@images/icons/forum.svg');
+      background-image: url("~@images/icons/forum.svg");
     }
 
     .@{_top}--forums-index & {
-      background-image: url('~@images/icons/forum.svg');
+      background-image: url("~@images/icons/forum.svg");
     }
 
     .@{_top}--friends & {
-      background-image: url('~@images/icons/friends.svg');
+      background-image: url("~@images/icons/friends.svg");
     }
 
     .@{_top}--help & {
-      background-image: url('~@images/icons/help.svg');
+      background-image: url("~@images/icons/help.svg");
     }
 
     .@{_top}--home & {
-      background-image: url('~@images/icons/home.svg');
+      background-image: url("~@images/icons/home.svg");
     }
 
     .@{_top}--livestreams & {
-      background-image: url('~@images/icons/forum.svg');
+      background-image: url("~@images/icons/forum.svg");
     }
 
     .@{_top}--news & {
-      background-image: url('~@images/icons/news.svg');
+      background-image: url("~@images/icons/news.svg");
     }
 
     .@{_top}--notifications & {
-      background-image: url('~@images/icons/notifications.svg');
+      background-image: url("~@images/icons/notifications.svg");
     }
 
     .@{_top}--password-reset & {
-      background-image: url('~@images/icons/settings.svg');
+      background-image: url("~@images/icons/settings.svg");
     }
 
     .@{_top}--rankings & {
-      background-image: url('~@images/icons/rankings.svg');
+      background-image: url("~@images/icons/rankings.svg");
     }
 
     .@{_top}--search & {
-      background-image: url('~@images/icons/search.svg');
+      background-image: url("~@images/icons/search.svg");
     }
 
     .@{_top}--settings & {
-      background-image: url('~@images/icons/settings.svg');
+      background-image: url("~@images/icons/settings.svg");
     }
 
     .@{_top}--store & {
-      background-image: url('~@images/icons/store.svg');
+      background-image: url("~@images/icons/store.svg");
     }
 
     .@{_top}--tournaments & {
-      background-image: url('~@images/icons/tournaments.svg');
+      background-image: url("~@images/icons/tournaments.svg");
     }
 
     .@{_top}--users & {
-      background-image: url('~@images/icons/profile.svg');
+      background-image: url("~@images/icons/profile.svg");
     }
   }
 

resources/css/bem/input-container.less

···
     font-size: @font-size--normal;
   }
 }
-

resources/css/bem/js-flash-border.less

···
 // See the LICENCE file in the repository root for full licence text.
 
 .js-flash-border {
-    transition: border 200ms;
-    border: 1px solid transparent;
+  transition: border 200ms;
+  border: 1px solid transparent;
 
-    &--on {
-      animation: js-flash-border 400ms 2;
-    }
+  &--on {
+    animation: js-flash-border 400ms 2;
+  }
 }
 
 @keyframes js-flash-border {
-  50% { border-color: @yellow; }
+  50% {
+    border-color: @yellow;
+  }
 }

resources/css/bem/landing-hero.less

···
 
     &::after {
       .full-size();
-      content: '';
+      content: "";
       background-color: hsla(var(--hsl-b6), 0.5);
     }
   }
···
   }
 
   &__logo {
-    .at2x-simple('~@images/layout/osu-logo.png');
+    .at2x-simple("~@images/layout/osu-logo.png");
     width: @logo-size;
     height: @logo-size;
     background-size: contain;
···
     width: calc(100% - @side-padding);
     max-width: 328px;
     background-size: contain;
-    .at2x-simple('~@images/layout/pippi.png');
+    .at2x-simple("~@images/layout/pippi.png");
     transition: all 1s;
 
     @media @mobile {
···
   }
 
   &__pippi-logo {
-    .at2x-simple('~@images/landing/logo.png');
+    .at2x-simple("~@images/landing/logo.png");
     width: 100%;
     height: 100%;
     background-size: contain;

resources/css/bem/landing-nav.less

···
     flex-direction: column;
 
     &::before {
-      content: '';
+      content: "";
       width: 100%;
       height: 10px;
       bottom: 100%;

resources/css/bem/line-chart.less

···
     display: flex;
     flex-direction: column;
 
-    &[data-float=right] {
+    &[data-float="right"] {
       left: auto;
       right: 0;
     }

resources/css/bem/livestream-featured.less

···
   position: relative;
 
   &::before {
-    content: '';
+    content: "";
     display: block;
     width: 100%;
     // ensuring fixed aspect ratio

resources/css/bem/loading-overlay.less

···
 
   &::before {
     .full-size();
-    content: '';
+    content: "";
     background-color: #000;
     will-change: opacity;
   }
···
       animation-fill-mode: forwards;
     }
   }
-
 
   &__container {
     width: @circle-size*4;
···
       border-radius: 100%;
       background-color: transparent;
 
-
       .@{_top}--visible & {
         animation-name: loading-overlay--circle-approach;
       }
···
     animation-fill-mode: forwards;
     will-change: opacity;
 
-    @animation-delay-start: @animation-delay*1/8;
+    @animation-delay-start: @animation-delay*1 / 8;
 
     .@{_top}--visible & {
       animation-name: loading-overlay--follow-point;
···
     opacity: 1;
   }
 
-  20.1%, 100% {
+  20.1%,
+  100% {
     transform: scale(0.5);
     opacity: 0;
   }
···
     opacity: 1;
   }
 
-  40%, 100% {
+  40%,
+  100% {
     transform: scale(1);
     opacity: 0;
   }

resources/css/bem/medals-group.less

···
 // Copyright (c) ppy Pty Ltd <[e-mail]>. Licensed under the GNU Affero General Public License v3.0.
 // See the LICENCE file in the repository root for full licence text.
 
-
 .medals-group {
   display: grid;
   gap: 20px;
···
     position: relative;
 
     &::before {
-      content: '';
+      content: "";
       position: absolute;
       top: 0;
       left: 0;

resources/css/bem/mobile-menu-tab.less

···
     color: @osu-colour-c1;
 
     &::before {
-      content: '';
+      content: "";
       display: block;
       position: absolute;
       height: 4px;

resources/css/bem/mod.less

···
     }
   }
 
-  .all(~"4K", '4K');
-  .all(~"5K", '5K');
-  .all(~"6K", '6K');
-  .all(~"7K", '7K');
-  .all(~"8K", '8K');
-  .all(~"9K", '9K');
-  .all(~"AP", 'autopilot');
-  .all(~"CL", 'classic');
-  .all(~"DT", 'double-time');
-  .all(~"EZ", 'easy');
-  .all(~"FI", 'fader');
-  .all(~"FL", 'flashlight');
-  .all(~"HD", 'hidden');
-  .all(~"HR", 'hard-rock');
-  .all(~"HT", 'half');
-  .all(~"MR", 'mirror');
-  .all(~"NC", 'nightcore');
-  .all(~"NF", 'no-fail');
-  .all(~"NM", 'no-mod');
-  .all(~"PF", 'perfect');
-  .all(~"RD", 'random');
-  .all(~"RX", 'relax');
-  .all(~"SD", 'sudden-death');
-  .all(~"SO", 'spun-out');
-  .all(~"TD", 'touchdevice');
-  .all(~"V2", 'v2');
+  .all(~"4K", "4K");
+  .all(~"5K", "5K");
+  .all(~"6K", "6K");
+  .all(~"7K", "7K");
+  .all(~"8K", "8K");
+  .all(~"9K", "9K");
+  .all(~"AP", "autopilot");
+  .all(~"CL", "classic");
+  .all(~"DT", "double-time");
+  .all(~"EZ", "easy");
+  .all(~"FI", "fader");
+  .all(~"FL", "flashlight");
+  .all(~"HD", "hidden");
+  .all(~"HR", "hard-rock");
+  .all(~"HT", "half");
+  .all(~"MR", "mirror");
+  .all(~"NC", "nightcore");
+  .all(~"NF", "no-fail");
+  .all(~"NM", "no-mod");
+  .all(~"PF", "perfect");
+  .all(~"RD", "random");
+  .all(~"RX", "relax");
+  .all(~"SD", "sudden-death");
+  .all(~"SO", "spun-out");
+  .all(~"TD", "touchdevice");
+  .all(~"V2", "v2");
 
   .type-bg(Automation);
   .type-bg(Conversion);
···
     background-size: contain;
     background-position: center;
     background-repeat: no-repeat;
-    content: '';
+    content: "";
     display: var(--generic-display);
 
     @media @highdpi {

resources/css/bem/mp-history-game.less

···
     padding: 10px;
     background-color: @osu-colour-b3;
 
-    &--no-teams, &:last-child {
+    &--no-teams,
+    &:last-child {
       border-radius: 0 0 @border-radius-base @border-radius-base;
     }
   }
···
     width: 50%;
 
     padding: 20px;
-
 
     @media @desktop {
       width: unset;

resources/css/bem/multiplayer-room.less

···
 .multiplayer-room {
   --bg: hsla(var(--hsl-b6), 0.75);
   --border-radius: @border-radius--large;
-  --room-bg: linear-gradient(0.25turn, hsl(var(--hsl-b2)), hsla(var(--hsl-b2), 0.8));
+  --room-bg: linear-gradient(
+    0.25turn,
+    hsl(var(--hsl-b2)),
+    hsla(var(--hsl-b2), 0.8)
+  );
 
   .link-hover({
     --room-bg: linear-gradient(0.25turn, hsl(var(--hsl-b4)), hsla(var(--hsl-b4), 0.8));
···
   &__difficulty {
     display: flex;
     border-radius: 10000px;
-    background: linear-gradient(0deg, var(--max-difficulty) 50%, var(--min-difficulty) 50%);
+    background: linear-gradient(
+      0deg,
+      var(--max-difficulty) 50%,
+      var(--min-difficulty) 50%
+    );
   }
 
   &__members {

resources/css/bem/nav-button.less

···
   border-radius: 10000px;
   transition: none;
 
-  &.js-click-menu--active, &:hover {
+  &.js-click-menu--active,
+  &:hover {
     background-color: hsla(var(--hsl-c1), 0.2);
   }
 

resources/css/bem/nav-click-popup.less

···
 // Copyright (c) ppy Pty Ltd <[e-mail]>. Licensed under the GNU Affero General Public License v3.0.
 // See the LICENCE file in the repository root for full licence text.
 
-
 .nav-click-popup {
   position: absolute;
   top: 100%;

resources/css/bem/nav2-header.less

···
     transition-duration: 0s;
     border-bottom: 1px solid @osu-colour-h1;
 
-    &[data-visibility=hidden] {
+    &[data-visibility="hidden"] {
       transition-duration: 250ms;
     }
   }
···
 
   &__triangles {
     .full-size();
-    background-image: url('~@images/layout/nav2-background-hue0.png');
+    background-image: url("~@images/layout/nav2-background-hue0.png");
     background-position: bottom center;
     background-repeat: repeat-x;
     filter: hue-rotate(var(--base-hue-deg)) saturate(0.6);

resources/css/bem/nav2.less

···
     width: @_logo-size;
     height: @_logo-size;
     margin: -@__logo-whitespace;
-    transition: width var(--header-pinned-animation-duration), height var(--header-pinned-animation-duration);
+    transition:
+      width var(--header-pinned-animation-duration),
+      height var(--header-pinned-animation-duration);
     position: relative;
 
     .@{header-pinned} & {
···
     color: @pink-light;
 
     &::after {
-      content: '';
+      content: "";
       position: absolute;
 
       border-radius: 10px;
       top: (@_link-padding-vertical + @_link-highlight-margin-vertical);
       right: 100%;
       width: 3px;
-      height: calc(100% - (@_link-padding-vertical * 2 + @_link-highlight-margin-vertical * 2));
+      height: calc(
+        100% -
+          (@_link-padding-vertical * 2 + @_link-highlight-margin-vertical * 2)
+      );
       background-color: @yellow;
       opacity: 0;
       will-change: opacity;
···
     .@{_top}__colgroup:hover & {
       color: fade(#fff, 70%);
 
-      &:hover, &.js-menu--active {
+      &:hover,
+      &.js-menu--active {
         color: #fff;
       }
     }

resources/css/bem/navbar-mobile-item.less

···
       color: @_colour-base;
     }
 
-    &:hover, &:active {
+    &:hover,
+    &:active {
       color: @_colour-hover;
     }
 
···
     .link-plain();
     display: flex;
     align-items: center;
-    padding: 5px @navbar-padding-horizontal 5px (@navbar-mobile--content-height + 30px);
+    padding: 5px @navbar-padding-horizontal 5px
+      (@navbar-mobile--content-height + 30px);
     color: @osu-colour-c2;
 
     &:hover {

resources/css/bem/news-card.less

···
   }
 
   &__cover-container {
-    .at2x-simple('~@images/headers/news-show-default.jpg');
+    .at2x-simple("~@images/headers/news-show-default.jpg");
     background-size: cover;
     background-repeat: no-repeat;
     border-radius: @border-radius-large;
···
     font-size: @font-size--normal;
 
     &--author {
-      strong { font-weight: 600; }
+      strong {
+        font-weight: 600;
+      }
     }
 
     &--preview {

resources/css/bem/notification-action-button.less

···
 
     &::before {
       .full-size();
-      content: '';
+      content: "";
       width: @border-radius-large;
       border-radius: 0 @border-radius-large @border-radius-large 0;
       background-color: transparent;

resources/css/bem/notification-banner-v2.less

···
   text-align: center;
   position: relative;
   --divider-colour: @red;
-  --icon: url('~@images/layout/exclamation-icon.svg');
+  --icon: url("~@images/layout/exclamation-icon.svg");
 
   @media @desktop {
     flex-direction: row;
···
 
       &::after {
         position: absolute;
-        content: '';
+        content: "";
         height: @_bar-width;
         background-color: var(--divider-colour);
         border-radius: 10px;

resources/css/bem/notification-popup-item-group.less

···
 .notification-popup-item-group {
   @_top: notification-category-group;
   background-color: @osu-colour-b5;
-  border-radius: (@border-radius-large + 10px) (@border-radius-large + 10px) @border-radius-large @border-radius-large;
+  border-radius: (@border-radius-large + 10px) (@border-radius-large + 10px)
+    @border-radius-large @border-radius-large;
   display: flex;
   flex-direction: column;
 

resources/css/bem/notification-popup-item.less

···
 
     .@{_top}:hover & {
       .show-more-link {
-         background-color: hsl(var(--hsl-b1));
-         &:hover {
-           background-color: hsl(var(--hsl-b3));
-         }
+        background-color: hsl(var(--hsl-b1));
+        &:hover {
+          background-color: hsl(var(--hsl-b3));
+        }
       }
     }
   }

resources/css/bem/notification-popup.less

···
     @media @desktop {
       -webkit-overflow-scrolling: touch;
       overflow: auto;
-      max-height: calc(var(--vh, 1vh) * 100 - (@nav2-height + 30px)); // 30px is the parent's padding
+      // 30px is the parent's padding
+      max-height: calc(var(--vh, 1vh) * 100 - (@nav2-height + 30px));
       padding: 0 5px;
     }
   }

resources/css/bem/osu-layout.less

···
   display: flex;
   flex-direction: column;
 
-  transition: filter 200ms ease-in-out, opacity 200ms ease-in-out; // for fading in after &--masked is removed
+  // for fading in after &--masked is removed
+  transition:
+    filter 200ms ease-in-out,
+    opacity 200ms ease-in-out;
 
   &--body {
-    --nav-logo: url('~@images/layout/osu-logo-white.svg');
-    --nav-logo-bg: url('~@images/layout/osu-logo-triangles.svg');
+    --nav-logo: url("~@images/layout/osu-logo-white.svg");
+    --nav-logo-bg: url("~@images/layout/osu-logo-triangles.svg");
 
     background-color: @osu-colour-b6;
   }
···
       height: 100%;
       top: 0;
       left: 0;
-      content: '';
+      content: "";
       z-index: @z-index--body-background;
     }
   }
 
   &--body-lazer {
-    --nav-logo: url('~@images/layout/osu-lazer-logo-white.svg');
-    --nav-logo-bg: url('~@images/layout/osu-lazer-logo-triangles.svg');
+    --nav-logo: url("~@images/layout/osu-lazer-logo-white.svg");
+    --nav-logo-bg: url("~@images/layout/osu-lazer-logo-triangles.svg");
   }
 
   &--full {
···
     pointer-events: none;
     backface-visibility: hidden; // prevents flashing in some browers on resize/transition start
 
-    @media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: none) {
+    @media screen and (-ms-high-contrast: active),
+      screen and (-ms-high-contrast: none) {
       /* IE10+ fallback */
       opacity: 0;
     }

resources/css/bem/osu-md.less

···
     flex: 1;
     overflow-wrap: anywhere;
 
-    h1, h2, h3, h4, h5, h6 {
+    h1,
+    h2,
+    h3,
+    h4,
+    h5,
+    h6 {
       font-size: revert;
       border-bottom: 1px solid hsl(var(--hsl-b3));
     }
···
     font-style: italic;
 
     &::before {
-      content: '* ';
+      content: "* ";
     }
     &::after {
-      content: ' *';
+      content: " *";
     }
   }
 

resources/css/bem/osu-page.less

···
     padding-bottom: 20px;
     color: @osu-colour-c1;
 
-    h1, h3, h4 {
+    h1,
+    h3,
+    h4 {
       font-style: normal;
       color: white;
     }
···
       animation: forum-topic-reply-flash 500ms ease-in-out;
 
       @keyframes forum-topic-reply-flash {
-        50% { background-color: @osu-colour-b1; }
+        50% {
+          background-color: @osu-colour-b1;
+        }
       }
     }
 
-    &[data-state=stick] {
+    &[data-state="stick"] {
       position: fixed;
       z-index: @z-index--forum-topic-reply-stick;
       bottom: 0; // weird flashing in firefox android on certain scroll if using top
···
 
     flex: 1 0 auto;
     display: flex;
-    height: calc((var(--vh, 1vh) * 100) - (@header-container-min-height + 60px)); // viewport height - (header + footer + margins)
+    // viewport height - (header + footer + margins)
+    height: calc(
+      (var(--vh, 1vh) * 100) - (@header-container-min-height + 60px)
+    );
 
     @media @mobile {
       height: calc((var(--vh, 1vh) * 100) - var(--navbar-height));

resources/css/bem/osu-switch-v2.less

···
       }
     }
 
-    .@{_top}__input[type=checkbox] + & {
+    .@{_top}__input[type="checkbox"] + & {
       border-radius: 0.5em;
 
       &::after {
         .fas();
-        content: '\f00c';
+        content: "\f00c";
       }
     }
 
-    .@{_top}__input[type=checkbox][data-indeterminate='true'] + & {
+    .@{_top}__input[type="checkbox"][data-indeterminate="true"] + & {
       color: hsl(var(--hsl-h1));
 
       &::after {
         .fas();
-        content: '\f068';
+        content: "\f068";
         opacity: 1;
       }
     }
 
-    .@{_top}__input[type=radio] + & {
+    .@{_top}__input[type="radio"] + & {
       border-radius: 50%;
 
       &::after {
-        content: '';
+        content: "";
         background-color: currentColor;
         border-radius: 50%;
         width: calc(100% - 6px);

resources/css/bem/osu-table.less

···
 
 .osu-table {
   @_top: osu-table;
-  @passive-row: ~'@{_top}__body-row--highlightable';
+  @passive-row: ~"@{_top}__body-row--highlightable";
 
   @handle: 16px;
   @row-height: 1.8em;

resources/css/bem/page-mode-link.less

···
     white-space: nowrap;
   }
 
-  &.js-is-active, &--is-active {
+  &.js-is-active,
+  &--is-active {
     font-weight: 600;
     color: #fff;
 

resources/css/bem/page-mode.less

···
 
     // pls halp
     .@{_top}--breadcrumb & + &::before {
-      content: '»';
+      content: "»";
       margin-right: 10px;
       margin-top: 5px;
       vertical-align: middle;
···
     margin-top: 0;
     border: 0;
     height: 1px;
-    background-image: linear-gradient(to right, transparent, @osu-colour-b6, transparent);
+    background-image: linear-gradient(
+      to right,
+      transparent,
+      @osu-colour-b6,
+      transparent
+    );
   }
 }

resources/css/bem/page-nav-fancy.less

···
 .page-nav-fancy {
   @_top: page-nav-fancy;
 
-  .at2x-simple('~@images/headers/news-show-default.jpg');
+  .at2x-simple("~@images/headers/news-show-default.jpg");
   .link-plain();
   .link-white();
   background-position: center;
···
     .full-size();
     .fade-element(120ms);
     will-change: opacity;
-    content: '';
+    content: "";
     background-color: @osu-colour-b6;
     opacity: 0.75;
   }

resources/css/bem/page-tabs.less

···
   position: relative;
 
   &::before {
-    content: '';
+    content: "";
 
     position: absolute;
     top: 100%;
···
     width: 100%;
     height: 1px;
 
-    background-image:linear-gradient(to left, transparent 10%, @osu-colour-b1 50%, transparent 90%);
+    background-image: linear-gradient(
+      to left,
+      transparent 10%,
+      @osu-colour-b1 50%,
+      transparent 90%
+    );
   }
 
   &--follows {
···
     cursor: pointer;
     position: relative; // so it's above block's ::before
 
-    &:hover, &:active, &:focus {
+    &:hover,
+    &:active,
+    &:focus {
       color: @osu-colour-l1;
       text-decoration: none;
       border-bottom-color: var(--tab-hover-border-colour);
···
       color: #ccc;
       cursor: default;
 
-      &:hover, &:active, &:focus {
+      &:hover,
+      &:active,
+      &:focus {
         color: #ccc;
         text-decoration: none;
       }

resources/css/bem/password-reset.less

···
     margin-top: 5px;
     color: @yellow;
 
-    [data-form-error-state=error] & {
+    [data-form-error-state="error"] & {
       display: block;
     }
   }
···
       border-color: @yellow;
     }
 
-    [data-form-error-state=error] & {
+    [data-form-error-state="error"] & {
       border-color: @red;
     }
   }

resources/css/bem/play-detail.less

···
     min-height: auto;
     background-color: transparent;
 
-    &:hover, &--active {
+    &:hover,
+    &--active {
       --bg: hsl(var(--hsl-b2));
       --bg-main: hsl(var(--hsl-b1));
     }
···
       position: relative;
       right: auto;
       bottom: auto;
-      padding: @_padding-vertical-desktop @_padding-horizontal @_padding-vertical-desktop (@_padding-horizontal + 10px);
+      padding: @_padding-vertical-desktop @_padding-horizontal
+        @_padding-vertical-desktop (@_padding-horizontal + 10px);
       min-width: 110px;
       flex: none;
       background: var(--bg);
···
 
     &::before {
       @media @desktop {
-        content: '';
+        content: "";
         width: 10px;
         height: 100%;
         position: absolute;

resources/css/bem/product-box.less

···
   &--card {
     padding: 20px;
 
-    &::before, &::after {
+    &::before,
+    &::after {
       .full-size();
-      content: '';
+      content: "";
       will-change: opacity;
       transition: opacity 120ms;
       pointer-events: none;
···
   &__oos-bar {
     width: 233px;
     height: 136px;
-    .at2x-simple('~@images/layout/store-out-of-stock-bar.png');
+    .at2x-simple("~@images/layout/store-out-of-stock-bar.png");
     background-size: contain;
     position: absolute;
     bottom: 0;

resources/css/bem/profile-cover-change-popup.less

···
     // placeholder to prevent triggering dragleave when entering child element
     &::after {
       .full-size();
-      content: '';
+      content: "";
     }
   }
 }

resources/css/bem/profile-extra-entries.less

···
 
       &::before {
         .full-size();
-        content: '';
+        content: "";
         margin: 0 -10px;
         width: calc(100% + 20px);
         pointer-events: none;

resources/css/bem/profile-extra-recent-infringements.less

···
     color: @osu-colour-l1;
 
     &::before {
-      content: '';
+      content: "";
     }
   }
 }

resources/css/bem/profile-hue-selector.less

···
       top: 0;
       width: @handle-width;
       height: 100%;
-      background-color: hsl(var(--hue), var(--c-saturation-2), var(--c-lightness-2));
+      background-color: hsl(
+        var(--hue),
+        var(--c-saturation-2),
+        var(--c-lightness-2)
+      );
     }
   }
 
···
     --lightness: var(--c-lightness-3);
     // TODO: replace with this simpler alternative once supported by the next Firefox ESR (>127):
     // background: linear-gradient(to right in hsl longer hue, var(--start-colour), var(--end-colour));
-    background: linear-gradient(to right,
+    background: linear-gradient(
+      to right,
       hsl(0, var(--saturation), var(--lightness)) 0%,
       hsl(60, var(--saturation), var(--lightness)) 16.67%,
       hsl(120, var(--saturation), var(--lightness)) 33.33%,
       hsl(180, var(--saturation), var(--lightness)) 50%,
       hsl(240, var(--saturation), var(--lightness)) 66.67%,
       hsl(300, var(--saturation), var(--lightness)) 83.33%,
-      hsl(360, var(--saturation), var(--lightness)) 100%,
+      hsl(360, var(--saturation), var(--lightness)) 100%
     );
   }
 }

resources/css/bem/profile-previous-usernames.less

···
   border-radius: @border-radius-large;
   display: flex;
   align-items: baseline;
-  transition: all 200ms cubic-bezier(.22,.61,.36,1);
+  transition: all 200ms cubic-bezier(0.22, 0.61, 0.36, 1);
   text-shadow: initial;
 
   @media @desktop {

resources/css/bem/report-form.less

···
     max-width: 100vw;
   }
 
-
   &__button {
     .reset-input();
     .default-text-shadow();
···
     &[disabled] {
       &::before {
         .full-size();
-        content: '';
+        content: "";
         border-radius: inherit;
         background-color: fade(#000, 50%);
       }
     }
 
-    &:focus, &:hover, &:active {
+    &:focus,
+    &:hover,
+    &:active {
       background-color: @osu-colour-b6;
     }
 
···
     &--report {
       background-color: @red-dark;
 
-      &:focus, &:hover, &:active {
+      &:focus,
+      &:hover,
+      &:active {
         background-color: @red;
       }
     }

resources/css/bem/score-buttons.less

···
 
     .link-hover({
       background-color: hsl(var(--hsl-l1));
-    })
+    });
   }
 }

resources/css/bem/score-info.less

···
 
     &::after {
       .full-size();
-      content: '';
+      content: "";
       background-color: hsla(var(--hsl-b6), 0.75);
     }
   }

resources/css/bem/search-result-more.less

···
     color: @osu-colour-c1;
   }
 
-  &:focus, &:active, &:hover {
+  &:focus,
+  &:active,
+  &:hover {
     color: @osu-colour-c1;
   }
 

resources/css/bem/search-result.less

···
 
   &::before {
     .full-size();
-    content: '';
+    content: "";
     width: 5px;
     border-top-left-radius: @border-radius-base;
     border-bottom-left-radius: @border-radius-base;

resources/css/bem/show-more-link.less

···
     margin: 5px auto 0;
   }
 
-  &[data-disabled='1'], &.js-disabled {
+  &[data-disabled="1"],
+  &.js-disabled {
     background-color: @osu-colour-b2;
   }
 
···
     position: absolute;
     display: none;
 
-    .@{_top}[data-disabled='1'] &, .@{_top}.js-disabled & {
+    .@{_top}[data-disabled="1"] &,
+    .@{_top}.js-disabled & {
       display: flex;
     }
   }
···
     display: flex;
     align-items: center;
 
-    .@{_top}[data-disabled='1'] &, .@{_top}.js-disabled & {
+    .@{_top}[data-disabled="1"] &,
+    .@{_top}.js-disabled & {
       opacity: 0;
     }
   }

resources/css/bem/simple-form.less

···
 
     &:empty {
       &::before {
-      content: '\a0';
+        content: "\a0";
       }
     }
   }
···
 
     &:empty {
       &::before {
-      content: '\a0';
+        content: "\a0";
       }
     }
 

resources/css/bem/simple-menu.less

···
 
     // extends mouse hover area to cover margin-bottom
     &::after {
-      content: '';
+      content: "";
       display: block;
       position: absolute;
       top: 100%;
···
 
     .@{_top}--forum-topic-moderation & {
       // hopefully 25px is enough to account for scrollbar (when exists)
-      max-width: calc(100vw - (2 * @forum-topic-nav-item--gutter + 2 * @_padding-vertical + 25px));
+      max-width: calc(
+        100vw -
+          (2 * @forum-topic-nav-item--gutter + 2 * @_padding-vertical + 25px)
+      );
       width: max-content;
       display: grid;
       grid-template-columns: repeat(auto-fit, @btn-circle-diameter);
···
 
     &::before {
       .full-size();
-      content: '';
+      content: "";
       background-color: fade(#000, 50%);
     }
 
···
   &__item {
     .highlight-stripe() {
       &::before {
-        content: '';
+        content: "";
         border-radius: 10px;
         position: absolute;
         top: (@_item-padding-vertical + 2px);
···
       }
     }
 
-    &[disabled], &--disabled {
+    &[disabled],
+    &--disabled {
       color: #999;
       // disable hover
       pointer-events: none;

resources/css/bem/sort.less

···
 
       &:hover {
         background-color: var(--item-hover-bg);
-      };
+      }
     }
 
     &--contest-judge {

resources/css/bem/sticky-header-breadcrumbs.less

···
     & + & {
       &::before {
         .fas();
-        content: '\f105';
+        content: "\f105";
         margin: 0 10px;
       }
     }

resources/css/bem/store-notice.less

···
 
   &--important {
     background-color: @yellow;
-    background-image: url('~@images/backgrounds/button.svg');
+    background-image: url("~@images/backgrounds/button.svg");
     background-size: @container-tablet;
     background-position: center;
     color: @osu-colour-b6;

resources/css/bem/store-order.less

···
   .colors(processing);
   .colors(shipped);
 
-  &::before{
-    content: '';
+  &::before {
+    content: "";
     position: absolute;
     top: 0;
     left: 0;

resources/css/bem/store-payment-button.less

···
   }
 
   &--paypal {
-    background-image: url('~@images/store/paypal.png');
+    background-image: url("~@images/store/paypal.png");
   }
 
   &--xsolla {
-    background-image: url('~@images/store/xsolla.png');
+    background-image: url("~@images/store/xsolla.png");
   }
 }

resources/css/bem/store-slider.less

···
   padding: 0 (@slider-callout--width / 2 - @gutter-v2 + 2px);
 
   @media @desktop {
-    padding: 0 ((@slider-callout--width + @callout-extension) / 2 - @gutter-v2-desktop + 2px);
+    padding: 0
+      (
+        (@slider-callout--width + @callout-extension) / 2 - @gutter-v2-desktop +
+          2px
+      );
   }
 
-  &__bigtext { // stupid name
+  &__bigtext {
+    // stupid name
     font-size: @font-size--large;
     font-weight: 600;
   }
···
       width: @slider-callout--width + @callout-extension;
     }
 
-    &::after, &::before {
+    &::after,
+    &::before {
       top: 100%;
       left: 50%;
       border: solid transparent;
-      content: '';
+      content: "";
       height: 0;
       width: 0;
       position: absolute;
···
     margin: 0 @preset-margin;
   }
 
-  &__subtext { // stupid name
+  &__subtext {
+    // stupid name
     margin-top: 2px;
     color: @osu-colour-c2;
   }
···
     }
 
     &--disabled {
-      .ui-slider-handle, .ui-slider-range {
+      .ui-slider-handle,
+      .ui-slider-range {
         background-color: @osu-colour-b1;
       }
     }

resources/css/bem/store-xsolla.less

···
   &__icon {
     width: 40px;
     height: 40px;
-    background-image: url('~@images/layout/xsolla.png');
+    background-image: url("~@images/layout/xsolla.png");
     background-size: contain;
   }
 

resources/css/bem/supporter-eyecatch.less

···
 // See the LICENCE file in the repository root for full licence text.
 
 .supporter-eyecatch {
-  .at2x-simple('~@images/layout/supporter/banner-bg.jpg');
+  .at2x-simple("~@images/layout/supporter/banner-bg.jpg");
   background-size: cover;
   width: auto;
   height: 480px;
···
   position: relative;
 
   &::before {
-    content: '';
+    content: "";
     .full-size();
-    background: linear-gradient(to bottom, hsla(var(--hsl-b5), 1) 4%, hsla(var(--hsl-b5), 0) 100%);
+    background: linear-gradient(
+      to bottom,
+      hsla(var(--hsl-b5), 1) 4%,
+      hsla(var(--hsl-b5), 0) 100%
+    );
   }
 
   &::after {
-    content: '';
+    content: "";
     .full-size();
-    .at2x-simple('~@images/layout/supporter/banner-fg.png');
+    .at2x-simple("~@images/layout/supporter/banner-fg.png");
     background-size: cover;
     background-position: center;
     pointer-events: none;

resources/css/bem/supporter-heart.less

···
   @animation-rate: 937.5ms; // 64bpm (aka 128bpm at half-time)
 
   @keyframes support-circle-pulsate {
-    0%   { transform: scale(0.9); }
-    20%  { transform: scale(1.0); }
-    100% { transform: scale(0.9); }
+    0% {
+      transform: scale(0.9);
+    }
+    20% {
+      transform: scale(1);
+    }
+    100% {
+      transform: scale(0.9);
+    }
   }
 
   @keyframes support-circle-glow {
     // this is basically .default-box-shadow() animated to have a less intense shadow with an added glow when pulsating
-    0%   { box-shadow: 0 1px @box-shadow-radius @box-shadow-color, inset 0 0 0px white;  }
-    20%  { box-shadow: 0 1px @box-shadow-radius lighten(@box-shadow-color, 70%), inset 0 0 5px white;  }
-    80%  { box-shadow: 0 1px @box-shadow-radius @box-shadow-color, inset 0 0 0px white;  }
+    0% {
+      box-shadow:
+        0 1px @box-shadow-radius @box-shadow-color,
+        inset 0 0 0px white;
+    }
+    20% {
+      box-shadow:
+        0 1px @box-shadow-radius lighten(@box-shadow-color, 70%),
+        inset 0 0 5px white;
+    }
+    80% {
+      box-shadow:
+        0 1px @box-shadow-radius @box-shadow-color,
+        inset 0 0 0px white;
+    }
   }
 
   @keyframes support-heart-pulsate {
-    0%   { transform: scale(1.0); }
-    20%  { transform: scale(1.2); }
-    100% { transform: scale(1.0); }
+    0% {
+      transform: scale(1);
+    }
+    20% {
+      transform: scale(1.2);
+    }
+    100% {
+      transform: scale(1);
+    }
   }
 
   @keyframes support-heart-glow {
-    0%   { text-shadow: 0 0 0px white; }
-    20%  { text-shadow: 0 0 10px white; }
-    80%  { text-shadow: 0 0 0px white; }
+    0% {
+      text-shadow: 0 0 0px white;
+    }
+    20% {
+      text-shadow: 0 0 10px white;
+    }
+    80% {
+      text-shadow: 0 0 0px white;
+    }
   }
 
   .btn-bg();
···
   &--active {
     opacity: 1;
     background-color: @osu-colour-pink-1;
-    animation: support-circle-pulsate @animation-rate infinite ease-in-out, support-circle-glow @animation-rate infinite ease-in-out;
+    animation:
+      support-circle-pulsate @animation-rate infinite ease-in-out,
+      support-circle-glow @animation-rate infinite ease-in-out;
     animation-fill-mode: none;
 
     &::after {
-      animation: support-heart-pulsate @animation-rate infinite ease-in-out, support-heart-glow @animation-rate infinite ease-in-out;
+      animation:
+        support-heart-pulsate @animation-rate infinite ease-in-out,
+        support-heart-glow @animation-rate infinite ease-in-out;
     }
   }
 }

resources/css/bem/supporter-perk-list-hero.less

···
     position: relative;
 
     @media @desktop {
-      margin-top: -50px
+      margin-top: -50px;
     }
   }
 

resources/css/bem/supporter-promo.less

···
     flex-direction: column;
 
     @media @desktop {
-     justify-content: center;
-     padding-right: 50px;
-     height: 100%;
+      justify-content: center;
+      padding-right: 50px;
+      height: 100%;
     }
 
     @media @mobile {
···
   }
 
   &__heart {
-    .at2x-simple('~@images/badges/heart.png');
+    .at2x-simple("~@images/badges/heart.png");
     .circle(75px);
     background-size: 75px 75px;
 
···
     flex-direction: column;
     align-items: center;
 
-    .at2x-simple('~@images/layout/pippi.png');
+    .at2x-simple("~@images/layout/pippi.png");
 
     width: 164px;
     height: 234px;
···
     font-weight: 700;
     color: @pink-dark;
 
-    &:hover, &:active {
+    &:hover,
+    &:active {
       color: #fff;
     }
   }

resources/css/bem/supporter-status.less

···
   color: white;
 
   @keyframes support-fill-pour {
-    0% { width: 0; }
+    0% {
+      width: 0;
+    }
   }
 
   display: flex;
···
   }
 
   &__pippi {
-    .at2x-simple('~@images/layout/supporter/header-pippi.png');
+    .at2x-simple("~@images/layout/supporter/header-pippi.png");
     background-size: cover;
     background-position: center;
     height: 348px;

resources/css/bem/title.less

···
     padding: 10px 0;
 
     &::before {
-      content: '';
+      content: "";
       height: 0.65em;
       margin-top: 0.3em;
       margin-left: -6px;

resources/css/bem/tournament-list-item.less

···
 // Copyright (c) ppy Pty Ltd <[e-mail]>. Licensed under the GNU Affero General Public License v3.0.
 // See the LICENCE file in the repository root for full licence text.
 
- .tournament-list-item {
-    @_top: tournament-list-item;
+.tournament-list-item {
+  @_top: tournament-list-item;
 
-    display: flex;
-    flex-direction: column;
-    background-color: @osu-colour-b4;
+  display: flex;
+  flex-direction: column;
+  background-color: @osu-colour-b4;
 
-    .link-white();
-    .link-plain();
-    .default-box-shadow();
+  .link-white();
+  .link-plain();
+  .default-box-shadow();
 
-    transition: 50ms ease-in-out;
+  transition: 50ms ease-in-out;
 
-    &:hover {
-      @media @desktop {
-        .@{_top}__image {
-          transform: scale(1.02);
-        }
+  &:hover {
+    @media @desktop {
+      .@{_top}__image {
+        transform: scale(1.02);
       }
-      background-color: @osu-colour-b3;
     }
+    background-color: @osu-colour-b3;
+  }
 
-    &__metadata {
-      display: flex;
-      justify-content: space-between;
+  &__metadata {
+    display: flex;
+    justify-content: space-between;
 
-      @media @mobile {
-        align-items: center;
-      }
+    @media @mobile {
+      align-items: center;
     }
+  }
 
-    &__metadata-left {
-      padding: 15px;
-      padding-top: 10px;
-    }
+  &__metadata-left {
+    padding: 15px;
+    padding-top: 10px;
+  }
 
-    &__metadata-right {
-      padding: 10px;
-    }
+  &__metadata-right {
+    padding: 10px;
+  }
 
-    &__tournament-date {
-      font-size: @font-size--title-small-4;
-      font-weight: bold;
-      padding-bottom: 5px;
+  &__tournament-date {
+    font-size: @font-size--title-small-4;
+    font-weight: bold;
+    padding-bottom: 5px;
 
-      @media @mobile {
-        font-size: 12px;
-      }
+    @media @mobile {
+      font-size: 12px;
     }
+  }
 
-    &__registration-date {
-      color: @osu-colour-f1;
-      font-size: 12px;
+  &__registration-date {
+    color: @osu-colour-f1;
+    font-size: 12px;
 
-      @media @mobile {
-        font-size: 9px;
-      }
+    @media @mobile {
+      font-size: 9px;
     }
+  }
 
-    &__registrations {
-      font-size: @font-size--title-small-2;
+  &__registrations {
+    font-size: @font-size--title-small-2;
 
-      @media @mobile {
-        font-size: 12px;
-        display: flex;
-        flex-direction: column-reverse;
-        align-items: center;
-      }
+    @media @mobile {
+      font-size: 12px;
+      display: flex;
+      flex-direction: column-reverse;
+      align-items: center;
     }
+  }
 
-    &__image-wrapper {
-      overflow: hidden;
-    }
+  &__image-wrapper {
+    overflow: hidden;
+  }
 
-    &__image {
-      transition: 50ms ease-in-out;
-      height: 510px;
-      width: 100%;
-      object-fit: cover;
-      will-change: transform, filter, opacity;
+  &__image {
+    transition: 50ms ease-in-out;
+    height: 510px;
+    width: 100%;
+    object-fit: cover;
+    will-change: transform, filter, opacity;
 
-      .@{_top}--old & {
-        filter: grayscale();
-        opacity: 0.75;
-        height: 210px;
-      }
+    .@{_top}--old & {
+      filter: grayscale();
+      opacity: 0.75;
+      height: 210px;
+    }
 
-      .@{_top}--old:hover & {
-        filter: none;
-        opacity: 1;
-      }
+    .@{_top}--old:hover & {
+      filter: none;
+      opacity: 1;
     }
   }
+}

resources/css/bem/tournament.less

···
 
     font-size: 14px;
 
-    > h1, h2, h3, h4, h5, h6 {
+    > h1,
+    h2,
+    h3,
+    h4,
+    h5,
+    h6 {
       color: white;
     }
     a {

resources/css/bem/track-cover-preview.less

···
 
   &::before {
     .full-size();
-    content: '';
+    content: "";
     background-color: fade(#000, 75%);
   }
 }

resources/css/bem/user-card-brick.less

···
     .link-plain();
 
     display: flex;
-    padding: @_border-width @_brick-padding-horizontal @_border-width @_brick-padding-horizontal - @_group-bar-margin;
+    padding: @_border-width @_brick-padding-horizontal @_border-width
+      @_brick-padding-horizontal - @_group-bar-margin;
     height: 100%;
     align-items: center;
     overflow: hidden;

resources/css/bem/user-card.less

···
   }
 
   &--has-outline::after {
-    .@{top}:hover&, .@{top}--active& {
+    .@{top}:hover&,
+    .@{top}--active& {
       .full-size();
-      content: '';
+      content: "";
       border: 2px solid @osu-colour-l1;
       border-radius: @card-border-radius;
       pointer-events: none;
···
     }
 
     .@{top}--list & {
-      border-radius: @avatar-border-radius 0 0 @avatar-border-radius
+      border-radius: @avatar-border-radius 0 0 @avatar-border-radius;
     }
   }
 

resources/css/bem/user-cards.less

···
   display: grid;
   gap: 10px;
   // auto-fit centres if there's only 1 card
-  grid-template-columns: repeat(auto-fill, minmax(@user-card-width-min, @user-card-width));
+  grid-template-columns: repeat(
+    auto-fill,
+    minmax(@user-card-width-min, @user-card-width)
+  );
 
   justify-content: center;
 

resources/css/bem/user-home-beatmapset.less

···
 
   &__creator {
     font-size: 10px;
-    margin-top: 2px
+    margin-top: 2px;
   }
 
   &__meta {

resources/css/bem/user-level.less

···
 
   &__icon {
     .full-size();
-    clip-path: path("m 25,2.7 a 9.3,9.3 0 0 1 4.7,1.2 l 11.3,6.5 a 9.3,9.3 0 0 1 4.6,8.1 v 13.0 a 9.3,9.3 0 0 1 -4.6,8.1 L 29.7,46.1 a 9.3,9.3 0 0 1 -9.3,0 L 9.1,39.6 A 9.3,9.3 0 0 1 4.4,31.5 v -13.0 A 9.3,9.3 0 0 1 9.1,10.4 L 20.4,3.9 A 9.3,9.3 0 0 1 25,2.7 M 25,0.0 A 11.9,11.9 0 0 0 19.0,1.6 L 7.7,8.1 A 12.0,12.0 0 0 0 1.7,18.5 v 13.0 a 12.0,12.0 0 0 0 6.0,10.4 l 11.3,6.5 a 12.0,12.0 0 0 0 12.0,0 l 11.3,-6.5 a 12.0,12.0 0 0 0 6.0,-10.4 v -13.0 A 12.0,12.0 0 0 0 42.3,8.1 L 31.0,1.6 A 11.9,11.9 0 0 0 25.0,0 Z");
+    clip-path: path(
+      "m 25,2.7 a 9.3,9.3 0 0 1 4.7,1.2 l 11.3,6.5 a 9.3,9.3 0 0 1 4.6,8.1 v 13.0 a 9.3,9.3 0 0 1 -4.6,8.1 L 29.7,46.1 a 9.3,9.3 0 0 1 -9.3,0 L 9.1,39.6 A 9.3,9.3 0 0 1 4.4,31.5 v -13.0 A 9.3,9.3 0 0 1 9.1,10.4 L 20.4,3.9 A 9.3,9.3 0 0 1 25,2.7 M 25,0.0 A 11.9,11.9 0 0 0 19.0,1.6 L 7.7,8.1 A 12.0,12.0 0 0 0 1.7,18.5 v 13.0 a 12.0,12.0 0 0 0 6.0,10.4 l 11.3,6.5 a 12.0,12.0 0 0 0 12.0,0 l 11.3,-6.5 a 12.0,12.0 0 0 0 6.0,-10.4 v -13.0 A 12.0,12.0 0 0 0 42.3,8.1 L 31.0,1.6 A 11.9,11.9 0 0 0 25.0,0 Z"
+    );
     background: linear-gradient(var(--bg));
   }
 

resources/css/bem/user-list-popup.less

···
   .default-border-radius();
   .default-box-shadow();
 
-  @media @desktop  {
+  @media @desktop {
     --columns: 10;
   }
 

resources/css/bem/user-session-list-session.less

···
 // Copyright (c) ppy Pty Ltd <[e-mail]>. Licensed under the GNU Affero General Public License v3.0.
 // See the LICENCE file in the repository root for full licence text.
 
- .user-session-list-session {
+.user-session-list-session {
   flex-direction: row;
   margin-bottom: 10px;
 

resources/css/bem/user-verification-popup.less

···
 
   &__modal {
     .default-box-shadow();
-    .at2x-simple('~@images/backgrounds/user-verification.jpg');
+    .at2x-simple("~@images/backgrounds/user-verification.jpg");
     background-size: cover;
     background-position: center 0;
     width: 100%;

resources/css/bem/wiki-main-page-panel.less

···
 
   text-align: center;
 
-
   &--full {
     @media @desktop {
       grid-column: 1 / span 2;

resources/css/bem/wiki-search.less

···
     border: @_border-size solid hsl(var(--hsl-b6));
 
     &:focus-within {
-      box-shadow: 0 0 10px  hsl(var(--hsl-h2));
+      box-shadow: 0 0 10px hsl(var(--hsl-h2));
       border: @_border-size solid hsl(var(--hsl-h2));
     }
   }

resources/css/bootstrap-variables.less

···
 @padding-xs-vertical: 0;
 @padding-xs-horizontal: 5px;
 
-
 @input-color: @gray-dark;
 @input-border-focus: @pink;
 
···
 @badge-color: @purple-darker;
 @badge-link-hover-color: @pink-dark;
 @badge-bg: #fff;
-
 
 @nav-link-hover-bg: transparent;
 @nav-link-padding: 10px;

resources/css/colors.less

···
 @green-dark: #668800;
 @green-darker: #445500;
 
-@red-lighter: #FFEDED;
-@red-light: #ED7887;
-@red: #ED1221;
-@red-dark: #BA0011;
+@red-lighter: #ffeded;
+@red-light: #ed7887;
+@red: #ed1221;
+@red-dark: #ba0011;
 @red-darker: #870000;
 
 // https://about.twitter.com/en/who-we-are/brand-toolkit
···
 // bandcamp "green" from the provided buttons at https://bandcamp.com/buttons
 @bandcamp-colour: #61929c;
 // spotify "Green*" from https://developer.spotify.com/design/
-@spotify-colour: #1DB954;
+@spotify-colour: #1db954;
 // patreon orange from the provided logos at https://www.patreon.com/toolbox/media
 @patreon-colour: #e6461a;
 // youtube red from https://www.youtube.com/yt/brand/ (yes it's supposed to be rgb(255,0,0) - my poor eyes...)
···
     b4: 10%, 20%;
     b5: 10%, 15%;
     b6: 10%, 10%;
-  }
+  };
 
   each(@base-colours, {
     --hsl-@{key}: var(--base-hue), @value;
···
     orange: 45;
     red: 360;
     darkorange: 20;
-  }
+  };
 
   --c-saturation-1: 100%;
   --c-saturation-2: 80%;
···
 @link-gray-light: #ccc;
 @link-gray-light-hover: #eee;
 
-@group-colour-default: #0087CA;
+@group-colour-default: #0087ca;
 
 @colour-rank-d: #ff5858;
 @colour-rank-c: #ea7948;

resources/css/entrypoints/docs.less

···
 @import "~normalize.css/normalize.css";
 @import "~highlight.js/styles/obsidian.css";
 
-@font-default: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
+@font-default: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
 
 body,
 html {
-    font-family: @font-default;
-    font-size: 14px;
+  font-family: @font-default;
+  font-size: 14px;
 }
 
 .content h1,
···
 .content h4,
 .content h5,
 .content h6 {
-    font-family: @font-default;
+  font-family: @font-default;
 }
 
 .content h1,
···
 .content h4,
 .content h5,
 .content h6 {
-    font-weight: 700
+  font-weight: 700;
 }
 
 .content code,
 .content pre {
-    font-family: Consolas, Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono, Bitstream Vera Sans Mono, Courier New, monospace, serif;
-    font-size: 14px;
-    line-height: 1.5
+  font-family:
+    Consolas,
+    Menlo,
+    Monaco,
+    Lucida Console,
+    Liberation Mono,
+    DejaVu Sans Mono,
+    Bitstream Vera Sans Mono,
+    Courier New,
+    monospace,
+    serif;
+  font-size: 14px;
+  line-height: 1.5;
 }
 
 .content code {
-    word-break: break-all;
-    word-break: break-word;
+  word-break: break-all;
+  word-break: break-word;
 }
 
 .content aside.notice:before,
 .content aside.success:before,
 .content aside.warning:before,
-.tocify-wrapper>.search:before {
-    font-family: @font-default;
-    speak: none;
-    font-style: normal;
-    font-variant: normal;
-    text-transform: none;
-    line-height: 1
+.tocify-wrapper > .search:before {
+  font-family: @font-default;
+  speak: none;
+  font-style: normal;
+  font-variant: normal;
+  text-transform: none;
+  line-height: 1;
 }
 
 .content aside.warning:before {
-    content: "✋"
+  content: "✋";
 }
 
 .content aside.notice:before {
-    content: "ℹ"
+  content: "ℹ";
 }
 
 .content aside.success:before {
-    content: "✅"
+  content: "✅";
 }
 
-.tocify-wrapper>.search:before {
-    content: "🔎"
+.tocify-wrapper > .search:before {
+  content: "🔎";
 }
 
 .highlight .c,
 .highlight .c1,
 .highlight .cm,
 .highlight .cs {
-    color: #909090
+  color: #909090;
 }
 
 .highlight,
 .highlight .w {
-    background-color: #292929
+  background-color: #292929;
 }
 
 .hljs {
-    display: block;
-    overflow-x: auto;
-    padding: .5em;
-    background: #23241f
+  display: block;
+  overflow-x: auto;
+  padding: 0.5em;
+  background: #23241f;
 }
 
 .hljs,
 .hljs-subst,
 .hljs-tag {
-    color: #f8f8f2
+  color: #f8f8f2;
 }
 
 .hljs-emphasis,
 .hljs-strong {
-    color: #a8a8a2
+  color: #a8a8a2;
 }
 
 .hljs-bullet,
···
 .hljs-number,
 .hljs-quote,
 .hljs-regexp {
-    color: #ae81ff
+  color: #ae81ff;
 }
 
 .hljs-code,
 .hljs-section,
 .hljs-selector-class,
 .hljs-title {
-    color: #a6e22e
+  color: #a6e22e;
 }
 
 .hljs-strong {
-    font-weight: 700
+  font-weight: 700;
 }
 
 .hljs-emphasis {
-    font-style: italic
+  font-style: italic;
 }
 
 .hljs-attr,
 .hljs-keyword,
 .hljs-name,
 .hljs-selector-tag {
-    color: #f92672
+  color: #f92672;
 }
 
 .hljs-attribute,
 .hljs-symbol {
-    color: #66d9ef
+  color: #66d9ef;
 }
 
 .hljs-class .hljs-title,
 .hljs-params {
-    color: #f8f8f2
+  color: #f8f8f2;
 }
 
 .hljs-addition,
···
 .hljs-template-variable,
 .hljs-type,
 .hljs-variable {
-    color: #e6db74
+  color: #e6db74;
 }
 
 .hljs-comment,
 .hljs-deletion,
 .hljs-meta {
-    color: #75715e
+  color: #75715e;
 }
 
 body,
 html {
-    color: #333;
-    padding: 0;
-    margin: 0;
-    -webkit-font-smoothing: antialiased;
-    -moz-osx-font-smoothing: grayscale;
-    background-color: whitesmoke;
-    height: 100%;
-    -webkit-text-size-adjust: none
+  color: #333;
+  padding: 0;
+  margin: 0;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  background-color: whitesmoke;
+  height: 100%;
+  -webkit-text-size-adjust: none;
 }
 
-#toc>ul>li>a>span {
-    float: right;
-    background-color: #2484ff;
-    border-radius: 40px;
-    width: 20px
+#toc > ul > li > a > span {
+  float: right;
+  background-color: #2484ff;
+  border-radius: 40px;
+  width: 20px;
 }
 
 .tocify-wrapper {
-    transition: left .3s ease-in-out;
-    overflow-y: auto;
-    overflow-x: hidden;
-    position: fixed;
-    z-index: 30;
-    top: 0;
-    left: 0;
-    bottom: 0;
-    width: 230px;
-    background-color: #393939;
-    font-size: 13px;
-    font-weight: 700
+  transition: left 0.3s ease-in-out;
+  overflow-y: auto;
+  overflow-x: hidden;
+  position: fixed;
+  z-index: 30;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  width: 230px;
+  background-color: #393939;
+  font-size: 13px;
+  font-weight: 700;
 }
 
 .tocify-wrapper .lang-selector {
-    display: none
+  display: none;
 }
 
 .tocify-wrapper .lang-selector a {
-    padding-top: .5em;
-    padding-bottom: .5em
+  padding-top: 0.5em;
+  padding-bottom: 0.5em;
 }
 
-.tocify-wrapper>img {
-    display: block
+.tocify-wrapper > img {
+  display: block;
 }
 
-.tocify-wrapper>.search {
-    position: relative
+.tocify-wrapper > .search {
+  position: relative;
 }
 
-.tocify-wrapper>.search input {
-    background: #393939;
-    border-width: 0 0 1px;
-    border-color: #666;
-    padding: 6px 0 6px 20px;
-    box-sizing: border-box;
-    margin: 10px 15px;
-    width: 200px;
-    outline: none;
-    color: #fff;
-    border-radius: 0
+.tocify-wrapper > .search input {
+  background: #393939;
+  border-width: 0 0 1px;
+  border-color: #666;
+  padding: 6px 0 6px 20px;
+  box-sizing: border-box;
+  margin: 10px 15px;
+  width: 200px;
+  outline: none;
+  color: #fff;
+  border-radius: 0;
 }
 
-.tocify-wrapper>.search:before {
-    position: absolute;
-    top: 17px;
-    left: 15px;
-    color: #fff
+.tocify-wrapper > .search:before {
+  position: absolute;
+  top: 17px;
+  left: 15px;
+  color: #fff;
 }
 
-.tocify-wrapper img+.tocify {
-    margin-top: 20px
+.tocify-wrapper img + .tocify {
+  margin-top: 20px;
 }
 
 .tocify-wrapper .search-results {
-    margin-top: 0;
-    box-sizing: border-box;
-    height: 0;
-    overflow-y: auto;
-    overflow-x: hidden;
-    transition-property: height, margin;
-    transition-duration: .18s;
-    transition-timing-function: ease-in-out;
-    background: linear-gradient(180deg, rgba(0, 0, 0, .2), transparent 8px), linear-gradient(0deg, rgba(0, 0, 0, .2), transparent 8px), linear-gradient(180deg, #000, transparent 1.5px), linear-gradient(0deg, #939393, hsla(0, 0%, 58%, 0) 1.5px), #262626
+  margin-top: 0;
+  box-sizing: border-box;
+  height: 0;
+  overflow-y: auto;
+  overflow-x: hidden;
+  transition-property: height, margin;
+  transition-duration: 0.18s;
+  transition-timing-function: ease-in-out;
+  background: linear-gradient(180deg, rgba(0, 0, 0, 0.2), transparent 8px),
+    linear-gradient(0deg, rgba(0, 0, 0, 0.2), transparent 8px),
+    linear-gradient(180deg, #000, transparent 1.5px),
+    linear-gradient(0deg, #939393, hsla(0, 0%, 58%, 0) 1.5px), #262626;
 }
 
 .tocify-wrapper .search-results.visible {
-    height: 30%;
-    margin-bottom: 1em
+  height: 30%;
+  margin-bottom: 1em;
 }
 
 .tocify-wrapper .search-results li {
-    margin: 1em 15px;
-    line-height: 1
+  margin: 1em 15px;
+  line-height: 1;
 }
 
 .tocify-wrapper a {
-    color: #fff;
-    text-decoration: none
+  color: #fff;
+  text-decoration: none;
 }
 
 .tocify-wrapper .search-results a:hover {
-    text-decoration: underline
+  text-decoration: underline;
 }
 
 .tocify-wrapper .toc-footer li,
-.tocify-wrapper .tocify-item>a {
-    padding: 0 15px;
-    display: block;
-    overflow-x: hidden;
-    white-space: nowrap;
-    text-overflow: ellipsis
+.tocify-wrapper .tocify-item > a {
+  padding: 0 15px;
+  display: block;
+  overflow-x: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
 }
-.tocify-wrapper .tocify-item.level-3>a {
-    padding: 0 25px;
+.tocify-wrapper .tocify-item.level-3 > a {
+  padding: 0 25px;
 }
 
 .tocify-wrapper li,
 .tocify-wrapper ul {
-    list-style: none;
-    margin: 0;
-    padding: 0;
-    line-height: 28px
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  line-height: 28px;
 }
 
 .tocify-wrapper li {
-    color: #fff;
-    transition-property: background;
-    transition-timing-function: linear;
-    transition-duration: .23s
+  color: #fff;
+  transition-property: background;
+  transition-timing-function: linear;
+  transition-duration: 0.23s;
 }
 
 .tocify-wrapper .tocify-focus {
-    box-shadow: 0 1px 0 #000;
-    background-color: #2467af;
-    color: #fff;
-    font-weight: bold;
+  box-shadow: 0 1px 0 #000;
+  background-color: #2467af;
+  color: #fff;
+  font-weight: bold;
 }
 
 .tocify-wrapper .tocify-subheader {
-    display: none;
-    background-color: #262626;
-    font-weight: 500;
-    background: linear-gradient(180deg, rgba(0, 0, 0, .2), transparent 8px), linear-gradient(0deg, rgba(0, 0, 0, .2), transparent 8px), linear-gradient(180deg, #000, transparent 1.5px), linear-gradient(0deg, #939393, hsla(0, 0%, 58%, 0) 1.5px), #262626
+  display: none;
+  background-color: #262626;
+  font-weight: 500;
+  background: linear-gradient(180deg, rgba(0, 0, 0, 0.2), transparent 8px),
+    linear-gradient(0deg, rgba(0, 0, 0, 0.2), transparent 8px),
+    linear-gradient(180deg, #000, transparent 1.5px),
+    linear-gradient(0deg, #939393, hsla(0, 0%, 58%, 0) 1.5px), #262626;
 }
 
 .tocify-wrapper .jets-searching .tocify-subheader,
 .tocify-wrapper .tocify-subheader.visible {
-    display: block;
+  display: block;
 }
 
-.tocify-wrapper .tocify-subheader .tocify-item>a {
-    padding-left: 25px;
-    font-size: 12px
+.tocify-wrapper .tocify-subheader .tocify-item > a {
+  padding-left: 25px;
+  font-size: 12px;
 }
 
-.tocify-wrapper .tocify-subheader .tocify-item.level-3>a {
-    padding-left: 35px;
+.tocify-wrapper .tocify-subheader .tocify-item.level-3 > a {
+  padding-left: 35px;
 }
 
-.tocify-wrapper .tocify-subheader>li:last-child {
-    box-shadow: none
+.tocify-wrapper .tocify-subheader > li:last-child {
+  box-shadow: none;
 }
 
 .tocify-wrapper .toc-footer {
-    padding: 1em 0;
-    margin-top: 1em;
-    border-top: 1px dashed #666
+  padding: 1em 0;
+  margin-top: 1em;
+  border-top: 1px dashed #666;
 }
 
 .tocify-wrapper .toc-footer a,
 .tocify-wrapper .toc-footer li {
-    color: #fff;
-    text-decoration: none
+  color: #fff;
+  text-decoration: none;
 }
 
 .tocify-wrapper .toc-footer a:hover {
-    text-decoration: underline
+  text-decoration: underline;
 }
 
 .tocify-wrapper .toc-footer li {
-    font-size: .8em;
-    line-height: 1.7;
-    text-decoration: none
+  font-size: 0.8em;
+  line-height: 1.7;
+  text-decoration: none;
 }
 
 #nav-button {
-    padding: 0 1.5em 5em 0;
-    display: none;
-    position: fixed;
-    top: 0;
-    left: 0;
-    z-index: 100;
-    color: #000;
-    text-decoration: none;
-    font-weight: 700;
-    opacity: .7;
-    line-height: 16px;
-    transition: left .3s ease-in-out
+  padding: 0 1.5em 5em 0;
+  display: none;
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: 100;
+  color: #000;
+  text-decoration: none;
+  font-weight: 700;
+  opacity: 0.7;
+  line-height: 16px;
+  transition: left 0.3s ease-in-out;
 }
 
 #nav-button span {
-    display: block;
-    padding: 6px;
-    background-color: rgba(234, 242, 246, .7);
-    -webkit-transform-origin: 0 0;
-    transform-origin: 0 0;
-    -webkit-transform: rotate(-90deg) translate(-100%);
-    transform: rotate(-90deg) translate(-100%);
-    border-radius: 0 0 0 5px
+  display: block;
+  padding: 6px;
+  background-color: rgba(234, 242, 246, 0.7);
+  -webkit-transform-origin: 0 0;
+  transform-origin: 0 0;
+  -webkit-transform: rotate(-90deg) translate(-100%);
+  transform: rotate(-90deg) translate(-100%);
+  border-radius: 0 0 0 5px;
 }
 
 #nav-button img {
-    height: 16px;
-    vertical-align: bottom
+  height: 16px;
+  vertical-align: bottom;
 }
 
 #nav-button:hover {
-    opacity: 1
+  opacity: 1;
 }
 
 #nav-button.open {
-    left: 230px
+  left: 230px;
 }
 
 .page-wrapper {
-    margin-left: 230px;
-    position: relative;
-    z-index: 10;
-    background-color: #eaf2f6;
-    min-height: 100%;
-    padding-bottom: 1px
+  margin-left: 230px;
+  position: relative;
+  z-index: 10;
+  background-color: #eaf2f6;
+  min-height: 100%;
+  padding-bottom: 1px;
 }
 
 .page-wrapper .dark-box {
-    width: 50%;
-    background-color: #393939;
-    position: absolute;
-    right: 0;
-    top: 0;
-    bottom: 0
+  width: 50%;
+  background-color: #393939;
+  position: absolute;
+  right: 0;
+  top: 0;
+  bottom: 0;
 }
 
 .page-wrapper .lang-selector {
-    position: fixed;
-    z-index: 50;
-    border-bottom: 5px solid #393939
+  position: fixed;
+  z-index: 50;
+  border-bottom: 5px solid #393939;
 }
 
 .lang-selector {
-    background-color: #222;
-    width: 100%;
-    font-weight: 700
+  background-color: #222;
+  width: 100%;
+  font-weight: 700;
 }
 
 .lang-selector button {
-    display: block;
-    float: left;
-    color: #fff;
-    text-decoration: none;
-    padding: 0 10px;
-    line-height: 30px;
-    outline: 0;
-    background: transparent;
-    border: none;
-    --bg: transparent;
-    --bg-hover: #111;
-    --bg-active: #393939;
-    background: var(--bg);
+  display: block;
+  float: left;
+  color: #fff;
+  text-decoration: none;
+  padding: 0 10px;
+  line-height: 30px;
+  outline: 0;
+  background: transparent;
+  border: none;
+  --bg: transparent;
+  --bg-hover: #111;
+  --bg-active: #393939;
+  background: var(--bg);
 }
 
 .lang-selector button:active,
 .lang-selector button:hover,
 .lang-selector button:focus {
-    --bg: var(--bg-hover);
+  --bg: var(--bg-hover);
 }
 
 .lang-selector:after {
-    content: '';
-    clear: both;
-    display: block
+  content: "";
+  clear: both;
+  display: block;
 }
 
 .content {
-    position: relative;
-    z-index: 30
+  position: relative;
+  z-index: 30;
 }
 
 .content:after {
-    content: '';
-    display: block;
-    clear: both
+  content: "";
+  display: block;
+  clear: both;
 }
 
-.content>aside,
-.content>details,
-.content>dl,
-.content>h1,
-.content>h2,
-.content>h3,
-.content>h4,
-.content>h5,
-.content>h6,
-.content>ol,
-.content>p,
-.content>table,
-.content>ul,
-.content>form>aside,
-.content>form>details,
-.content>form>h1,
-.content>form>h2,
-.content>form>h3,
-.content>form>h4,
-.content>form>h5,
-.content>form>h6,
-.content>form>p,
-.content>form>table,
-.content>form>ul,
-.content>form>div {
-    margin-right: 50%;
-    padding: 0 28px;
-    box-sizing: border-box;
-    display: block;
-    text-shadow: 0 1px 0 #fff
+.content > aside,
+.content > details,
+.content > dl,
+.content > h1,
+.content > h2,
+.content > h3,
+.content > h4,
+.content > h5,
+.content > h6,
+.content > ol,
+.content > p,
+.content > table,
+.content > ul,
+.content > form > aside,
+.content > form > details,
+.content > form > h1,
+.content > form > h2,
+.content > form > h3,
+.content > form > h4,
+.content > form > h5,
+.content > form > h6,
+.content > form > p,
+.content > form > table,
+.content > form > ul,
+.content > form > div {
+  margin-right: 50%;
+  padding: 0 28px;
+  box-sizing: border-box;
+  display: block;
+  text-shadow: 0 1px 0 #fff;
 }
 
-.content>ol,
-.content>ul {
-    padding-left: 43px
+.content > ol,
+.content > ul {
+  padding-left: 43px;
 }
 
-.content>div,
-.content>h1,
-.content>h2 {
-    clear: both
+.content > div,
+.content > h1,
+.content > h2 {
+  clear: both;
 }
 
 .content h1 {
-    font-size: 30px;
-    padding-top: .5em;
-    padding-bottom: .5em;
-    border-bottom: 1px solid #ccc;
-    margin-bottom: 21px;
-    margin-top: 2em;
-    border-top: 1px solid #ddd;
-    background-image: linear-gradient(180deg, #fff, #f9f9f9)
+  font-size: 30px;
+  padding-top: 0.5em;
+  padding-bottom: 0.5em;
+  border-bottom: 1px solid #ccc;
+  margin-bottom: 21px;
+  margin-top: 2em;
+  border-top: 1px solid #ddd;
+  background-image: linear-gradient(180deg, #fff, #f9f9f9);
 }
 
-.content div:first-child+h1,
+.content div:first-child + h1,
 .content h1:first-child {
-    border-top-width: 0;
-    margin-top: 0
+  border-top-width: 0;
+  margin-top: 0;
 }
 
 .content h2 {
-    font-size: 20px;
-    margin-top: 4em;
-    margin-bottom: 0;
-    border-top: 1px solid #ccc;
-    padding-top: 1.2em;
-    padding-bottom: 1.2em;
-    background-image: linear-gradient(180deg, hsla(0, 0%, 100%, .4), hsla(0, 0%, 100%, 0))
+  font-size: 20px;
+  margin-top: 4em;
+  margin-bottom: 0;
+  border-top: 1px solid #ccc;
+  padding-top: 1.2em;
+  padding-bottom: 1.2em;
+  background-image: linear-gradient(
+    180deg,
+    hsla(0, 0%, 100%, 0.4),
+    hsla(0, 0%, 100%, 0)
+  );
 }
 
-.content h1+div+h2,
-.content h1+h2 {
-    margin-top: -21px;
-    border-top: none
+.content h1 + div + h2,
+.content h1 + h2 {
+  margin-top: -21px;
+  border-top: none;
 }
 
 .content h3,
 .content h4,
 .content h5,
 .content h6 {
-    font-size: 15px;
-    margin-top: 2.5em;
-    margin-bottom: .8em
+  font-size: 15px;
+  margin-top: 2.5em;
+  margin-bottom: 0.8em;
 }
 
 .content h4,
 .content h5,
 .content h6 {
-    font-size: 10px
+  font-size: 10px;
 }
 
 .content hr {
-    margin: 2em 0;
-    border-top: 2px solid #393939;
-    border-bottom: 2px solid #eaf2f6
+  margin: 2em 0;
+  border-top: 2px solid #393939;
+  border-bottom: 2px solid #eaf2f6;
 }
 
 .content table {
-    margin-bottom: 1em;
-    overflow: auto;
-    border-collapse: collapse;
+  margin-bottom: 1em;
+  overflow: auto;
+  border-collapse: collapse;
 }
 
 .content table td,
 .content table th {
-    text-align: left;
-    vertical-align: top;
-    line-height: 1.6
+  text-align: left;
+  vertical-align: top;
+  line-height: 1.6;
 }
 
 .content table th {
-    padding: 5px 10px;
-    border-bottom: 1px solid #ccc;
-    vertical-align: bottom
+  padding: 5px 10px;
+  border-bottom: 1px solid #ccc;
+  vertical-align: bottom;
 }
 
 .content table td {
-    padding: 10px
+  padding: 10px;
 }
 
 .content table tr:last-child {
-    border-bottom: 1px solid #ccc
+  border-bottom: 1px solid #ccc;
 }
 
-.content table tr:nth-child(odd)>td {
-    background-color: #ebf3f6
+.content table tr:nth-child(odd) > td {
+  background-color: #ebf3f6;
 }
 
-.content table tr:nth-child(even)>td {
-    background-color: #ebf2f6
+.content table tr:nth-child(even) > td {
+  background-color: #ebf2f6;
 }
 
 .content dt {
-    font-weight: 700
+  font-weight: 700;
 }
 
 .content dd {
-    margin-left: 15px
+  margin-left: 15px;
 }
 
 .content dd,
 .content dt,
 .content li,
 .content p {
-    line-height: 1.6;
-    margin-top: 0
+  line-height: 1.6;
+  margin-top: 0;
 }
 
 .content img {
-    max-width: 100%
+  max-width: 100%;
 }
 
 .content code {
-    padding: 3px;
-    border-radius: 3px;
-    background-color: rgba(0, 0, 0, 0.05);
+  padding: 3px;
+  border-radius: 3px;
+  background-color: rgba(0, 0, 0, 0.05);
 }
 
-.content pre>code {
-    background-color: transparent;
-    padding: 0
+.content pre > code {
+  background-color: transparent;
+  padding: 0;
 }
 
 .content aside {
-    padding-top: 1em;
-    padding-bottom: 1em;
-    margin-top: 1.5em;
-    margin-bottom: 1.5em;
-    background: #292929;
-    line-height: 1.6;
-    color: #c8c8c8;
-    text-shadow: none;
+  padding-top: 1em;
+  padding-bottom: 1em;
+  margin-top: 1.5em;
+  margin-bottom: 1.5em;
+  background: #292929;
+  line-height: 1.6;
+  color: #c8c8c8;
+  text-shadow: none;
 }
 
 .content aside.info {
-    background: #8fbcd4;
-    text-shadow: 0 1px 0 #a0c6da;
-    color: initial;
+  background: #8fbcd4;
+  text-shadow: 0 1px 0 #a0c6da;
+  color: initial;
 }
 
 .content aside.warning {
-    background-color: #c97a7e;
-    text-shadow: 0 1px 0 #d18e91;
-    color: initial;
+  background-color: #c97a7e;
+  text-shadow: 0 1px 0 #d18e91;
+  color: initial;
 }
 
 .content aside.success {
-    background-color: #6ac174;
-    text-shadow: 0 1px 0 #80ca89;
-    color: initial;
+  background-color: #6ac174;
+  text-shadow: 0 1px 0 #80ca89;
+  color: initial;
 }
 
 .content aside:before {
-    vertical-align: middle;
-    padding-right: .5em;
-    font-size: 14px
+  vertical-align: middle;
+  padding-right: 0.5em;
+  font-size: 14px;
 }
 
 .content .search-highlight {
-    padding: 2px;
-    margin: -2px;
-    border-radius: 4px;
-    border: 1px solid #f7e633;
-    text-shadow: 1px 1px 0 #666;
-    background: linear-gradient(to top left, #f7e633, #f1d32f)
+  padding: 2px;
+  margin: -2px;
+  border-radius: 4px;
+  border: 1px solid #f7e633;
+  text-shadow: 1px 1px 0 #666;
+  background: linear-gradient(to top left, #f7e633, #f1d32f);
 }
 
 .content blockquote,
 .content pre {
-    background-color: #292929;
-    color: #fff;
-    padding: 1.5em 28px;
-    margin: 0;
-    width: 50%;
-    float: right;
-    clear: right;
-    box-sizing: border-box;
-    text-shadow: 0 1px 2px rgba(0, 0, 0, .4)
+  background-color: #292929;
+  color: #fff;
+  padding: 1.5em 28px;
+  margin: 0;
+  width: 50%;
+  float: right;
+  clear: right;
+  box-sizing: border-box;
+  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
 }
 
 .content .annotation {
-    background-color: #292929;
-    color: #fff;
-    padding: 0 28px;
-    margin: 0;
-    width: 50%;
-    float: right;
-    clear: right;
-    box-sizing: border-box;
-    text-shadow: 0 1px 2px rgba(0, 0, 0, .4)
+  background-color: #292929;
+  color: #fff;
+  padding: 0 28px;
+  margin: 0;
+  width: 50%;
+  float: right;
+  clear: right;
+  box-sizing: border-box;
+  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
 }
 
 .content .annotation pre {
-    padding: 0 0;
-    width: 100%;
-    float: none;
+  padding: 0 0;
+  width: 100%;
+  float: none;
 }
 
-.content blockquote>p,
-.content pre>p {
-    margin: 0
+.content blockquote > p,
+.content pre > p {
+  margin: 0;
 }
 
 .content blockquote a,
 .content pre a {
-    color: #fff;
-    text-decoration: none;
-    border-bottom: 1px dashed #ccc
+  color: #fff;
+  text-decoration: none;
+  border-bottom: 1px dashed #ccc;
 }
 
-.content blockquote>p {
-    background-color: #1c1c1c;
-    border-radius: 5px;
-    padding: 13px;
-    color: #ccc;
-    border-top: 1px solid #000;
-    border-bottom: 1px solid #404040
+.content blockquote > p {
+  background-color: #1c1c1c;
+  border-radius: 5px;
+  padding: 13px;
+  color: #ccc;
+  border-top: 1px solid #000;
+  border-bottom: 1px solid #404040;
 }
 
-@media (max-width:930px) {
-    .tocify-wrapper {
-        left: -230px
-    }
-    .tocify-wrapper.open {
-        left: 0
-    }
-    .page-wrapper {
-        margin-left: 0
-    }
-    #nav-button {
-        display: block
-    }
-    .tocify-wrapper .tocify-item>a {
-        padding-top: .3em;
-        padding-bottom: .3em
-    }
+@media (max-width: 930px) {
+  .tocify-wrapper {
+    left: -230px;
+  }
+  .tocify-wrapper.open {
+    left: 0;
+  }
+  .page-wrapper {
+    margin-left: 0;
+  }
+  #nav-button {
+    display: block;
+  }
+  .tocify-wrapper .tocify-item > a {
+    padding-top: 0.3em;
+    padding-bottom: 0.3em;
+  }
 }
 
-@media (max-width:700px) {
-    .dark-box {
-        display: none
-    }
-    .tocify-wrapper .lang-selector {
-        display: block
-    }
-    .page-wrapper .lang-selector {
-        display: none
-    }
-    .content aside,
-    .content dl,
-    .content h1,
-    .content h2,
-    .content h3,
-    .content h4,
-    .content h5,
-    .content h6,
-    .content ol,
-    .content p,
-    .content table,
-    .content ul {
-        margin-right: 0
-    }
-    .content>aside,
-    .content>details,
-    .content>dl,
-    .content>h1,
-    .content>h2,
-    .content>h3,
-    .content>h4,
-    .content>h5,
-    .content>h6,
-    .content>ol,
-    .content>p,
-    .content>table,
-    .content>ul,
-    .content>form>aside,
-    .content>form>details,
-    .content>form>h1,
-    .content>form>h2,
-    .content>form>h3,
-    .content>form>h4,
-    .content>form>h5,
-    .content>form>h6,
-    .content>form>p,
-    .content>form>table,
-    .content>form>ul,
-    .content>form>div {
-        margin-right: 0;
-    }
-    .content blockquote,
-    .content pre {
-        float: none;
-        width: auto
-    }
-    .content .annotation {
-        float: none;
-        width: auto
-    }
+@media (max-width: 700px) {
+  .dark-box {
+    display: none;
+  }
+  .tocify-wrapper .lang-selector {
+    display: block;
+  }
+  .page-wrapper .lang-selector {
+    display: none;
+  }
+  .content aside,
+  .content dl,
+  .content h1,
+  .content h2,
+  .content h3,
+  .content h4,
+  .content h5,
+  .content h6,
+  .content ol,
+  .content p,
+  .content table,
+  .content ul {
+    margin-right: 0;
+  }
+  .content > aside,
+  .content > details,
+  .content > dl,
+  .content > h1,
+  .content > h2,
+  .content > h3,
+  .content > h4,
+  .content > h5,
+  .content > h6,
+  .content > ol,
+  .content > p,
+  .content > table,
+  .content > ul,
+  .content > form > aside,
+  .content > form > details,
+  .content > form > h1,
+  .content > form > h2,
+  .content > form > h3,
+  .content > form > h4,
+  .content > form > h5,
+  .content > form > h6,
+  .content > form > p,
+  .content > form > table,
+  .content > form > ul,
+  .content > form > div {
+    margin-right: 0;
+  }
+  .content blockquote,
+  .content pre {
+    float: none;
+    width: auto;
+  }
+  .content .annotation {
+    float: none;
+    width: auto;
+  }
 }
 
 .badge {
-    padding: 1px 9px 2px;
-    white-space: nowrap;
-    -webkit-border-radius: 9px;
-    -moz-border-radius: 9px;
-    border-radius: 9px;
-    color: #ffffff;
-    text-shadow: none !important;
-    font-weight: bold;
+  padding: 1px 9px 2px;
+  white-space: nowrap;
+  -webkit-border-radius: 9px;
+  -moz-border-radius: 9px;
+  border-radius: 9px;
+  color: #ffffff;
+  text-shadow: none !important;
+  font-weight: bold;
 }
 
 .badge.badge-darkred {
-    background-color: darkred;
+  background-color: darkred;
 }
 
 .badge.badge-red {
-    background-color: red;
+  background-color: red;
 }
 
 .badge.badge-blue {
-    background-color: blue;
+  background-color: blue;
 }
 
 .badge.badge-darkblue {
-    background-color: darkblue;
+  background-color: darkblue;
 }
 
 .badge.badge-green {
-    background-color: green;
+  background-color: green;
 }
 
 .badge.badge-darkgreen {
-    background-color: darkgreen;
+  background-color: darkgreen;
 }
 
 .badge.badge-purple {
-    background-color: purple;
+  background-color: purple;
 }
 
 .badge.badge-black {
-    background-color: black;
+  background-color: black;
 }
 
 .badge.badge-grey {
-    background-color: grey;
+  background-color: grey;
 }
 
 .fancy-heading-panel {
-    background-color: lightgrey;
-    border-radius: 5px;
-    padding-left: 5px !important;
-    padding-top: 5px !important;
-    padding-bottom: 5px !important;
-    margin-left: 25px;
-    margin-right: 10px;
-    width: 47%;
+  background-color: lightgrey;
+  border-radius: 5px;
+  padding-left: 5px !important;
+  padding-top: 5px !important;
+  padding-bottom: 5px !important;
+  margin-left: 25px;
+  margin-right: 10px;
+  width: 47%;
 }
 
 @media screen and (max-width: 700px) {
-    .fancy-heading-panel {
-        width: 95%;
-    }
-
+  .fancy-heading-panel {
+    width: 95%;
+  }
 }
 
 button {
-    border: none;
+  border: none;
 }
 
 * {
-    /* Foreground, Background */
-    scrollbar-color: #3c4c67 transparent;
+  /* Foreground, Background */
+  scrollbar-color: #3c4c67 transparent;
 }
-*::-webkit-scrollbar { /* Background */
-    width: 10px;
-    height: 10px;
-    background: transparent;
+*::-webkit-scrollbar {
+  /* Background */
+  width: 10px;
+  height: 10px;
+  background: transparent;
 }
 
-*::-webkit-scrollbar-thumb { /* Foreground */
-    background: #626161;
+*::-webkit-scrollbar-thumb {
+  /* Foreground */
+  background: #626161;
 }
 
 details {
-    position: relative;
+  position: relative;
 }
 
 details::before {
-    position: absolute;
-    content: '';
-    height: 100%;
-    width: 4px;
-    margin-left: -8px;
-    border-radius: 8px;
-    background: lightgrey;
+  position: absolute;
+  content: "";
+  height: 100%;
+  width: 4px;
+  margin-left: -8px;
+  border-radius: 8px;
+  background: lightgrey;
 }
 
 /* override pastel's override */
 details > summary {
-    display: list-item;
+  display: list-item;
 }
 
 .badge.badge-scope {
-    font-size: 80%;
-    text-decoration: none;
-    background: #87ad3a;
+  font-size: 80%;
+  text-decoration: none;
+  background: #87ad3a;
 }
 .badge.badge-scope-lazer {
-    background: #ba6436;
+  background: #ba6436;
 }
 .badge.badge-scope-oauth {
-    background: #3a87ad;
+  background: #3a87ad;
 }
 .badge.badge-user {
-    background: #ad2a66;
+  background: #ad2a66;
 }
-.content table tr:nth-child(2n+1) > td {
-    background: rgba(0, 0, 0, 0.02);
+.content table tr:nth-child(2n + 1) > td {
+  background: rgba(0, 0, 0, 0.02);
 }
 .content table td {
-    padding-top: 5px;
-    padding-bottom: 5px;
+  padding-top: 5px;
+  padding-bottom: 5px;
 }
 .logo {
-    background-image: url('~@images/layout/osu-logo-white.svg');
-    background-position: center;
-    background-size: contain;
-    background-repeat: no-repeat;
-    width: 100%;
-    max-width: 70%;
-    padding-bottom: $max-width;
-    margin: auto;
-    display: block;
-    margin-top: 10px;
+  background-image: url("~@images/layout/osu-logo-white.svg");
+  background-position: center;
+  background-size: contain;
+  background-repeat: no-repeat;
+  width: 100%;
+  max-width: 70%;
+  padding-bottom: $max-width;
+  margin: auto;
+  display: block;
+  margin-top: 10px;
 }
 .menu-burger {
   --width: 2px;
···
   margin: 0 calc(var(--width) + var(--space)) -2px;
   border-radius: 10000px;
 
-  &::after, &::before {
-    content: '';
+  &::after,
+  &::before {
+    content: "";
     width: inherit;
     height: inherit;
     background-color: inherit;

resources/css/functions.less

···
 
 .fancy-scrollbar() {
   @_scrollbar-track: rgba(255, 255, 255, 0.025);
-  @_scrollbar-thumb: rgba(255,255,255,0.5);
+  @_scrollbar-thumb: rgba(255, 255, 255, 0.5);
 
   scrollbar-color: @_scrollbar-thumb @_scrollbar-track;
   scrollbar-width: thin;
···
     min-height: 10px; /*Prevent it from getting too small */
   }
   ::-webkit-scrollbar-thumb:active {
-    background: rgba(255,255,255,0.61); /* Some darker color when you click it */
+    /* Some darker color when you click it */
+    background: rgba(255, 255, 255, 0.61);
     -webkit-border-radius: 100px;
   }
 }
···
 .light-header-overlay() {
   &::after {
     .full-size();
-    content: '';
+    content: "";
     background-color: hsla(var(--hsl-b5), 60%);
   }
 }

resources/css/keyframes.less

···
 @keyframes spinner-sk-cubemove {
   25% {
     transform: translateX(42px) rotate(-90deg) scale(0.5);
-  } 50% {
+  }
+  50% {
     transform: translateX(42px) translateY(42px) rotate(-179deg);
-  } 50.1% {
+  }
+  50.1% {
     transform: translateX(42px) translateY(42px) rotate(-180deg);
-  } 75% {
+  }
+  75% {
     transform: translateX(0) translateY(42px) rotate(-270deg) scale(0.5);
-  } 100% {
+  }
+  100% {
     transform: rotate(-360deg);
   }
 }
 
 @keyframes spin-w-easing {
-  100% { transform:rotate(360deg); }
+  100% {
+    transform: rotate(360deg);
+  }
 }
 
 @keyframes grow-and-shrink {
-  0%   { transform: scale(0.8); }
-  20%  { transform: scale(1.0); }
-  100% { transform: scale(0.8); }
+  0% {
+    transform: scale(0.8);
+  }
+  20% {
+    transform: scale(1);
+  }
+  100% {
+    transform: scale(0.8);
+  }
 }
 
 @keyframes fade-in-out {
-  0%   { opacity: 0.0; }
-  20%  { opacity: 1.0; }
-  100% { opacity: 0.0; }
+  0% {
+    opacity: 0;
+  }
+  20% {
+    opacity: 1;
+  }
+  100% {
+    opacity: 0;
+  }
 }
 
 @keyframes glow-pulse {
-  0%  { opacity: 0.5; }
-  10% { opacity: 1.0; }
-  20% { opacity: 0.5; }
-  30% { opacity: 1.0; }
-  70% { opacity: 0.5; }
-  90% { opacity: 0.3; }
+  0% {
+    opacity: 0.5;
+  }
+  10% {
+    opacity: 1;
+  }
+  20% {
+    opacity: 0.5;
+  }
+  30% {
+    opacity: 1;
+  }
+  70% {
+    opacity: 0.5;
+  }
+  90% {
+    opacity: 0.3;
+  }
 }

resources/css/layout.less

···
 // main: compiled.less
 @import "app";
 
-*, ::before, ::after {
+*,
+::before,
+::after {
   box-sizing: border-box;
 }
 
···
   --font-content: @font-content;
 
   --navbar-height: @navbar-height;
-  --scroll-padding-top: calc(var(--navbar-height) + 1em + var(--scroll-padding-top-extra, 0px));
+  --scroll-padding-top: calc(
+    var(--navbar-height) + 1em + var(--scroll-padding-top-extra, 0px)
+  );
   --page-gutter: @gutter-v2;
 
   @media @desktop {
···
   }
 }
 
-html, body {
+html,
+body {
   height: 100%;
 }
 
···
   --base-hue-deg: calc(var(--base-hue) * 1deg);
 
   // level tier gradients
-  --level-tier-iron: #BAB3AB, #BAB3AB;
-  --level-tier-bronze: #B88F7A, #855C47;
-  --level-tier-silver: #E0E0EB, #A3A3C2;
-  --level-tier-gold: #F0E4A8, #E0C952;
-  --level-tier-platinum: #A8F0EF, #52E0DF;
-  --level-tier-rhodium: #D9F8D3, #A0CF96;
-  --level-tier-radiant: #97DCFF, #ED82FF;
-  --level-tier-lustrous: #FFE600, #ED82FF;
+  --level-tier-iron: #bab3ab, #bab3ab;
+  --level-tier-bronze: #b88f7a, #855c47;
+  --level-tier-silver: #e0e0eb, #a3a3c2;
+  --level-tier-gold: #f0e4a8, #e0c952;
+  --level-tier-platinum: #a8f0ef, #52e0df;
+  --level-tier-rhodium: #d9f8d3, #a0cf96;
+  --level-tier-radiant: #97dcff, #ed82ff;
+  --level-tier-lustrous: #ffe600, #ed82ff;
 }
 
 #popup-container {

resources/css/sections.less

···
 .menu-colour(rankings, osu-colour-green-1);
 .menu-colour(store, osu-colour-darkorange-1);
 
-
 .menu-colour(@section, @colour) {
   .u-section-@{section}--before-bg-normal {
     &::before {
···
     --forum-bg: @bg;
     --forum-text: @text;
     --forum-text-hover: @text-hover;
-    .at2x-var(--forum-cover, '~@images/headers/forum-topic-covers/forum-cover-@{category}.jpg');
+    .at2x-var(--forum-cover, "~@images/headers/forum-topic-covers/forum-cover-@{category}.jpg");
   }
 }

resources/css/spinner.less

···
   position: relative;
 
   &::before {
-    content: '';
+    content: "";
     position: absolute;
     top: 0;
     left: 0;
···
     border: 0.18em solid currentColor;
     border-bottom-color: transparent;
     border-radius: 100%;
-    animation: ball-clip-rotate .75s linear infinite;
+    animation: ball-clip-rotate 0.75s linear infinite;
 
     .la-ball-clip-rotate--loaded& {
       animation-iteration-count: 1;

resources/css/torus.less

···
 
 @font-face {
   // Torus-Thin
-  font-family: 'Torus';
+  font-family: "Torus";
   font-weight: 100;
-  src: url('~@fonts/torus/Torus-Thin.otf');
+  src: url("~@fonts/torus/Torus-Thin.otf");
 }
 
 @font-face {
   // Torus-SemiBold
-  font-family: 'Torus';
+  font-family: "Torus";
   font-weight: 600;
-  src: url('~@fonts/torus/Torus-SemiBold.otf');
+  src: url("~@fonts/torus/Torus-SemiBold.otf");
 }
 
 @font-face {
   // Torus-SemiBold, for default bold
-  font-family: 'Torus';
+  font-family: "Torus";
   font-weight: 700;
-  src: url('~@fonts/torus/Torus-SemiBold.otf');
+  src: url("~@fonts/torus/Torus-SemiBold.otf");
 }
 
 @font-face {
   // Torus-Regular
-  font-family: 'Torus';
+  font-family: "Torus";
   font-weight: 400;
-  src: url('~@fonts/torus/Torus-Regular.otf');
+  src: url("~@fonts/torus/Torus-Regular.otf");
 }
 
 @font-face {
   // Torus-Light
-  font-family: 'Torus';
+  font-family: "Torus";
   font-weight: 300;
-  src: url('~@fonts/torus/Torus-Light.otf');
+  src: url("~@fonts/torus/Torus-Light.otf");
 }
 
 @font-face {
   // Torus-Heavy
-  font-family: 'Torus';
+  font-family: "Torus";
   font-weight: 900;
-  src: url('~@fonts/torus/Torus-Heavy.otf');
+  src: url("~@fonts/torus/Torus-Heavy.otf");
 }
 
 @font-face {
   // Torus-Bold
-  font-family: 'Torus';
+  font-family: "Torus";
   font-weight: 800;
-  src: url('~@fonts/torus/Torus-Bold.otf');
+  src: url("~@fonts/torus/Torus-Bold.otf");
 }

resources/css/utilities.less

···
 // Copyright (c) ppy Pty Ltd <[e-mail]>. Licensed under the GNU Affero General Public License v3.0.
 // See the LICENCE file in the repository root for full licence text.
 
-.no-print, .no-print * {
+.no-print,
+.no-print * {
   @media print {
     display: none !important;
   }

resources/css/variables.less

···
 
 @font-grade: Venera, sans-serif;
 @font-content: Inter, sans-serif;
-@font-default: Torus, Inter, 'Helvetica Neue', Tahoma, Arial, 'Hiragino Kaku Gothic ProN', Meiryo, 'Microsoft YaHei', 'Apple SD Gothic Neo', sans-serif;
-@font-default-vi: Quicksand, Torus, Inter, 'Helvetica Neue', Tahoma, Arial, 'PingFang TC', 'Microsoft JhengHei', 'Apple SD Gothic Neo', system-ui, sans-serif;
-@font-default-th: Torus, Inter, 'Helvetica Neue', 'Prompt', Tahoma, Arial, 'Hiragino Kaku Gothic ProN', Meiryo, 'Microsoft YaHei', "Apple SD Gothic Neo", sans-serif;
-@font-default-zh: Torus, Inter, 'Helvetica Neue', Tahoma, Arial, 'Hiragino Sans GB', 'Microsoft YaHei', 'Apple SD Gothic Neo', system-ui, sans-serif;
-@font-default-zh-tw: Torus, Inter, 'Helvetica Neue', Tahoma, Arial, 'PingFang TC', 'Microsoft JhengHei', 'Apple SD Gothic Neo', system-ui, sans-serif;
+@font-default: Torus, Inter, "Helvetica Neue", Tahoma, Arial,
+  "Hiragino Kaku Gothic ProN", Meiryo, "Microsoft YaHei", "Apple SD Gothic Neo",
+  sans-serif;
+@font-default-vi: Quicksand, Torus, Inter, "Helvetica Neue", Tahoma, Arial,
+  "PingFang TC", "Microsoft JhengHei", "Apple SD Gothic Neo", system-ui,
+  sans-serif;
+@font-default-th: Torus, Inter, "Helvetica Neue", "Prompt", Tahoma, Arial,
+  "Hiragino Kaku Gothic ProN", Meiryo, "Microsoft YaHei", "Apple SD Gothic Neo",
+  sans-serif;
+@font-default-zh: Torus, Inter, "Helvetica Neue", Tahoma, Arial,
+  "Hiragino Sans GB", "Microsoft YaHei", "Apple SD Gothic Neo", system-ui,
+  sans-serif;
+@font-default-zh-tw: Torus, Inter, "Helvetica Neue", Tahoma, Arial,
+  "PingFang TC", "Microsoft JhengHei", "Apple SD Gothic Neo", system-ui,
+  sans-serif;
 
 @screen-mobile-max: (@screen-sm-min - 1px);
 @desktop: ~"(min-width: @{screen-sm-min})";
···
 
 // update app-deps.ts when changing the height of the header.
 @nav2-avatar-height: 60px;
-@nav2-avatar-height--pinned : 40px;
+@nav2-avatar-height--pinned: 40px;
 @nav2-height: 90px;
 @nav2-height--pinned: 50px;
 @nav2-header-height: 360px;
 @nav2-header-image-height: 310px;
-
 
 // mobile nav
 // TODO: un-bootstrap names

resources/css/venera.less

···
 // See the LICENCE file in the repository root for full licence text.
 
 @font-face {
-  font-family: 'Venera';
+  font-family: "Venera";
   font-weight: 500;
-  src: url('~@fonts/venera/Venera-500.otf');
+  src: url("~@fonts/venera/Venera-500.otf");
 }

yarn.lock

···
   resolved "https://registry.yarnpkg.com/prelude-ls/-/prelude-ls-1.2.1.tgz#debc6489d7a6e6b0e7611888cec880337d316396"
   integrity sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g==
 
+prettier@^3.3.3:
+  version "3.3.3"
+  resolved "https://registry.yarnpkg.com/prettier/-/prettier-3.3.3.tgz#30c54fe0be0d8d12e6ae61dbb10109ea00d53105"
+  integrity sha512-i2tDNA0O5IrMO757lfrdQZCc2jPNDVntV0m/+4whiDfWaTKfMNgR7Qz0NAeGz/nRqF4m5/6CLzbP4/liHt12Ew==
+
 process@^0.11.10:
   version "0.11.10"
   resolved "https://registry.yarnpkg.com/process/-/process-0.11.10.tgz#7332300e840161bda3e69a1d1d91a7d4bc16f182"