途中

koedame · Jun 2, 2024 · 637bf69 · 637bf69
1 parent aa859c2
commit 637bf69
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 10 deletions.
diff --git a/index.html b/index.html
@@ -5,6 +5,20 @@
     <link rel="icon" type="image/svg+xml" href="/vite.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Tauri + Vue + Typescript App</title>
+
+    <style>
+      /* Chrome, Safari, Edge, Opera */
+      input::-webkit-outer-spin-button,
+      input::-webkit-inner-spin-button {
+        -webkit-appearance: none;
+        margin: 0;
+      }
+
+      /* Firefox */
+      input[type=number] {
+        -moz-appearance: textfield;
+      }
+    </style>
   </head>
 
   <body>

diff --git a/src-tauri/tauri.conf.json b/src-tauri/tauri.conf.json
@@ -22,8 +22,7 @@
         "title": "metronome",
         "width": 865,
         "height": 450,
-        "resizable": false,
-        "titleBarStyle": "hidden"
+        "resizable": false
       }
     ],
     "security": {

diff --git a/src/App.vue b/src/App.vue
@@ -103,7 +103,7 @@ onUnmounted(() => {
 </script>
 
 <template>
-  <div class="bg-gray-200 p-20 flex items-center justify-center space-x-20">
+  <div class="bg-gray-200 p-20 flex items-center justify-center space-x-20 h-[100vh] overflow-hidden">
 
     <div class="w-96 space-y-4">
       <div class="flex items-center justify-between space-x-4">
@@ -121,36 +121,36 @@ onUnmounted(() => {
 
       <div class="flex items-center justify-between space-x-4">
         <span class="text-gray-700">Master Volume</span>
-        <input v-model.number="masterVolume" type="range" min="0" max="1" step="0.01" class="w-60">
+        <input v-model.number="masterVolume" type="range" min="0" max="1" step="0.01" class="w-56">
       </div>
 
       <div class="flex items-center justify-between space-x-4">
         <span class="text-gray-700">Accent Volume</span>
-        <input v-model.number="accentVolume" type="range" min="0" max="1" step="0.01" class="w-60">
+        <input v-model.number="accentVolume" type="range" min="0" max="1" step="0.01" class="w-56">
       </div>
 
       <div class="flex items-center justify-between space-x-4">
         <span class="text-gray-700">Quarter Volume</span>
-        <input v-model.number="quarterVolume" type="range" min="0" max="1" step="0.01" class="w-60">
+        <input v-model.number="quarterVolume" type="range" min="0" max="1" step="0.01" class="w-56">
       </div>
 
       <div class="flex items-center justify-between space-x-4">
         <span class="text-gray-700">Eighth Volume</span>
-        <input v-model.number="eighthVolume" type="range" min="0" max="1" step="0.01" class="w-60">
+        <input v-model.number="eighthVolume" type="range" min="0" max="1" step="0.01" class="w-56">
       </div>
 
       <div class="flex items-center justify-between space-x-4">
         <span class="text-gray-700">Sixteenth Volume</span>
-        <input v-model.number="sixteenthVolume" type="range" min="0" max="1" step="0.01" class="w-60">
+        <input v-model.number="sixteenthVolume" type="range" min="0" max="1" step="0.01" class="w-56">
       </div>
 
       <div class="flex items-center justify-between space-x-4">
         <span class="text-gray-700">Triplet Volume</span>
-        <input v-model.number="tripletVolume" type="range" min="0" max="1" step="0.01" class="w-60">
+        <input v-model.number="tripletVolume" type="range" min="0" max="1" step="0.01" class="w-56">
       </div>
     </div>
 
-    <button @click="togglePlay" :class="`rounded-full w-60 h-60 text-gray-700 ${isPlaying ? 'hover:nm-flat-gray-200-lg nm-flat-gray-200-lg' : 'nm-flat-gray-200-xl hover:nm-flat-gray-200-lg'}`">
+    <button @click="togglePlay" :class="`rounded-full w-60 h-60 text-gray-700 text-lg ${isPlaying ? 'hover:nm-flat-gray-200-lg nm-flat-gray-200-lg' : 'nm-flat-gray-200-xl hover:nm-flat-gray-200-lg'}`">
       {{ isPlaying ? 'Pause' : 'Play' }}
     </button>
   </div>