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

Addon styles adapted to design changes

Browse source
This commit is contained in:
svetlagasheva 2020-03-04 14:14:47 +02:00
parent 8ce2beb818
commit 4bb917d2a2
1 changed files with 46 additions and 33 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

79
src/routes/Addons/Addon/styles.less
View file

@ -1,16 +1,18 @@
@import (reference) '~stremio-colors/dist/less/stremio-colors.less';
.addon-container {
display: flex;
flex-direction: row;
align-items: flex-start;
padding: 1rem;
background-color: var(--color-backgroundlighter);
padding: 1.5rem;
background-color: @color-background;
cursor: inherit;
.logo-container {
flex: none;
width: 8rem;
height: 8rem;
background-color: var(--color-backgrounddarker);
width: 6rem;
height: 6rem;
background-color: @color-surface-light5;
.logo {
display: block;
@ -26,7 +28,7 @@
width: 100%;
height: 100%;
padding: 1rem;
fill: var(--color-surfacelighter);
fill: @color-secondaryvariant1-light3;
}
}
@ -47,7 +49,8 @@
padding: 0 0.5rem;
max-height: 3.6em;
font-size: 1.6rem;
color: var(--color-surfacelighter);
opacity: 0.9;
color: @color-surface-light5;
}
.version-container {
@ -57,7 +60,8 @@
margin-top: 0.5rem;
padding: 0 0.5rem;
max-height: 2.4em;
color: var(--color-surfacelight);
opacity: 0.6;
color: @color-surface-light5;
}
.types-container {
@ -67,7 +71,8 @@
margin-top: 0.5rem;
padding: 0 0.5rem;
max-height: 2.4em;
color: var(--color-surfacelight);
opacity: 0.4;
color: @color-surface-light5;
text-transform: capitalize;
}
@ -78,7 +83,8 @@
margin-top: 0.5rem;
padding: 0 0.5rem;
max-height: 4.8em;
color: var(--color-surfacelight);
opacity: 0.9;
color: @color-surface-light5;
}
}
@ -91,7 +97,7 @@
flex-direction: row;
align-items: center;
justify-content: center;
height: 3.5rem;
height: 4rem;
padding: 0 1rem;
&:not(:first-child) {
@ -100,8 +106,8 @@
.icon {
flex: none;
width: 1.5rem;
height: 1.5rem;
width: 2rem;
height: 2rem;
margin-right: 1rem;
}
@ -117,57 +123,64 @@
}
.install-button-container {
background-color: var(--color-signal5);
background-color: @color-accent3;
&:hover {
filter: brightness(1.2);
background-color: @color-accent3-light2;
}
&:focus {
outline-color: @color-surface-light5;
}
.label {
color: var(--color-surfacelighter);
color: @color-surface-light5;
}
}
.uninstall-button-container {
outline-color: var(--color-surfacedark);
outline-color: @color-background-light3;
outline-style: solid;
&:hover {
outline-color: var(--color-surfacelight);
background-color: @color-background-light2;
}
.label {
color: var(--color-surfacelight);
}
&:focus {
outline-color: @color-surface-light5;
}
.label {
color: var(--color-surfacedark);
opacity: 0.9;
color: @color-surface-light5;
}
}
.share-button-container {
outline-color: var(--color-secondarylighter);
outline-style: solid;
&:hover {
outline: none;
background: var(--color-secondarylight);
&:hover, &:focus {
.icon {
fill: var(--color-surfacelighter);
fill: @color-secondaryvariant1-light1;
}
.label {
color: var(--color-surfacelighter);
text-decoration: underline;
color: @color-secondaryvariant1-light2;
}
}
&:focus {
outline: none;
background-color: @color-surface-light5-20;
}
.icon {
fill: var(--color-secondarylighter);
opacity: 0.6;
fill: @color-secondaryvariant1-dark1;
}
.label {
color: var(--color-secondarylighter);
opacity: 0.9;
color: @color-secondaryvariant1;
}
}
}