CaZzzer/anistream
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

WIP: minor css tweaks

Browse Source
This commit is contained in:
Yuri Tatishchev
2025-06-16 21:31:12 -07:00
parent 9a09c5c612
commit 175d73f98d
2 changed files with 25 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

36
src/main.css
View File

@@ -1,14 +1,25 @@
@import url(https://fonts.googleapis.com/css?family=Roboto:300); @import url(https://fonts.googleapis.com/css?family=Roboto:300);
@import url(https://fonts.googleapis.com/css?family=Noto+Sans:400,700); @import url(https://fonts.googleapis.com/css?family=Noto+Sans:400,700);
*,
*::before,
*::after {
box-sizing: border-box;
}
body { body {
height: 100vh;
margin: 0;
padding: 2rem;
background-color: gray; background-color: gray;
font-family: "Roboto", sans-serif; font-family: "Roboto", sans-serif;
} }
.container { .container {
max-width: 800px; max-height: 100vh;
margin: 0 auto; display: flex;
flex-direction: column;
align-items: center;
} }
header { header {
@@ -17,19 +28,19 @@ header {
} }
.video-wrapper { .video-wrapper {
margin-top: 20px; /*position: relative;*/
position: relative; /*width: 100%;*/
width: 100%; /*padding-bottom: 56.25%;*/
padding-bottom: 56.25%;
/* 16:9 aspect ratio for responsive video */ /* 16:9 aspect ratio for responsive video */
} }
video { video {
width: 100%; /*height:;*/
height: 100%; max-width: 100%;
position: absolute; /*max-height: 400px;*/
top: 0; /*position: absolute;*/
left: 0; /*top: 0;*/
/*left: 0;*/
border-radius: 10px; border-radius: 10px;
border: 2px solid black; border: 2px solid black;
} }
@@ -43,13 +54,14 @@ video {
} }
.subtitle-controls label { .subtitle-controls label {
width: 400px;
font-size: 1rem; font-size: 1rem;
margin-bottom: 5px; margin-bottom: 5px;
} }
#subtitle-size { #subtitle-size {
width: 80%; width: 80%;
max-width: 300px; max-width: 400px;
} }
::cue { ::cue {

2
src/main.html
View File

@@ -22,7 +22,7 @@
</div> </div>
<div class="subtitle-controls"> <div class="subtitle-controls">
<label for="subtitle-size">Subtitle Size: <span id="size-value">1.25em</span></label> <label for="subtitle-size">Subtitle Size: <span id="size-value">1.25em</span></label>
<input type="range" id="subtitle-size" min="0.8" max="2.5" step="0.1" value="1.25"> <input type="range" id="subtitle-size" min="0.8" max="2.5" step="0.05" value="1.25">
</div> </div>
</div> </div>
</body> </body>