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

ModalDialog styles adapted to design changes

Browse source
This commit is contained in:
svetlagasheva 2020-03-06 16:21:38 +02:00
parent aa8c02da75
commit 00e7a987ff
1 changed files with 43 additions and 52 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

95
src/common/ModalDialog/styles.less
View file

@ -1,66 +1,59 @@
@import (reference) '~stremio-colors/dist/less/stremio-colors.less';
.modal-container { .modal-container {
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
background-color: var(--color-backgrounddark40); background-color: @color-background-dark5-40;
.modal-dialog-container { .modal-dialog-container {
flex: none; flex: none;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
max-width: 80%; width: 38rem;
max-height: 80%; max-height: 80%;
background-color: var(--color-surfacelighter); background-color: @color-surface-light5;
.header-container { .close-button-container {
flex: none; flex: none;
align-self: stretch; align-self: flex-end;
display: flex; width: 2rem;
flex-direction: row; height: 2rem;
justify-content: flex-end; margin: 0.2rem 0.2rem 0 0;
padding: 0.2rem 0.2rem 0; padding: 0.5rem;
.title-container { .icon {
flex: 1; display: block;
align-self: center; width: 100%;
max-height: 2.4em; height: 100%;
padding: 0 0.5rem; fill: @color-surface-dark1;
font-size: 1.2rem;
color: var(--color-backgrounddarker);
} }
.close-button-container { &:hover, &:focus {
flex: none;
align-self: flex-start;
width: 2rem;
height: 2rem;
padding: 0.5rem;
.icon { .icon {
display: block; fill: @color-surface-light1;
width: 100%;
height: 100%;
fill: var(--color-surfacedark);
}
&:hover, &:focus {
background-color: var(--color-surfacelight);
.icon {
fill: var(--color-surfacedarker);
}
}
&:focus {
outline-color: var(--color-surfacedark);
} }
} }
&:focus {
outline-color: @color-background-dark5;
}
}
.title-container {
flex: 1 0 auto;
max-height: 2.4em;
margin: 0 2rem;
font-size: 1.2rem;
font-weight: 500;
opacity: 0.9;
color: @color-background-dark5;
} }
.modal-dialog-content { .modal-dialog-content {
flex: 1; flex: 1;
align-self: stretch; align-self: stretch;
margin: 2rem 1rem 0; margin: 1.5rem 1rem 0;
padding: 0 1rem; padding: 0 1rem;
overflow-y: auto; overflow-y: auto;
@ -72,7 +65,7 @@
.buttons-container { .buttons-container {
flex: none; flex: none;
align-self: stretch; align-self: stretch;
margin: 1rem 2rem 0; margin: 2rem 2rem 0;
display: flex; display: flex;
flex-direction: row; flex-direction: row;
flex-wrap: wrap; flex-wrap: wrap;
@ -90,17 +83,15 @@
flex-direction: row; flex-direction: row;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
padding: 1rem; padding: 1.2rem;
background-color: var(--color-signal5); background-color: @color-accent3;
&:focus {
outline-width: calc(1.5 * var(--focus-outline-size));
outline-color: var(--color-surfacelighter);
outline-offset: calc(-2 * var(--focus-outline-size));
}
&:hover { &:hover {
filter: brightness(1.2); background-color: @color-accent3-light2;
}
&:focus {
outline-color: @color-background-dark5;
} }
&:not(:last-child) { &:not(:last-child) {
@ -112,7 +103,7 @@
width: 1.2rem; width: 1.2rem;
height: 1.2rem; height: 1.2rem;
margin-right: .5rem; margin-right: .5rem;
fill: var(--color-surfacelighter); fill: @color-surface-light5;
} }
.label { .label {
@ -122,6 +113,6 @@
max-height: 3.6em; max-height: 3.6em;
font-size: 1.1rem; font-size: 1.1rem;
text-align: center; text-align: center;
color: var(--color-surfacelighter); color: @color-surface-light5;
} }
} }