Properly import the old global css styles

shared/css/load-css.tsx

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

shared/css/static/general.scss

@@ -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;
 	}
+}

shared/css/static/hostbanner.scss

@@ -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;
-				}
-			}
-		}
-	}
-}

shared/css/static/htmltags.scss

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

shared/css/static/main-layout.scss

@@ -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;
 	}
+}

shared/css/static/menu-bar.scss

@@ -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;
-	}
-}

shared/css/static/modal-about.scss

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

shared/css/static/modal-avatar.scss

@@ -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;
 		}
 	}
+}

shared/css/static/modal-banclient.scss

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

shared/css/static/modal-banlist.scss

@@ -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;
 			}
 		}
 	}
+}

shared/css/static/modal-channelinfo.scss

@@ -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;
 		}
 	}
+}

shared/css/static/modal-clientinfo.scss

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

shared/css/static/modal-connect.scss

@@ -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;
-		}
-	}
-}

shared/css/static/modal-group-assignment.scss

@@ -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;
 		}
 	}
+}

shared/css/static/modal-icons.scss

@@ -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 @@
 			}
 		}
 	}
+}

shared/css/static/modal-identity.scss

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

shared/css/static/modal-invite.scss

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

shared/css/static/modal-keyselect.scss

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

shared/css/static/modal-latency.scss

@@ -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 @@
 			}
 		}
 	}
+}

shared/css/static/modal-musicmanage.scss

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

shared/css/static/modal-newcomer.scss

@@ -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;
         }
     }
+}

shared/css/static/modal-poke.scss

@@ -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 {
 			}
 		}
 	}
+}

shared/css/static/modal-query.scss

@@ -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;
 		}
 	}
+}

shared/css/static/modal-server.scss

@@ -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 @@
 			}
 		}
 	}
+}

shared/css/static/modal-serverinfo.scss

@@ -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 {
 			}
 		}
 	}
+}

shared/css/static/modal-serverinfobandwidth.scss

@@ -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 {
 			}
 		}
 	}
+}

shared/css/static/modal-settings.scss

@@ -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); } }

shared/css/static/modal.scss

@@ -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();
 	}
+}

shared/css/static/modals.scss

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

shared/css/static/overlay-image-preview.scss

@@ -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);
     }
+}

shared/css/static/scroll.scss

@@ -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%);
-    }
-}

shared/css/static/server-log.scss

@@ -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);
-		}
-	}
-}

shared/css/static/ts/country.scss

@@ -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
     }
+}

shared/css/static/ts/tab.scss

@@ -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;
     }
+}

shared/generate_i18n_gtranslate.ts

@@ -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 () => {

shared/generate_translations.sh

@@ -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

shared/js/ui/react-elements/external-modal/ModalRenderer.scss

@@ -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;