✨ (music) add label for without music

src/components/ZoneMusic.vue

@@ -1,6 +1,11 @@
 <template>
   <div class="zone-music">
     <div class="pretty p-switch p-fill">
+      <div>
+        <label for="use-music" :class="{ disabled: withMusic }"
+          >concentré</label
+        >
+      </div>
       <input
         type="checkbox"
         name="use-music"
@@ -9,7 +14,7 @@
         @change="setWithMusic(!withMusic)"
       />
       <div class="state p-success">
-        <label for="use-music">son</label>
+        <label for="use-music" :class="{ disabled: !withMusic }">détente</label>
       </div>
     </div>
     <ChilledMusic v-if="withMusic" :play="play" @play="play" @pause="pause" />
@@ -46,3 +51,17 @@ export default defineComponent({
   }
 })
 </script>
+
+<style lang="scss" scoped>
+@import '@/styles/variables';
+
+.pretty {
+  display: flex;
+  justify-content: center;
+  gap: 1rem;
+}
+
+.disabled {
+  color: darken($color, 60);
+}
+</style>

src/styles/app.scss

@@ -1,9 +1,7 @@
 @import url('https://fonts.googleapis.com/css2?family=Fira+Mono&display=swap');
 @import '~pretty-checkbox/src/pretty-checkbox';
 
-$color: #f8efba;
+@import './variables';
-$bgcolor: #2c3a47;
-$font-family: 'Fira Mono', monospace;
 
 body {
   text-align: center;

src/styles/variables.scss

@@ -0,0 +1,3 @@
+$color: #f8efba;
+$bgcolor: #2c3a47;
+$font-family: 'Fira Mono', monospace;