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

colors replaced

Browse source
This commit is contained in:
svetlagasheva 2018-12-07 17:35:43 +02:00
parent 9a85f56724
commit 614defdbc6
16 changed files with 133 additions and 133 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -13,7 +13,7 @@
display: grid;
width: var(--addon-width);
padding: 2%;
// background-color: @colorglass;
background-color: var(--color-background);
grid-template-columns: 1fr 4fr;
grid-template-rows: calc(0.04 * var(--addon-width)) calc(0.04 * var(--addon-width)) auto auto calc((0.08 * var(--addon-width)));
grid-template-areas:
@ -30,8 +30,8 @@
width: calc(0.2 * var(--addon-width));
height: calc(0.2 * var(--addon-width));
padding: 20%;
// fill: @colorwhite;
// background-color: @colordarkest;
fill: var(--color-surfacelighter);
background-color: var(--color-backgrounddarker);
}
}
@ -51,7 +51,7 @@
max-width: 80%;
margin-right: 3%;
font-size: var(--name-font-size);
// color: @colorwhite;
color: var(--color-surfacelighter);
overflow: hidden;
white-space: pre;
text-overflow: ellipsis;
@ -60,7 +60,7 @@
.version {
flex: 1;
font-size: var(--version-font-size);
// color: @colorwhite60;
color: var(--color-surface);
overflow: hidden;
white-space: pre;
text-overflow: ellipsis;
@ -74,14 +74,14 @@
align-items: center;
padding-left: 4%;
font-size: var(--type-font-size);
// color: @coloraccent;
color: var(--color-secondarylighter);
}
.description {
grid-area: description;
padding-left: 4%;
font-size: var(--description-font-size);
// color: @colorwhite;
color: var(--color-surfacelighter);
word-break: break-all; //Firefox doesn't support { break-word }
word-break: break-word;
}
@ -94,7 +94,7 @@
.url {
font-size: var(--url-font-size);
// color: @colorwhite60;
color: var(--color-surface);
}
}
@ -119,47 +119,47 @@
}
.label {
// color: @colorwhite;
color: var(--color-surfacelighter);
}
&.share-button {
// border-color: @coloraccent;
border-color: var(--color-secondarylighter);
.icon {
// fill: @coloraccent;
fill: var(--color-secondarylighter);
}
.label {
// color: @coloraccent;
color: var(--color-secondarylighter);
}
&:hover {
// background-color: @coloraccent;
background-color: var(--color-secondarylighter);
.icon {
// fill: @colorwhite;
fill: var(--color-surfacelighter);
}
.label {
// color: @colorwhite;
color: var(--color-surfacelighter);
}
}
}
&.install-button {
// border-color: @colorsignal5;
// background-color: @colorsignal5;
border-color: var(--color-signal5);
background-color: var(--color-signal5);
&:hover {
// background-color: @colorsignal580;
background-color: var(--color-signal580);
}
}
&.uninstall-button {
// border-color: @colorneutral;
border-color: var(--color-surfacedark);
&:hover {
// background-color: @colorneutral;
background-color: var(--color-surfacedark);
}
}

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

@ -2,11 +2,11 @@
cursor: pointer;
&.checkbox-checked {
// background-color: @colorprimlight;
background-color: var(--color-primarylight);
.icon {
padding: 10%;
// fill: @colorwhite;
fill: var(--color-surfacelighter);
}
}
@ -28,6 +28,6 @@
width: 100%;
height: 100%;
margin: auto;
// fill: @colorwhite60;
fill: var(--color-surfacelighter60);
}
}

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

@ -3,8 +3,8 @@
display: flex;
padding: 8px;
align-items: center;
// color: @colorwhite60;
// border-top: 1px solid @colorwhite20;
color: var(--color-surfacelighter60);
border-top: 1px solid var(--color-surfacelighter20);
.poster {
width: 75px;
display: flex;
@ -22,13 +22,13 @@
.play {
width: 20px;
height: 20px;
// fill: @colortransparent;
fill: transparent;
}
}
}
.title {
width: 170px;
// color: @colorwhite;
color: var(--color-surfacelighter);
}
.type, .year, .views, .hours {
width: 100px;
@ -39,8 +39,8 @@
.icon-container {
width: 100px;
height: 100px;
// fill: @colorprim;
// color: @colorprim;
fill: var(--color-primarydark);
color: var(--color-primarydark);
padding-top: 24px;
text-align: center;
visibility: hidden;
@ -52,25 +52,25 @@
}
}
&:hover, &:focus {
// color: @colorblack;
// background-color: @colorwhite;
color: var(--color-backgrounddarker);
background-color: var(--color-surfacelighter);
.play-container {
// background-color: @colorwhite;
background-color: var(--color-surfacelighter);
.play {
// fill: @colormedium;
fill: var(--color-primary);
}
}
.title {
// color: @colorblack;
color: var(--color-backgrounddarker);
}
.icon-container {
cursor: pointer;
visibility: visible;
&:hover, &:focus {
// background-color: @colorblack20;
background-color: var(--color-backgrounddarker20);
.trailer-icon, .addlib-icon, .trailer, .addlib {
// fill: @colorprimdark;
// color: @colorprimdark;
fill: var(--color-primarydarker);
color: var(--color-primarydarker);
}
}
}

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

@ -1,13 +1,13 @@
.meta-item, .progress-poster-shape, .progress-landscape-shape, .progress-square-shape, .progress-info-poster-shape, .progress-info-landscape-shape, .progress-info-square-shape, .poster-shape, .landscape-shape, .square-shape, .info-poster-shape, .info-landscape-shape, .info-square-shape {
display: grid;
// color: @colorwhite;
color: var(--color-surfacelighter);
.poster {
grid-area: poster;
display: flex;
background-position: center;
background-size: cover, auto;
background-repeat: no-repeat;
// background-color: @colordarkest;
background-color: var(--color-backgrounddark);
.play-container {
width: 70px;
height: 70px;
@ -15,61 +15,61 @@
display: flex;
visibility: hidden;
border-radius: 50%;
// background-color: @colorwhite;
background-color: var(--color-surfacelighter);
.play {
width: 26px;
height: 26px;
margin: auto;
margin-left: 26px;
// fill: @colormedium;
fill: var(--color-primary);
}
}
}
.progress-container {
grid-area: progress;
// background-color: @colorneutral;
background-color: var(--color-surface);
.progress {
height: 4px;
// background-color: @colorprimlight;
background-color: var(--color-primarylight);
}
}
.info {
grid-area: info;
.title, .year, .episode {
grid-area: text;
// color: @colorwhite60;
color: var(--color-surfacelighter60);
}
:first-child {
// color: @colorwhite;
color: var(--color-surfacelighter);
}
}
.popup-icon-container {
grid-area: popupIcon;
cursor: pointer;
// fill: @colorwhite;
fill: var(--color-surfacelighter);
.popup-icon {
width: 10px;
height: 10px;
}
}
&:hover {
// color: @colorblack;
// background-color: @colorwhite;
// outline: 2px solid @colorwhite;
color: var(--color-backgrounddarker);
background-color: var(--color-surfacelighter);
outline: 2px solid var(--color-surfacelighter);
.play-container {
cursor: pointer;
visibility: visible;
}
.info {
.title, .year {
// color: @colorblack60;
color: var(--color-backgrounddarker60);
}
:first-child {
// color: @colorblack;
color: var(--color-backgrounddarker);
}
}
.popup-icon {
// fill: @colorblack40;
fill: var(--color-backgrounddarker40);
}
}
}

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

@ -14,24 +14,24 @@
background-repeat: no-repeat;
background-position: center;
background-origin: border-box;
// background-color: @colordarkest;
background-color: var(--color-backgrounddark);
.in-cinema-container {
width: 100%;
height: 26px;
display: flex;
align-items: center;
justify-content: center;
// background-color: @colormedium;
background-color: var(--color-primary);
.in-cinema-icon {
height: 100%;
width: 12px;
// fill: @colorwhite;
fill: var(--color-surfacelighter);
margin-right: 6px;
}
.in-cinema-label {
font-size: 13px;
text-transform: uppercase;
// color: @colorwhite;
color: var(--color-surfacelighter);
}
}
}
@ -44,20 +44,20 @@
}
.name {
font-size: 12px;
// color: @colorwhite;
color: var(--color-surfacelighter);
}
.year {
font-size: 11px;
// color: @colorwhite80;
color: var(--color-surfacelighter80);
}
}
&:hover {
// background: @colorwhite;
background: var(--color-surfacelighter);
.name {
// color: @colorblack;
color: var(--color-backgrounddarker);
}
.year {
// color: @colorneutral;
color: var(--color-surface);
}
}
}

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

@ -7,26 +7,26 @@
align-items: center;
.nav-tab-icon {
height: @nav-bar-height;
// fill: @colorwhite80;
fill: var(--color-surfacelighter80);
width: 18px;
}
.nav-tab-label {
// color: @colorwhite80;
color: var(--color-surfacelighter80);
font-size: 15px;
margin-left: 10px;
}
&.active {
// background-color: @colorbgmain;
background-color: var(--color-backgrounddark);
}
&:hover:not(.active) {
// background-color: @colordarkest20;
background-color: var(--color-backgrounddark20);
}
&:hover, &.active {
.nav-tab-icon {
// fill: @colorwhite;
fill: var(--color-surfacelighter);
}
.nav-tab-label {
// color: @colorwhite;
color: var(--color-surfacelighter);
}
}
}

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

@ -16,11 +16,11 @@
outline: none;
appearance: none;
user-select: text;
// background-color: @colorsecondarylight80;
// color: @colorwhite80;
background-color: var(--color-secondary80);
color: var(--color-surfacelighter80);
font-size: 14px;
&::placeholder {
// color: @colorwhite80;
color: var(--color-surfacelighter80);
}
}
.submit-button {
@ -28,11 +28,11 @@
height: 100%;
cursor: pointer;
outline: none;
// background-color: @coloraccent80;
background-color: var(--color-secondarylighter80);
.submit-icon {
width: 14px;
height: 100%;
// fill: @colorwhite80;
fill: var(--color-surfacelighter80);
}
}
}
@ -40,19 +40,19 @@
.search-label {
padding: 0;
.query-input {
// background-color: @colorbgmain;
// color: @colorwhite;
background-color: var(--color-backgrounddark);
color: var(--color-surfacelighter);
font-size: 16px;
&::placeholder {
// color: @colorwhite;
color: var(--color-surfacelighter);
}
}
.submit-button {
width: @nav-bar-height;
// background-color: @coloraccent;
background-color: var(--color-secondarylighter);
.submit-icon {
width: 16px;
// fill: @colorwhite;
fill: var(--color-surfacelighter);
}
}
}

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

@ -6,7 +6,7 @@
background-color: transparent;
.icon {
height: @nav-bar-height;
// fill: @colorwhite80
fill: var(--color-surfacelighter80)
}
.user-icon {
width: 40%;
@ -15,9 +15,9 @@
width: 16%;
}
&:hover, &.active {
// background-color: @colordarkest20;
background-color: var(--color-backgrounddark20);
.icon {
// fill: @colorwhite;
fill: var(--color-surfacelighter);
}
}
}

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

@ -3,11 +3,11 @@
.nav-bar {
display: flex;
height: @nav-bar-height;
// background-color: @colorsecondary;
background-color: var(--color-secondarydark);
.nav-title {
padding: 0 10px;
font-size: 16px;
// color: @colorwhite;
color: var(--color-surfacelighter);
}
.search-input {
flex: 1;

2
src/common/ShareAddon/ShareAddon.js
View file

@ -20,7 +20,7 @@ const renderUrl = (copyToClipboard, url) => {
}
const ShareAddon = (props) => {
const placeholderIconUrl = iconDataUrl({ icon: 'ic_x', fill: colors.neutrallight });
const placeholderIconUrl = iconDataUrl({ icon: 'ic_x', fill: colors.surface });
const imageStyle = {
backgroundImage: `url('${placeholderIconUrl}')`
};

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

@ -55,8 +55,8 @@
}
.share-addon {
// color: @colorwhite;
// background-color: @colorwhite;
color: var(--color-surfacelighter);
background-color: var(--color-surfacelighter);
.x-container {
display: flex;
@ -70,7 +70,7 @@
}
.share-label {
// color: @colorblack;
color: var(--color-backgrounddarker);
font-weight: 500;
}
@ -86,30 +86,30 @@
justify-content: center;
.facebook-icon, .twitter-icon, .gplus-icon {
// fill: @colorwhite;
fill: var(--color-surfacelighter);
}
}
.facebook-button {
// background-color: @colorfb;
background-color: var(--color-secondary);
}
.twitter-button {
// background-color: @coloraccent;
background-color: var(--color-secondarylighter);
}
.gplus-button {
// background-color: #dd4b39;
background-color: var(--color-signal2);
}
}
.url-container {
display: flex;
border-style: solid;
// border-color: @colorneutrallight;
border-color: var(--color-surface);
.url, .copy-label {
// color: @colorblack40;
color: var(--color-backgrounddarker40);
}
.url {
@ -126,10 +126,10 @@
font-weight: 500;
display: flex;
justify-content: center;
// background-color: @colorblack20;
background-color: var(--color-backgrounddarker20);
.copy-icon {
// fill: @colorblack40;
fill: var(--color-backgrounddarker40);
}
}
}

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

@ -8,7 +8,7 @@
.user-panel {
width: var(--user-panel-width);
// background-color: @colordarkest;
background-color: var(--color-background);
.user-info {
display: grid;
@ -31,7 +31,7 @@
grid-area: email;
display: flex;
align-items: center;
// color: @colorwhite;
color: var(--color-surfacelighter);
padding-left: var(--spacing);
overflow: hidden;
white-space: pre;
@ -42,7 +42,7 @@
grid-area: login-logout;
display: flex;
align-items: center;
// color: @colorneutral;
color: var(--color-surface);
padding-left: var(--spacing);
overflow: hidden;
white-space: pre;
@ -50,7 +50,7 @@
&:hover {
cursor: pointer;
// color: @colorwhite;
color: var(--color-surfacelighter);
}
}
}
@ -59,24 +59,24 @@
display: flex;
align-items: center;
padding: var(--spacing);
// color: @colorwhite80;
color: var(--color-surfacelighter80);
.icon {
width: calc(var(--user-panel-width) * 0.08);
height: calc(var(--user-panel-width) * 0.08);
margin-right: var(--spacing);
// fill: @coloraccent;
fill: var(--color-secondarylighter);
}
&:hover {
cursor: pointer;
// color: @colorwhite;
// background-color: @coloraccent20;
color: var(--color-surfacelighter);
background-color: var(--color-secondarylighter20);
}
}
.separator {
height: var(--separator-height);
// background-color: @colorneutral;
background-color: var(--color-surface);
}
}

18
src/routes/Detail/StreamsList/Stream/styles.less
View file

@ -10,7 +10,7 @@
.stream-container {
width: var(--stream-width);
// background-color: @colorglass;
background-color: var(--color-backgroundlight);
.flex-row-container {
display: flex;
@ -26,7 +26,7 @@
.logo {
width: 100%;
// fill: @colorwhite;
fill: var(--color-surfacelighter);
}
}
@ -36,7 +36,7 @@
align-items: center;
margin: var(--spacing) 0 var(--spacing) var(--spacing);
font-size: var(--source-name-font-size);
// color: @colorwhite;
color: var(--color-surfacelighter);
word-break: break-all; //Firefox doesn't support { break-word }
word-break: break-word;
}
@ -51,14 +51,14 @@
.title {
font-size: var(--title-font-size);
// color: @colorwhite;
color: var(--color-surfacelighter);
word-break: break-all;
word-break: break-word;
}
.subtitle {
font-size: var(--subtitle-font-size);
// color: @colorwhite;
color: var(--color-surfacelighter);
word-break: break-all;
word-break: break-word;
}
@ -76,23 +76,23 @@
.play {
width: 100%;
// fill: @colorwhite;
fill: var(--color-surfacelighter);
}
}
}
.progress-container {
height: var(0.5 * var(--spacing));
// background-color: @colorprim;
background-color: var(--color-primarydark);
.progress {
height: 100%;
// background-color: @colorprimlight;
background-color: var(--color-primarylight);
}
}
&:hover {
cursor: pointer;
// background-color: @colorwhite20;
background-color: var(--color-surfacelighter20);
}
}

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

@ -11,7 +11,7 @@
.video-container {
width: var(--video-width);
background-color: @colorglass;
background-color: var(--color-backgroundlight);
.flex-row-container {
display: flex;
@ -50,14 +50,14 @@
.title {
font-size: var(--title-font-size);
color: @colorwhite;
color: var(--color-surfacelighter);
word-break: break-all; //Firefox doesn't support { break-word }
word-break: break-word;
}
.released-date {
font-size: var(--released-date-font-size);
color: @colorwhite60;
color: var(--color-surface);
}
.label-container {
@ -70,16 +70,16 @@
border-width: var(--label-border-width);
border-style: solid;
padding: 0 0.6em;
color: @colorwhite;
color: var(--color-surfacelighter);
}
.upcoming-label {
margin-right: var(--spacing);
border-color: @colorsignal5;
border-color: var(--color-signal5);
}
.watched-label {
border-color: @colorprimlight;
border-color: var(--color-primarylight);
}
}
@ -96,23 +96,23 @@
.arrow {
width: 100%;
fill: @colorwhite;
fill: var(--color-surfacelighter);
}
}
}
.progress-container {
height: calc(0.5 * var(--spacing));
background-color: @colorprim;
background-color: var(--color-primarydark);
.progress {
height: 100%;
background-color: @colorprimlight;
background-color: var(--color-primarylight);
}
}
&:hover {
cursor: pointer;
background-color: @colorwhite20;
background-color: var(--color-surfacelighter20);
}
}

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

@ -10,7 +10,7 @@
height: 100%;
display: inline-flex;
flex-direction: column;
background: @colordarkest;
background: var(--color-background);
.seasons-bar {
height: var(--seasons-bar-height);
@ -28,11 +28,11 @@
.button-icon {
width: 60%;
height: 60%;
fill: @colorwhite;
fill: var(--color-surfacelighter);
}
&:hover {
background-color: @colorwhite20;
background-color: var(--color-surfacelighter20);
}
}
}
@ -64,10 +64,10 @@
}
.scroll-container::-webkit-scrollbar-thumb {
background-color: @coloraccent80;
background-color: var(--color-secondarylighter80);
}
.scroll-container::-webkit-scrollbar-track {
background-color: @colorglass;
background-color: var(--color-background);
}
}

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

@ -2,7 +2,7 @@
height: 100%;
width: 100%;
display: flex;
// color: @colorwhite60;
color: var(--color-surfacelighter60);
.side-menu {
width: 240px;
@ -10,7 +10,7 @@
display: flex;
flex-direction: column;
font-size: 14px;
// background: @colordarkest;
background: var(--color-backgrounddark);
.menu-option {
padding: 14px;
@ -18,8 +18,8 @@
&:hover, &.selected {
cursor: pointer;
// color: @colorwhite;
// background: @colorglass;
color: var(--color-surfacelighter);
background: var(--color-background);
}
}
}
@ -52,14 +52,14 @@
&:hover {
.preference {
// color: @colorwhite;
color: var(--color-surfacelighter);
}
}
}
&:not(:last-child) {
margin-bottom: 30px;
// border-bottom: 1px solid @colormedium;
border-bottom: 1px solid var(--color-primary);
}
}
}