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

old color commented out

Browse source
This commit is contained in:
NikolaBorislavovHristov 2018-12-06 12:02:48 +02:00
parent 9e703de0ab
commit 48b9207026
14 changed files with 149 additions and 149 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

28
src/common/Addon/styles.less
View file

@ -1,11 +1,11 @@
@import 'stremio-colors';
.addon {
width: 550px;
padding: 18px;
font-size: 12px;
color: @colorwhite;
// color: @colorwhite;
font-family: LatoLight;
background-color: @colorglass;
// background-color: @colorglass;
.info-container {
height: 80px;
display: flex;
@ -15,11 +15,11 @@
height: 80px;
display: flex;
margin-right: 14px;
background-color: @colordarkest;
// background-color: @colordarkest;
.logo {
width: 40px;
margin: auto;
fill: @colorwhite;
// fill: @colorwhite;
}
}
.info {
@ -30,10 +30,10 @@
}
.version {
margin-right: 10px;
color: @colorwhite60;
// color: @colorwhite60;
}
.type {
color: @coloraccent;
// color: @coloraccent;
}
.type, .description {
margin-top: 2px;
@ -44,7 +44,7 @@
display: flex;
flex-direction: column;
.url {
color: @colorwhite60;
// color: @colorwhite60;
}
}
.buttons {
@ -52,14 +52,14 @@
margin-top: 26px;
justify-content: space-between;
.share-container {
border: 2px solid @coloraccent;
// border: 2px solid @coloraccent;
.share-icon {
width: 18px;
margin-right: 6px;
fill: @coloraccent;
// fill: @coloraccent;
}
.share-label {
color: @coloraccent;
// color: @coloraccent;
}
}
.share-container, .install-label, .uninstall-label {
@ -73,11 +73,11 @@
justify-content: center;
}
.install-label {
border: 2px solid @colorsignal5;
background-color: @colorsignal5;
// border: 2px solid @colorsignal5;
// background-color: @colorsignal5;
}
.uninstall-label {
border: 2px solid @colorwhite20;
// border: 2px solid @colorwhite20;
}
}
}

4
src/common/Checkbox/styles.less
View file

@ -1,6 +1,6 @@
@import 'stremio-colors';
.root {
width: 30px;
height: 30px;
background-color: @colorprimlight60;
// background-color: @colorprimlight60;
}

30
src/common/LibraryItemList/styles.less
View file

@ -1,12 +1,12 @@
@import 'stremio-colors';
.library-item {
width: 90%;
display: flex;
padding: 8px;
align-items: center;
color: @colorwhite60;
// color: @colorwhite60;
font-family: LatoLight;
border-top: 1px solid @colorwhite20;
// border-top: 1px solid @colorwhite20;
.poster {
width: 75px;
display: flex;
@ -24,13 +24,13 @@
.play {
width: 20px;
height: 20px;
fill: @colortransparent;
// fill: @colortransparent;
}
}
}
.title {
width: 170px;
color: @colorwhite;
// color: @colorwhite;
}
.type, .year, .views, .hours {
width: 100px;
@ -41,8 +41,8 @@
.icon-container {
width: 100px;
height: 100px;
fill: @colorprim;
color: @colorprim;
// fill: @colorprim;
// color: @colorprim;
padding-top: 24px;
text-align: center;
visibility: hidden;
@ -54,25 +54,25 @@
}
}
&:hover, &:focus {
color: @colorblack;
background-color: @colorwhite;
// color: @colorblack;
// background-color: @colorwhite;
.play-container {
background-color: @colorwhite;
// background-color: @colorwhite;
.play {
fill: @colormedium;
// fill: @colormedium;
}
}
.title {
color: @colorblack;
// color: @colorblack;
}
.icon-container {
cursor: pointer;
visibility: visible;
&:hover, &:focus {
background-color: @colorblack20;
// background-color: @colorblack20;
.trailer-icon, .addlib-icon, .trailer, .addlib {
fill: @colorprimdark;
color: @colorprimdark;
// fill: @colorprimdark;
// color: @colorprimdark;
}
}
}

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

@ -1,13 +1,13 @@
@import 'stremio-colors';
.meta-item {
color: @colorwhite;
// color: @colorwhite;
font-family: LatoLight;
.poster {
display: flex;
background-position: center;
background-size: cover, auto;
background-repeat: no-repeat;
background-color: @colordarkest;
// background-color: @colordarkest;
.play-container {
width: 70px;
height: 70px;
@ -15,21 +15,21 @@
display: flex;
visibility: hidden;
border-radius: 50%;
background-color: @colorwhite;
// background-color: @colorwhite;
.play {
width: 26px;
height: 26px;
margin: auto;
margin-left: 26px;
fill: @colormedium;
// fill: @colormedium;
}
}
}
.progress-container {
background-color: @colorneutral;
// background-color: @colorneutral;
.progress {
height: 4px;
background-color: @colorprimlight;
// background-color: @colorprimlight;
}
}
.info-container {
@ -39,39 +39,39 @@
.info {
width: 100%;
.title, .year{
color: @colorwhite60;
// color: @colorwhite60;
}
:first-child {
color: @colorwhite;
// color: @colorwhite;
}
}
}
.more-icon-container {
cursor: pointer;
fill: @colorwhite;
// fill: @colorwhite;
.more-icon {
width: 10px;
height: 10px;
}
}
&:hover {
color: @colorblack;
background-color: @colorwhite;
outline: 2px solid @colorwhite;
// color: @colorblack;
// background-color: @colorwhite;
// outline: 2px solid @colorwhite;
.play-container {
cursor: pointer;
visibility: visible;
}
.info {
.title, .year {
color: @colorblack60;
// color: @colorblack60;
}
:first-child {
color: @colorblack;
// color: @colorblack;
}
}
.more-icon {
fill: @colorblack40;
// fill: @colorblack40;
}
}
}

20
src/common/MetadataItem/styles.less
View file

@ -1,4 +1,4 @@
@import 'stremio-colors';
.root-container {
padding: 1px;
display: inline-block;
@ -14,24 +14,24 @@
background-repeat: no-repeat;
background-position: center;
background-origin: border-box;
background-color: @colordarkest;
// background-color: @colordarkest;
.in-cinema-container {
width: 100%;
height: 26px;
display: flex;
align-items: center;
justify-content: center;
background-color: @colormedium;
// background-color: @colormedium;
.in-cinema-icon {
height: 100%;
width: 12px;
fill: @colorwhite;
// fill: @colorwhite;
margin-right: 6px;
}
.in-cinema-label {
font-size: 13px;
text-transform: uppercase;
color: @colorwhite;
// color: @colorwhite;
}
}
}
@ -44,20 +44,20 @@
}
.name {
font-size: 12px;
color: @colorwhite;
// color: @colorwhite;
}
.year {
font-size: 11px;
color: @colorwhite80;
// color: @colorwhite80;
}
}
&:hover {
background: @colorwhite;
// background: @colorwhite;
.name {
color: @colorblack;
// color: @colorblack;
}
.year {
color: @colorneutral;
// color: @colorneutral;
}
}
}

14
src/common/NavBar/NavTab/styles.less
View file

@ -1,4 +1,4 @@
@import 'stremio-colors';
@import 'constants';
.nav-tab {
height: @nav-bar-height;
@ -7,26 +7,26 @@
align-items: center;
.nav-tab-icon {
height: @nav-bar-height;
fill: @colorwhite80;
// fill: @colorwhite80;
width: 18px;
}
.nav-tab-label {
color: @colorwhite80;
// color: @colorwhite80;
font-size: 15px;
margin-left: 10px;
}
&.active {
background-color: @colorbgmain;
// background-color: @colorbgmain;
}
&:hover:not(.active) {
background-color: @colordarkest20;
// background-color: @colordarkest20;
}
&:hover, &.active {
.nav-tab-icon {
fill: @colorwhite;
// fill: @colorwhite;
}
.nav-tab-label {
color: @colorwhite;
// color: @colorwhite;
}
}
}

22
src/common/NavBar/SearchInput/styles.less
View file

@ -1,4 +1,4 @@
@import 'stremio-colors';
@import 'constants';
@label-vertical-padding: 8px;
.search-form {
@ -16,11 +16,11 @@
outline: none;
appearance: none;
user-select: text;
background-color: @colorsecondarylight80;
color: @colorwhite80;
// background-color: @colorsecondarylight80;
// color: @colorwhite80;
font-size: 14px;
&::placeholder {
color: @colorwhite80;
// color: @colorwhite80;
}
}
.submit-button {
@ -28,11 +28,11 @@
height: 100%;
cursor: pointer;
outline: none;
background-color: @coloraccent80;
// background-color: @coloraccent80;
.submit-icon {
width: 14px;
height: 100%;
fill: @colorwhite80;
// fill: @colorwhite80;
}
}
}
@ -40,19 +40,19 @@
.search-label {
padding: 0;
.query-input {
background-color: @colorbgmain;
color: @colorwhite;
// background-color: @colorbgmain;
// color: @colorwhite;
font-size: 16px;
&::placeholder {
color: @colorwhite;
// color: @colorwhite;
}
}
.submit-button {
width: @nav-bar-height;
background-color: @coloraccent;
// background-color: @coloraccent;
.submit-icon {
width: 16px;
fill: @colorwhite;
// fill: @colorwhite;
}
}
}

8
src/common/NavBar/UserMenu/styles.less
View file

@ -1,4 +1,4 @@
@import 'stremio-colors';
@import 'constants';
.popup-label-container {
cursor: pointer;
@ -6,7 +6,7 @@
background-color: transparent;
.icon {
height: @nav-bar-height;
fill: @colorwhite80
// fill: @colorwhite80
}
.user-icon {
width: 40%;
@ -15,9 +15,9 @@
width: 16%;
}
&:hover, &.active {
background-color: @colordarkest20;
// background-color: @colordarkest20;
.icon {
fill: @colorwhite;
// fill: @colorwhite;
}
}
}

6
src/common/NavBar/styles.less
View file

@ -1,13 +1,13 @@
@import 'stremio-colors';
@import 'constants';
.nav-bar {
display: flex;
height: @nav-bar-height;
background-color: @colorsecondary;
// background-color: @colorsecondary;
.nav-title {
padding: 0 10px;
font-size: 16px;
color: @colorwhite;
// color: @colorwhite;
}
.search-input {
flex: 1;

22
src/common/ShareAddon/styles.less
View file

@ -1,10 +1,10 @@
@import 'stremio-colors';
.share-addon {
width: 380px;
height: 200px;
padding: 10px;
color: @colorwhite;
background-color: @colorwhite;
// color: @colorwhite;
// background-color: @colorwhite;
.x-container {
display: flex;
justify-content: flex-end;
@ -17,7 +17,7 @@
.info-container {
padding: 6px 20px 0px 20px;
.share-label {
color: @colorblack;
// color: @colorblack;
font-weight: 600;
}
.buttons {
@ -30,13 +30,13 @@
width: 14px;
height: 14px;
margin-right: 6px;
fill: @colorwhite;
// fill: @colorwhite;
}
.facebook-button {
background-color: @colorfb;
// background-color: @colorfb;
}
.twitter-button {
background-color: @coloraccent;
// background-color: @coloraccent;
}
.gplus-button {
background-color: #dd4b39;
@ -54,11 +54,11 @@
display: flex;
border-radius: 4px;
text-align: center;
border: 1px solid @colorneutrallight;
// border: 1px solid @colorneutrallight;
.url, .copy-label {
padding: 10px;
font-weight: 600;
color: @colorblack40;
// color: @colorblack40;
}
.url {
width: 90%;
@ -77,12 +77,12 @@
cursor: pointer;
border-top-right-radius: 3px;
border-bottom-right-radius: 3px;
background-color: @colorblack20;
// background-color: @colorblack20;
.copy-icon {
width: 16px;
height: 16px;
margin-right: 4px;
fill: @colorblack40;
// fill: @colorblack40;
}
}
}

20
src/common/Stream/styles.less
View file

@ -1,12 +1,12 @@
@import 'stremio-colors';
.stream {
width: 340px;
display: flex;
font-size: 11px;
padding: 7px 20px;
color: @colorwhite;
// color: @colorwhite;
justify-content: space-between;
background-color: @colorblack20;
// background-color: @colorblack20;
.stream-info-container {
width: 230px;
.stream-info {
@ -16,7 +16,7 @@
justify-content: space-between;
.logo {
width: 74px;
fill: @colorwhite;
// fill: @colorwhite;
}
.source-name {
width: 80px;
@ -44,19 +44,19 @@
.free-label {
padding: 1px 6px;
border-radius: 2px;
background-color: @colorprimlight;
// background-color: @colorprimlight;
}
.subscription-label {
color: @colorsignal1;
// color: @colorsignal1;
}
}
}
.progress-container {
background-color: @colorneutral;
// background-color: @colorneutral;
.progress {
height: 3px;
border-radius: 1px;
background-color: @colorprimlight;
// background-color: @colorprimlight;
}
}
}
@ -70,11 +70,11 @@
height: 18px;
margin: auto;
margin-left: 16px;
fill: @colorwhite60;
// fill: @colorwhite60;
}
}
&:hover {
cursor: pointer;
background-color: @colorwhite20;
// background-color: @colorwhite20;
}
}

30
src/common/UserPanel/styles.less
View file

@ -1,8 +1,8 @@
@import 'stremio-colors';
.user-panel {
width: 260px;
font-family: LatoLight;
background-color: @colordarkest;
// background-color: @colordarkest;
.user-info {
display: flex;
padding: 15px;
@ -17,35 +17,35 @@
background-repeat: no-repeat;
}
.email {
color: @colorwhite;
// color: @colorwhite;
}
.log-out {
color: @colorwhite40;
// color: @colorwhite40;
&:hover {
cursor: pointer;
color: @colorwhite;
// color: @colorwhite;
}
}
}
.fullscreen-option {
border-top: 1px solid @colorwhite20;
border-bottom: 1px solid @colorwhite20;
// border-top: 1px solid @colorwhite20;
// border-bottom: 1px solid @colorwhite20;
}
.fullscreen-option, .settings-option, .addons-option, .magnet-option, .help-option {
display: flex;
padding: 15px;
align-items: center;
color: @colorwhite80;
// color: @colorwhite80;
.fullscreen-icon, .settings-icon, .addons-icon, .magnet-icon, .help-icon {
height: 20px;
width: 20px;
margin-right: 12px;
fill: @coloraccent;
// fill: @coloraccent;
}
&:hover {
cursor: pointer;
color: @colorwhite;
background-color: @coloraccent20;
// color: @colorwhite;
// background-color: @coloraccent20;
}
}
.options, .footer {
@ -54,14 +54,14 @@
.footer {
display: flex;
flex-direction: column;
border-top: 1px solid @colorwhite20;
// border-top: 1px solid @colorwhite20;
.terms-label, .about-label {
padding: 10px 20px;
color: @colorwhite80;
// color: @colorwhite80;
&:hover {
cursor: pointer;
color: @colorwhite;
background-color: @coloraccent20;
// color: @colorwhite;
// background-color: @coloraccent20;
}
}
}

18
src/common/Video/styles.less
View file

@ -1,10 +1,10 @@
@import 'stremio-colors';
.video {
height: 62px;
width: 340px;
display: flex;
padding: 10px 10px;
background-color: @colorblack20;
// background-color: @colorblack20;
.poster {
margin-right: 10px;
background-position: center;
@ -13,7 +13,7 @@
}
.video-container {
width: 240px;
color: @colorwhite;
// color: @colorwhite;
.main-info {
font-size: 12px;
.number {
@ -29,15 +29,15 @@
font-size: 11px;
padding-left: 1px;
margin-right: 10px;
color: @colorwhite60;
// color: @colorwhite60;
}
.progress-container {
background-color: @colorwhite20;
// background-color: @colorwhite20;
.progress {
height: 3px;
margin-top: 2px;
border-radius: 1px;
background-color: @colorprimlight;
// background-color: @colorprimlight;
}
}
.watched-label, .upcoming-label {
@ -47,14 +47,14 @@
border-radius: 2px;
}
.watched-label {
background-color: @colorprimlight;
// background-color: @colorprimlight;
}
.upcoming-label {
background-color: @colorsignal5;
// background-color: @colorsignal5;
}
}
&:hover, &:focus {
cursor: pointer;
background-color: @colorwhite20;
// background-color: @colorwhite20;
}
}

44
src/routes/Settings/styles.less
View file

@ -1,8 +1,8 @@
@import 'stremio-colors';
.settings {
height: 100%;
display: flex;
color: @colorwhite60;
// color: @colorwhite60;
font-family: LatoLight;
.options {
width: 240px;
@ -10,33 +10,33 @@
display: flex;
font-size: 14px;
flex-direction: column;
background: @colordarkest;
// background: @colordarkest;
.option {
padding: 14px;
font-weight: 600;
&:hover {
cursor: pointer;
color: @colorwhite;
background: @colorglass;
// color: @colorwhite;
// background: @colorglass;
}
}
.selected-menu {
padding: 14px;
font-weight: 600;
cursor: pointer;
color: @colorwhite;
background: @colorglass;
// color: @colorwhite;
// background: @colorglass;
}
.selected {
cursor: pointer;
color: @colorwhite;
background: @colorglass;
// color: @colorwhite;
// background: @colorglass;
}
}
.player-preferences-menu {
height: 150px;
margin: 60px 50px;
border-bottom: 1px solid @colormedium;
// border-bottom: 1px solid @colormedium;
.preference-container {
display: flex;
cursor: pointer;
@ -52,23 +52,23 @@
width: 14px;
height: 14px;
cursor: pointer;
border: 2px solid @colorwhite60;
// border: 2px solid @colorwhite60;
.checkmark {
width: 10px;
height: 10px;
display: none;
fill: @colorwhite;
// fill: @colorwhite;
}
}
input:checked ~ .checkbox {
background-color: @colorprimlight;
border: 2px solid @colorprimlight;
// background-color: @colorprimlight;
// border: 2px solid @colorprimlight;
.checkmark {
display: block;
}
}
input:checked ~ .preference {
color: @colorwhite;
// color: @colorwhite;
}
}
}
@ -78,10 +78,10 @@
margin-bottom: 30px;
}
.interface-language, .default-subtitles-language {
border-bottom: 1px solid @colormedium;
// border-bottom: 1px solid @colormedium;
.headline {
font-weight: 600;
color: @colorwhite40;
// color: @colorwhite40;
}
.name {
height: 40px;
@ -92,17 +92,17 @@
align-items: center;
justify-content: space-between;
font-weight: 600;
color: @colorwhite;
background-color: @colordarkest;
border: 1px solid @colortransparent;
// color: @colorwhite;
// background-color: @colordarkest;
// border: 1px solid @colortransparent;
.arrow-down {
width: 8px;
height: 10px;
fill: @colorwhite40;
// fill: @colorwhite40;
}
&:hover {
cursor: pointer;
border: 1px solid @colormedium;
// border: 1px solid @colormedium;
}
}
}