Creepso/stremio-web
1
0
Fork 0
mirror of https://github.com/Stremio/stremio-web.git synced 2026-04-18 04:42:01 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

refactor: style meta row and item

Browse source
This commit is contained in:
Tim 2023-06-13 13:24:17 +02:00
parent 65e5ec88ad
commit c5aa6575a8
6 changed files with 87 additions and 60 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
src/App/styles.less
View file

@ -27,9 +27,11 @@
--color-placeholder-background: @color-surface-dark5-20;
--primary-background-color: rgba(12, 11, 17, 1);
--secondary-background-color: rgba(26, 23, 62, 1);
--tertiary-background-color: rgba(15, 13, 32, 1);
--primary-foreground-color: rgba(255, 255, 255, 1);
--primary-overlay-color: rgba(255, 255, 255, 0.1);
--primary-accent-color: rgb(123, 91, 245);
--border-radius: 0.75rem;
}
* {

65
src/common/MetaItem/styles.less
View file

@ -24,8 +24,18 @@
&:hover, &:focus, &:global(.active), &:global(.selected) {
outline-style: none;
background-color: @color-background-light3;
transition: background-color 100ms ease-out;
.poster-container {
box-shadow: 0 0 0 0.2rem var(--primary-foreground-color);
transform: scale(1.05);
}
.title-bar-container {
.menu-label-container {
opacity: 1;
}
}
}
&.poster-shape-poster {
@ -49,7 +59,9 @@
.poster-container {
position: relative;
z-index: 0;
background-color: @color-background;
background-color: var(--primary-overlay-color);
border-radius: var(--border-radius);
transition: all 0.1s ease-out;
.poster-image-layer {
position: absolute;
@ -76,7 +88,8 @@
flex: none;
width: 80%;
height: 50%;
color: @color-background-light3-90;
color: var(--primary-foreground-color);
opacity: 0.2;
}
}
@ -106,16 +119,20 @@
}
.progress-bar-layer {
position: absolute;
right: 0;
bottom: 0;
left: 0;
z-index: -1;
background-color: @color-background-light2;
position: absolute;
bottom: 1rem;
left: 1rem;
right: 1rem;
height: 0.45rem;
border-radius: 0.45rem;
background-color: var(--primary-overlay-color);
overflow: hidden;
.progress-bar {
height: 0.4rem;
background-color: @color-primaryvariant1;
position: relative;
height: 100%;
background-color: var(--primary-foreground-color);
}
}
}
@ -124,14 +141,16 @@
display: flex;
flex-direction: row;
align-items: center;
height: 2.8rem;
height: 4rem;
overflow: visible;
.title-label {
flex: 1;
max-height: 2.4em;
padding-left: 0.5rem;
color: @color-surface-light5-90;
font-weight: 600;
text-align: center;
color: var(--primary-foreground-color);
&:only-child {
padding-right: 0.5rem;
@ -141,35 +160,41 @@
.menu-label-container {
flex: none;
width: 1.5rem;
height: 2.8rem;
height: 4rem;
padding: 1rem 0;
background-color: transparent;
opacity: 0;
transition: opacity 0.1s ease-out;
.icon {
display: block;
width: 100%;
height: 100%;
color: @color-surface-light1-90;
color: var(--primary-foreground-color);
opacity: 0.6;
}
.popup-menu-container {
width: auto;
.multiselect-menu-container {
min-width: 6rem;
max-width: 12rem;
min-width: 8rem;
max-width: 14rem;
border-radius: var(--border-radius);
.multiselect-option-container {
padding: 0.5rem;
background-color: @color-surface-light5;
padding: 1rem 1.5rem;
background-color: var(--tertiary-background-color);
&:hover, &:focus {
outline: none;
background-color: @color-surface-light2;
background-color: var(--primary-overlay-color);
}
.multiselect-option-label {
color: @color-background-dark5-90;
font-weight: 500;
color: var(--primary-foreground-color);
opacity: 0.8;
}
}
}

13
src/common/MetaRow/MetaRowPlaceholder/styles.less
View file

@ -9,12 +9,13 @@
align-items: center;
justify-content: flex-end;
padding: 0 1rem;
margin-bottom: 1rem;
margin-bottom: 0.5rem;
.title-container {
flex: 1;
max-height: 2.4em;
font-size: 1.8rem;
font-size: 1.6rem;
font-weight: 500;
color: var(--color-placeholder-text);
&:empty {
@ -39,15 +40,14 @@
.label {
flex: 0 1 auto;
max-height: 1.2em;
font-size: 1.3rem;
font-size: 1rem;
font-weight: 500;
text-transform: uppercase;
color: var(--color-placeholder-text);
}
.icon {
flex: none;
height: 1.3rem;
height: 1rem;
margin-left: 0.5rem;
color: var(--color-placeholder-text);
}
@ -68,6 +68,7 @@
}
.poster-container {
border-radius: var(--border-radius);
padding-bottom: calc(100% * var(--poster-shape-ratio));
background-color: var(--color-placeholder-background);
}
@ -76,12 +77,14 @@
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
height: 2.8rem;
.title-label {
flex: none;
width: 60%;
height: 1.2rem;
border-radius: var(--border-radius);
background-color: var(--color-placeholder-background);
}
}

34
src/common/MetaRow/styles.less
View file

@ -12,13 +12,14 @@
align-items: center;
justify-content: flex-end;
padding: 0 1rem;
margin-bottom: 1rem;
margin-bottom: 0.5rem;
.title-container {
flex: 1;
max-height: 2.4em;
font-size: 1.8rem;
color: @color-secondaryvariant2-light1-90;
font-size: 1.6rem;
font-weight: 500;
color: var(--primary-foreground-color);
}
.see-all-container {
@ -28,6 +29,7 @@
align-items: center;
max-width: 12rem;
padding: 0.2rem;
opacity: 0.6;
&:focus {
outline: none;
@ -35,38 +37,32 @@
}
&:hover {
.label {
color: @color-secondaryvariant2-light2-90;
}
.icon {
color: @color-secondaryvariant2-light2-90;
}
opacity: 1;
}
.label {
flex: 0 1 auto;
max-height: 1.2em;
font-size: 1.3rem;
font-size: 1rem;
font-weight: 500;
text-transform: uppercase;
color: @color-secondaryvariant2-light1-90;
color: var(--primary-foreground-color);
}
.icon {
flex: none;
height: 1.3rem;
height: 1.5rem;
margin-left: 0.5rem;
color: @color-secondaryvariant2-light1-90;
color: var(--primary-foreground-color);
}
}
}
.message-container {
max-height: 3.6em;
padding: 0 1rem;
padding: 0 0.5rem;
font-size: 1.3rem;
color: @color-secondaryvariant2-light1-90;
color: var(--primary-foreground-color);
opacity: 0.6;
}
.meta-items-container {
@ -76,10 +72,6 @@
overflow: visible;
.meta-item {
&:not(:first-child) {
margin-left: 0.5rem;
}
&.poster-shape-poster {
flex: calc(1 / var(--poster-shape-ratio));
}

30
src/routes/Board/styles.less
View file

@ -28,7 +28,8 @@
overflow-y: auto;
.board-row {
margin: 4rem 2rem;
margin-top: 1rem;
margin-bottom: 2rem;
}
}
}
@ -43,7 +44,7 @@
.board-container {
.board-content-container {
.board-content {
.board-row-poster, .board-row-square {
.board-row-poster, .board-row-square, .continue-watching-row {
.meta-item, .meta-item-placeholder {
&:nth-child(n+10) {
display: none;
@ -51,7 +52,7 @@
}
}
.board-row-landscape, .continue-watching-row {
.board-row-landscape {
.meta-item, .meta-item-placeholder {
&:nth-child(n+9) {
display: none;
@ -67,7 +68,7 @@
.board-container {
.board-content-container {
.board-content {
.board-row-poster, .board-row-square {
.board-row-poster, .board-row-square, .continue-watching-row {
.meta-item, .meta-item-placeholder {
&:nth-child(n+9) {
display: none;
@ -75,7 +76,7 @@
}
}
.board-row-landscape, .continue-watching-row {
.board-row-landscape {
.meta-item, .meta-item-placeholder {
&:nth-child(n+8) {
display: none;
@ -91,7 +92,7 @@
.board-container {
.board-content-container {
.board-content {
.board-row-poster, .board-row-square {
.board-row-poster, .board-row-square, .continue-watching-row {
.meta-item, .meta-item-placeholder {
&:nth-child(n+8) {
display: none;
@ -99,7 +100,7 @@
}
}
.board-row-landscape, .continue-watching-row {
.board-row-landscape {
.meta-item, .meta-item-placeholder {
&:nth-child(n+7) {
display: none;
@ -115,7 +116,7 @@
.board-container {
.board-content-container {
.board-content {
.board-row-poster, .board-row-square {
.board-row-poster, .board-row-square, .continue-watching-row {
.meta-item, .meta-item-placeholder {
&:nth-child(n+7) {
display: none;
@ -123,7 +124,7 @@
}
}
.board-row-landscape, .continue-watching-row {
.board-row-landscape {
.meta-item, .meta-item-placeholder {
&:nth-child(n+6) {
display: none;
@ -139,7 +140,7 @@
.board-container {
.board-content-container {
.board-content {
.board-row-poster, .board-row-square {
.board-row-poster, .board-row-square, .continue-watching-row {
.meta-item, .meta-item-placeholder {
&:nth-child(n+6) {
display: none;
@ -147,7 +148,7 @@
}
}
.board-row-landscape, .continue-watching-row {
.board-row-landscape {
.meta-item, .meta-item-placeholder {
&:nth-child(n+5) {
display: none;
@ -163,7 +164,7 @@
.board-container {
.board-content-container {
.board-content {
.board-row-poster, .board-row-square {
.board-row-poster, .board-row-square, .continue-watching-row {
.meta-item, .meta-item-placeholder {
&:nth-child(n+5) {
display: none;
@ -171,7 +172,7 @@
}
}
.board-row-landscape, .continue-watching-row {
.board-row-landscape {
.meta-item, .meta-item-placeholder {
&:nth-child(n+4) {
display: none;
@ -199,7 +200,8 @@
height: calc(100% - 4rem);
.board-row {
margin: 2rem 1rem;
margin-left: 1rem;
margin-right: 1rem;
}
.board-row-poster, .board-row-square, .continue-watching-row {

3
src/routes/Discover/styles.less
View file

@ -174,18 +174,21 @@
.poster-container {
padding-bottom: calc(100% * var(--poster-shape-ratio));
background-color: var(--color-placeholder-background);
border-radius: var(--border-radius);
}
.title-bar-container {
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
height: 2.8rem;
.title-label {
flex: none;
width: 60%;
height: 1.2rem;
border-radius: var(--border-radius);
background-color: var(--color-placeholder-background);
}
}