:root { --woof-sd-ie-vertex_enabled_bg_color: #79b8ff; --woof-sd-ie-substrate_enabled_bg_color: #c8e1ff; --woof-sd-ie-vertex_disabled_bg_color: #ffffff; --woof-sd-ie-substrate_disabled_bg_color: #9a9999; --woof-sd-ie-vertex_size: 20px; --woof-sd-ie-vertex_border_radius: 50%; --woof-sd-ie-vertex_top: 0; --woof-sd-ie-substrate_width: 34px; --woof-sd-ie-substrate_height: 14px; --woof-sd-ie-substrate_border_radius: 8px; --woof-sd-ie-label_font_color: #333333; --woof-sd-ie-label_font_size: 16px; --woof-sd-ie-label_left: 15px; --woof-sd-ie-label_top: -18px; } label.switcher23-toggle { position: relative; display: inline-block; width: auto; height: auto; cursor: pointer; -webkit-tap-highlight-color: transparent; transform: translate3d(0, 0, 0); padding: 0 !important; } .switcher23-toggle:before { content: ""; position: relative; top: 3px; left: 3px; width: var(--woof-sd-ie-substrate_width); height: var(--woof-sd-ie-substrate_height); display: block; background: var(--woof-sd-ie-substrate_disabled_bg_color); border-radius: var(--woof-sd-ie-substrate_border_radius); transition: background 0.2s ease; } .switcher23-toggle > span { position: absolute; top: var(--woof-sd-ie-vertex_top); left: -3px; width: var(--woof-sd-ie-vertex_size); height: var(--woof-sd-ie-vertex_size); display: block; background: var(--woof-sd-ie-vertex_disabled_bg_color); border-radius: var(--woof-sd-ie-vertex_border_radius); box-shadow: 0 3px 8px rgba(154, 153, 153, 0.5); transition: all 0.2s ease; } .switcher23-toggle > span:before { content: ""; position: absolute; display: block; margin: calc((var(--woof-sd-ie-vertex_size) - var(--woof-sd-ie-vertex_size)/9) * -1); width: calc(var(--woof-sd-ie-vertex_size)*3); height: calc(var(--woof-sd-ie-vertex_size)*3); background: rgba(79, 46, 220, 0.5); border-radius: var(--woof-sd-ie-vertex_border_radius); transform: scale(0); opacity: 1; pointer-events: none; } .switcher23 { display: none !important; } .switcher23:checked + .switcher23-toggle:before { background: var(--woof-sd-ie-substrate_enabled_bg_color); } .switcher23:checked + .switcher23-toggle > span { background: var(--woof-sd-ie-vertex_enabled_bg_color); transform: translateX(calc(var(--woof-sd-ie-substrate_width) - var(--woof-sd-ie-vertex_size)/2)); transition: all 0.2s cubic-bezier(0.8, 0.4, 0.3, 1.25), background 0.15s ease; box-shadow: 0 3px 8px rgba(79, 46, 220, 0.2); } .switcher23:checked + .switcher23-toggle > span:before { transform: scale(1); opacity: 0; transition: all 0.4s ease; } .switcher23-toggle-dir > span{ width: 23px; border-top-right-radius:0; border-bottom-right-radius:0; border-top-left-radius:10px; border-bottom-left-radius:10px; background: #79b8ff !important; } .switcher23-toggle-dir:before{ background: #c8e1ff; } .switcher23:checked + .switcher23-toggle-dir > span{ border-top-right-radius:10px; border-bottom-right-radius:10px; border-top-left-radius:0; border-bottom-left-radius:0; } .switcher23-title{ display: block; position: relative; width: fit-content; right: 0; top: var(--woof-sd-ie-label_top); left: calc(var(--woof-sd-ie-substrate_width) + var(--woof-sd-ie-label_left)); font-size: var(--woof-sd-ie-label_font_size); color: var(--woof-sd-ie-label_font_color) !important; user-select: none; max-width: calc(100% - var(--woof-sd-ie-counter_width)*2 - var(--woof-sd-ie-substrate_width) + var(--woof-sd-ie-label_left)); overflow: hidden; } .switcher23-container{ display: inline-flex; width: fit-content; flex-wrap: nowrap; align-items: baseline; } .switcher23-container label{ width: 100%; margin: 0 !important; } .switcher23-container .switcher23-title2{ display: block; width: fit-content; flex-wrap: nowrap; white-space: nowrap; margin-left: 47px; line-height: 0; margin-top: -4px; color: #333333; }