/* 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; } .usof-switcher { line-height: 1.4; margin: .35em 0; } .usof-switcher > label { display: flex; align-items: center; } .usof-switcher > label input { display: none !important; } .usof-switcher-box { flex-shrink: 0; position: relative; width: 3.5em; height: 2.1em; margin-right: .6em; 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(--wp-admin-theme-color); } .usof-form-row.color_yellow .usof-switcher > label input:checked + .usof-switcher-box { background-color: #f90; /* fixed value for Maintenance Mode */ } .usof-form-row.color_brand .usof-switcher > label input:checked + .usof-switcher-box { background-color: #24d5b1; } .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; } /* Custom "BETA" badge */ .usof-form-row.beta .usof-switcher-text:after { content: 'BETA'; display: inline-block; vertical-align: top; font-size: 9px; line-height: 12px; font-family: monospace; margin: 3px 4px 0; padding: 0 4px; border-radius: 20px; background: var(--usof-color-red-30); color: var(--usof-color-white); }