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