From 8dae29305a49eecd135e1c151cf5f93c20f63ca9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?M=C3=A1rio=20Panenko?= <mario.panenko@student.tuke.sk>
Date: Mon, 18 Nov 2024 17:43:42 +0000
Subject: [PATCH] Update Script_Speech_recognition/style.css

---
 Script_Speech_recognition/style.css | 276 ++++++++++------------------
 1 file changed, 102 insertions(+), 174 deletions(-)

diff --git a/Script_Speech_recognition/style.css b/Script_Speech_recognition/style.css
index c62e17a..ffb756f 100644
--- a/Script_Speech_recognition/style.css
+++ b/Script_Speech_recognition/style.css
@@ -16,15 +16,25 @@ h1 {
 
 .container {
     display: flex;
-    justify-content: center;
-    align-items: center;
-    gap: 5%;
+    justify-content: center; /* Center the elements horizontally */
+    align-items: flex-start; /* Align items to the top */
     padding: 20px;
+    gap: 20px; /* Maintain a comfortable space between elements */
     flex-wrap: wrap; /* Allow wrapping for responsive layouts */
+    max-width: 1200px; /* Set max-width to keep layout centered and compact */
+    margin: 0 auto; /* Center the container itself */
+}
+
+.textarea-container,
+.video {
+    width: 45%;
+    max-width: 500px;
+    min-width: 300px; /* Minimum width for smaller screens */
 }
 
 .translation-buttons {
     display: flex;
+    justify-content: center; /* Center buttons */
     gap: 10px;
     margin-bottom: 20px;
 }
@@ -51,33 +61,22 @@ h1 {
     box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
 }
 
-.textarea-container,
-.video {
-    width: 45%;
-    max-width: 500px;
-}
-
 .textarea-container {
     position: relative;
-    display: inline-block;
 }
 
-.video {
-    display: inline-block;
-    vertical-align: top;
-}
-
-#translateLettersBtn, #translateWordsBtn {
-    display: block;
-    margin: 20px auto;
-    padding: 10px 20px;
-    font-size: 24px;
-    background-color: #4285f4;
-    color: white;
-    border: none;
-    border-radius: 50px;
-    cursor: pointer;
-    transition: background-color 0.3s ease;
+#inputText {
+    width: 100%;
+    height: 200px;
+    padding: 15px;
+    font-size: 16px;
+    background-color: #f9f9f9;
+    border: 2px solid #e0e0e0;
+    border-radius: 8px;
+    color: #333;
+    resize: none; /* Disable resizing */
+    box-sizing: border-box; /* Ensure padding doesn't affect the width */
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
 }
 
 #timerDisplay, #statusText {
@@ -89,6 +88,7 @@ h1 {
 #statusText {
     color: #f44336;
 }
+
 /* Style for buttons */
 button {
     padding: 10px 20px;
@@ -97,6 +97,8 @@ button {
     color: white;
     border: none;
     cursor: pointer;
+    transition: background-color 0.3s ease;
+    border-radius: 5px;
 }
 
 button:hover {
@@ -108,99 +110,7 @@ button.dark-mode {
     color: #fff;
 }
 
-/* Wrapper for textarea and buttons */
-.textarea-container {
-    position: relative; /* Allows positioning of elements inside it */
-    width: 45%; /* Set width for the container */
-    max-width: 500px; /* Optional: max width */
-}
-
-/* Textarea Style */
-#inputText {
-    width: 100%; /* Take up full width */
-    height: 200px; /* Set a fixed height */
-    padding: 15px;
-    font-size: 16px;
-    background-color: #f9f9f9;
-    border: 2px solid #e0e0e0;
-    border-radius: 8px;
-    color: #333;
-    resize: none; /* Disable resizing */
-    box-sizing: border-box; /* Ensure padding doesn't affect the width */
-}
-
-/* Style for the start button */
-#startBtn {
-    position: absolute;
-    left: 10px; /* Position it to the left inside the container */
-    bottom: 10px; /* Place it at the bottom */
-    padding: 10px;
-    font-size: 24px;
-    background-color: #4285f4;
-    color: white;
-    border: none;
-    border-radius: 50%;
-    cursor: pointer;
-    transition: background-color 0.3s ease;
-}
-
-/* Hover effect for start button */
-#startBtn:hover {
-    background-color: #357ae8;
-}
-
-/* Style for the translate button */
-#translateBtn {
-    position: absolute;
-    right: 10px; /* Position it to the right inside the container */
-    bottom: 10px; /* Place it at the bottom */
-    padding: 10px 20px;
-    font-size: 16px;
-    background-color: #4285f4;
-    color: white;
-    border: none;
-    border-radius: 5px;
-    cursor: pointer;
-    transition: background-color 0.3s ease;
-}
-
-/* Hover effect for translate button */
-#translateBtn:hover {
-    background-color: #357ae8;
-}
-
-/* Styling for the timer and status text */
-#timerDisplay, #statusText {
-    text-align: center;
-    font-size: 18px;
-    color: #555;
-}
-
-#statusText {
-    color: #f44336;
-}
-
 /* Dark Mode */
-body.dark-mode {
-    background-color: #121212;
-    color: white;
-}
-
-h1.dark-mode {
-    color: white;
-}
-
-textarea.dark-mode {
-    background-color: #333;
-    color: white;
-    border: 1px solid #444;
-}
-
-.video.dark-mode {
-    background-color: #333;
-}
-
-/* Dark Theme (this will be applied dynamically) */
 body.dark-mode {
     background-color: #121212;
     color: #e0e0e0;
@@ -246,58 +156,30 @@ textarea.dark-mode:focus {
     background-color: #1e1e1e; /* Dark background for video */
 }
 
-.video.dark-mode #translationVideo{
-    border: 0px solid #333;
-}
-
-/* Style for the theme toggle button (icon) */
-#themeToggleBtn {
-    position: fixed;
-    top: 20px;
-    right: 20px; /* Changed from left to right */
-    background-color: transparent;
-    border: none;
-    font-size: 24px;
-    cursor: pointer;
-    z-index: 1000; /* Ensure it stays on top */
-    transition: color 0.3s ease;
-}
-
-#themeToggleBtn:hover {
-    color: #f4b400; /* Add a hover color effect */
-}
-
-.video h2 {
-    color: #4285f4; /* Optional: change heading color */
-    font-size: 24px; /* Optional: adjust font size */
-    text-align: center; /* Center align the text */
-}
-
 .video {
     position: relative;
-    width: 45%; /* Default width */
-    max-width: 500px;
-    /*aspect-ratio: 16/9; /* Keep a responsive aspect ratio */
+    max-height: 700px; /* Set a reasonable maximum height */
+    aspect-ratio: 16/9; /* Keep a responsive aspect ratio for the video */
     background-color: #ffffff;
-    border: 14px solid #d4d4d4;
+    border: 12px solid #d4d4d4;
     border-radius: 12px;
     box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
     display: flex;
-    flex-direction: column; /* Stack items vertically */
-    align-items: center; /* Center content */
-    justify-content: flex-start; /* Align items to the start */
+    flex-direction: column;
+    align-items: center;
+    justify-content: flex-start;
     transition: transform 0.3s ease;
 }
 
-
 /* Styling for video element inside .video */
 .video video {
     width: 100%;
-    height: 100%;
+    max-height: 150%; /* Ensure the video fits within the container */
     border-radius: 4px;
+    object-fit: cover; /* Ensure the video fits its container */
 }
 
-/* Styling for navigation buttons */
+/* Navigation button styles */
 #prevBtn, #nextBtn {
     position: absolute;
     top: 50%;
@@ -315,11 +197,12 @@ textarea.dark-mode:focus {
     justify-content: center;
     box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15);
     transition: background-color 0.3s ease, transform 0.2s;
+    z-index: 10; /* Ensure buttons are above other elements */
 }
 
 #prevBtn:hover, #nextBtn:hover {
     background-color: #357ae8;
-    transform: scale(1.1); /* Small zoom on hover */
+    transform: scale(1.1);
 }
 
 #prevBtn {
@@ -330,35 +213,80 @@ textarea.dark-mode:focus {
     right: -20px;
 }
 
-/* Styling for textarea */
-textarea {
-    width: 45%; /* Match video width */
-    max-width: 500px;
-    min-height: 200px;
-    padding: 15px;
-    background-color: #f9f9f9;
-    border: 2px solid #e0e0e0;
-    border-radius: 8px;
-    color: #333;
+/* Style for the start button */
+#startBtn {
+    position: absolute;
+    left: 10px; /* Position it to the left inside the container */
+    bottom: 10px; /* Place it at the bottom */
+    padding: 10px;
+    font-size: 24px;
+    background-color: #4285f4;
+    color: white;
+    border: none;
+    border-radius: 50%;
+    cursor: pointer;
+    transition: background-color 0.3s ease;
+}
+
+/* Hover effect for start button */
+#startBtn:hover {
+    background-color: #357ae8;
+}
+
+/* Style for the translate button */
+#translateBtn {
+    position: absolute;
+    right: 10px; /* Position it to the right inside the container */
+    bottom: 10px; /* Place it at the bottom */
+    padding: 10px 20px;
     font-size: 16px;
-    resize: none;
-    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
-    transition: border-color 0.3s ease, box-shadow 0.3s ease;
+    background-color: #4285f4;
+    color: white;
+    border: none;
+    border-radius: 5px;
+    cursor: pointer;
+    transition: background-color 0.3s ease;
 }
 
-textarea:focus {
-    border-color: #4285f4;
-    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
-    outline: none;
+/* Hover effect for translate button */
+#translateBtn:hover {
+    background-color: #357ae8;
 }
 
+/* Style for the theme toggle button (icon) */
+#themeToggleBtn {
+    position: fixed;
+    top: 20px;
+    right: 20px;
+    background-color: transparent;
+    border: none;
+    font-size: 24px;
+    cursor: pointer;
+    z-index: 1000; /* Ensure it stays on top */
+    transition: color 0.3s ease;
+}
+
+#themeToggleBtn:hover {
+    color: #f4b400; /* Add a hover color effect */
+}
+
+.video h2 {
+    color: #4285f4; /* Heading color */
+    font-size: 24px; /* Font size for the heading */
+    text-align: center; /* Center align the text */
+    margin: 0;
+}
+
+/* Responsive layout adjustments */
 @media (max-width: 768px) {
     .container {
         flex-direction: column;
+        align-items: center;
     }
 
     .textarea-container,
     .video {
-        width: 90%; /* Wider for smaller screens */
+        width: 90%; /* Expand to take more space on smaller screens */
+        max-width: none;
     }
 }
\ No newline at end of file