Update Script_Speech_recognition/style.css

This commit is contained in:
Mário Panenko 2024-11-18 17:56:56 +00:00
parent c86de14ba7
commit 52d26df979

View File

@ -19,7 +19,7 @@ h1 {
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: flex-start; /* Align items to the top */
padding: 20px; padding: 20px;
gap: 20px; /* Maintain a comfortable space between elements */ gap: 40px; /* Maintain a comfortable space between elements */
flex-wrap: wrap; /* Allow wrapping for responsive layouts */ flex-wrap: wrap; /* Allow wrapping for responsive layouts */
max-width: 1200px; /* Set max-width to keep layout centered and compact */ max-width: 1200px; /* Set max-width to keep layout centered and compact */
margin: 0 auto; /* Center the container itself */ margin: 0 auto; /* Center the container itself */
@ -179,7 +179,7 @@ textarea.dark-mode:focus {
object-fit: cover; /* Ensure the video fits its container */ object-fit: cover; /* Ensure the video fits its container */
} }
/* Navigation button styles */ /* Updated Navigation button styles */
#prevBtn, #nextBtn { #prevBtn, #nextBtn {
position: absolute; position: absolute;
top: 50%; top: 50%;
@ -189,28 +189,27 @@ textarea.dark-mode:focus {
color: white; color: white;
border: none; border: none;
border-radius: 50%; border-radius: 50%;
width: 40px; width: 50px;
height: 40px; height: 50px;
cursor: pointer; cursor: pointer;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15); box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15);
transition: background-color 0.3s ease, transform 0.2s; transition: background-color 0.3s ease;
z-index: 10; /* Ensure buttons are above other elements */ z-index: 10; /* Ensure buttons are above other elements */
} }
#prevBtn:hover, #nextBtn:hover { #prevBtn:hover, #nextBtn:hover {
background-color: #357ae8; background-color: #357ae8;
transform: scale(1.1);
} }
#prevBtn { #prevBtn {
left: -20px; left: -30px; /* Adjust button position for better appearance */
} }
#nextBtn { #nextBtn {
right: -20px; right: -30px; /* Adjust button position for better appearance */
} }
/* Style for the start button */ /* Style for the start button */