Use text input for timestamp

.gitignore

@@ -7,4 +7,6 @@
 /invidious
 /sentry
 /config/config.yml
-.DS_Store
+.DS_Store
+docker-compose.yml
+Dockerfile

assets/css/default.css

@@ -760,12 +760,17 @@ h1, h2, h3, h4, h5, p,
   margin: 0 2px;
 }
 
+input.compilation-video-timestamp {
+  width: 50px;
+  height: 20px;
+}
+
 div.compilation-video-panel {
   display:flex;
   justify-content:flex-start; 
   width:calc(100% - 20px); 
   height:100px; 
-  border:1px solid #f0f0f0; 
+  border:2px solid #ccc;
   margin: 10px; 
   /*background: #d9d9d9;*/
 }
@@ -802,12 +807,12 @@ span.compilation-video-title {
   overflow: hidden;
 }
 
-div.compilation-video-timestamps {
+div.compilation-video-timestamp-set {
   display:flex; 
   justify-content: flex-start;
+  align-items: center;
 }
 
-
 div.compilation-video-thumbnail {
   position: relative;
   box-sizing: border-box;

src/invidious/views/components/compilation_video.ecr

@@ -26,10 +26,10 @@
                 <div class="compilation-video-title">
                     <span class="compilation-video-title" dir="auto"><%= HTML.escape(compilation_video.title) %></span>
                 </div> 
-                <div class="compilation-video-timestamps">
-                    <p>from</p>
-                    <input value="00:00:00" type="time" step="1">
-                    <p>to</p>
+                <div class="compilation-video-timestamp-set">
+                    <p style="margin-right:10px;">from</p>
+                    <input class="compilation-video-timestamp" placeholder="0:00" type="text">
+                    <p style="margin-right:10px;">to</p>
                     <input value="00:00:00" type="time" step="1">
                 </div>
             </div>