src/App.js

@@ -67,9 +67,6 @@ export default {
     themeApplied () {
       return this.$store.state.interface.themeApplied
     },
-    layoutModalClass () {
-      return '-' + this.layoutType
-    },
     classes () {
       return [
         {

src/App.vue

@@ -70,7 +70,7 @@
     <PostStatusModal />
     <EditStatusModal v-if="editingAvailable" />
     <StatusHistoryModal v-if="editingAvailable" />
-    <SettingsModal :class="layoutModalClass"/>
+    <SettingsModal />
     <UpdateNotification />
     <GlobalNoticeList />
   </div>

src/components/palette_editor/palette_editor.vue

@@ -168,25 +168,6 @@ const updatePalette = (paletteKey, value) => {
         grid-column: 1 / span 2;
       }
     }
-
-    .-mobile & {
-      grid-template-columns: 1fr;
-      grid-template-rows: repeat(10, 1fr) auto;
-
-      .palette-import-button {
-        grid-column: 1;
-      }
-
-      .palette-export-button {
-        grid-column: 1;
-      }
-
-      &.-apply {
-        .palette-apply-button {
-          grid-column: 1;
-        }
-      }
-    }
   }
 }
 </style>

src/components/settings_modal/helpers/unit_setting.vue

@@ -10,33 +10,31 @@
       <slot />
     </label>
     {{ ' ' }}
-    <span class="no-break">
+    <input
-      <input
+      :id="path"
-        :id="path"
+      class="input number-input"
-        class="input number-input"
+      type="number"
-        type="number"
+      :step="step"
-        :step="step"
+      :disabled="disabled"
-        :disabled="disabled"
+      :min="min || 0"
-        :min="min || 0"
+      :value="stateValue"
-        :value="stateValue"
+      @change="updateValue"
-        @change="updateValue"
+    >
+    <Select
+      :id="path"
+      :model-value="stateUnit"
+      :disabled="disabled"
+      class="unit-input unstyled"
+      @change="updateUnit"
+    >
+      <option
+        v-for="option in units"
+        :key="option"
+        :value="option"
       >
-      <Select
+        {{ getUnitString(option) }}
-        :id="path"
+      </option>
-        :model-value="stateUnit"
+    </Select>
-        :disabled="disabled"
-        class="unit-input unstyled"
-        @change="updateUnit"
-      >
-        <option
-          v-for="option in units"
-          :key="option"
-          :value="option"
-        >
-          {{ getUnitString(option) }}
-        </option>
-      </Select>
-    </span>
     {{ ' ' }}
     <ModifiedIndicator
       :changed="isChanged"
@@ -49,10 +47,6 @@
 
 <style lang="scss">
 .UnitSetting {
-  .no-break {
-    display: inline-block;
-  }
-
   .number-input {
     max-width: 6.5em;
     text-align: right;

src/components/settings_modal/settings_modal.scss

@@ -76,23 +76,6 @@
     }
   }
 
-  &.-mobile {
-    .setting-list,
-    .option-list {
-      padding-left: 0.25em;
-
-      > li {
-        margin: 1em 0;
-        line-height: 1.5em;
-        vertical-align: center;
-      }
-
-      &.two-column {
-        column-count: 1;
-      }
-    }
-  }
-
   &.peek {
     .settings-modal-panel {
       /* Explanation:

src/components/settings_modal/settings_modal_admin_content.scss

@@ -17,13 +17,10 @@
     }
 
     .select-multiple {
-      margin-top: 0.5em;
       display: flex;
-      flex-direction: column;
 
       .option-list {
         margin: 0;
-        margin-top: 0.5em;
         padding-left: 0.5em;
       }
     }

src/components/settings_modal/settings_modal_user_content.js

@@ -67,9 +67,6 @@ const SettingsModalContent = {
     },
     expertLevel () {
       return this.$store.state.config.expertLevel
-    },
-    isMobileLayout () {
-      return this.$store.state.interface.layoutType === 'mobile'
     }
   },
   methods: {

src/components/settings_modal/settings_modal_user_content.scss

@@ -31,13 +31,10 @@
     }
 
     .select-multiple {
-      margin-top: 1em;
       display: flex;
-      flex-direction: column;
 
       .option-list {
         margin: 0;
-        margin-top: 0.5em;
         padding-left: 0.5em;
       }
     }

src/components/settings_modal/settings_modal_user_content.vue

@@ -21,7 +21,6 @@
       <AppearanceTab />
     </div>
     <div
-      v-if="expertLevel > 0 && !isMobileLayout"
       :label="$t('settings.style.themes3.editor.title')"
       icon="palette"
       data-tab-name="style"
@@ -29,7 +28,7 @@
       <StyleTab />
     </div>
     <div
-      v-if="expertLevel > 0 && !isMobileLayout"
+      v-if="expertLevel > 0"
       :label="$t('settings.theme_old')"
       icon="paint-brush"
       data-tab-name="theme"

src/components/settings_modal/tabs/appearance_tab.js

@@ -119,8 +119,6 @@ const AppearanceTab = {
       }))
     })
 
-    this.userPalette = this.$store.state.interface.paletteDataUsed || {}
-
     updateIndex('palette').then(bundledPalettes => {
       bundledPalettes.forEach(([key, palettePromise]) => palettePromise.then(v => {
         let palette
@@ -142,6 +140,10 @@ const AppearanceTab = {
           palette = { key, ...v }
         }
         this.bundledPalettes.push(palette)
+
+        if (this.isPaletteActive(key)) {
+          this.userPalette = palette
+        }
       }))
     })
 
@@ -167,15 +169,7 @@ const AppearanceTab = {
       })
     })
   },
-  watch: {
-    paletteDataUsed () {
-      this.userPalette = this.paletteDataUsed || {}
-    }
-  },
   computed: {
-    paletteDataUsed () {
-      return this.$store.state.interface.paletteDataUsed
-    },
     availableStyles () {
       return [
         ...this.availableThemesV3,
@@ -190,6 +184,11 @@ const AppearanceTab = {
     },
     stylePalettes () {
       const ruleset = this.$store.state.interface.styleDataUsed || []
+      console.log(
+        'ASR',
+        this.$store.state.interface.paletteDataUsed,
+        this.$store.state.interface.styleDataUsed
+      )
       if (!ruleset && ruleset.length === 0) return
       const meta = ruleset.find(x => x.component === '@meta')
       const result = ruleset.filter(x => x.component.startsWith('@palette'))

src/components/settings_modal/tabs/appearance_tab.scss

@@ -35,11 +35,9 @@
   .palette-entry {
     display: flex;
     align-items: center;
-    justify-content: space-between;
-    padding: 0 0.5em;
 
-    .palette-label label {
+    > label {
-      text-align: center;
+      flex: 1 0 auto;
     }
 
     .palette-square {
@@ -62,26 +60,6 @@
     margin-top: 0.5em;
   }
 
-  .modal-view.-mobile & {
-    .palette-entry {
-      flex-wrap: wrap;
-      justify-content: center;
-    }
-
-    .palette-label {
-      line-height: 1.5em;
-      margin-top: 0.5em;
-      width: 100%;
-    }
-
-    .palette-preview {
-      display: grid;
-      grid-template-columns: 1fr 1fr 1fr 1fr;
-      grid-template-rows: 1em 1em;
-      margin-bottom: 0.5em;
-    }
-  }
-
   .theme-list {
     list-style: none;
     display: flex;

src/components/settings_modal/tabs/appearance_tab.vue

@@ -93,19 +93,15 @@
               :class="{ toggled: isPaletteActive(p.key) }"
               @click="() => setPalette(p.key, p)"
             >
-              <div class="palette-label">
+              <label>
-                <label>
+                {{ p.name }}
-                  {{ p.name }}
+              </label>
-                </label>
+              <span
-              </div>
+                v-for="c in palettesKeys"
-              <div class="palette-preview">
+                :key="c"
-                <span
+                class="palette-square"
-                  v-for="c in palettesKeys"
+                :style="{ backgroundColor: p[c], border: '1px solid ' + (p[c] ?? 'var(--text)') }"
-                  :key="c"
+              />
-                  class="palette-square"
-                  :style="{ backgroundColor: p[c], border: '1px solid ' + (p[c] ?? 'var(--text)') }"
-                />
-              </div>
             </button>
             <h4 v-if="stylePalettes?.length > 0">
               {{ $t('settings.style.themes3.palette.style') }}
@@ -117,25 +113,20 @@
               :class="{ toggled: isPaletteActive(p.key) }"
               @click="() => setPaletteCustom(p)"
             >
-              <div class="palette-label">
+              <label>
-                <label>
+                {{ p.name ?? $t('settings.style.themes3.palette.user') }}
-                  {{ p.name ?? $t('settings.style.themes3.palette.user') }}
+              </label>
-                </label>
+              <span
-              </div>
+                v-for="c in palettesKeys"
-              <div class="palette-preview">
+                :key="c"
-                <span
+                class="palette-square"
-                  v-for="c in palettesKeys"
+                :style="{ backgroundColor: p[c], border: '1px solid ' + (p[c] ?? 'var(--text)') }"
-                  :key="c"
+              />
-                  class="palette-square"
-                  :style="{ backgroundColor: p[c], border: '1px solid ' + (p[c] ?? 'var(--text)') }"
-                />
-              </div>
             </button>
-            <h4 v-if="expertLevel > 0">
+            <h4>
               {{ $t('settings.style.themes3.palette.user') }}
             </h4>
             <PaletteEditor
-              v-if="expertLevel > 0"
               class="userPalette"
               v-model="userPalette"
               :compact="true"

src/components/tab_switcher/tab_switcher.scss

@@ -139,11 +139,6 @@
           margin-right: calc(0.25em - 200px);
           margin-left: 0.25em;
 
-          &:not(.active) {
-            margin-top: 0;
-            margin-left: 0.5em;
-          }
-
           .text {
             display: none;
           }

static/styles/Breezy DX.piss

@@ -6,29 +6,28 @@
 }
 
 @palette.Dark {
-  bg: #292C32;
+  bg: #121a24;
-  fg: #292C32;
+  fg: #182230;
-  text: #ffffff;
+  text: #b9b9ba;
-  link: #1CA4F3;
+  link: #d8a070;
-  accent: #1CA4F3;
+  accent: #d8a070;
-  cRed: #f41a51;
+  cRed: #FF0000;
-  cBlue: #1CA4F3;
+  cBlue: #0095ff;
-  cGreen: #1af46e;
+  cGreen: #0fa00f;
-  cOrange: #f4af1a;
+  cOrange: #ffa500;
 }
 
 @palette.Light {
-  bg: #EFF0F2;
+  bg: #f2f6f9;
-  fg: #EFF0F2;
+  fg: #d6dfed;
-  text: #1B1F22;
+  text: #304055;
   underlay: #5d6086;
-  accent: #1CA4F3;
+  accent: #f55b1b;
-  cBlue: #1CA4F3;
+  cBlue: #0095ff;
-  cRed: #f41a51;
+  cRed: #d31014;
-  cGreen: #1af46e;
+  cGreen: #0fa00f;
-  cOrange: #f4af1a;
+  cOrange: #ffa500;
   border: #d8e6f9;
-  link: #1CA4F3;
 }
 
 Root {
@@ -37,7 +36,7 @@ Root {
   --buttonDefaultFocusGlow: shadow | inset 0 0 0 1 --accent / 1;
   --buttonDefaultShadow: shadow | inset 0 0 0 1 --text / 0.35, 0 5 5 -5 #000000 / 0.35;
   --buttonDefaultBevel: shadow | inset 0 14 14 -14 #FFFFFF / 0.1;
-  --buttonPressedBevel: shadow | inset 0 -20 20 -20 #000000 / 0.05;
+  --buttonPressedBevel: shadow | inset 0 -20 20 -20 #000000 / 0.05, inset 0 20 0 80 --accent / 0.2;
   --defaultInputBevel: shadow | inset 0 0 0 1 --text / 0.35;
   --defaultInputHoverGlow: shadow | 0 0 0 1 --accent / 1;
   --defaultInputFocusGlow: shadow | 0 0 0 1 --link / 1;
@@ -51,14 +50,6 @@ Button:hover {
   shadow: --buttonDefaultHoverGlow, --buttonDefaultBevel, --buttonDefaultShadow
 }
 
-Button:toggled {
-  background: $blend(--bg 0.8 --accent)
-}
-
-Button:pressed {
-  background: $blend(--bg 0.8 --accent)
-}
-
 Input {
   shadow: --defaultInputBevel
 }