28. Sept. 2024, 12:07

app.py

@@ -289,7 +289,7 @@ with gr.Blocks(theme=theme, css="custom.css", js="javascript.js") as demo:
                     with gr.Row():
                         with gr.Column():
                             preprocessor_name = gr.Radio(label="Preprocessor", show_label=False, choices=["Lineart", "Lineart Coarse", "Lineart Anime"], type="value", value="Lineart")
-                            invert = gr.Checkbox(label="Invert", value=True)
+                            invert = gr.Checkbox(label="Invertiert", value=True)
                             resolution = gr.Slider(label="resolution", minimum=256, maximum=1024, value=512, step=64)
                             run_btn_lineart = gr.Button("Run")
 

custom.css

@@ -33,4 +33,57 @@ div.tabs div.tabitem {
 .top-description h1 {
     color: var(--neutral-400);
     font-size: 2rem;
+}
+
+/* MARK: Toggle Button Checkbox */
+/* INFO: gr.Checkbox elem_classes".toggle-btn" */
+
+.toggle-btn {
+    &>label {
+        position: relative;
+        width: 57px;
+        height: 27px;
+        display: inline-block;
+        border-radius: var(--radius-xxl);
+        background: var(--neutral-700);
+        box-shadow: var(--shadow-inset);
+        transition: background-color .3s, cursor .3s;
+        border: solid .4px var(--border-color-primary);
+        cursor: pointer;
+
+        &>input[type="checkbox"] {
+            width: 0;
+            height: 0;
+            opacity: 0;
+        }
+
+        &>span {
+            position: absolute;
+            left: 60px;
+            height: 27px;
+            line-height: 27px;
+        }
+    }
+
+    &>label:has(input[type="checkbox"])::after {
+        content: "";
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 26px;
+        height: 26px;
+        border: 2px solid var(--neutral-700);
+        border-radius: 50%;
+        background: var(--neutral-900);
+        box-shadow: var(--shadow-inset);
+        transition: left .2s ease-in-out, background .2s ease-in-out;
+
+    }
+
+    &>label:has(input[type="checkbox"]:checked)::after {
+        content: "";
+        position: absolute;
+        background: var(--primary-600);
+        left: 33px;
+    }
 }