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

fixed style

Browse Source
This commit is contained in:
Mário Panenko 2024-11-04 21:12:07 +00:00
parent 9f7511f8aa
commit 835779bd6f
1 changed files with 86 additions and 41 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

125
Script_Speech_recognition/style.css
View File

@ -16,27 +16,12 @@ h1 {
.container { .container {
display: flex; display: flex;
flex-wrap: wrap;
gap: 5%;
justify-content: center; justify-content: center;
margin: 20px; padding: 20px;
} }
textarea {
width: 45%;
height: 200px;
margin: 0 10px;
padding: 10px;
background-color: #fff;
border: 2px solid #ccc;
border-radius: 4px;
color: #333;
font-size: 16px;
resize: none;
}
textarea:focus {
border-color: #4285f4;
outline: none;
}
#startBtn, #translateLettersBtn, #translateWordsBtn { #startBtn, #translateLettersBtn, #translateWordsBtn {
display: block; display: block;
@ -102,6 +87,19 @@ textarea.dark-mode:focus {
color: #cf6679; 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.dark-mode #translationVideo{
border: 0px solid #333;
}
/* Style for the theme toggle button (icon) */ /* Style for the theme toggle button (icon) */
#themeToggleBtn { #themeToggleBtn {
position: fixed; position: fixed;
@ -119,31 +117,42 @@ textarea.dark-mode:focus {
color: #f4b400; /* Add a hover color effect */ color: #f4b400; /* Add a hover color effect */
} }
/*VIDEOPREHRAVAC*/
.video { .video {
position: relative; position: relative;
width: 45%; width: 45%; /* Default width */
height: 200px; max-width: 500px;
max-height: 300px; aspect-ratio: 16/9; /* Keep a responsive aspect ratio */
margin: 0 10px;
padding: 10px; padding: 10px;
background-color: #fff; background-color: #ffffff;
border: 2px solid #ccc; border: 2px solid #e0e0e0;
border-radius: 4px; border-radius: 8px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
display: flex; display: flex;
align-items: center; flex-direction: column; /* Stack items vertically */
justify-content: center; align-items: center; /* Center content */
justify-content: flex-start; /* Align items to the start */
transition: transform 0.3s ease;
} }
.video h2 {
color: #4285f4; /* Optional: change heading color */
font-size: 24px; /* Optional: adjust font size */
text-align: center; /* Center align the text */
}
.video:hover {
transform: scale(1.02); /* Slight zoom on hover */
}
/* Styling for video element inside .video */
.video video { .video video {
width: 100%; width: 100%;
height: 100%; height: 100%;
border-radius: 4px; border-radius: 4px;
background-color: #fff;
border: none; border: none;
} }
/* Styling for navigation buttons */
#prevBtn, #nextBtn { #prevBtn, #nextBtn {
position: absolute; position: absolute;
top: 50%; top: 50%;
@ -159,18 +168,54 @@ textarea.dark-mode:focus {
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);
transition: background-color 0.3s ease, transform 0.2s;
#prevBtn {
margin-left: 80px;
}
#nextBtn {
margin-right: 80px;
} }
#prevBtn:hover, #nextBtn:hover { #prevBtn:hover, #nextBtn:hover {
background-color: #357ae8; background-color: #357ae8;
transform: scale(1.1); /* Small zoom on hover */
}
#prevBtn {
left: -20px;
}
#nextBtn {
right: -20px;
}
/* Styling for textarea */
textarea {
width: 45%; /* Match video width */
max-width: 500px;
min-height: 200px;
padding: 15px;
background-color: #f9f9f9;
border: 2px solid #e0e0e0;
border-radius: 8px;
color: #333;
font-size: 16px;
resize: none;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
textarea:focus {
border-color: #4285f4;
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
outline: none;
}
/* Responsive layout */
@media (max-width: 768px) {
.container {
align-items: center;
gap: 5%;
}
.video, textarea {
width: 90%;
max-width: 90%;
margin-bottom: 10px;
}
} }