web/settings: mobile layout, better padding & borders

web/src/components/settings/SettingsCategory.svelte

@@ -16,6 +16,6 @@
     .settings-content {
         display: flex;
         flex-direction: column;
-        gap: 16px;
+        gap: 10px;
     }
 </style>

web/src/components/settings/SettingsSection.svelte

@@ -25,4 +25,11 @@
         color: var(--gray);
         padding-left: 8px;
     }
+
+    @media screen and (max-width: 750px) {
+        #settings-section-categories {
+            background: var(--button);
+            border-radius: var(--border-radius);
+        }
+    }
 </style>

web/src/components/settings/SettingsTab.svelte

@@ -1,6 +1,8 @@
 <script lang="ts">
     import { page } from "$app/stores";
 
+    import IconChevronRight from "@tabler/icons-svelte/IconChevronRight.svelte";
+
     export let tabName: string;
     export let tabLink: string;
     export let iconColor: "gray" | "blue" | "green" = "gray";
@@ -13,10 +15,14 @@
     href="/settings/{tabLink}"
     class:active={isActive}
 >   
+    <div class="settings-tab-left">
         <div class="tab-icon" style="background: var(--{iconColor})">
             <slot></slot>
         </div>
         <span>{tabName}</span>
+    </div>
+
+    <IconChevronRight class="settings-tab-chevron" />
 </a>
 
 <style>
@@ -25,6 +31,7 @@
         display: flex;
         flex-direction: row;
         align-items: center;
+        justify-content: space-between;
         gap: calc(var(--small-padding) * 2);
         padding: 7px;
         font-weight: 500;
@@ -33,16 +40,38 @@
         border-radius: var(--border-radius);
     }
 
+    .settings-tab-left {
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        gap: calc(var(--small-padding) * 2);
+        font-weight: 500;
+    }
+
     .settings-tab :global(svg) {
-        stroke: var(--white);
         stroke-width: 1.5px;
         height: 18px;
         width: 18px;
     }
 
+    .settings-tab .tab-icon :global(svg) {
+        stroke: var(--white);
+    }
+
+    :global(.settings-tab-chevron) {
+        display: none;
+        stroke: var(--secondary);
+    }
+
+    @media (hover: hover) {
         .settings-tab:hover {
             background: var(--button-hover-transparent);
         }
+    }
+
+    .settings-tab:active {
+        background: var(--button-hover-transparent);
+    }
 
     .settings-tab.active {
         background: var(--secondary);
@@ -60,4 +89,20 @@
         padding: var(--small-padding);
         border-radius: var(--small-padding);
     }
+
+    @media screen and (max-width: 750px) {
+        .settings-tab {
+            background: none;
+            --small-padding: 5px;
+        }
+
+        .settings-tab :global(svg) {
+            height: 19px;
+            width: 19px;
+        }
+
+        :global(.settings-tab-chevron) {
+            display: block;
+        }
+    }
 </style>

web/src/routes/+layout.svelte

@@ -24,7 +24,7 @@
         --button: #f4f4f4;
         --button-hover: #e8e8e8;
         --button-hover-transparent: rgba(0, 0, 0, 0.06);
-        --button-stroke: rgba(0, 0, 0, 0.08);
+        --button-stroke: rgba(0, 0, 0, 0.05);
         --button-text: #282828;
 
         --sidebar-bg: #000000;
@@ -64,7 +64,7 @@
             --button: #191919;
             --button-hover: #2a2a2a;
             --button-hover-transparent: rgba(225, 225, 225, 0.1);
-            --button-stroke: rgba(255, 255, 255, 0.08);
+            --button-stroke: rgba(255, 255, 255, 0.05);
             --button-text: #e1e1e1;
 
             --sidebar-bg: #101010;
@@ -216,7 +216,6 @@
     #content {
         display: flex;
         overflow: scroll;
-        padding: var(--padding);
         background-color: var(--primary);
 
         border-top-left-radius: var(--border-radius);

web/src/routes/+page.svelte

@@ -14,6 +14,10 @@
 </div>
 
 <style>
+    #cobalt-save-container {
+        padding: var(--padding);
+    }
+
     #cobalt-save {
         display: flex;
         flex-direction: column;

web/src/routes/settings/+layout.svelte

@@ -10,6 +10,8 @@
     import IconMusic from "@tabler/icons-svelte/IconMusic.svelte";
     import IconFileSettings from "@tabler/icons-svelte/IconFileSettings.svelte";
 
+    import IconChevronLeft from "@tabler/icons-svelte/IconChevronLeft.svelte";
+
     let screenWidth: number;
 
     $: isMobile = screenWidth <= 750;
@@ -19,9 +21,18 @@
 <svelte:window bind:innerWidth={screenWidth} />
 
 <div id="settings-page">
-    <div id="settings-sidebar" class:visible-mobile={isMobile && isHome}>
+    <div id="settings-sidebar">
+        <div id="settings-header" class:back-visible={!isHome && isMobile}>
+            {#if !isHome && isMobile}
+                <a class="back-button" href="/settings">
+                    <IconChevronLeft />
                     <h2 id="settings-page-title">settings</h2>
-        <nav id="settings-navigation">
+                </a>
+            {:else}
+                <h2 id="settings-page-title">settings</h2>
+            {/if}
+        </div>
+        <nav id="settings-navigation" class:visible-mobile={isMobile && isHome}>
             <SettingsSection sectionTitle="general">
                 <SettingsTab
                     tabName="appearance"
@@ -66,12 +77,13 @@
     #settings-page {
         --settings-nav-width: 250px;
         --settings-padding: 30px;
+        --settings-padding-small: calc(var(--settings-padding) - var(--padding));
         display: grid;
         width: 100%;
         grid-template-columns: var(--settings-nav-width) 1fr;
         overflow: hidden;
-        padding-left: calc(var(--settings-padding) - var(--padding));
+        padding-left: var(--settings-padding);
-        padding-top: calc(var(--settings-padding) - var(--padding));
+        padding-top: var(--settings-padding);
     }
 
     #settings-page-content {
@@ -101,6 +113,30 @@
         gap: 12px;
     }
 
+    #settings-header {
+        --back-padding: 6px;
+    }
+
+    .back-button {
+        display: flex;
+        align-items: center;
+        color: var(--secondary);
+        gap: var(--back-padding);
+        padding: var(--back-padding);
+        padding-right: calc(var(--back-padding) * 2);
+    }
+
+    .back-button:active {
+        background: var(--button-hover-transparent);
+        border-radius: var(--border-radius);
+    }
+
+    .back-button :global(svg) {
+        stroke-width: 2px;
+        height: 21px;
+        width: 21px;
+    }
+
     .hidden-mobile {
         display: none !important;
     }
@@ -108,16 +144,49 @@
     @media screen and (max-width: 750px) {
         #settings-page {
             --settings-nav-width: 100%;
+            display: flex;
+            flex-direction: column;
             grid-template-columns: 1fr;
+            padding: 0;
+        }
+
+        #settings-page-content,
+        #settings-navigation {
+            padding: var(--padding);
+        }
+
+        #settings-page-content {
+            max-width: unset;
+            gap: calc(var(--padding) * 2);
+        }
+
+        #settings-header {
+            display: flex;
+            align-items: center;
+            position: sticky;
+            padding: var(--padding);
+            gap: 4px;
+        }
+
+        #settings-header.back-visible {
+            padding: calc(var(--padding) - var(--back-padding));
         }
 
         #settings-sidebar {
+            gap: 0px;
+        }
+
+        #settings-page-title {
+            text-align: center;
+            font-size: 16px;
+        }
+
+        #settings-navigation {
             display: none;
         }
 
-        #settings-sidebar.visible-mobile {
+        #settings-navigation.visible-mobile {
             display: flex;
         }
     }
-
 </style>