added: toggles for toggling mods in modlist

The new modlist now uses the same toggles found in the settings popup,
only here they're used to disable/enable mods. On top of this I also
fixed the "Toggle All" button not working. Forgot to change some stuff,
breaking it... oops...

2 files changed, 11 insertions, 35 deletions

diff --git a/src/app/css/grid.css b/src/app/css/grid.css
index 5c4019c..6622762 100644
--- a/src/app/css/grid.css
+++ b/src/app/css/grid.css
@@ -1,3 +1,5 @@
+@import "theming.css";
+
 .grid .el, .popup .misc, .popup .loading {
 	--spacing: calc(var(--padding) / 2);
 	--height: calc(var(--padding) * 3.5);
@@ -138,7 +140,6 @@
 
 .grid .el .description {font-size: 0.8em}
 .grid .el button {
-	background: rgb(var(--blue));
 	margin-top: var(--spacing);
 }
 
@@ -146,3 +147,12 @@
 	background: rgb(var(--blue2));
 }
 
+.grid .el .switch {
+	top: 3px;
+	position: relative;
+	background: var(--bg);
+}
+
+.grid .el .switch:not(.grid .el .switch.on)::after {
+	background: var(--selbg);
+}
diff --git a/src/app/css/popups.css b/src/app/css/popups.css
index 8f47d0a..5147aaf 100644
--- a/src/app/css/popups.css
+++ b/src/app/css/popups.css
@@ -167,40 +167,6 @@
 	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));
-}
-
-.switch.on:hover::after {
-	transform: scale(1.2);
-}
-
 .title {
 	display: flex;
 	margin-top: calc(var(--padding) * 2);