mirror of
https://github.com/IAmParadox27/jellyfin-plugin-media-bar.git
synced 2026-11-09 08:34:16 +01:00
feat: implement new styling for elements
Adds styling for new rating elements, following similar standards for other parts of jellyfin
This commit is contained in:
1 file changed
+36
-41
+36
-41
@@ -5,7 +5,8 @@
|
||||
@import url(https://fonts.googleapis.com/css2?family=Archivo+Narrow:ital,wght@0,400..700;1,400..700&display=swap);
|
||||
|
||||
.backdrop.animate {
|
||||
animation: frostedGlass 1.2s cubic-bezier(0.4, 0, 0.2, 1),
|
||||
animation:
|
||||
frostedGlass 1.2s cubic-bezier(0.4, 0, 0.2, 1),
|
||||
kenBurnsZoomIn 10s ease-out forwards;
|
||||
}
|
||||
|
||||
@@ -117,13 +118,17 @@
|
||||
.backdrop.low-quality {
|
||||
filter: blur(0.5px);
|
||||
transform: scale(1.01);
|
||||
transition: filter 0.3s ease-in-out, transform 0.3s ease-in-out;
|
||||
transition:
|
||||
filter 0.3s ease-in-out,
|
||||
transform 0.3s ease-in-out;
|
||||
}
|
||||
|
||||
.backdrop.high-quality {
|
||||
filter: blur(0);
|
||||
transform: scale(1);
|
||||
transition: filter 0.3s ease-in-out, transform 0.3s ease-in-out;
|
||||
transition:
|
||||
filter 0.3s ease-in-out,
|
||||
transform 0.3s ease-in-out;
|
||||
}
|
||||
|
||||
.logo.low-quality {
|
||||
@@ -175,19 +180,19 @@
|
||||
}
|
||||
|
||||
.pause-button {
|
||||
position: absolute;
|
||||
bottom: 10vh;
|
||||
right: 20px;
|
||||
font-size: 24px;
|
||||
cursor: pointer;
|
||||
color: white;
|
||||
z-index: 10;
|
||||
opacity: 0.3;
|
||||
transition: opacity 0.3s ease;
|
||||
position: absolute;
|
||||
bottom: 10vh;
|
||||
right: 20px;
|
||||
font-size: 24px;
|
||||
cursor: pointer;
|
||||
color: white;
|
||||
z-index: 10;
|
||||
opacity: 0.3;
|
||||
transition: opacity 0.3s ease;
|
||||
}
|
||||
|
||||
.pause-button:hover {
|
||||
opacity: 0.9;
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
.dots-container {
|
||||
@@ -211,7 +216,8 @@
|
||||
background-color: #cecece99;
|
||||
border-radius: 50%;
|
||||
transform-origin: center;
|
||||
transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1),
|
||||
transition:
|
||||
transform 0.5s cubic-bezier(0.4, 0, 0.2, 1),
|
||||
background-color 0.5s ease-in-out;
|
||||
}
|
||||
|
||||
@@ -406,6 +412,7 @@
|
||||
font-weight: 700;
|
||||
gap: 6px;
|
||||
-webkit-tap-highlight-color: #fff0;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.detail-button {
|
||||
@@ -487,7 +494,7 @@
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.rating-value {
|
||||
.misc-info {
|
||||
font-family: "Archivo Narrow", sans-serif;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@@ -507,37 +514,25 @@
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.tomato-rating {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-left: 0;
|
||||
/* Star Icon Styling */
|
||||
.community-rating-star {
|
||||
color: #f2b01e;
|
||||
font-size: 1.4em;
|
||||
height: auto !important;
|
||||
margin-right: 0.125em;
|
||||
width: auto !important;
|
||||
}
|
||||
|
||||
.imdb-logo {
|
||||
margin-right: 1px;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-content: center;
|
||||
justify-content: center;
|
||||
/* Rotten Tomatoes Critic Rating Styles */
|
||||
|
||||
.critic-rating {
|
||||
-webkit-align-items: center;
|
||||
align-items: center;
|
||||
display: flex;
|
||||
min-height: 1.2em;
|
||||
}
|
||||
|
||||
.tomato-logo {
|
||||
flex-wrap: wrap;
|
||||
align-content: center;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin-left: 5px;
|
||||
}
|
||||
|
||||
.critic-logo {
|
||||
margin-right: 5px;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-content: center;
|
||||
justify-content: center;
|
||||
}
|
||||
/**/
|
||||
|
||||
.age-rating {
|
||||
display: flex;
|
||||
|
||||
Reference in new issue
Block a user