Switch by JKJkHuger
#212121
1/* Default */ 2.theme { 3 display: flex; 4 align-items: center; 5 -webkit-tap-highlight-color: transparent; 6} 7 8.theme__fill, 9.theme__icon { 10 transition: 0.3s; 11} 12 13.theme__fill { 14 background-color: var(--bg); 15 display: block; 16 mix-blend-mode: difference; 17 position: fixed; 18 inset: 0; 19 height: 100%; 20 transform: translateX(-100%); 21} 22 23.theme__icon, 24.theme__toggle { 25 z-index: 1; 26} 27 28.theme__icon, 29.theme__icon-part { 30 position: absolute; 31} 32 33.theme__icon { 34 display: block; 35 top: 0.5em; 36 left: 0.5em; 37 width: 1.5em; 38 height: 1.5em; 39} 40 41.theme__icon-part { 42 border-radius: 50%; 43 box-shadow: 0.4em -0.4em 0 0.5em hsl(0,0%,100%) inset; 44 top: calc(50% - 0.5em); 45 left: calc(50% - 0.5em); 46 width: 1em; 47 height: 1em; 48 transition: box-shadow var(--transDur) ease-in-out, 49 opacity var(--transDur) ease-in-out, 50 transform var(--transDur) ease-in-out; 51 transform: scale(0.5); 52} 53 54.theme__icon-part ~ .theme__icon-part { 55 background-color: hsl(0,0%,100%); 56 border-radius: 0.05em; 57 top: 50%; 58 left: calc(50% - 0.05em); 59 transform: rotate(0deg) translateY(0.5em); 60 transform-origin: 50% 0; 61 width: 0.1em; 62 height: 0.2em; 63} 64 65.theme__icon-part:nth-child(3) { 66 transform: rotate(45deg) translateY(0.45em); 67} 68 69.theme__icon-part:nth-child(4) { 70 transform: rotate(90deg) translateY(0.45em); 71} 72 73.theme__icon-part:nth-child(5) { 74 transform: rotate(135deg) translateY(0.45em); 75} 76 77.theme__icon-part:nth-child(6) { 78 transform: rotate(180deg) translateY(0.45em); 79} 80 81.theme__icon-part:nth-child(7) { 82 transform: rotate(225deg) translateY(0.45em); 83} 84 85.theme__icon-part:nth-child(8) { 86 transform: rotate(270deg) translateY(0.5em); 87} 88 89.theme__icon-part:nth-child(9) { 90 transform: rotate(315deg) translateY(0.5em); 91} 92 93.theme__label, 94.theme__toggle, 95.theme__toggle-wrap { 96 position: relative; 97} 98 99.theme__toggle, 100.theme__toggle:before { 101 display: block; 102} 103 104.theme__toggle { 105 background-color: hsl(48,90%,85%); 106 border-radius: 25% / 50%; 107 box-shadow: 0 0 0 0.125em var(--primaryT); 108 padding: 0.25em; 109 width: 6em; 110 height: 3em; 111 -webkit-appearance: none; 112 appearance: none; 113 transition: background-color var(--transDur) ease-in-out, 114 box-shadow 0.15s ease-in-out, 115 transform var(--transDur) ease-in-out; 116} 117 118.theme__toggle:before { 119 background-color: hsl(48,90%,55%); 120 border-radius: 50%; 121 content: ""; 122 width: 2.5em; 123 height: 2.5em; 124 transition: 0.3s; 125} 126 127.theme__toggle:focus { 128 box-shadow: 0 0 0 0.125em var(--primary); 129 outline: transparent; 130} 131 132/* Checked */ 133.theme__toggle:checked { 134 background-color: hsl(198,90%,15%); 135} 136 137.theme__toggle:checked:before, 138.theme__toggle:checked ~ .theme__icon { 139 transform: translateX(3em); 140} 141 142.theme__toggle:checked:before { 143 background-color: hsl(198,90%,55%); 144} 145 146.theme__toggle:checked ~ .theme__fill { 147 transform: translateX(0); 148} 149 150.theme__toggle:checked ~ .theme__icon .theme__icon-part:nth-child(1) { 151 box-shadow: 0.2em -0.2em 0 0.2em hsl(0,0%,100%) inset; 152 transform: scale(1); 153 top: 0.2em; 154 left: -0.2em; 155} 156 157.theme__toggle:checked ~ .theme__icon .theme__icon-part ~ .theme__icon-part { 158 opacity: 0; 159} 160 161.theme__toggle:checked ~ .theme__icon .theme__icon-part:nth-child(2) { 162 transform: rotate(45deg) translateY(0.8em); 163} 164 165.theme__toggle:checked ~ .theme__icon .theme__icon-part:nth-child(3) { 166 transform: rotate(90deg) translateY(0.8em); 167} 168 169.theme__toggle:checked ~ .theme__icon .theme__icon-part:nth-child(4) { 170 transform: rotate(135deg) translateY(0.8em); 171} 172 173.theme__toggle:checked ~ .theme__icon .theme__icon-part:nth-child(5) { 174 transform: rotate(180deg) translateY(0.8em); 175} 176 177.theme__toggle:checked ~ .theme__icon .theme__icon-part:nth-child(6) { 178 transform: rotate(225deg) translateY(0.8em); 179} 180 181.theme__toggle:checked ~ .theme__icon .theme__icon-part:nth-child(7) { 182 transform: rotate(270deg) translateY(0.8em); 183} 184 185.theme__toggle:checked ~ .theme__icon .theme__icon-part:nth-child(8) { 186 transform: rotate(315deg) translateY(0.8em); 187} 188 189.theme__toggle:checked ~ .theme__icon .theme__icon-part:nth-child(9) { 190 transform: rotate(360deg) translateY(0.8em); 191} 192 193.theme__toggle-wrap { 194 margin: 0 0.75em; 195} 196 197@supports selector(:focus-visible) { 198 .theme__toggle:focus { 199 box-shadow: 0 0 0 0.125em var(--primaryT); 200 } 201 202 .theme__toggle:focus-visible { 203 box-shadow: 0 0 0 0.125em var(--primary); 204 } 205}
22K views
MIT License