Update _res/_custom.css

_res/_custom.css

@@ -224,8 +224,6 @@ div.tabs div.tabitem {
 }
 
 .prompt-input textarea {
-    font-size: 1.05rem;
-    color: var(--neutral-300);
     resize: none;
 }
 
@@ -500,6 +498,76 @@ div.gradio-container.blur-container {
     z-index: var(--layer-5);
 }
 
+/* MARK: Toggle Button Checkbox */
+/* INFO: gr.Checkbox elem_classes".toggle-btn" */
+
+.toggle-btn {
+	display: flex;
+	flex-direction: column-reverse;
+
+	&>div.wrap {
+		display: none;
+	}
+
+	&>div:not(.wrap) {
+		margin-top: var(--spacing-lg);
+		margin-bottom: 0;
+	}
+
+	&>label {
+		position: relative;
+		width: 57px;
+		height: 27px;
+		display: inline-block;
+		border-radius: 13px;
+		background: var(--neutral-700);
+		box-shadow: var(--shadow-inset);
+		transition: background-color 0.3s, cursor 0.3s;
+		border: solid 0.4px var(--border-color-primary);
+		cursor: pointer;
+
+		&>input[type="checkbox"] {
+			width: 0;
+			height: 0;
+			opacity: 0;
+		}
+
+		&>span {
+			position: absolute;
+			left: 60px;
+			height: 27px;
+			min-width: 140px;
+			line-height: 27px;
+		}
+	}
+
+	&>label:has(input[type="checkbox"])::after {
+		content: "";
+		position: absolute;
+		top: 3px;
+		left: 3px;
+		width: 20px;
+		height: 20px;
+		border-radius: 50%;
+		background: var(--neutral-900);
+		box-shadow: var(--shadow-inset);
+		transition: left 0.2s ease-in-out, background 0.2s ease-in-out;
+	}
+
+	&>label:has(input[type="checkbox"]:checked)::after {
+		content: "";
+		position: absolute;
+		background: var(--neutral-900);
+		opacity: 0.8;
+		left: 32px;
+	}
+
+	&>label:has(input[type="checkbox"]:checked) {
+		background: var(--primary-600);
+	}
+}
+
+
 /* MARK: Range Input */
 input[type=range].svelte-pc1gm4 {
     accent-color: var(--slider-color);