CodeDevMLH/SpotlightTrailer
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

add back button and small ui fixes

Browse Source
This commit is contained in:
MLH
2024-11-14 01:24:32 +01:00
parent 6c0cbb0c75
commit db96e05164
2 changed files with 75 additions and 95 deletions
Download Patch File Download Diff File Expand all files Collapse all files

144
styles.css
View File

@ -79,29 +79,61 @@ body {
text-shadow: 1px 1px 4px rgba(0, 0, 0, 1);
}
.details-button {
display: none;
}
/* MARK: modified
css for back and skip button
*/
.back-button,
.skip-button {
position: absolute;
right: 0.25em;
color: #D3D3D3;
cursor: pointer;
z-index: 10;
font-family: "Titillium Web", sans-serif;
text-shadow: 1px 1px 4px rgba(0, 0, 0, 1);
font-style: normal;
font-weight: 400;
letter-spacing: normal;
line-height: 1;
text-transform: none;
white-space: nowrap;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
-moz-osx-font-smoothing: grayscale;
-webkit-font-feature-settings: "liga";
font-feature-settings: "liga";
border-radius: 50%;
box-sizing: border-box;
opacity: 0.5;
transition: opacity 0.3s ease, background 0.3s ease;
font-size: 1.62em;
width: 1.7em;
height: 1.7em;
display: flex;
align-items: center;
justify-content: center;
}
.back-button:hover,
.skip-button:hover {
background: #ffffff70;
opacity: 1;
}
.skip-button {
right: 0.5em;
top: 50%;
transform: translateY(-50%);
}
.back-button {
position: absolute;
right: 2em;
color: #D3D3D3;
cursor: pointer;
z-index: 10;
font-family: "Titillium Web", sans-serif;
text-shadow: 1px 1px 4px rgba(0, 0, 0, 1);
display: none;
}
.details-button {
display: none;
left: 0.5em;
top: 50%;
transform: translateY(-50%);
/* display: none; */ /* Optional, if activated later */
}
.material-icons {
@ -418,13 +450,6 @@ body {
opacity: 0.98;
}
.skip-button {
opacity: 1 !important;
font-size: 0.9em;
top: 1.1em;
color: #fff;
}
.genres {
bottom: 4em;
left: unset !important;
@ -542,12 +567,12 @@ body {
@media (max-width:1000px) and (orientation:portrait) {
.back-button {
right: 58vw;
left: 0em;
}
.skip-button {
right: 0em;
top: 50% !important;
/*top: 50% !important;*/
}
.genres {
@ -577,12 +602,12 @@ body {
}
.back-button {
right: 70vw;
left: 0em;
}
.skip-button {
right: 0em;
top: 50% !important;
/*top: 50% !important;*/
}
.genres {
@ -639,68 +664,6 @@ body {
font-size: 1em;
}
.back-button {
font-size: 1.67em;
top: 0.5em;
opacity: 0.5;
transition: opacity 0.3s ease, background 0.3s ease;
padding-left: 0.1em;
padding-right: 0.1em;
padding-top: 0.1em;
border-radius: 50%;
box-sizing: border-box;
font-style: normal;
font-weight: 400;
letter-spacing: normal;
line-height: 1;
text-transform: none;
word-wrap: normal;
direction: inherit;
white-space: nowrap;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
-moz-osx-font-smoothing: grayscale;
-webkit-font-feature-settings: "liga";
font-feature-settings: "liga";
}
.back-button:hover {
background: #ffffff70;
opacity: 1;
}
.skip-button {
font-size: 1.62em;
top: 50vh;
transform: translateY(-50%);
opacity: 0.5;
transition: opacity 0.3s ease, background 0.3s ease;
padding-left: 0.3em;
padding-right: 0.3em;
padding-top: 0.3em;
padding-bottom: 0.22em;
border-radius: 50%;
box-sizing: border-box;
font-style: normal;
font-weight: 400;
letter-spacing: normal;
line-height: 1;
text-transform: none;
word-wrap: normal;
direction: inherit;
white-space: nowrap;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
-moz-osx-font-smoothing: grayscale;
-webkit-font-feature-settings: "liga";
font-feature-settings: "liga";
}
.skip-button:hover {
background: #ffffff70;
opacity: 1;
}
.text-container::before {
content: '';
z-index: 5;
@ -916,11 +879,15 @@ body {
/* .backdrop {}
.age-rating {}
*/
.back-button {
top: 38vh;
}
.skip-button {
top: 38vh;
}
/*
.video-container {}
.text-container::before {}
@ -938,6 +905,7 @@ body {
.slide {
font-size: 200%;
}
/*
.age-rating {}