Creepso/stremio-web
1
0
Fork 0
mirror of https://github.com/Stremio/stremio-web.git synced 2026-03-11 21:27:05 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

refactor: style MetaDetails

Browse source
This commit is contained in:
Tim 2023-07-04 17:55:16 +02:00
parent c12b27edd1
commit 322fdc2af8
11 changed files with 112 additions and 84 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
src/App/styles.less
View file

@ -30,9 +30,11 @@
--secondary-background-color: rgba(26, 23, 62, 1);
--tertiary-background-color: rgba(15, 13, 32, 1);
--primary-foreground-color: rgba(255, 255, 255, 1);
--secondary-foreground-color: rgb(12, 11, 17, 1);
--primary-overlay-color: rgba(255, 255, 255, 0.1);
--primary-accent-color: rgb(123, 91, 245);
--secondary-accent-color: rgba(34, 179, 101, 1);
--tertiary-accent-color: rgba(246, 199, 0, 1);
--border-radius: 0.75rem;
}

2
src/routes/MetaDetails/StreamsList/Stream/StreamPlaceholder/styles.less
View file

@ -17,6 +17,7 @@
.addon-name {
width: 5rem;
height: 2rem;
border-radius: var(--border-radius);
background-color: var(--color-placeholder-background);
}
}
@ -27,6 +28,7 @@
.description-container {
height: 1.2rem;
border-radius: var(--border-radius);
background-color: var(--color-placeholder-background);
&:nth-child(1) {

49
src/routes/MetaDetails/StreamsList/Stream/styles.less
View file

@ -11,22 +11,26 @@
.stream-container {
display: flex;
flex-direction: row;
align-items: center;
flex-wrap: wrap;
padding: 0.5rem 1rem;
align-items: center;
padding: 0.5rem;
margin-bottom: 0.5rem;
border-radius: var(--border-radius);
&:hover, &:focus {
background-color: @color-background;
background-color: var(--primary-overlay-color);
}
&:hover, &:focus, &:global(.selected) {
.play-icon {
opacity: 1;
.play-icon-circle-centered-background {
fill: @color-accent4-90;
fill: var(--secondary-accent-color);
}
.play-icon-circle-centered-icon {
fill: @color-surface-light5-90;
fill: var(--primary-foreground-color);
}
}
}
@ -36,19 +40,21 @@
.thumbnail {
display: block;
width: 5rem;
height: 5rem;
object-fit: contain;
width: 8rem;
object-fit: cover;
object-position: center;
opacity: 0.9;
}
.placeholder-icon {
display: block;
width: 5rem;
height: 5rem;
padding: 0.5rem;
color: @color-secondaryvariant1-light3-90;
width: 8rem;
padding: 1rem;
color: var(--primary-foreground-color);
background-color: var(--primary-overlay-color);
opacity: 0.25;
}
.addon-name {
@ -56,49 +62,48 @@
max-height: 3.6em;
font-size: 1.1rem;
text-align: center;
color: @color-surface-light5-90;
color: var(--primary-foreground-color);
}
}
.info-container {
flex: 1;
max-height: 3.6em;
margin: 0.5rem 1rem;
white-space: pre;
color: @color-surface-light5-90;
padding: 0 0.5rem 0 1.5rem;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
color: var(--primary-foreground-color);
}
.play-icon {
flex: none;
width: 3.5rem;
height: 5rem;
opacity: 0;
.play-icon-circle-centered-background {
fill: none;
}
.play-icon-circle-centered-icon {
fill: @color-surface-dark5-90;
fill: var(--primary-foreground-color);
}
}
.progress-bar-container {
flex: 0 0 100%;
background-color: @color-background-light2;
background-color: var(--primary-accent-color);
.progress-bar {
height: 0.5rem;
background-color: @color-primaryvariant1;
background-color: var(--primary-foreground-color);
}
}
}
@media only screen and (max-width: @minimum) {
.stream-container {
&:hover, &focus {
background-color: @color-surface-light5-20;
}
.thumbnail-container, .addon-name-container {
.addon-name {
font-weight: 500;
@ -107,7 +112,7 @@
.play-icon {
.play-icon-circle-centered-icon {
fill: @color-surface-light5-90;
fill: var(--primary-foreground-color);
}
}
}

17
src/routes/MetaDetails/StreamsList/styles.less
View file

@ -37,7 +37,7 @@
flex: none;
font-size: 1.4rem;
text-align: center;
color: @color-secondaryvariant2-light1-90;
color: var(--primary-foreground-color);
}
}
@ -68,6 +68,7 @@
flex: 0 1 auto;
align-self: stretch;
margin-top: 1rem;
padding: 0 1rem;
overflow-y: auto;
}
@ -80,10 +81,12 @@
justify-content: center;
margin: 1rem;
padding: 1.5rem 1rem;
background-color: @color-accent3;
border-radius: var(--border-radius);
background-color: var(--secondary-accent-color);
&:hover, &:focus {
background-color: @color-accent3-light1;
&:hover {
box-shadow: 0 0 0 0.15rem var(--secondary-accent-color) inset;
background-color: transparent;
}
.icon {
@ -91,16 +94,16 @@
width: 2rem;
height: 2rem;
margin-right: 1rem;
color: @color-surface-light5-90;
color: var(--primary-foreground-color);
}
.label {
flex: 0 1 auto;
font-size: 1.5rem;
font-weight: 500;
font-weight: 700;
max-height: 3.6em;
text-align: center;
color: @color-surface-light5-90;
color: var(--primary-foreground-color);
}
}
}

2
src/routes/MetaDetails/VideosList/SeasonsBar/SeasonsBarPlaceholder/styles.less
View file

@ -12,7 +12,7 @@
flex-direction: row;
align-items: center;
width: 6.5rem;
height: 3.5rem;
height: 3rem;
padding: 0.5rem;
&>:first-child {

20
src/routes/MetaDetails/VideosList/SeasonsBar/styles.less
View file

@ -13,6 +13,7 @@
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
padding: 1rem;
overflow: visible;
@ -22,21 +23,16 @@
flex-direction: row;
align-items: center;
width: 6.5rem;
height: 3.5rem;
height: 3rem;
border-radius: 3rem;
padding: 0.5rem;
&:hover, &:focus {
.label {
color: @color-surface-light2-90;
}
.icon {
color: @color-surface-light2-90;
}
background-color: var(--primary-overlay-color);
}
&:focus {
background-color: @color-surface-light5-10;
background-color: var(--primary-foreground-color);
}
&>:first-child {
@ -48,14 +44,14 @@
max-height: 1.2em;
font-weight: 500;
text-align: center;
color: @color-surface-90;
color: var(--primary-foreground-color);
}
.icon {
flex: none;
width: 1.5rem;
height: 1.5rem;
color: @color-surface-90;
color: var(--primary-foreground-color);
}
}
@ -84,7 +80,7 @@
@media only screen and (max-width: @minimum) {
.seasons-bar-container {
padding-top: 0;
height: 6rem;
.seasons-popup-label-container {
.multiselect-menu-container {

1
src/routes/MetaDetails/VideosList/Video/Video.js
View file

@ -110,6 +110,7 @@ const Video = ({ className, id, title, thumbnail, episode, released, upcoming, w
{
watched ?
<div className={styles['watched-container']}>
<Icon className={styles['flag-icon']} name={'eye'} />
<div className={styles['flag-label']}>Watched</div>
</div>
:

2
src/routes/MetaDetails/VideosList/Video/VideoPlaceholder/styles.less
View file

@ -17,11 +17,13 @@
.name-container {
width: 80%;
height: 1.2rem;
border-radius: var(--border-radius);
background: var(--color-placeholder-background);
}
.released-container {
height: 1rem;
border-radius: var(--border-radius);
background: var(--color-placeholder-background);
}
}

84
src/routes/MetaDetails/VideosList/Video/styles.less
View file

@ -15,33 +15,39 @@
display: flex;
flex-direction: row;
flex-wrap: wrap;
padding: 0.5rem 1rem;
align-items: center;
padding: 0.5rem;
margin-bottom: 0.5rem;
border-radius: var(--border-radius);
&:hover,
&:focus,
&:global(.active) {
background-color: @color-background;
background-color: var(--primary-overlay-color);
}
.thumbnail-container {
flex: none;
position: relative;
border-radius: var(--border-radius);
overflow: hidden;
.thumbnail {
display: block;
width: 7.5rem;
height: 5rem;
object-fit: contain;
width: 8rem;
object-fit: cover;
object-position: center;
opacity: 0.9;
}
.placeholder-icon {
display: block;
width: 7.5rem;
height: 5rem;
width: 8rem;
padding: 1rem;
color: @color-surface-light5;
background-color: @color-surface-light5-40;
color: var(--primary-foreground-color);
background-color: var(--primary-overlay-color);
opacity: 0.25;
}
}
@ -51,20 +57,19 @@
align-self: stretch;
display: flex;
flex-direction: column;
justify-content: space-between;
margin: 0.5rem 1rem;
justify-content: center;
padding: 0 0.5rem 0 1.5rem;
&:first-child {
height: 3rem;
.title-container {
max-height: 1.2em;
}
}
.title-container {
max-height: 2.4em;
color: @color-surface-light5-90;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
margin-bottom: 1rem;
color: var(--primary-foreground-color);
}
.flex-row-container {
@ -82,13 +87,16 @@
white-space: nowrap;
text-overflow: ellipsis;
text-transform: uppercase;
color: @color-surface-dark5-90;
color: var(--primary-foreground-color);
}
.upcoming-watched-container {
flex: 0 1 auto;
display: flex;
flex-direction: row;
align-items: center;
height: 1.6rem;
border-radius: 0.3rem;
&>:nth-child(2) {
margin-left: 0.5rem;
@ -97,29 +105,39 @@
.upcoming-container,
.watched-container {
flex: none;
padding: 0.2rem 0.4rem;
display: flex;
align-items: center;
height: 100%;
padding: 0 0.5rem;
max-width: 10rem;
&:not(:only-child) {
max-width: 5rem;
}
.flag-icon {
height: 1.15rem;
width: 1.15rem;
margin-right: 0.25rem;
color: var(--secondary-foreground-color);
}
.flag-label {
font-size: 0.8rem;
font-weight: 500;
font-weight: 800;
white-space: nowrap;
text-overflow: ellipsis;
text-transform: uppercase;
color: @color-background-90;
color: var(--secondary-foreground-color);
}
}
.upcoming-container {
background-color: @color-accent4;
background-color: var(--secondary-accent-color);
}
.watched-container {
background-color: @color-accent5;
background-color: var(--tertiary-accent-color);
}
}
}
@ -127,36 +145,38 @@
.progress-bar-container {
flex: 0 0 100%;
background-color: @color-background-light2;
background-color: var(--primary-accent-color);
.progress-bar {
height: 0.5rem;
background-color: @color-primaryvariant1;
background-color: var(--primary-foreground-color);
}
}
.context-menu-container {
max-width: calc(90% - 1.5rem);
border-radius: var(--border-radius);
overflow: hidden;
.context-menu-content {
--spatial-navigation-contain: contain;
background-color: @color-background-dark1;
background-color: var(--tertiary-background-color);
.context-menu-option-container {
display: flex;
flex-direction: row;
align-items: center;
padding: 0.5rem 1rem;
padding: 1rem 1.5rem;
&:hover,
&:focus {
background-color: @color-background;
background-color: var(--primary-overlay-color);
}
.context-menu-option-label {
font-size: 1rem;
max-height: 2.4em;
color: @color-surface-light5-90;
font-weight: 500;
color:var(--primary-foreground-color);
}
}
}
@ -165,15 +185,7 @@
@media only screen and (max-width: @minimum) {
.video-container {
&:hover,
&:focus,
&:global(.active) {
background-color: @color-surface-light5-20;
}
.context-menu-container {
&.menu-direction-top-left,
&.menu-direction-bottom-left {
right: 1.5rem;

3
src/routes/MetaDetails/VideosList/styles.less
View file

@ -31,7 +31,7 @@
flex: none;
font-size: 1.4rem;
text-align: center;
color: @color-secondaryvariant2-light1-90;
color: var(--primary-foreground-color);
}
}
@ -53,6 +53,7 @@
.videos-container {
flex: 1;
align-self: stretch;
padding: 0 1rem;
overflow-y: auto;
}
}

14
src/routes/MetaDetails/styles.less
View file

@ -20,6 +20,7 @@
background-color: transparent;
.nav-bar {
z-index: 1;
flex: none;
align-self: stretch;
}
@ -38,7 +39,7 @@
}
.background-image-layer {
position: absolute;
position: fixed;
top: 0;
right: 0;
bottom: 0;
@ -52,7 +53,8 @@
bottom: 0;
left: 0;
z-index: 1;
background: @color-background-dark2-70;
background: var(--tertiary-background-color);
opacity: 0.7;
content: "";
}
@ -90,7 +92,7 @@
align-self: stretch;
font-size: 2rem;
text-align: center;
color: @color-secondaryvariant2-light1-90;
color: var(--primary-foreground-color);
}
}
@ -104,9 +106,11 @@
}
.videos-list, .streams-list {
flex: 0 0 26.5rem;
flex: 0 0 28rem;
align-self: stretch;
background-color: @color-background-dark5-70;
border-radius: var(--border-radius) 0 0 var(--border-radius);
background-color: rgba(0, 0, 0, 0.4);
backdrop-filter: blur(15px);
}
}
}