html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; } :focus { outline: 0; } article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; } body { line-height: 1; } ol, ul { list-style: none; } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; } table { border-collapse: collapse; border-spacing: 0; } input[type=search]::-webkit-search-cancel-button, input[type=search]::-webkit-search-decoration, input[type=search]::-webkit-search-results-button, input[type=search]::-webkit-search-results-decoration { -webkit-appearance: none; -moz-appearance: none; } input[type=search] { -webkit-appearance: none; -moz-appearance: none; -webkit-box-sizing: content-box; -moz-box-sizing: content-box; box-sizing: content-box; } textarea { overflow: auto; vertical-align: top; resize: vertical; } audio, canvas, video { display: inline-block; display: inline; max-width: 100%; } audio:not([controls]) { display: none; height: 0; } [hidden] { display: none; } html { font-size: 100%; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; } a:focus { outline: thin dotted; } a:active, a:hover { outline: 0; } img { border: 0; -ms-interpolation-mode: bicubic; } figure { margin: 0; } form { margin: 0; } fieldset { border: 1px solid #c0c0c0; margin: 0 2px; padding: 0.35em 0.625em 0.75em; } legend { border: 0; padding: 0; white-space: normal; margin-left: -7px; } button, input, select, textarea { font-size: 100%; margin: 0; vertical-align: baseline; vertical-align: middle; } button, input { line-height: normal; } button, select { text-transform: none; } button, html input[type="button"], input[type="reset"], input[type="submit"] { -webkit-appearance: button; cursor: pointer; overflow: visible; } button[disabled], html input[disabled] { cursor: default; } input[type="checkbox"], input[type="radio"] { box-sizing: border-box; padding: 0; height: 13px; width: 13px; } input[type="search"] { -webkit-appearance: textfield; -moz-box-sizing: content-box; -webkit-box-sizing: content-box; box-sizing: content-box; } input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; } button::-moz-focus-inner, input::-moz-focus-inner { border: 0; padding: 0; } textarea { overflow: auto; vertical-align: top; } table { border-collapse: collapse; border-spacing: 0; } html, button, input, select, textarea { color: #222; } ::-moz-selection { background: #b3d4fc; text-shadow: none; } ::selection { background: #b3d4fc; text-shadow: none; } img { vertical-align: middle; } fieldset { border: 0; margin: 0; padding: 0; } textarea { resize: vertical; } .chromeframe { margin: 0.2em 0; background: #ccc; color: #000; padding: 0.2em 0; } :root { --transparent: #00000000; --primary-400: rgba(133, 186, 54, 0.33); --primary-500: rgba(133, 186, 54, 0.65); --primary-600: #85ba36; --secondary-400: #466eba; --secondary-500: #223f76; --secondary-600: #0a1d40; --tertiary-400: #9bdd1f; --tertiary-500: #679610; --tertiary-600: #334f00; --neutral-100: #f0f0f0; --neutral-200: #d1d1d1; --neutral-300: #b2b2b2; --neutral-400: #939393; --neutral-500: #747474; --neutral-600: #656565; --neutral-700: #4d4d4d; --neutral-800: #3d3d3d; --neutral-900: #282828; --neutral-1000: #141414; --success-100: #48d946; --success-200: #48b946; --success-300: #117510; --success-400: #056a03; --success-500: #034700; --warnning-100: rgba(170, 0, 0, 0.10); --warnning-200: rgba(170, 0, 0, 0.30); --warnning-300: rgba(170, 0, 0, 0.60); --warnning-400: rgba(170, 0, 0, 0.80); --warnning-500: #aa0000; --information-100: #789afd; --information-200: #6c92fd; --information-300: #2a60fe; --information-400: #0b43fd; --information-500: #0833b3; --base-black: #000000; --base-white: #ffffff; --opacity-5w: rgba(255, 255, 255, 0.05); --opacity-10w: rgba(255, 255, 255, 0.10); --opacity-15w: rgba(255, 255, 255, 0.15); --opacity-30w: rgba(255, 255, 255, 0.30); --opacity-50w: rgba(255, 255, 255, 0.50); --opacity-70w: rgba(255, 255, 255, 0.70); --opacity-90w: rgba(255, 255, 255, 0.90); --opacity-5b: rgba(0, 0, 0, 0.05); --opacity-10b: rgba(0, 0, 0, 0.10); --opacity-15b: rgba(0, 0, 0, 0.15); --opacity-30b: rgba(0, 0, 0, 0.30); --opacity-50b: rgba(0, 0, 0, 0.50); --opacity-70b: rgba(0, 0, 0, 0.70); --opacity-90b: rgba(0, 0, 0, 0.90); --highlight-100: #ffc04b; --typeface-weight-bold: bold; --typeface-weight-semibold: semibold; --typeface-weight-medium: medium; --typeface-weight-regular: regular; --typeface-family-inter: Inter; --typedef-size-xsm: 0.625rem; --typedef-size-sm: 0.75rem; --typedef-size-md: 0.875rem; --typedef-size-lg: 1rem; --typedef-size-xl: 1.25rem; --typedef-size-2xl: 1.5rem; --typedef-size-3xl: 2rem; } @font-face { font-family: 'Inter'; font-style: normal; font-weight: 400; src: url(../font/Inter-Regular.woff2); src: url(../font/Inter_18pt-Regular.ttf) format('truetype'); } @font-face { font-family: 'Inter'; font-style: normal; font-weight: 500; src: url(../font/Inter-Medium.woff2); src: url(../font/Inter_18pt-Medium.ttf) format('truetype'); } @font-face { font-family: 'Inter'; font-style: normal; font-weight: 600; src: url(../font/Inter-SemiBold.woff2); src: url(../font/Inter_18pt-SemiBold.ttf) format('truetype'); } @font-face { font-family: 'Inter'; font-style: normal; font-weight: 700; src: url(../font/Inter-Bold.woff2); src: url(../font/Inter_18pt-Bold.ttf) format('truetype'); } @font-face { font-family: 'dr-odds'; font-style: normal; font-weight: 100; src: url('../font/dr-odds.woff'); src: url(../font/dr-odds.ttf) format('truetype'); } html { font-size: 16px; font-family: 'Inter' !important; font-style: normal !important; font-weight: normal !important; line-height: normal !important; /* scroll-behavior: smooth; */ scroll-padding-top: 6rem; overflow: auto; scrollbar-width: 2rem; } @media (prefers-color-scheme: dark) { :root {} } * { box-sizing: border-box; } body { background-color: #D1D1D1; display: flex; flex-direction: column; gap: 0.5rem; align-items: flex-start; } body>div { display: flex; flex-direction: row; gap: 1rem; align-items: center; margin-block: 1rem; } @media (prefers-color-scheme: dark) { body { background-color: #4D4D4D; } } main { padding: 1rem; display: flex; flex-direction: column; align-items: center; gap: 1rem; width: 100%; box-sizing: border-box; } main>div{ display: flex; flex-direction: row; align-items: center; gap: 1rem; overflow: auto; width: 100%; box-sizing: border-box; } .header { --Icon-primaryNuneBg: var(--opacity-70b); --Text-primaryNoneBg: var(--opacity-70b); } @media (prefers-color-scheme: dark) { .header { --Icon-primaryNuneBg: var(--opacity-90w); --Text-primaryNoneBg: var(--base-white); } } .header { display: flex; width: 100%; padding: 0rem 1.25rem 0rem 0.75rem; justify-content: space-between; align-items: center; } .header>div>button { border: 0; position: relative; padding: 0; background-color: transparent; } .header>.left { display: flex; align-items: center; justify-content: flex-start; gap: 0.75rem; } .header>.right { display: flex; align-items: center; gap: 1.5rem; justify-content: flex-end; } .header>.left>.back, .header>.right>.tick { width: 1.5rem; height: 1.5rem; } .header>.right>.menu { width: 1.75rem; height: 1.75rem; } .header>.left>.back::after, .header>.right>.tick::after, .header>.right>.menu::after { font-family: 'dr-odds'; font-size: 1rem; width: 1.5rem; height: 1.5rem; display: flex; align-items: center; justify-content: center; background-color: transparent; color: var(--Icon-primaryNuneBg); position: absolute; top: 0; left: 0; } .header>.right>.menu::after { width: 1.75rem; height: 1.75rem; } .header>.left>.back::after { content: 'chevron_left'; } .header>.right>.tick::after { content: 'Check_Big'; } .header>.right>.menu::after { content: 'menu_burger'; } .header>span { color: var(--Text-primaryNoneBg); } .header>img { height: 2.1rem; aspect-ratio: 4 / 1; } .font15 { font-family: Inter; font-size: 2rem; font-weight: 700; line-height: normal; } .font14 { font-family: Inter; font-size: 2rem; font-style: normal; font-weight: 700; line-height: normal; } .font13 { font-family: Inter; font-size: 1.5rem; font-style: normal; font-weight: 700; line-height: normal; } .font12 { font-family: Inter; font-size: 1.5rem; font-style: normal; font-weight: 600; line-height: normal; } .font11 { font-family: Inter; font-size: 1.25rem; font-style: normal; font-weight: 600; line-height: normal; } .font10 { font-family: Inter; font-size: 1.25rem; font-style: normal; font-weight: 500; line-height: normal; } .font9 { font-family: Inter; font-size: 1rem; font-style: normal; font-weight: 700; line-height: normal; } .font8 { font-family: Inter; font-size: 1rem; font-style: normal; font-weight: 400; line-height: normal; } .font7 { font-family: Inter; font-size: 0.875rem; font-style: normal; font-weight: 600; line-height: normal; } .font6 { font-family: Inter; font-size: 0.875rem; font-style: normal; font-weight: 400; line-height: normal; } .font5 { font-family: Inter; font-size: 0.75rem; font-style: normal; font-weight: 600; line-height: normal; } .font4 { font-family: Inter; font-size: 0.75rem; font-style: normal; font-weight: 400; line-height: normal; } .font3 { font-family: Inter; font-size: 0.75rem; font-style: normal; font-weight: 500; line-height: normal; } .font2 { font-family: Inter; font-size: 0.75rem; font-style: normal; font-weight: 400; line-height: normal; } .font1 { font-family: Inter; font-size: 0.625rem; font-style: normal; font-weight: 400; line-height: normal; } .selector { --Surface-bgTertiary10: var(--opacity-10b); } @media (prefers-color-scheme: dark) { .selector { --Surface-bgTertiary10: var(--opacity-10w); } } .selector { width: 100%; display: flex; flex-direction: row; padding: 0.25rem; align-items: flex-start; gap: 0; border-radius: 0.5rem; background: var(--Surface-bgTertiary10); overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none; scroll-behavior: smooth; } .selector::-webkit-scrollbar { display: none; } .selector>* { flex: 1; } .selector>*>.myButton { width: 100%; } .avatar { display: flex; justify-content: center; align-items: center; position: relative; overflow: hidden; aspect-ratio: 1 / 1; border-radius: 0.5rem; } .avatar.size80, .avatar.size80.frame::before { width: 5rem; min-width: 5rem; } .avatar.size60, .avatar.size60.frame::before { width: 3.75rem; min-width: 3.75rem; } .avatar.size45, .avatar.size45.frame::before { width: 2.8125rem; min-width: 2.8125rem; } .avatar.size35, .avatar.size35.frame::before { width: 2.1875rem; min-width: 2.1875rem; } .avatar>img { width: 100%; aspect-ratio: 1 / 1; object-fit: contain; } .avatar.frame::before { content: ''; position: absolute; height: 100%; top: 0; left: 0; background-image: var(--frame); background-repeat: no-repeat; background-position: center center; background-size: contain; } .coin { --button-bgPrimay: var(--primary-600); --Text-primaryNoneBg : var(--opacity-70b); } @media (prefers-color-scheme: dark) { .coin { --button-bgPrimay: var(--primary-600); --Text-primaryNoneBg : var(--base-white); } } .coin { display: inline-flex; justify-content: flex-start; height: 1.5rem; padding: 0rem 0.5rem; align-items: center; flex-shrink: 0; border-radius: 1.1rem; border: 1px solid #5F5F5F; position: relative; box-sizing: border-box; color: var(--Text-primaryNoneBg); } .coin[iconleft] { padding-left: 0; } .coin[iconright] { padding-right: 0; } .coin::before, .coin::after { display: flex; justify-content: center; align-items: center; width: 1.5rem; height: 1.5rem; overflow: hidden; background-size: 1.5rem 1.5rem; background-repeat: no-repeat; background-position: center; background-image: var(--coin-image-url); } .coin[iconleft]::before { content: ''; } .coin[iconright]::after { content: ''; } .coin>button { display: flex; transform: rotate(-0.179deg); padding: 0.125rem 0.25rem; justify-content: center; align-items: center; gap: 0.625rem; border-radius: 6.25rem; background: var(--button-bgPrimay); border: 0; order: 4; color: var(--Text-primaryNoneBg); } .coin:has(button) { padding-right: 0.125rem !important; } .infoBadge { --badge-bgSecondary: var(--opacity-10b); --badge-borderSecondary: var(--opacity-70b); --badge-bgPrimary: var(--primary-600); --badge-bgWarning: var(--warnning-500); --badge-textPrimaryNunebg: var(--opacity-70b); --badge-textPrimaryOnbg: var(--opacity-90w); } @media (prefers-color-scheme: dark) { .infoBadge { --badge-bgSecondary: var(--opacity-30b); --badge-borderSecondary: var(--opacity-50w); --badge-bgPrimary: var(--primary-600); --badge-bgWarning: var(--warnning-500); --badge-textPrimaryNunebg: var(--opacity-90w); --badge-textPrimaryOnbg: var(--base-white); } } .infoBadge { display: inline-flex; justify-content: center; align-items: center; flex-shrink: 0; border-radius: 0.5rem; position: relative; } .infoBadge.gray_bg { background: var(--badge-bgSecondary); border: 1px solid transparent; color: var(--badge-textPrimaryNunebg); } .infoBadge.outline { background: transparent; border: 1px solid var(--badge-borderSecondary); color: var(--badge-textPrimaryNunebg); } .infoBadge.primary_bg { background: var(--badge-bgPrimary); border: 1px solid transparent; color: var(--badge-textPrimaryOnbg); } .infoBadge.warningbg { background: var(--badge-bgWarning); border: 1px solid transparent; color: var(--badge-textPrimaryOnbg); } .infoBadge.text { background: transparent; border: 1px solid transparent; color: var(--badge-textPrimaryNunebg); } .infoBadge.xlarge { border-radius: 0.5rem; height: 2rem; min-width: 2rem; padding: 0rem 0.25rem; } .infoBadge.large-8 { border-radius: 0.5rem; height: 1.5rem; min-width: 1.5rem; padding: 0rem 0.25rem; } .infoBadge.large { border-radius: 2rem; height: 1.5rem; min-width: 1.5rem; padding: 0rem 0.25rem; } .infoBadge.medium { border-radius: 1.5625rem; height: 1.25rem; min-width: 1.25rem; padding: 0rem 0.25rem; } .infoBadge.small { border-radius: 1.5625rem; height: 1rem; min-width: 1rem; padding: 0rem 0.25rem; } .infoBadge>span { display: flex; padding: 0rem 0.25rem; justify-content: center; align-items: center; gap: 0.625rem; } .infoBadge[iconleft]::before { content: attr(iconleft); display: flex; justify-content: center; align-items: center; font-family: 'dr-odds'; width: 1rem; height: 1rem; line-height: 1rem; font-size: 1rem; } .infoBadge[iconleft].medium::before { font-size: 0.75rem; } .infoBadge[iconleft].small::before { font-size: 0.75rem; } .infoBadge.notification::after { content: ''; width: 0.442rem; height: 0.442rem; background-color: #F00; position: absolute; right: -0.1rem; top:-0.1rem; border-radius: 50%; } .myButton { --button-bgPrimay: var(--primary-600); --button-bgActive: var(--primary-500); --button-bgDisabled: var(--opacity-70b); --button-bgWarning: var(--warnning-500); --button-bgSecondary: var(--opacity-10b); --button-bgPrimayHover: var(--primary-500); --button-bgSecondaryHover: var(--opacity-30b); --button-borderPrimary: var(--primary-600); --button-borderSecondary: var(--opacity-70b); --button-borderDisable: var(--opacity-30b); --button-primayBgNodeRunner: var(--success-100); --button-textPrimaryNunebg: var(--opacity-70b); --button-textPrimaryOnbg: var(--base-white); --button-textSecondary: var(--primary-600); --button-textDisabled: var(--neutral-500); --button-iconPrimaryNonebg: var(--neutral-100); --button-iconPrimaryOnbg: var(--neutral-100); --button-iconDisabled: var(--neutral-500); } @media (prefers-color-scheme: dark) { .myButton { --button-bgPrimay: var(--primary-600); --button-bgActive: var(--primary-500); --button-bgDisabled: var(--opacity-70b); --button-bgWarning: var(--warnning-500); --button-bgSecondary: var(--opacity-10w); --button-bgPrimayHover: var(--primary-500); --button-bgSecondaryHover: var(--opacity-15w); --button-borderPrimary: var(--primary-600); --button-borderSecondary: var(--opacity-50w); --button-borderDisable: var(--opacity-30b); --button-primayBgNodeRunner: var(--success-100); --button-textPrimaryNunebg: var(--opacity-90w); --button-textPrimaryOnbg: var(--base-white); --button-textSecondary: var(--primary-600); --button-textDisabled: var(--neutral-800); --button-iconPrimaryNonebg: var(--neutral-800); --button-iconPrimaryOnbg: var(--neutral-800); --button-iconDisabled: var(--neutral-800); } } .myButton { display: inline-flex; justify-content: center; align-items: center; flex-shrink: 0; text-align: center; background: transparent; border: 0; cursor: pointer; box-sizing: border-box; } .myButton.large { height: 3rem; min-width: 3rem; padding: 0.75rem; border-radius: 0.5rem; } .myButton.medium { height: 2.25rem; min-width: 2.25rem; padding: 0.75rem; border-radius: 0.375rem; } .myButton.small { height: 2rem; min-width: 2.125rem; padding: 0.25rem; border-radius: 0.5rem; } .myButton.xsmall { height: 1.5rem; min-width: 1.5rem; padding: 0rem 0.25rem; border-radius: 1.5625rem; } .myButton.xsmall-14 { height: 1.5rem; min-width: 1.5rem; padding: 0rem 0.375rem; border-radius: 1.5625rem; } .myButton>span { display: flex; justify-content: center; align-items: center; } .myButton.large>span { padding: 0rem 0.5rem; } .myButton.medium>span { padding: 0rem 0.5rem; } .myButton.small>span { padding: 0rem 0.25rem; } .myButton.xsmall>span { padding: 0rem 0.25rem; } .myButton.xsmall-14>span { padding: 0rem 0.25rem; } .myButton { -webkit-transition: all .3s ease; -moz-transition: all .3s ease; -o-transition: all .3s ease; transition: all .3s ease; } .myButton:hover { -webkit-transition: all .3s ease; -moz-transition: all .3s ease; -o-transition: all .3s ease; transition: all .3s ease; } .myButton.primary { border: 0.075rem solid var(--button-bgPrimay); color: var(--button-textPrimaryOnbg); background: var(--button-bgPrimay); } .myButton.primary:hover { border: 0.075rem solid var(--button-bgPrimayHover); color: var(--button-textPrimaryOnbg); background: var(--button-bgPrimayHover); } .myButton.primary[disabled] { border: 0.075rem solid var(--button-bgDisabled); color: var(--button-textDisabled); background: var(--button-bgDisabled); } .myButton.primary.warning { border: 0.075rem solid var(--button-bgWarning); color: var(--button-textPrimaryOnbg); background: var(--button-bgWarning); } .myButton.secondary { border: 0.075rem solid var(--button-bgSecondary); color: var(--button-textPrimaryOnbg); background: var(--button-bgSecondary); } .myButton.secondary:hover { border: 0.075rem solid var(--button-bgSecondaryHover); color: var(--button-textPrimaryOnbg); background: var(--button-bgSecondaryHover); } .myButton.secondary[disabled] { border: 0.075rem solid var(--button-bgDisabled); color: var(--button-textDisabled); background: var(--button-bgDisabled); } .myButton.main-outline { border: 0.075rem solid var(--button-borderPrimary); color: var(--button-borderPrimary); } .myButton.main-outline:hover { border: 0.075rem solid var(--button-borderPrimary); color: var(--button-borderPrimary); } .myButton.main-outline[disabled] { border: 0.075rem solid var(--button-bgPrimay); color: var(--button-textDisabled); } .myButton.main-outline.warning { border: 0.075rem solid var(--button-bgWarning); color: var(--button-bgWarning); } .myButton.grey-outline { border: 0.075rem solid var(--button-bgPrimay); color: var(--button-textPrimaryNunebg); } .myButton.grey-outline:hover { border: 0.075rem solid var(--button-bgPrimay); color: var(--button-textPrimaryNunebg); } .myButton.grey-outline[disabled] { border: 0.075rem solid var(--button-bgPrimay); color: var(--button-textDisabled); } .myButton.text { border: 0.075rem solid transparent; color: var(--button-textPrimaryNunebg); } .myButton.text:hover { border: 0.075rem solid transparent; color: var(--button-textPrimaryNunebg); } .myButton.text[disabled] { border: 0.075rem solid transparent; color: var(--button-textDisabled); } .myButton.text.warning { border: 0.075rem solid transparent; color: var(--button-bgWarning); } .myButton::before, .myButton::after { display: flex; justify-content: center; align-items: center; font-family: 'dr-odds'; } .myButton[iconleft]::before { content: attr(iconleft); } .myButton[iconright]::after { content: attr(iconright); } .myButton[iconleft].large::before, .myButton[iconright].large::after { width: 1.5rem; height: 1.5rem; font-size: 1.2rem; line-height: 1.5rem; } .myButton[iconleft].medium::before, .myButton[iconright].medium::after { width: 1.5rem; height: 1.5rem; font-size: 1.2rem; line-height: 1.5rem; } .myButton[iconleft].small::before, .myButton[iconright].small::after { width: 1.5rem; height: 1.5rem; font-size: 1.2rem; line-height: 1.5rem; } .myButton[iconleft].xsmall-14::before, .myButton[iconright].xsmall-14::after { width: 1rem; height: 1rem; font-size: 0.875rem; line-height: 1rem; } .myButton[iconleft].xsmall-14::before, .myButton[iconright].xsmall-14::after { width: 1rem; height: 1rem; font-size: 0.875rem; line-height: 1rem; } .myCheckBox{ --Checkbox-bgDisable: var(--neutral-600); --Checkbox-borderUnselected: var(--opacity-70b); --Checkbox-checked: var(--primary-600); --Checkbox-hale: var(--opacity-50b); } @media (prefers-color-scheme: dark) { .myCheckBox { --Checkbox-bgDisable: var(--neutral-600); --Checkbox-borderUnselected: var(--opacity-50w); --Checkbox-checked: var(--primary-600); --Checkbox-hale: var(--opacity-50b); } } .myCheckBox>div>input { width: 1.125rem; height: 1.125rem; display: flex; padding: 0.25rem; justify-content: center; align-items: center; border-radius: 6.25rem; appearance: none; -webkit-appearance: none; background: transparent; z-index: 2; position: absolute; cursor: pointer; top: -2px; left: -2px; } .myCheckBox.disable>div>input { display: none; cursor: auto; } .myCheckBox { display: flex; width: 2rem; height: 2rem; flex-direction: column; justify-content: center; align-items: center; flex-shrink: 0; aspect-ratio: 1/1; justify-content: center; align-items: center; position: relative; cursor: pointer; } .myCheckBox.disable { cursor: auto; } .myCheckBox::before { content: ''; width: 2rem; aspect-ratio: 1 / 1; top: calc(-0.5rem - 0.125rem); left: calc(-0.5rem - 0.125rem); right: unset; opacity: 0; background: radial-gradient(circle, transparent 0%, transparent 43.75%, var(--Checkbox-hale) 43.75%, var(--Checkbox-hale) 100%); overflow: hidden; border-radius: 70%; } .myCheckBox.disable::before { content: unset !important; } .myCheckBox:has(>div:hover)::before { animation: showHaleCheckBox 3s ease 0s infinite forwards; } @keyframes showHaleCheckBox { 0% { width: 1.125rem; border-radius: 0.375rem; opacity: 1; background: radial-gradient(circle, transparent 0%, transparent 0%, var(--Checkbox-hale) 0%, var(--Checkbox-hale) 100%); } 100% { width: 2rem; border-radius: 70%; opacity: 0; background: radial-gradient(circle, transparent 0%, transparent 43.75%, var(--Checkbox-hale) 43.75%, var(--Checkbox-hale) 100%); } } .myCheckBox::after { content: ''; width: 1.125rem; height: 1.125rem; border-radius: 0.375rem; background-color: transparent; position: absolute; top: 0.4375rem; right: 0.4375rem; box-sizing: border-box; -webkit-transition: all .3s ease; -moz-transition: all .3s ease; -o-transition: all .3s ease; transition: all .3s ease; } .myCheckBox:has(>div>input:checked)::after { background-color: var(--Checkbox-bgDisable); -webkit-transition: all .3s ease; -moz-transition: all .3s ease; -o-transition: all .3s ease; transition: all .3s ease; } .myCheckBox>div { width: 1.125rem; height: 1.125rem; border-radius: 0.375rem; border: 2px solid var(--Checkbox-borderUnselected); background-color: transparent; position: absolute; top: 0.4375rem; right: 0.4375rem; box-sizing: border-box; z-index: 1; -webkit-transition: all .3s ease; -moz-transition: all .3s ease; -o-transition: all .3s ease; transition: all .3s ease; } .myCheckBox>div:hover { background-color: var(--Checkbox-bgDisable); -webkit-transition: all .3s ease; -moz-transition: all .3s ease; -o-transition: all .3s ease; transition: all .3s ease; } .myCheckBox.disable>div:has(>input) { border: 2px solid var(--Checkbox-bgDisable); } .myCheckBox.disable>div:has(>input:checked) { border: 2px solid transparent; } .myCheckBox.disable>div:hover { background-color: transparent; } .myCheckBox>div:has(>input)::after { content: ''; width: calc(((1.125rem - 4px) * 2) / 3); height: calc(((1.125rem - 4px) * 2) / 3); border-radius: 0.175rem; background-color: transparent; position: absolute; top: calc((1.125rem - 4px) / 6); left: calc((1.125rem - 4px) / 6); box-sizing: border-box; z-index: 1; -webkit-transition: all .3s ease; -moz-transition: all .3s ease; -o-transition: all .3s ease; transition: all .3s ease; } .myCheckBox>div:has(>input:checked)::after { background-color: var(--Checkbox-checked); -webkit-transition: all .3s ease; -moz-transition: all .3s ease; -o-transition: all .3s ease; transition: all .3s ease; } .myCheckBox.disable>div:has(>input:checked)::after { background-color: var(--Checkbox-borderUnselected); } .myRadioButton { --switch-border-off: var(--neutral-500); --switch-bg-off: var(--neutral-200); --switch-bg-on: var(--primary-600); --switch-state-effect-on: var(--opacity-10b); --switch-thumb-off: var(--neutral-500); --switch-thumb-on: var(--neutral-600); --switch-border-disable: var(--transparent); } @media (prefers-color-scheme: dark) { .myRadioButton { --switch-border-off: var(--neutral-400); --switch-bg-off: var(--neutral-200); --switch-bg-on: var(--primary-600); --switch-state-effect-on: var(--opacity-10b); --switch-thumb-off: var(--neutral-600); --switch-thumb-on: var(--neutral-100); --switch-border-disable: var(--transparent); } } .myRadioButton>input { opacity: 0; width: 3.25rem; height: 1.5rem; position: absolute; top: -0.125rem; left: -0.125rem; z-index: 3; } .myRadioButton.disable>input { display: none; } .myRadioButton { display: flex; width: 3.25rem; height: 1.5rem; padding: 0; justify-content: center; align-items: center; border: 0.125rem solid var(--switch-border-off); background: var(--switch-bg-off); box-sizing: border-box; position: relative; border-radius: 6.25rem; -webkit-transition: all .3s ease; -moz-transition: all .3s ease; -o-transition: all .3s ease; transition: all .3s ease; } .myRadioButton:has(>input:checked) { border: 0.125rem solid var(--switch-bg-on); background: var(--switch-bg-on); -webkit-transition: all .3s ease; -moz-transition: all .3s ease; -o-transition: all .3s ease; transition: all .3s ease; } .myRadioButton.disable { border-color: var(--switch-border-disable) !important; background: var(--switch-state-effect-on) !important; } .myRadioButton.disable::before { content: unset; } .myRadioButton::after { content: ''; display: flex; padding: 0; justify-content: center; align-items: center; width: 1rem; height: 1rem; border-radius: 1.5rem; background: var(--switch-thumb-off); position: absolute; top: 0.125rem; right: 1.875rem; z-index: 2; -webkit-transition: all .3s ease; -moz-transition: all .3s ease; -o-transition: all .3s ease; transition: all .3s ease; } .myRadioButton.disable::after { opacity: 0.38; background: var(--switch-thumb-off); } .myRadioButton:active::after { width: 1.75rem; height: 1.75rem; top: -0.25rem; right: 1.5rem; -webkit-transition: all .3s ease 0.3s; -moz-transition: all .3s ease 0.3s; -o-transition: all .3s ease 0.3s; transition: all .3s ease 0.3s; } .myRadioButton.disable:active::after { width: 1rem; height: 1rem; top: 0.125rem; right: 1.875rem; } .myRadioButton:has(>input:checked)::after { content: ''; display: flex; padding: 0; justify-content: center; align-items: center; width: 1.5rem; height: 1.5rem; border-radius: 1.5rem; background: var(--switch-thumb-on); position: absolute; top: -0.125rem; right: -0.125rem; z-index: 2; -webkit-transition: all .3s ease; -moz-transition: all .3s ease; -o-transition: all .3s ease; transition: all .3s ease; } .myRadioButton.disable:has(>input:checked)::after { opacity: 1; background: var(--switch-thumb-off); } .myRadioButton:has(>input:checked):active::after { width: 1.75rem; height: 1.75rem; top: calc(-0.125rem - 0.125rem); right: calc(-0.125rem - 0.125rem); -webkit-transition: all .3s ease 0.3s; -moz-transition: all .3s ease 0.3s; -o-transition: all .3s ease 0.3s; transition: all .3s ease 0.3s; } .myRadioButton.disable:has(>input:checked):active::after { width: 1.5rem; height: 1.5rem; top: -0.125rem; right: -0.125rem; } .myRadioButton::before { content: ''; display: flex; padding: 0; justify-content: center; align-items: center; width: 0rem; height: 0rem; border-radius: 6.25rem; background: var(--switch-state-effect-on); position: absolute; top: calc(0.75rem - 0.125rem); left: calc(0.75rem - 0.125rem); right: unset; z-index: 1; } .myRadioButton:has(>input:checked)::before { top: calc(0.75rem - 0.125rem); right: calc(0.75rem - 0.125rem); left: unset; } .myRadioButton:hover::before { width: 2.5rem; height: 2.5rem; top: calc(-0.5rem - 0.125rem); left: calc(-0.5rem - 0.125rem); right: unset; opacity: 0; animation: showHaleOff 1.5s ease 0s infinite forwards; } @keyframes showHaleOff { 0% { width: 0rem; height: 0rem; top: calc(0.75rem - 0.125rem); left: calc(0.75rem - 0.125rem); opacity: 0; } 80% { width: 2.5rem; height: 2.5rem; top: calc(-0.5rem - 0.125rem); left: calc(-0.5rem - 0.125rem); opacity: 1; } 100% { width: 2.5rem; height: 2.5rem; top: calc(-0.5rem - 0.125rem); left: calc(-0.5rem - 0.125rem); opacity: 0; } } .myRadioButton:has(>input:checked):hover::before { width: 2.5rem; height: 2.5rem; top: calc(-0.5rem - 0.125rem); right: calc(-0.5rem - 0.125rem); opacity: 0; animation: showHale 1.5s ease 0s infinite forwards; } @keyframes showHale { 0% { width: 0rem; height: 0rem; top: calc(0.75rem - 0.125rem); right: calc(0.75rem - 0.125rem); opacity: 0; } 80% { width: 2.5rem; height: 2.5rem; top: calc(-0.5rem - 0.125rem); right: calc(-0.5rem - 0.125rem); opacity: 1; } 100% { width: 2.5rem; height: 2.5rem; top: calc(-0.5rem - 0.125rem); right: calc(-0.5rem - 0.125rem); opacity: 0; } }