lucasw89/jellyfin-plugin-media-bar
1
0 Fork 0
mirror of https://github.com/IAmParadox27/jellyfin-plugin-media-bar.git synced 2026-11-11 08:53:36 +01:00
Code Issues Packages Projects Releases Wiki Activity

Update slideshowpure.css

Browse Source
This commit is contained in:
M0RPH3US authored and GitHub committed 2025-03-16 18:22:06 +05:30
1 parent 73d7ed8809
commit 70bc2b8346
1 file changed
+114 -224
Download Patch File Download Diff File Expand all files Collapse all files
slideshowpure.css
+114 -224
View File
@@ -38,6 +38,17 @@
}
}
.backdrop.low-quality {
filter: blur(5px);
transform: scale(1.05);
transition: filter 0.3s ease, transform 0.3s ease;
}
.backdrop.high-quality {
filter: blur(0);
transform: scale(1);
}
/*Mobiles S*/
@media only screen and (max-width: 320px) and (orientation: portrait) {
.backdrop,
@@ -81,12 +92,7 @@
.fade-out {
opacity: 0 !important;
}
/*#homeTab {
top: -5em;
padding-bottom: 5em !important;
position: relative;
padding-bottom: calc(env(safe-area-inset-bottom) + 5em) !important;
}*/
.sections.homeSectionsContainer {
position: relative;
z-index: 8;
@@ -97,7 +103,7 @@
bottom: 20%;
left: 50%;
transform: translateX(-50%) scale(0.6);
z-index: 2;
z-index: 3;
display: flex;
gap: 5px;
background-color: #ffffff13;
@@ -115,7 +121,8 @@
margin: 0 5px;
background-color: #cecece;
border-radius: 50%;
transition: background-color 0.3s;
transition: background-color 0.3s ease-in-out, width 0.5s ease-in-out,
height 0.5s ease-in-out, border-radius 0.5s ease-in-out;
}
.dot.active {
width: 27px;
@@ -130,7 +137,6 @@
overflow: hidden;
margin: 0;
padding: 0%;
/*top: -3.5em;*/
}
.slide {
transition: opacity 0.5s ease-in-out;
@@ -152,24 +158,21 @@
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
max-height: 50%;
max-width: 70%;
width: auto;
z-index: 4;
filter: brightness(1.5);
}
.featured-logo-blur {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
max-height: 50%;
max-width: 70%;
width: auto;
scale: 1.01;
filter: blur(1.1rem);
z-index: 3;
transition: filter 0.3s ease;
}
.logo.low-quality {
filter: brightness(1.5) blur(5px);
}
.logo.high-quality {
filter: brightness(1.5);
}
.backdrop {
position: absolute;
@@ -360,22 +363,10 @@
cursor: pointer;
color: #fff;
z-index: 3;
display: none;
justify-content: center;
align-items: center;
}
.arrow::before {
content: "";
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 40px;
height: 40px;
background-color: rgb(12 110 162 / 0.7);
border-radius: 50%;
z-index: -1;
}
.left-arrow {
left: 20px;
font-size: 12px;
@@ -388,7 +379,7 @@
position: absolute;
top: calc(50% + 11em);
right: 3%;
z-index: 2;
z-index: 3;
display: flex;
gap: 5px;
background-color: #ffffff3d;
@@ -407,7 +398,8 @@
margin: 0 5px;
background-color: #cecece;
border-radius: 50%;
transition: background-color 0.3s;
transition: background-color 0.3s ease-in-out, width 0.5s ease-in-out,
height 0.5s ease-in-out, border-radius 0.5s ease-in-out;
}
.dot.active {
width: 22px;
@@ -743,12 +735,7 @@
.fade-out {
opacity: 0 !important;
}
/*#homeTab {
top: -5em;
padding-bottom: 5em !important;
position: relative;
padding-bottom: calc(env(safe-area-inset-bottom) + 5em) !important;
}*/
.sections.homeSectionsContainer {
position: relative;
z-index: 8;
@@ -759,7 +746,7 @@
bottom: 20%;
left: 50%;
transform: translateX(-50%) scale(0.6);
z-index: 2;
z-index: 3;
display: flex;
gap: 5px;
background-color: #ffffff13;
@@ -777,7 +764,8 @@
margin: 0 5px;
background-color: #cecece;
border-radius: 50%;
transition: background-color 0.3s;
transition: background-color 0.3s ease-in-out, width 0.5s ease-in-out,
height 0.5s ease-in-out, border-radius 0.5s ease-in-out;
}
.dot.active {
width: 27px;
@@ -792,7 +780,6 @@
overflow: hidden;
margin: 0;
padding: 0%;
/*top: -3.5em;*/
}
.slide {
transition: opacity 0.5s ease-in-out;
@@ -810,28 +797,26 @@
.slide:focus {
outline: #fff solid 2px;
}
.logo {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
max-height: 50%;
max-width: 70%;
width: auto;
z-index: 4;
filter: brightness(1.5);
}
.featured-logo-blur {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
max-height: 50%;
max-width: 70%;
width: auto;
scale: 1.01;
filter: blur(1.1rem);
z-index: 3;
transition: filter 0.3s ease;
}
.logo.low-quality {
filter: brightness(1.5) blur(5px);
}
.logo.high-quality {
filter: brightness(1.5);
}
.backdrop {
position: absolute;
@@ -1022,22 +1007,9 @@
cursor: pointer;
color: #fff;
z-index: 3;
display: none;
justify-content: center;
align-items: center;
}
.arrow::before {
content: "";
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 40px;
height: 40px;
background-color: rgb(12 110 162 / 0.7);
border-radius: 50%;
z-index: -1;
}
.left-arrow {
left: 20px;
font-size: 12px;
@@ -1050,7 +1022,7 @@
position: absolute;
top: calc(50% + 22vh);
right: 3%;
z-index: 2;
z-index: 3;
display: flex;
gap: 5px;
background-color: #ffffff3d;
@@ -1069,7 +1041,8 @@
margin: 0 5px;
background-color: #cecece;
border-radius: 50%;
transition: background-color 0.3s;
transition: background-color 0.3s ease-in-out, width 0.5s ease-in-out,
height 0.5s ease-in-out, border-radius 0.5s ease-in-out;
}
.dot.active {
width: 22px;
@@ -1406,12 +1379,7 @@
.fade-out {
opacity: 0 !important;
}
/*#homeTab {
top: -5em;
padding-bottom: 5em !important;
position: relative;
padding-bottom: calc(env(safe-area-inset-bottom) + 5em) !important;
}*/
.sections.homeSectionsContainer {
position: relative;
z-index: 8;
@@ -1422,7 +1390,7 @@
bottom: 20%;
left: 50%;
transform: translateX(-50%) scale(0.6);
z-index: 2;
z-index: 3;
display: flex;
gap: 5px;
background-color: #ffffff13;
@@ -1440,7 +1408,8 @@
margin: 0 5px;
background-color: #cecece;
border-radius: 50%;
transition: background-color 0.3s;
transition: background-color 0.3s ease-in-out, width 0.5s ease-in-out,
height 0.5s ease-in-out, border-radius 0.5s ease-in-out;
}
.dot.active {
width: 27px;
@@ -1455,7 +1424,6 @@
overflow: hidden;
margin: 0;
padding: 0%;
/*top: -3.5em;*/
}
.slide {
transition: opacity 0.5s ease-in-out;
@@ -1473,28 +1441,26 @@
.slide:focus {
outline: #fff solid 2px;
}
.logo {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
max-height: 50%;
max-width: 70%;
width: auto;
z-index: 4;
filter: brightness(1.5);
}
.featured-logo-blur {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
max-height: 50%;
max-width: 70%;
width: auto;
scale: 1.01;
filter: blur(1.1rem);
z-index: 3;
transition: filter 0.3s ease;
}
.logo.low-quality {
filter: brightness(1.5) blur(5px);
}
.logo.high-quality {
filter: brightness(1.5);
}
.backdrop {
position: absolute;
@@ -1685,22 +1651,9 @@
cursor: pointer;
color: #fff;
z-index: 3;
display: none;
justify-content: center;
align-items: center;
}
.arrow::before {
content: "";
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 40px;
height: 40px;
background-color: rgb(12 110 162 / 0.7);
border-radius: 50%;
z-index: -1;
}
.left-arrow {
left: 20px;
font-size: 12px;
@@ -1713,7 +1666,7 @@
position: absolute;
top: calc(50% + 11em);
right: 3%;
z-index: 2;
z-index: 3;
display: flex;
gap: 5px;
background-color: #ffffff3d;
@@ -1732,7 +1685,8 @@
margin: 0 5px;
background-color: #cecece;
border-radius: 50%;
transition: background-color 0.3s;
transition: background-color 0.3s ease-in-out, width 0.5s ease-in-out,
height 0.5s ease-in-out, border-radius 0.5s ease-in-out;
}
.dot.active {
width: 22px;
@@ -2078,7 +2032,7 @@
bottom: 24%;
left: 50%;
transform: translateX(-50%) scale(0.6);
z-index: 2;
z-index: 3;
display: flex;
gap: 5px;
background-color: #ffffff13;
@@ -2096,7 +2050,8 @@
margin: 0 5px;
background-color: #cecece;
border-radius: 50%;
transition: background-color 0.3s;
transition: background-color 0.3s ease-in-out, width 0.5s ease-in-out,
height 0.5s ease-in-out, border-radius 0.5s ease-in-out;
}
.dot.active {
width: 27px;
@@ -2128,28 +2083,26 @@
.slide:focus {
outline: #fff solid 2px;
}
.logo {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
max-height: 50%;
max-width: 70%;
width: auto;
z-index: 4;
filter: brightness(1.5);
}
.featured-logo-blur {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
max-height: 50%;
max-width: 70%;
width: auto;
scale: 1.01;
filter: blur(1.1rem);
z-index: 3;
transition: filter 0.3s ease;
}
.logo.low-quality {
filter: brightness(1.5) blur(5px);
}
.logo.high-quality {
filter: brightness(1.5);
}
.backdrop {
position: absolute;
@@ -2340,22 +2293,9 @@
cursor: pointer;
color: #fff;
z-index: 3;
display: none;
justify-content: center;
align-items: center;
}
.arrow::before {
content: "";
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 40px;
height: 40px;
background-color: rgb(12 110 162 / 0.7);
border-radius: 50%;
z-index: -1;
}
.left-arrow {
left: 20px;
font-size: 12px;
@@ -2368,7 +2308,7 @@
position: absolute;
top: calc(50% + 34vh);
right: 3%;
z-index: 2;
z-index: 3;
display: flex;
gap: 5px;
background-color: #ffffff3d;
@@ -2387,7 +2327,8 @@
margin: 0 5px;
background-color: #cecece;
border-radius: 50%;
transition: background-color 0.3s;
transition: background-color 0.3s ease-in-out, width 0.5s ease-in-out,
height 0.5s ease-in-out, border-radius 0.5s ease-in-out;
}
.dot.active {
width: 22px;
@@ -2680,7 +2621,6 @@
align-items: center;
}
}
/*upwards changed lanscape width*/
@media only screen and (min-width: 769px) and (max-width: 1024px) and (orientation: portrait) {
.backdrop,
@@ -2724,23 +2664,18 @@
.fade-out {
opacity: 0 !important;
}
/*#homeTab {
top: -5em;
padding-bottom: 5em !important;
position: relative;
padding-bottom: calc(env(safe-area-inset-bottom) + 5em) !important;
}*/
.sections.homeSectionsContainer {
position: relative;
z-index: 8;
top: 73vh;
}
.dots-container {
position: absolute;
bottom: 20%;
left: 50%;
transform: translateX(-50%) scale(0.6);
z-index: 2;
z-index: 3;
display: flex;
gap: 5px;
background-color: #ffffff13;
@@ -2751,6 +2686,7 @@
height: 22px;
transition: opacity 0.5s ease-in-out;
}
.dot {
display: inline-block;
width: 9px;
@@ -2758,14 +2694,17 @@
margin: 0 5px;
background-color: #cecece;
border-radius: 50%;
transition: background-color 0.3s;
transition: background-color 0.3s ease-in-out, width 0.5s ease-in-out,
height 0.5s ease-in-out, border-radius 0.5s ease-in-out;
}
.dot.active {
width: 27px;
height: 12px;
background-color: #fff;
border-radius: 10px;
}
#slides-container {
position: relative;
width: 100vw;
@@ -2790,28 +2729,26 @@
.slide:focus {
outline: #fff solid 2px;
}
.logo {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
max-height: 50%;
max-width: 70%;
width: auto;
z-index: 4;
filter: brightness(1.5);
}
.featured-logo-blur {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
max-height: 50%;
max-width: 70%;
width: auto;
scale: 1.01;
filter: blur(1.1rem);
z-index: 3;
transition: filter 0.3s ease;
}
.logo.low-quality {
filter: brightness(1.5) blur(5px);
}
.logo.high-quality {
filter: brightness(1.5);
}
.backdrop {
position: absolute;
@@ -3002,22 +2939,9 @@
cursor: pointer;
color: #fff;
z-index: 3;
display: none;
justify-content: center;
align-items: center;
}
.arrow::before {
content: "";
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 40px;
height: 40px;
background-color: rgb(12 110 162 / 0.7);
border-radius: 50%;
z-index: -1;
}
.left-arrow {
left: 20px;
font-size: 12px;
@@ -3030,7 +2954,7 @@
position: absolute;
top: calc(50% + 9em);
right: 3%;
z-index: 2;
z-index: 3;
display: flex;
gap: 5px;
background-color: #ffffff3d;
@@ -3049,7 +2973,8 @@
margin: 0 5px;
background-color: #cecece;
border-radius: 50%;
transition: background-color 0.3s;
transition: background-color 0.3s ease-in-out, width 0.5s ease-in-out,
height 0.5s ease-in-out, border-radius 0.5s ease-in-out;
}
.dot.active {
width: 22px;
@@ -3368,18 +3293,6 @@
justify-content: center;
align-items: center;
}
.arrow::before {
content: "";
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 40px;
height: 40px;
background-color: rgb(12 110 162 / 0.7);
border-radius: 50%;
z-index: -1;
}
.left-arrow {
left: 20px;
font-size: 12px;
@@ -3392,7 +3305,7 @@
position: absolute;
top: calc(50% + 21vh);
right: 3%;
z-index: 2;
z-index: 3;
display: flex;
gap: 5px;
background-color: #ffffff3d;
@@ -3411,7 +3324,8 @@
margin: 0 5px;
background-color: #cecece;
border-radius: 50%;
transition: background-color 0.3s;
transition: background-color 0.3s ease-in-out, width 0.5s ease-in-out,
height 0.5s ease-in-out, border-radius 0.5s ease-in-out;
}
.dot.active {
width: 22px;
@@ -3729,18 +3643,6 @@
justify-content: center;
align-items: center;
}
.arrow::before {
content: "";
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 40px;
height: 40px;
background-color: rgb(12 110 162 / 0.7);
border-radius: 50%;
z-index: -1;
}
.left-arrow {
left: 20px;
font-size: 12px;
@@ -3749,11 +3651,12 @@
right: 20px;
font-size: 12px;
}
.dots-container {
position: absolute;
top: calc(50% + 20vh);
right: 3%;
z-index: 2;
z-index: 3;
display: flex;
gap: 5px;
background-color: #ffffff3d;
@@ -3765,6 +3668,7 @@
transition: opacity 0.5s ease-in-out;
scale: 0.8;
}
.dot {
display: inline-block;
width: 9px;
@@ -3772,14 +3676,17 @@
margin: 0 5px;
background-color: #cecece;
border-radius: 50%;
transition: background-color 0.3s;
transition: background-color 0.3s ease-in-out, width 0.5s ease-in-out,
height 0.5s ease-in-out, border-radius 0.5s ease-in-out;
}
.dot.active {
width: 22px;
height: 12px;
background-color: #fff;
border-radius: 6px;
}
body {
margin: 0;
padding: 0;
@@ -3803,7 +3710,6 @@
top: 65vh;
}
.slide {
transition: opacity 0.5s ease-in-out;
position: absolute;
top: 0;
left: 0;
@@ -3811,13 +3717,7 @@
height: 100%;
display: block;
}
.slide.active {
opacity: 1;
display: block;
}
.slide:focus {
outline: #fff solid 2px;
}
.backdrop-container {
position: relative;
top: -40%;
@@ -4090,18 +3990,7 @@
justify-content: center;
align-items: center;
}
.arrow::before {
content: "";
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 40px;
height: 40px;
background-color: rgb(12 110 162 / 0.7);
border-radius: 50%;
z-index: -1;
}
.left-arrow {
left: 20px;
font-size: 12px;
@@ -4114,7 +4003,7 @@
position: absolute;
top: calc(50% + 21vh);
right: 3%;
z-index: 2;
z-index: 3;
display: flex;
gap: 5px;
background-color: #ffffff3d;
@@ -4133,7 +4022,8 @@
margin: 0 5px;
background-color: #cecece;
border-radius: 50%;
transition: background-color 0.3s;
transition: background-color 0.3s ease-in-out, width 0.5s ease-in-out,
height 0.5s ease-in-out, border-radius 0.5s ease-in-out;
}
.dot.active {
width: 22px;
@@ -4427,4 +4317,4 @@
display: flex;
align-items: center;
}
}
}