YACWC

SearchFrontend/search_ui/src/App.css

@@ -8,8 +8,8 @@
   background: #181a20;
 }
 
-/* Video.js player */
-.video-js-mod {
+/* Video.js player styles */
+.video-player-fullscreen {
   position: fixed;
   top: 0;
   left: 0;
@@ -17,98 +17,105 @@
   height: 100vh;
   object-fit: contain;
   background: #000;
+  
 }
 
-.vjs-tech {
+.video-tech {
   object-fit: contain;
 }
 
-/* Main app layout */
+/* Main app container */
 .app-container {
-  display: flex;
-  flex-direction: column;
   height: 100vh;
-  width: 100vw;
-  margin: 0;
+  width: 95vw;
+  max-width: 95vw;
+  margin: 0 auto;
   padding: 0;
-  gap: 12px;
-  /* background: #181a20; */
+  gap: 0;
 }
 
-
-.flex-group {
-  display: flex;
-  flex-direction: column; /* or 'row' if you want horizontal grouping */
-  flex: 1 1 0;
-  min-width: 0;
-}
-/* Section containers */
-.section-box-horiz {
-  overflow: visible;
-  flex-direction: row;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-/* Section containers */
-.section-box {
-  flex: 0 0 5%;
-  overflow: visible;
-  /* background: #23272f; */
-  /* padding: 0;
-  box-sizing: border-box;
-  border-radius: 10px;
-  margin: 0 16px;
-  box-shadow: 0 2px 8px rgba(0,0,0,0.10); */
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.timeline-container {
-  flex: 0 0 24%;
-  overflow: visible;
-  background: #20232a;
-  padding: 0;
-  box-sizing: border-box;
-  border-radius: 10px;
-  margin: 0 16px;
-  box-shadow: 0 2px 8px rgba(0,0,0,0.10);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.section-box:last-of-type {
-  flex: 1 1 68%;
-  overflow: hidden;
+/* Controls section */
+.controls-section {
+  width: 100%;
+  margin-bottom: 12px;
   background: #23272f;
-  padding: 0;
-  box-sizing: border-box;
   border-radius: 10px;
-  margin: 0 16px 16px 16px;
-  box-shadow: 0 2px 8px rgba(0,0,0,0.10);
-  display: flex;
-  align-items: center;
-  justify-content: center;
+  padding: 16px 0;
+  text-align: center;
+  box-sizing: border-box;
 }
 
-/* Responsive tweaks */
+/* Control group wrapper */
+.control-group {
+  display: inline-block;
+  vertical-align: middle;
+  min-width: 10%;
+  margin: 0 8px;
+}
+
+/* Status display section */
+.status-section {
+  width: 100%;
+  margin-bottom: 12px;
+}
+
+/* Timeline container */
+.timeline-section {
+  width: 100%;
+  height: 30vh;
+  min-height: 200px;
+  background: #20232a;
+  border-radius: 10px;
+  margin: 0 auto;
+  box-shadow: 0 2px 8px rgba(0,0,0,0.10);
+  text-align: center;
+  box-sizing: border-box;
+  margin-bottom: 12px;
+  padding: 0;
+}
+
+/* Video player section */
+.video-section {
+  width: 100%;
+  height: 60vw;
+  margin-top: 12px;
+  min-height: 40vw;
+  background: #23272f;
+  border-radius: 10px;
+  margin: 0 auto;
+  box-shadow: 0 2px 8px rgba(0,0,0,0.10);
+  text-align: center;
+  box-sizing: border-box;
+  margin-bottom: 12px;
+  padding: 0;
+}
+
+/* Date range picker styles */
+.date-picker-wrapper {
+  max-width: 98vw;
+  padding: 12px 8px;
+  border-radius: 8px;
+}
+
+/* Responsive styles */
 @media (max-width: 600px) {
   .app-container {
-    gap: 6px;
+    gap: 0;
   }
-  .section-box,
-  .timeline-container,
-  .section-box:last-of-type {
-    margin: 0 4px;
+  
+  .video-section,
+  .timeline-section {
+    margin: 0 4px 8px 4px;
     border-radius: 6px;
-    padding: 0;
   }
-  .date-range-selector {
+  
+  .date-picker-wrapper {
     max-width: 98vw;
     padding: 12px 8px;
     border-radius: 8px;
   }
-}
+  
+  .controls-section {
+    padding: 8px 0;
+  }
+}