.etheme-cs-toggles { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; line-height: 1; margin-bottom: 20px; } .etheme-cs-switch { color: #888; } .etheme-cs-switch.active { color: #000; } .etheme-input-label { position: relative; display: inline-block; margin: unset; font-size: 12px; width: 5em; height: 2.5em; } .etheme-input-label:not(:only-child) { margin: 0 10px; } .etheme-input-label .etheme-cs-slider, .etheme-input-label .etheme-cs-slider:before { position: absolute; border-width: 0; border-style: solid; -webkit-transition: 0.4s; transition: 0.4s; } .etheme-input-label .etheme-cs-slider { top: 0; right: 0; bottom: 0; left: 0; background-color: var(--color-02, #2962FF); cursor: pointer; } .etheme-input-label .etheme-cs-slider:before { content: ""; bottom: 0.4em; left: 0.4em; width: 1.7em; height: 1.7em; background-color: var(--color-01, #fff); } .etheme-input-label .etheme-cs-slider.etheme-cs-square, .etheme-input-label .etheme-cs-slider.etheme-cs-square:before { border-radius: 0; } .etheme-input-label .etheme-cs-slider.etheme-cs-round, .etheme-input-label .etheme-cs-slider.etheme-cs-round-2, .etheme-input-label .etheme-cs-slider.etheme-cs-round-3 { border-radius: 1.7em; } .etheme-input-label .etheme-cs-slider.etheme-cs-round:before, .etheme-input-label .etheme-cs-slider.etheme-cs-round-2:before, .etheme-input-label .etheme-cs-slider.etheme-cs-round-3:before { border-radius: 50%; } .etheme-input-label input { width: 0; height: 0; opacity: 0; position: absolute; } .etheme-input-label input:checked + .etheme-cs-round, .etheme-input-label input:checked + .etheme-cs-round-2, .etheme-input-label input:checked + .etheme-cs-square, .etheme-input-label input:checked + .etheme-cs-square-2 { background-color: var(--color-active-02, #e1e1e1); } .etheme-input-label input:checked + .etheme-cs-round:before, .etheme-input-label input:checked + .etheme-cs-round-2:before, .etheme-input-label input:checked + .etheme-cs-square:before, .etheme-input-label input:checked + .etheme-cs-square-2:before { left: calc(100% - 1.7em*2 - .4em); background-color: var(--color-active-01, #888); -webkit-transform: translateX(100%); transform: translateX(100%); } span.etheme-cs-slider.etheme-cs-round-2, span.etheme-cs-slider.etheme-cs-square-2 { top: 50%; height: 0.85em; width: calc(100% - 4px); background: var(--color-02, rgba(41, 98, 255, 0.5)); -webkit-transform: translateY(-50%); transform: translateY(-50%); margin: 0 auto; } span.etheme-cs-slider.etheme-cs-round-2 { border-radius: 2em; } span.etheme-cs-slider.etheme-cs-round-2:before, span.etheme-cs-slider.etheme-cs-square-2:before { bottom: -50%; left: -0.1em; background: var(--color-01, #2962FF); } .etheme-input-label input:checked + .etheme-cs-round-2:before, .etheme-input-label input:checked + .etheme-cs-square-2:before { left: calc(100% - 1.7em*2 + .1em); } .etheme-input-label.type-3 { width: auto; } .etheme-cs-slider.etheme-cs-square-3 span, .etheme-cs-slider.etheme-cs-round-3 span { position: relative; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); line-height: 1; display: none; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; color: var(--color-01, #2962ff); -webkit-transition: all 0.3s linear; transition: all 0.3s linear; } .etheme-input-label .etheme-cs-square-3 .etheme-cs-toggle-a, .etheme-input-label .etheme-cs-round-3 .etheme-cs-toggle-a { left: 0.4em; margin-left: 0.4em; margin-right: 2.9em; } .etheme-input-label .etheme-cs-square-3, .etheme-input-label .etheme-cs-round-3 { position: relative; background-color: var(--color-02, rgba(41, 98, 255, 0.15)); display: inline-block; height: 2.5em; } .etheme-input-label .etheme-cs-slider .etheme-cs-toggle-b { right: 0.4em; margin-right: 0.4em; margin-left: 2.9em; color: var(--color-active-01, #888); } .etheme-input-label .etheme-cs-square-3:before, .etheme-input-label .etheme-cs-round-3:before { z-index: 1; background-color: var(--color-01, #2962ff); } .etheme-input-label input:not(:checked) + .etheme-cs-square-3:before, .etheme-input-label input:not(:checked) + .etheme-cs-round-3:before { -webkit-transform: translateX(100%); transform: translateX(100%); left: calc(100% - 1.7em*2 - .4em); } .etheme-input-label input:checked + .etheme-cs-square-3 .etheme-cs-toggle-b, .etheme-input-label input:not(:checked) + .etheme-cs-square-3 .etheme-cs-toggle-a, .etheme-input-label input:checked + .etheme-cs-round-3 .etheme-cs-toggle-b, .etheme-input-label input:not(:checked) + .etheme-cs-round-3 .etheme-cs-toggle-a { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; } .etheme-input-label input:checked + .etheme-cs-square-3, .etheme-input-label input:checked + .etheme-cs-round-3 { background-color: var(--color-active-02, #e1e1e1); } .etheme-input-label input:checked + .etheme-cs-square-3:before, .etheme-input-label input:checked + .etheme-cs-round-3:before { background-color: var(--color-active-01, #888); } .etheme-input-label input:focus + .etheme-cs-round, .etheme-input-label input:focus + .etheme-cs-round-2, .etheme-input-label input:focus + .etheme-cs-square, .etheme-input-label input:focus + .etheme-cs-square-2 { -webkit-box-shadow: unset; box-shadow: unset; } .etheme-cs-content:not(.active) { display: none; }