22

✏️ Editing: switcher.css

/* TYPE Switcher */
.usof-form-row.type_switch .usof-form-row-control {
	display: inline-block;
	vertical-align: top;
	}
.usof-form-row.type_switch.desc_2 .usof-form-row-desc {
	display: inline-block;
	vertical-align: top;
	position: relative;
	top: auto !important;
	right: auto !important;
	margin-top: 9px;
	}
.usof-switcher {
	line-height: 1.4;
	margin: .45em 0;
	}
	.usof-switcher > label {
		display: flex;
		align-items: center;
		}
		.usof-switcher > label input {
			display: none;
			}
		.usof-switcher-box {
			flex-shrink: 0;
			position: relative;
			width: 3.5em;
			height: 2.1em;
			margin-right: .8em;
			border-radius: 2em;
			box-shadow: var(--usof-box-shadow-inset);
			background-color: var(--usof-color-gray-2);
			transition: background .2s;
			}
		.usof-switcher > label:hover .usof-switcher-box {
			background-color: var(--usof-color-gray-5);
			}
		.usof-switcher > label input:checked + .usof-switcher-box {
			background-color: var(--usof-color-blue-50);
			}
		.usof-form-row.color_yellow .usof-switcher > label input:checked + .usof-switcher-box {
			background-color: #f90; /* fixed value for Maintenance Mode */
			}
			.usof-switcher-box > i {
				position: absolute;
				top: .25em;
				left: .25em;
				height: 1.6em;
				width: 1.6em;
				border-radius: 50%;
				box-shadow: var(--usof-box-shadow-small);
				background-color: var(--usof-color-white);
				transition: left .2s, right .2s;
				}
			.usof-switcher > label input:checked + .usof-switcher-box > i {
				left: 1.65em;
				}

MR SKB