src/features/settings/components/Selection.vue

@@ -66,7 +66,7 @@ watch(selected, (newValue, oldValue) => {
         {{ t(props.setting.i18n) }}
         <ul class="options-list">
             <li v-for="option in props.setting.options" :key="option.name">
-                <label class="option">
+                <label class="settings-button">
                     <input
                         :type="optionType"
                         :name="props.path"
@@ -84,6 +84,7 @@ watch(selected, (newValue, oldValue) => {
     </div>
 </template>
 
+<style scoped src="./SettingsButton.css"></style>
 <style scoped>
 .options-list {
     list-style: none;
@@ -92,26 +93,6 @@ watch(selected, (newValue, oldValue) => {
     margin-top: 0.5em;
 }
 
-.option {
-    --padding-x: 0.7em;
-    padding: 0.3em var(--padding-x);
-    margin-top: 0.2em;
-    width: calc(100% - 2 * var(--padding-x));
-    border-radius: 0.8em;
-    display: inline-flex;
-    align-items: center;
-    gap: 0.5em;
-    cursor: pointer;
-    background-color: var(--light-bg);
-
-    user-select: none;
-    -moz-user-select: none;
-}
-
-.option:hover {
-    background-color: var(--light-hover);
-}
-
 .option-input {
     appearance: none;
     display: none;

src/features/settings/components/SettingsButton.css

@@ -0,0 +1,19 @@
+.settings-button {
+    --padding-x: 0.7em;
+    padding: 0.3em var(--padding-x);
+    margin-top: 0.2em;
+    width: calc(100% - 2 * var(--padding-x));
+    border-radius: 0.8em;
+    display: inline-flex;
+    align-items: center;
+    gap: 0.5em;
+    cursor: pointer;
+    background-color: var(--light-bg);
+
+    user-select: none;
+    -moz-user-select: none;
+}
+
+.settings-button:hover {
+    background-color: var(--light-hover);
+}