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

Addons styles adapted to design changes

Browse source
This commit is contained in:
svetlagasheva 2020-03-06 18:19:06 +02:00
parent af7970b2bd
commit dfe6495552
1 changed files with 99 additions and 13 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

112
src/routes/Addons/styles.less
View file

@ -4,6 +4,10 @@
multiselect-menu-container: menu-container;
}
:import('~stremio/common/ModalDialog/styles.less') {
cancel-button-label: label;
}
.addons-container {
display: flex;
flex-direction: column;
@ -80,6 +84,7 @@
display: flex;
flex-direction: row;
align-items: center;
margin-right: 8rem;
.icon {
width: 2.3rem;
@ -221,15 +226,9 @@
border: var(--focus-outline-size) solid @color-surface-light5;
}
.icon {
flex: none;
width: 1.5rem;
height: 1.5rem;
fill: @color-secondaryvariant1;
}
.search-input {
flex: 1;
margin-right: 1rem;
font-size: 1.1rem;
color: @color-surface-light5;
@ -239,6 +238,14 @@
color: @color-secondaryvariant1-light1;
}
}
.icon {
flex: none;
width: 1.5rem;
height: 1.5rem;
fill: @color-secondaryvariant1;
}
}
}
@ -264,20 +271,99 @@
}
.add-addon-modal-container {
.notice {
margin-bottom: 1.5rem;
font-size: 1rem;
opacity: 0.9;
}
.addon-url-input {
width: 25rem;
padding: 0.5rem 1rem;
color: @color-surface;
border: thin solid @color-surface;
width: 100%;
padding: 0.8rem;
color: @color-surface-dark5;
border: var(--focus-outline-size) solid @color-surface-light2;
&:hover, &:focus {
outline-style: solid;
outline-width: var(--focus-outline-size);
outline-color: @color-surface-light4;
outline-offset: calc(-1 * var(--focus-outline-size));
}
&:focus {
outline-color: @color-background-dark5;
}
}
.cancel-button {
background-color: @color-surface;
background-color: transparent;
&:hover {
background-color: @color-surface-light3;
}
&:focus {
outline-color: @color-background-dark5;
}
.cancel-button-label {
color: @color-surface-dark2;
}
}
}
.share-modal-container {
.title-container {
display: flex;
flex-direction: row;
align-items: center;
.logo, .icon {
flex: none;
float: left;
width: 5rem;
height: 5rem;
margin-right: 1rem;
padding: 0.5rem;
}
.logo {
object-fit: contain;
object-position: center;
}
.icon {
fill: @color-secondaryvariant1-light3;
}
.name-container {
display: flex;
flex-direction: row;
align-items: baseline;
width: 100%;
.name {
margin-right: 1rem;
max-width: 80%;
max-height: 1.2em;
white-space: pre;
text-overflow: ellipsis;
font-size: 2rem;
font-weight: 300;
opacity: 0.9;
}
.version {
max-width: 20%;
max-height: 1.2em;
white-space: pre;
text-overflow: ellipsis;
opacity: 0.6;
}
}
}
.share-prompt-container {
width: 25rem;
margin-top: 1rem;
}
}