Remove SASS and Switch to Pure CSS Files

package.json

@@ -41,8 +41,6 @@
     "html-webpack-plugin": "^5.6.0",
     "react-compiler-webpack": "^0.2.0",
     "react-refresh-typescript": "^2.0.7",
-    "sass": "^1.77.2",
-    "sass-loader": "^16.0.4",
     "style-loader": "^4.0.0",
     "ts-loader": "^9.4.2",
     "typescript": "^5.9.3",

src/css/About.module.css

@@ -0,0 +1,73 @@
+.about {
+    max-width: 700px;
+
+    :global(.is-mobile) & {
+        max-width: 100%;
+    }
+}
+
+.aboutInnerContainer {
+    background-color: var(--light-row-color);
+    padding: var(--ui-large-margin);
+    border: 1px solid var(--border-color);
+    width: fit-content;
+
+    h2 {
+        margin-bottom: var(--ui-large-margin);
+    }
+
+    :global(.is-mobile) & {
+        box-sizing: border-box;
+    }
+}
+
+.liveSplitTitle {
+    display: flex;
+    align-items: center;
+    gap: var(--ui-margin);
+}
+
+.liveSplitIcon {
+    height: 40px;
+}
+
+.titleText {
+    font-weight: bold;
+    font-size: 40px;
+}
+
+.buildVersion {
+    font-size: 12px;
+}
+
+.changelog {
+    margin-left: var(--ui-large-margin);
+
+    > div {
+        margin: var(--ui-large-margin) 0 var(--ui-large-margin)
+            var(--ui-large-margin);
+    }
+}
+
+.contributors {
+    margin: 0 auto;
+    display: flex;
+    flex-wrap: wrap;
+    gap: 14px;
+    justify-content: space-evenly;
+    align-items: end;
+    font-size: 14px;
+
+    a {
+        display: flex;
+        align-items: center;
+        flex-direction: column;
+        gap: 4px;
+
+        img {
+            width: var(--contributor-avatar-size);
+            height: var(--contributor-avatar-size);
+            border-radius: 50%;
+        }
+    }
+}

src/css/ButtonGroup.module.scss → src/css/ButtonGroup.module.css

@@ -1,6 +1,4 @@
-@use "variables.icss";
-
-// FIXME: This should be a component.
+/* FIXME: This should be a component. */
 .group {
     display: flex;
 
@@ -21,12 +19,12 @@
 
     .pressed,
     .pressed:hover {
-        background: variables.$button-active-color;
+        background: var(--button-active-color);
     }
 
     .pressed.disabled {
-        background: variables.$button-disabled-color;
-        color: variables.$button-disabled-text-color;
+        background: var(--button-disabled-color);
+        color: var(--button-disabled-text-color);
         cursor: default;
     }
 }

src/css/ColorPicker.module.scss → src/css/ColorPicker.module.css

@@ -1,12 +1,10 @@
-@use "variables.icss";
-
 .colorPickerButton {
     border: 2px solid white;
     border-radius: 2px;
     box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1);
     cursor: pointer;
     box-sizing: border-box;
-    height: variables.$settings-row-height;
+    height: var(--settings-row-height);
 }
 
 .colorPickerDialogPositioning {

src/css/Dialog.module.scss → src/css/Dialog.module.css

@@ -1,5 +1,3 @@
-@use "variables.icss";
-
 :global(.is-mobile) + dialog > .dialog {
     min-width: auto;
 }
@@ -22,10 +20,10 @@ dialog {
         min-width: 225px;
         display: flex;
         flex-direction: column;
-        gap: variables.$ui-large-margin;
+        gap: var(--ui-large-margin);
 
         max-width: 400px;
-        padding: variables.$ui-large-margin;
+        padding: var(--ui-large-margin);
 
         h1 {
             font-size: larger;
@@ -51,7 +49,7 @@ dialog {
             flex-direction: row;
             flex-wrap: wrap;
             justify-content: flex-end;
-            gap: variables.$ui-margin;
+            gap: var(--ui-margin);
         }
 
         input {

src/css/DragUpload.module.scss → src/css/DragUpload.module.css

@@ -1,6 +1,3 @@
-@use "mobile.module.scss";
-@use "variables.icss";
-
 .uploadDropZone {
     position: absolute;
     top: 0;
@@ -10,9 +7,9 @@
 
     .overlay {
         position: absolute;
-        width: calc(100% + 2 * #{variables.$main-content-margin});
-        height: calc(100% + 2 * #{variables.$main-content-margin});
-        margin: -(variables.$main-content-margin);
+        width: calc(100% + 2 * var(--main-content-margin));
+        height: calc(100% + 2 * var(--main-content-margin));
+        margin: calc(-1 * var(--main-content-margin));
         visibility: hidden;
         pointer-events: none;
         background-color: rgba(50, 50, 50, 0.7);
@@ -21,7 +18,7 @@
         justify-content: center;
         align-items: center;
 
-        @include mobile.mobile {
+        :global(.is-mobile) & {
             width: 100%;
             height: 100%;
             margin: 0;

src/css/HotkeyButton.module.scss → src/css/HotkeyButton.module.css

@@ -1,5 +1,3 @@
-@use "variables.icss";
-
 .hotkeyBox {
     button {
         font-size: 16px;
@@ -10,7 +8,7 @@
 
     display: grid;
     grid-template-columns: 1fr 20px;
-    column-gap: variables.$ui-margin;
+    column-gap: var(--ui-margin);
     align-items: center;
 }
 

src/css/LayoutEditor.module.scss → src/css/LayoutEditor.module.css

@@ -1,10 +1,7 @@
-@use "mobile.module.scss";
-@use "variables.icss";
-
 .layoutEditorOuter {
     display: inline-flex;
 
-    @include mobile.mobile {
+    :global(.is-mobile) & {
         flex-wrap: wrap;
 
         .layoutEditorInnerContainer {
@@ -14,15 +11,15 @@
 }
 
 .layoutEditorInner {
-    width: variables.$settings-table-width;
+    width: var(--settings-table-width);
     display: inline-flex;
-    margin-bottom: variables.$ui-large-margin;
+    margin-bottom: var(--ui-large-margin);
 
     table {
         width: 100%;
     }
 
-    @include mobile.mobile {
+    :global(.is-mobile) & {
         flex-wrap: wrap;
         width: 100%;
         margin-bottom: 0;
@@ -32,26 +29,26 @@
 .btnGroup {
     display: flex;
     flex-direction: column;
-    gap: variables.$ui-margin;
+    gap: var(--ui-margin);
 
     button {
         width: 40px;
         font-size: 15px;
     }
 
-    @include mobile.mobile {
+    :global(.is-mobile) & {
         flex-direction: row;
-        margin: variables.$ui-large-margin;
+        margin: var(--ui-large-margin);
     }
 }
 
 .layoutEditorComponentList {
-    composes: table from "Table.module.scss";
-    margin-left: variables.$ui-large-margin;
+    composes: table from "Table.module.css";
+    margin-left: var(--ui-large-margin);
 
-    @include mobile.mobile {
+    :global(.is-mobile) & {
         margin-left: 0;
-        margin-bottom: variables.$ui-large-margin;
+        margin-bottom: var(--ui-large-margin);
     }
 }
 
@@ -60,10 +57,10 @@
 }
 
 .layoutContainer {
-    margin-left: variables.$ui-large-margin;
+    margin-left: var(--ui-large-margin);
 
-    @include mobile.mobile {
+    :global(.is-mobile) & {
         margin-left: 0;
-        margin-top: variables.$ui-large-margin;
+        margin-top: var(--ui-large-margin);
     }
 }