Convert Everything to CSS Modules

src/api/LiveSplitServer.ts

@@ -1,5 +1,5 @@
 import { toast } from "react-toastify";
-import { LSOCommandSink } from "../ui/LSOCommandSink";
+import { LSOCommandSink } from "../util/LSOCommandSink";
 import { ServerProtocol } from "../livesplit-core/livesplit_core";
 import { Event } from "../livesplit-core";
 

src/css/About.module.scss

@@ -4,7 +4,6 @@
 $icon-size: 40px;
 $title-font-size: 40px;
 $build-version-font-size: 12px;
-$link-color: #56b0ff;
 
 .about {
     max-width: 700px;
@@ -24,22 +23,18 @@ $link-color: #56b0ff;
         margin-bottom: variables.$ui-large-margin;
     }
 
-    a {
-        color: $link-color;
-    }
-
     @include mobile.mobile {
         box-sizing: border-box;
     }
 }
 
-.livesplitTitle {
+.liveSplitTitle {
     display: flex;
     align-items: center;
     gap: variables.$ui-margin;
 }
 
-.livesplitIcon {
+.liveSplitIcon {
     height: $icon-size;
 }
 
@@ -55,8 +50,9 @@ $link-color: #56b0ff;
 .changelog {
     margin-left: variables.$ui-large-margin;
 
-    >div {
-        margin: variables.$ui-large-margin 0 variables.$ui-large-margin variables.$ui-large-margin;
+    > div {
+        margin: variables.$ui-large-margin 0 variables.$ui-large-margin
+            variables.$ui-large-margin;
     }
 }
 

src/css/ButtonGroup.module.scss

@@ -0,0 +1,45 @@
+@use "variables.icss";
+
+// FIXME: This should be a component.
+.group {
+    display: flex;
+
+    > * {
+        font-size: 18px;
+        border-radius: 0;
+    }
+
+    > :first-child {
+        border-top-left-radius: 5px;
+        border-bottom-left-radius: 5px;
+    }
+
+    > :last-child {
+        border-top-right-radius: 5px;
+        border-bottom-right-radius: 5px;
+    }
+
+    .pressed,
+    .pressed:hover {
+        background: variables.$button-active-color;
+    }
+
+    .pressed.disabled {
+        background: variables.$button-disabled-color;
+        color: variables.$button-disabled-text-color;
+        cursor: default;
+    }
+}
+
+.tabBar {
+    composes: group;
+    display: flex;
+
+    > button {
+        font-size: 15px;
+        min-height: 30px;
+        border-bottom-right-radius: 0 !important;
+        border-bottom-left-radius: 0 !important;
+        border-bottom: 0;
+    }
+}

src/css/Dialog.module.scss

@@ -31,7 +31,7 @@ dialog {
             font-size: larger;
         }
 
-        >* {
+        > * {
             margin: 0;
         }
 

src/css/Layout.module.scss

@@ -1,5 +1,3 @@
-@use "Font";
-
 .resizableLayout {
     position: absolute;
     top: 0;

src/css/LayoutEditor.module.scss

@@ -0,0 +1,69 @@
+@use "mobile.module.scss";
+@use "variables.icss";
+
+.layoutEditorOuter {
+    display: inline-flex;
+
+    @include mobile.mobile {
+        flex-wrap: wrap;
+
+        .layoutEditorInnerContainer {
+            width: 100%;
+        }
+    }
+}
+
+.layoutEditorInner {
+    width: variables.$settings-table-width;
+    display: inline-flex;
+    margin-bottom: variables.$ui-large-margin;
+
+    table {
+        width: 100%;
+    }
+
+    @include mobile.mobile {
+        flex-wrap: wrap;
+        width: 100%;
+        margin-bottom: 0;
+    }
+}
+
+.btnGroup {
+    display: flex;
+    flex-direction: column;
+    gap: variables.$ui-margin;
+
+    button {
+        width: 40px;
+        font-size: 15px;
+    }
+
+    @include mobile.mobile {
+        flex-direction: row;
+        margin: variables.$ui-large-margin;
+    }
+}
+
+.layoutEditorComponentList {
+    composes: table from "Table.module.scss";
+    margin-left: variables.$ui-large-margin;
+
+    @include mobile.mobile {
+        margin-left: 0;
+        margin-bottom: variables.$ui-large-margin;
+    }
+}
+
+.layoutEditorComponent {
+    cursor: pointer;
+}
+
+.layoutContainer {
+    margin-left: variables.$ui-large-margin;
+
+    @include mobile.mobile {
+        margin-left: 0;
+        margin-top: variables.$ui-large-margin;
+    }
+}

src/css/Leaderboard.module.scss

@@ -0,0 +1,106 @@
+@use "sass:math";
+
+@use "mobile.module.scss";
+@use "variables.icss";
+
+$small-font-size: 13px;
+
+.leaderboardTable {
+    composes: table from "Table.module.scss";
+
+    @include mobile.mobile {
+        font-size: $small-font-size;
+    }
+}
+
+.leaderboardRow:hover {
+    background: variables.$hover-row-color !important;
+}
+
+.leaderboardRankColumn {
+    width: 36px;
+}
+
+.leaderboardTimeColumn,
+.variableColumn {
+    width: 100px;
+}
+
+.variableColumn {
+    text-align: center;
+}
+
+.leaderboardExpandedRow {
+    & > td {
+        max-width: 0;
+    }
+
+    .runMetaTable {
+        border-spacing: variables.$ui-margin 2px;
+        margin-left: -(variables.$ui-margin);
+    }
+}
+
+.unregisteredUser {
+    font-style: italic;
+    color: silver;
+}
+
+.filterTable {
+    composes: table from "Table.module.scss";
+    width: 100%;
+
+    td {
+        padding: math.div(variables.$ui-margin, 2) variables.$ui-margin;
+        background: variables.$light-row-color;
+    }
+
+    tr:first-child > td {
+        padding-top: variables.$ui-margin;
+    }
+
+    tr:last-child > td {
+        padding-bottom: variables.$ui-margin;
+    }
+
+    > tbody.tableBody > tr {
+        background-color: variables.$light-row-color;
+    }
+
+    > thead.tableHeader > tr {
+        background-color: variables.$header-row-color;
+    }
+
+    @include mobile.mobile {
+        margin: 0 0 variables.$ui-margin (-(variables.$ui-margin));
+        width: calc(100% + #{variables.$ui-margin});
+    }
+}
+
+.subcategoryTable {
+    composes: filterTable;
+    > tbody > tr {
+        border: 1px solid variables.$border-color;
+        text-align: center;
+        cursor: pointer;
+
+        > td:hover {
+            background: variables.$hover-row-color;
+        }
+    }
+
+    tr:first-child > td {
+        padding-top: math.div(variables.$ui-margin, 2);
+    }
+
+    tr:last-child > td {
+        padding-bottom: math.div(variables.$ui-margin, 2);
+    }
+}
+
+.selected {
+    composes: selected from "Table.module.scss";
+    &:hover {
+        background: variables.$selected-row-hover-color !important;
+    }
+}