Update Script_Speech_recognition/style.css
This commit is contained in:
parent
830ff00b2b
commit
2f06bd4a7e
@ -1,98 +1,101 @@
|
|||||||
/* Default Light Theme */
|
/* General Styles */
|
||||||
html, body {
|
body {
|
||||||
height: 100%; /* Ensure that the HTML and body elements span the full height of the viewport */
|
font-family: Arial, sans-serif;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
overflow-x: hidden; /* Prevent horizontal scrolling but allow vertical scrolling */
|
box-sizing: border-box;
|
||||||
font-family: Arial, sans-serif;
|
background-color: #f9f9f9;
|
||||||
background-color: #f5f5f5;
|
|
||||||
color: #333;
|
color: #333;
|
||||||
}
|
}
|
||||||
|
|
||||||
body {
|
header h1 {
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
box-sizing: border-box; /* Make sure padding and borders are included in width/height */
|
|
||||||
}
|
|
||||||
|
|
||||||
h1 {
|
|
||||||
text-align: center;
|
text-align: center;
|
||||||
color: #4285f4;
|
color: #333;
|
||||||
font-size: 28px;
|
font-size: 24px;
|
||||||
margin: 20px 0;
|
padding: 20px 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Full-width container taking half the height of the page */
|
/* Main Container */
|
||||||
.container {
|
.main-container {
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: center; /* Center the elements horizontally */
|
justify-content: center;
|
||||||
align-items: center; /* Center items vertically */
|
align-items: flex-start;
|
||||||
width: 100%; /* Full width of the page */
|
gap: 40px;
|
||||||
padding: 20px; /* Add some padding for spacing */
|
margin: 0 auto;
|
||||||
gap: 20px; /* Maintain a comfortable space between elements */
|
max-width: 1200px;
|
||||||
flex-wrap: wrap; /* Allow wrapping for responsive layouts */
|
padding: 20px;
|
||||||
box-sizing: border-box; /* Include padding in width calculation */
|
}
|
||||||
|
|
||||||
|
.text-section {
|
||||||
|
width: 40%;
|
||||||
|
background: #fff;
|
||||||
|
border: 1px solid #ddd;
|
||||||
|
border-radius: 10px;
|
||||||
|
padding: 20px;
|
||||||
|
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 15px; /* Space between textarea, tabs, and button */
|
||||||
|
}
|
||||||
|
|
||||||
|
.tabs {
|
||||||
|
display: flex;
|
||||||
|
gap: 10px;
|
||||||
|
margin-bottom: 15px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tab {
|
||||||
|
flex: 1;
|
||||||
|
padding: 10px;
|
||||||
|
font-size: 16px;
|
||||||
|
text-align: center;
|
||||||
|
border: 1px solid #ddd;
|
||||||
|
border-radius: 8px;
|
||||||
|
cursor: pointer;
|
||||||
|
background-color: #f5f5f5;
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tab.active {
|
||||||
|
background-color: #4285f4;
|
||||||
|
color: #fff;
|
||||||
|
border-color: #4285f4;
|
||||||
|
}
|
||||||
|
|
||||||
|
.current-display {
|
||||||
|
text-align: center;
|
||||||
|
font-size: 20px;
|
||||||
|
font-weight: bold;
|
||||||
|
color: #333;
|
||||||
}
|
}
|
||||||
|
|
||||||
.textarea-container {
|
.textarea-container {
|
||||||
position: relative; /* Needed for absolute positioning of child elements */
|
position: relative;
|
||||||
width: 45%;
|
|
||||||
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 the buttons horizontally */
|
|
||||||
gap: 10px; /* Space between the buttons */
|
|
||||||
margin-bottom: 15px; /* Space between buttons and textarea */
|
|
||||||
}
|
|
||||||
|
|
||||||
#translateWordsBtn, #translateLettersBtn {
|
|
||||||
padding: 10px 20px;
|
|
||||||
font-size: 16px;
|
|
||||||
background-color: #4285f4;
|
|
||||||
color: white;
|
|
||||||
border: none;
|
|
||||||
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 */
|
|
||||||
}
|
|
||||||
|
|
||||||
#translateWordsBtn:hover, #translateLettersBtn:hover {
|
|
||||||
background-color: #357ae8;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Active button style */
|
|
||||||
.translation-buttons .active {
|
|
||||||
background-color: #357ae8;
|
|
||||||
font-weight: bold;
|
|
||||||
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
|
|
||||||
}
|
|
||||||
|
|
||||||
#inputText {
|
|
||||||
width: 100%;
|
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);
|
|
||||||
position: relative; /* Needed for buttons inside the textarea container */
|
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Microphone button inside textarea, positioned bottom-left */
|
/* Textarea styling */
|
||||||
#startBtn {
|
textarea {
|
||||||
|
width: 100%;
|
||||||
|
height: 150px;
|
||||||
|
padding: 15px;
|
||||||
|
border: 1px solid #ddd;
|
||||||
|
border-radius: 8px;
|
||||||
|
font-size: 16px;
|
||||||
|
line-height: 1.5;
|
||||||
|
resize: none;
|
||||||
|
outline: none;
|
||||||
|
background: #f9f9f9;
|
||||||
|
color: #333;
|
||||||
|
box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Microphone button styling */
|
||||||
|
.mic-btn {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
left: 10px;
|
|
||||||
bottom: 10px;
|
bottom: 10px;
|
||||||
|
left: 10px;
|
||||||
padding: 8px;
|
padding: 8px;
|
||||||
font-size: 20px;
|
font-size: 20px;
|
||||||
background-color: #4285f4;
|
background-color: #4285f4;
|
||||||
@ -101,237 +104,170 @@ h1 {
|
|||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
transition: background-color 0.3s ease;
|
transition: background-color 0.3s ease;
|
||||||
z-index: 5;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.translation-buttons button:hover {
|
.mic-btn:hover {
|
||||||
background-color: #357ae8;
|
background-color: #357ae8;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Active button style */
|
.notification {
|
||||||
.translation-buttons .active {
|
margin-top: 15px;
|
||||||
background-color: #357ae8;
|
padding: 10px 15px;
|
||||||
font-weight: bold;
|
background-color: #fff8e5;
|
||||||
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
|
color: #ff6f00;
|
||||||
}
|
border: 1px solid #ffd54f;
|
||||||
|
|
||||||
.textarea-container {
|
|
||||||
position: relative;
|
|
||||||
}
|
|
||||||
|
|
||||||
#inputText {
|
|
||||||
width: 100%;
|
|
||||||
height: 200px;
|
|
||||||
padding: 15px;
|
|
||||||
font-size: 16px;
|
|
||||||
background-color: #f9f9f9;
|
|
||||||
border: 2px solid #e0e0e0;
|
|
||||||
border-radius: 8px;
|
border-radius: 8px;
|
||||||
color: #333;
|
font-size: 14px;
|
||||||
resize: none; /* Disable resizing */
|
display: flex;
|
||||||
box-sizing: border-box; /* Ensure padding doesn't affect the width */
|
align-items: center;
|
||||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
|
gap: 8px;
|
||||||
|
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Translate button inside textarea, positioned bottom-right, increased size by half */
|
.notification span {
|
||||||
#translateBtn {
|
font-size: 14px;
|
||||||
position: absolute;
|
}
|
||||||
right: 10px;
|
|
||||||
bottom: 10px;
|
/* Translate button styling */
|
||||||
padding: 12px 25px; /* Increased padding to make button larger */
|
.translate-btn {
|
||||||
font-size: 18px; /* Increased font size */
|
display: block;
|
||||||
|
width: 100%;
|
||||||
|
padding: 15px;
|
||||||
|
margin-top: 15px;
|
||||||
background-color: #4285f4;
|
background-color: #4285f4;
|
||||||
color: white;
|
color: #fff;
|
||||||
border: none;
|
border: none;
|
||||||
border-radius: 5px;
|
border-radius: 8px;
|
||||||
|
font-size: 18px;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
transition: background-color 0.3s ease;
|
transition: background-color 0.3s ease;
|
||||||
z-index: 5;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
#translateBtn:hover {
|
.translate-btn:hover {
|
||||||
background-color: #357ae8;
|
background-color: #357ae8;
|
||||||
}
|
}
|
||||||
|
|
||||||
.video {
|
.video-section {
|
||||||
position: relative;
|
width: 50%;
|
||||||
width: 45%;
|
background: #fff;
|
||||||
max-width: 600px;
|
border: 1px solid #ddd;
|
||||||
min-width: 350px;
|
border-radius: 10px;
|
||||||
aspect-ratio: 16/9; /* Keep a responsive aspect ratio for the video */
|
padding: 20px;
|
||||||
background-color: #ffffff;
|
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
|
||||||
border: 12px solid #d4d4d4;
|
|
||||||
border-radius: 12px;
|
|
||||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
|
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: flex-start;
|
|
||||||
transition: transform 0.3s ease;
|
|
||||||
box-sizing: border-box;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Styling for video element inside .video */
|
.video-section video {
|
||||||
.video video {
|
|
||||||
width: 100%;
|
width: 100%;
|
||||||
max-height: 150%; /* Ensure the video fits within the container */
|
max-height: 500px; /* Limit the height to 700px */
|
||||||
border-radius: 4px;
|
object-fit: cover; /* Maintain the aspect ratio and fill the container */
|
||||||
object-fit: cover; /* Ensure the video fits its container */
|
border-radius: 10px;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Navigation button styles */
|
.video-controls {
|
||||||
#prevBtn, #nextBtn {
|
|
||||||
position: absolute;
|
|
||||||
top: 50%;
|
|
||||||
transform: translateY(-50%);
|
|
||||||
font-size: 24px;
|
|
||||||
background-color: #4285f4;
|
|
||||||
color: white;
|
|
||||||
border: none;
|
|
||||||
border-radius: 50%;
|
|
||||||
width: 50px; /* Increase button size */
|
|
||||||
height: 50px; /* Increase button size */
|
|
||||||
cursor: pointer;
|
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
justify-content: space-between;
|
||||||
justify-content: center;
|
width: 100%;
|
||||||
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15);
|
margin-top: 10px;
|
||||||
transition: background-color 0.3s ease;
|
|
||||||
z-index: 10; /* Ensure buttons are above other elements */
|
|
||||||
}
|
}
|
||||||
|
|
||||||
#prevBtn:hover, #nextBtn:hover {
|
.nav-btn {
|
||||||
|
font-size: 20px;
|
||||||
|
padding: 10px 15px;
|
||||||
|
background-color: #4285f4;
|
||||||
|
color: #fff;
|
||||||
|
border: none;
|
||||||
|
border-radius: 8px;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: background-color 0.3s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-btn:hover {
|
||||||
background-color: #357ae8;
|
background-color: #357ae8;
|
||||||
}
|
}
|
||||||
|
|
||||||
#prevBtn {
|
/* Footer */
|
||||||
left: -30px; /* Adjust button position for better appearance */
|
footer {
|
||||||
|
text-align: center;
|
||||||
|
margin-top: 20px;
|
||||||
}
|
}
|
||||||
|
|
||||||
#nextBtn {
|
.footer-note {
|
||||||
right: -30px; /* Adjust button position for better appearance */
|
font-size: 14px;
|
||||||
|
color: #666;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Style for the theme toggle button (icon) */
|
/* General mobile responsiveness */
|
||||||
#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;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* 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) {
|
@media (max-width: 768px) {
|
||||||
.container {
|
/* Adjust the main container to stack elements vertically */
|
||||||
|
.main-container {
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
padding: 20px; /* Add padding for spacing on smaller screens */
|
gap: 20px; /* Smaller gap for better spacing */
|
||||||
gap: 15px; /* Reduce gap for smaller screens */
|
padding: 10px;
|
||||||
height: auto; /* Allow the height to adjust for mobile screens */
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.textarea-container,
|
/* Adjust the text section to fit full width */
|
||||||
.video {
|
.text-section,
|
||||||
width: 100%; /* Full width for smaller screens */
|
.video-section {
|
||||||
max-width: none;
|
width: 100%; /* Full width for mobile */
|
||||||
}
|
}
|
||||||
|
|
||||||
#translateWordsBtn, #translateLettersBtn {
|
/* Adjust textarea for mobile */
|
||||||
font-size: 14px; /* Reduce button font size for smaller screens */
|
textarea {
|
||||||
padding: 8px 15px; /* Reduce button padding for smaller screens */
|
height: 120px; /* Reduce height for better fit */
|
||||||
|
font-size: 14px; /* Slightly smaller font for compact display */
|
||||||
|
padding: 10px; /* Adjust padding for mobile */
|
||||||
}
|
}
|
||||||
|
|
||||||
#inputText {
|
/* Tab buttons for mobile */
|
||||||
height: 150px; /* Reduce height for the text area */
|
.tabs {
|
||||||
|
flex-direction: column; /* Stack tabs vertically */
|
||||||
|
gap: 5px; /* Smaller gap between tabs */
|
||||||
}
|
}
|
||||||
|
|
||||||
#startBtn, #translateBtn {
|
.tab {
|
||||||
font-size: 16px; /* Reduce button font size for smaller screens */
|
font-size: 14px; /* Reduce font size for mobile */
|
||||||
padding: 10px; /* Reduce button padding */
|
padding: 10px;
|
||||||
}
|
}
|
||||||
|
|
||||||
#prevBtn, #nextBtn {
|
/* Translate button */
|
||||||
width: 40px; /* Reduce button size for smaller screens */
|
.translate-btn {
|
||||||
height: 40px; /* Reduce button size for smaller screens */
|
padding: 12px; /* Reduce padding */
|
||||||
|
font-size: 16px; /* Slightly smaller font size */
|
||||||
}
|
}
|
||||||
|
|
||||||
#prevBtn {
|
/* Video section adjustments */
|
||||||
left: -20px; /* Adjust button position for smaller screens */
|
video {
|
||||||
|
width: 100%; /* Full width video for mobile */
|
||||||
}
|
}
|
||||||
|
|
||||||
#nextBtn {
|
.video-section video {
|
||||||
right: -20px; /* Adjust button position for smaller screens */
|
max-height: 400px; /* Limit the height to 500px for smaller screens */
|
||||||
}
|
}
|
||||||
|
|
||||||
h1 {
|
.video-controls {
|
||||||
font-size: 24px; /* Decrease heading font size for mobile devices */
|
justify-content: space-around; /* Adjust button layout */
|
||||||
}
|
}
|
||||||
|
|
||||||
#themeToggleBtn {
|
.nav-btn {
|
||||||
font-size: 20px; /* Decrease theme toggle button size for mobile */
|
font-size: 18px; /* Reduce size slightly */
|
||||||
|
padding: 8px 10px; /* Adjust padding for smaller buttons */
|
||||||
}
|
}
|
||||||
}
|
|
||||||
|
/* Current display text */
|
||||||
|
.current-display {
|
||||||
|
font-size: 18px; /* Slightly smaller text for mobile */
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Footer adjustments */
|
||||||
|
footer {
|
||||||
|
padding: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer-note {
|
||||||
|
font-size: 12px; /* Smaller font for compact display */
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user