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

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

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

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