leandro
e8d519af9d
All checks were successful
CI/CD Pipeline / Build and Deploy with Docker Compose (pull_request) Successful in 36m19s
close #78
12 lines
1.1 KiB
CSS
12 lines
1.1 KiB
CSS
.toggle-container { display: flex; align-items: center; gap: .5rem; color: var(--ph-text-muted); }
|
|
.switch { position: relative; display: inline-block; width: 2.45rem; height: 1.4rem; margin: 0; }
|
|
.switch input { width: 0; height: 0; opacity: 0; }
|
|
.slider { position: absolute; inset: 0; cursor: pointer; background: var(--ph-border-strong); border-radius: 999px; transition: background-color .2s ease; }
|
|
.slider::before { position: absolute; bottom: .2rem; left: .2rem; width: 1rem; height: 1rem; content: ""; background: #fff; border-radius: 50%; box-shadow: 0 1px 3px rgba(0, 0, 0, .25); transition: transform .2s ease; }
|
|
input:checked + .slider { background: #3157a4; }
|
|
input:focus-visible + .slider { box-shadow: 0 0 0 .22rem var(--ph-focus); }
|
|
input:checked + .slider::before { transform: translateX(1.05rem); }
|
|
.toggle-label { color: var(--ph-text-muted); font-size: .76rem; font-weight: 600; white-space: nowrap; }
|
|
.toggle-icon { display: inline-flex; width: 1rem; justify-content: center; font-size: .85rem; }
|
|
@media (max-width: 575.98px) { .toggle-label { display: none; } }
|