Switch by csemszepp
#212121
1:root { 2 --hue: 223; 3 --bg: hsl(var(--hue),10%,90%); 4 --fg: hsl(var(--hue),10%,10%); 5 --primary: hsl(var(--hue),90%,50%); 6 --trans-dur: 0.3s; 7 --trans-timing: cubic-bezier(0.76,0.05,0.24,0.95); 8 --trans-timing-in: cubic-bezier(0.76,0.05,0.86,0.06); 9 --trans-timing-out: cubic-bezier(0.05,0.76,0.06,0.86); 10 font-size: calc(40px + (80 - 40) * (100px - 320px) / (2560 - 320)); 11} 12 13.container, 14.switch__input { 15 color: var(--fg); 16 font: 1em/1.5 sans-serif; 17} 18 19.container { 20 background-color: var(--bg); 21 display: flex; 22 height: 100%; 23 transition: background-color var(--trans-dur), 24 color var(--trans-dur); 25} 26 27.container:has(.switch__input:checked) { 28 background-color: var(--fg); 29 color: var(--bg); 30} 31 32.switch { 33 margin: auto; 34 position: relative; 35} 36 37.switch__icon, 38.switch__input { 39 display: block; 40} 41 42.switch__icon { 43 position: absolute; 44 top: 0.375em; 45 right: 0.375em; 46 width: 0.75em; 47 height: 0.75em; 48 transition: opacity calc(var(--trans-dur) / 2), 49 transform calc(var(--trans-dur) / 2); 50} 51 52.switch__icon polyline { 53 transition: stroke-dashoffset calc(var(--trans-dur) / 2); 54} 55 56.switch__icon--light, 57.switch__icon--light polyline { 58 transition-delay: calc(var(--trans-dur) / 2); 59 transition-timing-function: var(--trans-timing-out); 60} 61 62.switch__icon--dark { 63 opacity: 0; 64 transform: translateX(-0.75em) rotate(30deg) scale(0.75); 65 transition-timing-function: var(--trans-timing-in); 66} 67 68.switch__input { 69 background-color: hsl(210,90%,70%); 70 border-radius: 0.75em; 71 box-shadow: 0 0 0 0.125em hsla(var(--hue),90%,50%,0), 72 0.125em 0.125em 0.25em hsla(var(--hue),90%,10%,0.2); 73 outline: transparent; 74 position: relative; 75 width: 3em; 76 height: 1.5em; 77 -webkit-appearance: none; 78 appearance: none; 79 -webkit-tap-highlight-color: transparent; 80 transition: background-color var(--trans-dur) var(--trans-timing), 81 box-shadow 0.15s linear; 82} 83 84.switch__input:focus-visible { 85 box-shadow: 0 0 0 0.125em hsl(var(--hue),90%,50%), 86 0.125em 0.125em 0.25em hsla(var(--hue),90%,10%,0.2); 87} 88 89.switch__input:before, 90.switch__input:after { 91 content: ""; 92 display: block; 93 position: absolute; 94} 95 96.switch__input:before { 97 background-color: hsl(50,90%,50%); 98 border-radius: inherit; 99 mask-image: linear-gradient(120deg,hsl(0,0%,0%) 20%,hsla(0,0%,0%,0) 80%); 100 -webkit-mask-image: linear-gradient(120deg,hsl(0,0%,0%) 20%,hsla(0,0%,0%,0) 80%); 101 inset: 0; 102 transition: background-color var(--trans-dur) var(--trans-timing); 103} 104 105.switch__input:after { 106 background-color: hsl(0,0%,100%); 107 border-radius: 50%; 108 box-shadow: 0.05em 0.05em 0.05em hsla(var(--hue),90%,10%,0.1); 109 top: 0.125em; 110 left: 0.125em; 111 width: 1.25em; 112 height: 1.25em; 113 transition: background-color var(--trans-dur) var(--trans-timing), 114 transform var(--trans-dur) var(--trans-timing); 115 z-index: 1; 116} 117 118.switch__input:checked { 119 background-color: hsl(290,90%,40%); 120} 121 122.switch__input:checked:before { 123 background-color: hsl(220,90%,40%); 124} 125 126.switch__input:checked:after { 127 background-color: hsl(0,0%,0%); 128 transform: translateX(1.5em); 129} 130 131.switch__input:checked ~ .switch__icon--light, 132.switch__input:checked ~ .switch__icon--light polyline { 133 transition-delay: 0s; 134 transition-timing-function: var(--trans-timing-in); 135} 136 137.switch__input:checked ~ .switch__icon--light { 138 opacity: 0; 139 transform: translateX(-0.75em) rotate(-30deg) scale(0.75); 140} 141 142.switch__input:checked ~ .switch__icon--light polyline { 143 stroke-dashoffset: 1.5; 144} 145 146.switch__input:checked ~ .switch__icon--dark { 147 opacity: 1; 148 transform: translateX(-1.5em); 149 transition-delay: calc(var(--trans-dur) / 2); 150 transition-timing-function: var(--trans-timing-out); 151} 152 153.switch__sr { 154 overflow: hidden; 155 position: absolute; 156 width: 1px; 157 height: 1px; 158} 159
574 views
574 views
MIT License