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

video styles refactored

Browse source
This commit is contained in:
svetlagasheva 2019-01-02 16:03:05 +02:00
parent afa188c3cb
commit e31498f7df
2 changed files with 21 additions and 20 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

23
src/routes/Detail/VideosList/Video/styles.less
View file

@ -9,7 +9,7 @@
.poster-container {
flex: 1;
margin: var(--video-spacing) 0 var(--video-spacing) var(--video-spacing);
margin: var(--spacing) 0 var(--spacing) var(--spacing);
.poster {
display: block;
@ -31,14 +31,13 @@
.info-container {
flex: 3;
min-height: calc(0.2 * var(--video-width));
padding: var(--video-spacing);
min-height: calc(var(--video-width) * 0.2);
padding: var(--spacing);
display: flex;
flex-direction: column;
justify-content: center;
.title {
font-size: var(--video-title-font-size);
line-height: 1.2em;
color: var(--color-surfacelighter);
word-break: break-all; //Firefox doesn't support { break-word }
@ -46,7 +45,7 @@
}
.released-date {
font-size: var(--video-released-date-font-size);
font-size: 90%;
color: var(--color-surface);
}
@ -54,17 +53,17 @@
display: flex;
.upcoming-label, .watched-label {
font-size: var(--video-label-font-size);
font-size: 80%;
font-weight: 500;
line-height: 1.5;
border-width: var(--video-label-border-width);
border-width: calc(var(--spacing) * 0.25);
border-style: solid;
padding: 0 0.6em;
color: var(--color-surfacelighter);
}
.upcoming-label {
margin-right: var(--video-spacing);
margin-right: var(--spacing);
border-color: var(--color-signal5);
}
@ -74,15 +73,15 @@
}
>:not(:last-child) {
margin-bottom: calc(0.5 * var(--video-spacing));
margin-bottom: calc(var(--spacing) * 0.5);
}
}
.arrow-container {
width: calc(0.07 * var(--video-width));
width: calc(var(--video-width) * 0.07);
display: flex;
align-items: center;
padding: var(--video-spacing) var(--video-spacing) var(--video-spacing) 0;
padding: var(--spacing) var(--spacing) var(--spacing) 0;
.arrow {
width: 100%;
@ -92,7 +91,7 @@
}
.progress-container {
height: calc(0.5 * var(--video-spacing));
height: calc(var(--spacing) * 0.5);
background-color: var(--color-primarydark);
.progress {

18
src/routes/Detail/VideosList/styles.less
View file

@ -1,10 +1,12 @@
.videos-list-container {
width: calc(var(--video-width) + var(--spacing) * 6);
flex-direction: column;
padding: calc(3 * var(--spacing)) 0;
background: var(--color-backgrounddarker40);
.seasons-bar {
height: var(--seasons-bar-height);
height: calc(var(--video-width) * 0.14);
width: 100%;
display: flex;
justify-content: space-between;
margin-bottom: var(--spacing);
@ -12,7 +14,7 @@
.control-bar-button {
cursor: pointer;
width: 258px;
flex: 3;
display: flex;
justify-content: center;
align-items: center;
@ -34,8 +36,8 @@
}
.button-container {
width: calc(1.5 * var(--seasons-bar-height));
cursor: pointer;
flex: 1;
display: flex;
align-items: center;
justify-content: center;
@ -54,7 +56,7 @@
.scroll-container {
flex: 1;
width: calc(var(--video-width) + 4 * var(--spacing));
width: calc(var(--video-width) + var(--spacing) * 4);
padding: 0 calc(2 * var(--spacing));
margin: 0 var(--spacing);
overflow-y: auto;
@ -66,7 +68,7 @@
}
.scroll-container::-webkit-scrollbar {
width: var(--spacing);
width: var(--spacing) !important;
}
.scroll-container::-webkit-scrollbar-thumb {
@ -82,16 +84,16 @@
--border-color: var(--color-primarylight);
.popup-content {
cursor: pointer;
width: 258px;
background-color: var(--color-backgrounddark);
.season {
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
padding: 16px;
width: 258px;
width: 100%;
border-top: 1px solid var(--color-primarylight);
color: var(--color-surfacelight);