mk875sd/projekt-7
4
1
Fork 0
Code Issues 14 Pull Requests Actions Packages Projects 1 Releases Wiki Activity

Update Script_Speech_recognition/style.css

Browse Source
This commit is contained in:
Mário Panenko 2024-11-18 18:40:04 +00:00
parent cef609b074
commit 2f0a06e2ed
1 changed files with 151 additions and 135 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

286
Script_Speech_recognition/style.css
View File

@ -1,50 +1,56 @@
/* Default Light Theme */ /* Default Light Theme */
body { html, body {
height: 100%; /* Ensure that the HTML and body elements span the full height of the viewport */
margin: 0;
padding: 0;
overflow-x: hidden; /* Prevent horizontal scrolling but allow vertical scrolling */
font-family: Arial, sans-serif; font-family: Arial, sans-serif;
background-color: #f5f5f5; background-color: #f5f5f5;
color: #333; color: #333;
margin: 0; }
padding: 0;
body {
width: 100%;
height: 100%;
box-sizing: border-box; /* Make sure padding and borders are included in width/height */
} }
h1 { h1 {
text-align: center; text-align: center;
color: #4285f4; color: #4285f4;
font-size: 28px; font-size: 28px;
margin-top: 20px; margin: 20px 0;
} }
/* Full-width container taking half the height of the page */
.container { .container {
width: 100%; /* Make the container full width of the page */
padding: 20px 0; /* Add some padding to the top and bottom */
box-sizing: border-box; /* Include padding in width calculations */
}
.inner-container {
max-width: 1200px; /* Limit the width of the inner content */
margin: 0 auto; /* Center the inner container */
display: flex; display: flex;
justify-content: center; /* Center the elements horizontally */ justify-content: center; /* Center the elements horizontally */
align-items: flex-start; /* Align items to the top */ align-items: center; /* Center items vertically */
width: 100%; /* Full width of the page */
padding: 20px; /* Add some padding for spacing */
gap: 20px; /* Maintain a comfortable space between elements */ gap: 20px; /* Maintain a comfortable space between elements */
flex-wrap: wrap; /* Allow wrapping for responsive layouts */ flex-wrap: wrap; /* Allow wrapping for responsive layouts */
box-sizing: border-box; /* Include padding in width calculation */
} }
.textarea-container, .textarea-container {
.video { position: relative; /* Needed for absolute positioning of child elements */
width: 45%; width: 45%;
max-width: 600px; /* Increase max-width to allow larger video container */ max-width: 600px;
min-width: 350px; /* Minimum width for smaller screens */ min-width: 350px;
box-sizing: border-box; /* Include padding and borders in the element’s dimensions */
} }
/* Styling for the buttons above the textarea */
.translation-buttons { .translation-buttons {
display: flex; display: flex;
justify-content: center; /* Center buttons */ justify-content: center; /* Center the buttons horizontally */
gap: 10px; gap: 10px; /* Space between the buttons */
margin-bottom: 20px; margin-bottom: 15px; /* Space between buttons and textarea */
} }
.translation-buttons button { #translateWordsBtn, #translateLettersBtn {
padding: 10px 20px; padding: 10px 20px;
font-size: 16px; font-size: 16px;
background-color: #4285f4; background-color: #4285f4;
@ -53,9 +59,10 @@ h1 {
border-radius: 5px; border-radius: 5px;
cursor: pointer; cursor: pointer;
transition: background-color 0.3s ease; transition: background-color 0.3s ease;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15); /* Added shadow for consistency */
} }
.translation-buttons button:hover { #translateWordsBtn:hover, #translateLettersBtn:hover {
background-color: #357ae8; background-color: #357ae8;
} }
@ -66,10 +73,6 @@ h1 {
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
} }
.textarea-container {
position: relative;
}
#inputText { #inputText {
width: 100%; width: 100%;
height: 200px; height: 200px;
@ -82,88 +85,54 @@ h1 {
resize: none; /* Disable resizing */ resize: none; /* Disable resizing */
box-sizing: border-box; /* Ensure padding doesn't affect the width */ box-sizing: border-box; /* Ensure padding doesn't affect the width */
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
position: relative; /* Needed for buttons inside the textarea container */
} }
#timerDisplay, #statusText { /* Microphone button inside textarea, positioned bottom-left */
text-align: center; #startBtn {
font-size: 18px; position: absolute;
color: #555; left: 10px;
} bottom: 10px;
padding: 8px;
#statusText { font-size: 20px;
color: #f44336;
}
/* Style for buttons */
button {
padding: 10px 20px;
font-size: 16px;
background-color: #4285f4; background-color: #4285f4;
color: white; color: white;
border: none; border: none;
border-radius: 50%;
cursor: pointer; cursor: pointer;
transition: background-color 0.3s ease; transition: background-color 0.3s ease;
border-radius: 5px; z-index: 5;
} }
button:hover { #startBtn:hover {
background-color: #357ae8; background-color: #357ae8;
} }
button.dark-mode { /* Translate button inside textarea, positioned bottom-right, increased size by half */
background-color: #333; #translateBtn {
color: #fff; position: absolute;
right: 10px;
bottom: 10px;
padding: 12px 25px; /* Increased padding to make button larger */
font-size: 18px; /* Increased font size */
background-color: #4285f4;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
transition: background-color 0.3s ease;
z-index: 5;
} }
/* Dark Mode */ #translateBtn:hover {
body.dark-mode { background-color: #357ae8;
background-color: #121212;
color: #e0e0e0;
}
h1.dark-mode {
color: #8ab4f8;
}
textarea.dark-mode {
background-color: #1e1e1e;
border-color: #333;
color: #e0e0e0;
}
textarea.dark-mode:focus {
border-color: #8ab4f8;
}
#startBtn.dark-mode {
background-color: #8ab4f8;
color: #121212;
}
#startBtn.dark-mode:hover {
background-color: #76a7f3;
}
#timerDisplay.dark-mode, #statusText.dark-mode {
color: #b0b0b0;
}
#statusText.dark-mode {
color: #cf6679;
}
.video.dark-mode {
background-color: #1e1e1e; /* Dark background for video container */
border: 2px solid #333; /* Dark border */
}
.video.dark-mode video {
background-color: #1e1e1e; /* Dark background for video */
} }
.video { .video {
position: relative; position: relative;
max-height: 700px; /* Set a reasonable maximum height */ width: 45%;
max-width: 600px;
min-width: 350px;
aspect-ratio: 16/9; /* Keep a responsive aspect ratio for the video */ aspect-ratio: 16/9; /* Keep a responsive aspect ratio for the video */
background-color: #ffffff; background-color: #ffffff;
border: 12px solid #d4d4d4; border: 12px solid #d4d4d4;
@ -174,6 +143,7 @@ textarea.dark-mode:focus {
align-items: center; align-items: center;
justify-content: flex-start; justify-content: flex-start;
transition: transform 0.3s ease; transition: transform 0.3s ease;
box-sizing: border-box;
} }
/* Styling for video element inside .video */ /* Styling for video element inside .video */
@ -184,7 +154,7 @@ textarea.dark-mode:focus {
object-fit: cover; /* Ensure the video fits its container */ object-fit: cover; /* Ensure the video fits its container */
} }
/* Updated Navigation button styles */ /* Navigation button styles */
#prevBtn, #nextBtn { #prevBtn, #nextBtn {
position: absolute; position: absolute;
top: 50%; top: 50%;
@ -194,8 +164,8 @@ textarea.dark-mode:focus {
color: white; color: white;
border: none; border: none;
border-radius: 50%; border-radius: 50%;
width: 50px; width: 50px; /* Increase button size */
height: 50px; height: 50px; /* Increase button size */
cursor: pointer; cursor: pointer;
display: flex; display: flex;
align-items: center; align-items: center;
@ -217,46 +187,6 @@ textarea.dark-mode:focus {
right: -30px; /* Adjust button position for better appearance */ right: -30px; /* Adjust button position for better appearance */
} }
/* 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;
}
/* Style for the theme toggle button (icon) */ /* Style for the theme toggle button (icon) */
#themeToggleBtn { #themeToggleBtn {
position: fixed; position: fixed;
@ -281,16 +211,102 @@ textarea.dark-mode:focus {
margin: 0; margin: 0;
} }
/* Dark Mode */
body.dark-mode {
background-color: #121212;
color: #e0e0e0;
}
h1.dark-mode {
color: #8ab4f8;
}
textarea.dark-mode {
background-color: #1e1e1e;
border-color: #333;
color: #e0e0e0;
}
textarea.dark-mode:focus {
border-color: #8ab4f8;
}
#startBtn.dark-mode,
#translateBtn.dark-mode,
#translateWordsBtn.dark-mode,
#translateLettersBtn.dark-mode,
#prevBtn.dark-mode,
#nextBtn.dark-mode {
background-color: #333;
color: #fff;
}
#startBtn.dark-mode:hover,
#translateBtn.dark-mode:hover,
#translateWordsBtn.dark-mode:hover,
#translateLettersBtn.dark-mode:hover,
#prevBtn.dark-mode:hover,
#nextBtn.dark-mode:hover {
background-color: #555;
}
.video.dark-mode {
background-color: #1e1e1e;
border-color: #333;
}
#themeToggleBtn.dark-mode {
color: #e0e0e0;
}
/* Responsive layout adjustments */ /* Responsive layout adjustments */
@media (max-width: 768px) { @media (max-width: 768px) {
.container { .container {
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
padding: 20px; /* Add padding for spacing on smaller screens */
gap: 15px; /* Reduce gap for smaller screens */
height: auto; /* Allow the height to adjust for mobile screens */
} }
.textarea-container, .textarea-container,
.video { .video {
width: 90%; /* Expand to take more space on smaller screens */ width: 100%; /* Full width for smaller screens */
max-width: none; max-width: none;
} }
}
#translateWordsBtn, #translateLettersBtn {
font-size: 14px; /* Reduce button font size for smaller screens */
padding: 8px 15px; /* Reduce button padding for smaller screens */
}
#inputText {
height: 150px; /* Reduce height for the text area */
}
#startBtn, #translateBtn {
font-size: 16px; /* Reduce button font size for smaller screens */
padding: 10px; /* Reduce button padding */
}
#prevBtn, #nextBtn {
width: 40px; /* Reduce button size for smaller screens */
height: 40px; /* Reduce button size for smaller screens */
}
#prevBtn {
left: -20px; /* Adjust button position for smaller screens */
}
#nextBtn {
right: -20px; /* Adjust button position for smaller screens */
}
h1 {
font-size: 24px; /* Decrease heading font size for mobile devices */
}
#themeToggleBtn {
font-size: 20px; /* Decrease theme toggle button size for mobile */
}
}