load button

src/App.vue

@@ -13,14 +13,15 @@
         <input v-model="title" placeholder="Title">
         <button @click="add">Add Scene</button>
     </div>
-
     <div class="load-scene">
-        <label >Load scene</label>
+        <label > Open
         <input type="file" multiple @change="load">
+        </label>
     </div>
 
 
 
+
         <SceneEntry v-for="scene in scenes" :title="scene.title" :series="scene.series"/>
 
     </main>
@@ -83,9 +84,35 @@ main {
     background-color: #F3F3F3;
 }
 
+.load-scene {
+    display: inline-flex;
+    gap: 8px;
+    padding: 16px;
+
+}
+
+.load-scene input {
+    position: absolute;
+    top: -10000px;
+}
+
+.load-scene label {
+    background-color: #fff;
+    border: 1px solid currentColor;
+    padding: 8px;
+    border-radius: 50%;
+    cursor: pointer;
+}
+
+.load-scene label:hover {
+    background-color: #393939;
+    border-color: #393939;
+    color: #fff;
+}
+
 @media print {
 
-    header, .insert-scene, .add-shot {
+    header, .insert-scene, .load-scene, .add-shot {
         display: none
     }