Back

Switch 

 1 
 2<label class="bb8-toggle">
 3  <input class="bb8-toggle__checkbox" type="checkbox">
 4  <div class="bb8-toggle__container">
 5    <div class="bb8-toggle__scenery">
 6      <div class="bb8-toggle__star"></div>
 7      <div class="bb8-toggle__star"></div>
 8      <div class="bb8-toggle__star"></div>
 9      <div class="bb8-toggle__star"></div>
10      <div class="bb8-toggle__star"></div>
11      <div class="bb8-toggle__star"></div>
12      <div class="bb8-toggle__star"></div>
13      <div class="tatto-1"></div>
14      <div class="tatto-2"></div>
15      <div class="gomrassen"></div>
16      <div class="hermes"></div>
17      <div class="chenini"></div>
18      <div class="bb8-toggle__cloud"></div>
19      <div class="bb8-toggle__cloud"></div>
20      <div class="bb8-toggle__cloud"></div>
21    </div>
22    <div class="bb8">
23      <div class="bb8__head-container">
24        <div class="bb8__antenna"></div>
25        <div class="bb8__antenna"></div>
26        <div class="bb8__head"></div>
27      </div>
28      <div class="bb8__body"></div>
29    </div>
30    <div class="artificial__hidden">
31      <div class="bb8__shadow"></div>
32    </div>
33  </div>
34</label>
          
  1 
  2/* REMASTERED */
  3/* RTX-ON */
  4/* completely redone toggle and droid */
  5 
  6.bb8-toggle {
  7  --toggle-size: 16px;
  8  /* finally I removed the scale now everything depends on the font-size */
  9  /* --margin-top-for-head: 1.75em; */
 10  /* it's just in case 👆 */
 11  --toggle-width: 10.625em;
 12  --toggle-height: 5.625em;
 13  --toggle-offset: calc((var(--toggle-height) - var(--bb8-diameter)) / 2);
 14  --toggle-bg: linear-gradient(#2c4770, #070e2b 35%, #628cac 50% 70%, #a6c5d4)
 15    no-repeat;
 16  --bb8-diameter: 4.375em;
 17  --radius: 99em;
 18  --transition: 0.4s;
 19  --accent: #de7d2f;
 20  --bb8-bg: #fff;
 21}
 22 
 23.bb8-toggle,
 24.bb8-toggle *,
 25.bb8-toggle *::before,
 26.bb8-toggle *::after {
 27  -webkit-box-sizing: border-box;
 28  box-sizing: border-box;
 29}
 30 
 31.bb8-toggle {
 32  cursor: pointer;
 33  margin-top: var(--margin-top-for-head);
 34  font-size: var(--toggle-size);
 35}
 36 
 37.bb8-toggle__checkbox {
 38  -webkit-appearance: none;
 39  -moz-appearance: none;
 40  appearance: none;
 41  display: none;
 42}
 43 
 44.bb8-toggle__container {
 45  width: var(--toggle-width);
 46  height: var(--toggle-height);
 47  background: var(--toggle-bg);
 48  background-size: 100% 11.25em;
 49  background-position-y: -5.625em;
 50  border-radius: var(--radius);
 51  position: relative;
 52  -webkit-transition: var(--transition);
 53  -o-transition: var(--transition);
 54  transition: var(--transition);
 55}
 56 
 57.bb8 {
 58  display: -webkit-box;
 59  display: -ms-flexbox;
 60  display: flex;
 61  -webkit-box-orient: vertical;
 62  -webkit-box-direction: normal;
 63  -ms-flex-direction: column;
 64  flex-direction: column;
 65  -webkit-box-align: center;
 66  -ms-flex-align: center;
 67  align-items: center;
 68  position: absolute;
 69  top: calc(var(--toggle-offset) - 1.688em + 0.188em);
 70  left: var(--toggle-offset);
 71  -webkit-transition: var(--transition);
 72  -o-transition: var(--transition);
 73  transition: var(--transition);
 74  z-index: 2;
 75}
 76 
 77.bb8__head-container {
 78  position: relative;
 79  -webkit-transition: var(--transition);
 80  -o-transition: var(--transition);
 81  transition: var(--transition);
 82  z-index: 2;
 83  -webkit-transform-origin: 1.25em 3.75em;
 84  -ms-transform-origin: 1.25em 3.75em;
 85  transform-origin: 1.25em 3.75em;
 86}
 87 
 88.bb8__head {
 89  overflow: hidden;
 90  margin-bottom: -0.188em;
 91  width: 2.5em;
 92  height: 1.688em;
 93  background: -o-linear-gradient(
 94      transparent 0.063em,
 95      dimgray 0.063em 0.313em,
 96      transparent 0.313em 0.375em,
 97      var(--accent) 0.375em 0.5em,
 98      transparent 0.5em 1.313em,
 99      silver 1.313em 1.438em,
100      transparent 1.438em
101    ),
102    -o-linear-gradient(45deg, transparent 0.188em, var(--bb8-bg) 0.188em 1.25em, transparent
103          1.25em),
104    -o-linear-gradient(135deg, transparent 0.188em, var(--bb8-bg) 0.188em 1.25em, transparent
105          1.25em),
106    -o-linear-gradient(var(--bb8-bg) 1.25em, transparent 1.25em);
107  background: -o-linear-gradient(
108      transparent 0.063em,
109      dimgray 0.063em 0.313em,
110      transparent 0.313em 0.375em,
111      var(--accent) 0.375em 0.5em,
112      transparent 0.5em 1.313em,
113      silver 1.313em 1.438em,
114      transparent 1.438em
115    ),
116    -o-linear-gradient(45deg, transparent 0.188em, var(--bb8-bg) 0.188em 1.25em, transparent
117          1.25em),
118    -o-linear-gradient(135deg, transparent 0.188em, var(--bb8-bg) 0.188em 1.25em, transparent
119          1.25em),
120    -o-linear-gradient(var(--bb8-bg) 1.25em, transparent 1.25em);
121  background: -o-linear-gradient(
122      transparent 0.063em,
123      dimgray 0.063em 0.313em,
124      transparent 0.313em 0.375em,
125      var(--accent) 0.375em 0.5em,
126      transparent 0.5em 1.313em,
127      silver 1.313em 1.438em,
128      transparent 1.438em
129    ),
130    -o-linear-gradient(45deg, transparent 0.188em, var(--bb8-bg) 0.188em 1.25em, transparent
131          1.25em),
132    -o-linear-gradient(135deg, transparent 0.188em, var(--bb8-bg) 0.188em 1.25em, transparent
133          1.25em),
134    -o-linear-gradient(var(--bb8-bg) 1.25em, transparent 1.25em);
135  background: -o-linear-gradient(
136      transparent 0.063em,
137      dimgray 0.063em 0.313em,
138      transparent 0.313em 0.375em,
139      var(--accent) 0.375em 0.5em,
140      transparent 0.5em 1.313em,
141      silver 1.313em 1.438em,
142      transparent 1.438em
143    ),
144    -o-linear-gradient(45deg, transparent 0.188em, var(--bb8-bg) 0.188em 1.25em, transparent
145          1.25em),
146    -o-linear-gradient(135deg, transparent 0.188em, var(--bb8-bg) 0.188em 1.25em, transparent
147          1.25em),
148    -o-linear-gradient(var(--bb8-bg) 1.25em, transparent 1.25em);
149  background: linear-gradient(
150      transparent 0.063em,
151      dimgray 0.063em 0.313em,
152      transparent 0.313em 0.375em,
153      var(--accent) 0.375em 0.5em,
154      transparent 0.5em 1.313em,
155      silver 1.313em 1.438em,
156      transparent 1.438em
157    ),
158    linear-gradient(
159      45deg,
160      transparent 0.188em,
161      var(--bb8-bg) 0.188em 1.25em,
162      transparent 1.25em
163    ),
164    linear-gradient(
165      -45deg,
166      transparent 0.188em,
167      var(--bb8-bg) 0.188em 1.25em,
168      transparent 1.25em
169    ),
170    linear-gradient(var(--bb8-bg) 1.25em, transparent 1.25em);
171  border-radius: var(--radius) var(--radius) 0 0;
172  position: relative;
173  z-index: 1;
174  -webkit-filter: drop-shadow(0 0.063em 0.125em gray);
175  filter: drop-shadow(0 0.063em 0.125em gray);
176}
177 
178.bb8__head::before {
179  content: "";
180  position: absolute;
181  width: 0.563em;
182  height: 0.563em;
183  background: -o-radial-gradient(
184      0.25em 0.375em,
185      0.125em circle,
186      red,
187      transparent
188    ),
189    -o-radial-gradient(0.375em 0.188em, 0.063em circle, var(--bb8-bg) 50%, transparent
190          100%),
191    -o-linear-gradient(45deg, #000 0.188em, dimgray 0.313em 0.375em, #000 0.5em);
192  background: -o-radial-gradient(
193      0.25em 0.375em,
194      0.125em circle,
195      red,
196      transparent
197    ),
198    -o-radial-gradient(0.375em 0.188em, 0.063em circle, var(--bb8-bg) 50%, transparent
199          100%),
200    -o-linear-gradient(45deg, #000 0.188em, dimgray 0.313em 0.375em, #000 0.5em);
201  background: -o-radial-gradient(
202      0.25em 0.375em,
203      0.125em circle,
204      red,
205      transparent
206    ),
207    -o-radial-gradient(0.375em 0.188em, 0.063em circle, var(--bb8-bg) 50%, transparent
208          100%),
209    -o-linear-gradient(45deg, #000 0.188em, dimgray 0.313em 0.375em, #000 0.5em);
210  background: -o-radial-gradient(
211      0.25em 0.375em,
212      0.125em circle,
213      red,
214      transparent
215    ),
216    -o-radial-gradient(0.375em 0.188em, 0.063em circle, var(--bb8-bg) 50%, transparent
217          100%),
218    -o-linear-gradient(45deg, #000 0.188em, dimgray 0.313em 0.375em, #000 0.5em);
219  background: radial-gradient(
220      0.125em circle at 0.25em 0.375em,
221      red,
222      transparent
223    ),
224    radial-gradient(
225      0.063em circle at 0.375em 0.188em,
226      var(--bb8-bg) 50%,
227      transparent 100%
228    ),
229    linear-gradient(45deg, #000 0.188em, dimgray 0.313em 0.375em, #000 0.5em);
230  border-radius: var(--radius);
231  top: 0.413em;
232  left: 50%;
233  -webkit-transform: translate(-50%);
234  -ms-transform: translate(-50%);
235  transform: translate(-50%);
236  -webkit-box-shadow: 0 0 0 0.089em lightgray, 0.563em 0.281em 0 -0.148em,
237    0.563em 0.281em 0 -0.1em var(--bb8-bg), 0.563em 0.281em 0 -0.063em;
238  box-shadow: 0 0 0 0.089em lightgray, 0.563em 0.281em 0 -0.148em,
239    0.563em 0.281em 0 -0.1em var(--bb8-bg), 0.563em 0.281em 0 -0.063em;
240  z-index: 1;
241  -webkit-transition: var(--transition);
242  -o-transition: var(--transition);
243  transition: var(--transition);
244}
245 
246.bb8__head::after {
247  content: "";
248  position: absolute;
249  bottom: 0.375em;
250  left: 0;
251  width: 100%;
252  height: 0.188em;
253  background: -o-linear-gradient(
254    left,
255    var(--accent) 0.125em,
256    transparent 0.125em 0.188em,
257    var(--accent) 0.188em 0.313em,
258    transparent 0.313em 0.375em,
259    var(--accent) 0.375em 0.938em,
260    transparent 0.938em 1em,
261    var(--accent) 1em 1.125em,
262    transparent 1.125em 1.875em,
263    var(--accent) 1.875em 2em,
264    transparent 2em 2.063em,
265    var(--accent) 2.063em 2.25em,
266    transparent 2.25em 2.313em,
267    var(--accent) 2.313em 2.375em,
268    transparent 2.375em 2.438em,
269    var(--accent) 2.438em
270  );
271  background: -webkit-gradient(
272    linear,
273    left top,
274    right top,
275    color-stop(0.125em, var(--accent)),
276    color-stop(0.125em, transparent),
277    color-stop(0.188em, var(--accent)),
278    color-stop(0.313em, transparent),
279    color-stop(0.375em, var(--accent)),
280    color-stop(0.938em, transparent),
281    color-stop(1em, var(--accent)),
282    color-stop(1.125em, transparent),
283    color-stop(1.875em, var(--accent)),
284    color-stop(2em, transparent),
285    color-stop(2.063em, var(--accent)),
286    color-stop(2.25em, transparent),
287    color-stop(2.313em, var(--accent)),
288    color-stop(2.375em, transparent),
289    color-stop(2.438em, var(--accent))
290  );
291  background: linear-gradient(
292    to right,
293    var(--accent) 0.125em,
294    transparent 0.125em 0.188em,
295    var(--accent) 0.188em 0.313em,
296    transparent 0.313em 0.375em,
297    var(--accent) 0.375em 0.938em,
298    transparent 0.938em 1em,
299    var(--accent) 1em 1.125em,
300    transparent 1.125em 1.875em,
301    var(--accent) 1.875em 2em,
302    transparent 2em 2.063em,
303    var(--accent) 2.063em 2.25em,
304    transparent 2.25em 2.313em,
305    var(--accent) 2.313em 2.375em,
306    transparent 2.375em 2.438em,
307    var(--accent) 2.438em
308  );
309  -webkit-transition: var(--transition);
310  -o-transition: var(--transition);
311  transition: var(--transition);
312}
313 
314.bb8__antenna {
315  position: absolute;
316  -webkit-transform: translateY(-90%);
317  -ms-transform: translateY(-90%);
318  transform: translateY(-90%);
319  width: 0.059em;
320  border-radius: var(--radius) var(--radius) 0 0;
321  -webkit-transition: var(--transition);
322  -o-transition: var(--transition);
323  transition: var(--transition);
324}
325 
326.bb8__antenna:nth-child(1) {
327  height: 0.938em;
328  right: 0.938em;
329  background: -o-linear-gradient(#000 0.188em, silver 0.188em);
330  background: -webkit-gradient(
331    linear,
332    left top,
333    left bottom,
334    color-stop(0.188em, #000),
335    color-stop(0.188em, silver)
336  );
337  background: linear-gradient(#000 0.188em, silver 0.188em);
338}
339 
340.bb8__antenna:nth-child(2) {
341  height: 0.375em;
342  left: 50%;
343  -webkit-transform: translate(-50%, -90%);
344  -ms-transform: translate(-50%, -90%);
345  transform: translate(-50%, -90%);
346  background: silver;
347}
348 
349.bb8__body {
350  width: 4.375em;
351  height: 4.375em;
352  background: var(--bb8-bg);
353  border-radius: var(--radius);
354  position: relative;
355  overflow: hidden;
356  -webkit-transition: var(--transition);
357  -o-transition: var(--transition);
358  transition: var(--transition);
359  z-index: 1;
360  -webkit-transform: rotate(45deg);
361  -ms-transform: rotate(45deg);
362  transform: rotate(45deg);
363  background: -webkit-gradient(
364      linear,
365      right top,
366      left top,
367      color-stop(4%, var(--bb8-bg)),
368      color-stop(4%, var(--accent)),
369      color-stop(10%, transparent),
370      color-stop(90%, var(--accent)),
371      color-stop(96%, var(--bb8-bg))
372    ),
373    -webkit-gradient(linear, left top, left bottom, color-stop(4%, var(--bb8-bg)), color-stop(4%, var(--accent)), color-stop(10%, transparent), color-stop(90%, var(--accent)), color-stop(96%, var(--bb8-bg))),
374    -webkit-gradient(linear, left top, right top, color-stop(2.156em, transparent), color-stop(2.156em, silver), color-stop(2.188em, transparent)),
375    -webkit-gradient(linear, left top, left bottom, color-stop(2.156em, transparent), color-stop(2.156em, silver), color-stop(2.188em, transparent));
376  background: -o-linear-gradient(
377      right,
378      var(--bb8-bg) 4%,
379      var(--accent) 4% 10%,
380      transparent 10% 90%,
381      var(--accent) 90% 96%,
382      var(--bb8-bg) 96%
383    ),
384    -o-linear-gradient(var(--bb8-bg) 4%, var(--accent) 4% 10%, transparent 10%
385          90%, var(--accent) 90% 96%, var(--bb8-bg) 96%),
386    -o-linear-gradient(left, transparent 2.156em, silver 2.156em 2.219em, transparent
387          2.188em),
388    -o-linear-gradient(transparent 2.156em, silver 2.156em 2.219em, transparent
389          2.188em);
390  background: linear-gradient(
391      -90deg,
392      var(--bb8-bg) 4%,
393      var(--accent) 4% 10%,
394      transparent 10% 90%,
395      var(--accent) 90% 96%,
396      var(--bb8-bg) 96%
397    ),
398    linear-gradient(
399      var(--bb8-bg) 4%,
400      var(--accent) 4% 10%,
401      transparent 10% 90%,
402      var(--accent) 90% 96%,
403      var(--bb8-bg) 96%
404    ),
405    linear-gradient(
406      to right,
407      transparent 2.156em,
408      silver 2.156em 2.219em,
409      transparent 2.188em
410    ),
411    linear-gradient(
412      transparent 2.156em,
413      silver 2.156em 2.219em,
414      transparent 2.188em
415    );
416  background-color: var(--bb8-bg);
417}
418 
419.bb8__body::after {
420  content: "";
421  bottom: 1.5em;
422  left: 0.563em;
423  position: absolute;
424  width: 0.188em;
425  height: 0.188em;
426  background: rgb(236, 236, 236);
427  color: rgb(236, 236, 236);
428  border-radius: 50%;
429  -webkit-box-shadow: 0.875em 0.938em, 0 -1.25em, 0.875em -2.125em,
430    2.125em -2.125em, 3.063em -1.25em, 3.063em 0, 2.125em 0.938em;
431  box-shadow: 0.875em 0.938em, 0 -1.25em, 0.875em -2.125em, 2.125em -2.125em,
432    3.063em -1.25em, 3.063em 0, 2.125em 0.938em;
433}
434 
435.bb8__body::before {
436  content: "";
437  width: 2.625em;
438  height: 2.625em;
439  position: absolute;
440  border-radius: 50%;
441  z-index: 0.1;
442  overflow: hidden;
443  top: 50%;
444  left: 50%;
445  -webkit-transform: translate(-50%, -50%);
446  -ms-transform: translate(-50%, -50%);
447  transform: translate(-50%, -50%);
448  border: 0.313em solid var(--accent);
449  background: -o-radial-gradient(
450      center,
451      1em circle,
452      rgb(236, 236, 236) 50%,
453      transparent 51%
454    ),
455    -o-radial-gradient(center, 1.25em circle, var(--bb8-bg) 50%, transparent 51%),
456    -o-linear-gradient(right, transparent 42%, var(--accent) 42% 58%, transparent
457          58%),
458    -o-linear-gradient(var(--bb8-bg) 42%, var(--accent) 42% 58%, var(--bb8-bg)
459          58%);
460  background: -o-radial-gradient(
461      center,
462      1em circle,
463      rgb(236, 236, 236) 50%,
464      transparent 51%
465    ),
466    -o-radial-gradient(center, 1.25em circle, var(--bb8-bg) 50%, transparent 51%),
467    -o-linear-gradient(right, transparent 42%, var(--accent) 42% 58%, transparent
468          58%),
469    -o-linear-gradient(var(--bb8-bg) 42%, var(--accent) 42% 58%, var(--bb8-bg)
470          58%);
471  background: radial-gradient(
472      1em circle at center,
473      rgb(236, 236, 236) 50%,
474      transparent 51%
475    ),
476    radial-gradient(1.25em circle at center, var(--bb8-bg) 50%, transparent 51%),
477    -webkit-gradient(linear, right top, left top, color-stop(42%, transparent), color-stop(42%, var(--accent)), color-stop(58%, transparent)),
478    -webkit-gradient(linear, left top, left bottom, color-stop(42%, var(--bb8-bg)), color-stop(42%, var(--accent)), color-stop(58%, var(--bb8-bg)));
479  background: radial-gradient(
480      1em circle at center,
481      rgb(236, 236, 236) 50%,
482      transparent 51%
483    ),
484    radial-gradient(1.25em circle at center, var(--bb8-bg) 50%, transparent 51%),
485    linear-gradient(
486      -90deg,
487      transparent 42%,
488      var(--accent) 42% 58%,
489      transparent 58%
490    ),
491    linear-gradient(var(--bb8-bg) 42%, var(--accent) 42% 58%, var(--bb8-bg) 58%);
492}
493 
494.artificial__hidden {
495  position: absolute;
496  border-radius: inherit;
497  inset: 0;
498  pointer-events: none;
499  overflow: hidden;
500}
501 
502.bb8__shadow {
503  content: "";
504  width: var(--bb8-diameter);
505  height: 20%;
506  border-radius: 50%;
507  background: #3a271c;
508  -webkit-box-shadow: 0.313em 0 3.125em #3a271c;
509  box-shadow: 0.313em 0 3.125em #3a271c;
510  opacity: 0.25;
511  position: absolute;
512  bottom: 0;
513  left: calc(var(--toggle-offset) - 0.938em);
514  -webkit-transition: var(--transition);
515  -o-transition: var(--transition);
516  transition: var(--transition);
517  -webkit-transform: skew(-70deg);
518  -ms-transform: skew(-70deg);
519  transform: skew(-70deg);
520  z-index: 1;
521}
522 
523.bb8-toggle__scenery {
524  width: 100%;
525  height: 100%;
526  pointer-events: none;
527  overflow: hidden;
528  position: relative;
529  border-radius: inherit;
530}
531 
532.bb8-toggle__scenery::before {
533  content: "";
534  position: absolute;
535  width: 100%;
536  height: 30%;
537  bottom: 0;
538  background: #b18d71;
539  z-index: 1;
540}
541 
542.bb8-toggle__cloud {
543  z-index: 1;
544  position: absolute;
545  border-radius: 50%;
546}
547 
548.bb8-toggle__cloud:nth-last-child(1) {
549  width: 0.875em;
550  height: 0.625em;
551  -webkit-filter: blur(0.125em) drop-shadow(0.313em 0.313em #ffffffae)
552    drop-shadow(-0.625em 0 #fff) drop-shadow(-0.938em -0.125em #fff);
553  filter: blur(0.125em) drop-shadow(0.313em 0.313em #ffffffae)
554    drop-shadow(-0.625em 0 #fff) drop-shadow(-0.938em -0.125em #fff);
555  right: 1.875em;
556  top: 2.813em;
557  background: -o-linear-gradient(bottom left, #ffffffae, #ffffffae);
558  background: -webkit-gradient(
559    linear,
560    left bottom,
561    right top,
562    from(#ffffffae),
563    to(#ffffffae)
564  );
565  background: linear-gradient(to top right, #ffffffae, #ffffffae);
566  -webkit-transition: var(--transition);
567  -o-transition: var(--transition);
568  transition: var(--transition);
569}
570 
571.bb8-toggle__cloud:nth-last-child(2) {
572  top: 0.625em;
573  right: 4.375em;
574  width: 0.875em;
575  height: 0.375em;
576  background: #dfdedeae;
577  -webkit-filter: blur(0.125em) drop-shadow(-0.313em -0.188em #e0dfdfae)
578    drop-shadow(-0.625em -0.188em #bbbbbbae) drop-shadow(-1em 0.063em #cfcfcfae);
579  filter: blur(0.125em) drop-shadow(-0.313em -0.188em #e0dfdfae)
580    drop-shadow(-0.625em -0.188em #bbbbbbae) drop-shadow(-1em 0.063em #cfcfcfae);
581  -webkit-transition: 0.6s;
582  -o-transition: 0.6s;
583  transition: 0.6s;
584}
585 
586.bb8-toggle__cloud:nth-last-child(3) {
587  top: 1.25em;
588  right: 0.938em;
589  width: 0.875em;
590  height: 0.375em;
591  background: #ffffffae;
592  -webkit-filter: blur(0.125em) drop-shadow(0.438em 0.188em #ffffffae)
593    drop-shadow(-0.625em 0.313em #ffffffae);
594  filter: blur(0.125em) drop-shadow(0.438em 0.188em #ffffffae)
595    drop-shadow(-0.625em 0.313em #ffffffae);
596  -webkit-transition: 0.8s;
597  -o-transition: 0.8s;
598  transition: 0.8s;
599}
600 
601.gomrassen,
602.hermes,
603.chenini {
604  position: absolute;
605  border-radius: var(--radius);
606  background: -o-linear-gradient(#fff, #6e8ea2);
607  background: -webkit-gradient(
608    linear,
609    left top,
610    left bottom,
611    from(#fff),
612    to(#6e8ea2)
613  );
614  background: linear-gradient(#fff, #6e8ea2);
615  top: 100%;
616}
617 
618.gomrassen {
619  left: 0.938em;
620  width: 1.875em;
621  height: 1.875em;
622  -webkit-box-shadow: 0 0 0.188em #ffffff52, 0 0 0.188em #6e8ea24b;
623  box-shadow: 0 0 0.188em #ffffff52, 0 0 0.188em #6e8ea24b;
624  -webkit-transition: var(--transition);
625  -o-transition: var(--transition);
626  transition: var(--transition);
627}
628 
629.gomrassen::before,
630.gomrassen::after {
631  content: "";
632  position: absolute;
633  border-radius: inherit;
634  -webkit-box-shadow: inset 0 0 0.063em rgb(140, 162, 169);
635  box-shadow: inset 0 0 0.063em rgb(140, 162, 169);
636  background: rgb(184, 196, 200);
637}
638 
639.gomrassen::before {
640  left: 0.313em;
641  top: 0.313em;
642  width: 0.438em;
643  height: 0.438em;
644}
645 
646.gomrassen::after {
647  width: 0.25em;
648  height: 0.25em;
649  left: 1.25em;
650  top: 0.75em;
651}
652 
653.hermes {
654  left: 3.438em;
655  width: 0.625em;
656  height: 0.625em;
657  -webkit-box-shadow: 0 0 0.125em #ffffff52, 0 0 0.125em #6e8ea24b;
658  box-shadow: 0 0 0.125em #ffffff52, 0 0 0.125em #6e8ea24b;
659  -webkit-transition: 0.6s;
660  -o-transition: 0.6s;
661  transition: 0.6s;
662}
663 
664.chenini {
665  left: 4.375em;
666  width: 0.5em;
667  height: 0.5em;
668  -webkit-box-shadow: 0 0 0.125em #ffffff52, 0 0 0.125em #6e8ea24b;
669  box-shadow: 0 0 0.125em #ffffff52, 0 0 0.125em #6e8ea24b;
670  -webkit-transition: 0.8s;
671  -o-transition: 0.8s;
672  transition: 0.8s;
673}
674 
675.tatto-1,
676.tatto-2 {
677  position: absolute;
678  width: 1.25em;
679  height: 1.25em;
680  border-radius: var(--radius);
681}
682 
683.tatto-1 {
684  background: #fefefe;
685  right: 3.125em;
686  top: 0.625em;
687  -webkit-box-shadow: 0 0 0.438em #fdf4e1;
688  box-shadow: 0 0 0.438em #fdf4e1;
689  -webkit-transition: var(--transition);
690  -o-transition: var(--transition);
691  transition: var(--transition);
692}
693 
694.tatto-2 {
695  background: -o-linear-gradient(#e6ac5c, #d75449);
696  background: -webkit-gradient(
697    linear,
698    left top,
699    left bottom,
700    from(#e6ac5c),
701    to(#d75449)
702  );
703  background: linear-gradient(#e6ac5c, #d75449);
704  right: 1.25em;
705  top: 2.188em;
706  -webkit-box-shadow: 0 0 0.438em #e6ad5c3d, 0 0 0.438em #d755494f;
707  box-shadow: 0 0 0.438em #e6ad5c3d, 0 0 0.438em #d755494f;
708  -webkit-transition: 0.7s;
709  -o-transition: 0.7s;
710  transition: 0.7s;
711}
712 
713.bb8-toggle__star {
714  position: absolute;
715  width: 0.063em;
716  height: 0.063em;
717  background: #fff;
718  border-radius: var(--radius);
719  -webkit-filter: drop-shadow(0 0 0.063em #fff);
720  filter: drop-shadow(0 0 0.063em #fff);
721  color: #fff;
722  top: 100%;
723}
724 
725.bb8-toggle__star:nth-child(1) {
726  left: 3.75em;
727  -webkit-box-shadow: 1.25em 0.938em, -1.25em 2.5em, 0 1.25em, 1.875em 0.625em,
728    -3.125em 1.875em, 1.25em 2.813em;
729  box-shadow: 1.25em 0.938em, -1.25em 2.5em, 0 1.25em, 1.875em 0.625em,
730    -3.125em 1.875em, 1.25em 2.813em;
731  -webkit-transition: 0.2s;
732  -o-transition: 0.2s;
733  transition: 0.2s;
734}
735 
736.bb8-toggle__star:nth-child(2) {
737  left: 4.688em;
738  -webkit-box-shadow: 0.625em 0, 0 0.625em, -0.625em -0.625em, 0.625em 0.938em,
739    -3.125em 1.25em, 1.25em -1.563em;
740  box-shadow: 0.625em 0, 0 0.625em, -0.625em -0.625em, 0.625em 0.938em,
741    -3.125em 1.25em, 1.25em -1.563em;
742  -webkit-transition: 0.3s;
743  -o-transition: 0.3s;
744  transition: 0.3s;
745}
746 
747.bb8-toggle__star:nth-child(3) {
748  left: 5.313em;
749  -webkit-box-shadow: -0.625em -0.625em, -2.188em 1.25em, -2.188em 0,
750    -3.75em -0.625em, -3.125em -0.625em, -2.5em -0.313em, 0.75em -0.625em;
751  box-shadow: -0.625em -0.625em, -2.188em 1.25em, -2.188em 0, -3.75em -0.625em,
752    -3.125em -0.625em, -2.5em -0.313em, 0.75em -0.625em;
753  -webkit-transition: var(--transition);
754  -o-transition: var(--transition);
755  transition: var(--transition);
756}
757 
758.bb8-toggle__star:nth-child(4) {
759  left: 1.875em;
760  width: 0.125em;
761  height: 0.125em;
762  -webkit-transition: 0.5s;
763  -o-transition: 0.5s;
764  transition: 0.5s;
765}
766 
767.bb8-toggle__star:nth-child(5) {
768  left: 5em;
769  width: 0.125em;
770  height: 0.125em;
771  -webkit-transition: 0.6s;
772  -o-transition: 0.6s;
773  transition: 0.6s;
774}
775 
776.bb8-toggle__star:nth-child(6) {
777  left: 2.5em;
778  width: 0.125em;
779  height: 0.125em;
780  -webkit-transition: 0.7s;
781  -o-transition: 0.7s;
782  transition: 0.7s;
783}
784 
785.bb8-toggle__star:nth-child(7) {
786  left: 3.438em;
787  width: 0.125em;
788  height: 0.125em;
789  -webkit-transition: 0.8s;
790  -o-transition: 0.8s;
791  transition: 0.8s;
792}
793 
794/* actions */
795 
796.bb8-toggle__checkbox:checked
797  + .bb8-toggle__container
798  .bb8-toggle__star:nth-child(1) {
799  top: 0.625em;
800}
801 
802.bb8-toggle__checkbox:checked
803  + .bb8-toggle__container
804  .bb8-toggle__star:nth-child(2) {
805  top: 1.875em;
806}
807 
808.bb8-toggle__checkbox:checked
809  + .bb8-toggle__container
810  .bb8-toggle__star:nth-child(3) {
811  top: 1.25em;
812}
813 
814.bb8-toggle__checkbox:checked
815  + .bb8-toggle__container
816  .bb8-toggle__star:nth-child(4) {
817  top: 3.438em;
818}
819 
820.bb8-toggle__checkbox:checked
821  + .bb8-toggle__container
822  .bb8-toggle__star:nth-child(5) {
823  top: 3.438em;
824}
825 
826.bb8-toggle__checkbox:checked
827  + .bb8-toggle__container
828  .bb8-toggle__star:nth-child(6) {
829  top: 0.313em;
830}
831 
832.bb8-toggle__checkbox:checked
833  + .bb8-toggle__container
834  .bb8-toggle__star:nth-child(7) {
835  top: 1.875em;
836}
837 
838.bb8-toggle__checkbox:checked + .bb8-toggle__container .bb8-toggle__cloud {
839  right: -100%;
840}
841 
842.bb8-toggle__checkbox:checked + .bb8-toggle__container .gomrassen {
843  top: 0.938em;
844}
845 
846.bb8-toggle__checkbox:checked + .bb8-toggle__container .hermes {
847  top: 2.5em;
848}
849 
850.bb8-toggle__checkbox:checked + .bb8-toggle__container .chenini {
851  top: 2.75em;
852}
853 
854.bb8-toggle__checkbox:checked + .bb8-toggle__container {
855  background-position-y: 0;
856}
857 
858.bb8-toggle__checkbox:checked + .bb8-toggle__container .tatto-1 {
859  top: 100%;
860}
861 
862.bb8-toggle__checkbox:checked + .bb8-toggle__container .tatto-2 {
863  top: 100%;
864}
865 
866.bb8-toggle__checkbox:checked + .bb8-toggle__container .bb8 {
867  left: calc(100% - var(--bb8-diameter) - var(--toggle-offset));
868}
869 
870.bb8-toggle__checkbox:checked + .bb8-toggle__container .bb8__shadow {
871  left: calc(100% - var(--bb8-diameter) - var(--toggle-offset) + 0.938em);
872  -webkit-transform: skew(70deg);
873  -ms-transform: skew(70deg);
874  transform: skew(70deg);
875}
876 
877.bb8-toggle__checkbox:checked + .bb8-toggle__container .bb8__body {
878  -webkit-transform: rotate(180deg);
879  -ms-transform: rotate(180deg);
880  transform: rotate(225deg);
881}
882 
883.bb8-toggle__checkbox:hover + .bb8-toggle__container .bb8__head::before {
884  left: 100%;
885}
886 
887.bb8-toggle__checkbox:not(:checked):hover
888  + .bb8-toggle__container
889  .bb8__antenna:nth-child(1) {
890  right: 1.5em;
891}
892 
893.bb8-toggle__checkbox:hover
894  + .bb8-toggle__container
895  .bb8__antenna:nth-child(2) {
896  left: 0.938em;
897}
898 
899.bb8-toggle__checkbox:hover + .bb8-toggle__container .bb8__head::after {
900  background-position: 1.375em 0;
901}
902 
903.bb8-toggle__checkbox:checked:hover
904  + .bb8-toggle__container
905  .bb8__head::before {
906  left: 0;
907}
908 
909.bb8-toggle__checkbox:checked:hover
910  + .bb8-toggle__container
911  .bb8__antenna:nth-child(2) {
912  left: calc(100% - 0.938em);
913}
914 
915.bb8-toggle__checkbox:checked:hover + .bb8-toggle__container .bb8__head::after {
916  background-position: -1.375em 0;
917}
918 
919.bb8-toggle__checkbox:active + .bb8-toggle__container .bb8__head-container {
920  -webkit-transform: rotate(25deg);
921  -ms-transform: rotate(25deg);
922  transform: rotate(25deg);
923}
924 
925.bb8-toggle__checkbox:checked:active
926  + .bb8-toggle__container
927  .bb8__head-container {
928  -webkit-transform: rotate(-25deg);
929  -ms-transform: rotate(-25deg);
930  transform: rotate(-25deg);
931}
932 
933.bb8:hover .bb8__head::before,
934.bb8:hover .bb8__antenna:nth-child(2) {
935  left: 50% !important;
936}
937 
938.bb8:hover .bb8__antenna:nth-child(1) {
939  right: 0.938em !important;
940}
941 
942.bb8:hover .bb8__head::after {
943  background-position: 0 0 !important;
944}

MIT License

Copyright © 2026 Galahhad (Galahad)


Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:


The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.


THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.