aboutsummaryrefslogtreecommitdiff
path: root/src/app/css
diff options
context:
space:
mode:
author0neGal <mail@0negal.com>2023-01-30 23:22:41 +0100
committer0neGal <mail@0negal.com>2023-01-30 23:22:41 +0100
commit84cc46018664cee9d89d71ea75ba687a9171ab28 (patch)
tree43e71f3b8a1535aa1e6440dd0f7df001efb09749 /src/app/css
parent67778e1ecab4747cf886e8ffcb6a11f96ccc279c (diff)
downloadViper-84cc46018664cee9d89d71ea75ba687a9171ab28.tar.gz
Viper-84cc46018664cee9d89d71ea75ba687a9171ab28.zip
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...
Diffstat (limited to 'src/app/css')
-rw-r--r--src/app/css/grid.css12
-rw-r--r--src/app/css/popups.css34
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);