@twa-dev/mark42
Version:
Mark42 is a simple lightweight tree-shakable UI library for [Telegram Web Apps (TWA)](https://core.telegram.org/bots/webapps).
5 lines (2 loc) • 1.7 kB
CSS
._24898{-webkit-tap-highlight-color:transparent;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;}._24898 input{display:none;}
.bce9fa{position:relative;}.bce9fa::after{display:block;position:absolute;content:"";border-radius:50%;}._584bf .bce9fa{width:51px;height:31px;border-radius:25.5px;background:var(--mk42-main-button-disabled-color);-webkit-transition:background-color 0.2s ease;transition:background-color 0.2s ease;}._584bf .bce9fa::after{width:27px;height:27px;top:2px;left:2px;box-shadow:0 1px 2px 0 rgba(0,0,0,0.1);background:var(--tg-theme-bg-color);-webkit-transition:-webkit-transform 0.2s ease;-webkit-transition:transform 0.2s ease;transition:transform 0.2s ease;}._584bf input:checked ~ .bce9fa{background:var(--mk42-button-confirm-color);}._584bf input:checked ~ .bce9fa::after{-webkit-transform:translateX(20px);-ms-transform:translateX(20px);transform:translateX(20px);}._3a4fd .bce9fa{width:32px;height:14px;border-radius:7px;background:var(--mk42-separator-color);-webkit-transition:background-color 0.2s ease;transition:background-color 0.2s ease;}._3a4fd .bce9fa::after{width:16px;height:16px;top:-1px;left:0;box-shadow:0 0 0 2px var(--mk42-separator-color);background:var(--tg-theme-bg-color);-webkit-transition:-webkit-transform 0.2s ease,box-shadow 0.2s ease;-webkit-transition:transform 0.2s ease,box-shadow 0.2s ease;transition:transform 0.2s ease,box-shadow 0.2s ease;}._3a4fd input:checked ~ .bce9fa{background:var(--tg-theme-button-color);}._3a4fd input:checked ~ .bce9fa::after{box-shadow:0 0 0 2px var(--tg-theme-button-color);-webkit-transform:translateX(16px);-ms-transform:translateX(16px);transform:translateX(16px);}