Properly import the old global css styles

master
WolverinDEV 2021-03-17 16:02:06 +01:00
parent 29639ca836
commit 5b289b15d7
37 changed files with 9027 additions and 9644 deletions

View File

@ -1,36 +1,31 @@
import "!style-loader!css-loader?url=false!sass-loader?sourceMap=true!./static/properties.scss"
import "!style-loader!css-loader?url=false!sass-loader?sourceMap=true!./static/main-layout.scss"
import "!style-loader!css-loader?url=false!sass-loader?sourceMap=true!./static/general.scss"
import "!style-loader!css-loader?url=false!sass-loader?sourceMap=true!./static/frame-chat.scss"
import "!style-loader!css-loader?url=false!sass-loader?sourceMap=true!./static/server-log.scss"
import "!style-loader!css-loader?url=false!sass-loader?sourceMap=true!./static/scroll.scss"
import "!style-loader!css-loader?url=false!sass-loader?sourceMap=true!./static/hostbanner.scss"
import "!style-loader!css-loader?url=false!sass-loader?sourceMap=true!./static/htmltags.scss"
import "!style-loader!css-loader?url=false!sass-loader?sourceMap=true!./static/menu-bar.scss"
import "!style-loader!css-loader?url=false!sass-loader?sourceMap=true!./static/mixin.scss"
import "!style-loader!css-loader?url=false!sass-loader?sourceMap=true!./static/modal.scss"
import "!style-loader!css-loader?url=false!sass-loader?sourceMap=true!./static/modals.scss"
import "!style-loader!css-loader?url=false!sass-loader?sourceMap=true!./static/modal-about.scss"
import "!style-loader!css-loader?url=false!sass-loader?sourceMap=true!./static/modal-avatar.scss"
import "!style-loader!css-loader?url=false!sass-loader?sourceMap=true!./static/modal-banclient.scss"
import "!style-loader!css-loader?url=false!sass-loader?sourceMap=true!./static/modal-banlist.scss"
import "!style-loader!css-loader?url=false!sass-loader?sourceMap=true!./static/modal-channelinfo.scss"
import "!style-loader!css-loader?url=false!sass-loader?sourceMap=true!./static/modal-clientinfo.scss"
import "!style-loader!css-loader?url=false!sass-loader?sourceMap=true!./static/modal-connect.scss"
import "!style-loader!css-loader?url=false!sass-loader?sourceMap=true!./static/modal-group-assignment.scss"
import "!style-loader!css-loader?url=false!sass-loader?sourceMap=true!./static/modal-icons.scss"
import "!style-loader!css-loader?url=false!sass-loader?sourceMap=true!./static/modal-identity.scss"
import "!style-loader!css-loader?url=false!sass-loader?sourceMap=true!./static/modal-newcomer.scss"
import "!style-loader!css-loader?url=false!sass-loader?sourceMap=true!./static/modal-invite.scss"
import "!style-loader!css-loader?url=false!sass-loader?sourceMap=true!./static/modal-keyselect.scss"
import "!style-loader!css-loader?url=false!sass-loader?sourceMap=true!./static/modal-poke.scss"
import "!style-loader!css-loader?url=false!sass-loader?sourceMap=true!./static/modal-query.scss"
import "!style-loader!css-loader?url=false!sass-loader?sourceMap=true!./static/modal-server.scss"
import "!style-loader!css-loader?url=false!sass-loader?sourceMap=true!./static/modal-musicmanage.scss"
import "!style-loader!css-loader?url=false!sass-loader?sourceMap=true!./static/modal-serverinfobandwidth.scss"
import "!style-loader!css-loader?url=false!sass-loader?sourceMap=true!./static/modal-serverinfo.scss"
import "!style-loader!css-loader?url=false!sass-loader?sourceMap=true!./static/modal-settings.scss"
import "!style-loader!css-loader?url=false!sass-loader?sourceMap=true!./static/overlay-image-preview.scss"
import "./static/properties.scss"
import "./static/main-layout.scss"
import "./static/general.scss"
import "./static/frame-chat.scss"
import "./static/htmltags.scss"
import "./static/mixin.scss"
import "./static/modal.scss"
import "./static/modals.scss"
import "./static/modal-about.scss"
import "./static/modal-avatar.scss"
import "./static/modal-banclient.scss"
import "./static/modal-banlist.scss"
import "./static/modal-channelinfo.scss"
import "./static/modal-clientinfo.scss"
import "./static/modal-group-assignment.scss"
import "./static/modal-icons.scss"
import "./static/modal-identity.scss"
import "./static/modal-newcomer.scss"
import "./static/modal-invite.scss"
import "./static/modal-keyselect.scss"
import "./static/modal-poke.scss"
import "./static/modal-query.scss"
import "./static/modal-server.scss"
import "./static/modal-musicmanage.scss"
import "./static/modal-serverinfobandwidth.scss"
import "./static/modal-serverinfo.scss"
import "./static/modal-settings.scss"
import "./static/overlay-image-preview.scss"
import "!style-loader!css-loader?url=false!sass-loader?sourceMap=true!./static/ts/tab.scss"
import "!style-loader!css-loader?url=false!sass-loader?sourceMap=true!./static/ts/country.scss"
import "./static/ts/tab.scss"
import "./static/ts/country.scss"

View File

@ -1,5 +1,5 @@
@import "mixin";
:global {
/* Avatar/Icon loading animations */
.icon_loading {
border: 2px solid #f3f3f3; /* Light grey */
@ -185,3 +185,4 @@ iframe {
select, input {
-webkit-appearance: none;
}
}

View File

@ -1,83 +0,0 @@
@import "mixin";
html:root {
--hostbanner-background: #2e2e2e;
}
.hostbanner {
.container-hostbanner {
position: relative;
overflow: hidden;
height: 1000px; /* allocate some height to be truncated by the flex :) */
display: flex;
flex-direction: column;
justify-content: stretch;
cursor: pointer;
&:not(.no-background) {
background-color: var(--hostbanner-background);
border-top-left-radius: 5px;
border-top-right-radius: 5px;
-moz-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.25);
-webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.25);
box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.25);
padding-bottom: 5px;
}
&.disabled {
padding-bottom: 0;
height: 0;
}
@include transition(height 0.5s ease-in-out);
.hostbanner-image-container {
height: 100%;
width: 100%;
flex-grow: 1;
flex-shrink: 1;
min-height: 0;
text-align: center;
&.hostbanner-mode-0 {
/* do not adjust */
display: block;
}
&.hostbanner-mode-1 {
/* do adjust and ignore ration */
display: flex;
height: 100%;
width: 100%;
> img {
width: 100%;
height: 100%;
}
}
&.hostbanner-mode-2 {
display: flex;
flex-direction: row;
justify-content: space-around;
> img {
object-fit: contain;
max-height: 100%;
/* "Normal" third more */
//max-width: 100%;
/* better adoptable mode */
width: min-content;
}
}
}
}
}

View File

@ -1,5 +1,7 @@
:global {
.htmltag-client, .htmltag-channel {
color: var(--text);
font-weight: bold;
cursor: pointer;
}
}

View File

@ -16,8 +16,15 @@ html:root {
--channel-chat-seperator: #1e1e1e;
--channel-chat-seperator-selected: #707070;
--server-log-text: #6e6e6e;
--server-log-error: #e62222;
--server-log-tree-entry: #d8d8d8;
--hostbanner-background: #2e2e2e;
}
:global {
.hide-small {
opacity: 1;
transition: opacity $animation_length linear;
@ -90,3 +97,4 @@ html, body {
body {
background: var(--app-background)!important;
}
}

View File

@ -1,133 +0,0 @@
@import "mixin";
.top-menu-bar {
@include user-select(none);
height: 1.5em;
width: 100%;
background: #fafafa;
display: flex;
flex-direction: row;
justify-content: flex-start;
position: fixed;
top: 0;
z-index: 201;
font-family: Arial, serif;
.container-menu-item {
position: relative;
.menu-item {
cursor: pointer;
padding-left: .4em;
padding-right: .4em;
height: 100%;
display: flex;
flex-direction: row;
width: max-content;
> * {
vertical-align: middle;
}
.container-icon {
height: 1.2em;
width: 1.2em;
padding: .1em;
font-size: 1em;
margin-right: .2em;
display: inline-block;
}
.container-label {
display: inline-block;
align-self: center;
a {
white-space: nowrap;
}
}
}
&:hover:not(.disabled) {
background-color: rgba(0, 0, 0, 0.27);
}
&.disabled {
background-color: rgba(0, 0, 0, 0.13);
}
&.hidden {
display: none;
}
.sub-menu {
z-index: 1000;
display: none;
background: white;
position: absolute;
top: 100%;
border: 1px solid black;
> .container-menu-item {
padding-right: .5em;
}
}
&.type-side {
&.sub-entries:after {
position: absolute;
display: block;
content: '>';
top: 0;
bottom: 0;
right: .4em;
}
> .sub-menu {
top: -1px; /* border */
left: 100%;
}
&:hover {
> .sub-menu {
display: block;
}
}
}
&.active {
background-color: rgba(0, 0, 0, 0.27);
> .sub-menu {
display: block;
}
}
}
> .container-menu-item {
> .menu-item {
.container-icon {
display: none;
}
}
}
hr {
margin-top: .125em;
margin-bottom: .125em;
}
}

View File

@ -1,3 +1,4 @@
:global {
.modal-about {
display: flex!important;
flex-direction: row!important;
@ -57,3 +58,4 @@
}
}
}
}

View File

@ -1,3 +1,4 @@
:global {
.modal-avatar-list {
display: flex!important;;
flex-direction: row!important;;
@ -290,9 +291,12 @@
}
}
}
}
@media all and (max-width: 40rem) {
:global {
.modal-avatar-upload .container-preview .previews {
flex-direction: column;
}
}
}

View File

@ -1,6 +1,7 @@
@import "mixin";
@import "properties";
:global {
//TODO: Resize style!
.modal-body.modal-ban-client {
padding: 0!important;
@ -291,3 +292,4 @@
}
}
}
}

View File

@ -3,6 +3,7 @@
$category_slide_animation_length: .25s;
:global {
.modal-body.modal-ban-list {
padding: 0!important;
@ -807,3 +808,4 @@ $category_slide_animation_length: .25s;
}
}
}
}

View File

@ -1,6 +1,7 @@
@import "mixin";
@import "properties";
:global {
.modal-body.modal-channel-info {
display: flex!important;
flex-direction: column!important;
@ -159,3 +160,4 @@
padding: 1em;
}
}
}

View File

@ -1,6 +1,7 @@
@import "mixin";
@import "properties";
:global {
.modal-body.modal-client-info {
padding: 0!important;
@ -616,3 +617,4 @@
}
}
}
}

View File

@ -1,353 +0,0 @@
@import "mixin";
.modal .modal-connect {
@include user-select(none);
font-size: 1rem;
max-width: 100000px; /* max 100000px width, else we shrink the modal */
padding: 0!important; /* override the default padding */
display: flex!important;
flex-direction: column!important;
justify-content: stretch!important;
.container-connect-input {
flex-grow: 0;
flex-shrink: 0;
/* apply the default padding */
padding: .75em 24px;
border-left: 2px solid #0073d4;
overflow: hidden;
> .row {
display: flex;
flex-direction: row;
justify-content: stretch;
> *:not(:last-of-type) {
margin-right: 3em;
}
}
.container-address-password {
.container-address {
flex-grow: 1;
flex-shrink: 1;
}
.container-password {
flex-grow: 0;
flex-shrink: 4;
min-width: 21.5em;
}
}
.container-profile-manage {
flex-grow: 0;
flex-shrink: 4;
display: flex;
flex-direction: row;
justify-content: stretch;
.container-select-profile {
flex-grow: 1;
flex-shrink: 1;
min-width: 14em;
> .invalid-feedback {
width: max-content; /* allow overflow here */
}
}
.container-manage {
flex-grow: 0;
flex-shrink: 4;
margin-left: 15px;
}
.button-manage-profiles {
min-width: 7em;
margin-left: 0.5em;
}
}
.container-nickname {
flex-grow: 1;
flex-shrink: 1;
}
.container-buttons {
padding-top: 1em;
display: flex;
flex-direction: row;
justify-content: space-between;
.container-buttons-connect {
display: flex;
flex-direction: row;
flex-shrink: 1;
min-width: 6em;
}
.button-right {
min-width: 7em;
margin-left: 0.5em;
}
.button-left {
min-width: 14em;
}
}
.arrow {
border-color: #7a7a7a;
margin-left: .5em;
}
}
.container-last-servers {
flex-grow: 0;
flex-shrink: 1;
display: flex;
flex-direction: column;
justify-content: stretch;
max-height: 0;
opacity: 0;
overflow: hidden;
padding: 0;
min-width: 0;
border: none;
border-left: 2px solid #7a7a7a;
@include transition(max-height .5s ease-in-out, opacity .5s ease-in-out, padding .5s ease-in-out);
&.shown {
/* apply the default padding */
padding: 0 24px 24px;
max-height: 100%;
opacity: 1;
@include transition(max-height .5s ease-in-out, opacity .5s ease-in-out, padding .5s ease-in-out)
}
hr {
height: 0;
width: calc(100% + 46px);
min-width: 0;
margin: 0 0 0 -23px;
padding: 0;
border: none;
border-top: 1px solid #090909;
margin-bottom: .75em;
}
color: #7a7a7a;
/* general table class */
.table {
width: 100em;
max-width: 100%;
display: flex;
flex-direction: column;
justify-content: stretch;
.head {
display: flex;
flex-direction: row;
justify-content: stretch;
flex-grow: 0;
flex-shrink: 0;
border: none;
border-bottom: 1px solid #161618;
}
.body {
flex-grow: 0;
flex-shrink: 1;
display: flex;
flex-direction: column;
justify-content: stretch;
overflow: auto;
.row {
cursor: pointer;
flex-grow: 0;
flex-shrink: 0;
display: flex;
flex-direction: row;
justify-content: stretch;
&:hover {
background-color: #202022;
}
&.selected {
background-color: #131315;
}
}
.body-empty {
height: 3em;
text-align: center;
display: flex;
flex-direction: column;
justify-content: space-around;
font-size: 1.25em;
color: rgba(121, 121, 121, 0.5);
}
}
.column {
flex-grow: 1;
flex-shrink: 1;
overflow: hidden;
white-space: nowrap;
padding-right: .25em;
padding-left: .25em;
display: flex;
flex-direction: row;
justify-content: flex-start;
&:not(:last-of-type) {
border-right: 1px solid #161618;
}
> a {
max-width: 100%;
text-overflow: ellipsis;
overflow: hidden;
}
}
}
/* connect table */
.table {
margin-left: -1.5em; /* the delete row */
.head {
margin-left: 1.5em; /* the delete row */
.column.delete {
display: none;
}
}
.column {
align-self: center;
.country, .icon-container {
align-self: center;
margin-right: 0.25em;
}
@mixin fixed-column($name, $width) {
&.#{$name} {
flex-grow: 0;
flex-shrink: 0;
width: $width;
}
}
@include fixed-column(delete, 1.5em);
@include fixed-column(password, 5em);
@include fixed-column(country-name, 7em);
@include fixed-column(clients, 4em);
@include fixed-column(connections, 6.5em);
&.delete {
opacity: 0;
border-right: none;
border-bottom: none;
text-align: center;
@include transition(opacity .25 ease-in-out);
&:hover {
opacity: 1;
@include transition(opacity .25 ease-in-out);
}
}
&.address {
flex-grow: 1;
flex-shrink: 1;
width: 40%;
}
&.name {
flex-grow: 1;
flex-shrink: 1;
width: 60%;
}
}
}
}
}
@media all and (max-width: 55rem) {
.modal .modal-connect {
min-width: calc(21.25em + 24px * 2)!important;
width: 1000em; /* allocate space */
.container-address-password {
.container-password {
min-width: unset!important;
margin-left: 1em!important;
}
}
.container-buttons {
justify-content: flex-end!important;
.button-toggle-last-servers {
display: none;
}
}
.container-profile-name {
flex-direction: column!important;
}
.container-connect-input {
> .row {
> div {
margin-right: 0!important;
}
}
}
.container-last-servers {
display: none;
}
}
}

View File

@ -1,6 +1,7 @@
@import "mixin";
@import "properties";
:global {
.modal-server-group-assignments {
@include user-select(none);
@ -108,3 +109,4 @@
justify-content: space-between;
}
}
}

View File

@ -1,6 +1,7 @@
@import "properties";
@import "mixin";
:global {
.modal-icon-select {
@include user-select(none);
@ -465,8 +466,10 @@
display: none;
}
}
}
@media screen and (max-width: 650px) {
:global {
.modal-icon-upload {
.container-select {
flex-direction: column;
@ -506,3 +509,4 @@
}
}
}
}

View File

@ -1,5 +1,6 @@
@import "mixin";
:global {
.modal-body.modal-identity-improve {
padding: 0!important;
@ -186,3 +187,4 @@
display: none;
}
}
}

View File

@ -1,6 +1,7 @@
@import "mixin";
@import "properties";
:global {
.modal-invite {
padding: .5em!important;
@include user-select(none);
@ -71,3 +72,4 @@
}
}
}
}

View File

@ -1,3 +1,4 @@
:global {
.modal-body.modal-keyselect {
width: max-content!important;
@ -48,3 +49,4 @@
}
}
}
}

View File

@ -1,6 +1,7 @@
@import "mixin";
@import "properties";
:global {
.modal-body.modal-latency {
@include user-select(none);
@include transform(all $button_hover_animation_time ease-in-out);
@ -82,3 +83,4 @@
}
}
}
}

View File

@ -1,6 +1,7 @@
@import "mixin";
@import "properties";
:global {
.modal-body.modal-music-manage {
padding: 0 !important;
@ -695,3 +696,4 @@
}
}
}
}

View File

@ -6,6 +6,7 @@ html:root {
--modal-newcomer-divider: #313135;
}
:global {
.modal-body.modal-newcomer {
display: flex!important;
flex-direction: column!important;
@ -157,3 +158,4 @@ html:root {
padding: .5em;
}
}
}

View File

@ -3,6 +3,7 @@ html:root {
--modal-poke-text: #004d00;
}
:global {
.container-poke {
display: flex!important;;
flex-direction: column!important;;
@ -86,3 +87,4 @@ html:root {
}
}
}
}

View File

@ -1,6 +1,7 @@
@import "properties";
@import "mixin";
:global {
.query-create {
display: flex!important;
flex-direction: column!important;
@ -373,3 +374,4 @@ html:root {
background: transparent;
}
}
}

View File

@ -1,6 +1,7 @@
@import "mixin";
@import "properties";
:global {
.modal-body.modal-server-edit {
display: flex!important;
flex-direction: column!important;
@ -1150,3 +1151,4 @@
}
}
}
}

View File

@ -11,6 +11,7 @@ html:root {
--serverinfo-value: #d6d6d7;
}
:global {
.modal-body.modal-server-info {
padding: 0!important;
width: 55em;
@ -252,8 +253,10 @@ html:root {
}
}
}
}
@media all and (max-width: 50em) {
:global {
.modal-body.modal-server-info {
.container-image {
margin: 0!important;
@ -261,3 +264,4 @@ html:root {
}
}
}
}

View File

@ -8,6 +8,7 @@ html:root {
--serverinfo-statistics-title: #244c78;
}
:global {
.modal-body.modal-server-info-bandwidth {
padding: 0!important;
width: 55em;
@ -207,8 +208,10 @@ html:root {
}
}
}
}
@media all and (max-width: 50em) {
:global {
.modal-body.modal-server-info {
.container-image {
margin: 0!important;
@ -216,3 +219,4 @@ html:root {
}
}
}
}

View File

@ -1,6 +1,7 @@
@import "properties";
@import "mixin";
:global {
.modal-body.modal-settings {
padding: 0!important;
@ -2188,8 +2189,10 @@
}
}
}
}
@media all and (min-width: 50em) {
:global {
.container-settings-identity-profile {
.buttons {
display: flex!important;
@ -2200,6 +2203,7 @@
}
}
}
}
@-moz-keyframes spin { 100% { -moz-transform: rotate(360deg); } }

View File

@ -1,6 +1,8 @@
@import "properties";
@import "mixin";
:global {
.modal {
color: #999999; /* base color */
@ -966,3 +968,4 @@ textarea.input-boxed {
@include chat-scrollbar-vertical();
}
}

View File

@ -1,3 +1,4 @@
:global {
.arrow {
display: inline-block;
border: solid black;
@ -30,3 +31,4 @@
-webkit-transform: rotate(45deg);
}
}
}

View File

@ -1,5 +1,6 @@
@import "mixin";
:global {
.overlay-image-preview {
position: absolute;
z-index: 1000;
@ -86,3 +87,4 @@
@include transition(ease-in-out .25s);
}
}

View File

@ -1,41 +0,0 @@
.scroll-left {
height: 100%;
overflow: hidden;
position: relative;
}
.scroll-left p {
position: absolute;
width: max-content;
height: 100%;
margin: 0;
text-align: center;
/* Starting position */
-moz-transform:translateX(100%);
-webkit-transform:translateX(100%);
transform:translateX(100%);
/* Apply animation to this element */
-moz-animation: scroll-left 10s linear infinite;
-webkit-animation: scroll-left 10s linear infinite;
animation: scroll-left 10s linear infinite;
}
/* Move it (define the animation) */
@-moz-keyframes scroll-left {
0% { -moz-transform: translateX(100%); }
100% { -moz-transform: translateX(-100%); }
}
@-webkit-keyframes scroll-left {
0% { -webkit-transform: translateX(100%); }
100% { -webkit-transform: translateX(-100%); }
}
@keyframes scroll-left {
0% {
-moz-transform: translateX(100%); /* Browser bug fix */
-webkit-transform: translateX(100%); /* Browser bug fix */
transform: translateX(100%);
}
100% {
-moz-transform: translateX(-100%); /* Browser bug fix */
-webkit-transform: translateX(-100%); /* Browser bug fix */
transform: translateX(-100%);
}
}

View File

@ -1,63 +0,0 @@
@import "mixin";
html:root {
--server-log-text: #6e6e6e;
--server-log-error: #e62222;
--server-log-tree-entry: #d8d8d8;
}
.container-log {
display: block;
overflow-y: auto;
height: 100%;
width: 100%;
@include chat-scrollbar-vertical();
@include chat-scrollbar-horizontal();
.container-messages {
width: 100%;
line-height: 16px;
}
.log-message {
flex-shrink: 0;
flex-grow: 0;
color: var(--server-log-text);
overflow-x: hidden;
overflow-y: hidden;
display: block;
&, > * {
overflow-wrap: break-word;
word-wrap: break-word;
max-width: 100%;
}
> * {
display: inline-block;
font-family: sans-serif;
font-size: 13px;
line-height: initial;
}
> .timestamp {
padding-right: 5px;
}
.log-error {
color: var(--server-log-error);
}
.htmltag-client, .htmltag-channel {
color: var(--server-log-tree-entry);
}
}
}

View File

@ -1,7 +1,8 @@
:global {
.country {
width: 16px;
height: 11px;
background: url('../../../img/ts/country_icons.png'), url('./img/ts/country_icons.png') no-repeat;
background: url('../../../img/ts/country_icons.png') no-repeat;
flex-shrink: 0;
flex-grow: 0;
@ -1008,3 +1009,4 @@
.country.flag-unknown {
background-position: 0 -2750px
}
}

View File

@ -1,3 +1,4 @@
:global {
x-tab { display:none }
.tab {
@ -90,3 +91,4 @@ x-tab { display:none }
.tab .tab-header .entry.selected {
background: #11111111;
}
}

View File

@ -194,7 +194,7 @@ if(process_args.length < 1) {
process.exit(1);
}
const input_files = ["../dist/translations.json", "generated/translations_html.json"].map(e => path.join(__dirname, e));
const input_files = ["../dist/translations.json"].map(e => path.join(__dirname, e));
const output_file = process_args[1] || path.join(__dirname, "i18n", process_args[0] + "_google_translate.translation");
(async () => {

View File

@ -1,9 +0,0 @@
#!/usr/bin/env bash
cd "$(dirname "$0")" || { echo "Failed to enter base directory"; exit 1; }
npm run trgen -- -f "$(pwd)/html/templates.html" -f "$(pwd)/html/templates/modal/newcomer.html" -f "$(pwd)/html/templates/modal/musicmanage.html" -d "$(pwd)/generated/translations_html.json"; _exit_code=$?
if [[ $_exit_code -ne 0 ]]; then
echo "Failed to generate translations file for the template files"
exit 1
fi

View File

@ -1,10 +1,8 @@
@import "../../../../css/static/mixin";
/* FIXME: Remove this wired import */
:global {
@import "../../../../css/static/general";
@import "../../../../css/static/modal";
}
html, body {
margin: 0;