chore(Bootstrap): Origo-fy Bootstrap checkboxes

Author: jstarpl

packages/webui/src/client/styles/bootstrap-customize.scss

@@ -87,7 +87,7 @@
 
 /* Optional: Customize .focus-visible */
 :focus-visible {
-	outline: $primary solid 2px;
+	outline: var(--org-color-focus) solid 2px;
 }
 
 .dropdown-menu {
@@ -159,6 +159,32 @@
 	outline: none;
 }
 
+.form-select,
+.form-control {
+	--bs-border-radius: 2px;
+	--bs-border-width: 0;
+	box-shadow: var(--org-shadow-border, inset 0 0 0 1px rgba(108, 127, 147, .4));
+}
+
+.form-control:focus,
+.form-select:focus {
+    outline: 0;
+    box-shadow: var(--org-shadow-focus, 0 0 0 2px #2bb9ff) !important;
+}
+
+.form-control::placeholder,
+.form-select::placeholder {
+	color: currentColor;
+  	opacity: .5;
+}
+
+input[type="search"]::-webkit-search-decoration,
+input[type="search"]::-webkit-search-cancel-button,
+input[type="search"]::-webkit-search-results-button,
+input[type="search"]::-webkit-search-results-decoration {
+  -webkit-appearance:none;
+}
+
 .btn:disabled,
 .btn.disabled,
 fieldset:disabled .btn {
@@ -188,6 +214,34 @@ fieldset:disabled .btn::before {
 	top: 0;
 }
 
+.form-switch > .form-check-input[type="checkbox"]:focus {
+	--bs-border-width: 0;
+}
+
+*:not(.form-switch) > .form-check-input[type="checkbox"] {
+	--bs-border-width: 0;
+	border-radius: 2px;
+	box-shadow: var(--org-shadow-border, inset 0 0 0 1px rgba(108, 127, 147, .4));
+	color: var(--bs-primary);
+}
+
+*:not(.form-switch) > .form-check-input[type="checkbox"]:checked {
+	background-image: linear-gradient(0deg, transparent 38%, currentColor 0), linear-gradient(45deg, transparent 53%, currentColor 54%), linear-gradient(135deg, currentColor 37%, transparent 38%), linear-gradient(-135deg, currentColor 23%, transparent 0), linear-gradient(135deg, currentColor 33%, transparent 0), linear-gradient(45deg, currentcolor 28%, transparent 0), linear-gradient(-45deg, currentcolor 42%, transparent 0);
+    background-position-x: 35%, 0, 100%, 100%, 100%, 100%, 100%;
+    background-size: 5% 100%, 36% 100%, 64% 100%, 100%, 100%, 100%, 100%;
+	background-color: var(--bs-white);
+}
+
+.form-check-input[type="checkbox"]:active {
+	filter: none;
+	box-shadow: var(--org-shadow-focus, 0 0 0 2px #2bb9ff) !important;
+}
+
+.form-check-input[type="checkbox"]:focus {
+	outline: 0;
+    box-shadow: var(--org-shadow-focus, 0 0 0 2px #2bb9ff) !important;
+}
+
 .nav-tabs {
 	--bs-nav-tabs-border-color: transparent;
 }

packages/webui/src/client/styles/settings.scss

@@ -6,7 +6,10 @@
 
 	button {
 		align-self: start;
-		margin: 0.25rem;
+	}
+
+	button + button {
+		margin-left: 0.25rem;
 	}
 }