1 files changed, 248 insertions, 40 deletions

diff --git a/src/app/main.css b/src/app/main.css
index a532490..99d806c 100644
--- a/src/app/main.css
+++ b/src/app/main.css
@@ -1,17 +1,23 @@
 :root {
-	--red: #C7777F;
-	--blue: #81A1C1;
-	--orange: #D59783;
+	--red: 199, 119, 127;
+	--red2: 181 97 105;
+
+	--blue: 129, 161, 193;
+	--blue2: 139, 143, 185;
+
+	--orange: 213, 151, 131;
+	--orange2: 197 129 107;
+
 
 	--padding: 25px;
 
 	--bg: rgba(0, 0, 0, 0.5);
 	--selbg: rgba(80, 80, 80, 0.5);
-	--redbg: linear-gradient(45deg, var(--red), #FA4343);
-	--bluebg: linear-gradient(45deg, var(--blue), #7380ED);
+	--redbg: linear-gradient(45deg, rgb(var(--red)), #FA4343);
+	--bluebg: linear-gradient(45deg, rgb(var(--blue)), #7380ED);
 }
 
-#browser, #modsdiv {
+.popup, #modsdiv {
 	outline: 1px solid #444444;
 	border: 3px solid var(--bg);
 }
@@ -27,22 +33,26 @@
  
 ::-webkit-scrollbar-thumb {
 	border-radius: 10px;
-	background: var(--red);
+	background: rgb(var(--red));
 }
 
 ::selection {
 	color: black;
-	background: var(--red);
+	background: rgb(var(--red));
 }
 
 body {
 	margin: 0;
 	overflow: hidden;
-	user-select: none;
 }
 
 body, button, input {font-family: "Roboto", sans-serif}
 
+body, button, img, a {
+	-webkit-user-drag: none;
+	user-select: none;
+}
+
 button {outline: none}
 b, strong {font-weight: 700}
 body, input, button {font-weight: 500}
@@ -62,7 +72,7 @@ button {
 	cursor: pointer;
 }
 
-#browser {
+.popup {
 	--spacing: var(--padding);
 
 	z-index: 2;
@@ -81,7 +91,7 @@ button {
 	transition: opacity 0.15s ease-in-out, transform 0.15s ease-in-out;
 }
 
-#browser.shown {
+.popup.shown {
 	opacity: 1.0;
 	pointer-events: all;
 	transform: scale(1.0);
@@ -110,7 +120,7 @@ button {
 	100% {opacity: 1.0}
 }
 
-#browser .el, #browser #misc, #browser .loading {
+.popup .el, .popup .misc, .popup .loading {
 	--spacing: calc(var(--padding) / 2);
 	--height: calc(var(--padding) * 3);
 	--mischeight: calc(var(--padding) * 1.5);
@@ -125,7 +135,7 @@ button {
 	transition: 0.15s ease-in-out;
 }
 
-#browser .el, #browser #search, #browser #close {
+.popup .el, .popup #search, .option .actions select, .option .actions input, .popup #close, .popup .misc button {
 	color: white;
 	display: flex;
 	align-items: center;
@@ -137,41 +147,52 @@ button {
 	width: calc(100% - var(--spacing) * 4);
 }
 
-#browser #misc, #browser #search {
+.popup .misc, .popup #search, .option .actions input {
 	--height: var(--mischeight);
 }
 
-#browser #misc {
+.popup .misc {
 	display: flex;
 }
 
-#browser #search {
+.popup #search, .option .actions input, .option .actions select {
 	border: none;
 	outline: none;
 	transition: filter 0.15s ease-in-out;
 	width: calc(100% - var(--spacing) * 2);
 }
 
-#browser #search:focus {
+.popup #search:focus, .option .actions input:focus, .option .actions button:active {
 	filter: brightness(1.5);
 }
 
-#browser #close {
+.popup .misc button {
 	--height: calc(var(--padding) * 1.5);
 
 	padding: 0px;
 	margin-left: 0px;
-	width: var(--height);
+	padding: 0px !important;
+	width: var(--height) !important;
 }
 
-#browser #close img {
+.popup .misc button img {
 	opacity: 0.6;
 	width: var(--height);
-	height: var(--height);
-	transform: scale(0.6);
+	transform: scale(0.5);
+	height: var(--height) !important;
+}
+
+#options.popup .misc button {
+	margin-left: 0px;
+	width: auto !important;
+	padding-right: calc(var(--padding) / 2) !important;
 }
 
-#browser .loading {
+.popup .misc button:last-child {
+	margin-left: 0px !important;
+}
+
+.popup .loading {
 	width: 100%;
 	color: white;
 	display: flex;
@@ -181,38 +202,166 @@ button {
 	height: calc(100% - var(--mischeight) - var(--height));
 }
 
-#browser .message {
+.popup .message {
 	color: white;
 	text-align: center;
 	margin: var(--padding);
 	width: calc(100% - var(--padding));
 }
 
-#browser .el .image, #browser .el .image img {
+.popup .el .image, .popup .el .image img {
 	width: var(--height);
 	height: var(--height);
 	margin-right: var(--spacing);
 	border-radius: var(--spacing);
 }
 
-#browser .el .text {
+.popup .el .image img.blur {
+	z-index: -1;
+    position: relative;
+    filter: blur(10px);
+    top: calc(var(--height) * -1 + 5px);
+}
+
+.popup .el .text {
 	overflow: hidden;
 }
 
-#browser .el .title, #browser .el .description {
+.popup .el .title, .popup .el .description {
 	height: 1.2em;
 	overflow: hidden;
 	white-space: nowrap;
 	text-overflow: ellipsis;
 }
 
-#browser .el .title {font-size: 1.2em}
-#browser .el .description {font-size: 0.8em}
-#browser .el button {
-	background: var(--blue);
+.popup .el .title {
+	font-size: 1.2em;
+	font-weight: 700;
+}
+
+.popup .el .description {font-size: 0.8em}
+.popup .el button {
+	background: rgb(var(--blue));
 	margin-top: var(--spacing);
 }
 
+.popup .el button.info {
+	background: rgb(var(--blue2));
+}
+
+.popup .options {
+	color: white;
+	margin: calc(var(--padding) / 2);
+}
+
+.popup .options .option {
+	width: 100%;
+	display: flex;
+	margin-bottom: var(--padding);
+	justify-content: space-between;
+}
+
+.popup .overlay {
+	z-index: 1;
+	color: white;
+	opacity: 0.0;
+	position: fixed;
+	pointer-events: none;
+	transform: scale(0.9);
+	background: var(--selbg);
+	backdrop-filter: blur(15px);
+	transition: 0.15s ease-in-out;
+	padding: calc(var(--spacing) / 2);
+	border-radius: calc(var(--spacing) / 2);
+}
+
+.popup .overlay.shown {
+	opacity: 1.0;
+	pointer-events: all;
+	transform: scale(1.0);
+}
+
+.checks {
+}
+
+.check {
+	display:flex;
+	cursor: pointer;
+}
+
+.check::before {
+	width: 1em;
+	height: 1em;
+	content: " ";
+    background-size: 75%;
+	filter: brightness(1.3);
+    background-position: center;
+    background-repeat: no-repeat;
+	transition: 0.15s ease-in-out;
+	background-color: var(--selbg);
+	margin-right: calc(var(--spacing) / 3);
+	border-radius: calc(var(--spacing) / 4);
+}
+
+.check.checked::before {
+	background-color: rgb(var(--red));
+    background-image: url(icons/check.png);
+}
+
+.option .text {font-weight: 600}
+.option .text .desc {
+	opacity: 0.8;
+	font-weight: 500;
+	font-size: 0.9em;
+	max-width: 400px;
+	margin-top: calc(var(--padding) / 3);
+}
+
+.option .actions input, .option .actions select {
+	width: 100%;
+	margin: 0px;
+	--spacing: calc(var(--padding) / 3);
+}
+
+.option[type=array] .actions input {
+	word-spacing: 15px;
+	margin-right: 15vw;
+}
+
+.option .actions button {
+	background: var(--selbg);
+}
+
+.switch {
+	width: 50px;
+	height: 25px;
+	border-radius: 50px;
+}
+
+.switch.on {
+	background: rgba(var(--red), 0.2) !important;
+}
+
+.switch::after {
+	left: -5px;
+	width: 15px;
+	height: 15px;
+	content: " ";
+	display: block;
+	background: red;
+	position: relative;
+	border-radius: 50px;
+	background: var(--bg);
+	transition: 0.2s ease-in-out;
+}
+
+.switch.on::after {
+	left: 15px;
+	width: 20px;
+	opacity: 0.5;
+	background: rgb(var(--red));
+}
+
 #winbtns {
 	z-index: 2;
 	display: flex;
@@ -233,9 +382,10 @@ button {
 
 #winbtns #close {background-image: url("icons/close.png")}
 #winbtns #minimize {background-image: url("icons/minimize.png")}
+#winbtns #settings {background-image: url("icons/settings.png")}
 
 #winbtns div:hover {opacity: 1.0}
-#winbtns div:active {transform: scale(0.98)}
+#winbtns div:active {transform: scale(0.95)}
 
 button:hover {filter: brightness(110%)}
 button:active {filter: brightness(90%)}
@@ -252,7 +402,7 @@ img {pointer-events: none}
 	background-size: cover;
 	background-position: center;
 	background-repeat: no-repeat;
-	transition: background-image 0.5s ease-in-out;
+	transition: background-image 0.1s ease-in-out;
 	filter: brightness(0.4) blur(2px) grayscale(0.6);
 }
 
@@ -384,7 +534,7 @@ img {pointer-events: none}
 	text-align: center;
 	position: relative;
 	border-radius: 50px;
-	background: var(--red);
+	background: rgb(var(--red));
 	left: calc(50% - 15px);
 	transition: 0.2s ease-in-out;
 }
@@ -430,7 +580,7 @@ img {pointer-events: none}
 	margin-bottom: 10px;
 	border-radius: 10px;
 	background: var(--redbg);
-	transition: 0.3s ease-in-out;
+	transition: 0.2s ease-in-out;
 	filter: drop-shadow(0px 8px 5px rgba(0, 0, 0, 0.1));
 }
 
@@ -449,7 +599,7 @@ img {pointer-events: none}
 }
 
 a {
-	color: var(--red);
+	color: rgb(var(--red));
 	text-decoration: none;
 	transition: filter 0.2s ease-in;
 }
@@ -496,12 +646,17 @@ a:hover {
 }
 
 .simplebar-scrollbar:before {
-	background: var(--red) !important;
+	background: rgb(var(--red)) !important;
 }
 
-#installmod {background: var(--blue)}
-#togglemod, #toggleall {background: var(--orange)}
-#northstar, #removeall, #removemod {background: var(--red)}
+#installmod {background: rgb(var(--blue))}
+#findmod {background: rgb(var(--blue2))}
+
+#togglemod {background: rgb(var(--orange))}
+#toggleall {background: rgb(var(--orange2))}
+
+#removemod {background: rgb(var(--red))}
+#removeall {background: rgb(var(--red2))}
 button:disabled {
 	opacity: 0.5;
 	pointer-events: none;
@@ -509,6 +664,7 @@ button:disabled {
 
 button.visual {
 	opacity: 1.0;
+	padding-right: 0px;
 	pointer-events: none;
 	background: transparent !important;
 }
@@ -612,6 +768,58 @@ code {
 	font-weight: 600;
 }
 
+#dragUI {
+	top: 0;
+	left: 0;
+	right: 0;
+	bottom: 0;
+	color: white;
+	opacity: 0.0;
+	position: fixed;
+	z-index: 1000000;
+	pointer-events: none;
+	background: var(--bg);
+	backdrop-filter: blur(15px);
+	transition: 0.1s ease-in-out;
+}
+
+#dragUI.shown {
+	opacity: 1.0;
+	pointer-events: all;
+}
+
+#dragUI #dragitems {
+	--size: 25vw;
+	top: 50%;
+	left: 50%;
+	opacity: 0.6;
+	position: absolute;
+	text-align: center;
+	width: var(--size);
+	height: var(--size);
+	margin-top: calc(var(--size) / 2 * -1);
+	margin-left: calc(var(--size) / 2 * -1);
+}
+
+#dragUI #dragitems #icon {
+	width: 100%;
+	height: 100%;
+	filter: invert(1);
+	transform: scale(0.45);
+	background-size: cover;
+	background-image: url("icons/download.png");
+	transition: 0.1s ease-in-out;
+}
+
+#dragUI.shown #dragitems #icon {
+	transform: scale(0.5);
+}
+
+#dragUI #dragitems #text {
+	top: -5vw;
+	position: relative;
+}
+
 /* drag control */
 
 #bgHolder,