Update Script_Speech_recognition/style.css
This commit is contained in:
parent
cef609b074
commit
2f0a06e2ed
@ -1,50 +1,56 @@
|
||||
/* 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;
|
||||
background-color: #f5f5f5;
|
||||
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 {
|
||||
text-align: center;
|
||||
color: #4285f4;
|
||||
font-size: 28px;
|
||||
margin-top: 20px;
|
||||
margin: 20px 0;
|
||||
}
|
||||
|
||||
/* Full-width container taking half the height of the page */
|
||||
.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;
|
||||
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 */
|
||||
flex-wrap: wrap; /* Allow wrapping for responsive layouts */
|
||||
box-sizing: border-box; /* Include padding in width calculation */
|
||||
}
|
||||
|
||||
.textarea-container,
|
||||
.video {
|
||||
.textarea-container {
|
||||
position: relative; /* Needed for absolute positioning of child elements */
|
||||
width: 45%;
|
||||
max-width: 600px; /* Increase max-width to allow larger video container */
|
||||
min-width: 350px; /* Minimum width for smaller screens */
|
||||
max-width: 600px;
|
||||
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 {
|
||||
display: flex;
|
||||
justify-content: center; /* Center buttons */
|
||||
gap: 10px;
|
||||
margin-bottom: 20px;
|
||||
justify-content: center; /* Center the buttons horizontally */
|
||||
gap: 10px; /* Space between the buttons */
|
||||
margin-bottom: 15px; /* Space between buttons and textarea */
|
||||
}
|
||||
|
||||
.translation-buttons button {
|
||||
#translateWordsBtn, #translateLettersBtn {
|
||||
padding: 10px 20px;
|
||||
font-size: 16px;
|
||||
background-color: #4285f4;
|
||||
@ -53,9 +59,10 @@ h1 {
|
||||
border-radius: 5px;
|
||||
cursor: pointer;
|
||||
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;
|
||||
}
|
||||
|
||||
@ -66,10 +73,6 @@ h1 {
|
||||
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
.textarea-container {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
#inputText {
|
||||
width: 100%;
|
||||
height: 200px;
|
||||
@ -82,88 +85,54 @@ h1 {
|
||||
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);
|
||||
position: relative; /* Needed for buttons inside the textarea container */
|
||||
}
|
||||
|
||||
#timerDisplay, #statusText {
|
||||
text-align: center;
|
||||
font-size: 18px;
|
||||
color: #555;
|
||||
}
|
||||
|
||||
#statusText {
|
||||
color: #f44336;
|
||||
}
|
||||
|
||||
/* Style for buttons */
|
||||
button {
|
||||
padding: 10px 20px;
|
||||
font-size: 16px;
|
||||
/* Microphone button inside textarea, positioned bottom-left */
|
||||
#startBtn {
|
||||
position: absolute;
|
||||
left: 10px;
|
||||
bottom: 10px;
|
||||
padding: 8px;
|
||||
font-size: 20px;
|
||||
background-color: #4285f4;
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: 50%;
|
||||
cursor: pointer;
|
||||
transition: background-color 0.3s ease;
|
||||
border-radius: 5px;
|
||||
z-index: 5;
|
||||
}
|
||||
|
||||
button:hover {
|
||||
#startBtn:hover {
|
||||
background-color: #357ae8;
|
||||
}
|
||||
|
||||
button.dark-mode {
|
||||
background-color: #333;
|
||||
color: #fff;
|
||||
/* Translate button inside textarea, positioned bottom-right, increased size by half */
|
||||
#translateBtn {
|
||||
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 */
|
||||
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 {
|
||||
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 */
|
||||
#translateBtn:hover {
|
||||
background-color: #357ae8;
|
||||
}
|
||||
|
||||
.video {
|
||||
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 */
|
||||
background-color: #ffffff;
|
||||
border: 12px solid #d4d4d4;
|
||||
@ -174,6 +143,7 @@ textarea.dark-mode:focus {
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
transition: transform 0.3s ease;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
/* Styling for video element inside .video */
|
||||
@ -184,7 +154,7 @@ textarea.dark-mode:focus {
|
||||
object-fit: cover; /* Ensure the video fits its container */
|
||||
}
|
||||
|
||||
/* Updated Navigation button styles */
|
||||
/* Navigation button styles */
|
||||
#prevBtn, #nextBtn {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
@ -194,8 +164,8 @@ textarea.dark-mode:focus {
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: 50%;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
width: 50px; /* Increase button size */
|
||||
height: 50px; /* Increase button size */
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@ -217,46 +187,6 @@ textarea.dark-mode:focus {
|
||||
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) */
|
||||
#themeToggleBtn {
|
||||
position: fixed;
|
||||
@ -281,16 +211,102 @@ textarea.dark-mode:focus {
|
||||
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 */
|
||||
@media (max-width: 768px) {
|
||||
.container {
|
||||
flex-direction: column;
|
||||
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,
|
||||
.video {
|
||||
width: 90%; /* Expand to take more space on smaller screens */
|
||||
width: 100%; /* Full width for smaller screens */
|
||||
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 */
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user