v0.0.3_b+3

op200 · Feb 21, 2025 · b3d05fe · b3d05fe
1 parent 799dc35
commit b3d05fe
Show file tree

Hide file tree

Showing 2 changed files with 72 additions and 8 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "synchrsub",
-  "version": "0.0.3_b+2",
+  "version": "0.0.3_b+3",
   "private": true,
   "type": "module",
   "scripts": {

diff --git a/src/App.vue b/src/App.vue
@@ -303,8 +303,9 @@ onBeforeUnmount(() => {
           <colgroup>
             <col class="tNum">
             <col class="tLayer" v-show="isShowLayer">
-            <col class="tStart">
-            <col class="tEnd">
+            <!-- <col class="tStart">
+            <col class="tEnd"> -->
+            <col class="tTime">
             <col class="tStyle">
             <col class="tActor" v-show="isShowActor">
             <col class="tEffect" v-show="isShowEffect">
@@ -314,8 +315,9 @@ onBeforeUnmount(() => {
             <tr>
               <th class="tNum">#</th>
               <th class="tLayer" v-show="isShowLayer">L</th>
-              <th class="tStart">Start</th>
-              <th class="tEnd">End</th>
+              <!-- <th class="tStart">Start</th>
+              <th class="tEnd">End</th> -->
+              <th class="tTime">Time</th>
               <th class="tStyle">Style</th>
               <th class="tActor" v-show="isShowActor">Actor</th>
               <th class="tEffect" v-show="isShowEffect">Effect</th>
@@ -331,8 +333,9 @@ onBeforeUnmount(() => {
             }">
               <td class="tNum">{{ index + 1 }}</td>
               <td class="tLayer" v-show="isShowLayer">{{ item.sub['Layer'] === 0 ? '' : item.sub['Layer'] }}</td>
-              <td class="tStart">{{ item.sub.getStartStr() }}</td>
-              <td class="tEnd">{{ item.sub.getEndStr() }}</td>
+              <!-- <td class="tStart">{{ item.sub.getStartStr() }}</td>
+              <td class="tEnd">{{ item.sub.getEndStr() }}</td> -->
+              <td class="tTime">{{ item.sub.getStartStr() }}<br>{{ item.sub.getEndStr() }}</td>
               <td class="tStyle">{{ item.sub['Style'] }}</td>
               <td class="tActor" v-show="isShowActor">{{ item.sub['Actor'] }}</td>
               <td class="tEffect" v-show="isShowEffect">{{ item.sub['Effect'] }}</td>
@@ -506,6 +509,7 @@ onBeforeUnmount(() => {
   border: 1px solid lightgray;
   margin: 1rem 2rem;
   overflow-y: auto;
+  scrollbar-width: thin;
 
   >* {
     display: inline-block;
@@ -538,17 +542,63 @@ onBeforeUnmount(() => {
       margin: auto;
       padding: 0;
     }
+  }
+}
+
+@media (aspect-ratio < 1) {
+  .buttonBar {
+    height: calc(10% - 2px);
 
-    @media (aspect-ratio < 1) {
+    button {
+      font-size: 0.7rem;
+      padding: 0.05rem 0.15rem;
+    }
+
+    #videoProgress {
       >input {
         width: 100%;
+        height: 0.5rem;
+      }
+
+
+      >input[type="range"]::-webkit-slider-thumb {
+        -webkit-appearance: none;
+        width: 0.3rem;
+        height: 0.9rem;
+        border: 1px solid lightgray;
+        cursor: pointer;
+      }
+
+      >input[type="range"]::-moz-range-thumb {
+        width: 0.3rem;
+        height: 0.9rem;
+        /* border-width: 1px; */
+        cursor: pointer;
+      }
+
+      >input[type="range"]::-moz-range-progress {
+        background: lightgray;
+      }
+
+      >input[type="range"]::-ms-thumb {
+        width: 0.3rem;
+        height: 0.9rem;
+        border-width: 1px;
+        cursor: pointer;
       }
 
       >span {
         width: 100%;
+        height: 50%;
+        font-size: 0.7rem;
+        line-height: 1.3rem;
       }
     }
   }
+
+  .workSpace {
+    height: calc(90% - 5rem - 1px);
+  }
 }
 
 /* work space */
@@ -680,6 +730,10 @@ onBeforeUnmount(() => {
       text-align: center;
     }
 
+    .tTime {
+      text-align: center;
+    }
+
     .tStyle {
       text-align: left;
     }
@@ -876,4 +930,14 @@ onBeforeUnmount(() => {
     overflow: hidden;
   }
 }
+
+@media (aspect-ratio < 1) {
+  #panel {
+    width: calc(100% - 1rem - 2px);
+  }
+
+  .deskDefaultWidth {
+    width: calc(1rem + 1px);
+  }
+}
 </style>