Add colorpicker and rainbow mode toggle

2023-04-01 01:35:21 +08:00
parent 885b03df6b
commit 8ebcb12843
3 changed files with 77 additions and 3 deletions
--- a/style.css
+++ b/style.css
@@ -544,4 +544,46 @@ template {

 [hidden] {
    display: none;
+}
+
+input[type=checkbox] {
+    height: 0;
+    width: 0;
+    visibility: hidden;
+}
+
+label[for=rainbow-mode-checkbox] {
+    cursor: pointer;
+    width: 50px;
+    height: 25px;
+    background: grey;
+    display: inline-block;
+    border-radius: 25px;
+    position: relative;
+    transition: .3s;
+}
+
+label[for=rainbow-mode-checkbox]:after {
+    content: '';
+    position: absolute;
+    top: 1.25px;
+    left: 1.25px;
+    width: 22.5px;
+    height: 22.5px;
+    background: #fff;
+    border-radius: 22.5px;
+    transition: .3s;
+}
+
+input:checked + label[for=rainbow-mode-checkbox] {
+	background: #6f42c1;
+}
+
+label[for=rainbow-mode-checkbox]:active:after {
+	width: 32.5px;
+}
+
+input:checked + label[for=rainbow-mode-checkbox]:after {
+	left: calc(100% - 1.25px);
+	transform: translateX(-100%);
 }