Creepso/stremio-web
1
0
Fork 0
mirror of https://github.com/Stremio/stremio-web.git synced 2026-03-29 01:28:48 +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 {
display: flex;
justify-content: center;
align-items: center;
background-color: var(--color-backgrounddark40);
background-color: @color-background-dark5-40;
.modal-dialog-container {
flex: none;
display: flex;
flex-direction: column;
max-width: 80%;
width: 38rem;
max-height: 80%;
background-color: var(--color-surfacelighter);
background-color: @color-surface-light5;
.header-container {
.close-button-container {
flex: none;
align-self: stretch;
display: flex;
flex-direction: row;
justify-content: flex-end;
padding: 0.2rem 0.2rem 0;
align-self: flex-end;
width: 2rem;
height: 2rem;
margin: 0.2rem 0.2rem 0 0;
padding: 0.5rem;
.title-container {
flex: 1;
align-self: center;
max-height: 2.4em;
padding: 0 0.5rem;
font-size: 1.2rem;
color: var(--color-backgrounddarker);
.icon {
display: block;
width: 100%;
height: 100%;
fill: @color-surface-dark1;
}
.close-button-container {
flex: none;
align-self: flex-start;
width: 2rem;
height: 2rem;
padding: 0.5rem;
&:hover, &:focus {
.icon {
display: block;
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);
fill: @color-surface-light1;
}
}
&: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 {
flex: 1;
align-self: stretch;
margin: 2rem 1rem 0;
margin: 1.5rem 1rem 0;
padding: 0 1rem;
overflow-y: auto;
@ -72,7 +65,7 @@
.buttons-container {
flex: none;
align-self: stretch;
margin: 1rem 2rem 0;
margin: 2rem 2rem 0;
display: flex;
flex-direction: row;
flex-wrap: wrap;
@ -90,17 +83,15 @@
flex-direction: row;
align-items: center;
justify-content: center;
padding: 1rem;
background-color: var(--color-signal5);
&:focus {
outline-width: calc(1.5 * var(--focus-outline-size));
outline-color: var(--color-surfacelighter);
outline-offset: calc(-2 * var(--focus-outline-size));
}
padding: 1.2rem;
background-color: @color-accent3;
&:hover {
filter: brightness(1.2);
background-color: @color-accent3-light2;
}
&:focus {
outline-color: @color-background-dark5;
}
&:not(:last-child) {
@ -112,7 +103,7 @@
width: 1.2rem;
height: 1.2rem;
margin-right: .5rem;
fill: var(--color-surfacelighter);
fill: @color-surface-light5;
}
.label {
@ -122,6 +113,6 @@
max-height: 3.6em;
font-size: 1.1rem;
text-align: center;
color: var(--color-surfacelighter);
color: @color-surface-light5;
}
}