mirror of
https://github.com/zoriya/flood.git
synced 2025-12-19 21:55:15 +00:00
a72fb8acb4
* Global upload/download throttles mirrored in modal and dropdown * Max client memory usage * Verify hash after downloading flag
393 lines
8.4 KiB
SCSS
393 lines
8.4 KiB
SCSS
$modal--background: #28303b;
|
|
|
|
$modal--heading--background: #303845;
|
|
$modal--heading--foreground: #a3bad4;
|
|
$modal--heading--border: #1a232c;
|
|
|
|
$modal--sub-heading--foreground: desaturate(darken($modal--heading--foreground, 15%), 15%);
|
|
|
|
$modal--transition--duration: 0.5s;
|
|
$modal--transition--scale: 0.85;
|
|
|
|
$modal--body--foreground: lighten(#6c7e92, 6%);
|
|
|
|
$modal--tab--foreground: #6f839e;
|
|
$modal--tab--foreground--active: $blue--lighter;
|
|
$modal--tab--border--active: $blue--lighter;
|
|
|
|
$modal--overlay--base: #0b1014;
|
|
$modal--overlay: rgba($modal--overlay--base, 0.95);
|
|
|
|
$modal--content--shadow: #05080a;
|
|
|
|
$modal--border-radius: 3px;
|
|
$modal--padding--horizontal: $spacing-unit;
|
|
$modal--padding--vertical: $modal--padding--horizontal * 4/5;
|
|
|
|
$modal--content--padding--top: $spacing-unit * 4/5;
|
|
$modal--content--padding--right: $spacing-unit;
|
|
$modal--content--padding--bottom: $spacing-unit * 4/5;
|
|
$modal--content--padding--left: $spacing-unit;
|
|
|
|
$modal--actions--margin--top: $spacing-unit;
|
|
|
|
$modal--tabs--margin--top: $spacing-unit * 1/5;
|
|
$modal--tabs--margin--right: $spacing-unit * -1/5;
|
|
$modal--tabs--margin--bottom: 0;
|
|
$modal--tabs--margin--left: $spacing-unit * -1/5;
|
|
|
|
$modal--vertical--tabs--margin--top: $spacing-unit * 1/5;
|
|
$modal--vertical--tabs--margin--right: 0;
|
|
$modal--vertical--tabs--margin--bottom: 0;
|
|
$modal--vertical--tabs--margin--left: $modal--padding--horizontal * -1;
|
|
|
|
$modal--tabs--padding--top: $spacing-unit * 1/5;
|
|
$modal--tabs--padding--right: $spacing-unit * 1/5;
|
|
$modal--tabs--padding--bottom: $spacing-unit * 2/5;
|
|
$modal--tabs--padding--left: $spacing-unit * 1/5;
|
|
|
|
$modal--tabs--padding--vertical--top: $spacing-unit * 1/5;
|
|
$modal--tabs--padding--vertical--right: $spacing-unit * 2/5;
|
|
$modal--tabs--padding--vertical--bottom: $spacing-unit * 1/5;
|
|
$modal--tabs--padding--vertical--left: $modal--padding--horizontal;
|
|
|
|
$modal--tabs--in-body--background: #2a323e;
|
|
|
|
.modal {
|
|
background: $modal--overlay;
|
|
height: 100%;
|
|
left: 0;
|
|
position: fixed;
|
|
top: 0;
|
|
transition: opacity $modal--transition--duration;
|
|
width: 100%;
|
|
z-index: 100;
|
|
|
|
&--align-center {
|
|
text-align: center;
|
|
}
|
|
|
|
&__tabs {
|
|
color: $modal--tab--foreground;
|
|
font-size: 0.85rem;
|
|
font-weight: 400;
|
|
margin: $modal--tabs--margin--top $modal--tabs--margin--right $modal--tabs--margin--bottom $modal--tabs--margin--left;
|
|
|
|
.modal {
|
|
|
|
&__tab {
|
|
cursor: pointer;
|
|
display: inline-block;
|
|
margin-right: $spacing-unit * 2/5;
|
|
padding: $modal--tabs--padding--top $modal--tabs--padding--right $modal--tabs--padding--bottom $modal--tabs--padding--left;
|
|
position: relative;
|
|
|
|
&:after {
|
|
bottom: 0;
|
|
content: '';
|
|
height: 1px;
|
|
left: 0;
|
|
position: absolute;
|
|
right: 0;
|
|
transition: background 0.25s;
|
|
}
|
|
|
|
&:last-child {
|
|
margin-right: 0;
|
|
}
|
|
|
|
&.is-active {
|
|
color: $modal--tab--foreground--active;
|
|
font-weight: 800;
|
|
|
|
&:after {
|
|
background: $modal--tab--border--active;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
&__header {
|
|
background: $modal--heading--background;
|
|
border-radius: $modal--border-radius $modal--border-radius 0 0;
|
|
box-shadow: inset 0 -1px 0 $modal--heading--border;
|
|
color: $modal--heading--foreground;
|
|
flex: 0 0 auto;
|
|
font-size: 1.25em;
|
|
font-weight: 400;
|
|
overflow: hidden;
|
|
padding: $modal--padding--vertical $modal--padding--horizontal;
|
|
|
|
&.has-tabs {
|
|
|
|
.modal--tabs-in-header & {
|
|
padding-bottom: 0;
|
|
}
|
|
}
|
|
}
|
|
|
|
&__content {
|
|
flex: 1 1 auto;
|
|
padding: $modal--content--padding--top $modal--content--padding--right $modal--content--padding--bottom $modal--content--padding--left;
|
|
|
|
&__wrapper {
|
|
background: $modal--background;
|
|
border-radius: $modal--border-radius;
|
|
box-shadow:
|
|
0 0 256px rgba($modal--content--shadow, 0.1),
|
|
0 2px 4px rgba($modal--content--shadow, 0.5),
|
|
0 2px 8px rgba($modal--content--shadow, 0.1),
|
|
0 4px 32px rgba($modal--content--shadow, 0.3);
|
|
display: flex;
|
|
flex-direction: column;
|
|
height: auto;
|
|
left: 50%;
|
|
max-height: 80%;
|
|
max-width: 80%;
|
|
overflow: hidden;
|
|
position: absolute;
|
|
top: 10%;
|
|
transition: transform $modal--transition--duration;
|
|
transform: translate(-50%, 0);
|
|
transform-origin: 50% 50%;
|
|
width: 500px;
|
|
}
|
|
}
|
|
|
|
&__body {
|
|
color: $modal--body--foreground;
|
|
flex: 1 1 auto;
|
|
font-size: 0.9em;
|
|
overflow: auto;
|
|
overflow-x: hidden;
|
|
|
|
.modal--tabs-in-body & {
|
|
overflow: hidden;
|
|
}
|
|
}
|
|
|
|
&__footer {
|
|
flex: 0 0 auto;
|
|
padding: 0 $modal--padding--horizontal $modal--padding--vertical $modal--padding--horizontal;
|
|
|
|
.modal {
|
|
|
|
&__actions {
|
|
margin-top: 0;
|
|
}
|
|
}
|
|
}
|
|
|
|
&__actions {
|
|
margin-top: $modal--actions--margin--top;
|
|
}
|
|
|
|
&__button-group {
|
|
align-items: center;
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
|
|
.modal--align-center & {
|
|
justify-content: center;
|
|
}
|
|
|
|
.button,
|
|
.checkbox {
|
|
|
|
& + .button,
|
|
& + .checkbox {
|
|
margin-left: $spacing-unit * 3/5;
|
|
}
|
|
}
|
|
}
|
|
|
|
&__animation-enter {
|
|
opacity: 0;
|
|
|
|
.modal {
|
|
|
|
&__content {
|
|
|
|
&__wrapper {
|
|
transform: translate(-50%, 0) scale($modal--transition--scale);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
&__animation-enter-active {
|
|
opacity: 1;
|
|
|
|
.modal {
|
|
|
|
&__content {
|
|
|
|
&__wrapper {
|
|
transform: translate(-50%, 0) scale(1, 1);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
&__animation-leave {
|
|
opacity: 1;
|
|
pointer-events: none;
|
|
|
|
.modal {
|
|
|
|
&__content {
|
|
|
|
&__wrapper {
|
|
transform: translate(-50%, 0) scale(1, 1);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
&__animation-leave-active {
|
|
opacity: 0;
|
|
|
|
.modal {
|
|
|
|
&__content {
|
|
|
|
&__wrapper {
|
|
transform: translate(-50%, 0) scale($modal--transition--scale);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
&--vertical {
|
|
|
|
&.modal {
|
|
|
|
&--tabs-in-header {
|
|
flex-direction: row;
|
|
|
|
.modal {
|
|
|
|
&__header {
|
|
border-radius: $modal--border-radius 0 0 $modal--border-radius;
|
|
box-shadow: inset -1px 0 0 $modal--heading--border;
|
|
flex-basis: 175px;
|
|
padding-bottom: $modal--padding--horizontal;
|
|
padding-right: 0;
|
|
max-width: 175px;
|
|
}
|
|
|
|
&__content {
|
|
flex: 1 0 auto;
|
|
|
|
& + .modal__footer {
|
|
margin-top: $spacing-unit * 3/5;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
&--tabs-in-body {
|
|
|
|
.modal {
|
|
|
|
&__body {
|
|
display: flex;
|
|
flex: 1 1 auto;
|
|
flex-direction: row;
|
|
}
|
|
|
|
&__content {
|
|
overflow: auto;
|
|
overflow-x: hidden;
|
|
}
|
|
|
|
&__tabs {
|
|
background: $modal--tabs--in-body--background;
|
|
box-shadow: inset -1px 0 $modal--heading--border;
|
|
flex: 0 0 135px;
|
|
margin: 0;
|
|
padding-top: $modal--padding--vertical;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.modal {
|
|
|
|
&__tabs {
|
|
margin: $modal--vertical--tabs--margin--top $modal--vertical--tabs--margin--right $modal--vertical--tabs--margin--bottom $modal--vertical--tabs--margin--left;
|
|
|
|
.modal {
|
|
|
|
&__tab {
|
|
display: block;
|
|
margin-right: 0;
|
|
padding: $modal--tabs--padding--vertical--top $modal--tabs--padding--vertical--right $modal--tabs--padding--vertical--bottom $modal--tabs--padding--vertical--left;
|
|
|
|
&:after {
|
|
bottom: 0;
|
|
content: '';
|
|
height: auto;
|
|
left: auto;
|
|
position: absolute;
|
|
right: 0;
|
|
top: 0;
|
|
transition: background 0.25s;
|
|
width: 1px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
&__body {
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
&__content {
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
&__actions {
|
|
flex: 0 0 auto;
|
|
}
|
|
}
|
|
}
|
|
|
|
&--size {
|
|
|
|
&-large {
|
|
width: 700px;
|
|
|
|
&.modal {
|
|
|
|
&__content {
|
|
|
|
&__wrapper {
|
|
bottom: 10%;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.form {
|
|
|
|
&__section {
|
|
|
|
&__heading {
|
|
color: $modal--heading--foreground;
|
|
font-size: 0.925em;
|
|
font-weight: 500;
|
|
}
|
|
|
|
&__sub-heading {
|
|
color: $modal--sub-heading--foreground;
|
|
font-size: 0.875em;
|
|
}
|
|
}
|
|
}
|
|
}
|