@charset "UTF-8"; .oneid-common { --td-screen-xs: 320px; --td-screen-sm: 768px; --td-screen-md: 992px; --td-screen-lg: 1200px; --td-screen-xl: 1400px; --td-screen-xxl: 1880px; } @-moz-document url-prefix() { .oneid-common .narrow-scrollbar { scrollbar-color: var(--td-scrollbar-color) transparent; scrollbar-width: thin; } } .oneid-common .narrow-scrollbar::-webkit-scrollbar { width: 8px; height: 8px; } .oneid-common .narrow-scrollbar::-webkit-scrollbar-thumb { border: 2px solid transparent; background-clip: content-box; background-color: var(--td-scrollbar-color); border-radius: 15px; } .oneid-common .narrow-scrollbar::-webkit-scrollbar-thumb:vertical:hover, .oneid-common .narrow-scrollbar::-webkit-scrollbar-thumb:horizontal:hover { background-color: var(--td-scrollbar-hover-color); } .oneid-common .oneid-fake-arrow path { -webkit-transition: d 0.2s; transition: d 0.2s; stroke: currentcolor; } .oneid-common .oneid-fake-arrow--active path { d: path("M3.75 10.2002L7.99274 5.7998L12.2361 10.0425"); } .oneid-common .oneid-slide-down-enter-active, .oneid-common .oneid-slide-down-leave-active { -webkit-transition: height 0.2s cubic-bezier(0.38, 0, 0.24, 1), max-height 0.2s cubic-bezier(0.38, 0, 0.24, 1); transition: height 0.2s cubic-bezier(0.38, 0, 0.24, 1), max-height 0.2s cubic-bezier(0.38, 0, 0.24, 1); } .oneid-common, .oneid-common[theme-mode=light] { --td-brand-color-1: #f2f3ff; --td-brand-color-2: #d9e1ff; --td-brand-color-3: #b5c7ff; --td-brand-color-4: #8eabff; --td-brand-color-5: #618dff; --td-brand-color-6: #366ef4; --td-brand-color-7: #0052d9; --td-brand-color-8: #003cab; --td-brand-color-9: #002a7c; --td-brand-color-10: #001a57; --td-warning-color-1: #fff1e9; --td-warning-color-2: #ffd9c2; --td-warning-color-3: #ffb98c; --td-warning-color-4: #fa9550; --td-warning-color-5: #e37318; --td-warning-color-6: #be5a00; --td-warning-color-7: #954500; --td-warning-color-8: #713300; --td-warning-color-9: #532300; --td-warning-color-10: #3b1700; --td-error-color-1: #fff0ed; --td-error-color-2: #ffd8d2; --td-error-color-3: #ffb9b0; --td-error-color-4: #ff9285; --td-error-color-5: #f6685d; --td-error-color-6: #d54941; --td-error-color-7: #ad352f; --td-error-color-8: #881f1c; --td-error-color-9: #68070a; --td-error-color-10: #490002; --td-success-color-1: #e3f9e9; --td-success-color-2: #c6f3d7; --td-success-color-3: #92dab2; --td-success-color-4: #56c08d; --td-success-color-5: #2ba471; --td-success-color-6: #008858; --td-success-color-7: #006c45; --td-success-color-8: #005334; --td-success-color-9: #003b23; --td-success-color-10: #002515; --td-gray-color-1: #f3f3f3; --td-gray-color-2: #eee; --td-gray-color-3: #e8e8e8; --td-gray-color-4: #ddd; --td-gray-color-5: #c6c6c6; --td-gray-color-6: #a6a6a6; --td-gray-color-7: #8b8b8b; --td-gray-color-8: #777; --td-gray-color-9: #5e5e5e; --td-gray-color-10: #4b4b4b; --td-gray-color-11: #393939; --td-gray-color-12: #2c2c2c; --td-gray-color-13: #242424; --td-gray-color-14: #181818; --td-font-white-1: #ffffff; --td-font-white-2: rgba(255, 255, 255, 0.55); --td-font-white-3: rgba(255, 255, 255, 0.35); --td-font-white-4: rgba(255, 255, 255, 0.22); --td-font-gray-1: rgba(0, 0, 0, 0.9); --td-font-gray-2: rgba(0, 0, 0, 0.6); --td-font-gray-3: rgba(0, 0, 0, 0.4); --td-font-gray-4: rgba(0, 0, 0, 0.26); --td-brand-color: var(--td-brand-color-7); --td-warning-color: var(--td-warning-color-5); --td-error-color: var(--td-error-color-6); --td-success-color: var(--td-success-color-5); --td-brand-color-hover: var(--td-brand-color-6); --td-brand-color-focus: var(--td-brand-color-2); --td-brand-color-active: var(--td-brand-color-8); --td-brand-color-disabled: var(--td-brand-color-3); --td-brand-color-light: var(--td-brand-color-1); --td-brand-color-light-hover: var(--td-brand-color-2); --td-warning-color-hover: var(--td-warning-color-4); --td-warning-color-focus: var(--td-warning-color-2); --td-warning-color-active: var(--td-warning-color-6); --td-warning-color-disabled: var(--td-warning-color-3); --td-warning-color-light: var(--td-warning-color-1); --td-warning-color-light-hover: var(--td-warning-color-2); --td-error-color-hover: var(--td-error-color-5); --td-error-color-focus: var(--td-error-color-2); --td-error-color-active: var(--td-error-color-7); --td-error-color-disabled: var(--td-error-color-3); --td-error-color-light: var(--td-error-color-1); --td-error-color-light-hover: var(--td-error-color-2); --td-success-color-hover: var(--td-success-color-4); --td-success-color-focus: var(--td-success-color-2); --td-success-color-active: var(--td-success-color-6); --td-success-color-disabled: var(--td-success-color-3); --td-success-color-light: var(--td-success-color-1); --td-success-color-light-hover: var(--td-success-color-2); --td-mask-active: rgba(0, 0, 0, 0.6); --td-mask-disabled: rgba(255, 255, 255, 0.6); --td-bg-color-page: var(--td-gray-color-2); --td-bg-color-container: #fff; --td-bg-color-container-hover: var(--td-gray-color-1); --td-bg-color-container-active: var(--td-gray-color-3); --td-bg-color-container-select: #fff; --td-bg-color-secondarycontainer: var(--td-gray-color-1); --td-bg-color-secondarycontainer-hover: var(--td-gray-color-2); --td-bg-color-secondarycontainer-active: var(--td-gray-color-4); --td-bg-color-component: var(--td-gray-color-3); --td-bg-color-component-hover: var(--td-gray-color-4); --td-bg-color-component-active: var(--td-gray-color-6); --td-bg-color-secondarycomponent: var(--td-gray-color-4); --td-bg-color-secondarycomponent-hover: var(--td-gray-color-5); --td-bg-color-secondarycomponent-active: var(--td-gray-color-6); --td-bg-color-component-disabled: var(--td-gray-color-2); --td-bg-color-specialcomponent: #fff; --td-text-color-primary: var(--td-font-gray-1); --td-text-color-secondary: var(--td-font-gray-2); --td-text-color-placeholder: var(--td-font-gray-3); --td-text-color-disabled: var(--td-font-gray-4); --td-text-color-anti: #fff; --td-text-color-brand: var(--td-brand-color-7); --td-text-color-link: var(--td-brand-color-8); --td-border-level-1-color: var(--td-gray-color-3); --td-component-stroke: var(--td-gray-color-3); --td-border-level-2-color: var(--td-gray-color-4); --td-component-border: var(--td-gray-color-4); --td-shadow-1: 0 1px 10px rgba(0, 0, 0, 0.05), 0 4px 5px rgba(0, 0, 0, 0.08), 0 2px 4px -1px rgba(0, 0, 0, 0.12); --td-shadow-2: 0 3px 14px 2px rgba(0, 0, 0, 0.05), 0 8px 10px 1px rgba(0, 0, 0, 0.06), 0 5px 5px -3px rgba(0, 0, 0, 0.1); --td-shadow-3: 0 6px 30px 5px rgba(0, 0, 0, 0.05), 0 16px 24px 2px rgba(0, 0, 0, 0.04), 0 8px 10px -5px rgba(0, 0, 0, 0.08); --td-shadow-inset-top: inset 0 0.5px 0 #dcdcdc; --td-shadow-inset-right: inset 0.5px 0 0 #dcdcdc; --td-shadow-inset-bottom: inset 0 -0.5px 0 #dcdcdc; --td-shadow-inset-left: inset -0.5px 0 0 #dcdcdc; --td-table-shadow-color: rgba(0, 0, 0, 0.08); --td-scrollbar-color: rgba(0, 0, 0, 0.1); --td-scrollbar-hover-color: rgba(0, 0, 0, 0.3); --td-scroll-track-color: #fff; } .oneid-common[theme-mode=dark] { --td-brand-color-1: #1b2f51; --td-brand-color-2: #173463; --td-brand-color-3: #143975; --td-brand-color-4: #103d88; --td-brand-color-5: #0d429a; --td-brand-color-6: #054bbe; --td-brand-color-7: #2667d4; --td-brand-color-8: #4582e6; --td-brand-color-9: #699ef5; --td-brand-color-10: #96bbf8; --td-warning-color-1: #4f2a1d; --td-warning-color-2: #582f21; --td-warning-color-3: #733c23; --td-warning-color-4: #a75d2b; --td-warning-color-5: #cf6e2d; --td-warning-color-6: #dc7633; --td-warning-color-7: #e8935c; --td-warning-color-8: #ecbf91; --td-warning-color-9: #eed7bf; --td-warning-color-10: #f3e9dc; --td-error-color-1: #472324; --td-error-color-2: #5e2a2d; --td-error-color-3: #703439; --td-error-color-4: #83383e; --td-error-color-5: #a03f46; --td-error-color-6: #c64751; --td-error-color-7: #de6670; --td-error-color-8: #ec888e; --td-error-color-9: #edb1b6; --td-error-color-10: #eeced0; --td-success-color-1: #193a2a; --td-success-color-2: #1a4230; --td-success-color-3: #17533d; --td-success-color-4: #0d7a55; --td-success-color-5: #059465; --td-success-color-6: #43af8a; --td-success-color-7: #46bf96; --td-success-color-8: #80d2b6; --td-success-color-9: #b4e1d3; --td-success-color-10: #deede8; --td-gray-color-1: #f3f3f3; --td-gray-color-2: #eee; --td-gray-color-3: #e8e8e8; --td-gray-color-4: #ddd; --td-gray-color-5: #c6c6c6; --td-gray-color-6: #a6a6a6; --td-gray-color-7: #8b8b8b; --td-gray-color-8: #777; --td-gray-color-9: #5e5e5e; --td-gray-color-10: #4b4b4b; --td-gray-color-11: #393939; --td-gray-color-12: #2c2c2c; --td-gray-color-13: #242424; --td-gray-color-14: #181818; --td-font-white-1: rgba(255, 255, 255, 0.9); --td-font-white-2: rgba(255, 255, 255, 0.55); --td-font-white-3: rgba(255, 255, 255, 0.35); --td-font-white-4: rgba(255, 255, 255, 0.22); --td-font-gray-1: rgba(0, 0, 0, 0.9); --td-font-gray-2: rgba(0, 0, 0, 0.6); --td-font-gray-3: rgba(0, 0, 0, 0.4); --td-font-gray-4: rgba(0, 0, 0, 0.26); --td-brand-color: var(--td-brand-color-8); --td-warning-color: var(--td-warning-color-5); --td-error-color: var(--td-error-color-6); --td-success-color: var(--td-success-color-5); --td-brand-color-hover: var(--td-brand-color-7); --td-brand-color-focus: var(--td-brand-color-2); --td-brand-color-active: var(--td-brand-color-9); --td-brand-color-disabled: var(--td-brand-color-3); --td-brand-color-light: var(--td-brand-color-1); --td-brand-color-light-hover: var(--td-brand-color-2); --td-warning-color-hover: var(--td-warning-color-4); --td-warning-color-focus: var(--td-warning-color-2); --td-warning-color-active: var(--td-warning-color-6); --td-warning-color-disabled: var(--td-warning-color-3); --td-warning-color-light: var(--td-warning-color-1); --td-warning-color-light-hover: var(--td-warning-color-2); --td-error-color-hover: var(--td-error-color-5); --td-error-color-focus: var(--td-error-color-2); --td-error-color-active: var(--td-error-color-7); --td-error-color-disabled: var(--td-error-color-3); --td-error-color-light: var(--td-error-color-1); --td-error-color-light-hover: var(--td-error-color-2); --td-success-color-hover: var(--td-success-color-4); --td-success-color-focus: var(--td-success-color-2); --td-success-color-active: var(--td-success-color-6); --td-success-color-disabled: var(--td-success-color-3); --td-success-color-light: var(--td-success-color-1); --td-success-color-light-hover: var(--td-success-color-2); --td-mask-active: rgba(0, 0, 0, 0.4); --td-mask-disabled: rgba(0, 0, 0, 0.6); --td-bg-color-page: var(--td-gray-color-14); --td-bg-color-container: var(--td-gray-color-13); --td-bg-color-container-hover: var(--td-gray-color-12); --td-bg-color-container-active: var(--td-gray-color-10); --td-bg-color-container-select: var(--td-gray-color-9); --td-bg-color-secondarycontainer: var(--td-gray-color-12); --td-bg-color-secondarycontainer-hover: var(--td-gray-color-11); --td-bg-color-secondarycontainer-active: var(--td-gray-color-9); --td-bg-color-component: var(--td-gray-color-11); --td-bg-color-component-hover: var(--td-gray-color-10); --td-bg-color-component-active: var(--td-gray-color-9); --td-bg-color-secondarycomponent: var(--td-gray-color-10); --td-bg-color-secondarycomponent-hover: var(--td-gray-color-9); --td-bg-color-secondarycomponent-active: var(--td-gray-color-8); --td-bg-color-component-disabled: var(--td-gray-color-12); --td-bg-color-specialcomponent: transparent; --td-text-color-primary: var(--td-font-white-1); --td-text-color-secondary: var(--td-font-white-2); --td-text-color-placeholder: var(--td-font-white-3); --td-text-color-disabled: var(--td-font-white-4); --td-text-color-anti: #fff; --td-text-color-brand: var(--td-brand-color-8); --td-text-color-link: var(--td-brand-color-8); --td-border-level-1-color: var(--td-gray-color-11); --td-component-stroke: var(--td-gray-color-11); --td-border-level-2-color: var(--td-gray-color-9); --td-component-border: var(--td-gray-color-9); --td-shadow-1: 0 4px 6px rgba(0, 0, 0, 0.06), 0 1px 10px rgba(0, 0, 0, 0.08), 0 2px 4px rgba(0, 0, 0, 0.12); --td-shadow-2: 0 8px 10px rgba(0, 0, 0, 0.12), 0 3px 14px rgba(0, 0, 0, 0.1), 0 5px 5px rgba(0, 0, 0, 0.16); --td-shadow-3: 0 16px 24px rgba(0, 0, 0, 0.14), 0 6px 30px rgba(0, 0, 0, 0.12), 0 8px 10px rgba(0, 0, 0, 0.2); --td-shadow-inset-top: inset 0 0.5px 0 #5e5e5e; --td-shadow-inset-right: inset 0.5px 0 0 #5e5e5e; --td-shadow-inset-bottom: inset 0 -0.5px 0 #5e5e5e; --td-shadow-inset-left: inset -0.5px 0 0 #5e5e5e; --td-table-shadow-color: rgba(0, 0, 0, 0.55); --td-scrollbar-color: rgba(255, 255, 255, 0.1); --td-scrollbar-hover-color: rgba(255, 255, 255, 0.3); --td-scroll-track-color: #333; } .oneid-common { --td-radius-small: 2px; --td-radius-default: 3px; --td-radius-medium: 6px; --td-radius-large: 9px; --td-radius-extraLarge: 12px; --td-radius-round: 999px; --td-radius-circle: 50%; } .oneid-common { --td-font-family: PingFang SC, Microsoft YaHei, Arial Regular; --td-font-family-medium: PingFang SC, Microsoft YaHei, Arial Medium; --td-font-size-link-small: 12px; --td-font-size-link-medium: 14px; --td-font-size-link-large: 16px; --td-font-size-mark-small: 12px; --td-font-size-mark-medium: 14px; --td-font-size-body-small: 12px; --td-font-size-body-medium: 14px; --td-font-size-body-large: 16px; --td-font-size-title-small: 14px; --td-font-size-title-medium: 16px; --td-font-size-title-large: 20px; --td-font-size-headline-small: 24px; --td-font-size-headline-medium: 28px; --td-font-size-headline-large: 36px; --td-font-size-display-medium: 48px; --td-font-size-display-large: 64px; --td-line-height-link-small: 20px; --td-line-height-link-medium: 22px; --td-line-height-link-large: 24px; --td-line-height-mark-small: 20px; --td-line-height-mark-medium: 22px; --td-line-height-body-small: 20px; --td-line-height-body-medium: 22px; --td-line-height-body-large: 24px; --td-line-height-title-small: 22px; --td-line-height-title-medium: 24px; --td-line-height-title-large: 28px; --td-line-height-headline-small: 32px; --td-line-height-headline-medium: 36px; --td-line-height-headline-large: 44px; --td-line-height-display-medium: 56px; --td-line-height-display-large: 72px; --td-font-link-small: var(--td-font-size-link-small) / var(--td-line-height-link-small) var(--td-font-family); --td-font-link-medium: var(--td-font-size-link-medium) / var(--td-line-height-link-medium) var(--td-font-family); --td-font-link-large: var(--td-font-size-link-large) / var(--td-line-height-link-large) var(--td-font-family); --td-font-mark-small: 600 var(--td-font-size-mark-small) / var(--td-line-height-mark-small) var(--td-font-family); --td-font-mark-medium: 600 var(--td-font-size-mark-medium) / var(--td-line-height-mark-medium) var(--td-font-family); --td-font-body-small: var(--td-font-size-body-small) / var(--td-line-height-body-small) var(--td-font-family); --td-font-body-medium: var(--td-font-size-body-medium) / var(--td-line-height-body-medium) var(--td-font-family); --td-font-body-large: var(--td-font-size-body-large) / var(--td-line-height-body-large) var(--td-font-family); --td-font-title-small: 600 var(--td-font-size-title-small) / var(--td-line-height-title-small) var(--td-font-family); --td-font-title-medium: 600 var(--td-font-size-title-medium) / var(--td-line-height-title-medium) var(--td-font-family); --td-font-title-large: 600 var(--td-font-size-title-large) / var(--td-line-height-title-large) var(--td-font-family); --td-font-headline-small: 600 var(--td-font-size-headline-small) / var(--td-line-height-headline-small) var(--td-font-family); --td-font-headline-medium: 600 var(--td-font-size-headline-medium) / var(--td-line-height-headline-medium) var(--td-font-family); --td-font-headline-large: 600 var(--td-font-size-headline-large) / var(--td-line-height-headline-large) var(--td-font-family); --td-font-display-medium: 600 var(--td-font-size-display-medium) / var(--td-line-height-display-medium) var(--td-font-family); --td-font-display-large: 600 var(--td-font-size-display-large) / var(--td-line-height-display-large) var(--td-font-family); } .oneid-common { --td-size-1: 2px; --td-size-2: 4px; --td-size-3: 6px; --td-size-4: 8px; --td-size-5: 12px; --td-size-6: 16px; --td-size-7: 20px; --td-size-8: 24px; --td-size-9: 28px; --td-size-10: 32px; --td-size-11: 36px; --td-size-12: 40px; --td-size-13: 48px; --td-size-14: 56px; --td-size-15: 64px; --td-size-16: 72px; --td-comp-size-xxxs: var(--td-size-6); --td-comp-size-xxs: var(--td-size-7); --td-comp-size-xs: var(--td-size-8); --td-comp-size-s: var(--td-size-9); --td-comp-size-m: var(--td-size-10); --td-comp-size-l: var(--td-size-11); --td-comp-size-xl: var(--td-size-12); --td-comp-size-xxl: var(--td-size-13); --td-comp-size-xxxl: var(--td-size-14); --td-comp-size-xxxxl: var(--td-size-15); --td-comp-size-xxxxxl: var(--td-size-16); --td-pop-padding-s: var(--td-size-2); --td-pop-padding-m: var(--td-size-3); --td-pop-padding-l: var(--td-size-4); --td-pop-padding-xl: var(--td-size-5); --td-pop-padding-xxl: var(--td-size-6); --td-comp-paddingLR-xxs: var(--td-size-1); --td-comp-paddingLR-xs: var(--td-size-2); --td-comp-paddingLR-s: var(--td-size-4); --td-comp-paddingLR-m: var(--td-size-5); --td-comp-paddingLR-l: var(--td-size-6); --td-comp-paddingLR-xl: var(--td-size-8); --td-comp-paddingLR-xxl: var(--td-size-10); --td-comp-paddingTB-xxs: var(--td-size-1); --td-comp-paddingTB-xs: var(--td-size-2); --td-comp-paddingTB-s: var(--td-size-4); --td-comp-paddingTB-m: var(--td-size-5); --td-comp-paddingTB-l: var(--td-size-6); --td-comp-paddingTB-xl: var(--td-size-8); --td-comp-paddingTB-xxl: var(--td-size-10); --td-comp-margin-xxs: var(--td-size-1); --td-comp-margin-xs: var(--td-size-2); --td-comp-margin-s: var(--td-size-4); --td-comp-margin-m: var(--td-size-5); --td-comp-margin-l: var(--td-size-6); --td-comp-margin-xl: var(--td-size-7); --td-comp-margin-xxl: var(--td-size-8); --td-comp-margin-xxxl: var(--td-size-10); --td-comp-margin-xxxxl: var(--td-size-12); } .oneid-layout { font: var(--td-font-body-medium); color: var(--td-text-color-primary); -webkit-box-sizing: border-box; box-sizing: border-box; margin: 0; padding: 0; list-style: none; } .oneid-layout, .oneid-layout__direction-vertical { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; background: var(--td-bg-color-page); -webkit-box-flex: 1; -ms-flex: auto; flex: auto; } .oneid-layout--with-sider, .oneid-layout__direction-horizontal { -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; } .oneid-layout__header { height: var(--td-comp-size-xxxl); background-color: var(--td-bg-color-container); } .oneid-layout__content { -webkit-box-flex: 1; -ms-flex: auto; flex: auto; } .oneid-layout__sider { position: relative; -webkit-transition: all 0.2s; transition: all 0.2s; background: var(--td-bg-color-container); width: 232px; } .oneid-layout__footer { color: var(--td-text-color-placeholder); padding: 24px; } .oneid-row { font: var(--td-font-body-medium); color: var(--td-text-color-primary); -webkit-box-sizing: border-box; box-sizing: border-box; margin: 0; padding: 0; list-style: none; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-flow: row wrap; flex-flow: row wrap; } .oneid-row--start { -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; } .oneid-row--center { -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .oneid-row--end { -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; } .oneid-row--space-between { -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } .oneid-row--space-around { -ms-flex-pack: distribute; justify-content: space-around; } .oneid-row--top { -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; } .oneid-row--middle { -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .oneid-row--bottom { -webkit-box-align: end; -ms-flex-align: end; align-items: flex-end; } .oneid-row--align-top, .oneid-row--align-start { -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; } .oneid-row--align-middle, .oneid-row--align-center { -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .oneid-row--align-bottom, .oneid-row--align-end { -webkit-box-align: end; -ms-flex-align: end; align-items: flex-end; } .oneid-row--align-stretch { -webkit-box-align: stretch; -ms-flex-align: stretch; align-items: stretch; } .oneid-row--align-baseline { -webkit-box-align: baseline; -ms-flex-align: baseline; align-items: baseline; } .oneid-col { position: relative; max-width: 100%; min-height: 1px; -webkit-box-sizing: border-box; box-sizing: border-box; } .oneid-col-12 { display: block; -webkit-box-flex: 0; -ms-flex: 0 0 100%; flex: 0 0 100%; max-width: 100%; } .oneid-col-push-12 { left: 100%; } .oneid-col-pull-12 { right: 100%; } .oneid-col-offset-12 { margin-left: 100%; } .oneid-col-order-12 { -webkit-box-ordinal-group: 13; -ms-flex-order: 12; order: 12; } .oneid-col-11 { display: block; -webkit-box-flex: 0; -ms-flex: 0 0 91.66666667%; flex: 0 0 91.66666667%; max-width: 91.66666667%; } .oneid-col-push-11 { left: 91.66666667%; } .oneid-col-pull-11 { right: 91.66666667%; } .oneid-col-offset-11 { margin-left: 91.66666667%; } .oneid-col-order-11 { -webkit-box-ordinal-group: 12; -ms-flex-order: 11; order: 11; } .oneid-col-10 { display: block; -webkit-box-flex: 0; -ms-flex: 0 0 83.33333333%; flex: 0 0 83.33333333%; max-width: 83.33333333%; } .oneid-col-push-10 { left: 83.33333333%; } .oneid-col-pull-10 { right: 83.33333333%; } .oneid-col-offset-10 { margin-left: 83.33333333%; } .oneid-col-order-10 { -webkit-box-ordinal-group: 11; -ms-flex-order: 10; order: 10; } .oneid-col-9 { display: block; -webkit-box-flex: 0; -ms-flex: 0 0 75%; flex: 0 0 75%; max-width: 75%; } .oneid-col-push-9 { left: 75%; } .oneid-col-pull-9 { right: 75%; } .oneid-col-offset-9 { margin-left: 75%; } .oneid-col-order-9 { -webkit-box-ordinal-group: 10; -ms-flex-order: 9; order: 9; } .oneid-col-8 { display: block; -webkit-box-flex: 0; -ms-flex: 0 0 66.66666667%; flex: 0 0 66.66666667%; max-width: 66.66666667%; } .oneid-col-push-8 { left: 66.66666667%; } .oneid-col-pull-8 { right: 66.66666667%; } .oneid-col-offset-8 { margin-left: 66.66666667%; } .oneid-col-order-8 { -webkit-box-ordinal-group: 9; -ms-flex-order: 8; order: 8; } .oneid-col-7 { display: block; -webkit-box-flex: 0; -ms-flex: 0 0 58.33333333%; flex: 0 0 58.33333333%; max-width: 58.33333333%; } .oneid-col-push-7 { left: 58.33333333%; } .oneid-col-pull-7 { right: 58.33333333%; } .oneid-col-offset-7 { margin-left: 58.33333333%; } .oneid-col-order-7 { -webkit-box-ordinal-group: 8; -ms-flex-order: 7; order: 7; } .oneid-col-6 { display: block; -webkit-box-flex: 0; -ms-flex: 0 0 50%; flex: 0 0 50%; max-width: 50%; } .oneid-col-push-6 { left: 50%; } .oneid-col-pull-6 { right: 50%; } .oneid-col-offset-6 { margin-left: 50%; } .oneid-col-order-6 { -webkit-box-ordinal-group: 7; -ms-flex-order: 6; order: 6; } .oneid-col-5 { display: block; -webkit-box-flex: 0; -ms-flex: 0 0 41.66666667%; flex: 0 0 41.66666667%; max-width: 41.66666667%; } .oneid-col-push-5 { left: 41.66666667%; } .oneid-col-pull-5 { right: 41.66666667%; } .oneid-col-offset-5 { margin-left: 41.66666667%; } .oneid-col-order-5 { -webkit-box-ordinal-group: 6; -ms-flex-order: 5; order: 5; } .oneid-col-4 { display: block; -webkit-box-flex: 0; -ms-flex: 0 0 33.33333333%; flex: 0 0 33.33333333%; max-width: 33.33333333%; } .oneid-col-push-4 { left: 33.33333333%; } .oneid-col-pull-4 { right: 33.33333333%; } .oneid-col-offset-4 { margin-left: 33.33333333%; } .oneid-col-order-4 { -webkit-box-ordinal-group: 5; -ms-flex-order: 4; order: 4; } .oneid-col-3 { display: block; -webkit-box-flex: 0; -ms-flex: 0 0 25%; flex: 0 0 25%; max-width: 25%; } .oneid-col-push-3 { left: 25%; } .oneid-col-pull-3 { right: 25%; } .oneid-col-offset-3 { margin-left: 25%; } .oneid-col-order-3 { -webkit-box-ordinal-group: 4; -ms-flex-order: 3; order: 3; } .oneid-col-2 { display: block; -webkit-box-flex: 0; -ms-flex: 0 0 16.66666667%; flex: 0 0 16.66666667%; max-width: 16.66666667%; } .oneid-col-push-2 { left: 16.66666667%; } .oneid-col-pull-2 { right: 16.66666667%; } .oneid-col-offset-2 { margin-left: 16.66666667%; } .oneid-col-order-2 { -webkit-box-ordinal-group: 3; -ms-flex-order: 2; order: 2; } .oneid-col-1 { display: block; -webkit-box-flex: 0; -ms-flex: 0 0 8.33333333%; flex: 0 0 8.33333333%; max-width: 8.33333333%; } .oneid-col-push-1 { left: 8.33333333%; } .oneid-col-pull-1 { right: 8.33333333%; } .oneid-col-offset-1 { margin-left: 8.33333333%; } .oneid-col-order-1 { -webkit-box-ordinal-group: 2; -ms-flex-order: 1; order: 1; } .oneid-col-0 { display: none; } .oneid-col-push-0 { left: auto; } .oneid-col-pull-0 { right: auto; } .oneid-col-push-0 { left: auto; } .oneid-col-pull-0 { right: auto; } .oneid-col-offset-0 { margin-left: 0; } .oneid-col-order-0 { -webkit-box-ordinal-group: 1; -ms-flex-order: 0; order: 0; } .oneid-col-xs-12 { display: block; -webkit-box-flex: 0; -ms-flex: 0 0 100%; flex: 0 0 100%; max-width: 100%; } .oneid-col-xs-push-12 { left: 100%; } .oneid-col-xs-pull-12 { right: 100%; } .oneid-col-xs-offset-12 { margin-left: 100%; } .oneid-col-xs-order-12 { -webkit-box-ordinal-group: 13; -ms-flex-order: 12; order: 12; } .oneid-col-xs-11 { display: block; -webkit-box-flex: 0; -ms-flex: 0 0 91.66666667%; flex: 0 0 91.66666667%; max-width: 91.66666667%; } .oneid-col-xs-push-11 { left: 91.66666667%; } .oneid-col-xs-pull-11 { right: 91.66666667%; } .oneid-col-xs-offset-11 { margin-left: 91.66666667%; } .oneid-col-xs-order-11 { -webkit-box-ordinal-group: 12; -ms-flex-order: 11; order: 11; } .oneid-col-xs-10 { display: block; -webkit-box-flex: 0; -ms-flex: 0 0 83.33333333%; flex: 0 0 83.33333333%; max-width: 83.33333333%; } .oneid-col-xs-push-10 { left: 83.33333333%; } .oneid-col-xs-pull-10 { right: 83.33333333%; } .oneid-col-xs-offset-10 { margin-left: 83.33333333%; } .oneid-col-xs-order-10 { -webkit-box-ordinal-group: 11; -ms-flex-order: 10; order: 10; } .oneid-col-xs-9 { display: block; -webkit-box-flex: 0; -ms-flex: 0 0 75%; flex: 0 0 75%; max-width: 75%; } .oneid-col-xs-push-9 { left: 75%; } .oneid-col-xs-pull-9 { right: 75%; } .oneid-col-xs-offset-9 { margin-left: 75%; } .oneid-col-xs-order-9 { -webkit-box-ordinal-group: 10; -ms-flex-order: 9; order: 9; } .oneid-col-xs-8 { display: block; -webkit-box-flex: 0; -ms-flex: 0 0 66.66666667%; flex: 0 0 66.66666667%; max-width: 66.66666667%; } .oneid-col-xs-push-8 { left: 66.66666667%; } .oneid-col-xs-pull-8 { right: 66.66666667%; } .oneid-col-xs-offset-8 { margin-left: 66.66666667%; } .oneid-col-xs-order-8 { -webkit-box-ordinal-group: 9; -ms-flex-order: 8; order: 8; } .oneid-col-xs-7 { display: block; -webkit-box-flex: 0; -ms-flex: 0 0 58.33333333%; flex: 0 0 58.33333333%; max-width: 58.33333333%; } .oneid-col-xs-push-7 { left: 58.33333333%; } .oneid-col-xs-pull-7 { right: 58.33333333%; } .oneid-col-xs-offset-7 { margin-left: 58.33333333%; } .oneid-col-xs-order-7 { -webkit-box-ordinal-group: 8; -ms-flex-order: 7; order: 7; } .oneid-col-xs-6 { display: block; -webkit-box-flex: 0; -ms-flex: 0 0 50%; flex: 0 0 50%; max-width: 50%; } .oneid-col-xs-push-6 { left: 50%; } .oneid-col-xs-pull-6 { right: 50%; } .oneid-col-xs-offset-6 { margin-left: 50%; } .oneid-col-xs-order-6 { -webkit-box-ordinal-group: 7; -ms-flex-order: 6; order: 6; } .oneid-col-xs-5 { display: block; -webkit-box-flex: 0; -ms-flex: 0 0 41.66666667%; flex: 0 0 41.66666667%; max-width: 41.66666667%; } .oneid-col-xs-push-5 { left: 41.66666667%; } .oneid-col-xs-pull-5 { right: 41.66666667%; } .oneid-col-xs-offset-5 { margin-left: 41.66666667%; } .oneid-col-xs-order-5 { -webkit-box-ordinal-group: 6; -ms-flex-order: 5; order: 5; } .oneid-col-xs-4 { display: block; -webkit-box-flex: 0; -ms-flex: 0 0 33.33333333%; flex: 0 0 33.33333333%; max-width: 33.33333333%; } .oneid-col-xs-push-4 { left: 33.33333333%; } .oneid-col-xs-pull-4 { right: 33.33333333%; } .oneid-col-xs-offset-4 { margin-left: 33.33333333%; } .oneid-col-xs-order-4 { -webkit-box-ordinal-group: 5; -ms-flex-order: 4; order: 4; } .oneid-col-xs-3 { display: block; -webkit-box-flex: 0; -ms-flex: 0 0 25%; flex: 0 0 25%; max-width: 25%; } .oneid-col-xs-push-3 { left: 25%; } .oneid-col-xs-pull-3 { right: 25%; } .oneid-col-xs-offset-3 { margin-left: 25%; } .oneid-col-xs-order-3 { -webkit-box-ordinal-group: 4; -ms-flex-order: 3; order: 3; } .oneid-col-xs-2 { display: block; -webkit-box-flex: 0; -ms-flex: 0 0 16.66666667%; flex: 0 0 16.66666667%; max-width: 16.66666667%; } .oneid-col-xs-push-2 { left: 16.66666667%; } .oneid-col-xs-pull-2 { right: 16.66666667%; } .oneid-col-xs-offset-2 { margin-left: 16.66666667%; } .oneid-col-xs-order-2 { -webkit-box-ordinal-group: 3; -ms-flex-order: 2; order: 2; } .oneid-col-xs-1 { display: block; -webkit-box-flex: 0; -ms-flex: 0 0 8.33333333%; flex: 0 0 8.33333333%; max-width: 8.33333333%; } .oneid-col-xs-push-1 { left: 8.33333333%; } .oneid-col-xs-pull-1 { right: 8.33333333%; } .oneid-col-xs-offset-1 { margin-left: 8.33333333%; } .oneid-col-xs-order-1 { -webkit-box-ordinal-group: 2; -ms-flex-order: 1; order: 1; } .oneid-col-xs-0 { display: none; } .oneid-col-push-0 { left: auto; } .oneid-col-pull-0 { right: auto; } .oneid-col-xs-push-0 { left: auto; } .oneid-col-xs-pull-0 { right: auto; } .oneid-col-xs-offset-0 { margin-left: 0; } .oneid-col-xs-order-0 { -webkit-box-ordinal-group: 1; -ms-flex-order: 0; order: 0; } @media (min-width: 768px) { .oneid-col-sm-12 { display: block; -webkit-box-flex: 0; -ms-flex: 0 0 100%; flex: 0 0 100%; max-width: 100%; } .oneid-col-sm-push-12 { left: 100%; } .oneid-col-sm-pull-12 { right: 100%; } .oneid-col-sm-offset-12 { margin-left: 100%; } .oneid-col-sm-order-12 { -webkit-box-ordinal-group: 13; -ms-flex-order: 12; order: 12; } .oneid-col-sm-11 { display: block; -webkit-box-flex: 0; -ms-flex: 0 0 91.66666667%; flex: 0 0 91.66666667%; max-width: 91.66666667%; } .oneid-col-sm-push-11 { left: 91.66666667%; } .oneid-col-sm-pull-11 { right: 91.66666667%; } .oneid-col-sm-offset-11 { margin-left: 91.66666667%; } .oneid-col-sm-order-11 { -webkit-box-ordinal-group: 12; -ms-flex-order: 11; order: 11; } .oneid-col-sm-10 { display: block; -webkit-box-flex: 0; -ms-flex: 0 0 83.33333333%; flex: 0 0 83.33333333%; max-width: 83.33333333%; } .oneid-col-sm-push-10 { left: 83.33333333%; } .oneid-col-sm-pull-10 { right: 83.33333333%; } .oneid-col-sm-offset-10 { margin-left: 83.33333333%; } .oneid-col-sm-order-10 { -webkit-box-ordinal-group: 11; -ms-flex-order: 10; order: 10; } .oneid-col-sm-9 { display: block; -webkit-box-flex: 0; -ms-flex: 0 0 75%; flex: 0 0 75%; max-width: 75%; } .oneid-col-sm-push-9 { left: 75%; } .oneid-col-sm-pull-9 { right: 75%; } .oneid-col-sm-offset-9 { margin-left: 75%; } .oneid-col-sm-order-9 { -webkit-box-ordinal-group: 10; -ms-flex-order: 9; order: 9; } .oneid-col-sm-8 { display: block; -webkit-box-flex: 0; -ms-flex: 0 0 66.66666667%; flex: 0 0 66.66666667%; max-width: 66.66666667%; } .oneid-col-sm-push-8 { left: 66.66666667%; } .oneid-col-sm-pull-8 { right: 66.66666667%; } .oneid-col-sm-offset-8 { margin-left: 66.66666667%; } .oneid-col-sm-order-8 { -webkit-box-ordinal-group: 9; -ms-flex-order: 8; order: 8; } .oneid-col-sm-7 { display: block; -webkit-box-flex: 0; -ms-flex: 0 0 58.33333333%; flex: 0 0 58.33333333%; max-width: 58.33333333%; } .oneid-col-sm-push-7 { left: 58.33333333%; } .oneid-col-sm-pull-7 { right: 58.33333333%; } .oneid-col-sm-offset-7 { margin-left: 58.33333333%; } .oneid-col-sm-order-7 { -webkit-box-ordinal-group: 8; -ms-flex-order: 7; order: 7; } .oneid-col-sm-6 { display: block; -webkit-box-flex: 0; -ms-flex: 0 0 50%; flex: 0 0 50%; max-width: 50%; } .oneid-col-sm-push-6 { left: 50%; } .oneid-col-sm-pull-6 { right: 50%; } .oneid-col-sm-offset-6 { margin-left: 50%; } .oneid-col-sm-order-6 { -webkit-box-ordinal-group: 7; -ms-flex-order: 6; order: 6; } .oneid-col-sm-5 { display: block; -webkit-box-flex: 0; -ms-flex: 0 0 41.66666667%; flex: 0 0 41.66666667%; max-width: 41.66666667%; } .oneid-col-sm-push-5 { left: 41.66666667%; } .oneid-col-sm-pull-5 { right: 41.66666667%; } .oneid-col-sm-offset-5 { margin-left: 41.66666667%; } .oneid-col-sm-order-5 { -webkit-box-ordinal-group: 6; -ms-flex-order: 5; order: 5; } .oneid-col-sm-4 { display: block; -webkit-box-flex: 0; -ms-flex: 0 0 33.33333333%; flex: 0 0 33.33333333%; max-width: 33.33333333%; } .oneid-col-sm-push-4 { left: 33.33333333%; } .oneid-col-sm-pull-4 { right: 33.33333333%; } .oneid-col-sm-offset-4 { margin-left: 33.33333333%; } .oneid-col-sm-order-4 { -webkit-box-ordinal-group: 5; -ms-flex-order: 4; order: 4; } .oneid-col-sm-3 { display: block; -webkit-box-flex: 0; -ms-flex: 0 0 25%; flex: 0 0 25%; max-width: 25%; } .oneid-col-sm-push-3 { left: 25%; } .oneid-col-sm-pull-3 { right: 25%; } .oneid-col-sm-offset-3 { margin-left: 25%; } .oneid-col-sm-order-3 { -webkit-box-ordinal-group: 4; -ms-flex-order: 3; order: 3; } .oneid-col-sm-2 { display: block; -webkit-box-flex: 0; -ms-flex: 0 0 16.66666667%; flex: 0 0 16.66666667%; max-width: 16.66666667%; } .oneid-col-sm-push-2 { left: 16.66666667%; } .oneid-col-sm-pull-2 { right: 16.66666667%; } .oneid-col-sm-offset-2 { margin-left: 16.66666667%; } .oneid-col-sm-order-2 { -webkit-box-ordinal-group: 3; -ms-flex-order: 2; order: 2; } .oneid-col-sm-1 { display: block; -webkit-box-flex: 0; -ms-flex: 0 0 8.33333333%; flex: 0 0 8.33333333%; max-width: 8.33333333%; } .oneid-col-sm-push-1 { left: 8.33333333%; } .oneid-col-sm-pull-1 { right: 8.33333333%; } .oneid-col-sm-offset-1 { margin-left: 8.33333333%; } .oneid-col-sm-order-1 { -webkit-box-ordinal-group: 2; -ms-flex-order: 1; order: 1; } .oneid-col-sm-0 { display: none; } .oneid-col-push-0 { left: auto; } .oneid-col-pull-0 { right: auto; } .oneid-col-sm-push-0 { left: auto; } .oneid-col-sm-pull-0 { right: auto; } .oneid-col-sm-offset-0 { margin-left: 0; } .oneid-col-sm-order-0 { -webkit-box-ordinal-group: 1; -ms-flex-order: 0; order: 0; } } @media (min-width: 992px) { .oneid-col-md-12 { display: block; -webkit-box-flex: 0; -ms-flex: 0 0 100%; flex: 0 0 100%; max-width: 100%; } .oneid-col-md-push-12 { left: 100%; } .oneid-col-md-pull-12 { right: 100%; } .oneid-col-md-offset-12 { margin-left: 100%; } .oneid-col-md-order-12 { -webkit-box-ordinal-group: 13; -ms-flex-order: 12; order: 12; } .oneid-col-md-11 { display: block; -webkit-box-flex: 0; -ms-flex: 0 0 91.66666667%; flex: 0 0 91.66666667%; max-width: 91.66666667%; } .oneid-col-md-push-11 { left: 91.66666667%; } .oneid-col-md-pull-11 { right: 91.66666667%; } .oneid-col-md-offset-11 { margin-left: 91.66666667%; } .oneid-col-md-order-11 { -webkit-box-ordinal-group: 12; -ms-flex-order: 11; order: 11; } .oneid-col-md-10 { display: block; -webkit-box-flex: 0; -ms-flex: 0 0 83.33333333%; flex: 0 0 83.33333333%; max-width: 83.33333333%; } .oneid-col-md-push-10 { left: 83.33333333%; } .oneid-col-md-pull-10 { right: 83.33333333%; } .oneid-col-md-offset-10 { margin-left: 83.33333333%; } .oneid-col-md-order-10 { -webkit-box-ordinal-group: 11; -ms-flex-order: 10; order: 10; } .oneid-col-md-9 { display: block; -webkit-box-flex: 0; -ms-flex: 0 0 75%; flex: 0 0 75%; max-width: 75%; } .oneid-col-md-push-9 { left: 75%; } .oneid-col-md-pull-9 { right: 75%; } .oneid-col-md-offset-9 { margin-left: 75%; } .oneid-col-md-order-9 { -webkit-box-ordinal-group: 10; -ms-flex-order: 9; order: 9; } .oneid-col-md-8 { display: block; -webkit-box-flex: 0; -ms-flex: 0 0 66.66666667%; flex: 0 0 66.66666667%; max-width: 66.66666667%; } .oneid-col-md-push-8 { left: 66.66666667%; } .oneid-col-md-pull-8 { right: 66.66666667%; } .oneid-col-md-offset-8 { margin-left: 66.66666667%; } .oneid-col-md-order-8 { -webkit-box-ordinal-group: 9; -ms-flex-order: 8; order: 8; } .oneid-col-md-7 { display: block; -webkit-box-flex: 0; -ms-flex: 0 0 58.33333333%; flex: 0 0 58.33333333%; max-width: 58.33333333%; } .oneid-col-md-push-7 { left: 58.33333333%; } .oneid-col-md-pull-7 { right: 58.33333333%; } .oneid-col-md-offset-7 { margin-left: 58.33333333%; } .oneid-col-md-order-7 { -webkit-box-ordinal-group: 8; -ms-flex-order: 7; order: 7; } .oneid-col-md-6 { display: block; -webkit-box-flex: 0; -ms-flex: 0 0 50%; flex: 0 0 50%; max-width: 50%; } .oneid-col-md-push-6 { left: 50%; } .oneid-col-md-pull-6 { right: 50%; } .oneid-col-md-offset-6 { margin-left: 50%; } .oneid-col-md-order-6 { -webkit-box-ordinal-group: 7; -ms-flex-order: 6; order: 6; } .oneid-col-md-5 { display: block; -webkit-box-flex: 0; -ms-flex: 0 0 41.66666667%; flex: 0 0 41.66666667%; max-width: 41.66666667%; } .oneid-col-md-push-5 { left: 41.66666667%; } .oneid-col-md-pull-5 { right: 41.66666667%; } .oneid-col-md-offset-5 { margin-left: 41.66666667%; } .oneid-col-md-order-5 { -webkit-box-ordinal-group: 6; -ms-flex-order: 5; order: 5; } .oneid-col-md-4 { display: block; -webkit-box-flex: 0; -ms-flex: 0 0 33.33333333%; flex: 0 0 33.33333333%; max-width: 33.33333333%; } .oneid-col-md-push-4 { left: 33.33333333%; } .oneid-col-md-pull-4 { right: 33.33333333%; } .oneid-col-md-offset-4 { margin-left: 33.33333333%; } .oneid-col-md-order-4 { -webkit-box-ordinal-group: 5; -ms-flex-order: 4; order: 4; } .oneid-col-md-3 { display: block; -webkit-box-flex: 0; -ms-flex: 0 0 25%; flex: 0 0 25%; max-width: 25%; } .oneid-col-md-push-3 { left: 25%; } .oneid-col-md-pull-3 { right: 25%; } .oneid-col-md-offset-3 { margin-left: 25%; } .oneid-col-md-order-3 { -webkit-box-ordinal-group: 4; -ms-flex-order: 3; order: 3; } .oneid-col-md-2 { display: block; -webkit-box-flex: 0; -ms-flex: 0 0 16.66666667%; flex: 0 0 16.66666667%; max-width: 16.66666667%; } .oneid-col-md-push-2 { left: 16.66666667%; } .oneid-col-md-pull-2 { right: 16.66666667%; } .oneid-col-md-offset-2 { margin-left: 16.66666667%; } .oneid-col-md-order-2 { -webkit-box-ordinal-group: 3; -ms-flex-order: 2; order: 2; } .oneid-col-md-1 { display: block; -webkit-box-flex: 0; -ms-flex: 0 0 8.33333333%; flex: 0 0 8.33333333%; max-width: 8.33333333%; } .oneid-col-md-push-1 { left: 8.33333333%; } .oneid-col-md-pull-1 { right: 8.33333333%; } .oneid-col-md-offset-1 { margin-left: 8.33333333%; } .oneid-col-md-order-1 { -webkit-box-ordinal-group: 2; -ms-flex-order: 1; order: 1; } .oneid-col-md-0 { display: none; } .oneid-col-push-0 { left: auto; } .oneid-col-pull-0 { right: auto; } .oneid-col-md-push-0 { left: auto; } .oneid-col-md-pull-0 { right: auto; } .oneid-col-md-offset-0 { margin-left: 0; } .oneid-col-md-order-0 { -webkit-box-ordinal-group: 1; -ms-flex-order: 0; order: 0; } } @media (min-width: 1200px) { .oneid-col-lg-12 { display: block; -webkit-box-flex: 0; -ms-flex: 0 0 100%; flex: 0 0 100%; max-width: 100%; } .oneid-col-lg-push-12 { left: 100%; } .oneid-col-lg-pull-12 { right: 100%; } .oneid-col-lg-offset-12 { margin-left: 100%; } .oneid-col-lg-order-12 { -webkit-box-ordinal-group: 13; -ms-flex-order: 12; order: 12; } .oneid-col-lg-11 { display: block; -webkit-box-flex: 0; -ms-flex: 0 0 91.66666667%; flex: 0 0 91.66666667%; max-width: 91.66666667%; } .oneid-col-lg-push-11 { left: 91.66666667%; } .oneid-col-lg-pull-11 { right: 91.66666667%; } .oneid-col-lg-offset-11 { margin-left: 91.66666667%; } .oneid-col-lg-order-11 { -webkit-box-ordinal-group: 12; -ms-flex-order: 11; order: 11; } .oneid-col-lg-10 { display: block; -webkit-box-flex: 0; -ms-flex: 0 0 83.33333333%; flex: 0 0 83.33333333%; max-width: 83.33333333%; } .oneid-col-lg-push-10 { left: 83.33333333%; } .oneid-col-lg-pull-10 { right: 83.33333333%; } .oneid-col-lg-offset-10 { margin-left: 83.33333333%; } .oneid-col-lg-order-10 { -webkit-box-ordinal-group: 11; -ms-flex-order: 10; order: 10; } .oneid-col-lg-9 { display: block; -webkit-box-flex: 0; -ms-flex: 0 0 75%; flex: 0 0 75%; max-width: 75%; } .oneid-col-lg-push-9 { left: 75%; } .oneid-col-lg-pull-9 { right: 75%; } .oneid-col-lg-offset-9 { margin-left: 75%; } .oneid-col-lg-order-9 { -webkit-box-ordinal-group: 10; -ms-flex-order: 9; order: 9; } .oneid-col-lg-8 { display: block; -webkit-box-flex: 0; -ms-flex: 0 0 66.66666667%; flex: 0 0 66.66666667%; max-width: 66.66666667%; } .oneid-col-lg-push-8 { left: 66.66666667%; } .oneid-col-lg-pull-8 { right: 66.66666667%; } .oneid-col-lg-offset-8 { margin-left: 66.66666667%; } .oneid-col-lg-order-8 { -webkit-box-ordinal-group: 9; -ms-flex-order: 8; order: 8; } .oneid-col-lg-7 { display: block; -webkit-box-flex: 0; -ms-flex: 0 0 58.33333333%; flex: 0 0 58.33333333%; max-width: 58.33333333%; } .oneid-col-lg-push-7 { left: 58.33333333%; } .oneid-col-lg-pull-7 { right: 58.33333333%; } .oneid-col-lg-offset-7 { margin-left: 58.33333333%; } .oneid-col-lg-order-7 { -webkit-box-ordinal-group: 8; -ms-flex-order: 7; order: 7; } .oneid-col-lg-6 { display: block; -webkit-box-flex: 0; -ms-flex: 0 0 50%; flex: 0 0 50%; max-width: 50%; } .oneid-col-lg-push-6 { left: 50%; } .oneid-col-lg-pull-6 { right: 50%; } .oneid-col-lg-offset-6 { margin-left: 50%; } .oneid-col-lg-order-6 { -webkit-box-ordinal-group: 7; -ms-flex-order: 6; order: 6; } .oneid-col-lg-5 { display: block; -webkit-box-flex: 0; -ms-flex: 0 0 41.66666667%; flex: 0 0 41.66666667%; max-width: 41.66666667%; } .oneid-col-lg-push-5 { left: 41.66666667%; } .oneid-col-lg-pull-5 { right: 41.66666667%; } .oneid-col-lg-offset-5 { margin-left: 41.66666667%; } .oneid-col-lg-order-5 { -webkit-box-ordinal-group: 6; -ms-flex-order: 5; order: 5; } .oneid-col-lg-4 { display: block; -webkit-box-flex: 0; -ms-flex: 0 0 33.33333333%; flex: 0 0 33.33333333%; max-width: 33.33333333%; } .oneid-col-lg-push-4 { left: 33.33333333%; } .oneid-col-lg-pull-4 { right: 33.33333333%; } .oneid-col-lg-offset-4 { margin-left: 33.33333333%; } .oneid-col-lg-order-4 { -webkit-box-ordinal-group: 5; -ms-flex-order: 4; order: 4; } .oneid-col-lg-3 { display: block; -webkit-box-flex: 0; -ms-flex: 0 0 25%; flex: 0 0 25%; max-width: 25%; } .oneid-col-lg-push-3 { left: 25%; } .oneid-col-lg-pull-3 { right: 25%; } .oneid-col-lg-offset-3 { margin-left: 25%; } .oneid-col-lg-order-3 { -webkit-box-ordinal-group: 4; -ms-flex-order: 3; order: 3; } .oneid-col-lg-2 { display: block; -webkit-box-flex: 0; -ms-flex: 0 0 16.66666667%; flex: 0 0 16.66666667%; max-width: 16.66666667%; } .oneid-col-lg-push-2 { left: 16.66666667%; } .oneid-col-lg-pull-2 { right: 16.66666667%; } .oneid-col-lg-offset-2 { margin-left: 16.66666667%; } .oneid-col-lg-order-2 { -webkit-box-ordinal-group: 3; -ms-flex-order: 2; order: 2; } .oneid-col-lg-1 { display: block; -webkit-box-flex: 0; -ms-flex: 0 0 8.33333333%; flex: 0 0 8.33333333%; max-width: 8.33333333%; } .oneid-col-lg-push-1 { left: 8.33333333%; } .oneid-col-lg-pull-1 { right: 8.33333333%; } .oneid-col-lg-offset-1 { margin-left: 8.33333333%; } .oneid-col-lg-order-1 { -webkit-box-ordinal-group: 2; -ms-flex-order: 1; order: 1; } .oneid-col-lg-0 { display: none; } .oneid-col-push-0 { left: auto; } .oneid-col-pull-0 { right: auto; } .oneid-col-lg-push-0 { left: auto; } .oneid-col-lg-pull-0 { right: auto; } .oneid-col-lg-offset-0 { margin-left: 0; } .oneid-col-lg-order-0 { -webkit-box-ordinal-group: 1; -ms-flex-order: 0; order: 0; } } @media (min-width: 1400px) { .oneid-col-xl-12 { display: block; -webkit-box-flex: 0; -ms-flex: 0 0 100%; flex: 0 0 100%; max-width: 100%; } .oneid-col-xl-push-12 { left: 100%; } .oneid-col-xl-pull-12 { right: 100%; } .oneid-col-xl-offset-12 { margin-left: 100%; } .oneid-col-xl-order-12 { -webkit-box-ordinal-group: 13; -ms-flex-order: 12; order: 12; } .oneid-col-xl-11 { display: block; -webkit-box-flex: 0; -ms-flex: 0 0 91.66666667%; flex: 0 0 91.66666667%; max-width: 91.66666667%; } .oneid-col-xl-push-11 { left: 91.66666667%; } .oneid-col-xl-pull-11 { right: 91.66666667%; } .oneid-col-xl-offset-11 { margin-left: 91.66666667%; } .oneid-col-xl-order-11 { -webkit-box-ordinal-group: 12; -ms-flex-order: 11; order: 11; } .oneid-col-xl-10 { display: block; -webkit-box-flex: 0; -ms-flex: 0 0 83.33333333%; flex: 0 0 83.33333333%; max-width: 83.33333333%; } .oneid-col-xl-push-10 { left: 83.33333333%; } .oneid-col-xl-pull-10 { right: 83.33333333%; } .oneid-col-xl-offset-10 { margin-left: 83.33333333%; } .oneid-col-xl-order-10 { -webkit-box-ordinal-group: 11; -ms-flex-order: 10; order: 10; } .oneid-col-xl-9 { display: block; -webkit-box-flex: 0; -ms-flex: 0 0 75%; flex: 0 0 75%; max-width: 75%; } .oneid-col-xl-push-9 { left: 75%; } .oneid-col-xl-pull-9 { right: 75%; } .oneid-col-xl-offset-9 { margin-left: 75%; } .oneid-col-xl-order-9 { -webkit-box-ordinal-group: 10; -ms-flex-order: 9; order: 9; } .oneid-col-xl-8 { display: block; -webkit-box-flex: 0; -ms-flex: 0 0 66.66666667%; flex: 0 0 66.66666667%; max-width: 66.66666667%; } .oneid-col-xl-push-8 { left: 66.66666667%; } .oneid-col-xl-pull-8 { right: 66.66666667%; } .oneid-col-xl-offset-8 { margin-left: 66.66666667%; } .oneid-col-xl-order-8 { -webkit-box-ordinal-group: 9; -ms-flex-order: 8; order: 8; } .oneid-col-xl-7 { display: block; -webkit-box-flex: 0; -ms-flex: 0 0 58.33333333%; flex: 0 0 58.33333333%; max-width: 58.33333333%; } .oneid-col-xl-push-7 { left: 58.33333333%; } .oneid-col-xl-pull-7 { right: 58.33333333%; } .oneid-col-xl-offset-7 { margin-left: 58.33333333%; } .oneid-col-xl-order-7 { -webkit-box-ordinal-group: 8; -ms-flex-order: 7; order: 7; } .oneid-col-xl-6 { display: block; -webkit-box-flex: 0; -ms-flex: 0 0 50%; flex: 0 0 50%; max-width: 50%; } .oneid-col-xl-push-6 { left: 50%; } .oneid-col-xl-pull-6 { right: 50%; } .oneid-col-xl-offset-6 { margin-left: 50%; } .oneid-col-xl-order-6 { -webkit-box-ordinal-group: 7; -ms-flex-order: 6; order: 6; } .oneid-col-xl-5 { display: block; -webkit-box-flex: 0; -ms-flex: 0 0 41.66666667%; flex: 0 0 41.66666667%; max-width: 41.66666667%; } .oneid-col-xl-push-5 { left: 41.66666667%; } .oneid-col-xl-pull-5 { right: 41.66666667%; } .oneid-col-xl-offset-5 { margin-left: 41.66666667%; } .oneid-col-xl-order-5 { -webkit-box-ordinal-group: 6; -ms-flex-order: 5; order: 5; } .oneid-col-xl-4 { display: block; -webkit-box-flex: 0; -ms-flex: 0 0 33.33333333%; flex: 0 0 33.33333333%; max-width: 33.33333333%; } .oneid-col-xl-push-4 { left: 33.33333333%; } .oneid-col-xl-pull-4 { right: 33.33333333%; } .oneid-col-xl-offset-4 { margin-left: 33.33333333%; } .oneid-col-xl-order-4 { -webkit-box-ordinal-group: 5; -ms-flex-order: 4; order: 4; } .oneid-col-xl-3 { display: block; -webkit-box-flex: 0; -ms-flex: 0 0 25%; flex: 0 0 25%; max-width: 25%; } .oneid-col-xl-push-3 { left: 25%; } .oneid-col-xl-pull-3 { right: 25%; } .oneid-col-xl-offset-3 { margin-left: 25%; } .oneid-col-xl-order-3 { -webkit-box-ordinal-group: 4; -ms-flex-order: 3; order: 3; } .oneid-col-xl-2 { display: block; -webkit-box-flex: 0; -ms-flex: 0 0 16.66666667%; flex: 0 0 16.66666667%; max-width: 16.66666667%; } .oneid-col-xl-push-2 { left: 16.66666667%; } .oneid-col-xl-pull-2 { right: 16.66666667%; } .oneid-col-xl-offset-2 { margin-left: 16.66666667%; } .oneid-col-xl-order-2 { -webkit-box-ordinal-group: 3; -ms-flex-order: 2; order: 2; } .oneid-col-xl-1 { display: block; -webkit-box-flex: 0; -ms-flex: 0 0 8.33333333%; flex: 0 0 8.33333333%; max-width: 8.33333333%; } .oneid-col-xl-push-1 { left: 8.33333333%; } .oneid-col-xl-pull-1 { right: 8.33333333%; } .oneid-col-xl-offset-1 { margin-left: 8.33333333%; } .oneid-col-xl-order-1 { -webkit-box-ordinal-group: 2; -ms-flex-order: 1; order: 1; } .oneid-col-xl-0 { display: none; } .oneid-col-push-0 { left: auto; } .oneid-col-pull-0 { right: auto; } .oneid-col-xl-push-0 { left: auto; } .oneid-col-xl-pull-0 { right: auto; } .oneid-col-xl-offset-0 { margin-left: 0; } .oneid-col-xl-order-0 { -webkit-box-ordinal-group: 1; -ms-flex-order: 0; order: 0; } } @media (min-width: 1880px) { .oneid-col-xxl-12 { display: block; -webkit-box-flex: 0; -ms-flex: 0 0 100%; flex: 0 0 100%; max-width: 100%; } .oneid-col-xxl-push-12 { left: 100%; } .oneid-col-xxl-pull-12 { right: 100%; } .oneid-col-xxl-offset-12 { margin-left: 100%; } .oneid-col-xxl-order-12 { -webkit-box-ordinal-group: 13; -ms-flex-order: 12; order: 12; } .oneid-col-xxl-11 { display: block; -webkit-box-flex: 0; -ms-flex: 0 0 91.66666667%; flex: 0 0 91.66666667%; max-width: 91.66666667%; } .oneid-col-xxl-push-11 { left: 91.66666667%; } .oneid-col-xxl-pull-11 { right: 91.66666667%; } .oneid-col-xxl-offset-11 { margin-left: 91.66666667%; } .oneid-col-xxl-order-11 { -webkit-box-ordinal-group: 12; -ms-flex-order: 11; order: 11; } .oneid-col-xxl-10 { display: block; -webkit-box-flex: 0; -ms-flex: 0 0 83.33333333%; flex: 0 0 83.33333333%; max-width: 83.33333333%; } .oneid-col-xxl-push-10 { left: 83.33333333%; } .oneid-col-xxl-pull-10 { right: 83.33333333%; } .oneid-col-xxl-offset-10 { margin-left: 83.33333333%; } .oneid-col-xxl-order-10 { -webkit-box-ordinal-group: 11; -ms-flex-order: 10; order: 10; } .oneid-col-xxl-9 { display: block; -webkit-box-flex: 0; -ms-flex: 0 0 75%; flex: 0 0 75%; max-width: 75%; } .oneid-col-xxl-push-9 { left: 75%; } .oneid-col-xxl-pull-9 { right: 75%; } .oneid-col-xxl-offset-9 { margin-left: 75%; } .oneid-col-xxl-order-9 { -webkit-box-ordinal-group: 10; -ms-flex-order: 9; order: 9; } .oneid-col-xxl-8 { display: block; -webkit-box-flex: 0; -ms-flex: 0 0 66.66666667%; flex: 0 0 66.66666667%; max-width: 66.66666667%; } .oneid-col-xxl-push-8 { left: 66.66666667%; } .oneid-col-xxl-pull-8 { right: 66.66666667%; } .oneid-col-xxl-offset-8 { margin-left: 66.66666667%; } .oneid-col-xxl-order-8 { -webkit-box-ordinal-group: 9; -ms-flex-order: 8; order: 8; } .oneid-col-xxl-7 { display: block; -webkit-box-flex: 0; -ms-flex: 0 0 58.33333333%; flex: 0 0 58.33333333%; max-width: 58.33333333%; } .oneid-col-xxl-push-7 { left: 58.33333333%; } .oneid-col-xxl-pull-7 { right: 58.33333333%; } .oneid-col-xxl-offset-7 { margin-left: 58.33333333%; } .oneid-col-xxl-order-7 { -webkit-box-ordinal-group: 8; -ms-flex-order: 7; order: 7; } .oneid-col-xxl-6 { display: block; -webkit-box-flex: 0; -ms-flex: 0 0 50%; flex: 0 0 50%; max-width: 50%; } .oneid-col-xxl-push-6 { left: 50%; } .oneid-col-xxl-pull-6 { right: 50%; } .oneid-col-xxl-offset-6 { margin-left: 50%; } .oneid-col-xxl-order-6 { -webkit-box-ordinal-group: 7; -ms-flex-order: 6; order: 6; } .oneid-col-xxl-5 { display: block; -webkit-box-flex: 0; -ms-flex: 0 0 41.66666667%; flex: 0 0 41.66666667%; max-width: 41.66666667%; } .oneid-col-xxl-push-5 { left: 41.66666667%; } .oneid-col-xxl-pull-5 { right: 41.66666667%; } .oneid-col-xxl-offset-5 { margin-left: 41.66666667%; } .oneid-col-xxl-order-5 { -webkit-box-ordinal-group: 6; -ms-flex-order: 5; order: 5; } .oneid-col-xxl-4 { display: block; -webkit-box-flex: 0; -ms-flex: 0 0 33.33333333%; flex: 0 0 33.33333333%; max-width: 33.33333333%; } .oneid-col-xxl-push-4 { left: 33.33333333%; } .oneid-col-xxl-pull-4 { right: 33.33333333%; } .oneid-col-xxl-offset-4 { margin-left: 33.33333333%; } .oneid-col-xxl-order-4 { -webkit-box-ordinal-group: 5; -ms-flex-order: 4; order: 4; } .oneid-col-xxl-3 { display: block; -webkit-box-flex: 0; -ms-flex: 0 0 25%; flex: 0 0 25%; max-width: 25%; } .oneid-col-xxl-push-3 { left: 25%; } .oneid-col-xxl-pull-3 { right: 25%; } .oneid-col-xxl-offset-3 { margin-left: 25%; } .oneid-col-xxl-order-3 { -webkit-box-ordinal-group: 4; -ms-flex-order: 3; order: 3; } .oneid-col-xxl-2 { display: block; -webkit-box-flex: 0; -ms-flex: 0 0 16.66666667%; flex: 0 0 16.66666667%; max-width: 16.66666667%; } .oneid-col-xxl-push-2 { left: 16.66666667%; } .oneid-col-xxl-pull-2 { right: 16.66666667%; } .oneid-col-xxl-offset-2 { margin-left: 16.66666667%; } .oneid-col-xxl-order-2 { -webkit-box-ordinal-group: 3; -ms-flex-order: 2; order: 2; } .oneid-col-xxl-1 { display: block; -webkit-box-flex: 0; -ms-flex: 0 0 8.33333333%; flex: 0 0 8.33333333%; max-width: 8.33333333%; } .oneid-col-xxl-push-1 { left: 8.33333333%; } .oneid-col-xxl-pull-1 { right: 8.33333333%; } .oneid-col-xxl-offset-1 { margin-left: 8.33333333%; } .oneid-col-xxl-order-1 { -webkit-box-ordinal-group: 2; -ms-flex-order: 1; order: 1; } .oneid-col-xxl-0 { display: none; } .oneid-col-push-0 { left: auto; } .oneid-col-pull-0 { right: auto; } .oneid-col-xxl-push-0 { left: auto; } .oneid-col-xxl-pull-0 { right: auto; } .oneid-col-xxl-offset-0 { margin-left: 0; } .oneid-col-xxl-order-0 { -webkit-box-ordinal-group: 1; -ms-flex-order: 0; order: 0; } } @-webkit-keyframes t-fade-in { from { opacity: 0; } to { opacity: 1; } } @keyframes t-fade-in { from { opacity: 0; } to { opacity: 1; } } @-webkit-keyframes t-fade-out { from { opacity: 1; } to { opacity: 0; } } @keyframes t-fade-out { from { opacity: 1; } to { opacity: 0; } } @-webkit-keyframes t-spin { from { -webkit-transform: rotate(0deg); transform: rotate(0deg); } to { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @keyframes t-spin { from { -webkit-transform: rotate(0deg); transform: rotate(0deg); } to { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } .oneid-icon-loading { -webkit-animation: t-spin 1s linear infinite; animation: t-spin 1s linear infinite; } @-webkit-keyframes t-zoom-out { from { -webkit-transform: scale(0.2); transform: scale(0.2); } to { -webkit-transform: scale(1); transform: scale(1); } } @keyframes t-zoom-out { from { -webkit-transform: scale(0.2); transform: scale(0.2); } to { -webkit-transform: scale(1); transform: scale(1); } } .oneid-loading { font: var(--td-font-body-medium); color: var(--td-text-color-primary); -webkit-box-sizing: border-box; box-sizing: border-box; margin: 0; padding: 0; list-style: none; position: relative; color: var(--td-brand-color); font-size: var(--td-comp-size-l); } .oneid-loading--lock { overflow: hidden; } .oneid-loading.oneid-size-s { font-size: var(--td-comp-size-xxxs); } .oneid-loading.oneid-size-l { font-size: var(--td-comp-size-xxxl); } .oneid-loading__parent--relative { position: relative !important; } .oneid-loading__fullscreen { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 3500; } .oneid-loading--center { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; vertical-align: middle; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .oneid-loading__content { position: absolute; left: 48%; top: 20%; } .oneid-loading--inherit-color { color: inherit; } .oneid-loading__parent { position: relative; } .oneid-loading__overlay { background-color: var(--td-mask-disabled); } /** 仅用于作为包裹元素时 */ .oneid-loading--full { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 3500; } .oneid-loading--hidden { visibility: hidden; } .oneid-loading--visible { visibility: visible; } .oneid-loading__text { width: auto; display: inline-block; vertical-align: middle; font: var(--td-font-body-medium); margin-left: var(--td-comp-margin-xs); } .oneid-loading__gradient { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; vertical-align: middle; } .oneid-loading__gradient-conic { width: 100%; height: 100%; border-radius: var(--td-radius-circle); /* stylelint-disable-next-line color-no-hex */ background: conic-gradient(from 90deg at 50% 50%, #fff 0deg, currentcolor 360deg); /* stylelint-disable-next-line */ -webkit-mask: radial-gradient(transparent calc(50% - 0.5px), #fff 50%); /* stylelint-disable-next-line color-no-hex */ mask: radial-gradient(transparent calc(50% - 0.5px), #fff 50%); } .content-placement-top .oneid-popup[data-popper-placement^=top] .oneid-popup__content { margin-bottom: var(--td-comp-margin-s); } .content-placement-top .oneid-popup[data-popper-placement^=top] .oneid-popup__content--arrow { margin-bottom: var(--td-comp-margin-l); } .content-placement-bottom .oneid-popup[data-popper-placement^=bottom] .oneid-popup__content { margin-top: var(--td-comp-margin-s); } .content-placement-bottom .oneid-popup[data-popper-placement^=bottom] .oneid-popup__content--arrow { margin-top: var(--td-comp-margin-l); } .content-placement-left .oneid-popup[data-popper-placement^=left] .oneid-popup__content { margin-right: var(--td-comp-margin-s); } .content-placement-left .oneid-popup[data-popper-placement^=left] .oneid-popup__content--arrow { margin-right: var(--td-comp-margin-l); } .content-placement-left .oneid-popup[data-popper-placement^=left] .oneid-popup__content--text { max-width: 480px; } .content-placement-right .oneid-popup[data-popper-placement^=right] .oneid-popup__content { margin-left: var(--td-comp-margin-s); } .content-placement-right .oneid-popup[data-popper-placement^=right] .oneid-popup__content--arrow { margin-left: var(--td-comp-margin-l); } .content-placement-right .oneid-popup[data-popper-placement^=right] .oneid-popup__content--text { max-width: 480px; } .oneid-popup { font: var(--td-font-body-medium); -webkit-box-sizing: border-box; box-sizing: border-box; margin: 0; padding: 0; list-style: none; color: var(--td-text-color-primary); display: inline-block; z-index: 5500; } .oneid-popup__content { position: relative; background: var(--td-bg-color-container); -webkit-box-shadow: var(--td-shadow-2), var(--td-shadow-inset-top), var(--td-shadow-inset-right), var(--td-shadow-inset-bottom), var(--td-shadow-inset-left); box-shadow: var(--td-shadow-2), var(--td-shadow-inset-top), var(--td-shadow-inset-right), var(--td-shadow-inset-bottom), var(--td-shadow-inset-left); border-radius: var(--td-radius-medium); padding: var(--td-comp-paddingTB-xs) var(--td-comp-paddingLR-s); font-size: var(--td-font-size-body-medium); line-height: var(--td-line-height-body-medium); -webkit-box-sizing: border-box; box-sizing: border-box; word-break: break-all; } .oneid-popup__arrow { position: absolute; z-index: 1; width: 8px; height: 8px; } .oneid-popup__arrow::before { position: absolute; content: ""; width: 8px; height: 8px; -webkit-transform: rotate(45deg); transform: rotate(45deg); background: var(--td-bg-color-container); } .oneid-popup[data-popper-placement^=top] .oneid-popup__content { margin-bottom: var(--td-comp-margin-s); } .oneid-popup[data-popper-placement^=top] .oneid-popup__content--arrow { margin-bottom: var(--td-comp-margin-l); } .oneid-popup[data-popper-placement^=bottom] .oneid-popup__content { margin-top: var(--td-comp-margin-s); } .oneid-popup[data-popper-placement^=bottom] .oneid-popup__content--arrow { margin-top: var(--td-comp-margin-l); } .oneid-popup[data-popper-placement^=left] .oneid-popup__content { margin-right: var(--td-comp-margin-s); } .oneid-popup[data-popper-placement^=left] .oneid-popup__content--arrow { margin-right: var(--td-comp-margin-l); } .oneid-popup[data-popper-placement^=left] .oneid-popup__content--text { max-width: 480px; } .oneid-popup[data-popper-placement^=right] .oneid-popup__content { margin-left: var(--td-comp-margin-s); } .oneid-popup[data-popper-placement^=right] .oneid-popup__content--arrow { margin-left: var(--td-comp-margin-l); } .oneid-popup[data-popper-placement^=right] .oneid-popup__content--text { max-width: 480px; } .oneid-popup[data-popper-placement^=top] .oneid-popup__arrow::before { border-top-left-radius: 100%; -webkit-box-shadow: var(--td-shadow-inset-left), var(--td-shadow-inset-bottom); box-shadow: var(--td-shadow-inset-left), var(--td-shadow-inset-bottom); } .oneid-popup[data-popper-placement=top-start] .oneid-popup__arrow { left: 8px; } .oneid-popup[data-popper-placement=top] .oneid-popup__arrow { left: 50%; margin-left: -4px; } .oneid-popup[data-popper-placement=top-end] .oneid-popup__arrow { left: calc(100% - 16px); } .oneid-popup[data-popper-placement^=bottom] .oneid-popup__arrow { top: -4px; } .oneid-popup[data-popper-placement^=bottom] .oneid-popup__arrow::before { border-bottom-right-radius: 100%; -webkit-box-shadow: var(--td-shadow-inset-top), var(--td-shadow-inset-right); box-shadow: var(--td-shadow-inset-top), var(--td-shadow-inset-right); } .oneid-popup[data-popper-placement=bottom-start] .oneid-popup__arrow { left: 8px; } .oneid-popup[data-popper-placement=bottom] .oneid-popup__arrow { left: 50%; margin-left: -4px; } .oneid-popup[data-popper-placement=bottom-end] .oneid-popup__arrow { left: calc(100% - 16px); } .oneid-popup[data-popper-placement^=left] .oneid-popup__arrow { right: -4px; } .oneid-popup[data-popper-placement^=left] .oneid-popup__arrow::before { -webkit-box-shadow: var(--td-shadow-inset-left), var(--td-shadow-inset-top); box-shadow: var(--td-shadow-inset-left), var(--td-shadow-inset-top); } .oneid-popup[data-popper-placement=left-start] .oneid-popup__arrow { top: 8px; } .oneid-popup[data-popper-placement=left] .oneid-popup__arrow { top: 50%; margin-top: -4px; } .oneid-popup[data-popper-placement=left-end] .oneid-popup__arrow { top: calc(100% - 16px); } .oneid-popup[data-popper-placement^=right] .oneid-popup__arrow { left: -4px; } .oneid-popup[data-popper-placement^=right] .oneid-popup__arrow::before { -webkit-box-shadow: var(--td-shadow-inset-right), var(--td-shadow-inset-bottom); box-shadow: var(--td-shadow-inset-right), var(--td-shadow-inset-bottom); } .oneid-popup[data-popper-placement=right-start] .oneid-popup__arrow { top: 8px; } .oneid-popup[data-popper-placement=right] .oneid-popup__arrow { top: 50%; margin-top: -4px; } .oneid-popup[data-popper-placement=right-end] .oneid-popup__arrow { top: calc(100% - 16px); } .oneid-popup--animation-enter, .oneid-popup--animation-enter-from, .oneid-popup--animation-exiting, .oneid-popup--animation-leave-to { opacity: 0; visibility: hidden; } .oneid-popup--animation-enter-to, .oneid-popup--animation-entering, .oneid-popup--animation-leave-from, .oneid-popup--animation-leave { opacity: 1; visibility: visible; -webkit-transform: none; transform: none; } .oneid-popup--animation-enter-active { -webkit-transition: opacity 0.2s linear; transition: opacity 0.2s linear; } .oneid-popup--animation-leave-active { -webkit-transition: opacity 0.2s cubic-bezier(0, 0, 0.15, 1), visibility 0.2s cubic-bezier(0.82, 0, 1, 0.9); transition: opacity 0.2s cubic-bezier(0, 0, 0.15, 1), visibility 0.2s cubic-bezier(0.82, 0, 1, 0.9); } .oneid-popup--animation-expand-enter-active[data-popper-placement^=top] { -webkit-animation: t-popup-animation-expand-in-top 0.2s cubic-bezier(0.38, 0, 0.24, 1), t-fade-in 0.2s linear; animation: t-popup-animation-expand-in-top 0.2s cubic-bezier(0.38, 0, 0.24, 1), t-fade-in 0.2s linear; } .oneid-popup--animation-expand-leave-active[data-popper-placement^=top] { -webkit-animation: t-popup-animation-expand-out-top 0.2s cubic-bezier(0.38, 0, 0.24, 1), t-fade-out 0.2s cubic-bezier(0, 0, 0.15, 1); animation: t-popup-animation-expand-out-top 0.2s cubic-bezier(0.38, 0, 0.24, 1), t-fade-out 0.2s cubic-bezier(0, 0, 0.15, 1); } @-webkit-keyframes t-popup-animation-expand-in-top { 0% { -webkit-clip-path: polygon(-20% 120%, 120% 120%, 120% 120%, -20% 120%); clip-path: polygon(-20% 120%, 120% 120%, 120% 120%, -20% 120%); } 100% { -webkit-clip-path: polygon(-20% 0, 120% 0, 120% 120%, -20% 120%); clip-path: polygon(-20% 0, 120% 0, 120% 120%, -20% 120%); } } @keyframes t-popup-animation-expand-in-top { 0% { -webkit-clip-path: polygon(-20% 120%, 120% 120%, 120% 120%, -20% 120%); clip-path: polygon(-20% 120%, 120% 120%, 120% 120%, -20% 120%); } 100% { -webkit-clip-path: polygon(-20% 0, 120% 0, 120% 120%, -20% 120%); clip-path: polygon(-20% 0, 120% 0, 120% 120%, -20% 120%); } } @-webkit-keyframes t-popup-animation-expand-out-top { 0% { -webkit-clip-path: polygon(-20% 0, 120% 0, 120% 120%, -20% 120%); clip-path: polygon(-20% 0, 120% 0, 120% 120%, -20% 120%); } 100% { -webkit-clip-path: polygon(-20% 120%, 120% 120%, 120% 120%, -20% 120%); clip-path: polygon(-20% 120%, 120% 120%, 120% 120%, -20% 120%); } } @keyframes t-popup-animation-expand-out-top { 0% { -webkit-clip-path: polygon(-20% 0, 120% 0, 120% 120%, -20% 120%); clip-path: polygon(-20% 0, 120% 0, 120% 120%, -20% 120%); } 100% { -webkit-clip-path: polygon(-20% 120%, 120% 120%, 120% 120%, -20% 120%); clip-path: polygon(-20% 120%, 120% 120%, 120% 120%, -20% 120%); } } .oneid-popup--animation-expand-enter-active[data-popper-placement^=bottom] { -webkit-animation: t-popup-animation-expand-in-bottom 0.2s cubic-bezier(0.38, 0, 0.24, 1), t-fade-in 0.2s linear; animation: t-popup-animation-expand-in-bottom 0.2s cubic-bezier(0.38, 0, 0.24, 1), t-fade-in 0.2s linear; } .oneid-popup--animation-expand-leave-active[data-popper-placement^=bottom] { -webkit-animation: t-popup-animation-expand-out-bottom 0.2s cubic-bezier(0.38, 0, 0.24, 1), t-fade-out 0.2s cubic-bezier(0, 0, 0.15, 1); animation: t-popup-animation-expand-out-bottom 0.2s cubic-bezier(0.38, 0, 0.24, 1), t-fade-out 0.2s cubic-bezier(0, 0, 0.15, 1); } @-webkit-keyframes t-popup-animation-expand-in-bottom { 0% { -webkit-clip-path: polygon(-20% 0, 120% 0, 120% 0, -20% 0); clip-path: polygon(-20% 0, 120% 0, 120% 0, -20% 0); } 100% { -webkit-clip-path: polygon(-20% 0, 120% 0, 120% 120%, -20% 120%); clip-path: polygon(-20% 0, 120% 0, 120% 120%, -20% 120%); } } @keyframes t-popup-animation-expand-in-bottom { 0% { -webkit-clip-path: polygon(-20% 0, 120% 0, 120% 0, -20% 0); clip-path: polygon(-20% 0, 120% 0, 120% 0, -20% 0); } 100% { -webkit-clip-path: polygon(-20% 0, 120% 0, 120% 120%, -20% 120%); clip-path: polygon(-20% 0, 120% 0, 120% 120%, -20% 120%); } } @-webkit-keyframes t-popup-animation-expand-out-bottom { 0% { -webkit-clip-path: polygon(-20% 0, 120% 0, 120% 120%, -20% 120%); clip-path: polygon(-20% 0, 120% 0, 120% 120%, -20% 120%); } 100% { -webkit-clip-path: polygon(-20% 0, 120% 0, 120% 0, -20% 0); clip-path: polygon(-20% 0, 120% 0, 120% 0, -20% 0); } } @keyframes t-popup-animation-expand-out-bottom { 0% { -webkit-clip-path: polygon(-20% 0, 120% 0, 120% 120%, -20% 120%); clip-path: polygon(-20% 0, 120% 0, 120% 120%, -20% 120%); } 100% { -webkit-clip-path: polygon(-20% 0, 120% 0, 120% 0, -20% 0); clip-path: polygon(-20% 0, 120% 0, 120% 0, -20% 0); } } .oneid-button { font: var(--td-font-body-medium); color: var(--td-text-color-primary); -webkit-box-sizing: border-box; box-sizing: border-box; margin: 0; padding: 0; list-style: none; position: relative; z-index: 0; overflow: hidden; font-size: var(--td-font-body-medium); outline: none; border-width: 1px; border-style: solid; border-color: transparent; background-color: transparent; cursor: pointer; display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; vertical-align: middle; white-space: nowrap; border-radius: var(--td-radius-default); -webkit-transition: all 0.2s linear; transition: all 0.2s linear; -ms-touch-action: manipulation; touch-action: manipulation; text-decoration: none; } .oneid-button .oneid-button__text, .oneid-button .oneid-icon { position: relative; z-index: 1; display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; } .oneid-button .oneid-icon { font-size: var(--td-font-size-body-large); } .oneid-button .oneid-loading { font-size: var(--td-font-size-body-large); } .oneid-button .oneid-icon + .oneid-button__text:not(:empty) { margin-left: 8px; } .oneid-button .oneid-loading + .oneid-button__text:not(:empty) { margin-left: 8px; } .oneid-button .oneid-button__suffix:not(:empty) { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; margin-left: 8px; } .oneid-button--variant-base { color: var(--td-text-color-anti); height: var(--td-comp-size-m); font: var(--td-font-body-medium); padding-left: calc(var(--td-comp-paddingLR-l) - 1px); padding-right: calc(var(--td-comp-paddingLR-l) - 1px); background-color: var(--td-bg-color-component); border-color: var(--td-bg-color-component); color: var(--td-text-color-primary); } .oneid-button--variant-base .oneid-icon, .oneid-button--variant-base .oneid-loading { font-size: var(--td-font-size-body-large); } .oneid-button--variant-base:hover, .oneid-button--variant-base:focus-visible { background-color: var(--td-bg-color-component-hover); } .oneid-button--variant-base.oneid-is-loading { background-color: var(--td-bg-color-component); } .oneid-button--variant-base.oneid-is-disabled { background-color: var(--td-bg-color-component-disabled); } .oneid-button--variant-base:hover, .oneid-button--variant-base:focus-visible { border-color: var(--td-bg-color-component-hover); } .oneid-button--variant-base.oneid-is-loading { border-color: var(--td-bg-color-component); } .oneid-button--variant-base.oneid-is-disabled { border-color: var(--td-bg-color-component-disabled); } .oneid-button--variant-base:hover, .oneid-button--variant-base:focus-visible { color: var(--td-text-color-primary); } .oneid-button--variant-base.oneid-is-loading { color: var(--td-text-color-primary); } .oneid-button--variant-base.oneid-is-disabled { color: var(--td-text-color-disabled); } .oneid-button--variant-base.oneid-button--theme-primary { color: var(--td-text-color-anti); background-color: var(--td-brand-color); border-color: var(--td-brand-color); } .oneid-button--variant-base.oneid-button--theme-primary:hover, .oneid-button--variant-base.oneid-button--theme-primary:focus-visible { background-color: var(--td-brand-color-hover); } .oneid-button--variant-base.oneid-button--theme-primary.oneid-is-loading { background-color: var(--td-brand-color); } .oneid-button--variant-base.oneid-button--theme-primary.oneid-is-disabled { background-color: var(--td-brand-color-disabled); } .oneid-button--variant-base.oneid-button--theme-primary:hover, .oneid-button--variant-base.oneid-button--theme-primary:focus-visible { border-color: var(--td-brand-color-hover); } .oneid-button--variant-base.oneid-button--theme-primary.oneid-is-loading { border-color: var(--td-brand-color); } .oneid-button--variant-base.oneid-button--theme-primary.oneid-is-disabled { border-color: var(--td-brand-color-disabled); } .oneid-button--variant-base.oneid-button--theme-success { color: var(--td-text-color-anti); background-color: var(--td-success-color); border-color: var(--td-success-color); } .oneid-button--variant-base.oneid-button--theme-success:hover, .oneid-button--variant-base.oneid-button--theme-success:focus-visible { background-color: var(--td-success-color-hover); } .oneid-button--variant-base.oneid-button--theme-success.oneid-is-loading { background-color: var(--td-success-color); } .oneid-button--variant-base.oneid-button--theme-success.oneid-is-disabled { background-color: var(--td-success-color-disabled); } .oneid-button--variant-base.oneid-button--theme-success:hover, .oneid-button--variant-base.oneid-button--theme-success:focus-visible { border-color: var(--td-success-color-hover); } .oneid-button--variant-base.oneid-button--theme-success.oneid-is-loading { border-color: var(--td-success-color); } .oneid-button--variant-base.oneid-button--theme-success.oneid-is-disabled { border-color: var(--td-success-color-disabled); } .oneid-button--variant-base.oneid-button--theme-warning { color: var(--td-text-color-anti); background-color: var(--td-warning-color); border-color: var(--td-warning-color); } .oneid-button--variant-base.oneid-button--theme-warning:hover, .oneid-button--variant-base.oneid-button--theme-warning:focus-visible { background-color: var(--td-warning-color-hover); } .oneid-button--variant-base.oneid-button--theme-warning.oneid-is-loading { background-color: var(--td-warning-color); } .oneid-button--variant-base.oneid-button--theme-warning.oneid-is-disabled { background-color: var(--td-warning-color-disabled); } .oneid-button--variant-base.oneid-button--theme-warning:hover, .oneid-button--variant-base.oneid-button--theme-warning:focus-visible { border-color: var(--td-warning-color-hover); } .oneid-button--variant-base.oneid-button--theme-warning.oneid-is-loading { border-color: var(--td-warning-color); } .oneid-button--variant-base.oneid-button--theme-warning.oneid-is-disabled { border-color: var(--td-warning-color-disabled); } .oneid-button--variant-base.oneid-button--theme-danger { color: var(--td-text-color-anti); background-color: var(--td-error-color); border-color: var(--td-error-color); } .oneid-button--variant-base.oneid-button--theme-danger:hover, .oneid-button--variant-base.oneid-button--theme-danger:focus-visible { background-color: var(--td-error-color-hover); } .oneid-button--variant-base.oneid-button--theme-danger.oneid-is-loading { background-color: var(--td-error-color); } .oneid-button--variant-base.oneid-button--theme-danger.oneid-is-disabled { background-color: var(--td-error-color-disabled); } .oneid-button--variant-base.oneid-button--theme-danger:hover, .oneid-button--variant-base.oneid-button--theme-danger:focus-visible { border-color: var(--td-error-color-hover); } .oneid-button--variant-base.oneid-button--theme-danger.oneid-is-loading { border-color: var(--td-error-color); } .oneid-button--variant-base.oneid-button--theme-danger.oneid-is-disabled { border-color: var(--td-error-color-disabled); } .oneid-button--variant-base.oneid-button--ghost { background-color: transparent; color: var(--td-text-color-anti); border-color: var(--td-text-color-anti); } .oneid-button--variant-base.oneid-button--ghost:hover, .oneid-button--variant-base.oneid-button--ghost:focus-visible { background-color: transparent; } .oneid-button--variant-base.oneid-button--ghost:active { background-color: transparent; } .oneid-button--variant-base.oneid-button--ghost.oneid-is-loading { background-color: transparent; } .oneid-button--variant-base.oneid-button--ghost.oneid-is-disabled { background-color: rgba(255, 255, 255, 0.22); background-color: transparent; } .oneid-button--variant-base.oneid-button--ghost:hover, .oneid-button--variant-base.oneid-button--ghost:focus-visible { color: var(--td-brand-color-hover); } .oneid-button--variant-base.oneid-button--ghost:active { color: var(--td-brand-color-active); } .oneid-button--variant-base.oneid-button--ghost.oneid-is-loading { color: var(--td-text-color-anti); } .oneid-button--variant-base.oneid-button--ghost.oneid-is-disabled { color: rgba(255, 255, 255, 0.22); background-color: transparent; } .oneid-button--variant-base.oneid-button--ghost:hover, .oneid-button--variant-base.oneid-button--ghost:focus-visible { border-color: var(--td-brand-color-hover); } .oneid-button--variant-base.oneid-button--ghost:active { border-color: var(--td-brand-color-active); } .oneid-button--variant-base.oneid-button--ghost.oneid-is-loading { border-color: var(--td-text-color-anti); } .oneid-button--variant-base.oneid-button--ghost.oneid-is-disabled { border-color: rgba(255, 255, 255, 0.22); background-color: transparent; } .oneid-button--variant-base.oneid-button--ghost.oneid-button--theme-primary { color: var(--td-brand-color); border-color: var(--td-brand-color); } .oneid-button--variant-base.oneid-button--ghost.oneid-button--theme-primary:hover, .oneid-button--variant-base.oneid-button--ghost.oneid-button--theme-primary:focus-visible { color: var(--td-brand-color-hover); } .oneid-button--variant-base.oneid-button--ghost.oneid-button--theme-primary:active { color: var(--td-brand-color-active); } .oneid-button--variant-base.oneid-button--ghost.oneid-button--theme-primary.oneid-is-loading { color: var(--td-brand-color); } .oneid-button--variant-base.oneid-button--ghost.oneid-button--theme-primary.oneid-is-disabled { color: rgba(255, 255, 255, 0.22); background-color: transparent; } .oneid-button--variant-base.oneid-button--ghost.oneid-button--theme-primary:hover, .oneid-button--variant-base.oneid-button--ghost.oneid-button--theme-primary:focus-visible { border-color: var(--td-brand-color-hover); } .oneid-button--variant-base.oneid-button--ghost.oneid-button--theme-primary:active { border-color: var(--td-brand-color-active); } .oneid-button--variant-base.oneid-button--ghost.oneid-button--theme-primary.oneid-is-loading { border-color: var(--td-brand-color); } .oneid-button--variant-base.oneid-button--ghost.oneid-button--theme-primary.oneid-is-disabled { border-color: rgba(255, 255, 255, 0.22); background-color: transparent; } .oneid-button--variant-base.oneid-button--ghost.oneid-button--theme-success { color: var(--td-success-color); border-color: var(--td-success-color); } .oneid-button--variant-base.oneid-button--ghost.oneid-button--theme-success:hover, .oneid-button--variant-base.oneid-button--ghost.oneid-button--theme-success:focus-visible { color: var(--td-success-color-hover); } .oneid-button--variant-base.oneid-button--ghost.oneid-button--theme-success:active { color: var(--td-success-color-active); } .oneid-button--variant-base.oneid-button--ghost.oneid-button--theme-success.oneid-is-loading { color: var(--td-success-color); } .oneid-button--variant-base.oneid-button--ghost.oneid-button--theme-success.oneid-is-disabled { color: rgba(255, 255, 255, 0.22); background-color: transparent; } .oneid-button--variant-base.oneid-button--ghost.oneid-button--theme-success:hover, .oneid-button--variant-base.oneid-button--ghost.oneid-button--theme-success:focus-visible { border-color: var(--td-success-color-hover); } .oneid-button--variant-base.oneid-button--ghost.oneid-button--theme-success:active { border-color: var(--td-success-color-active); } .oneid-button--variant-base.oneid-button--ghost.oneid-button--theme-success.oneid-is-loading { border-color: var(--td-success-color); } .oneid-button--variant-base.oneid-button--ghost.oneid-button--theme-success.oneid-is-disabled { border-color: rgba(255, 255, 255, 0.22); background-color: transparent; } .oneid-button--variant-base.oneid-button--ghost.oneid-button--theme-warning { color: var(--td-warning-color); border-color: var(--td-warning-color); } .oneid-button--variant-base.oneid-button--ghost.oneid-button--theme-warning:hover, .oneid-button--variant-base.oneid-button--ghost.oneid-button--theme-warning:focus-visible { color: var(--td-warning-color-hover); } .oneid-button--variant-base.oneid-button--ghost.oneid-button--theme-warning:active { color: var(--td-warning-color-active); } .oneid-button--variant-base.oneid-button--ghost.oneid-button--theme-warning.oneid-is-loading { color: var(--td-warning-color); } .oneid-button--variant-base.oneid-button--ghost.oneid-button--theme-warning.oneid-is-disabled { color: rgba(255, 255, 255, 0.22); background-color: transparent; } .oneid-button--variant-base.oneid-button--ghost.oneid-button--theme-warning:hover, .oneid-button--variant-base.oneid-button--ghost.oneid-button--theme-warning:focus-visible { border-color: var(--td-warning-color-hover); } .oneid-button--variant-base.oneid-button--ghost.oneid-button--theme-warning:active { border-color: var(--td-warning-color-active); } .oneid-button--variant-base.oneid-button--ghost.oneid-button--theme-warning.oneid-is-loading { border-color: var(--td-warning-color); } .oneid-button--variant-base.oneid-button--ghost.oneid-button--theme-warning.oneid-is-disabled { border-color: rgba(255, 255, 255, 0.22); background-color: transparent; } .oneid-button--variant-base.oneid-button--ghost.oneid-button--theme-danger { color: var(--td-error-color); border-color: var(--td-error-color); } .oneid-button--variant-base.oneid-button--ghost.oneid-button--theme-danger:hover, .oneid-button--variant-base.oneid-button--ghost.oneid-button--theme-danger:focus-visible { color: var(--td-error-color-hover); } .oneid-button--variant-base.oneid-button--ghost.oneid-button--theme-danger:active { color: var(--td-error-color-active); } .oneid-button--variant-base.oneid-button--ghost.oneid-button--theme-danger.oneid-is-loading { color: var(--td-error-color); } .oneid-button--variant-base.oneid-button--ghost.oneid-button--theme-danger.oneid-is-disabled { color: rgba(255, 255, 255, 0.22); background-color: transparent; } .oneid-button--variant-base.oneid-button--ghost.oneid-button--theme-danger:hover, .oneid-button--variant-base.oneid-button--ghost.oneid-button--theme-danger:focus-visible { border-color: var(--td-error-color-hover); } .oneid-button--variant-base.oneid-button--ghost.oneid-button--theme-danger:active { border-color: var(--td-error-color-active); } .oneid-button--variant-base.oneid-button--ghost.oneid-button--theme-danger.oneid-is-loading { border-color: var(--td-error-color); } .oneid-button--variant-base.oneid-button--ghost.oneid-button--theme-danger.oneid-is-disabled { border-color: rgba(255, 255, 255, 0.22); background-color: transparent; } .oneid-button--variant-outline { height: var(--td-comp-size-m); font: var(--td-font-body-medium); padding-left: calc(var(--td-comp-paddingLR-l) - 1px); padding-right: calc(var(--td-comp-paddingLR-l) - 1px); color: var(--td-text-color-primary); background-color: var(--td-bg-color-specialcomponent); border-color: var(--td-border-level-2-color); } .oneid-button--variant-outline .oneid-icon, .oneid-button--variant-outline .oneid-loading { font-size: var(--td-font-size-body-large); } .oneid-button--variant-outline:hover, .oneid-button--variant-outline:focus-visible { color: var(--td-brand-color-hover); } .oneid-button--variant-outline.oneid-is-loading { color: var(--td-text-color-primary); } .oneid-button--variant-outline.oneid-is-disabled { color: var(--td-text-color-disabled); } .oneid-button--variant-outline:hover, .oneid-button--variant-outline:focus-visible { background-color: var(--td-bg-color-specialcomponent); } .oneid-button--variant-outline.oneid-is-loading { background-color: var(--td-bg-color-specialcomponent); } .oneid-button--variant-outline.oneid-is-disabled { background-color: var(--td-bg-color-component-disabled); } .oneid-button--variant-outline:hover, .oneid-button--variant-outline:focus-visible { border-color: var(--td-brand-color-hover); } .oneid-button--variant-outline.oneid-is-loading { border-color: var(--td-border-level-2-color); } .oneid-button--variant-outline.oneid-is-disabled { border-color: var(--td-border-level-2-color); } .oneid-button--variant-outline.oneid-button--theme-primary { color: var(--td-brand-color); border-color: var(--td-brand-color); } .oneid-button--variant-outline.oneid-button--theme-primary:hover, .oneid-button--variant-outline.oneid-button--theme-primary:focus-visible { color: var(--td-brand-color-hover); } .oneid-button--variant-outline.oneid-button--theme-primary.oneid-is-loading { color: var(--td-brand-color); } .oneid-button--variant-outline.oneid-button--theme-primary.oneid-is-disabled { color: var(--td-brand-color-disabled); } .oneid-button--variant-outline.oneid-button--theme-primary:hover, .oneid-button--variant-outline.oneid-button--theme-primary:focus-visible { border-color: var(--td-brand-color-hover); } .oneid-button--variant-outline.oneid-button--theme-primary.oneid-is-loading { border-color: var(--td-brand-color); } .oneid-button--variant-outline.oneid-button--theme-primary.oneid-is-disabled { border-color: var(--td-brand-color-disabled); } .oneid-button--variant-outline.oneid-button--theme-success { color: var(--td-success-color); border-color: var(--td-success-color); } .oneid-button--variant-outline.oneid-button--theme-success:hover, .oneid-button--variant-outline.oneid-button--theme-success:focus-visible { color: var(--td-success-color-hover); } .oneid-button--variant-outline.oneid-button--theme-success.oneid-is-loading { color: var(--td-success-color); } .oneid-button--variant-outline.oneid-button--theme-success.oneid-is-disabled { color: var(--td-success-color-disabled); } .oneid-button--variant-outline.oneid-button--theme-success:hover, .oneid-button--variant-outline.oneid-button--theme-success:focus-visible { border-color: var(--td-success-color-hover); } .oneid-button--variant-outline.oneid-button--theme-success.oneid-is-loading { border-color: var(--td-success-color); } .oneid-button--variant-outline.oneid-button--theme-success.oneid-is-disabled { border-color: var(--td-success-color-disabled); } .oneid-button--variant-outline.oneid-button--theme-warning { color: var(--td-warning-color); border-color: var(--td-warning-color); } .oneid-button--variant-outline.oneid-button--theme-warning:hover, .oneid-button--variant-outline.oneid-button--theme-warning:focus-visible { color: var(--td-warning-color-hover); } .oneid-button--variant-outline.oneid-button--theme-warning.oneid-is-loading { color: var(--td-warning-color); } .oneid-button--variant-outline.oneid-button--theme-warning.oneid-is-disabled { color: var(--td-warning-color-disabled); } .oneid-button--variant-outline.oneid-button--theme-warning:hover, .oneid-button--variant-outline.oneid-button--theme-warning:focus-visible { border-color: var(--td-warning-color-hover); } .oneid-button--variant-outline.oneid-button--theme-warning.oneid-is-loading { border-color: var(--td-warning-color); } .oneid-button--variant-outline.oneid-button--theme-warning.oneid-is-disabled { border-color: var(--td-warning-color-disabled); } .oneid-button--variant-outline.oneid-button--theme-danger { color: var(--td-error-color); border-color: var(--td-error-color); } .oneid-button--variant-outline.oneid-button--theme-danger:hover, .oneid-button--variant-outline.oneid-button--theme-danger:focus-visible { color: var(--td-error-color-hover); } .oneid-button--variant-outline.oneid-button--theme-danger.oneid-is-loading { color: var(--td-error-color); } .oneid-button--variant-outline.oneid-button--theme-danger.oneid-is-disabled { color: var(--td-error-color-disabled); } .oneid-button--variant-outline.oneid-button--theme-danger:hover, .oneid-button--variant-outline.oneid-button--theme-danger:focus-visible { border-color: var(--td-error-color-hover); } .oneid-button--variant-outline.oneid-button--theme-danger.oneid-is-loading { border-color: var(--td-error-color); } .oneid-button--variant-outline.oneid-button--theme-danger.oneid-is-disabled { border-color: var(--td-error-color-disabled); } .oneid-button--variant-outline.oneid-button--ghost { background-color: transparent; color: var(--td-text-color-anti); border-color: var(--td-text-color-anti); } .oneid-button--variant-outline.oneid-button--ghost:hover, .oneid-button--variant-outline.oneid-button--ghost:focus-visible { background-color: transparent; } .oneid-button--variant-outline.oneid-button--ghost:active { background-color: transparent; } .oneid-button--variant-outline.oneid-button--ghost.oneid-is-loading { background-color: transparent; } .oneid-button--variant-outline.oneid-button--ghost.oneid-is-disabled { background-color: rgba(255, 255, 255, 0.22); background-color: transparent; } .oneid-button--variant-outline.oneid-button--ghost:hover, .oneid-button--variant-outline.oneid-button--ghost:focus-visible { color: var(--td-brand-color-hover); } .oneid-button--variant-outline.oneid-button--ghost:active { color: var(--td-brand-color-active); } .oneid-button--variant-outline.oneid-button--ghost.oneid-is-loading { color: var(--td-text-color-anti); } .oneid-button--variant-outline.oneid-button--ghost.oneid-is-disabled { color: rgba(255, 255, 255, 0.22); background-color: transparent; } .oneid-button--variant-outline.oneid-button--ghost:hover, .oneid-button--variant-outline.oneid-button--ghost:focus-visible { border-color: var(--td-brand-color-hover); } .oneid-button--variant-outline.oneid-button--ghost:active { border-color: var(--td-brand-color-active); } .oneid-button--variant-outline.oneid-button--ghost.oneid-is-loading { border-color: var(--td-text-color-anti); } .oneid-button--variant-outline.oneid-button--ghost.oneid-is-disabled { border-color: rgba(255, 255, 255, 0.22); background-color: transparent; } .oneid-button--variant-outline.oneid-button--ghost.oneid-button--theme-primary { color: var(--td-brand-color); border-color: var(--td-brand-color); } .oneid-button--variant-outline.oneid-button--ghost.oneid-button--theme-primary:hover, .oneid-button--variant-outline.oneid-button--ghost.oneid-button--theme-primary:focus-visible { color: var(--td-brand-color-hover); } .oneid-button--variant-outline.oneid-button--ghost.oneid-button--theme-primary:active { color: var(--td-brand-color-active); } .oneid-button--variant-outline.oneid-button--ghost.oneid-button--theme-primary.oneid-is-loading { color: var(--td-brand-color); } .oneid-button--variant-outline.oneid-button--ghost.oneid-button--theme-primary.oneid-is-disabled { color: rgba(255, 255, 255, 0.22); background-color: transparent; } .oneid-button--variant-outline.oneid-button--ghost.oneid-button--theme-primary:hover, .oneid-button--variant-outline.oneid-button--ghost.oneid-button--theme-primary:focus-visible { border-color: var(--td-brand-color-hover); } .oneid-button--variant-outline.oneid-button--ghost.oneid-button--theme-primary:active { border-color: var(--td-brand-color-active); } .oneid-button--variant-outline.oneid-button--ghost.oneid-button--theme-primary.oneid-is-loading { border-color: var(--td-brand-color); } .oneid-button--variant-outline.oneid-button--ghost.oneid-button--theme-primary.oneid-is-disabled { border-color: rgba(255, 255, 255, 0.22); background-color: transparent; } .oneid-button--variant-outline.oneid-button--ghost.oneid-button--theme-success { color: var(--td-success-color); border-color: var(--td-success-color); } .oneid-button--variant-outline.oneid-button--ghost.oneid-button--theme-success:hover, .oneid-button--variant-outline.oneid-button--ghost.oneid-button--theme-success:focus-visible { color: var(--td-success-color-hover); } .oneid-button--variant-outline.oneid-button--ghost.oneid-button--theme-success:active { color: var(--td-success-color-active); } .oneid-button--variant-outline.oneid-button--ghost.oneid-button--theme-success.oneid-is-loading { color: var(--td-success-color); } .oneid-button--variant-outline.oneid-button--ghost.oneid-button--theme-success.oneid-is-disabled { color: rgba(255, 255, 255, 0.22); background-color: transparent; } .oneid-button--variant-outline.oneid-button--ghost.oneid-button--theme-success:hover, .oneid-button--variant-outline.oneid-button--ghost.oneid-button--theme-success:focus-visible { border-color: var(--td-success-color-hover); } .oneid-button--variant-outline.oneid-button--ghost.oneid-button--theme-success:active { border-color: var(--td-success-color-active); } .oneid-button--variant-outline.oneid-button--ghost.oneid-button--theme-success.oneid-is-loading { border-color: var(--td-success-color); } .oneid-button--variant-outline.oneid-button--ghost.oneid-button--theme-success.oneid-is-disabled { border-color: rgba(255, 255, 255, 0.22); background-color: transparent; } .oneid-button--variant-outline.oneid-button--ghost.oneid-button--theme-warning { color: var(--td-warning-color); border-color: var(--td-warning-color); } .oneid-button--variant-outline.oneid-button--ghost.oneid-button--theme-warning:hover, .oneid-button--variant-outline.oneid-button--ghost.oneid-button--theme-warning:focus-visible { color: var(--td-warning-color-hover); } .oneid-button--variant-outline.oneid-button--ghost.oneid-button--theme-warning:active { color: var(--td-warning-color-active); } .oneid-button--variant-outline.oneid-button--ghost.oneid-button--theme-warning.oneid-is-loading { color: var(--td-warning-color); } .oneid-button--variant-outline.oneid-button--ghost.oneid-button--theme-warning.oneid-is-disabled { color: rgba(255, 255, 255, 0.22); background-color: transparent; } .oneid-button--variant-outline.oneid-button--ghost.oneid-button--theme-warning:hover, .oneid-button--variant-outline.oneid-button--ghost.oneid-button--theme-warning:focus-visible { border-color: var(--td-warning-color-hover); } .oneid-button--variant-outline.oneid-button--ghost.oneid-button--theme-warning:active { border-color: var(--td-warning-color-active); } .oneid-button--variant-outline.oneid-button--ghost.oneid-button--theme-warning.oneid-is-loading { border-color: var(--td-warning-color); } .oneid-button--variant-outline.oneid-button--ghost.oneid-button--theme-warning.oneid-is-disabled { border-color: rgba(255, 255, 255, 0.22); background-color: transparent; } .oneid-button--variant-outline.oneid-button--ghost.oneid-button--theme-danger { color: var(--td-error-color); border-color: var(--td-error-color); } .oneid-button--variant-outline.oneid-button--ghost.oneid-button--theme-danger:hover, .oneid-button--variant-outline.oneid-button--ghost.oneid-button--theme-danger:focus-visible { color: var(--td-error-color-hover); } .oneid-button--variant-outline.oneid-button--ghost.oneid-button--theme-danger:active { color: var(--td-error-color-active); } .oneid-button--variant-outline.oneid-button--ghost.oneid-button--theme-danger.oneid-is-loading { color: var(--td-error-color); } .oneid-button--variant-outline.oneid-button--ghost.oneid-button--theme-danger.oneid-is-disabled { color: rgba(255, 255, 255, 0.22); background-color: transparent; } .oneid-button--variant-outline.oneid-button--ghost.oneid-button--theme-danger:hover, .oneid-button--variant-outline.oneid-button--ghost.oneid-button--theme-danger:focus-visible { border-color: var(--td-error-color-hover); } .oneid-button--variant-outline.oneid-button--ghost.oneid-button--theme-danger:active { border-color: var(--td-error-color-active); } .oneid-button--variant-outline.oneid-button--ghost.oneid-button--theme-danger.oneid-is-loading { border-color: var(--td-error-color); } .oneid-button--variant-outline.oneid-button--ghost.oneid-button--theme-danger.oneid-is-disabled { border-color: rgba(255, 255, 255, 0.22); background-color: transparent; } .oneid-button--variant-dashed { height: var(--td-comp-size-m); font: var(--td-font-body-medium); padding-left: calc(var(--td-comp-paddingLR-l) - 1px); padding-right: calc(var(--td-comp-paddingLR-l) - 1px); color: var(--td-text-color-primary); background-color: var(--td-bg-color-specialcomponent); border-color: var(--td-border-level-2-color); border-style: dashed; } .oneid-button--variant-dashed .oneid-icon, .oneid-button--variant-dashed .oneid-loading { font-size: var(--td-font-size-body-large); } .oneid-button--variant-dashed:hover, .oneid-button--variant-dashed:focus-visible { color: var(--td-brand-color-hover); } .oneid-button--variant-dashed.oneid-is-loading { color: var(--td-text-color-primary); } .oneid-button--variant-dashed.oneid-is-disabled { color: var(--td-text-color-disabled); } .oneid-button--variant-dashed:hover, .oneid-button--variant-dashed:focus-visible { background-color: var(--td-bg-color-specialcomponent); } .oneid-button--variant-dashed.oneid-is-loading { background-color: var(--td-bg-color-specialcomponent); } .oneid-button--variant-dashed.oneid-is-disabled { background-color: var(--td-bg-color-component-disabled); } .oneid-button--variant-dashed:hover, .oneid-button--variant-dashed:focus-visible { border-color: var(--td-brand-color-hover); } .oneid-button--variant-dashed.oneid-is-loading { border-color: var(--td-border-level-2-color); } .oneid-button--variant-dashed.oneid-is-disabled { border-color: var(--td-border-level-2-color); } .oneid-button--variant-dashed.oneid-button--theme-primary { color: var(--td-brand-color); border-color: var(--td-brand-color); } .oneid-button--variant-dashed.oneid-button--theme-primary:hover, .oneid-button--variant-dashed.oneid-button--theme-primary:focus-visible { color: var(--td-brand-color-hover); } .oneid-button--variant-dashed.oneid-button--theme-primary.oneid-is-loading { color: var(--td-brand-color); } .oneid-button--variant-dashed.oneid-button--theme-primary.oneid-is-disabled { color: var(--td-brand-color-disabled); } .oneid-button--variant-dashed.oneid-button--theme-primary:hover, .oneid-button--variant-dashed.oneid-button--theme-primary:focus-visible { border-color: var(--td-brand-color-hover); } .oneid-button--variant-dashed.oneid-button--theme-primary.oneid-is-loading { border-color: var(--td-brand-color); } .oneid-button--variant-dashed.oneid-button--theme-primary.oneid-is-disabled { border-color: var(--td-brand-color-disabled); } .oneid-button--variant-dashed.oneid-button--theme-success { color: var(--td-success-color); border-color: var(--td-success-color); } .oneid-button--variant-dashed.oneid-button--theme-success:hover, .oneid-button--variant-dashed.oneid-button--theme-success:focus-visible { color: var(--td-success-color-hover); } .oneid-button--variant-dashed.oneid-button--theme-success.oneid-is-loading { color: var(--td-success-color); } .oneid-button--variant-dashed.oneid-button--theme-success.oneid-is-disabled { color: var(--td-success-color-disabled); } .oneid-button--variant-dashed.oneid-button--theme-success:hover, .oneid-button--variant-dashed.oneid-button--theme-success:focus-visible { border-color: var(--td-success-color-hover); } .oneid-button--variant-dashed.oneid-button--theme-success.oneid-is-loading { border-color: var(--td-success-color); } .oneid-button--variant-dashed.oneid-button--theme-success.oneid-is-disabled { border-color: var(--td-success-color-disabled); } .oneid-button--variant-dashed.oneid-button--theme-warning { color: var(--td-warning-color); border-color: var(--td-warning-color); } .oneid-button--variant-dashed.oneid-button--theme-warning:hover, .oneid-button--variant-dashed.oneid-button--theme-warning:focus-visible { color: var(--td-warning-color-hover); } .oneid-button--variant-dashed.oneid-button--theme-warning.oneid-is-loading { color: var(--td-warning-color); } .oneid-button--variant-dashed.oneid-button--theme-warning.oneid-is-disabled { color: var(--td-warning-color-disabled); } .oneid-button--variant-dashed.oneid-button--theme-warning:hover, .oneid-button--variant-dashed.oneid-button--theme-warning:focus-visible { border-color: var(--td-warning-color-hover); } .oneid-button--variant-dashed.oneid-button--theme-warning.oneid-is-loading { border-color: var(--td-warning-color); } .oneid-button--variant-dashed.oneid-button--theme-warning.oneid-is-disabled { border-color: var(--td-warning-color-disabled); } .oneid-button--variant-dashed.oneid-button--theme-danger { color: var(--td-error-color); border-color: var(--td-error-color); } .oneid-button--variant-dashed.oneid-button--theme-danger:hover, .oneid-button--variant-dashed.oneid-button--theme-danger:focus-visible { color: var(--td-error-color-hover); } .oneid-button--variant-dashed.oneid-button--theme-danger.oneid-is-loading { color: var(--td-error-color); } .oneid-button--variant-dashed.oneid-button--theme-danger.oneid-is-disabled { color: var(--td-error-color-disabled); } .oneid-button--variant-dashed.oneid-button--theme-danger:hover, .oneid-button--variant-dashed.oneid-button--theme-danger:focus-visible { border-color: var(--td-error-color-hover); } .oneid-button--variant-dashed.oneid-button--theme-danger.oneid-is-loading { border-color: var(--td-error-color); } .oneid-button--variant-dashed.oneid-button--theme-danger.oneid-is-disabled { border-color: var(--td-error-color-disabled); } .oneid-button--variant-dashed.oneid-button--ghost { background-color: transparent; color: var(--td-text-color-anti); border-color: var(--td-text-color-anti); } .oneid-button--variant-dashed.oneid-button--ghost:hover, .oneid-button--variant-dashed.oneid-button--ghost:focus-visible { background-color: transparent; } .oneid-button--variant-dashed.oneid-button--ghost:active { background-color: transparent; } .oneid-button--variant-dashed.oneid-button--ghost.oneid-is-loading { background-color: transparent; } .oneid-button--variant-dashed.oneid-button--ghost.oneid-is-disabled { background-color: rgba(255, 255, 255, 0.22); background-color: transparent; } .oneid-button--variant-dashed.oneid-button--ghost:hover, .oneid-button--variant-dashed.oneid-button--ghost:focus-visible { color: var(--td-brand-color-hover); } .oneid-button--variant-dashed.oneid-button--ghost:active { color: var(--td-brand-color-active); } .oneid-button--variant-dashed.oneid-button--ghost.oneid-is-loading { color: var(--td-text-color-anti); } .oneid-button--variant-dashed.oneid-button--ghost.oneid-is-disabled { color: rgba(255, 255, 255, 0.22); background-color: transparent; } .oneid-button--variant-dashed.oneid-button--ghost:hover, .oneid-button--variant-dashed.oneid-button--ghost:focus-visible { border-color: var(--td-brand-color-hover); } .oneid-button--variant-dashed.oneid-button--ghost:active { border-color: var(--td-brand-color-active); } .oneid-button--variant-dashed.oneid-button--ghost.oneid-is-loading { border-color: var(--td-text-color-anti); } .oneid-button--variant-dashed.oneid-button--ghost.oneid-is-disabled { border-color: rgba(255, 255, 255, 0.22); background-color: transparent; } .oneid-button--variant-dashed.oneid-button--ghost.oneid-button--theme-primary { color: var(--td-brand-color); border-color: var(--td-brand-color); } .oneid-button--variant-dashed.oneid-button--ghost.oneid-button--theme-primary:hover, .oneid-button--variant-dashed.oneid-button--ghost.oneid-button--theme-primary:focus-visible { color: var(--td-brand-color-hover); } .oneid-button--variant-dashed.oneid-button--ghost.oneid-button--theme-primary:active { color: var(--td-brand-color-active); } .oneid-button--variant-dashed.oneid-button--ghost.oneid-button--theme-primary.oneid-is-loading { color: var(--td-brand-color); } .oneid-button--variant-dashed.oneid-button--ghost.oneid-button--theme-primary.oneid-is-disabled { color: rgba(255, 255, 255, 0.22); background-color: transparent; } .oneid-button--variant-dashed.oneid-button--ghost.oneid-button--theme-primary:hover, .oneid-button--variant-dashed.oneid-button--ghost.oneid-button--theme-primary:focus-visible { border-color: var(--td-brand-color-hover); } .oneid-button--variant-dashed.oneid-button--ghost.oneid-button--theme-primary:active { border-color: var(--td-brand-color-active); } .oneid-button--variant-dashed.oneid-button--ghost.oneid-button--theme-primary.oneid-is-loading { border-color: var(--td-brand-color); } .oneid-button--variant-dashed.oneid-button--ghost.oneid-button--theme-primary.oneid-is-disabled { border-color: rgba(255, 255, 255, 0.22); background-color: transparent; } .oneid-button--variant-dashed.oneid-button--ghost.oneid-button--theme-success { color: var(--td-success-color); border-color: var(--td-success-color); } .oneid-button--variant-dashed.oneid-button--ghost.oneid-button--theme-success:hover, .oneid-button--variant-dashed.oneid-button--ghost.oneid-button--theme-success:focus-visible { color: var(--td-success-color-hover); } .oneid-button--variant-dashed.oneid-button--ghost.oneid-button--theme-success:active { color: var(--td-success-color-active); } .oneid-button--variant-dashed.oneid-button--ghost.oneid-button--theme-success.oneid-is-loading { color: var(--td-success-color); } .oneid-button--variant-dashed.oneid-button--ghost.oneid-button--theme-success.oneid-is-disabled { color: rgba(255, 255, 255, 0.22); background-color: transparent; } .oneid-button--variant-dashed.oneid-button--ghost.oneid-button--theme-success:hover, .oneid-button--variant-dashed.oneid-button--ghost.oneid-button--theme-success:focus-visible { border-color: var(--td-success-color-hover); } .oneid-button--variant-dashed.oneid-button--ghost.oneid-button--theme-success:active { border-color: var(--td-success-color-active); } .oneid-button--variant-dashed.oneid-button--ghost.oneid-button--theme-success.oneid-is-loading { border-color: var(--td-success-color); } .oneid-button--variant-dashed.oneid-button--ghost.oneid-button--theme-success.oneid-is-disabled { border-color: rgba(255, 255, 255, 0.22); background-color: transparent; } .oneid-button--variant-dashed.oneid-button--ghost.oneid-button--theme-warning { color: var(--td-warning-color); border-color: var(--td-warning-color); } .oneid-button--variant-dashed.oneid-button--ghost.oneid-button--theme-warning:hover, .oneid-button--variant-dashed.oneid-button--ghost.oneid-button--theme-warning:focus-visible { color: var(--td-warning-color-hover); } .oneid-button--variant-dashed.oneid-button--ghost.oneid-button--theme-warning:active { color: var(--td-warning-color-active); } .oneid-button--variant-dashed.oneid-button--ghost.oneid-button--theme-warning.oneid-is-loading { color: var(--td-warning-color); } .oneid-button--variant-dashed.oneid-button--ghost.oneid-button--theme-warning.oneid-is-disabled { color: rgba(255, 255, 255, 0.22); background-color: transparent; } .oneid-button--variant-dashed.oneid-button--ghost.oneid-button--theme-warning:hover, .oneid-button--variant-dashed.oneid-button--ghost.oneid-button--theme-warning:focus-visible { border-color: var(--td-warning-color-hover); } .oneid-button--variant-dashed.oneid-button--ghost.oneid-button--theme-warning:active { border-color: var(--td-warning-color-active); } .oneid-button--variant-dashed.oneid-button--ghost.oneid-button--theme-warning.oneid-is-loading { border-color: var(--td-warning-color); } .oneid-button--variant-dashed.oneid-button--ghost.oneid-button--theme-warning.oneid-is-disabled { border-color: rgba(255, 255, 255, 0.22); background-color: transparent; } .oneid-button--variant-dashed.oneid-button--ghost.oneid-button--theme-danger { color: var(--td-error-color); border-color: var(--td-error-color); } .oneid-button--variant-dashed.oneid-button--ghost.oneid-button--theme-danger:hover, .oneid-button--variant-dashed.oneid-button--ghost.oneid-button--theme-danger:focus-visible { color: var(--td-error-color-hover); } .oneid-button--variant-dashed.oneid-button--ghost.oneid-button--theme-danger:active { color: var(--td-error-color-active); } .oneid-button--variant-dashed.oneid-button--ghost.oneid-button--theme-danger.oneid-is-loading { color: var(--td-error-color); } .oneid-button--variant-dashed.oneid-button--ghost.oneid-button--theme-danger.oneid-is-disabled { color: rgba(255, 255, 255, 0.22); background-color: transparent; } .oneid-button--variant-dashed.oneid-button--ghost.oneid-button--theme-danger:hover, .oneid-button--variant-dashed.oneid-button--ghost.oneid-button--theme-danger:focus-visible { border-color: var(--td-error-color-hover); } .oneid-button--variant-dashed.oneid-button--ghost.oneid-button--theme-danger:active { border-color: var(--td-error-color-active); } .oneid-button--variant-dashed.oneid-button--ghost.oneid-button--theme-danger.oneid-is-loading { border-color: var(--td-error-color); } .oneid-button--variant-dashed.oneid-button--ghost.oneid-button--theme-danger.oneid-is-disabled { border-color: rgba(255, 255, 255, 0.22); background-color: transparent; } .oneid-button--variant-text { height: var(--td-comp-size-m); font: var(--td-font-body-medium); padding-left: calc(var(--td-comp-paddingLR-l) - 1px); padding-right: calc(var(--td-comp-paddingLR-l) - 1px); color: var(--td-text-color-primary); background-color: transparent; border-color: transparent; } .oneid-button--variant-text .oneid-icon, .oneid-button--variant-text .oneid-loading { font-size: var(--td-font-size-body-large); } .oneid-button--variant-text:hover, .oneid-button--variant-text:focus-visible { color: var(--td-text-color-primary); } .oneid-button--variant-text.oneid-is-loading { color: var(--td-text-color-primary); } .oneid-button--variant-text.oneid-is-disabled { color: var(--td-text-color-disabled); } .oneid-button--variant-text:hover, .oneid-button--variant-text:focus-visible { background-color: var(--td-bg-color-container-hover); } .oneid-button--variant-text.oneid-is-loading { background-color: transparent; } .oneid-button--variant-text.oneid-is-disabled { background-color: transparent; } .oneid-button--variant-text:hover, .oneid-button--variant-text:focus-visible { border-color: var(--td-bg-color-container-hover); } .oneid-button--variant-text.oneid-is-loading { border-color: transparent; } .oneid-button--variant-text.oneid-is-disabled { border-color: transparent; } .oneid-button--variant-text.oneid-button--theme-primary { color: var(--td-brand-color); } .oneid-button--variant-text.oneid-button--theme-primary:hover, .oneid-button--variant-text.oneid-button--theme-primary:focus-visible { color: var(--td-brand-color-hover); } .oneid-button--variant-text.oneid-button--theme-primary.oneid-is-loading { color: var(--td-brand-color); } .oneid-button--variant-text.oneid-button--theme-primary.oneid-is-disabled { color: var(--td-brand-color-disabled); } .oneid-button--variant-text.oneid-button--theme-success { color: var(--td-success-color); } .oneid-button--variant-text.oneid-button--theme-success:hover, .oneid-button--variant-text.oneid-button--theme-success:focus-visible { color: var(--td-success-color-hover); } .oneid-button--variant-text.oneid-button--theme-success.oneid-is-loading { color: var(--td-success-color); } .oneid-button--variant-text.oneid-button--theme-success.oneid-is-disabled { color: var(--td-success-color-disabled); } .oneid-button--variant-text.oneid-button--theme-warning { color: var(--td-warning-color); } .oneid-button--variant-text.oneid-button--theme-warning:hover, .oneid-button--variant-text.oneid-button--theme-warning:focus-visible { color: var(--td-warning-color-hover); } .oneid-button--variant-text.oneid-button--theme-warning.oneid-is-loading { color: var(--td-warning-color); } .oneid-button--variant-text.oneid-button--theme-warning.oneid-is-disabled { color: var(--td-warning-color-disabled); } .oneid-button--variant-text.oneid-button--theme-danger { color: var(--td-error-color); } .oneid-button--variant-text.oneid-button--theme-danger:hover, .oneid-button--variant-text.oneid-button--theme-danger:focus-visible { color: var(--td-error-color-hover); } .oneid-button--variant-text.oneid-button--theme-danger.oneid-is-loading { color: var(--td-error-color); } .oneid-button--variant-text.oneid-button--theme-danger.oneid-is-disabled { color: var(--td-error-color-disabled); } .oneid-button--variant-text.oneid-button--ghost { background: none; color: var(--td-text-color-anti); } .oneid-button--variant-text.oneid-button--ghost:hover, .oneid-button--variant-text.oneid-button--ghost:focus-visible { color: var(--td-brand-color-hover); } .oneid-button--variant-text.oneid-button--ghost:active { color: var(--td-brand-color-active); } .oneid-button--variant-text.oneid-button--ghost.oneid-is-loading { color: var(--td-text-color-anti); } .oneid-button--variant-text.oneid-button--ghost.oneid-is-disabled { color: rgba(255, 255, 255, 0.22); background-color: transparent; } .oneid-button--variant-text.oneid-button--ghost.oneid-button--theme-primary { color: var(--td-brand-color); } .oneid-button--variant-text.oneid-button--ghost.oneid-button--theme-primary:hover, .oneid-button--variant-text.oneid-button--ghost.oneid-button--theme-primary:focus-visible { color: var(--td-brand-color-hover); } .oneid-button--variant-text.oneid-button--ghost.oneid-button--theme-primary:active { color: var(--td-brand-color-active); } .oneid-button--variant-text.oneid-button--ghost.oneid-button--theme-primary.oneid-is-loading { color: var(--td-brand-color); } .oneid-button--variant-text.oneid-button--ghost.oneid-button--theme-primary.oneid-is-disabled { color: rgba(255, 255, 255, 0.22); background-color: transparent; } .oneid-button--variant-text.oneid-button--ghost.oneid-button--theme-success { color: var(--td-success-color); } .oneid-button--variant-text.oneid-button--ghost.oneid-button--theme-success:hover, .oneid-button--variant-text.oneid-button--ghost.oneid-button--theme-success:focus-visible { color: var(--td-success-color-hover); } .oneid-button--variant-text.oneid-button--ghost.oneid-button--theme-success:active { color: var(--td-success-color-active); } .oneid-button--variant-text.oneid-button--ghost.oneid-button--theme-success.oneid-is-loading { color: var(--td-success-color); } .oneid-button--variant-text.oneid-button--ghost.oneid-button--theme-success.oneid-is-disabled { color: rgba(255, 255, 255, 0.22); background-color: transparent; } .oneid-button--variant-text.oneid-button--ghost.oneid-button--theme-warning { color: var(--td-warning-color); } .oneid-button--variant-text.oneid-button--ghost.oneid-button--theme-warning:hover, .oneid-button--variant-text.oneid-button--ghost.oneid-button--theme-warning:focus-visible { color: var(--td-warning-color-hover); } .oneid-button--variant-text.oneid-button--ghost.oneid-button--theme-warning:active { color: var(--td-warning-color-active); } .oneid-button--variant-text.oneid-button--ghost.oneid-button--theme-warning.oneid-is-loading { color: var(--td-warning-color); } .oneid-button--variant-text.oneid-button--ghost.oneid-button--theme-warning.oneid-is-disabled { color: rgba(255, 255, 255, 0.22); background-color: transparent; } .oneid-button--variant-text.oneid-button--ghost.oneid-button--theme-danger { color: var(--td-error-color); } .oneid-button--variant-text.oneid-button--ghost.oneid-button--theme-danger:hover, .oneid-button--variant-text.oneid-button--ghost.oneid-button--theme-danger:focus-visible { color: var(--td-error-color-hover); } .oneid-button--variant-text.oneid-button--ghost.oneid-button--theme-danger:active { color: var(--td-error-color-active); } .oneid-button--variant-text.oneid-button--ghost.oneid-button--theme-danger.oneid-is-loading { color: var(--td-error-color); } .oneid-button--variant-text.oneid-button--ghost.oneid-button--theme-danger.oneid-is-disabled { color: rgba(255, 255, 255, 0.22); background-color: transparent; } .oneid-button.oneid-is-loading, .oneid-button.oneid-is-disabled { cursor: not-allowed; } .oneid-button.oneid-size-s { height: var(--td-comp-size-xs); font: var(--td-font-body-small); padding-left: calc(var(--td-comp-paddingLR-s) - 1px); padding-right: calc(var(--td-comp-paddingLR-s) - 1px); } .oneid-button.oneid-size-s .oneid-icon, .oneid-button.oneid-size-s .oneid-loading { font-size: var(--td-font-size-body-medium); } .oneid-button.oneid-size-l { height: var(--td-comp-size-xl); font: var(--td-font-body-large); padding-left: calc(var(--td-comp-paddingLR-xl) - 1px); padding-right: calc(var(--td-comp-paddingLR-xl) - 1px); } .oneid-button.oneid-size-l .oneid-icon, .oneid-button.oneid-size-l .oneid-loading { font-size: var(--td-font-size-title-large); } .oneid-button--shape-square { width: var(--td-comp-size-m); padding: 0; } .oneid-button--shape-square.oneid-size-s { width: var(--td-comp-size-xs); padding: 0; } .oneid-button--shape-square.oneid-size-l { width: var(--td-comp-size-xl); padding: 0; } .oneid-button--shape-round { border-radius: var(--td-radius-round); } .oneid-button--shape-round.oneid-size-s { border-radius: calc(var(--td-comp-size-xs) / 2); } .oneid-button--shape-round.oneid-size-l { border-radius: calc(var(--td-comp-size-xl) / 2); } .oneid-button--shape-circle { width: var(--td-comp-size-m); padding: 0; text-align: center; border-radius: calc(var(--td-comp-size-m) / 2); } .oneid-button--shape-circle .oneid-icon { font-size: var(--td-font-size-body-large); } .oneid-button--shape-circle .oneid-loading { font-size: var(--td-font-size-body-large); } .oneid-button--shape-circle.oneid-size-s { width: var(--td-comp-size-xs); border-radius: calc(var(--td-comp-size-xs) / 2); } .oneid-button--shape-circle.oneid-size-l { width: var(--td-comp-size-xl); padding: 0; border-radius: calc(var(--td-comp-size-xl) / 2); } .oneid-button.oneid-size-full-width { display: -webkit-box; display: -ms-flexbox; display: flex; width: 100%; } .oneid-button--ghost { --ripple-color: var(--td-gray-color-10); } .oneid-button:not(.oneid-is-disabled):not(.oneid-button--ghost) { --ripple-color: var(--td-bg-color-container-active); } .oneid-button--variant-base:not(.oneid-is-disabled):not(.oneid-button--ghost) { --ripple-color: var(--td-bg-color-component-active); } .oneid-button--variant-base.oneid-button--theme-primary:not(.oneid-is-disabled):not(.oneid-button--ghost) { --ripple-color: var(--td-brand-color-active); } .oneid-button--variant-base.oneid-button--theme-success:not(.oneid-is-disabled):not(.oneid-button--ghost) { --ripple-color: var(--td-success-color-active); } .oneid-button--variant-base.oneid-button--theme-warning:not(.oneid-is-disabled):not(.oneid-button--ghost) { --ripple-color: var(--td-warning-color-active); } .oneid-button--variant-base.oneid-button--theme-danger:not(.oneid-is-disabled):not(.oneid-button--ghost) { --ripple-color: var(--td-error-color-active); } .input-readonly.oneid-is-readonly { color: var(--td-text-color-primary); background-color: var(--td-bg-color-specialcomponent); } .input-readonly.oneid-is-readonly .oneid-input__inner { cursor: pointer; } .input-disabled.oneid-is-disabled { color: var(--td-text-color-disabled); background-color: var(--td-bg-color-component-disabled); } .input-disabled.oneid-is-disabled:hover { border-color: var(--td-border-level-2-color); } .input-disabled.oneid-is-disabled .oneid-input__inner { cursor: not-allowed; color: var(--td-text-color-disabled); text-overflow: initial; } .input-disabled.oneid-is-disabled .oneid-input__inner::-webkit-input-placeholder { color: var(--td-text-color-disabled); } .input-disabled.oneid-is-disabled .oneid-input__inner::-moz-placeholder { color: var(--td-text-color-disabled); } .input-disabled.oneid-is-disabled .oneid-input__inner:-ms-input-placeholder { color: var(--td-text-color-disabled); } .input-disabled.oneid-is-disabled .oneid-input__inner::-ms-input-placeholder { color: var(--td-text-color-disabled); } .input-disabled.oneid-is-disabled .oneid-input__inner::placeholder { color: var(--td-text-color-disabled); } .input-disabled.oneid-is-disabled > .oneid-input__prefix .oneid-icon, .input-disabled.oneid-is-disabled > .oneid-input__suffix .oneid-icon { color: var(--td-text-color-disabled); } .input-disabled.oneid-is-disabled > .oneid-input__prefix .oneid-icon:hover, .input-disabled.oneid-is-disabled > .oneid-input__suffix .oneid-icon:hover { color: var(--td-text-color-disabled); } .oneid-tips { font-size: var(--td-font-size-body-small); } .oneid-tips.oneid-is-default { color: var(--td-text-color-placeholder); } .oneid-tips.oneid-is-error { color: var(--td-error-color); } .oneid-tips.oneid-is-warning { color: var(--td-warning-color); } .oneid-tips.oneid-is-success { color: var(--td-success-color); } .oneid-input { margin: 0; padding: 0; list-style: none; position: relative; height: var(--td-comp-size-m); border-width: 1px; border-style: solid; border-radius: var(--td-radius-default); border-color: var(--td-border-level-2-color); padding: 0 var(--td-comp-paddingLR-s); background-color: var(--td-bg-color-specialcomponent); outline: none; color: var(--td-text-color-primary); font: var(--td-font-body-medium); width: 100%; -webkit-box-sizing: border-box; box-sizing: border-box; -webkit-transition: border cubic-bezier(0.38, 0, 0.24, 1) 0.2s, background-color cubic-bezier(0.38, 0, 0.24, 1) 0.2s, -webkit-box-shadow cubic-bezier(0.38, 0, 0.24, 1) 0.2s; transition: border cubic-bezier(0.38, 0, 0.24, 1) 0.2s, background-color cubic-bezier(0.38, 0, 0.24, 1) 0.2s, -webkit-box-shadow cubic-bezier(0.38, 0, 0.24, 1) 0.2s; transition: border cubic-bezier(0.38, 0, 0.24, 1) 0.2s, box-shadow cubic-bezier(0.38, 0, 0.24, 1) 0.2s, background-color cubic-bezier(0.38, 0, 0.24, 1) 0.2s; transition: border cubic-bezier(0.38, 0, 0.24, 1) 0.2s, box-shadow cubic-bezier(0.38, 0, 0.24, 1) 0.2s, background-color cubic-bezier(0.38, 0, 0.24, 1) 0.2s, -webkit-box-shadow cubic-bezier(0.38, 0, 0.24, 1) 0.2s; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; overflow: hidden; } .oneid-input:hover { border-color: var(--td-brand-color); } .oneid-input:focus { z-index: 1; border-color: var(--td-brand-color); -webkit-box-shadow: 0 0 0 2px var(--td-brand-color-focus); box-shadow: 0 0 0 2px var(--td-brand-color-focus); } .oneid-input--borderless:not(.oneid-input--focused) { border-color: transparent; -webkit-transition: border cubic-bezier(0.38, 0, 0.24, 1) 0.2s, background-color cubic-bezier(0.38, 0, 0.24, 1) 0.2s, -webkit-box-shadow cubic-bezier(0.38, 0, 0.24, 1) 0.2s; transition: border cubic-bezier(0.38, 0, 0.24, 1) 0.2s, background-color cubic-bezier(0.38, 0, 0.24, 1) 0.2s, -webkit-box-shadow cubic-bezier(0.38, 0, 0.24, 1) 0.2s; transition: border cubic-bezier(0.38, 0, 0.24, 1) 0.2s, box-shadow cubic-bezier(0.38, 0, 0.24, 1) 0.2s, background-color cubic-bezier(0.38, 0, 0.24, 1) 0.2s; transition: border cubic-bezier(0.38, 0, 0.24, 1) 0.2s, box-shadow cubic-bezier(0.38, 0, 0.24, 1) 0.2s, background-color cubic-bezier(0.38, 0, 0.24, 1) 0.2s, -webkit-box-shadow cubic-bezier(0.38, 0, 0.24, 1) 0.2s; } .oneid-input--borderless:not(.oneid-input--focused):hover { border-color: var(--td-component-border); background-color: var(--td-bg-color-container-hover); cursor: pointer; } .oneid-input--borderless:not(.oneid-input--focused).oneid-is-disabled { border: none; background-color: var(--td-bg-color-component-disabled); } .oneid-input--focused { border-color: var(--td-brand-color); -webkit-box-shadow: 0 0 0 2px var(--td-brand-color-focus); box-shadow: 0 0 0 2px var(--td-brand-color-focus); z-index: 1; } .oneid-input :focus-visible { outline: none; } .oneid-input__inner { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; border: none; outline: none; padding: 0; max-width: 100%; min-width: 0; color: var(--td-text-color-primary); font: inherit; background-color: transparent; -webkit-box-sizing: border-box; box-sizing: border-box; white-space: nowrap; word-wrap: normal; overflow: hidden; text-overflow: ellipsis; } .oneid-input__inner::-webkit-input-placeholder { color: var(--td-text-color-placeholder); } .oneid-input__inner::-moz-placeholder { color: var(--td-text-color-placeholder); } .oneid-input__inner:-ms-input-placeholder { color: var(--td-text-color-placeholder); } .oneid-input__inner::-ms-input-placeholder { color: var(--td-text-color-placeholder); } .oneid-input__inner::placeholder { color: var(--td-text-color-placeholder); } .oneid-input__inner:-moz-placeholder { text-overflow: ellipsis; width: 100%; } .oneid-input__inner:-ms-input-placeholder { text-overflow: ellipsis; width: 100%; } .oneid-input__inner:placeholder-shown { text-overflow: ellipsis; width: 100%; } .oneid-input__inner[type=password]::-ms-reveal { display: none; } .oneid-input__inner[type=search]::-webkit-search-decoration, .oneid-input__inner[type=search]::-webkit-search-cancel-button, .oneid-input__inner[type=search]::-webkit-search-results-button, .oneid-input__inner[type=search]::-webkit-search-results-decoration { -webkit-appearance: none; appearance: none; } .oneid-input__inner.oneid-input--soft-hidden { width: 0; } .oneid-input__extra { font: var(--td-font-body-small); color: var(--td-text-color-placeholder); } .oneid-input__status { position: absolute; right: -24px; top: 0; } .oneid-input.oneid-input--suffix > span.oneid-input__clear { opacity: 0; visibility: hidden; -webkit-transition: border cubic-bezier(0.38, 0, 0.24, 1) 0.2s, background-color cubic-bezier(0.38, 0, 0.24, 1) 0.2s, -webkit-box-shadow cubic-bezier(0.38, 0, 0.24, 1) 0.2s; transition: border cubic-bezier(0.38, 0, 0.24, 1) 0.2s, background-color cubic-bezier(0.38, 0, 0.24, 1) 0.2s, -webkit-box-shadow cubic-bezier(0.38, 0, 0.24, 1) 0.2s; transition: border cubic-bezier(0.38, 0, 0.24, 1) 0.2s, box-shadow cubic-bezier(0.38, 0, 0.24, 1) 0.2s, background-color cubic-bezier(0.38, 0, 0.24, 1) 0.2s; transition: border cubic-bezier(0.38, 0, 0.24, 1) 0.2s, box-shadow cubic-bezier(0.38, 0, 0.24, 1) 0.2s, background-color cubic-bezier(0.38, 0, 0.24, 1) 0.2s, -webkit-box-shadow cubic-bezier(0.38, 0, 0.24, 1) 0.2s; } .oneid-input.oneid-input--suffix:hover > span.oneid-input__clear { opacity: 1; visibility: visible; } .oneid-input.oneid-is-success { border-color: var(--td-success-color); } .oneid-input.oneid-is-success:focus { -webkit-box-shadow: 0 0 0 2px var(--td-success-color-focus); box-shadow: 0 0 0 2px var(--td-success-color-focus); } .oneid-input.oneid-is-success.oneid-input--focused { -webkit-box-shadow: 0 0 0 2px var(--td-success-color-focus); box-shadow: 0 0 0 2px var(--td-success-color-focus); } .oneid-input.oneid-is-success > .oneid-input__extra { color: var(--td-success-color); } .oneid-input.oneid-is-warning { border-color: var(--td-warning-color); } .oneid-input.oneid-is-warning:focus { -webkit-box-shadow: 0 0 0 2px var(--td-warning-color-focus); box-shadow: 0 0 0 2px var(--td-warning-color-focus); } .oneid-input.oneid-is-warning.oneid-input--focused { -webkit-box-shadow: 0 0 0 2px var(--td-warning-color-focus); box-shadow: 0 0 0 2px var(--td-warning-color-focus); } .oneid-input.oneid-is-warning > .oneid-input__extra { color: var(--td-warning-color); } .oneid-input.oneid-is-error { border-color: var(--td-error-color); } .oneid-input.oneid-is-error:focus { -webkit-box-shadow: 0 0 0 2px var(--td-error-color-focus); box-shadow: 0 0 0 2px var(--td-error-color-focus); } .oneid-input.oneid-is-error.oneid-input--focused { -webkit-box-shadow: 0 0 0 2px var(--td-error-color-focus); box-shadow: 0 0 0 2px var(--td-error-color-focus); } .oneid-input.oneid-is-error > .oneid-input__extra { color: var(--td-error-color); } .oneid-input.oneid-is-readonly { color: var(--td-text-color-primary); background-color: var(--td-bg-color-specialcomponent); } .oneid-input.oneid-is-readonly .oneid-input__inner { cursor: pointer; } .oneid-input.oneid-is-disabled { color: var(--td-text-color-disabled); background-color: var(--td-bg-color-component-disabled); } .oneid-input.oneid-is-disabled:hover { border-color: var(--td-border-level-2-color); } .oneid-input.oneid-is-disabled .oneid-input__inner { cursor: not-allowed; color: var(--td-text-color-disabled); text-overflow: initial; } .oneid-input.oneid-is-disabled .oneid-input__inner::-webkit-input-placeholder { color: var(--td-text-color-disabled); } .oneid-input.oneid-is-disabled .oneid-input__inner::-moz-placeholder { color: var(--td-text-color-disabled); } .oneid-input.oneid-is-disabled .oneid-input__inner:-ms-input-placeholder { color: var(--td-text-color-disabled); } .oneid-input.oneid-is-disabled .oneid-input__inner::-ms-input-placeholder { color: var(--td-text-color-disabled); } .oneid-input.oneid-is-disabled .oneid-input__inner::placeholder { color: var(--td-text-color-disabled); } .oneid-input.oneid-is-disabled > .oneid-input__prefix .oneid-icon, .oneid-input.oneid-is-disabled > .oneid-input__suffix .oneid-icon { color: var(--td-text-color-disabled); } .oneid-input.oneid-is-disabled > .oneid-input__prefix .oneid-icon:hover, .oneid-input.oneid-is-disabled > .oneid-input__suffix .oneid-icon:hover { color: var(--td-text-color-disabled); } .oneid-input.oneid-input--prefix > .oneid-input__prefix { z-index: 2; height: 100%; text-align: center; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .oneid-input.oneid-input--prefix > .oneid-input__prefix-icon { font-size: var(--td-font-size-body-large); } .oneid-input.oneid-input--suffix > .oneid-input__suffix { z-index: 2; height: 100%; text-align: center; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .oneid-input.oneid-input--suffix > .oneid-input__suffix-icon { font-size: var(--td-font-size-body-large); } .oneid-input .oneid-input__suffix-clear { cursor: pointer; } .oneid-input.oneid-size-l { height: var(--td-comp-size-xl); font: var(--td-font-body-large); padding: var(--td-comp-paddingTB-m) var(--td-comp-paddingLR-m); } .oneid-input.oneid-size-s { height: var(--td-comp-size-xs); font: var(--td-font-body-small); } .oneid-input .oneid-input__prefix > .oneid-icon, .oneid-input .oneid-input__suffix > .oneid-icon { font-size: inherit; } .oneid-input .oneid-input__prefix > .oneid-icon { font-size: 16px; color: var(--td-text-color-placeholder); } .oneid-input .oneid-input__prefix:not(:empty) { margin-right: var(--td-comp-margin-s); } .oneid-input .oneid-input__suffix > .oneid-icon { color: var(--td-text-color-placeholder); -webkit-transition: all 0.2s linear; transition: all 0.2s linear; } .oneid-input .oneid-input__suffix > .oneid-icon:hover { color: var(--td-text-color-secondary); -webkit-transition: all 0.2s linear; transition: all 0.2s linear; } .oneid-input .oneid-input__suffix:not(:empty) { margin-left: var(--td-comp-margin-s); } .oneid-input.oneid-is-focused .oneid-input__prefix > .oneid-icon { color: var(--td-brand-color); } .oneid-input.oneid-is-focused .oneid-input__suffix > .oneid-icon-time, .oneid-input.oneid-is-focused .oneid-input__suffix .oneid-icon-calendar { color: var(--td-brand-color); } .oneid-input-group { position: relative; display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-align: stretch; -ms-flex-align: stretch; align-items: stretch; } .oneid-input-group .oneid-input__wrap { border-radius: 0; } .oneid-input-group .oneid-input__wrap:first-child { border-radius: var(--td-radius-default) 0 0 var(--td-radius-default); } .oneid-input-group .oneid-input__wrap:last-child { border-radius: 0 var(--td-radius-default) var(--td-radius-default) 0; } .oneid-input-group .oneid-button, .oneid-input-group .oneid-select { border-radius: 0; } .oneid-input-group .oneid-button:not(:first-child), .oneid-input-group .oneid-select:not(:first-child) { margin-left: -1px; } .oneid-input-group .oneid-input__wrap:not(:first-child) .oneid-input { margin-left: -1px; } .oneid-input-group .oneid-input__wrap:first-child .oneid-input { border-radius: var(--td-radius-default) 0 0 var(--td-radius-default); } .oneid-input-group .oneid-input__wrap:last-child .oneid-input { border-radius: 0 var(--td-radius-default) var(--td-radius-default) 0; } .oneid-input-group .oneid-button:first-child, .oneid-input-group .oneid-select:first-child { border-radius: var(--td-radius-default) 0 0 var(--td-radius-default); } .oneid-input-group .oneid-button:last-child, .oneid-input-group .oneid-select:last-child { border-radius: 0 var(--td-radius-default) var(--td-radius-default) 0; } .oneid-input-group--separate .oneid-input__wrap + .oneid-input__wrap { margin-left: var(--td-comp-margin-xxxl); } .oneid-input-group--separate .oneid-button, .oneid-input-group--separate .oneid-select { border-radius: var(--td-radius-default); } .oneid-input-group--separate .oneid-button:first-child, .oneid-input-group--separate .oneid-select:first-child { border-radius: var(--td-radius-default) 0 0 var(--td-radius-default); } .oneid-input-group--separate .oneid-button:last-child, .oneid-input-group--separate .oneid-select:last-child { border-radius: 0 var(--td-radius-default) var(--td-radius-default) 0; } .oneid-input-group--separate .oneid-input__wrap .oneid-input { border-radius: var(--td-radius-default); } .oneid-input-group--separate .oneid-input__wrap .oneid-input:first-child { border-radius: var(--td-radius-default); } .oneid-input-group--separate .oneid-input__wrap .oneid-input:last-child { border-radius: var(--td-radius-default); } .oneid-input-group .oneid-input__inner, .oneid-input-group .oneid-button, .oneid-input-group .oneid-select { position: relative; z-index: 0; } .oneid-input-group .oneid-input__inner:hover, .oneid-input-group .oneid-button:hover, .oneid-input-group .oneid-select:hover, .oneid-input-group .oneid-input__inner:focus, .oneid-input-group .oneid-button:focus, .oneid-input-group .oneid-select:focus, .oneid-input-group .oneid-input__inner:active, .oneid-input-group .oneid-button:active, .oneid-input-group .oneid-select:active { z-index: 1; } .oneid-input__wrap { width: 100%; } .oneid-input__tips { height: auto; min-height: var(--td-line-height-body-small); font: var(--td-font-body-small); position: absolute; } .oneid-input__tips--default { color: var(--td-text-color-placeholder); } .oneid-input__tips--success { color: var(--td-success-color); } .oneid-input__tips--warning { color: var(--td-warning-color); } .oneid-input__tips--error { color: var(--td-error-color); } .oneid-align-center > .oneid-input__inner { text-align: center; } .oneid-align-right > .oneid-input__inner { text-align: right; } .oneid-input__input-pre { position: absolute; visibility: hidden; white-space: pre; display: block; } .oneid-input--auto-width { width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; min-width: 60px; } .oneid-input__limit-number { font: var(--td-font-body-medium); color: var(--td-text-color-placeholder); background: var(--td-bg-color-specialcomponent); } .oneid-input__limit-number.oneid-is-disabled { background: var(--td-bg-color-component-disabled); } .oneid-input-adornment { font: var(--td-font-body-medium); color: var(--td-text-color-primary); -webkit-box-sizing: border-box; box-sizing: border-box; margin: 0; padding: 0; list-style: none; display: -webkit-box; display: -ms-flexbox; display: flex; } .oneid-input-adornment__prepend .oneid-input, .oneid-input-adornment__append .oneid-input, .oneid-input-adornment__prepend .oneid-textarea__inner, .oneid-input-adornment__append .oneid-textarea__inner { background-color: transparent; } .oneid-input-adornment__prepend { background-color: var(--td-bg-color-secondarycontainer); color: var(--td-text-color-primary); word-break: keep-all; margin-right: -1px; } .oneid-input-adornment__append { background-color: var(--td-bg-color-secondarycontainer); color: var(--td-text-color-primary); word-break: keep-all; margin-left: -1px; } .oneid-input-adornment__text { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; height: 100%; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-sizing: border-box; box-sizing: border-box; white-space: nowrap; padding: 0 var(--td-comp-paddingLR-s); border: 1px solid var(--td-border-level-2-color); } .oneid-input-adornment > :first-child { border-radius: var(--td-radius-default) 0 0 var(--td-radius-default); } .oneid-input-adornment > :first-child .oneid-input, .oneid-input-adornment > :first-child .oneid-input-adornment__text, .oneid-input-adornment > :first-child .oneid-textarea__inner { border-radius: var(--td-radius-default) 0 0 var(--td-radius-default); } .oneid-input-adornment > :last-child { border-radius: 0 var(--td-radius-default) var(--td-radius-default) 0; } .oneid-input-adornment > :last-child .oneid-input, .oneid-input-adornment > :last-child .oneid-input-adornment__text, .oneid-input-adornment > :last-child .oneid-textarea__inner { border-radius: 0 var(--td-radius-default) var(--td-radius-default) 0; } .oneid-input-adornment > :not(:last-child):hover { z-index: 2; } .oneid-input-adornment > :not(:first-child):not(:last-child) .oneid-input, .oneid-input-adornment > :not(:first-child):not(:last-child) .oneid-textarea__inner { border-radius: 0; } /* Alert */ .oneid-alert { font: var(--td-font-body-medium); color: var(--td-text-color-primary); -webkit-box-sizing: border-box; box-sizing: border-box; margin: 0; padding: 0; list-style: none; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; padding: var(--td-comp-paddingTB-l) var(--td-comp-paddingLR-xl); opacity: 1; -webkit-transition: opacity 0.2s; transition: opacity 0.2s; border-radius: var(--td-radius-medium); } .oneid-alert.oneid-is-hidden { /* 隐藏 */ display: none; } .oneid-alert--closing { opacity: 0; } .oneid-alert--info { background-color: var(--td-brand-color-focus); } .oneid-alert--info .oneid-alert__icon { color: var(--td-brand-color); } .oneid-alert--info .oneid-alert__swiper-trigger-wrap { color: var(--td-brand-color); } .oneid-alert--info .oneid-alert__swiper-trigger--active { color: var(--td-brand-color); } .oneid-alert--success { background-color: var(--td-success-color-focus); } .oneid-alert--success .oneid-alert__icon { color: var(--td-success-color); } .oneid-alert--success .oneid-alert__swiper-trigger-wrap { color: var(--td-success-color-focus); } .oneid-alert--success .oneid-alert__swiper-trigger--active { color: var(--td-success-color); } .oneid-alert--warning { background-color: var(--td-warning-color-focus); } .oneid-alert--warning .oneid-alert__icon { color: var(--td-warning-color); } .oneid-alert--warning .oneid-alert__swiper-trigger-wrap { color: var(--td-warning-color-focus); } .oneid-alert--warning .oneid-alert__swiper-trigger--active { color: var(--td-warning-color); } .oneid-alert--error { background-color: var(--td-error-color-focus); } .oneid-alert--error .oneid-alert__icon { color: var(--td-error-color); } .oneid-alert--error .oneid-alert__swiper-trigger-wrap { color: var(--td-error-color-focus); } .oneid-alert--error .oneid-alert__swiper-trigger--active { color: var(--td-error-color); } .oneid-alert__icon { font-size: var(--td-line-height-body-medium); display: inherit; } .oneid-alert__icon, .oneid-alert__close { -webkit-box-flex: 0; -ms-flex: 0 0 auto; flex: 0 0 auto; line-height: var(--td-line-height-body-small); } .oneid-alert__content { -webkit-box-flex: 1; -ms-flex: 1 1 0px; flex: 1 1 0; font-size: var(--td-font-size-body-medium); line-height: var(--td-line-height-body-medium); overflow: hidden; } .oneid-alert__title, .oneid-alert__message { width: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; } .oneid-alert__title { color: var(--td-text-color-primary); font-weight: bold; } .oneid-alert__title + .oneid-alert__message { margin-top: var(--td-comp-margin-s); } .oneid-alert__description { color: var(--td-text-color-secondary); -webkit-box-flex: 0; -ms-flex: 0 1 auto; flex: 0 1 auto; -webkit-transition: height 0.2s; transition: height 0.2s; } .oneid-alert__operation { -webkit-box-flex: 0; -ms-flex: 0 0 auto; flex: 0 0 auto; padding: 0 var(--td-comp-paddingLR-s); color: var(--td-brand-color); cursor: pointer; -webkit-transition: color 0.2s; transition: color 0.2s; } .oneid-alert__operation:hover { color: var(--td-brand-color-hover); } .oneid-alert__operation:active { color: var(--td-brand-color-active); } .oneid-alert__icon + .oneid-alert__content { margin-left: var(--td-comp-margin-s); } .oneid-alert__collapse { margin-top: var(--td-comp-margin-s); color: var(--td-brand-color); cursor: pointer; } .oneid-alert__close { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; margin-left: var(--td-comp-margin-l); color: var(--td-text-color-secondary); cursor: pointer; -webkit-transition: color 0.2s; transition: color 0.2s; } .oneid-alert__close:hover { color: var(--td-text-color-primary); } .oneid-alert__close > .oneid-icon { font-size: calc(var(--td-line-height-body-medium) - 2px); padding: calc((var(--td-line-height-body-medium) - (var(--td-line-height-body-medium) - 2px)) / 2) 0; } .oneid-badge { font: var(--td-font-body-medium); color: var(--td-text-color-primary); -webkit-box-sizing: border-box; box-sizing: border-box; margin: 0; padding: 0; list-style: none; position: relative; display: inline-block; } .oneid-badge--dot, .oneid-badge--circle, .oneid-badge--round { position: absolute; top: 0; right: 0; color: var(--td-text-color-anti); text-align: center; font: var(--td-font-body-small); -webkit-transform: translate(50%, -50%); transform: translate(50%, -50%); -webkit-transform-origin: 100% 0; transform-origin: 100% 0; -webkit-box-sizing: content-box; box-sizing: content-box; } .oneid-badge--static { position: static; display: inline-block; -webkit-transform: none; transform: none; } .oneid-badge--dot { right: 1px; margin-top: 1px; width: 6px; height: 6px; border-radius: var(--td-radius-circle); background-color: var(--td-error-color); } .oneid-badge--circle, .oneid-badge--round { padding-right: calc((var(--td-comp-size-xxs) - 8px) / 2); padding-left: calc((var(--td-comp-size-xxs) - 8px) / 2); min-width: 8px; height: var(--td-comp-size-xxs); background-color: var(--td-error-color); line-height: var(--td-comp-size-xxs); } .oneid-badge--circle.oneid-size-s, .oneid-badge--round.oneid-size-s { padding-right: calc((var(--td-comp-size-xxxs) - 8px) / 2); padding-left: calc((var(--td-comp-size-xxxs) - 8px) / 2); min-width: 8px; height: var(--td-comp-size-xxxs); line-height: var(--td-comp-size-xxxs); } .oneid-badge--circle { border-radius: calc(var(--td-comp-size-xxs) / 2); } .oneid-badge--round { border-radius: var(--td-radius-default); } .oneid-radio-group { font: var(--td-font-body-medium); color: var(--td-text-color-primary); -webkit-box-sizing: border-box; box-sizing: border-box; margin: 0; padding: 0; list-style: none; display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; max-width: 100%; border-radius: var(--td-radius-default); -ms-flex-wrap: wrap; flex-wrap: wrap; } @-moz-document url-prefix() { .oneid-radio-group { scrollbar-color: var(--td-scrollbar-color) transparent; scrollbar-width: thin; } } .oneid-radio-group::-webkit-scrollbar { width: 4px; height: 4px; } .oneid-radio-group::-webkit-scrollbar-thumb { border: 0px solid transparent; background-clip: content-box; background-color: var(--td-scrollbar-color); border-radius: 7px; } .oneid-radio-group::-webkit-scrollbar-thumb:vertical:hover, .oneid-radio-group::-webkit-scrollbar-thumb:horizontal:hover { background-color: var(--td-scrollbar-hover-color); } .oneid-radio-group .oneid-radio { margin-right: var(--td-comp-margin-xxl); } .oneid-radio-group.oneid-radio-group__outline { -ms-flex-wrap: wrap; flex-wrap: wrap; row-gap: var(--td-comp-margin-xs); } .oneid-radio-group.oneid-radio-group__outline.oneid-size-s .oneid-radio-button { height: var(--td-comp-size-xs); } .oneid-radio-group.oneid-radio-group__outline.oneid-size-m .oneid-radio-button { height: var(--td-comp-size-m); } .oneid-radio-group.oneid-radio-group__outline.oneid-size-l .oneid-radio-button { height: var(--td-comp-size-xl); } .oneid-radio-group.oneid-radio-group__outline .oneid-radio-button:first-child { border-radius: var(--td-radius-default) 0 0 var(--td-radius-default); } .oneid-radio-group.oneid-radio-group__outline .oneid-radio-button:last-child { border-radius: 0 var(--td-radius-default) var(--td-radius-default) 0; } .oneid-radio-group.oneid-radio-group__outline .oneid-radio-button:only-child { border-radius: var(--td-radius-default); } .oneid-radio-group.oneid-radio-group__outline .oneid-radio-button.oneid-is-checked { color: var(--td-brand-color); } .oneid-radio-group.oneid-radio-group__outline .oneid-radio-button.oneid-is-disabled.oneid-is-checked { color: var(--td-brand-color-disabled); border-color: var(--td-brand-color-disabled); background-color: var(--td-bg-color-specialcomponent); } .oneid-radio-group.oneid-radio-group--filled { border-color: var(--td-bg-color-component); padding: var(--td-comp-paddingTB-xxs) var(--td-comp-paddingLR-xxs); border-radius: var(--td-radius-default); background-color: var(--td-bg-color-component); position: relative; } .oneid-radio-group.oneid-radio-group--filled .oneid-radio-group__bg-block { position: absolute; left: 2px; top: 2px; width: 0; height: calc(100% - 4px); background-color: var(--td-bg-color-container-select); -webkit-transition: all 0.2s cubic-bezier(0.38, 0, 0.24, 1); transition: all 0.2s cubic-bezier(0.38, 0, 0.24, 1); border-radius: var(--td-radius-small); } .oneid-radio-group.oneid-radio-group--filled .oneid-radio-button { color: var(--td-text-color-secondary); border: 0; background-color: transparent; } .oneid-radio-group.oneid-radio-group--filled .oneid-radio-button:hover { color: var(--td-text-color-primary); } .oneid-radio-group.oneid-radio-group--filled .oneid-radio-button::before { content: ""; position: absolute; left: 0px; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); width: 1px; height: calc(100% - 16px); background-color: var(--td-component-border); -webkit-transition: opacity 0.2s cubic-bezier(0, 0, 0.15, 1); transition: opacity 0.2s cubic-bezier(0, 0, 0.15, 1); } .oneid-radio-group.oneid-radio-group--filled .oneid-radio-button:first-child::before { opacity: 0; } .oneid-radio-group.oneid-radio-group--filled .oneid-radio-button.oneid-is-checked { position: relative; color: var(--td-text-color-primary); z-index: 1; border: 0; -webkit-transition: color 0.2s linear; transition: color 0.2s linear; } .oneid-radio-group.oneid-radio-group--filled .oneid-radio-button.oneid-is-checked::before { opacity: 0; } .oneid-radio-group.oneid-radio-group--filled .oneid-radio-button.oneid-is-checked + label::before { opacity: 0; } .oneid-radio-group.oneid-radio-group--filled .oneid-radio-button.oneid-is-disabled { background-color: transparent; } .oneid-radio-group.oneid-radio-group--filled .oneid-radio-button.oneid-is-disabled.oneid-is-checked { color: var(--td-text-color-disabled); } .oneid-radio-group.oneid-radio-group--filled .oneid-radio-button.oneid-is-disabled.oneid-is-checked ~ .oneid-radio-group__bg-block { background-color: var(--td-bg-color-component-disabled); } .oneid-radio-group.oneid-radio-group--primary-filled .oneid-radio-group__bg-block { background-color: var(--td-brand-color); } .oneid-radio-group.oneid-radio-group--primary-filled .oneid-radio-button.oneid-is-checked { color: var(--td-text-color-anti); } .oneid-radio-group.oneid-radio-group--primary-filled .oneid-radio-button.oneid-is-disabled.oneid-is-checked { color: var(--td-text-color-anti); } .oneid-radio-group.oneid-radio-group--primary-filled .oneid-radio-button.oneid-is-disabled.oneid-is-checked ~ .oneid-radio-group__bg-block { background-color: var(--td-brand-color-disabled); } .oneid-radio-group.oneid-size-s .oneid-radio-button { height: calc(var(--td-comp-size-xs) - var(--td-comp-paddingTB-xxs) * 2); padding: 0px var(--td-comp-paddingLR-s); font: var(--td-font-body-small); } .oneid-radio-group.oneid-size-s .oneid-radio-button::before { height: calc(100% - 16px); } .oneid-radio-group.oneid-size-m .oneid-radio-button { height: calc(var(--td-comp-size-m) - var(--td-comp-paddingTB-xxs) * 2); padding: var(--td-comp-paddingTB-xs) var(--td-comp-paddingLR-l); font: var(--td-font-body-medium); } .oneid-radio-group.oneid-size-m .oneid-radio-button::before { height: calc(100% - 20px); } .oneid-radio-group.oneid-size-l .oneid-radio-button { height: calc(var(--td-comp-size-xl) - var(--td-comp-paddingTB-xxs) * 2); padding: var(--td-comp-paddingTB-s) var(--td-comp-paddingLR-xl); font: var(--td-font-body-large); } .oneid-radio-group.oneid-size-l .oneid-radio-button::before { height: calc(100% - 24px); } .oneid-radio-group .oneid-radio-button { cursor: pointer; position: relative; border: 1px solid; border-color: var(--td-border-level-2-color); border-right: 0; display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-transition: color 0.2s cubic-bezier(0, 0, 0.15, 1); transition: color 0.2s cubic-bezier(0, 0, 0.15, 1); color: var(--td-text-color-primary); white-space: nowrap; -webkit-box-sizing: border-box; box-sizing: border-box; } .oneid-radio-group .oneid-radio-button:first-child { border-radius: var(--td-radius-small) 0 0 var(--td-radius-small); } .oneid-radio-group .oneid-radio-button:last-child { border-right: 1px solid; border-right-color: var(--td-border-level-2-color); border-radius: 0 var(--td-radius-small) var(--td-radius-small) 0; } .oneid-radio-group .oneid-radio-button__former { opacity: 0; height: 0; width: 0; font: var(--td-font-body-medium); color: var(--td-text-color-primary); -webkit-box-sizing: border-box; box-sizing: border-box; margin: 0; padding: 0; list-style: none; } .oneid-radio-group .oneid-radio-button:hover { color: var(--td-brand-color); } .oneid-radio-group .oneid-radio-button.oneid-is-checked { border-right: 1px solid; border-color: var(--td-brand-color); -webkit-transition: border-color 0.2s cubic-bezier(0, 0, 0.15, 1); transition: border-color 0.2s cubic-bezier(0, 0, 0.15, 1); } .oneid-radio-group .oneid-radio-button.oneid-is-checked + .oneid-radio-button { border-left: 0; } .oneid-radio-group .oneid-radio-button.oneid-is-disabled { cursor: not-allowed; color: var(--td-text-color-disabled); background-color: var(--td-bg-color-component-disabled); } .oneid-radio-group .oneid-radio-button.oneid-is-disabled:hover { border-color: var(--td-border-level-2-color); color: var(--td-text-color-disabled); } .oneid-radio-group .oneid-radio-button.oneid-is-disabled:hover::after { width: 0; } .oneid-radio-group .oneid-radio-button.oneid-is-disabled.oneid-is-checked { color: var(--td-text-color-disabled); } .oneid-radio-group .oneid-radio-button.oneid-is-disabled.oneid-is-checked::after { width: 0; } .oneid-radio { font: var(--td-font-body-medium); color: var(--td-text-color-primary); -webkit-box-sizing: border-box; box-sizing: border-box; margin: 0; padding: 0; list-style: none; position: relative; cursor: pointer; display: inline-block; } .oneid-radio__former { font: var(--td-font-body-medium); color: var(--td-text-color-primary); -webkit-box-sizing: border-box; box-sizing: border-box; margin: 0; padding: 0; list-style: none; opacity: 0; position: absolute; } .oneid-radio__input { position: relative; display: inline-block; width: 16px; height: 16px; vertical-align: middle; border-radius: var(--td-radius-circle); border: 1px solid var(--td-border-level-2-color); background-color: var(--td-bg-color-container); -webkit-transition: border 0.2s cubic-bezier(0, 0, 0.15, 1); transition: border 0.2s cubic-bezier(0, 0, 0.15, 1); } .oneid-radio__input::after { content: ""; position: absolute; top: 50%; left: 50%; width: 16px; height: 16px; margin-top: -8px; margin-left: -8px; -webkit-transform: scale(0.5); transform: scale(0.5); opacity: 0; border-radius: var(--td-radius-circle); background-color: var(--td-brand-color); -webkit-transition: all 0.2s cubic-bezier(0, 0, 0.15, 1); transition: all 0.2s cubic-bezier(0, 0, 0.15, 1); } .oneid-radio__label { display: inline-block; margin-left: var(--td-comp-margin-s); color: var(--td-text-color-primary); vertical-align: middle; font: var(--td-font-body-medium); white-space: nowrap; } .oneid-radio:hover .oneid-radio__input { border-color: var(--td-brand-color); } .oneid-radio.oneid-is-checked .oneid-radio__input { border-color: var(--td-brand-color); } .oneid-radio.oneid-is-checked .oneid-radio__input::after { opacity: 1; } .oneid-radio.oneid-is-disabled { cursor: not-allowed; } .oneid-radio.oneid-is-disabled .oneid-radio__label { color: var(--td-text-color-disabled); } .oneid-radio.oneid-is-disabled .oneid-radio__input { background-color: var(--td-bg-color-component-disabled); } .oneid-radio.oneid-is-disabled:hover .oneid-radio__input { border-color: var(--td-border-level-2-color); } .oneid-radio.oneid-is-disabled.oneid-is-checked .oneid-radio__input { border-color: var(--td-border-level-2-color); } .oneid-radio.oneid-is-disabled.oneid-is-checked .oneid-radio__input::after { background-color: var(--td-text-color-disabled); } .oneid-radio:focus-visible:focus-visible { outline: 2px solid var(--td-brand-color); outline-offset: var(--td-comp-paddingTB-xs); border-radius: 0; } .oneid-checkbox-group { font: var(--td-font-body-medium); color: var(--td-text-color-primary); -webkit-box-sizing: border-box; box-sizing: border-box; margin: 0; padding: 0; list-style: none; display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -ms-flex-wrap: wrap; flex-wrap: wrap; gap: 16px; } .oneid-checkbox { font: var(--td-font-body-medium); -webkit-box-sizing: border-box; box-sizing: border-box; margin: 0; padding: 0; list-style: none; display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; position: relative; cursor: pointer; color: var(--td-text-color-primary); } .oneid-checkbox + .oneid-checkbox { margin-left: inherit; } .oneid-checkbox__former { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; outline: 0; -webkit-appearance: none; -moz-appearance: none; appearance: none; } .oneid-checkbox__input { position: relative; display: inline-block; width: 16px; height: 16px; vertical-align: middle; border: 1px solid var(--td-border-level-2-color); border-radius: var(--td-radius-default); background-color: var(--td-bg-color-container); -webkit-box-sizing: border-box; box-sizing: border-box; -ms-flex-negative: 0; flex-shrink: 0; } .oneid-checkbox__input::after { content: ""; position: absolute; opacity: 0; -webkit-box-sizing: border-box; box-sizing: border-box; } .oneid-checkbox__label { display: inline-block; margin-left: 8px; vertical-align: middle; font: var(--td-font-body-medium); } .oneid-checkbox:hover .oneid-checkbox__input { border-color: var(--td-brand-color); -webkit-transition: border-color 0.2s linear; transition: border-color 0.2s linear; } .oneid-checkbox.oneid-is-checked .oneid-checkbox__input { border-color: var(--td-brand-color); background-color: var(--td-brand-color); -webkit-transition: background-color 0.2s cubic-bezier(0.82, 0, 1, 0.9); transition: background-color 0.2s cubic-bezier(0.82, 0, 1, 0.9); } .oneid-checkbox.oneid-is-checked .oneid-checkbox__input::after { opacity: 1; top: 6px; left: 3px; width: 5px; height: 9px; border: 2px solid var(--td-text-color-anti); border-radius: 0 0 1px; border-top: 0; border-left: 0; -webkit-transform: rotate(45deg) scale(1) translate(-50%, -50%); transform: rotate(45deg) scale(1) translate(-50%, -50%); background: transparent; } .oneid-checkbox.oneid-is-indeterminate .oneid-checkbox__input { border-color: var(--td-brand-color); background-color: var(--td-brand-color); -webkit-transition: background-color 0.2s cubic-bezier(0.82, 0, 1, 0.9); transition: background-color 0.2s cubic-bezier(0.82, 0, 1, 0.9); } .oneid-checkbox.oneid-is-indeterminate .oneid-checkbox__input::after { opacity: 1; width: 16px; height: 4px; left: -1px; right: 0; top: 5px; border: unset; -webkit-transform: scale(0.5); transform: scale(0.5); background-color: var(--td-font-white-1); } .oneid-checkbox.oneid-is-disabled { cursor: not-allowed; } .oneid-checkbox.oneid-is-disabled .oneid-checkbox__label { color: var(--td-text-color-disabled); } .oneid-checkbox.oneid-is-disabled .oneid-checkbox__input { background-color: var(--td-bg-color-component-disabled); } .oneid-checkbox.oneid-is-disabled:hover .oneid-checkbox__input { border-color: var(--td-border-level-2-color); } .oneid-checkbox.oneid-is-disabled.oneid-is-checked .oneid-checkbox__input { border-color: var(--td-border-level-2-color); } .oneid-checkbox.oneid-is-disabled.oneid-is-checked .oneid-checkbox__input::after { border-color: var(--td-text-color-disabled); } .oneid-checkbox.oneid-is-disabled.oneid-is-indeterminate .oneid-checkbox__input { border-color: var(--td-border-level-2-color); } .oneid-checkbox.oneid-is-disabled.oneid-is-indeterminate .oneid-checkbox__input::after { background-color: var(--td-text-color-disabled); } .oneid-checkbox:focus-visible:focus-visible { outline: 2px solid var(--td-brand-color); outline-offset: var(--td-comp-paddingTB-xs); border-radius: 0; } @-webkit-keyframes t-fade-in { from { opacity: 0; } to { opacity: 1; } } @keyframes t-fade-in { from { opacity: 0; } to { opacity: 1; } } @-webkit-keyframes t-fade-out { from { opacity: 1; } to { opacity: 0; } } @keyframes t-fade-out { from { opacity: 1; } to { opacity: 0; } } @-webkit-keyframes t-spin { from { -webkit-transform: rotate(0deg); transform: rotate(0deg); } to { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @keyframes t-spin { from { -webkit-transform: rotate(0deg); transform: rotate(0deg); } to { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } .oneid-icon-loading { -webkit-animation: t-spin 1s linear infinite; animation: t-spin 1s linear infinite; } @-webkit-keyframes t-zoom-out { from { -webkit-transform: scale(0.2); transform: scale(0.2); } to { -webkit-transform: scale(1); transform: scale(1); } } @keyframes t-zoom-out { from { -webkit-transform: scale(0.2); transform: scale(0.2); } to { -webkit-transform: scale(1); transform: scale(1); } } .oneid-input-number { font: var(--td-font-body-medium); color: var(--td-text-color-primary); margin: 0; padding: 0; list-style: none; display: inline-block; position: relative; -webkit-box-sizing: border-box; box-sizing: border-box; padding: 0 var(--td-comp-size-m); -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; width: 144px; } .oneid-input-number:not(.oneid-input-number--column) > .oneid-input-number__decrease + .oneid-input__wrap { margin-left: var(--td-comp-margin-xs); } .oneid-input-number input::-webkit-outer-spin-button, .oneid-input-number input::-webkit-inner-spin-button { -webkit-appearance: none; appearance: none; } .oneid-input-number input[type=number] { -webkit-appearance: textfield; -moz-appearance: textfield; appearance: textfield; } .oneid-input-number > .oneid-input__tips { position: absolute; left: 0; } .oneid-input-number input + .oneid-input__suffix { margin-left: var(--td-comp-paddingLR-s); } .oneid-input-number .oneid-input__prefix { margin-right: var(--td-comp-paddingLR-s); } .oneid-input-number .oneid-input { color: var(--td-text-color-primary); } .oneid-input-number.oneid-input-number--auto-width { width: auto; } .oneid-input-number.oneid-input-number--auto-width.oneid-is-controls-right { min-width: auto; width: auto; } .oneid-input-number.oneid-input-number--auto-width .oneid-input__inner { min-width: 42px; } .oneid-input-number .oneid-input-number__decrease, .oneid-input-number .oneid-input-number__increase { width: var(--td-comp-size-m); height: var(--td-comp-size-m); position: absolute; top: 0; border: 1px solid var(--td-border-level-2-color); -webkit-box-sizing: border-box; box-sizing: border-box; border-radius: var(--td-radius-default); background-color: transparent; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; z-index: 1; cursor: pointer; -webkit-transition: all cubic-bezier(0.38, 0, 0.24, 1) 0.2s; transition: all cubic-bezier(0.38, 0, 0.24, 1) 0.2s; } .oneid-input-number .oneid-input-number__decrease:hover, .oneid-input-number .oneid-input-number__increase:hover { color: var(--td-brand-color); border-color: var(--td-brand-color); } .oneid-input-number .oneid-input-number__decrease:hover .oneid-icon, .oneid-input-number .oneid-input-number__increase:hover .oneid-icon { color: var(--td-brand-color); } .oneid-input-number .oneid-input-number__decrease:active, .oneid-input-number .oneid-input-number__increase:active { color: var(--td-brand-color); background-color: var(--td-bg-color-container-hover); } .oneid-input-number .oneid-input-number__decrease .oneid-icon, .oneid-input-number .oneid-input-number__increase .oneid-icon { position: relative; z-index: 1; font-size: var(--td-font-size-body-large); color: var(--td-text-color-secondary); } .oneid-input-number .oneid-input-number__decrease.oneid-is-disabled, .oneid-input-number .oneid-input-number__increase.oneid-is-disabled { color: var(--td-text-color-disabled); cursor: no-drop; background-color: var(--td-bg-color-component-disabled); } .oneid-input-number .oneid-input-number__decrease.oneid-is-disabled .oneid-icon, .oneid-input-number .oneid-input-number__increase.oneid-is-disabled .oneid-icon { color: var(--td-text-color-disabled); } .oneid-input-number .oneid-input-number__decrease.oneid-is-disabled:hover, .oneid-input-number .oneid-input-number__increase.oneid-is-disabled:hover { border-color: var(--td-border-level-2-color); } .oneid-input-number .oneid-input-number__decrease.oneid-is-disabled:hover .oneid-icon, .oneid-input-number .oneid-input-number__increase.oneid-is-disabled:hover .oneid-icon { color: var(--td-text-color-disabled); } .oneid-input-number .oneid-input-number__decrease.oneid-is-disabled::-webkit-input-placeholder, .oneid-input-number .oneid-input-number__increase.oneid-is-disabled::-webkit-input-placeholder { color: var(--td-text-color-disabled); } .oneid-input-number .oneid-input-number__decrease.oneid-is-disabled::-moz-placeholder, .oneid-input-number .oneid-input-number__increase.oneid-is-disabled::-moz-placeholder { color: var(--td-text-color-disabled); } .oneid-input-number .oneid-input-number__decrease.oneid-is-disabled:-ms-input-placeholder, .oneid-input-number .oneid-input-number__increase.oneid-is-disabled:-ms-input-placeholder { color: var(--td-text-color-disabled); } .oneid-input-number .oneid-input-number__decrease.oneid-is-disabled::-ms-input-placeholder, .oneid-input-number .oneid-input-number__increase.oneid-is-disabled::-ms-input-placeholder { color: var(--td-text-color-disabled); } .oneid-input-number .oneid-input-number__decrease.oneid-is-disabled::placeholder, .oneid-input-number .oneid-input-number__increase.oneid-is-disabled::placeholder { color: var(--td-text-color-disabled); } .oneid-input-number .oneid-input-number__decrease { left: 0; } .oneid-input-number .oneid-input-number__increase { right: -8px; } .oneid-input-number.oneid-is-disabled .oneid-input { cursor: no-drop; background-color: var(--td-bg-color-component-disabled); color: var(--td-text-color-disabled); } .oneid-input-number.oneid-is-disabled .oneid-input:hover, .oneid-input-number.oneid-is-disabled .oneid-input:focus, .oneid-input-number.oneid-is-disabled .oneid-input:active { border-color: var(--td-border-level-2-color); } .oneid-input-number.oneid-is-disabled .oneid-input-number__decrease, .oneid-input-number.oneid-is-disabled .oneid-input-number__increase { color: var(--td-text-color-disabled); cursor: no-drop; background-color: var(--td-bg-color-component-disabled); } .oneid-input-number.oneid-is-disabled .oneid-input-number__decrease .oneid-icon, .oneid-input-number.oneid-is-disabled .oneid-input-number__increase .oneid-icon { color: var(--td-text-color-secondary); } .oneid-input-number.oneid-size-s { width: 120px; padding: 0 var(--td-comp-size-xs); } .oneid-input-number.oneid-size-s .oneid-input { font-size: var(--td-font-size-body-small); height: var(--td-comp-size-xs); line-height: var(--td-comp-size-xs); } .oneid-input-number.oneid-size-s .oneid-input-number__decrease, .oneid-input-number.oneid-size-s .oneid-input-number__increase { font-size: var(--td-font-size-body-medium); width: var(--td-comp-size-xs); height: var(--td-comp-size-xs); } .oneid-input-number.oneid-size-l { width: 168px; padding: 0 var(--td-comp-size-xl); } .oneid-input-number.oneid-size-l .oneid-input { height: var(--td-comp-size-xl); line-height: var(--td-comp-size-xl); } .oneid-input-number.oneid-size-l .oneid-input-number__decrease, .oneid-input-number.oneid-size-l .oneid-input-number__increase { font-size: 18px; width: var(--td-comp-size-xl); height: var(--td-comp-size-xl); } .oneid-input-number.oneid-size-l.oneid-is-controls-right .oneid-input { height: var(--td-comp-size-xl); line-height: var(--td-comp-size-xl); padding-right: calc(var(--td-comp-size-xl) + var(--td-comp-paddingLR-s)); } .oneid-input-number.oneid-size-l.oneid-is-controls-right .oneid-input-number__decrease, .oneid-input-number.oneid-size-l.oneid-is-controls-right .oneid-input-number__increase { width: var(--td-comp-size-xl); font-size: var(--td-font-size-body-large); } .oneid-input-number.oneid-size-l .oneid-input--prefix { font: var(--td-font-body-large); padding: 0 var(--td-comp-paddingLR-m); } .oneid-input-number.oneid-input-number--normal { padding: 0; border-radius: var(--td-radius-default); } .oneid-input-number.oneid-input-number--normal.oneid-is-disabled { cursor: no-drop; color: var(--td-text-color-disabled); } .oneid-input-number.oneid-input-number--normal.oneid-is-disabled:hover .oneid-input { border-color: var(--td-border-level-2-color); } .oneid-input-number.oneid-input-number--normal.oneid-is-disabled::-webkit-input-placeholder { color: var(--td-text-color-disabled); } .oneid-input-number.oneid-input-number--normal.oneid-is-disabled::-moz-placeholder { color: var(--td-text-color-disabled); } .oneid-input-number.oneid-input-number--normal.oneid-is-disabled:-ms-input-placeholder { color: var(--td-text-color-disabled); } .oneid-input-number.oneid-input-number--normal.oneid-is-disabled::-ms-input-placeholder { color: var(--td-text-color-disabled); } .oneid-input-number.oneid-input-number--normal.oneid-is-disabled::placeholder { color: var(--td-text-color-disabled); } .oneid-input-number.oneid-input-number--normal.oneid-is-disabled .oneid-input:focus { -webkit-box-shadow: none; box-shadow: none; } .oneid-input-number.oneid-is-controls-right { width: 96px; padding: 0; } .oneid-input-number.oneid-is-controls-right:hover .oneid-input-number__decrease, .oneid-input-number.oneid-is-controls-right:hover .oneid-input-number__increase { opacity: 1; visibility: visible; } .oneid-input-number.oneid-is-controls-right .oneid-input { width: 100%; -webkit-box-sizing: border-box; box-sizing: border-box; margin: 0; padding-right: calc(var(--td-comp-size-m) + var(--td-comp-paddingLR-s)); border-radius: var(--td-radius-default); } .oneid-input-number.oneid-is-controls-right .oneid-input-number__decrease, .oneid-input-number.oneid-is-controls-right .oneid-input-number__increase { width: var(--td-comp-size-m); height: calc(var(--td-comp-size-m) / 2 - 2px); border: 0; left: initial; top: initial; right: 1px; border-radius: 0; background: var(--td-bg-color-secondarycontainer); opacity: 0; visibility: hidden; z-index: 2; } .oneid-input-number.oneid-is-controls-right .oneid-input-number__decrease .oneid-icon, .oneid-input-number.oneid-is-controls-right .oneid-input-number__increase .oneid-icon { font-size: var(--td-font-size-body-small); } .oneid-input-number.oneid-is-controls-right .oneid-input-number__decrease:hover, .oneid-input-number.oneid-is-controls-right .oneid-input-number__increase:hover { background: var(--td-bg-color-component-hover); } .oneid-input-number.oneid-is-controls-right .oneid-input-number__decrease:hover .oneid-icon, .oneid-input-number.oneid-is-controls-right .oneid-input-number__increase:hover .oneid-icon { color: var(--td-text-color-primary); } .oneid-input-number.oneid-is-controls-right .oneid-input-number__decrease.oneid-is-disabled, .oneid-input-number.oneid-is-controls-right .oneid-input-number__increase.oneid-is-disabled { color: var(--td-text-color-disabled); cursor: no-drop; background-color: var(--td-bg-color-component-disabled); } .oneid-input-number.oneid-is-controls-right .oneid-input-number__decrease.oneid-is-disabled .oneid-icon, .oneid-input-number.oneid-is-controls-right .oneid-input-number__increase.oneid-is-disabled .oneid-icon { color: var(--td-text-color-disabled); } .oneid-input-number.oneid-is-controls-right .oneid-input-number__decrease.oneid-is-disabled:hover, .oneid-input-number.oneid-is-controls-right .oneid-input-number__increase.oneid-is-disabled:hover { border-color: var(--td-border-level-2-color); } .oneid-input-number.oneid-is-controls-right .oneid-input-number__decrease.oneid-is-disabled:hover .oneid-icon, .oneid-input-number.oneid-is-controls-right .oneid-input-number__increase.oneid-is-disabled:hover .oneid-icon { color: var(--td-text-color-disabled); } .oneid-input-number.oneid-is-controls-right .oneid-input-number__decrease.oneid-is-disabled::-webkit-input-placeholder, .oneid-input-number.oneid-is-controls-right .oneid-input-number__increase.oneid-is-disabled::-webkit-input-placeholder { color: var(--td-text-color-disabled); } .oneid-input-number.oneid-is-controls-right .oneid-input-number__decrease.oneid-is-disabled::-moz-placeholder, .oneid-input-number.oneid-is-controls-right .oneid-input-number__increase.oneid-is-disabled::-moz-placeholder { color: var(--td-text-color-disabled); } .oneid-input-number.oneid-is-controls-right .oneid-input-number__decrease.oneid-is-disabled:-ms-input-placeholder, .oneid-input-number.oneid-is-controls-right .oneid-input-number__increase.oneid-is-disabled:-ms-input-placeholder { color: var(--td-text-color-disabled); } .oneid-input-number.oneid-is-controls-right .oneid-input-number__decrease.oneid-is-disabled::-ms-input-placeholder, .oneid-input-number.oneid-is-controls-right .oneid-input-number__increase.oneid-is-disabled::-ms-input-placeholder { color: var(--td-text-color-disabled); } .oneid-input-number.oneid-is-controls-right .oneid-input-number__decrease.oneid-is-disabled::placeholder, .oneid-input-number.oneid-is-controls-right .oneid-input-number__increase.oneid-is-disabled::placeholder { color: var(--td-text-color-disabled); } .oneid-input-number.oneid-is-controls-right .oneid-input-number__increase { top: 1px; border-top-right-radius: calc(var(--td-radius-default) - 1px); } .oneid-input-number.oneid-is-controls-right .oneid-input-number__decrease { top: calc(var(--td-comp-size-m) / 2 - 2px + 3px); border-bottom-right-radius: calc(var(--td-radius-default) - 1px); } .oneid-input-number.oneid-is-controls-right.oneid-size-l { width: 120px; } .oneid-input-number.oneid-is-controls-right.oneid-size-l .oneid-input-number__increase, .oneid-input-number.oneid-is-controls-right.oneid-size-l .oneid-input-number__decrease { height: calc(var(--td-comp-size-xl) / 2 - 2px); } .oneid-input-number.oneid-is-controls-right.oneid-size-l .oneid-input-number__decrease { top: calc(var(--td-comp-size-xl) / 2 - 2px + 3px); } .oneid-input-number.oneid-is-controls-right.oneid-size-s { width: 88px; } .oneid-input-number.oneid-is-controls-right.oneid-size-s .oneid-input-number__increase, .oneid-input-number.oneid-is-controls-right.oneid-size-s .oneid-input-number__decrease { height: calc(var(--td-comp-size-xs) / 2 - 2px); } .oneid-input-number.oneid-is-controls-right.oneid-size-s .oneid-input-number__decrease { top: calc(var(--td-comp-size-xs) / 2 - 2px + 3px); } .oneid-input-number--row .oneid-input__wrap { width: initial; margin-right: var(--td-comp-margin-xs); } .oneid-input-number--row .oneid-input-number__increase { right: 0; } .default-step-icon { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; width: 22px; height: 22px; text-align: center; border-radius: var(--td-radius-circle); font-size: var(--td-font-size-body-large); } .oneid-steps { font: var(--td-font-body-medium); color: var(--td-text-color-primary); -webkit-box-sizing: border-box; box-sizing: border-box; margin: 0; padding: 0; list-style: none; display: -webkit-box; display: -ms-flexbox; display: flex; width: 100%; } .oneid-steps .oneid-steps-item { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; overflow: hidden; vertical-align: top; margin-right: var(--td-comp-margin-s); position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; } .oneid-steps .oneid-steps-item:last-child { -webkit-box-flex: 0; -ms-flex: none; flex: none; } .oneid-steps .oneid-steps-item__inner { width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; } .oneid-steps .oneid-steps-item__inner.oneid-steps-item--clickable { cursor: pointer; } .oneid-steps .oneid-steps-item--finish .oneid-steps-item__icon .oneid-icon { color: var(--td-brand-color); } .oneid-steps .oneid-steps-item--finish .oneid-steps-item__icon--number { border-color: var(--td-brand-color); } .oneid-steps .oneid-steps-item--finish .oneid-steps-item__title { color: var(--td-text-color-primary); font-weight: normal; } .oneid-steps .oneid-steps-item--finish .oneid-steps-item__description { color: var(--td-text-color-secondary); } .oneid-steps .oneid-steps-item--process .oneid-steps-item__icon .oneid-icon { color: var(--td-brand-color); } .oneid-steps .oneid-steps-item--process .oneid-steps-item__icon--number { border-color: var(--td-brand-color); background-color: var(--td-brand-color); color: var(--td-text-color-anti); font-weight: bold; } .oneid-steps .oneid-steps-item--process .oneid-steps-item__title { color: var(--td-brand-color); font-weight: bold; } .oneid-steps .oneid-steps-item--process .oneid-steps-item__description { color: var(--td-text-color-secondary); } .oneid-steps .oneid-steps-item--error .oneid-steps-item__icon .oneid-icon { color: var(--td-error-color); } .oneid-steps .oneid-steps-item--error .oneid-steps-item__icon--number { color: var(--td-error-color); border-color: var(--td-error-color); } .oneid-steps .oneid-steps-item--error .oneid-steps-item__title { color: var(--td-error-color); } .oneid-steps .oneid-steps-item--error .oneid-steps-item__description { color: var(--td-text-color-secondary); } .oneid-steps .oneid-steps-item__icon { vertical-align: top; font-size: var(--td-font-size-body-medium); margin-right: var(--td-comp-margin-s); color: var(--td-text-color-placeholder); } .oneid-steps .oneid-steps-item__icon--number { color: var(--td-text-color-placeholder); border: 1px solid var(--td-text-color-placeholder); display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; width: 22px; height: 22px; text-align: center; border-radius: var(--td-radius-circle); font-size: var(--td-font-size-body-large); } .oneid-steps .oneid-steps-item__icon--finish { border: 1px solid var(--td-brand-color); display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; width: 22px; height: 22px; text-align: center; border-radius: var(--td-radius-circle); font-size: var(--td-font-size-body-large); } .oneid-steps .oneid-steps-item__icon--error { border: 1px solid var(--td-error-color); color: #000; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; width: 22px; height: 22px; text-align: center; border-radius: var(--td-radius-circle); font-size: var(--td-font-size-body-large); } .oneid-steps .oneid-steps-item__icon > .oneid-icon { font-size: calc(var(--td-font-size-body-medium) + 10px); } .oneid-steps .oneid-steps-item__title { position: relative; padding-right: var(--td-comp-margin-s); color: var(--td-text-color-placeholder); font-size: var(--td-font-size-body-large); line-height: 24px; } .oneid-steps .oneid-steps-item__description { color: var(--td-text-color-placeholder); font-size: var(--td-font-size-body-medium); margin-bottom: var(--td-comp-margin-xs); line-height: 22px; } .oneid-steps--line-separator .oneid-steps-item:before, .oneid-steps--line-separator .oneid-steps-item:after, .oneid-steps--line-separator .oneid-steps-item__title:after { border-style: solid; } .oneid-steps--dashed-separator .oneid-steps-item:before, .oneid-steps--dashed-separator .oneid-steps-item:after, .oneid-steps--dashed-separator .oneid-steps-item__title:after { border-style: dashed; } .oneid-steps--horizontal.oneid-steps--default-anchor .oneid-steps-item__title { width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; margin-bottom: var(--td-comp-margin-xs); } .oneid-steps--horizontal.oneid-steps--default-anchor .oneid-steps-item__icon__number { width: 22px; height: 22px; } .oneid-steps--horizontal.oneid-steps--default-anchor .oneid-steps-item__icon > .oneid-icon { font-size: calc(var(--td-font-size-body-medium) + 10px); } .oneid-steps--horizontal.oneid-steps--default-anchor .oneid-steps-item:not(:last-child) .oneid-steps-item__title:after { content: ""; display: block; width: 9999px; border-left: 0; border-top: 0; border-bottom-width: 1px; border-bottom-color: var(--td-text-color-placeholder); position: absolute; left: 100%; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); } .oneid-steps--horizontal.oneid-steps--default-anchor.oneid-steps--arrow-separator .oneid-steps-item:not(:last-child):after { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; height: 24px; content: "^"; -webkit-transform: rotateZ(90deg); transform: rotateZ(90deg); display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: end; -ms-flex-align: end; align-items: flex-end; border: 0; font-size: var(--td-font-size-body-large); color: var(--td-text-color-placeholder); } .oneid-steps--horizontal.oneid-steps--default-anchor.oneid-steps--arrow-separator .oneid-steps-item--finish:not(:last-child)::after { color: var(--td-brand-color); } .oneid-steps--horizontal.oneid-steps--default-anchor .oneid-steps-item--finish:not(:last-child) .oneid-steps-item__title:after { border-bottom-width: 2px; border-bottom-color: var(--td-brand-color); color: var(--td-brand-color); } .oneid-steps--horizontal.oneid-steps--default-anchor.oneid-steps--reverse .oneid-steps-item:not(:last-child) .oneid-steps-item__title:after { content: ""; display: block; width: 9999px; border-left: 0; border-top: 0; border-bottom-width: 1px; border-bottom-color: var(--td-text-color-placeholder); position: absolute; left: 100%; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); } .oneid-steps--horizontal.oneid-steps--default-anchor.oneid-steps--reverse.oneid-steps--arrow-separator .oneid-steps-item:not(:last-child):after { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; height: 24px; content: "^"; -webkit-transform: rotateZ(90deg); transform: rotateZ(90deg); display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: end; -ms-flex-align: end; align-items: flex-end; border: 0; font-size: var(--td-font-size-body-large); color: var(--td-text-color-placeholder); } .oneid-steps--horizontal.oneid-steps--default-anchor.oneid-steps--reverse.oneid-steps--arrow-separator .oneid-steps-item--finish:not(:last-child)::after { color: var(--td-brand-color); } .oneid-steps--horizontal.oneid-steps--default-anchor.oneid-steps--reverse.oneid-steps--arrow-separator .oneid-steps-item:not(:last-child):after { -webkit-transform: rotateZ(-90deg); transform: rotateZ(-90deg); } .oneid-steps--horizontal.oneid-steps--default-anchor.oneid-steps--reverse.oneid-steps--arrow-separator .oneid-steps-item--process:not(:last-child)::after, .oneid-steps--horizontal.oneid-steps--default-anchor.oneid-steps--reverse.oneid-steps--arrow-separator .oneid-steps-item--finish:not(:last-child)::after { color: var(--td-brand-color); } .oneid-steps--horizontal.oneid-steps--default-anchor.oneid-steps--reverse .oneid-steps-item--finish:not(:last-child) .oneid-steps-item__title:after { border-bottom-width: 2px; border-bottom-color: var(--td-brand-color); color: var(--td-brand-color); } .oneid-steps--horizontal.oneid-steps--default-anchor.oneid-steps--reverse .oneid-steps-item--process:not(:last-child) .oneid-steps-item__title:after, .oneid-steps--horizontal.oneid-steps--default-anchor.oneid-steps--reverse .oneid-steps-item--finish:not(:last-child) .oneid-steps-item__title:after { border-bottom-width: 2px; border-bottom-color: var(--td-brand-color); color: var(--td-brand-color); } .oneid-steps--horizontal.oneid-steps--dot-anchor .oneid-steps-item { overflow: visible; } .oneid-steps--horizontal.oneid-steps--dot-anchor .oneid-steps-item .oneid-steps-item__title { padding-right: 0; margin-bottom: var(--td-comp-margin-xs); } .oneid-steps--horizontal.oneid-steps--dot-anchor .oneid-steps-item--finish .oneid-steps-item__icon { border-color: var(--td-brand-color); } .oneid-steps--horizontal.oneid-steps--dot-anchor .oneid-steps-item--process .oneid-steps-item__icon { background: var(--td-brand-color); border-color: var(--td-brand-color); } .oneid-steps--horizontal.oneid-steps--dot-anchor .oneid-steps-item--error .oneid-steps-item__icon { background: var(--td-error-color); border-color: var(--td-error-color); } .oneid-steps--horizontal.oneid-steps--dot-anchor .oneid-steps-item__inner { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .oneid-steps--horizontal.oneid-steps--dot-anchor .oneid-steps-item__icon { display: block; width: 8px; height: 8px; border: 2px solid var(--td-text-color-placeholder); border-radius: var(--td-radius-circle); margin-bottom: var(--td-comp-margin-xs); position: relative; -webkit-box-sizing: border-box; box-sizing: border-box; -ms-flex-negative: 0; flex-shrink: 0; } .oneid-steps--horizontal.oneid-steps--dot-anchor .oneid-steps-item__content { text-align: center; width: 140px; } .oneid-steps--horizontal.oneid-steps--dot-anchor.oneid-steps--arrow-separator .oneid-steps-item:not(:last-child)::after { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; content: "^"; display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; border: 0; font-size: var(--td-font-size-body-large); -webkit-transform: rotateZ(90deg); transform: rotateZ(90deg); color: var(--td-text-color-placeholder); } .oneid-steps--horizontal.oneid-steps--dot-anchor.oneid-steps--arrow-separator .oneid-steps-item--finish:not(:last-child)::after { color: var(--td-brand-color); } .oneid-steps--horizontal.oneid-steps--dot-anchor .oneid-steps-item:not(:last-child)::after { content: ""; display: block; width: calc(100% - 16px); border-left: 0; border-top: 0; border-bottom-width: 1px; border-bottom-color: var(--td-text-color-placeholder); position: absolute; left: 78px; top: 2.5px; } .oneid-steps--horizontal.oneid-steps--dot-anchor .oneid-steps-item:not(:last-child):not(.oneid-steps-item--finish)::after { border-color: var(--td-text-color-placeholder); } .oneid-steps--horizontal.oneid-steps--dot-anchor .oneid-steps-item--finish:not(:last-child)::after { color: var(--td-brand-color); border-bottom-color: var(--td-brand-color); border-bottom-width: 2px; } .oneid-steps--horizontal.oneid-steps--dot-anchor.oneid-steps--reverse.oneid-steps--arrow-separator .oneid-steps-item:not(:last-child)::after { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; content: "^"; display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; border: 0; font-size: var(--td-font-size-body-large); -webkit-transform: rotateZ(90deg); transform: rotateZ(90deg); color: var(--td-text-color-placeholder); } .oneid-steps--horizontal.oneid-steps--dot-anchor.oneid-steps--reverse.oneid-steps--arrow-separator .oneid-steps-item--finish:not(:last-child)::after { color: var(--td-brand-color); } .oneid-steps--horizontal.oneid-steps--dot-anchor.oneid-steps--reverse.oneid-steps--arrow-separator .oneid-steps-item:not(:last-child)::after { -webkit-transform: rotateZ(-90deg); transform: rotateZ(-90deg); } .oneid-steps--horizontal.oneid-steps--dot-anchor.oneid-steps--reverse.oneid-steps--arrow-separator .oneid-steps-item--process:not(:last-child)::after, .oneid-steps--horizontal.oneid-steps--dot-anchor.oneid-steps--reverse.oneid-steps--arrow-separator .oneid-steps-item--finish:not(:last-child)::after { color: var(--td-brand-color); } .oneid-steps--horizontal.oneid-steps--dot-anchor.oneid-steps--reverse .oneid-steps-item:not(:last-child)::after { content: ""; display: block; width: calc(100% - 16px); border-left: 0; border-top: 0; border-bottom-width: 1px; border-bottom-color: var(--td-text-color-placeholder); position: absolute; left: 78px; top: 2.5px; } .oneid-steps--horizontal.oneid-steps--dot-anchor.oneid-steps--reverse .oneid-steps-item:not(:last-child):not(.oneid-steps-item--finish)::after { border-color: var(--td-text-color-placeholder); } .oneid-steps--horizontal.oneid-steps--dot-anchor.oneid-steps--reverse .oneid-steps-item--finish:not(:last-child)::after { color: var(--td-brand-color); border-bottom-color: var(--td-brand-color); border-bottom-width: 2px; } .oneid-steps--horizontal.oneid-steps--dot-anchor.oneid-steps--reverse .oneid-steps-item--process:not(:last-child)::after, .oneid-steps--horizontal.oneid-steps--dot-anchor.oneid-steps--reverse .oneid-steps-item--finish:not(:last-child)::after { color: var(--td-brand-color); border-bottom-color: var(--td-brand-color); border-bottom-width: 2px; } .oneid-steps--vertical { width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } .oneid-steps--vertical.oneid-steps--positive.oneid-steps--arrow-separator .oneid-steps-item:not(:last-child)::before { content: "^"; border: 0; height: calc(100% - 24px); position: absolute; top: 24px; left: 6px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; font-size: var(--td-font-size-body-large); -webkit-transform: rotateZ(180deg); transform: rotateZ(180deg); color: var(--td-text-color-placeholder); } .oneid-steps--vertical.oneid-steps--positive.oneid-steps--arrow-separator .oneid-steps-item--finish:not(:last-child)::before { color: var(--td-brand-color); } .oneid-steps--vertical.oneid-steps--positive .oneid-steps-item { padding-bottom: var(--td-comp-margin-xxl); margin-bottom: 5px; } .oneid-steps--vertical.oneid-steps--positive .oneid-steps-item:not(:last-child)::before { content: ""; display: block; height: 100%; border-left: 0; border-top: 0; border-right-width: 1px; border-right-color: var(--td-text-color-placeholder); position: absolute; top: 35px; left: 11px; } .oneid-steps--vertical.oneid-steps--positive .oneid-steps-item--finish:not(:last-child)::before { border-right-width: 2px; border-right-color: var(--td-brand-color); color: var(--td-brand-color); } .oneid-steps--vertical.oneid-steps--default-anchor .oneid-steps-item__content { margin-left: 0px; } .oneid-steps--vertical.oneid-steps--default-anchor .oneid-steps-item__title { margin-bottom: var(--td-comp-margin-xs); } .oneid-steps--vertical.oneid-steps--dot-anchor.oneid-steps--positive.oneid-steps--arrow-separator .oneid-steps-item:not(:last-child)::before { content: "^"; border: 0; height: calc(100% - 4px); position: absolute; top: 8px; left: 0; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; font-size: var(--td-font-size-body-medium); color: var(--td-text-color-placeholder); } .oneid-steps--vertical.oneid-steps--dot-anchor.oneid-steps--positive.oneid-steps--arrow-separator .oneid-steps-item--finish:not(:last-child)::before { color: var(--td-brand-color); } .oneid-steps--vertical.oneid-steps--dot-anchor.oneid-steps--positive .oneid-steps-item:not(:last-child)::before { content: ""; display: block; height: 100%; border-bottom: 0; border-left: 0; border-right-width: 1px; border-right-color: var(--td-text-color-placeholder); position: absolute; left: 3.5px; top: 17px; } .oneid-steps--vertical.oneid-steps--dot-anchor.oneid-steps--positive .oneid-steps-item--finish:not(:last-child)::before { color: var(--td-brand-color); border-right-color: var(--td-brand-color); border-right-width: 2px; } .oneid-steps--vertical.oneid-steps--dot-anchor.oneid-steps--positive .oneid-steps-item:not(:last-child).oneid-steps-item--default::before { border-color: var(--td-text-color-placeholder); } .oneid-steps--vertical.oneid-steps--dot-anchor .oneid-steps-item { margin-bottom: 0; } .oneid-steps--vertical.oneid-steps--dot-anchor .oneid-steps-item .oneid-steps-item__title { margin-bottom: var(--td-comp-margin-xs); } .oneid-steps--vertical.oneid-steps--dot-anchor .oneid-steps-item--finish .oneid-steps-item__icon { border-color: var(--td-brand-color); } .oneid-steps--vertical.oneid-steps--dot-anchor .oneid-steps-item--process .oneid-steps-item__icon { background: var(--td-brand-color); border-color: var(--td-brand-color); } .oneid-steps--vertical.oneid-steps--dot-anchor .oneid-steps-item--error .oneid-steps-item__icon { background: var(--td-error-color); border-color: var(--td-error-color); } .oneid-steps--vertical.oneid-steps--dot-anchor .oneid-steps-item__icon { display: block; width: 8px; height: 8px; border: 2px solid var(--td-text-color-placeholder); border-radius: var(--td-radius-circle); margin-bottom: var(--td-comp-margin-xs); position: relative; -webkit-box-sizing: border-box; box-sizing: border-box; -ms-flex-negative: 0; flex-shrink: 0; top: 8px; } .oneid-steps--vertical.oneid-steps--reverse.oneid-steps--arrow-separator .oneid-steps-item:not(:last-child)::before { content: "^"; border: 0; height: calc(100% - 24px); position: absolute; top: 24px; left: 6px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; font-size: var(--td-font-size-body-large); -webkit-transform: rotateZ(180deg); transform: rotateZ(180deg); color: var(--td-text-color-placeholder); } .oneid-steps--vertical.oneid-steps--reverse.oneid-steps--arrow-separator .oneid-steps-item--finish:not(:last-child)::before { color: var(--td-brand-color); } .oneid-steps--vertical.oneid-steps--reverse.oneid-steps--arrow-separator .oneid-steps-item:not(:last-child)::before { -webkit-transform: rotateZ(0); transform: rotateZ(0); margin-top: var(--td-comp-margin-xs); } .oneid-steps--vertical.oneid-steps--reverse.oneid-steps--arrow-separator .oneid-steps-item--process:not(:last-child)::before, .oneid-steps--vertical.oneid-steps--reverse.oneid-steps--arrow-separator .oneid-steps-item--finish:not(:last-child)::before { color: var(--td-brand-color); } .oneid-steps--vertical.oneid-steps--reverse .oneid-steps-item { padding-bottom: var(--td-comp-margin-xxl); margin-bottom: 5px; } .oneid-steps--vertical.oneid-steps--reverse .oneid-steps-item:not(:last-child)::before { content: ""; display: block; height: 100%; border-left: 0; border-bottom: 0; border-right-width: 1px; border-right-color: var(--td-text-color-placeholder); position: absolute; top: 35px; left: 11px; } .oneid-steps--vertical.oneid-steps--reverse .oneid-steps-item--process:not(:last-child)::before, .oneid-steps--vertical.oneid-steps--reverse .oneid-steps-item--finish:not(:last-child)::before { border-right-width: 2px; border-right-color: var(--td-brand-color); color: var(--td-brand-color); } .oneid-steps--vertical.oneid-steps--reverse.oneid-steps--dot-anchor.oneid-steps--arrow-separator .oneid-steps-item:not(:last-child)::before { content: "^"; border: 0; height: calc(100% - 4px); position: absolute; top: 8px; left: 0; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; font-size: var(--td-font-size-body-medium); color: var(--td-text-color-placeholder); } .oneid-steps--vertical.oneid-steps--reverse.oneid-steps--dot-anchor.oneid-steps--arrow-separator .oneid-steps-item--finish:not(:last-child)::before { color: var(--td-brand-color); } .oneid-steps--vertical.oneid-steps--reverse.oneid-steps--dot-anchor.oneid-steps--arrow-separator .oneid-steps-item--process:not(:last-child)::before, .oneid-steps--vertical.oneid-steps--reverse.oneid-steps--dot-anchor.oneid-steps--arrow-separator .oneid-steps-item--finish:not(:last-child)::before { color: var(--td-brand-color); } .oneid-steps--vertical.oneid-steps--reverse.oneid-steps--dot-anchor .oneid-steps-item { margin-bottom: 0; } .oneid-steps--vertical.oneid-steps--reverse.oneid-steps--dot-anchor .oneid-steps-item:not(:last-child)::before { content: ""; display: block; height: 100%; border-bottom: 0; border-left: 0; border-right-width: 1px; border-right-color: var(--td-text-color-placeholder); position: absolute; left: 3.5px; top: 17px; } .oneid-steps--vertical.oneid-steps--reverse.oneid-steps--dot-anchor .oneid-steps-item:last-child::before { display: none; } .oneid-steps--vertical.oneid-steps--reverse.oneid-steps--dot-anchor .oneid-steps-item--process:not(:last-child)::before, .oneid-steps--vertical.oneid-steps--reverse.oneid-steps--dot-anchor .oneid-steps-item--finish:not(:last-child)::before { border-right-width: 2px; border-right-color: var(--td-brand-color); color: var(--td-brand-color); } .oneid-steps--vertical.oneid-steps--reverse.oneid-steps--dot-anchor .oneid-steps-item:not(:last-child).oneid-steps-item--default::before { border-color: var(--td-text-color-placeholder); } .oneid-sticky-tool { position: fixed; opacity: 1; -webkit-box-sizing: border-box; box-sizing: border-box; background-color: var(--td-bg-color-container); border: 0.5px solid var(--td-component-border); -webkit-box-shadow: var(--td-shadow-3); box-shadow: var(--td-shadow-3); } .oneid-sticky-tool-popup-content { -webkit-box-shadow: var(--td-shadow-3); box-shadow: var(--td-shadow-3); font-size: var(--td-font-size-body-small); color: var(--td-text-color-secondary); } .oneid-sticky-tool .oneid-sticky-item { opacity: 1; position: relative; margin: var(--td-comp-margin-xs); text-align: center; font-size: var(--td-font-size-body-small); color: var(--td-text-color-secondary); -webkit-transition: background-color 0.2s linear; transition: background-color 0.2s linear; } .oneid-sticky-tool .oneid-sticky-item:hover { cursor: pointer; background-color: var(--td-bg-color-container-hover); } .oneid-sticky-tool .oneid-sticky-item--normal { width: var(--td-comp-size-xxxl); height: var(--td-comp-size-xxxl); } .oneid-sticky-tool .oneid-sticky-item--normal .oneid-icon { width: 24px; height: 24px; margin: var(--td-comp-margin-s) var(--td-comp-margin-l) 0 var(--td-comp-margin-l); color: var(--td-text-color-primary); } .oneid-sticky-tool .oneid-sticky-item--compact { width: var(--td-comp-size-xl); height: var(--td-comp-size-xl); } .oneid-sticky-tool .oneid-sticky-item--compact .oneid-icon { width: 24px; height: 24px; margin: var(--td-comp-margin-s); color: var(--td-text-color-primary); } .oneid-sticky-tool .oneid-sticky-item--square { border-radius: var(--td-radius-default); } .oneid-sticky-tool .oneid-sticky-item--round { border-radius: var(--td-radius-circle); } .oneid-sticky-tool .oneid-sticky-item .oneid-sticky-item__label { width: 100%; height: var(--td-comp-size-xxs); line-height: var(--td-comp-size-xxs); margin-top: var(--td-comp-margin-xxs); text-align: center; } .oneid-sticky-tool--square { border-radius: var(--td-radius-medium); } .oneid-sticky-tool--round { border-radius: var(--td-radius-round); } .oneid-message { margin: 0; padding: 0; list-style: none; width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; outline: 0; border-radius: var(--td-radius-medium); background-color: var(--td-bg-color-container); -webkit-box-shadow: var(--td-shadow-3), var(--td-shadow-inset-top), var(--td-shadow-inset-right), var(--td-shadow-inset-bottom), var(--td-shadow-inset-left); box-shadow: var(--td-shadow-3), var(--td-shadow-inset-top), var(--td-shadow-inset-right), var(--td-shadow-inset-bottom), var(--td-shadow-inset-left); -webkit-box-sizing: border-box; box-sizing: border-box; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; color: var(--td-text-color-primary); font: var(--td-font-body-medium); padding: var(--td-comp-paddingTB-m) var(--td-comp-paddingLR-l); } .oneid-message > .oneid-icon, .oneid-message > [data-t-icon] > .oneid-icon, .oneid-message .oneid-loading { color: var(--td-brand-color); margin-right: var(--td-comp-margin-s); -ms-flex-negative: 0; flex-shrink: 0; font-size: calc(var(--td-font-size-body-medium) + 6px); } .oneid-message.oneid-is-success > .oneid-icon, .oneid-message.oneid-is-success > [data-t-icon] > .oneid-icon, .oneid-message.oneid-is-success .oneid-loading { color: var(--td-success-color); } .oneid-message.oneid-is-warning > .oneid-icon, .oneid-message.oneid-is-warning > [data-t-icon] > .oneid-icon, .oneid-message.oneid-is-warning .oneid-loading { color: var(--td-warning-color); } .oneid-message.oneid-is-error > .oneid-icon, .oneid-message.oneid-is-error > [data-t-icon] > .oneid-icon, .oneid-message.oneid-is-error .oneid-loading { color: var(--td-error-color); } .oneid-message.oneid-is-closable .oneid-message__close { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; margin-right: 0; margin-left: var(--td-comp-margin-xxl); cursor: pointer; color: var(--td-text-color-secondary); } .oneid-message.oneid-is-closable .oneid-message__close .oneid-icon-close { font-size: calc(var(--td-font-size-body-medium) + 2px); border-radius: var(--td-radius-default); -webkit-transition: all 0.2s linear; transition: all 0.2s linear; } .oneid-message.oneid-is-closable .oneid-message__close .oneid-icon-close:hover { background: var(--td-bg-color-container-hover); } .oneid-message.oneid-is-closable .oneid-message__close .oneid-icon-close:active { background: var(--td-bg-color-container-active); } .oneid-message__list { position: fixed; z-index: 6000; } .oneid-message__list .oneid-message { margin-bottom: var(--td-comp-margin-s); word-break: break-all; } .oneid-tooltip .oneid-popup__content { display: inline-block; border: 0; z-index: 5600; margin-bottom: 1px; max-width: 480px; word-break: break-word; -webkit-box-sizing: border-box; box-sizing: border-box; border-radius: var(--td-radius-medium); color: var(--td-text-color-primary); } .oneid-tooltip--default .oneid-popup__content { color: var(--td-text-color-anti); background: var(--td-gray-color-13); -webkit-box-shadow: inset 0 0.5px 0 var(--td-gray-color-9), inset 0.5px 0 0 var(--td-gray-color-9), inset 0 -0.5px 0 var(--td-gray-color-9), inset -0.5px 0 0 var(--td-gray-color-9); box-shadow: inset 0 0.5px 0 var(--td-gray-color-9), inset 0.5px 0 0 var(--td-gray-color-9), inset 0 -0.5px 0 var(--td-gray-color-9), inset -0.5px 0 0 var(--td-gray-color-9); } .oneid-tooltip--default[data-popper-placement^=left] .oneid-popup__arrow:before { -webkit-box-shadow: inset -0.5px 0 0 var(--td-gray-color-9), inset 0 0.5px 0 var(--td-gray-color-9); box-shadow: inset -0.5px 0 0 var(--td-gray-color-9), inset 0 0.5px 0 var(--td-gray-color-9); } .oneid-tooltip--default[data-popper-placement^=right] .oneid-popup__arrow:before { -webkit-box-shadow: inset 0.5px 0 0 var(--td-gray-color-9), inset 0 -0.5px 0 var(--td-gray-color-9); box-shadow: inset 0.5px 0 0 var(--td-gray-color-9), inset 0 -0.5px 0 var(--td-gray-color-9); } .oneid-tooltip--default[data-popper-placement^=top] .oneid-popup__arrow:before { -webkit-box-shadow: inset 0 -0.5px 0 var(--td-gray-color-9), inset -0.5px 0 0 var(--td-gray-color-9); box-shadow: inset 0 -0.5px 0 var(--td-gray-color-9), inset -0.5px 0 0 var(--td-gray-color-9); } .oneid-tooltip--default[data-popper-placement^=bottom] .oneid-popup__arrow:before { -webkit-box-shadow: inset 0.5px 0 0 var(--td-gray-color-9), inset 0 0.5px 0 var(--td-gray-color-9); box-shadow: inset 0.5px 0 0 var(--td-gray-color-9), inset 0 0.5px 0 var(--td-gray-color-9); } .oneid-tooltip--primary .oneid-popup__content { color: var(--td-brand-color); background: var(--td-brand-color-light); } .oneid-tooltip--success .oneid-popup__content { color: var(--td-success-color); background: var(--td-success-color-light); } .oneid-tooltip--danger .oneid-popup__content { color: var(--td-error-color); background: var(--td-error-color-light); } .oneid-tooltip--warning .oneid-popup__content { color: var(--td-warning-color); background: var(--td-warning-color-light); } .oneid-tooltip .oneid-popup__arrow { background: inherit; height: auto; } .oneid-tooltip .oneid-popup__arrow::before { background: inherit; } .oneid-tooltip--noshadow .oneid-popup__content, .oneid-tooltip--noshadow[data-popper-placement] .oneid-popup__arrow:before { -webkit-box-shadow: none; box-shadow: none; } .oneid-affix { position: fixed; z-index: 500; } .oneid-tag { font: var(--td-font-body-medium); color: var(--td-text-color-primary); -webkit-box-sizing: border-box; box-sizing: border-box; margin: 0; padding: 0; list-style: none; display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; padding: 0px var(--td-comp-paddingLR-s); height: var(--td-comp-size-xs); font: var(--td-font-body-small); color: var(--td-text-color-anti); border-radius: var(--td-radius-default); border: 1px solid transparent; white-space: nowrap; } .oneid-tag .oneid-icon { margin-right: var(--td-comp-margin-xs); width: calc(var(--td-font-size-body-medium) + 2px); height: calc(var(--td-font-size-body-medium) + 2px); -ms-flex-negative: 0; flex-shrink: 0; } .oneid-tag .oneid-tag__icon-close { margin-right: 0; margin-left: var(--td-comp-margin-s); font: var(--td-font-body-medium); cursor: pointer; -webkit-transition: color 0.2s cubic-bezier(0.38, 0, 0.24, 1); transition: color 0.2s cubic-bezier(0.38, 0, 0.24, 1); } .oneid-tag--default { color: var(--td-text-color-primary); background-color: var(--td-bg-color-component); } .oneid-tag--default .oneid-tag__icon-close { color: var(--td-text-color-placeholder); } .oneid-tag--default .oneid-tag__icon-close:hover { color: var(--td-text-color-primary); } .oneid-tag--default:active { cursor: default; } .oneid-tag--default.oneid-tag--disabled { color: var(--td-text-color-disabled); background-color: var(--td-bg-color-component-disabled); border-color: var(--td-component-border); cursor: not-allowed; } .oneid-tag--default.oneid-tag--disabled:hover { cursor: not-allowed; } .oneid-tag--default.oneid-tag--disabled .oneid-icon:hover { cursor: pointer; } .oneid-tag--default.oneid-tag--outline { border-color: var(--td-component-border); } .oneid-tag--default.oneid-tag--light { background-color: var(--td-bg-color-secondarycontainer); } .oneid-tag--default.oneid-tag--light-outline { border-color: var(--td-component-border); background-color: var(--td-bg-color-secondarycontainer); } .oneid-tag--primary { background-color: var(--td-brand-color); } .oneid-tag--primary.oneid-tag--outline { border-color: var(--td-brand-color); } .oneid-tag--primary.oneid-tag--light { background-color: var(--td-brand-color-light); } .oneid-tag--primary.oneid-tag--light-outline { border-color: var(--td-brand-color); background-color: var(--td-brand-color-light); } .oneid-tag--primary.oneid-tag--light, .oneid-tag--primary.oneid-tag--outline, .oneid-tag--primary.oneid-tag--light-outline { color: var(--td-brand-color); } .oneid-tag--primary.oneid-tag--light .oneid-tag__icon-close:hover, .oneid-tag--primary.oneid-tag--outline .oneid-tag__icon-close:hover, .oneid-tag--primary.oneid-tag--light-outline .oneid-tag__icon-close:hover { color: var(--td-brand-color-hover); } .oneid-tag--success { background-color: var(--td-success-color); } .oneid-tag--success.oneid-tag--outline { border-color: var(--td-success-color); } .oneid-tag--success.oneid-tag--light { background-color: var(--td-success-color-light); } .oneid-tag--success.oneid-tag--light-outline { border-color: var(--td-success-color); background-color: var(--td-success-color-light); } .oneid-tag--success.oneid-tag--light, .oneid-tag--success.oneid-tag--outline, .oneid-tag--success.oneid-tag--light-outline { color: var(--td-success-color); } .oneid-tag--success.oneid-tag--light .oneid-tag__icon-close:hover, .oneid-tag--success.oneid-tag--outline .oneid-tag__icon-close:hover, .oneid-tag--success.oneid-tag--light-outline .oneid-tag__icon-close:hover { color: var(--td-success-color-hover); } .oneid-tag--warning { background-color: var(--td-warning-color); } .oneid-tag--warning.oneid-tag--outline { border-color: var(--td-warning-color); } .oneid-tag--warning.oneid-tag--light { background-color: var(--td-warning-color-light); } .oneid-tag--warning.oneid-tag--light-outline { border-color: var(--td-warning-color); background-color: var(--td-warning-color-light); } .oneid-tag--warning.oneid-tag--light, .oneid-tag--warning.oneid-tag--outline, .oneid-tag--warning.oneid-tag--light-outline { color: var(--td-warning-color); } .oneid-tag--warning.oneid-tag--light .oneid-tag__icon-close:hover, .oneid-tag--warning.oneid-tag--outline .oneid-tag__icon-close:hover, .oneid-tag--warning.oneid-tag--light-outline .oneid-tag__icon-close:hover { color: var(--td-warning-color-hover); } .oneid-tag--danger { background-color: var(--td-error-color); } .oneid-tag--danger.oneid-tag--outline { border-color: var(--td-error-color); } .oneid-tag--danger.oneid-tag--light { background-color: var(--td-error-color-light); } .oneid-tag--danger.oneid-tag--light-outline { border-color: var(--td-error-color); background-color: var(--td-error-color-light); } .oneid-tag--danger .oneid-tag__icon-close { fill: var(--td-error-color); } .oneid-tag--danger .oneid-tag__icon-close:hover { fill: var(--td-error-color-hover); } .oneid-tag--danger.oneid-tag--light, .oneid-tag--danger.oneid-tag--outline, .oneid-tag--danger.oneid-tag--light-outline { color: var(--td-error-color); } .oneid-tag--danger.oneid-tag--light .oneid-tag__icon-close:hover, .oneid-tag--danger.oneid-tag--outline .oneid-tag__icon-close:hover, .oneid-tag--danger.oneid-tag--light-outline .oneid-tag__icon-close:hover { color: var(--td-error-color-hover); } .oneid-tag--dark.oneid-tag:not(.oneid-tag--default) .oneid-tag__icon-close { color: var(--td-font-white-2); } .oneid-tag--dark.oneid-tag:not(.oneid-tag--default) .oneid-tag__icon-close:hover { color: var(--td-font-white-1); } .oneid-tag.oneid-tag--outline { background: transparent; } .oneid-tag.oneid-size-s { padding: 0px var(--td-comp-paddingLR-xs); height: var(--td-comp-size-xxs); font: var(--td-font-body-small); } .oneid-tag.oneid-size-s .oneid-icon { font-size: var(--td-font-body-small); } .oneid-tag.oneid-size-l { padding: 0px var(--td-comp-paddingLR-m); height: var(--td-comp-size-m); font: var(--td-font-body-medium); } .oneid-tag.oneid-size-l .oneid-icon { font: var(--td-font-body-medium); } .oneid-tag.oneid-tag--round { border-radius: var(--td-radius-extraLarge); } .oneid-tag.oneid-tag--mark { border-radius: 0 var(--td-radius-extraLarge) var(--td-radius-extraLarge) 0; } .oneid-tag.oneid-tag--ellipsis .oneid-tag--text { display: inline-block; white-space: nowrap; word-wrap: normal; overflow: hidden; text-overflow: ellipsis; } .oneid-tag.oneid-tag--check:not(.oneid-tag--disabled) { -webkit-transition: background-color 0.2s cubic-bezier(0.38, 0, 0.24, 1); transition: background-color 0.2s cubic-bezier(0.38, 0, 0.24, 1); cursor: pointer; } .oneid-tag.oneid-tag--check:not(.oneid-tag--disabled).oneid-tag--default.oneid-tag--dark:not(.oneid-tag--checked):hover { background-color: var(--td-bg-color-component-hover); } .oneid-tag.oneid-tag--check:not(.oneid-tag--disabled).oneid-tag--primary.oneid-tag--dark.oneid-tag--checked:hover { background-color: var(--td-brand-color-hover); } .oneid-tag.oneid-tag--check:not(.oneid-tag--disabled).oneid-tag--default.oneid-tag--outline:not(.oneid-tag--checked):hover { color: var(--td-brand-color-hover); } .oneid-tag--check.oneid-tag--disabled.oneid-tag--primary.oneid-tag--dark { background-color: var(--td-brand-color-disabled); cursor: not-allowed; } .oneid-tag--check.oneid-tag--disabled.oneid-tag--primary.oneid-tag--outline { color: var(--td-text-color-disabled); background-color: var(--td-bg-color-component-disabled); border-color: var(--td-text-color-disabled); cursor: not-allowed; } .oneid-check-tag-group .oneid-tag:not(:last-child) { margin-right: var(--td-comp-margin-s); } a .oneid-tag { cursor: pointer; -webkit-transition: all 0.2s linear; transition: all 0.2s linear; } a .oneid-tag:hover { color: var(--td-brand-color); background-color: var(--td-bg-color-component-hover); } a .oneid-tag:active { color: var(--td-brand-color-active); background-color: var(--td-bg-color-component-active); } @-webkit-keyframes t-fade-in { from { opacity: 0; } to { opacity: 1; } } @keyframes t-fade-in { from { opacity: 0; } to { opacity: 1; } } @-webkit-keyframes t-fade-out { from { opacity: 1; } to { opacity: 0; } } @keyframes t-fade-out { from { opacity: 1; } to { opacity: 0; } } @-webkit-keyframes t-spin { from { -webkit-transform: rotate(0deg); transform: rotate(0deg); } to { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @keyframes t-spin { from { -webkit-transform: rotate(0deg); transform: rotate(0deg); } to { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } .oneid-icon-loading { -webkit-animation: t-spin 1s linear infinite; animation: t-spin 1s linear infinite; } @-webkit-keyframes t-zoom-out { from { -webkit-transform: scale(0.2); transform: scale(0.2); } to { -webkit-transform: scale(1); transform: scale(1); } } @keyframes t-zoom-out { from { -webkit-transform: scale(0.2); transform: scale(0.2); } to { -webkit-transform: scale(1); transform: scale(1); } } .oneid-tag-input { font: var(--td-font-body-medium); color: var(--td-text-color-primary); -webkit-box-sizing: border-box; box-sizing: border-box; margin: 0; padding: 0; list-style: none; /** 设计稿:未填充标签场景,边距和已填充不同 */ } .oneid-tag-input .oneid-tag { vertical-align: middle; -webkit-animation: t-fade-in 0.2s ease-in-out; animation: t-fade-in 0.2s ease-in-out; margin: 3px var(--td-comp-margin-xs) 3px 0; } .oneid-tag-input .oneid-tag-input__drag_wrapper + .oneid-tag-input__drag_wrapper { margin-left: var(--td-comp-margin-xs); } .oneid-tag-input .oneid-input { overflow: hidden; min-height: var(--td-comp-size-m); height: -webkit-fit-content; height: -moz-fit-content; height: fit-content; padding: 0 var(--td-comp-paddingLR-s) 0 var(--td-comp-margin-xs); } .oneid-tag-input .oneid-input .oneid-input__suffix-icon { right: var(--td-comp-margin-s); } .oneid-tag-input .oneid-input.oneid-size-s { padding: 0 var(--td-comp-paddingLR-s) 0 var(--td-comp-margin-xs); min-height: var(--td-comp-size-xs); } .oneid-tag-input .oneid-input.oneid-size-s .oneid-tag { margin: 1px var(--td-comp-margin-xs) 1px 0; } .oneid-tag-input .oneid-input.oneid-size-l { min-height: var(--td-comp-size-xl); padding: 0 var(--td-comp-paddingLR-m) 0 var(--td-comp-margin-s); } .oneid-tag-input .oneid-input.oneid-size-l .oneid-input__suffix-icon { right: var(--td-comp-margin-m); } .oneid-tag-input.oneid-is-empty .oneid-input__inner { margin-left: var(--td-comp-margin-xs); } .oneid-tag-input:hover .oneid-input__inner:not(.oneid-input--soft-hidden), .oneid-tag-input .oneid-input--focused .oneid-input__inner:not(.oneid-input--soft-hidden) { min-width: 20px; } .oneid-tag-input .oneid-tag-input__prefix { margin-left: var(--td-comp-margin-xs); line-height: 1; } .oneid-tag-input .oneid-tag-input__prefix > .oneid-icon { color: var(--td-text-color-placeholder); } .oneid-tag-input .oneid-input .oneid-input__prefix:not(:empty) { margin-right: 0; } .oneid-tag-input.oneid-input--auto-width .oneid-input.oneid-input--focused { padding-right: calc(var(--td-comp-paddingLR-xxl) + var(--td-comp-paddingLR-xxs)); } .oneid-tag-input.oneid-input--auto-width .oneid-input__prefix { white-space: nowrap; } .oneid-tag-input .oneid-input__prefix--scrollable { overflow-y: hidden; overflow-x: auto; } @-moz-document url-prefix() { .oneid-tag-input .oneid-input__prefix--scrollable { scrollbar-color: var(--td-scrollbar-color) transparent; scrollbar-width: thin; } } .oneid-tag-input .oneid-input__prefix--scrollable::-webkit-scrollbar { width: 6px; height: 6px; } .oneid-tag-input .oneid-input__prefix--scrollable::-webkit-scrollbar-thumb { border: 0px solid transparent; background-clip: content-box; background-color: var(--td-scrollbar-color); border-radius: 11px; } .oneid-tag-input .oneid-input__prefix--scrollable::-webkit-scrollbar-thumb:vertical:hover, .oneid-tag-input .oneid-input__prefix--scrollable::-webkit-scrollbar-thumb:horizontal:hover { background-color: var(--td-scrollbar-hover-color); } .oneid-tag-input__suffix-clear { cursor: pointer; } .oneid-tag-input--break-line:not(.oneid-is-empty) .oneid-input { display: block; } .oneid-tag-input--break-line:not(.oneid-is-empty) .oneid-input.oneid-input--prefix > .oneid-input__prefix { display: inline; text-align: left; } .oneid-tag-input--break-line:not(.oneid-is-empty) .oneid-input .oneid-input__suffix-icon { position: absolute; bottom: 0; } .oneid-tag-input--break-line:not(.oneid-is-empty) .oneid-tag-input__prefix { vertical-align: middle; } .oneid-tag-input__prefix { width: -webkit-max-content; width: -moz-max-content; width: max-content; display: inline-block; margin-right: var(--td-comp-margin-s); } /** 换行模式避免标签和右侧图标重合,需保留图标宽度 22px 和左侧距离标签间距 8px */ .oneid-tag-input--break-line.oneid-tag-input--with-tag:not(.oneid-input--auto-width) .oneid-input, .oneid-tag-input.oneid-input--auto-width:hover .oneid-input { padding-right: calc(var(--td-comp-paddingLR-xxl) + var(--td-comp-paddingLR-xxs)); } .oneid-tag-input--break-line.oneid-tag-input--with-tag:not(.oneid-input--auto-width) .oneid-size-l .oneid-input, .oneid-tag-input.oneid-input--auto-width:hover .oneid-size-l .oneid-input { padding-right: calc(var(--td-comp-paddingLR-xxl) + var(--td-comp-paddingLR-xs)); } /** auto-width 模式,左右边距相同 */ .oneid-tag-input.oneid-input--auto-width .oneid-input { padding-right: 0; } /** max-rows模式,限制最大高度 */ .oneid-tag-input--max-rows .oneid-input { max-height: calc(var(--max-rows, 1) * (var(--td-comp-size-m) - 2px)); overflow-y: scroll; } .oneid-tag-input--max-rows .oneid-input.oneid-size-s { max-height: calc(var(--max-rows, 1) * var(--td-comp-size-xs)); } .oneid-tag-input--max-rows .oneid-input.oneid-size-l { max-height: calc(var(--max-rows, 1) * (var(--td-comp-size-xl) - 2px)); } .oneid-select-input { font: var(--td-font-body-medium); color: var(--td-text-color-primary); -webkit-box-sizing: border-box; box-sizing: border-box; margin: 0; padding: 0; list-style: none; width: 100%; display: inline-block; vertical-align: middle; } /** 宽度自适应场景,多选,预留图标的位置。带标签和不带标签的布局不同,故而间距不同 */ .oneid-select-input--multiple .oneid-input--auto-width.oneid-tag-input__with-suffix-icon.oneid-tag-input--with-tag .oneid-input { padding-right: var(--td-comp-paddingLR-xl); } .oneid-select-input--multiple .oneid-input--auto-width.oneid-tag-input__with-suffix-icon.oneid-tag-input--with-tag .oneid-input.oneid-size-l { padding-right: calc(var(--td-comp-paddingLR-xl) + var(--td-comp-paddingLR-s)); } .oneid-select-input--multiple .oneid-input--auto-width.oneid-tag-input__with-suffix-icon.oneid-is-empty .oneid-input { padding-right: var(--td-comp-paddingLR-s); } .oneid-select-input--multiple .oneid-input--auto-width.oneid-tag-input__with-suffix-icon.oneid-is-empty .oneid-input.oneid-size-l { padding-right: var(--td-comp-paddingLR-m); } /** 无边框模式 */ .oneid-select-input--borderless { /** 无边框模式的多选 */ } .oneid-select-input--borderless .oneid-input { -webkit-box-shadow: none; box-shadow: none; border: 1px solid transparent; background: transparent; -webkit-transition: all 0.2s linear; transition: all 0.2s linear; } .oneid-select-input--borderless .oneid-input:hover:not(.oneid-input--focused) { border-color: var(--td-component-border); background-color: var(--td-bg-color-container-hover); border-radius: var(--td-radius-default); } .oneid-select-input--borderless .oneid-input--focused { border-color: var(--td-brand-color); -webkit-box-shadow: 0 0 0 2px var(--td-brand-color-focus); box-shadow: 0 0 0 2px var(--td-brand-color-focus); background-color: var(--td-bg-color-specialcomponent); } .oneid-select-input--borderless.oneid-select-input--multiple:not(.oneid-select-input--empty).oneid-select-input--popup-visible input { display: inline-block; } .oneid-select-input--borderless.oneid-select-input--multiple:not(.oneid-select-input--empty).oneid-select-input--popup-visible .oneid-input { background-color: var(--td-bg-color-container-hover); } .oneid-select-input--borderless.oneid-tag-input { border: 0; -webkit-box-shadow: none; box-shadow: none; background: transparent; -webkit-transition: background-color 0.2s linear; transition: background-color 0.2s linear; } .oneid-select-input--borderless.oneid-tag-input:hover { background-color: var(--td-bg-color-container-hover); border-radius: var(--td-radius-default); } .oneid-select__wrap { width: 100%; } .oneid-select__dropdown .oneid-popup__content { margin: var(--td-comp-paddingTB-s) 0; padding: 0; max-height: 300px; overflow-y: auto; -ms-scroll-chaining: none; overscroll-behavior: contain; -webkit-box-shadow: var(--td-shadow-2); box-shadow: var(--td-shadow-2); } @-moz-document url-prefix() { .oneid-select__dropdown .oneid-popup__content { scrollbar-color: var(--td-scrollbar-color) transparent; scrollbar-width: thin; } } .oneid-select__dropdown .oneid-popup__content::-webkit-scrollbar { width: 8px; height: 8px; } .oneid-select__dropdown .oneid-popup__content::-webkit-scrollbar-thumb { border: 2px solid transparent; background-clip: content-box; background-color: var(--td-scrollbar-color); border-radius: 15px; } .oneid-select__dropdown .oneid-popup__content::-webkit-scrollbar-thumb:vertical:hover, .oneid-select__dropdown .oneid-popup__content::-webkit-scrollbar-thumb:horizontal:hover { background-color: var(--td-scrollbar-hover-color); } .oneid-select__dropdown-inner { min-height: var(--td-comp-size-m); } .oneid-select__dropdown-inner .oneid-select__list .oneid-select__list { padding: 0; } .oneid-select__dropdown-inner .oneid-select__list, .oneid-select__dropdown-inner .oneid-tree { padding: var(--td-pop-padding-m); } .oneid-select__dropdown-inner--size-s { min-height: var(--td-comp-size-xs); } .oneid-select__dropdown-inner--size-s .oneid-select__list, .oneid-select__dropdown-inner--size-s .oneid-tree { padding: var(--td-pop-padding-s); } .oneid-select__dropdown-inner--size-l { min-height: var(--td-comp-size-xl); } .oneid-select__dropdown-inner--size-l .oneid-select__list, .oneid-select__dropdown-inner--size-l .oneid-tree { padding: var(--td-pop-padding-l); } .oneid-select__list { margin: 0; padding: 0; list-style: none; } .oneid-select__dropdown.oneid-popup { padding: 0; } .oneid-select__empty.oneid-size-s { line-height: var(--td-comp-size-xs); } .oneid-select__empty { text-align: center; color: var(--td-text-color-disabled); line-height: var(--td-comp-size-m); padding: 0 var(--td-comp-paddingLR-s); } .oneid-select__empty.oneid-size-l { line-height: var(--td-comp-size-xl); } .oneid-select__loading-tips.oneid-size-s { min-height: var(--td-comp-size-xs); line-height: var(--td-comp-size-xs); } .oneid-select__loading-tips { position: fixed; top: var(--td-comp-paddingTB-s); left: 0; bottom: var(--td-comp-paddingTB-s); right: 0; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; background-color: var(--td-bg-color-container); border-radius: var(--td-radius-default); min-height: var(--td-comp-size-m); line-height: var(--td-comp-size-m); color: var(--td-text-color-disabled); z-index: 1000; } .oneid-select__loading-tips.oneid-size-l { min-height: var(--td-comp-size-xl); line-height: var(--td-comp-size-xl); } .oneid-select-option-group + .oneid-select-option-group { padding-top: var(--td-comp-margin-xs); margin-top: var(--td-comp-margin-xs); } .oneid-select-option-group__divider + .oneid-select-option-group__divider { position: relative; } .oneid-select-option-group__divider + .oneid-select-option-group__divider::before { content: ""; width: 100%; height: 1px; padding: 0 var(--td-comp-paddingLR-s); position: absolute; top: 0; left: 0; -webkit-box-sizing: border-box; box-sizing: border-box; background-color: var(--td-border-level-1-color); background-clip: content-box; } ul.oneid-select-option-group__header, .oneid-select-option-group__header { color: var(--td-text-color-placeholder); display: block; height: var(--td-comp-size-s); line-height: var(--td-comp-size-s); padding: 0 var(--td-comp-paddingLR-s); -webkit-box-sizing: border-box; box-sizing: border-box; white-space: nowrap; word-wrap: normal; overflow: hidden; text-overflow: ellipsis; } .oneid-select-option-group__header.oneid-size-l { height: var(--td-comp-size-l); line-height: var(--td-comp-size-l); padding: 0 var(--td-comp-paddingLR-m); } .oneid-select-option-group__header.oneid-size-s { height: var(--td-comp-size-xxs); line-height: var(--td-comp-size-xxs); padding: 0 var(--td-comp-paddingLR-s); } .oneid-select-option { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; border-radius: var(--td-radius-default); height: var(--td-comp-size-s); font: var(--td-font-body-medium); cursor: pointer; padding: 0 var(--td-comp-paddingLR-s); color: var(--td-text-color-primary); -webkit-transition: background-color 0.2s cubic-bezier(0.38, 0, 0.24, 1); transition: background-color 0.2s cubic-bezier(0.38, 0, 0.24, 1); -webkit-box-sizing: border-box; box-sizing: border-box; --ripple-color: var(--td-bg-color-container-active); } .oneid-select-option span { position: relative; white-space: nowrap; word-wrap: normal; overflow: hidden; text-overflow: ellipsis; } .oneid-select-option:not(.oneid-is-disabled):not(.oneid-is-selected):hover { background-color: var(--td-bg-color-container-hover); } .oneid-select-option:not(.oneid-is-disabled):not(.oneid-is-selected):hover .oneid-checkbox__label { color: inherit; } .oneid-select-option:not(.oneid-is-disabled):not(.oneid-is-selected):hover .oneid-checkbox__input { border-color: var(--td-brand-color); } .oneid-select-option .oneid-checkbox__label { color: var(--td-text-color-primary); -webkit-box-flex: 1; -ms-flex: 1; flex: 1; white-space: nowrap; word-wrap: normal; overflow: hidden; text-overflow: ellipsis; } .oneid-select-option .oneid-checkbox { width: 100%; } .oneid-select-option.oneid-is-disabled { cursor: not-allowed; color: var(--td-text-color-disabled); background: var(--td-bg-color-specialcomponent); } .oneid-select-option.oneid-is-disabled:hover, .oneid-select-option.oneid-is-disabled :active { background: var(--td-bg-color-specialcomponent); } .oneid-select-option.oneid-size-l { height: var(--td-comp-size-l); padding: 0 var(--td-comp-paddingLR-m); font: var(--td-font-body-large); } .oneid-select-option.oneid-size-m { font: var(--td-font-body-medium); } .oneid-select-option.oneid-size-s { height: var(--td-comp-size-xxs); padding: 0 var(--td-comp-paddingLR-s); font: var(--td-font-body-small); } .oneid-select-option.oneid-is-selected:not(.oneid-is-disabled) { color: var(--td-brand-color); background-color: var(--td-brand-color-light); -webkit-transition: all 0.2s linear; transition: all 0.2s linear; } .oneid-select-option.oneid-is-selected:not(.oneid-is-disabled) .oneid-checkbox__label { color: var(--td-brand-color); } .oneid-select-option.oneid-is-selected:not(.oneid-is-disabled):hover { background-color: var(--td-brand-color-light); } /** 规范 CSS 类名为 --hover */ .oneid-select-option.oneid-select-option__hover:not(.oneid-is-disabled).oneid-select-option.oneid-select-option__hover:not(.oneid-is-selected), .oneid-select-option.oneid-select-option__hover:not(.oneid-is-disabled).oneid-select-option.oneid-select-option--hover:not(.oneid-is-selected), .oneid-select-option.oneid-select-option--hover:not(.oneid-is-disabled).oneid-select-option.oneid-select-option__hover:not(.oneid-is-selected), .oneid-select-option.oneid-select-option--hover:not(.oneid-is-disabled).oneid-select-option.oneid-select-option--hover:not(.oneid-is-selected) { background-color: var(--td-bg-color-container-hover); } .oneid-select-option.oneid-select-option__hover:not(.oneid-is-disabled).oneid-select-option.oneid-select-option__hover:not(.oneid-is-selected) .oneid-checkbox__input, .oneid-select-option.oneid-select-option__hover:not(.oneid-is-disabled).oneid-select-option.oneid-select-option--hover:not(.oneid-is-selected) .oneid-checkbox__input, .oneid-select-option.oneid-select-option--hover:not(.oneid-is-disabled).oneid-select-option.oneid-select-option__hover:not(.oneid-is-selected) .oneid-checkbox__input, .oneid-select-option.oneid-select-option--hover:not(.oneid-is-disabled).oneid-select-option.oneid-select-option--hover:not(.oneid-is-selected) .oneid-checkbox__input { border-color: var(--td-brand-color); } .oneid-select-option.oneid-select-option__hover .oneid-checkbox__label, .oneid-select-option.oneid-select-option--hover .oneid-checkbox__label { color: inherit; } .oneid-select-option + .oneid-select-option { margin-top: var(--td-comp-paddingTB-xxs); } .oneid-select.oneid-select-input--borderless .oneid-select__right-icon { position: relative; margin: 0; } .oneid-select .oneid-fake-arrow { color: var(--td-text-color-placeholder); } .oneid-select .oneid-fake-arrow--active { color: var(--td-brand-color); } .oneid-is-selected.oneid-select-option__hover { background-color: var(--td-brand-color-light-hover); } .oneid-is-selected.oneid-select-option__hover .oneid-checkbox__label { color: var(--td-brand-color); } .oneid-pagination-mini { font: var(--td-font-body-medium); color: var(--td-text-color-primary); -webkit-box-sizing: border-box; box-sizing: border-box; margin: 0; padding: 0; list-style: none; } .oneid-pagination-mini--outline .oneid-pagination-mini__prev { border-top-right-radius: 0; border-bottom-right-radius: 0; position: relative; z-index: 1; } .oneid-pagination-mini--outline .oneid-pagination-mini__current { border-radius: 0; position: relative; margin-left: -1px; } .oneid-pagination-mini--outline .oneid-pagination-mini__current:hover { z-index: 1; } .oneid-pagination-mini--outline .oneid-pagination-mini__next { border-top-left-radius: 0; border-bottom-left-radius: 0; position: relative; margin-left: -1px; } .oneid-pagination-mini--outline .oneid-pagination-mini__next:hover { z-index: 1; } .oneid-pagination { font: var(--td-font-body-medium); color: var(--td-text-color-primary); -webkit-box-sizing: border-box; box-sizing: border-box; margin: 0; padding: 0; list-style: none; width: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; white-space: nowrap; color: var(--td-text-color-secondary); -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .oneid-pagination.oneid-is-disabled { color: var(--td-text-color-disabled); } .oneid-pagination__total { font: var(--td-font-body-medium); -webkit-box-flex: 1; -ms-flex: 1; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .oneid-pagination .oneid-select__wrap { width: auto; } .oneid-pagination__select { -ms-flex-negative: 0; flex-shrink: 0; margin-right: var(--td-comp-margin-l); height: var(--td-comp-size-m); font-size: var(--td-font-size-body-medium); color: var(--td-text-color-secondary); } .oneid-pagination__btn { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -ms-flex-negative: 0; flex-shrink: 0; cursor: pointer; color: var(--td-text-color-secondary); border-radius: var(--td-radius-default); font: var(--td-font-body-large); width: var(--td-comp-size-m); height: var(--td-comp-size-m); line-height: var(--td-comp-size-m); } .oneid-pagination__btn:hover { background-color: var(--td-bg-color-secondarycontainer-hover); -webkit-transition: all 0.2s cubic-bezier(0.82, 0, 1, 0.9); transition: all 0.2s cubic-bezier(0.82, 0, 1, 0.9); } .oneid-pagination__btn:active { background-color: var(--td-bg-color-secondarycontainer-active); } .oneid-pagination__btn.oneid-is-disabled, .oneid-pagination__btn.oneid-is-disabled:hover, .oneid-pagination__btn.oneid-is-disabled:active { background: none; color: var(--td-text-color-disabled); } .oneid-pagination__btn.oneid-is-disabled { cursor: not-allowed; } .oneid-pagination__btn-prev { margin-right: var(--td-comp-margin-s); } .oneid-pagination__btn-next { margin-left: var(--td-comp-margin-s); } .oneid-pagination__btn + .oneid-pagination__select { margin-right: 0; } .oneid-pagination__pager { -ms-flex-negative: 0; flex-shrink: 0; display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; vertical-align: middle; list-style: none; padding: 0; margin: 0; } .oneid-pagination__pager li:not(:last-child) { margin-right: var(--td-comp-margin-s); } .oneid-pagination__number { display: inline-block; border: 1px solid var(--td-component-border); text-align: center; border-radius: var(--td-radius-default); cursor: pointer; background-color: var(--td-bg-color-container); -webkit-box-sizing: border-box; box-sizing: border-box; height: var(--td-comp-size-m); min-width: var(--td-comp-size-m); line-height: calc(var(--td-comp-size-m) - 2px); font-size: var(--td-font-body-medium); padding-left: var(--td-comp-paddingLR-xs); padding-right: var(--td-comp-paddingLR-xs); } .oneid-pagination__number:hover { color: var(--td-brand-color-hover); border-color: var(--td-brand-color-hover); -webkit-transition: all 0.2s cubic-bezier(0.82, 0, 1, 0.9); transition: all 0.2s cubic-bezier(0.82, 0, 1, 0.9); } .oneid-pagination__number:active { background-color: var(--td-brand-color); color: var(--td-text-color-anti); border-color: var(--td-brand-color); } .oneid-pagination__number.oneid-is-current { background-color: var(--td-brand-color); color: var(--td-text-color-anti); border-color: var(--td-brand-color); } .oneid-pagination__number.oneid-is-current.oneid-is-disabled, .oneid-pagination__number.oneid-is-current.oneid-is-disabled:hover, .oneid-pagination__number.oneid-is-current.oneid-is-disabled:active { background-color: var(--td-brand-color-focus); color: var(--td-text-color-anti); border-color: var(--td-brand-color-focus); } .oneid-pagination__number.oneid-is-disabled { cursor: auto; background-color: var(--td-bg-color-component-disabled); color: var(--td-text-color-disabled); } .oneid-pagination__number.oneid-is-disabled:hover, .oneid-pagination__number.oneid-is-disabled:active { background-color: var(--td-bg-color-component-disabled); color: var(--td-text-color-disabled); border-color: var(--td-component-border); } .oneid-pagination__number--more { border: 0 none; padding: 0; } .oneid-pagination__number--more:hover { color: var(--td-text-color-primary); background-color: var(--td-bg-color-secondarycontainer-hover); -webkit-transition: all 0.2s cubic-bezier(0.82, 0, 1, 0.9); transition: all 0.2s cubic-bezier(0.82, 0, 1, 0.9); } .oneid-pagination__number--more:active { color: var(--td-text-color-primary); background-color: var(--td-bg-color-secondarycontainer-active); } .oneid-pagination__number--more.oneid-is-disabled, .oneid-pagination__number--more.oneid-is-disabled:hover, .oneid-pagination__number--more.oneid-is-disabled:active { background: none; } .oneid-pagination__number--more .oneid-icon-more { -webkit-transform: rotate(90deg); transform: rotate(90deg); color: var(--td-text-color-disabled); } .oneid-pagination__jump { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -ms-flex-negative: 0; flex-shrink: 0; margin-left: var(--td-comp-margin-s); font-size: var(--td-font-body-medium); gap: var(--td-comp-margin-s); background-color: var(--td-bg-color-secondarycontainer); height: var(--td-comp-size-m); padding-left: var(--td-comp-margin-s); border-radius: var(--td-radius-default); } .oneid-pagination .oneid-input-adornment__append { border: none; height: calc(var(--td-comp-size-m) - 4px); color: var(--td-text-color-secondary); background-color: transparent; } .oneid-pagination .oneid-input-adornment__append .oneid-input-adornment__text { border: none; } .oneid-pagination .oneid-input-number { width: 56px; } .oneid-pagination .oneid-input-number .oneid-input { height: calc(var(--td-comp-size-m) - 4px); border-radius: var(--td-radius-default); } .oneid-pagination .oneid-input-number .oneid-input__inner { text-align: center; } .oneid-pagination.oneid-size-s { font: var(--td-font-body-small); } .oneid-pagination.oneid-size-s .oneid-pagination__jump { height: var(--td-comp-size-xs); } .oneid-pagination.oneid-size-s .oneid-input-adornment__append { height: calc(var(--td-comp-size-xs) - 4px); font: var(--td-font-body-small); } .oneid-pagination.oneid-size-s .oneid-input-number { width: 48px; } .oneid-pagination.oneid-size-s .oneid-input-number .oneid-input { height: calc(var(--td-comp-size-xs) - 4px); } .oneid-pagination.oneid-size-s .oneid-pagination__total { font: var(--td-font-body-small); } .oneid-pagination.oneid-size-s .oneid-pagination__select { height: var(--td-comp-size-xs); font-size: var(--td-font-size-body-small); } .oneid-pagination.oneid-size-s .oneid-pagination__number { border: 0 none; height: var(--td-comp-size-xs); min-width: var(--td-comp-size-xs); line-height: var(--td-comp-size-xs); font-size: var(--td-font-body-small); padding-left: var(--td-comp-paddingLR-xxs); padding-right: var(--td-comp-paddingLR-xxs); } .oneid-pagination.oneid-size-s .oneid-pagination__number:hover:not(.oneid-pagination.oneid-size-s .oneid-pagination__number.oneid-is-current) { color: var(--td-text-color-primary); background-color: var(--td-bg-color-secondarycontainer-hover); -webkit-transition: all 0.2s cubic-bezier(0.82, 0, 1, 0.9); transition: all 0.2s cubic-bezier(0.82, 0, 1, 0.9); } .oneid-pagination.oneid-size-s .oneid-pagination__number:active:not(.oneid-pagination.oneid-size-s .oneid-pagination__number.oneid-is-current) { color: var(--td-text-color-primary); background-color: var(--td-bg-color-secondarycontainer-active); } .oneid-pagination.oneid-size-s .oneid-pagination__number.oneid-is-disabled { background: none; color: var(--td-text-color-disabled); } .oneid-pagination.oneid-size-s .oneid-pagination__number.oneid-is-current.oneid-is-disabled { background-color: var(--td-brand-color-focus); color: var(--td-text-color-anti); border-color: var(--td-brand-color-focus); } .oneid-pagination.oneid-size-s .oneid-pagination__btn { border: 0 none; background: none; width: var(--td-comp-size-xs); height: var(--td-comp-size-xs); line-height: var(--td-comp-size-xs); } .oneid-pagination.oneid-size-s .oneid-pagination__btn:hover { background-color: var(--td-bg-color-secondarycontainer-hover); -webkit-transition: all 0.2s cubic-bezier(0.82, 0, 1, 0.9); transition: all 0.2s cubic-bezier(0.82, 0, 1, 0.9); } .oneid-pagination.oneid-size-s .oneid-pagination__btn:active { background-color: var(--td-bg-color-secondarycontainer-active); } .oneid-pagination.oneid-size-s .oneid-pagination__btn.oneid-is-disabled, .oneid-pagination.oneid-size-s .oneid-pagination__btn.oneid-is-disabled:hover, .oneid-pagination.oneid-size-s .oneid-pagination__btn.oneid-is-disabled:active { background: none; color: var(--td-text-color-disabled); } /** IE 兼容 **/ .oneid-pagination-ie { /** 在 IE11 以下浏览器,input autoWidth 计算无法依赖 observer,因而加上最小宽度,避免分页信息出现 0 的情况 */ } .oneid-pagination-ie .oneid-select .oneid-input__inner { min-width: 54px; } /** 吸顶表头 Affix 组件,zIndex: 1000。宽度拖拽辅助线层级需高于表头 */ @-moz-document url-prefix() { .scrollbar { scrollbar-color: var(--td-scrollbar-color) transparent; scrollbar-width: thin; } } .scrollbar::-webkit-scrollbar { width: 6px; height: 6px; } .scrollbar::-webkit-scrollbar-thumb { border: 0px solid transparent; background-clip: content-box; background-color: var(--td-scrollbar-color); border-radius: 11px; } .scrollbar::-webkit-scrollbar-thumb:vertical:hover, .scrollbar::-webkit-scrollbar-thumb:horizontal:hover { background-color: var(--td-scrollbar-hover-color); } .scrollbar.oneid-table__affixed-footer-elm::-webkit-scrollbar-track, .scrollbar.oneid-table__scrollbar--obvious::-webkit-scrollbar-track { background: var(--td-scroll-track-color); } .oneid-table__affixed-footer-wrap > .scrollbar.oneid-table__affixed-footer-elm::-webkit-scrollbar-thumb, .oneid-table--width-overflow.oneid-table--footer-affixed .oneid-table__content::-webkit-scrollbar-thumb, .oneid-table--width-overflow.oneid-table--horizontal-bar-affixed .oneid-table__content::-webkit-scrollbar-thumb { background: transparent; } .oneid-table.oneid-table--overflow-visible { overflow: initial; } .oneid-table { -webkit-box-sizing: border-box; box-sizing: border-box; margin: 0; padding: 0; list-style: none; width: 100%; font: var(--td-font-body-medium); color: var(--td-text-color-primary); background-color: var(--td-bg-color-container); position: relative; /** loading need to be top of fixed columns */ } .oneid-table .oneid-popup:not(.oneid-tooltip)[data-popper-placement^=top] .oneid-popup__arrow { bottom: -4px; } .oneid-table:focus-visible { outline: none; } .oneid-table .oneid-loading--full { z-index: 72; } .oneid-table.oneid-vertical-align-top th:not(.oneid-table__cell-check), .oneid-table.oneid-vertical-align-top td:not(.oneid-table__cell-check) { vertical-align: top; } .oneid-table.oneid-vertical-align-middle th:not(.oneid-table__cell-check), .oneid-table.oneid-vertical-align-middle td:not(.oneid-table__cell-check) { vertical-align: middle; } .oneid-table.oneid-vertical-align-bottom th:not(.oneid-table__cell-check), .oneid-table.oneid-vertical-align-bottom td:not(.oneid-table__cell-check) { vertical-align: bottom; } .oneid-table .oneid-table__resize-line { display: none; position: absolute; left: 10px; width: 0; border-left: 1px solid var(--td-component-border); z-index: 1001; } .oneid-table__column-controller-trigger.oneid-align-top-right, .oneid-table__column-controller-trigger.oneid-align-bottom-right { text-align: right; } .oneid-table__column-controller-trigger { padding: var(--td-comp-paddingTB-l) 0; } .oneid-table__column-controller-item:not(:last-child) { margin-bottom: var(--td-comp-margin-l); } .oneid-table__content { position: relative; } @-moz-document url-prefix() { .oneid-table__content { scrollbar-color: var(--td-scrollbar-color) transparent; scrollbar-width: thin; } } .oneid-table__content::-webkit-scrollbar { width: 6px; height: 6px; } .oneid-table__content::-webkit-scrollbar-thumb { border: 0px solid transparent; background-clip: content-box; background-color: var(--td-scrollbar-color); border-radius: 11px; } .oneid-table__content::-webkit-scrollbar-thumb:vertical:hover, .oneid-table__content::-webkit-scrollbar-thumb:horizontal:hover { background-color: var(--td-scrollbar-hover-color); } @-moz-document url-prefix() { .oneid-table__content { scrollbar-color: var(--td-scrollbar-color) transparent; scrollbar-width: thin; } } .oneid-table__content::-webkit-scrollbar { width: 6px; height: 6px; } .oneid-table__content::-webkit-scrollbar-thumb { border: 0px solid transparent; background-clip: content-box; background-color: var(--td-scrollbar-color); border-radius: 11px; } .oneid-table__content::-webkit-scrollbar-thumb:vertical:hover, .oneid-table__content::-webkit-scrollbar-thumb:horizontal:hover { background-color: var(--td-scrollbar-hover-color); } .oneid-table__pagination { padding: var(--td-comp-paddingTB-l) var(--td-comp-paddingLR-l); -webkit-box-sizing: border-box; box-sizing: border-box; } .oneid-table .oneid-icon { font-size: var(--td-font-size-body-large); } .oneid-table table { width: 100%; border-spacing: 0; } .oneid-table .oneid-text-ellipsis { line-height: var(--td-line-height-body-medium); white-space: nowrap; word-wrap: normal; overflow: hidden; text-overflow: ellipsis; } .oneid-table th, .oneid-table td { position: relative; padding: var(--td-comp-paddingTB-m) var(--td-comp-paddingLR-l); border-bottom: 1px solid var(--td-component-border); line-height: var(--td-line-height-body-medium); font-weight: normal; overflow-wrap: break-word; background-color: inherit; -webkit-box-sizing: border-box; box-sizing: border-box; text-align: left; } .oneid-table th.oneid-table__th-drag { padding: 0; height: 0; text-align: center; } .oneid-table thead td, .oneid-table th { color: var(--td-text-color-placeholder); } .oneid-table td[key=row-select] { padding: 13px 0 11px var(--td-comp-paddingLR-l); } .oneid-table td.oneid-align-left, .oneid-table th.oneid-align-left { text-align: left; } .oneid-table td.oneid-align-right, .oneid-table th.oneid-align-right { text-align: right; } .oneid-table td.oneid-align-center, .oneid-table th.oneid-align-center { text-align: center; } .oneid-table tr { background-color: var(--td-bg-color-container); } .oneid-table.oneid-size-s th, .oneid-table.oneid-size-s td { padding: var(--td-comp-paddingTB-s) var(--td-comp-paddingLR-s); } .oneid-table.oneid-size-l th, .oneid-table.oneid-size-l td { padding: var(--td-comp-paddingTB-l) var(--td-comp-paddingLR-xl); } .oneid-table .oneid-table__expandable-icon-cell, .oneid-table .oneid-table__selection-cell { padding: 0; height: 0; } .oneid-table td.oneid-table__handle-draggable { text-align: center; height: 0; padding: 0; } .oneid-table .oneid-table__cell--selectable > .oneid-checkbox { vertical-align: middle; } .oneid-table .oneid-table__cell--selectable + td, .oneid-table .oneid-table__cell--selectable + th { padding-left: 0; } .oneid-table--bordered td, .oneid-table--bordered th { border-left: 1px solid var(--td-component-border); } .oneid-table--bordered td.oneid-table__cell--fixed-left-last::before, .oneid-table--bordered th.oneid-table__cell--fixed-left-last::before { border-right: 1px solid var(--td-component-border); } .oneid-table--bordered th:first-child, .oneid-table--bordered td.oneid-table__td-first-col { border-left-width: 0; } .oneid-table--bordered:not(.oneid-table--rowspan-colspan) td:first-child { border-left-width: 0; } .oneid-table--bordered .oneid-table__content { border-left: 1px solid var(--td-component-border); } .oneid-table--bordered .oneid-table__content::-webkit-scrollbar-corner { background-color: transparent; } .oneid-table--bordered .oneid-table__content { border: 1px solid var(--td-component-border); border-radius: var(--td-radius-default); } .oneid-table--bordered .oneid-table--loading { border-bottom: 1px solid var(--td-component-border); } .oneid-table--bordered .oneid-table__pagination { padding: var(--td-comp-paddingTB-l) var(--td-comp-paddingLR-l); } .oneid-table--bordered .oneid-table__bottom-content + .oneid-table__pagination { padding: 0; } .oneid-table--bordered.oneid-table__header--fixed .oneid-table__content { border-bottom: 1px solid var(--td-component-border); } .oneid-table--bordered .oneid-table__td-last-row { border-bottom: none; } .oneid-table--striped:not(.oneid-table--bordered) th, .oneid-table--striped:not(.oneid-table--bordered) td { border-bottom: none; } .oneid-table--striped.oneid-table--header-fixed > .oneid-table__content > table > tbody tr:nth-of-type(even) { background-color: var(--td-bg-color-secondarycontainer); } .oneid-table--striped:not(.oneid-table--header-fixed) > .oneid-table__content > table > tbody > tr:nth-of-type(odd):not(.oneid-table__expanded-row) { background-color: var(--td-bg-color-secondarycontainer); } .oneid-table--striped.oneid-table--hoverable.oneid-table__header--fixed tbody tr:nth-of-type(even):hover { background-color: var(--td-bg-color-secondarycontainer-hover); } .oneid-table--striped.oneid-table--hoverable:not(.oneid-table__header--fixed) > .oneid-table__content > table > tbody tr:nth-of-type(odd):hover { background-color: var(--td-bg-color-secondarycontainer-hover); } .oneid-table--striped.oneid-table--hoverable > .oneid-table__content > table > tbody tr { -webkit-transition: background-color 0.2s linear; transition: background-color 0.2s linear; } .oneid-table--striped.oneid-table--hoverable > .oneid-table__content > table > tbody tr:hover { background-color: var(--td-bg-color-container-hover); } .oneid-table--hoverable tbody tr { -webkit-transition: background-color 0.2s linear; transition: background-color 0.2s linear; } .oneid-table--hoverable tbody tr:hover { background-color: var(--td-bg-color-container-hover); } .oneid-table.oneid-table--align-top tbody td { vertical-align: top; } .oneid-table .oneid-table__cell--highlight { background-color: var(--td-bg-color-secondarycontainer); } .oneid-table__header--fixed table { table-layout: fixed; } .oneid-table__header--fixed th, .oneid-table__header--fixed td { overflow-wrap: break-word; } .oneid-table__header--fixed.oneid-table__header, .oneid-table__header--fixed .oneid-table__header { width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; position: relative; z-index: 5; } @-moz-document url-prefix() { .oneid-table__header--fixed .oneid-table__header { scrollbar-color: var(--td-scrollbar-color) transparent; scrollbar-width: thin; } } .oneid-table__header--fixed .oneid-table__header::-webkit-scrollbar { width: 6px; height: 6px; } .oneid-table__header--fixed .oneid-table__header::-webkit-scrollbar-thumb { border: 0px solid transparent; background-clip: content-box; background-color: var(--td-scrollbar-color); border-radius: 11px; } .oneid-table__header--fixed .oneid-table__header::-webkit-scrollbar-thumb:vertical:hover, .oneid-table__header--fixed .oneid-table__header::-webkit-scrollbar-thumb:horizontal:hover { background-color: var(--td-scrollbar-hover-color); } @-moz-document url-prefix() { .oneid-table__header--fixed .oneid-table__header { scrollbar-color: var(--td-scrollbar-color) transparent; scrollbar-width: thin; } } .oneid-table__header--fixed .oneid-table__header::-webkit-scrollbar { width: 6px; height: 6px; } .oneid-table__header--fixed .oneid-table__header::-webkit-scrollbar-thumb { border: 0px solid transparent; background-clip: content-box; background-color: var(--td-scrollbar-color); border-radius: 11px; } .oneid-table__header--fixed .oneid-table__header::-webkit-scrollbar-thumb:vertical:hover, .oneid-table__header--fixed .oneid-table__header::-webkit-scrollbar-thumb:horizontal:hover { background-color: var(--td-scrollbar-hover-color); } .oneid-table__header--fixed .oneid-table__body { overflow-y: auto; width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; } @-moz-document url-prefix() { .oneid-table__header--fixed .oneid-table__body { scrollbar-color: var(--td-scrollbar-color) transparent; scrollbar-width: thin; } } .oneid-table__header--fixed .oneid-table__body::-webkit-scrollbar { width: 6px; height: 6px; } .oneid-table__header--fixed .oneid-table__body::-webkit-scrollbar-thumb { border: 0px solid transparent; background-clip: content-box; background-color: var(--td-scrollbar-color); border-radius: 11px; } .oneid-table__header--fixed .oneid-table__body::-webkit-scrollbar-thumb:vertical:hover, .oneid-table__header--fixed .oneid-table__body::-webkit-scrollbar-thumb:horizontal:hover { background-color: var(--td-scrollbar-hover-color); } @-moz-document url-prefix() { .oneid-table__header--fixed .oneid-table__body { scrollbar-color: var(--td-scrollbar-color) transparent; scrollbar-width: thin; } } .oneid-table__header--fixed .oneid-table__body::-webkit-scrollbar { width: 6px; height: 6px; } .oneid-table__header--fixed .oneid-table__body::-webkit-scrollbar-thumb { border: 0px solid transparent; background-clip: content-box; background-color: var(--td-scrollbar-color); border-radius: 11px; } .oneid-table__header--fixed .oneid-table__body::-webkit-scrollbar-thumb:vertical:hover, .oneid-table__header--fixed .oneid-table__body::-webkit-scrollbar-thumb:horizontal:hover { background-color: var(--td-scrollbar-hover-color); } .oneid-table:not(.oneid-table--bordered) .oneid-table__cell--selectable + td, .oneid-table:not(.oneid-table--bordered) .oneid-table__cell--selectable + th { padding-left: 0; } .oneid-table__cell--fixed.oneid-table__header--fixed .oneid-table__header { overflow: hidden; width: 100%; } .oneid-table__cell--fixed.oneid-table__header--fixed .oneid-table__header .oneid-table__cell--fixed-left:last-child::after, .oneid-table__cell--fixed.oneid-table__header--fixed .oneid-table__header .oneid-table__cell--fixed-right:last-child::after { content: ""; position: absolute; right: -6px; width: 6px; height: 100%; top: 0; background-color: var(--td-bg-color-secondarycontainer); } .oneid-table__cell--fixed.oneid-table__header--fixed .oneid-table__body { overflow: auto scroll; } .oneid-table__cell--fixed .oneid-table__content { overflow: auto hidden; } .oneid-table__cell--fixed table { table-layout: fixed; min-width: 100%; } .oneid-table__cell--fixed th, .oneid-table__cell--fixed td { position: relative; } .oneid-table__cell--fixed .oneid-table__cell--fixed-left-last::before { z-index: -1; background-color: inherit; } .oneid-table__cell--fixed .oneid-table__cell--fixed-left-last::after { position: absolute; top: 0; bottom: 0; content: ""; -webkit-transition: -webkit-box-shadow 0.3s; transition: -webkit-box-shadow 0.3s; transition: box-shadow 0.3s; transition: box-shadow 0.3s, -webkit-box-shadow 0.3s; pointer-events: none; z-index: -2; } .oneid-table__cell--fixed .oneid-table__cell--fixed-left-last::after { right: 0; -webkit-transform: translateX(100%); transform: translateX(100%); } .oneid-table__cell--fixed .oneid-table__cell--fixed-right-first::before { z-index: -1; background-color: inherit; } .oneid-table__cell--fixed .oneid-table__cell--fixed-right-first::after { position: absolute; top: 0; bottom: 0; content: ""; -webkit-transition: -webkit-box-shadow 0.3s; transition: -webkit-box-shadow 0.3s; transition: box-shadow 0.3s; transition: box-shadow 0.3s, -webkit-box-shadow 0.3s; pointer-events: none; z-index: -2; } .oneid-table__cell--fixed .oneid-table__cell--fixed-right-first::after { left: 0; -webkit-transform: translateX(-100%); transform: translateX(-100%); } .oneid-table .oneid-table__cell-resizable { position: relative; } .oneid-table .oneid-table__cell-resizable .oneid-table__cell--resizer { position: absolute; top: 0; right: -5px; bottom: 0; z-index: 10; width: 10px; cursor: col-resize; } .oneid-table .oneid-table__row--disabled { color: var(--td-text-color-disabled); } .oneid-table .oneid-table__cell--title { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .oneid-table__column-controller-desc { margin-bottom: var(--td-comp-margin-xxl); } .oneid-table__column-controller-block { padding: var(--td-comp-paddingTB-m) var(--td-comp-paddingLR-l); border: 1px solid var(--td-component-border); border-bottom: 1px solid var(--td-component-border); } .oneid-table__column-controller-block + .oneid-table__column-controller-block { border-top: 0; padding: var(--td-comp-paddingTB-l) var(--td-comp-paddingLR-l); border-bottom: 1px solid var(--td-component-border); } .oneid-table__column-controller--fixed .oneid-checkbox { width: 108px; } /** 表格行点击高亮悬浮态 */ .oneid-table.oneid-table__row--active-single tbody > tr.oneid-table__row--active, .oneid-table.oneid-table__row--active-multiple tbody > tr.oneid-table__row--active { background-color: var(--td-brand-color-light); } .oneid-table.oneid-table__row--active-single tbody > tr.oneid-table__row--active.oneid-table__row--hover, .oneid-table.oneid-table__row--active-multiple tbody > tr.oneid-table__row--active.oneid-table__row--hover { background-color: var(--td-brand-color-light-hover); } .oneid-table.oneid-table--hoverable tbody > tr.oneid-table__row--active:hover { background-color: var(--td-brand-color-light-hover); } /** 键盘操作悬浮表格行 */ .oneid-table.oneid-table--row-expandable tbody > tr.oneid-table__row--hover, .oneid-table.oneid-table--row-select tbody > tr.oneid-table__row--hover, .oneid-table.oneid-table__row--active-multiple tbody > tr.oneid-table__row--hover { background-color: var(--td-bg-color-container-hover); } .oneid-table--bordered .oneid-table__cell--sortable .oneid-table__cell--title, .oneid-table--bordered .oneid-table__cell--filterable .oneid-table__cell--title { -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } .oneid-table th.oneid-align-right .oneid-table__cell--title { -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; } /** * 有边框和无边框的图标排列不一样,需谨慎修改 * 无边框模式,图标依次紧跟标题 * 有边框模式,只有一个图标时,图标靠近边框右侧;有两个图标时,排序图标靠近标题,过滤图标靠近边框右侧 */ .oneid-table__cell--sort-trigger { text-align: center; vertical-align: text-bottom; } .oneid-table__cell--sort-trigger svg { vertical-align: initial; } .oneid-table--loading { position: relative; } .oneid-table--loading-progressbar { overflow: hidden; position: absolute; top: 0; left: 0; height: 1px; background-color: var(--td-brand-color); -webkit-animation: tTableProgressbar 2s ease-in-out; animation: tTableProgressbar 2s ease-in-out; -webkit-animation-fill-mode: both; animation-fill-mode: both; } .oneid-table--loading-message { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; min-height: 120px; color: var(--td-text-color-placeholder); } .oneid-table__expanded-cell { padding-left: 45px; } .oneid-table__async-loading { text-align: center; } .oneid-table__async-loading.oneid-is-load-more { cursor: pointer; } .oneid-table__empty { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; min-height: 120px; color: var(--td-text-color-disabled); } .oneid-table__filter-icon, .oneid-table__sort-icon { -webkit-box-align: center; -ms-flex-align: center; align-items: center; background-color: transparent; display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; cursor: pointer; vertical-align: text-bottom; -webkit-transition: 0.2s linear; transition: 0.2s linear; } .oneid-table__filter-icon > svg, .oneid-table__sort-icon > svg { margin-top: 0; } .oneid-table__sort-icon .oneid-is-focus, .oneid-table__sort-icon.oneid-is-focus, .oneid-table__sort-icon:hover { color: var(--td-brand-color); border-radius: var(--td-radius-circle); -webkit-transition: 0.2s linear; transition: 0.2s linear; } .oneid-table__filter-icon .oneid-is-focus, .oneid-table__filter-icon.oneid-is-focus, .oneid-table__filter-icon:hover { color: var(--td-brand-color); -webkit-transition: 0.2s linear; transition: 0.2s linear; } .oneid-table__filter-pop .oneid-popup__content { padding: 0; } .oneid-table__filter-pop .oneid-table__filter-pop-content .oneid-table__filter-pop-content-inner { padding: var(--td-comp-paddingTB-l) var(--td-comp-paddingLR-l); } .oneid-table__filter-pop .oneid-table__filter-pop-content .oneid-table__filter-pop-content-inner .oneid-table__filter-popup-input { margin-bottom: var(--td-comp-margin-s); } .oneid-table__filter-pop .oneid-table__filter-pop-content .oneid-radio-group { display: block; height: auto; } .oneid-table__filter-pop .oneid-table__filter-pop-content .oneid-checkbox-group { display: block; } .oneid-table__filter-pop .oneid-table__filter-pop-content .oneid-checkbox, .oneid-table__filter-pop .oneid-table__filter-pop-content .oneid-radio { display: block; margin: var(--td-comp-margin-xs) 0; } .oneid-table__filter-pop .oneid-table__filter-pop-content .oneid-table__filter-pop-content-button { border-top: 1px solid var(--td-component-border); padding: var(--td-comp-paddingTB-l) var(--td-comp-paddingLR-l); } .oneid-table__filter-pop .oneid-table__filter-pop-content .oneid-table__filter-pop-content-button .oneid-button + .oneid-button { margin-left: var(--td-comp-margin-l); } .oneid-table__filter-pop .oneid-table__list-filter-input--sticky .oneid-table__filter-pop-content .oneid-table__filter-pop-content-inner { padding: 0; max-height: 280px; overflow: auto; position: relative; } .oneid-table__filter-pop .oneid-table__list-filter-input--sticky .oneid-table__filter-pop-content .oneid-table__filter-pop-content-inner .oneid-input__wrap { padding: var(--td-comp-paddingTB-l) var(--td-comp-paddingLR-l) 0 var(--td-comp-paddingLR-l); position: -webkit-sticky; position: sticky; top: 0; z-index: 1; background-color: var(--td-bg-color-container); } .oneid-table__filter-pop .oneid-table__list-filter-input--sticky .oneid-table__filter-pop-content .oneid-table__filter-pop-content-inner .oneid-radio-group { padding: 0 var(--td-comp-paddingLR-l); } .oneid-table__filter-pop-content-inner > .oneid-input__wrap { width: 200px; } .oneid-table__filter-pop-content-inner > .oneid-date-range-picker__panel { margin: calc(0px - var(--td-comp-margin-l)); } .oneid-table__sort-icon--active { color: var(--td-brand-color); -webkit-transition: 0.2s linear; transition: 0.2s linear; } .oneid-table__double-icons { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .oneid-table__double-icons .oneid-table__sort-icon { position: relative; } .oneid-table__double-icons .oneid-table-sort-asc { top: var(--td-comp-margin-xxs); } .oneid-table__double-icons .oneid-table-sort-desc { bottom: var(--td-comp-margin-xxs); } .oneid-table__filter-icon-wrap { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; pointer-events: all; height: var(--td-font-size-body-large); width: var(--td-font-size-body-large); margin-left: var(--td-comp-margin-s); } .oneid-table--bordered .oneid-table__filter-icon-wrap { -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; } .oneid-table--bordered .oneid-table__cell--sortable.oneid-table__cell--filterable .oneid-table__filter-icon-wrap { -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-flex: 1; -ms-flex: 1; flex: 1; } .oneid-table .oneid-align-center .oneid-table__cell--sortable, .oneid-table .oneid-align-center .oneid-table__cell--filterable { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-pack: distribute; justify-content: space-around; } .oneid-table__expand-box { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; width: 100%; height: 100%; color: var(--td-text-color-placeholder); cursor: pointer; -webkit-transition: all 0.2s cubic-bezier(0.38, 0, 0.24, 1) 0s; transition: all 0.2s cubic-bezier(0.38, 0, 0.24, 1) 0s; } .oneid-table__expand-box:hover { color: var(--td-brand-color); -webkit-transition: 0.2s linear; transition: 0.2s linear; } @-webkit-keyframes tTableProgressbar { 0% { width: 0; } 100% { width: 100%; } } @keyframes tTableProgressbar { 0% { width: 0; } 100% { width: 100%; } } .oneid-table__th-row-select .oneid-table__th-cell-inner { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .oneid-table-expandable-icon-cell + .oneid-table__cell--selectable[key=row-select] { padding-left: var(--td-comp-margin-s); } .oneid-table__filter--bottom-buttons { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; padding: var(--td-comp-paddingTB-l) var(--td-comp-paddingLR-l); border-top: 1px solid var(--td-component-border); } .oneid-table__filter--bottom-buttons > .oneid-button + .oneid-button { margin-left: var(--td-comp-margin-s); } .oneid-table__row-filter-inner { position: -webkit-sticky; position: sticky; left: 0; text-align: center; } .oneid-table__filter-result { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .oneid-table__filter-result > .oneid-button { margin-left: var(--td-comp-margin-s); } .oneid-table--layout-fixed { table-layout: fixed; } .oneid-table--layout-auto { table-layout: auto; } .oneid-table__ellipsis { white-space: nowrap; width: 100%; } .oneid-table__content { overflow: auto; } .oneid-table__content--scrollable-to-left .oneid-table__cell--fixed-left-last::after { border-right: 2px solid var(--td-component-border); } .oneid-table__content--scrollable-to-right .oneid-table__cell--fixed-right-first::after { border-left: 2px solid var(--td-component-border); } .oneid-table--bordered.oneid-table__content--scrollable-to-left .oneid-table__cell--fixed-left-last::after { border-right: 4px solid var(--td-component-border); } .oneid-table--bordered.oneid-table__content--scrollable-to-right .oneid-table__cell--fixed-right-first::after { border-left: 4px solid var(--td-component-border); } .oneid-table__scroll-bar-divider { position: absolute; bottom: 0; right: 0; height: 100%; border-right: 1px solid var(--td-component-border); z-index: 71; } .oneid-table__footer, .oneid-table__header.oneid-table__header--fixed { position: -webkit-sticky; position: sticky; z-index: 50; } .oneid-table:not(.oneid-table--striped) .oneid-table__footer > tr { background-color: var(--td-bg-color-secondarycontainer); } .oneid-table__header--fixed:not(.oneid-table__header--multiple) > tr > th { background-color: var(--td-bg-color-secondarycontainer); } .oneid-table__row--fixed-top, .oneid-table__row--fixed-bottom { position: -webkit-sticky; position: sticky; z-index: 70; } .oneid-table__row--fixed-bottom-first > td { border-top: 1px solid var(--td-component-border); } .oneid-table--bordered .oneid-table__content .oneid-table__row--without-border-bottom > td { border-bottom: 0; } .oneid-table--bordered tbody > tr:last-child > td, .oneid-table--bordered tfoot > tr:last-child > td { border-bottom: 0; } .oneid-table--bordered tfoot > tr:first-child > td { border-top: 1px solid var(--td-component-border); } .oneid-table__header.oneid-table__header--fixed { top: 0; } .oneid-table__footer.oneid-table__footer--fixed { bottom: 0; } .oneid-table--column-fixed .oneid-table__cell--fixed-left-last::before { z-index: -1; background-color: inherit; } .oneid-table--column-fixed .oneid-table__cell--fixed-left-last::after { position: absolute; top: 0; bottom: 0; content: ""; -webkit-transition: -webkit-box-shadow 0.3s; transition: -webkit-box-shadow 0.3s; transition: box-shadow 0.3s; transition: box-shadow 0.3s, -webkit-box-shadow 0.3s; pointer-events: none; z-index: -2; } .oneid-table--column-fixed .oneid-table__cell--fixed-left-last::after { right: 0; -webkit-transform: translateX(100%); transform: translateX(100%); } .oneid-table--column-fixed .oneid-table__cell--fixed-right-first::before { z-index: -1; background-color: inherit; } .oneid-table--column-fixed .oneid-table__cell--fixed-right-first::after { position: absolute; top: 0; bottom: 0; content: ""; -webkit-transition: -webkit-box-shadow 0.3s; transition: -webkit-box-shadow 0.3s; transition: box-shadow 0.3s; transition: box-shadow 0.3s, -webkit-box-shadow 0.3s; pointer-events: none; z-index: -2; } .oneid-table--column-fixed .oneid-table__cell--fixed-right-first::after { left: 0; -webkit-transform: translateX(-100%); transform: translateX(-100%); } .oneid-table--column-fixed .oneid-table__cell--fixed-left, .oneid-table--column-fixed .oneid-table__cell--fixed-right { position: -webkit-sticky; position: sticky; } .oneid-table--column-fixed .oneid-table__cell--fixed-left { z-index: 30; } .oneid-table--column-fixed .oneid-table__cell--fixed-right { z-index: 31; } .oneid-table__empty-row > td { padding: 0; border: 0; } .oneid-table:not(.oneid-table--bordered) .oneid-table__header.oneid-table--bordered > tr:first-child > th { border-top: 1px solid var(--td-component-border); } .oneid-table--multiple-header .oneid-table__header th.oneid-table__header-th--bordered { border-left-width: 1px; } .oneid-table__header.oneid-table__header--multiple > tr { background-color: var(--td-bg-color-container); } .oneid-table__tree-op-icon { margin-right: var(--td-comp-margin-s); cursor: pointer; display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; vertical-align: -3px; } .oneid-table__tree-op-icon:hover { color: var(--td-brand-color); -webkit-transition: 0.2s linear; transition: 0.2s linear; } .oneid-table__tree-leaf-node .oneid-table__tree-op-icon { min-width: 0; margin-right: var(--td-comp-margin-xxs); } .oneid-table__virtual-scroll-cursor { position: absolute; width: 1px; height: 1px; -webkit-transition: -webkit-transform 0.2s; transition: -webkit-transform 0.2s; transition: transform 0.2s; transition: transform 0.2s, -webkit-transform 0.2s; } .oneid-table__virtual-scroll-header { position: absolute; z-index: 51; left: 0; } /** 用于隐藏表头滚动条 */ .oneid-table__affixed-header-elm-wrap { overflow: hidden; } .oneid-table__affixed-header-elm-wrap, .oneid-table__affixed-header-elm { position: absolute; left: 0; z-index: 51; } .oneid-table__affixed-header-elm { overflow: auto; -webkit-transition: opacity 0.2s linear; transition: opacity 0.2s linear; opacity: 1; } .oneid-table__affixed-footer-elm { overflow: auto; z-index: 50; } .oneid-table--bordered .oneid-table__affixed-header-elm { border: 1px solid var(--td-component-border); border-bottom: 0; border-right: 0; } .oneid-table--bordered .oneid-table__affixed-footer-elm { border-left: 1px solid var(--td-component-border); border-bottom: 1px solid var(--td-component-border); } .oneid-table--multiple-header.oneid-table--bordered .oneid-table__affixed-header-elm { border-right: 0; } .oneid-is-hidden { display: none; } .oneid-positive-rotate-90 { -webkit-transform: rotate(90deg); transform: rotate(90deg); } .oneid-negative-rotate-180 { -webkit-transform: rotate(180deg); transform: rotate(180deg); } .oneid-table__expanded-row > td, .oneid-table__row--full > td { padding: 0; } /** @{prefix}-table__row--full 和 @{prefix}-table__row-full-element 同时存在,是为了保证 固定列时,当前行不随内容进行横向滚动 */ .oneid-table__row-full-element { padding: var(--td-comp-paddingTB-m) var(--td-comp-paddingLR-l); } .oneid-table__row-full-inner { position: -webkit-sticky; position: sticky; left: 0; } .oneid-table__row-full-inner:not(.oneid-table__empty) { display: inline-block; } .oneid-table__tree-col { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .oneid-table__tree-col--inline { display: inline; } .oneid-table--full-height { height: 100%; } /** 默认最小高度限制为 Empty 高度加表头高度 */ .oneid-table--loading .oneid-table__content { min-height: 168px; } .oneid-table__handle-draggable:hover, .oneid-table--row-draggable tr, .oneid-table__th--drag-sort { cursor: move; } .oneid-table__ele--draggable-chosen { -webkit-box-shadow: var(--td-shadow-1); box-shadow: var(--td-shadow-1); } .oneid-table:not(.oneid-table--row-edit) .oneid-table__cell--editable { min-height: 22px; line-height: var(--td-line-height-body-medium); cursor: pointer; } .oneid-table:not(.oneid-table--row-edit) .oneid-table__cell--editable .oneid-icon { margin-left: var(--td-comp-margin-s); font-size: var(--td-font-size-body-large); -webkit-transition: 0.2s linear; transition: 0.2s linear; color: var(--td-text-color-placeholder); } .oneid-table:not(.oneid-table--row-edit) .oneid-table__cell--editable .oneid-icon:hover { color: var(--td-brand-color); } .oneid-table:not(.oneid-table--row-edit) .oneid-table__cell--editable:hover { -webkit-transition: 0.2s linear; transition: 0.2s linear; } /** 吸底的分页器,需要背景色,避免表格文本内容显示穿透 */ .oneid-affix .oneid-table__pagination { background-color: var(--td-bg-color-container); } .oneid-table--bordered .oneid-affix .oneid-table__pagination { border-top: 1px solid var(--td-component-border); } .oneid-table__bottom-content + .oneid-table__pagination-wrap .oneid-table__pagination { border: 0; padding: 0; } .oneid-table--column-resizable:not(.oneid-table--bordered) { /** 表格左边有冻结列滚动时,去掉hover表头时多出的一个像素,避免出现表头的冻结列跟表内容的冻结列没有对齐的问题 */ } .oneid-table--column-resizable:not(.oneid-table--bordered) th { border-top: 1px solid transparent; } .oneid-table--column-resizable:not(.oneid-table--bordered) thead.oneid-table__header:hover th:not(:last-child) { border-right: 1px solid var(--td-component-border); } .oneid-table--column-resizable:not(.oneid-table--bordered) thead.oneid-table__header:hover th { border-top: 1px solid var(--td-component-border); } .oneid-table--column-resizable:not(.oneid-table--bordered).oneid-table__content--scrollable-to-left.oneid-table__content--scrollable-to-right thead.oneid-table__header:hover .oneid-table__cell--fixed-left-last:not(:last-child), .oneid-table--column-resizable:not(.oneid-table--bordered).oneid-table__content--scrollable-to-left thead.oneid-table__header:hover .oneid-table__cell--fixed-left-last:not(:last-child) { border-right: 0; } /** 可选中行的场景下,将 Checkbox 和 Radio 铺满整个单元格,增大点击范围,方便用户选中 */ .oneid-table td.oneid-table__cell-check, .oneid-table th.oneid-table__cell-check { padding: 0; /** HTML 特性: th/td 必须设置为 0,他们的子元素才能设置为 100% */ height: 0; } .oneid-table td.oneid-table__cell-check .oneid-radio__label:empty, .oneid-table th.oneid-table__cell-check .oneid-radio__label:empty, .oneid-table td.oneid-table__cell-check .oneid-checkbox__label:empty, .oneid-table th.oneid-table__cell-check .oneid-checkbox__label:empty { display: none; } .oneid-table .oneid-table__cell-check .oneid-radio, .oneid-table .oneid-table__cell-check .oneid-checkbox, .oneid-table .oneid-table__cell-check .oneid-table__th-cell-inner { width: 100%; height: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .oneid-table td .oneid-input__tips { position: initial; } .oneid-table .oneid-table__sort-column { background-color: var(--td-bg-color-secondarycontainer); } .oneid-table__ellipsis-content.oneid-size-s .oneid-popup__content { font: var(--td-font-body-medium); } .oneid-list { font: var(--td-font-body-medium); -webkit-box-sizing: border-box; box-sizing: border-box; margin: 0; padding: 0; list-style: none; overflow: auto; color: var(--td-text-color-primary); background: var(--td-bg-color-container); } @-moz-document url-prefix() { .oneid-list { scrollbar-color: var(--td-scrollbar-color) transparent; scrollbar-width: thin; } } .oneid-list::-webkit-scrollbar { width: 6px; height: 6px; } .oneid-list::-webkit-scrollbar-thumb { border: 0px solid transparent; background-clip: content-box; background-color: var(--td-scrollbar-color); border-radius: 11px; } .oneid-list::-webkit-scrollbar-thumb:vertical:hover, .oneid-list::-webkit-scrollbar-thumb:horizontal:hover { background-color: var(--td-scrollbar-hover-color); } .oneid-list__inner { list-style: none; padding: 0; margin: 0; } .oneid-list-item { font: var(--td-font-body-medium); padding: var(--td-comp-paddingTB-m) var(--td-comp-paddingLR-l); display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -ms-flex-align: center; align-items: center; position: relative; } .oneid-list-item::after { content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 1px; } .oneid-list-item-main { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; width: 100%; -webkit-box-flex: 1; -ms-flex: 1; flex: 1; } .oneid-list-item__meta { display: -webkit-box; display: -ms-flexbox; display: flex; } .oneid-list-item__meta-avatar { width: var(--td-comp-size-xxxl); height: var(--td-comp-size-xxxl); border-radius: calc(var(--td-comp-size-xxxl) / 2); overflow: hidden; background: var(--td-bg-color-page); margin-right: var(--td-comp-margin-l); -ms-flex-negative: 0; flex-shrink: 0; } .oneid-list-item__meta-avatar img { max-width: 100%; width: 100%; height: 100%; } .oneid-list-item__meta-title { padding: 0; font: var(--td-font-title-medium); margin: 0 0 var(--td-comp-margin-s); color: var(--td-text-color-primary); } .oneid-list-item__meta-description { margin-right: var(--td-comp-margin-xxl); color: var(--td-text-color-primary); } .oneid-list-item__action { list-style: none; padding: 0; -ms-flex-negative: 0; flex-shrink: 0; } .oneid-list-item__action > li { display: inline-block; } .oneid-list-item__action > li:not(:last-child) { margin-right: var(--td-comp-margin-l); } .oneid-list-item__action > li .oneid-icon { color: var(--td-text-color-secondary); font-size: var(--td-comp-size-xxxs); } .oneid-list-item__action > li .oneid-icon:hover { color: var(--td-text-color-link); cursor: pointer; } .oneid-list-item__action > li > a { text-decoration: none; color: var(--td-brand-color); } .oneid-list--split .oneid-list-item::after { background: var(--td-border-level-1-color); } .oneid-list--stripe .oneid-list-item:nth-child(even) { background: var(--td-bg-color-secondarycontainer); } .oneid-list--vertical-action .oneid-list-item { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } .oneid-list.oneid-size-s .oneid-list-item { padding: var(--td-comp-paddingTB-s) var(--td-comp-paddingLR-m); } .oneid-list.oneid-size-l .oneid-list-item { padding: var(--td-comp-paddingTB-l) var(--td-comp-paddingLR-xl); } .oneid-list__header, .oneid-list__footer { background: var(--td-bg-color-container); padding: var(--td-comp-paddingTB-m) var(--td-comp-paddingLR-l); } .oneid-list__load { background: var(--td-bg-color-container); text-align: center; line-height: var(--td-line-height-body-medium); } .oneid-list__load > div { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .oneid-list__load:not(:empty) { padding: var(--td-comp-paddingTB-m) var(--td-comp-paddingLR-l); } .oneid-list__load .oneid-loading { font-size: var(--td-comp-size-xxxs); margin-right: var(--td-comp-margin-s); } .oneid-list__load .oneid-loading.oneid-is-load-more { cursor: pointer; } .oneid-tabs { font: var(--td-font-body-medium); color: var(--td-text-color-primary); -webkit-box-sizing: border-box; box-sizing: border-box; margin: 0; padding: 0; list-style: none; overflow: hidden; background-color: var(--td-bg-color-container); } .oneid-tabs__header.oneid-is-left { float: left; } .oneid-tabs__header.oneid-is-right { float: right; } .oneid-tabs__header .oneid-icon { font-size: var(--td-font-size-body-large); } .oneid-tabs__nav { position: relative; overflow: hidden; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .oneid-tabs__operations { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; position: absolute; border-bottom: 1px solid var(--td-component-stroke); background-color: var(--td-bg-color-container); } .oneid-tabs__operations--left { left: 0; z-index: 2; } .oneid-tabs__operations--right { right: 0; z-index: 2; } .oneid-tabs__operations--right .oneid-tabs__btn:first-child { -webkit-box-shadow: -10px 0 20px 5px rgba(0, 0, 0, 0.05); box-shadow: -10px 0 20px 5px rgba(0, 0, 0, 0.05); } .oneid-tabs__operations--right .oneid-tabs__nav-action { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; width: 100%; -webkit-box-flex: 1; -ms-flex: 1; flex: 1; } .oneid-tabs__btn { width: 40px; height: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; background-color: var(--td-bg-color-secondarycontainer); border-left: 1px solid var(--td-component-stroke); cursor: pointer; color: var(--td-text-color-secondary); font: var(--td-font-body-large); -webkit-transition: all 0.24s cubic-bezier(0.38, 0, 0.24, 1); transition: all 0.24s cubic-bezier(0.38, 0, 0.24, 1); z-index: 1; opacity: 1; } .oneid-tabs__btn:hover { background-color: var(--td-bg-color-secondarycontainer-hover); } .oneid-tabs__btn.oneid-size-m { height: var(--td-comp-size-xxl); line-height: var(--td-comp-size-xxl); } .oneid-tabs__btn.oneid-size-l { height: var(--td-comp-size-xxxxl); line-height: var(--td-comp-size-xxxxl); } .oneid-tabs__btn--left { border-right: 1px solid var(--td-component-stroke); -webkit-box-shadow: 10px 0px 20px 5px rgba(0, 0, 0, 0.05); box-shadow: 10px 0px 20px 5px rgba(0, 0, 0, 0.05); } .oneid-tabs__btn--left.fade-enter, .oneid-tabs__btn--left.fade-enter-from, .oneid-tabs__btn--left.fade-leave-to { -webkit-transform: translateX(-50px); transform: translateX(-50px); } .oneid-tabs__btn--right.fade-enter, .oneid-tabs__btn--right.fade-enter-from, .oneid-tabs__btn--right.fade-leave-to { -webkit-transform: translateX(50px); transform: translateX(50px); } .oneid-tabs__nav-container { position: relative; } .oneid-tabs__nav-container.oneid-is-top::after { content: ""; width: 100%; height: 1px; position: absolute; top: auto; right: auto; bottom: 0; left: 0; background-color: var(--td-component-stroke); } .oneid-tabs__nav-container.oneid-is-bottom::after { content: ""; width: 100%; height: 1px; position: absolute; top: 0; right: auto; bottom: auto; left: 0; background-color: var(--td-component-stroke); } .oneid-tabs__nav-container.oneid-is-left::after { content: ""; width: 1px; height: 100%; position: absolute; top: 0; right: 0; bottom: auto; left: auto; background-color: var(--td-component-stroke); } .oneid-tabs__nav-container.oneid-is-right::after { content: ""; width: 1px; height: 100%; position: absolute; top: 0; right: auto; bottom: auto; left: 0; background-color: var(--td-component-stroke); } .oneid-tabs__nav-container.oneid-is-addable { margin-right: 40px; } .oneid-tabs__nav-container.oneid-tabs__nav--card::after { content: ""; background-color: transparent; } .oneid-tabs__scroll-btn { position: absolute; z-index: 1; width: 40px; height: 100%; display: block; background-color: var(--td-bg-color-secondarycontainer); text-align: center; border-bottom: 1px solid var(--td-component-stroke); cursor: pointer; color: var(--td-text-color-secondary); font: var(--td-font-body-large); } .oneid-tabs__scroll-btn.oneid-size-m { height: var(--td-comp-size-xxl); line-height: var(--td-comp-size-xxl); } .oneid-tabs__scroll-btn.oneid-size-l { height: var(--td-comp-size-xxxxl); line-height: var(--td-comp-size-xxxxl); } .oneid-tabs__nav-scroll { position: relative; display: inline-block; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-flex: 1; -ms-flex: auto; flex: auto; -ms-flex-item-align: stretch; align-self: stretch; overflow: hidden; white-space: nowrap; -webkit-transform: translate(0); transform: translate(0); z-index: 1; } .oneid-tabs__nav-wrap { position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; font-size: 0; } .oneid-tabs__nav-wrap.oneid-is-smooth { -webkit-transition: -webkit-transform 0.24s cubic-bezier(0, 0, 0.15, 1); transition: -webkit-transform 0.24s cubic-bezier(0, 0, 0.15, 1); transition: transform 0.24s cubic-bezier(0, 0, 0.15, 1); transition: transform 0.24s cubic-bezier(0, 0, 0.15, 1), -webkit-transform 0.24s cubic-bezier(0, 0, 0.15, 1); } .oneid-tabs__nav-wrap.oneid-is-vertical { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } .oneid-tabs__bar { position: absolute; background-color: var(--td-brand-color); z-index: 1; -webkit-transition: all 0.24s cubic-bezier(0.38, 0, 0.24, 1); transition: all 0.24s cubic-bezier(0.38, 0, 0.24, 1); border-radius: var(--td-radius-small); } .oneid-tabs__bar.oneid-is-top { bottom: 0; left: 0; height: 3px; } .oneid-tabs__bar.oneid-is-bottom { top: 0; left: 0; height: 3px; } .oneid-tabs__bar.oneid-is-left { top: 0; right: 0; width: 3px; } .oneid-tabs__bar.oneid-is-right { top: 0; left: 0; width: 3px; } .oneid-tabs__nav-item { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; font: var(--td-font-body-medium); color: var(--td-text-color-secondary); position: relative; overflow: hidden; z-index: 0; cursor: pointer; -ms-flex-negative: 0; flex-shrink: 0; -webkit-transition: background-color cubic-bezier(0.38, 0, 0.24, 1) 0.2s; transition: background-color cubic-bezier(0.38, 0, 0.24, 1) 0.2s; --ripple-color: var(--td-bg-color-container-active); } .oneid-tabs__nav-item-wrapper { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; height: var(--td-comp-size-m); padding: 0 var(--td-comp-paddingLR-s); margin-left: var(--td-comp-margin-s); margin-right: var(--td-comp-margin-s); border-radius: var(--td-radius-default); -webkit-transition: background-color cubic-bezier(0.38, 0, 0.24, 1) 0.2s; transition: background-color cubic-bezier(0.38, 0, 0.24, 1) 0.2s; --ripple-color: var(--td-bg-color-container-active); } .oneid-tabs__nav-item.oneid-size-l { font: var(--td-font-body-large); } .oneid-tabs__nav-item.oneid-size-l .oneid-tabs__nav-item-wrapper { height: var(--td-comp-size-xxl); padding: 0 var(--td-comp-paddingLR-m); } .oneid-tabs__nav-item-text-wrapper { position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .oneid-tabs__nav-item:not(.oneid-is-disabled):not(.oneid-is-active):hover .oneid-tabs__nav-item-wrapper { background-color: var(--td-bg-color-container-hover); } .oneid-tabs__nav-item.oneid-is-left, .oneid-tabs__nav-item.oneid-is-right { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .oneid-tabs__nav-item.oneid-size-m { height: var(--td-comp-size-xxl); line-height: var(--td-comp-size-xxl); } .oneid-tabs__nav-item.oneid-size-l { height: var(--td-comp-size-xxxxl); line-height: var(--td-comp-size-xxxxl); } .oneid-tabs__nav-item.oneid-is-active { color: var(--td-brand-color); text-shadow: 0 0 0.3px currentcolor; } .oneid-tabs__nav-item.oneid-is-disabled { color: var(--td-text-color-disabled); cursor: not-allowed; } .oneid-tabs__nav-item > .remove-btn { margin-left: var(--td-comp-margin-s); -webkit-transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1); transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1); } .oneid-tabs__nav--card { background-color: var(--td-bg-color-secondarycontainer); } .oneid-tabs__nav--card.oneid-tabs__nav-item { padding-right: var(--td-comp-paddingLR-l); padding-left: var(--td-comp-paddingLR-l); border-bottom: 1px solid var(--td-component-stroke); } .oneid-tabs__nav--card.oneid-tabs__nav-item::after { display: none; } .oneid-tabs__nav--card.oneid-tabs__nav-item:not(.oneid-is-disabled):not(.oneid-is-active):hover { background-color: var(--td-bg-color-secondarycontainer-hover); } .oneid-tabs__nav--card.oneid-tabs__nav-item:not(:first-of-type) { border-left: 1px solid var(--td-component-stroke); } .oneid-tabs__nav--card.oneid-tabs__nav-item:last-of-type { border-right: 1px solid var(--td-component-stroke); } .oneid-tabs__nav--card.oneid-tabs__nav-item.oneid-is-active { color: var(--td-brand-color); background-color: var(--td-bg-color-container); border-bottom-color: var(--td-bg-color-container); } .oneid-tabs__nav--card.oneid-tabs__nav-item.oneid-size-l { padding-left: var(--td-comp-paddingLR-xl); padding-right: var(--td-comp-paddingLR-xl); } .oneid-tabs__nav--card .oneid-icon-close { color: var(--td-text-color-secondary); -webkit-transition: color cubic-bezier(0.38, 0, 0.24, 1) 0.2s; transition: color cubic-bezier(0.38, 0, 0.24, 1) 0.2s; } .oneid-tabs__nav--card .oneid-icon-close:hover { color: var(--td-text-color-primary); } .oneid-tabs__content { overflow: hidden; position: relative; } .oneid-tab-panel.oneid-is-hidden { display: none; } .oneid-notification { color: var(--td-text-color-primary); margin: 0; padding: 0; list-style: none; font: var(--td-font-body-medium); outline: 0; border: 0; background-color: var(--td-bg-color-container); display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-shadow: var(--td-shadow-2), var(--td-shadow-inset-top), var(--td-shadow-inset-right), var(--td-shadow-inset-bottom), var(--td-shadow-inset-left); box-shadow: var(--td-shadow-2), var(--td-shadow-inset-top), var(--td-shadow-inset-right), var(--td-shadow-inset-bottom), var(--td-shadow-inset-left); -webkit-box-sizing: border-box; box-sizing: border-box; border-radius: var(--td-radius-medium); width: 360px; padding: var(--td-comp-paddingTB-l) var(--td-comp-paddingLR-l); } .oneid-notification__icon { width: calc(var(--td-font-size-body-large) + 8px); text-align: center; margin-right: var(--td-comp-margin-s); } .oneid-notification__icon .oneid-icon { font-size: calc(var(--td-font-size-body-large) + 8px); } .oneid-notification .oneid-icon.oneid-is-info { color: var(--td-brand-color); } .oneid-notification .oneid-icon.oneid-is-success { color: var(--td-success-color); } .oneid-notification .oneid-icon.oneid-is-warning { color: var(--td-warning-color); } .oneid-notification .oneid-icon.oneid-is-error { color: var(--td-error-color-6); } .oneid-notification__main { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; } .oneid-notification__title__wrap { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } .oneid-notification__title { font: var(--td-font-title-medium); color: var(--td-text-color-primary); } .oneid-notification .oneid-icon-close { cursor: pointer; font-size: var(--td-font-size-body-large); border-radius: var(--td-radius-default); color: var(--td-text-color-secondary); } .oneid-notification .oneid-icon-close:hover { background: var(--td-bg-color-container-hover); } .oneid-notification .oneid-icon-close:active { background: var(--td-bg-color-container-active); } .oneid-notification__content { font: var(--td-font-body-medium); color: var(--td-text-color-secondary); margin-top: var(--td-comp-margin-s); max-height: 66px; overflow: hidden; text-overflow: ellipsis; word-break: break-all; /* stylelint-disable-next-line */ display: -webkit-box; -webkit-line-clamp: 3; /* stylelint-disable-next-line */ -webkit-box-orient: vertical; } .oneid-notification__detail { margin-top: var(--td-comp-margin-l); text-align: right; font: var(--td-font-body-medium); } .oneid-notification__detail-item { cursor: pointer; } .oneid-notification__detail-item:hover { color: inherit; background: var(--td-bg-color-container-hover); } .oneid-notification__detail-item:active { color: inherit; background: var(--td-bg-color-container-active); } .oneid-notification__detail-item + .oneid-notification__detail-item { margin-left: var(--td-comp-margin-s); } .oneid-notification__detail-item.oneid-is-active { color: var(--td-brand-color); } .oneid-notification__show--top-left { position: fixed; top: 0; left: 0; } .oneid-notification__show--top-left > .oneid-notification { -webkit-animation-duration: 0.3s; animation-duration: 0.3s; -webkit-animation-name: slidein-top-left; animation-name: slidein-top-left; } @-webkit-keyframes slidein-top-left { from { opacity: 0; -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); } to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @keyframes slidein-top-left { from { opacity: 0; -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); } to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } .oneid-notification__show--top-right { position: fixed; top: 0; right: 0; } .oneid-notification__show--top-right > .oneid-notification { -webkit-animation-duration: 0.3s; animation-duration: 0.3s; -webkit-animation-name: slidein-top-right; animation-name: slidein-top-right; } @-webkit-keyframes slidein-top-right { from { opacity: 0; -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); } to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @keyframes slidein-top-right { from { opacity: 0; -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); } to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } .oneid-notification__show--bottom-left { position: fixed; bottom: 0; left: 0; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: reverse; -ms-flex-direction: column-reverse; flex-direction: column-reverse; } .oneid-notification__show--bottom-left > .oneid-notification { -webkit-animation-duration: 0.3s; animation-duration: 0.3s; -webkit-animation-name: slidein-bottom-left; animation-name: slidein-bottom-left; } @-webkit-keyframes slidein-bottom-left { from { opacity: 0; -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); } to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @keyframes slidein-bottom-left { from { opacity: 0; -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); } to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } .oneid-notification__show--bottom-right { position: fixed; bottom: 0; right: 0; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: reverse; -ms-flex-direction: column-reverse; flex-direction: column-reverse; } .oneid-notification__show--bottom-right > .oneid-notification { -webkit-animation-duration: 0.3s; animation-duration: 0.3s; -webkit-animation-name: slidein-bottom-right; animation-name: slidein-bottom-right; } @-webkit-keyframes slidein-bottom-right { from { opacity: 0; -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); } to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @keyframes slidein-bottom-right { from { opacity: 0; -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); } to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } .oneid-notification-list__show { position: fixed; } a.oneid-menu__item { text-decoration: none; color: unset; } a.oneid-menu__item:hover, a.oneid-menu__item:active { color: inherit; } .oneid-menu__logo > * { margin-left: var(--td-comp-margin-xxl); } .oneid-head-menu { font: var(--td-font-body-medium); color: var(--td-text-color-primary); -webkit-box-sizing: border-box; box-sizing: border-box; margin: 0; padding: 0; list-style: none; position: relative; width: 100%; background-color: var(--td-bg-color-container); } .oneid-head-menu__inner { display: -webkit-box; display: -ms-flexbox; display: flex; height: var(--td-comp-size-xxxl); } .oneid-head-menu__inner li + li { margin-left: var(--td-comp-margin-s); } .oneid-head-menu__inner .oneid-menu:first-child { margin-left: var(--td-comp-margin-xxl); } .oneid-head-menu .oneid-menu__logo:not(:empty) { height: 100%; margin-right: var(--td-comp-margin-xxxl); } .oneid-head-menu .oneid-menu { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .oneid-head-menu .oneid-menu__operations:not(:empty) { position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; height: var(--td-comp-size-xxxl); line-height: 64px; text-align: right; margin-right: var(--td-comp-margin-s); overflow: hidden; } .oneid-head-menu .oneid-menu__operations-icon { width: var(--td-comp-size-m); height: var(--td-comp-size-m); padding: var(--td-comp-paddingTB-s) var(--td-comp-paddingLR-s); line-height: var(--td-comp-size-m); -webkit-box-sizing: border-box; box-sizing: border-box; } .oneid-head-menu .oneid-submenu > .oneid-menu__item { overflow: unset; } .oneid-head-menu .oneid-submenu > .oneid-menu__item::before { content: ""; display: block; position: absolute; bottom: -20px; left: 0; right: 0; height: 20px; } .oneid-head-menu .oneid-menu__item { height: var(--td-comp-size-m); line-height: var(--td-comp-size-m); padding: 0 var(--td-comp-paddingLR-l); -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-transition: all 0.28s cubic-bezier(0.645, 0.045, 0.355, 1); transition: all 0.28s cubic-bezier(0.645, 0.045, 0.355, 1); gap: var(--td-comp-margin-m); } .oneid-head-menu__submenu { border-top: 1px solid var(--td-component-stroke); padding-left: 0; } .oneid-default-menu { font: var(--td-font-body-medium); color: var(--td-text-color-primary); -webkit-box-sizing: border-box; box-sizing: border-box; margin: 0; padding: 0; list-style: none; position: relative; width: 232px; display: inline-block; background: var(--td-bg-color-container); -webkit-transition: width 0.28s cubic-bezier(0.645, 0.045, 0.355, 1); transition: width 0.28s cubic-bezier(0.645, 0.045, 0.355, 1); white-space: nowrap; } .oneid-default-menu .oneid-menu__item { color: var(--td-text-color-secondary); } .oneid-default-menu.oneid-is-collapsed { width: 64px; } .oneid-default-menu.oneid-is-collapsed .oneid-menu__logo > * { margin-left: var(--td-comp-margin-l); } .oneid-default-menu.oneid-is-collapsed .oneid-menu .oneid-menu__item { padding: 0 14px; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .oneid-default-menu.oneid-is-collapsed .oneid-menu .oneid-menu__item .oneid-menu__item-link { margin-left: 0; opacity: 0; content: ""; position: absolute; top: 0; bottom: 0; left: 0; right: 0; } .oneid-default-menu.oneid-is-collapsed .oneid-fake-arrow { display: none; } .oneid-default-menu.oneid-is-collapsed .oneid-menu__item { text-overflow: initial; } .oneid-default-menu.oneid-is-collapsed .oneid-menu__item.oneid-is-active.oneid-is-opened { color: var(--td-brand-color); background-color: var(--td-brand-color-light); } .oneid-default-menu.oneid-is-collapsed .oneid-menu__item.oneid-is-active.oneid-is-opened .oneid-icon { color: var(--td-brand-color); } .oneid-default-menu.oneid-is-collapsed .oneid-menu__item.oneid-menu__item--plain::after { content: ""; } .oneid-default-menu.oneid-is-collapsed .oneid-menu__item span { display: none; } .oneid-default-menu.oneid-is-collapsed .oneid-menu__item .oneid-icon { margin-right: initial; } .oneid-default-menu.oneid-is-collapsed .oneid-submenu-icon { display: none; } .oneid-default-menu.oneid-is-collapsed .oneid-submenu > .oneid-menu__item { min-width: initial; } .oneid-default-menu.oneid-is-collapsed .oneid-submenu > .oneid-menu__item::after { content: ""; display: block; position: absolute; right: -20px; top: 0; bottom: 0; width: 20px; } .oneid-default-menu.oneid-is-collapsed .oneid-menu-group:first-child .oneid-menu-group__title { display: none; } .oneid-default-menu.oneid-is-collapsed .oneid-menu-group:first-child .oneid-menu-group__title + * { margin-top: 0; } .oneid-default-menu.oneid-is-collapsed .oneid-menu-group__title { padding: 0; font-size: 0; } .oneid-default-menu.oneid-is-collapsed .oneid-menu-group__title::after { content: ""; display: block; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); height: 1px; width: 20px; background: var(--td-component-stroke); } .oneid-default-menu.oneid-is-collapsed .oneid-menu__operations { text-align: center; } .oneid-default-menu.oneid-is-collapsed .oneid-menu__operations-icon { display: block; } .oneid-default-menu.oneid-is-collapsed .oneid-menu__log > * { margin: 0 auto; } .oneid-default-menu__inner { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; height: 100%; } .oneid-default-menu__inner .oneid-menu__logo:not(:empty) { -webkit-box-sizing: border-box; box-sizing: border-box; width: 100%; height: var(--td-comp-size-xxxl); border-bottom: 1px solid var(--td-component-stroke); } .oneid-default-menu__inner .oneid-menu { padding: var(--td-comp-paddingTB-l) var(--td-comp-paddingLR-s); position: relative; -webkit-box-flex: 1; -ms-flex: 1; flex: 1; } .oneid-default-menu__inner .oneid-menu--scroll { overflow-y: auto; overflow-x: hidden; } @-moz-document url-prefix() { .oneid-default-menu__inner .oneid-menu--scroll { scrollbar-color: var(--td-scrollbar-color) transparent; scrollbar-width: thin; } } .oneid-default-menu__inner .oneid-menu--scroll::-webkit-scrollbar { width: 6px; height: 6px; } .oneid-default-menu__inner .oneid-menu--scroll::-webkit-scrollbar-thumb { border: 0px solid transparent; background-clip: content-box; background-color: var(--td-scrollbar-color); border-radius: 11px; } .oneid-default-menu__inner .oneid-menu--scroll::-webkit-scrollbar-thumb:vertical:hover, .oneid-default-menu__inner .oneid-menu--scroll::-webkit-scrollbar-thumb:horizontal:hover { background-color: var(--td-scrollbar-hover-color); } .oneid-default-menu__inner .oneid-menu > *:not(.oneid-menu-group):not(:first-child) { margin-top: var(--td-comp-margin-xs); } .oneid-default-menu__inner .oneid-menu .oneid-menu-group > *:not(:first-child), .oneid-default-menu__inner .oneid-menu .oneid-menu__sub > *:not(:first-child), .oneid-default-menu__inner .oneid-menu .oneid-submenu > *:not(:first-child) { margin-top: var(--td-comp-margin-xs); } .oneid-default-menu__inner .oneid-menu-group__title { position: relative; padding: var(--td-comp-paddingTB-l) var(--td-comp-paddingLR-l) var(--td-comp-paddingTB-xs) var(--td-comp-paddingLR-l); color: var(--td-text-color-placeholder); font-size: var(--td-font-body-small); -webkit-box-sizing: border-box; box-sizing: border-box; } .oneid-default-menu .oneid-submenu { position: relative; } .oneid-default-menu .oneid-menu__operations:not(:empty) { width: 100%; position: relative; padding: var(--td-comp-paddingTB-s) var(--td-comp-paddingLR-l); top: 0; left: 0; text-align: left; border-top: solid 1px var(--td-component-stroke); -webkit-box-sizing: border-box; box-sizing: border-box; } .oneid-default-menu .oneid-menu__operations-icon { width: 32px; height: 32px; padding: var(--td-comp-paddingTB-s) var(--td-comp-paddingLR-s); cursor: pointer; color: var(--td-text-color-primary); -webkit-box-sizing: border-box; box-sizing: border-box; } .oneid-default-menu .oneid-menu__item.oneid-is-opened { color: var(--td-text-color-primary); background-color: unset; } .oneid-default-menu .oneid-menu__item.oneid-is-opened .oneid-icon { color: var(--td-text-color-primary); } .oneid-default-menu .oneid-menu__sub { padding: 0; overflow: hidden; } .oneid-default-menu .oneid-menu__sub .oneid-menu__item { padding-left: var(--padding-left, 32px); } .oneid-default-menu .oneid-slide-down-enter-active .oneid-menu__sub { height: 100%; } .oneid-default-menu .oneid-menu__item { position: relative; padding: 0 10px 0 16px; height: var(--td-comp-size-l); line-height: var(--td-comp-size-l); border-bottom: 0; text-align: left; border-radius: var(--td-radius-default); -webkit-transition: background-color 0.28s cubic-bezier(0.38, 0, 0.24, 1), padding 0.28s cubic-bezier(0.38, 0, 0.24, 1); transition: background-color 0.28s cubic-bezier(0.38, 0, 0.24, 1), padding 0.28s cubic-bezier(0.38, 0, 0.24, 1); -webkit-box-sizing: border-box; box-sizing: border-box; } .oneid-default-menu .oneid-menu__item .oneid-icon { width: 20px; height: 20px; -ms-flex-negative: 0; flex-shrink: 0; margin-right: var(--td-comp-margin-s); } .oneid-default-menu .oneid-menu__item .oneid-fake-arrow { margin-left: auto; min-width: 16px; } .oneid-default-menu .oneid-menu__item.oneid-is-active:not(.oneid-is-opened) { color: var(--td-brand-color); background-color: var(--td-brand-color-light); } .oneid-default-menu .oneid-menu__item.oneid-is-active:not(.oneid-is-opened) .oneid-icon { color: var(--td-brand-color); } .oneid-default-menu .oneid-menu__item:hover:not(.oneid-is-active):not(.oneid-is-disabled) { background: var(--td-bg-color-secondarycontainer-hover); } .oneid-default-menu.oneid-menu--dark { background: var(--td-gray-color-13); } .oneid-default-menu.oneid-menu--dark .oneid-menu__item { color: var(--td-font-white-2); } .oneid-default-menu.oneid-menu--dark .oneid-menu__logo:not(:empty) { border-bottom-color: var(--td-gray-color-10); } .oneid-default-menu.oneid-menu--dark .oneid-menu__operations:not(:empty) { border-top-color: var(--td-gray-color-10); } .oneid-default-menu.oneid-menu--dark .oneid-menu__item:hover:not(.oneid-is-active):not(.oneid-is-disabled) { background-color: var(--td-gray-color-10); } .oneid-default-menu.oneid-menu--dark .oneid-menu__item.oneid-is-active:not(.oneid-is-opened) { color: var(--td-text-color-anti); background-color: var(--td-brand-color); } .oneid-default-menu.oneid-menu--dark .oneid-menu__item.oneid-is-active:not(.oneid-is-opened) .oneid-icon { color: var(--td-text-color-anti); } .oneid-default-menu.oneid-menu--dark .oneid-menu__item.oneid-is-opened.oneid-is-active { background-color: transparent; } .oneid-default-menu.oneid-menu--dark .oneid-menu-group__title { color: var(--td-font-white-3); } .oneid-default-menu.oneid-menu--dark.oneid-is-collapsed .oneid-menu-group__title:after { background-color: var(--td-gray-color-10); } .oneid-default-menu.oneid-menu--dark.oneid-is-collapsed .oneid-menu__item.oneid-is-active.oneid-is-opened { background-color: var(--td-brand-color); color: var(--td-text-color-anti); } .oneid-default-menu.oneid-menu--dark.oneid-is-collapsed .oneid-menu__item.oneid-is-active.oneid-is-opened .oneid-icon { color: var(--td-text-color-anti); } .oneid-menu { color: var(--td-text-color-primary); font: var(--td-font-body-medium); list-style: none; padding: 0; margin: 0; } .oneid-menu--dark { color: var(--td-font-white-2); } .oneid-menu__logo:not(:empty) { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .oneid-menu .oneid-submenu { position: relative; } .oneid-menu .oneid-submenu.oneid-is-active > .oneid-menu__item { color: var(--td-gray-color-13); } .oneid-menu .oneid-submenu.oneid-is-active > .oneid-menu__item .oneid-icon { color: var(--td-gray-color-13); } .oneid-menu .oneid-submenu .oneid-submenu-icon { width: 16px; height: 16px; } .oneid-menu .oneid-submenu.oneid-is-opened .oneid-submenu-icon { -webkit-transform: scaleY(-1); transform: scaleY(-1); } .oneid-menu__spacer::before { content: ""; display: block; position: absolute; z-index: 1; } .oneid-menu__spacer--left::before { left: -16px; width: 16px; top: 0; bottom: 0; } .oneid-menu__spacer--top::before { top: -20px; left: 0; right: 0; height: 20px; } .oneid-menu__item { position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; height: 40px; line-height: 40px; text-align: center; color: var(--td-text-color-primary); cursor: pointer; text-overflow: ellipsis; border-radius: var(--td-radius-default); --ripple-color: var(--td-bg-color-container-active); } .oneid-menu__item ::-moz-selection { background: transparent; } .oneid-menu__item ::selection { background: transparent; } .oneid-menu__item-spacer { overflow: unset; } .oneid-menu__item-spacer::before { content: ""; display: block; position: absolute; z-index: 1; } .oneid-menu__item-spacer--right::before { right: -16px; width: 16px; top: 0; bottom: 0; } .oneid-menu__item-spacer--bottom::before { bottom: -20px; left: 0; right: 0; height: 20px; } .oneid-menu__item a { color: unset; text-decoration: none; } .oneid-menu__item a.oneid-menu__item-link { color: unset; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; } .oneid-menu__item a.oneid-menu__item-link::before { content: ""; position: absolute; top: 0; bottom: 0; left: 0; right: 0; } .oneid-menu__item.oneid-is-active { color: var(--td-brand-color); background-color: var(--td-brand-color-light); } .oneid-menu__item.oneid-is-opened { color: var(--td-brand-color); } .oneid-menu__item:hover:not(.oneid-is-active):not(.oneid-is-opened):not(.oneid-is-disabled) { background-color: var(--td-bg-color-container-hover); } .oneid-menu__item.oneid-is-disabled { color: var(--td-text-color-disabled); cursor: not-allowed; } .oneid-menu__content { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .oneid-menu--dark.oneid-head-menu { background-color: var(--td-gray-color-13); } .oneid-menu--dark .oneid-menu__item { color: var(--td-text-color-anti); --ripple-color: var(--td-gray-color-11); } .oneid-menu--dark .oneid-menu__item.oneid-is-active { color: var(--td-text-color-anti); background-color: var(--td-brand-color); } .oneid-menu--dark .oneid-menu__item.oneid-is-opened { color: var(--td-text-color-anti); } .oneid-menu--dark .oneid-menu__item.oneid-is-opened .oneid-icon { color: var(--td-text-color-anti); } .oneid-menu--dark .oneid-menu__item.oneid-is-disabled { color: var(--td-font-white-4); } .oneid-menu--dark .oneid-menu__item:hover:not(.oneid-is-active):not(.oneid-is-opened):not(.oneid-is-disabled) { background-color: var(--td-gray-color-10); } .oneid-menu--dark .oneid-menu__popup { background: var(--td-gray-color-13); border: solid 0.5px var(--td-gray-color-10); } .oneid-menu--dark .oneid-menu__popup .oneid-menu__item { color: var(--td-text-color-anti); border-radius: var(--td-radius-default); } .oneid-menu--dark .oneid-menu__popup .oneid-menu__item.oneid-is-active { color: var(--td-text-color-anti); background-color: var(--td-brand-color); } .oneid-menu--dark .oneid-menu__popup .oneid-menu__item:hover:not(.oneid-is-active) { background-color: var(--td-gray-color-10); } .oneid-menu--dark .oneid-head-menu__submenu { border-top: 1px solid transparent; } .oneid-menu--dark .oneid-menu__operations-icon { color: var(--td-bg-color-container); } .oneid-menu--dark .oneid-menu__operations-icon:hover { background-color: var(--td-brand-color); } .oneid-menu__popup { overflow: hidden; background: var(--td-bg-color-container); z-index: 1000; border-radius: var(--td-radius-medium); opacity: 0; list-style: none; padding: 0; margin: 0; } .oneid-menu__popup.oneid-popup__content { position: absolute; } .oneid-menu__popup-wrapper { padding: var(--td-pop-padding-m); height: 100%; list-style: none; margin: 0; } @-moz-document url-prefix() { .oneid-menu__popup-wrapper { scrollbar-color: var(--td-scrollbar-color) transparent; scrollbar-width: thin; } } .oneid-menu__popup-wrapper::-webkit-scrollbar { width: 8px; height: 8px; } .oneid-menu__popup-wrapper::-webkit-scrollbar-thumb { border: 2px solid transparent; background-clip: content-box; background-color: var(--td-scrollbar-color); border-radius: 15px; } .oneid-menu__popup-wrapper::-webkit-scrollbar-thumb:vertical:hover, .oneid-menu__popup-wrapper::-webkit-scrollbar-thumb:horizontal:hover { background-color: var(--td-scrollbar-hover-color); } .oneid-menu__popup .oneid-fake-arrow { margin-left: auto; } .oneid-menu__popup .oneid-menu__item { padding-left: var(--td-comp-paddingLR-l); padding-right: var(--td-comp-paddingLR-l); } .oneid-menu__popup.oneid-is-vertical { min-width: var(--popup-width, 160px); } .oneid-menu__popup.oneid-is-horizontal .oneid-menu__item { white-space: nowrap; } .oneid-menu__popup.oneid-is-horizontal li + li { margin-top: var(--td-comp-margin-xs); } .oneid-menu__popup.oneid-is-opened { opacity: 1; -webkit-box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.1), 0 8px 10px 1px rgba(0, 0, 0, 0.06), 0 3px 14px 6px rgba(0, 0, 0, 0.05); box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.1), 0 8px 10px 1px rgba(0, 0, 0, 0.06), 0 3px 14px 6px rgba(0, 0, 0, 0.05); overflow: visible; } .oneid-menu__popup .oneid-menu__item { color: var(--td-text-color-primary); height: var(--td-comp-size-s); line-height: var(--td-comp-size-s); } .oneid-menu__popup .oneid-menu__item + .oneid-menu__item { margin-left: 0; } .oneid-menu__popup .oneid-menu__item:hover:not(.oneid-is-active) { background-color: var(--td-bg-color-container-hover); } .oneid-menu__popup .oneid-is-disabled { color: var(--td-text-color-disabled); } .oneid-menu__operations-icon { margin-right: var(--td-comp-margin-l); border-radius: var(--td-radius-default); color: var(--td-text-color-primary); -webkit-transition: background-color 0.24s cubic-bezier(0.38, 0, 0.24, 1); transition: background-color 0.24s cubic-bezier(0.38, 0, 0.24, 1); } .oneid-menu__operations-icon:hover { background-color: var(--td-brand-color-light); } .oneid-opacity-transition { -webkit-transition: opacity 0.28s cubic-bezier(0.55, 0, 0.1, 1); transition: opacity 0.28s cubic-bezier(0.55, 0, 0.1, 1); } .horizontal-collapse-transition .oneid-submenu__title .oneid-submenu__icon-arrow { -webkit-transition: 0.2s; transition: 0.2s; opacity: 0; } .oneid-menu__popup { top: 0; left: calc(100% - var(--td-pop-padding-m)); } .oneid-menu__popup .oneid-menu__item:not(:first-child), .oneid-menu__popup .oneid-submenu:not(:first-child) { margin-top: var(--td-comp-margin-xxs); } .oneid-is-head-menu .oneid-menu__popup { margin-top: calc((var(--td-comp-size-xxxl) - var(--td-comp-size-m)) / 2) !important; } .oneid-menu-is-nested .oneid-menu__popup { margin-top: calc(0px - var(--td-pop-padding-m)) !important; } @-webkit-keyframes tDialogZoomIn { 0% { opacity: 0; -webkit-transform: scale(0.01); transform: scale(0.01); } 100% { opacity: 1; } } @keyframes tDialogZoomIn { 0% { opacity: 0; -webkit-transform: scale(0.01); transform: scale(0.01); } 100% { opacity: 1; } } @-webkit-keyframes tDialogZoomOut { from { opacity: 1; } to { opacity: 0; -webkit-transform: scale(0.01); transform: scale(0.01); } } @keyframes tDialogZoomOut { from { opacity: 1; } to { opacity: 0; -webkit-transform: scale(0.01); transform: scale(0.01); } } @-webkit-keyframes tDialogMaskIn { from { opacity: 0; } to { opacity: 1; } } @keyframes tDialogMaskIn { from { opacity: 0; } to { opacity: 1; } } @-webkit-keyframes tDialogMaskOut { from { opacity: 1; } to { opacity: 0; } } @keyframes tDialogMaskOut { from { opacity: 1; } to { opacity: 0; } } .oneid-dialog-zoom .animation-enter { -webkit-animation-duration: 0.2s; animation-duration: 0.2s; -webkit-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-timing-function: cubic-bezier(0, 0, 0.15, 1); animation-timing-function: cubic-bezier(0, 0, 0.15, 1); -webkit-animation-play-state: paused; animation-play-state: paused; } .oneid-dialog-zoom .animation-exit { -webkit-animation-duration: 0.2s; animation-duration: 0.2s; -webkit-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-timing-function: cubic-bezier(0.38, 0, 0.24, 1); animation-timing-function: cubic-bezier(0.38, 0, 0.24, 1); -webkit-animation-play-state: paused; animation-play-state: paused; } .oneid-dialog-zoom .animation-active { -webkit-animation-play-state: running; animation-play-state: running; -webkit-animation-fill-mode: both; animation-fill-mode: both; } .oneid-dialog-zoom-enter, .oneid-dialog-zoom-enter-from, .oneid-dialog-zoom-appear { -webkit-animation-duration: 0.2s; animation-duration: 0.2s; -webkit-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-timing-function: cubic-bezier(0, 0, 0.15, 1); animation-timing-function: cubic-bezier(0, 0, 0.15, 1); -webkit-animation-play-state: paused; animation-play-state: paused; } .oneid-dialog-zoom-exit { -webkit-animation-duration: 0.2s; animation-duration: 0.2s; -webkit-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-timing-function: cubic-bezier(0.38, 0, 0.24, 1); animation-timing-function: cubic-bezier(0.38, 0, 0.24, 1); -webkit-animation-play-state: paused; animation-play-state: paused; } .oneid-dialog-zoom-enter-active, .oneid-dialog-zoom-appear-active { -webkit-animation-name: tDialogZoomIn; animation-name: tDialogZoomIn; -webkit-animation-play-state: running; animation-play-state: running; -webkit-animation-fill-mode: both; animation-fill-mode: both; } .oneid-dialog-zoom-exit-active { -webkit-animation-name: tDialogZoomOut; animation-name: tDialogZoomOut; -webkit-animation-play-state: running; animation-play-state: running; -webkit-animation-fill-mode: both; animation-fill-mode: both; } .oneid-dialog-zoom__vue-enter-active .oneid-dialog { -webkit-animation-name: tDialogZoomIn; animation-name: tDialogZoomIn; -webkit-animation-duration: 0.2s; animation-duration: 0.2s; -webkit-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-timing-function: cubic-bezier(0, 0, 0.15, 1); animation-timing-function: cubic-bezier(0, 0, 0.15, 1); -webkit-animation-play-state: paused; animation-play-state: paused; } .oneid-dialog-zoom__vue-enter-active .oneid-dialog__mask { -webkit-animation-name: tDialogMaskIn; animation-name: tDialogMaskIn; -webkit-animation-duration: 0.2s; animation-duration: 0.2s; -webkit-animation-timing-function: linear; animation-timing-function: linear; -webkit-animation-play-state: running; animation-play-state: running; -webkit-animation-fill-mode: both; animation-fill-mode: both; } .oneid-dialog-zoom__vue-leave-active .oneid-dialog { -webkit-animation-name: tDialogZoomOut; animation-name: tDialogZoomOut; -webkit-animation-duration: 0.2s; animation-duration: 0.2s; -webkit-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-timing-function: cubic-bezier(0.38, 0, 0.24, 1); animation-timing-function: cubic-bezier(0.38, 0, 0.24, 1); -webkit-animation-play-state: paused; animation-play-state: paused; } .oneid-dialog-zoom__vue-leave-active .oneid-dialog__mask { -webkit-animation-name: tDialogMaskOut; animation-name: tDialogMaskOut; -webkit-animation-duration: 0.2s; animation-duration: 0.2s; -webkit-animation-timing-function: linear; animation-timing-function: linear; -webkit-animation-play-state: running; animation-play-state: running; -webkit-animation-fill-mode: both; animation-fill-mode: both; } .oneid-dialog-zoom__vue-enter-to .oneid-dialog { -webkit-animation-play-state: running; animation-play-state: running; -webkit-animation-fill-mode: both; animation-fill-mode: both; } .oneid-dialog-zoom__vue-leave-to .oneid-dialog { -webkit-animation-play-state: running; animation-play-state: running; -webkit-animation-fill-mode: both; animation-fill-mode: both; } .oneid-dialog-fade-enter, .oneid-dialog-fade-appear { opacity: 0; -webkit-animation-duration: 0.2s; animation-duration: 0.2s; -webkit-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-timing-function: cubic-bezier(0, 0, 0.15, 1); animation-timing-function: cubic-bezier(0, 0, 0.15, 1); -webkit-animation-play-state: paused; animation-play-state: paused; } .oneid-dialog-fade-exit { -webkit-animation-duration: 0.2s; animation-duration: 0.2s; -webkit-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-timing-function: cubic-bezier(0, 0, 0.15, 1); animation-timing-function: cubic-bezier(0, 0, 0.15, 1); -webkit-animation-play-state: paused; animation-play-state: paused; } .oneid-dialog-fade-enter.oneid-dialog-fade-enter-active, .oneid-dialog-fade-appear.oneid-dialog-fade-appear-active { -webkit-animation-name: tDialogFadeIn; animation-name: tDialogFadeIn; -webkit-animation-play-state: running; animation-play-state: running; } .oneid-dialog-fade-exit.oneid-dialog-fade-exit-active { -webkit-animation-name: tDialogFadeOut; animation-name: tDialogFadeOut; -webkit-animation-play-state: running; animation-play-state: running; } @-webkit-keyframes tDialogFadeIn { 0% { opacity: 0; } 100% { opacity: 1; } } @keyframes tDialogFadeIn { 0% { opacity: 0; } 100% { opacity: 1; } } @-webkit-keyframes tDialogFadeOut { 0% { opacity: 1; } 100% { opacity: 0; } } @keyframes tDialogFadeOut { 0% { opacity: 1; } 100% { opacity: 0; } } .oneid-dialog { font: var(--td-font-body-medium); color: var(--td-text-color-primary); -webkit-box-sizing: border-box; box-sizing: border-box; margin: 0; padding: 0; list-style: none; width: 480px; background-color: var(--td-bg-color-container); position: relative; border: 1px solid var(--td-border-level-1-color); border-radius: var(--td-radius-large); } .oneid-dialog .oneid-icon.oneid-is-info { color: var(--td-brand-color); } .oneid-dialog .oneid-icon.oneid-is-success { color: var(--td-success-color); } .oneid-dialog .oneid-icon.oneid-is-warning { color: var(--td-warning-color); } .oneid-dialog .oneid-icon.oneid-is-error { color: var(--td-error-color); } .oneid-dialog--lock { overflow: hidden; } .oneid-dialog__header { color: var(--td-text-color-primary); font: var(--td-font-title-medium); font-weight: 600; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; word-break: break-word; gap: var(--td-comp-margin-s); -webkit-box-sizing: border-box; box-sizing: border-box; } .oneid-dialog__header .oneid-dialog__header-content { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; width: 100%; } .oneid-dialog__header .oneid-icon:not(.oneid-icon-close) { font-size: calc(var(--td-font-size-body-large) + 8px); display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; margin-right: var(--td-comp-margin-s); -ms-flex-negative: 0; flex-shrink: 0; } .oneid-dialog__header--fullscreen { background-color: var(--td-bg-color-secondarycontainer); min-height: var(--td-comp-size-xxxl); -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; padding: 0 var(--td-comp-paddingLR-xxl); } .oneid-dialog__header--fullscreen .oneid-dialog__header-content { -webkit-box-sizing: border-box; box-sizing: border-box; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .oneid-dialog__body { color: var(--td-text-color-secondary); font: var(--td-font-body-medium); overflow: auto; padding: var(--td-comp-paddingTB-l) 0; word-break: break-word; } @-moz-document url-prefix() { .oneid-dialog__body { scrollbar-color: var(--td-scrollbar-color) transparent; scrollbar-width: thin; } } .oneid-dialog__body::-webkit-scrollbar { width: 6px; height: 6px; } .oneid-dialog__body::-webkit-scrollbar-thumb { border: 0px solid transparent; background-clip: content-box; background-color: var(--td-scrollbar-color); border-radius: 11px; } .oneid-dialog__body::-webkit-scrollbar-thumb:vertical:hover, .oneid-dialog__body::-webkit-scrollbar-thumb:horizontal:hover { background-color: var(--td-scrollbar-hover-color); } .oneid-dialog__body__icon, .oneid-dialog__body--icon { padding: var(--td-comp-paddingTB-l) 0; } .oneid-dialog__body--fullscreen { -webkit-box-sizing: border-box; box-sizing: border-box; padding: var(--td-comp-paddingTB-xl) var(--td-comp-paddingLR-xxl); height: calc(100% - var(--td-comp-size-xxxl) - var(--td-comp-size-xxxxl)); overflow: auto; } @-moz-document url-prefix() { .oneid-dialog__body--fullscreen { scrollbar-color: var(--td-scrollbar-color) transparent; scrollbar-width: thin; } } .oneid-dialog__body--fullscreen::-webkit-scrollbar { width: 6px; height: 6px; } .oneid-dialog__body--fullscreen::-webkit-scrollbar-thumb { border: 0px solid transparent; background-clip: content-box; background-color: var(--td-scrollbar-color); border-radius: 11px; } .oneid-dialog__body--fullscreen::-webkit-scrollbar-thumb:vertical:hover, .oneid-dialog__body--fullscreen::-webkit-scrollbar-thumb:horizontal:hover { background-color: var(--td-scrollbar-hover-color); } .oneid-dialog__body--fullscreen--without-footer { -webkit-box-sizing: border-box; box-sizing: border-box; padding: var(--td-comp-paddingTB-xl) var(--td-comp-paddingLR-xxl); height: calc(100% - var(--td-comp-size-xxxl)); overflow: auto; } .oneid-dialog__footer { width: 100%; text-align: right; padding: var(--td-comp-paddingTB-l) 0 0; } .oneid-dialog__footer .oneid-button + .oneid-button { margin-left: var(--td-comp-margin-s); } .oneid-dialog__footer--fullscreen { min-height: var(--td-comp-size-xxxxl); padding: 0 var(--td-comp-paddingLR-xxl) var(--td-comp-paddingTB-xxl); -webkit-box-sizing: border-box; box-sizing: border-box; } .oneid-dialog--default { padding: var(--td-comp-paddingTB-xxl) var(--td-comp-paddingLR-xxl); } .oneid-dialog__close { font-size: calc(var(--td-font-size-body-large) + 4px); color: var(--td-text-color-secondary); display: -webkit-box; display: -ms-flexbox; display: flex; width: calc(var(--td-font-size-body-large) + 4px); height: calc(var(--td-font-size-body-large) + 4px); -webkit-box-align: center; -ms-flex-align: center; align-items: center; border-radius: var(--td-radius-default); -webkit-transition: all 0.2s linear; transition: all 0.2s linear; padding: var(--td-comp-paddingTB-xxs) var(--td-comp-paddingLR-xxs); } .oneid-dialog__close:hover { cursor: pointer; background: var(--td-bg-color-container-hover); } .oneid-dialog__close:active { background: var(--td-bg-color-container-active); } .oneid-dialog__close--fullscreen { display: -webkit-box; display: -ms-flexbox; display: flex; background: transparent; } .oneid-dialog__close--fullscreen:hover { cursor: pointer; background: var(--td-bg-color-secondarycontainer-hover); } .oneid-dialog__close--fullscreen:active { background: var(--td-bg-color-secondarycontainer-active); } .oneid-dialog.oneid-dialog--draggable:hover { cursor: move; } .oneid-dialog.oneid-dialog--draggable .oneid-dialog__header:hover, .oneid-dialog.oneid-dialog--draggable .oneid-dialog__body:hover, .oneid-dialog.oneid-dialog--draggable .oneid-dialog__footer:hover { cursor: auto; } .oneid-dialog__fullscreen { width: 100%; border-radius: 0; } .oneid-dialog__ctx { pointer-events: auto; outline: none; top: 0; left: 0; width: 100%; height: 100%; } .oneid-dialog__ctx.oneid-dialog__ctx--modeless { pointer-events: none; } .oneid-dialog__ctx.oneid-dialog__ctx--fixed { position: fixed; z-index: 2500; } .oneid-dialog__ctx.oneid-dialog__ctx--absolute { position: absolute; } .oneid-dialog__ctx.oneid-dialog__ctx--absolute .oneid-dialog__mask { position: absolute; } .oneid-dialog__ctx.oneid-dialog__ctx--absolute .oneid-dialog__wrap { position: absolute; } .oneid-dialog__ctx.oneid-is-visible { visibility: visible; } .oneid-dialog__ctx.oneid-is-hidden { visibility: hidden; } .oneid-dialog__ctx.oneid-is-display { display: block; } .oneid-dialog__ctx.oneid-not-display { display: none; } .oneid-dialog__ctx .oneid-dialog__mask { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; background: var(--td-mask-active); pointer-events: auto; } .oneid-dialog__ctx .oneid-dialog__wrap { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; overflow: auto; } @-moz-document url-prefix() { .oneid-dialog__ctx .oneid-dialog__wrap { scrollbar-color: var(--td-scrollbar-color) transparent; scrollbar-width: thin; } } .oneid-dialog__ctx .oneid-dialog__wrap::-webkit-scrollbar { width: 8px; height: 8px; } .oneid-dialog__ctx .oneid-dialog__wrap::-webkit-scrollbar-thumb { border: 2px solid transparent; background-clip: content-box; background-color: var(--td-scrollbar-color); border-radius: 15px; } .oneid-dialog__ctx .oneid-dialog__wrap::-webkit-scrollbar-thumb:vertical:hover, .oneid-dialog__ctx .oneid-dialog__wrap::-webkit-scrollbar-thumb:horizontal:hover { background-color: var(--td-scrollbar-hover-color); } .oneid-dialog__ctx .oneid-dialog__position { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; min-height: 100%; width: 100%; position: relative; padding: 48px 0; -webkit-box-sizing: border-box; box-sizing: border-box; } .oneid-dialog__ctx .oneid-dialog__position.oneid-dialog--top { -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; padding-top: 20vh; } .oneid-dialog__ctx .oneid-dialog__position.oneid-dialog--center { -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .oneid-dialog__ctx .oneid-dialog__position_fullscreen { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; min-height: 100%; width: 100%; position: relative; -webkit-box-sizing: border-box; box-sizing: border-box; } .oneid-dialog__ctx .oneid-is-hidden { background: none; } .oneid-dialog__ctx .oneid-dialog { pointer-events: auto; z-index: 2500; } .oneid-dialog__ctx.oneid-dialog__ctx--modeless .oneid-dialog { -webkit-box-shadow: var(--td-shadow-3); box-shadow: var(--td-shadow-3); } .oneid-tree { -webkit-box-sizing: border-box; box-sizing: border-box; margin: 0; padding: 0; list-style: none; font: var(--td-font-body-medium); color: var(--td-text-color-primary); position: relative; } .oneid-tree.oneid-is-disabled { color: var(--td-text-color-disabled); } .oneid-tree.oneid-is-disabled .oneid-icon { color: var(--td-text-color-disabled); } .oneid-tree.oneid-is-disabled .oneid-tree__item.oneid-is-active { background-color: var(--td-bg-color-container-hover); color: var(--td-text-color-disabled); } .oneid-tree.oneid-is-disabled .oneid-tree__item .oneid-icon { color: var(--td-text-color-secondary); } .oneid-tree__empty { color: var(--td-text-color-disabled); } .oneid-tree__branch { display: block; } .oneid-tree__item { --level: 0; --hscale: 2; will-change: opacity, max-height; position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: nowrap; flex-wrap: nowrap; -webkit-box-align: center; -ms-flex-align: center; align-items: center; padding: 0 0 0 calc(var(--td-comp-margin-xxl) * var(--level)); cursor: default; -webkit-transform: translateZ(0); transform: translateZ(0); -webkit-backface-visibility: hidden; backface-visibility: hidden; -webkit-perspective: 1000; perspective: 1000; } .oneid-tree__item .oneid-icon, .oneid-tree__item .oneid-loading { display: inline-block; position: relative; z-index: 2; font-size: calc(var(--td-font-size-body-medium) + 2px); } .oneid-tree__item .oneid-icon { color: var(--td-text-color-secondary); } .oneid-tree__item .oneid-checkbox { -webkit-box-align: center; -ms-flex-align: center; align-items: center; font-size: 0; } .oneid-tree__item .oneid-checkbox__input { -ms-flex-negative: 0; flex-shrink: 0; } .oneid-tree__item .oneid-checkbox__label { overflow: hidden; text-overflow: ellipsis; } .oneid-tree__item .oneid-tree__icon--default .oneid-icon { -webkit-transform: rotate(0); transform: rotate(0); } .oneid-tree__item--open .oneid-icon { color: var(--td-text-color-brand); } .oneid-tree__item--open .oneid-tree__icon--default .oneid-icon { -webkit-transform: rotate(90deg); transform: rotate(90deg); } .oneid-tree__item--clickable { cursor: pointer; } .oneid-tree__item--locked { color: var(--td-text-color-disabled); } .oneid-tree__item--matched { color: inherit; } .oneid-tree__item--draggable { cursor: pointer; } .oneid-tree__item--draggable:hover { background-color: var(--td-bg-color-container-hover); background-clip: content-box; } .oneid-tree__item--draggable::after { position: absolute; top: -1px; right: 0; left: 0; display: block; height: 2px; border-radius: 1px; content: ""; padding: inherit; background-clip: content-box; } .oneid-tree__item--tip-top::after { background-color: var(--td-brand-color); } .oneid-tree__item--tip-bottom::after { top: unset; bottom: -1px; background-color: var(--td-brand-color); } .oneid-tree__item--tip-highlight { background-color: var(--td-brand-color-light); background-clip: content-box; } .oneid-tree__item::before { content: ""; display: block; width: 0; -webkit-box-flex: 0; -ms-flex: 0 0 auto; flex: 0 0 auto; height: calc(var(--td-comp-size-m) + 2px); } .oneid-tree--block-node .oneid-tree__label { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; } .oneid-tree--hoverable .oneid-tree__label:not(.oneid-is-active):not(.oneid-is-checked):hover { background-color: var(--td-bg-color-container-hover); } .oneid-tree__line { --level: 0; --color: var(--td-border-level-1-color); --space: var(--td-comp-margin-xxl); --iconSize: 16px; position: absolute; left: calc(var(--td-comp-margin-xxl) * var(--level) - var(--td-comp-margin-l)); bottom: var(--td-comp-margin-l); width: 1px; height: calc(var(--td-comp-size-m) + 2px); pointer-events: none; } .oneid-tree__line::before { content: ""; position: absolute; bottom: 0; left: 0; display: block; height: calc(var(--td-comp-size-m) + 2px); width: var(--td-comp-margin-m); border-left: 1px solid var(--color); border-bottom: 1px solid var(--color); } .oneid-tree__line--first::before { height: var(--td-line-height-body-medium); } .oneid-tree__line--leaf::before { width: var(--td-comp-margin-m); } .oneid-tree__icon { position: relative; -webkit-box-flex: 0; -ms-flex: none; flex: none; display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; text-align: center; width: calc(var(--td-font-size-body-medium) + 2px); font-size: 0; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; cursor: pointer; } .oneid-tree__icon::after { content: ""; display: block; position: absolute; left: -2px; top: -2px; width: calc(var(--td-font-size-body-medium) + 2px + 4px); height: calc(var(--td-font-size-body-medium) + 2px + 4px); border-radius: var(--td-radius-default); } .oneid-tree__icon:not(:empty):hover { background-color: var(--td-bg-color-container-hover); } .oneid-tree__icon:empty { cursor: initial; } .oneid-tree__label { --ripple-color: var(--td-bg-color-container-active); -ms-flex-wrap: nowrap; flex-wrap: nowrap; -webkit-box-flex: 1; -ms-flex: 1; flex: 1; padding: var(--td-comp-paddingTB-xxs) var(--td-comp-paddingLR-xs); margin-left: var(--td-comp-margin-xs); border-radius: var(--td-radius-default); cursor: pointer; white-space: nowrap; word-wrap: normal; overflow: hidden; text-overflow: ellipsis; } .oneid-tree__label.oneid-is-checked { font-weight: 500; color: var(--td-text-color-primary); background-color: var(--td-brand-color-light); } .oneid-tree__label::-moz-selection { background-color: transparent; } .oneid-tree__label::selection { background-color: transparent; } .oneid-is-active .oneid-tree__label { font-weight: 500; color: var(--td-text-color-primary); background-color: var(--td-brand-color-light); } .oneid-tree__space { display: block; -webkit-box-flex: 1; -ms-flex: 1 0 auto; flex: 1 0 auto; } .oneid-tree__operations { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-flex: 0; -ms-flex: 0 0 auto; flex: 0 0 auto; -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; -webkit-box-align: center; -ms-flex-align: center; align-items: center; margin-left: auto; } .oneid-tree__operations .oneid-icon { cursor: pointer; } .oneid-tree__item.oneid-is-disabled { color: var(--td-text-color-disabled); cursor: default; } .oneid-tree__item.oneid-is-disabled .oneid-checkbox { cursor: default; } .oneid-tree__item--hidden { display: none; } .oneid-tree--transition .oneid-tree__label { -webkit-transition: background-color 0.24s cubic-bezier(0.38, 0, 0.24, 1); transition: background-color 0.24s cubic-bezier(0.38, 0, 0.24, 1); } .oneid-tree--transition .oneid-tree__icon { -webkit-transition: color, -webkit-transform 0.24s cubic-bezier(0.38, 0, 0.24, 1); transition: color, -webkit-transform 0.24s cubic-bezier(0.38, 0, 0.24, 1); transition: color, transform 0.24s cubic-bezier(0.38, 0, 0.24, 1); transition: color, transform 0.24s cubic-bezier(0.38, 0, 0.24, 1), -webkit-transform 0.24s cubic-bezier(0.38, 0, 0.24, 1); } .oneid-tree--transition .oneid-tree__icon::after { -webkit-transition: 0.2s linear; transition: 0.2s linear; } .oneid-tree--transition .oneid-tree__icon:not(:empty):hover { -webkit-transition: 0.2s linear; transition: 0.2s linear; } .oneid-tree--transition .oneid-tree__icon--default .oneid-icon { -webkit-transition: color, -webkit-transform cubic-bezier(0.38, 0, 0.24, 1) 0.2s; transition: color, -webkit-transform cubic-bezier(0.38, 0, 0.24, 1) 0.2s; transition: color, transform cubic-bezier(0.38, 0, 0.24, 1) 0.2s; transition: color, transform cubic-bezier(0.38, 0, 0.24, 1) 0.2s, -webkit-transform cubic-bezier(0.38, 0, 0.24, 1) 0.2s; } .oneid-tree--transition .oneid-tree__item--visible { display: -webkit-box; display: -ms-flexbox; display: flex; max-height: calc((var(--td-comp-size-m) + 2px) * var(--hscale) + 0px); opacity: 1; -webkit-transition: opacity 150ms linear 150ms, max-height 150ms linear 0s; transition: opacity 150ms linear 150ms, max-height 150ms linear 0s; } .oneid-tree--transition .oneid-tree__item--hidden { display: -webkit-box; display: -ms-flexbox; display: flex; max-height: 0; opacity: 0; overflow: hidden; pointer-events: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -webkit-animation: initial; animation: initial; -webkit-transition: opacity 150ms linear 0s, max-height 150ms linear 150ms; transition: opacity 150ms linear 0s, max-height 150ms linear 150ms; } .oneid-tree--transition .oneid-tree__item--enter-active { -webkit-animation: t-tree-toggle 300ms linear; animation: t-tree-toggle 300ms linear; } .oneid-tree--transition .oneid-tree__item--leave-active { animation: t-tree-toggle 300ms reverse linear forwards; } .oneid-tree__vscroll { overflow-y: auto; } .oneid-tree__lazyload { overflow-y: auto; } .oneid-tree__vscroll-cursor { position: absolute; width: 1px; height: 1px; -webkit-transition: -webkit-transform 0.2s; transition: -webkit-transform 0.2s; transition: transform 0.2s; transition: transform 0.2s, -webkit-transform 0.2s; } .oneid-tree--scrolling .oneid-tree__item { will-change: initial; } .oneid-tree--scrolling .v-enter, .oneid-tree--scrolling .v-leave, .oneid-tree--scrolling .oneid-tree__item--visible, .oneid-tree--scrolling .oneid-tree__item--hidden, .oneid-tree--scrolling .oneid-tree__item--enter, .oneid-tree--scrolling .oneid-tree__item--enter-active, .oneid-tree--scrolling .oneid-tree__item--enter-to, .oneid-tree--scrolling .oneid-tree__item--leave, .oneid-tree--scrolling .oneid-tree__item--leave-active .oneid-tree__item--leave-to { -webkit-animation: none; animation: none; -webkit-transition: none; transition: none; } .oneid-tree--scrolling .oneid-tree__item--visible { max-height: initial; } .oneid-tree--scrolling .oneid-tree__item--enter-to, .oneid-tree--scrolling .oneid-tree__item--enter-active { max-height: initial; } .oneid-tree--scrolling .oneid-tree__item--leave-to, .oneid-tree--scrolling .oneid-tree__item--leave-active { max-height: 0; } @-webkit-keyframes t-tree-toggle { 0% { opacity: 0; max-height: 0; } 50% { opacity: 0; max-height: calc((var(--td-comp-size-m) + 2px) * var(--hscale) + 0px); } 100% { opacity: 1; max-height: calc((var(--td-comp-size-m) + 2px) * var(--hscale) + 0px); } } @keyframes t-tree-toggle { 0% { opacity: 0; max-height: 0; } 50% { opacity: 0; max-height: calc((var(--td-comp-size-m) + 2px) * var(--hscale) + 0px); } 100% { opacity: 1; max-height: calc((var(--td-comp-size-m) + 2px) * var(--hscale) + 0px); } } .oneid-tree-select { font: var(--td-font-body-medium); color: var(--td-text-color-primary); -webkit-box-sizing: border-box; box-sizing: border-box; margin: 0; padding: 0; list-style: none; } .oneid-tree-select--without-input input { display: none; } .oneid-tree-select--without-input .oneid-input__suffix-icon { margin-left: auto; } .oneid-tree-select .oneid-fake-arrow { -webkit-transition: color 0.2s cubic-bezier(0.38, 0, 0.24, 1); transition: color 0.2s cubic-bezier(0.38, 0, 0.24, 1); color: var(--td-text-color-placeholder); } .oneid-tree-select .oneid-fake-arrow--highlight { color: var(--td-text-color-brand); } .oneid-tree-select .oneid-fake-arrow--disable { color: var(--td-text-color-disabled); } .oneid-tree-select--placeholder { color: var(--td-text-color-placeholder); } .oneid-tree-select.oneid-single-suffix { padding-right: 20px; } .oneid-tree-select.oneid-tag-prefix { padding-left: 4px; } .oneid-tree-select-popup .oneid-popup__content { padding: var(--td-pop-padding-m); max-height: 300px; overflow-y: auto; } @-moz-document url-prefix() { .oneid-tree-select-popup .oneid-popup__content { scrollbar-color: var(--td-scrollbar-color) transparent; scrollbar-width: thin; } } .oneid-tree-select-popup .oneid-popup__content::-webkit-scrollbar { width: 8px; height: 8px; } .oneid-tree-select-popup .oneid-popup__content::-webkit-scrollbar-thumb { border: 2px solid transparent; background-clip: content-box; background-color: var(--td-scrollbar-color); border-radius: 15px; } .oneid-tree-select-popup .oneid-popup__content::-webkit-scrollbar-thumb:vertical:hover, .oneid-tree-select-popup .oneid-popup__content::-webkit-scrollbar-thumb:horizontal:hover { background-color: var(--td-scrollbar-hover-color); } .oneid-divider { margin: 0; padding: 0; list-style: none; font: var(--td-font-body-medium); margin: var(--td-comp-margin-xxl) 0; border-top: 1px solid var(--td-border-level-1-color); color: var(--td-text-color-primary); -webkit-box-sizing: border-box; box-sizing: border-box; } .oneid-divider--dashed { border-top-style: dashed; } .oneid-divider--horizontal { width: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; } .oneid-divider--vertical { border-top: 0; display: inline-block; margin: 0 var(--td-comp-margin-m); border-left: 1px solid var(--td-border-level-1-color); height: 0.9em; vertical-align: middle; } .oneid-divider--with-text { display: -webkit-box; display: -ms-flexbox; display: flex; border-top: 0; white-space: nowrap; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .oneid-divider--with-text .oneid-divider__inner-text:not(:empty) { padding: 0 1em; display: inline-block; } .oneid-divider--with-text::before, .oneid-divider--with-text::after { content: ""; width: 50%; border-top: 1px solid var(--td-border-level-1-color); } .oneid-divider--with-text-left::before { width: 5%; } .oneid-divider--with-text-left::after { width: 95%; } .oneid-divider--with-text-right::before { width: 95%; } .oneid-divider--with-text-right::after { width: 5%; } .oneid-divider--dashed::before, .oneid-divider--dashed::after { border-top: 1px dashed var(--td-border-level-1-color); } .oneid-divider--vertical.oneid-divider--dashed { border-left: 1px dashed var(--td-border-level-1-color); } .oneid-switch { font: var(--td-font-body-medium); color: var(--td-text-color-primary); -webkit-box-sizing: border-box; box-sizing: border-box; list-style: none; position: relative; display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; vertical-align: middle; -webkit-box-align: center; -ms-flex-align: center; align-items: center; outline: none; border: 0; padding: 0; margin: 0; height: var(--td-comp-size-xxs); line-height: var(--td-comp-size-xxs); border-radius: var(--td-radius-round); min-width: calc(var(--td-comp-size-xxs) / 0.618); -webkit-transition: all 0.2s cubic-bezier(0.38, 0, 0.24, 1); transition: all 0.2s cubic-bezier(0.38, 0, 0.24, 1); background-color: var(--td-bg-color-secondarycomponent); cursor: pointer; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .oneid-switch:hover { background-color: var(--td-bg-color-secondarycomponent-hover); } .oneid-switch__handle { position: absolute; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; top: 4px; left: 4px; width: calc(var(--td-comp-size-xxs) - 8px); height: calc(var(--td-comp-size-xxs) - 8px); border-radius: var(--td-radius-round); -webkit-transition: all 0.2s cubic-bezier(0.38, 0, 0.24, 1); transition: all 0.2s cubic-bezier(0.38, 0, 0.24, 1); -webkit-box-shadow: var(--td-shadow-1); box-shadow: var(--td-shadow-1); } .oneid-switch__handle .oneid-icon { font-size: calc(var(--td-comp-size-xxs) - 4px); color: transparent; } .oneid-switch__handle::before { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; border-radius: var(--td-radius-round); background-color: #fff; -webkit-transition: all 0.2s cubic-bezier(0.38, 0, 0.24, 1); transition: all 0.2s cubic-bezier(0.38, 0, 0.24, 1); } .oneid-switch:active:not(.oneid-is-disabled):not(.oneid-is-loading) .oneid-switch__handle::before { left: 0; right: -6px; } .oneid-switch:active:not(.oneid-is-disabled):not(.oneid-is-loading).oneid-is-checked .oneid-switch__handle::before { right: 0; left: -6px; } .oneid-switch:active:not(.oneid-is-disabled):not(.oneid-is-loading) .oneid-switch__content { opacity: 0; } .oneid-switch__content { -webkit-box-sizing: border-box; box-sizing: border-box; display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; color: var(--td-text-color-anti); padding: 0 var(--td-comp-margin-xs) 0 calc(var(--td-comp-size-xxs) / 0.618 / 2 + 2px); font-size: var(--td-font-size-body-small); min-width: calc(var(--td-comp-size-xxs) / 0.618); -webkit-transition: padding 0.2s cubic-bezier(0.38, 0, 0.24, 1), opacity 0.2s linear; transition: padding 0.2s cubic-bezier(0.38, 0, 0.24, 1), opacity 0.2s linear; } .oneid-switch__content .oneid-icon { font-size: var(--td-font-size-body-large); } .oneid-switch.oneid-is-checked { background-color: var(--td-brand-color); } .oneid-switch.oneid-is-checked:hover { background-color: var(--td-brand-color-hover); } .oneid-switch.oneid-is-checked .oneid-switch__handle { left: calc(100% - 2.5px); -webkit-transform: translate(-100%, 0); transform: translate(-100%, 0); width: calc(var(--td-comp-size-xxs) - 5px); height: calc(var(--td-comp-size-xxs) - 5px); top: 2.5px; } .oneid-switch.oneid-is-checked .oneid-switch__content { padding: 0 calc(var(--td-comp-size-xxs) / 0.618 / 2 + 2px) 0 var(--td-comp-margin-xs); color: var(--td-text-color-anti); } .oneid-switch.oneid-is-loading { cursor: not-allowed; background-color: var(--td-bg-color-component-disabled); } .oneid-switch.oneid-is-loading .oneid-loading { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; } .oneid-switch.oneid-is-loading .oneid-switch__handle .oneid-icon { color: var(--td-bg-color-component-disabled); } .oneid-switch.oneid-is-loading.oneid-is-checked { background-color: var(--td-brand-color-focus); } .oneid-switch.oneid-is-loading.oneid-is-checked .oneid-switch__handle .oneid-icon { color: var(--td-brand-color-focus); } .oneid-switch.oneid-is-disabled { cursor: not-allowed; background-color: var(--td-bg-color-component-disabled); } .oneid-switch.oneid-is-disabled .oneid-switch__handle { -webkit-box-shadow: none; box-shadow: none; } .oneid-switch.oneid-is-disabled.oneid-is-checked { background-color: var(--td-brand-color-disabled); } .oneid-switch.oneid-is-disabled.oneid-is-checked .oneid-switch__handle { -webkit-box-shadow: none; box-shadow: none; } .oneid-switch.oneid-is-disabled.oneid-is-checked .oneid-switch__handle .oneid-icon { color: var(--td-brand-color-disabled); } .oneid-switch.oneid-size-l { min-width: calc(var(--td-comp-size-xs) / 0.618); height: var(--td-comp-size-xs); line-height: var(--td-comp-size-xs); border-radius: var(--td-radius-round); } .oneid-switch.oneid-size-l:active:not(.oneid-is-disabled):not(.oneid-is-loading) .oneid-switch__handle::before { left: 0; right: -8px; } .oneid-switch.oneid-size-l:active:not(.oneid-is-disabled):not(.oneid-is-loading).oneid-is-checked .oneid-switch__handle::before { right: 0; left: -8px; } .oneid-switch.oneid-size-l .oneid-switch__handle { top: 5px; left: 5px; width: calc(var(--td-comp-size-xs) - 10px); height: calc(var(--td-comp-size-xs) - 10px); } .oneid-switch.oneid-size-l .oneid-switch__handle .oneid-icon { font-size: calc(var(--td-comp-size-xs) - 4px); } .oneid-switch.oneid-size-l .oneid-switch__content { padding: 0 var(--td-comp-margin-s) 0 calc(var(--td-comp-size-xs) / 0.618 / 2 + 4px); min-width: calc(var(--td-comp-size-xs) / 0.618); font-size: var(--td-font-size-body-large); } .oneid-switch.oneid-size-l .oneid-switch__content .oneid-icon { font-size: var(--td-font-size-body-large); } .oneid-switch.oneid-size-l.oneid-is-checked .oneid-switch__handle { left: calc(100% - 3px); top: 3px; width: calc(var(--td-comp-size-xs) - 6px); height: calc(var(--td-comp-size-xs) - 6px); } .oneid-switch.oneid-size-l.oneid-is-checked .oneid-switch__content { padding: 0 calc(var(--td-comp-size-xs) / 0.618 / 2 + 4px) 0 var(--td-comp-margin-s); } .oneid-switch.oneid-size-s { min-width: calc(var(--td-comp-size-xxxs) / 0.618); height: var(--td-comp-size-xxxs); line-height: var(--td-comp-size-xxxs); border-radius: var(--td-radius-round); } .oneid-switch.oneid-size-s:active:not(.oneid-is-disabled):not(.oneid-is-loading) .oneid-switch__handle::before { left: 0; right: -4px; } .oneid-switch.oneid-size-s:active:not(.oneid-is-disabled):not(.oneid-is-loading).oneid-is-checked .oneid-switch__handle::before { right: 0; left: -4px; } .oneid-switch.oneid-size-s .oneid-switch__handle { top: 3px; left: 3px; width: calc(var(--td-comp-size-xxxs) - 6px); height: calc(var(--td-comp-size-xxxs) - 6px); } .oneid-switch.oneid-size-s .oneid-switch__handle .oneid-icon { font-size: calc(var(--td-comp-size-xxxs) - 4px); } .oneid-switch.oneid-size-s .oneid-switch__content { padding: 0 var(--td-comp-margin-xxs) 0 calc(var(--td-comp-size-xxxs) / 0.618 / 2 + 2px); min-width: calc(var(--td-comp-size-xxxs) / 0.618); font-size: 9px; } .oneid-switch.oneid-size-s .oneid-switch__content .oneid-icon { font-size: var(--td-font-size-body-large); } .oneid-switch.oneid-size-s.oneid-is-checked .oneid-switch__handle { left: calc(100% - 2px); top: 2px; width: calc(var(--td-comp-size-xxxs) - 4px); height: calc(var(--td-comp-size-xxxs) - 4px); } .oneid-switch.oneid-size-s.oneid-is-checked .oneid-switch__content { padding: 0 calc(var(--td-comp-size-xxxs) / 0.618 / 2 + 2px) 0 var(--td-comp-margin-xxs); } .oneid-anchor { -webkit-box-sizing: border-box; box-sizing: border-box; margin: 0; padding: 0; list-style: none; --td-anchor-space-base: var(--td-size-6); position: relative; background: var(--td-bg-color-container); width: 200px; color: var(--td-text-color-primary); font: var(--td-font-body-medium); } .oneid-anchor .oneid-is-active > a { color: var(--td-brand-color); } .oneid-anchor__line { position: absolute; top: 0; left: 0; width: 1px; height: 100%; background-color: var(--td-component-stroke); cursor: pointer; } .oneid-anchor__line-cursor-wrapper { position: absolute; display: block; height: 0; opacity: 0; -webkit-transition: all 0.2s cubic-bezier(0.24, 0.41, 0.51, 0.9); transition: all 0.2s cubic-bezier(0.24, 0.41, 0.51, 0.9); } .oneid-anchor__line-cursor-wrapper .oneid-anchor__line-cursor { width: 1px; height: 100%; background-color: var(--td-brand-color); } .oneid-anchor__item { padding: var(--td-comp-paddingTB-xxs) var(--td-comp-paddingTB-l); --level: 1; padding-left: calc(var(--level) * var(--td-anchor-space-base)); display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } .oneid-anchor__item.oneid-is-active { font-weight: 500; } .oneid-anchor__item-link { display: inline-block; position: relative; overflow: hidden; word-break: break-all; color: var(--td-text-color-primary); text-decoration: none; text-align: justify; } .oneid-anchor a { -webkit-transition: color 0.2s linear; transition: color 0.2s linear; } .oneid-anchor a:hover { color: var(--td-brand-color); cursor: pointer; } .oneid-anchor a:active { color: var(--td-brand-color-active); } .oneid-anchor.oneid-size-s { width: 120px; } .oneid-anchor.oneid-size-l { width: 320px; } .oneid-anchor__target { cursor: pointer; font: var(--td-font-body-medium); color: var(--td-text-color-primary); } @-webkit-keyframes fadeOut { 0% { opacity: 1; } 100% { opacity: 0; display: none; } } @keyframes fadeOut { 0% { opacity: 1; } 100% { opacity: 0; display: none; } } .oneid-anchor__target .oneid-anchor__copy { display: none; margin: 0 0 0 var(--td-comp-margin-xs); } .oneid-anchor__target:hover .oneid-anchor__copy { display: inline-block; } .oneid-anchor__target:target::after { display: inline-block; content: ""; width: 6px; height: 6px; border-radius: var(--td-radius-circle); background-color: var(--td-brand-color); vertical-align: middle; -webkit-animation: fadeOut 2s 2s linear 1; animation: fadeOut 2s 2s linear 1; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; } .oneid-calendar { font: var(--td-font-body-medium); color: var(--td-text-color-primary); -webkit-box-sizing: border-box; box-sizing: border-box; margin: 0; padding: 0; list-style: none; border: 1px solid var(--td-border-level-1-color); background-color: var(--td-bg-color-container); border-radius: var(--td-radius-large); } .oneid-calendar .oneid-is-disabled.oneid-calendar__table-body-cell:hover { cursor: not-allowed; } .oneid-calendar .oneid-is-disabled .oneid-calendar__table-body-cell-display { color: var(--td-text-color-disabled); } .oneid-calendar .oneid-is-disabled .oneid-calendar__table-body-cell-display:hover { -webkit-box-shadow: none; box-shadow: none; } .oneid-calendar--full { min-width: 560px; padding: var(--td-comp-paddingTB-xxl) var(--td-comp-paddingLR-xxl); } .oneid-calendar--full .oneid-calendar__control { padding: 0; } .oneid-calendar--full .oneid-calendar__title { font: var(--td-font-title-large); -webkit-box-flex: 1; -ms-flex: 1; flex: 1; } .oneid-calendar--full .oneid-calendar__panel { position: relative; margin-top: var(--td-comp-margin-xxxl); } .oneid-calendar--full .oneid-calendar__panel-title { font: var(--td-font-title-large); color: var(--td-text-color-primary); position: absolute; } .oneid-calendar--full .oneid-calendar__table-head-cell, .oneid-calendar--full .oneid-calendar__table-body-cell { margin-right: var(--td-comp-margin-s); position: relative; } .oneid-calendar--full .oneid-calendar__table-body-cell { border-top: 2px solid var(--td-border-level-1-color); padding: 0; height: 104px; line-height: var(--td-line-height-body-medium); display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: end; -ms-flex-align: end; align-items: flex-end; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; margin-left: 0; -webkit-transition-duration: 0.2s; transition-duration: 0.2s; -webkit-transition-property: border-top, background; transition-property: border-top, background; -webkit-transition-timing-function: linear; transition-timing-function: linear; } .oneid-calendar--full .oneid-calendar__table-body-cell-content { padding: var(--td-comp-paddingTB-s) var(--td-comp-paddingLR-xs); width: 100%; -webkit-box-sizing: border-box; box-sizing: border-box; } .oneid-calendar--full .oneid-calendar__table-body-cell.oneid-is-checked { background-color: var(--td-brand-color-light); } .oneid-calendar--full .oneid-calendar__table-body-cell.oneid-is-checked:hover { background-color: var(--td-brand-color-light); } .oneid-calendar--full .oneid-calendar__table-body-cell--now { border-top: 2px solid var(--td-brand-color); } .oneid-calendar--full .oneid-calendar__table-body-cell--now .oneid-calendar__table-body-cell-display { color: var(--td-text-color-primary); } .oneid-calendar--full .oneid-calendar__footer { height: 90px; padding: var(--td-comp-paddingTB-xxl) var(--td-comp-paddingLR-xxl); border-top: 1px solid var(--td-border-level-1-color); } .oneid-calendar--card { width: 280px; border-radius: var(--td-radius-medium); padding: var(--td-comp-paddingTB-m) var(--td-comp-paddingLR-m); } .oneid-calendar--card .oneid-calendar__control { padding: 0; } .oneid-calendar--card .oneid-calendar__control-section { width: 100%; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; } .oneid-calendar--card .oneid-calendar__control-section-cell:last-child { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; text-align: right; display: block; } .oneid-calendar--card .oneid-calendar__panel.oneid-calendar__panel--month { height: 200px; margin-top: var(--td-comp-margin-m); } .oneid-calendar--card .oneid-calendar__panel.oneid-calendar__panel--year { height: 168px; margin-top: var(--td-comp-margin-m); } .oneid-calendar--card .oneid-calendar__panel.oneid-calendar__panel--year .oneid-calendar__table-body-cell-display { min-width: var(--td-comp-size-xxl); } .oneid-calendar--card .oneid-calendar__table { width: 100%; height: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; justify-self: start; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; } .oneid-calendar--card .oneid-calendar__table-head-row, .oneid-calendar--card .oneid-calendar__table-body-row { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; background: var(--td-bg-color-container); } .oneid-calendar--card .oneid-calendar__table-head-cell, .oneid-calendar--card .oneid-calendar__table-body-cell { width: 100%; height: 100%; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; font: var(--td-font-body-medium); -webkit-box-sizing: border-box; box-sizing: border-box; } .oneid-calendar--card .oneid-calendar__table-head-cell-display, .oneid-calendar--card .oneid-calendar__table-body-cell-display { width: var(--td-comp-size-xs); line-height: var(--td-comp-size-xs); } .oneid-calendar--card .oneid-calendar__table-body { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; justify-self: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-flex: 1; -ms-flex: 1; flex: 1; } .oneid-calendar--card .oneid-calendar__table-body-cell { -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .oneid-calendar--card .oneid-calendar__table-body-cell:hover { background-color: var(--td-bg-color-container); } .oneid-calendar--card .oneid-calendar__table-body-cell-display { font: var(--td-font-body-medium); padding-top: calc(var(--td-comp-paddingTB-xxs) / 2); padding-bottom: calc(var(--td-comp-paddingTB-xxs) / 2); text-align: center; border-radius: var(--td-radius-default); -webkit-transition: all 0.2s linear; transition: all 0.2s linear; } .oneid-calendar--card .oneid-calendar__table-body-cell-display:hover { -webkit-box-shadow: inset 0 0 0 1px var(--td-brand-color); box-shadow: inset 0 0 0 1px var(--td-brand-color); -webkit-transition: -webkit-box-shadow 0.2s linear; transition: -webkit-box-shadow 0.2s linear; transition: box-shadow 0.2s linear; transition: box-shadow 0.2s linear, -webkit-box-shadow 0.2s linear; } .oneid-calendar--card .oneid-calendar__table-body-cell--now .oneid-calendar__table-body-cell-display { color: var(--td-brand-color); background-color: var(--td-brand-color-light); position: relative; } .oneid-calendar--card .oneid-is-checked .oneid-calendar__table-body-cell-display { background: var(--td-brand-color); border-radius: var(--td-radius-default); color: var(--td-text-color-anti); } .oneid-calendar--card .oneid-calendar__footer { height: var(--td-comp-size-xxl); padding: 0 var(--td-comp-paddingLR-m); border-top: 1px solid var(--td-border-level-1-color); } .oneid-calendar__control { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .oneid-calendar__control-section { height: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .oneid-calendar__control-section:last-child { margin-right: 0; } .oneid-calendar__control-section-cell { height: 100%; margin-right: var(--td-comp-margin-s); display: -webkit-box; display: -ms-flexbox; display: flex; } .oneid-calendar__control-section-cell .oneid-radio-group { vertical-align: bottom; } .oneid-calendar__control-section-cell .oneid-select { display: inline; } .oneid-calendar__control-section-cell:last-child { margin-right: 0; } .oneid-calendar__panel { -webkit-box-sizing: border-box; box-sizing: border-box; width: 100%; } .oneid-calendar__table { border-collapse: collapse; border-spacing: 0; width: 100%; height: 100%; } .oneid-calendar__table-head, .oneid-calendar__table-body { width: 100%; } .oneid-calendar__table-head-row, .oneid-calendar__table-body-row { width: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; } .oneid-calendar__table-head-cell, .oneid-calendar__table-body-cell { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; font: var(--td-font-title-small); color: var(--td-text-color-primary); cursor: default; padding: 0; } .oneid-calendar__table-head-cell:last-child, .oneid-calendar__table-body-cell:last-child { margin-right: 0; } .oneid-calendar__table-head { margin-bottom: var(--td-comp-margin-s); display: block; } .oneid-calendar__table-head-row { padding-bottom: 0px; background: var(--td-bg-color-container); } .oneid-calendar__table-head-cell { height: 100%; font: var(--td-font-title-small); color: var(--td-text-color-secondary); } .oneid-calendar__table-body-cell { cursor: pointer; } .oneid-calendar__table-body-cell:hover { background-color: var(--td-bg-color-container-hover); -webkit-transition: background-color 0.2s linear; transition: background-color 0.2s linear; } .oneid-calendar__table-body-cell-display { font: var(--td-font-title-small); color: var(--td-text-color-primary); } .oneid-link { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; cursor: pointer; -webkit-box-align: center; -ms-flex-align: center; align-items: center; position: relative; text-decoration: none; outline: none; padding: 0; -webkit-transition: all 0.2s linear; transition: all 0.2s linear; font: var(--td-font-link-medium); } .oneid-link .oneid-link__prefix-icon { margin-right: var(--td-comp-margin-s); display: -webkit-box; display: -ms-flexbox; display: flex; } .oneid-link .oneid-link__suffix-icon { margin-left: var(--td-comp-margin-s); display: -webkit-box; display: -ms-flexbox; display: flex; } .oneid-link.oneid-size-s { font: var(--td-font-link-small); } .oneid-link.oneid-size-s .oneid-link__prefix-icon { margin-right: var(--td-comp-margin-xs); display: -webkit-box; display: -ms-flexbox; display: flex; } .oneid-link.oneid-size-s .oneid-link__suffix-icon { margin-left: var(--td-comp-margin-xs); display: -webkit-box; display: -ms-flexbox; display: flex; } .oneid-link.oneid-size-l { font: var(--td-font-link-large); } .oneid-link.oneid-size-l .oneid-link__prefix-icon { margin-right: var(--td-comp-margin-m); display: -webkit-box; display: -ms-flexbox; display: flex; } .oneid-link.oneid-size-l .oneid-link__suffix-icon { margin-left: var(--td-comp-margin-m); display: -webkit-box; display: -ms-flexbox; display: flex; } .oneid-link--theme-default { color: var(--td-text-color-primary); } .oneid-link--theme-default:active { color: var(--td-brand-color-active); } .oneid-link--theme-default.oneid-link--hover-underline::after { content: ""; position: absolute; left: 0; right: 0; height: 0; bottom: 0; border-bottom: 1px solid var(--td-text-color-primary); opacity: 0; -webkit-transition: all 0.2s linear; transition: all 0.2s linear; } .oneid-link--theme-default.oneid-link--hover-underline:hover::after { opacity: 1; } .oneid-link--theme-default.oneid-link--hover-underline:active::after { opacity: 1; border-color: var(--td-brand-color-active); } .oneid-link--theme-default.oneid-link--hover-color:hover { color: var(--td-brand-color-hover); } .oneid-link--theme-default.oneid-link--hover-color.oneid-is-underline:hover::after { border-color: var(--td-brand-color-hover); } .oneid-link--theme-default.oneid-link--hover-color.oneid-is-underline:active::after { border-color: var(--td-brand-color-active); } .oneid-link--theme-default.oneid-link--hover-color:active { color: var(--td-brand-color-active); } .oneid-link--theme-default.oneid-is-underline::after { content: ""; position: absolute; left: 0; right: 0; height: 0; bottom: 0; opacity: 1; border-bottom: 1px solid var(--td-text-color-primary); -webkit-transition: all 0.2s linear; transition: all 0.2s linear; } .oneid-link--theme-default.oneid-is-disabled { cursor: not-allowed; color: var(--td-text-color-disabled); } .oneid-link--theme-default.oneid-is-disabled:hover, .oneid-link--theme-default.oneid-is-disabled:active { color: var(--td-text-color-disabled); } .oneid-link--theme-default.oneid-is-disabled.oneid-is-underline::after { border-color: var(--td-text-color-disabled); } .oneid-link--theme-primary { color: var(--td-brand-color); } .oneid-link--theme-primary:active { color: var(--td-brand-color-active); } .oneid-link--theme-primary.oneid-link--hover-underline::after { content: ""; position: absolute; left: 0; right: 0; height: 0; bottom: 0; border-bottom: 1px solid var(--td-brand-color); opacity: 0; -webkit-transition: all 0.2s linear; transition: all 0.2s linear; } .oneid-link--theme-primary.oneid-link--hover-underline:hover::after { opacity: 1; } .oneid-link--theme-primary.oneid-link--hover-underline:active::after { opacity: 1; border-color: var(--td-brand-color-active); } .oneid-link--theme-primary.oneid-link--hover-color:hover { color: var(--td-brand-color-hover); } .oneid-link--theme-primary.oneid-link--hover-color.oneid-is-underline:hover::after { border-color: var(--td-brand-color-hover); } .oneid-link--theme-primary.oneid-link--hover-color.oneid-is-underline:active::after { border-color: var(--td-brand-color-active); } .oneid-link--theme-primary.oneid-link--hover-color:active { color: var(--td-brand-color-active); } .oneid-link--theme-primary.oneid-is-underline::after { content: ""; position: absolute; left: 0; right: 0; height: 0; bottom: 0; opacity: 1; border-bottom: 1px solid var(--td-brand-color); -webkit-transition: all 0.2s linear; transition: all 0.2s linear; } .oneid-link--theme-primary.oneid-is-disabled { cursor: not-allowed; color: var(--td-brand-color-disabled); } .oneid-link--theme-primary.oneid-is-disabled:hover, .oneid-link--theme-primary.oneid-is-disabled:active { color: var(--td-brand-color-disabled); } .oneid-link--theme-primary.oneid-is-disabled.oneid-is-underline::after { border-color: var(--td-brand-color-disabled); } .oneid-link--theme-success { color: var(--td-success-color); } .oneid-link--theme-success:active { color: var(--td-success-color-active); } .oneid-link--theme-success.oneid-link--hover-underline::after { content: ""; position: absolute; left: 0; right: 0; height: 0; bottom: 0; border-bottom: 1px solid var(--td-success-color); opacity: 0; -webkit-transition: all 0.2s linear; transition: all 0.2s linear; } .oneid-link--theme-success.oneid-link--hover-underline:hover::after { opacity: 1; } .oneid-link--theme-success.oneid-link--hover-underline:active::after { opacity: 1; border-color: var(--td-success-color-active); } .oneid-link--theme-success.oneid-link--hover-color:hover { color: var(--td-success-color-hover); } .oneid-link--theme-success.oneid-link--hover-color.oneid-is-underline:hover::after { border-color: var(--td-success-color-hover); } .oneid-link--theme-success.oneid-link--hover-color.oneid-is-underline:active::after { border-color: var(--td-success-color-active); } .oneid-link--theme-success.oneid-link--hover-color:active { color: var(--td-success-color-active); } .oneid-link--theme-success.oneid-is-underline::after { content: ""; position: absolute; left: 0; right: 0; height: 0; bottom: 0; opacity: 1; border-bottom: 1px solid var(--td-success-color); -webkit-transition: all 0.2s linear; transition: all 0.2s linear; } .oneid-link--theme-success.oneid-is-disabled { cursor: not-allowed; color: var(--td-success-color-disabled); } .oneid-link--theme-success.oneid-is-disabled:hover, .oneid-link--theme-success.oneid-is-disabled:active { color: var(--td-success-color-disabled); } .oneid-link--theme-success.oneid-is-disabled.oneid-is-underline::after { border-color: var(--td-success-color-disabled); } .oneid-link--theme-danger { color: var(--td-error-color); } .oneid-link--theme-danger:active { color: var(--td-error-color-active); } .oneid-link--theme-danger.oneid-link--hover-underline::after { content: ""; position: absolute; left: 0; right: 0; height: 0; bottom: 0; border-bottom: 1px solid var(--td-error-color); opacity: 0; -webkit-transition: all 0.2s linear; transition: all 0.2s linear; } .oneid-link--theme-danger.oneid-link--hover-underline:hover::after { opacity: 1; } .oneid-link--theme-danger.oneid-link--hover-underline:active::after { opacity: 1; border-color: var(--td-error-color-active); } .oneid-link--theme-danger.oneid-link--hover-color:hover { color: var(--td-error-color-hover); } .oneid-link--theme-danger.oneid-link--hover-color.oneid-is-underline:hover::after { border-color: var(--td-error-color-hover); } .oneid-link--theme-danger.oneid-link--hover-color.oneid-is-underline:active::after { border-color: var(--td-error-color-active); } .oneid-link--theme-danger.oneid-link--hover-color:active { color: var(--td-error-color-active); } .oneid-link--theme-danger.oneid-is-underline::after { content: ""; position: absolute; left: 0; right: 0; height: 0; bottom: 0; opacity: 1; border-bottom: 1px solid var(--td-error-color); -webkit-transition: all 0.2s linear; transition: all 0.2s linear; } .oneid-link--theme-danger.oneid-is-disabled { cursor: not-allowed; color: var(--td-error-color-disabled); } .oneid-link--theme-danger.oneid-is-disabled:hover, .oneid-link--theme-danger.oneid-is-disabled:active { color: var(--td-error-color-disabled); } .oneid-link--theme-danger.oneid-is-disabled.oneid-is-underline::after { border-color: var(--td-error-color-disabled); } .oneid-link--theme-warning { color: var(--td-warning-color); } .oneid-link--theme-warning:active { color: var(--td-warning-color-active); } .oneid-link--theme-warning.oneid-link--hover-underline::after { content: ""; position: absolute; left: 0; right: 0; height: 0; bottom: 0; border-bottom: 1px solid var(--td-warning-color); opacity: 0; -webkit-transition: all 0.2s linear; transition: all 0.2s linear; } .oneid-link--theme-warning.oneid-link--hover-underline:hover::after { opacity: 1; } .oneid-link--theme-warning.oneid-link--hover-underline:active::after { opacity: 1; border-color: var(--td-warning-color-active); } .oneid-link--theme-warning.oneid-link--hover-color:hover { color: var(--td-warning-color-hover); } .oneid-link--theme-warning.oneid-link--hover-color.oneid-is-underline:hover::after { border-color: var(--td-warning-color-hover); } .oneid-link--theme-warning.oneid-link--hover-color.oneid-is-underline:active::after { border-color: var(--td-warning-color-active); } .oneid-link--theme-warning.oneid-link--hover-color:active { color: var(--td-warning-color-active); } .oneid-link--theme-warning.oneid-is-underline::after { content: ""; position: absolute; left: 0; right: 0; height: 0; bottom: 0; opacity: 1; border-bottom: 1px solid var(--td-warning-color); -webkit-transition: all 0.2s linear; transition: all 0.2s linear; } .oneid-link--theme-warning.oneid-is-disabled { cursor: not-allowed; color: var(--td-warning-color-disabled); } .oneid-link--theme-warning.oneid-is-disabled:hover, .oneid-link--theme-warning.oneid-is-disabled:active { color: var(--td-warning-color-disabled); } .oneid-link--theme-warning.oneid-is-disabled.oneid-is-underline::after { border-color: var(--td-warning-color-disabled); } .oneid-space { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; } .oneid-space .oneid-space-item { width: inherit; } .oneid-space-align-start { -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; } .oneid-space-align-end { -webkit-box-align: end; -ms-flex-align: end; align-items: flex-end; } .oneid-space-align-baseline { -webkit-box-align: baseline; -ms-flex-align: baseline; align-items: baseline; } .oneid-space-align-center { -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .oneid-space-vertical { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } .oneid-space-vertical .oneid-space-item-separator { width: 100%; } .oneid-space.oneid-space--break-line { -ms-flex-wrap: wrap; flex-wrap: wrap; } .oneid-space.oneid-space--polyfill { display: -webkit-box; display: -ms-flexbox; display: flex; } .oneid-space.oneid-space--polyfill.oneid-space-horizontal, .oneid-space.oneid-space--polyfill.oneid-space--break-line { margin-left: calc(-1 * var(--td-space-column-gap, 0)); } .oneid-space.oneid-space--polyfill.oneid-space-vertical, .oneid-space.oneid-space--polyfill.oneid-space--break-line { margin-top: calc(-1 * var(--td-space-row-gap, 0)); } .oneid-space.oneid-space--polyfill.oneid-space-horizontal > *, .oneid-space.oneid-space--polyfill.oneid-space--break-line > * { margin-left: var(--td-space-column-gap); } .oneid-space.oneid-space--polyfill.oneid-space-vertical > *, .oneid-space.oneid-space--polyfill.oneid-space--break-line > * { margin-top: var(--td-space-row-gap); } .oneid-image__wrapper { position: relative; background: var(--td-bg-color-secondarycontainer); z-index: 1; } .oneid-image__wrapper--shape-square { border-radius: 0; } .oneid-image__wrapper--shape-round { border-radius: var(--td-radius-medium); } .oneid-image__wrapper--shape-circle { border-radius: 50%; } .oneid-image__wrapper--gallery { border-radius: var(--td-radius-medium); } .oneid-image__wrapper--gallery .oneid-image { position: relative; z-index: 5; } .oneid-image__wrapper--need-hover { cursor: pointer; } .oneid-image { width: 100%; height: 100%; border-radius: inherit; position: relative; z-index: inherit; } .oneid-image--fit-fill { -o-object-fit: fill; object-fit: fill; } .oneid-image--fit-contain { -o-object-fit: contain; object-fit: contain; } .oneid-image--fit-cover { -o-object-fit: cover; object-fit: cover; } .oneid-image--fit-scale-down { -o-object-fit: scale-down; object-fit: scale-down; } .oneid-image--fit-none { -o-object-fit: none; object-fit: none; } .oneid-image--position-center { -o-object-position: center; object-position: center; } .oneid-image--position-bottom { -o-object-position: bottom; object-position: bottom; } .oneid-image--position-top { -o-object-position: top; object-position: top; } .oneid-image--position-left { -o-object-position: left; object-position: left; } .oneid-image--position-right { -o-object-position: right; object-position: right; } .oneid-image__gallery-shadow { position: absolute; left: 0; right: -24px; top: 24px; bottom: 24px; background: rgba(238, 238, 238, 0.26); border-radius: var(--td-radius-medium); z-index: 3; } .oneid-image__gallery-shadow::before, .oneid-image__gallery-shadow::after { content: ""; position: absolute; left: 0; border-radius: var(--td-radius-medium); } .oneid-image__gallery-shadow::after { top: -16px; right: 16px; bottom: -16px; background: rgba(238, 238, 238, 0.8); z-index: 4; } .oneid-image__gallery-shadow::before { top: -8px; right: 8px; bottom: -8px; background: rgba(238, 238, 238, 0.5); z-index: 2; } .oneid-image__placeholder { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; z-index: 0; } .oneid-image__overlay-content { position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: 6; opacity: 1; visibility: visible; -webkit-transition: visibility 0s, opacity 0.2s linear; transition: visibility 0s, opacity 0.2s linear; } .oneid-image__overlay-content--hidden { visibility: hidden; opacity: 0; } .oneid-image__loading, .oneid-image__error { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; z-index: 1; } .oneid-image__loading { color: var(--td-text-color-secondary); } .oneid-image__error { color: var(--td-text-color-disabled); } .oneid-image-viewer__img-error { height: 440px; width: 440px; background-color: var(--td-bg-color-component-disabled); border-radius: 4px; color: #000000; cursor: inherit; position: absolute; } .oneid-image-viewer__img-error .oneid-image-viewer__img-error-content { position: absolute; height: 100%; width: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -ms-flex-line-pack: center; align-content: center; font: var(--td-font-body-medium); } .oneid-image-viewer__img-error .oneid-image-viewer__img-error-content .oneid-image-viewer__img-error-text { margin-top: var(--td-comp-margin-s); } @-webkit-keyframes modal-image-show { 0% { -webkit-transform: scale(0); transform: scale(0); } to { -webkit-transform: scale(1); transform: scale(1); } } @keyframes modal-image-show { 0% { -webkit-transform: scale(0); transform: scale(0); } to { -webkit-transform: scale(1); transform: scale(1); } } @-webkit-keyframes modal-image-hide { 0% { -webkit-transform: scale(1); transform: scale(1); } to { -webkit-transform: scale(0); transform: scale(0); } } @keyframes modal-image-hide { 0% { -webkit-transform: scale(1); transform: scale(1); } to { -webkit-transform: scale(0); transform: scale(0); } } @-webkit-keyframes modal-mask-show { 0% { opacity: 0; } to { opacity: 1; } } @keyframes modal-mask-show { 0% { opacity: 0; } to { opacity: 1; } } @-webkit-keyframes modal-mask-hide { 0% { opacity: 1; } to { opacity: 0; } } @keyframes modal-mask-hide { 0% { opacity: 1; } to { opacity: 0; } } .oneid-image-viewer-preview-image { position: fixed; top: 0; bottom: 0; left: 0; right: 0; z-index: 3000; overflow: hidden; -webkit-animation: 0.2s cubic-bezier(0.82, 0, 1, 0.9) modal-mask-show; animation: 0.2s cubic-bezier(0.82, 0, 1, 0.9) modal-mask-show; } .oneid-image-viewer-preview-image.oneid-is-hide { -webkit-animation: 0.2s cubic-bezier(0, 0, 0.15, 1) modal-mask-hide forwards; animation: 0.2s cubic-bezier(0, 0, 0.15, 1) modal-mask-hide forwards; } .oneid-image-viewer-preview-image.oneid-is-hide .oneid-image-viewer__modal-pic .oneid-image-viewer__modal-box { -webkit-animation: 0.2s cubic-bezier(0, 0, 0.15, 1) modal-image-hide forwards; animation: 0.2s cubic-bezier(0, 0, 0.15, 1) modal-image-hide forwards; } .oneid-image-viewer-preview-image .oneid-image-viewer__modal-index { text-align: center; font-size: var(--td-font-size-body-medium); color: var(--td-text-color-anti); position: absolute; top: 92px; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); background: rgba(0, 0, 0, 0.4); border-radius: var(--td-radius-default); padding: var(--td-comp-paddingTB-xs) var(--td-comp-paddingLR-s); z-index: 1; } .oneid-image-viewer-preview-image .oneid-image-viewer__modal-mask { position: fixed; top: 0; bottom: 0; left: 0; right: 0; background-color: var(--td-mask-active); height: 100%; width: 100%; -webkit-transition: all 0.2s ease; transition: all 0.2s ease; opacity: 1; } .oneid-image-viewer-preview-image .oneid-image-viewer__modal-pic { height: 0; width: 0; position: absolute; top: 50%; left: 50%; } .oneid-image-viewer-preview-image .oneid-image-viewer__modal-pic .oneid-image-viewer__modal-box { width: 100%; height: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-animation: 0.2s cubic-bezier(0.38, 0, 0.24, 1) modal-image-show; animation: 0.2s cubic-bezier(0.38, 0, 0.24, 1) modal-image-show; } .oneid-image-viewer-preview-image .oneid-image-viewer__modal-pic .oneid-image-viewer__modal-box .oneid-image-viewer__modal-image { display: block; max-width: min(90vw, 1000px); max-height: min(90vh, 800px); -webkit-transition: all 0.2s cubic-bezier(0.38, 0, 0.24, 1); transition: all 0.2s cubic-bezier(0.38, 0, 0.24, 1); -webkit-transform: rotate(0deg); transform: rotate(0deg); -o-object-fit: contain; object-fit: contain; } .oneid-image-viewer-preview-image .oneid-image-viewer__modal-header { width: 100%; position: absolute; top: 0; z-index: 1; height: auto; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; background-color: var(--td-bg-color-container); padding: 0 0 12px 0; } .oneid-image-viewer-preview-image .oneid-image-viewer__modal-header.oneid-is-show { padding: 12px 0; } @-webkit-keyframes preview-icon-range { 0% { -webkit-transform: translate(-50%, 50%) rotateZ(0); transform: translate(-50%, 50%) rotateZ(0); } to { -webkit-transform: translate(-50%, 50%) rotateZ(-180deg); transform: translate(-50%, 50%) rotateZ(-180deg); } } @keyframes preview-icon-range { 0% { -webkit-transform: translate(-50%, 50%) rotateZ(0); transform: translate(-50%, 50%) rotateZ(0); } to { -webkit-transform: translate(-50%, 50%) rotateZ(-180deg); transform: translate(-50%, 50%) rotateZ(-180deg); } } @-webkit-keyframes preview-icon-unrange { 0% { -webkit-transform: translate(-50%, 50%) rotateZ(-180deg); transform: translate(-50%, 50%) rotateZ(-180deg); } to { -webkit-transform: translate(-50%, 50%) rotateZ(0); transform: translate(-50%, 50%) rotateZ(0); } } @keyframes preview-icon-unrange { 0% { -webkit-transform: translate(-50%, 50%) rotateZ(-180deg); transform: translate(-50%, 50%) rotateZ(-180deg); } to { -webkit-transform: translate(-50%, 50%) rotateZ(0); transform: translate(-50%, 50%) rotateZ(0); } } .oneid-image-viewer-preview-image .oneid-image-viewer__modal-header .oneid-image-viewer__header-pre-bt { width: var(--td-comp-size-xxs); height: var(--td-comp-size-xxs); display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; position: absolute; left: 50%; bottom: 0; -webkit-transform: translate(-50%, 50%); transform: translate(-50%, 50%); background-color: var(--td-bg-color-container); color: var(--td-text-color-primary); border-radius: 50%; -webkit-box-shadow: var(--td-shadow-inset-top), var(--td-shadow-inset-right), var(--td-shadow-inset-bottom), var(--td-shadow-inset-left); box-shadow: var(--td-shadow-inset-top), var(--td-shadow-inset-right), var(--td-shadow-inset-bottom), var(--td-shadow-inset-left); -webkit-animation: 0.2s cubic-bezier(0.38, 0, 0.24, 1) 0s 1 normal forwards running preview-icon-unrange; animation: 0.2s cubic-bezier(0.38, 0, 0.24, 1) 0s 1 normal forwards running preview-icon-unrange; } .oneid-image-viewer-preview-image .oneid-image-viewer__modal-header .oneid-image-viewer__header-pre-bt .oneid-icon { font-size: var(--td-font-size-body-large); } .oneid-image-viewer-preview-image .oneid-image-viewer__modal-header .oneid-image-viewer__header-pre-bt:hover { background-color: inherit; } @-webkit-keyframes preview-image-show { 0% { height: 0; } to { height: 40px; } } @keyframes preview-image-show { 0% { height: 0; } to { height: 40px; } } @-webkit-keyframes preview-image-hide { 0% { height: 40px; } to { height: 0; } } @keyframes preview-image-hide { 0% { height: 40px; } to { height: 0; } } .oneid-image-viewer-preview-image .oneid-image-viewer__modal-header.oneid-is-show .oneid-image-viewer__header-prev { -webkit-animation: 0.2s cubic-bezier(0.38, 0, 0.24, 1) 0s 1 normal forwards running preview-image-show; animation: 0.2s cubic-bezier(0.38, 0, 0.24, 1) 0s 1 normal forwards running preview-image-show; } .oneid-image-viewer-preview-image .oneid-image-viewer__modal-header.oneid-is-show .oneid-image-viewer__header-pre-bt { -webkit-animation: 0.2s cubic-bezier(0.38, 0, 0.24, 1) 0s 1 normal forwards running preview-icon-range; animation: 0.2s cubic-bezier(0.38, 0, 0.24, 1) 0s 1 normal forwards running preview-icon-range; } .oneid-image-viewer-preview-image .oneid-image-viewer__modal-header .oneid-image-viewer__header-prev { width: 521.7777777778px; -webkit-animation: 0.2s cubic-bezier(0.38, 0, 0.24, 1) 0s 1 normal forwards running preview-image-hide; animation: 0.2s cubic-bezier(0.38, 0, 0.24, 1) 0s 1 normal forwards running preview-image-hide; display: -webkit-box; display: -ms-flexbox; display: flex; position: relative; overflow: hidden; } .oneid-image-viewer-preview-image .oneid-image-viewer__modal-header .oneid-image-viewer__header-prev::before, .oneid-image-viewer-preview-image .oneid-image-viewer__modal-header .oneid-image-viewer__header-prev::after { content: ""; position: absolute; height: 100%; z-index: 1; width: 71.1111111111px; pointer-events: none; } .oneid-image-viewer-preview-image .oneid-image-viewer__modal-header .oneid-image-viewer__header-prev::before { left: 0; background-image: -webkit-gradient(linear, left top, right top, from(var(--td-bg-color-container)), to(rgba(255, 255, 255, 0))); background-image: linear-gradient(to right, var(--td-bg-color-container), rgba(255, 255, 255, 0)); } .oneid-image-viewer-preview-image .oneid-image-viewer__modal-header .oneid-image-viewer__header-prev::after { right: 0; background-image: -webkit-gradient(linear, left top, right top, from(rgba(255, 255, 255, 0)), to(var(--td-bg-color-container))); background-image: linear-gradient(to right, rgba(255, 255, 255, 0), var(--td-bg-color-container)); } .oneid-image-viewer-preview-image .oneid-image-viewer__header-trans { height: 100%; -webkit-transition: -webkit-transform 0.2s; transition: -webkit-transform 0.2s; transition: transform 0.2s; transition: transform 0.2s, -webkit-transform 0.2s; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; gap: 4px; margin-left: 225.3333333333px; } .oneid-image-viewer-preview-image .oneid-image-viewer__header-box { -webkit-box-sizing: border-box; box-sizing: border-box; width: 71.1111111111px; height: 40px; position: relative; -webkit-transition: 0.2s; transition: 0.2s; overflow: hidden; border-radius: var(--td-radius-default); display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; border: 1px solid transparent; background-color: var(--td-bg-color-secondarycontainer); } .oneid-image-viewer-preview-image .oneid-image-viewer__header-box .oneid-image-viewer__header-img { width: auto; height: 100%; } .oneid-image-viewer-preview-image .oneid-image-viewer__header-box:hover, .oneid-image-viewer-preview-image .oneid-image-viewer__header-box.oneid-is-active { border-color: var(--td-brand-color); } .oneid-image-viewer-preview-image .oneid-image-viewer__modal-icon { cursor: pointer; color: var(--td-text-color-primary); border-radius: var(--td-radius-default); -webkit-transition: 0.2s; transition: 0.2s; } .oneid-image-viewer-preview-image .oneid-image-viewer__modal-icon.oneid-image-viewer__modal-close-bt { top: 100px; right: 40px; } .oneid-image-viewer-preview-image .oneid-image-viewer__modal-icon.oneid-image-viewer__modal-next-bt, .oneid-image-viewer-preview-image .oneid-image-viewer__modal-icon.oneid-image-viewer__modal-prev-bt { top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); } .oneid-image-viewer-preview-image .oneid-image-viewer__modal-icon.oneid-image-viewer__modal-prev-bt { left: 40px; } .oneid-image-viewer-preview-image .oneid-image-viewer__modal-icon.oneid-image-viewer__modal-next-bt { right: 40px; } .oneid-image-viewer-preview-image .oneid-image-viewer__modal-icon.oneid-image-viewer__modal-close-bt, .oneid-image-viewer-preview-image .oneid-image-viewer__modal-icon.oneid-image-viewer__modal-prev-bt, .oneid-image-viewer-preview-image .oneid-image-viewer__modal-icon.oneid-image-viewer__modal-next-bt { position: fixed; z-index: 10; color: var(--td-text-color-anti); background-color: rgba(0, 0, 0, 0.4); border-radius: 50%; width: var(--td-comp-size-xl); height: var(--td-comp-size-xl); display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .oneid-image-viewer-preview-image .oneid-image-viewer__modal-icon .oneid-image-viewer__modal-icon-label { margin-left: 2px; } .oneid-image-viewer-preview-image .oneid-image-viewer__modal-icon.oneid-is-disabled { color: rgba(255, 255, 255, 0.22); } .oneid-image-viewer-preview-image .oneid-image-viewer__modal-icon.oneid-is-disabled:hover { background-color: rgba(0, 0, 0, 0.4); } .oneid-image-viewer-preview-image .oneid-image-viewer__modal-icon:hover { background-color: rgba(0, 0, 0, 0.2); } .oneid-image-viewer__mask { width: 100vh; height: 100vh; left: 0; top: 0; z-index: 99; position: fixed; background-color: transparent; } .oneid-image-viewer__utils { width: 100%; position: absolute; bottom: 32px; z-index: 1; height: auto; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; color: var(--td-text-color-primary); -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .oneid-image-viewer__utils .oneid-image-viewer__utils-content { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; height: 50px; line-height: 100%; background: var(--td-bg-color-container); border-radius: var(--td-radius-medium); padding: 0 var(--td-comp-paddingLR-xs); } .oneid-image-viewer__utils .oneid-image-viewer__utils-content .oneid-image-viewer__modal-icon { margin: 0 var(--td-comp-margin-xs); width: var(--td-comp-size-m); height: var(--td-comp-size-m); display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; border-radius: var(--td-radius-default); -webkit-transition: 0.2s; transition: 0.2s; } .oneid-image-viewer__utils .oneid-image-viewer__utils-content .oneid-image-viewer__modal-icon:hover { background-color: var(--td-bg-color-container-hover); } .oneid-image-viewer__utils .oneid-image-viewer__utils-content .oneid-image-viewer__utils-scale { width: var(--td-comp-size-xl); text-align: center; cursor: inherit; } .oneid-image-viewer__utils .oneid-image-viewer__utils-content .oneid-image-viewer__utils-scale:hover { background-color: var(--td-bg-color-container); } .oneid-image-viewer-mini__footer .oneid-image-viewer__utils { position: inherit; } .oneid-image-viewer-mini__content { max-width: min(90vw, 1000px); max-height: min(90vh, 800px); } @keyframes modal-image-show { 0% { -webkit-transform: scale(0); transform: scale(0); } to { -webkit-transform: scale(1); transform: scale(1); } } .oneid-image-viewer-mini__content .oneid-image-viewer__modal-pic .oneid-image-viewer__modal-box { width: 100%; height: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .oneid-image-viewer-mini__content .oneid-image-viewer__modal-pic .oneid-image-viewer__modal-box .oneid-image-viewer__modal-image { display: block; max-width: min(80vw, 800px); max-height: min(80vh, 600px); -webkit-transition: all 0.2s ease; transition: all 0.2s ease; -webkit-transform: rotate(0deg); transform: rotate(0deg); -o-object-fit: contain; object-fit: contain; } .oneid-image-viewer__dialog.oneid-dialog__ctx--fixed { z-index: 3000; } .oneid-image-viewer__dialog .oneid-dialog__header { padding: 0 var(--td-comp-paddingLR-s); pointer-events: none; } .oneid-image-viewer__dialog .oneid-dialog__header .oneid-image-viewer__dialog-title { pointer-events: all; } .oneid-image-viewer__dialog .oneid-dialog__header .oneid-dialog__close { pointer-events: auto; } .oneid-image-viewer__dialog .oneid-dialog { border-color: var(--td-component-border); overflow: hidden; padding: 0; -webkit-box-shadow: var(--td-shadow-3); box-shadow: var(--td-shadow-3); } .oneid-image-viewer__dialog .oneid-dialog__header { height: 40px; width: 100%; font-size: var(--td-font-size-body-medium); background-color: var(--td-bg-color-secondarycontainer); } .oneid-image-viewer__dialog .oneid-dialog__header-content { margin-left: 32px; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .oneid-image-viewer__dialog .oneid-dialog__close:hover { background-color: var(--td-bg-color-secondarycontainer-hover); } .range-input-disabled.oneid-is-disabled { color: var(--td-text-color-disabled); background-color: var(--td-bg-color-component-disabled); } .range-input-disabled.oneid-is-disabled:hover { border-color: var(--td-border-level-2-color); } .range-input-disabled.oneid-is-disabled .oneid-range-input__inner { cursor: not-allowed; color: var(--td-text-color-disabled); } .range-input-disabled.oneid-is-disabled .oneid-range-input__inner::-webkit-input-placeholder { color: var(--td-text-color-disabled); } .range-input-disabled.oneid-is-disabled .oneid-range-input__inner::-moz-placeholder { color: var(--td-text-color-disabled); } .range-input-disabled.oneid-is-disabled .oneid-range-input__inner:-ms-input-placeholder { color: var(--td-text-color-disabled); } .range-input-disabled.oneid-is-disabled .oneid-range-input__inner::-ms-input-placeholder { color: var(--td-text-color-disabled); } .range-input-disabled.oneid-is-disabled .oneid-range-input__inner::placeholder { color: var(--td-text-color-disabled); } .range-input-disabled.oneid-is-disabled > .oneid-range-input__prefix .oneid-icon, .range-input-disabled.oneid-is-disabled > .oneid-range-input__suffix .oneid-icon { color: var(--td-text-color-disabled); } .oneid-range-input { margin: 0; padding: 0; list-style: none; width: 100%; position: relative; font: var(--td-font-body-medium); height: var(--td-comp-size-m); border-width: 1px; border-style: solid; border-radius: var(--td-radius-default); border-color: var(--td-border-level-2-color); padding: var(--td-comp-paddingTB-xs) var(--td-comp-paddingLR-s) var(--td-comp-paddingTB-xs) var(--td-comp-paddingLR-s); background-color: var(--td-bg-color-specialcomponent); color: var(--td-text-color-primary); font-size: var(--td-font-body-medium); -webkit-box-sizing: border-box; box-sizing: border-box; -webkit-transition: all cubic-bezier(0.38, 0, 0.24, 1) 0.2s; transition: all cubic-bezier(0.38, 0, 0.24, 1) 0.2s; display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; gap: 4px; } .oneid-range-input:hover { border-color: var(--td-brand-color); } .oneid-range-input--borderless:not(.oneid-is-focused) { border-color: transparent; -webkit-transition: all cubic-bezier(0.38, 0, 0.24, 1) 0.2s; transition: all cubic-bezier(0.38, 0, 0.24, 1) 0.2s; } .oneid-range-input--borderless:not(.oneid-is-focused):hover { border-color: var(--td-component-border); cursor: pointer; } .oneid-range-input--borderless:not(.oneid-is-focused).oneid-is-disabled { border: none; background-color: var(--td-bg-color-component-disabled); } .oneid-range-input.oneid-is-focused { z-index: 1; border-color: var(--td-brand-color); -webkit-box-shadow: 0 0 0 2px var(--td-brand-color-focus); box-shadow: 0 0 0 2px var(--td-brand-color-focus); } .oneid-range-input.oneid-is-success { border-color: var(--td-success-color); } .oneid-range-input.oneid-is-success:focus { -webkit-box-shadow: 0 0 0 2px var(--td-success-color-focus); box-shadow: 0 0 0 2px var(--td-success-color-focus); } .oneid-range-input.oneid-is-success.oneid-range-input--focused { -webkit-box-shadow: 0 0 0 2px var(--td-success-color-focus); box-shadow: 0 0 0 2px var(--td-success-color-focus); } .oneid-range-input.oneid-is-success > .oneid-range-input__extra { color: var(--td-success-color); } .oneid-range-input.oneid-is-success > .oneid-range-input__tips { color: var(--td-success-color); font-size: var(--td-font-size-body-small); margin-left: calc(-1 * var(--td-comp-paddingLR-xs)); } .oneid-range-input.oneid-is-warning { border-color: var(--td-warning-color); } .oneid-range-input.oneid-is-warning:focus { -webkit-box-shadow: 0 0 0 2px var(--td-warning-color-focus); box-shadow: 0 0 0 2px var(--td-warning-color-focus); } .oneid-range-input.oneid-is-warning.oneid-range-input--focused { -webkit-box-shadow: 0 0 0 2px var(--td-warning-color-focus); box-shadow: 0 0 0 2px var(--td-warning-color-focus); } .oneid-range-input.oneid-is-warning > .oneid-range-input__extra { color: var(--td-warning-color); } .oneid-range-input.oneid-is-warning > .oneid-range-input__tips { color: var(--td-warning-color); font-size: var(--td-font-size-body-small); margin-left: calc(-1 * var(--td-comp-paddingLR-xs)); } .oneid-range-input.oneid-is-error { border-color: var(--td-error-color); } .oneid-range-input.oneid-is-error:focus { -webkit-box-shadow: 0 0 0 2px var(--td-error-color-focus); box-shadow: 0 0 0 2px var(--td-error-color-focus); } .oneid-range-input.oneid-is-error.oneid-range-input--focused { -webkit-box-shadow: 0 0 0 2px var(--td-error-color-focus); box-shadow: 0 0 0 2px var(--td-error-color-focus); } .oneid-range-input.oneid-is-error > .oneid-range-input__extra { color: var(--td-error-color); } .oneid-range-input.oneid-is-error > .oneid-range-input__tips { color: var(--td-error-color); font-size: var(--td-font-size-body-small); margin-left: calc(-1 * var(--td-comp-paddingLR-xs)); } .oneid-range-input.oneid-is-disabled { color: var(--td-text-color-disabled); background-color: var(--td-bg-color-component-disabled); } .oneid-range-input.oneid-is-disabled:hover { border-color: var(--td-border-level-2-color); } .oneid-range-input.oneid-is-disabled .oneid-range-input__inner { cursor: not-allowed; color: var(--td-text-color-disabled); } .oneid-range-input.oneid-is-disabled .oneid-range-input__inner::-webkit-input-placeholder { color: var(--td-text-color-disabled); } .oneid-range-input.oneid-is-disabled .oneid-range-input__inner::-moz-placeholder { color: var(--td-text-color-disabled); } .oneid-range-input.oneid-is-disabled .oneid-range-input__inner:-ms-input-placeholder { color: var(--td-text-color-disabled); } .oneid-range-input.oneid-is-disabled .oneid-range-input__inner::-ms-input-placeholder { color: var(--td-text-color-disabled); } .oneid-range-input.oneid-is-disabled .oneid-range-input__inner::placeholder { color: var(--td-text-color-disabled); } .oneid-range-input.oneid-is-disabled > .oneid-range-input__prefix .oneid-icon, .oneid-range-input.oneid-is-disabled > .oneid-range-input__suffix .oneid-icon { color: var(--td-text-color-disabled); } .oneid-range-input.oneid-range-input--prefix .oneid-range-input__prefix { height: 100%; text-align: center; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; font-size: var(--td-font-size-body-medium); } .oneid-range-input.oneid-range-input--suffix .oneid-range-input__suffix { height: 100%; text-align: center; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; font-size: var(--td-font-size-body-medium); } .oneid-range-input.oneid-size-l { height: var(--td-comp-size-xl); font: var(--td-font-body-large); padding-top: var(--td-comp-paddingTB-xs); padding-bottom: var(--td-comp-paddingTB-xs); } .oneid-range-input.oneid-size-l .oneid-input { padding: 0 var(--td-comp-margin-s); } .oneid-range-input.oneid-size-s { padding: var(--td-comp-paddingTB-xxs) var(--td-comp-margin-xs); height: var(--td-comp-size-xs); font: var(--td-font-body-small); } .oneid-range-input__inner { height: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: var(--td-comp-margin-s); } .oneid-range-input__inner .oneid-input__wrap { height: 100%; border-radius: var(--td-radius-small); } .oneid-range-input__inner > .oneid-range-input__prefix { -ms-flex-negative: 0; flex-shrink: 0; } .oneid-range-input__inner .oneid-input { padding: 0 var(--td-comp-paddingLR-xs); height: 100%; border: 0; -webkit-box-shadow: none; box-shadow: none; font-size: inherit; border-radius: var(--td-radius-small); } .oneid-range-input__inner .oneid-input:hover { background-color: var(--td-bg-color-container-hover); } .oneid-range-input__inner .oneid-input__inner { width: 100%; height: 100%; line-height: 1; } .oneid-range-input__inner .oneid-input.oneid-is-focused { background-color: var(--td-bg-color-component); } .oneid-range-input__extra { font: var(--td-font-body-small); color: var(--td-text-color-placeholder); } .oneid-range-input__status { position: absolute; right: calc(0px - var(--td-comp-margin-xxxl)); top: 0; } .oneid-range-input.oneid-range-input--suffix .oneid-input__clear { opacity: 0; visibility: hidden; -webkit-transition: all cubic-bezier(0.38, 0, 0.24, 1) 0.2s; transition: all cubic-bezier(0.38, 0, 0.24, 1) 0.2s; } .oneid-range-input.oneid-range-input--suffix:hover .oneid-input__clear { opacity: 1; visibility: visible; } .oneid-range-input .oneid-range-input__suffix-clear { cursor: pointer; } .oneid-range-input__prefix > .oneid-icon, .oneid-range-input__suffix > .oneid-icon { -webkit-transition: color 0.2s linear; transition: color 0.2s linear; font-size: 16px; color: var(--td-text-color-placeholder); -ms-flex-negative: 0; flex-shrink: 0; } .oneid-range-input-popup { width: 100%; } .oneid-range-input-popup--visible .oneid-range-input { border-color: var(--td-brand-color); -webkit-box-shadow: 0 0 0 2px var(--td-brand-color-focus); box-shadow: 0 0 0 2px var(--td-brand-color-focus); } .oneid-range-input-popup--visible .oneid-range-input .oneid-icon-time, .oneid-range-input-popup--visible .oneid-range-input .oneid-icon-calendar { color: var(--td-brand-color); } .oneid-range-input-popup--visible .oneid-range-input .oneid-input.oneid-is-focused { background-color: var(--td-bg-color-component); } .flex-center { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .oneid-time-picker, .oneid-time-range-picker { width: 240px; background: transparent; display: inline-block; position: relative; font: var(--td-font-body-medium); color: var(--td-text-color-primary); -webkit-box-sizing: border-box; box-sizing: border-box; margin: 0; padding: 0; list-style: none; } .oneid-time-picker.oneid-is-disabled, .oneid-time-range-picker.oneid-is-disabled { cursor: not-allowed; } .oneid-time-picker > *:focus, .oneid-time-range-picker > *:focus, .oneid-time-picker > *:active, .oneid-time-range-picker > *:active { outline: 0; } .oneid-time-picker__group, .oneid-time-range-picker__group { position: relative; } .oneid-time-picker__group.active, .oneid-time-range-picker__group.active { border: 1px solid var(--td-brand-color); -webkit-box-shadow: 0 0 2px 2px var(--td-brand-color-focus); box-shadow: 0 0 2px 2px var(--td-brand-color-focus); } .oneid-time-picker__group.active + .oneid-time-picker__icon-wrap > .oneid-time-picker__icon-clear, .oneid-time-range-picker__group.active + .oneid-time-picker__icon-wrap > .oneid-time-picker__icon-clear { display: block; } .oneid-time-picker__group-text, .oneid-time-range-picker__group-text { color: var(--td-text-color-primary); } .oneid-time-picker__group input, .oneid-time-range-picker__group input { cursor: pointer; } .oneid-time-range-picker { width: auto; } .oneid-time-picker__panel { width: 280px; background: transparent; border-radius: var(--td-radius-default); display: inline-block; position: relative; font: var(--td-font-body-medium); --timePickerPanelOffsetTop: 15; --timePickerPanelOffsetBottom: 21; } .oneid-time-picker__panel-body { width: 100%; height: calc((var(--td-comp-size-xs) + var(--td-size-3)) * 7 + var(--td-size-3)); position: relative; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .oneid-time-picker__panel-body-active-mask { position: absolute; top: 50%; height: var(--td-comp-size-xs); width: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; } .oneid-time-picker__panel-body-active-mask > div { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; -webkit-transform: translateY(calc(0px - (var(--td-comp-size-xs) + var(--td-size-3)) / 2)); transform: translateY(calc(0px - (var(--td-comp-size-xs) + var(--td-size-3)) / 2)); height: var(--td-comp-size-xs); background-color: var(--td-brand-color-light); margin: var(--td-size-3) var(--td-comp-margin-xs); border-radius: var(--td-radius-default); } .oneid-time-picker__panel-body-scroll { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; height: 100%; overflow-y: scroll; text-align: center; position: relative; list-style: none; padding: 0; margin: 0; } .oneid-time-picker__panel-body-scroll::-webkit-scrollbar { width: 0; } .oneid-time-picker__panel-body-scroll::after, .oneid-time-picker__panel-body-scroll::before { display: block; height: 50%; content: ""; } .oneid-time-picker__panel-body-scroll::before { height: calc(50% - var(--timePickerPanelOffsetTop, 0) * 1px); } .oneid-time-picker__panel-body-scroll::after { height: calc(50% - var(--timePickerPanelOffsetBottom, 0) * 1px); } .oneid-time-picker__panel-body-scroll:last-child { border-right: 0; } .oneid-time-picker__panel-body-scroll-item { height: var(--td-comp-size-xs); font: var(--td-font-body-medium); line-height: var(--td-comp-size-xs); color: var(--td-text-color-secondary); margin: var(--td-size-3) var(--td-comp-margin-xs); border-radius: var(--td-radius-default); text-align: center; cursor: pointer; -webkit-transition: 0.2s linear; transition: 0.2s linear; } .oneid-time-picker__panel-body-scroll-item:not(.oneid-time-picker__panel-body-scroll-item.oneid-is-current):not(.oneid-time-picker__panel-body-scroll-item.oneid-is-disabled):hover { color: var(--td-text-color-primary); } .oneid-time-picker__panel-body-scroll-item:not(.oneid-time-picker__panel-body-scroll-item.oneid-is-current):not(.oneid-time-picker__panel-body-scroll-item.oneid-is-disabled):active { background-color: var(--td-bg-color-container-hover); } .oneid-time-picker__panel-body-scroll-item.oneid-is-disabled { color: var(--td-text-color-disabled); cursor: not-allowed; } .oneid-time-picker__panel-body-scroll-item.oneid-is-hidden { display: none; cursor: not-allowed; } .oneid-time-picker__panel-body-scroll-item.oneid-is-current { color: var(--td-brand-color); } .oneid-time-picker__panel-section-body { padding: var(--td-pop-padding-xl) calc(var(--td-pop-padding-xl) - var(--td-comp-margin-xs)); } .oneid-time-picker__panel-section-footer { width: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-orient: horizontal; -webkit-box-direction: reverse; -ms-flex-direction: row-reverse; flex-direction: row-reverse; -webkit-box-align: center; -ms-flex-align: center; align-items: center; background-color: transparent; position: relative; border-top: 1px solid var(--td-border-level-1-color); -webkit-box-sizing: border-box; box-sizing: border-box; padding: var(--td-pop-padding-xl); } .oneid-form { color: var(--td-text-color-primary); -webkit-box-sizing: border-box; box-sizing: border-box; margin: 0; padding: 0; list-style: none; font: var(--td-font-body-medium); } .oneid-form:not(.oneid-form-inline) .oneid-form__item:last-of-type { margin: 0; } .oneid-form__item { margin-bottom: var(--td-comp-margin-xxl); } .oneid-form__item.oneid-form__item-with-help { margin-bottom: var(--td-comp-margin-xs); } .oneid-form__item.oneid-form__item-with-extra { margin-bottom: var(--td-comp-margin-xxl); } .oneid-form__label { float: left; padding-right: var(--td-comp-paddingLR-xl); vertical-align: middle; line-height: var(--td-comp-margin-xxxl); color: var(--td-text-color-primary); -webkit-box-sizing: border-box; box-sizing: border-box; white-space: nowrap; } .oneid-form__label--top { float: none; min-height: var(--td-comp-margin-xxxl); } .oneid-form__label--left { text-align: left; } .oneid-form__label--right { text-align: right; } .oneid-form__label--required:not(.oneid-form__label--required-right) label::before { display: inline-block; margin-right: var(--td-comp-margin-xs); color: var(--td-error-color); line-height: var(--td-line-height-body-medium); content: "*"; } .oneid-form__label--required-right label::after { display: inline-block; margin-left: var(--td-comp-margin-xs); color: var(--td-error-color); line-height: var(--td-line-height-body-medium); content: "*"; } .oneid-form__label--colon label::after { content: ":"; position: relative; margin: 0 var(--td-comp-margin-xxs); } .oneid-form__controls { min-height: var(--td-comp-margin-xxxl); display: flow-root; position: relative; } .oneid-form__controls-content { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; min-height: var(--td-comp-margin-xxxl); } .oneid-form__controls .oneid-form__item { margin-bottom: 0; margin-right: var(--td-comp-margin-xxl); } .oneid-form__controls.oneid-is-success .oneid-form__status .oneid-icon { color: var(--td-success-color); } .oneid-form__controls.oneid-is-success .oneid-input__extra { color: var(--td-success-color); } .oneid-form__controls.oneid-form--success-border.oneid-is-success .oneid-input__extra { color: var(--td-success-color); } .oneid-form__controls.oneid-form--success-border.oneid-is-success .oneid-form__controls-content .oneid-input, .oneid-form__controls.oneid-form--success-border.oneid-is-success .oneid-form__controls-content .oneid-select, .oneid-form__controls.oneid-form--success-border.oneid-is-success .oneid-form__controls-content .oneid-radio-button, .oneid-form__controls.oneid-form--success-border.oneid-is-success .oneid-form__controls-content .oneid-cascader, .oneid-form__controls.oneid-form--success-border.oneid-is-success .oneid-form__controls-content .oneid-range-input, .oneid-form__controls.oneid-form--success-border.oneid-is-success .oneid-form__controls-content .oneid-textarea__inner { border-color: var(--td-success-color); } .oneid-form__controls.oneid-form--success-border.oneid-is-success .oneid-form__controls-content .oneid-input--focused, .oneid-form__controls.oneid-form--success-border.oneid-is-success .oneid-form__controls-content .oneid-select--focused, .oneid-form__controls.oneid-form--success-border.oneid-is-success .oneid-form__controls-content .oneid-radio-button--focused, .oneid-form__controls.oneid-form--success-border.oneid-is-success .oneid-form__controls-content .oneid-cascader--focused, .oneid-form__controls.oneid-form--success-border.oneid-is-success .oneid-form__controls-content .oneid-range-input--focused, .oneid-form__controls.oneid-form--success-border.oneid-is-success .oneid-form__controls-content .oneid-textarea__inner--focused { -webkit-box-shadow: 0 0 0 2px var(--td-success-color-focus); box-shadow: 0 0 0 2px var(--td-success-color-focus); } .oneid-form__controls.oneid-form--success-border.oneid-is-success .oneid-form__controls-content .oneid-input .oneid-icon, .oneid-form__controls.oneid-form--success-border.oneid-is-success .oneid-form__controls-content .oneid-select .oneid-icon, .oneid-form__controls.oneid-form--success-border.oneid-is-success .oneid-form__controls-content .oneid-radio-button .oneid-icon, .oneid-form__controls.oneid-form--success-border.oneid-is-success .oneid-form__controls-content .oneid-cascader .oneid-icon, .oneid-form__controls.oneid-form--success-border.oneid-is-success .oneid-form__controls-content .oneid-range-input .oneid-icon, .oneid-form__controls.oneid-form--success-border.oneid-is-success .oneid-form__controls-content .oneid-textarea__inner .oneid-icon, .oneid-form__controls.oneid-form--success-border.oneid-is-success .oneid-form__controls-content .oneid-input .oneid-fake-arrow, .oneid-form__controls.oneid-form--success-border.oneid-is-success .oneid-form__controls-content .oneid-select .oneid-fake-arrow, .oneid-form__controls.oneid-form--success-border.oneid-is-success .oneid-form__controls-content .oneid-radio-button .oneid-fake-arrow, .oneid-form__controls.oneid-form--success-border.oneid-is-success .oneid-form__controls-content .oneid-cascader .oneid-fake-arrow, .oneid-form__controls.oneid-form--success-border.oneid-is-success .oneid-form__controls-content .oneid-range-input .oneid-fake-arrow, .oneid-form__controls.oneid-form--success-border.oneid-is-success .oneid-form__controls-content .oneid-textarea__inner .oneid-fake-arrow { color: var(--td-success-color); } .oneid-form__controls.oneid-form--success-border.oneid-is-success .oneid-form__controls-content .oneid-select > .oneid-select__right-icon:not(.oneid-select__right-icon-clear) { color: var(--td-success-color); } .oneid-form__controls.oneid-form--success-border.oneid-is-success .oneid-form__controls-content .oneid-radio-button:last-child { border-right-color: var(--td-success-color); } .oneid-form__controls.oneid-form--success-border.oneid-is-success .oneid-form__controls-content .oneid-textarea__inner.oneid-is-focused { -webkit-box-shadow: 0 0 0 2px var(--td-success-color-focus); box-shadow: 0 0 0 2px var(--td-success-color-focus); } .oneid-form__controls.oneid-form--success-border.oneid-is-success .oneid-form__controls-content .oneid-cascader.oneid-is-active, .oneid-form__controls.oneid-form--success-border.oneid-is-success .oneid-form__controls-content .oneid-select.oneid-is-active { -webkit-box-shadow: 0 0 0 2px var(--td-success-color-focus); box-shadow: 0 0 0 2px var(--td-success-color-focus); } .oneid-form__controls.oneid-form--success-border.oneid-is-success .oneid-form__controls-content .oneid-form__status .oneid-icon { color: var(--td-success-color); } .oneid-form__status { display: -webkit-box; display: -ms-flexbox; display: flex; margin: 0 var(--td-comp-margin-s); } .oneid-form__status > .oneid-icon { font-size: var(--td-comp-size-xxxs); } .oneid-form__status-without-icon { width: 25px; height: 25px; } .oneid-form__status button { width: var(--td-comp-size-m); } .oneid-form__status button + button { margin-left: var(--td-comp-margin-s); } .oneid-form-inline { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; row-gap: var(--td-comp-margin-l); } .oneid-form-inline .oneid-form__item { margin: 0; min-width: 200px; display: inline-block; margin-right: var(--td-comp-margin-xxl); } .oneid-input__extra, .oneid-input__help { margin: 0; width: 100%; height: auto; min-height: var(--td-line-height-body-small); font: var(--td-font-body-small); color: var(--td-text-color-placeholder); } .oneid-input__extra { position: absolute; bottom: calc(0px - var(--td-line-height-body-small)); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .oneid-is-warning .oneid-input__extra { color: var(--td-warning-color); } .oneid-is-warning .oneid-form__controls-content .oneid-input, .oneid-is-warning .oneid-form__controls-content .oneid-select, .oneid-is-warning .oneid-form__controls-content .oneid-radio-button, .oneid-is-warning .oneid-form__controls-content .oneid-cascader, .oneid-is-warning .oneid-form__controls-content .oneid-range-input, .oneid-is-warning .oneid-form__controls-content .oneid-textarea__inner { border-color: var(--td-warning-color); } .oneid-is-warning .oneid-form__controls-content .oneid-input--focused, .oneid-is-warning .oneid-form__controls-content .oneid-select--focused, .oneid-is-warning .oneid-form__controls-content .oneid-radio-button--focused, .oneid-is-warning .oneid-form__controls-content .oneid-cascader--focused, .oneid-is-warning .oneid-form__controls-content .oneid-range-input--focused, .oneid-is-warning .oneid-form__controls-content .oneid-textarea__inner--focused { -webkit-box-shadow: 0 0 0 2px var(--td-warning-color-focus); box-shadow: 0 0 0 2px var(--td-warning-color-focus); } .oneid-is-warning .oneid-form__controls-content .oneid-input .oneid-icon, .oneid-is-warning .oneid-form__controls-content .oneid-select .oneid-icon, .oneid-is-warning .oneid-form__controls-content .oneid-radio-button .oneid-icon, .oneid-is-warning .oneid-form__controls-content .oneid-cascader .oneid-icon, .oneid-is-warning .oneid-form__controls-content .oneid-range-input .oneid-icon, .oneid-is-warning .oneid-form__controls-content .oneid-textarea__inner .oneid-icon, .oneid-is-warning .oneid-form__controls-content .oneid-input .oneid-fake-arrow, .oneid-is-warning .oneid-form__controls-content .oneid-select .oneid-fake-arrow, .oneid-is-warning .oneid-form__controls-content .oneid-radio-button .oneid-fake-arrow, .oneid-is-warning .oneid-form__controls-content .oneid-cascader .oneid-fake-arrow, .oneid-is-warning .oneid-form__controls-content .oneid-range-input .oneid-fake-arrow, .oneid-is-warning .oneid-form__controls-content .oneid-textarea__inner .oneid-fake-arrow { color: var(--td-warning-color); } .oneid-is-warning .oneid-form__controls-content .oneid-select > .oneid-select__right-icon:not(.oneid-select__right-icon-clear) { color: var(--td-warning-color); } .oneid-is-warning .oneid-form__controls-content .oneid-radio-button:last-child { border-right-color: var(--td-warning-color); } .oneid-is-warning .oneid-form__controls-content .oneid-textarea__inner.oneid-is-focused { -webkit-box-shadow: 0 0 0 2px var(--td-warning-color-focus); box-shadow: 0 0 0 2px var(--td-warning-color-focus); } .oneid-is-warning .oneid-form__controls-content .oneid-cascader.oneid-is-active, .oneid-is-warning .oneid-form__controls-content .oneid-select.oneid-is-active { -webkit-box-shadow: 0 0 0 2px var(--td-warning-color-focus); box-shadow: 0 0 0 2px var(--td-warning-color-focus); } .oneid-is-warning .oneid-form__controls-content .oneid-form__status .oneid-icon { color: var(--td-warning-color); } .oneid-is-error .oneid-input__extra { color: var(--td-error-color); } .oneid-is-error .oneid-form__controls-content .oneid-input, .oneid-is-error .oneid-form__controls-content .oneid-select, .oneid-is-error .oneid-form__controls-content .oneid-radio-button, .oneid-is-error .oneid-form__controls-content .oneid-cascader, .oneid-is-error .oneid-form__controls-content .oneid-range-input, .oneid-is-error .oneid-form__controls-content .oneid-textarea__inner { border-color: var(--td-error-color); } .oneid-is-error .oneid-form__controls-content .oneid-input--focused, .oneid-is-error .oneid-form__controls-content .oneid-select--focused, .oneid-is-error .oneid-form__controls-content .oneid-radio-button--focused, .oneid-is-error .oneid-form__controls-content .oneid-cascader--focused, .oneid-is-error .oneid-form__controls-content .oneid-range-input--focused, .oneid-is-error .oneid-form__controls-content .oneid-textarea__inner--focused { -webkit-box-shadow: 0 0 0 2px var(--td-error-color-focus); box-shadow: 0 0 0 2px var(--td-error-color-focus); } .oneid-is-error .oneid-form__controls-content .oneid-input .oneid-icon, .oneid-is-error .oneid-form__controls-content .oneid-select .oneid-icon, .oneid-is-error .oneid-form__controls-content .oneid-radio-button .oneid-icon, .oneid-is-error .oneid-form__controls-content .oneid-cascader .oneid-icon, .oneid-is-error .oneid-form__controls-content .oneid-range-input .oneid-icon, .oneid-is-error .oneid-form__controls-content .oneid-textarea__inner .oneid-icon, .oneid-is-error .oneid-form__controls-content .oneid-input .oneid-fake-arrow, .oneid-is-error .oneid-form__controls-content .oneid-select .oneid-fake-arrow, .oneid-is-error .oneid-form__controls-content .oneid-radio-button .oneid-fake-arrow, .oneid-is-error .oneid-form__controls-content .oneid-cascader .oneid-fake-arrow, .oneid-is-error .oneid-form__controls-content .oneid-range-input .oneid-fake-arrow, .oneid-is-error .oneid-form__controls-content .oneid-textarea__inner .oneid-fake-arrow { color: var(--td-error-color); } .oneid-is-error .oneid-form__controls-content .oneid-select > .oneid-select__right-icon:not(.oneid-select__right-icon-clear) { color: var(--td-error-color); } .oneid-is-error .oneid-form__controls-content .oneid-radio-button:last-child { border-right-color: var(--td-error-color); } .oneid-is-error .oneid-form__controls-content .oneid-textarea__inner.oneid-is-focused { -webkit-box-shadow: 0 0 0 2px var(--td-error-color-focus); box-shadow: 0 0 0 2px var(--td-error-color-focus); } .oneid-is-error .oneid-form__controls-content .oneid-cascader.oneid-is-active, .oneid-is-error .oneid-form__controls-content .oneid-select.oneid-is-active { -webkit-box-shadow: 0 0 0 2px var(--td-error-color-focus); box-shadow: 0 0 0 2px var(--td-error-color-focus); } .oneid-is-error .oneid-form__controls-content .oneid-form__status .oneid-icon { color: var(--td-error-color); } /** * 颜色 */ /** * 尺寸 */ /** * 字体 */ /** * 动画 */ /** * 间距 */ /** * 位置 */ /** * 边框弧度 */ .oneid-drawer-fade-enter, .oneid-drawer-fade-appear { opacity: 0; -webkit-animation-duration: 0.2s; animation-duration: 0.2s; -webkit-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-timing-function: linear; animation-timing-function: linear; -webkit-animation-play-state: paused; animation-play-state: paused; } .oneid-drawer-fade-exit { -webkit-animation-duration: 0.2s; animation-duration: 0.2s; -webkit-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-timing-function: linear; animation-timing-function: linear; -webkit-animation-play-state: paused; animation-play-state: paused; } .oneid-drawer-fade-enter.oneid-drawer-fade-enter-active, .oneid-drawer-fade-enter.oneid-drawer-fade-enter-active.oneid-drawer-fade-enter-to, .oneid-drawer-fade-appear.oneid-drawer-fade-appear-active, .oneid-drawer-fade-appear.oneid-drawer-fade-appear-active.oneid-drawer-fade-appear-to { -webkit-animation-name: tDrawerFadeIn; animation-name: tDrawerFadeIn; -webkit-animation-duration: 0.2s; animation-duration: 0.2s; -webkit-animation-play-state: running; animation-play-state: running; } .oneid-drawer-fade-exit.oneid-drawer-fade-exit-active, .oneid-drawer-fade-leave-active.oneid-drawer-fade-leave-to { -webkit-animation-name: tDrawerFadeOut; animation-name: tDrawerFadeOut; -webkit-animation-duration: 0.2s; animation-duration: 0.2s; -webkit-animation-play-state: running; animation-play-state: running; } @-webkit-keyframes tDrawerFadeIn { 0% { opacity: 0; } 100% { opacity: 1; } } @keyframes tDrawerFadeIn { 0% { opacity: 0; } 100% { opacity: 1; } } @-webkit-keyframes tDrawerFadeOut { 0% { opacity: 1; } 100% { opacity: 0; } } @keyframes tDrawerFadeOut { 0% { opacity: 1; } 100% { opacity: 0; } } .oneid-drawer { font: var(--td-font-body-medium); color: var(--td-text-color-primary); -webkit-box-sizing: border-box; box-sizing: border-box; margin: 0; padding: 0; list-style: none; position: fixed; z-index: 1500; width: 100%; height: 100%; pointer-events: none; overflow: hidden; outline: none; } .oneid-drawer--lock { overflow: hidden; } .oneid-drawer--attach { position: absolute; } .oneid-drawer--left, .oneid-drawer--right { top: 0; } .oneid-drawer--left { left: 0; } .oneid-drawer--right { right: 0; } .oneid-drawer--top, .oneid-drawer--bottom { left: 0; } .oneid-drawer--top { top: 0; } .oneid-drawer--bottom { bottom: 0; } .oneid-drawer__mask { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: var(--td-mask-active); -webkit-transition: opacity 0.2s cubic-bezier(0.38, 0, 0.24, 1); transition: opacity 0.2s cubic-bezier(0.38, 0, 0.24, 1); opacity: 0; } .oneid-drawer__content-wrapper { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; background: var(--td-bg-color-container); width: 16px; height: 16px; font-size: var(--td-font-body-medium); color: var(--td-text-color-secondary); -webkit-box-shadow: var(--td-shadow-2); box-shadow: var(--td-shadow-2); overflow: hidden; pointer-events: auto; -webkit-transition: visibility 0.28s cubic-bezier(0.38, 0, 0.24, 1), -webkit-transform 0.28s cubic-bezier(0.38, 0, 0.24, 1); transition: visibility 0.28s cubic-bezier(0.38, 0, 0.24, 1), -webkit-transform 0.28s cubic-bezier(0.38, 0, 0.24, 1); transition: transform 0.28s cubic-bezier(0.38, 0, 0.24, 1), visibility 0.28s cubic-bezier(0.38, 0, 0.24, 1); transition: transform 0.28s cubic-bezier(0.38, 0, 0.24, 1), visibility 0.28s cubic-bezier(0.38, 0, 0.24, 1), -webkit-transform 0.28s cubic-bezier(0.38, 0, 0.24, 1); position: relative; } .oneid-drawer .oneid-drawer__content-wrapper { position: absolute; width: 100%; height: 100%; visibility: hidden; } .oneid-drawer .oneid-drawer__content-wrapper--left, .oneid-drawer .oneid-drawer__content-wrapper--right { top: 0; } .oneid-drawer .oneid-drawer__content-wrapper--left { left: 0; -webkit-transform: translateX(-100%); transform: translateX(-100%); } .oneid-drawer .oneid-drawer__content-wrapper--right { right: 0; -webkit-transform: translateX(100%); transform: translateX(100%); } .oneid-drawer .oneid-drawer__content-wrapper--top, .oneid-drawer .oneid-drawer__content-wrapper--bottom { left: 0; } .oneid-drawer .oneid-drawer__content-wrapper--top { top: 0; -webkit-transform: translateY(-100%); transform: translateY(-100%); } .oneid-drawer .oneid-drawer__content-wrapper--bottom { bottom: 0; -webkit-transform: translateY(100%); transform: translateY(100%); } .oneid-drawer__header { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; min-height: var(--td-comp-size-xxxl); padding: 0 var(--td-comp-paddingLR-l); font: var(--td-font-title-medium); color: var(--td-text-color-primary); border-bottom: 1px solid var(--td-border-level-1-color); border-radius: var(--td-radius-small) var(--td-radius-small) 0 0; -webkit-box-sizing: border-box; box-sizing: border-box; } .oneid-drawer__body { padding: var(--td-comp-paddingTB-l) var(--td-comp-paddingLR-l); overflow: auto; -webkit-box-flex: 1; -ms-flex: 1; flex: 1; } .oneid-drawer__footer { width: 100%; padding: var(--td-comp-paddingTB-l) var(--td-comp-paddingLR-l); text-align: left; border-top: 1px solid var(--td-border-level-1-color); background-color: var(--td-bg-color-container); -webkit-box-sizing: border-box; box-sizing: border-box; } .oneid-drawer__footer .oneid-button { margin-left: var(--td-comp-margin-s); } .oneid-drawer__footer .oneid-button:first-child { margin-left: 0; } .oneid-drawer__close-btn { position: absolute; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; width: var(--td-comp-size-xs); height: var(--td-comp-size-xs); top: calc((var(--td-comp-size-xxxl) - var(--td-comp-size-xs)) / 2); right: var(--td-comp-margin-s); color: var(--td-text-color-primary); background-color: var(--td-bg-color-container); border-radius: var(--td-radius-default); cursor: pointer; -webkit-transition: background-color 0.2s; transition: background-color 0.2s; } .oneid-drawer__close-btn:hover { background-color: var(--td-bg-color-container-hover); } .oneid-drawer__close-btn:active { background-color: var(--td-bg-color-container-active); } .oneid-drawer__close-btn .oneid-icon { font-size: calc(var(--td-font-size-body-medium) + 2px); vertical-align: unset; } .oneid-drawer--open { width: 100%; height: 100%; pointer-events: auto; } .oneid-drawer--open > .oneid-drawer__content-wrapper { visibility: visible; } .oneid-drawer--open > .oneid-drawer__mask { opacity: 1; width: 100%; height: 100%; } .oneid-drawer--without-mask { pointer-events: none; } [tabindex="-1"]:focus { outline: none !important; /* stylelint-disable-line */ } .oneid-progress { font: var(--td-font-body-medium); color: var(--td-text-color-primary); -webkit-box-sizing: border-box; box-sizing: border-box; margin: 0; padding: 0; list-style: none; } .oneid-progress__inner { position: relative; height: 100%; background: var(--td-brand-color); border-radius: var(--td-radius-round); -webkit-transition: all 0.2s cubic-bezier(0.38, 0, 0.24, 1); transition: all 0.2s cubic-bezier(0.38, 0, 0.24, 1); } .oneid-progress__info { margin-left: var(--td-comp-margin-s); color: var(--td-text-color-primary); white-space: nowrap; display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; } .oneid-progress__icon { font-size: calc(var(--td-font-size-body-medium) + 2px); } .oneid-progress__bar { width: 100%; height: var(--td-size-3); overflow: hidden; background: var(--td-bg-color-component); border-radius: var(--td-radius-round); } .oneid-progress--thin { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .oneid-progress--plump { height: var(--td-comp-size-xxs); border-radius: calc(var(--td-comp-size-xxs) / 2); display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .oneid-progress--plump .oneid-progress__info { font-size: var(--td-font-size-body-small); } .oneid-progress--over-ten .oneid-progress__info { position: absolute; top: 50%; z-index: 10; right: var(--td-comp-margin-s); color: var(--td-text-color-anti); -webkit-transform: translateY(-50%); transform: translateY(-50%); } .oneid-progress--under-ten .oneid-progress__info, .oneid-progress--under-ten .oneid-progress__inner { display: inline-block; } .oneid-progress--under-ten .oneid-progress__info { vertical-align: top; } .oneid-progress--circle { position: relative; } .oneid-progress--circle .oneid-progress__info { position: absolute; display: block; top: 50%; left: 50%; width: 100%; margin: 0; font-size: inherit; font-weight: 600; line-height: 1; text-align: center; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } .oneid-progress--circle .oneid-progress__circle-outer { stroke: var(--td-bg-color-component); } .oneid-progress--circle .oneid-progress__circle-inner { stroke: var(--td-brand-color); -webkit-transition: all 0.2s cubic-bezier(0.38, 0, 0.24, 1); transition: all 0.2s cubic-bezier(0.38, 0, 0.24, 1); } .oneid-progress--circle .oneid-progress__icon { font-size: 2.4em; } .oneid-progress--status--active .oneid-progress__inner::before { position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 1; content: ""; -webkit-animation: progress-active-animation 2s cubic-bezier(0.23, 0.99, 0.86, 0.2) infinite; animation: progress-active-animation 2s cubic-bezier(0.23, 0.99, 0.86, 0.2) infinite; background: var(--td-text-color-anti); opacity: 0.2; } .oneid-progress--status--success .oneid-progress__inner { background: var(--td-success-color); } .oneid-progress--status--success .oneid-progress__circle-inner { stroke: var(--td-success-color); } .oneid-progress--status--success .oneid-progress__icon { color: var(--td-success-color); } .oneid-progress--status--warning .oneid-progress__inner { background: var(--td-warning-color); } .oneid-progress--status--warning .oneid-progress__circle-inner { stroke: var(--td-warning-color); } .oneid-progress--status--warning .oneid-progress__icon { color: var(--td-warning-color); } .oneid-progress--status--error .oneid-progress__inner { background: var(--td-error-color); } .oneid-progress--status--error .oneid-progress__circle-inner { stroke: var(--td-error-color); } .oneid-progress--status--error .oneid-progress__icon { color: var(--td-error-color); } @-webkit-keyframes progress-active-animation { 0% { width: 0; opacity: 0.1; } 35% { width: 50%; opacity: 0.4; } 100% { width: 100%; opacity: 0; } } @keyframes progress-active-animation { 0% { width: 0; opacity: 0.1; } 35% { width: 50%; opacity: 0.4; } 100% { width: 100%; opacity: 0; } } .oneid-popconfirm { font: var(--td-font-body-medium); color: var(--td-text-color-primary); -webkit-box-sizing: border-box; box-sizing: border-box; margin: 0; padding: 0; list-style: none; min-width: 160px; border-radius: var(--td-radius-medium); } .oneid-popconfirm .oneid-popup__content { padding: 0; } .oneid-popconfirm.oneid-popup[data-popper-placement^=top] .oneid-popup__arrow { bottom: -4px; } .oneid-popconfirm__content { position: relative; padding: var(--td-comp-paddingTB-l) var(--td-comp-paddingLR-l); border-radius: var(--td-radius-medium); } .oneid-popconfirm__body { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; text-align: left; } .oneid-popconfirm__body > .oneid-icon { display: inline-block; margin-right: var(--td-comp-margin-s); padding: calc((var(--td-line-height-body-medium) - (var(--td-font-size-body-medium) + 6px)) / 2) 0; font-size: calc(var(--td-font-size-body-medium) + 6px); } .oneid-popconfirm__confirm { margin-left: var(--td-comp-margin-s); } .oneid-popconfirm__inner { display: inline-block; vertical-align: top; max-width: 320px; font: var(--td-font-body-medium); color: var(--td-text-color-primary); } .oneid-popconfirm__icon--warning { color: var(--td-warning-color); } .oneid-popconfirm__icon--danger { color: var(--td-error-color); } .oneid-popconfirm__icon--default { color: var(--td-brand-color); } .oneid-popconfirm__buttons { text-align: right; margin-top: var(--td-comp-margin-l); } .oneid-popconfirm__buttons > span:last-child { margin-right: 0; } .oneid-textarea { font: var(--td-font-body-medium); color: var(--td-text-color-primary); -webkit-box-sizing: border-box; box-sizing: border-box; margin: 0; padding: 0; list-style: none; position: relative; width: 100%; } .oneid-textarea__inner { display: -webkit-box; display: -ms-flexbox; display: flex; width: 100%; height: var(--td-comp-size-xxxl); border: 1px solid var(--td-border-level-2-color); border-radius: var(--td-radius-default); padding: calc((var(--td-comp-size-m) - var(--td-line-height-body-medium)) / 2) var(--td-comp-paddingLR-s); background-color: var(--td-bg-color-specialcomponent); font: var(--td-font-body-medium); color: var(--td-text-color-primary); resize: vertical; outline: none; -webkit-transition: all cubic-bezier(0.38, 0, 0.24, 1) 0.2s, height 0s; transition: all cubic-bezier(0.38, 0, 0.24, 1) 0.2s, height 0s; -webkit-box-sizing: border-box; box-sizing: border-box; } .oneid-textarea__inner:hover { border-color: var(--td-brand-color); } .oneid-textarea__inner:focus { border-color: var(--td-brand-color); -webkit-box-shadow: 0 0 0 2px var(--td-brand-color-focus); box-shadow: 0 0 0 2px var(--td-brand-color-focus); } .oneid-textarea__inner::-webkit-input-placeholder { color: var(--td-text-color-placeholder); } .oneid-textarea__inner::-moz-placeholder { color: var(--td-text-color-placeholder); } .oneid-textarea__inner:-ms-input-placeholder { color: var(--td-text-color-placeholder); } .oneid-textarea__inner::-ms-input-placeholder { color: var(--td-text-color-placeholder); } .oneid-textarea__inner::placeholder { color: var(--td-text-color-placeholder); } .oneid-textarea__inner.oneid-is-success { border-color: var(--td-success-color); } .oneid-textarea__inner.oneid-is-success:focus { -webkit-box-shadow: 0 0 0 2px var(--td-success-color-focus); box-shadow: 0 0 0 2px var(--td-success-color-focus); } .oneid-textarea__inner.oneid-is-warning { border-color: var(--td-warning-color); } .oneid-textarea__inner.oneid-is-warning:focus { -webkit-box-shadow: 0 0 0 2px var(--td-warning-color-focus); box-shadow: 0 0 0 2px var(--td-warning-color-focus); } .oneid-textarea__inner.oneid-is-error { border-color: var(--td-error-color); } .oneid-textarea__inner.oneid-is-error:focus { -webkit-box-shadow: 0 0 0 2px var(--td-error-color-focus); box-shadow: 0 0 0 2px var(--td-error-color-focus); } .oneid-textarea__info_wrapper { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-column-gap: var(--td-comp-margin-s); -moz-column-gap: var(--td-comp-margin-s); column-gap: var(--td-comp-margin-s); -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } .oneid-textarea__info_wrapper_align { -webkit-box-pack: end; -ms-flex-pack: end; justify-content: end; } .oneid-textarea__limit { font: var(--td-font-body-small); color: var(--td-text-color-placeholder); } .oneid-textarea .oneid-is-disabled { color: var(--td-text-color-disabled); background-color: var(--td-bg-color-component-disabled); cursor: not-allowed; } .oneid-textarea .oneid-is-disabled:hover { border-color: var(--td-border-level-2-color); } .oneid-textarea .oneid-is-disabled::-webkit-input-placeholder { color: var(--td-text-color-disabled); } .oneid-textarea .oneid-is-disabled::-moz-placeholder { color: var(--td-text-color-disabled); } .oneid-textarea .oneid-is-disabled:-ms-input-placeholder { color: var(--td-text-color-disabled); } .oneid-textarea .oneid-is-disabled::-ms-input-placeholder { color: var(--td-text-color-disabled); } .oneid-textarea .oneid-is-disabled::placeholder { color: var(--td-text-color-disabled); } .oneid-textarea .oneid-resize-none { resize: none; } .oneid-textarea__tips { height: auto; min-height: var(--td-comp-size-xs); font: var(--td-font-body-small); display: inline-block; } .oneid-textarea__tips--normal { color: var(--td-text-color-placeholder); } .oneid-textarea__tips--success { color: var(--td-success-color); } .oneid-textarea__tips--warning { color: var(--td-warning-color); } .oneid-textarea__tips--error { color: var(--td-error-color); } @-webkit-keyframes changeColor { from { color: var(--td-brand-color-hover); } to { color: var(--td-brand-color-active); } } @keyframes changeColor { from { color: var(--td-brand-color-hover); } to { color: var(--td-brand-color-active); } } .oneid-breadcrumb { color: var(--td-text-color-primary); -webkit-box-sizing: border-box; box-sizing: border-box; margin: 0; padding: 0; list-style: none; font: var(--td-font-body-medium); display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .oneid-breadcrumb__separator { margin: 0 var(--td-comp-margin-xs); display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .oneid-breadcrumb__separator .oneid-icon { color: var(--td-text-color-placeholder); } .oneid-breadcrumb__item { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; color: var(--td-text-color-placeholder); text-decoration: none; } .oneid-breadcrumb__item.oneid-is-current { color: var(--td-text-color-primary); } .oneid-breadcrumb__item.oneid-is-current .oneid-icon { color: var(--td-text-color-placeholder); } .oneid-breadcrumb__item:last-child { color: var(--td-text-color-primary); } .oneid-breadcrumb__item:last-child .oneid-breadcrumb__separator { display: none; } .oneid-breadcrumb__item .oneid-icon { font-size: var(--td-font-size-body-large); } .oneid-breadcrumb__item .oneid-link { color: inherit; text-decoration: none; } .oneid-breadcrumb__item .oneid-link:hover { color: var(--td-brand-color); } .oneid-breadcrumb__item .oneid-is-disabled { cursor: not-allowed; } .oneid-breadcrumb__item .oneid-is-disabled .oneid-breadcrumb__inner { color: var(--td-text-color-disabled); } .oneid-breadcrumb__item .oneid-is-disabled .oneid-breadcrumb__inner:hover { color: var(--td-text-color-disabled); cursor: not-allowed; } .oneid-breadcrumb__item .oneid-is-disabled .oneid-breadcrumb__inner:active { -webkit-animation: none; animation: none; } .oneid-breadcrumb__item--arrow { margin: 0 var(--td-comp-margin-xs); line-height: 0; color: var(--td-text-color-placeholder); display: inline-block; vertical-align: middle; } .oneid-breadcrumb__item--slash { margin: 0 var(--td-comp-margin-xs); line-height: 0; color: var(--td-text-color-placeholder); display: inline-block; vertical-align: middle; } .oneid-breadcrumb__inner { font: var(--td-font-body-medium); word-break: break-all; display: inline-block; vertical-align: middle; } .oneid-breadcrumb__inner .oneid-icon { margin: 0 var(--td-comp-margin-xs); } .oneid-breadcrumb__select { position: relative; } .oneid-breadcrumb__select:hover .oneid-breadcrumb__option { display: block; } .oneid-breadcrumb__select-item:hover .oneid-icon { color: var(--td-brand-color); } .oneid-breadcrumb__option { display: none; position: absolute; top: 28px; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); max-width: 120px; background: var(--td-bg-color-container); -webkit-box-shadow: var(--td-shadow-2); box-shadow: var(--td-shadow-2); z-index: 20; } .oneid-breadcrumb__option-item { padding: 8px; font: var(--td-font-body-medium); color: var(--td-text-color-primary); text-overflow: ellipsis; overflow: hidden; white-space: nowrap; } .oneid-breadcrumb__option-item:hover { color: var(--td-brand-color); } .oneid-breadcrumb__option-item.oneid-is-active { color: var(--td-brand-color); } .oneid-breadcrumb__inner-msg { display: none; position: absolute; left: 50%; bottom: 30px; -webkit-transform: translateX(-50%); transform: translateX(-50%); width: 300px; padding: 8px; color: var(--td-text-color-primary); background: var(--td-bg-color-container); border-radius: calc(var(--td-radius-default) * 0.5); -webkit-box-shadow: var(--td-shadow-2); box-shadow: var(--td-shadow-2); z-index: 20; } .oneid-breadcrumb__inner-msg::before { content: ""; position: absolute; bottom: -8px; left: 50%; margin-left: -4px; width: 0; height: 0; border-style: solid; border-width: 8px 6px 0; border-color: var(--td-bg-color-container) transparent transparent transparent; z-index: 20; } .oneid-breadcrumb--text-overflow { position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .oneid-breadcrumb--text-overflow:hover .oneid-breadcrumb__inner-msg { display: block; } .oneid-breadcrumb--text-overflow .oneid-breadcrumb__inner { max-width: 120px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-transition: color 0.2s linear; transition: color 0.2s linear; } .oneid-breadcrumb--text-overflow .oneid-breadcrumb__inner-text { text-overflow: ellipsis; overflow: hidden; white-space: nowrap; } .oneid-breadcrumb--text-overflow .oneid-breadcrumb__inner:hover { color: var(--td-brand-color); cursor: pointer; } .oneid-breadcrumb--text-overflow .oneid-breadcrumb__inner:active { -webkit-animation: 0.2s linear changeColor; animation: 0.2s linear changeColor; } .oneid-dropdown { font: var(--td-font-body-medium); -webkit-box-sizing: border-box; box-sizing: border-box; margin: 0; padding: 0; list-style: none; background-color: var(--td-bg-color-container); font-size: var(--td-font-size-body-medium); color: var(--td-text-color-primary); position: relative; -webkit-box-shadow: var(--td-shadow-2); box-shadow: var(--td-shadow-2); border: 0.5px solid var(--td-component-border); border-radius: var(--td-radius-medium); } .oneid-dropdown__menu { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; border-radius: var(--td-radius-medium); padding: var(--td-pop-padding-m); gap: 2px; overflow-y: auto; overflow-x: hidden; } @-moz-document url-prefix() { .oneid-dropdown__menu { scrollbar-color: var(--td-scrollbar-color) transparent; scrollbar-width: thin; } } .oneid-dropdown__menu::-webkit-scrollbar { width: 8px; height: 8px; } .oneid-dropdown__menu::-webkit-scrollbar-thumb { border: 2px solid transparent; background-clip: content-box; background-color: var(--td-scrollbar-color); border-radius: 15px; } .oneid-dropdown__menu::-webkit-scrollbar-thumb:vertical:hover, .oneid-dropdown__menu::-webkit-scrollbar-thumb:horizontal:hover { background-color: var(--td-scrollbar-hover-color); } .oneid-dropdown__menu .oneid-divider { margin: var(--td-comp-margin-xs) var(--td-comp-margin-s) var(--td-comp-margin-xxs) var(--td-comp-margin-s); color: var(--td-brand-color-light); width: calc(100% - var(--td-comp-margin-s) * 2); } .oneid-dropdown__menu .oneid-dropdown__item-direction { margin: 0 0 0 var(--td-comp-margin-s); } .oneid-dropdown__menu--overflow .oneid-dropdown__submenu-wrapper--right { left: calc(100% - 14px); } .oneid-dropdown__menu--overflow .oneid-dropdown__submenu-wrapper--left { right: calc(100% - 14px); } .oneid-dropdown__submenu { background-color: var(--td-bg-color-container); -webkit-box-shadow: var(--td-shadow-2); box-shadow: var(--td-shadow-2); border-radius: var(--td-radius-medium); border: 0.5px solid var(--td-component-border); z-index: 1100; position: absolute; padding: var(--td-pop-padding-m); display: none; overflow-y: auto; overflow-x: visible; } @-moz-document url-prefix() { .oneid-dropdown__submenu { scrollbar-color: var(--td-scrollbar-color) transparent; scrollbar-width: thin; } } .oneid-dropdown__submenu::-webkit-scrollbar { width: 8px; height: 8px; } .oneid-dropdown__submenu::-webkit-scrollbar-thumb { border: 2px solid transparent; background-clip: content-box; background-color: var(--td-scrollbar-color); border-radius: 15px; } .oneid-dropdown__submenu::-webkit-scrollbar-thumb:vertical:hover, .oneid-dropdown__submenu::-webkit-scrollbar-thumb:horizontal:hover { background-color: var(--td-scrollbar-hover-color); } .oneid-dropdown__submenu ul { list-style: none; display: grid; padding-left: 0; gap: 2px; } .oneid-dropdown__submenu--disabled { visibility: hidden; } .oneid-dropdown__submenu .oneid-dropdown__item-direction { margin: 0 0 0 var(--td-comp-margin-s); } .oneid-dropdown__submenu-wrapper--right { left: calc(100% - 6px); } .oneid-dropdown__submenu-wrapper--left { right: calc(100% - 6px); } .oneid-dropdown__item { border-radius: var(--td-radius-default); font: var(--td-font-body-medium); cursor: pointer; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; outline: none; -webkit-transition: background-color 0.2s cubic-bezier(0.82, 0, 1, 0.9); transition: background-color 0.2s cubic-bezier(0.82, 0, 1, 0.9); white-space: nowrap; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; padding: calc(var(--td-comp-paddingTB-xs) - 1px) var(--td-comp-paddingLR-s); --ripple-color: var(--td-bg-color-container-active); } .oneid-dropdown__item-icon { display: -webkit-box; display: -ms-flexbox; display: flex; color: currentcolor; margin-right: var(--td-comp-margin-s); font-size: var(--td-font-size-body-large); } .oneid-dropdown__item:hover > div > div { display: -webkit-box; display: -ms-flexbox; display: flex; } .oneid-dropdown__item--disabled { cursor: not-allowed; } .oneid-dropdown__item-content { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-flex: 1; -ms-flex: 1; flex: 1; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; max-width: 100%; } .oneid-dropdown__item-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; -webkit-box-flex: 1; -ms-flex: 1; flex: 1; } .oneid-dropdown__item.oneid-dropdown__item--suffix .oneid-dropdown__item-sub-icon { color: currentcolor; font-size: var(--td-font-size-body-large); -ms-flex-negative: 0; flex-shrink: 0; } .oneid-dropdown__item--theme-default { color: var(--td-text-color-primary); } .oneid-dropdown__item--theme-default:hover { background-color: var(--td-bg-color-container-hover); } .oneid-dropdown__item--theme-default:active { background-color: var(--td-bg-color-container-active); } .oneid-dropdown__item--theme-default.oneid-dropdown__item--active { color: var(--td-brand-color); background-color: var(--td-brand-color-light); } .oneid-dropdown__item--theme-default.oneid-dropdown__item--active:hover { background-color: var(--td-bg-color-container-hover); } .oneid-dropdown__item--theme-default.oneid-dropdown__item--active:active { background-color: var(--td-bg-color-container-active); } .oneid-dropdown__item--theme-default.oneid-dropdown__item--disabled { color: var(--td-text-color-disabled); } .oneid-dropdown__item--theme-default.oneid-dropdown__item--disabled:hover { background-color: var(--td-bg-color-container-hover); } .oneid-dropdown__item--theme-default.oneid-dropdown__item--suffix:hover { background-color: var(--td-brand-color-light); color: var(--td-brand-color); } .oneid-dropdown__item--theme-success { color: var(--td-success-color); } .oneid-dropdown__item--theme-success:hover { background-color: var(--td-bg-color-container-hover); } .oneid-dropdown__item--theme-success:active { background-color: var(--td-bg-color-container-active); } .oneid-dropdown__item--theme-success.oneid-dropdown__item--active { background-color: var(--td-success-color-light); } .oneid-dropdown__item--theme-success.oneid-dropdown__item--active:hover { background-color: var(--td-bg-color-container-hover); } .oneid-dropdown__item--theme-success.oneid-dropdown__item--active:active { background-color: var(--td-bg-color-container-active); } .oneid-dropdown__item--theme-success.oneid-dropdown__item-disabled { color: var(--td-text-color-disabled); } .oneid-dropdown__item--theme-success.oneid-dropdown__item-disabled:hover { background-color: var(--td-bg-color-container-hover); } .oneid-dropdown__item--theme-success.oneid-dropdown__item--suffix:hover { background-color: var(--td-success-color-light); } .oneid-dropdown__item--theme-error { color: var(--td-error-color); } .oneid-dropdown__item--theme-error:hover { background-color: var(--td-bg-color-container-hover); } .oneid-dropdown__item--theme-error:active { background-color: var(--td-bg-color-container-active); } .oneid-dropdown__item--theme-error.oneid-dropdown__item--active { background-color: var(--td-error-color-light); } .oneid-dropdown__item--theme-error.oneid-dropdown__item--active:hover { background-color: var(--td-bg-color-container-hover); } .oneid-dropdown__item--theme-error.oneid-dropdown__item--active:active { background-color: var(--td-bg-color-container-active); } .oneid-dropdown__item--theme-error.oneid-dropdown__item--disabled { color: var(--td-text-color-disabled); } .oneid-dropdown__item--theme-error.oneid-dropdown__item--disabled:hover { background-color: var(--td-bg-color-container-hover); } .oneid-dropdown__item--theme-error.oneid-dropdown__item--suffix:hover { background-color: var(--td-error-color-light); } .oneid-dropdown__item--theme-warning { color: var(--td-warning-color); } .oneid-dropdown__item--theme-warning:hover { background-color: var(--td-bg-color-container-hover); } .oneid-dropdown__item--theme-warning:active { background-color: var(--td-bg-color-container-active); } .oneid-dropdown__item--theme-warning.oneid-dropdown__item--active { background-color: var(--td-warning-color-light); } .oneid-dropdown__item--theme-warning.oneid-dropdown__item--active:hover { background-color: var(--td-bg-color-container-hover); } .oneid-dropdown__item--theme-warning.oneid-dropdown__item--active:active { background-color: var(--td-bg-color-container-active); } .oneid-dropdown__item--theme-warning.oneid-dropdown__item--disabled { color: var(--td-text-color-disabled); } .oneid-dropdown__item--theme-warning.oneid-dropdown__item--disabled:hover { background-color: var(--td-bg-color-container-hover); } .oneid-dropdown__item--theme-warning.oneid-dropdown__item--suffix:hover { background-color: var(--td-warning-color-light); } .oneid-slider__input-container { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; margin-left: var(--td-comp-margin-xxl); } .oneid-slider__input-container.is-vertical { padding-top: var(--td-comp-paddingTB-l); margin-left: 0px; } .oneid-slider__input-container .oneid-slider__center-line { width: var(--td-size-4); height: 1px; background: rgba(0, 0, 0, 0.9); margin: 0 var(--td-comp-margin-s); } .oneid-slider { font: var(--td-font-body-medium); color: var(--td-text-color-primary); -webkit-box-sizing: border-box; box-sizing: border-box; margin: 0; padding: 0; list-style: none; height: calc(var(--td-comp-paddingTB-xs) * 2 + var(--td-size-2)); width: 100%; position: relative; padding: var(--td-comp-paddingTB-xs) 0; } .oneid-slider__container { width: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .oneid-slider__container.is-vertical { height: 100%; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } .oneid-slider__rail { position: absolute; width: 100%; height: var(--td-size-2); background-color: var(--td-bg-color-secondarycomponent); -webkit-transition: 0.2s linear; transition: 0.2s linear; border-radius: var(--td-radius-round); } .oneid-slider__rail:hover { background-color: var(--td-bg-color-secondarycomponent-hover); } .oneid-slider__track { position: absolute; height: var(--td-size-2); background-color: var(--td-brand-color); right: auto; border-radius: var(--td-radius-round); } .oneid-slider__step { position: absolute; width: 100%; height: var(--td-size-2); cursor: pointer; } .oneid-slider__button { width: var(--td-comp-size-xxxs); height: var(--td-comp-size-xxxs); border: 2px solid var(--td-brand-color); background-color: #fff; border-radius: var(--td-radius-circle); -webkit-transition: 0.2s; transition: 0.2s; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -webkit-box-sizing: border-box; box-sizing: border-box; -webkit-box-shadow: var(--td-shadow-1); box-shadow: var(--td-shadow-1); } .oneid-slider__button--dragging { -webkit-box-shadow: 0 0 0px 2px var(--td-brand-color-focus); box-shadow: 0 0 0px 2px var(--td-brand-color-focus); } .oneid-slider__button:hover { background-color: var(--td-gray-color-1); } .oneid-slider__button-wrapper { position: absolute; z-index: 2; top: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); background-color: transparent; text-align: center; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; line-height: normal; outline: none; cursor: pointer; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .oneid-slider__stop { position: absolute; width: 1px; height: var(--td-size-2); background-color: var(--td-bg-color-secondarycomponent); top: 4px; } .oneid-slider__mark { position: absolute; top: 2px; left: 0; width: 100%; } .oneid-slider__mark-text { position: absolute; display: inline-block; font: var(--td-font-body-small); color: var(--td-text-color-primary); top: calc(var(--td-size-2) + var(--td-comp-paddingTB-xs) + 2px); -webkit-transform: translateX(-50%); transform: translateX(-50%); cursor: pointer; } .oneid-slider__mark-text:first-child { -webkit-transform: translateX(0%); transform: translateX(0%); } .oneid-slider__mark-text:last-child { -webkit-transform: translateX(-100%); transform: translateX(-100%); } .oneid-slider--vertical { height: 100%; padding: 0; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; position: relative; } .oneid-slider--vertical .oneid-slider__rail { width: var(--td-size-2); height: 100%; } .oneid-slider--vertical .oneid-slider__track { width: var(--td-size-2); top: auto; } .oneid-slider--vertical .oneid-slider__step { width: var(--td-size-2); height: 100%; } .oneid-slider--vertical .oneid-slider__handle { margin-top: -6px; margin-left: -5px; top: auto; -webkit-transform: translateY(50%); transform: translateY(50%); } .oneid-slider--vertical .oneid-slider__mark { top: 0; left: 12px; width: 18px; height: 100%; } .oneid-slider--vertical .oneid-slider__stop { width: var(--td-size-2); height: 1px; left: 4px; background-color: var(--td-bg-color-secondarycomponent); } .oneid-slider--vertical .oneid-slider__mark-text { -webkit-transform: translateY(-50%); transform: translateY(-50%); margin-top: 0; margin-left: var(--td-comp-margin-xxs); } .oneid-slider--vertical .oneid-slider__button-wrapper { top: auto; position: absolute; z-index: 2; left: 50%; -webkit-transform: translate(-50%, 50%); transform: translate(-50%, 50%); background-color: transparent; text-align: center; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; line-height: normal; outline: none; cursor: pointer; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .oneid-is-disabled { cursor: not-allowed; } .oneid-is-disabled .oneid-slider__track { background-color: var(--td-brand-color-disabled); } .oneid-is-disabled .oneid-slider__rail { background-color: var(--td-bg-color-component-disabled); } .oneid-is-disabled .oneid-slider__handle { border: 2px solid var(--td-brand-color-disabled); } .oneid-is-disabled .oneid-slider__button { border-color: var(--td-brand-color-disabled); outline: none; } .oneid-is-disabled .oneid-slider__mark-text { color: var(--td-text-color-disabled); cursor: not-allowed; } .oneid-is-disabled .oneid-slider__button-wrapper { cursor: not-allowed; } .oneid-select-option__highlight-item .oneid-is-highlight { color: var(--td-brand-color); } .oneid-auto-complete { width: 100%; } .oneid-auto-complete .oneid-input__suffix-clear { display: none; } .oneid-auto-complete:hover .oneid-input__suffix-clear { display: inline-block; } .oneid-auto-complete__panel--empty { height: var(--td-comp-size-m); line-height: var(--td-comp-size-m); color: var(--td-text-color-disabled); text-align: center; } .oneid-cascader .oneid-fake-arrow { color: var(--td-text-color-placeholder); } .oneid-cascader .oneid-fake-arrow--active { color: var(--td-brand-color); } .oneid-cascader__popup .oneid-popup__content { padding: 0; -webkit-box-shadow: var(--td-shadow-2); box-shadow: var(--td-shadow-2); border-radius: var(--td-radius-medium); border: 0.5px solid var(--td-component-border); overflow: hidden; } .oneid-cascader__panel { display: -webkit-box; display: -ms-flexbox; display: flex; height: 100%; } .oneid-cascader__panel.oneid-cascader--normal { height: 200px; } .oneid-cascader__panel.oneid-cascader--multiple { height: 280px; } .oneid-cascader__panel--empty { width: 100%; height: var(--td-comp-size-s); line-height: var(--td-comp-size-s); color: var(--td-text-color-disabled); margin: var(--td-pop-padding-m); text-align: center; padding-left: 0; } .oneid-cascader__panel--empty:hover { background: none; cursor: default; } .oneid-cascader__menu { width: 148px; overflow: auto; -webkit-box-sizing: content-box; box-sizing: content-box; padding: var(--td-pop-padding-m); background: var(--td-bg-color-container); } .oneid-cascader__menu.oneid-size-l { padding: var(--td-pop-padding-l); } .oneid-cascader__menu.oneid-size-s { padding: var(--td-pop-padding-s); } .oneid-cascader__menu--segment { border-right: 1px solid var(--td-component-stroke); } .oneid-cascader__menu--filter { width: auto; min-width: 148px; } .oneid-cascader__item { position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; height: var(--td-comp-size-s); font: var(--td-font-body-medium); color: var(--td-text-color-primary); padding: 0 var(--td-comp-paddingLR-s); border-radius: var(--td-radius-default); margin-top: var(--td-comp-margin-xxs); -webkit-transition: background-color 0.2s cubic-bezier(0.82, 0, 1, 0.9); transition: background-color 0.2s cubic-bezier(0.82, 0, 1, 0.9); list-style: none; --ripple-color: var(--td-bg-color-container-active); } .oneid-cascader__item.oneid-size-s { height: var(--td-comp-size-xs); font: var(--td-font-body-small); padding: 0px var(--td-comp-paddingLR-s); } .oneid-cascader__item.oneid-size-l { height: var(--td-comp-size-m); font: var(--td-font-body-large); padding: 0 var(--td-comp-paddingLR-m); } .oneid-cascader__item.oneid-is-disabled { color: var(--td-text-color-disabled); background-color: transparent; cursor: not-allowed; } .oneid-cascader__item-icon.oneid-icon { position: absolute; height: 100%; right: 0; top: 0; background: transparent; margin: 0 8px; font-size: 16px; color: var(--td-text-color-placeholder); } .oneid-cascader__item-icon.oneid-loading { display: -webkit-box; display: -ms-flexbox; display: flex; color: var(--td-text-color-brand); } .oneid-cascader__item.oneid-is-expanded { background: var(--td-brand-color-light); color: var(--td-text-color-brand); } .oneid-cascader__item.oneid-is-expanded .oneid-icon-chevron-right { color: var(--td-text-color-brand); } .oneid-cascader__item.oneid-is-expanded:hover { cursor: pointer; } .oneid-cascader__item:first-child { margin-top: 0; } .oneid-cascader__item .oneid-checkbox { max-width: 100%; } .oneid-cascader__item .oneid-checkbox .oneid-checkbox__input { -ms-flex-negative: 0; flex-shrink: 0; } .oneid-cascader__item .oneid-checkbox .oneid-checkbox__label { display: block; white-space: nowrap; word-wrap: normal; overflow: hidden; text-overflow: ellipsis; } .oneid-cascader__item .oneid-checkbox .oneid-checkbox__label .oneid-cascader__item__label--filter { color: var(--td-text-color-brand); } .oneid-cascader__item--with-icon { padding: 0 calc(var(--td-comp-paddingLR-s) + 14px) 0 var(--td-comp-paddingLR-s); } .oneid-cascader__item--leaf .oneid-checkbox { width: 100%; } .oneid-cascader__item-label { display: block; position: relative; white-space: nowrap; padding: 0; } .oneid-cascader__item-label--ellipsis { white-space: nowrap; word-wrap: normal; overflow: hidden; text-overflow: ellipsis; } .oneid-cascader__item-label--filter { color: var(--td-text-color-brand); } .oneid-cascader__item:hover:not(.oneid-is-expanded):not(.oneid-is-disabled) { background: var(--td-bg-color-container-hover); cursor: pointer; } .oneid-cascader__item.oneid-is-selected { color: var(--td-brand-color); background: var(--td-brand-color-light); } .oneid-cascader__item.oneid-is-selected .oneid-checkbox__label { color: var(--td-brand-color); } .oneid-date-picker, .oneid-date-range-picker { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; font: var(--td-font-body-medium); color: var(--td-text-color-primary); -webkit-box-sizing: border-box; box-sizing: border-box; margin: 0; padding: 0; list-style: none; } .oneid-date-picker__header-controller-month-popup > .oneid-popup__content, .oneid-date-picker__header-controller-year-popup > .oneid-popup__content { max-height: 160px; } .oneid-date-picker__panel-container > .oneid-popup__content, .oneid-date-range-picker__panel-container > .oneid-popup__content { padding: 0; min-width: 280px; } .oneid-date-picker__panel, .oneid-date-range-picker__panel { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } .oneid-date-picker__panel--direction-row, .oneid-date-range-picker__panel--direction-row { -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; } .oneid-date-picker__panel .oneid-time-picker__panel, .oneid-date-range-picker__panel .oneid-time-picker__panel { width: 216px; } .oneid-date-picker__panel .oneid-time-picker__panel-section-body, .oneid-date-range-picker__panel .oneid-time-picker__panel-section-body { padding: 0; } .oneid-date-picker__panel .oneid-time-picker__panel-body, .oneid-date-range-picker__panel .oneid-time-picker__panel-body { margin: 0; } .oneid-date-picker__panel-content, .oneid-date-range-picker__panel-content, .oneid-date-range-picker__panel-content-wrapper { display: -webkit-box; display: -ms-flexbox; display: flex; } .oneid-date-picker__header { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; gap: var(--td-comp-margin-m); width: 100%; } .oneid-date-picker__header-controller { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; gap: var(--td-comp-margin-s); } .oneid-date-picker__header-controller .oneid-date-picker__header-controller-month { width: 80px; display: -webkit-box; display: -ms-flexbox; display: flex; } .oneid-date-picker__header-controller .oneid-date-picker__header-controller-year { width: 78px; display: -webkit-box; display: -ms-flexbox; display: flex; } .oneid-date-picker__table table { width: 100%; border-collapse: collapse; } .oneid-date-picker__table table th { text-align: center; color: var(--td-text-color-secondary); font-weight: 400; } .oneid-date-picker__table table td.oneid-date-picker__cell { text-align: center; font-weight: 500; } .oneid-date-picker__table table th, .oneid-date-picker__table table th.oneid-date-picker__table-header-cell, .oneid-date-picker__table table td.oneid-date-picker__cell { padding: 0; border: 0; line-height: var(--td-line-height-body-medium); } .oneid-date-picker__table table thead::after { content: "-"; display: block; line-height: var(--td-comp-margin-xs); color: transparent; } .oneid-date-picker__table table thead::before { content: "-"; display: block; line-height: var(--td-comp-margin-xs); color: transparent; } .oneid-date-picker__table-week-row { cursor: pointer; position: -webkit-sticky; position: sticky; } .oneid-date-picker__table-week-row .oneid-date-picker__cell:first-child .oneid-date-picker__cell-inner { color: var(--td-text-color-disabled); } .oneid-date-picker__table-week-row .oneid-date-picker__cell:hover .oneid-date-picker__cell-inner { -webkit-box-shadow: none; box-shadow: none; background: none; } .oneid-date-picker__table-week-row::after { content: ""; position: absolute; left: var(--td-comp-margin-xxxl); right: 0; top: calc(var(--td-comp-margin-xs) - 1px); z-index: 10; height: var(--td-comp-size-xs); border-radius: var(--td-radius-default); -webkit-transition: background-color 0.2s linear, border-color 0.2s linear, color 0.2s linear, -webkit-box-shadow 0.2s cubic-bezier(0.38, 0, 0.24, 1); transition: background-color 0.2s linear, border-color 0.2s linear, color 0.2s linear, -webkit-box-shadow 0.2s cubic-bezier(0.38, 0, 0.24, 1); transition: box-shadow 0.2s cubic-bezier(0.38, 0, 0.24, 1), background-color 0.2s linear, border-color 0.2s linear, color 0.2s linear; transition: box-shadow 0.2s cubic-bezier(0.38, 0, 0.24, 1), background-color 0.2s linear, border-color 0.2s linear, color 0.2s linear, -webkit-box-shadow 0.2s cubic-bezier(0.38, 0, 0.24, 1); pointer-events: none; } .oneid-date-picker__table-week-row:hover .oneid-date-picker__cell:first-child .oneid-date-picker__cell-inner { color: var(--td-brand-color); } .oneid-date-picker__table-week-row:hover::after { -webkit-box-shadow: inset 0 0 0 1px var(--td-brand-color); box-shadow: inset 0 0 0 1px var(--td-brand-color); } .oneid-date-picker__table-week-row--active::after { opacity: 1; z-index: 0; background-color: var(--td-brand-color); } .oneid-date-picker__table-week-row--active .oneid-date-picker__cell:first-child .oneid-date-picker__cell-inner { color: var(--td-brand-color); } .oneid-date-picker__table-week-row--active .oneid-date-picker__cell .oneid-date-picker__cell-inner { background: transparent; color: var(--td-text-color-anti); } .oneid-date-picker__table-week-row--range::after { opacity: 1; z-index: 0; background-color: var(--td-brand-color-light); } .oneid-date-picker__table-week-row--range .oneid-date-picker__cell .oneid-date-picker__cell-inner { background: transparent; } .oneid-date-picker__footer { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; padding: var(--td-pop-padding-xl); gap: var(--td-comp-margin-s); } .oneid-date-picker__footer--bottom { border-top: 1px solid var(--td-component-stroke); } .oneid-date-picker__footer--top { border-bottom: 1px solid var(--td-component-stroke); } .oneid-date-picker__footer--left { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; border-right: 1px solid var(--td-component-stroke); } .oneid-date-picker__footer--left .oneid-date-picker__presets { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } .oneid-date-picker__footer--right { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; border-left: 1px solid var(--td-component-stroke); } .oneid-date-picker__footer--right .oneid-date-picker__presets { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } .oneid-date-picker__presets { display: -webkit-box; display: -ms-flexbox; display: flex; gap: var(--td-comp-margin-s); white-space: nowrap; min-width: var(--td-comp-size-xl); } .oneid-date-picker__presets .oneid-button { cursor: pointer; } .oneid-date-picker__presets a { color: var(--td-brand-color); } .oneid-date-picker__presets a:hover { color: var(--td-brand-color-hover); } .oneid-date-picker__panel-time, .oneid-date-range-picker__panel-time { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; gap: calc(var(--td-comp-margin-m) / 2); padding: var(--td-pop-padding-xl) calc(var(--td-pop-padding-xl) - var(--td-comp-margin-xs)); border-left: 1px solid var(--td-component-stroke); } .oneid-date-picker__panel-time-viewer, .oneid-date-range-picker__panel-time-viewer { display: -webkit-box; display: -ms-flexbox; display: flex; height: var(--td-comp-size-m); line-height: var(--td-line-height-body-medium); -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; color: var(--td-text-color-primary); } .oneid-date-picker__panel-time .oneid-time-picker__panel-body, .oneid-date-range-picker__panel-time .oneid-time-picker__panel-body { margin: 0; } .oneid-date-picker__panel-year, .oneid-date-picker__panel-month, .oneid-date-picker__panel-quarter, .oneid-date-picker__panel-week, .oneid-date-picker__panel-date { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; padding: var(--td-pop-padding-xl); gap: var(--td-comp-margin-m); width: 280px; -webkit-box-sizing: border-box; box-sizing: border-box; } .oneid-date-picker__panel-year .oneid-date-picker__cell--hover-highlight + .oneid-date-picker__cell--hover-highlight::before, .oneid-date-picker__panel-month .oneid-date-picker__cell--hover-highlight + .oneid-date-picker__cell--hover-highlight::before, .oneid-date-picker__panel-year .oneid-date-picker__cell--hover-highlight + .oneid-date-picker__cell--hover-highlight::after, .oneid-date-picker__panel-month .oneid-date-picker__cell--hover-highlight + .oneid-date-picker__cell--hover-highlight::after { opacity: 1; left: calc(0px - (var(--td-comp-size-xs) + var(--td-comp-margin-xxl))); } .oneid-date-picker__panel-year .oneid-date-picker__cell--hover-highlight + .oneid-date-picker__cell--active::after, .oneid-date-picker__panel-month .oneid-date-picker__cell--hover-highlight + .oneid-date-picker__cell--active::after { opacity: 1; left: calc(0px - (var(--td-comp-size-xs) + var(--td-comp-margin-xxl))); z-index: 5; } .oneid-date-picker__panel-year .oneid-date-picker__cell--highlight + .oneid-date-picker__cell--highlight::before, .oneid-date-picker__panel-month .oneid-date-picker__cell--highlight + .oneid-date-picker__cell--highlight::before { left: calc(0px - (var(--td-comp-size-xs) + var(--td-comp-margin-xxl))); } .oneid-date-picker__panel-year .oneid-date-picker__header-controller-year, .oneid-date-picker__panel-month .oneid-date-picker__header-controller-year, .oneid-date-picker__panel-quarter .oneid-date-picker__header-controller-year { width: 130px; display: -webkit-box; display: -ms-flexbox; display: flex; } .oneid-date-picker__panel-year .oneid-date-picker__table table tbody, .oneid-date-picker__panel-month .oneid-date-picker__table table tbody, .oneid-date-picker__panel-quarter .oneid-date-picker__table table tbody { width: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; gap: var(--td-comp-margin-m); -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } .oneid-date-picker__panel-year .oneid-date-picker__table table tbody tr, .oneid-date-picker__panel-month .oneid-date-picker__table table tbody tr, .oneid-date-picker__panel-quarter .oneid-date-picker__table table tbody tr { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } .oneid-date-picker__panel-year .oneid-date-picker__cell--disabled + .oneid-date-picker__cell--disabled:before, .oneid-date-picker__panel-month .oneid-date-picker__cell--disabled + .oneid-date-picker__cell--disabled:before, .oneid-date-picker__panel-quarter .oneid-date-picker__cell--disabled + .oneid-date-picker__cell--disabled:before { left: calc(0px - var(--td-comp-size-xxxl)); } .oneid-date-picker__panel-year .oneid-date-picker__cell:nth-child(1), .oneid-date-picker__panel-month .oneid-date-picker__cell:nth-child(1), .oneid-date-picker__panel-quarter .oneid-date-picker__cell:nth-child(1) { text-align: left; } .oneid-date-picker__panel-year .oneid-date-picker__cell:nth-child(3), .oneid-date-picker__panel-month .oneid-date-picker__cell:nth-child(3), .oneid-date-picker__panel-quarter .oneid-date-picker__cell:nth-child(3) { text-align: right; } .oneid-date-picker__panel-year .oneid-date-picker__cell-inner, .oneid-date-picker__panel-month .oneid-date-picker__cell-inner, .oneid-date-picker__panel-quarter .oneid-date-picker__cell-inner { width: var(--td-comp-size-xxl); } .oneid-date-picker__cell { cursor: pointer; position: relative; padding: 0; } .oneid-date-picker__cell::before, .oneid-date-picker__cell::after { content: ""; position: absolute; top: 50%; right: -5%; left: -5%; z-index: 1; opacity: 0; border-radius: var(--td-radius-default); height: var(--td-comp-size-xs); -webkit-transform: translateY(-50%); transform: translateY(-50%); -webkit-transition: opacity 0.2s cubic-bezier(0, 0, 0.15, 1); transition: opacity 0.2s cubic-bezier(0, 0, 0.15, 1); } .oneid-date-picker__cell:hover .oneid-date-picker__cell-inner { -webkit-box-shadow: inset 0 0 0 1px var(--td-brand-color); box-shadow: inset 0 0 0 1px var(--td-brand-color); } .oneid-date-picker__cell-inner { position: relative; z-index: 5; display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; width: var(--td-comp-size-xs); height: var(--td-comp-size-xs); margin: calc(var(--td-comp-margin-xs) - 1px); border-radius: var(--td-radius-default); -webkit-transition: background-color 0.2s linear, border-color 0.2s linear, color 0.2s linear, -webkit-box-shadow 0.2s cubic-bezier(0.38, 0, 0.24, 1); transition: background-color 0.2s linear, border-color 0.2s linear, color 0.2s linear, -webkit-box-shadow 0.2s cubic-bezier(0.38, 0, 0.24, 1); transition: box-shadow 0.2s cubic-bezier(0.38, 0, 0.24, 1), background-color 0.2s linear, border-color 0.2s linear, color 0.2s linear; transition: box-shadow 0.2s cubic-bezier(0.38, 0, 0.24, 1), background-color 0.2s linear, border-color 0.2s linear, color 0.2s linear, -webkit-box-shadow 0.2s cubic-bezier(0.38, 0, 0.24, 1); } .oneid-date-picker__cell--now .oneid-date-picker__cell-inner { color: var(--td-brand-color); background: var(--td-brand-color-light); } .oneid-date-picker__cell--hover-highlight::after { opacity: 1; background-color: var(--td-brand-color-light); } .oneid-date-picker__cell--highlight::before { opacity: 1; background-color: var(--td-brand-color-light); } .oneid-date-picker__cell--highlight.oneid-date-picker__cell--hover-highlight::after { opacity: 1; background-color: rgba(0, 0, 0, 0.06); } .oneid-date-picker__cell--additional:hover .oneid-date-picker__cell-inner { -webkit-box-shadow: none; box-shadow: none; border-color: var(--td-bg-color-container-hover); background-color: var(--td-bg-color-container-hover); } .oneid-date-picker__cell--additional .oneid-date-picker__cell-inner { color: var(--td-text-color-disabled); } .oneid-date-picker__cell--active .oneid-date-picker__cell-inner { color: var(--td-text-color-anti); background-color: var(--td-brand-color); } .oneid-date-picker__cell--active-start::before { opacity: 1; left: calc((var(--td-comp-margin-xs) - 1px) * 2); border-top-left-radius: var(--td-radius-default); border-bottom-left-radius: var(--td-radius-default); } .oneid-date-picker__cell--active-start:hover::before { left: -5%; } .oneid-date-picker__cell--active-end::before { opacity: 1; right: calc((var(--td-comp-margin-xs) - 1px) * 2); border-top-right-radius: var(--td-radius-default); border-bottom-right-radius: var(--td-radius-default); } .oneid-date-picker__cell--active-end:hover::before { right: -5%; } .oneid-date-picker__cell--disabled:hover .oneid-date-picker__cell-inner { -webkit-box-shadow: none; box-shadow: none; background-color: var(--td-bg-color-component-disabled); } .oneid-date-picker__cell--disabled .oneid-date-picker__cell-inner { cursor: not-allowed; color: var(--td-text-color-disabled); background-color: var(--td-bg-color-component-disabled); } .oneid-date-picker__cell--disabled + .oneid-date-picker__cell--disabled::before { opacity: 1; left: calc(0px - var(--td-comp-size-l)); background-color: var(--td-bg-color-component-disabled); border-radius: var(--td-radius-default); } .oneid-date-picker__input--placeholder input { color: var(--td-text-color-placeholder); } .oneid-upload { font: var(--td-font-body-medium); color: var(--td-text-color-primary); -webkit-box-sizing: border-box; box-sizing: border-box; margin: 0; padding: 0; list-style: none; } .oneid-upload .oneid-is-bordered { border: 1px solid var(--td-component-border); } .oneid-upload .oneid-upload__trigger { display: inline-block; } .oneid-upload .oneid-icon { font-size: calc(var(--td-font-size-body-medium) + 2px); -ms-flex-negative: 0; flex-shrink: 0; } .oneid-upload .oneid-icon-check-circle-filled { color: var(--td-success-color); } .oneid-upload .oneid-icon-error-circle-filled { color: var(--td-error-color); } .oneid-upload .oneid-icon-time-filled { color: var(--td-text-color-placeholder); } .oneid-upload .oneid-icon-add { color: var(--td-text-color-primary); } .oneid-upload__list-file { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; width: 100px; height: 100px; margin-right: var(--td-comp-margin-m); overflow: hidden; } .oneid-upload__list-file .oneid-icon { font-size: var(--td-comp-size-xl); color: var(--td-brand-color); } .oneid-upload__list-item { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -ms-flex-align: center; align-items: center; margin-top: var(--td-comp-margin-m); width: 496px; height: 124px; padding: var(--td-comp-paddingTB-m) var(--td-comp-paddingLR-m); border: 1px solid var(--td-component-border); border-radius: var(--td-radius-default); font: var(--td-font-body-medium); } .oneid-upload__list-item.oneid-is--error .oneid-upload__list-name { color: var(--td-error-color); } .oneid-upload__list-item.oneid-is--error .oneid-upload__list-file .oneid-icon { color: var(--td-error-color); } .oneid-upload__list-content { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .oneid-upload-list__control { cursor: pointer; } .oneid-upload-list__control:hover { color: var(--td-error-color); } .oneid-upload__list-img { -o-object-fit: cover; object-fit: cover; max-width: 100%; max-height: 100%; cursor: pointer; } .oneid-upload__list-name { max-width: 200px; white-space: nowrap; word-wrap: normal; overflow: hidden; text-overflow: ellipsis; } .oneid-upload--highlight { color: var(--td-text-color-brand); } .oneid-upload__single-name { margin-right: var(--td-comp-margin-s); } .oneid-upload__card { font: var(--td-font-body-small); overflow: hidden; width: 100%; margin: 0; padding: 0; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; gap: var(--td-comp-margin-s); } .oneid-upload__card .oneid-is-disabled :hover { cursor: not-allowed; } .oneid-upload__card-item { cursor: pointer; -webkit-box-sizing: border-box; box-sizing: border-box; list-style: none; } .oneid-upload__card-item::after { content: ""; display: block; } .oneid-upload__card-item:hover .oneid-upload__card-mask { opacity: 1; -webkit-transition: opacity 0.2s linear; transition: opacity 0.2s linear; } .oneid-upload__card-item.oneid-is--error .oneid-icon-warning_fill { color: var(--td-error-color); margin-bottom: var(--td-comp-margin-s); } .oneid-upload__card-item.oneid-is--error .oneid-upload__card-status { color: var(--td-error-color); } .oneid-upload__card-item.oneid-is-background { -webkit-transition: border-color 0.2s linear; transition: border-color 0.2s linear; } .oneid-upload__card .oneid-icon-loading { margin-bottom: var(--td-comp-margin-s); } .oneid-upload__card-name { max-width: 100%; margin-top: var(--td-comp-margin-s); white-space: nowrap; word-wrap: normal; overflow: hidden; text-overflow: ellipsis; } .oneid-upload__card-content { position: relative; width: 110px; height: 110px; overflow: hidden; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-sizing: border-box; box-sizing: border-box; background-color: var(--td-bg-color-secondarycontainer); border: 1px dashed var(--td-component-border); padding: var(--td-comp-paddingTB-s) var(--td-comp-paddingLR-s); border-radius: var(--td-radius-default); } .oneid-upload__card-container { width: 110px; height: 110px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; background-color: var(--td-bg-color-secondarycontainer); border: 1px dashed var(--td-component-border); -webkit-box-sizing: border-box; box-sizing: border-box; position: relative; border-radius: var(--td-radius-default); -webkit-transition: border 0.2s linear; transition: border 0.2s linear; } .oneid-upload__card-container:hover:not(.oneid-is-disabled) { border-color: var(--td-brand-color); -webkit-transition: border-color 0.2s linear; transition: border-color 0.2s linear; } .oneid-upload__card-container > .oneid-icon { color: var(--td-text-color-placeholder); } .oneid-upload__card-container > .oneid-icon, .oneid-upload__card-container .oneid-loading { font-size: var(--td-comp-size-xs); margin-bottom: var(--td-comp-margin-s); } .oneid-upload__card-container > p, .oneid-upload__card-container .oneid-upload__add-text { color: var(--td-text-color-placeholder); margin: 0; } .oneid-upload__card-status-wrap { text-align: center; } .oneid-upload__card-status-wrap > svg { margin-bottom: var(--td-comp-margin-s); } .oneid-upload__card-status-wrap .oneid-icon, .oneid-upload__card-status-wrap .oneid-loading { font-size: var(--td-comp-size-xs); } .oneid-upload__card-image { max-width: 100%; max-height: 100%; width: 100%; height: 100%; } .oneid-upload__card-status { color: var(--td-text-color-disabled); font: var(--td-font-body-small); } .oneid-upload__card-mask { background-color: var(--td-mask-active); color: var(--td-text-color-anti); will-change: transform; opacity: 0; z-index: 2; -webkit-transition: opacity 0.2s linear; transition: opacity 0.2s linear; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; position: absolute; left: 0; right: 0; top: 0; bottom: 0; } .oneid-upload__card-mask-item-divider { margin: 0 var(--td-comp-margin-l); border-left: 1px var(--td-text-color-anti) solid; height: var(--td-comp-size-xxxs); } .oneid-upload__card-mask-item > .oneid-icon { cursor: pointer; font-size: calc(var(--td-font-size-body-medium) + 2px); } .oneid-upload__dialog .oneid-dialog { max-width: 80%; } .oneid-upload__dialog .oneid-dialog--default { padding: 32px; } .oneid-upload__dialog .oneid-dialog-body { padding-bottom: 0; } .oneid-upload__dialog .oneid-dialog-body-img-box img { display: block; max-width: 100%; max-height: 100%; } .oneid-upload__dragger { display: -webkit-box; display: -ms-flexbox; display: flex; width: 336px; height: 144px; border: 1px dashed var(--td-component-border); border-radius: var(--td-radius-small); font: var(--td-font-body-medium); color: var(--td-text-color-secondary); cursor: pointer; padding: var(--td-comp-margin-l); position: relative; overflow: auto; -webkit-box-sizing: border-box; box-sizing: border-box; -webkit-transition: border-color 0.2s linear; transition: border-color 0.2s linear; } .oneid-upload__dragger.oneid-is--active { background-color: var(--td-bg-color-container-active); border-color: var(--td-brand-color); } .oneid-upload__dragger:hover { border-color: var(--td-brand-color); } .oneid-upload__dragger-btns { position: absolute; bottom: var(--td-comp-margin-l); } .oneid-upload__dragger .oneid-size-s { display: block; } .oneid-upload__dragger-center { -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .oneid-upload__dragger-error { border-color: var(--td-error-color); } .oneid-upload__dragger-error:hover { border-color: var(--td-error-color); } .oneid-upload__dragger-text { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; font: var(--td-font-body-medium); color: var(--td-text-color-primary); margin-bottom: var(--td-comp-margin-s); max-width: calc(336px - var(--td-comp-margin-l) * 2 - 0); } .oneid-upload__dragger-text .oneid-upload__single-name { white-space: nowrap; word-wrap: normal; overflow: hidden; text-overflow: ellipsis; } .oneid-upload__tips { display: block; color: var(--td-text-color-placeholder); margin-top: var(--td-comp-margin-s); font: var(--td-font-body-small); } .oneid-upload__tips.oneid-upload__tips-error { color: var(--td-error-color); } .oneid-upload__tips.oneid-upload__tips-warn { color: var(--td-warning-color); } .oneid-upload__placeholder { color: var(--td-text-color-placeholder); } .oneid-upload__display-text--margin { margin-top: var(--td-comp-margin-s); } .oneid-upload__single-display-text { color: var(--td-text-color-secondary); font: var(--td-font-body-small); display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .oneid-upload__single-display-text .oneid-upload__flow-status .oneid-icon { font-size: calc(var(--td-font-size-body-medium) + 2px); } .oneid-icon-clear-circle-filled { color: var(--td-text-color-placeholder); margin-top: var(--td-comp-margin-xxs); -webkit-transition: color 0.2s linear; transition: color 0.2s linear; } .oneid-icon-clear-circle-filled:hover { color: var(--td-text-color-secondary); cursor: pointer; -webkit-transition: color 0.2s linear; transition: color 0.2s linear; } .oneid-upload__single-percent { margin-left: var(--td-comp-margin-xs); } .oneid-upload__single-progress { color: var(--td-brand-color); display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .oneid-upload__single-progress .oneid-loading { font-size: calc(var(--td-font-size-body-medium) + 2px); -ms-flex-negative: 0; flex-shrink: 0; } .oneid-upload__single-input-delete { margin-left: var(--td-comp-margin-l); font: var(--td-font-body-medium); color: var(--td-brand-color); cursor: pointer; } .oneid-upload__single-input-preview { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-flex: 1; -ms-flex: 1; flex: 1; } .oneid-upload__single-input-text { display: block; white-space: nowrap; word-wrap: normal; overflow: hidden; text-overflow: ellipsis; } .oneid-upload__single-file-input { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .oneid-upload__single-file-input .oneid-upload__trigger { margin-left: var(--td-comp-margin-l); } .oneid-upload__single-file-input .oneid-upload__single-progress { white-space: nowrap; } .oneid-upload__single-file-input .oneid-input__inner { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } .oneid-upload__dragger-progress { width: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; } .oneid-upload__dragger-progress .oneid-icon, .oneid-upload__dragger-progress .oneid-loading { font-size: calc(var(--td-font-size-body-medium) + 2px); -ms-flex-negative: 0; flex-shrink: 0; } .oneid-upload__dragger-img-wrap { width: 110px; height: 110px; background-color: var(--td-bg-color-secondarycontainer); border-radius: var(--td-radius-default); display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -ms-flex-negative: 0; flex-shrink: 0; } .oneid-upload__dragger-img-wrap > .oneid-image__wrapper--shape-square { width: 100%; } .oneid-upload__dragger-img-wrap > .oneid-image__wrapper--shape-square .oneid-space-item { text-align: center; } .oneid-upload__dragger-img-wrap > img { max-width: 100%; max-height: 100%; } .oneid-upload__dragger-img-wrap + .oneid-upload__dragger-progress-info { margin-left: var(--td-comp-margin-l); max-width: calc(336px - var(--td-comp-margin-l) * 2 - (110px + var(--td-comp-margin-l))); } .oneid-upload__dragger-progress-info { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; } .oneid-upload__dragger-progress-info .oneid-upload__single-display-text { margin-bottom: var(--td-comp-margin-s); } .oneid-upload__dragger-progress-info .oneid-button:hover { background-color: transparent; } .oneid-upload__dragger-progress-cancel, .oneid-upload__dragger-progress-reupload { margin-right: var(--td-comp-margin-l); } .oneid-upload__dragger-progress-cancel:hover, .oneid-upload__dragger-progress-reupload:hover { border-color: transparent; } .oneid-upload__dragger-delete-btn:hover, .oneid-upload__dragger-upload-btn:hover { border-color: transparent; } .oneid-upload__flow-image-flow { width: 498px; } .oneid-upload__flow { min-width: 498px; max-width: 960px; } .oneid-upload__flow-placeholder { display: inline-block; margin-left: var(--td-comp-margin-l); } .oneid-upload__flow-op { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .oneid-upload__flow-bottom { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; margin-top: var(--td-comp-margin-xxl); } .oneid-upload__flow-bottom .oneid-button + .oneid-button { margin-left: var(--td-comp-margin-s); } .oneid-upload__flow-empty { width: 100%; height: 184px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; color: var(--td-text-color-placeholder); } .oneid-upload__flow-table { width: 100%; border: 1px dashed var(--td-component-border); margin-top: var(--td-comp-margin-xxl); border-collapse: collapse; } .oneid-upload__flow-table > thead > tr, .oneid-upload__flow-table > tbody > tr, .oneid-upload__flow-table > tfoot > tr, .oneid-upload__flow-table > tr { border-top: 1px solid var(--td-component-border); } .oneid-upload__flow-table > thead > tr > th, .oneid-upload__flow-table > tbody > tr > th, .oneid-upload__flow-table > tfoot > tr > th, .oneid-upload__flow-table > tr > th { color: var(--td-text-color-placeholder); font-weight: normal; border: 1px solid var(--td-component-border); text-align: left; background-color: var(--td-bg-color-container); } .oneid-upload__flow-table > thead > tr > td, .oneid-upload__flow-table > tbody > tr > td, .oneid-upload__flow-table > tfoot > tr > td, .oneid-upload__flow-table > tr > td { color: var(--td-text-color-primary); } .oneid-upload__flow-table > thead > tr > td, .oneid-upload__flow-table > tbody > tr > td, .oneid-upload__flow-table > tfoot > tr > td, .oneid-upload__flow-table > tr > td, .oneid-upload__flow-table > thead > tr > th, .oneid-upload__flow-table > tbody > tr > th, .oneid-upload__flow-table > tfoot > tr > th, .oneid-upload__flow-table > tr > th { padding: var(--td-comp-paddingTB-m) var(--td-comp-paddingLR-l); } .oneid-upload__flow-table__batch-row { border-left: 1px solid var(--td-component-border); } .oneid-upload__flow-button { color: var(--td-text-color-placeholder); cursor: pointer; -webkit-transition: color 0.2s linear; transition: color 0.2s linear; } .oneid-upload__flow-button:hover { color: var(--td-text-color-secondary); } .oneid-upload__flow-status { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .oneid-upload__flow-status .oneid-icon, .oneid-upload__flow-status .oneid-loading { margin-right: var(--td-comp-margin-s); font-size: calc(var(--td-font-size-body-medium) + 2px); } .oneid-upload__flow-card-area { border: 1px dashed var(--td-component-border); padding: var(--td-comp-paddingTB-m) var(--td-comp-paddingLR-m); margin-top: var(--td-comp-margin-xxl); -webkit-transition: border 0.2s linear; transition: border 0.2s linear; } .oneid-upload__flow-card-area:hover { border-color: var(--td-brand-color); -webkit-transition: border-color 0.2s linear; transition: border-color 0.2s linear; } .oneid-upload__icon-delete, .oneid-upload__single-input-clear { color: var(--td-text-color-placeholder); cursor: pointer; -webkit-transition: color 0.2s linear; transition: color 0.2s linear; } .oneid-upload__icon-delete:hover, .oneid-upload__single-input-clear:hover { color: var(--td-text-color-secondary); -webkit-transition: color 0.2s linear; transition: color 0.2s linear; } .oneid-icon.oneid-upload__single-input-clear { display: none; } .oneid-upload__single-input-preview:hover .oneid-upload__single-input-clear { display: initial; } .oneid-upload__single-input-preview:hover .oneid-upload__status-icon { display: none; } .oneid-upload .oneid-upload__single-name { color: var(--td-text-color-secondary); } .oneid-upload .oneid-upload__file-thumbnail { margin-right: var(--td-comp-paddingLR-s); width: var(--td-comp-size-xxl); height: var(--td-comp-size-xxl); display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; cursor: pointer; } .oneid-upload .oneid-upload__file-thumbnail > svg { font-size: var(--td-comp-size-s); color: var(--td-text-color-placeholder); } .oneid-upload__card-name { margin-top: 8px; } .oneid-upload--theme-file-input { width: 100%; } .oneid-upload__dragger-btns > .oneid-button { padding: 0; } .oneid-upload__file-info { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .oneid-upload__card-container.oneid-is-disabled { cursor: not-allowed; } .oneid-upload__card-container.oneid-is-disabled .oneid-upload__add-text { color: var(--td-text-color-disabled); } .oneid-upload__card-container.oneid-is-disabled .oneid-icon { color: var(--td-text-color-disabled); } /* Swiper */ .oneid-swiper { font: var(--td-font-body-medium); color: var(--td-text-color-primary); -webkit-box-sizing: border-box; box-sizing: border-box; margin: 0; padding: 0; list-style: none; position: relative; height: -webkit-fit-content; height: -moz-fit-content; height: fit-content; } .oneid-swiper__wrap { display: block; position: relative; height: 100%; } .oneid-swiper__content { position: relative; z-index: 1; overflow: hidden; } .oneid-swiper__container { position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; height: 100%; z-index: 1; } .oneid-swiper__container__item { -webkit-box-flex: 0; -ms-flex: 0 0 auto; flex: 0 0 auto; width: 100%; height: 100%; display: inline-block; } .oneid-swiper__arrow { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .oneid-swiper__arrow svg.oneid-icon { width: 20px; height: 20px; } .oneid-swiper__arrow svg.oneid-icon::before { font-size: 24px; } .oneid-swiper__arrow--default .oneid-swiper__arrow-left { position: absolute; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); display: -webkit-box; display: -ms-flexbox; display: flex; width: 24px; height: 24px; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; z-index: 2; background-color: transparent; color: var(--td-font-white-2); -webkit-transition: 0.2s linear; transition: 0.2s linear; cursor: pointer; left: 16px; } .oneid-swiper__arrow--default .oneid-swiper__arrow-left:hover { color: var(--td-bg-color-container); background-color: var(--td-font-white-4); border-radius: var(--td-radius-default); -webkit-transition: 0.2s linear; transition: 0.2s linear; } .oneid-swiper__arrow--default .oneid-swiper__arrow-left:active { background-color: var(--td-font-white-3); -webkit-transition: 0.2s linear; transition: 0.2s linear; } .oneid-swiper__arrow--default .oneid-swiper__arrow-right { position: absolute; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); display: -webkit-box; display: -ms-flexbox; display: flex; width: 24px; height: 24px; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; z-index: 2; background-color: transparent; color: var(--td-font-white-2); -webkit-transition: 0.2s linear; transition: 0.2s linear; cursor: pointer; right: 16px; } .oneid-swiper__arrow--default .oneid-swiper__arrow-right:hover { color: var(--td-bg-color-container); background-color: var(--td-font-white-4); border-radius: var(--td-radius-default); -webkit-transition: 0.2s linear; transition: 0.2s linear; } .oneid-swiper__arrow--default .oneid-swiper__arrow-right:active { background-color: var(--td-font-white-3); -webkit-transition: 0.2s linear; transition: 0.2s linear; } .oneid-swiper-card .oneid-swiper__container { display: block; } .oneid-swiper-card .oneid-swiper__container .oneid-is-active { z-index: 2; } .oneid-swiper-card .oneid-swiper__card { position: absolute; top: 0; left: 0; width: 41.5%; height: 100%; z-index: 0; } .oneid-swiper-fade .oneid-swiper__container { display: block; } .oneid-swiper-fade .oneid-swiper__fade { position: absolute; top: 0; left: 0; } .oneid-swiper__navigation { position: absolute; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; bottom: 0; margin: 0; padding: 0; z-index: 2; } .oneid-swiper__navigation > li { -webkit-box-flex: 1; -ms-flex: 1 0 auto; flex: 1 0 auto; list-style-type: none; display: -webkit-box; display: -ms-flexbox; display: flex; } .oneid-swiper__navigation .oneid-swiper__arrow svg.oneid-icon { width: 16px; height: 16px; } .oneid-swiper__navigation-bars .oneid-swiper__navigation-item { cursor: pointer; margin: 0 0 0 6px; padding: 18px 0; width: 14px; height: auto; } .oneid-swiper__navigation-bars .oneid-swiper__navigation-item span { width: 100%; height: 3px; } .oneid-swiper__navigation-bars .oneid-swiper__navigation-item:nth-child(1) { margin-left: 0; } .oneid-swiper__navigation-bars .oneid-swiper__navigation-item span { background: var(--td-font-white-4); } .oneid-swiper__navigation-bars .oneid-swiper__navigation-item span:hover { background-color: var(--td-font-white-2); } .oneid-swiper__navigation-bars .oneid-swiper__navigation-item span:active { background-color: var(--td-bg-color-container); } .oneid-swiper__navigation-bars .oneid-swiper__navigation-item.oneid-is-active { width: 24px; } .oneid-swiper__navigation-bars .oneid-swiper__navigation-item.oneid-is-active span { background-color: var(--td-bg-color-container); } .oneid-swiper__navigation-dots-bar .oneid-swiper__navigation-item { cursor: pointer; margin: 0 0 0 6px; padding: 18px 0; width: 14px; height: auto; } .oneid-swiper__navigation-dots-bar .oneid-swiper__navigation-item span { border-radius: 1.5px; } .oneid-swiper__navigation-dots-bar .oneid-swiper__navigation-item span { width: 100%; height: 3px; } .oneid-swiper__navigation-dots-bar .oneid-swiper__navigation-item:nth-child(1) { margin-left: 0; } .oneid-swiper__navigation-dots-bar .oneid-swiper__navigation-item span { background: var(--td-font-white-4); } .oneid-swiper__navigation-dots-bar .oneid-swiper__navigation-item span:hover { background-color: var(--td-font-white-2); } .oneid-swiper__navigation-dots-bar .oneid-swiper__navigation-item span:active { background-color: var(--td-bg-color-container); } .oneid-swiper__navigation-dots-bar .oneid-swiper__navigation-item.oneid-is-active { width: 24px; } .oneid-swiper__navigation-dots-bar .oneid-swiper__navigation-item.oneid-is-active span { background-color: var(--td-bg-color-container); } .oneid-swiper__navigation-dots .oneid-swiper__navigation-item { cursor: pointer; margin: 0 0 0 6px; padding: 18px 0; width: var(--td-size-2); height: auto; } .oneid-swiper__navigation-dots .oneid-swiper__navigation-item span { border-radius: 50%; } .oneid-swiper__navigation-dots .oneid-swiper__navigation-item span { width: 100%; height: var(--td-size-2); } .oneid-swiper__navigation-dots .oneid-swiper__navigation-item:nth-child(1) { margin-left: 0; } .oneid-swiper__navigation-dots .oneid-swiper__navigation-item span { background: var(--td-font-white-4); } .oneid-swiper__navigation-dots .oneid-swiper__navigation-item span:hover { background-color: var(--td-font-white-2); } .oneid-swiper__navigation-dots .oneid-swiper__navigation-item span:active { background-color: var(--td-bg-color-container); } .oneid-swiper__navigation-dots .oneid-swiper__navigation-item.oneid-is-active span { background-color: var(--td-bg-color-container); } .oneid-swiper__navigation--fraction { position: absolute; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); top: auto; right: auto; bottom: calc(0px - (var(--td-line-height-body-medium) + 12px)); height: var(--td-line-height-body-medium); line-height: var(--td-line-height-body-medium); } .oneid-swiper__navigation--fraction .oneid-swiper__arrow-left { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; z-index: 2; background-color: transparent; color: var(--td-text-color-secondary); width: var(--td-line-height-body-medium); height: var(--td-line-height-body-medium); cursor: pointer; } .oneid-swiper__navigation--fraction .oneid-swiper__arrow-left:hover { color: var(--td-text-color-primary); } .oneid-swiper__navigation--fraction .oneid-swiper__arrow-left:active { color: var(--td-brand-color-active); } .oneid-swiper__navigation--fraction .oneid-swiper__arrow-right { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; z-index: 2; background-color: transparent; color: var(--td-text-color-secondary); width: var(--td-line-height-body-medium); height: var(--td-line-height-body-medium); cursor: pointer; } .oneid-swiper__navigation--fraction .oneid-swiper__arrow-right:hover { color: var(--td-text-color-primary); } .oneid-swiper__navigation--fraction .oneid-swiper__arrow-right:active { color: var(--td-brand-color-active); } .oneid-swiper__navigation--fraction .oneid-swiper__navigation-text-fraction { display: inline-block; font-size: var(--td-font-size-body-medium); color: var(--td-text-color-secondary); margin: 0; } .oneid-swiper--vertical .oneid-swiper__container { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } .oneid-swiper--vertical .oneid-swiper__navigation { position: absolute; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); left: auto; right: 0; bottom: auto; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .oneid-swiper--vertical .oneid-swiper__navigation-bars .oneid-swiper__navigation-item { cursor: pointer; margin: 6px 0 0 0; padding: 0 18px; width: auto; height: 14px; } .oneid-swiper--vertical .oneid-swiper__navigation-bars .oneid-swiper__navigation-item span { width: 3px; height: 100%; } .oneid-swiper--vertical .oneid-swiper__navigation-bars .oneid-swiper__navigation-item:nth-child(1) { margin-top: 0; } .oneid-swiper--vertical .oneid-swiper__navigation-bars .oneid-swiper__navigation-item span { background: var(--td-font-white-4); } .oneid-swiper--vertical .oneid-swiper__navigation-bars .oneid-swiper__navigation-item span:hover { background-color: var(--td-font-white-2); } .oneid-swiper--vertical .oneid-swiper__navigation-bars .oneid-swiper__navigation-item span:active { background-color: var(--td-bg-color-container); } .oneid-swiper--vertical .oneid-swiper__navigation-bars .oneid-swiper__navigation-item.oneid-is-active { height: 24px; } .oneid-swiper--vertical .oneid-swiper__navigation-bars .oneid-swiper__navigation-item.oneid-is-active span { background-color: var(--td-bg-color-container); } .oneid-swiper--vertical .oneid-swiper__navigation-dots-bar .oneid-swiper__navigation-item { cursor: pointer; margin: 6px 0 0 0; padding: 0 18px; width: auto; height: 14px; } .oneid-swiper--vertical .oneid-swiper__navigation-dots-bar .oneid-swiper__navigation-item span { border-radius: 1.5px; } .oneid-swiper--vertical .oneid-swiper__navigation-dots-bar .oneid-swiper__navigation-item span { width: 3px; height: 100%; } .oneid-swiper--vertical .oneid-swiper__navigation-dots-bar .oneid-swiper__navigation-item:nth-child(1) { margin-top: 0; } .oneid-swiper--vertical .oneid-swiper__navigation-dots-bar .oneid-swiper__navigation-item span { background: var(--td-font-white-4); } .oneid-swiper--vertical .oneid-swiper__navigation-dots-bar .oneid-swiper__navigation-item span:hover { background-color: var(--td-font-white-2); } .oneid-swiper--vertical .oneid-swiper__navigation-dots-bar .oneid-swiper__navigation-item span:active { background-color: var(--td-bg-color-container); } .oneid-swiper--vertical .oneid-swiper__navigation-dots-bar .oneid-swiper__navigation-item.oneid-is-active { height: 24px; } .oneid-swiper--vertical .oneid-swiper__navigation-dots-bar .oneid-swiper__navigation-item.oneid-is-active span { background-color: var(--td-bg-color-container); } .oneid-swiper--vertical .oneid-swiper__navigation-dots .oneid-swiper__navigation-item { cursor: pointer; margin: 6px 0 0 0; padding: 0 18px; width: auto; max-height: var(--td-size-2); } .oneid-swiper--vertical .oneid-swiper__navigation-dots .oneid-swiper__navigation-item span { border-radius: 50%; } .oneid-swiper--vertical .oneid-swiper__navigation-dots .oneid-swiper__navigation-item span { width: var(--td-size-2); height: 100%; } .oneid-swiper--vertical .oneid-swiper__navigation-dots .oneid-swiper__navigation-item:nth-child(1) { margin-top: 0; } .oneid-swiper--vertical .oneid-swiper__navigation-dots .oneid-swiper__navigation-item span { background: var(--td-font-white-4); } .oneid-swiper--vertical .oneid-swiper__navigation-dots .oneid-swiper__navigation-item span:hover { background-color: var(--td-font-white-2); } .oneid-swiper--vertical .oneid-swiper__navigation-dots .oneid-swiper__navigation-item span:active { background-color: var(--td-bg-color-container); } .oneid-swiper--vertical .oneid-swiper__navigation-dots .oneid-swiper__navigation-item.oneid-is-active span { background-color: var(--td-bg-color-container); } .oneid-swiper--outside .oneid-swiper__navigation { bottom: -36px; } .oneid-swiper--outside .oneid-swiper__navigation--fraction { position: absolute; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); top: auto; right: auto; bottom: calc(0px - (var(--td-line-height-body-medium) + 12px)); height: var(--td-line-height-body-medium); line-height: var(--td-line-height-body-medium); } .oneid-swiper--outside .oneid-swiper__navigation--fraction .oneid-swiper__arrow-left { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; z-index: 2; background-color: transparent; color: var(--td-text-color-secondary); width: var(--td-line-height-body-medium); height: var(--td-line-height-body-medium); cursor: pointer; } .oneid-swiper--outside .oneid-swiper__navigation--fraction .oneid-swiper__arrow-left:hover { color: var(--td-text-color-primary); } .oneid-swiper--outside .oneid-swiper__navigation--fraction .oneid-swiper__arrow-left:active { color: var(--td-brand-color-active); } .oneid-swiper--outside .oneid-swiper__navigation--fraction .oneid-swiper__arrow-right { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; z-index: 2; background-color: transparent; color: var(--td-text-color-secondary); width: var(--td-line-height-body-medium); height: var(--td-line-height-body-medium); cursor: pointer; } .oneid-swiper--outside .oneid-swiper__navigation--fraction .oneid-swiper__arrow-right:hover { color: var(--td-text-color-primary); } .oneid-swiper--outside .oneid-swiper__navigation--fraction .oneid-swiper__arrow-right:active { color: var(--td-brand-color-active); } .oneid-swiper--outside .oneid-swiper__navigation--fraction .oneid-swiper__navigation-text-fraction { display: inline-block; font-size: var(--td-font-size-body-medium); color: var(--td-text-color-secondary); margin: 0; } .oneid-swiper--outside .oneid-swiper__navigation-bars .oneid-swiper__navigation-item span { background-color: var(--td-text-color-disabled); } .oneid-swiper--outside .oneid-swiper__navigation-bars .oneid-swiper__navigation-item span:hover { background-color: var(--td-text-color-primary); } .oneid-swiper--outside .oneid-swiper__navigation-bars .oneid-swiper__navigation-item span:active { background-color: var(--td-brand-color-active); } .oneid-swiper--outside .oneid-swiper__navigation-bars .oneid-is-active span { background-color: var(--td-brand-color-active); } .oneid-swiper--outside.oneid-swiper--vertical .oneid-swiper__navigation { bottom: auto; right: -36px; } .oneid-swiper--outside.oneid-swiper--vertical .oneid-swiper__navigation--fraction { position: absolute; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); top: auto; right: auto; bottom: calc(0px - (var(--td-line-height-body-medium) + 12px)); height: var(--td-line-height-body-medium); line-height: var(--td-line-height-body-medium); } .oneid-swiper--outside.oneid-swiper--vertical .oneid-swiper__navigation--fraction .oneid-swiper__arrow-left { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; z-index: 2; background-color: transparent; color: var(--td-text-color-secondary); width: var(--td-line-height-body-medium); height: var(--td-line-height-body-medium); cursor: pointer; } .oneid-swiper--outside.oneid-swiper--vertical .oneid-swiper__navigation--fraction .oneid-swiper__arrow-left:hover { color: var(--td-text-color-primary); } .oneid-swiper--outside.oneid-swiper--vertical .oneid-swiper__navigation--fraction .oneid-swiper__arrow-left:active { color: var(--td-brand-color-active); } .oneid-swiper--outside.oneid-swiper--vertical .oneid-swiper__navigation--fraction .oneid-swiper__arrow-right { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; z-index: 2; background-color: transparent; color: var(--td-text-color-secondary); width: var(--td-line-height-body-medium); height: var(--td-line-height-body-medium); cursor: pointer; } .oneid-swiper--outside.oneid-swiper--vertical .oneid-swiper__navigation--fraction .oneid-swiper__arrow-right:hover { color: var(--td-text-color-primary); } .oneid-swiper--outside.oneid-swiper--vertical .oneid-swiper__navigation--fraction .oneid-swiper__arrow-right:active { color: var(--td-brand-color-active); } .oneid-swiper--outside.oneid-swiper--vertical .oneid-swiper__navigation--fraction .oneid-swiper__navigation-text-fraction { display: inline-block; font-size: var(--td-font-size-body-medium); color: var(--td-text-color-secondary); margin: 0; } .oneid-swiper--outside.oneid-swiper--vertical .oneid-swiper__navigation-bars .oneid-swiper__navigation-item span { background-color: var(--td-text-color-disabled); } .oneid-swiper--outside.oneid-swiper--vertical .oneid-swiper__navigation-bars .oneid-swiper__navigation-item span:hover { background-color: var(--td-text-color-primary); } .oneid-swiper--outside.oneid-swiper--vertical .oneid-swiper__navigation-bars .oneid-swiper__navigation-item span:active { background-color: var(--td-brand-color-active); } .oneid-swiper--outside.oneid-swiper--vertical .oneid-swiper__navigation-bars .oneid-is-active span { background-color: var(--td-brand-color-active); } .oneid-swiper--inside .oneid-swiper__navigation { bottom: 0; } .oneid-swiper--inside .oneid-swiper__navigation--fraction { position: absolute; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); top: auto; right: auto; bottom: calc(0px - (var(--td-line-height-body-medium) + 12px)); height: var(--td-line-height-body-medium); line-height: var(--td-line-height-body-medium); } .oneid-swiper--inside .oneid-swiper__navigation--fraction .oneid-swiper__arrow-left { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; z-index: 2; background-color: transparent; color: var(--td-text-color-secondary); width: var(--td-line-height-body-medium); height: var(--td-line-height-body-medium); cursor: pointer; } .oneid-swiper--inside .oneid-swiper__navigation--fraction .oneid-swiper__arrow-left:hover { color: var(--td-text-color-primary); } .oneid-swiper--inside .oneid-swiper__navigation--fraction .oneid-swiper__arrow-left:active { color: var(--td-brand-color-active); } .oneid-swiper--inside .oneid-swiper__navigation--fraction .oneid-swiper__arrow-right { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; z-index: 2; background-color: transparent; color: var(--td-text-color-secondary); width: var(--td-line-height-body-medium); height: var(--td-line-height-body-medium); cursor: pointer; } .oneid-swiper--inside .oneid-swiper__navigation--fraction .oneid-swiper__arrow-right:hover { color: var(--td-text-color-primary); } .oneid-swiper--inside .oneid-swiper__navigation--fraction .oneid-swiper__arrow-right:active { color: var(--td-brand-color-active); } .oneid-swiper--inside .oneid-swiper__navigation--fraction .oneid-swiper__navigation-text-fraction { display: inline-block; font-size: var(--td-font-size-body-medium); color: var(--td-text-color-secondary); margin: 0; } .oneid-swiper--large .oneid-swiper__arrow i.oneid-icon::before { font-size: 32px; } .oneid-swiper--large .oneid-swiper__arrow--default .oneid-swiper__arrow-left { width: 32px; height: 32px; left: 24px; } .oneid-swiper--large .oneid-swiper__arrow--default .oneid-swiper__arrow-right { width: 32px; height: 32px; right: 24px; } .oneid-swiper--large .oneid-swiper__navigation-bars .oneid-swiper__navigation-item { cursor: pointer; margin: 0 0 0 8px; padding: 24px 0; width: 21px; height: auto; } .oneid-swiper--large .oneid-swiper__navigation-bars .oneid-swiper__navigation-item span { width: 100%; height: 4px; } .oneid-swiper--large .oneid-swiper__navigation-bars .oneid-swiper__navigation-item:nth-child(1) { margin-left: 0; } .oneid-swiper--large .oneid-swiper__navigation-bars .oneid-swiper__navigation-item span { background: var(--td-font-white-4); } .oneid-swiper--large .oneid-swiper__navigation-bars .oneid-swiper__navigation-item span:hover { background-color: var(--td-font-white-2); } .oneid-swiper--large .oneid-swiper__navigation-bars .oneid-swiper__navigation-item span:active { background-color: var(--td-bg-color-container); } .oneid-swiper--large .oneid-swiper__navigation-bars .oneid-swiper__navigation-item.oneid-is-active { width: 36px; } .oneid-swiper--large .oneid-swiper__navigation-bars .oneid-swiper__navigation-item.oneid-is-active span { background-color: var(--td-bg-color-container); } .oneid-swiper--large .oneid-swiper__navigation--fraction { position: absolute; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); top: auto; right: auto; bottom: calc(0px - (var(--td-line-height-body-large) + 12px)); height: var(--td-line-height-body-large); line-height: var(--td-line-height-body-large); } .oneid-swiper--large .oneid-swiper__navigation--fraction .oneid-swiper__arrow-left { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; z-index: 2; background-color: transparent; color: var(--td-text-color-secondary); width: var(--td-line-height-body-large); height: var(--td-line-height-body-large); cursor: pointer; } .oneid-swiper--large .oneid-swiper__navigation--fraction .oneid-swiper__arrow-left:hover { color: var(--td-text-color-primary); } .oneid-swiper--large .oneid-swiper__navigation--fraction .oneid-swiper__arrow-left:active { color: var(--td-brand-color-active); } .oneid-swiper--large .oneid-swiper__navigation--fraction .oneid-swiper__arrow-right { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; z-index: 2; background-color: transparent; color: var(--td-text-color-secondary); width: var(--td-line-height-body-large); height: var(--td-line-height-body-large); cursor: pointer; } .oneid-swiper--large .oneid-swiper__navigation--fraction .oneid-swiper__arrow-right:hover { color: var(--td-text-color-primary); } .oneid-swiper--large .oneid-swiper__navigation--fraction .oneid-swiper__arrow-right:active { color: var(--td-brand-color-active); } .oneid-swiper--large .oneid-swiper__navigation--fraction .oneid-swiper__navigation-text-fraction { display: inline-block; font-size: var(--td-font-size-body-large); color: var(--td-text-color-secondary); margin: 0; } .oneid-swiper--large.oneid-swiper--outside .oneid-swiper__navigation { bottom: -48px; } .oneid-swiper--large.oneid-swiper--outside .oneid-swiper__navigation-bars .oneid-swiper__navigation-item span { background-color: var(--td-text-color-disabled); } .oneid-swiper--large.oneid-swiper--outside .oneid-swiper__navigation-bars .oneid-swiper__navigation-item span:hover { background-color: var(--td-text-color-primary); } .oneid-swiper--large.oneid-swiper--outside .oneid-swiper__navigation-bars .oneid-swiper__navigation-item span:active { background-color: var(--td-brand-color-active); } .oneid-swiper--large.oneid-swiper--outside .oneid-swiper__navigation-bars .oneid-is-active span { background-color: var(--td-brand-color-active); } .oneid-swiper--large.oneid-swiper--vertical .oneid-swiper__navigation-bars .oneid-swiper__navigation-item { cursor: pointer; margin: 8px 0 0 0; padding: 0 24px; width: auto; height: 21px; } .oneid-swiper--large.oneid-swiper--vertical .oneid-swiper__navigation-bars .oneid-swiper__navigation-item span { width: 4px; height: 100%; } .oneid-swiper--large.oneid-swiper--vertical .oneid-swiper__navigation-bars .oneid-swiper__navigation-item:nth-child(1) { margin-top: 0; } .oneid-swiper--large.oneid-swiper--vertical .oneid-swiper__navigation-bars .oneid-swiper__navigation-item span { background: var(--td-font-white-4); } .oneid-swiper--large.oneid-swiper--vertical .oneid-swiper__navigation-bars .oneid-swiper__navigation-item span:hover { background-color: var(--td-font-white-2); } .oneid-swiper--large.oneid-swiper--vertical .oneid-swiper__navigation-bars .oneid-swiper__navigation-item span:active { background-color: var(--td-bg-color-container); } .oneid-swiper--large.oneid-swiper--vertical .oneid-swiper__navigation-bars .oneid-swiper__navigation-item.oneid-is-active { height: 36px; } .oneid-swiper--large.oneid-swiper--vertical .oneid-swiper__navigation-bars .oneid-swiper__navigation-item.oneid-is-active span { background-color: var(--td-bg-color-container); } .oneid-swiper--large.oneid-swiper--vertical.oneid-swiper--outside .oneid-swiper__navigation { right: -48px; } .oneid-swiper--large.oneid-swiper--vertical.oneid-swiper--outside .oneid-swiper__navigation-bars .oneid-swiper__navigation-item span { background-color: var(--td-text-color-disabled); } .oneid-swiper--large.oneid-swiper--vertical.oneid-swiper--outside .oneid-swiper__navigation-bars .oneid-swiper__navigation-item span:hover { background-color: var(--td-text-color-primary); } .oneid-swiper--large.oneid-swiper--vertical.oneid-swiper--outside .oneid-swiper__navigation-bars .oneid-swiper__navigation-item span:active { background-color: var(--td-brand-color-active); } .oneid-swiper--large.oneid-swiper--vertical.oneid-swiper--outside .oneid-swiper__navigation-bars .oneid-is-active span { background-color: var(--td-brand-color-active); } .oneid-swiper--small .oneid-swiper__arrow i.oneid-icon::before { font-size: 16px; } .oneid-swiper--small .oneid-swiper__arrow--default .oneid-swiper__arrow-left { width: 16px; height: 16px; left: 8px; } .oneid-swiper--small .oneid-swiper__arrow--default .oneid-swiper__arrow-right { width: 16px; height: 16px; right: 8px; } .oneid-swiper--small .oneid-swiper__navigation-bars .oneid-swiper__navigation-item { cursor: pointer; margin: 0 0 0 4px; padding: 12px 0; width: 9px; height: auto; } .oneid-swiper--small .oneid-swiper__navigation-bars .oneid-swiper__navigation-item span { width: 100%; height: 2px; } .oneid-swiper--small .oneid-swiper__navigation-bars .oneid-swiper__navigation-item:nth-child(1) { margin-left: 0; } .oneid-swiper--small .oneid-swiper__navigation-bars .oneid-swiper__navigation-item span { background: var(--td-font-white-4); } .oneid-swiper--small .oneid-swiper__navigation-bars .oneid-swiper__navigation-item span:hover { background-color: var(--td-font-white-2); } .oneid-swiper--small .oneid-swiper__navigation-bars .oneid-swiper__navigation-item span:active { background-color: var(--td-bg-color-container); } .oneid-swiper--small .oneid-swiper__navigation-bars .oneid-swiper__navigation-item.oneid-is-active { width: 15px; } .oneid-swiper--small .oneid-swiper__navigation-bars .oneid-swiper__navigation-item.oneid-is-active span { background-color: var(--td-bg-color-container); } .oneid-swiper--small .oneid-swiper__navigation--fraction { position: absolute; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); top: auto; right: auto; bottom: calc(0px - (var(--td-line-height-body-small) + 12px)); height: var(--td-line-height-body-small); line-height: var(--td-line-height-body-small); } .oneid-swiper--small .oneid-swiper__navigation--fraction .oneid-swiper__arrow-left { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; z-index: 2; background-color: transparent; color: var(--td-text-color-secondary); width: var(--td-line-height-body-small); height: var(--td-line-height-body-small); cursor: pointer; } .oneid-swiper--small .oneid-swiper__navigation--fraction .oneid-swiper__arrow-left:hover { color: var(--td-text-color-primary); } .oneid-swiper--small .oneid-swiper__navigation--fraction .oneid-swiper__arrow-left:active { color: var(--td-brand-color-active); } .oneid-swiper--small .oneid-swiper__navigation--fraction .oneid-swiper__arrow-right { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; z-index: 2; background-color: transparent; color: var(--td-text-color-secondary); width: var(--td-line-height-body-small); height: var(--td-line-height-body-small); cursor: pointer; } .oneid-swiper--small .oneid-swiper__navigation--fraction .oneid-swiper__arrow-right:hover { color: var(--td-text-color-primary); } .oneid-swiper--small .oneid-swiper__navigation--fraction .oneid-swiper__arrow-right:active { color: var(--td-brand-color-active); } .oneid-swiper--small .oneid-swiper__navigation--fraction .oneid-swiper__navigation-text-fraction { display: inline-block; font-size: var(--td-font-size-body-small); color: var(--td-text-color-secondary); margin: 0; } .oneid-swiper--small.oneid-swiper--outside .oneid-swiper__navigation { bottom: -24px; } .oneid-swiper--small.oneid-swiper--outside .oneid-swiper__navigation-bars .oneid-swiper__navigation-item span { background-color: var(--td-text-color-disabled); } .oneid-swiper--small.oneid-swiper--outside .oneid-swiper__navigation-bars .oneid-swiper__navigation-item span:hover { background-color: var(--td-text-color-primary); } .oneid-swiper--small.oneid-swiper--outside .oneid-swiper__navigation-bars .oneid-swiper__navigation-item span:active { background-color: var(--td-brand-color-active); } .oneid-swiper--small.oneid-swiper--outside .oneid-swiper__navigation-bars .oneid-is-active span { background-color: var(--td-brand-color-active); } .oneid-swiper--small.oneid-swiper--vertical .oneid-swiper__navigation-bars .oneid-swiper__navigation-item { cursor: pointer; margin: 4px 0 0 0; padding: 0 12px; width: auto; height: 9px; } .oneid-swiper--small.oneid-swiper--vertical .oneid-swiper__navigation-bars .oneid-swiper__navigation-item span { width: 2px; height: 100%; } .oneid-swiper--small.oneid-swiper--vertical .oneid-swiper__navigation-bars .oneid-swiper__navigation-item:nth-child(1) { margin-top: 0; } .oneid-swiper--small.oneid-swiper--vertical .oneid-swiper__navigation-bars .oneid-swiper__navigation-item span { background: var(--td-font-white-4); } .oneid-swiper--small.oneid-swiper--vertical .oneid-swiper__navigation-bars .oneid-swiper__navigation-item span:hover { background-color: var(--td-font-white-2); } .oneid-swiper--small.oneid-swiper--vertical .oneid-swiper__navigation-bars .oneid-swiper__navigation-item span:active { background-color: var(--td-bg-color-container); } .oneid-swiper--small.oneid-swiper--vertical .oneid-swiper__navigation-bars .oneid-swiper__navigation-item.oneid-is-active { height: 15px; } .oneid-swiper--small.oneid-swiper--vertical .oneid-swiper__navigation-bars .oneid-swiper__navigation-item.oneid-is-active span { background-color: var(--td-bg-color-container); } .oneid-swiper--small.oneid-swiper--vertical.oneid-swiper--outside .oneid-swiper__navigation { right: -24px; } .oneid-swiper--small.oneid-swiper--vertical.oneid-swiper--outside .oneid-swiper__navigation-bars .oneid-swiper__navigation-item span { background-color: var(--td-text-color-disabled); } .oneid-swiper--small.oneid-swiper--vertical.oneid-swiper--outside .oneid-swiper__navigation-bars .oneid-swiper__navigation-item span:hover { background-color: var(--td-text-color-primary); } .oneid-swiper--small.oneid-swiper--vertical.oneid-swiper--outside .oneid-swiper__navigation-bars .oneid-swiper__navigation-item span:active { background-color: var(--td-brand-color-active); } .oneid-swiper--small.oneid-swiper--vertical.oneid-swiper--outside .oneid-swiper__navigation-bars .oneid-is-active span { background-color: var(--td-brand-color-active); } .oneid-comment { font: var(--td-font-body-medium); -webkit-box-sizing: border-box; box-sizing: border-box; margin: 0; padding: 0; list-style: none; width: 100%; color: var(--td-text-color-primary); } .oneid-comment__inner { display: -webkit-box; display: -ms-flexbox; display: flex; } .oneid-comment__avatar { -ms-flex-negative: 0; flex-shrink: 0; margin-right: var(--td-comp-margin-xxl); cursor: pointer; display: -webkit-box; display: -ms-flexbox; display: flex; } .oneid-comment__avatar-image { width: var(--td-comp-size-xxxl); height: var(--td-comp-size-xxxl); border-radius: var(--td-radius-circle); } .oneid-comment__content { -webkit-box-flex: 1; -ms-flex: auto; flex: auto; font: var(--td-font-body-medium); } .oneid-comment__author { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; -webkit-box-align: baseline; -ms-flex-align: baseline; align-items: baseline; margin-bottom: var(--td-comp-margin-s); } .oneid-comment__name { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; font: var(--td-font-title-medium); padding-right: var(--td-comp-paddingLR-s); cursor: pointer; } .oneid-comment__time { font: var(--td-font-body-small); padding-right: var(--td-comp-paddingLR-s); color: var(--td-text-color-placeholder); } .oneid-comment__detail { word-break: break-all; font: var(--td-font-body-medium); } .oneid-comment__quote { margin-top: var(--td-comp-margin-l); border-left: 4px solid var(--td-component-stroke); padding-left: var(--td-comp-margin-l); } .oneid-comment__quote .oneid-comment__name, .oneid-comment__quote .oneid-comment__detail { color: var(--td-text-color-secondary); } .oneid-comment__actions { margin-top: var(--td-comp-margin-s); display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; list-style: none; padding: 0; gap: var(--td-comp-margin-s); } .oneid-comment__actions .oneid-button--variant-text { color: var(--td-text-color-placeholder); } .oneid-comment__actions .oneid-button--variant-text .oneid-button__text { gap: var(--td-comp-margin-s); } .oneid-comment__reply { margin-top: var(--td-comp-margin-l); margin-left: calc(var(--td-comp-size-xxxl) + var(--td-comp-margin-xxl)); background-color: var(--td-bg-color-secondarycontainer); border-radius: var(--td-radius-medium); padding: var(--td-comp-paddingTB-l) var(--td-comp-paddingLR-xl); } .oneid-comment__reply .oneid-button--variant-text { color: var(--td-text-color-placeholder); } .oneid-comment__reply .oneid-button--variant-text:hover { background-color: var(--td-bg-color-secondarycontainer-hover); } .oneid-comment__reply .oneid-button--variant-text .oneid-button__text { gap: var(--td-comp-margin-s); } .oneid-transfer { -webkit-box-sizing: border-box; box-sizing: border-box; margin: 0; padding: 0; list-style: none; font: var(--td-font-body-medium); position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -webkit-box-align: stretch; -ms-flex-align: stretch; align-items: stretch; background: transparent; color: var(--td-text-color-primary); max-height: 100%; } .oneid-transfer__list { position: relative; display: inline-block; min-width: 200px; height: 200px; padding-top: var(--td-comp-size-xxl); border: 0; word-break: break-word; vertical-align: middle; } .oneid-transfer__list-source, .oneid-transfer__list-target { border: 1px solid var(--td-border-level-1-color); border-radius: var(--td-radius-medium); } .oneid-transfer__list-header { position: absolute; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; top: 0; height: var(--td-comp-size-xxl); line-height: var(--td-comp-size-xxl); width: calc(200px - var(--td-comp-margin-s) * 2); padding: 0 var(--td-comp-paddingLR-s); margin: 0 var(--td-comp-margin-s); -webkit-box-sizing: border-box; box-sizing: border-box; } .oneid-transfer__list-header + :not(.oneid-transfer__list--with-search) { border-top: 1px solid var(--td-border-level-1-color); } .oneid-transfer__list-header .oneid-checkbox { margin-right: 0; } .oneid-transfer__list-header .oneid-checkbox__label { margin: 0; } .oneid-transfer__list-header div { display: -webkit-box; display: -ms-flexbox; display: flex; } .oneid-transfer__list-header div > span { margin-left: var(--td-comp-margin-s); } .oneid-transfer__list-header > span { color: var(--td-text-color-placeholder); } .oneid-transfer__list-body { position: relative; height: 100%; -webkit-box-sizing: border-box; box-sizing: border-box; } .oneid-transfer__list--with-search { padding-top: var(--td-comp-size-m); border-top: 0; } .oneid-transfer__list-content { height: 100%; width: 100%; overflow: auto; } .oneid-transfer__list-content .oneid-checkbox-group { width: 100%; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; gap: var(--td-comp-margin-xs); margin: var(--td-comp-margin-s) 0; } .oneid-transfer__list-content .oneid-checkbox-group .oneid-checkbox { margin-right: var(--td-comp-margin-s); --ripple-color: var(--td-bg-color-container-active); } .oneid-transfer__list-content .oneid-checkbox-group .oneid-checkbox + .oneid-checkbox { margin-left: var(--td-comp-margin-s); } .oneid-transfer__list-content .oneid-checkbox-group .oneid-checkbox__label { margin: 0; -webkit-box-flex: 1; -ms-flex: 1; flex: 1; } .oneid-transfer__list-content .oneid-checkbox-group .oneid-checkbox__label > span { margin-left: var(--td-comp-margin-s); display: inline-block; } .oneid-transfer__list .oneid-transfer__list-item { padding: var(--td-comp-paddingLR-xs) var(--td-comp-paddingLR-s); display: -webkit-box; display: -ms-flexbox; display: flex; cursor: pointer; margin: 0 var(--td-comp-margin-s); border-radius: var(--td-radius-default); -webkit-transition: background-color 0.2s cubic-bezier(0.38, 0, 0.24, 1); transition: background-color 0.2s cubic-bezier(0.38, 0, 0.24, 1); } .oneid-transfer__list .oneid-transfer__list-item:first-child { margin-top: 0; } .oneid-transfer__list .oneid-transfer__list-item.oneid-is-disabled:hover { background: transparent; } .oneid-transfer__list-item:hover { background: var(--td-bg-color-container-hover); -webkit-transition: background-color 0.2s cubic-bezier(0.38, 0, 0.24, 1); transition: background-color 0.2s cubic-bezier(0.38, 0, 0.24, 1); } .oneid-transfer__list-item.oneid-is-checked { background: var(--td-brand-color-light); } .oneid-transfer__list-wrapper { position: relative; height: 100%; width: 100%; overflow: auto; padding: var(--td-comp-paddingTB-m) var(--td-comp-paddingLR-m); } .oneid-transfer__list-pagination { height: var(--td-comp-size-xs); vertical-align: middle; padding: var(--td-comp-paddingTB-m); } .oneid-transfer__list-footer { position: absolute; left: 0; bottom: 0; border-top: 1px solid var(--td-border-level-1-color); width: 100%; } .oneid-transfer__operations { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; margin: auto var(--td-comp-margin-s); vertical-align: middle; overflow: hidden; gap: var(--td-comp-margin-l); } .oneid-transfer__operations .oneid-icon { font-size: var(--td-comp-size-xxxs); } .oneid-transfer__operations .oneid-icon + .oneid-button__text { margin-left: 0; } .oneid-transfer__empty { text-align: center; position: absolute; color: var(--td-text-color-placeholder); top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } .oneid-transfer__search-wrapper { position: absolute; top: 0; width: 100%; padding: 0 var(--td-comp-margin-s); -webkit-box-sizing: border-box; box-sizing: border-box; } .oneid-transfer__search .oneid-transfer__list { height: 240px; } .oneid-transfer--with-tree .oneid-transfer__list { height: auto; } .oneid-transfer--with-tree .oneid-transfer__list .oneid-tree { padding: 0 var(--td-comp-paddingLR-m); margin: var(--td-comp-margin-s) 0; } .oneid-transfer__pagination .oneid-transfer__list { height: 240px; padding-bottom: calc(var(--td-comp-size-xs) + var(--td-comp-paddingTB-m) * 2); } .oneid-transfer__footer .oneid-transfer__list { height: 248px; padding-bottom: 48px; } .oneid-transfer__pagination.oneid-transfer__footer .oneid-transfer__list { height: 288px; padding-bottom: calc(var(--td-comp-size-xs) + var(--td-comp-paddingTB-m) * 2 + 48px); } .oneid-transfer__search.oneid-transfer__footer .oneid-transfer__list { height: 288px; padding-bottom: 48px; } .oneid-transfer__search.oneid-transfer__pagination .oneid-transfer__list { height: 280px; padding-bottom: 48px; } .oneid-transfer__search.oneid-transfer__footer.oneid-transfer__pagination .oneid-transfer__list { height: 328px; padding-bottom: 88px; } .oneid-transfer__wrapper .oneid-transfer__list { height: 320px; width: 206px; overflow: scroll; } .oneid-avatar { font: var(--td-font-body-medium); color: var(--td-text-color-primary); -webkit-box-sizing: border-box; box-sizing: border-box; margin: 0; padding: 0; list-style: none; position: relative; display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; background: var(--td-brand-color-focus); color: var(--td-text-color-brand); overflow: hidden; white-space: nowrap; vertical-align: middle; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-sizing: content-box; box-sizing: content-box; width: var(--td-comp-size-m); height: var(--td-comp-size-m); font-size: var(--td-font-size-body-large); line-height: var(--td-comp-size-m); } .oneid-avatar.oneid-avatar__icon { font-size: var(--td-comp-size-xxs); } .oneid-avatar--circle { border-radius: var(--td-radius-circle); } .oneid-avatar--round { border-radius: var(--td-radius-default); } .oneid-avatar.oneid-size-s { width: var(--td-comp-size-xs); height: var(--td-comp-size-xs); font-size: var(--td-font-size-body-medium); line-height: var(--td-comp-size-xs); } .oneid-avatar.oneid-size-s.oneid-avatar__icon { font-size: var(--td-comp-size-xxxs); } .oneid-avatar.oneid-size-l { width: var(--td-comp-size-xl); height: var(--td-comp-size-xl); font-size: var(--td-font-size-title-large); line-height: var(--td-comp-size-xl); } .oneid-avatar.oneid-size-l.oneid-avatar__icon { font-size: var(--td-comp-size-xs); } .oneid-avatar > .oneid-image__wrapper { max-width: 100%; max-height: 100%; } .oneid-avatar-group { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .oneid-avatar-group .oneid-avatar { border: 2px solid var(--td-bg-color-container); } .oneid-avatar-group.oneid-avatar--offset-right .oneid-avatar:not(:last-child) { margin-right: calc(0px - var(--td-size-3)); } .oneid-avatar-group.oneid-avatar--offset-right .oneid-avatar:not(:last-child).oneid-size-s { margin-right: calc(0px - var(--td-size-2)); } .oneid-avatar-group.oneid-avatar--offset-right .oneid-avatar:not(:last-child).oneid-size-l { margin-right: calc(0px - var(--td-size-4)); } .oneid-avatar-group.oneid-avatar--offset-left .oneid-avatar:nth-child(1) { z-index: 49; } .oneid-avatar-group.oneid-avatar--offset-left .oneid-avatar:nth-child(2) { z-index: 48; } .oneid-avatar-group.oneid-avatar--offset-left .oneid-avatar:nth-child(3) { z-index: 47; } .oneid-avatar-group.oneid-avatar--offset-left .oneid-avatar:nth-child(4) { z-index: 46; } .oneid-avatar-group.oneid-avatar--offset-left .oneid-avatar:nth-child(5) { z-index: 45; } .oneid-avatar-group.oneid-avatar--offset-left .oneid-avatar:nth-child(6) { z-index: 44; } .oneid-avatar-group.oneid-avatar--offset-left .oneid-avatar:nth-child(7) { z-index: 43; } .oneid-avatar-group.oneid-avatar--offset-left .oneid-avatar:nth-child(8) { z-index: 42; } .oneid-avatar-group.oneid-avatar--offset-left .oneid-avatar:nth-child(9) { z-index: 41; } .oneid-avatar-group.oneid-avatar--offset-left .oneid-avatar:nth-child(10) { z-index: 40; } .oneid-avatar-group.oneid-avatar--offset-left .oneid-avatar:nth-child(11) { z-index: 39; } .oneid-avatar-group.oneid-avatar--offset-left .oneid-avatar:nth-child(12) { z-index: 38; } .oneid-avatar-group.oneid-avatar--offset-left .oneid-avatar:nth-child(13) { z-index: 37; } .oneid-avatar-group.oneid-avatar--offset-left .oneid-avatar:nth-child(14) { z-index: 36; } .oneid-avatar-group.oneid-avatar--offset-left .oneid-avatar:nth-child(15) { z-index: 35; } .oneid-avatar-group.oneid-avatar--offset-left .oneid-avatar:nth-child(16) { z-index: 34; } .oneid-avatar-group.oneid-avatar--offset-left .oneid-avatar:nth-child(17) { z-index: 33; } .oneid-avatar-group.oneid-avatar--offset-left .oneid-avatar:nth-child(18) { z-index: 32; } .oneid-avatar-group.oneid-avatar--offset-left .oneid-avatar:nth-child(19) { z-index: 31; } .oneid-avatar-group.oneid-avatar--offset-left .oneid-avatar:nth-child(20) { z-index: 30; } .oneid-avatar-group.oneid-avatar--offset-left .oneid-avatar:nth-child(21) { z-index: 29; } .oneid-avatar-group.oneid-avatar--offset-left .oneid-avatar:nth-child(22) { z-index: 28; } .oneid-avatar-group.oneid-avatar--offset-left .oneid-avatar:nth-child(23) { z-index: 27; } .oneid-avatar-group.oneid-avatar--offset-left .oneid-avatar:nth-child(24) { z-index: 26; } .oneid-avatar-group.oneid-avatar--offset-left .oneid-avatar:nth-child(25) { z-index: 25; } .oneid-avatar-group.oneid-avatar--offset-left .oneid-avatar:nth-child(26) { z-index: 24; } .oneid-avatar-group.oneid-avatar--offset-left .oneid-avatar:nth-child(27) { z-index: 23; } .oneid-avatar-group.oneid-avatar--offset-left .oneid-avatar:nth-child(28) { z-index: 22; } .oneid-avatar-group.oneid-avatar--offset-left .oneid-avatar:nth-child(29) { z-index: 21; } .oneid-avatar-group.oneid-avatar--offset-left .oneid-avatar:nth-child(30) { z-index: 20; } .oneid-avatar-group.oneid-avatar--offset-left .oneid-avatar:nth-child(31) { z-index: 19; } .oneid-avatar-group.oneid-avatar--offset-left .oneid-avatar:nth-child(32) { z-index: 18; } .oneid-avatar-group.oneid-avatar--offset-left .oneid-avatar:nth-child(33) { z-index: 17; } .oneid-avatar-group.oneid-avatar--offset-left .oneid-avatar:nth-child(34) { z-index: 16; } .oneid-avatar-group.oneid-avatar--offset-left .oneid-avatar:nth-child(35) { z-index: 15; } .oneid-avatar-group.oneid-avatar--offset-left .oneid-avatar:nth-child(36) { z-index: 14; } .oneid-avatar-group.oneid-avatar--offset-left .oneid-avatar:nth-child(37) { z-index: 13; } .oneid-avatar-group.oneid-avatar--offset-left .oneid-avatar:nth-child(38) { z-index: 12; } .oneid-avatar-group.oneid-avatar--offset-left .oneid-avatar:nth-child(39) { z-index: 11; } .oneid-avatar-group.oneid-avatar--offset-left .oneid-avatar:nth-child(40) { z-index: 10; } .oneid-avatar-group.oneid-avatar--offset-left .oneid-avatar:nth-child(41) { z-index: 9; } .oneid-avatar-group.oneid-avatar--offset-left .oneid-avatar:nth-child(42) { z-index: 8; } .oneid-avatar-group.oneid-avatar--offset-left .oneid-avatar:nth-child(43) { z-index: 7; } .oneid-avatar-group.oneid-avatar--offset-left .oneid-avatar:nth-child(44) { z-index: 6; } .oneid-avatar-group.oneid-avatar--offset-left .oneid-avatar:nth-child(45) { z-index: 5; } .oneid-avatar-group.oneid-avatar--offset-left .oneid-avatar:nth-child(46) { z-index: 4; } .oneid-avatar-group.oneid-avatar--offset-left .oneid-avatar:nth-child(47) { z-index: 3; } .oneid-avatar-group.oneid-avatar--offset-left .oneid-avatar:nth-child(48) { z-index: 2; } .oneid-avatar-group.oneid-avatar--offset-left .oneid-avatar:nth-child(49) { z-index: 1; } .oneid-avatar-group.oneid-avatar--offset-left .oneid-avatar:nth-child(50) { z-index: 0; } .oneid-avatar-group.oneid-avatar--offset-left .oneid-avatar:not(:first-child) { margin-left: calc(0px - var(--td-size-3)); } .oneid-avatar-group.oneid-avatar--offset-left .oneid-avatar:not(:first-child).oneid-size-s { margin-left: calc(0px - var(--td-size-2)); } .oneid-avatar-group.oneid-avatar--offset-left .oneid-avatar:not(:first-child).oneid-size-l { margin-left: calc(0px - var(--td-size-4)); } :root, :root[theme-mode=light] { --skeleton-animation-gradient: rgba(0, 0, 0, 0.04); } :root[theme-mode=dark] { --skeleton-animation-gradient: rgba(255, 255, 255, 0.06); } .oneid-skeleton { font: var(--td-font-body-medium); color: var(--td-text-color-primary); -webkit-box-sizing: border-box; box-sizing: border-box; margin: 0; padding: 0; list-style: none; } .oneid-skeleton__row { display: -webkit-box; display: -ms-flexbox; display: flex; margin-bottom: var(--td-comp-margin-l); -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .oneid-skeleton__row:only-child, .oneid-skeleton__row:last-child { margin-bottom: 0; } .oneid-skeleton__col { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; background-color: var(--td-bg-color-secondarycontainer); color: var(--td-text-color-disabled); margin-right: var(--td-comp-margin-l); } .oneid-skeleton__col:first-child:last-child, .oneid-skeleton__col:last-child { margin-right: 0; } .oneid-skeleton--type-text { width: 100%; height: var(--td-font-size-body-large); border-radius: var(--td-radius-default); } .oneid-skeleton--type-rect { width: 120px; height: 88px; border-radius: var(--td-radius-default); } .oneid-skeleton--type-circle { width: 32px; height: 32px; border-radius: var(--td-radius-circle); -ms-flex-negative: 0; flex-shrink: 0; } .oneid-skeleton--animation-gradient { position: relative; overflow-x: hidden; } .oneid-skeleton--animation-gradient::after { content: " "; position: absolute; bottom: 0; left: 0; right: 0; top: 0; background: -webkit-gradient(linear, left top, right top, from(rgba(255, 255, 255, 0)), color-stop(var(--skeleton-animation-gradient)), to(rgba(255, 255, 255, 0))); background: linear-gradient(90deg, rgba(255, 255, 255, 0), var(--skeleton-animation-gradient), rgba(255, 255, 255, 0)); -webkit-animation: t-skeleton--gradient 1.5s linear 2s infinite; animation: t-skeleton--gradient 1.5s linear 2s infinite; } .oneid-skeleton--animation-flashed { -webkit-animation: t-skeleton--flashed 2s linear 2s infinite; animation: t-skeleton--flashed 2s linear 2s infinite; } @-webkit-keyframes t-skeleton--gradient { 0% { -webkit-transform: translateX(-100%) skewX(-15deg); transform: translateX(-100%) skewX(-15deg); } 100% { -webkit-transform: translateX(100%) skewX(-15deg); transform: translateX(100%) skewX(-15deg); } } @keyframes t-skeleton--gradient { 0% { -webkit-transform: translateX(-100%) skewX(-15deg); transform: translateX(-100%) skewX(-15deg); } 100% { -webkit-transform: translateX(100%) skewX(-15deg); transform: translateX(100%) skewX(-15deg); } } @-webkit-keyframes t-skeleton--flashed { 0% { opacity: 1; } 50% { background-color: rgba(230, 230, 230, 0.3); opacity: 0.3; } 100% { opacity: 1; } } @keyframes t-skeleton--flashed { 0% { opacity: 1; } 50% { background-color: rgba(230, 230, 230, 0.3); opacity: 0.3; } 100% { opacity: 1; } } .oneid-color-picker__panel { padding: 0; width: 256px; background: var(--td-bg-color-container); -webkit-box-shadow: var(--td-shadow-2), var(--td-shadow-inset-top), var(--td-shadow-inset-right), var(--td-shadow-inset-bottom), var(--td-shadow-inset-left); box-shadow: var(--td-shadow-2), var(--td-shadow-inset-top), var(--td-shadow-inset-right), var(--td-shadow-inset-bottom), var(--td-shadow-inset-left); border-radius: var(--td-radius-medium); -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .oneid-popup__content .oneid-color-picker__panel { background: transparent; -webkit-box-shadow: unset; box-shadow: unset; } .oneid-color-picker { font: var(--td-font-body-medium); color: var(--td-text-color-primary); -webkit-box-sizing: border-box; box-sizing: border-box; margin: 0; padding: 0; list-style: none; } .oneid-color-picker.oneid-popup__content { -webkit-box-shadow: var(--td-shadow-2), var(--td-shadow-inset-top), var(--td-shadow-inset-right), var(--td-shadow-inset-bottom), var(--td-shadow-inset-left); box-shadow: var(--td-shadow-2), var(--td-shadow-inset-top), var(--td-shadow-inset-right), var(--td-shadow-inset-bottom), var(--td-shadow-inset-left); } .oneid-color-picker__icon { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; font-size: var(--td-comp-size-xxxs); background: transparent; -webkit-transition: 0.2s linear; transition: 0.2s linear; color: var(--td-text-color-secondary); border-radius: var(--td-radius-default); cursor: pointer; } .oneid-color-picker__icon:hover { background: var(--td-bg-color-container-hover); -webkit-transition: 0.2s linear; transition: 0.2s linear; } .oneid-color-picker__icon.oneid-is-disabled { color: var(--td-text-color-disabled); pointer-events: none; } .oneid-color-picker__head { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; padding: var(--td-pop-padding-xl); position: relative; z-index: 2; } .oneid-color-picker__head .oneid-color-picker__close { -ms-flex-negative: 0; flex-shrink: 0; } .oneid-color-picker__head + .oneid-color-picker__body { padding-top: 0; } .oneid-color-picker__body { padding: var(--td-pop-padding-xl); padding-bottom: calc(var(--td-pop-padding-xl) - 4px); } .oneid-color-picker__thumb { position: absolute; z-index: 1; outline: none; border-color: currentcolor; width: calc(var(--td-comp-size-xxxs) + var(--td-size-1)); height: calc(var(--td-comp-size-xxxs) + var(--td-size-1)); border-radius: var(--td-radius-circle); -webkit-box-shadow: var(--td-shadow-1); box-shadow: var(--td-shadow-1); background: var(--td-text-color-anti); color: var(--td-text-color-brand); padding: 2px; -webkit-box-sizing: border-box; box-sizing: border-box; } .oneid-color-picker__thumb::before { content: ""; width: 100%; height: 100%; background: currentcolor; border-radius: var(--td-radius-circle); display: block; } .oneid-color-picker__saturation { height: 160px; border-radius: var(--td-radius-default); position: relative; overflow: hidden; background: transparent; } .oneid-color-picker__saturation::before, .oneid-color-picker__saturation::after { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .oneid-color-picker__saturation::before { /* stylelint-disable-next-line color-no-hex */ background: -webkit-gradient(linear, left top, right top, from(#fff), to(transparent)); background: linear-gradient(90deg, #fff, transparent); } .oneid-color-picker__saturation::after { /* stylelint-disable-next-line color-no-hex */ background: -webkit-gradient(linear, left bottom, left top, from(#000), to(transparent)); background: linear-gradient(0deg, #000, transparent); } .oneid-color-picker__saturation .oneid-color-picker__thumb { width: calc(var(--td-comp-size-xxxs) + var(--td-size-1)); height: calc(var(--td-comp-size-xxxs) + var(--td-size-1)); border-radius: var(--td-radius-circle); -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } .oneid-color-picker__slider-wrapper { border-radius: 4px; padding: 0 calc((var(--td-comp-size-xxxs) + var(--td-size-1)) / 2); position: relative; } .oneid-color-picker__slider-wrapper--hue-type { /* stylelint-disable-next-line color-named */ background: red; } .oneid-color-picker__slider-wrapper--alpha-type { background: var(--td-text-color-anti); /* stylelint-disable-next-line color-no-hex */ background-image: linear-gradient(45deg, #c5c5c5 25%, transparent 0, transparent 75%, #c5c5c5 0, #c5c5c5), linear-gradient(45deg, #c5c5c5 25%, transparent 0, transparent 75%, #c5c5c5 0, #c5c5c5); background-size: 6px 6px; background-position: 0 0, 3px 3px; } .oneid-color-picker__slider-padding { position: absolute; left: 0; top: 0; width: 100%; height: 8px; border-radius: 4px; } .oneid-color-picker__slider { height: 8px; position: relative; border-radius: 4px; cursor: pointer; color: transparent; outline: none; z-index: 1; } .oneid-color-picker__slider .oneid-color-picker__thumb { -webkit-transform: translate(calc((var(--td-comp-size-xxxs) + var(--td-size-1)) * -0.5), -50%); transform: translate(calc((var(--td-comp-size-xxxs) + var(--td-size-1)) * -0.5), -50%); top: 50%; } .oneid-color-picker__slider .oneid-color-picker__rail { position: absolute; top: 0; left: 0; width: 100%; height: 100%; overflow: hidden; border-radius: inherit; } .oneid-color-picker__alpha, .oneid-color-picker__format { margin: var(--td-comp-margin-m) 0 0 0; } .oneid-color-picker__hue { /* stylelint-disable color-no-hex, color-named */ background: -webkit-gradient(linear, left top, right top, from(red), color-stop(17%, #ff0), color-stop(33%, #0f0), color-stop(50%, #0ff), color-stop(67%, #00f), color-stop(83%, #f0f), to(red)); background: linear-gradient(90deg, red, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, red); } .oneid-color-picker__alpha .oneid-color-picker__rail { background: -webkit-gradient(linear, left top, right top, from(transparent), to(currentcolor)); background: linear-gradient(to right, transparent, currentcolor); } .oneid-color-picker__sliders-wrapper { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; margin: var(--td-comp-margin-m) 0; } .oneid-color-picker__sliders { width: 100%; } .oneid-color-picker__sliders-preview { -ms-flex-negative: 0; flex-shrink: 0; margin-left: var(--td-comp-margin-m); width: var(--td-comp-size-s); height: var(--td-comp-size-s); border-radius: var(--td-radius-default); overflow: hidden; background: var(--td-text-color-anti); /* stylelint-disable-next-line color-no-hex */ background-image: linear-gradient(45deg, #c5c5c5 25%, transparent 0, transparent 75%, #c5c5c5 0, #c5c5c5), linear-gradient(45deg, #c5c5c5 25%, transparent 0, transparent 75%, #c5c5c5 0, #c5c5c5); background-size: 6px 6px; background-position: 0 0, 3px 3px; } .oneid-color-picker__sliders-preview-inner { display: block; width: 100%; height: 100%; } .oneid-color-picker__gradient { padding: 0; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; margin-bottom: var(--td-comp-margin-m); } .oneid-color-picker__gradient-slider { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; } .oneid-color-picker__gradient-degree { position: relative; -ms-flex-negative: 0; flex-shrink: 0; margin-left: var(--td-comp-margin-m); width: var(--td-comp-size-xxl); } .oneid-color-picker__gradient-degree .oneid-input { margin: 0; font: var(--td-font-body-small); } .oneid-color-picker__gradient-degree .oneid-input-number { width: 100%; padding: 0; } .oneid-color-picker__gradient .gradient-thumbs { position: absolute; width: 100%; height: 100%; top: 0; left: 0; margin: 0; padding: 0; list-style: none; border-radius: inherit; cursor: pointer; } .oneid-color-picker__gradient .gradient-thumbs__item { top: 50%; left: 0; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); z-index: 0; cursor: pointer; } .oneid-color-picker__gradient .gradient-thumbs__item::before { display: none; } .oneid-color-picker__gradient .gradient-thumbs__item.oneid-is-active { z-index: 1; outline: 2px solid var(--td-component-border); } .oneid-color-picker__gradient .gradient-thumbs__item-inner { display: block; width: 100%; height: 100%; border-radius: var(--td-radius-circle); overflow: hidden; } .oneid-color-picker__gradient .gradient-thumbs__item-inner::before { content: ""; width: 100%; height: 100%; display: block; background-color: currentcolor; } .oneid-color-picker__format { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } .oneid-color-picker__format--item:first-child { -ms-flex-negative: 0; flex-shrink: 0; } .oneid-color-picker__format--item:last-child { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; } .oneid-color-picker__format--item .oneid-size-m, .oneid-color-picker__format--item .oneid-input.oneid-size-m { font: var(--td-font-body-small); } .oneid-color-picker__format--item .oneid-input-number .oneid-input { margin: 0; } .oneid-color-picker__format--item .input-group { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -ms-flex-pack: distribute; justify-content: space-around; margin-left: var(--td-comp-margin-s); } .oneid-color-picker__format--item .input-group__item { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; width: 0; margin-left: -1px; } .oneid-color-picker__format--item .input-group__item .oneid-input { padding: 0 1px; } .oneid-color-picker__format--item .input-group__item .oneid-input:focus, .oneid-color-picker__format--item .input-group__item .oneid-input:focus-within, .oneid-color-picker__format--item .input-group__item .oneid-input:hover { z-index: 1; } .oneid-color-picker__format--item .input-group__item:not(:first-child):not(:last-child) .oneid-input { border-radius: 0; } .oneid-color-picker__format--item .input-group__item:first-child:not(:last-child) .oneid-input { border-top-right-radius: 0; border-bottom-right-radius: 0; } .oneid-color-picker__format--item .input-group__item:last-child:not(:first-child) .oneid-input { border-top-left-radius: 0; border-bottom-left-radius: 0; } .oneid-color-picker__format--item .input-group .oneid-input-number { width: 100%; padding: 0; max-width: 100%; } .oneid-color-picker__format-mode-select { width: 72px; display: -webkit-box; display: -ms-flexbox; display: flex; } .oneid-color-picker__format-mode-select .oneid-select, .oneid-color-picker__format-mode-select .oneid-input { padding-right: 0; } .oneid-color-picker__format-mode-select .oneid-input--prefix > .oneid-input__suffix { padding-left: 0; } .oneid-color-picker__format-mode-select .oneid-select__right-icon { margin-right: var(--td-comp-margin-xs); } .oneid-color-picker__swatches-wrap { margin-top: var(--td-comp-margin-m); position: relative; } .oneid-color-picker__swatches-wrap .oneid-color-picker__swatches + .oneid-color-picker__swatches { margin-top: var(--td-comp-margin-m); } .oneid-color-picker__swatches-wrap .oneid-color-picker__swatches--title { font: var(--td-font-body-small); padding: 0; color: var(--td-text-color-primary); display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } .oneid-color-picker__swatches-wrap .oneid-color-picker__swatches--actions { margin-left: auto; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; font-size: 0; } .oneid-color-picker__swatches-wrap .oneid-color-picker__swatches--actions .oneid-color-picker__icon { width: var(--td-comp-size-xxxs); height: var(--td-comp-size-xxxs); margin-left: var(--td-comp-margin-s); } .oneid-color-picker__swatches-wrap .oneid-color-picker__swatches--items { width: 100%; list-style: none; display: grid; grid-template-columns: repeat(10, var(--td-comp-size-xxxs)); gap: calc((256px - (var(--td-pop-padding-xl) * 2 + var(--td-comp-size-xxxs) * 10)) / 9) calc((256px - (var(--td-pop-padding-xl) * 2 + var(--td-comp-size-xxxs) * 10)) / 9); max-height: calc(4 * (var(--td-comp-size-xxxs) + (256px - (var(--td-pop-padding-xl) * 2 + var(--td-comp-size-xxxs) * 10)) / 9)); overflow-x: hidden; overflow-y: auto; padding: calc(var(--td-pop-padding-xl) - 8px); position: relative; left: calc(0px - (var(--td-pop-padding-xl) - 8px)); -webkit-box-sizing: content-box; box-sizing: content-box; } .oneid-color-picker__swatches-wrap .oneid-color-picker__swatches--item { display: -webkit-box; display: -ms-flexbox; display: flex; width: var(--td-comp-size-xxxs); height: var(--td-comp-size-xxxs); border-radius: var(--td-radius-default); padding: 0; overflow: hidden; cursor: pointer; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; position: relative; -webkit-transform-origin: center; transform-origin: center; -webkit-transition: all 0.2s cubic-bezier(0.38, 0, 0.24, 1); transition: all 0.2s cubic-bezier(0.38, 0, 0.24, 1); -webkit-box-sizing: border-box; box-sizing: border-box; } .oneid-color-picker__swatches-wrap .oneid-color-picker__swatches--item:hover { -webkit-transform: scale(1.25); transform: scale(1.25); -webkit-transform-origin: center; transform-origin: center; } .oneid-color-picker__swatches-wrap .oneid-color-picker__swatches--item__color { width: 100%; height: 100%; position: relative; overflow: hidden; border: 1px solid var(--td-component-border); border-radius: var(--td-radius-default); -ms-flex-negative: 0; flex-shrink: 0; } .oneid-color-picker__swatches-wrap .oneid-color-picker__swatches--item__inner { width: 100%; height: 100%; display: block; } .oneid-color-picker__swatches-wrap .oneid-color-picker__swatches--item:not(.oneid-is-active):hover { padding: 0; } .oneid-color-picker__swatches-wrap .oneid-color-picker__swatches--item.oneid-is-active .oneid-color-picker__swatches--item__color, .oneid-color-picker__swatches-wrap .oneid-color-picker__swatches--item.oneid-is-active .oneid-color-picker__swatches--color { border-color: var(--td-text-color-brand); } .oneid-color-picker__swatches-wrap .oneid-color-picker__swatches--color { width: 100%; height: 100%; position: relative; overflow: hidden; border-radius: var(--td-radius-default); -webkit-box-sizing: border-box; box-sizing: border-box; } .oneid-color-picker__swatches-wrap .oneid-color-picker__swatches--inner { width: 100%; height: 100%; display: block; border-radius: var(--td-radius-default); -webkit-box-shadow: var(--td-shadow-inset-top), var(--td-shadow-inset-right), var(--td-shadow-inset-bottom), var(--td-shadow-inset-left); box-shadow: var(--td-shadow-inset-top), var(--td-shadow-inset-right), var(--td-shadow-inset-bottom), var(--td-shadow-inset-left); } .oneid-color-picker__trigger--default { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .oneid-color-picker__trigger--default > .oneid-input { width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; } .oneid-color-picker__trigger--default .oneid-input { padding: 0 var(--td-comp-paddingLR-s) 0 var(--td-comp-paddingLR-xs); } .oneid-color-picker__trigger--default__color { width: 100%; height: 100%; -webkit-box-sizing: border-box; box-sizing: border-box; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .oneid-color-picker__trigger--default__color .color-inner { border: 1px solid var(--td-scrollbar-color); display: block; width: calc(var(--td-comp-size-xs) - 2px); height: calc(var(--td-comp-size-xs) - 2px); color: transparent; position: relative; border-radius: var(--td-radius-small); } .oneid-color-picker__trigger--default__color .color-inner.oneid-size-s { width: calc(var(--td-comp-size-xxs) - 2px); height: calc(var(--td-comp-size-xxs) - 2px); } .oneid-color-picker__trigger--default__color .color-inner.oneid-size-l { width: calc(var(--td-comp-size-s) - 2px); height: calc(var(--td-comp-size-s) - 2px); } .oneid-color-picker__gradient-slider { padding: 0 calc((var(--td-comp-size-xxxs) + var(--td-size-1)) / 2); border-radius: 4px; } .oneid-color-picker__gradient-slider .oneid-color-picker--bg-alpha { background: var(--td-text-color-anti); /* stylelint-disable-next-line color-no-hex */ background-image: linear-gradient(45deg, #c5c5c5 25%, transparent 0, transparent 75%, #c5c5c5 0, #c5c5c5), linear-gradient(45deg, #c5c5c5 25%, transparent 0, transparent 75%, #c5c5c5 0, #c5c5c5); background-size: 6px 6px; background-position: 0 0, 3px 3px; } .oneid-color-picker__panel.oneid-is-disabled .oneid-color-picker__saturation, .oneid-color-picker__panel.oneid-is-disabled .oneid-color-picker__slider, .oneid-color-picker__panel.oneid-is-disabled .oneid-color-picker__swatches--item { opacity: 0.8; cursor: not-allowed; } .oneid-color-picker__panel.oneid-is-disabled .oneid-color-picker__gradient-slider .gradient-thumbs, .oneid-color-picker__panel.oneid-is-disabled .oneid-color-picker__gradient-slider .gradient-thumbs__item { cursor: not-allowed; } .oneid-color-picker__panel.oneid-is-disabled .oneid-color-picker__swatches--item:hover { padding: 0; } .oneid-color-picker__select-options > .oneid-popup__content { -webkit-box-shadow: var(--td-shadow-1), var(--td-shadow-inset-top), var(--td-shadow-inset-right), var(--td-shadow-inset-bottom), var(--td-shadow-inset-left); box-shadow: var(--td-shadow-1), var(--td-shadow-inset-top), var(--td-shadow-inset-right), var(--td-shadow-inset-bottom), var(--td-shadow-inset-left); } .oneid-card { font: var(--td-font-body-medium); margin: 0; padding: 0; list-style: none; position: relative; -webkit-box-sizing: border-box; box-sizing: border-box; border-radius: var(--td-radius-medium); background-color: var(--td-bg-color-container); color: var(--td-text-color-primary); -webkit-transition: -webkit-box-shadow 0.2s cubic-bezier(0.38, 0, 0.24, 1); transition: -webkit-box-shadow 0.2s cubic-bezier(0.38, 0, 0.24, 1); transition: box-shadow 0.2s cubic-bezier(0.38, 0, 0.24, 1); transition: box-shadow 0.2s cubic-bezier(0.38, 0, 0.24, 1), -webkit-box-shadow 0.2s cubic-bezier(0.38, 0, 0.24, 1); } .oneid-card--bordered { border: 1px solid var(--td-component-border); } .oneid-card--shadow-hover:hover, .oneid-card--shadow { -webkit-box-shadow: var(--td-shadow-1); box-shadow: var(--td-shadow-1); } .oneid-card__cover { display: flow-root; } .oneid-card__cover img { display: flow-root; width: 100%; max-height: 100%; border-radius: var(--td-radius-default) var(--td-radius-default) 0 0; } .oneid-card__body { display: flow-root; padding: var(--td-comp-paddingTB-l) var(--td-comp-paddingLR-xl); } .oneid-card__header { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -ms-flex-align: center; align-items: center; padding: var(--td-comp-paddingTB-l) var(--td-comp-paddingLR-xl); position: relative; } .oneid-card__header-wrapper { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .oneid-card__header + .oneid-card__cover img { border-radius: 0; } .oneid-card__footer { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; padding: var(--td-comp-paddingTB-l) var(--td-comp-paddingLR-xl); } .oneid-card__footer-wrapper { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; } .oneid-size-s .oneid-card__body { padding: var(--td-comp-paddingTB-s) var(--td-comp-paddingLR-l); } .oneid-size-s .oneid-card__header { padding: var(--td-comp-paddingTB-s) var(--td-comp-paddingLR-l); } .oneid-size-s .oneid-card__footer { padding: var(--td-comp-paddingTB-s) var(--td-comp-paddingLR-l); } .oneid-card__avatar { margin-right: var(--td-comp-margin-l); width: var(--td-comp-size-xxxl); height: var(--td-comp-size-xxxl); } .oneid-card__title { font: var(--td-font-title-medium); color: var(--td-text-color-primary); margin-right: var(--td-comp-margin-l); word-break: break-all; } .oneid-card__subtitle { font: var(--td-font-body-medium); color: var(--td-text-color-secondary); word-break: break-all; } .oneid-card__description { font: var(--td-font-body-medium); color: var(--td-text-color-secondary); margin-top: var(--td-comp-margin-xs); word-break: break-all; } .oneid-card__actions { float: right; color: var(--td-brand-color); } .oneid-card__title--bordered { border-bottom: 1px solid var(--td-component-border); } .oneid-collapse { font: var(--td-font-body-medium); color: var(--td-text-color-primary); -webkit-box-sizing: border-box; box-sizing: border-box; margin: 0; padding: 0; list-style: none; border: solid 1px var(--td-component-border); border-bottom: 0; background: var(--td-bg-color-container); } .oneid-collapse.oneid--border-less { border: none; } .oneid-collapse.oneid--border-less .oneid-collapse-panel__header { border-bottom: none; } .oneid-collapse.oneid--border-less .oneid-collapse-panel__body { background: var(--td-bg-color-container); border: none; } .oneid-collapse-panel__icon { -webkit-transition: all 0.2s cubic-bezier(0.38, 0, 0.24, 1); transition: all 0.2s cubic-bezier(0.38, 0, 0.24, 1); cursor: pointer; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .oneid-collapse-panel__icon > .oneid-fake-arrow { -webkit-transform: rotate(-90deg); transform: rotate(-90deg); -webkit-transition: all 0.2s cubic-bezier(0.38, 0, 0.24, 1); transition: all 0.2s cubic-bezier(0.38, 0, 0.24, 1); } .oneid-collapse-panel__icon--left { margin-right: var(--td-comp-margin-s); } .oneid-collapse-panel__icon--right { margin-left: var(--td-comp-margin-s); } .oneid-collapse-panel__icon--active > .oneid-fake-arrow { -webkit-transform: rotate(0); transform: rotate(0); } .oneid-collapse-panel__icon:hover { background-color: var(--td-bg-color-container-hover); border-radius: var(--td-radius-small); } .oneid-collapse-panel__wrapper { overflow: hidden; } .oneid-collapse-panel__wrapper.oneid--borderless .oneid-collapse-panel__header { border-bottom: none; } .oneid-collapse-panel__wrapper.oneid--borderless .oneid-collapse-panel__body { background: var(--td-bg-color-container); border: none; } .oneid-collapse-panel__wrapper .oneid-collapse-panel__header { padding: var(--td-comp-paddingTB-m) var(--td-comp-paddingLR-l); border-bottom: solid 1px var(--td-component-border); font: var(--td-font-title-small); display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .oneid-collapse-panel__wrapper .oneid-collapse-panel__header--blank { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; } .oneid-collapse-panel__wrapper .oneid-collapse-panel__header.oneid-is-clickable { cursor: pointer; } .oneid-collapse-panel__wrapper .oneid-collapse-panel__header-left, .oneid-collapse-panel__wrapper .oneid-collapse-panel__header-right, .oneid-collapse-panel__wrapper .oneid-collapse-panel__header-right-content { display: -webkit-box; display: -ms-flexbox; display: flex; } .oneid-collapse-panel__wrapper .oneid-collapse-panel__body { border-bottom: solid 1px var(--td-component-border); background: var(--td-bg-color-secondarycontainer); overflow: inherit; } .oneid-collapse-panel__wrapper .oneid-collapse-panel__body--collapsed { border: none; } .oneid-collapse-panel__wrapper .oneid-collapse-panel__content { padding: var(--td-comp-paddingTB-m) var(--td-comp-paddingLR-l) var(--td-comp-paddingTB-m) calc(var(--td-comp-paddingLR-l) + var(--td-comp-margin-xxl)); color: var(--td-text-color-secondary); } .oneid-collapse-panel.oneid-is-disabled .oneid-collapse-panel__header { cursor: not-allowed; color: var(--td-text-color-disabled); } .oneid-collapse-panel.oneid-is-disabled .oneid-collapse-panel__icon { cursor: not-allowed; pointer-events: none; } .oneid-collapse-panel.oneid-is-disabled .oneid-collapse-panel__body { background: var(--td-bg-color-component-disabled); } .oneid-collapse-panel.oneid-is-disabled .oneid-collapse-panel__content { color: var(--td-text-color-disabled); } .oneid-watermark { position: relative; } .oneid-timeline { font: var(--td-font-body-medium); color: var(--td-text-color-primary); -webkit-box-sizing: border-box; box-sizing: border-box; margin: 0; padding: 0; list-style: none; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } .oneid-timeline-item { min-height: 72px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; position: relative; } .oneid-timeline-item__label.oneid-timeline-item__label--alternate { position: absolute; } .oneid-timeline-item__wrapper { width: 8px; position: relative; } .oneid-timeline-item__wrapper .oneid-timeline-item__dot { -webkit-box-sizing: unset; box-sizing: unset; position: absolute; width: 4px; height: 4px; border: 2px solid transparent; border-radius: 50%; top: 8px; } .oneid-timeline-item__wrapper .oneid-timeline-item__dot--primary { border-color: var(--td-brand-color); } .oneid-timeline-item__wrapper .oneid-timeline-item__dot--default { border-color: var(--td-component-border); } .oneid-timeline-item__wrapper .oneid-timeline-item__dot--success { border-color: var(--td-success-color); } .oneid-timeline-item__wrapper .oneid-timeline-item__dot--warning { border-color: var(--td-warning-color); } .oneid-timeline-item__wrapper .oneid-timeline-item__dot--error { border-color: var(--td-error-color); } .oneid-timeline-item__wrapper .oneid-timeline-item__dot--custom { position: relative; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); top: 4px; border: 0; } .oneid-timeline-item__wrapper .oneid-timeline-item__dot--custom .oneid-timeline-item__dot-content { position: absolute; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); top: 0; } .oneid-timeline-item__wrapper .oneid-timeline-item__tail { position: absolute; border-left: 2px solid transparent; left: 50%; height: calc(100% - 24px); bottom: 0; -webkit-transform: translateX(-50%); transform: translateX(-50%); padding-bottom: var(--td-comp-size-s); border-color: var(--td-component-border); -webkit-box-sizing: border-box; box-sizing: border-box; } .oneid-timeline-item__wrapper .oneid-timeline-item__tail--theme-dot { border-style: dashed; border-right: 0; } .oneid-timeline-item__label { color: var(--td-text-color-secondary); font-size: var(--td-font-size-body-medium); } .oneid-timeline-item__content { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; padding-left: var(--td-comp-margin-l); font-size: var(--td-font-size-body-large); } .oneid-timeline-item--last .oneid-timeline-item__tail { display: none; } .oneid-timeline-label.oneid-timeline-label--alternate.oneid-timeline-left .oneid-timeline-item__label { text-align: right; left: 0; } .oneid-timeline-label.oneid-timeline-label--alternate.oneid-timeline-left .oneid-timeline-item__wrapper { margin-left: 100px; } .oneid-timeline-label.oneid-timeline-label--alternate.oneid-timeline-right .oneid-timeline-item__label { text-align: left; right: 0; } .oneid-timeline-label.oneid-timeline-label--alternate.oneid-timeline-right .oneid-timeline-item__wrapper { margin-right: 100px; } .oneid-timeline-right .oneid-timeline-item { -webkit-box-orient: horizontal; -webkit-box-direction: reverse; -ms-flex-direction: row-reverse; flex-direction: row-reverse; } .oneid-timeline-right .oneid-timeline-item__content { text-align: right; padding-left: 0; padding-right: var(--td-comp-margin-l); } .oneid-timeline-alternate .oneid-timeline-item-left { margin-left: calc(50% - 4px); } .oneid-timeline-alternate .oneid-timeline-item-right { text-align: right; -webkit-box-orient: horizontal; -webkit-box-direction: reverse; -ms-flex-direction: row-reverse; flex-direction: row-reverse; margin-right: calc(50% - 4px); } .oneid-timeline-alternate .oneid-timeline-item-right .oneid-timeline-item__content { padding-right: var(--td-comp-margin-l); padding-left: 0; } .oneid-timeline-label.oneid-timeline-alternate .oneid-timeline-item__label { width: 100%; } .oneid-timeline-label.oneid-timeline-alternate .oneid-timeline-item-left .oneid-timeline-item__label--alternate { left: 0; -webkit-transform: translateX(-100%); transform: translateX(-100%); text-align: right; padding-right: var(--td-comp-margin-l); } .oneid-timeline-label.oneid-timeline-alternate .oneid-timeline-item-right .oneid-timeline-item__label--alternate { right: 0; -webkit-transform: translateX(100%); transform: translateX(100%); text-align: left; padding-left: var(--td-comp-margin-l); } .oneid-timeline-horizontal { min-height: 200px; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .oneid-timeline-horizontal .oneid-timeline-item { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; padding-right: 8px; min-width: 160px; } .oneid-timeline-horizontal .oneid-timeline-item__wrapper { width: 100%; height: 8px; } .oneid-timeline-horizontal .oneid-timeline-item__wrapper .oneid-timeline-item__dot { position: absolute; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); left: unset; width: 4px; height: 4px; border-radius: 50%; } .oneid-timeline-horizontal .oneid-timeline-item__wrapper .oneid-timeline-item__dot--custom { position: relative; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); border: 0; } .oneid-timeline-horizontal .oneid-timeline-item__wrapper .oneid-timeline-item__dot--custom .oneid-timeline-item__dot-content { position: absolute; left: 0; -webkit-transform: translateY(-50%); transform: translateY(-50%); top: 50%; } .oneid-timeline-horizontal .oneid-timeline-item__wrapper .oneid-timeline-item__tail { left: calc(8px + var(--td-comp-margin-s)); top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); width: calc(100% - (8px + var(--td-comp-margin-s))); border: 0; border-top: 2px solid transparent; padding-bottom: 0; border-color: var(--td-component-border); } .oneid-timeline-horizontal .oneid-timeline-item__wrapper .oneid-timeline-item__tail--theme-dot { border-style: dashed; border-right: 0; } .oneid-timeline-horizontal .oneid-timeline-item__content { padding-left: unset; padding-top: var(--td-comp-margin-l); -webkit-box-flex: unset; -ms-flex: unset; flex: unset; } .oneid-timeline-vertical .oneid-timeline-item__content { padding-bottom: var(--td-comp-margin-l); } .oneid-timeline-label.oneid-timeline-horizontal.oneid-timeline-top .oneid-timeline-item__label--alternate { top: 0; width: 100%; -webkit-transform: translateY(-100%); transform: translateY(-100%); padding-bottom: 0; } .oneid-timeline-label.oneid-timeline-horizontal.oneid-timeline-bottom .oneid-timeline-item { -webkit-box-orient: vertical; -webkit-box-direction: reverse; -ms-flex-direction: column-reverse; flex-direction: column-reverse; } .oneid-timeline-label.oneid-timeline-horizontal.oneid-timeline-bottom .oneid-timeline-item__wrapper { padding-top: 0; } .oneid-timeline-label.oneid-timeline-horizontal.oneid-timeline-bottom .oneid-timeline-item__label--alternate { padding-top: var(--td-comp-margin-l); bottom: 0; width: 100%; -webkit-transform: translateY(100%); transform: translateY(100%); } .oneid-timeline-label.oneid-timeline-horizontal.oneid-timeline-bottom .oneid-timeline-item__content { padding-top: 0; padding-bottom: var(--td-comp-margin-l); } .oneid-timeline-label.oneid-timeline-horizontal.oneid-timeline-alternate .oneid-timeline-item-top .oneid-timeline-item__label--alternate { top: 0; width: 100%; -webkit-transform: translateY(-100%); transform: translateY(-100%); padding-bottom: var(--td-comp-margin-l); } .oneid-timeline-label.oneid-timeline-horizontal.oneid-timeline-alternate .oneid-timeline-item-bottom { -webkit-box-orient: vertical; -webkit-box-direction: reverse; -ms-flex-direction: column-reverse; flex-direction: column-reverse; position: relative; -webkit-transform: translateY(calc(-100% + 8px)); transform: translateY(calc(-100% + 8px)); } .oneid-timeline-label.oneid-timeline-horizontal.oneid-timeline-alternate .oneid-timeline-item-bottom .oneid-timeline-item__content { padding-bottom: var(--td-comp-margin-l); padding-top: unset; } .oneid-timeline-label.oneid-timeline-horizontal.oneid-timeline-alternate .oneid-timeline-item-bottom .oneid-timeline-item__label--alternate { bottom: 0; -webkit-transform: translateY(100%); transform: translateY(100%); padding-top: var(--td-comp-margin-l); } .oneid-rate { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .oneid-rate .oneid-rate__star-top { position: absolute; width: 0; height: 100%; left: 0; top: 0; overflow: hidden; -webkit-transition: all 0.2s cubic-bezier(0.38, 0, 0.24, 1); transition: all 0.2s cubic-bezier(0.38, 0, 0.24, 1); } .oneid-rate .oneid-rate__star-top, .oneid-rate .oneid-rate__star-bottom { display: grid; } .oneid-rate__list { display: -webkit-box; display: -ms-flexbox; display: flex; list-style: none; padding: 0; margin: 0; } .oneid-rate__item { position: relative; cursor: pointer; -webkit-transition: all 0.2s cubic-bezier(0.38, 0, 0.24, 1); transition: all 0.2s cubic-bezier(0.38, 0, 0.24, 1); } .oneid-rate__item:hover { -webkit-transform: scale(1.33); transform: scale(1.33); } .oneid-rate__item--half .oneid-rate__star-top { width: 50%; } .oneid-rate__item--full .oneid-rate__star-top { width: 100%; } .oneid-rate__text { color: var(--td-text-color-primary); font: var(--td-font-mark-medium); margin-left: var(--td-comp-margin-l); } .oneid-guide { font: var(--td-font-body-medium); color: var(--td-text-color-primary); -webkit-box-sizing: border-box; box-sizing: border-box; margin: 0; padding: 0; list-style: none; } .oneid-guide--lock { overflow: hidden; } .oneid-guide--absolute { position: absolute; } .oneid-guide--fixed { position: fixed; } .oneid-guide__overlay { position: fixed; top: 0; bottom: 0; left: 0; right: 0; z-index: 999997; } .oneid-guide__highlight { z-index: 999998; -webkit-transition: 0.2s cubic-bezier(0, 0, 0.15, 1); transition: 0.2s cubic-bezier(0, 0, 0.15, 1); border-radius: var(--td-radius-default); } .oneid-guide__highlight--dialog { border-radius: var(--td-radius-large); } .oneid-guide__highlight--mask { -webkit-box-shadow: 0 0 0 0 var(--td-mask-active), var(--td-mask-active) 0 0 0 5000px; box-shadow: 0 0 0 0 var(--td-mask-active), var(--td-mask-active) 0 0 0 5000px; } .oneid-guide__highlight--nomask { border-radius: var(--td-radius-medium); border: 2px solid var(--td-brand-color); -webkit-box-sizing: border-box; box-sizing: border-box; } .oneid-guide__reference { z-index: 999999; } .oneid-guide__wrapper { position: fixed; left: 0; right: 0; top: 0; bottom: 0; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; z-index: 999999; padding-top: 20vh; } .oneid-guide__wrapper--center { padding-top: 0; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .oneid-guide__dialog { min-width: 320px; max-width: 500px; padding: var(--td-comp-paddingTB-xxl) var(--td-comp-paddingLR-xxl); border-radius: var(--td-radius-large); background: var(--td-bg-color-container); -webkit-animation: tGuideDialogFadeIn 0.3s ease-out; animation: tGuideDialogFadeIn 0.3s ease-out; -webkit-box-sizing: border-box; box-sizing: border-box; } .oneid-guide__dialog--nomask { border: 1px solid var(--td-component-border); } .oneid-guide__dialog .oneid-guide__title { font: var(--td-font-title-medium); font-weight: 700; } .oneid-guide__dialog .oneid-guide__desc { margin-top: var(--td-comp-margin-l); font: var(--td-font-body-medium); } .oneid-guide__tooltip { padding: var(--td-comp-paddingTB-m) var(--td-comp-paddingLR-s); min-width: 240px; max-width: 600px; max-height: 300px; } .oneid-guide__title { text-align: left; color: var(--td-text-color-primary); font: var(--td-font-title-small); font-weight: 700; } .oneid-guide__desc { margin-top: var(--td-comp-margin-s); text-align: left; color: var(--td-text-color-secondary); font: var(--td-font-body-small); } .oneid-guide__action { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .oneid-guide__action button { margin-right: var(--td-comp-margin-s); } .oneid-guide__action button:last-child { margin-right: 0; } .oneid-guide__footer { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .oneid-guide__footer--popup { margin-top: var(--td-comp-margin-l); } .oneid-guide__footer--dialog { margin-top: 24px; } .oneid-guide__footer--dialog .oneid-guide__action { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .oneid-guide__counter { color: var(--td-text-color-placeholder); text-align: left; font: var(--td-font-body-small); -webkit-box-flex: 1; -ms-flex: 1; flex: 1; } .oneid-guide__popup .oneid-guide__popup--content { background: none; -webkit-box-shadow: none; box-shadow: none; padding: 0; } @-webkit-keyframes tGuideDialogFadeIn { 0% { opacity: 0; } 100% { opacity: 1; } } @keyframes tGuideDialogFadeIn { 0% { opacity: 0; } 100% { opacity: 1; } } .oneid-back-top { position: fixed; z-index: 300; overflow: hidden; outline: none; border-color: transparent; background-color: transparent; cursor: pointer; display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; vertical-align: middle; white-space: nowrap; border-width: 0.5px; border-style: solid; -webkit-transition: background 0.2s linear, border 0.2s linear, color 0.2s linear, opacity 0.2s linear, visibility 0.2s linear; transition: background 0.2s linear, border 0.2s linear, color 0.2s linear, opacity 0.2s linear, visibility 0.2s linear; -ms-touch-action: manipulation; touch-action: manipulation; -webkit-box-shadow: var(--td-shadow-3); box-shadow: var(--td-shadow-3); visibility: hidden; opacity: 0; color: var(--td-text-color-primary); } .oneid-back-top__text { font: var(--td-font-body-small); text-align: center; margin-top: var(--td-comp-margin-xxs); } .oneid-back-top__icon { font-size: var(--td-font-headline-small); } .oneid-back-top.oneid-size-m .oneid-back-top__icon { margin-top: 2px; } .oneid-back-top--show { visibility: visible; opacity: 1; } .oneid-back-top--theme-light { border-color: var(--td-component-border); background-color: var(--td-bg-color-container); } .oneid-back-top--theme-light:hover { border-color: var(--td-bg-color-container-hover); background-color: var(--td-bg-color-container-hover); } .oneid-back-top--theme-light .oneid-back-top__text { color: var(--td-text-color-secondary); } .oneid-back-top--theme-light .oneid-back-top__icon { color: var(--td-text-color-primary); } .oneid-back-top--theme-primary { border-color: var(--td-brand-color); background-color: var(--td-brand-color); } .oneid-back-top--theme-primary:hover { border-color: var(--td-brand-color-hover); background-color: var(--td-brand-color-hover); } .oneid-back-top--theme-primary .oneid-back-top__text { color: var(--td-text-color-anti); } .oneid-back-top--theme-primary .oneid-back-top__icon { color: var(--td-text-color-anti); } .oneid-back-top--theme-dark { border-color: rgba(0, 0, 0, 0.9); background-color: rgba(0, 0, 0, 0.9); } .oneid-back-top--theme-dark:hover { border-color: rgba(0, 0, 0, 0.6); background-color: rgba(0, 0, 0, 0.6); } .oneid-back-top--theme-dark .oneid-back-top__text { color: var(--td-text-color-anti); } .oneid-back-top--theme-dark .oneid-back-top__icon { color: var(--td-text-color-anti); } .oneid-back-top.oneid-size-s { width: var(--td-comp-size-xxl); height: var(--td-comp-size-xxl); } .oneid-back-top.oneid-size-s .oneid-back-top__text { display: none; } .oneid-back-top.oneid-size-m { width: var(--td-comp-size-xxxxl); height: var(--td-comp-size-xxxxl); } .oneid-back-top.oneid-size-m .oneid-back-top__text { display: block; } .oneid-back-top--circle { border-radius: var(--td-radius-circle); } .oneid-back-top--square { border-radius: var(--td-radius-medium); } .oneid-statistic { display: inline-block; font-size: var(--td-font-size-body-medium); line-height: var(--td-line-height-body-medium); color: var(--td-text-color-secondary); } .oneid-statistic-title { font-size: var(--td-font-body-medium); margin-bottom: var(--td-comp-margin-s); } .oneid-statistic-content { display: inline-block; color: var(--td-text-color-primary); text-align: left; white-space: nowrap; } .oneid-statistic-content-value { font-size: var(--td-font-size-headline-medium); line-height: var(--td-line-height-headline-medium); font-family: TCloudNumber, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Hiragino Sans GB, Microsoft YaHei UI, Microsoft YaHei, Source Han Sans CN, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol; } .oneid-statistic-content-unit { font-size: var(--td-font-size-body-medium); margin-left: var(--td-comp-margin-xs); font-family: TCloudNumber, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Hiragino Sans GB, Microsoft YaHei UI, Microsoft YaHei, Source Han Sans CN, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol; } .oneid-statistic-content-suffix { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; font-size: var(--td-font-size-title-large); margin-left: var(--td-comp-margin-s); } .oneid-statistic-content-prefix { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; font-size: var(--td-font-size-title-large); margin-right: var(--td-comp-margin-s); } .oneid-statistic-content-prefix .oneid-icon { font-size: var(--td-font-size-title-large); } .oneid-statistic-extra { margin-top: 8px; } .oneid-statistic-extra .oneid-space .oneid-space-item { display: -webkit-box; display: -ms-flexbox; display: flex; } .oneid-descriptions { font: var(--td-font-body-medium); color: var(--td-text-color-primary); -webkit-box-sizing: border-box; box-sizing: border-box; margin: 0; padding: 0; list-style: none; } .oneid-descriptions__header { color: var(--td-text-color-primary); font: var(--td-font-title-medium); margin-bottom: var(--td-comp-margin-m); font-weight: 600; } .oneid-descriptions__body { border-collapse: collapse; font: var(--td-font-body-medium); width: 100%; } .oneid-descriptions__body.oneid-size-l > tbody > tr > td { padding: var(--td-comp-paddingTB-l); } .oneid-descriptions__body.oneid-size-m > tbody > tr > td { padding: var(--td-comp-paddingLR-m) var(--td-comp-paddingLR-l); } .oneid-descriptions__body.oneid-size-s > tbody > tr > td { padding: var(--td-comp-paddingLR-s) var(--td-comp-paddingLR-l); } .oneid-descriptions__body .oneid-descriptions__label { color: var(--td-text-color-placeholder); } .oneid-descriptions__body--fixed { table-layout: fixed; } .oneid-descriptions__body--border > tbody > tr > td { border: 1px solid var(--td-component-border); } .oneid-descriptions__body--border .oneid-descriptions__label { background-color: var(--td-bg-color-secondarycontainer); } .oneid-descriptions__body--border .oneid-descriptions__label:hover { background-color: var(--td-bg-color-container-hover); } .oneid-empty { font: var(--td-font-body-medium); color: var(--td-text-color-primary); -webkit-box-sizing: border-box; box-sizing: border-box; margin: 0; list-style: none; padding: 0; text-align: center; } .oneid-empty__image { font-size: 48px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .oneid-empty__title { font: var(--td-font-body-medium); color: var(--td-text-color-secondary); margin-top: var(--td-comp-margin-s); margin-bottom: 0; } .oneid-empty__description { font: var(--td-font-body-medium); color: var(--td-text-color-placeholder); margin-top: var(--td-comp-margin-xs); margin-bottom: 0; } .oneid-empty__action { margin-top: var(--td-comp-margin-xxl); margin-bottom: 0; } .oneid-empty.oneid-size-s .oneid-empty__image { font-size: 20px; } .oneid-empty.oneid-size-s .oneid-empty__title { font: var(--td-font-body-small); margin-top: var(--td-comp-margin-xxs); } .oneid-empty.oneid-size-s .oneid-empty__description { font: var(--td-font-body-small); margin-top: var(--td-comp-margin-xxs); } .oneid-empty.oneid-size-l .oneid-empty__image { font-size: 64px; } .oneid-typography { color: var(--td-text-color-primary); font: var(--td-font-body-medium); margin: var(--td-comp-margin-m) 0; } h1.oneid-typography { font: var(--td-font-headline-large); margin-top: var(--td-comp-margin-xxxxl); margin-bottom: var(--td-comp-margin-l); } h2.oneid-typography { font: var(--td-font-headline-medium); margin-top: var(--td-comp-margin-xxxl); margin-bottom: var(--td-comp-margin-l); } h3.oneid-typography { font: var(--td-font-headline-small); margin-top: var(--td-comp-margin-xxl); margin-bottom: var(--td-comp-margin-m); } h4.oneid-typography { font: var(--td-font-title-large); margin-top: var(--td-comp-margin-xl); margin-bottom: var(--td-comp-margin-m); } h5.oneid-typography { font: var(--td-font-title-medium); margin-top: var(--td-comp-margin-l); margin-bottom: var(--td-comp-margin-m); } h6.oneid-typography { font: var(--td-font-title-small); } .oneid-typography strong { font-weight: 600; } .oneid-typography mark { background-color: #fcdf47; } .oneid-typography code { border-radius: var(--td-radius-default); border: 1px solid var(--td-component-border); margin: 0 var(--td-comp-margin-xs); background-color: var(--td-bg-color-secondarycontainer); padding: 1px var(--td-comp-paddingLR-s); -webkit-transition: background-color 0.2s; transition: background-color 0.2s; white-space: nowrap; font: var(--td-font-body-small); font-family: Source Code Pro, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Hiragino Sans GB, Microsoft YaHei UI, Microsoft YaHei; display: inline-block; } .oneid-typography code:hover { border-radius: var(--td-radius-default); border: 1px solid var(--td-component-border); background-color: var(--td-bg-color-secondarycontainer-hover); } .oneid-typography kbd { border-radius: var(--td-radius-default); border: 1px solid var(--td-component-border); margin: 0 var(--td-comp-margin-xs); background-color: var(--td-bg-color-secondarycontainer); padding: 1px var(--td-comp-paddingLR-s); -webkit-box-shadow: 0 1px 0 0 var(--td-component-border); box-shadow: 0 1px 0 0 var(--td-component-border); font: var(--td-font-body-small); font-family: Source Code Pro, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Hiragino Sans GB, Microsoft YaHei UI, Microsoft YaHei; display: inline-block; } .oneid-typography--disabled { color: var(--td-text-color-disabled); cursor: not-allowed; } .oneid-typography--success { color: var(--td-success-color); } .oneid-typography--warning { color: var(--td-warning-color); } .oneid-typography--error { color: var(--td-error-color); } .oneid-typography--secondary { color: var(--td-text-color-secondary); } .oneid-typography-ellipsis-symbol, .oneid-typography .oneid-icon-copy { color: var(--td-brand-color); cursor: pointer; } .oneid-typography-ellipsis-symbol:hover, .oneid-typography .oneid-icon-copy:hover { color: var(--td-brand-color-hover); } .oneid-typography .oneid-icon-checked { color: var(--td-success-color); } .oneid-common { user-select: none; } .oneid-common a { background-color: transparent; text-decoration: none; color: #457ae5; cursor: pointer; } .oneid-common a:active, .oneid-common a:hover { outline-width: 0; } .oneid-common a:hover { text-decoration: none; } .oneid-common ul { padding: 0; margin: 0; list-style: none; } .oneid-common li::before { content: "·"; margin-right: 4px; } /*---------------- Message ---------------*/ .oneid-message.t-message { background-color: rgba(0, 0, 0, 0.8); color: #fff; border-radius: 8px; box-shadow: none; align-items: center; max-width: 280px; overflow-wrap: break-word; word-break: normal; } .oneid-message.t-message.oneid-is-error .oneid-svg, .oneid-message.t-message.oneid-is-error .t-icon { color: #fa5151; } .oneid-message.t-message .oneid-svg, .oneid-message.t-message .t-icon { font-size: 16px; margin-right: 8px; top: 0; } @charset "UTF-8"; .oneid-yuanbao { --oneid-color-dark: #1a1a1a; --oneid-color-white: #fff; --oneid-color-light: #ffffffe5; --oneid-color-red: #fa5151; --oneid-color-green: #27d08e; --oneid-color-link: #457ae5; /*---------------- Button ---------------*/ /*---------------- Checkbox ---------------*/ /*---------------- Dialog ---------------*/ /*---------------- 提示类Dialog ---------------*/ /*---------------- Popup ---------------*/ /*---------------- Loading ---------------*/ /*---------------- Form ---------------*/ } .oneid-yuanbao.oneid-mode-light { --oneid-background-color: var(--oneid-color-white); --oneid-color-maintain: #000; --oneid-color-reverse: #fff; --oneid-color-reverse-90: #ffffffe5; --oneid-color-10: #00000014; --oneid-color-15: #00000026; --oneid-color-40: #0006; --oneid-color-60: #0009; --oneid-color-80: #000c; --oneid-color-90: #000000e5; --oneid-avatar-bgcolor: #ebebeb; --oneid-user-bgcolor: #f6f6f6; --oneid-user-hover-bgcolor: #f2f2f2; --oneid-loading-color-border: #20c57d80; --oneid-loading-color-background: #f4fcf8; --oneid-error-color-background: #f7f7f7; --oneid-brand-blue-color: #457ae5; --oneid-btn-bgcolor: #f6f6f6; --oneid-btn-disable-bgcolor: #dadada; } .oneid-yuanbao.oneid-mode-dark { --oneid-background-color: #303030; --oneid-color-maintain: #fff; --oneid-color-reverse: #000; --oneid-color-reverse-90: #000000e5; --oneid-color-10: #ffffff1a; --oneid-color-15: #ffffff26; --oneid-color-40: #fff6; --oneid-color-60: #fff9; --oneid-color-80: #000c; --oneid-color-90: #ffffffe5; --oneid-avatar-bgcolor: #444; --oneid-user-bgcolor: #3b3b3b; --oneid-user-hover-bgcolor: #424242; --oneid-loading-color-border: #1db472; --oneid-loading-color-background: #2d453c; --oneid-error-color-background: #3b3b3b; --oneid-brand-blue-color: #38f; --oneid-btn-bgcolor: #1d1d1d; --oneid-btn-disable-bgcolor: #3b3b3b; --oneid-scrollbar-color: #444; } .oneid-yuanbao .oneid-button { border-width: 0; border-radius: 8px; background-color: var(--oneid-color-90) !important; border-color: var(--oneid-color-90) !important; --td-brand-color-hover: var(--oneid-font-color); } .oneid-yuanbao .oneid-button .oneid-ripple { display: none; } .oneid-yuanbao .oneid-button.oneid-is-disabled { background-color: var(--oneid-btn-disable-bgcolor) !important; color: var(--oneid-color-white) !important; } .oneid-yuanbao .oneid-checkbox { align-items: flex-start; } .oneid-yuanbao .oneid-checkbox .oneid-checkbox__input { opacity: 0.3; border-color: var(--oneid-color-60); border-radius: 4px; background-color: var(--oneid-background-color); } .oneid-yuanbao .oneid-checkbox.oneid-is-checked .oneid-checkbox__input { opacity: 1; background-color: var(--oneid-color-90); border-color: var(--oneid-color-90); } .oneid-yuanbao .oneid-checkbox.oneid-is-checked .oneid-checkbox__input::after { border-color: var(--oneid-color-reverse-90); } .oneid-yuanbao .oneid-checkbox .oneid-checkbox__label { color: var(--oneid-color-40) !important; margin-left: 3px; line-height: 16px; } .oneid-yuanbao .oneid-checkbox:hover .oneid-checkbox__input { opacity: 1; border-color: var(--oneid-color-90); } .oneid-yuanbao .oneid-checkbox.oneid-is-disabled .oneid-checkbox__input { opacity: 0.3; border-color: var(--oneid-color-60) !important; background-color: var(--oneid-color-40); } .oneid-yuanbao .oneid-checkbox.oneid-is-disabled .oneid-checkbox__input::after { border-color: var(--oneid-color-60) !important; } .oneid-yuanbao .oneid-checkbox.oneid-is-disabled a { color: var(--oneid-color-60); } .oneid-yuanbao .oneid-dialog__position { padding: 0 !important; } .oneid-yuanbao .oneid-dialog { border-radius: 12px; padding: 0; border: none; background-color: var(--oneid-background-color); } .oneid-yuanbao .oneid-dialog__header { color: var(--oneid-color-90); height: 32px; } .oneid-yuanbao .oneid-dialog__body { padding: 0 24px 16px; } .oneid-yuanbao .oneid-dialog__close { width: 24px; height: 24px; padding: 0; margin: 16px 16px 0 0; color: var(--oneid-color-60); } .oneid-yuanbao .oneid-dialog__close:hover { background: none; } .oneid-yuanbao.oneid-prompt-dialog .oneid-dialog { width: 360px; } .oneid-yuanbao.oneid-prompt-dialog .oneid-dialog__header { height: 24px; } .oneid-yuanbao.oneid-prompt-dialog .oneid-dialog__body { padding: 0 24px 24px; } .oneid-yuanbao.oneid-prompt-dialog .oneid-dialog__body .wrapper .header { color: var(--oneid-color-90); font-weight: 600; font-size: 16px; display: flex; align-items: center; } .oneid-yuanbao.oneid-prompt-dialog .oneid-dialog__body .wrapper .header svg { color: #00b259; font-size: 20px; } .oneid-yuanbao.oneid-prompt-dialog .oneid-dialog__body .wrapper .content { padding-top: 16px; color: var(--oneid-color-90); } .oneid-yuanbao.oneid-prompt-dialog .oneid-dialog__footer { box-sizing: border-box; padding: 0 24px 24px 0; } .oneid-yuanbao.oneid-prompt-dialog .oneid-dialog__footer button { width: 88px; height: 36px; color: var(--oneid-color-reverse-90); } .oneid-yuanbao.oneid-prompt-dialog .oneid-dialog__footer button:first-child { color: var(--oneid-color-90); background-color: var(--oneid-user-hover-bgcolor) !important; } .oneid-yuanbao .oneid-popup__content { box-shadow: 0px 8px 12px 0px rgba(0, 0, 0, 0.1019607843); } .oneid-yuanbao .oneid-popup[data-popper-placement^=top] .oneid-popup__content { margin-bottom: 4px; } .oneid-yuanbao .oneid-loading { color: var(--oneid-color-green); font-size: 18px; position: absolute; border-radius: 12px; } .oneid-yuanbao .oneid-loading .oneid-loading--center { position: absolute; top: 28px; border: 1px solid var(--oneid-loading-color-border); padding: 7px 11px; border-radius: 8px; background-color: var(--oneid-loading-color-background); box-shadow: 0px 8px 20px 0px rgba(65, 77, 96, 0.08); } .oneid-yuanbao .oneid-loading__text { color: var(--oneid-color-90); } .oneid-yuanbao .oneid-loading__overlay { background-color: transparent; } .oneid-yuanbao .oneid-form__item { margin-bottom: 16px !important; } .oneid-yuanbao .oneid-form__item-with-extra { margin-bottom: 16px; } .oneid-yuanbao .oneid-form__label { color: var(--oneid-color-90); font-weight: 500; margin-bottom: 8px; line-height: 22px; min-height: auto; } .oneid-yuanbao .oneid-form .oneid-is-error .oneid-input { border-color: var(--oneid-color-red) !important; } .oneid-yuanbao .oneid-form .oneid-input { height: 48px; border-radius: 8px; border: 1px solid var(--oneid-color-10) !important; background-color: transparent; font-size: 16px; padding: 13px 0 13px 12px; caret-color: var(--oneid-color-90); } .oneid-yuanbao .oneid-form .oneid-input input:-webkit-autofill, .oneid-yuanbao .oneid-form .oneid-input input:-webkit-autofill:hover, .oneid-yuanbao .oneid-form .oneid-input input:-webkit-autofill:focus, .oneid-yuanbao .oneid-form .oneid-input input:-webkit-autofill:active { -webkit-text-fill-color: var(--oneid-color-90); box-shadow: 0 0 0px 1000px var(--oneid-background-color) inset; border: 0 none; background-color: transparent; } .oneid-yuanbao .oneid-form .oneid-input.oneid-is-focused { box-shadow: none; } .oneid-yuanbao .oneid-form .oneid-input input { color: var(--oneid-color-90); } .oneid-yuanbao .oneid-form .oneid-input input::placeholder { color: var(--oneid-color-40); } .oneid-yuanbao .oneid-form .oneid-input__suffix { color: var(--oneid-color-90); } .oneid-yuanbao .oneid-form .oneid-input__extra { display: none; } .oneid-authorization-dialog .oneid-dialog { width: 330px; min-height: 397px; display: flex !important; flex-direction: column; } .oneid-authorization-dialog .oneid-dialog__body { flex: 1; height: 100%; display: flex; padding-bottom: 24px !important; } .oneid-authorization-dialog .oneid-dialog .oneid-agreement .oneid-checkbox__label { font-size: 11px; } .oneid-dialog-close-animation .oneid-dialog-zoom .animation-enter, .oneid-dialog-close-animation .oneid-dialog-zoom .animation-exit, .oneid-dialog-close-animation .oneid-dialog-zoom .animation-active, .oneid-dialog-close-animation .oneid-dialog-fade-enter, .oneid-dialog-close-animation .oneid-dialog-fade-appear, .oneid-dialog-close-animation .oneid-dialog-fade-exit, .oneid-dialog-close-animation .oneid-dialog-fade-enter.oneid-dialog-fade-enter-active, .oneid-dialog-close-animation .oneid-dialog-fade-appear.oneid-dialog-fade-appear-active, .oneid-dialog-close-animation .oneid-dialog-fade-exit.oneid-dialog-fade-exit-active, .oneid-dialog-close-animation .oneid-dialog-zoom-enter, .oneid-dialog-close-animation .oneid-dialog-zoom-enter-from, .oneid-dialog-close-animation .oneid-dialog-zoom-appear, .oneid-dialog-close-animation .oneid-dialog-zoom-exit, .oneid-dialog-close-animation .oneid-dialog-zoom-enter-active, .oneid-dialog-close-animation .oneid-dialog-zoom-appear-active, .oneid-dialog-close-animation .oneid-dialog-zoom-exit-active { opacity: 1; animation: none !important; transform: none !important; } .oneid-container { width: 100%; align-items: center; display: flex; flex-direction: column; justify-content: center; display: flex; flex-direction: column; } .oneid-container .content { box-sizing: border-box; height: 100%; display: flex; flex-direction: column; } .oneid-container .header { color: var(--oneid-color-90); align-items: center; display: flex; flex-direction: column; } .oneid-container .header .logo { gap: 13px; align-items: center; display: flex; flex-direction: row; } .oneid-container .header .logo img { width: 44px; height: 44px; border-radius: 50%; } .oneid-container .header .title { margin-top: 12px; font-size: 18px; font-weight: 500; line-height: 1.5; } .oneid-container .list { flex: 1; gap: 12px; height: 100%; overflow-y: auto; margin: 20px 0 28px; display: flex; flex-direction: column; } .oneid-container .list .users { overflow-y: hidden; border-radius: 8px; background-color: var(--oneid-user-bgcolor); font-size: 12px; display: flex; flex-direction: column; } .oneid-container .list .users .title { padding: 10px 0 0 16px; line-height: 17px; color: var(--oneid-color-60); } .oneid-container .list .desc ul { color: var(--oneid-color-60); font-size: 12px; margin: 0 13px; gap: 4px; display: flex; flex-direction: column; } .oneid-container .list .desc ul li { display: flex; align-items: baseline; line-height: 17px; } .oneid-container .footer { display: flex; flex-direction: column; margin: 0 13px; } .oneid-container .footer .actions { margin-bottom: 10px; text-align: center; } .oneid-container .footer .actions button { width: 100%; height: 36px; font-weight: 500; color: var(--oneid-color-reverse-90); } .oneid-container .footer .actions.loading { opacity: 0.3; } @media (max-height: 560px) { .oneid-container .list { margin: 16px 0 16px; } } @keyframes oneid-icon-animation-rotate { from { transform: rotate(0); } to { transform: rotate(360deg); } } .oneid-icon-spin { display: inline-flex; animation: oneid-icon-animation-rotate 1s infinite linear; } .oneid-svg { display: inline-flex; align-items: center; color: inherit; font-style: normal; line-height: 0; text-align: center; text-transform: none; vertical-align: -0.125em; text-rendering: optimizelegibility; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .oneid-agreement { display: flex !important; justify-content: center; color: var(--oneid-color-60) !important; } .oneid-agreement .oneid-checkbox__input { border-radius: 50% !important; } .oneid-agreement .oneid-checkbox__label { font-size: 12px; } .oneid-agreement .oneid-checkbox__label a { color: #576b95; } @keyframes shakeAnimation { 0%, 100% { transform: translateX(0); } 10%, 30%, 50%, 70%, 90% { transform: translateX(-4px); } 20%, 40%, 60%, 80% { transform: translateX(4px); } } .oneid-shake-container.shake { animation: shakeAnimation 0.6s; } .oneid-user-list-selector__container { display: flex; flex-direction: column; overflow-y: hidden; padding: 0 10px; max-height: 115px; } .oneid-user-list-selector__container:hover { overflow-y: scroll; padding-right: 0; } .oneid-user-list-selector__container::-webkit-scrollbar { width: 10px; } .oneid-user-list-selector__container::-webkit-scrollbar-track { background: transparent; } .oneid-user-list-selector__container::-webkit-scrollbar-thumb { border-radius: 18px; border-style: dashed; border-color: transparent; background-color: rgba(0, 0, 0, 0.0784313725); background-clip: padding-box; } .oneid-user-list-selector-item__container { display: flex; align-items: center; gap: 8px; padding: 9px 6px; cursor: default; position: relative; } .oneid-user-list-selector-item__containerClickable { cursor: pointer; border-radius: 8px; } .oneid-user-list-selector-item__containerClickable:not(:last-child)::before { content: ""; position: absolute; bottom: 0; left: 6px; right: 6px; border-bottom: 0.5px solid var(--oneid-color-10); } .oneid-user-list-selector-item__containerClickable:hover { background-color: var(--oneid-user-hover-bgcolor); } .oneid-user-list-selector-item__avatarWrapper { position: relative; } .oneid-user-list-selector-item__avatarExtra > * { position: absolute; bottom: -1px; right: -1px; font-size: 10px; border-radius: 50%; border: 1px solid var(--oneid-background-color); padding: 1px; box-sizing: border-box; z-index: 1; } .oneid-user-list-selector-item__avatar { box-shadow: 0 1.5px 4.5px 0 rgba(65, 97, 152, 0.12); } .oneid-user-list-selector-item__defaultAvatar { border-radius: 50%; font-size: 28px; color: #f2f6fc; background-color: #c4cddf; display: block; } .oneid-user-list-selector-item__infoWrapper { display: flex; flex-direction: column; flex: 1; } .oneid-user-list-selector-item__infoExtra { color: #7b818f; } .oneid-user-list-selector-item__checkIcon { color: var(--oneid-color-90); font-size: 16px; } .oneid-user-list-selector-item__disabledCheckIcon { opacity: 0.15; } .oneid-user-list-selector-item__overlayInner { font-size: 12px; } .oneid-multi-line-text__text { position: relative; display: -webkit-box; overflow: hidden; word-break: break-all; -webkit-box-orient: vertical; -moz-box-orient: vertical; white-space: normal; color: var(--oneid-color-90); } .oneid-multi-line-text__muli-line-popup { width: 250px; } .oneid-multi-line-text__muli-line-popup .oneid-popup__arrow { bottom: auto !important; } .oneid-multi-line-text__muli-line-popup-dark { background: #262626; color: var(--oneid-color-white); } .oneid-multi-line-text__muli-line-popup-dark .oneid-popup__arrow::before { background: #262626; } .oneid-bridge-error { display: flex; flex-direction: column; margin-top: 72px; } .oneid-bridge-error .header-error { display: flex; flex-direction: column; align-items: center; } .oneid-bridge-error .header-error .icon { width: 64px; height: 64px; border-radius: 32px; background-color: var(--oneid-error-color-background); color: var(--oneid-color-40); font-size: 40px; display: flex; align-items: center; justify-content: center; } .oneid-bridge-error .header-error .desc { flex-direction: column; margin-top: 20px; display: flex; align-items: center; justify-content: center; } .oneid-bridge-error .header-error .desc .title { font-size: 16px; font-weight: 500; margin-bottom: 8px; color: var(--oneid-color-90); } .oneid-bridge-error .header-error .desc .msg { color: var(--oneid-color-40); } .oneid-bridge-error .action { flex: 1; margin-top: 52px; display: flex; align-items: center; justify-content: center; } .oneid-bridge-error .action button { height: 36px; width: 120px; font-weight: 500; color: var(--oneid-color-reverse-90); } @charset "UTF-8"; .oneid-yuanbao { --oneid-color-dark: #1a1a1a; --oneid-color-white: #fff; --oneid-color-light: #ffffffe5; --oneid-color-red: #fa5151; --oneid-color-green: #27d08e; --oneid-color-link: #457ae5; /*---------------- Button ---------------*/ /*---------------- Checkbox ---------------*/ /*---------------- Dialog ---------------*/ /*---------------- 提示类Dialog ---------------*/ /*---------------- Popup ---------------*/ /*---------------- Loading ---------------*/ /*---------------- Form ---------------*/ } .oneid-yuanbao.oneid-mode-light { --oneid-background-color: var(--oneid-color-white); --oneid-color-maintain: #000; --oneid-color-reverse: #fff; --oneid-color-reverse-90: #ffffffe5; --oneid-color-10: #00000014; --oneid-color-15: #00000026; --oneid-color-40: #0006; --oneid-color-60: #0009; --oneid-color-80: #000c; --oneid-color-90: #000000e5; --oneid-avatar-bgcolor: #ebebeb; --oneid-user-bgcolor: #f6f6f6; --oneid-user-hover-bgcolor: #f2f2f2; --oneid-loading-color-border: #20c57d80; --oneid-loading-color-background: #f4fcf8; --oneid-error-color-background: #f7f7f7; --oneid-brand-blue-color: #457ae5; --oneid-btn-bgcolor: #f6f6f6; --oneid-btn-disable-bgcolor: #dadada; } .oneid-yuanbao.oneid-mode-dark { --oneid-background-color: #303030; --oneid-color-maintain: #fff; --oneid-color-reverse: #000; --oneid-color-reverse-90: #000000e5; --oneid-color-10: #ffffff1a; --oneid-color-15: #ffffff26; --oneid-color-40: #fff6; --oneid-color-60: #fff9; --oneid-color-80: #000c; --oneid-color-90: #ffffffe5; --oneid-avatar-bgcolor: #444; --oneid-user-bgcolor: #3b3b3b; --oneid-user-hover-bgcolor: #424242; --oneid-loading-color-border: #1db472; --oneid-loading-color-background: #2d453c; --oneid-error-color-background: #3b3b3b; --oneid-brand-blue-color: #38f; --oneid-btn-bgcolor: #1d1d1d; --oneid-btn-disable-bgcolor: #3b3b3b; --oneid-scrollbar-color: #444; } .oneid-yuanbao .oneid-button { border-width: 0; border-radius: 8px; background-color: var(--oneid-color-90) !important; border-color: var(--oneid-color-90) !important; --td-brand-color-hover: var(--oneid-font-color); } .oneid-yuanbao .oneid-button .oneid-ripple { display: none; } .oneid-yuanbao .oneid-button.oneid-is-disabled { background-color: var(--oneid-btn-disable-bgcolor) !important; color: var(--oneid-color-white) !important; } .oneid-yuanbao .oneid-checkbox { align-items: flex-start; } .oneid-yuanbao .oneid-checkbox .oneid-checkbox__input { opacity: 0.3; border-color: var(--oneid-color-60); border-radius: 4px; background-color: var(--oneid-background-color); } .oneid-yuanbao .oneid-checkbox.oneid-is-checked .oneid-checkbox__input { opacity: 1; background-color: var(--oneid-color-90); border-color: var(--oneid-color-90); } .oneid-yuanbao .oneid-checkbox.oneid-is-checked .oneid-checkbox__input::after { border-color: var(--oneid-color-reverse-90); } .oneid-yuanbao .oneid-checkbox .oneid-checkbox__label { color: var(--oneid-color-40) !important; margin-left: 3px; line-height: 16px; } .oneid-yuanbao .oneid-checkbox:hover .oneid-checkbox__input { opacity: 1; border-color: var(--oneid-color-90); } .oneid-yuanbao .oneid-checkbox.oneid-is-disabled .oneid-checkbox__input { opacity: 0.3; border-color: var(--oneid-color-60) !important; background-color: var(--oneid-color-40); } .oneid-yuanbao .oneid-checkbox.oneid-is-disabled .oneid-checkbox__input::after { border-color: var(--oneid-color-60) !important; } .oneid-yuanbao .oneid-checkbox.oneid-is-disabled a { color: var(--oneid-color-60); } .oneid-yuanbao .oneid-dialog__position { padding: 0 !important; } .oneid-yuanbao .oneid-dialog { border-radius: 12px; padding: 0; border: none; background-color: var(--oneid-background-color); } .oneid-yuanbao .oneid-dialog__header { color: var(--oneid-color-90); height: 32px; } .oneid-yuanbao .oneid-dialog__body { padding: 0 24px 16px; } .oneid-yuanbao .oneid-dialog__close { width: 24px; height: 24px; padding: 0; margin: 16px 16px 0 0; color: var(--oneid-color-60); } .oneid-yuanbao .oneid-dialog__close:hover { background: none; } .oneid-yuanbao.oneid-prompt-dialog .oneid-dialog { width: 360px; } .oneid-yuanbao.oneid-prompt-dialog .oneid-dialog__header { height: 24px; } .oneid-yuanbao.oneid-prompt-dialog .oneid-dialog__body { padding: 0 24px 24px; } .oneid-yuanbao.oneid-prompt-dialog .oneid-dialog__body .wrapper .header { color: var(--oneid-color-90); font-weight: 600; font-size: 16px; display: flex; align-items: center; } .oneid-yuanbao.oneid-prompt-dialog .oneid-dialog__body .wrapper .header svg { color: #00b259; font-size: 20px; } .oneid-yuanbao.oneid-prompt-dialog .oneid-dialog__body .wrapper .content { padding-top: 16px; color: var(--oneid-color-90); } .oneid-yuanbao.oneid-prompt-dialog .oneid-dialog__footer { box-sizing: border-box; padding: 0 24px 24px 0; } .oneid-yuanbao.oneid-prompt-dialog .oneid-dialog__footer button { width: 88px; height: 36px; color: var(--oneid-color-reverse-90); } .oneid-yuanbao.oneid-prompt-dialog .oneid-dialog__footer button:first-child { color: var(--oneid-color-90); background-color: var(--oneid-user-hover-bgcolor) !important; } .oneid-yuanbao .oneid-popup__content { box-shadow: 0px 8px 12px 0px rgba(0, 0, 0, 0.1019607843); } .oneid-yuanbao .oneid-popup[data-popper-placement^=top] .oneid-popup__content { margin-bottom: 4px; } .oneid-yuanbao .oneid-loading { color: var(--oneid-color-green); font-size: 18px; position: absolute; border-radius: 12px; } .oneid-yuanbao .oneid-loading .oneid-loading--center { position: absolute; top: 28px; border: 1px solid var(--oneid-loading-color-border); padding: 7px 11px; border-radius: 8px; background-color: var(--oneid-loading-color-background); box-shadow: 0px 8px 20px 0px rgba(65, 77, 96, 0.08); } .oneid-yuanbao .oneid-loading__text { color: var(--oneid-color-90); } .oneid-yuanbao .oneid-loading__overlay { background-color: transparent; } .oneid-yuanbao .oneid-form__item { margin-bottom: 16px !important; } .oneid-yuanbao .oneid-form__item-with-extra { margin-bottom: 16px; } .oneid-yuanbao .oneid-form__label { color: var(--oneid-color-90); font-weight: 500; margin-bottom: 8px; line-height: 22px; min-height: auto; } .oneid-yuanbao .oneid-form .oneid-is-error .oneid-input { border-color: var(--oneid-color-red) !important; } .oneid-yuanbao .oneid-form .oneid-input { height: 48px; border-radius: 8px; border: 1px solid var(--oneid-color-10) !important; background-color: transparent; font-size: 16px; padding: 13px 0 13px 12px; caret-color: var(--oneid-color-90); } .oneid-yuanbao .oneid-form .oneid-input input:-webkit-autofill, .oneid-yuanbao .oneid-form .oneid-input input:-webkit-autofill:hover, .oneid-yuanbao .oneid-form .oneid-input input:-webkit-autofill:focus, .oneid-yuanbao .oneid-form .oneid-input input:-webkit-autofill:active { -webkit-text-fill-color: var(--oneid-color-90); box-shadow: 0 0 0px 1000px var(--oneid-background-color) inset; border: 0 none; background-color: transparent; } .oneid-yuanbao .oneid-form .oneid-input.oneid-is-focused { box-shadow: none; } .oneid-yuanbao .oneid-form .oneid-input input { color: var(--oneid-color-90); } .oneid-yuanbao .oneid-form .oneid-input input::placeholder { color: var(--oneid-color-40); } .oneid-yuanbao .oneid-form .oneid-input__suffix { color: var(--oneid-color-90); } .oneid-yuanbao .oneid-form .oneid-input__extra { display: none; } .oneid-create-account-dialog .oneid-dialog { width: 400px; min-height: 506px; } .oneid-create-account-dialog .oneid-dialog__header { height: 24px !important; } .oneid-create-account-dialog .oneid-dialog .header { color: var(--oneid-color-90); margin-bottom: 8px; font-weight: 500; size: 16px; line-height: 20px; } .oneid-create-account-dialog .oneid-dialog .content { flex-direction: column; display: flex; align-items: center; } .oneid-create-account-dialog .oneid-dialog .content .oneid-form { width: 100%; } .oneid-create-account-dialog .oneid-dialog .content .oneid-form-item__logo { flex-direction: column; display: flex; align-items: center; } .oneid-create-account-dialog .oneid-dialog .content .oneid-loading { color: var(--oneid-color-maintain); } .oneid-create-account-dialog .oneid-dialog .content .upload-avatar-icon { width: 24px; height: 24px; font-size: 24px; color: var(--oneid-color-40); } .oneid-create-account-dialog .oneid-dialog .content .review-loading .oneid-upload-avatar__wrapper--hover-cover { display: flex !important; } .oneid-create-account-dialog .oneid-dialog .content .review-loading .oneid-upload-avatar__wrapper--hover-cover .oneid-loading { color: var(--oneid-color-reverse); } .oneid-create-account-dialog .oneid-dialog .content .create { margin-bottom: 16px; height: 48px; font-weight: 500; color: var(--oneid-color-reverse-90); } .oneid-create-account-dialog .oneid-dialog .footer { margin-top: 32px; } .oneid-create-account-dialog .avatar-item { margin-bottom: 16px !important; } .oneid-create-account-dialog .avatar-item .oneid-form__controls { flex-direction: column; gap: 8px; display: flex; align-items: center; } .oneid-create-account-dialog .avatar-item .oneid-form__controls .oneid-input__help { color: var(--oneid-color-60); font-size: 14px; } @keyframes oneid-icon-animation-rotate { from { transform: rotate(0); } to { transform: rotate(360deg); } } .oneid-icon-spin { display: inline-flex; animation: oneid-icon-animation-rotate 1s infinite linear; } .oneid-svg { display: inline-flex; align-items: center; color: #4e5461; font-style: normal; line-height: 0; text-align: center; text-transform: none; vertical-align: -0.125em; text-rendering: optimizelegibility; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .oneid-footer { min-height: 30px; background-size: contain; background-repeat: no-repeat; background-position: center; } @charset "UTF-8"; .oneid-common { --td-screen-xs: 320px; --td-screen-sm: 768px; --td-screen-md: 992px; --td-screen-lg: 1200px; --td-screen-xl: 1400px; --td-screen-xxl: 1880px; } @-moz-document url-prefix() { .oneid-common .narrow-scrollbar { scrollbar-color: var(--td-scrollbar-color) transparent; scrollbar-width: thin; } } .oneid-common .narrow-scrollbar::-webkit-scrollbar { width: 8px; height: 8px; } .oneid-common .narrow-scrollbar::-webkit-scrollbar-thumb { border: 2px solid transparent; background-clip: content-box; background-color: var(--td-scrollbar-color); border-radius: 15px; } .oneid-common .narrow-scrollbar::-webkit-scrollbar-thumb:vertical:hover, .oneid-common .narrow-scrollbar::-webkit-scrollbar-thumb:horizontal:hover { background-color: var(--td-scrollbar-hover-color); } .oneid-common .oneid-fake-arrow path { -webkit-transition: d 0.2s; transition: d 0.2s; stroke: currentcolor; } .oneid-common .oneid-fake-arrow--active path { d: path("M3.75 10.2002L7.99274 5.7998L12.2361 10.0425"); } .oneid-common .oneid-slide-down-enter-active, .oneid-common .oneid-slide-down-leave-active { -webkit-transition: height 0.2s cubic-bezier(0.38, 0, 0.24, 1), max-height 0.2s cubic-bezier(0.38, 0, 0.24, 1); transition: height 0.2s cubic-bezier(0.38, 0, 0.24, 1), max-height 0.2s cubic-bezier(0.38, 0, 0.24, 1); } .oneid-common, .oneid-common[theme-mode=light] { --td-brand-color-1: #f2f3ff; --td-brand-color-2: #d9e1ff; --td-brand-color-3: #b5c7ff; --td-brand-color-4: #8eabff; --td-brand-color-5: #618dff; --td-brand-color-6: #366ef4; --td-brand-color-7: #0052d9; --td-brand-color-8: #003cab; --td-brand-color-9: #002a7c; --td-brand-color-10: #001a57; --td-warning-color-1: #fff1e9; --td-warning-color-2: #ffd9c2; --td-warning-color-3: #ffb98c; --td-warning-color-4: #fa9550; --td-warning-color-5: #e37318; --td-warning-color-6: #be5a00; --td-warning-color-7: #954500; --td-warning-color-8: #713300; --td-warning-color-9: #532300; --td-warning-color-10: #3b1700; --td-error-color-1: #fff0ed; --td-error-color-2: #ffd8d2; --td-error-color-3: #ffb9b0; --td-error-color-4: #ff9285; --td-error-color-5: #f6685d; --td-error-color-6: #d54941; --td-error-color-7: #ad352f; --td-error-color-8: #881f1c; --td-error-color-9: #68070a; --td-error-color-10: #490002; --td-success-color-1: #e3f9e9; --td-success-color-2: #c6f3d7; --td-success-color-3: #92dab2; --td-success-color-4: #56c08d; --td-success-color-5: #2ba471; --td-success-color-6: #008858; --td-success-color-7: #006c45; --td-success-color-8: #005334; --td-success-color-9: #003b23; --td-success-color-10: #002515; --td-gray-color-1: #f3f3f3; --td-gray-color-2: #eee; --td-gray-color-3: #e8e8e8; --td-gray-color-4: #ddd; --td-gray-color-5: #c6c6c6; --td-gray-color-6: #a6a6a6; --td-gray-color-7: #8b8b8b; --td-gray-color-8: #777; --td-gray-color-9: #5e5e5e; --td-gray-color-10: #4b4b4b; --td-gray-color-11: #393939; --td-gray-color-12: #2c2c2c; --td-gray-color-13: #242424; --td-gray-color-14: #181818; --td-font-white-1: #ffffff; --td-font-white-2: rgba(255, 255, 255, 0.55); --td-font-white-3: rgba(255, 255, 255, 0.35); --td-font-white-4: rgba(255, 255, 255, 0.22); --td-font-gray-1: rgba(0, 0, 0, 0.9); --td-font-gray-2: rgba(0, 0, 0, 0.6); --td-font-gray-3: rgba(0, 0, 0, 0.4); --td-font-gray-4: rgba(0, 0, 0, 0.26); --td-brand-color: var(--td-brand-color-7); --td-warning-color: var(--td-warning-color-5); --td-error-color: var(--td-error-color-6); --td-success-color: var(--td-success-color-5); --td-brand-color-hover: var(--td-brand-color-6); --td-brand-color-focus: var(--td-brand-color-2); --td-brand-color-active: var(--td-brand-color-8); --td-brand-color-disabled: var(--td-brand-color-3); --td-brand-color-light: var(--td-brand-color-1); --td-brand-color-light-hover: var(--td-brand-color-2); --td-warning-color-hover: var(--td-warning-color-4); --td-warning-color-focus: var(--td-warning-color-2); --td-warning-color-active: var(--td-warning-color-6); --td-warning-color-disabled: var(--td-warning-color-3); --td-warning-color-light: var(--td-warning-color-1); --td-warning-color-light-hover: var(--td-warning-color-2); --td-error-color-hover: var(--td-error-color-5); --td-error-color-focus: var(--td-error-color-2); --td-error-color-active: var(--td-error-color-7); --td-error-color-disabled: var(--td-error-color-3); --td-error-color-light: var(--td-error-color-1); --td-error-color-light-hover: var(--td-error-color-2); --td-success-color-hover: var(--td-success-color-4); --td-success-color-focus: var(--td-success-color-2); --td-success-color-active: var(--td-success-color-6); --td-success-color-disabled: var(--td-success-color-3); --td-success-color-light: var(--td-success-color-1); --td-success-color-light-hover: var(--td-success-color-2); --td-mask-active: rgba(0, 0, 0, 0.6); --td-mask-disabled: rgba(255, 255, 255, 0.6); --td-bg-color-page: var(--td-gray-color-2); --td-bg-color-container: #fff; --td-bg-color-container-hover: var(--td-gray-color-1); --td-bg-color-container-active: var(--td-gray-color-3); --td-bg-color-container-select: #fff; --td-bg-color-secondarycontainer: var(--td-gray-color-1); --td-bg-color-secondarycontainer-hover: var(--td-gray-color-2); --td-bg-color-secondarycontainer-active: var(--td-gray-color-4); --td-bg-color-component: var(--td-gray-color-3); --td-bg-color-component-hover: var(--td-gray-color-4); --td-bg-color-component-active: var(--td-gray-color-6); --td-bg-color-secondarycomponent: var(--td-gray-color-4); --td-bg-color-secondarycomponent-hover: var(--td-gray-color-5); --td-bg-color-secondarycomponent-active: var(--td-gray-color-6); --td-bg-color-component-disabled: var(--td-gray-color-2); --td-bg-color-specialcomponent: #fff; --td-text-color-primary: var(--td-font-gray-1); --td-text-color-secondary: var(--td-font-gray-2); --td-text-color-placeholder: var(--td-font-gray-3); --td-text-color-disabled: var(--td-font-gray-4); --td-text-color-anti: #fff; --td-text-color-brand: var(--td-brand-color-7); --td-text-color-link: var(--td-brand-color-8); --td-border-level-1-color: var(--td-gray-color-3); --td-component-stroke: var(--td-gray-color-3); --td-border-level-2-color: var(--td-gray-color-4); --td-component-border: var(--td-gray-color-4); --td-shadow-1: 0 1px 10px rgba(0, 0, 0, 0.05), 0 4px 5px rgba(0, 0, 0, 0.08), 0 2px 4px -1px rgba(0, 0, 0, 0.12); --td-shadow-2: 0 3px 14px 2px rgba(0, 0, 0, 0.05), 0 8px 10px 1px rgba(0, 0, 0, 0.06), 0 5px 5px -3px rgba(0, 0, 0, 0.1); --td-shadow-3: 0 6px 30px 5px rgba(0, 0, 0, 0.05), 0 16px 24px 2px rgba(0, 0, 0, 0.04), 0 8px 10px -5px rgba(0, 0, 0, 0.08); --td-shadow-inset-top: inset 0 0.5px 0 #dcdcdc; --td-shadow-inset-right: inset 0.5px 0 0 #dcdcdc; --td-shadow-inset-bottom: inset 0 -0.5px 0 #dcdcdc; --td-shadow-inset-left: inset -0.5px 0 0 #dcdcdc; --td-table-shadow-color: rgba(0, 0, 0, 0.08); --td-scrollbar-color: rgba(0, 0, 0, 0.1); --td-scrollbar-hover-color: rgba(0, 0, 0, 0.3); --td-scroll-track-color: #fff; } .oneid-common[theme-mode=dark] { --td-brand-color-1: #1b2f51; --td-brand-color-2: #173463; --td-brand-color-3: #143975; --td-brand-color-4: #103d88; --td-brand-color-5: #0d429a; --td-brand-color-6: #054bbe; --td-brand-color-7: #2667d4; --td-brand-color-8: #4582e6; --td-brand-color-9: #699ef5; --td-brand-color-10: #96bbf8; --td-warning-color-1: #4f2a1d; --td-warning-color-2: #582f21; --td-warning-color-3: #733c23; --td-warning-color-4: #a75d2b; --td-warning-color-5: #cf6e2d; --td-warning-color-6: #dc7633; --td-warning-color-7: #e8935c; --td-warning-color-8: #ecbf91; --td-warning-color-9: #eed7bf; --td-warning-color-10: #f3e9dc; --td-error-color-1: #472324; --td-error-color-2: #5e2a2d; --td-error-color-3: #703439; --td-error-color-4: #83383e; --td-error-color-5: #a03f46; --td-error-color-6: #c64751; --td-error-color-7: #de6670; --td-error-color-8: #ec888e; --td-error-color-9: #edb1b6; --td-error-color-10: #eeced0; --td-success-color-1: #193a2a; --td-success-color-2: #1a4230; --td-success-color-3: #17533d; --td-success-color-4: #0d7a55; --td-success-color-5: #059465; --td-success-color-6: #43af8a; --td-success-color-7: #46bf96; --td-success-color-8: #80d2b6; --td-success-color-9: #b4e1d3; --td-success-color-10: #deede8; --td-gray-color-1: #f3f3f3; --td-gray-color-2: #eee; --td-gray-color-3: #e8e8e8; --td-gray-color-4: #ddd; --td-gray-color-5: #c6c6c6; --td-gray-color-6: #a6a6a6; --td-gray-color-7: #8b8b8b; --td-gray-color-8: #777; --td-gray-color-9: #5e5e5e; --td-gray-color-10: #4b4b4b; --td-gray-color-11: #393939; --td-gray-color-12: #2c2c2c; --td-gray-color-13: #242424; --td-gray-color-14: #181818; --td-font-white-1: rgba(255, 255, 255, 0.9); --td-font-white-2: rgba(255, 255, 255, 0.55); --td-font-white-3: rgba(255, 255, 255, 0.35); --td-font-white-4: rgba(255, 255, 255, 0.22); --td-font-gray-1: rgba(0, 0, 0, 0.9); --td-font-gray-2: rgba(0, 0, 0, 0.6); --td-font-gray-3: rgba(0, 0, 0, 0.4); --td-font-gray-4: rgba(0, 0, 0, 0.26); --td-brand-color: var(--td-brand-color-8); --td-warning-color: var(--td-warning-color-5); --td-error-color: var(--td-error-color-6); --td-success-color: var(--td-success-color-5); --td-brand-color-hover: var(--td-brand-color-7); --td-brand-color-focus: var(--td-brand-color-2); --td-brand-color-active: var(--td-brand-color-9); --td-brand-color-disabled: var(--td-brand-color-3); --td-brand-color-light: var(--td-brand-color-1); --td-brand-color-light-hover: var(--td-brand-color-2); --td-warning-color-hover: var(--td-warning-color-4); --td-warning-color-focus: var(--td-warning-color-2); --td-warning-color-active: var(--td-warning-color-6); --td-warning-color-disabled: var(--td-warning-color-3); --td-warning-color-light: var(--td-warning-color-1); --td-warning-color-light-hover: var(--td-warning-color-2); --td-error-color-hover: var(--td-error-color-5); --td-error-color-focus: var(--td-error-color-2); --td-error-color-active: var(--td-error-color-7); --td-error-color-disabled: var(--td-error-color-3); --td-error-color-light: var(--td-error-color-1); --td-error-color-light-hover: var(--td-error-color-2); --td-success-color-hover: var(--td-success-color-4); --td-success-color-focus: var(--td-success-color-2); --td-success-color-active: var(--td-success-color-6); --td-success-color-disabled: var(--td-success-color-3); --td-success-color-light: var(--td-success-color-1); --td-success-color-light-hover: var(--td-success-color-2); --td-mask-active: rgba(0, 0, 0, 0.4); --td-mask-disabled: rgba(0, 0, 0, 0.6); --td-bg-color-page: var(--td-gray-color-14); --td-bg-color-container: var(--td-gray-color-13); --td-bg-color-container-hover: var(--td-gray-color-12); --td-bg-color-container-active: var(--td-gray-color-10); --td-bg-color-container-select: var(--td-gray-color-9); --td-bg-color-secondarycontainer: var(--td-gray-color-12); --td-bg-color-secondarycontainer-hover: var(--td-gray-color-11); --td-bg-color-secondarycontainer-active: var(--td-gray-color-9); --td-bg-color-component: var(--td-gray-color-11); --td-bg-color-component-hover: var(--td-gray-color-10); --td-bg-color-component-active: var(--td-gray-color-9); --td-bg-color-secondarycomponent: var(--td-gray-color-10); --td-bg-color-secondarycomponent-hover: var(--td-gray-color-9); --td-bg-color-secondarycomponent-active: var(--td-gray-color-8); --td-bg-color-component-disabled: var(--td-gray-color-12); --td-bg-color-specialcomponent: transparent; --td-text-color-primary: var(--td-font-white-1); --td-text-color-secondary: var(--td-font-white-2); --td-text-color-placeholder: var(--td-font-white-3); --td-text-color-disabled: var(--td-font-white-4); --td-text-color-anti: #fff; --td-text-color-brand: var(--td-brand-color-8); --td-text-color-link: var(--td-brand-color-8); --td-border-level-1-color: var(--td-gray-color-11); --td-component-stroke: var(--td-gray-color-11); --td-border-level-2-color: var(--td-gray-color-9); --td-component-border: var(--td-gray-color-9); --td-shadow-1: 0 4px 6px rgba(0, 0, 0, 0.06), 0 1px 10px rgba(0, 0, 0, 0.08), 0 2px 4px rgba(0, 0, 0, 0.12); --td-shadow-2: 0 8px 10px rgba(0, 0, 0, 0.12), 0 3px 14px rgba(0, 0, 0, 0.1), 0 5px 5px rgba(0, 0, 0, 0.16); --td-shadow-3: 0 16px 24px rgba(0, 0, 0, 0.14), 0 6px 30px rgba(0, 0, 0, 0.12), 0 8px 10px rgba(0, 0, 0, 0.2); --td-shadow-inset-top: inset 0 0.5px 0 #5e5e5e; --td-shadow-inset-right: inset 0.5px 0 0 #5e5e5e; --td-shadow-inset-bottom: inset 0 -0.5px 0 #5e5e5e; --td-shadow-inset-left: inset -0.5px 0 0 #5e5e5e; --td-table-shadow-color: rgba(0, 0, 0, 0.55); --td-scrollbar-color: rgba(255, 255, 255, 0.1); --td-scrollbar-hover-color: rgba(255, 255, 255, 0.3); --td-scroll-track-color: #333; } .oneid-common { --td-radius-small: 2px; --td-radius-default: 3px; --td-radius-medium: 6px; --td-radius-large: 9px; --td-radius-extraLarge: 12px; --td-radius-round: 999px; --td-radius-circle: 50%; } .oneid-common { --td-font-family: PingFang SC, Microsoft YaHei, Arial Regular; --td-font-family-medium: PingFang SC, Microsoft YaHei, Arial Medium; --td-font-size-link-small: 12px; --td-font-size-link-medium: 14px; --td-font-size-link-large: 16px; --td-font-size-mark-small: 12px; --td-font-size-mark-medium: 14px; --td-font-size-body-small: 12px; --td-font-size-body-medium: 14px; --td-font-size-body-large: 16px; --td-font-size-title-small: 14px; --td-font-size-title-medium: 16px; --td-font-size-title-large: 20px; --td-font-size-headline-small: 24px; --td-font-size-headline-medium: 28px; --td-font-size-headline-large: 36px; --td-font-size-display-medium: 48px; --td-font-size-display-large: 64px; --td-line-height-link-small: 20px; --td-line-height-link-medium: 22px; --td-line-height-link-large: 24px; --td-line-height-mark-small: 20px; --td-line-height-mark-medium: 22px; --td-line-height-body-small: 20px; --td-line-height-body-medium: 22px; --td-line-height-body-large: 24px; --td-line-height-title-small: 22px; --td-line-height-title-medium: 24px; --td-line-height-title-large: 28px; --td-line-height-headline-small: 32px; --td-line-height-headline-medium: 36px; --td-line-height-headline-large: 44px; --td-line-height-display-medium: 56px; --td-line-height-display-large: 72px; --td-font-link-small: var(--td-font-size-link-small) / var(--td-line-height-link-small) var(--td-font-family); --td-font-link-medium: var(--td-font-size-link-medium) / var(--td-line-height-link-medium) var(--td-font-family); --td-font-link-large: var(--td-font-size-link-large) / var(--td-line-height-link-large) var(--td-font-family); --td-font-mark-small: 600 var(--td-font-size-mark-small) / var(--td-line-height-mark-small) var(--td-font-family); --td-font-mark-medium: 600 var(--td-font-size-mark-medium) / var(--td-line-height-mark-medium) var(--td-font-family); --td-font-body-small: var(--td-font-size-body-small) / var(--td-line-height-body-small) var(--td-font-family); --td-font-body-medium: var(--td-font-size-body-medium) / var(--td-line-height-body-medium) var(--td-font-family); --td-font-body-large: var(--td-font-size-body-large) / var(--td-line-height-body-large) var(--td-font-family); --td-font-title-small: 600 var(--td-font-size-title-small) / var(--td-line-height-title-small) var(--td-font-family); --td-font-title-medium: 600 var(--td-font-size-title-medium) / var(--td-line-height-title-medium) var(--td-font-family); --td-font-title-large: 600 var(--td-font-size-title-large) / var(--td-line-height-title-large) var(--td-font-family); --td-font-headline-small: 600 var(--td-font-size-headline-small) / var(--td-line-height-headline-small) var(--td-font-family); --td-font-headline-medium: 600 var(--td-font-size-headline-medium) / var(--td-line-height-headline-medium) var(--td-font-family); --td-font-headline-large: 600 var(--td-font-size-headline-large) / var(--td-line-height-headline-large) var(--td-font-family); --td-font-display-medium: 600 var(--td-font-size-display-medium) / var(--td-line-height-display-medium) var(--td-font-family); --td-font-display-large: 600 var(--td-font-size-display-large) / var(--td-line-height-display-large) var(--td-font-family); } .oneid-common { --td-size-1: 2px; --td-size-2: 4px; --td-size-3: 6px; --td-size-4: 8px; --td-size-5: 12px; --td-size-6: 16px; --td-size-7: 20px; --td-size-8: 24px; --td-size-9: 28px; --td-size-10: 32px; --td-size-11: 36px; --td-size-12: 40px; --td-size-13: 48px; --td-size-14: 56px; --td-size-15: 64px; --td-size-16: 72px; --td-comp-size-xxxs: var(--td-size-6); --td-comp-size-xxs: var(--td-size-7); --td-comp-size-xs: var(--td-size-8); --td-comp-size-s: var(--td-size-9); --td-comp-size-m: var(--td-size-10); --td-comp-size-l: var(--td-size-11); --td-comp-size-xl: var(--td-size-12); --td-comp-size-xxl: var(--td-size-13); --td-comp-size-xxxl: var(--td-size-14); --td-comp-size-xxxxl: var(--td-size-15); --td-comp-size-xxxxxl: var(--td-size-16); --td-pop-padding-s: var(--td-size-2); --td-pop-padding-m: var(--td-size-3); --td-pop-padding-l: var(--td-size-4); --td-pop-padding-xl: var(--td-size-5); --td-pop-padding-xxl: var(--td-size-6); --td-comp-paddingLR-xxs: var(--td-size-1); --td-comp-paddingLR-xs: var(--td-size-2); --td-comp-paddingLR-s: var(--td-size-4); --td-comp-paddingLR-m: var(--td-size-5); --td-comp-paddingLR-l: var(--td-size-6); --td-comp-paddingLR-xl: var(--td-size-8); --td-comp-paddingLR-xxl: var(--td-size-10); --td-comp-paddingTB-xxs: var(--td-size-1); --td-comp-paddingTB-xs: var(--td-size-2); --td-comp-paddingTB-s: var(--td-size-4); --td-comp-paddingTB-m: var(--td-size-5); --td-comp-paddingTB-l: var(--td-size-6); --td-comp-paddingTB-xl: var(--td-size-8); --td-comp-paddingTB-xxl: var(--td-size-10); --td-comp-margin-xxs: var(--td-size-1); --td-comp-margin-xs: var(--td-size-2); --td-comp-margin-s: var(--td-size-4); --td-comp-margin-m: var(--td-size-5); --td-comp-margin-l: var(--td-size-6); --td-comp-margin-xl: var(--td-size-7); --td-comp-margin-xxl: var(--td-size-8); --td-comp-margin-xxxl: var(--td-size-10); --td-comp-margin-xxxxl: var(--td-size-12); } .oneid-layout { font: var(--td-font-body-medium); color: var(--td-text-color-primary); -webkit-box-sizing: border-box; box-sizing: border-box; margin: 0; padding: 0; list-style: none; } .oneid-layout, .oneid-layout__direction-vertical { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; background: var(--td-bg-color-page); -webkit-box-flex: 1; -ms-flex: auto; flex: auto; } .oneid-layout--with-sider, .oneid-layout__direction-horizontal { -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; } .oneid-layout__header { height: var(--td-comp-size-xxxl); background-color: var(--td-bg-color-container); } .oneid-layout__content { -webkit-box-flex: 1; -ms-flex: auto; flex: auto; } .oneid-layout__sider { position: relative; -webkit-transition: all 0.2s; transition: all 0.2s; background: var(--td-bg-color-container); width: 232px; } .oneid-layout__footer { color: var(--td-text-color-placeholder); padding: 24px; } .oneid-row { font: var(--td-font-body-medium); color: var(--td-text-color-primary); -webkit-box-sizing: border-box; box-sizing: border-box; margin: 0; padding: 0; list-style: none; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-flow: row wrap; flex-flow: row wrap; } .oneid-row--start { -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; } .oneid-row--center { -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .oneid-row--end { -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; } .oneid-row--space-between { -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } .oneid-row--space-around { -ms-flex-pack: distribute; justify-content: space-around; } .oneid-row--top { -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; } .oneid-row--middle { -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .oneid-row--bottom { -webkit-box-align: end; -ms-flex-align: end; align-items: flex-end; } .oneid-row--align-top, .oneid-row--align-start { -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; } .oneid-row--align-middle, .oneid-row--align-center { -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .oneid-row--align-bottom, .oneid-row--align-end { -webkit-box-align: end; -ms-flex-align: end; align-items: flex-end; } .oneid-row--align-stretch { -webkit-box-align: stretch; -ms-flex-align: stretch; align-items: stretch; } .oneid-row--align-baseline { -webkit-box-align: baseline; -ms-flex-align: baseline; align-items: baseline; } .oneid-col { position: relative; max-width: 100%; min-height: 1px; -webkit-box-sizing: border-box; box-sizing: border-box; } .oneid-col-12 { display: block; -webkit-box-flex: 0; -ms-flex: 0 0 100%; flex: 0 0 100%; max-width: 100%; } .oneid-col-push-12 { left: 100%; } .oneid-col-pull-12 { right: 100%; } .oneid-col-offset-12 { margin-left: 100%; } .oneid-col-order-12 { -webkit-box-ordinal-group: 13; -ms-flex-order: 12; order: 12; } .oneid-col-11 { display: block; -webkit-box-flex: 0; -ms-flex: 0 0 91.66666667%; flex: 0 0 91.66666667%; max-width: 91.66666667%; } .oneid-col-push-11 { left: 91.66666667%; } .oneid-col-pull-11 { right: 91.66666667%; } .oneid-col-offset-11 { margin-left: 91.66666667%; } .oneid-col-order-11 { -webkit-box-ordinal-group: 12; -ms-flex-order: 11; order: 11; } .oneid-col-10 { display: block; -webkit-box-flex: 0; -ms-flex: 0 0 83.33333333%; flex: 0 0 83.33333333%; max-width: 83.33333333%; } .oneid-col-push-10 { left: 83.33333333%; } .oneid-col-pull-10 { right: 83.33333333%; } .oneid-col-offset-10 { margin-left: 83.33333333%; } .oneid-col-order-10 { -webkit-box-ordinal-group: 11; -ms-flex-order: 10; order: 10; } .oneid-col-9 { display: block; -webkit-box-flex: 0; -ms-flex: 0 0 75%; flex: 0 0 75%; max-width: 75%; } .oneid-col-push-9 { left: 75%; } .oneid-col-pull-9 { right: 75%; } .oneid-col-offset-9 { margin-left: 75%; } .oneid-col-order-9 { -webkit-box-ordinal-group: 10; -ms-flex-order: 9; order: 9; } .oneid-col-8 { display: block; -webkit-box-flex: 0; -ms-flex: 0 0 66.66666667%; flex: 0 0 66.66666667%; max-width: 66.66666667%; } .oneid-col-push-8 { left: 66.66666667%; } .oneid-col-pull-8 { right: 66.66666667%; } .oneid-col-offset-8 { margin-left: 66.66666667%; } .oneid-col-order-8 { -webkit-box-ordinal-group: 9; -ms-flex-order: 8; order: 8; } .oneid-col-7 { display: block; -webkit-box-flex: 0; -ms-flex: 0 0 58.33333333%; flex: 0 0 58.33333333%; max-width: 58.33333333%; } .oneid-col-push-7 { left: 58.33333333%; } .oneid-col-pull-7 { right: 58.33333333%; } .oneid-col-offset-7 { margin-left: 58.33333333%; } .oneid-col-order-7 { -webkit-box-ordinal-group: 8; -ms-flex-order: 7; order: 7; } .oneid-col-6 { display: block; -webkit-box-flex: 0; -ms-flex: 0 0 50%; flex: 0 0 50%; max-width: 50%; } .oneid-col-push-6 { left: 50%; } .oneid-col-pull-6 { right: 50%; } .oneid-col-offset-6 { margin-left: 50%; } .oneid-col-order-6 { -webkit-box-ordinal-group: 7; -ms-flex-order: 6; order: 6; } .oneid-col-5 { display: block; -webkit-box-flex: 0; -ms-flex: 0 0 41.66666667%; flex: 0 0 41.66666667%; max-width: 41.66666667%; } .oneid-col-push-5 { left: 41.66666667%; } .oneid-col-pull-5 { right: 41.66666667%; } .oneid-col-offset-5 { margin-left: 41.66666667%; } .oneid-col-order-5 { -webkit-box-ordinal-group: 6; -ms-flex-order: 5; order: 5; } .oneid-col-4 { display: block; -webkit-box-flex: 0; -ms-flex: 0 0 33.33333333%; flex: 0 0 33.33333333%; max-width: 33.33333333%; } .oneid-col-push-4 { left: 33.33333333%; } .oneid-col-pull-4 { right: 33.33333333%; } .oneid-col-offset-4 { margin-left: 33.33333333%; } .oneid-col-order-4 { -webkit-box-ordinal-group: 5; -ms-flex-order: 4; order: 4; } .oneid-col-3 { display: block; -webkit-box-flex: 0; -ms-flex: 0 0 25%; flex: 0 0 25%; max-width: 25%; } .oneid-col-push-3 { left: 25%; } .oneid-col-pull-3 { right: 25%; } .oneid-col-offset-3 { margin-left: 25%; } .oneid-col-order-3 { -webkit-box-ordinal-group: 4; -ms-flex-order: 3; order: 3; } .oneid-col-2 { display: block; -webkit-box-flex: 0; -ms-flex: 0 0 16.66666667%; flex: 0 0 16.66666667%; max-width: 16.66666667%; } .oneid-col-push-2 { left: 16.66666667%; } .oneid-col-pull-2 { right: 16.66666667%; } .oneid-col-offset-2 { margin-left: 16.66666667%; } .oneid-col-order-2 { -webkit-box-ordinal-group: 3; -ms-flex-order: 2; order: 2; } .oneid-col-1 { display: block; -webkit-box-flex: 0; -ms-flex: 0 0 8.33333333%; flex: 0 0 8.33333333%; max-width: 8.33333333%; } .oneid-col-push-1 { left: 8.33333333%; } .oneid-col-pull-1 { right: 8.33333333%; } .oneid-col-offset-1 { margin-left: 8.33333333%; } .oneid-col-order-1 { -webkit-box-ordinal-group: 2; -ms-flex-order: 1; order: 1; } .oneid-col-0 { display: none; } .oneid-col-push-0 { left: auto; } .oneid-col-pull-0 { right: auto; } .oneid-col-push-0 { left: auto; } .oneid-col-pull-0 { right: auto; } .oneid-col-offset-0 { margin-left: 0; } .oneid-col-order-0 { -webkit-box-ordinal-group: 1; -ms-flex-order: 0; order: 0; } .oneid-col-xs-12 { display: block; -webkit-box-flex: 0; -ms-flex: 0 0 100%; flex: 0 0 100%; max-width: 100%; } .oneid-col-xs-push-12 { left: 100%; } .oneid-col-xs-pull-12 { right: 100%; } .oneid-col-xs-offset-12 { margin-left: 100%; } .oneid-col-xs-order-12 { -webkit-box-ordinal-group: 13; -ms-flex-order: 12; order: 12; } .oneid-col-xs-11 { display: block; -webkit-box-flex: 0; -ms-flex: 0 0 91.66666667%; flex: 0 0 91.66666667%; max-width: 91.66666667%; } .oneid-col-xs-push-11 { left: 91.66666667%; } .oneid-col-xs-pull-11 { right: 91.66666667%; } .oneid-col-xs-offset-11 { margin-left: 91.66666667%; } .oneid-col-xs-order-11 { -webkit-box-ordinal-group: 12; -ms-flex-order: 11; order: 11; } .oneid-col-xs-10 { display: block; -webkit-box-flex: 0; -ms-flex: 0 0 83.33333333%; flex: 0 0 83.33333333%; max-width: 83.33333333%; } .oneid-col-xs-push-10 { left: 83.33333333%; } .oneid-col-xs-pull-10 { right: 83.33333333%; } .oneid-col-xs-offset-10 { margin-left: 83.33333333%; } .oneid-col-xs-order-10 { -webkit-box-ordinal-group: 11; -ms-flex-order: 10; order: 10; } .oneid-col-xs-9 { display: block; -webkit-box-flex: 0; -ms-flex: 0 0 75%; flex: 0 0 75%; max-width: 75%; } .oneid-col-xs-push-9 { left: 75%; } .oneid-col-xs-pull-9 { right: 75%; } .oneid-col-xs-offset-9 { margin-left: 75%; } .oneid-col-xs-order-9 { -webkit-box-ordinal-group: 10; -ms-flex-order: 9; order: 9; } .oneid-col-xs-8 { display: block; -webkit-box-flex: 0; -ms-flex: 0 0 66.66666667%; flex: 0 0 66.66666667%; max-width: 66.66666667%; } .oneid-col-xs-push-8 { left: 66.66666667%; } .oneid-col-xs-pull-8 { right: 66.66666667%; } .oneid-col-xs-offset-8 { margin-left: 66.66666667%; } .oneid-col-xs-order-8 { -webkit-box-ordinal-group: 9; -ms-flex-order: 8; order: 8; } .oneid-col-xs-7 { display: block; -webkit-box-flex: 0; -ms-flex: 0 0 58.33333333%; flex: 0 0 58.33333333%; max-width: 58.33333333%; } .oneid-col-xs-push-7 { left: 58.33333333%; } .oneid-col-xs-pull-7 { right: 58.33333333%; } .oneid-col-xs-offset-7 { margin-left: 58.33333333%; } .oneid-col-xs-order-7 { -webkit-box-ordinal-group: 8; -ms-flex-order: 7; order: 7; } .oneid-col-xs-6 { display: block; -webkit-box-flex: 0; -ms-flex: 0 0 50%; flex: 0 0 50%; max-width: 50%; } .oneid-col-xs-push-6 { left: 50%; } .oneid-col-xs-pull-6 { right: 50%; } .oneid-col-xs-offset-6 { margin-left: 50%; } .oneid-col-xs-order-6 { -webkit-box-ordinal-group: 7; -ms-flex-order: 6; order: 6; } .oneid-col-xs-5 { display: block; -webkit-box-flex: 0; -ms-flex: 0 0 41.66666667%; flex: 0 0 41.66666667%; max-width: 41.66666667%; } .oneid-col-xs-push-5 { left: 41.66666667%; } .oneid-col-xs-pull-5 { right: 41.66666667%; } .oneid-col-xs-offset-5 { margin-left: 41.66666667%; } .oneid-col-xs-order-5 { -webkit-box-ordinal-group: 6; -ms-flex-order: 5; order: 5; } .oneid-col-xs-4 { display: block; -webkit-box-flex: 0; -ms-flex: 0 0 33.33333333%; flex: 0 0 33.33333333%; max-width: 33.33333333%; } .oneid-col-xs-push-4 { left: 33.33333333%; } .oneid-col-xs-pull-4 { right: 33.33333333%; } .oneid-col-xs-offset-4 { margin-left: 33.33333333%; } .oneid-col-xs-order-4 { -webkit-box-ordinal-group: 5; -ms-flex-order: 4; order: 4; } .oneid-col-xs-3 { display: block; -webkit-box-flex: 0; -ms-flex: 0 0 25%; flex: 0 0 25%; max-width: 25%; } .oneid-col-xs-push-3 { left: 25%; } .oneid-col-xs-pull-3 { right: 25%; } .oneid-col-xs-offset-3 { margin-left: 25%; } .oneid-col-xs-order-3 { -webkit-box-ordinal-group: 4; -ms-flex-order: 3; order: 3; } .oneid-col-xs-2 { display: block; -webkit-box-flex: 0; -ms-flex: 0 0 16.66666667%; flex: 0 0 16.66666667%; max-width: 16.66666667%; } .oneid-col-xs-push-2 { left: 16.66666667%; } .oneid-col-xs-pull-2 { right: 16.66666667%; } .oneid-col-xs-offset-2 { margin-left: 16.66666667%; } .oneid-col-xs-order-2 { -webkit-box-ordinal-group: 3; -ms-flex-order: 2; order: 2; } .oneid-col-xs-1 { display: block; -webkit-box-flex: 0; -ms-flex: 0 0 8.33333333%; flex: 0 0 8.33333333%; max-width: 8.33333333%; } .oneid-col-xs-push-1 { left: 8.33333333%; } .oneid-col-xs-pull-1 { right: 8.33333333%; } .oneid-col-xs-offset-1 { margin-left: 8.33333333%; } .oneid-col-xs-order-1 { -webkit-box-ordinal-group: 2; -ms-flex-order: 1; order: 1; } .oneid-col-xs-0 { display: none; } .oneid-col-push-0 { left: auto; } .oneid-col-pull-0 { right: auto; } .oneid-col-xs-push-0 { left: auto; } .oneid-col-xs-pull-0 { right: auto; } .oneid-col-xs-offset-0 { margin-left: 0; } .oneid-col-xs-order-0 { -webkit-box-ordinal-group: 1; -ms-flex-order: 0; order: 0; } @media (min-width: 768px) { .oneid-col-sm-12 { display: block; -webkit-box-flex: 0; -ms-flex: 0 0 100%; flex: 0 0 100%; max-width: 100%; } .oneid-col-sm-push-12 { left: 100%; } .oneid-col-sm-pull-12 { right: 100%; } .oneid-col-sm-offset-12 { margin-left: 100%; } .oneid-col-sm-order-12 { -webkit-box-ordinal-group: 13; -ms-flex-order: 12; order: 12; } .oneid-col-sm-11 { display: block; -webkit-box-flex: 0; -ms-flex: 0 0 91.66666667%; flex: 0 0 91.66666667%; max-width: 91.66666667%; } .oneid-col-sm-push-11 { left: 91.66666667%; } .oneid-col-sm-pull-11 { right: 91.66666667%; } .oneid-col-sm-offset-11 { margin-left: 91.66666667%; } .oneid-col-sm-order-11 { -webkit-box-ordinal-group: 12; -ms-flex-order: 11; order: 11; } .oneid-col-sm-10 { display: block; -webkit-box-flex: 0; -ms-flex: 0 0 83.33333333%; flex: 0 0 83.33333333%; max-width: 83.33333333%; } .oneid-col-sm-push-10 { left: 83.33333333%; } .oneid-col-sm-pull-10 { right: 83.33333333%; } .oneid-col-sm-offset-10 { margin-left: 83.33333333%; } .oneid-col-sm-order-10 { -webkit-box-ordinal-group: 11; -ms-flex-order: 10; order: 10; } .oneid-col-sm-9 { display: block; -webkit-box-flex: 0; -ms-flex: 0 0 75%; flex: 0 0 75%; max-width: 75%; } .oneid-col-sm-push-9 { left: 75%; } .oneid-col-sm-pull-9 { right: 75%; } .oneid-col-sm-offset-9 { margin-left: 75%; } .oneid-col-sm-order-9 { -webkit-box-ordinal-group: 10; -ms-flex-order: 9; order: 9; } .oneid-col-sm-8 { display: block; -webkit-box-flex: 0; -ms-flex: 0 0 66.66666667%; flex: 0 0 66.66666667%; max-width: 66.66666667%; } .oneid-col-sm-push-8 { left: 66.66666667%; } .oneid-col-sm-pull-8 { right: 66.66666667%; } .oneid-col-sm-offset-8 { margin-left: 66.66666667%; } .oneid-col-sm-order-8 { -webkit-box-ordinal-group: 9; -ms-flex-order: 8; order: 8; } .oneid-col-sm-7 { display: block; -webkit-box-flex: 0; -ms-flex: 0 0 58.33333333%; flex: 0 0 58.33333333%; max-width: 58.33333333%; } .oneid-col-sm-push-7 { left: 58.33333333%; } .oneid-col-sm-pull-7 { right: 58.33333333%; } .oneid-col-sm-offset-7 { margin-left: 58.33333333%; } .oneid-col-sm-order-7 { -webkit-box-ordinal-group: 8; -ms-flex-order: 7; order: 7; } .oneid-col-sm-6 { display: block; -webkit-box-flex: 0; -ms-flex: 0 0 50%; flex: 0 0 50%; max-width: 50%; } .oneid-col-sm-push-6 { left: 50%; } .oneid-col-sm-pull-6 { right: 50%; } .oneid-col-sm-offset-6 { margin-left: 50%; } .oneid-col-sm-order-6 { -webkit-box-ordinal-group: 7; -ms-flex-order: 6; order: 6; } .oneid-col-sm-5 { display: block; -webkit-box-flex: 0; -ms-flex: 0 0 41.66666667%; flex: 0 0 41.66666667%; max-width: 41.66666667%; } .oneid-col-sm-push-5 { left: 41.66666667%; } .oneid-col-sm-pull-5 { right: 41.66666667%; } .oneid-col-sm-offset-5 { margin-left: 41.66666667%; } .oneid-col-sm-order-5 { -webkit-box-ordinal-group: 6; -ms-flex-order: 5; order: 5; } .oneid-col-sm-4 { display: block; -webkit-box-flex: 0; -ms-flex: 0 0 33.33333333%; flex: 0 0 33.33333333%; max-width: 33.33333333%; } .oneid-col-sm-push-4 { left: 33.33333333%; } .oneid-col-sm-pull-4 { right: 33.33333333%; } .oneid-col-sm-offset-4 { margin-left: 33.33333333%; } .oneid-col-sm-order-4 { -webkit-box-ordinal-group: 5; -ms-flex-order: 4; order: 4; } .oneid-col-sm-3 { display: block; -webkit-box-flex: 0; -ms-flex: 0 0 25%; flex: 0 0 25%; max-width: 25%; } .oneid-col-sm-push-3 { left: 25%; } .oneid-col-sm-pull-3 { right: 25%; } .oneid-col-sm-offset-3 { margin-left: 25%; } .oneid-col-sm-order-3 { -webkit-box-ordinal-group: 4; -ms-flex-order: 3; order: 3; } .oneid-col-sm-2 { display: block; -webkit-box-flex: 0; -ms-flex: 0 0 16.66666667%; flex: 0 0 16.66666667%; max-width: 16.66666667%; } .oneid-col-sm-push-2 { left: 16.66666667%; } .oneid-col-sm-pull-2 { right: 16.66666667%; } .oneid-col-sm-offset-2 { margin-left: 16.66666667%; } .oneid-col-sm-order-2 { -webkit-box-ordinal-group: 3; -ms-flex-order: 2; order: 2; } .oneid-col-sm-1 { display: block; -webkit-box-flex: 0; -ms-flex: 0 0 8.33333333%; flex: 0 0 8.33333333%; max-width: 8.33333333%; } .oneid-col-sm-push-1 { left: 8.33333333%; } .oneid-col-sm-pull-1 { right: 8.33333333%; } .oneid-col-sm-offset-1 { margin-left: 8.33333333%; } .oneid-col-sm-order-1 { -webkit-box-ordinal-group: 2; -ms-flex-order: 1; order: 1; } .oneid-col-sm-0 { display: none; } .oneid-col-push-0 { left: auto; } .oneid-col-pull-0 { right: auto; } .oneid-col-sm-push-0 { left: auto; } .oneid-col-sm-pull-0 { right: auto; } .oneid-col-sm-offset-0 { margin-left: 0; } .oneid-col-sm-order-0 { -webkit-box-ordinal-group: 1; -ms-flex-order: 0; order: 0; } } @media (min-width: 992px) { .oneid-col-md-12 { display: block; -webkit-box-flex: 0; -ms-flex: 0 0 100%; flex: 0 0 100%; max-width: 100%; } .oneid-col-md-push-12 { left: 100%; } .oneid-col-md-pull-12 { right: 100%; } .oneid-col-md-offset-12 { margin-left: 100%; } .oneid-col-md-order-12 { -webkit-box-ordinal-group: 13; -ms-flex-order: 12; order: 12; } .oneid-col-md-11 { display: block; -webkit-box-flex: 0; -ms-flex: 0 0 91.66666667%; flex: 0 0 91.66666667%; max-width: 91.66666667%; } .oneid-col-md-push-11 { left: 91.66666667%; } .oneid-col-md-pull-11 { right: 91.66666667%; } .oneid-col-md-offset-11 { margin-left: 91.66666667%; } .oneid-col-md-order-11 { -webkit-box-ordinal-group: 12; -ms-flex-order: 11; order: 11; } .oneid-col-md-10 { display: block; -webkit-box-flex: 0; -ms-flex: 0 0 83.33333333%; flex: 0 0 83.33333333%; max-width: 83.33333333%; } .oneid-col-md-push-10 { left: 83.33333333%; } .oneid-col-md-pull-10 { right: 83.33333333%; } .oneid-col-md-offset-10 { margin-left: 83.33333333%; } .oneid-col-md-order-10 { -webkit-box-ordinal-group: 11; -ms-flex-order: 10; order: 10; } .oneid-col-md-9 { display: block; -webkit-box-flex: 0; -ms-flex: 0 0 75%; flex: 0 0 75%; max-width: 75%; } .oneid-col-md-push-9 { left: 75%; } .oneid-col-md-pull-9 { right: 75%; } .oneid-col-md-offset-9 { margin-left: 75%; } .oneid-col-md-order-9 { -webkit-box-ordinal-group: 10; -ms-flex-order: 9; order: 9; } .oneid-col-md-8 { display: block; -webkit-box-flex: 0; -ms-flex: 0 0 66.66666667%; flex: 0 0 66.66666667%; max-width: 66.66666667%; } .oneid-col-md-push-8 { left: 66.66666667%; } .oneid-col-md-pull-8 { right: 66.66666667%; } .oneid-col-md-offset-8 { margin-left: 66.66666667%; } .oneid-col-md-order-8 { -webkit-box-ordinal-group: 9; -ms-flex-order: 8; order: 8; } .oneid-col-md-7 { display: block; -webkit-box-flex: 0; -ms-flex: 0 0 58.33333333%; flex: 0 0 58.33333333%; max-width: 58.33333333%; } .oneid-col-md-push-7 { left: 58.33333333%; } .oneid-col-md-pull-7 { right: 58.33333333%; } .oneid-col-md-offset-7 { margin-left: 58.33333333%; } .oneid-col-md-order-7 { -webkit-box-ordinal-group: 8; -ms-flex-order: 7; order: 7; } .oneid-col-md-6 { display: block; -webkit-box-flex: 0; -ms-flex: 0 0 50%; flex: 0 0 50%; max-width: 50%; } .oneid-col-md-push-6 { left: 50%; } .oneid-col-md-pull-6 { right: 50%; } .oneid-col-md-offset-6 { margin-left: 50%; } .oneid-col-md-order-6 { -webkit-box-ordinal-group: 7; -ms-flex-order: 6; order: 6; } .oneid-col-md-5 { display: block; -webkit-box-flex: 0; -ms-flex: 0 0 41.66666667%; flex: 0 0 41.66666667%; max-width: 41.66666667%; } .oneid-col-md-push-5 { left: 41.66666667%; } .oneid-col-md-pull-5 { right: 41.66666667%; } .oneid-col-md-offset-5 { margin-left: 41.66666667%; } .oneid-col-md-order-5 { -webkit-box-ordinal-group: 6; -ms-flex-order: 5; order: 5; } .oneid-col-md-4 { display: block; -webkit-box-flex: 0; -ms-flex: 0 0 33.33333333%; flex: 0 0 33.33333333%; max-width: 33.33333333%; } .oneid-col-md-push-4 { left: 33.33333333%; } .oneid-col-md-pull-4 { right: 33.33333333%; } .oneid-col-md-offset-4 { margin-left: 33.33333333%; } .oneid-col-md-order-4 { -webkit-box-ordinal-group: 5; -ms-flex-order: 4; order: 4; } .oneid-col-md-3 { display: block; -webkit-box-flex: 0; -ms-flex: 0 0 25%; flex: 0 0 25%; max-width: 25%; } .oneid-col-md-push-3 { left: 25%; } .oneid-col-md-pull-3 { right: 25%; } .oneid-col-md-offset-3 { margin-left: 25%; } .oneid-col-md-order-3 { -webkit-box-ordinal-group: 4; -ms-flex-order: 3; order: 3; } .oneid-col-md-2 { display: block; -webkit-box-flex: 0; -ms-flex: 0 0 16.66666667%; flex: 0 0 16.66666667%; max-width: 16.66666667%; } .oneid-col-md-push-2 { left: 16.66666667%; } .oneid-col-md-pull-2 { right: 16.66666667%; } .oneid-col-md-offset-2 { margin-left: 16.66666667%; } .oneid-col-md-order-2 { -webkit-box-ordinal-group: 3; -ms-flex-order: 2; order: 2; } .oneid-col-md-1 { display: block; -webkit-box-flex: 0; -ms-flex: 0 0 8.33333333%; flex: 0 0 8.33333333%; max-width: 8.33333333%; } .oneid-col-md-push-1 { left: 8.33333333%; } .oneid-col-md-pull-1 { right: 8.33333333%; } .oneid-col-md-offset-1 { margin-left: 8.33333333%; } .oneid-col-md-order-1 { -webkit-box-ordinal-group: 2; -ms-flex-order: 1; order: 1; } .oneid-col-md-0 { display: none; } .oneid-col-push-0 { left: auto; } .oneid-col-pull-0 { right: auto; } .oneid-col-md-push-0 { left: auto; } .oneid-col-md-pull-0 { right: auto; } .oneid-col-md-offset-0 { margin-left: 0; } .oneid-col-md-order-0 { -webkit-box-ordinal-group: 1; -ms-flex-order: 0; order: 0; } } @media (min-width: 1200px) { .oneid-col-lg-12 { display: block; -webkit-box-flex: 0; -ms-flex: 0 0 100%; flex: 0 0 100%; max-width: 100%; } .oneid-col-lg-push-12 { left: 100%; } .oneid-col-lg-pull-12 { right: 100%; } .oneid-col-lg-offset-12 { margin-left: 100%; } .oneid-col-lg-order-12 { -webkit-box-ordinal-group: 13; -ms-flex-order: 12; order: 12; } .oneid-col-lg-11 { display: block; -webkit-box-flex: 0; -ms-flex: 0 0 91.66666667%; flex: 0 0 91.66666667%; max-width: 91.66666667%; } .oneid-col-lg-push-11 { left: 91.66666667%; } .oneid-col-lg-pull-11 { right: 91.66666667%; } .oneid-col-lg-offset-11 { margin-left: 91.66666667%; } .oneid-col-lg-order-11 { -webkit-box-ordinal-group: 12; -ms-flex-order: 11; order: 11; } .oneid-col-lg-10 { display: block; -webkit-box-flex: 0; -ms-flex: 0 0 83.33333333%; flex: 0 0 83.33333333%; max-width: 83.33333333%; } .oneid-col-lg-push-10 { left: 83.33333333%; } .oneid-col-lg-pull-10 { right: 83.33333333%; } .oneid-col-lg-offset-10 { margin-left: 83.33333333%; } .oneid-col-lg-order-10 { -webkit-box-ordinal-group: 11; -ms-flex-order: 10; order: 10; } .oneid-col-lg-9 { display: block; -webkit-box-flex: 0; -ms-flex: 0 0 75%; flex: 0 0 75%; max-width: 75%; } .oneid-col-lg-push-9 { left: 75%; } .oneid-col-lg-pull-9 { right: 75%; } .oneid-col-lg-offset-9 { margin-left: 75%; } .oneid-col-lg-order-9 { -webkit-box-ordinal-group: 10; -ms-flex-order: 9; order: 9; } .oneid-col-lg-8 { display: block; -webkit-box-flex: 0; -ms-flex: 0 0 66.66666667%; flex: 0 0 66.66666667%; max-width: 66.66666667%; } .oneid-col-lg-push-8 { left: 66.66666667%; } .oneid-col-lg-pull-8 { right: 66.66666667%; } .oneid-col-lg-offset-8 { margin-left: 66.66666667%; } .oneid-col-lg-order-8 { -webkit-box-ordinal-group: 9; -ms-flex-order: 8; order: 8; } .oneid-col-lg-7 { display: block; -webkit-box-flex: 0; -ms-flex: 0 0 58.33333333%; flex: 0 0 58.33333333%; max-width: 58.33333333%; } .oneid-col-lg-push-7 { left: 58.33333333%; } .oneid-col-lg-pull-7 { right: 58.33333333%; } .oneid-col-lg-offset-7 { margin-left: 58.33333333%; } .oneid-col-lg-order-7 { -webkit-box-ordinal-group: 8; -ms-flex-order: 7; order: 7; } .oneid-col-lg-6 { display: block; -webkit-box-flex: 0; -ms-flex: 0 0 50%; flex: 0 0 50%; max-width: 50%; } .oneid-col-lg-push-6 { left: 50%; } .oneid-col-lg-pull-6 { right: 50%; } .oneid-col-lg-offset-6 { margin-left: 50%; } .oneid-col-lg-order-6 { -webkit-box-ordinal-group: 7; -ms-flex-order: 6; order: 6; } .oneid-col-lg-5 { display: block; -webkit-box-flex: 0; -ms-flex: 0 0 41.66666667%; flex: 0 0 41.66666667%; max-width: 41.66666667%; } .oneid-col-lg-push-5 { left: 41.66666667%; } .oneid-col-lg-pull-5 { right: 41.66666667%; } .oneid-col-lg-offset-5 { margin-left: 41.66666667%; } .oneid-col-lg-order-5 { -webkit-box-ordinal-group: 6; -ms-flex-order: 5; order: 5; } .oneid-col-lg-4 { display: block; -webkit-box-flex: 0; -ms-flex: 0 0 33.33333333%; flex: 0 0 33.33333333%; max-width: 33.33333333%; } .oneid-col-lg-push-4 { left: 33.33333333%; } .oneid-col-lg-pull-4 { right: 33.33333333%; } .oneid-col-lg-offset-4 { margin-left: 33.33333333%; } .oneid-col-lg-order-4 { -webkit-box-ordinal-group: 5; -ms-flex-order: 4; order: 4; } .oneid-col-lg-3 { display: block; -webkit-box-flex: 0; -ms-flex: 0 0 25%; flex: 0 0 25%; max-width: 25%; } .oneid-col-lg-push-3 { left: 25%; } .oneid-col-lg-pull-3 { right: 25%; } .oneid-col-lg-offset-3 { margin-left: 25%; } .oneid-col-lg-order-3 { -webkit-box-ordinal-group: 4; -ms-flex-order: 3; order: 3; } .oneid-col-lg-2 { display: block; -webkit-box-flex: 0; -ms-flex: 0 0 16.66666667%; flex: 0 0 16.66666667%; max-width: 16.66666667%; } .oneid-col-lg-push-2 { left: 16.66666667%; } .oneid-col-lg-pull-2 { right: 16.66666667%; } .oneid-col-lg-offset-2 { margin-left: 16.66666667%; } .oneid-col-lg-order-2 { -webkit-box-ordinal-group: 3; -ms-flex-order: 2; order: 2; } .oneid-col-lg-1 { display: block; -webkit-box-flex: 0; -ms-flex: 0 0 8.33333333%; flex: 0 0 8.33333333%; max-width: 8.33333333%; } .oneid-col-lg-push-1 { left: 8.33333333%; } .oneid-col-lg-pull-1 { right: 8.33333333%; } .oneid-col-lg-offset-1 { margin-left: 8.33333333%; } .oneid-col-lg-order-1 { -webkit-box-ordinal-group: 2; -ms-flex-order: 1; order: 1; } .oneid-col-lg-0 { display: none; } .oneid-col-push-0 { left: auto; } .oneid-col-pull-0 { right: auto; } .oneid-col-lg-push-0 { left: auto; } .oneid-col-lg-pull-0 { right: auto; } .oneid-col-lg-offset-0 { margin-left: 0; } .oneid-col-lg-order-0 { -webkit-box-ordinal-group: 1; -ms-flex-order: 0; order: 0; } } @media (min-width: 1400px) { .oneid-col-xl-12 { display: block; -webkit-box-flex: 0; -ms-flex: 0 0 100%; flex: 0 0 100%; max-width: 100%; } .oneid-col-xl-push-12 { left: 100%; } .oneid-col-xl-pull-12 { right: 100%; } .oneid-col-xl-offset-12 { margin-left: 100%; } .oneid-col-xl-order-12 { -webkit-box-ordinal-group: 13; -ms-flex-order: 12; order: 12; } .oneid-col-xl-11 { display: block; -webkit-box-flex: 0; -ms-flex: 0 0 91.66666667%; flex: 0 0 91.66666667%; max-width: 91.66666667%; } .oneid-col-xl-push-11 { left: 91.66666667%; } .oneid-col-xl-pull-11 { right: 91.66666667%; } .oneid-col-xl-offset-11 { margin-left: 91.66666667%; } .oneid-col-xl-order-11 { -webkit-box-ordinal-group: 12; -ms-flex-order: 11; order: 11; } .oneid-col-xl-10 { display: block; -webkit-box-flex: 0; -ms-flex: 0 0 83.33333333%; flex: 0 0 83.33333333%; max-width: 83.33333333%; } .oneid-col-xl-push-10 { left: 83.33333333%; } .oneid-col-xl-pull-10 { right: 83.33333333%; } .oneid-col-xl-offset-10 { margin-left: 83.33333333%; } .oneid-col-xl-order-10 { -webkit-box-ordinal-group: 11; -ms-flex-order: 10; order: 10; } .oneid-col-xl-9 { display: block; -webkit-box-flex: 0; -ms-flex: 0 0 75%; flex: 0 0 75%; max-width: 75%; } .oneid-col-xl-push-9 { left: 75%; } .oneid-col-xl-pull-9 { right: 75%; } .oneid-col-xl-offset-9 { margin-left: 75%; } .oneid-col-xl-order-9 { -webkit-box-ordinal-group: 10; -ms-flex-order: 9; order: 9; } .oneid-col-xl-8 { display: block; -webkit-box-flex: 0; -ms-flex: 0 0 66.66666667%; flex: 0 0 66.66666667%; max-width: 66.66666667%; } .oneid-col-xl-push-8 { left: 66.66666667%; } .oneid-col-xl-pull-8 { right: 66.66666667%; } .oneid-col-xl-offset-8 { margin-left: 66.66666667%; } .oneid-col-xl-order-8 { -webkit-box-ordinal-group: 9; -ms-flex-order: 8; order: 8; } .oneid-col-xl-7 { display: block; -webkit-box-flex: 0; -ms-flex: 0 0 58.33333333%; flex: 0 0 58.33333333%; max-width: 58.33333333%; } .oneid-col-xl-push-7 { left: 58.33333333%; } .oneid-col-xl-pull-7 { right: 58.33333333%; } .oneid-col-xl-offset-7 { margin-left: 58.33333333%; } .oneid-col-xl-order-7 { -webkit-box-ordinal-group: 8; -ms-flex-order: 7; order: 7; } .oneid-col-xl-6 { display: block; -webkit-box-flex: 0; -ms-flex: 0 0 50%; flex: 0 0 50%; max-width: 50%; } .oneid-col-xl-push-6 { left: 50%; } .oneid-col-xl-pull-6 { right: 50%; } .oneid-col-xl-offset-6 { margin-left: 50%; } .oneid-col-xl-order-6 { -webkit-box-ordinal-group: 7; -ms-flex-order: 6; order: 6; } .oneid-col-xl-5 { display: block; -webkit-box-flex: 0; -ms-flex: 0 0 41.66666667%; flex: 0 0 41.66666667%; max-width: 41.66666667%; } .oneid-col-xl-push-5 { left: 41.66666667%; } .oneid-col-xl-pull-5 { right: 41.66666667%; } .oneid-col-xl-offset-5 { margin-left: 41.66666667%; } .oneid-col-xl-order-5 { -webkit-box-ordinal-group: 6; -ms-flex-order: 5; order: 5; } .oneid-col-xl-4 { display: block; -webkit-box-flex: 0; -ms-flex: 0 0 33.33333333%; flex: 0 0 33.33333333%; max-width: 33.33333333%; } .oneid-col-xl-push-4 { left: 33.33333333%; } .oneid-col-xl-pull-4 { right: 33.33333333%; } .oneid-col-xl-offset-4 { margin-left: 33.33333333%; } .oneid-col-xl-order-4 { -webkit-box-ordinal-group: 5; -ms-flex-order: 4; order: 4; } .oneid-col-xl-3 { display: block; -webkit-box-flex: 0; -ms-flex: 0 0 25%; flex: 0 0 25%; max-width: 25%; } .oneid-col-xl-push-3 { left: 25%; } .oneid-col-xl-pull-3 { right: 25%; } .oneid-col-xl-offset-3 { margin-left: 25%; } .oneid-col-xl-order-3 { -webkit-box-ordinal-group: 4; -ms-flex-order: 3; order: 3; } .oneid-col-xl-2 { display: block; -webkit-box-flex: 0; -ms-flex: 0 0 16.66666667%; flex: 0 0 16.66666667%; max-width: 16.66666667%; } .oneid-col-xl-push-2 { left: 16.66666667%; } .oneid-col-xl-pull-2 { right: 16.66666667%; } .oneid-col-xl-offset-2 { margin-left: 16.66666667%; } .oneid-col-xl-order-2 { -webkit-box-ordinal-group: 3; -ms-flex-order: 2; order: 2; } .oneid-col-xl-1 { display: block; -webkit-box-flex: 0; -ms-flex: 0 0 8.33333333%; flex: 0 0 8.33333333%; max-width: 8.33333333%; } .oneid-col-xl-push-1 { left: 8.33333333%; } .oneid-col-xl-pull-1 { right: 8.33333333%; } .oneid-col-xl-offset-1 { margin-left: 8.33333333%; } .oneid-col-xl-order-1 { -webkit-box-ordinal-group: 2; -ms-flex-order: 1; order: 1; } .oneid-col-xl-0 { display: none; } .oneid-col-push-0 { left: auto; } .oneid-col-pull-0 { right: auto; } .oneid-col-xl-push-0 { left: auto; } .oneid-col-xl-pull-0 { right: auto; } .oneid-col-xl-offset-0 { margin-left: 0; } .oneid-col-xl-order-0 { -webkit-box-ordinal-group: 1; -ms-flex-order: 0; order: 0; } } @media (min-width: 1880px) { .oneid-col-xxl-12 { display: block; -webkit-box-flex: 0; -ms-flex: 0 0 100%; flex: 0 0 100%; max-width: 100%; } .oneid-col-xxl-push-12 { left: 100%; } .oneid-col-xxl-pull-12 { right: 100%; } .oneid-col-xxl-offset-12 { margin-left: 100%; } .oneid-col-xxl-order-12 { -webkit-box-ordinal-group: 13; -ms-flex-order: 12; order: 12; } .oneid-col-xxl-11 { display: block; -webkit-box-flex: 0; -ms-flex: 0 0 91.66666667%; flex: 0 0 91.66666667%; max-width: 91.66666667%; } .oneid-col-xxl-push-11 { left: 91.66666667%; } .oneid-col-xxl-pull-11 { right: 91.66666667%; } .oneid-col-xxl-offset-11 { margin-left: 91.66666667%; } .oneid-col-xxl-order-11 { -webkit-box-ordinal-group: 12; -ms-flex-order: 11; order: 11; } .oneid-col-xxl-10 { display: block; -webkit-box-flex: 0; -ms-flex: 0 0 83.33333333%; flex: 0 0 83.33333333%; max-width: 83.33333333%; } .oneid-col-xxl-push-10 { left: 83.33333333%; } .oneid-col-xxl-pull-10 { right: 83.33333333%; } .oneid-col-xxl-offset-10 { margin-left: 83.33333333%; } .oneid-col-xxl-order-10 { -webkit-box-ordinal-group: 11; -ms-flex-order: 10; order: 10; } .oneid-col-xxl-9 { display: block; -webkit-box-flex: 0; -ms-flex: 0 0 75%; flex: 0 0 75%; max-width: 75%; } .oneid-col-xxl-push-9 { left: 75%; } .oneid-col-xxl-pull-9 { right: 75%; } .oneid-col-xxl-offset-9 { margin-left: 75%; } .oneid-col-xxl-order-9 { -webkit-box-ordinal-group: 10; -ms-flex-order: 9; order: 9; } .oneid-col-xxl-8 { display: block; -webkit-box-flex: 0; -ms-flex: 0 0 66.66666667%; flex: 0 0 66.66666667%; max-width: 66.66666667%; } .oneid-col-xxl-push-8 { left: 66.66666667%; } .oneid-col-xxl-pull-8 { right: 66.66666667%; } .oneid-col-xxl-offset-8 { margin-left: 66.66666667%; } .oneid-col-xxl-order-8 { -webkit-box-ordinal-group: 9; -ms-flex-order: 8; order: 8; } .oneid-col-xxl-7 { display: block; -webkit-box-flex: 0; -ms-flex: 0 0 58.33333333%; flex: 0 0 58.33333333%; max-width: 58.33333333%; } .oneid-col-xxl-push-7 { left: 58.33333333%; } .oneid-col-xxl-pull-7 { right: 58.33333333%; } .oneid-col-xxl-offset-7 { margin-left: 58.33333333%; } .oneid-col-xxl-order-7 { -webkit-box-ordinal-group: 8; -ms-flex-order: 7; order: 7; } .oneid-col-xxl-6 { display: block; -webkit-box-flex: 0; -ms-flex: 0 0 50%; flex: 0 0 50%; max-width: 50%; } .oneid-col-xxl-push-6 { left: 50%; } .oneid-col-xxl-pull-6 { right: 50%; } .oneid-col-xxl-offset-6 { margin-left: 50%; } .oneid-col-xxl-order-6 { -webkit-box-ordinal-group: 7; -ms-flex-order: 6; order: 6; } .oneid-col-xxl-5 { display: block; -webkit-box-flex: 0; -ms-flex: 0 0 41.66666667%; flex: 0 0 41.66666667%; max-width: 41.66666667%; } .oneid-col-xxl-push-5 { left: 41.66666667%; } .oneid-col-xxl-pull-5 { right: 41.66666667%; } .oneid-col-xxl-offset-5 { margin-left: 41.66666667%; } .oneid-col-xxl-order-5 { -webkit-box-ordinal-group: 6; -ms-flex-order: 5; order: 5; } .oneid-col-xxl-4 { display: block; -webkit-box-flex: 0; -ms-flex: 0 0 33.33333333%; flex: 0 0 33.33333333%; max-width: 33.33333333%; } .oneid-col-xxl-push-4 { left: 33.33333333%; } .oneid-col-xxl-pull-4 { right: 33.33333333%; } .oneid-col-xxl-offset-4 { margin-left: 33.33333333%; } .oneid-col-xxl-order-4 { -webkit-box-ordinal-group: 5; -ms-flex-order: 4; order: 4; } .oneid-col-xxl-3 { display: block; -webkit-box-flex: 0; -ms-flex: 0 0 25%; flex: 0 0 25%; max-width: 25%; } .oneid-col-xxl-push-3 { left: 25%; } .oneid-col-xxl-pull-3 { right: 25%; } .oneid-col-xxl-offset-3 { margin-left: 25%; } .oneid-col-xxl-order-3 { -webkit-box-ordinal-group: 4; -ms-flex-order: 3; order: 3; } .oneid-col-xxl-2 { display: block; -webkit-box-flex: 0; -ms-flex: 0 0 16.66666667%; flex: 0 0 16.66666667%; max-width: 16.66666667%; } .oneid-col-xxl-push-2 { left: 16.66666667%; } .oneid-col-xxl-pull-2 { right: 16.66666667%; } .oneid-col-xxl-offset-2 { margin-left: 16.66666667%; } .oneid-col-xxl-order-2 { -webkit-box-ordinal-group: 3; -ms-flex-order: 2; order: 2; } .oneid-col-xxl-1 { display: block; -webkit-box-flex: 0; -ms-flex: 0 0 8.33333333%; flex: 0 0 8.33333333%; max-width: 8.33333333%; } .oneid-col-xxl-push-1 { left: 8.33333333%; } .oneid-col-xxl-pull-1 { right: 8.33333333%; } .oneid-col-xxl-offset-1 { margin-left: 8.33333333%; } .oneid-col-xxl-order-1 { -webkit-box-ordinal-group: 2; -ms-flex-order: 1; order: 1; } .oneid-col-xxl-0 { display: none; } .oneid-col-push-0 { left: auto; } .oneid-col-pull-0 { right: auto; } .oneid-col-xxl-push-0 { left: auto; } .oneid-col-xxl-pull-0 { right: auto; } .oneid-col-xxl-offset-0 { margin-left: 0; } .oneid-col-xxl-order-0 { -webkit-box-ordinal-group: 1; -ms-flex-order: 0; order: 0; } } @-webkit-keyframes t-fade-in { from { opacity: 0; } to { opacity: 1; } } @keyframes t-fade-in { from { opacity: 0; } to { opacity: 1; } } @-webkit-keyframes t-fade-out { from { opacity: 1; } to { opacity: 0; } } @keyframes t-fade-out { from { opacity: 1; } to { opacity: 0; } } @-webkit-keyframes t-spin { from { -webkit-transform: rotate(0deg); transform: rotate(0deg); } to { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @keyframes t-spin { from { -webkit-transform: rotate(0deg); transform: rotate(0deg); } to { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } .oneid-icon-loading { -webkit-animation: t-spin 1s linear infinite; animation: t-spin 1s linear infinite; } @-webkit-keyframes t-zoom-out { from { -webkit-transform: scale(0.2); transform: scale(0.2); } to { -webkit-transform: scale(1); transform: scale(1); } } @keyframes t-zoom-out { from { -webkit-transform: scale(0.2); transform: scale(0.2); } to { -webkit-transform: scale(1); transform: scale(1); } } .oneid-loading { font: var(--td-font-body-medium); color: var(--td-text-color-primary); -webkit-box-sizing: border-box; box-sizing: border-box; margin: 0; padding: 0; list-style: none; position: relative; color: var(--td-brand-color); font-size: var(--td-comp-size-l); } .oneid-loading--lock { overflow: hidden; } .oneid-loading.oneid-size-s { font-size: var(--td-comp-size-xxxs); } .oneid-loading.oneid-size-l { font-size: var(--td-comp-size-xxxl); } .oneid-loading__parent--relative { position: relative !important; } .oneid-loading__fullscreen { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 3500; } .oneid-loading--center { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; vertical-align: middle; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .oneid-loading__content { position: absolute; left: 48%; top: 20%; } .oneid-loading--inherit-color { color: inherit; } .oneid-loading__parent { position: relative; } .oneid-loading__overlay { background-color: var(--td-mask-disabled); } /** 仅用于作为包裹元素时 */ .oneid-loading--full { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 3500; } .oneid-loading--hidden { visibility: hidden; } .oneid-loading--visible { visibility: visible; } .oneid-loading__text { width: auto; display: inline-block; vertical-align: middle; font: var(--td-font-body-medium); margin-left: var(--td-comp-margin-xs); } .oneid-loading__gradient { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; vertical-align: middle; } .oneid-loading__gradient-conic { width: 100%; height: 100%; border-radius: var(--td-radius-circle); /* stylelint-disable-next-line color-no-hex */ background: conic-gradient(from 90deg at 50% 50%, #fff 0deg, currentcolor 360deg); /* stylelint-disable-next-line */ -webkit-mask: radial-gradient(transparent calc(50% - 0.5px), #fff 50%); /* stylelint-disable-next-line color-no-hex */ mask: radial-gradient(transparent calc(50% - 0.5px), #fff 50%); } .content-placement-top .oneid-popup[data-popper-placement^=top] .oneid-popup__content { margin-bottom: var(--td-comp-margin-s); } .content-placement-top .oneid-popup[data-popper-placement^=top] .oneid-popup__content--arrow { margin-bottom: var(--td-comp-margin-l); } .content-placement-bottom .oneid-popup[data-popper-placement^=bottom] .oneid-popup__content { margin-top: var(--td-comp-margin-s); } .content-placement-bottom .oneid-popup[data-popper-placement^=bottom] .oneid-popup__content--arrow { margin-top: var(--td-comp-margin-l); } .content-placement-left .oneid-popup[data-popper-placement^=left] .oneid-popup__content { margin-right: var(--td-comp-margin-s); } .content-placement-left .oneid-popup[data-popper-placement^=left] .oneid-popup__content--arrow { margin-right: var(--td-comp-margin-l); } .content-placement-left .oneid-popup[data-popper-placement^=left] .oneid-popup__content--text { max-width: 480px; } .content-placement-right .oneid-popup[data-popper-placement^=right] .oneid-popup__content { margin-left: var(--td-comp-margin-s); } .content-placement-right .oneid-popup[data-popper-placement^=right] .oneid-popup__content--arrow { margin-left: var(--td-comp-margin-l); } .content-placement-right .oneid-popup[data-popper-placement^=right] .oneid-popup__content--text { max-width: 480px; } .oneid-popup { font: var(--td-font-body-medium); -webkit-box-sizing: border-box; box-sizing: border-box; margin: 0; padding: 0; list-style: none; color: var(--td-text-color-primary); display: inline-block; z-index: 5500; } .oneid-popup__content { position: relative; background: var(--td-bg-color-container); -webkit-box-shadow: var(--td-shadow-2), var(--td-shadow-inset-top), var(--td-shadow-inset-right), var(--td-shadow-inset-bottom), var(--td-shadow-inset-left); box-shadow: var(--td-shadow-2), var(--td-shadow-inset-top), var(--td-shadow-inset-right), var(--td-shadow-inset-bottom), var(--td-shadow-inset-left); border-radius: var(--td-radius-medium); padding: var(--td-comp-paddingTB-xs) var(--td-comp-paddingLR-s); font-size: var(--td-font-size-body-medium); line-height: var(--td-line-height-body-medium); -webkit-box-sizing: border-box; box-sizing: border-box; word-break: break-all; } .oneid-popup__arrow { position: absolute; z-index: 1; width: 8px; height: 8px; } .oneid-popup__arrow::before { position: absolute; content: ""; width: 8px; height: 8px; -webkit-transform: rotate(45deg); transform: rotate(45deg); background: var(--td-bg-color-container); } .oneid-popup[data-popper-placement^=top] .oneid-popup__content { margin-bottom: var(--td-comp-margin-s); } .oneid-popup[data-popper-placement^=top] .oneid-popup__content--arrow { margin-bottom: var(--td-comp-margin-l); } .oneid-popup[data-popper-placement^=bottom] .oneid-popup__content { margin-top: var(--td-comp-margin-s); } .oneid-popup[data-popper-placement^=bottom] .oneid-popup__content--arrow { margin-top: var(--td-comp-margin-l); } .oneid-popup[data-popper-placement^=left] .oneid-popup__content { margin-right: var(--td-comp-margin-s); } .oneid-popup[data-popper-placement^=left] .oneid-popup__content--arrow { margin-right: var(--td-comp-margin-l); } .oneid-popup[data-popper-placement^=left] .oneid-popup__content--text { max-width: 480px; } .oneid-popup[data-popper-placement^=right] .oneid-popup__content { margin-left: var(--td-comp-margin-s); } .oneid-popup[data-popper-placement^=right] .oneid-popup__content--arrow { margin-left: var(--td-comp-margin-l); } .oneid-popup[data-popper-placement^=right] .oneid-popup__content--text { max-width: 480px; } .oneid-popup[data-popper-placement^=top] .oneid-popup__arrow::before { border-top-left-radius: 100%; -webkit-box-shadow: var(--td-shadow-inset-left), var(--td-shadow-inset-bottom); box-shadow: var(--td-shadow-inset-left), var(--td-shadow-inset-bottom); } .oneid-popup[data-popper-placement=top-start] .oneid-popup__arrow { left: 8px; } .oneid-popup[data-popper-placement=top] .oneid-popup__arrow { left: 50%; margin-left: -4px; } .oneid-popup[data-popper-placement=top-end] .oneid-popup__arrow { left: calc(100% - 16px); } .oneid-popup[data-popper-placement^=bottom] .oneid-popup__arrow { top: -4px; } .oneid-popup[data-popper-placement^=bottom] .oneid-popup__arrow::before { border-bottom-right-radius: 100%; -webkit-box-shadow: var(--td-shadow-inset-top), var(--td-shadow-inset-right); box-shadow: var(--td-shadow-inset-top), var(--td-shadow-inset-right); } .oneid-popup[data-popper-placement=bottom-start] .oneid-popup__arrow { left: 8px; } .oneid-popup[data-popper-placement=bottom] .oneid-popup__arrow { left: 50%; margin-left: -4px; } .oneid-popup[data-popper-placement=bottom-end] .oneid-popup__arrow { left: calc(100% - 16px); } .oneid-popup[data-popper-placement^=left] .oneid-popup__arrow { right: -4px; } .oneid-popup[data-popper-placement^=left] .oneid-popup__arrow::before { -webkit-box-shadow: var(--td-shadow-inset-left), var(--td-shadow-inset-top); box-shadow: var(--td-shadow-inset-left), var(--td-shadow-inset-top); } .oneid-popup[data-popper-placement=left-start] .oneid-popup__arrow { top: 8px; } .oneid-popup[data-popper-placement=left] .oneid-popup__arrow { top: 50%; margin-top: -4px; } .oneid-popup[data-popper-placement=left-end] .oneid-popup__arrow { top: calc(100% - 16px); } .oneid-popup[data-popper-placement^=right] .oneid-popup__arrow { left: -4px; } .oneid-popup[data-popper-placement^=right] .oneid-popup__arrow::before { -webkit-box-shadow: var(--td-shadow-inset-right), var(--td-shadow-inset-bottom); box-shadow: var(--td-shadow-inset-right), var(--td-shadow-inset-bottom); } .oneid-popup[data-popper-placement=right-start] .oneid-popup__arrow { top: 8px; } .oneid-popup[data-popper-placement=right] .oneid-popup__arrow { top: 50%; margin-top: -4px; } .oneid-popup[data-popper-placement=right-end] .oneid-popup__arrow { top: calc(100% - 16px); } .oneid-popup--animation-enter, .oneid-popup--animation-enter-from, .oneid-popup--animation-exiting, .oneid-popup--animation-leave-to { opacity: 0; visibility: hidden; } .oneid-popup--animation-enter-to, .oneid-popup--animation-entering, .oneid-popup--animation-leave-from, .oneid-popup--animation-leave { opacity: 1; visibility: visible; -webkit-transform: none; transform: none; } .oneid-popup--animation-enter-active { -webkit-transition: opacity 0.2s linear; transition: opacity 0.2s linear; } .oneid-popup--animation-leave-active { -webkit-transition: opacity 0.2s cubic-bezier(0, 0, 0.15, 1), visibility 0.2s cubic-bezier(0.82, 0, 1, 0.9); transition: opacity 0.2s cubic-bezier(0, 0, 0.15, 1), visibility 0.2s cubic-bezier(0.82, 0, 1, 0.9); } .oneid-popup--animation-expand-enter-active[data-popper-placement^=top] { -webkit-animation: t-popup-animation-expand-in-top 0.2s cubic-bezier(0.38, 0, 0.24, 1), t-fade-in 0.2s linear; animation: t-popup-animation-expand-in-top 0.2s cubic-bezier(0.38, 0, 0.24, 1), t-fade-in 0.2s linear; } .oneid-popup--animation-expand-leave-active[data-popper-placement^=top] { -webkit-animation: t-popup-animation-expand-out-top 0.2s cubic-bezier(0.38, 0, 0.24, 1), t-fade-out 0.2s cubic-bezier(0, 0, 0.15, 1); animation: t-popup-animation-expand-out-top 0.2s cubic-bezier(0.38, 0, 0.24, 1), t-fade-out 0.2s cubic-bezier(0, 0, 0.15, 1); } @-webkit-keyframes t-popup-animation-expand-in-top { 0% { -webkit-clip-path: polygon(-20% 120%, 120% 120%, 120% 120%, -20% 120%); clip-path: polygon(-20% 120%, 120% 120%, 120% 120%, -20% 120%); } 100% { -webkit-clip-path: polygon(-20% 0, 120% 0, 120% 120%, -20% 120%); clip-path: polygon(-20% 0, 120% 0, 120% 120%, -20% 120%); } } @keyframes t-popup-animation-expand-in-top { 0% { -webkit-clip-path: polygon(-20% 120%, 120% 120%, 120% 120%, -20% 120%); clip-path: polygon(-20% 120%, 120% 120%, 120% 120%, -20% 120%); } 100% { -webkit-clip-path: polygon(-20% 0, 120% 0, 120% 120%, -20% 120%); clip-path: polygon(-20% 0, 120% 0, 120% 120%, -20% 120%); } } @-webkit-keyframes t-popup-animation-expand-out-top { 0% { -webkit-clip-path: polygon(-20% 0, 120% 0, 120% 120%, -20% 120%); clip-path: polygon(-20% 0, 120% 0, 120% 120%, -20% 120%); } 100% { -webkit-clip-path: polygon(-20% 120%, 120% 120%, 120% 120%, -20% 120%); clip-path: polygon(-20% 120%, 120% 120%, 120% 120%, -20% 120%); } } @keyframes t-popup-animation-expand-out-top { 0% { -webkit-clip-path: polygon(-20% 0, 120% 0, 120% 120%, -20% 120%); clip-path: polygon(-20% 0, 120% 0, 120% 120%, -20% 120%); } 100% { -webkit-clip-path: polygon(-20% 120%, 120% 120%, 120% 120%, -20% 120%); clip-path: polygon(-20% 120%, 120% 120%, 120% 120%, -20% 120%); } } .oneid-popup--animation-expand-enter-active[data-popper-placement^=bottom] { -webkit-animation: t-popup-animation-expand-in-bottom 0.2s cubic-bezier(0.38, 0, 0.24, 1), t-fade-in 0.2s linear; animation: t-popup-animation-expand-in-bottom 0.2s cubic-bezier(0.38, 0, 0.24, 1), t-fade-in 0.2s linear; } .oneid-popup--animation-expand-leave-active[data-popper-placement^=bottom] { -webkit-animation: t-popup-animation-expand-out-bottom 0.2s cubic-bezier(0.38, 0, 0.24, 1), t-fade-out 0.2s cubic-bezier(0, 0, 0.15, 1); animation: t-popup-animation-expand-out-bottom 0.2s cubic-bezier(0.38, 0, 0.24, 1), t-fade-out 0.2s cubic-bezier(0, 0, 0.15, 1); } @-webkit-keyframes t-popup-animation-expand-in-bottom { 0% { -webkit-clip-path: polygon(-20% 0, 120% 0, 120% 0, -20% 0); clip-path: polygon(-20% 0, 120% 0, 120% 0, -20% 0); } 100% { -webkit-clip-path: polygon(-20% 0, 120% 0, 120% 120%, -20% 120%); clip-path: polygon(-20% 0, 120% 0, 120% 120%, -20% 120%); } } @keyframes t-popup-animation-expand-in-bottom { 0% { -webkit-clip-path: polygon(-20% 0, 120% 0, 120% 0, -20% 0); clip-path: polygon(-20% 0, 120% 0, 120% 0, -20% 0); } 100% { -webkit-clip-path: polygon(-20% 0, 120% 0, 120% 120%, -20% 120%); clip-path: polygon(-20% 0, 120% 0, 120% 120%, -20% 120%); } } @-webkit-keyframes t-popup-animation-expand-out-bottom { 0% { -webkit-clip-path: polygon(-20% 0, 120% 0, 120% 120%, -20% 120%); clip-path: polygon(-20% 0, 120% 0, 120% 120%, -20% 120%); } 100% { -webkit-clip-path: polygon(-20% 0, 120% 0, 120% 0, -20% 0); clip-path: polygon(-20% 0, 120% 0, 120% 0, -20% 0); } } @keyframes t-popup-animation-expand-out-bottom { 0% { -webkit-clip-path: polygon(-20% 0, 120% 0, 120% 120%, -20% 120%); clip-path: polygon(-20% 0, 120% 0, 120% 120%, -20% 120%); } 100% { -webkit-clip-path: polygon(-20% 0, 120% 0, 120% 0, -20% 0); clip-path: polygon(-20% 0, 120% 0, 120% 0, -20% 0); } } .oneid-button { font: var(--td-font-body-medium); color: var(--td-text-color-primary); -webkit-box-sizing: border-box; box-sizing: border-box; margin: 0; padding: 0; list-style: none; position: relative; z-index: 0; overflow: hidden; font-size: var(--td-font-body-medium); outline: none; border-width: 1px; border-style: solid; border-color: transparent; background-color: transparent; cursor: pointer; display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; vertical-align: middle; white-space: nowrap; border-radius: var(--td-radius-default); -webkit-transition: all 0.2s linear; transition: all 0.2s linear; -ms-touch-action: manipulation; touch-action: manipulation; text-decoration: none; } .oneid-button .oneid-button__text, .oneid-button .oneid-icon { position: relative; z-index: 1; display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; } .oneid-button .oneid-icon { font-size: var(--td-font-size-body-large); } .oneid-button .oneid-loading { font-size: var(--td-font-size-body-large); } .oneid-button .oneid-icon + .oneid-button__text:not(:empty) { margin-left: 8px; } .oneid-button .oneid-loading + .oneid-button__text:not(:empty) { margin-left: 8px; } .oneid-button .oneid-button__suffix:not(:empty) { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; margin-left: 8px; } .oneid-button--variant-base { color: var(--td-text-color-anti); height: var(--td-comp-size-m); font: var(--td-font-body-medium); padding-left: calc(var(--td-comp-paddingLR-l) - 1px); padding-right: calc(var(--td-comp-paddingLR-l) - 1px); background-color: var(--td-bg-color-component); border-color: var(--td-bg-color-component); color: var(--td-text-color-primary); } .oneid-button--variant-base .oneid-icon, .oneid-button--variant-base .oneid-loading { font-size: var(--td-font-size-body-large); } .oneid-button--variant-base:hover, .oneid-button--variant-base:focus-visible { background-color: var(--td-bg-color-component-hover); } .oneid-button--variant-base.oneid-is-loading { background-color: var(--td-bg-color-component); } .oneid-button--variant-base.oneid-is-disabled { background-color: var(--td-bg-color-component-disabled); } .oneid-button--variant-base:hover, .oneid-button--variant-base:focus-visible { border-color: var(--td-bg-color-component-hover); } .oneid-button--variant-base.oneid-is-loading { border-color: var(--td-bg-color-component); } .oneid-button--variant-base.oneid-is-disabled { border-color: var(--td-bg-color-component-disabled); } .oneid-button--variant-base:hover, .oneid-button--variant-base:focus-visible { color: var(--td-text-color-primary); } .oneid-button--variant-base.oneid-is-loading { color: var(--td-text-color-primary); } .oneid-button--variant-base.oneid-is-disabled { color: var(--td-text-color-disabled); } .oneid-button--variant-base.oneid-button--theme-primary { color: var(--td-text-color-anti); background-color: var(--td-brand-color); border-color: var(--td-brand-color); } .oneid-button--variant-base.oneid-button--theme-primary:hover, .oneid-button--variant-base.oneid-button--theme-primary:focus-visible { background-color: var(--td-brand-color-hover); } .oneid-button--variant-base.oneid-button--theme-primary.oneid-is-loading { background-color: var(--td-brand-color); } .oneid-button--variant-base.oneid-button--theme-primary.oneid-is-disabled { background-color: var(--td-brand-color-disabled); } .oneid-button--variant-base.oneid-button--theme-primary:hover, .oneid-button--variant-base.oneid-button--theme-primary:focus-visible { border-color: var(--td-brand-color-hover); } .oneid-button--variant-base.oneid-button--theme-primary.oneid-is-loading { border-color: var(--td-brand-color); } .oneid-button--variant-base.oneid-button--theme-primary.oneid-is-disabled { border-color: var(--td-brand-color-disabled); } .oneid-button--variant-base.oneid-button--theme-success { color: var(--td-text-color-anti); background-color: var(--td-success-color); border-color: var(--td-success-color); } .oneid-button--variant-base.oneid-button--theme-success:hover, .oneid-button--variant-base.oneid-button--theme-success:focus-visible { background-color: var(--td-success-color-hover); } .oneid-button--variant-base.oneid-button--theme-success.oneid-is-loading { background-color: var(--td-success-color); } .oneid-button--variant-base.oneid-button--theme-success.oneid-is-disabled { background-color: var(--td-success-color-disabled); } .oneid-button--variant-base.oneid-button--theme-success:hover, .oneid-button--variant-base.oneid-button--theme-success:focus-visible { border-color: var(--td-success-color-hover); } .oneid-button--variant-base.oneid-button--theme-success.oneid-is-loading { border-color: var(--td-success-color); } .oneid-button--variant-base.oneid-button--theme-success.oneid-is-disabled { border-color: var(--td-success-color-disabled); } .oneid-button--variant-base.oneid-button--theme-warning { color: var(--td-text-color-anti); background-color: var(--td-warning-color); border-color: var(--td-warning-color); } .oneid-button--variant-base.oneid-button--theme-warning:hover, .oneid-button--variant-base.oneid-button--theme-warning:focus-visible { background-color: var(--td-warning-color-hover); } .oneid-button--variant-base.oneid-button--theme-warning.oneid-is-loading { background-color: var(--td-warning-color); } .oneid-button--variant-base.oneid-button--theme-warning.oneid-is-disabled { background-color: var(--td-warning-color-disabled); } .oneid-button--variant-base.oneid-button--theme-warning:hover, .oneid-button--variant-base.oneid-button--theme-warning:focus-visible { border-color: var(--td-warning-color-hover); } .oneid-button--variant-base.oneid-button--theme-warning.oneid-is-loading { border-color: var(--td-warning-color); } .oneid-button--variant-base.oneid-button--theme-warning.oneid-is-disabled { border-color: var(--td-warning-color-disabled); } .oneid-button--variant-base.oneid-button--theme-danger { color: var(--td-text-color-anti); background-color: var(--td-error-color); border-color: var(--td-error-color); } .oneid-button--variant-base.oneid-button--theme-danger:hover, .oneid-button--variant-base.oneid-button--theme-danger:focus-visible { background-color: var(--td-error-color-hover); } .oneid-button--variant-base.oneid-button--theme-danger.oneid-is-loading { background-color: var(--td-error-color); } .oneid-button--variant-base.oneid-button--theme-danger.oneid-is-disabled { background-color: var(--td-error-color-disabled); } .oneid-button--variant-base.oneid-button--theme-danger:hover, .oneid-button--variant-base.oneid-button--theme-danger:focus-visible { border-color: var(--td-error-color-hover); } .oneid-button--variant-base.oneid-button--theme-danger.oneid-is-loading { border-color: var(--td-error-color); } .oneid-button--variant-base.oneid-button--theme-danger.oneid-is-disabled { border-color: var(--td-error-color-disabled); } .oneid-button--variant-base.oneid-button--ghost { background-color: transparent; color: var(--td-text-color-anti); border-color: var(--td-text-color-anti); } .oneid-button--variant-base.oneid-button--ghost:hover, .oneid-button--variant-base.oneid-button--ghost:focus-visible { background-color: transparent; } .oneid-button--variant-base.oneid-button--ghost:active { background-color: transparent; } .oneid-button--variant-base.oneid-button--ghost.oneid-is-loading { background-color: transparent; } .oneid-button--variant-base.oneid-button--ghost.oneid-is-disabled { background-color: rgba(255, 255, 255, 0.22); background-color: transparent; } .oneid-button--variant-base.oneid-button--ghost:hover, .oneid-button--variant-base.oneid-button--ghost:focus-visible { color: var(--td-brand-color-hover); } .oneid-button--variant-base.oneid-button--ghost:active { color: var(--td-brand-color-active); } .oneid-button--variant-base.oneid-button--ghost.oneid-is-loading { color: var(--td-text-color-anti); } .oneid-button--variant-base.oneid-button--ghost.oneid-is-disabled { color: rgba(255, 255, 255, 0.22); background-color: transparent; } .oneid-button--variant-base.oneid-button--ghost:hover, .oneid-button--variant-base.oneid-button--ghost:focus-visible { border-color: var(--td-brand-color-hover); } .oneid-button--variant-base.oneid-button--ghost:active { border-color: var(--td-brand-color-active); } .oneid-button--variant-base.oneid-button--ghost.oneid-is-loading { border-color: var(--td-text-color-anti); } .oneid-button--variant-base.oneid-button--ghost.oneid-is-disabled { border-color: rgba(255, 255, 255, 0.22); background-color: transparent; } .oneid-button--variant-base.oneid-button--ghost.oneid-button--theme-primary { color: var(--td-brand-color); border-color: var(--td-brand-color); } .oneid-button--variant-base.oneid-button--ghost.oneid-button--theme-primary:hover, .oneid-button--variant-base.oneid-button--ghost.oneid-button--theme-primary:focus-visible { color: var(--td-brand-color-hover); } .oneid-button--variant-base.oneid-button--ghost.oneid-button--theme-primary:active { color: var(--td-brand-color-active); } .oneid-button--variant-base.oneid-button--ghost.oneid-button--theme-primary.oneid-is-loading { color: var(--td-brand-color); } .oneid-button--variant-base.oneid-button--ghost.oneid-button--theme-primary.oneid-is-disabled { color: rgba(255, 255, 255, 0.22); background-color: transparent; } .oneid-button--variant-base.oneid-button--ghost.oneid-button--theme-primary:hover, .oneid-button--variant-base.oneid-button--ghost.oneid-button--theme-primary:focus-visible { border-color: var(--td-brand-color-hover); } .oneid-button--variant-base.oneid-button--ghost.oneid-button--theme-primary:active { border-color: var(--td-brand-color-active); } .oneid-button--variant-base.oneid-button--ghost.oneid-button--theme-primary.oneid-is-loading { border-color: var(--td-brand-color); } .oneid-button--variant-base.oneid-button--ghost.oneid-button--theme-primary.oneid-is-disabled { border-color: rgba(255, 255, 255, 0.22); background-color: transparent; } .oneid-button--variant-base.oneid-button--ghost.oneid-button--theme-success { color: var(--td-success-color); border-color: var(--td-success-color); } .oneid-button--variant-base.oneid-button--ghost.oneid-button--theme-success:hover, .oneid-button--variant-base.oneid-button--ghost.oneid-button--theme-success:focus-visible { color: var(--td-success-color-hover); } .oneid-button--variant-base.oneid-button--ghost.oneid-button--theme-success:active { color: var(--td-success-color-active); } .oneid-button--variant-base.oneid-button--ghost.oneid-button--theme-success.oneid-is-loading { color: var(--td-success-color); } .oneid-button--variant-base.oneid-button--ghost.oneid-button--theme-success.oneid-is-disabled { color: rgba(255, 255, 255, 0.22); background-color: transparent; } .oneid-button--variant-base.oneid-button--ghost.oneid-button--theme-success:hover, .oneid-button--variant-base.oneid-button--ghost.oneid-button--theme-success:focus-visible { border-color: var(--td-success-color-hover); } .oneid-button--variant-base.oneid-button--ghost.oneid-button--theme-success:active { border-color: var(--td-success-color-active); } .oneid-button--variant-base.oneid-button--ghost.oneid-button--theme-success.oneid-is-loading { border-color: var(--td-success-color); } .oneid-button--variant-base.oneid-button--ghost.oneid-button--theme-success.oneid-is-disabled { border-color: rgba(255, 255, 255, 0.22); background-color: transparent; } .oneid-button--variant-base.oneid-button--ghost.oneid-button--theme-warning { color: var(--td-warning-color); border-color: var(--td-warning-color); } .oneid-button--variant-base.oneid-button--ghost.oneid-button--theme-warning:hover, .oneid-button--variant-base.oneid-button--ghost.oneid-button--theme-warning:focus-visible { color: var(--td-warning-color-hover); } .oneid-button--variant-base.oneid-button--ghost.oneid-button--theme-warning:active { color: var(--td-warning-color-active); } .oneid-button--variant-base.oneid-button--ghost.oneid-button--theme-warning.oneid-is-loading { color: var(--td-warning-color); } .oneid-button--variant-base.oneid-button--ghost.oneid-button--theme-warning.oneid-is-disabled { color: rgba(255, 255, 255, 0.22); background-color: transparent; } .oneid-button--variant-base.oneid-button--ghost.oneid-button--theme-warning:hover, .oneid-button--variant-base.oneid-button--ghost.oneid-button--theme-warning:focus-visible { border-color: var(--td-warning-color-hover); } .oneid-button--variant-base.oneid-button--ghost.oneid-button--theme-warning:active { border-color: var(--td-warning-color-active); } .oneid-button--variant-base.oneid-button--ghost.oneid-button--theme-warning.oneid-is-loading { border-color: var(--td-warning-color); } .oneid-button--variant-base.oneid-button--ghost.oneid-button--theme-warning.oneid-is-disabled { border-color: rgba(255, 255, 255, 0.22); background-color: transparent; } .oneid-button--variant-base.oneid-button--ghost.oneid-button--theme-danger { color: var(--td-error-color); border-color: var(--td-error-color); } .oneid-button--variant-base.oneid-button--ghost.oneid-button--theme-danger:hover, .oneid-button--variant-base.oneid-button--ghost.oneid-button--theme-danger:focus-visible { color: var(--td-error-color-hover); } .oneid-button--variant-base.oneid-button--ghost.oneid-button--theme-danger:active { color: var(--td-error-color-active); } .oneid-button--variant-base.oneid-button--ghost.oneid-button--theme-danger.oneid-is-loading { color: var(--td-error-color); } .oneid-button--variant-base.oneid-button--ghost.oneid-button--theme-danger.oneid-is-disabled { color: rgba(255, 255, 255, 0.22); background-color: transparent; } .oneid-button--variant-base.oneid-button--ghost.oneid-button--theme-danger:hover, .oneid-button--variant-base.oneid-button--ghost.oneid-button--theme-danger:focus-visible { border-color: var(--td-error-color-hover); } .oneid-button--variant-base.oneid-button--ghost.oneid-button--theme-danger:active { border-color: var(--td-error-color-active); } .oneid-button--variant-base.oneid-button--ghost.oneid-button--theme-danger.oneid-is-loading { border-color: var(--td-error-color); } .oneid-button--variant-base.oneid-button--ghost.oneid-button--theme-danger.oneid-is-disabled { border-color: rgba(255, 255, 255, 0.22); background-color: transparent; } .oneid-button--variant-outline { height: var(--td-comp-size-m); font: var(--td-font-body-medium); padding-left: calc(var(--td-comp-paddingLR-l) - 1px); padding-right: calc(var(--td-comp-paddingLR-l) - 1px); color: var(--td-text-color-primary); background-color: var(--td-bg-color-specialcomponent); border-color: var(--td-border-level-2-color); } .oneid-button--variant-outline .oneid-icon, .oneid-button--variant-outline .oneid-loading { font-size: var(--td-font-size-body-large); } .oneid-button--variant-outline:hover, .oneid-button--variant-outline:focus-visible { color: var(--td-brand-color-hover); } .oneid-button--variant-outline.oneid-is-loading { color: var(--td-text-color-primary); } .oneid-button--variant-outline.oneid-is-disabled { color: var(--td-text-color-disabled); } .oneid-button--variant-outline:hover, .oneid-button--variant-outline:focus-visible { background-color: var(--td-bg-color-specialcomponent); } .oneid-button--variant-outline.oneid-is-loading { background-color: var(--td-bg-color-specialcomponent); } .oneid-button--variant-outline.oneid-is-disabled { background-color: var(--td-bg-color-component-disabled); } .oneid-button--variant-outline:hover, .oneid-button--variant-outline:focus-visible { border-color: var(--td-brand-color-hover); } .oneid-button--variant-outline.oneid-is-loading { border-color: var(--td-border-level-2-color); } .oneid-button--variant-outline.oneid-is-disabled { border-color: var(--td-border-level-2-color); } .oneid-button--variant-outline.oneid-button--theme-primary { color: var(--td-brand-color); border-color: var(--td-brand-color); } .oneid-button--variant-outline.oneid-button--theme-primary:hover, .oneid-button--variant-outline.oneid-button--theme-primary:focus-visible { color: var(--td-brand-color-hover); } .oneid-button--variant-outline.oneid-button--theme-primary.oneid-is-loading { color: var(--td-brand-color); } .oneid-button--variant-outline.oneid-button--theme-primary.oneid-is-disabled { color: var(--td-brand-color-disabled); } .oneid-button--variant-outline.oneid-button--theme-primary:hover, .oneid-button--variant-outline.oneid-button--theme-primary:focus-visible { border-color: var(--td-brand-color-hover); } .oneid-button--variant-outline.oneid-button--theme-primary.oneid-is-loading { border-color: var(--td-brand-color); } .oneid-button--variant-outline.oneid-button--theme-primary.oneid-is-disabled { border-color: var(--td-brand-color-disabled); } .oneid-button--variant-outline.oneid-button--theme-success { color: var(--td-success-color); border-color: var(--td-success-color); } .oneid-button--variant-outline.oneid-button--theme-success:hover, .oneid-button--variant-outline.oneid-button--theme-success:focus-visible { color: var(--td-success-color-hover); } .oneid-button--variant-outline.oneid-button--theme-success.oneid-is-loading { color: var(--td-success-color); } .oneid-button--variant-outline.oneid-button--theme-success.oneid-is-disabled { color: var(--td-success-color-disabled); } .oneid-button--variant-outline.oneid-button--theme-success:hover, .oneid-button--variant-outline.oneid-button--theme-success:focus-visible { border-color: var(--td-success-color-hover); } .oneid-button--variant-outline.oneid-button--theme-success.oneid-is-loading { border-color: var(--td-success-color); } .oneid-button--variant-outline.oneid-button--theme-success.oneid-is-disabled { border-color: var(--td-success-color-disabled); } .oneid-button--variant-outline.oneid-button--theme-warning { color: var(--td-warning-color); border-color: var(--td-warning-color); } .oneid-button--variant-outline.oneid-button--theme-warning:hover, .oneid-button--variant-outline.oneid-button--theme-warning:focus-visible { color: var(--td-warning-color-hover); } .oneid-button--variant-outline.oneid-button--theme-warning.oneid-is-loading { color: var(--td-warning-color); } .oneid-button--variant-outline.oneid-button--theme-warning.oneid-is-disabled { color: var(--td-warning-color-disabled); } .oneid-button--variant-outline.oneid-button--theme-warning:hover, .oneid-button--variant-outline.oneid-button--theme-warning:focus-visible { border-color: var(--td-warning-color-hover); } .oneid-button--variant-outline.oneid-button--theme-warning.oneid-is-loading { border-color: var(--td-warning-color); } .oneid-button--variant-outline.oneid-button--theme-warning.oneid-is-disabled { border-color: var(--td-warning-color-disabled); } .oneid-button--variant-outline.oneid-button--theme-danger { color: var(--td-error-color); border-color: var(--td-error-color); } .oneid-button--variant-outline.oneid-button--theme-danger:hover, .oneid-button--variant-outline.oneid-button--theme-danger:focus-visible { color: var(--td-error-color-hover); } .oneid-button--variant-outline.oneid-button--theme-danger.oneid-is-loading { color: var(--td-error-color); } .oneid-button--variant-outline.oneid-button--theme-danger.oneid-is-disabled { color: var(--td-error-color-disabled); } .oneid-button--variant-outline.oneid-button--theme-danger:hover, .oneid-button--variant-outline.oneid-button--theme-danger:focus-visible { border-color: var(--td-error-color-hover); } .oneid-button--variant-outline.oneid-button--theme-danger.oneid-is-loading { border-color: var(--td-error-color); } .oneid-button--variant-outline.oneid-button--theme-danger.oneid-is-disabled { border-color: var(--td-error-color-disabled); } .oneid-button--variant-outline.oneid-button--ghost { background-color: transparent; color: var(--td-text-color-anti); border-color: var(--td-text-color-anti); } .oneid-button--variant-outline.oneid-button--ghost:hover, .oneid-button--variant-outline.oneid-button--ghost:focus-visible { background-color: transparent; } .oneid-button--variant-outline.oneid-button--ghost:active { background-color: transparent; } .oneid-button--variant-outline.oneid-button--ghost.oneid-is-loading { background-color: transparent; } .oneid-button--variant-outline.oneid-button--ghost.oneid-is-disabled { background-color: rgba(255, 255, 255, 0.22); background-color: transparent; } .oneid-button--variant-outline.oneid-button--ghost:hover, .oneid-button--variant-outline.oneid-button--ghost:focus-visible { color: var(--td-brand-color-hover); } .oneid-button--variant-outline.oneid-button--ghost:active { color: var(--td-brand-color-active); } .oneid-button--variant-outline.oneid-button--ghost.oneid-is-loading { color: var(--td-text-color-anti); } .oneid-button--variant-outline.oneid-button--ghost.oneid-is-disabled { color: rgba(255, 255, 255, 0.22); background-color: transparent; } .oneid-button--variant-outline.oneid-button--ghost:hover, .oneid-button--variant-outline.oneid-button--ghost:focus-visible { border-color: var(--td-brand-color-hover); } .oneid-button--variant-outline.oneid-button--ghost:active { border-color: var(--td-brand-color-active); } .oneid-button--variant-outline.oneid-button--ghost.oneid-is-loading { border-color: var(--td-text-color-anti); } .oneid-button--variant-outline.oneid-button--ghost.oneid-is-disabled { border-color: rgba(255, 255, 255, 0.22); background-color: transparent; } .oneid-button--variant-outline.oneid-button--ghost.oneid-button--theme-primary { color: var(--td-brand-color); border-color: var(--td-brand-color); } .oneid-button--variant-outline.oneid-button--ghost.oneid-button--theme-primary:hover, .oneid-button--variant-outline.oneid-button--ghost.oneid-button--theme-primary:focus-visible { color: var(--td-brand-color-hover); } .oneid-button--variant-outline.oneid-button--ghost.oneid-button--theme-primary:active { color: var(--td-brand-color-active); } .oneid-button--variant-outline.oneid-button--ghost.oneid-button--theme-primary.oneid-is-loading { color: var(--td-brand-color); } .oneid-button--variant-outline.oneid-button--ghost.oneid-button--theme-primary.oneid-is-disabled { color: rgba(255, 255, 255, 0.22); background-color: transparent; } .oneid-button--variant-outline.oneid-button--ghost.oneid-button--theme-primary:hover, .oneid-button--variant-outline.oneid-button--ghost.oneid-button--theme-primary:focus-visible { border-color: var(--td-brand-color-hover); } .oneid-button--variant-outline.oneid-button--ghost.oneid-button--theme-primary:active { border-color: var(--td-brand-color-active); } .oneid-button--variant-outline.oneid-button--ghost.oneid-button--theme-primary.oneid-is-loading { border-color: var(--td-brand-color); } .oneid-button--variant-outline.oneid-button--ghost.oneid-button--theme-primary.oneid-is-disabled { border-color: rgba(255, 255, 255, 0.22); background-color: transparent; } .oneid-button--variant-outline.oneid-button--ghost.oneid-button--theme-success { color: var(--td-success-color); border-color: var(--td-success-color); } .oneid-button--variant-outline.oneid-button--ghost.oneid-button--theme-success:hover, .oneid-button--variant-outline.oneid-button--ghost.oneid-button--theme-success:focus-visible { color: var(--td-success-color-hover); } .oneid-button--variant-outline.oneid-button--ghost.oneid-button--theme-success:active { color: var(--td-success-color-active); } .oneid-button--variant-outline.oneid-button--ghost.oneid-button--theme-success.oneid-is-loading { color: var(--td-success-color); } .oneid-button--variant-outline.oneid-button--ghost.oneid-button--theme-success.oneid-is-disabled { color: rgba(255, 255, 255, 0.22); background-color: transparent; } .oneid-button--variant-outline.oneid-button--ghost.oneid-button--theme-success:hover, .oneid-button--variant-outline.oneid-button--ghost.oneid-button--theme-success:focus-visible { border-color: var(--td-success-color-hover); } .oneid-button--variant-outline.oneid-button--ghost.oneid-button--theme-success:active { border-color: var(--td-success-color-active); } .oneid-button--variant-outline.oneid-button--ghost.oneid-button--theme-success.oneid-is-loading { border-color: var(--td-success-color); } .oneid-button--variant-outline.oneid-button--ghost.oneid-button--theme-success.oneid-is-disabled { border-color: rgba(255, 255, 255, 0.22); background-color: transparent; } .oneid-button--variant-outline.oneid-button--ghost.oneid-button--theme-warning { color: var(--td-warning-color); border-color: var(--td-warning-color); } .oneid-button--variant-outline.oneid-button--ghost.oneid-button--theme-warning:hover, .oneid-button--variant-outline.oneid-button--ghost.oneid-button--theme-warning:focus-visible { color: var(--td-warning-color-hover); } .oneid-button--variant-outline.oneid-button--ghost.oneid-button--theme-warning:active { color: var(--td-warning-color-active); } .oneid-button--variant-outline.oneid-button--ghost.oneid-button--theme-warning.oneid-is-loading { color: var(--td-warning-color); } .oneid-button--variant-outline.oneid-button--ghost.oneid-button--theme-warning.oneid-is-disabled { color: rgba(255, 255, 255, 0.22); background-color: transparent; } .oneid-button--variant-outline.oneid-button--ghost.oneid-button--theme-warning:hover, .oneid-button--variant-outline.oneid-button--ghost.oneid-button--theme-warning:focus-visible { border-color: var(--td-warning-color-hover); } .oneid-button--variant-outline.oneid-button--ghost.oneid-button--theme-warning:active { border-color: var(--td-warning-color-active); } .oneid-button--variant-outline.oneid-button--ghost.oneid-button--theme-warning.oneid-is-loading { border-color: var(--td-warning-color); } .oneid-button--variant-outline.oneid-button--ghost.oneid-button--theme-warning.oneid-is-disabled { border-color: rgba(255, 255, 255, 0.22); background-color: transparent; } .oneid-button--variant-outline.oneid-button--ghost.oneid-button--theme-danger { color: var(--td-error-color); border-color: var(--td-error-color); } .oneid-button--variant-outline.oneid-button--ghost.oneid-button--theme-danger:hover, .oneid-button--variant-outline.oneid-button--ghost.oneid-button--theme-danger:focus-visible { color: var(--td-error-color-hover); } .oneid-button--variant-outline.oneid-button--ghost.oneid-button--theme-danger:active { color: var(--td-error-color-active); } .oneid-button--variant-outline.oneid-button--ghost.oneid-button--theme-danger.oneid-is-loading { color: var(--td-error-color); } .oneid-button--variant-outline.oneid-button--ghost.oneid-button--theme-danger.oneid-is-disabled { color: rgba(255, 255, 255, 0.22); background-color: transparent; } .oneid-button--variant-outline.oneid-button--ghost.oneid-button--theme-danger:hover, .oneid-button--variant-outline.oneid-button--ghost.oneid-button--theme-danger:focus-visible { border-color: var(--td-error-color-hover); } .oneid-button--variant-outline.oneid-button--ghost.oneid-button--theme-danger:active { border-color: var(--td-error-color-active); } .oneid-button--variant-outline.oneid-button--ghost.oneid-button--theme-danger.oneid-is-loading { border-color: var(--td-error-color); } .oneid-button--variant-outline.oneid-button--ghost.oneid-button--theme-danger.oneid-is-disabled { border-color: rgba(255, 255, 255, 0.22); background-color: transparent; } .oneid-button--variant-dashed { height: var(--td-comp-size-m); font: var(--td-font-body-medium); padding-left: calc(var(--td-comp-paddingLR-l) - 1px); padding-right: calc(var(--td-comp-paddingLR-l) - 1px); color: var(--td-text-color-primary); background-color: var(--td-bg-color-specialcomponent); border-color: var(--td-border-level-2-color); border-style: dashed; } .oneid-button--variant-dashed .oneid-icon, .oneid-button--variant-dashed .oneid-loading { font-size: var(--td-font-size-body-large); } .oneid-button--variant-dashed:hover, .oneid-button--variant-dashed:focus-visible { color: var(--td-brand-color-hover); } .oneid-button--variant-dashed.oneid-is-loading { color: var(--td-text-color-primary); } .oneid-button--variant-dashed.oneid-is-disabled { color: var(--td-text-color-disabled); } .oneid-button--variant-dashed:hover, .oneid-button--variant-dashed:focus-visible { background-color: var(--td-bg-color-specialcomponent); } .oneid-button--variant-dashed.oneid-is-loading { background-color: var(--td-bg-color-specialcomponent); } .oneid-button--variant-dashed.oneid-is-disabled { background-color: var(--td-bg-color-component-disabled); } .oneid-button--variant-dashed:hover, .oneid-button--variant-dashed:focus-visible { border-color: var(--td-brand-color-hover); } .oneid-button--variant-dashed.oneid-is-loading { border-color: var(--td-border-level-2-color); } .oneid-button--variant-dashed.oneid-is-disabled { border-color: var(--td-border-level-2-color); } .oneid-button--variant-dashed.oneid-button--theme-primary { color: var(--td-brand-color); border-color: var(--td-brand-color); } .oneid-button--variant-dashed.oneid-button--theme-primary:hover, .oneid-button--variant-dashed.oneid-button--theme-primary:focus-visible { color: var(--td-brand-color-hover); } .oneid-button--variant-dashed.oneid-button--theme-primary.oneid-is-loading { color: var(--td-brand-color); } .oneid-button--variant-dashed.oneid-button--theme-primary.oneid-is-disabled { color: var(--td-brand-color-disabled); } .oneid-button--variant-dashed.oneid-button--theme-primary:hover, .oneid-button--variant-dashed.oneid-button--theme-primary:focus-visible { border-color: var(--td-brand-color-hover); } .oneid-button--variant-dashed.oneid-button--theme-primary.oneid-is-loading { border-color: var(--td-brand-color); } .oneid-button--variant-dashed.oneid-button--theme-primary.oneid-is-disabled { border-color: var(--td-brand-color-disabled); } .oneid-button--variant-dashed.oneid-button--theme-success { color: var(--td-success-color); border-color: var(--td-success-color); } .oneid-button--variant-dashed.oneid-button--theme-success:hover, .oneid-button--variant-dashed.oneid-button--theme-success:focus-visible { color: var(--td-success-color-hover); } .oneid-button--variant-dashed.oneid-button--theme-success.oneid-is-loading { color: var(--td-success-color); } .oneid-button--variant-dashed.oneid-button--theme-success.oneid-is-disabled { color: var(--td-success-color-disabled); } .oneid-button--variant-dashed.oneid-button--theme-success:hover, .oneid-button--variant-dashed.oneid-button--theme-success:focus-visible { border-color: var(--td-success-color-hover); } .oneid-button--variant-dashed.oneid-button--theme-success.oneid-is-loading { border-color: var(--td-success-color); } .oneid-button--variant-dashed.oneid-button--theme-success.oneid-is-disabled { border-color: var(--td-success-color-disabled); } .oneid-button--variant-dashed.oneid-button--theme-warning { color: var(--td-warning-color); border-color: var(--td-warning-color); } .oneid-button--variant-dashed.oneid-button--theme-warning:hover, .oneid-button--variant-dashed.oneid-button--theme-warning:focus-visible { color: var(--td-warning-color-hover); } .oneid-button--variant-dashed.oneid-button--theme-warning.oneid-is-loading { color: var(--td-warning-color); } .oneid-button--variant-dashed.oneid-button--theme-warning.oneid-is-disabled { color: var(--td-warning-color-disabled); } .oneid-button--variant-dashed.oneid-button--theme-warning:hover, .oneid-button--variant-dashed.oneid-button--theme-warning:focus-visible { border-color: var(--td-warning-color-hover); } .oneid-button--variant-dashed.oneid-button--theme-warning.oneid-is-loading { border-color: var(--td-warning-color); } .oneid-button--variant-dashed.oneid-button--theme-warning.oneid-is-disabled { border-color: var(--td-warning-color-disabled); } .oneid-button--variant-dashed.oneid-button--theme-danger { color: var(--td-error-color); border-color: var(--td-error-color); } .oneid-button--variant-dashed.oneid-button--theme-danger:hover, .oneid-button--variant-dashed.oneid-button--theme-danger:focus-visible { color: var(--td-error-color-hover); } .oneid-button--variant-dashed.oneid-button--theme-danger.oneid-is-loading { color: var(--td-error-color); } .oneid-button--variant-dashed.oneid-button--theme-danger.oneid-is-disabled { color: var(--td-error-color-disabled); } .oneid-button--variant-dashed.oneid-button--theme-danger:hover, .oneid-button--variant-dashed.oneid-button--theme-danger:focus-visible { border-color: var(--td-error-color-hover); } .oneid-button--variant-dashed.oneid-button--theme-danger.oneid-is-loading { border-color: var(--td-error-color); } .oneid-button--variant-dashed.oneid-button--theme-danger.oneid-is-disabled { border-color: var(--td-error-color-disabled); } .oneid-button--variant-dashed.oneid-button--ghost { background-color: transparent; color: var(--td-text-color-anti); border-color: var(--td-text-color-anti); } .oneid-button--variant-dashed.oneid-button--ghost:hover, .oneid-button--variant-dashed.oneid-button--ghost:focus-visible { background-color: transparent; } .oneid-button--variant-dashed.oneid-button--ghost:active { background-color: transparent; } .oneid-button--variant-dashed.oneid-button--ghost.oneid-is-loading { background-color: transparent; } .oneid-button--variant-dashed.oneid-button--ghost.oneid-is-disabled { background-color: rgba(255, 255, 255, 0.22); background-color: transparent; } .oneid-button--variant-dashed.oneid-button--ghost:hover, .oneid-button--variant-dashed.oneid-button--ghost:focus-visible { color: var(--td-brand-color-hover); } .oneid-button--variant-dashed.oneid-button--ghost:active { color: var(--td-brand-color-active); } .oneid-button--variant-dashed.oneid-button--ghost.oneid-is-loading { color: var(--td-text-color-anti); } .oneid-button--variant-dashed.oneid-button--ghost.oneid-is-disabled { color: rgba(255, 255, 255, 0.22); background-color: transparent; } .oneid-button--variant-dashed.oneid-button--ghost:hover, .oneid-button--variant-dashed.oneid-button--ghost:focus-visible { border-color: var(--td-brand-color-hover); } .oneid-button--variant-dashed.oneid-button--ghost:active { border-color: var(--td-brand-color-active); } .oneid-button--variant-dashed.oneid-button--ghost.oneid-is-loading { border-color: var(--td-text-color-anti); } .oneid-button--variant-dashed.oneid-button--ghost.oneid-is-disabled { border-color: rgba(255, 255, 255, 0.22); background-color: transparent; } .oneid-button--variant-dashed.oneid-button--ghost.oneid-button--theme-primary { color: var(--td-brand-color); border-color: var(--td-brand-color); } .oneid-button--variant-dashed.oneid-button--ghost.oneid-button--theme-primary:hover, .oneid-button--variant-dashed.oneid-button--ghost.oneid-button--theme-primary:focus-visible { color: var(--td-brand-color-hover); } .oneid-button--variant-dashed.oneid-button--ghost.oneid-button--theme-primary:active { color: var(--td-brand-color-active); } .oneid-button--variant-dashed.oneid-button--ghost.oneid-button--theme-primary.oneid-is-loading { color: var(--td-brand-color); } .oneid-button--variant-dashed.oneid-button--ghost.oneid-button--theme-primary.oneid-is-disabled { color: rgba(255, 255, 255, 0.22); background-color: transparent; } .oneid-button--variant-dashed.oneid-button--ghost.oneid-button--theme-primary:hover, .oneid-button--variant-dashed.oneid-button--ghost.oneid-button--theme-primary:focus-visible { border-color: var(--td-brand-color-hover); } .oneid-button--variant-dashed.oneid-button--ghost.oneid-button--theme-primary:active { border-color: var(--td-brand-color-active); } .oneid-button--variant-dashed.oneid-button--ghost.oneid-button--theme-primary.oneid-is-loading { border-color: var(--td-brand-color); } .oneid-button--variant-dashed.oneid-button--ghost.oneid-button--theme-primary.oneid-is-disabled { border-color: rgba(255, 255, 255, 0.22); background-color: transparent; } .oneid-button--variant-dashed.oneid-button--ghost.oneid-button--theme-success { color: var(--td-success-color); border-color: var(--td-success-color); } .oneid-button--variant-dashed.oneid-button--ghost.oneid-button--theme-success:hover, .oneid-button--variant-dashed.oneid-button--ghost.oneid-button--theme-success:focus-visible { color: var(--td-success-color-hover); } .oneid-button--variant-dashed.oneid-button--ghost.oneid-button--theme-success:active { color: var(--td-success-color-active); } .oneid-button--variant-dashed.oneid-button--ghost.oneid-button--theme-success.oneid-is-loading { color: var(--td-success-color); } .oneid-button--variant-dashed.oneid-button--ghost.oneid-button--theme-success.oneid-is-disabled { color: rgba(255, 255, 255, 0.22); background-color: transparent; } .oneid-button--variant-dashed.oneid-button--ghost.oneid-button--theme-success:hover, .oneid-button--variant-dashed.oneid-button--ghost.oneid-button--theme-success:focus-visible { border-color: var(--td-success-color-hover); } .oneid-button--variant-dashed.oneid-button--ghost.oneid-button--theme-success:active { border-color: var(--td-success-color-active); } .oneid-button--variant-dashed.oneid-button--ghost.oneid-button--theme-success.oneid-is-loading { border-color: var(--td-success-color); } .oneid-button--variant-dashed.oneid-button--ghost.oneid-button--theme-success.oneid-is-disabled { border-color: rgba(255, 255, 255, 0.22); background-color: transparent; } .oneid-button--variant-dashed.oneid-button--ghost.oneid-button--theme-warning { color: var(--td-warning-color); border-color: var(--td-warning-color); } .oneid-button--variant-dashed.oneid-button--ghost.oneid-button--theme-warning:hover, .oneid-button--variant-dashed.oneid-button--ghost.oneid-button--theme-warning:focus-visible { color: var(--td-warning-color-hover); } .oneid-button--variant-dashed.oneid-button--ghost.oneid-button--theme-warning:active { color: var(--td-warning-color-active); } .oneid-button--variant-dashed.oneid-button--ghost.oneid-button--theme-warning.oneid-is-loading { color: var(--td-warning-color); } .oneid-button--variant-dashed.oneid-button--ghost.oneid-button--theme-warning.oneid-is-disabled { color: rgba(255, 255, 255, 0.22); background-color: transparent; } .oneid-button--variant-dashed.oneid-button--ghost.oneid-button--theme-warning:hover, .oneid-button--variant-dashed.oneid-button--ghost.oneid-button--theme-warning:focus-visible { border-color: var(--td-warning-color-hover); } .oneid-button--variant-dashed.oneid-button--ghost.oneid-button--theme-warning:active { border-color: var(--td-warning-color-active); } .oneid-button--variant-dashed.oneid-button--ghost.oneid-button--theme-warning.oneid-is-loading { border-color: var(--td-warning-color); } .oneid-button--variant-dashed.oneid-button--ghost.oneid-button--theme-warning.oneid-is-disabled { border-color: rgba(255, 255, 255, 0.22); background-color: transparent; } .oneid-button--variant-dashed.oneid-button--ghost.oneid-button--theme-danger { color: var(--td-error-color); border-color: var(--td-error-color); } .oneid-button--variant-dashed.oneid-button--ghost.oneid-button--theme-danger:hover, .oneid-button--variant-dashed.oneid-button--ghost.oneid-button--theme-danger:focus-visible { color: var(--td-error-color-hover); } .oneid-button--variant-dashed.oneid-button--ghost.oneid-button--theme-danger:active { color: var(--td-error-color-active); } .oneid-button--variant-dashed.oneid-button--ghost.oneid-button--theme-danger.oneid-is-loading { color: var(--td-error-color); } .oneid-button--variant-dashed.oneid-button--ghost.oneid-button--theme-danger.oneid-is-disabled { color: rgba(255, 255, 255, 0.22); background-color: transparent; } .oneid-button--variant-dashed.oneid-button--ghost.oneid-button--theme-danger:hover, .oneid-button--variant-dashed.oneid-button--ghost.oneid-button--theme-danger:focus-visible { border-color: var(--td-error-color-hover); } .oneid-button--variant-dashed.oneid-button--ghost.oneid-button--theme-danger:active { border-color: var(--td-error-color-active); } .oneid-button--variant-dashed.oneid-button--ghost.oneid-button--theme-danger.oneid-is-loading { border-color: var(--td-error-color); } .oneid-button--variant-dashed.oneid-button--ghost.oneid-button--theme-danger.oneid-is-disabled { border-color: rgba(255, 255, 255, 0.22); background-color: transparent; } .oneid-button--variant-text { height: var(--td-comp-size-m); font: var(--td-font-body-medium); padding-left: calc(var(--td-comp-paddingLR-l) - 1px); padding-right: calc(var(--td-comp-paddingLR-l) - 1px); color: var(--td-text-color-primary); background-color: transparent; border-color: transparent; } .oneid-button--variant-text .oneid-icon, .oneid-button--variant-text .oneid-loading { font-size: var(--td-font-size-body-large); } .oneid-button--variant-text:hover, .oneid-button--variant-text:focus-visible { color: var(--td-text-color-primary); } .oneid-button--variant-text.oneid-is-loading { color: var(--td-text-color-primary); } .oneid-button--variant-text.oneid-is-disabled { color: var(--td-text-color-disabled); } .oneid-button--variant-text:hover, .oneid-button--variant-text:focus-visible { background-color: var(--td-bg-color-container-hover); } .oneid-button--variant-text.oneid-is-loading { background-color: transparent; } .oneid-button--variant-text.oneid-is-disabled { background-color: transparent; } .oneid-button--variant-text:hover, .oneid-button--variant-text:focus-visible { border-color: var(--td-bg-color-container-hover); } .oneid-button--variant-text.oneid-is-loading { border-color: transparent; } .oneid-button--variant-text.oneid-is-disabled { border-color: transparent; } .oneid-button--variant-text.oneid-button--theme-primary { color: var(--td-brand-color); } .oneid-button--variant-text.oneid-button--theme-primary:hover, .oneid-button--variant-text.oneid-button--theme-primary:focus-visible { color: var(--td-brand-color-hover); } .oneid-button--variant-text.oneid-button--theme-primary.oneid-is-loading { color: var(--td-brand-color); } .oneid-button--variant-text.oneid-button--theme-primary.oneid-is-disabled { color: var(--td-brand-color-disabled); } .oneid-button--variant-text.oneid-button--theme-success { color: var(--td-success-color); } .oneid-button--variant-text.oneid-button--theme-success:hover, .oneid-button--variant-text.oneid-button--theme-success:focus-visible { color: var(--td-success-color-hover); } .oneid-button--variant-text.oneid-button--theme-success.oneid-is-loading { color: var(--td-success-color); } .oneid-button--variant-text.oneid-button--theme-success.oneid-is-disabled { color: var(--td-success-color-disabled); } .oneid-button--variant-text.oneid-button--theme-warning { color: var(--td-warning-color); } .oneid-button--variant-text.oneid-button--theme-warning:hover, .oneid-button--variant-text.oneid-button--theme-warning:focus-visible { color: var(--td-warning-color-hover); } .oneid-button--variant-text.oneid-button--theme-warning.oneid-is-loading { color: var(--td-warning-color); } .oneid-button--variant-text.oneid-button--theme-warning.oneid-is-disabled { color: var(--td-warning-color-disabled); } .oneid-button--variant-text.oneid-button--theme-danger { color: var(--td-error-color); } .oneid-button--variant-text.oneid-button--theme-danger:hover, .oneid-button--variant-text.oneid-button--theme-danger:focus-visible { color: var(--td-error-color-hover); } .oneid-button--variant-text.oneid-button--theme-danger.oneid-is-loading { color: var(--td-error-color); } .oneid-button--variant-text.oneid-button--theme-danger.oneid-is-disabled { color: var(--td-error-color-disabled); } .oneid-button--variant-text.oneid-button--ghost { background: none; color: var(--td-text-color-anti); } .oneid-button--variant-text.oneid-button--ghost:hover, .oneid-button--variant-text.oneid-button--ghost:focus-visible { color: var(--td-brand-color-hover); } .oneid-button--variant-text.oneid-button--ghost:active { color: var(--td-brand-color-active); } .oneid-button--variant-text.oneid-button--ghost.oneid-is-loading { color: var(--td-text-color-anti); } .oneid-button--variant-text.oneid-button--ghost.oneid-is-disabled { color: rgba(255, 255, 255, 0.22); background-color: transparent; } .oneid-button--variant-text.oneid-button--ghost.oneid-button--theme-primary { color: var(--td-brand-color); } .oneid-button--variant-text.oneid-button--ghost.oneid-button--theme-primary:hover, .oneid-button--variant-text.oneid-button--ghost.oneid-button--theme-primary:focus-visible { color: var(--td-brand-color-hover); } .oneid-button--variant-text.oneid-button--ghost.oneid-button--theme-primary:active { color: var(--td-brand-color-active); } .oneid-button--variant-text.oneid-button--ghost.oneid-button--theme-primary.oneid-is-loading { color: var(--td-brand-color); } .oneid-button--variant-text.oneid-button--ghost.oneid-button--theme-primary.oneid-is-disabled { color: rgba(255, 255, 255, 0.22); background-color: transparent; } .oneid-button--variant-text.oneid-button--ghost.oneid-button--theme-success { color: var(--td-success-color); } .oneid-button--variant-text.oneid-button--ghost.oneid-button--theme-success:hover, .oneid-button--variant-text.oneid-button--ghost.oneid-button--theme-success:focus-visible { color: var(--td-success-color-hover); } .oneid-button--variant-text.oneid-button--ghost.oneid-button--theme-success:active { color: var(--td-success-color-active); } .oneid-button--variant-text.oneid-button--ghost.oneid-button--theme-success.oneid-is-loading { color: var(--td-success-color); } .oneid-button--variant-text.oneid-button--ghost.oneid-button--theme-success.oneid-is-disabled { color: rgba(255, 255, 255, 0.22); background-color: transparent; } .oneid-button--variant-text.oneid-button--ghost.oneid-button--theme-warning { color: var(--td-warning-color); } .oneid-button--variant-text.oneid-button--ghost.oneid-button--theme-warning:hover, .oneid-button--variant-text.oneid-button--ghost.oneid-button--theme-warning:focus-visible { color: var(--td-warning-color-hover); } .oneid-button--variant-text.oneid-button--ghost.oneid-button--theme-warning:active { color: var(--td-warning-color-active); } .oneid-button--variant-text.oneid-button--ghost.oneid-button--theme-warning.oneid-is-loading { color: var(--td-warning-color); } .oneid-button--variant-text.oneid-button--ghost.oneid-button--theme-warning.oneid-is-disabled { color: rgba(255, 255, 255, 0.22); background-color: transparent; } .oneid-button--variant-text.oneid-button--ghost.oneid-button--theme-danger { color: var(--td-error-color); } .oneid-button--variant-text.oneid-button--ghost.oneid-button--theme-danger:hover, .oneid-button--variant-text.oneid-button--ghost.oneid-button--theme-danger:focus-visible { color: var(--td-error-color-hover); } .oneid-button--variant-text.oneid-button--ghost.oneid-button--theme-danger:active { color: var(--td-error-color-active); } .oneid-button--variant-text.oneid-button--ghost.oneid-button--theme-danger.oneid-is-loading { color: var(--td-error-color); } .oneid-button--variant-text.oneid-button--ghost.oneid-button--theme-danger.oneid-is-disabled { color: rgba(255, 255, 255, 0.22); background-color: transparent; } .oneid-button.oneid-is-loading, .oneid-button.oneid-is-disabled { cursor: not-allowed; } .oneid-button.oneid-size-s { height: var(--td-comp-size-xs); font: var(--td-font-body-small); padding-left: calc(var(--td-comp-paddingLR-s) - 1px); padding-right: calc(var(--td-comp-paddingLR-s) - 1px); } .oneid-button.oneid-size-s .oneid-icon, .oneid-button.oneid-size-s .oneid-loading { font-size: var(--td-font-size-body-medium); } .oneid-button.oneid-size-l { height: var(--td-comp-size-xl); font: var(--td-font-body-large); padding-left: calc(var(--td-comp-paddingLR-xl) - 1px); padding-right: calc(var(--td-comp-paddingLR-xl) - 1px); } .oneid-button.oneid-size-l .oneid-icon, .oneid-button.oneid-size-l .oneid-loading { font-size: var(--td-font-size-title-large); } .oneid-button--shape-square { width: var(--td-comp-size-m); padding: 0; } .oneid-button--shape-square.oneid-size-s { width: var(--td-comp-size-xs); padding: 0; } .oneid-button--shape-square.oneid-size-l { width: var(--td-comp-size-xl); padding: 0; } .oneid-button--shape-round { border-radius: var(--td-radius-round); } .oneid-button--shape-round.oneid-size-s { border-radius: calc(var(--td-comp-size-xs) / 2); } .oneid-button--shape-round.oneid-size-l { border-radius: calc(var(--td-comp-size-xl) / 2); } .oneid-button--shape-circle { width: var(--td-comp-size-m); padding: 0; text-align: center; border-radius: calc(var(--td-comp-size-m) / 2); } .oneid-button--shape-circle .oneid-icon { font-size: var(--td-font-size-body-large); } .oneid-button--shape-circle .oneid-loading { font-size: var(--td-font-size-body-large); } .oneid-button--shape-circle.oneid-size-s { width: var(--td-comp-size-xs); border-radius: calc(var(--td-comp-size-xs) / 2); } .oneid-button--shape-circle.oneid-size-l { width: var(--td-comp-size-xl); padding: 0; border-radius: calc(var(--td-comp-size-xl) / 2); } .oneid-button.oneid-size-full-width { display: -webkit-box; display: -ms-flexbox; display: flex; width: 100%; } .oneid-button--ghost { --ripple-color: var(--td-gray-color-10); } .oneid-button:not(.oneid-is-disabled):not(.oneid-button--ghost) { --ripple-color: var(--td-bg-color-container-active); } .oneid-button--variant-base:not(.oneid-is-disabled):not(.oneid-button--ghost) { --ripple-color: var(--td-bg-color-component-active); } .oneid-button--variant-base.oneid-button--theme-primary:not(.oneid-is-disabled):not(.oneid-button--ghost) { --ripple-color: var(--td-brand-color-active); } .oneid-button--variant-base.oneid-button--theme-success:not(.oneid-is-disabled):not(.oneid-button--ghost) { --ripple-color: var(--td-success-color-active); } .oneid-button--variant-base.oneid-button--theme-warning:not(.oneid-is-disabled):not(.oneid-button--ghost) { --ripple-color: var(--td-warning-color-active); } .oneid-button--variant-base.oneid-button--theme-danger:not(.oneid-is-disabled):not(.oneid-button--ghost) { --ripple-color: var(--td-error-color-active); } .input-readonly.oneid-is-readonly { color: var(--td-text-color-primary); background-color: var(--td-bg-color-specialcomponent); } .input-readonly.oneid-is-readonly .oneid-input__inner { cursor: pointer; } .input-disabled.oneid-is-disabled { color: var(--td-text-color-disabled); background-color: var(--td-bg-color-component-disabled); } .input-disabled.oneid-is-disabled:hover { border-color: var(--td-border-level-2-color); } .input-disabled.oneid-is-disabled .oneid-input__inner { cursor: not-allowed; color: var(--td-text-color-disabled); text-overflow: initial; } .input-disabled.oneid-is-disabled .oneid-input__inner::-webkit-input-placeholder { color: var(--td-text-color-disabled); } .input-disabled.oneid-is-disabled .oneid-input__inner::-moz-placeholder { color: var(--td-text-color-disabled); } .input-disabled.oneid-is-disabled .oneid-input__inner:-ms-input-placeholder { color: var(--td-text-color-disabled); } .input-disabled.oneid-is-disabled .oneid-input__inner::-ms-input-placeholder { color: var(--td-text-color-disabled); } .input-disabled.oneid-is-disabled .oneid-input__inner::placeholder { color: var(--td-text-color-disabled); } .input-disabled.oneid-is-disabled > .oneid-input__prefix .oneid-icon, .input-disabled.oneid-is-disabled > .oneid-input__suffix .oneid-icon { color: var(--td-text-color-disabled); } .input-disabled.oneid-is-disabled > .oneid-input__prefix .oneid-icon:hover, .input-disabled.oneid-is-disabled > .oneid-input__suffix .oneid-icon:hover { color: var(--td-text-color-disabled); } .oneid-tips { font-size: var(--td-font-size-body-small); } .oneid-tips.oneid-is-default { color: var(--td-text-color-placeholder); } .oneid-tips.oneid-is-error { color: var(--td-error-color); } .oneid-tips.oneid-is-warning { color: var(--td-warning-color); } .oneid-tips.oneid-is-success { color: var(--td-success-color); } .oneid-input { margin: 0; padding: 0; list-style: none; position: relative; height: var(--td-comp-size-m); border-width: 1px; border-style: solid; border-radius: var(--td-radius-default); border-color: var(--td-border-level-2-color); padding: 0 var(--td-comp-paddingLR-s); background-color: var(--td-bg-color-specialcomponent); outline: none; color: var(--td-text-color-primary); font: var(--td-font-body-medium); width: 100%; -webkit-box-sizing: border-box; box-sizing: border-box; -webkit-transition: border cubic-bezier(0.38, 0, 0.24, 1) 0.2s, background-color cubic-bezier(0.38, 0, 0.24, 1) 0.2s, -webkit-box-shadow cubic-bezier(0.38, 0, 0.24, 1) 0.2s; transition: border cubic-bezier(0.38, 0, 0.24, 1) 0.2s, background-color cubic-bezier(0.38, 0, 0.24, 1) 0.2s, -webkit-box-shadow cubic-bezier(0.38, 0, 0.24, 1) 0.2s; transition: border cubic-bezier(0.38, 0, 0.24, 1) 0.2s, box-shadow cubic-bezier(0.38, 0, 0.24, 1) 0.2s, background-color cubic-bezier(0.38, 0, 0.24, 1) 0.2s; transition: border cubic-bezier(0.38, 0, 0.24, 1) 0.2s, box-shadow cubic-bezier(0.38, 0, 0.24, 1) 0.2s, background-color cubic-bezier(0.38, 0, 0.24, 1) 0.2s, -webkit-box-shadow cubic-bezier(0.38, 0, 0.24, 1) 0.2s; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; overflow: hidden; } .oneid-input:hover { border-color: var(--td-brand-color); } .oneid-input:focus { z-index: 1; border-color: var(--td-brand-color); -webkit-box-shadow: 0 0 0 2px var(--td-brand-color-focus); box-shadow: 0 0 0 2px var(--td-brand-color-focus); } .oneid-input--borderless:not(.oneid-input--focused) { border-color: transparent; -webkit-transition: border cubic-bezier(0.38, 0, 0.24, 1) 0.2s, background-color cubic-bezier(0.38, 0, 0.24, 1) 0.2s, -webkit-box-shadow cubic-bezier(0.38, 0, 0.24, 1) 0.2s; transition: border cubic-bezier(0.38, 0, 0.24, 1) 0.2s, background-color cubic-bezier(0.38, 0, 0.24, 1) 0.2s, -webkit-box-shadow cubic-bezier(0.38, 0, 0.24, 1) 0.2s; transition: border cubic-bezier(0.38, 0, 0.24, 1) 0.2s, box-shadow cubic-bezier(0.38, 0, 0.24, 1) 0.2s, background-color cubic-bezier(0.38, 0, 0.24, 1) 0.2s; transition: border cubic-bezier(0.38, 0, 0.24, 1) 0.2s, box-shadow cubic-bezier(0.38, 0, 0.24, 1) 0.2s, background-color cubic-bezier(0.38, 0, 0.24, 1) 0.2s, -webkit-box-shadow cubic-bezier(0.38, 0, 0.24, 1) 0.2s; } .oneid-input--borderless:not(.oneid-input--focused):hover { border-color: var(--td-component-border); background-color: var(--td-bg-color-container-hover); cursor: pointer; } .oneid-input--borderless:not(.oneid-input--focused).oneid-is-disabled { border: none; background-color: var(--td-bg-color-component-disabled); } .oneid-input--focused { border-color: var(--td-brand-color); -webkit-box-shadow: 0 0 0 2px var(--td-brand-color-focus); box-shadow: 0 0 0 2px var(--td-brand-color-focus); z-index: 1; } .oneid-input :focus-visible { outline: none; } .oneid-input__inner { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; border: none; outline: none; padding: 0; max-width: 100%; min-width: 0; color: var(--td-text-color-primary); font: inherit; background-color: transparent; -webkit-box-sizing: border-box; box-sizing: border-box; white-space: nowrap; word-wrap: normal; overflow: hidden; text-overflow: ellipsis; } .oneid-input__inner::-webkit-input-placeholder { color: var(--td-text-color-placeholder); } .oneid-input__inner::-moz-placeholder { color: var(--td-text-color-placeholder); } .oneid-input__inner:-ms-input-placeholder { color: var(--td-text-color-placeholder); } .oneid-input__inner::-ms-input-placeholder { color: var(--td-text-color-placeholder); } .oneid-input__inner::placeholder { color: var(--td-text-color-placeholder); } .oneid-input__inner:-moz-placeholder { text-overflow: ellipsis; width: 100%; } .oneid-input__inner:-ms-input-placeholder { text-overflow: ellipsis; width: 100%; } .oneid-input__inner:placeholder-shown { text-overflow: ellipsis; width: 100%; } .oneid-input__inner[type=password]::-ms-reveal { display: none; } .oneid-input__inner[type=search]::-webkit-search-decoration, .oneid-input__inner[type=search]::-webkit-search-cancel-button, .oneid-input__inner[type=search]::-webkit-search-results-button, .oneid-input__inner[type=search]::-webkit-search-results-decoration { -webkit-appearance: none; appearance: none; } .oneid-input__inner.oneid-input--soft-hidden { width: 0; } .oneid-input__extra { font: var(--td-font-body-small); color: var(--td-text-color-placeholder); } .oneid-input__status { position: absolute; right: -24px; top: 0; } .oneid-input.oneid-input--suffix > span.oneid-input__clear { opacity: 0; visibility: hidden; -webkit-transition: border cubic-bezier(0.38, 0, 0.24, 1) 0.2s, background-color cubic-bezier(0.38, 0, 0.24, 1) 0.2s, -webkit-box-shadow cubic-bezier(0.38, 0, 0.24, 1) 0.2s; transition: border cubic-bezier(0.38, 0, 0.24, 1) 0.2s, background-color cubic-bezier(0.38, 0, 0.24, 1) 0.2s, -webkit-box-shadow cubic-bezier(0.38, 0, 0.24, 1) 0.2s; transition: border cubic-bezier(0.38, 0, 0.24, 1) 0.2s, box-shadow cubic-bezier(0.38, 0, 0.24, 1) 0.2s, background-color cubic-bezier(0.38, 0, 0.24, 1) 0.2s; transition: border cubic-bezier(0.38, 0, 0.24, 1) 0.2s, box-shadow cubic-bezier(0.38, 0, 0.24, 1) 0.2s, background-color cubic-bezier(0.38, 0, 0.24, 1) 0.2s, -webkit-box-shadow cubic-bezier(0.38, 0, 0.24, 1) 0.2s; } .oneid-input.oneid-input--suffix:hover > span.oneid-input__clear { opacity: 1; visibility: visible; } .oneid-input.oneid-is-success { border-color: var(--td-success-color); } .oneid-input.oneid-is-success:focus { -webkit-box-shadow: 0 0 0 2px var(--td-success-color-focus); box-shadow: 0 0 0 2px var(--td-success-color-focus); } .oneid-input.oneid-is-success.oneid-input--focused { -webkit-box-shadow: 0 0 0 2px var(--td-success-color-focus); box-shadow: 0 0 0 2px var(--td-success-color-focus); } .oneid-input.oneid-is-success > .oneid-input__extra { color: var(--td-success-color); } .oneid-input.oneid-is-warning { border-color: var(--td-warning-color); } .oneid-input.oneid-is-warning:focus { -webkit-box-shadow: 0 0 0 2px var(--td-warning-color-focus); box-shadow: 0 0 0 2px var(--td-warning-color-focus); } .oneid-input.oneid-is-warning.oneid-input--focused { -webkit-box-shadow: 0 0 0 2px var(--td-warning-color-focus); box-shadow: 0 0 0 2px var(--td-warning-color-focus); } .oneid-input.oneid-is-warning > .oneid-input__extra { color: var(--td-warning-color); } .oneid-input.oneid-is-error { border-color: var(--td-error-color); } .oneid-input.oneid-is-error:focus { -webkit-box-shadow: 0 0 0 2px var(--td-error-color-focus); box-shadow: 0 0 0 2px var(--td-error-color-focus); } .oneid-input.oneid-is-error.oneid-input--focused { -webkit-box-shadow: 0 0 0 2px var(--td-error-color-focus); box-shadow: 0 0 0 2px var(--td-error-color-focus); } .oneid-input.oneid-is-error > .oneid-input__extra { color: var(--td-error-color); } .oneid-input.oneid-is-readonly { color: var(--td-text-color-primary); background-color: var(--td-bg-color-specialcomponent); } .oneid-input.oneid-is-readonly .oneid-input__inner { cursor: pointer; } .oneid-input.oneid-is-disabled { color: var(--td-text-color-disabled); background-color: var(--td-bg-color-component-disabled); } .oneid-input.oneid-is-disabled:hover { border-color: var(--td-border-level-2-color); } .oneid-input.oneid-is-disabled .oneid-input__inner { cursor: not-allowed; color: var(--td-text-color-disabled); text-overflow: initial; } .oneid-input.oneid-is-disabled .oneid-input__inner::-webkit-input-placeholder { color: var(--td-text-color-disabled); } .oneid-input.oneid-is-disabled .oneid-input__inner::-moz-placeholder { color: var(--td-text-color-disabled); } .oneid-input.oneid-is-disabled .oneid-input__inner:-ms-input-placeholder { color: var(--td-text-color-disabled); } .oneid-input.oneid-is-disabled .oneid-input__inner::-ms-input-placeholder { color: var(--td-text-color-disabled); } .oneid-input.oneid-is-disabled .oneid-input__inner::placeholder { color: var(--td-text-color-disabled); } .oneid-input.oneid-is-disabled > .oneid-input__prefix .oneid-icon, .oneid-input.oneid-is-disabled > .oneid-input__suffix .oneid-icon { color: var(--td-text-color-disabled); } .oneid-input.oneid-is-disabled > .oneid-input__prefix .oneid-icon:hover, .oneid-input.oneid-is-disabled > .oneid-input__suffix .oneid-icon:hover { color: var(--td-text-color-disabled); } .oneid-input.oneid-input--prefix > .oneid-input__prefix { z-index: 2; height: 100%; text-align: center; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .oneid-input.oneid-input--prefix > .oneid-input__prefix-icon { font-size: var(--td-font-size-body-large); } .oneid-input.oneid-input--suffix > .oneid-input__suffix { z-index: 2; height: 100%; text-align: center; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .oneid-input.oneid-input--suffix > .oneid-input__suffix-icon { font-size: var(--td-font-size-body-large); } .oneid-input .oneid-input__suffix-clear { cursor: pointer; } .oneid-input.oneid-size-l { height: var(--td-comp-size-xl); font: var(--td-font-body-large); padding: var(--td-comp-paddingTB-m) var(--td-comp-paddingLR-m); } .oneid-input.oneid-size-s { height: var(--td-comp-size-xs); font: var(--td-font-body-small); } .oneid-input .oneid-input__prefix > .oneid-icon, .oneid-input .oneid-input__suffix > .oneid-icon { font-size: inherit; } .oneid-input .oneid-input__prefix > .oneid-icon { font-size: 16px; color: var(--td-text-color-placeholder); } .oneid-input .oneid-input__prefix:not(:empty) { margin-right: var(--td-comp-margin-s); } .oneid-input .oneid-input__suffix > .oneid-icon { color: var(--td-text-color-placeholder); -webkit-transition: all 0.2s linear; transition: all 0.2s linear; } .oneid-input .oneid-input__suffix > .oneid-icon:hover { color: var(--td-text-color-secondary); -webkit-transition: all 0.2s linear; transition: all 0.2s linear; } .oneid-input .oneid-input__suffix:not(:empty) { margin-left: var(--td-comp-margin-s); } .oneid-input.oneid-is-focused .oneid-input__prefix > .oneid-icon { color: var(--td-brand-color); } .oneid-input.oneid-is-focused .oneid-input__suffix > .oneid-icon-time, .oneid-input.oneid-is-focused .oneid-input__suffix .oneid-icon-calendar { color: var(--td-brand-color); } .oneid-input-group { position: relative; display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-align: stretch; -ms-flex-align: stretch; align-items: stretch; } .oneid-input-group .oneid-input__wrap { border-radius: 0; } .oneid-input-group .oneid-input__wrap:first-child { border-radius: var(--td-radius-default) 0 0 var(--td-radius-default); } .oneid-input-group .oneid-input__wrap:last-child { border-radius: 0 var(--td-radius-default) var(--td-radius-default) 0; } .oneid-input-group .oneid-button, .oneid-input-group .oneid-select { border-radius: 0; } .oneid-input-group .oneid-button:not(:first-child), .oneid-input-group .oneid-select:not(:first-child) { margin-left: -1px; } .oneid-input-group .oneid-input__wrap:not(:first-child) .oneid-input { margin-left: -1px; } .oneid-input-group .oneid-input__wrap:first-child .oneid-input { border-radius: var(--td-radius-default) 0 0 var(--td-radius-default); } .oneid-input-group .oneid-input__wrap:last-child .oneid-input { border-radius: 0 var(--td-radius-default) var(--td-radius-default) 0; } .oneid-input-group .oneid-button:first-child, .oneid-input-group .oneid-select:first-child { border-radius: var(--td-radius-default) 0 0 var(--td-radius-default); } .oneid-input-group .oneid-button:last-child, .oneid-input-group .oneid-select:last-child { border-radius: 0 var(--td-radius-default) var(--td-radius-default) 0; } .oneid-input-group--separate .oneid-input__wrap + .oneid-input__wrap { margin-left: var(--td-comp-margin-xxxl); } .oneid-input-group--separate .oneid-button, .oneid-input-group--separate .oneid-select { border-radius: var(--td-radius-default); } .oneid-input-group--separate .oneid-button:first-child, .oneid-input-group--separate .oneid-select:first-child { border-radius: var(--td-radius-default) 0 0 var(--td-radius-default); } .oneid-input-group--separate .oneid-button:last-child, .oneid-input-group--separate .oneid-select:last-child { border-radius: 0 var(--td-radius-default) var(--td-radius-default) 0; } .oneid-input-group--separate .oneid-input__wrap .oneid-input { border-radius: var(--td-radius-default); } .oneid-input-group--separate .oneid-input__wrap .oneid-input:first-child { border-radius: var(--td-radius-default); } .oneid-input-group--separate .oneid-input__wrap .oneid-input:last-child { border-radius: var(--td-radius-default); } .oneid-input-group .oneid-input__inner, .oneid-input-group .oneid-button, .oneid-input-group .oneid-select { position: relative; z-index: 0; } .oneid-input-group .oneid-input__inner:hover, .oneid-input-group .oneid-button:hover, .oneid-input-group .oneid-select:hover, .oneid-input-group .oneid-input__inner:focus, .oneid-input-group .oneid-button:focus, .oneid-input-group .oneid-select:focus, .oneid-input-group .oneid-input__inner:active, .oneid-input-group .oneid-button:active, .oneid-input-group .oneid-select:active { z-index: 1; } .oneid-input__wrap { width: 100%; } .oneid-input__tips { height: auto; min-height: var(--td-line-height-body-small); font: var(--td-font-body-small); position: absolute; } .oneid-input__tips--default { color: var(--td-text-color-placeholder); } .oneid-input__tips--success { color: var(--td-success-color); } .oneid-input__tips--warning { color: var(--td-warning-color); } .oneid-input__tips--error { color: var(--td-error-color); } .oneid-align-center > .oneid-input__inner { text-align: center; } .oneid-align-right > .oneid-input__inner { text-align: right; } .oneid-input__input-pre { position: absolute; visibility: hidden; white-space: pre; display: block; } .oneid-input--auto-width { width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; min-width: 60px; } .oneid-input__limit-number { font: var(--td-font-body-medium); color: var(--td-text-color-placeholder); background: var(--td-bg-color-specialcomponent); } .oneid-input__limit-number.oneid-is-disabled { background: var(--td-bg-color-component-disabled); } .oneid-input-adornment { font: var(--td-font-body-medium); color: var(--td-text-color-primary); -webkit-box-sizing: border-box; box-sizing: border-box; margin: 0; padding: 0; list-style: none; display: -webkit-box; display: -ms-flexbox; display: flex; } .oneid-input-adornment__prepend .oneid-input, .oneid-input-adornment__append .oneid-input, .oneid-input-adornment__prepend .oneid-textarea__inner, .oneid-input-adornment__append .oneid-textarea__inner { background-color: transparent; } .oneid-input-adornment__prepend { background-color: var(--td-bg-color-secondarycontainer); color: var(--td-text-color-primary); word-break: keep-all; margin-right: -1px; } .oneid-input-adornment__append { background-color: var(--td-bg-color-secondarycontainer); color: var(--td-text-color-primary); word-break: keep-all; margin-left: -1px; } .oneid-input-adornment__text { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; height: 100%; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-sizing: border-box; box-sizing: border-box; white-space: nowrap; padding: 0 var(--td-comp-paddingLR-s); border: 1px solid var(--td-border-level-2-color); } .oneid-input-adornment > :first-child { border-radius: var(--td-radius-default) 0 0 var(--td-radius-default); } .oneid-input-adornment > :first-child .oneid-input, .oneid-input-adornment > :first-child .oneid-input-adornment__text, .oneid-input-adornment > :first-child .oneid-textarea__inner { border-radius: var(--td-radius-default) 0 0 var(--td-radius-default); } .oneid-input-adornment > :last-child { border-radius: 0 var(--td-radius-default) var(--td-radius-default) 0; } .oneid-input-adornment > :last-child .oneid-input, .oneid-input-adornment > :last-child .oneid-input-adornment__text, .oneid-input-adornment > :last-child .oneid-textarea__inner { border-radius: 0 var(--td-radius-default) var(--td-radius-default) 0; } .oneid-input-adornment > :not(:last-child):hover { z-index: 2; } .oneid-input-adornment > :not(:first-child):not(:last-child) .oneid-input, .oneid-input-adornment > :not(:first-child):not(:last-child) .oneid-textarea__inner { border-radius: 0; } /* Alert */ .oneid-alert { font: var(--td-font-body-medium); color: var(--td-text-color-primary); -webkit-box-sizing: border-box; box-sizing: border-box; margin: 0; padding: 0; list-style: none; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; padding: var(--td-comp-paddingTB-l) var(--td-comp-paddingLR-xl); opacity: 1; -webkit-transition: opacity 0.2s; transition: opacity 0.2s; border-radius: var(--td-radius-medium); } .oneid-alert.oneid-is-hidden { /* 隐藏 */ display: none; } .oneid-alert--closing { opacity: 0; } .oneid-alert--info { background-color: var(--td-brand-color-focus); } .oneid-alert--info .oneid-alert__icon { color: var(--td-brand-color); } .oneid-alert--info .oneid-alert__swiper-trigger-wrap { color: var(--td-brand-color); } .oneid-alert--info .oneid-alert__swiper-trigger--active { color: var(--td-brand-color); } .oneid-alert--success { background-color: var(--td-success-color-focus); } .oneid-alert--success .oneid-alert__icon { color: var(--td-success-color); } .oneid-alert--success .oneid-alert__swiper-trigger-wrap { color: var(--td-success-color-focus); } .oneid-alert--success .oneid-alert__swiper-trigger--active { color: var(--td-success-color); } .oneid-alert--warning { background-color: var(--td-warning-color-focus); } .oneid-alert--warning .oneid-alert__icon { color: var(--td-warning-color); } .oneid-alert--warning .oneid-alert__swiper-trigger-wrap { color: var(--td-warning-color-focus); } .oneid-alert--warning .oneid-alert__swiper-trigger--active { color: var(--td-warning-color); } .oneid-alert--error { background-color: var(--td-error-color-focus); } .oneid-alert--error .oneid-alert__icon { color: var(--td-error-color); } .oneid-alert--error .oneid-alert__swiper-trigger-wrap { color: var(--td-error-color-focus); } .oneid-alert--error .oneid-alert__swiper-trigger--active { color: var(--td-error-color); } .oneid-alert__icon { font-size: var(--td-line-height-body-medium); display: inherit; } .oneid-alert__icon, .oneid-alert__close { -webkit-box-flex: 0; -ms-flex: 0 0 auto; flex: 0 0 auto; line-height: var(--td-line-height-body-small); } .oneid-alert__content { -webkit-box-flex: 1; -ms-flex: 1 1 0px; flex: 1 1 0; font-size: var(--td-font-size-body-medium); line-height: var(--td-line-height-body-medium); overflow: hidden; } .oneid-alert__title, .oneid-alert__message { width: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; } .oneid-alert__title { color: var(--td-text-color-primary); font-weight: bold; } .oneid-alert__title + .oneid-alert__message { margin-top: var(--td-comp-margin-s); } .oneid-alert__description { color: var(--td-text-color-secondary); -webkit-box-flex: 0; -ms-flex: 0 1 auto; flex: 0 1 auto; -webkit-transition: height 0.2s; transition: height 0.2s; } .oneid-alert__operation { -webkit-box-flex: 0; -ms-flex: 0 0 auto; flex: 0 0 auto; padding: 0 var(--td-comp-paddingLR-s); color: var(--td-brand-color); cursor: pointer; -webkit-transition: color 0.2s; transition: color 0.2s; } .oneid-alert__operation:hover { color: var(--td-brand-color-hover); } .oneid-alert__operation:active { color: var(--td-brand-color-active); } .oneid-alert__icon + .oneid-alert__content { margin-left: var(--td-comp-margin-s); } .oneid-alert__collapse { margin-top: var(--td-comp-margin-s); color: var(--td-brand-color); cursor: pointer; } .oneid-alert__close { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; margin-left: var(--td-comp-margin-l); color: var(--td-text-color-secondary); cursor: pointer; -webkit-transition: color 0.2s; transition: color 0.2s; } .oneid-alert__close:hover { color: var(--td-text-color-primary); } .oneid-alert__close > .oneid-icon { font-size: calc(var(--td-line-height-body-medium) - 2px); padding: calc((var(--td-line-height-body-medium) - (var(--td-line-height-body-medium) - 2px)) / 2) 0; } .oneid-badge { font: var(--td-font-body-medium); color: var(--td-text-color-primary); -webkit-box-sizing: border-box; box-sizing: border-box; margin: 0; padding: 0; list-style: none; position: relative; display: inline-block; } .oneid-badge--dot, .oneid-badge--circle, .oneid-badge--round { position: absolute; top: 0; right: 0; color: var(--td-text-color-anti); text-align: center; font: var(--td-font-body-small); -webkit-transform: translate(50%, -50%); transform: translate(50%, -50%); -webkit-transform-origin: 100% 0; transform-origin: 100% 0; -webkit-box-sizing: content-box; box-sizing: content-box; } .oneid-badge--static { position: static; display: inline-block; -webkit-transform: none; transform: none; } .oneid-badge--dot { right: 1px; margin-top: 1px; width: 6px; height: 6px; border-radius: var(--td-radius-circle); background-color: var(--td-error-color); } .oneid-badge--circle, .oneid-badge--round { padding-right: calc((var(--td-comp-size-xxs) - 8px) / 2); padding-left: calc((var(--td-comp-size-xxs) - 8px) / 2); min-width: 8px; height: var(--td-comp-size-xxs); background-color: var(--td-error-color); line-height: var(--td-comp-size-xxs); } .oneid-badge--circle.oneid-size-s, .oneid-badge--round.oneid-size-s { padding-right: calc((var(--td-comp-size-xxxs) - 8px) / 2); padding-left: calc((var(--td-comp-size-xxxs) - 8px) / 2); min-width: 8px; height: var(--td-comp-size-xxxs); line-height: var(--td-comp-size-xxxs); } .oneid-badge--circle { border-radius: calc(var(--td-comp-size-xxs) / 2); } .oneid-badge--round { border-radius: var(--td-radius-default); } .oneid-radio-group { font: var(--td-font-body-medium); color: var(--td-text-color-primary); -webkit-box-sizing: border-box; box-sizing: border-box; margin: 0; padding: 0; list-style: none; display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; max-width: 100%; border-radius: var(--td-radius-default); -ms-flex-wrap: wrap; flex-wrap: wrap; } @-moz-document url-prefix() { .oneid-radio-group { scrollbar-color: var(--td-scrollbar-color) transparent; scrollbar-width: thin; } } .oneid-radio-group::-webkit-scrollbar { width: 4px; height: 4px; } .oneid-radio-group::-webkit-scrollbar-thumb { border: 0px solid transparent; background-clip: content-box; background-color: var(--td-scrollbar-color); border-radius: 7px; } .oneid-radio-group::-webkit-scrollbar-thumb:vertical:hover, .oneid-radio-group::-webkit-scrollbar-thumb:horizontal:hover { background-color: var(--td-scrollbar-hover-color); } .oneid-radio-group .oneid-radio { margin-right: var(--td-comp-margin-xxl); } .oneid-radio-group.oneid-radio-group__outline { -ms-flex-wrap: wrap; flex-wrap: wrap; row-gap: var(--td-comp-margin-xs); } .oneid-radio-group.oneid-radio-group__outline.oneid-size-s .oneid-radio-button { height: var(--td-comp-size-xs); } .oneid-radio-group.oneid-radio-group__outline.oneid-size-m .oneid-radio-button { height: var(--td-comp-size-m); } .oneid-radio-group.oneid-radio-group__outline.oneid-size-l .oneid-radio-button { height: var(--td-comp-size-xl); } .oneid-radio-group.oneid-radio-group__outline .oneid-radio-button:first-child { border-radius: var(--td-radius-default) 0 0 var(--td-radius-default); } .oneid-radio-group.oneid-radio-group__outline .oneid-radio-button:last-child { border-radius: 0 var(--td-radius-default) var(--td-radius-default) 0; } .oneid-radio-group.oneid-radio-group__outline .oneid-radio-button:only-child { border-radius: var(--td-radius-default); } .oneid-radio-group.oneid-radio-group__outline .oneid-radio-button.oneid-is-checked { color: var(--td-brand-color); } .oneid-radio-group.oneid-radio-group__outline .oneid-radio-button.oneid-is-disabled.oneid-is-checked { color: var(--td-brand-color-disabled); border-color: var(--td-brand-color-disabled); background-color: var(--td-bg-color-specialcomponent); } .oneid-radio-group.oneid-radio-group--filled { border-color: var(--td-bg-color-component); padding: var(--td-comp-paddingTB-xxs) var(--td-comp-paddingLR-xxs); border-radius: var(--td-radius-default); background-color: var(--td-bg-color-component); position: relative; } .oneid-radio-group.oneid-radio-group--filled .oneid-radio-group__bg-block { position: absolute; left: 2px; top: 2px; width: 0; height: calc(100% - 4px); background-color: var(--td-bg-color-container-select); -webkit-transition: all 0.2s cubic-bezier(0.38, 0, 0.24, 1); transition: all 0.2s cubic-bezier(0.38, 0, 0.24, 1); border-radius: var(--td-radius-small); } .oneid-radio-group.oneid-radio-group--filled .oneid-radio-button { color: var(--td-text-color-secondary); border: 0; background-color: transparent; } .oneid-radio-group.oneid-radio-group--filled .oneid-radio-button:hover { color: var(--td-text-color-primary); } .oneid-radio-group.oneid-radio-group--filled .oneid-radio-button::before { content: ""; position: absolute; left: 0px; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); width: 1px; height: calc(100% - 16px); background-color: var(--td-component-border); -webkit-transition: opacity 0.2s cubic-bezier(0, 0, 0.15, 1); transition: opacity 0.2s cubic-bezier(0, 0, 0.15, 1); } .oneid-radio-group.oneid-radio-group--filled .oneid-radio-button:first-child::before { opacity: 0; } .oneid-radio-group.oneid-radio-group--filled .oneid-radio-button.oneid-is-checked { position: relative; color: var(--td-text-color-primary); z-index: 1; border: 0; -webkit-transition: color 0.2s linear; transition: color 0.2s linear; } .oneid-radio-group.oneid-radio-group--filled .oneid-radio-button.oneid-is-checked::before { opacity: 0; } .oneid-radio-group.oneid-radio-group--filled .oneid-radio-button.oneid-is-checked + label::before { opacity: 0; } .oneid-radio-group.oneid-radio-group--filled .oneid-radio-button.oneid-is-disabled { background-color: transparent; } .oneid-radio-group.oneid-radio-group--filled .oneid-radio-button.oneid-is-disabled.oneid-is-checked { color: var(--td-text-color-disabled); } .oneid-radio-group.oneid-radio-group--filled .oneid-radio-button.oneid-is-disabled.oneid-is-checked ~ .oneid-radio-group__bg-block { background-color: var(--td-bg-color-component-disabled); } .oneid-radio-group.oneid-radio-group--primary-filled .oneid-radio-group__bg-block { background-color: var(--td-brand-color); } .oneid-radio-group.oneid-radio-group--primary-filled .oneid-radio-button.oneid-is-checked { color: var(--td-text-color-anti); } .oneid-radio-group.oneid-radio-group--primary-filled .oneid-radio-button.oneid-is-disabled.oneid-is-checked { color: var(--td-text-color-anti); } .oneid-radio-group.oneid-radio-group--primary-filled .oneid-radio-button.oneid-is-disabled.oneid-is-checked ~ .oneid-radio-group__bg-block { background-color: var(--td-brand-color-disabled); } .oneid-radio-group.oneid-size-s .oneid-radio-button { height: calc(var(--td-comp-size-xs) - var(--td-comp-paddingTB-xxs) * 2); padding: 0px var(--td-comp-paddingLR-s); font: var(--td-font-body-small); } .oneid-radio-group.oneid-size-s .oneid-radio-button::before { height: calc(100% - 16px); } .oneid-radio-group.oneid-size-m .oneid-radio-button { height: calc(var(--td-comp-size-m) - var(--td-comp-paddingTB-xxs) * 2); padding: var(--td-comp-paddingTB-xs) var(--td-comp-paddingLR-l); font: var(--td-font-body-medium); } .oneid-radio-group.oneid-size-m .oneid-radio-button::before { height: calc(100% - 20px); } .oneid-radio-group.oneid-size-l .oneid-radio-button { height: calc(var(--td-comp-size-xl) - var(--td-comp-paddingTB-xxs) * 2); padding: var(--td-comp-paddingTB-s) var(--td-comp-paddingLR-xl); font: var(--td-font-body-large); } .oneid-radio-group.oneid-size-l .oneid-radio-button::before { height: calc(100% - 24px); } .oneid-radio-group .oneid-radio-button { cursor: pointer; position: relative; border: 1px solid; border-color: var(--td-border-level-2-color); border-right: 0; display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-transition: color 0.2s cubic-bezier(0, 0, 0.15, 1); transition: color 0.2s cubic-bezier(0, 0, 0.15, 1); color: var(--td-text-color-primary); white-space: nowrap; -webkit-box-sizing: border-box; box-sizing: border-box; } .oneid-radio-group .oneid-radio-button:first-child { border-radius: var(--td-radius-small) 0 0 var(--td-radius-small); } .oneid-radio-group .oneid-radio-button:last-child { border-right: 1px solid; border-right-color: var(--td-border-level-2-color); border-radius: 0 var(--td-radius-small) var(--td-radius-small) 0; } .oneid-radio-group .oneid-radio-button__former { opacity: 0; height: 0; width: 0; font: var(--td-font-body-medium); color: var(--td-text-color-primary); -webkit-box-sizing: border-box; box-sizing: border-box; margin: 0; padding: 0; list-style: none; } .oneid-radio-group .oneid-radio-button:hover { color: var(--td-brand-color); } .oneid-radio-group .oneid-radio-button.oneid-is-checked { border-right: 1px solid; border-color: var(--td-brand-color); -webkit-transition: border-color 0.2s cubic-bezier(0, 0, 0.15, 1); transition: border-color 0.2s cubic-bezier(0, 0, 0.15, 1); } .oneid-radio-group .oneid-radio-button.oneid-is-checked + .oneid-radio-button { border-left: 0; } .oneid-radio-group .oneid-radio-button.oneid-is-disabled { cursor: not-allowed; color: var(--td-text-color-disabled); background-color: var(--td-bg-color-component-disabled); } .oneid-radio-group .oneid-radio-button.oneid-is-disabled:hover { border-color: var(--td-border-level-2-color); color: var(--td-text-color-disabled); } .oneid-radio-group .oneid-radio-button.oneid-is-disabled:hover::after { width: 0; } .oneid-radio-group .oneid-radio-button.oneid-is-disabled.oneid-is-checked { color: var(--td-text-color-disabled); } .oneid-radio-group .oneid-radio-button.oneid-is-disabled.oneid-is-checked::after { width: 0; } .oneid-radio { font: var(--td-font-body-medium); color: var(--td-text-color-primary); -webkit-box-sizing: border-box; box-sizing: border-box; margin: 0; padding: 0; list-style: none; position: relative; cursor: pointer; display: inline-block; } .oneid-radio__former { font: var(--td-font-body-medium); color: var(--td-text-color-primary); -webkit-box-sizing: border-box; box-sizing: border-box; margin: 0; padding: 0; list-style: none; opacity: 0; position: absolute; } .oneid-radio__input { position: relative; display: inline-block; width: 16px; height: 16px; vertical-align: middle; border-radius: var(--td-radius-circle); border: 1px solid var(--td-border-level-2-color); background-color: var(--td-bg-color-container); -webkit-transition: border 0.2s cubic-bezier(0, 0, 0.15, 1); transition: border 0.2s cubic-bezier(0, 0, 0.15, 1); } .oneid-radio__input::after { content: ""; position: absolute; top: 50%; left: 50%; width: 16px; height: 16px; margin-top: -8px; margin-left: -8px; -webkit-transform: scale(0.5); transform: scale(0.5); opacity: 0; border-radius: var(--td-radius-circle); background-color: var(--td-brand-color); -webkit-transition: all 0.2s cubic-bezier(0, 0, 0.15, 1); transition: all 0.2s cubic-bezier(0, 0, 0.15, 1); } .oneid-radio__label { display: inline-block; margin-left: var(--td-comp-margin-s); color: var(--td-text-color-primary); vertical-align: middle; font: var(--td-font-body-medium); white-space: nowrap; } .oneid-radio:hover .oneid-radio__input { border-color: var(--td-brand-color); } .oneid-radio.oneid-is-checked .oneid-radio__input { border-color: var(--td-brand-color); } .oneid-radio.oneid-is-checked .oneid-radio__input::after { opacity: 1; } .oneid-radio.oneid-is-disabled { cursor: not-allowed; } .oneid-radio.oneid-is-disabled .oneid-radio__label { color: var(--td-text-color-disabled); } .oneid-radio.oneid-is-disabled .oneid-radio__input { background-color: var(--td-bg-color-component-disabled); } .oneid-radio.oneid-is-disabled:hover .oneid-radio__input { border-color: var(--td-border-level-2-color); } .oneid-radio.oneid-is-disabled.oneid-is-checked .oneid-radio__input { border-color: var(--td-border-level-2-color); } .oneid-radio.oneid-is-disabled.oneid-is-checked .oneid-radio__input::after { background-color: var(--td-text-color-disabled); } .oneid-radio:focus-visible:focus-visible { outline: 2px solid var(--td-brand-color); outline-offset: var(--td-comp-paddingTB-xs); border-radius: 0; } .oneid-checkbox-group { font: var(--td-font-body-medium); color: var(--td-text-color-primary); -webkit-box-sizing: border-box; box-sizing: border-box; margin: 0; padding: 0; list-style: none; display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -ms-flex-wrap: wrap; flex-wrap: wrap; gap: 16px; } .oneid-checkbox { font: var(--td-font-body-medium); -webkit-box-sizing: border-box; box-sizing: border-box; margin: 0; padding: 0; list-style: none; display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; position: relative; cursor: pointer; color: var(--td-text-color-primary); } .oneid-checkbox + .oneid-checkbox { margin-left: inherit; } .oneid-checkbox__former { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; outline: 0; -webkit-appearance: none; -moz-appearance: none; appearance: none; } .oneid-checkbox__input { position: relative; display: inline-block; width: 16px; height: 16px; vertical-align: middle; border: 1px solid var(--td-border-level-2-color); border-radius: var(--td-radius-default); background-color: var(--td-bg-color-container); -webkit-box-sizing: border-box; box-sizing: border-box; -ms-flex-negative: 0; flex-shrink: 0; } .oneid-checkbox__input::after { content: ""; position: absolute; opacity: 0; -webkit-box-sizing: border-box; box-sizing: border-box; } .oneid-checkbox__label { display: inline-block; margin-left: 8px; vertical-align: middle; font: var(--td-font-body-medium); } .oneid-checkbox:hover .oneid-checkbox__input { border-color: var(--td-brand-color); -webkit-transition: border-color 0.2s linear; transition: border-color 0.2s linear; } .oneid-checkbox.oneid-is-checked .oneid-checkbox__input { border-color: var(--td-brand-color); background-color: var(--td-brand-color); -webkit-transition: background-color 0.2s cubic-bezier(0.82, 0, 1, 0.9); transition: background-color 0.2s cubic-bezier(0.82, 0, 1, 0.9); } .oneid-checkbox.oneid-is-checked .oneid-checkbox__input::after { opacity: 1; top: 6px; left: 3px; width: 5px; height: 9px; border: 2px solid var(--td-text-color-anti); border-radius: 0 0 1px; border-top: 0; border-left: 0; -webkit-transform: rotate(45deg) scale(1) translate(-50%, -50%); transform: rotate(45deg) scale(1) translate(-50%, -50%); background: transparent; } .oneid-checkbox.oneid-is-indeterminate .oneid-checkbox__input { border-color: var(--td-brand-color); background-color: var(--td-brand-color); -webkit-transition: background-color 0.2s cubic-bezier(0.82, 0, 1, 0.9); transition: background-color 0.2s cubic-bezier(0.82, 0, 1, 0.9); } .oneid-checkbox.oneid-is-indeterminate .oneid-checkbox__input::after { opacity: 1; width: 16px; height: 4px; left: -1px; right: 0; top: 5px; border: unset; -webkit-transform: scale(0.5); transform: scale(0.5); background-color: var(--td-font-white-1); } .oneid-checkbox.oneid-is-disabled { cursor: not-allowed; } .oneid-checkbox.oneid-is-disabled .oneid-checkbox__label { color: var(--td-text-color-disabled); } .oneid-checkbox.oneid-is-disabled .oneid-checkbox__input { background-color: var(--td-bg-color-component-disabled); } .oneid-checkbox.oneid-is-disabled:hover .oneid-checkbox__input { border-color: var(--td-border-level-2-color); } .oneid-checkbox.oneid-is-disabled.oneid-is-checked .oneid-checkbox__input { border-color: var(--td-border-level-2-color); } .oneid-checkbox.oneid-is-disabled.oneid-is-checked .oneid-checkbox__input::after { border-color: var(--td-text-color-disabled); } .oneid-checkbox.oneid-is-disabled.oneid-is-indeterminate .oneid-checkbox__input { border-color: var(--td-border-level-2-color); } .oneid-checkbox.oneid-is-disabled.oneid-is-indeterminate .oneid-checkbox__input::after { background-color: var(--td-text-color-disabled); } .oneid-checkbox:focus-visible:focus-visible { outline: 2px solid var(--td-brand-color); outline-offset: var(--td-comp-paddingTB-xs); border-radius: 0; } @-webkit-keyframes t-fade-in { from { opacity: 0; } to { opacity: 1; } } @keyframes t-fade-in { from { opacity: 0; } to { opacity: 1; } } @-webkit-keyframes t-fade-out { from { opacity: 1; } to { opacity: 0; } } @keyframes t-fade-out { from { opacity: 1; } to { opacity: 0; } } @-webkit-keyframes t-spin { from { -webkit-transform: rotate(0deg); transform: rotate(0deg); } to { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @keyframes t-spin { from { -webkit-transform: rotate(0deg); transform: rotate(0deg); } to { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } .oneid-icon-loading { -webkit-animation: t-spin 1s linear infinite; animation: t-spin 1s linear infinite; } @-webkit-keyframes t-zoom-out { from { -webkit-transform: scale(0.2); transform: scale(0.2); } to { -webkit-transform: scale(1); transform: scale(1); } } @keyframes t-zoom-out { from { -webkit-transform: scale(0.2); transform: scale(0.2); } to { -webkit-transform: scale(1); transform: scale(1); } } .oneid-input-number { font: var(--td-font-body-medium); color: var(--td-text-color-primary); margin: 0; padding: 0; list-style: none; display: inline-block; position: relative; -webkit-box-sizing: border-box; box-sizing: border-box; padding: 0 var(--td-comp-size-m); -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; width: 144px; } .oneid-input-number:not(.oneid-input-number--column) > .oneid-input-number__decrease + .oneid-input__wrap { margin-left: var(--td-comp-margin-xs); } .oneid-input-number input::-webkit-outer-spin-button, .oneid-input-number input::-webkit-inner-spin-button { -webkit-appearance: none; appearance: none; } .oneid-input-number input[type=number] { -webkit-appearance: textfield; -moz-appearance: textfield; appearance: textfield; } .oneid-input-number > .oneid-input__tips { position: absolute; left: 0; } .oneid-input-number input + .oneid-input__suffix { margin-left: var(--td-comp-paddingLR-s); } .oneid-input-number .oneid-input__prefix { margin-right: var(--td-comp-paddingLR-s); } .oneid-input-number .oneid-input { color: var(--td-text-color-primary); } .oneid-input-number.oneid-input-number--auto-width { width: auto; } .oneid-input-number.oneid-input-number--auto-width.oneid-is-controls-right { min-width: auto; width: auto; } .oneid-input-number.oneid-input-number--auto-width .oneid-input__inner { min-width: 42px; } .oneid-input-number .oneid-input-number__decrease, .oneid-input-number .oneid-input-number__increase { width: var(--td-comp-size-m); height: var(--td-comp-size-m); position: absolute; top: 0; border: 1px solid var(--td-border-level-2-color); -webkit-box-sizing: border-box; box-sizing: border-box; border-radius: var(--td-radius-default); background-color: transparent; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; z-index: 1; cursor: pointer; -webkit-transition: all cubic-bezier(0.38, 0, 0.24, 1) 0.2s; transition: all cubic-bezier(0.38, 0, 0.24, 1) 0.2s; } .oneid-input-number .oneid-input-number__decrease:hover, .oneid-input-number .oneid-input-number__increase:hover { color: var(--td-brand-color); border-color: var(--td-brand-color); } .oneid-input-number .oneid-input-number__decrease:hover .oneid-icon, .oneid-input-number .oneid-input-number__increase:hover .oneid-icon { color: var(--td-brand-color); } .oneid-input-number .oneid-input-number__decrease:active, .oneid-input-number .oneid-input-number__increase:active { color: var(--td-brand-color); background-color: var(--td-bg-color-container-hover); } .oneid-input-number .oneid-input-number__decrease .oneid-icon, .oneid-input-number .oneid-input-number__increase .oneid-icon { position: relative; z-index: 1; font-size: var(--td-font-size-body-large); color: var(--td-text-color-secondary); } .oneid-input-number .oneid-input-number__decrease.oneid-is-disabled, .oneid-input-number .oneid-input-number__increase.oneid-is-disabled { color: var(--td-text-color-disabled); cursor: no-drop; background-color: var(--td-bg-color-component-disabled); } .oneid-input-number .oneid-input-number__decrease.oneid-is-disabled .oneid-icon, .oneid-input-number .oneid-input-number__increase.oneid-is-disabled .oneid-icon { color: var(--td-text-color-disabled); } .oneid-input-number .oneid-input-number__decrease.oneid-is-disabled:hover, .oneid-input-number .oneid-input-number__increase.oneid-is-disabled:hover { border-color: var(--td-border-level-2-color); } .oneid-input-number .oneid-input-number__decrease.oneid-is-disabled:hover .oneid-icon, .oneid-input-number .oneid-input-number__increase.oneid-is-disabled:hover .oneid-icon { color: var(--td-text-color-disabled); } .oneid-input-number .oneid-input-number__decrease.oneid-is-disabled::-webkit-input-placeholder, .oneid-input-number .oneid-input-number__increase.oneid-is-disabled::-webkit-input-placeholder { color: var(--td-text-color-disabled); } .oneid-input-number .oneid-input-number__decrease.oneid-is-disabled::-moz-placeholder, .oneid-input-number .oneid-input-number__increase.oneid-is-disabled::-moz-placeholder { color: var(--td-text-color-disabled); } .oneid-input-number .oneid-input-number__decrease.oneid-is-disabled:-ms-input-placeholder, .oneid-input-number .oneid-input-number__increase.oneid-is-disabled:-ms-input-placeholder { color: var(--td-text-color-disabled); } .oneid-input-number .oneid-input-number__decrease.oneid-is-disabled::-ms-input-placeholder, .oneid-input-number .oneid-input-number__increase.oneid-is-disabled::-ms-input-placeholder { color: var(--td-text-color-disabled); } .oneid-input-number .oneid-input-number__decrease.oneid-is-disabled::placeholder, .oneid-input-number .oneid-input-number__increase.oneid-is-disabled::placeholder { color: var(--td-text-color-disabled); } .oneid-input-number .oneid-input-number__decrease { left: 0; } .oneid-input-number .oneid-input-number__increase { right: -8px; } .oneid-input-number.oneid-is-disabled .oneid-input { cursor: no-drop; background-color: var(--td-bg-color-component-disabled); color: var(--td-text-color-disabled); } .oneid-input-number.oneid-is-disabled .oneid-input:hover, .oneid-input-number.oneid-is-disabled .oneid-input:focus, .oneid-input-number.oneid-is-disabled .oneid-input:active { border-color: var(--td-border-level-2-color); } .oneid-input-number.oneid-is-disabled .oneid-input-number__decrease, .oneid-input-number.oneid-is-disabled .oneid-input-number__increase { color: var(--td-text-color-disabled); cursor: no-drop; background-color: var(--td-bg-color-component-disabled); } .oneid-input-number.oneid-is-disabled .oneid-input-number__decrease .oneid-icon, .oneid-input-number.oneid-is-disabled .oneid-input-number__increase .oneid-icon { color: var(--td-text-color-secondary); } .oneid-input-number.oneid-size-s { width: 120px; padding: 0 var(--td-comp-size-xs); } .oneid-input-number.oneid-size-s .oneid-input { font-size: var(--td-font-size-body-small); height: var(--td-comp-size-xs); line-height: var(--td-comp-size-xs); } .oneid-input-number.oneid-size-s .oneid-input-number__decrease, .oneid-input-number.oneid-size-s .oneid-input-number__increase { font-size: var(--td-font-size-body-medium); width: var(--td-comp-size-xs); height: var(--td-comp-size-xs); } .oneid-input-number.oneid-size-l { width: 168px; padding: 0 var(--td-comp-size-xl); } .oneid-input-number.oneid-size-l .oneid-input { height: var(--td-comp-size-xl); line-height: var(--td-comp-size-xl); } .oneid-input-number.oneid-size-l .oneid-input-number__decrease, .oneid-input-number.oneid-size-l .oneid-input-number__increase { font-size: 18px; width: var(--td-comp-size-xl); height: var(--td-comp-size-xl); } .oneid-input-number.oneid-size-l.oneid-is-controls-right .oneid-input { height: var(--td-comp-size-xl); line-height: var(--td-comp-size-xl); padding-right: calc(var(--td-comp-size-xl) + var(--td-comp-paddingLR-s)); } .oneid-input-number.oneid-size-l.oneid-is-controls-right .oneid-input-number__decrease, .oneid-input-number.oneid-size-l.oneid-is-controls-right .oneid-input-number__increase { width: var(--td-comp-size-xl); font-size: var(--td-font-size-body-large); } .oneid-input-number.oneid-size-l .oneid-input--prefix { font: var(--td-font-body-large); padding: 0 var(--td-comp-paddingLR-m); } .oneid-input-number.oneid-input-number--normal { padding: 0; border-radius: var(--td-radius-default); } .oneid-input-number.oneid-input-number--normal.oneid-is-disabled { cursor: no-drop; color: var(--td-text-color-disabled); } .oneid-input-number.oneid-input-number--normal.oneid-is-disabled:hover .oneid-input { border-color: var(--td-border-level-2-color); } .oneid-input-number.oneid-input-number--normal.oneid-is-disabled::-webkit-input-placeholder { color: var(--td-text-color-disabled); } .oneid-input-number.oneid-input-number--normal.oneid-is-disabled::-moz-placeholder { color: var(--td-text-color-disabled); } .oneid-input-number.oneid-input-number--normal.oneid-is-disabled:-ms-input-placeholder { color: var(--td-text-color-disabled); } .oneid-input-number.oneid-input-number--normal.oneid-is-disabled::-ms-input-placeholder { color: var(--td-text-color-disabled); } .oneid-input-number.oneid-input-number--normal.oneid-is-disabled::placeholder { color: var(--td-text-color-disabled); } .oneid-input-number.oneid-input-number--normal.oneid-is-disabled .oneid-input:focus { -webkit-box-shadow: none; box-shadow: none; } .oneid-input-number.oneid-is-controls-right { width: 96px; padding: 0; } .oneid-input-number.oneid-is-controls-right:hover .oneid-input-number__decrease, .oneid-input-number.oneid-is-controls-right:hover .oneid-input-number__increase { opacity: 1; visibility: visible; } .oneid-input-number.oneid-is-controls-right .oneid-input { width: 100%; -webkit-box-sizing: border-box; box-sizing: border-box; margin: 0; padding-right: calc(var(--td-comp-size-m) + var(--td-comp-paddingLR-s)); border-radius: var(--td-radius-default); } .oneid-input-number.oneid-is-controls-right .oneid-input-number__decrease, .oneid-input-number.oneid-is-controls-right .oneid-input-number__increase { width: var(--td-comp-size-m); height: calc(var(--td-comp-size-m) / 2 - 2px); border: 0; left: initial; top: initial; right: 1px; border-radius: 0; background: var(--td-bg-color-secondarycontainer); opacity: 0; visibility: hidden; z-index: 2; } .oneid-input-number.oneid-is-controls-right .oneid-input-number__decrease .oneid-icon, .oneid-input-number.oneid-is-controls-right .oneid-input-number__increase .oneid-icon { font-size: var(--td-font-size-body-small); } .oneid-input-number.oneid-is-controls-right .oneid-input-number__decrease:hover, .oneid-input-number.oneid-is-controls-right .oneid-input-number__increase:hover { background: var(--td-bg-color-component-hover); } .oneid-input-number.oneid-is-controls-right .oneid-input-number__decrease:hover .oneid-icon, .oneid-input-number.oneid-is-controls-right .oneid-input-number__increase:hover .oneid-icon { color: var(--td-text-color-primary); } .oneid-input-number.oneid-is-controls-right .oneid-input-number__decrease.oneid-is-disabled, .oneid-input-number.oneid-is-controls-right .oneid-input-number__increase.oneid-is-disabled { color: var(--td-text-color-disabled); cursor: no-drop; background-color: var(--td-bg-color-component-disabled); } .oneid-input-number.oneid-is-controls-right .oneid-input-number__decrease.oneid-is-disabled .oneid-icon, .oneid-input-number.oneid-is-controls-right .oneid-input-number__increase.oneid-is-disabled .oneid-icon { color: var(--td-text-color-disabled); } .oneid-input-number.oneid-is-controls-right .oneid-input-number__decrease.oneid-is-disabled:hover, .oneid-input-number.oneid-is-controls-right .oneid-input-number__increase.oneid-is-disabled:hover { border-color: var(--td-border-level-2-color); } .oneid-input-number.oneid-is-controls-right .oneid-input-number__decrease.oneid-is-disabled:hover .oneid-icon, .oneid-input-number.oneid-is-controls-right .oneid-input-number__increase.oneid-is-disabled:hover .oneid-icon { color: var(--td-text-color-disabled); } .oneid-input-number.oneid-is-controls-right .oneid-input-number__decrease.oneid-is-disabled::-webkit-input-placeholder, .oneid-input-number.oneid-is-controls-right .oneid-input-number__increase.oneid-is-disabled::-webkit-input-placeholder { color: var(--td-text-color-disabled); } .oneid-input-number.oneid-is-controls-right .oneid-input-number__decrease.oneid-is-disabled::-moz-placeholder, .oneid-input-number.oneid-is-controls-right .oneid-input-number__increase.oneid-is-disabled::-moz-placeholder { color: var(--td-text-color-disabled); } .oneid-input-number.oneid-is-controls-right .oneid-input-number__decrease.oneid-is-disabled:-ms-input-placeholder, .oneid-input-number.oneid-is-controls-right .oneid-input-number__increase.oneid-is-disabled:-ms-input-placeholder { color: var(--td-text-color-disabled); } .oneid-input-number.oneid-is-controls-right .oneid-input-number__decrease.oneid-is-disabled::-ms-input-placeholder, .oneid-input-number.oneid-is-controls-right .oneid-input-number__increase.oneid-is-disabled::-ms-input-placeholder { color: var(--td-text-color-disabled); } .oneid-input-number.oneid-is-controls-right .oneid-input-number__decrease.oneid-is-disabled::placeholder, .oneid-input-number.oneid-is-controls-right .oneid-input-number__increase.oneid-is-disabled::placeholder { color: var(--td-text-color-disabled); } .oneid-input-number.oneid-is-controls-right .oneid-input-number__increase { top: 1px; border-top-right-radius: calc(var(--td-radius-default) - 1px); } .oneid-input-number.oneid-is-controls-right .oneid-input-number__decrease { top: calc(var(--td-comp-size-m) / 2 - 2px + 3px); border-bottom-right-radius: calc(var(--td-radius-default) - 1px); } .oneid-input-number.oneid-is-controls-right.oneid-size-l { width: 120px; } .oneid-input-number.oneid-is-controls-right.oneid-size-l .oneid-input-number__increase, .oneid-input-number.oneid-is-controls-right.oneid-size-l .oneid-input-number__decrease { height: calc(var(--td-comp-size-xl) / 2 - 2px); } .oneid-input-number.oneid-is-controls-right.oneid-size-l .oneid-input-number__decrease { top: calc(var(--td-comp-size-xl) / 2 - 2px + 3px); } .oneid-input-number.oneid-is-controls-right.oneid-size-s { width: 88px; } .oneid-input-number.oneid-is-controls-right.oneid-size-s .oneid-input-number__increase, .oneid-input-number.oneid-is-controls-right.oneid-size-s .oneid-input-number__decrease { height: calc(var(--td-comp-size-xs) / 2 - 2px); } .oneid-input-number.oneid-is-controls-right.oneid-size-s .oneid-input-number__decrease { top: calc(var(--td-comp-size-xs) / 2 - 2px + 3px); } .oneid-input-number--row .oneid-input__wrap { width: initial; margin-right: var(--td-comp-margin-xs); } .oneid-input-number--row .oneid-input-number__increase { right: 0; } .default-step-icon { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; width: 22px; height: 22px; text-align: center; border-radius: var(--td-radius-circle); font-size: var(--td-font-size-body-large); } .oneid-steps { font: var(--td-font-body-medium); color: var(--td-text-color-primary); -webkit-box-sizing: border-box; box-sizing: border-box; margin: 0; padding: 0; list-style: none; display: -webkit-box; display: -ms-flexbox; display: flex; width: 100%; } .oneid-steps .oneid-steps-item { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; overflow: hidden; vertical-align: top; margin-right: var(--td-comp-margin-s); position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; } .oneid-steps .oneid-steps-item:last-child { -webkit-box-flex: 0; -ms-flex: none; flex: none; } .oneid-steps .oneid-steps-item__inner { width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; } .oneid-steps .oneid-steps-item__inner.oneid-steps-item--clickable { cursor: pointer; } .oneid-steps .oneid-steps-item--finish .oneid-steps-item__icon .oneid-icon { color: var(--td-brand-color); } .oneid-steps .oneid-steps-item--finish .oneid-steps-item__icon--number { border-color: var(--td-brand-color); } .oneid-steps .oneid-steps-item--finish .oneid-steps-item__title { color: var(--td-text-color-primary); font-weight: normal; } .oneid-steps .oneid-steps-item--finish .oneid-steps-item__description { color: var(--td-text-color-secondary); } .oneid-steps .oneid-steps-item--process .oneid-steps-item__icon .oneid-icon { color: var(--td-brand-color); } .oneid-steps .oneid-steps-item--process .oneid-steps-item__icon--number { border-color: var(--td-brand-color); background-color: var(--td-brand-color); color: var(--td-text-color-anti); font-weight: bold; } .oneid-steps .oneid-steps-item--process .oneid-steps-item__title { color: var(--td-brand-color); font-weight: bold; } .oneid-steps .oneid-steps-item--process .oneid-steps-item__description { color: var(--td-text-color-secondary); } .oneid-steps .oneid-steps-item--error .oneid-steps-item__icon .oneid-icon { color: var(--td-error-color); } .oneid-steps .oneid-steps-item--error .oneid-steps-item__icon--number { color: var(--td-error-color); border-color: var(--td-error-color); } .oneid-steps .oneid-steps-item--error .oneid-steps-item__title { color: var(--td-error-color); } .oneid-steps .oneid-steps-item--error .oneid-steps-item__description { color: var(--td-text-color-secondary); } .oneid-steps .oneid-steps-item__icon { vertical-align: top; font-size: var(--td-font-size-body-medium); margin-right: var(--td-comp-margin-s); color: var(--td-text-color-placeholder); } .oneid-steps .oneid-steps-item__icon--number { color: var(--td-text-color-placeholder); border: 1px solid var(--td-text-color-placeholder); display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; width: 22px; height: 22px; text-align: center; border-radius: var(--td-radius-circle); font-size: var(--td-font-size-body-large); } .oneid-steps .oneid-steps-item__icon--finish { border: 1px solid var(--td-brand-color); display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; width: 22px; height: 22px; text-align: center; border-radius: var(--td-radius-circle); font-size: var(--td-font-size-body-large); } .oneid-steps .oneid-steps-item__icon--error { border: 1px solid var(--td-error-color); color: #000; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; width: 22px; height: 22px; text-align: center; border-radius: var(--td-radius-circle); font-size: var(--td-font-size-body-large); } .oneid-steps .oneid-steps-item__icon > .oneid-icon { font-size: calc(var(--td-font-size-body-medium) + 10px); } .oneid-steps .oneid-steps-item__title { position: relative; padding-right: var(--td-comp-margin-s); color: var(--td-text-color-placeholder); font-size: var(--td-font-size-body-large); line-height: 24px; } .oneid-steps .oneid-steps-item__description { color: var(--td-text-color-placeholder); font-size: var(--td-font-size-body-medium); margin-bottom: var(--td-comp-margin-xs); line-height: 22px; } .oneid-steps--line-separator .oneid-steps-item:before, .oneid-steps--line-separator .oneid-steps-item:after, .oneid-steps--line-separator .oneid-steps-item__title:after { border-style: solid; } .oneid-steps--dashed-separator .oneid-steps-item:before, .oneid-steps--dashed-separator .oneid-steps-item:after, .oneid-steps--dashed-separator .oneid-steps-item__title:after { border-style: dashed; } .oneid-steps--horizontal.oneid-steps--default-anchor .oneid-steps-item__title { width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; margin-bottom: var(--td-comp-margin-xs); } .oneid-steps--horizontal.oneid-steps--default-anchor .oneid-steps-item__icon__number { width: 22px; height: 22px; } .oneid-steps--horizontal.oneid-steps--default-anchor .oneid-steps-item__icon > .oneid-icon { font-size: calc(var(--td-font-size-body-medium) + 10px); } .oneid-steps--horizontal.oneid-steps--default-anchor .oneid-steps-item:not(:last-child) .oneid-steps-item__title:after { content: ""; display: block; width: 9999px; border-left: 0; border-top: 0; border-bottom-width: 1px; border-bottom-color: var(--td-text-color-placeholder); position: absolute; left: 100%; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); } .oneid-steps--horizontal.oneid-steps--default-anchor.oneid-steps--arrow-separator .oneid-steps-item:not(:last-child):after { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; height: 24px; content: "^"; -webkit-transform: rotateZ(90deg); transform: rotateZ(90deg); display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: end; -ms-flex-align: end; align-items: flex-end; border: 0; font-size: var(--td-font-size-body-large); color: var(--td-text-color-placeholder); } .oneid-steps--horizontal.oneid-steps--default-anchor.oneid-steps--arrow-separator .oneid-steps-item--finish:not(:last-child)::after { color: var(--td-brand-color); } .oneid-steps--horizontal.oneid-steps--default-anchor .oneid-steps-item--finish:not(:last-child) .oneid-steps-item__title:after { border-bottom-width: 2px; border-bottom-color: var(--td-brand-color); color: var(--td-brand-color); } .oneid-steps--horizontal.oneid-steps--default-anchor.oneid-steps--reverse .oneid-steps-item:not(:last-child) .oneid-steps-item__title:after { content: ""; display: block; width: 9999px; border-left: 0; border-top: 0; border-bottom-width: 1px; border-bottom-color: var(--td-text-color-placeholder); position: absolute; left: 100%; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); } .oneid-steps--horizontal.oneid-steps--default-anchor.oneid-steps--reverse.oneid-steps--arrow-separator .oneid-steps-item:not(:last-child):after { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; height: 24px; content: "^"; -webkit-transform: rotateZ(90deg); transform: rotateZ(90deg); display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: end; -ms-flex-align: end; align-items: flex-end; border: 0; font-size: var(--td-font-size-body-large); color: var(--td-text-color-placeholder); } .oneid-steps--horizontal.oneid-steps--default-anchor.oneid-steps--reverse.oneid-steps--arrow-separator .oneid-steps-item--finish:not(:last-child)::after { color: var(--td-brand-color); } .oneid-steps--horizontal.oneid-steps--default-anchor.oneid-steps--reverse.oneid-steps--arrow-separator .oneid-steps-item:not(:last-child):after { -webkit-transform: rotateZ(-90deg); transform: rotateZ(-90deg); } .oneid-steps--horizontal.oneid-steps--default-anchor.oneid-steps--reverse.oneid-steps--arrow-separator .oneid-steps-item--process:not(:last-child)::after, .oneid-steps--horizontal.oneid-steps--default-anchor.oneid-steps--reverse.oneid-steps--arrow-separator .oneid-steps-item--finish:not(:last-child)::after { color: var(--td-brand-color); } .oneid-steps--horizontal.oneid-steps--default-anchor.oneid-steps--reverse .oneid-steps-item--finish:not(:last-child) .oneid-steps-item__title:after { border-bottom-width: 2px; border-bottom-color: var(--td-brand-color); color: var(--td-brand-color); } .oneid-steps--horizontal.oneid-steps--default-anchor.oneid-steps--reverse .oneid-steps-item--process:not(:last-child) .oneid-steps-item__title:after, .oneid-steps--horizontal.oneid-steps--default-anchor.oneid-steps--reverse .oneid-steps-item--finish:not(:last-child) .oneid-steps-item__title:after { border-bottom-width: 2px; border-bottom-color: var(--td-brand-color); color: var(--td-brand-color); } .oneid-steps--horizontal.oneid-steps--dot-anchor .oneid-steps-item { overflow: visible; } .oneid-steps--horizontal.oneid-steps--dot-anchor .oneid-steps-item .oneid-steps-item__title { padding-right: 0; margin-bottom: var(--td-comp-margin-xs); } .oneid-steps--horizontal.oneid-steps--dot-anchor .oneid-steps-item--finish .oneid-steps-item__icon { border-color: var(--td-brand-color); } .oneid-steps--horizontal.oneid-steps--dot-anchor .oneid-steps-item--process .oneid-steps-item__icon { background: var(--td-brand-color); border-color: var(--td-brand-color); } .oneid-steps--horizontal.oneid-steps--dot-anchor .oneid-steps-item--error .oneid-steps-item__icon { background: var(--td-error-color); border-color: var(--td-error-color); } .oneid-steps--horizontal.oneid-steps--dot-anchor .oneid-steps-item__inner { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .oneid-steps--horizontal.oneid-steps--dot-anchor .oneid-steps-item__icon { display: block; width: 8px; height: 8px; border: 2px solid var(--td-text-color-placeholder); border-radius: var(--td-radius-circle); margin-bottom: var(--td-comp-margin-xs); position: relative; -webkit-box-sizing: border-box; box-sizing: border-box; -ms-flex-negative: 0; flex-shrink: 0; } .oneid-steps--horizontal.oneid-steps--dot-anchor .oneid-steps-item__content { text-align: center; width: 140px; } .oneid-steps--horizontal.oneid-steps--dot-anchor.oneid-steps--arrow-separator .oneid-steps-item:not(:last-child)::after { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; content: "^"; display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; border: 0; font-size: var(--td-font-size-body-large); -webkit-transform: rotateZ(90deg); transform: rotateZ(90deg); color: var(--td-text-color-placeholder); } .oneid-steps--horizontal.oneid-steps--dot-anchor.oneid-steps--arrow-separator .oneid-steps-item--finish:not(:last-child)::after { color: var(--td-brand-color); } .oneid-steps--horizontal.oneid-steps--dot-anchor .oneid-steps-item:not(:last-child)::after { content: ""; display: block; width: calc(100% - 16px); border-left: 0; border-top: 0; border-bottom-width: 1px; border-bottom-color: var(--td-text-color-placeholder); position: absolute; left: 78px; top: 2.5px; } .oneid-steps--horizontal.oneid-steps--dot-anchor .oneid-steps-item:not(:last-child):not(.oneid-steps-item--finish)::after { border-color: var(--td-text-color-placeholder); } .oneid-steps--horizontal.oneid-steps--dot-anchor .oneid-steps-item--finish:not(:last-child)::after { color: var(--td-brand-color); border-bottom-color: var(--td-brand-color); border-bottom-width: 2px; } .oneid-steps--horizontal.oneid-steps--dot-anchor.oneid-steps--reverse.oneid-steps--arrow-separator .oneid-steps-item:not(:last-child)::after { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; content: "^"; display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; border: 0; font-size: var(--td-font-size-body-large); -webkit-transform: rotateZ(90deg); transform: rotateZ(90deg); color: var(--td-text-color-placeholder); } .oneid-steps--horizontal.oneid-steps--dot-anchor.oneid-steps--reverse.oneid-steps--arrow-separator .oneid-steps-item--finish:not(:last-child)::after { color: var(--td-brand-color); } .oneid-steps--horizontal.oneid-steps--dot-anchor.oneid-steps--reverse.oneid-steps--arrow-separator .oneid-steps-item:not(:last-child)::after { -webkit-transform: rotateZ(-90deg); transform: rotateZ(-90deg); } .oneid-steps--horizontal.oneid-steps--dot-anchor.oneid-steps--reverse.oneid-steps--arrow-separator .oneid-steps-item--process:not(:last-child)::after, .oneid-steps--horizontal.oneid-steps--dot-anchor.oneid-steps--reverse.oneid-steps--arrow-separator .oneid-steps-item--finish:not(:last-child)::after { color: var(--td-brand-color); } .oneid-steps--horizontal.oneid-steps--dot-anchor.oneid-steps--reverse .oneid-steps-item:not(:last-child)::after { content: ""; display: block; width: calc(100% - 16px); border-left: 0; border-top: 0; border-bottom-width: 1px; border-bottom-color: var(--td-text-color-placeholder); position: absolute; left: 78px; top: 2.5px; } .oneid-steps--horizontal.oneid-steps--dot-anchor.oneid-steps--reverse .oneid-steps-item:not(:last-child):not(.oneid-steps-item--finish)::after { border-color: var(--td-text-color-placeholder); } .oneid-steps--horizontal.oneid-steps--dot-anchor.oneid-steps--reverse .oneid-steps-item--finish:not(:last-child)::after { color: var(--td-brand-color); border-bottom-color: var(--td-brand-color); border-bottom-width: 2px; } .oneid-steps--horizontal.oneid-steps--dot-anchor.oneid-steps--reverse .oneid-steps-item--process:not(:last-child)::after, .oneid-steps--horizontal.oneid-steps--dot-anchor.oneid-steps--reverse .oneid-steps-item--finish:not(:last-child)::after { color: var(--td-brand-color); border-bottom-color: var(--td-brand-color); border-bottom-width: 2px; } .oneid-steps--vertical { width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } .oneid-steps--vertical.oneid-steps--positive.oneid-steps--arrow-separator .oneid-steps-item:not(:last-child)::before { content: "^"; border: 0; height: calc(100% - 24px); position: absolute; top: 24px; left: 6px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; font-size: var(--td-font-size-body-large); -webkit-transform: rotateZ(180deg); transform: rotateZ(180deg); color: var(--td-text-color-placeholder); } .oneid-steps--vertical.oneid-steps--positive.oneid-steps--arrow-separator .oneid-steps-item--finish:not(:last-child)::before { color: var(--td-brand-color); } .oneid-steps--vertical.oneid-steps--positive .oneid-steps-item { padding-bottom: var(--td-comp-margin-xxl); margin-bottom: 5px; } .oneid-steps--vertical.oneid-steps--positive .oneid-steps-item:not(:last-child)::before { content: ""; display: block; height: 100%; border-left: 0; border-top: 0; border-right-width: 1px; border-right-color: var(--td-text-color-placeholder); position: absolute; top: 35px; left: 11px; } .oneid-steps--vertical.oneid-steps--positive .oneid-steps-item--finish:not(:last-child)::before { border-right-width: 2px; border-right-color: var(--td-brand-color); color: var(--td-brand-color); } .oneid-steps--vertical.oneid-steps--default-anchor .oneid-steps-item__content { margin-left: 0px; } .oneid-steps--vertical.oneid-steps--default-anchor .oneid-steps-item__title { margin-bottom: var(--td-comp-margin-xs); } .oneid-steps--vertical.oneid-steps--dot-anchor.oneid-steps--positive.oneid-steps--arrow-separator .oneid-steps-item:not(:last-child)::before { content: "^"; border: 0; height: calc(100% - 4px); position: absolute; top: 8px; left: 0; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; font-size: var(--td-font-size-body-medium); color: var(--td-text-color-placeholder); } .oneid-steps--vertical.oneid-steps--dot-anchor.oneid-steps--positive.oneid-steps--arrow-separator .oneid-steps-item--finish:not(:last-child)::before { color: var(--td-brand-color); } .oneid-steps--vertical.oneid-steps--dot-anchor.oneid-steps--positive .oneid-steps-item:not(:last-child)::before { content: ""; display: block; height: 100%; border-bottom: 0; border-left: 0; border-right-width: 1px; border-right-color: var(--td-text-color-placeholder); position: absolute; left: 3.5px; top: 17px; } .oneid-steps--vertical.oneid-steps--dot-anchor.oneid-steps--positive .oneid-steps-item--finish:not(:last-child)::before { color: var(--td-brand-color); border-right-color: var(--td-brand-color); border-right-width: 2px; } .oneid-steps--vertical.oneid-steps--dot-anchor.oneid-steps--positive .oneid-steps-item:not(:last-child).oneid-steps-item--default::before { border-color: var(--td-text-color-placeholder); } .oneid-steps--vertical.oneid-steps--dot-anchor .oneid-steps-item { margin-bottom: 0; } .oneid-steps--vertical.oneid-steps--dot-anchor .oneid-steps-item .oneid-steps-item__title { margin-bottom: var(--td-comp-margin-xs); } .oneid-steps--vertical.oneid-steps--dot-anchor .oneid-steps-item--finish .oneid-steps-item__icon { border-color: var(--td-brand-color); } .oneid-steps--vertical.oneid-steps--dot-anchor .oneid-steps-item--process .oneid-steps-item__icon { background: var(--td-brand-color); border-color: var(--td-brand-color); } .oneid-steps--vertical.oneid-steps--dot-anchor .oneid-steps-item--error .oneid-steps-item__icon { background: var(--td-error-color); border-color: var(--td-error-color); } .oneid-steps--vertical.oneid-steps--dot-anchor .oneid-steps-item__icon { display: block; width: 8px; height: 8px; border: 2px solid var(--td-text-color-placeholder); border-radius: var(--td-radius-circle); margin-bottom: var(--td-comp-margin-xs); position: relative; -webkit-box-sizing: border-box; box-sizing: border-box; -ms-flex-negative: 0; flex-shrink: 0; top: 8px; } .oneid-steps--vertical.oneid-steps--reverse.oneid-steps--arrow-separator .oneid-steps-item:not(:last-child)::before { content: "^"; border: 0; height: calc(100% - 24px); position: absolute; top: 24px; left: 6px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; font-size: var(--td-font-size-body-large); -webkit-transform: rotateZ(180deg); transform: rotateZ(180deg); color: var(--td-text-color-placeholder); } .oneid-steps--vertical.oneid-steps--reverse.oneid-steps--arrow-separator .oneid-steps-item--finish:not(:last-child)::before { color: var(--td-brand-color); } .oneid-steps--vertical.oneid-steps--reverse.oneid-steps--arrow-separator .oneid-steps-item:not(:last-child)::before { -webkit-transform: rotateZ(0); transform: rotateZ(0); margin-top: var(--td-comp-margin-xs); } .oneid-steps--vertical.oneid-steps--reverse.oneid-steps--arrow-separator .oneid-steps-item--process:not(:last-child)::before, .oneid-steps--vertical.oneid-steps--reverse.oneid-steps--arrow-separator .oneid-steps-item--finish:not(:last-child)::before { color: var(--td-brand-color); } .oneid-steps--vertical.oneid-steps--reverse .oneid-steps-item { padding-bottom: var(--td-comp-margin-xxl); margin-bottom: 5px; } .oneid-steps--vertical.oneid-steps--reverse .oneid-steps-item:not(:last-child)::before { content: ""; display: block; height: 100%; border-left: 0; border-bottom: 0; border-right-width: 1px; border-right-color: var(--td-text-color-placeholder); position: absolute; top: 35px; left: 11px; } .oneid-steps--vertical.oneid-steps--reverse .oneid-steps-item--process:not(:last-child)::before, .oneid-steps--vertical.oneid-steps--reverse .oneid-steps-item--finish:not(:last-child)::before { border-right-width: 2px; border-right-color: var(--td-brand-color); color: var(--td-brand-color); } .oneid-steps--vertical.oneid-steps--reverse.oneid-steps--dot-anchor.oneid-steps--arrow-separator .oneid-steps-item:not(:last-child)::before { content: "^"; border: 0; height: calc(100% - 4px); position: absolute; top: 8px; left: 0; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; font-size: var(--td-font-size-body-medium); color: var(--td-text-color-placeholder); } .oneid-steps--vertical.oneid-steps--reverse.oneid-steps--dot-anchor.oneid-steps--arrow-separator .oneid-steps-item--finish:not(:last-child)::before { color: var(--td-brand-color); } .oneid-steps--vertical.oneid-steps--reverse.oneid-steps--dot-anchor.oneid-steps--arrow-separator .oneid-steps-item--process:not(:last-child)::before, .oneid-steps--vertical.oneid-steps--reverse.oneid-steps--dot-anchor.oneid-steps--arrow-separator .oneid-steps-item--finish:not(:last-child)::before { color: var(--td-brand-color); } .oneid-steps--vertical.oneid-steps--reverse.oneid-steps--dot-anchor .oneid-steps-item { margin-bottom: 0; } .oneid-steps--vertical.oneid-steps--reverse.oneid-steps--dot-anchor .oneid-steps-item:not(:last-child)::before { content: ""; display: block; height: 100%; border-bottom: 0; border-left: 0; border-right-width: 1px; border-right-color: var(--td-text-color-placeholder); position: absolute; left: 3.5px; top: 17px; } .oneid-steps--vertical.oneid-steps--reverse.oneid-steps--dot-anchor .oneid-steps-item:last-child::before { display: none; } .oneid-steps--vertical.oneid-steps--reverse.oneid-steps--dot-anchor .oneid-steps-item--process:not(:last-child)::before, .oneid-steps--vertical.oneid-steps--reverse.oneid-steps--dot-anchor .oneid-steps-item--finish:not(:last-child)::before { border-right-width: 2px; border-right-color: var(--td-brand-color); color: var(--td-brand-color); } .oneid-steps--vertical.oneid-steps--reverse.oneid-steps--dot-anchor .oneid-steps-item:not(:last-child).oneid-steps-item--default::before { border-color: var(--td-text-color-placeholder); } .oneid-sticky-tool { position: fixed; opacity: 1; -webkit-box-sizing: border-box; box-sizing: border-box; background-color: var(--td-bg-color-container); border: 0.5px solid var(--td-component-border); -webkit-box-shadow: var(--td-shadow-3); box-shadow: var(--td-shadow-3); } .oneid-sticky-tool-popup-content { -webkit-box-shadow: var(--td-shadow-3); box-shadow: var(--td-shadow-3); font-size: var(--td-font-size-body-small); color: var(--td-text-color-secondary); } .oneid-sticky-tool .oneid-sticky-item { opacity: 1; position: relative; margin: var(--td-comp-margin-xs); text-align: center; font-size: var(--td-font-size-body-small); color: var(--td-text-color-secondary); -webkit-transition: background-color 0.2s linear; transition: background-color 0.2s linear; } .oneid-sticky-tool .oneid-sticky-item:hover { cursor: pointer; background-color: var(--td-bg-color-container-hover); } .oneid-sticky-tool .oneid-sticky-item--normal { width: var(--td-comp-size-xxxl); height: var(--td-comp-size-xxxl); } .oneid-sticky-tool .oneid-sticky-item--normal .oneid-icon { width: 24px; height: 24px; margin: var(--td-comp-margin-s) var(--td-comp-margin-l) 0 var(--td-comp-margin-l); color: var(--td-text-color-primary); } .oneid-sticky-tool .oneid-sticky-item--compact { width: var(--td-comp-size-xl); height: var(--td-comp-size-xl); } .oneid-sticky-tool .oneid-sticky-item--compact .oneid-icon { width: 24px; height: 24px; margin: var(--td-comp-margin-s); color: var(--td-text-color-primary); } .oneid-sticky-tool .oneid-sticky-item--square { border-radius: var(--td-radius-default); } .oneid-sticky-tool .oneid-sticky-item--round { border-radius: var(--td-radius-circle); } .oneid-sticky-tool .oneid-sticky-item .oneid-sticky-item__label { width: 100%; height: var(--td-comp-size-xxs); line-height: var(--td-comp-size-xxs); margin-top: var(--td-comp-margin-xxs); text-align: center; } .oneid-sticky-tool--square { border-radius: var(--td-radius-medium); } .oneid-sticky-tool--round { border-radius: var(--td-radius-round); } .oneid-message { margin: 0; padding: 0; list-style: none; width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; outline: 0; border-radius: var(--td-radius-medium); background-color: var(--td-bg-color-container); -webkit-box-shadow: var(--td-shadow-3), var(--td-shadow-inset-top), var(--td-shadow-inset-right), var(--td-shadow-inset-bottom), var(--td-shadow-inset-left); box-shadow: var(--td-shadow-3), var(--td-shadow-inset-top), var(--td-shadow-inset-right), var(--td-shadow-inset-bottom), var(--td-shadow-inset-left); -webkit-box-sizing: border-box; box-sizing: border-box; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; color: var(--td-text-color-primary); font: var(--td-font-body-medium); padding: var(--td-comp-paddingTB-m) var(--td-comp-paddingLR-l); } .oneid-message > .oneid-icon, .oneid-message > [data-t-icon] > .oneid-icon, .oneid-message .oneid-loading { color: var(--td-brand-color); margin-right: var(--td-comp-margin-s); -ms-flex-negative: 0; flex-shrink: 0; font-size: calc(var(--td-font-size-body-medium) + 6px); } .oneid-message.oneid-is-success > .oneid-icon, .oneid-message.oneid-is-success > [data-t-icon] > .oneid-icon, .oneid-message.oneid-is-success .oneid-loading { color: var(--td-success-color); } .oneid-message.oneid-is-warning > .oneid-icon, .oneid-message.oneid-is-warning > [data-t-icon] > .oneid-icon, .oneid-message.oneid-is-warning .oneid-loading { color: var(--td-warning-color); } .oneid-message.oneid-is-error > .oneid-icon, .oneid-message.oneid-is-error > [data-t-icon] > .oneid-icon, .oneid-message.oneid-is-error .oneid-loading { color: var(--td-error-color); } .oneid-message.oneid-is-closable .oneid-message__close { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; margin-right: 0; margin-left: var(--td-comp-margin-xxl); cursor: pointer; color: var(--td-text-color-secondary); } .oneid-message.oneid-is-closable .oneid-message__close .oneid-icon-close { font-size: calc(var(--td-font-size-body-medium) + 2px); border-radius: var(--td-radius-default); -webkit-transition: all 0.2s linear; transition: all 0.2s linear; } .oneid-message.oneid-is-closable .oneid-message__close .oneid-icon-close:hover { background: var(--td-bg-color-container-hover); } .oneid-message.oneid-is-closable .oneid-message__close .oneid-icon-close:active { background: var(--td-bg-color-container-active); } .oneid-message__list { position: fixed; z-index: 6000; } .oneid-message__list .oneid-message { margin-bottom: var(--td-comp-margin-s); word-break: break-all; } .oneid-tooltip .oneid-popup__content { display: inline-block; border: 0; z-index: 5600; margin-bottom: 1px; max-width: 480px; word-break: break-word; -webkit-box-sizing: border-box; box-sizing: border-box; border-radius: var(--td-radius-medium); color: var(--td-text-color-primary); } .oneid-tooltip--default .oneid-popup__content { color: var(--td-text-color-anti); background: var(--td-gray-color-13); -webkit-box-shadow: inset 0 0.5px 0 var(--td-gray-color-9), inset 0.5px 0 0 var(--td-gray-color-9), inset 0 -0.5px 0 var(--td-gray-color-9), inset -0.5px 0 0 var(--td-gray-color-9); box-shadow: inset 0 0.5px 0 var(--td-gray-color-9), inset 0.5px 0 0 var(--td-gray-color-9), inset 0 -0.5px 0 var(--td-gray-color-9), inset -0.5px 0 0 var(--td-gray-color-9); } .oneid-tooltip--default[data-popper-placement^=left] .oneid-popup__arrow:before { -webkit-box-shadow: inset -0.5px 0 0 var(--td-gray-color-9), inset 0 0.5px 0 var(--td-gray-color-9); box-shadow: inset -0.5px 0 0 var(--td-gray-color-9), inset 0 0.5px 0 var(--td-gray-color-9); } .oneid-tooltip--default[data-popper-placement^=right] .oneid-popup__arrow:before { -webkit-box-shadow: inset 0.5px 0 0 var(--td-gray-color-9), inset 0 -0.5px 0 var(--td-gray-color-9); box-shadow: inset 0.5px 0 0 var(--td-gray-color-9), inset 0 -0.5px 0 var(--td-gray-color-9); } .oneid-tooltip--default[data-popper-placement^=top] .oneid-popup__arrow:before { -webkit-box-shadow: inset 0 -0.5px 0 var(--td-gray-color-9), inset -0.5px 0 0 var(--td-gray-color-9); box-shadow: inset 0 -0.5px 0 var(--td-gray-color-9), inset -0.5px 0 0 var(--td-gray-color-9); } .oneid-tooltip--default[data-popper-placement^=bottom] .oneid-popup__arrow:before { -webkit-box-shadow: inset 0.5px 0 0 var(--td-gray-color-9), inset 0 0.5px 0 var(--td-gray-color-9); box-shadow: inset 0.5px 0 0 var(--td-gray-color-9), inset 0 0.5px 0 var(--td-gray-color-9); } .oneid-tooltip--primary .oneid-popup__content { color: var(--td-brand-color); background: var(--td-brand-color-light); } .oneid-tooltip--success .oneid-popup__content { color: var(--td-success-color); background: var(--td-success-color-light); } .oneid-tooltip--danger .oneid-popup__content { color: var(--td-error-color); background: var(--td-error-color-light); } .oneid-tooltip--warning .oneid-popup__content { color: var(--td-warning-color); background: var(--td-warning-color-light); } .oneid-tooltip .oneid-popup__arrow { background: inherit; height: auto; } .oneid-tooltip .oneid-popup__arrow::before { background: inherit; } .oneid-tooltip--noshadow .oneid-popup__content, .oneid-tooltip--noshadow[data-popper-placement] .oneid-popup__arrow:before { -webkit-box-shadow: none; box-shadow: none; } .oneid-affix { position: fixed; z-index: 500; } .oneid-tag { font: var(--td-font-body-medium); color: var(--td-text-color-primary); -webkit-box-sizing: border-box; box-sizing: border-box; margin: 0; padding: 0; list-style: none; display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; padding: 0px var(--td-comp-paddingLR-s); height: var(--td-comp-size-xs); font: var(--td-font-body-small); color: var(--td-text-color-anti); border-radius: var(--td-radius-default); border: 1px solid transparent; white-space: nowrap; } .oneid-tag .oneid-icon { margin-right: var(--td-comp-margin-xs); width: calc(var(--td-font-size-body-medium) + 2px); height: calc(var(--td-font-size-body-medium) + 2px); -ms-flex-negative: 0; flex-shrink: 0; } .oneid-tag .oneid-tag__icon-close { margin-right: 0; margin-left: var(--td-comp-margin-s); font: var(--td-font-body-medium); cursor: pointer; -webkit-transition: color 0.2s cubic-bezier(0.38, 0, 0.24, 1); transition: color 0.2s cubic-bezier(0.38, 0, 0.24, 1); } .oneid-tag--default { color: var(--td-text-color-primary); background-color: var(--td-bg-color-component); } .oneid-tag--default .oneid-tag__icon-close { color: var(--td-text-color-placeholder); } .oneid-tag--default .oneid-tag__icon-close:hover { color: var(--td-text-color-primary); } .oneid-tag--default:active { cursor: default; } .oneid-tag--default.oneid-tag--disabled { color: var(--td-text-color-disabled); background-color: var(--td-bg-color-component-disabled); border-color: var(--td-component-border); cursor: not-allowed; } .oneid-tag--default.oneid-tag--disabled:hover { cursor: not-allowed; } .oneid-tag--default.oneid-tag--disabled .oneid-icon:hover { cursor: pointer; } .oneid-tag--default.oneid-tag--outline { border-color: var(--td-component-border); } .oneid-tag--default.oneid-tag--light { background-color: var(--td-bg-color-secondarycontainer); } .oneid-tag--default.oneid-tag--light-outline { border-color: var(--td-component-border); background-color: var(--td-bg-color-secondarycontainer); } .oneid-tag--primary { background-color: var(--td-brand-color); } .oneid-tag--primary.oneid-tag--outline { border-color: var(--td-brand-color); } .oneid-tag--primary.oneid-tag--light { background-color: var(--td-brand-color-light); } .oneid-tag--primary.oneid-tag--light-outline { border-color: var(--td-brand-color); background-color: var(--td-brand-color-light); } .oneid-tag--primary.oneid-tag--light, .oneid-tag--primary.oneid-tag--outline, .oneid-tag--primary.oneid-tag--light-outline { color: var(--td-brand-color); } .oneid-tag--primary.oneid-tag--light .oneid-tag__icon-close:hover, .oneid-tag--primary.oneid-tag--outline .oneid-tag__icon-close:hover, .oneid-tag--primary.oneid-tag--light-outline .oneid-tag__icon-close:hover { color: var(--td-brand-color-hover); } .oneid-tag--success { background-color: var(--td-success-color); } .oneid-tag--success.oneid-tag--outline { border-color: var(--td-success-color); } .oneid-tag--success.oneid-tag--light { background-color: var(--td-success-color-light); } .oneid-tag--success.oneid-tag--light-outline { border-color: var(--td-success-color); background-color: var(--td-success-color-light); } .oneid-tag--success.oneid-tag--light, .oneid-tag--success.oneid-tag--outline, .oneid-tag--success.oneid-tag--light-outline { color: var(--td-success-color); } .oneid-tag--success.oneid-tag--light .oneid-tag__icon-close:hover, .oneid-tag--success.oneid-tag--outline .oneid-tag__icon-close:hover, .oneid-tag--success.oneid-tag--light-outline .oneid-tag__icon-close:hover { color: var(--td-success-color-hover); } .oneid-tag--warning { background-color: var(--td-warning-color); } .oneid-tag--warning.oneid-tag--outline { border-color: var(--td-warning-color); } .oneid-tag--warning.oneid-tag--light { background-color: var(--td-warning-color-light); } .oneid-tag--warning.oneid-tag--light-outline { border-color: var(--td-warning-color); background-color: var(--td-warning-color-light); } .oneid-tag--warning.oneid-tag--light, .oneid-tag--warning.oneid-tag--outline, .oneid-tag--warning.oneid-tag--light-outline { color: var(--td-warning-color); } .oneid-tag--warning.oneid-tag--light .oneid-tag__icon-close:hover, .oneid-tag--warning.oneid-tag--outline .oneid-tag__icon-close:hover, .oneid-tag--warning.oneid-tag--light-outline .oneid-tag__icon-close:hover { color: var(--td-warning-color-hover); } .oneid-tag--danger { background-color: var(--td-error-color); } .oneid-tag--danger.oneid-tag--outline { border-color: var(--td-error-color); } .oneid-tag--danger.oneid-tag--light { background-color: var(--td-error-color-light); } .oneid-tag--danger.oneid-tag--light-outline { border-color: var(--td-error-color); background-color: var(--td-error-color-light); } .oneid-tag--danger .oneid-tag__icon-close { fill: var(--td-error-color); } .oneid-tag--danger .oneid-tag__icon-close:hover { fill: var(--td-error-color-hover); } .oneid-tag--danger.oneid-tag--light, .oneid-tag--danger.oneid-tag--outline, .oneid-tag--danger.oneid-tag--light-outline { color: var(--td-error-color); } .oneid-tag--danger.oneid-tag--light .oneid-tag__icon-close:hover, .oneid-tag--danger.oneid-tag--outline .oneid-tag__icon-close:hover, .oneid-tag--danger.oneid-tag--light-outline .oneid-tag__icon-close:hover { color: var(--td-error-color-hover); } .oneid-tag--dark.oneid-tag:not(.oneid-tag--default) .oneid-tag__icon-close { color: var(--td-font-white-2); } .oneid-tag--dark.oneid-tag:not(.oneid-tag--default) .oneid-tag__icon-close:hover { color: var(--td-font-white-1); } .oneid-tag.oneid-tag--outline { background: transparent; } .oneid-tag.oneid-size-s { padding: 0px var(--td-comp-paddingLR-xs); height: var(--td-comp-size-xxs); font: var(--td-font-body-small); } .oneid-tag.oneid-size-s .oneid-icon { font-size: var(--td-font-body-small); } .oneid-tag.oneid-size-l { padding: 0px var(--td-comp-paddingLR-m); height: var(--td-comp-size-m); font: var(--td-font-body-medium); } .oneid-tag.oneid-size-l .oneid-icon { font: var(--td-font-body-medium); } .oneid-tag.oneid-tag--round { border-radius: var(--td-radius-extraLarge); } .oneid-tag.oneid-tag--mark { border-radius: 0 var(--td-radius-extraLarge) var(--td-radius-extraLarge) 0; } .oneid-tag.oneid-tag--ellipsis .oneid-tag--text { display: inline-block; white-space: nowrap; word-wrap: normal; overflow: hidden; text-overflow: ellipsis; } .oneid-tag.oneid-tag--check:not(.oneid-tag--disabled) { -webkit-transition: background-color 0.2s cubic-bezier(0.38, 0, 0.24, 1); transition: background-color 0.2s cubic-bezier(0.38, 0, 0.24, 1); cursor: pointer; } .oneid-tag.oneid-tag--check:not(.oneid-tag--disabled).oneid-tag--default.oneid-tag--dark:not(.oneid-tag--checked):hover { background-color: var(--td-bg-color-component-hover); } .oneid-tag.oneid-tag--check:not(.oneid-tag--disabled).oneid-tag--primary.oneid-tag--dark.oneid-tag--checked:hover { background-color: var(--td-brand-color-hover); } .oneid-tag.oneid-tag--check:not(.oneid-tag--disabled).oneid-tag--default.oneid-tag--outline:not(.oneid-tag--checked):hover { color: var(--td-brand-color-hover); } .oneid-tag--check.oneid-tag--disabled.oneid-tag--primary.oneid-tag--dark { background-color: var(--td-brand-color-disabled); cursor: not-allowed; } .oneid-tag--check.oneid-tag--disabled.oneid-tag--primary.oneid-tag--outline { color: var(--td-text-color-disabled); background-color: var(--td-bg-color-component-disabled); border-color: var(--td-text-color-disabled); cursor: not-allowed; } .oneid-check-tag-group .oneid-tag:not(:last-child) { margin-right: var(--td-comp-margin-s); } a .oneid-tag { cursor: pointer; -webkit-transition: all 0.2s linear; transition: all 0.2s linear; } a .oneid-tag:hover { color: var(--td-brand-color); background-color: var(--td-bg-color-component-hover); } a .oneid-tag:active { color: var(--td-brand-color-active); background-color: var(--td-bg-color-component-active); } @-webkit-keyframes t-fade-in { from { opacity: 0; } to { opacity: 1; } } @keyframes t-fade-in { from { opacity: 0; } to { opacity: 1; } } @-webkit-keyframes t-fade-out { from { opacity: 1; } to { opacity: 0; } } @keyframes t-fade-out { from { opacity: 1; } to { opacity: 0; } } @-webkit-keyframes t-spin { from { -webkit-transform: rotate(0deg); transform: rotate(0deg); } to { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @keyframes t-spin { from { -webkit-transform: rotate(0deg); transform: rotate(0deg); } to { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } .oneid-icon-loading { -webkit-animation: t-spin 1s linear infinite; animation: t-spin 1s linear infinite; } @-webkit-keyframes t-zoom-out { from { -webkit-transform: scale(0.2); transform: scale(0.2); } to { -webkit-transform: scale(1); transform: scale(1); } } @keyframes t-zoom-out { from { -webkit-transform: scale(0.2); transform: scale(0.2); } to { -webkit-transform: scale(1); transform: scale(1); } } .oneid-tag-input { font: var(--td-font-body-medium); color: var(--td-text-color-primary); -webkit-box-sizing: border-box; box-sizing: border-box; margin: 0; padding: 0; list-style: none; /** 设计稿:未填充标签场景,边距和已填充不同 */ } .oneid-tag-input .oneid-tag { vertical-align: middle; -webkit-animation: t-fade-in 0.2s ease-in-out; animation: t-fade-in 0.2s ease-in-out; margin: 3px var(--td-comp-margin-xs) 3px 0; } .oneid-tag-input .oneid-tag-input__drag_wrapper + .oneid-tag-input__drag_wrapper { margin-left: var(--td-comp-margin-xs); } .oneid-tag-input .oneid-input { overflow: hidden; min-height: var(--td-comp-size-m); height: -webkit-fit-content; height: -moz-fit-content; height: fit-content; padding: 0 var(--td-comp-paddingLR-s) 0 var(--td-comp-margin-xs); } .oneid-tag-input .oneid-input .oneid-input__suffix-icon { right: var(--td-comp-margin-s); } .oneid-tag-input .oneid-input.oneid-size-s { padding: 0 var(--td-comp-paddingLR-s) 0 var(--td-comp-margin-xs); min-height: var(--td-comp-size-xs); } .oneid-tag-input .oneid-input.oneid-size-s .oneid-tag { margin: 1px var(--td-comp-margin-xs) 1px 0; } .oneid-tag-input .oneid-input.oneid-size-l { min-height: var(--td-comp-size-xl); padding: 0 var(--td-comp-paddingLR-m) 0 var(--td-comp-margin-s); } .oneid-tag-input .oneid-input.oneid-size-l .oneid-input__suffix-icon { right: var(--td-comp-margin-m); } .oneid-tag-input.oneid-is-empty .oneid-input__inner { margin-left: var(--td-comp-margin-xs); } .oneid-tag-input:hover .oneid-input__inner:not(.oneid-input--soft-hidden), .oneid-tag-input .oneid-input--focused .oneid-input__inner:not(.oneid-input--soft-hidden) { min-width: 20px; } .oneid-tag-input .oneid-tag-input__prefix { margin-left: var(--td-comp-margin-xs); line-height: 1; } .oneid-tag-input .oneid-tag-input__prefix > .oneid-icon { color: var(--td-text-color-placeholder); } .oneid-tag-input .oneid-input .oneid-input__prefix:not(:empty) { margin-right: 0; } .oneid-tag-input.oneid-input--auto-width .oneid-input.oneid-input--focused { padding-right: calc(var(--td-comp-paddingLR-xxl) + var(--td-comp-paddingLR-xxs)); } .oneid-tag-input.oneid-input--auto-width .oneid-input__prefix { white-space: nowrap; } .oneid-tag-input .oneid-input__prefix--scrollable { overflow-y: hidden; overflow-x: auto; } @-moz-document url-prefix() { .oneid-tag-input .oneid-input__prefix--scrollable { scrollbar-color: var(--td-scrollbar-color) transparent; scrollbar-width: thin; } } .oneid-tag-input .oneid-input__prefix--scrollable::-webkit-scrollbar { width: 6px; height: 6px; } .oneid-tag-input .oneid-input__prefix--scrollable::-webkit-scrollbar-thumb { border: 0px solid transparent; background-clip: content-box; background-color: var(--td-scrollbar-color); border-radius: 11px; } .oneid-tag-input .oneid-input__prefix--scrollable::-webkit-scrollbar-thumb:vertical:hover, .oneid-tag-input .oneid-input__prefix--scrollable::-webkit-scrollbar-thumb:horizontal:hover { background-color: var(--td-scrollbar-hover-color); } .oneid-tag-input__suffix-clear { cursor: pointer; } .oneid-tag-input--break-line:not(.oneid-is-empty) .oneid-input { display: block; } .oneid-tag-input--break-line:not(.oneid-is-empty) .oneid-input.oneid-input--prefix > .oneid-input__prefix { display: inline; text-align: left; } .oneid-tag-input--break-line:not(.oneid-is-empty) .oneid-input .oneid-input__suffix-icon { position: absolute; bottom: 0; } .oneid-tag-input--break-line:not(.oneid-is-empty) .oneid-tag-input__prefix { vertical-align: middle; } .oneid-tag-input__prefix { width: -webkit-max-content; width: -moz-max-content; width: max-content; display: inline-block; margin-right: var(--td-comp-margin-s); } /** 换行模式避免标签和右侧图标重合,需保留图标宽度 22px 和左侧距离标签间距 8px */ .oneid-tag-input--break-line.oneid-tag-input--with-tag:not(.oneid-input--auto-width) .oneid-input, .oneid-tag-input.oneid-input--auto-width:hover .oneid-input { padding-right: calc(var(--td-comp-paddingLR-xxl) + var(--td-comp-paddingLR-xxs)); } .oneid-tag-input--break-line.oneid-tag-input--with-tag:not(.oneid-input--auto-width) .oneid-size-l .oneid-input, .oneid-tag-input.oneid-input--auto-width:hover .oneid-size-l .oneid-input { padding-right: calc(var(--td-comp-paddingLR-xxl) + var(--td-comp-paddingLR-xs)); } /** auto-width 模式,左右边距相同 */ .oneid-tag-input.oneid-input--auto-width .oneid-input { padding-right: 0; } /** max-rows模式,限制最大高度 */ .oneid-tag-input--max-rows .oneid-input { max-height: calc(var(--max-rows, 1) * (var(--td-comp-size-m) - 2px)); overflow-y: scroll; } .oneid-tag-input--max-rows .oneid-input.oneid-size-s { max-height: calc(var(--max-rows, 1) * var(--td-comp-size-xs)); } .oneid-tag-input--max-rows .oneid-input.oneid-size-l { max-height: calc(var(--max-rows, 1) * (var(--td-comp-size-xl) - 2px)); } .oneid-select-input { font: var(--td-font-body-medium); color: var(--td-text-color-primary); -webkit-box-sizing: border-box; box-sizing: border-box; margin: 0; padding: 0; list-style: none; width: 100%; display: inline-block; vertical-align: middle; } /** 宽度自适应场景,多选,预留图标的位置。带标签和不带标签的布局不同,故而间距不同 */ .oneid-select-input--multiple .oneid-input--auto-width.oneid-tag-input__with-suffix-icon.oneid-tag-input--with-tag .oneid-input { padding-right: var(--td-comp-paddingLR-xl); } .oneid-select-input--multiple .oneid-input--auto-width.oneid-tag-input__with-suffix-icon.oneid-tag-input--with-tag .oneid-input.oneid-size-l { padding-right: calc(var(--td-comp-paddingLR-xl) + var(--td-comp-paddingLR-s)); } .oneid-select-input--multiple .oneid-input--auto-width.oneid-tag-input__with-suffix-icon.oneid-is-empty .oneid-input { padding-right: var(--td-comp-paddingLR-s); } .oneid-select-input--multiple .oneid-input--auto-width.oneid-tag-input__with-suffix-icon.oneid-is-empty .oneid-input.oneid-size-l { padding-right: var(--td-comp-paddingLR-m); } /** 无边框模式 */ .oneid-select-input--borderless { /** 无边框模式的多选 */ } .oneid-select-input--borderless .oneid-input { -webkit-box-shadow: none; box-shadow: none; border: 1px solid transparent; background: transparent; -webkit-transition: all 0.2s linear; transition: all 0.2s linear; } .oneid-select-input--borderless .oneid-input:hover:not(.oneid-input--focused) { border-color: var(--td-component-border); background-color: var(--td-bg-color-container-hover); border-radius: var(--td-radius-default); } .oneid-select-input--borderless .oneid-input--focused { border-color: var(--td-brand-color); -webkit-box-shadow: 0 0 0 2px var(--td-brand-color-focus); box-shadow: 0 0 0 2px var(--td-brand-color-focus); background-color: var(--td-bg-color-specialcomponent); } .oneid-select-input--borderless.oneid-select-input--multiple:not(.oneid-select-input--empty).oneid-select-input--popup-visible input { display: inline-block; } .oneid-select-input--borderless.oneid-select-input--multiple:not(.oneid-select-input--empty).oneid-select-input--popup-visible .oneid-input { background-color: var(--td-bg-color-container-hover); } .oneid-select-input--borderless.oneid-tag-input { border: 0; -webkit-box-shadow: none; box-shadow: none; background: transparent; -webkit-transition: background-color 0.2s linear; transition: background-color 0.2s linear; } .oneid-select-input--borderless.oneid-tag-input:hover { background-color: var(--td-bg-color-container-hover); border-radius: var(--td-radius-default); } .oneid-select__wrap { width: 100%; } .oneid-select__dropdown .oneid-popup__content { margin: var(--td-comp-paddingTB-s) 0; padding: 0; max-height: 300px; overflow-y: auto; -ms-scroll-chaining: none; overscroll-behavior: contain; -webkit-box-shadow: var(--td-shadow-2); box-shadow: var(--td-shadow-2); } @-moz-document url-prefix() { .oneid-select__dropdown .oneid-popup__content { scrollbar-color: var(--td-scrollbar-color) transparent; scrollbar-width: thin; } } .oneid-select__dropdown .oneid-popup__content::-webkit-scrollbar { width: 8px; height: 8px; } .oneid-select__dropdown .oneid-popup__content::-webkit-scrollbar-thumb { border: 2px solid transparent; background-clip: content-box; background-color: var(--td-scrollbar-color); border-radius: 15px; } .oneid-select__dropdown .oneid-popup__content::-webkit-scrollbar-thumb:vertical:hover, .oneid-select__dropdown .oneid-popup__content::-webkit-scrollbar-thumb:horizontal:hover { background-color: var(--td-scrollbar-hover-color); } .oneid-select__dropdown-inner { min-height: var(--td-comp-size-m); } .oneid-select__dropdown-inner .oneid-select__list .oneid-select__list { padding: 0; } .oneid-select__dropdown-inner .oneid-select__list, .oneid-select__dropdown-inner .oneid-tree { padding: var(--td-pop-padding-m); } .oneid-select__dropdown-inner--size-s { min-height: var(--td-comp-size-xs); } .oneid-select__dropdown-inner--size-s .oneid-select__list, .oneid-select__dropdown-inner--size-s .oneid-tree { padding: var(--td-pop-padding-s); } .oneid-select__dropdown-inner--size-l { min-height: var(--td-comp-size-xl); } .oneid-select__dropdown-inner--size-l .oneid-select__list, .oneid-select__dropdown-inner--size-l .oneid-tree { padding: var(--td-pop-padding-l); } .oneid-select__list { margin: 0; padding: 0; list-style: none; } .oneid-select__dropdown.oneid-popup { padding: 0; } .oneid-select__empty.oneid-size-s { line-height: var(--td-comp-size-xs); } .oneid-select__empty { text-align: center; color: var(--td-text-color-disabled); line-height: var(--td-comp-size-m); padding: 0 var(--td-comp-paddingLR-s); } .oneid-select__empty.oneid-size-l { line-height: var(--td-comp-size-xl); } .oneid-select__loading-tips.oneid-size-s { min-height: var(--td-comp-size-xs); line-height: var(--td-comp-size-xs); } .oneid-select__loading-tips { position: fixed; top: var(--td-comp-paddingTB-s); left: 0; bottom: var(--td-comp-paddingTB-s); right: 0; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; background-color: var(--td-bg-color-container); border-radius: var(--td-radius-default); min-height: var(--td-comp-size-m); line-height: var(--td-comp-size-m); color: var(--td-text-color-disabled); z-index: 1000; } .oneid-select__loading-tips.oneid-size-l { min-height: var(--td-comp-size-xl); line-height: var(--td-comp-size-xl); } .oneid-select-option-group + .oneid-select-option-group { padding-top: var(--td-comp-margin-xs); margin-top: var(--td-comp-margin-xs); } .oneid-select-option-group__divider + .oneid-select-option-group__divider { position: relative; } .oneid-select-option-group__divider + .oneid-select-option-group__divider::before { content: ""; width: 100%; height: 1px; padding: 0 var(--td-comp-paddingLR-s); position: absolute; top: 0; left: 0; -webkit-box-sizing: border-box; box-sizing: border-box; background-color: var(--td-border-level-1-color); background-clip: content-box; } ul.oneid-select-option-group__header, .oneid-select-option-group__header { color: var(--td-text-color-placeholder); display: block; height: var(--td-comp-size-s); line-height: var(--td-comp-size-s); padding: 0 var(--td-comp-paddingLR-s); -webkit-box-sizing: border-box; box-sizing: border-box; white-space: nowrap; word-wrap: normal; overflow: hidden; text-overflow: ellipsis; } .oneid-select-option-group__header.oneid-size-l { height: var(--td-comp-size-l); line-height: var(--td-comp-size-l); padding: 0 var(--td-comp-paddingLR-m); } .oneid-select-option-group__header.oneid-size-s { height: var(--td-comp-size-xxs); line-height: var(--td-comp-size-xxs); padding: 0 var(--td-comp-paddingLR-s); } .oneid-select-option { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; border-radius: var(--td-radius-default); height: var(--td-comp-size-s); font: var(--td-font-body-medium); cursor: pointer; padding: 0 var(--td-comp-paddingLR-s); color: var(--td-text-color-primary); -webkit-transition: background-color 0.2s cubic-bezier(0.38, 0, 0.24, 1); transition: background-color 0.2s cubic-bezier(0.38, 0, 0.24, 1); -webkit-box-sizing: border-box; box-sizing: border-box; --ripple-color: var(--td-bg-color-container-active); } .oneid-select-option span { position: relative; white-space: nowrap; word-wrap: normal; overflow: hidden; text-overflow: ellipsis; } .oneid-select-option:not(.oneid-is-disabled):not(.oneid-is-selected):hover { background-color: var(--td-bg-color-container-hover); } .oneid-select-option:not(.oneid-is-disabled):not(.oneid-is-selected):hover .oneid-checkbox__label { color: inherit; } .oneid-select-option:not(.oneid-is-disabled):not(.oneid-is-selected):hover .oneid-checkbox__input { border-color: var(--td-brand-color); } .oneid-select-option .oneid-checkbox__label { color: var(--td-text-color-primary); -webkit-box-flex: 1; -ms-flex: 1; flex: 1; white-space: nowrap; word-wrap: normal; overflow: hidden; text-overflow: ellipsis; } .oneid-select-option .oneid-checkbox { width: 100%; } .oneid-select-option.oneid-is-disabled { cursor: not-allowed; color: var(--td-text-color-disabled); background: var(--td-bg-color-specialcomponent); } .oneid-select-option.oneid-is-disabled:hover, .oneid-select-option.oneid-is-disabled :active { background: var(--td-bg-color-specialcomponent); } .oneid-select-option.oneid-size-l { height: var(--td-comp-size-l); padding: 0 var(--td-comp-paddingLR-m); font: var(--td-font-body-large); } .oneid-select-option.oneid-size-m { font: var(--td-font-body-medium); } .oneid-select-option.oneid-size-s { height: var(--td-comp-size-xxs); padding: 0 var(--td-comp-paddingLR-s); font: var(--td-font-body-small); } .oneid-select-option.oneid-is-selected:not(.oneid-is-disabled) { color: var(--td-brand-color); background-color: var(--td-brand-color-light); -webkit-transition: all 0.2s linear; transition: all 0.2s linear; } .oneid-select-option.oneid-is-selected:not(.oneid-is-disabled) .oneid-checkbox__label { color: var(--td-brand-color); } .oneid-select-option.oneid-is-selected:not(.oneid-is-disabled):hover { background-color: var(--td-brand-color-light); } /** 规范 CSS 类名为 --hover */ .oneid-select-option.oneid-select-option__hover:not(.oneid-is-disabled).oneid-select-option.oneid-select-option__hover:not(.oneid-is-selected), .oneid-select-option.oneid-select-option__hover:not(.oneid-is-disabled).oneid-select-option.oneid-select-option--hover:not(.oneid-is-selected), .oneid-select-option.oneid-select-option--hover:not(.oneid-is-disabled).oneid-select-option.oneid-select-option__hover:not(.oneid-is-selected), .oneid-select-option.oneid-select-option--hover:not(.oneid-is-disabled).oneid-select-option.oneid-select-option--hover:not(.oneid-is-selected) { background-color: var(--td-bg-color-container-hover); } .oneid-select-option.oneid-select-option__hover:not(.oneid-is-disabled).oneid-select-option.oneid-select-option__hover:not(.oneid-is-selected) .oneid-checkbox__input, .oneid-select-option.oneid-select-option__hover:not(.oneid-is-disabled).oneid-select-option.oneid-select-option--hover:not(.oneid-is-selected) .oneid-checkbox__input, .oneid-select-option.oneid-select-option--hover:not(.oneid-is-disabled).oneid-select-option.oneid-select-option__hover:not(.oneid-is-selected) .oneid-checkbox__input, .oneid-select-option.oneid-select-option--hover:not(.oneid-is-disabled).oneid-select-option.oneid-select-option--hover:not(.oneid-is-selected) .oneid-checkbox__input { border-color: var(--td-brand-color); } .oneid-select-option.oneid-select-option__hover .oneid-checkbox__label, .oneid-select-option.oneid-select-option--hover .oneid-checkbox__label { color: inherit; } .oneid-select-option + .oneid-select-option { margin-top: var(--td-comp-paddingTB-xxs); } .oneid-select.oneid-select-input--borderless .oneid-select__right-icon { position: relative; margin: 0; } .oneid-select .oneid-fake-arrow { color: var(--td-text-color-placeholder); } .oneid-select .oneid-fake-arrow--active { color: var(--td-brand-color); } .oneid-is-selected.oneid-select-option__hover { background-color: var(--td-brand-color-light-hover); } .oneid-is-selected.oneid-select-option__hover .oneid-checkbox__label { color: var(--td-brand-color); } .oneid-pagination-mini { font: var(--td-font-body-medium); color: var(--td-text-color-primary); -webkit-box-sizing: border-box; box-sizing: border-box; margin: 0; padding: 0; list-style: none; } .oneid-pagination-mini--outline .oneid-pagination-mini__prev { border-top-right-radius: 0; border-bottom-right-radius: 0; position: relative; z-index: 1; } .oneid-pagination-mini--outline .oneid-pagination-mini__current { border-radius: 0; position: relative; margin-left: -1px; } .oneid-pagination-mini--outline .oneid-pagination-mini__current:hover { z-index: 1; } .oneid-pagination-mini--outline .oneid-pagination-mini__next { border-top-left-radius: 0; border-bottom-left-radius: 0; position: relative; margin-left: -1px; } .oneid-pagination-mini--outline .oneid-pagination-mini__next:hover { z-index: 1; } .oneid-pagination { font: var(--td-font-body-medium); color: var(--td-text-color-primary); -webkit-box-sizing: border-box; box-sizing: border-box; margin: 0; padding: 0; list-style: none; width: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; white-space: nowrap; color: var(--td-text-color-secondary); -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .oneid-pagination.oneid-is-disabled { color: var(--td-text-color-disabled); } .oneid-pagination__total { font: var(--td-font-body-medium); -webkit-box-flex: 1; -ms-flex: 1; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .oneid-pagination .oneid-select__wrap { width: auto; } .oneid-pagination__select { -ms-flex-negative: 0; flex-shrink: 0; margin-right: var(--td-comp-margin-l); height: var(--td-comp-size-m); font-size: var(--td-font-size-body-medium); color: var(--td-text-color-secondary); } .oneid-pagination__btn { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -ms-flex-negative: 0; flex-shrink: 0; cursor: pointer; color: var(--td-text-color-secondary); border-radius: var(--td-radius-default); font: var(--td-font-body-large); width: var(--td-comp-size-m); height: var(--td-comp-size-m); line-height: var(--td-comp-size-m); } .oneid-pagination__btn:hover { background-color: var(--td-bg-color-secondarycontainer-hover); -webkit-transition: all 0.2s cubic-bezier(0.82, 0, 1, 0.9); transition: all 0.2s cubic-bezier(0.82, 0, 1, 0.9); } .oneid-pagination__btn:active { background-color: var(--td-bg-color-secondarycontainer-active); } .oneid-pagination__btn.oneid-is-disabled, .oneid-pagination__btn.oneid-is-disabled:hover, .oneid-pagination__btn.oneid-is-disabled:active { background: none; color: var(--td-text-color-disabled); } .oneid-pagination__btn.oneid-is-disabled { cursor: not-allowed; } .oneid-pagination__btn-prev { margin-right: var(--td-comp-margin-s); } .oneid-pagination__btn-next { margin-left: var(--td-comp-margin-s); } .oneid-pagination__btn + .oneid-pagination__select { margin-right: 0; } .oneid-pagination__pager { -ms-flex-negative: 0; flex-shrink: 0; display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; vertical-align: middle; list-style: none; padding: 0; margin: 0; } .oneid-pagination__pager li:not(:last-child) { margin-right: var(--td-comp-margin-s); } .oneid-pagination__number { display: inline-block; border: 1px solid var(--td-component-border); text-align: center; border-radius: var(--td-radius-default); cursor: pointer; background-color: var(--td-bg-color-container); -webkit-box-sizing: border-box; box-sizing: border-box; height: var(--td-comp-size-m); min-width: var(--td-comp-size-m); line-height: calc(var(--td-comp-size-m) - 2px); font-size: var(--td-font-body-medium); padding-left: var(--td-comp-paddingLR-xs); padding-right: var(--td-comp-paddingLR-xs); } .oneid-pagination__number:hover { color: var(--td-brand-color-hover); border-color: var(--td-brand-color-hover); -webkit-transition: all 0.2s cubic-bezier(0.82, 0, 1, 0.9); transition: all 0.2s cubic-bezier(0.82, 0, 1, 0.9); } .oneid-pagination__number:active { background-color: var(--td-brand-color); color: var(--td-text-color-anti); border-color: var(--td-brand-color); } .oneid-pagination__number.oneid-is-current { background-color: var(--td-brand-color); color: var(--td-text-color-anti); border-color: var(--td-brand-color); } .oneid-pagination__number.oneid-is-current.oneid-is-disabled, .oneid-pagination__number.oneid-is-current.oneid-is-disabled:hover, .oneid-pagination__number.oneid-is-current.oneid-is-disabled:active { background-color: var(--td-brand-color-focus); color: var(--td-text-color-anti); border-color: var(--td-brand-color-focus); } .oneid-pagination__number.oneid-is-disabled { cursor: auto; background-color: var(--td-bg-color-component-disabled); color: var(--td-text-color-disabled); } .oneid-pagination__number.oneid-is-disabled:hover, .oneid-pagination__number.oneid-is-disabled:active { background-color: var(--td-bg-color-component-disabled); color: var(--td-text-color-disabled); border-color: var(--td-component-border); } .oneid-pagination__number--more { border: 0 none; padding: 0; } .oneid-pagination__number--more:hover { color: var(--td-text-color-primary); background-color: var(--td-bg-color-secondarycontainer-hover); -webkit-transition: all 0.2s cubic-bezier(0.82, 0, 1, 0.9); transition: all 0.2s cubic-bezier(0.82, 0, 1, 0.9); } .oneid-pagination__number--more:active { color: var(--td-text-color-primary); background-color: var(--td-bg-color-secondarycontainer-active); } .oneid-pagination__number--more.oneid-is-disabled, .oneid-pagination__number--more.oneid-is-disabled:hover, .oneid-pagination__number--more.oneid-is-disabled:active { background: none; } .oneid-pagination__number--more .oneid-icon-more { -webkit-transform: rotate(90deg); transform: rotate(90deg); color: var(--td-text-color-disabled); } .oneid-pagination__jump { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -ms-flex-negative: 0; flex-shrink: 0; margin-left: var(--td-comp-margin-s); font-size: var(--td-font-body-medium); gap: var(--td-comp-margin-s); background-color: var(--td-bg-color-secondarycontainer); height: var(--td-comp-size-m); padding-left: var(--td-comp-margin-s); border-radius: var(--td-radius-default); } .oneid-pagination .oneid-input-adornment__append { border: none; height: calc(var(--td-comp-size-m) - 4px); color: var(--td-text-color-secondary); background-color: transparent; } .oneid-pagination .oneid-input-adornment__append .oneid-input-adornment__text { border: none; } .oneid-pagination .oneid-input-number { width: 56px; } .oneid-pagination .oneid-input-number .oneid-input { height: calc(var(--td-comp-size-m) - 4px); border-radius: var(--td-radius-default); } .oneid-pagination .oneid-input-number .oneid-input__inner { text-align: center; } .oneid-pagination.oneid-size-s { font: var(--td-font-body-small); } .oneid-pagination.oneid-size-s .oneid-pagination__jump { height: var(--td-comp-size-xs); } .oneid-pagination.oneid-size-s .oneid-input-adornment__append { height: calc(var(--td-comp-size-xs) - 4px); font: var(--td-font-body-small); } .oneid-pagination.oneid-size-s .oneid-input-number { width: 48px; } .oneid-pagination.oneid-size-s .oneid-input-number .oneid-input { height: calc(var(--td-comp-size-xs) - 4px); } .oneid-pagination.oneid-size-s .oneid-pagination__total { font: var(--td-font-body-small); } .oneid-pagination.oneid-size-s .oneid-pagination__select { height: var(--td-comp-size-xs); font-size: var(--td-font-size-body-small); } .oneid-pagination.oneid-size-s .oneid-pagination__number { border: 0 none; height: var(--td-comp-size-xs); min-width: var(--td-comp-size-xs); line-height: var(--td-comp-size-xs); font-size: var(--td-font-body-small); padding-left: var(--td-comp-paddingLR-xxs); padding-right: var(--td-comp-paddingLR-xxs); } .oneid-pagination.oneid-size-s .oneid-pagination__number:hover:not(.oneid-pagination.oneid-size-s .oneid-pagination__number.oneid-is-current) { color: var(--td-text-color-primary); background-color: var(--td-bg-color-secondarycontainer-hover); -webkit-transition: all 0.2s cubic-bezier(0.82, 0, 1, 0.9); transition: all 0.2s cubic-bezier(0.82, 0, 1, 0.9); } .oneid-pagination.oneid-size-s .oneid-pagination__number:active:not(.oneid-pagination.oneid-size-s .oneid-pagination__number.oneid-is-current) { color: var(--td-text-color-primary); background-color: var(--td-bg-color-secondarycontainer-active); } .oneid-pagination.oneid-size-s .oneid-pagination__number.oneid-is-disabled { background: none; color: var(--td-text-color-disabled); } .oneid-pagination.oneid-size-s .oneid-pagination__number.oneid-is-current.oneid-is-disabled { background-color: var(--td-brand-color-focus); color: var(--td-text-color-anti); border-color: var(--td-brand-color-focus); } .oneid-pagination.oneid-size-s .oneid-pagination__btn { border: 0 none; background: none; width: var(--td-comp-size-xs); height: var(--td-comp-size-xs); line-height: var(--td-comp-size-xs); } .oneid-pagination.oneid-size-s .oneid-pagination__btn:hover { background-color: var(--td-bg-color-secondarycontainer-hover); -webkit-transition: all 0.2s cubic-bezier(0.82, 0, 1, 0.9); transition: all 0.2s cubic-bezier(0.82, 0, 1, 0.9); } .oneid-pagination.oneid-size-s .oneid-pagination__btn:active { background-color: var(--td-bg-color-secondarycontainer-active); } .oneid-pagination.oneid-size-s .oneid-pagination__btn.oneid-is-disabled, .oneid-pagination.oneid-size-s .oneid-pagination__btn.oneid-is-disabled:hover, .oneid-pagination.oneid-size-s .oneid-pagination__btn.oneid-is-disabled:active { background: none; color: var(--td-text-color-disabled); } /** IE 兼容 **/ .oneid-pagination-ie { /** 在 IE11 以下浏览器,input autoWidth 计算无法依赖 observer,因而加上最小宽度,避免分页信息出现 0 的情况 */ } .oneid-pagination-ie .oneid-select .oneid-input__inner { min-width: 54px; } /** 吸顶表头 Affix 组件,zIndex: 1000。宽度拖拽辅助线层级需高于表头 */ @-moz-document url-prefix() { .scrollbar { scrollbar-color: var(--td-scrollbar-color) transparent; scrollbar-width: thin; } } .scrollbar::-webkit-scrollbar { width: 6px; height: 6px; } .scrollbar::-webkit-scrollbar-thumb { border: 0px solid transparent; background-clip: content-box; background-color: var(--td-scrollbar-color); border-radius: 11px; } .scrollbar::-webkit-scrollbar-thumb:vertical:hover, .scrollbar::-webkit-scrollbar-thumb:horizontal:hover { background-color: var(--td-scrollbar-hover-color); } .scrollbar.oneid-table__affixed-footer-elm::-webkit-scrollbar-track, .scrollbar.oneid-table__scrollbar--obvious::-webkit-scrollbar-track { background: var(--td-scroll-track-color); } .oneid-table__affixed-footer-wrap > .scrollbar.oneid-table__affixed-footer-elm::-webkit-scrollbar-thumb, .oneid-table--width-overflow.oneid-table--footer-affixed .oneid-table__content::-webkit-scrollbar-thumb, .oneid-table--width-overflow.oneid-table--horizontal-bar-affixed .oneid-table__content::-webkit-scrollbar-thumb { background: transparent; } .oneid-table.oneid-table--overflow-visible { overflow: initial; } .oneid-table { -webkit-box-sizing: border-box; box-sizing: border-box; margin: 0; padding: 0; list-style: none; width: 100%; font: var(--td-font-body-medium); color: var(--td-text-color-primary); background-color: var(--td-bg-color-container); position: relative; /** loading need to be top of fixed columns */ } .oneid-table .oneid-popup:not(.oneid-tooltip)[data-popper-placement^=top] .oneid-popup__arrow { bottom: -4px; } .oneid-table:focus-visible { outline: none; } .oneid-table .oneid-loading--full { z-index: 72; } .oneid-table.oneid-vertical-align-top th:not(.oneid-table__cell-check), .oneid-table.oneid-vertical-align-top td:not(.oneid-table__cell-check) { vertical-align: top; } .oneid-table.oneid-vertical-align-middle th:not(.oneid-table__cell-check), .oneid-table.oneid-vertical-align-middle td:not(.oneid-table__cell-check) { vertical-align: middle; } .oneid-table.oneid-vertical-align-bottom th:not(.oneid-table__cell-check), .oneid-table.oneid-vertical-align-bottom td:not(.oneid-table__cell-check) { vertical-align: bottom; } .oneid-table .oneid-table__resize-line { display: none; position: absolute; left: 10px; width: 0; border-left: 1px solid var(--td-component-border); z-index: 1001; } .oneid-table__column-controller-trigger.oneid-align-top-right, .oneid-table__column-controller-trigger.oneid-align-bottom-right { text-align: right; } .oneid-table__column-controller-trigger { padding: var(--td-comp-paddingTB-l) 0; } .oneid-table__column-controller-item:not(:last-child) { margin-bottom: var(--td-comp-margin-l); } .oneid-table__content { position: relative; } @-moz-document url-prefix() { .oneid-table__content { scrollbar-color: var(--td-scrollbar-color) transparent; scrollbar-width: thin; } } .oneid-table__content::-webkit-scrollbar { width: 6px; height: 6px; } .oneid-table__content::-webkit-scrollbar-thumb { border: 0px solid transparent; background-clip: content-box; background-color: var(--td-scrollbar-color); border-radius: 11px; } .oneid-table__content::-webkit-scrollbar-thumb:vertical:hover, .oneid-table__content::-webkit-scrollbar-thumb:horizontal:hover { background-color: var(--td-scrollbar-hover-color); } @-moz-document url-prefix() { .oneid-table__content { scrollbar-color: var(--td-scrollbar-color) transparent; scrollbar-width: thin; } } .oneid-table__content::-webkit-scrollbar { width: 6px; height: 6px; } .oneid-table__content::-webkit-scrollbar-thumb { border: 0px solid transparent; background-clip: content-box; background-color: var(--td-scrollbar-color); border-radius: 11px; } .oneid-table__content::-webkit-scrollbar-thumb:vertical:hover, .oneid-table__content::-webkit-scrollbar-thumb:horizontal:hover { background-color: var(--td-scrollbar-hover-color); } .oneid-table__pagination { padding: var(--td-comp-paddingTB-l) var(--td-comp-paddingLR-l); -webkit-box-sizing: border-box; box-sizing: border-box; } .oneid-table .oneid-icon { font-size: var(--td-font-size-body-large); } .oneid-table table { width: 100%; border-spacing: 0; } .oneid-table .oneid-text-ellipsis { line-height: var(--td-line-height-body-medium); white-space: nowrap; word-wrap: normal; overflow: hidden; text-overflow: ellipsis; } .oneid-table th, .oneid-table td { position: relative; padding: var(--td-comp-paddingTB-m) var(--td-comp-paddingLR-l); border-bottom: 1px solid var(--td-component-border); line-height: var(--td-line-height-body-medium); font-weight: normal; overflow-wrap: break-word; background-color: inherit; -webkit-box-sizing: border-box; box-sizing: border-box; text-align: left; } .oneid-table th.oneid-table__th-drag { padding: 0; height: 0; text-align: center; } .oneid-table thead td, .oneid-table th { color: var(--td-text-color-placeholder); } .oneid-table td[key=row-select] { padding: 13px 0 11px var(--td-comp-paddingLR-l); } .oneid-table td.oneid-align-left, .oneid-table th.oneid-align-left { text-align: left; } .oneid-table td.oneid-align-right, .oneid-table th.oneid-align-right { text-align: right; } .oneid-table td.oneid-align-center, .oneid-table th.oneid-align-center { text-align: center; } .oneid-table tr { background-color: var(--td-bg-color-container); } .oneid-table.oneid-size-s th, .oneid-table.oneid-size-s td { padding: var(--td-comp-paddingTB-s) var(--td-comp-paddingLR-s); } .oneid-table.oneid-size-l th, .oneid-table.oneid-size-l td { padding: var(--td-comp-paddingTB-l) var(--td-comp-paddingLR-xl); } .oneid-table .oneid-table__expandable-icon-cell, .oneid-table .oneid-table__selection-cell { padding: 0; height: 0; } .oneid-table td.oneid-table__handle-draggable { text-align: center; height: 0; padding: 0; } .oneid-table .oneid-table__cell--selectable > .oneid-checkbox { vertical-align: middle; } .oneid-table .oneid-table__cell--selectable + td, .oneid-table .oneid-table__cell--selectable + th { padding-left: 0; } .oneid-table--bordered td, .oneid-table--bordered th { border-left: 1px solid var(--td-component-border); } .oneid-table--bordered td.oneid-table__cell--fixed-left-last::before, .oneid-table--bordered th.oneid-table__cell--fixed-left-last::before { border-right: 1px solid var(--td-component-border); } .oneid-table--bordered th:first-child, .oneid-table--bordered td.oneid-table__td-first-col { border-left-width: 0; } .oneid-table--bordered:not(.oneid-table--rowspan-colspan) td:first-child { border-left-width: 0; } .oneid-table--bordered .oneid-table__content { border-left: 1px solid var(--td-component-border); } .oneid-table--bordered .oneid-table__content::-webkit-scrollbar-corner { background-color: transparent; } .oneid-table--bordered .oneid-table__content { border: 1px solid var(--td-component-border); border-radius: var(--td-radius-default); } .oneid-table--bordered .oneid-table--loading { border-bottom: 1px solid var(--td-component-border); } .oneid-table--bordered .oneid-table__pagination { padding: var(--td-comp-paddingTB-l) var(--td-comp-paddingLR-l); } .oneid-table--bordered .oneid-table__bottom-content + .oneid-table__pagination { padding: 0; } .oneid-table--bordered.oneid-table__header--fixed .oneid-table__content { border-bottom: 1px solid var(--td-component-border); } .oneid-table--bordered .oneid-table__td-last-row { border-bottom: none; } .oneid-table--striped:not(.oneid-table--bordered) th, .oneid-table--striped:not(.oneid-table--bordered) td { border-bottom: none; } .oneid-table--striped.oneid-table--header-fixed > .oneid-table__content > table > tbody tr:nth-of-type(even) { background-color: var(--td-bg-color-secondarycontainer); } .oneid-table--striped:not(.oneid-table--header-fixed) > .oneid-table__content > table > tbody > tr:nth-of-type(odd):not(.oneid-table__expanded-row) { background-color: var(--td-bg-color-secondarycontainer); } .oneid-table--striped.oneid-table--hoverable.oneid-table__header--fixed tbody tr:nth-of-type(even):hover { background-color: var(--td-bg-color-secondarycontainer-hover); } .oneid-table--striped.oneid-table--hoverable:not(.oneid-table__header--fixed) > .oneid-table__content > table > tbody tr:nth-of-type(odd):hover { background-color: var(--td-bg-color-secondarycontainer-hover); } .oneid-table--striped.oneid-table--hoverable > .oneid-table__content > table > tbody tr { -webkit-transition: background-color 0.2s linear; transition: background-color 0.2s linear; } .oneid-table--striped.oneid-table--hoverable > .oneid-table__content > table > tbody tr:hover { background-color: var(--td-bg-color-container-hover); } .oneid-table--hoverable tbody tr { -webkit-transition: background-color 0.2s linear; transition: background-color 0.2s linear; } .oneid-table--hoverable tbody tr:hover { background-color: var(--td-bg-color-container-hover); } .oneid-table.oneid-table--align-top tbody td { vertical-align: top; } .oneid-table .oneid-table__cell--highlight { background-color: var(--td-bg-color-secondarycontainer); } .oneid-table__header--fixed table { table-layout: fixed; } .oneid-table__header--fixed th, .oneid-table__header--fixed td { overflow-wrap: break-word; } .oneid-table__header--fixed.oneid-table__header, .oneid-table__header--fixed .oneid-table__header { width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; position: relative; z-index: 5; } @-moz-document url-prefix() { .oneid-table__header--fixed .oneid-table__header { scrollbar-color: var(--td-scrollbar-color) transparent; scrollbar-width: thin; } } .oneid-table__header--fixed .oneid-table__header::-webkit-scrollbar { width: 6px; height: 6px; } .oneid-table__header--fixed .oneid-table__header::-webkit-scrollbar-thumb { border: 0px solid transparent; background-clip: content-box; background-color: var(--td-scrollbar-color); border-radius: 11px; } .oneid-table__header--fixed .oneid-table__header::-webkit-scrollbar-thumb:vertical:hover, .oneid-table__header--fixed .oneid-table__header::-webkit-scrollbar-thumb:horizontal:hover { background-color: var(--td-scrollbar-hover-color); } @-moz-document url-prefix() { .oneid-table__header--fixed .oneid-table__header { scrollbar-color: var(--td-scrollbar-color) transparent; scrollbar-width: thin; } } .oneid-table__header--fixed .oneid-table__header::-webkit-scrollbar { width: 6px; height: 6px; } .oneid-table__header--fixed .oneid-table__header::-webkit-scrollbar-thumb { border: 0px solid transparent; background-clip: content-box; background-color: var(--td-scrollbar-color); border-radius: 11px; } .oneid-table__header--fixed .oneid-table__header::-webkit-scrollbar-thumb:vertical:hover, .oneid-table__header--fixed .oneid-table__header::-webkit-scrollbar-thumb:horizontal:hover { background-color: var(--td-scrollbar-hover-color); } .oneid-table__header--fixed .oneid-table__body { overflow-y: auto; width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; } @-moz-document url-prefix() { .oneid-table__header--fixed .oneid-table__body { scrollbar-color: var(--td-scrollbar-color) transparent; scrollbar-width: thin; } } .oneid-table__header--fixed .oneid-table__body::-webkit-scrollbar { width: 6px; height: 6px; } .oneid-table__header--fixed .oneid-table__body::-webkit-scrollbar-thumb { border: 0px solid transparent; background-clip: content-box; background-color: var(--td-scrollbar-color); border-radius: 11px; } .oneid-table__header--fixed .oneid-table__body::-webkit-scrollbar-thumb:vertical:hover, .oneid-table__header--fixed .oneid-table__body::-webkit-scrollbar-thumb:horizontal:hover { background-color: var(--td-scrollbar-hover-color); } @-moz-document url-prefix() { .oneid-table__header--fixed .oneid-table__body { scrollbar-color: var(--td-scrollbar-color) transparent; scrollbar-width: thin; } } .oneid-table__header--fixed .oneid-table__body::-webkit-scrollbar { width: 6px; height: 6px; } .oneid-table__header--fixed .oneid-table__body::-webkit-scrollbar-thumb { border: 0px solid transparent; background-clip: content-box; background-color: var(--td-scrollbar-color); border-radius: 11px; } .oneid-table__header--fixed .oneid-table__body::-webkit-scrollbar-thumb:vertical:hover, .oneid-table__header--fixed .oneid-table__body::-webkit-scrollbar-thumb:horizontal:hover { background-color: var(--td-scrollbar-hover-color); } .oneid-table:not(.oneid-table--bordered) .oneid-table__cell--selectable + td, .oneid-table:not(.oneid-table--bordered) .oneid-table__cell--selectable + th { padding-left: 0; } .oneid-table__cell--fixed.oneid-table__header--fixed .oneid-table__header { overflow: hidden; width: 100%; } .oneid-table__cell--fixed.oneid-table__header--fixed .oneid-table__header .oneid-table__cell--fixed-left:last-child::after, .oneid-table__cell--fixed.oneid-table__header--fixed .oneid-table__header .oneid-table__cell--fixed-right:last-child::after { content: ""; position: absolute; right: -6px; width: 6px; height: 100%; top: 0; background-color: var(--td-bg-color-secondarycontainer); } .oneid-table__cell--fixed.oneid-table__header--fixed .oneid-table__body { overflow: auto scroll; } .oneid-table__cell--fixed .oneid-table__content { overflow: auto hidden; } .oneid-table__cell--fixed table { table-layout: fixed; min-width: 100%; } .oneid-table__cell--fixed th, .oneid-table__cell--fixed td { position: relative; } .oneid-table__cell--fixed .oneid-table__cell--fixed-left-last::before { z-index: -1; background-color: inherit; } .oneid-table__cell--fixed .oneid-table__cell--fixed-left-last::after { position: absolute; top: 0; bottom: 0; content: ""; -webkit-transition: -webkit-box-shadow 0.3s; transition: -webkit-box-shadow 0.3s; transition: box-shadow 0.3s; transition: box-shadow 0.3s, -webkit-box-shadow 0.3s; pointer-events: none; z-index: -2; } .oneid-table__cell--fixed .oneid-table__cell--fixed-left-last::after { right: 0; -webkit-transform: translateX(100%); transform: translateX(100%); } .oneid-table__cell--fixed .oneid-table__cell--fixed-right-first::before { z-index: -1; background-color: inherit; } .oneid-table__cell--fixed .oneid-table__cell--fixed-right-first::after { position: absolute; top: 0; bottom: 0; content: ""; -webkit-transition: -webkit-box-shadow 0.3s; transition: -webkit-box-shadow 0.3s; transition: box-shadow 0.3s; transition: box-shadow 0.3s, -webkit-box-shadow 0.3s; pointer-events: none; z-index: -2; } .oneid-table__cell--fixed .oneid-table__cell--fixed-right-first::after { left: 0; -webkit-transform: translateX(-100%); transform: translateX(-100%); } .oneid-table .oneid-table__cell-resizable { position: relative; } .oneid-table .oneid-table__cell-resizable .oneid-table__cell--resizer { position: absolute; top: 0; right: -5px; bottom: 0; z-index: 10; width: 10px; cursor: col-resize; } .oneid-table .oneid-table__row--disabled { color: var(--td-text-color-disabled); } .oneid-table .oneid-table__cell--title { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .oneid-table__column-controller-desc { margin-bottom: var(--td-comp-margin-xxl); } .oneid-table__column-controller-block { padding: var(--td-comp-paddingTB-m) var(--td-comp-paddingLR-l); border: 1px solid var(--td-component-border); border-bottom: 1px solid var(--td-component-border); } .oneid-table__column-controller-block + .oneid-table__column-controller-block { border-top: 0; padding: var(--td-comp-paddingTB-l) var(--td-comp-paddingLR-l); border-bottom: 1px solid var(--td-component-border); } .oneid-table__column-controller--fixed .oneid-checkbox { width: 108px; } /** 表格行点击高亮悬浮态 */ .oneid-table.oneid-table__row--active-single tbody > tr.oneid-table__row--active, .oneid-table.oneid-table__row--active-multiple tbody > tr.oneid-table__row--active { background-color: var(--td-brand-color-light); } .oneid-table.oneid-table__row--active-single tbody > tr.oneid-table__row--active.oneid-table__row--hover, .oneid-table.oneid-table__row--active-multiple tbody > tr.oneid-table__row--active.oneid-table__row--hover { background-color: var(--td-brand-color-light-hover); } .oneid-table.oneid-table--hoverable tbody > tr.oneid-table__row--active:hover { background-color: var(--td-brand-color-light-hover); } /** 键盘操作悬浮表格行 */ .oneid-table.oneid-table--row-expandable tbody > tr.oneid-table__row--hover, .oneid-table.oneid-table--row-select tbody > tr.oneid-table__row--hover, .oneid-table.oneid-table__row--active-multiple tbody > tr.oneid-table__row--hover { background-color: var(--td-bg-color-container-hover); } .oneid-table--bordered .oneid-table__cell--sortable .oneid-table__cell--title, .oneid-table--bordered .oneid-table__cell--filterable .oneid-table__cell--title { -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } .oneid-table th.oneid-align-right .oneid-table__cell--title { -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; } /** * 有边框和无边框的图标排列不一样,需谨慎修改 * 无边框模式,图标依次紧跟标题 * 有边框模式,只有一个图标时,图标靠近边框右侧;有两个图标时,排序图标靠近标题,过滤图标靠近边框右侧 */ .oneid-table__cell--sort-trigger { text-align: center; vertical-align: text-bottom; } .oneid-table__cell--sort-trigger svg { vertical-align: initial; } .oneid-table--loading { position: relative; } .oneid-table--loading-progressbar { overflow: hidden; position: absolute; top: 0; left: 0; height: 1px; background-color: var(--td-brand-color); -webkit-animation: tTableProgressbar 2s ease-in-out; animation: tTableProgressbar 2s ease-in-out; -webkit-animation-fill-mode: both; animation-fill-mode: both; } .oneid-table--loading-message { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; min-height: 120px; color: var(--td-text-color-placeholder); } .oneid-table__expanded-cell { padding-left: 45px; } .oneid-table__async-loading { text-align: center; } .oneid-table__async-loading.oneid-is-load-more { cursor: pointer; } .oneid-table__empty { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; min-height: 120px; color: var(--td-text-color-disabled); } .oneid-table__filter-icon, .oneid-table__sort-icon { -webkit-box-align: center; -ms-flex-align: center; align-items: center; background-color: transparent; display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; cursor: pointer; vertical-align: text-bottom; -webkit-transition: 0.2s linear; transition: 0.2s linear; } .oneid-table__filter-icon > svg, .oneid-table__sort-icon > svg { margin-top: 0; } .oneid-table__sort-icon .oneid-is-focus, .oneid-table__sort-icon.oneid-is-focus, .oneid-table__sort-icon:hover { color: var(--td-brand-color); border-radius: var(--td-radius-circle); -webkit-transition: 0.2s linear; transition: 0.2s linear; } .oneid-table__filter-icon .oneid-is-focus, .oneid-table__filter-icon.oneid-is-focus, .oneid-table__filter-icon:hover { color: var(--td-brand-color); -webkit-transition: 0.2s linear; transition: 0.2s linear; } .oneid-table__filter-pop .oneid-popup__content { padding: 0; } .oneid-table__filter-pop .oneid-table__filter-pop-content .oneid-table__filter-pop-content-inner { padding: var(--td-comp-paddingTB-l) var(--td-comp-paddingLR-l); } .oneid-table__filter-pop .oneid-table__filter-pop-content .oneid-table__filter-pop-content-inner .oneid-table__filter-popup-input { margin-bottom: var(--td-comp-margin-s); } .oneid-table__filter-pop .oneid-table__filter-pop-content .oneid-radio-group { display: block; height: auto; } .oneid-table__filter-pop .oneid-table__filter-pop-content .oneid-checkbox-group { display: block; } .oneid-table__filter-pop .oneid-table__filter-pop-content .oneid-checkbox, .oneid-table__filter-pop .oneid-table__filter-pop-content .oneid-radio { display: block; margin: var(--td-comp-margin-xs) 0; } .oneid-table__filter-pop .oneid-table__filter-pop-content .oneid-table__filter-pop-content-button { border-top: 1px solid var(--td-component-border); padding: var(--td-comp-paddingTB-l) var(--td-comp-paddingLR-l); } .oneid-table__filter-pop .oneid-table__filter-pop-content .oneid-table__filter-pop-content-button .oneid-button + .oneid-button { margin-left: var(--td-comp-margin-l); } .oneid-table__filter-pop .oneid-table__list-filter-input--sticky .oneid-table__filter-pop-content .oneid-table__filter-pop-content-inner { padding: 0; max-height: 280px; overflow: auto; position: relative; } .oneid-table__filter-pop .oneid-table__list-filter-input--sticky .oneid-table__filter-pop-content .oneid-table__filter-pop-content-inner .oneid-input__wrap { padding: var(--td-comp-paddingTB-l) var(--td-comp-paddingLR-l) 0 var(--td-comp-paddingLR-l); position: -webkit-sticky; position: sticky; top: 0; z-index: 1; background-color: var(--td-bg-color-container); } .oneid-table__filter-pop .oneid-table__list-filter-input--sticky .oneid-table__filter-pop-content .oneid-table__filter-pop-content-inner .oneid-radio-group { padding: 0 var(--td-comp-paddingLR-l); } .oneid-table__filter-pop-content-inner > .oneid-input__wrap { width: 200px; } .oneid-table__filter-pop-content-inner > .oneid-date-range-picker__panel { margin: calc(0px - var(--td-comp-margin-l)); } .oneid-table__sort-icon--active { color: var(--td-brand-color); -webkit-transition: 0.2s linear; transition: 0.2s linear; } .oneid-table__double-icons { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .oneid-table__double-icons .oneid-table__sort-icon { position: relative; } .oneid-table__double-icons .oneid-table-sort-asc { top: var(--td-comp-margin-xxs); } .oneid-table__double-icons .oneid-table-sort-desc { bottom: var(--td-comp-margin-xxs); } .oneid-table__filter-icon-wrap { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; pointer-events: all; height: var(--td-font-size-body-large); width: var(--td-font-size-body-large); margin-left: var(--td-comp-margin-s); } .oneid-table--bordered .oneid-table__filter-icon-wrap { -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; } .oneid-table--bordered .oneid-table__cell--sortable.oneid-table__cell--filterable .oneid-table__filter-icon-wrap { -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-flex: 1; -ms-flex: 1; flex: 1; } .oneid-table .oneid-align-center .oneid-table__cell--sortable, .oneid-table .oneid-align-center .oneid-table__cell--filterable { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-pack: distribute; justify-content: space-around; } .oneid-table__expand-box { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; width: 100%; height: 100%; color: var(--td-text-color-placeholder); cursor: pointer; -webkit-transition: all 0.2s cubic-bezier(0.38, 0, 0.24, 1) 0s; transition: all 0.2s cubic-bezier(0.38, 0, 0.24, 1) 0s; } .oneid-table__expand-box:hover { color: var(--td-brand-color); -webkit-transition: 0.2s linear; transition: 0.2s linear; } @-webkit-keyframes tTableProgressbar { 0% { width: 0; } 100% { width: 100%; } } @keyframes tTableProgressbar { 0% { width: 0; } 100% { width: 100%; } } .oneid-table__th-row-select .oneid-table__th-cell-inner { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .oneid-table-expandable-icon-cell + .oneid-table__cell--selectable[key=row-select] { padding-left: var(--td-comp-margin-s); } .oneid-table__filter--bottom-buttons { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; padding: var(--td-comp-paddingTB-l) var(--td-comp-paddingLR-l); border-top: 1px solid var(--td-component-border); } .oneid-table__filter--bottom-buttons > .oneid-button + .oneid-button { margin-left: var(--td-comp-margin-s); } .oneid-table__row-filter-inner { position: -webkit-sticky; position: sticky; left: 0; text-align: center; } .oneid-table__filter-result { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .oneid-table__filter-result > .oneid-button { margin-left: var(--td-comp-margin-s); } .oneid-table--layout-fixed { table-layout: fixed; } .oneid-table--layout-auto { table-layout: auto; } .oneid-table__ellipsis { white-space: nowrap; width: 100%; } .oneid-table__content { overflow: auto; } .oneid-table__content--scrollable-to-left .oneid-table__cell--fixed-left-last::after { border-right: 2px solid var(--td-component-border); } .oneid-table__content--scrollable-to-right .oneid-table__cell--fixed-right-first::after { border-left: 2px solid var(--td-component-border); } .oneid-table--bordered.oneid-table__content--scrollable-to-left .oneid-table__cell--fixed-left-last::after { border-right: 4px solid var(--td-component-border); } .oneid-table--bordered.oneid-table__content--scrollable-to-right .oneid-table__cell--fixed-right-first::after { border-left: 4px solid var(--td-component-border); } .oneid-table__scroll-bar-divider { position: absolute; bottom: 0; right: 0; height: 100%; border-right: 1px solid var(--td-component-border); z-index: 71; } .oneid-table__footer, .oneid-table__header.oneid-table__header--fixed { position: -webkit-sticky; position: sticky; z-index: 50; } .oneid-table:not(.oneid-table--striped) .oneid-table__footer > tr { background-color: var(--td-bg-color-secondarycontainer); } .oneid-table__header--fixed:not(.oneid-table__header--multiple) > tr > th { background-color: var(--td-bg-color-secondarycontainer); } .oneid-table__row--fixed-top, .oneid-table__row--fixed-bottom { position: -webkit-sticky; position: sticky; z-index: 70; } .oneid-table__row--fixed-bottom-first > td { border-top: 1px solid var(--td-component-border); } .oneid-table--bordered .oneid-table__content .oneid-table__row--without-border-bottom > td { border-bottom: 0; } .oneid-table--bordered tbody > tr:last-child > td, .oneid-table--bordered tfoot > tr:last-child > td { border-bottom: 0; } .oneid-table--bordered tfoot > tr:first-child > td { border-top: 1px solid var(--td-component-border); } .oneid-table__header.oneid-table__header--fixed { top: 0; } .oneid-table__footer.oneid-table__footer--fixed { bottom: 0; } .oneid-table--column-fixed .oneid-table__cell--fixed-left-last::before { z-index: -1; background-color: inherit; } .oneid-table--column-fixed .oneid-table__cell--fixed-left-last::after { position: absolute; top: 0; bottom: 0; content: ""; -webkit-transition: -webkit-box-shadow 0.3s; transition: -webkit-box-shadow 0.3s; transition: box-shadow 0.3s; transition: box-shadow 0.3s, -webkit-box-shadow 0.3s; pointer-events: none; z-index: -2; } .oneid-table--column-fixed .oneid-table__cell--fixed-left-last::after { right: 0; -webkit-transform: translateX(100%); transform: translateX(100%); } .oneid-table--column-fixed .oneid-table__cell--fixed-right-first::before { z-index: -1; background-color: inherit; } .oneid-table--column-fixed .oneid-table__cell--fixed-right-first::after { position: absolute; top: 0; bottom: 0; content: ""; -webkit-transition: -webkit-box-shadow 0.3s; transition: -webkit-box-shadow 0.3s; transition: box-shadow 0.3s; transition: box-shadow 0.3s, -webkit-box-shadow 0.3s; pointer-events: none; z-index: -2; } .oneid-table--column-fixed .oneid-table__cell--fixed-right-first::after { left: 0; -webkit-transform: translateX(-100%); transform: translateX(-100%); } .oneid-table--column-fixed .oneid-table__cell--fixed-left, .oneid-table--column-fixed .oneid-table__cell--fixed-right { position: -webkit-sticky; position: sticky; } .oneid-table--column-fixed .oneid-table__cell--fixed-left { z-index: 30; } .oneid-table--column-fixed .oneid-table__cell--fixed-right { z-index: 31; } .oneid-table__empty-row > td { padding: 0; border: 0; } .oneid-table:not(.oneid-table--bordered) .oneid-table__header.oneid-table--bordered > tr:first-child > th { border-top: 1px solid var(--td-component-border); } .oneid-table--multiple-header .oneid-table__header th.oneid-table__header-th--bordered { border-left-width: 1px; } .oneid-table__header.oneid-table__header--multiple > tr { background-color: var(--td-bg-color-container); } .oneid-table__tree-op-icon { margin-right: var(--td-comp-margin-s); cursor: pointer; display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; vertical-align: -3px; } .oneid-table__tree-op-icon:hover { color: var(--td-brand-color); -webkit-transition: 0.2s linear; transition: 0.2s linear; } .oneid-table__tree-leaf-node .oneid-table__tree-op-icon { min-width: 0; margin-right: var(--td-comp-margin-xxs); } .oneid-table__virtual-scroll-cursor { position: absolute; width: 1px; height: 1px; -webkit-transition: -webkit-transform 0.2s; transition: -webkit-transform 0.2s; transition: transform 0.2s; transition: transform 0.2s, -webkit-transform 0.2s; } .oneid-table__virtual-scroll-header { position: absolute; z-index: 51; left: 0; } /** 用于隐藏表头滚动条 */ .oneid-table__affixed-header-elm-wrap { overflow: hidden; } .oneid-table__affixed-header-elm-wrap, .oneid-table__affixed-header-elm { position: absolute; left: 0; z-index: 51; } .oneid-table__affixed-header-elm { overflow: auto; -webkit-transition: opacity 0.2s linear; transition: opacity 0.2s linear; opacity: 1; } .oneid-table__affixed-footer-elm { overflow: auto; z-index: 50; } .oneid-table--bordered .oneid-table__affixed-header-elm { border: 1px solid var(--td-component-border); border-bottom: 0; border-right: 0; } .oneid-table--bordered .oneid-table__affixed-footer-elm { border-left: 1px solid var(--td-component-border); border-bottom: 1px solid var(--td-component-border); } .oneid-table--multiple-header.oneid-table--bordered .oneid-table__affixed-header-elm { border-right: 0; } .oneid-is-hidden { display: none; } .oneid-positive-rotate-90 { -webkit-transform: rotate(90deg); transform: rotate(90deg); } .oneid-negative-rotate-180 { -webkit-transform: rotate(180deg); transform: rotate(180deg); } .oneid-table__expanded-row > td, .oneid-table__row--full > td { padding: 0; } /** @{prefix}-table__row--full 和 @{prefix}-table__row-full-element 同时存在,是为了保证 固定列时,当前行不随内容进行横向滚动 */ .oneid-table__row-full-element { padding: var(--td-comp-paddingTB-m) var(--td-comp-paddingLR-l); } .oneid-table__row-full-inner { position: -webkit-sticky; position: sticky; left: 0; } .oneid-table__row-full-inner:not(.oneid-table__empty) { display: inline-block; } .oneid-table__tree-col { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .oneid-table__tree-col--inline { display: inline; } .oneid-table--full-height { height: 100%; } /** 默认最小高度限制为 Empty 高度加表头高度 */ .oneid-table--loading .oneid-table__content { min-height: 168px; } .oneid-table__handle-draggable:hover, .oneid-table--row-draggable tr, .oneid-table__th--drag-sort { cursor: move; } .oneid-table__ele--draggable-chosen { -webkit-box-shadow: var(--td-shadow-1); box-shadow: var(--td-shadow-1); } .oneid-table:not(.oneid-table--row-edit) .oneid-table__cell--editable { min-height: 22px; line-height: var(--td-line-height-body-medium); cursor: pointer; } .oneid-table:not(.oneid-table--row-edit) .oneid-table__cell--editable .oneid-icon { margin-left: var(--td-comp-margin-s); font-size: var(--td-font-size-body-large); -webkit-transition: 0.2s linear; transition: 0.2s linear; color: var(--td-text-color-placeholder); } .oneid-table:not(.oneid-table--row-edit) .oneid-table__cell--editable .oneid-icon:hover { color: var(--td-brand-color); } .oneid-table:not(.oneid-table--row-edit) .oneid-table__cell--editable:hover { -webkit-transition: 0.2s linear; transition: 0.2s linear; } /** 吸底的分页器,需要背景色,避免表格文本内容显示穿透 */ .oneid-affix .oneid-table__pagination { background-color: var(--td-bg-color-container); } .oneid-table--bordered .oneid-affix .oneid-table__pagination { border-top: 1px solid var(--td-component-border); } .oneid-table__bottom-content + .oneid-table__pagination-wrap .oneid-table__pagination { border: 0; padding: 0; } .oneid-table--column-resizable:not(.oneid-table--bordered) { /** 表格左边有冻结列滚动时,去掉hover表头时多出的一个像素,避免出现表头的冻结列跟表内容的冻结列没有对齐的问题 */ } .oneid-table--column-resizable:not(.oneid-table--bordered) th { border-top: 1px solid transparent; } .oneid-table--column-resizable:not(.oneid-table--bordered) thead.oneid-table__header:hover th:not(:last-child) { border-right: 1px solid var(--td-component-border); } .oneid-table--column-resizable:not(.oneid-table--bordered) thead.oneid-table__header:hover th { border-top: 1px solid var(--td-component-border); } .oneid-table--column-resizable:not(.oneid-table--bordered).oneid-table__content--scrollable-to-left.oneid-table__content--scrollable-to-right thead.oneid-table__header:hover .oneid-table__cell--fixed-left-last:not(:last-child), .oneid-table--column-resizable:not(.oneid-table--bordered).oneid-table__content--scrollable-to-left thead.oneid-table__header:hover .oneid-table__cell--fixed-left-last:not(:last-child) { border-right: 0; } /** 可选中行的场景下,将 Checkbox 和 Radio 铺满整个单元格,增大点击范围,方便用户选中 */ .oneid-table td.oneid-table__cell-check, .oneid-table th.oneid-table__cell-check { padding: 0; /** HTML 特性: th/td 必须设置为 0,他们的子元素才能设置为 100% */ height: 0; } .oneid-table td.oneid-table__cell-check .oneid-radio__label:empty, .oneid-table th.oneid-table__cell-check .oneid-radio__label:empty, .oneid-table td.oneid-table__cell-check .oneid-checkbox__label:empty, .oneid-table th.oneid-table__cell-check .oneid-checkbox__label:empty { display: none; } .oneid-table .oneid-table__cell-check .oneid-radio, .oneid-table .oneid-table__cell-check .oneid-checkbox, .oneid-table .oneid-table__cell-check .oneid-table__th-cell-inner { width: 100%; height: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .oneid-table td .oneid-input__tips { position: initial; } .oneid-table .oneid-table__sort-column { background-color: var(--td-bg-color-secondarycontainer); } .oneid-table__ellipsis-content.oneid-size-s .oneid-popup__content { font: var(--td-font-body-medium); } .oneid-list { font: var(--td-font-body-medium); -webkit-box-sizing: border-box; box-sizing: border-box; margin: 0; padding: 0; list-style: none; overflow: auto; color: var(--td-text-color-primary); background: var(--td-bg-color-container); } @-moz-document url-prefix() { .oneid-list { scrollbar-color: var(--td-scrollbar-color) transparent; scrollbar-width: thin; } } .oneid-list::-webkit-scrollbar { width: 6px; height: 6px; } .oneid-list::-webkit-scrollbar-thumb { border: 0px solid transparent; background-clip: content-box; background-color: var(--td-scrollbar-color); border-radius: 11px; } .oneid-list::-webkit-scrollbar-thumb:vertical:hover, .oneid-list::-webkit-scrollbar-thumb:horizontal:hover { background-color: var(--td-scrollbar-hover-color); } .oneid-list__inner { list-style: none; padding: 0; margin: 0; } .oneid-list-item { font: var(--td-font-body-medium); padding: var(--td-comp-paddingTB-m) var(--td-comp-paddingLR-l); display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -ms-flex-align: center; align-items: center; position: relative; } .oneid-list-item::after { content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 1px; } .oneid-list-item-main { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; width: 100%; -webkit-box-flex: 1; -ms-flex: 1; flex: 1; } .oneid-list-item__meta { display: -webkit-box; display: -ms-flexbox; display: flex; } .oneid-list-item__meta-avatar { width: var(--td-comp-size-xxxl); height: var(--td-comp-size-xxxl); border-radius: calc(var(--td-comp-size-xxxl) / 2); overflow: hidden; background: var(--td-bg-color-page); margin-right: var(--td-comp-margin-l); -ms-flex-negative: 0; flex-shrink: 0; } .oneid-list-item__meta-avatar img { max-width: 100%; width: 100%; height: 100%; } .oneid-list-item__meta-title { padding: 0; font: var(--td-font-title-medium); margin: 0 0 var(--td-comp-margin-s); color: var(--td-text-color-primary); } .oneid-list-item__meta-description { margin-right: var(--td-comp-margin-xxl); color: var(--td-text-color-primary); } .oneid-list-item__action { list-style: none; padding: 0; -ms-flex-negative: 0; flex-shrink: 0; } .oneid-list-item__action > li { display: inline-block; } .oneid-list-item__action > li:not(:last-child) { margin-right: var(--td-comp-margin-l); } .oneid-list-item__action > li .oneid-icon { color: var(--td-text-color-secondary); font-size: var(--td-comp-size-xxxs); } .oneid-list-item__action > li .oneid-icon:hover { color: var(--td-text-color-link); cursor: pointer; } .oneid-list-item__action > li > a { text-decoration: none; color: var(--td-brand-color); } .oneid-list--split .oneid-list-item::after { background: var(--td-border-level-1-color); } .oneid-list--stripe .oneid-list-item:nth-child(even) { background: var(--td-bg-color-secondarycontainer); } .oneid-list--vertical-action .oneid-list-item { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } .oneid-list.oneid-size-s .oneid-list-item { padding: var(--td-comp-paddingTB-s) var(--td-comp-paddingLR-m); } .oneid-list.oneid-size-l .oneid-list-item { padding: var(--td-comp-paddingTB-l) var(--td-comp-paddingLR-xl); } .oneid-list__header, .oneid-list__footer { background: var(--td-bg-color-container); padding: var(--td-comp-paddingTB-m) var(--td-comp-paddingLR-l); } .oneid-list__load { background: var(--td-bg-color-container); text-align: center; line-height: var(--td-line-height-body-medium); } .oneid-list__load > div { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .oneid-list__load:not(:empty) { padding: var(--td-comp-paddingTB-m) var(--td-comp-paddingLR-l); } .oneid-list__load .oneid-loading { font-size: var(--td-comp-size-xxxs); margin-right: var(--td-comp-margin-s); } .oneid-list__load .oneid-loading.oneid-is-load-more { cursor: pointer; } .oneid-tabs { font: var(--td-font-body-medium); color: var(--td-text-color-primary); -webkit-box-sizing: border-box; box-sizing: border-box; margin: 0; padding: 0; list-style: none; overflow: hidden; background-color: var(--td-bg-color-container); } .oneid-tabs__header.oneid-is-left { float: left; } .oneid-tabs__header.oneid-is-right { float: right; } .oneid-tabs__header .oneid-icon { font-size: var(--td-font-size-body-large); } .oneid-tabs__nav { position: relative; overflow: hidden; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .oneid-tabs__operations { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; position: absolute; border-bottom: 1px solid var(--td-component-stroke); background-color: var(--td-bg-color-container); } .oneid-tabs__operations--left { left: 0; z-index: 2; } .oneid-tabs__operations--right { right: 0; z-index: 2; } .oneid-tabs__operations--right .oneid-tabs__btn:first-child { -webkit-box-shadow: -10px 0 20px 5px rgba(0, 0, 0, 0.05); box-shadow: -10px 0 20px 5px rgba(0, 0, 0, 0.05); } .oneid-tabs__operations--right .oneid-tabs__nav-action { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; width: 100%; -webkit-box-flex: 1; -ms-flex: 1; flex: 1; } .oneid-tabs__btn { width: 40px; height: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; background-color: var(--td-bg-color-secondarycontainer); border-left: 1px solid var(--td-component-stroke); cursor: pointer; color: var(--td-text-color-secondary); font: var(--td-font-body-large); -webkit-transition: all 0.24s cubic-bezier(0.38, 0, 0.24, 1); transition: all 0.24s cubic-bezier(0.38, 0, 0.24, 1); z-index: 1; opacity: 1; } .oneid-tabs__btn:hover { background-color: var(--td-bg-color-secondarycontainer-hover); } .oneid-tabs__btn.oneid-size-m { height: var(--td-comp-size-xxl); line-height: var(--td-comp-size-xxl); } .oneid-tabs__btn.oneid-size-l { height: var(--td-comp-size-xxxxl); line-height: var(--td-comp-size-xxxxl); } .oneid-tabs__btn--left { border-right: 1px solid var(--td-component-stroke); -webkit-box-shadow: 10px 0px 20px 5px rgba(0, 0, 0, 0.05); box-shadow: 10px 0px 20px 5px rgba(0, 0, 0, 0.05); } .oneid-tabs__btn--left.fade-enter, .oneid-tabs__btn--left.fade-enter-from, .oneid-tabs__btn--left.fade-leave-to { -webkit-transform: translateX(-50px); transform: translateX(-50px); } .oneid-tabs__btn--right.fade-enter, .oneid-tabs__btn--right.fade-enter-from, .oneid-tabs__btn--right.fade-leave-to { -webkit-transform: translateX(50px); transform: translateX(50px); } .oneid-tabs__nav-container { position: relative; } .oneid-tabs__nav-container.oneid-is-top::after { content: ""; width: 100%; height: 1px; position: absolute; top: auto; right: auto; bottom: 0; left: 0; background-color: var(--td-component-stroke); } .oneid-tabs__nav-container.oneid-is-bottom::after { content: ""; width: 100%; height: 1px; position: absolute; top: 0; right: auto; bottom: auto; left: 0; background-color: var(--td-component-stroke); } .oneid-tabs__nav-container.oneid-is-left::after { content: ""; width: 1px; height: 100%; position: absolute; top: 0; right: 0; bottom: auto; left: auto; background-color: var(--td-component-stroke); } .oneid-tabs__nav-container.oneid-is-right::after { content: ""; width: 1px; height: 100%; position: absolute; top: 0; right: auto; bottom: auto; left: 0; background-color: var(--td-component-stroke); } .oneid-tabs__nav-container.oneid-is-addable { margin-right: 40px; } .oneid-tabs__nav-container.oneid-tabs__nav--card::after { content: ""; background-color: transparent; } .oneid-tabs__scroll-btn { position: absolute; z-index: 1; width: 40px; height: 100%; display: block; background-color: var(--td-bg-color-secondarycontainer); text-align: center; border-bottom: 1px solid var(--td-component-stroke); cursor: pointer; color: var(--td-text-color-secondary); font: var(--td-font-body-large); } .oneid-tabs__scroll-btn.oneid-size-m { height: var(--td-comp-size-xxl); line-height: var(--td-comp-size-xxl); } .oneid-tabs__scroll-btn.oneid-size-l { height: var(--td-comp-size-xxxxl); line-height: var(--td-comp-size-xxxxl); } .oneid-tabs__nav-scroll { position: relative; display: inline-block; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-flex: 1; -ms-flex: auto; flex: auto; -ms-flex-item-align: stretch; align-self: stretch; overflow: hidden; white-space: nowrap; -webkit-transform: translate(0); transform: translate(0); z-index: 1; } .oneid-tabs__nav-wrap { position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; font-size: 0; } .oneid-tabs__nav-wrap.oneid-is-smooth { -webkit-transition: -webkit-transform 0.24s cubic-bezier(0, 0, 0.15, 1); transition: -webkit-transform 0.24s cubic-bezier(0, 0, 0.15, 1); transition: transform 0.24s cubic-bezier(0, 0, 0.15, 1); transition: transform 0.24s cubic-bezier(0, 0, 0.15, 1), -webkit-transform 0.24s cubic-bezier(0, 0, 0.15, 1); } .oneid-tabs__nav-wrap.oneid-is-vertical { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } .oneid-tabs__bar { position: absolute; background-color: var(--td-brand-color); z-index: 1; -webkit-transition: all 0.24s cubic-bezier(0.38, 0, 0.24, 1); transition: all 0.24s cubic-bezier(0.38, 0, 0.24, 1); border-radius: var(--td-radius-small); } .oneid-tabs__bar.oneid-is-top { bottom: 0; left: 0; height: 3px; } .oneid-tabs__bar.oneid-is-bottom { top: 0; left: 0; height: 3px; } .oneid-tabs__bar.oneid-is-left { top: 0; right: 0; width: 3px; } .oneid-tabs__bar.oneid-is-right { top: 0; left: 0; width: 3px; } .oneid-tabs__nav-item { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; font: var(--td-font-body-medium); color: var(--td-text-color-secondary); position: relative; overflow: hidden; z-index: 0; cursor: pointer; -ms-flex-negative: 0; flex-shrink: 0; -webkit-transition: background-color cubic-bezier(0.38, 0, 0.24, 1) 0.2s; transition: background-color cubic-bezier(0.38, 0, 0.24, 1) 0.2s; --ripple-color: var(--td-bg-color-container-active); } .oneid-tabs__nav-item-wrapper { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; height: var(--td-comp-size-m); padding: 0 var(--td-comp-paddingLR-s); margin-left: var(--td-comp-margin-s); margin-right: var(--td-comp-margin-s); border-radius: var(--td-radius-default); -webkit-transition: background-color cubic-bezier(0.38, 0, 0.24, 1) 0.2s; transition: background-color cubic-bezier(0.38, 0, 0.24, 1) 0.2s; --ripple-color: var(--td-bg-color-container-active); } .oneid-tabs__nav-item.oneid-size-l { font: var(--td-font-body-large); } .oneid-tabs__nav-item.oneid-size-l .oneid-tabs__nav-item-wrapper { height: var(--td-comp-size-xxl); padding: 0 var(--td-comp-paddingLR-m); } .oneid-tabs__nav-item-text-wrapper { position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .oneid-tabs__nav-item:not(.oneid-is-disabled):not(.oneid-is-active):hover .oneid-tabs__nav-item-wrapper { background-color: var(--td-bg-color-container-hover); } .oneid-tabs__nav-item.oneid-is-left, .oneid-tabs__nav-item.oneid-is-right { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .oneid-tabs__nav-item.oneid-size-m { height: var(--td-comp-size-xxl); line-height: var(--td-comp-size-xxl); } .oneid-tabs__nav-item.oneid-size-l { height: var(--td-comp-size-xxxxl); line-height: var(--td-comp-size-xxxxl); } .oneid-tabs__nav-item.oneid-is-active { color: var(--td-brand-color); text-shadow: 0 0 0.3px currentcolor; } .oneid-tabs__nav-item.oneid-is-disabled { color: var(--td-text-color-disabled); cursor: not-allowed; } .oneid-tabs__nav-item > .remove-btn { margin-left: var(--td-comp-margin-s); -webkit-transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1); transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1); } .oneid-tabs__nav--card { background-color: var(--td-bg-color-secondarycontainer); } .oneid-tabs__nav--card.oneid-tabs__nav-item { padding-right: var(--td-comp-paddingLR-l); padding-left: var(--td-comp-paddingLR-l); border-bottom: 1px solid var(--td-component-stroke); } .oneid-tabs__nav--card.oneid-tabs__nav-item::after { display: none; } .oneid-tabs__nav--card.oneid-tabs__nav-item:not(.oneid-is-disabled):not(.oneid-is-active):hover { background-color: var(--td-bg-color-secondarycontainer-hover); } .oneid-tabs__nav--card.oneid-tabs__nav-item:not(:first-of-type) { border-left: 1px solid var(--td-component-stroke); } .oneid-tabs__nav--card.oneid-tabs__nav-item:last-of-type { border-right: 1px solid var(--td-component-stroke); } .oneid-tabs__nav--card.oneid-tabs__nav-item.oneid-is-active { color: var(--td-brand-color); background-color: var(--td-bg-color-container); border-bottom-color: var(--td-bg-color-container); } .oneid-tabs__nav--card.oneid-tabs__nav-item.oneid-size-l { padding-left: var(--td-comp-paddingLR-xl); padding-right: var(--td-comp-paddingLR-xl); } .oneid-tabs__nav--card .oneid-icon-close { color: var(--td-text-color-secondary); -webkit-transition: color cubic-bezier(0.38, 0, 0.24, 1) 0.2s; transition: color cubic-bezier(0.38, 0, 0.24, 1) 0.2s; } .oneid-tabs__nav--card .oneid-icon-close:hover { color: var(--td-text-color-primary); } .oneid-tabs__content { overflow: hidden; position: relative; } .oneid-tab-panel.oneid-is-hidden { display: none; } .oneid-notification { color: var(--td-text-color-primary); margin: 0; padding: 0; list-style: none; font: var(--td-font-body-medium); outline: 0; border: 0; background-color: var(--td-bg-color-container); display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-shadow: var(--td-shadow-2), var(--td-shadow-inset-top), var(--td-shadow-inset-right), var(--td-shadow-inset-bottom), var(--td-shadow-inset-left); box-shadow: var(--td-shadow-2), var(--td-shadow-inset-top), var(--td-shadow-inset-right), var(--td-shadow-inset-bottom), var(--td-shadow-inset-left); -webkit-box-sizing: border-box; box-sizing: border-box; border-radius: var(--td-radius-medium); width: 360px; padding: var(--td-comp-paddingTB-l) var(--td-comp-paddingLR-l); } .oneid-notification__icon { width: calc(var(--td-font-size-body-large) + 8px); text-align: center; margin-right: var(--td-comp-margin-s); } .oneid-notification__icon .oneid-icon { font-size: calc(var(--td-font-size-body-large) + 8px); } .oneid-notification .oneid-icon.oneid-is-info { color: var(--td-brand-color); } .oneid-notification .oneid-icon.oneid-is-success { color: var(--td-success-color); } .oneid-notification .oneid-icon.oneid-is-warning { color: var(--td-warning-color); } .oneid-notification .oneid-icon.oneid-is-error { color: var(--td-error-color-6); } .oneid-notification__main { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; } .oneid-notification__title__wrap { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } .oneid-notification__title { font: var(--td-font-title-medium); color: var(--td-text-color-primary); } .oneid-notification .oneid-icon-close { cursor: pointer; font-size: var(--td-font-size-body-large); border-radius: var(--td-radius-default); color: var(--td-text-color-secondary); } .oneid-notification .oneid-icon-close:hover { background: var(--td-bg-color-container-hover); } .oneid-notification .oneid-icon-close:active { background: var(--td-bg-color-container-active); } .oneid-notification__content { font: var(--td-font-body-medium); color: var(--td-text-color-secondary); margin-top: var(--td-comp-margin-s); max-height: 66px; overflow: hidden; text-overflow: ellipsis; word-break: break-all; /* stylelint-disable-next-line */ display: -webkit-box; -webkit-line-clamp: 3; /* stylelint-disable-next-line */ -webkit-box-orient: vertical; } .oneid-notification__detail { margin-top: var(--td-comp-margin-l); text-align: right; font: var(--td-font-body-medium); } .oneid-notification__detail-item { cursor: pointer; } .oneid-notification__detail-item:hover { color: inherit; background: var(--td-bg-color-container-hover); } .oneid-notification__detail-item:active { color: inherit; background: var(--td-bg-color-container-active); } .oneid-notification__detail-item + .oneid-notification__detail-item { margin-left: var(--td-comp-margin-s); } .oneid-notification__detail-item.oneid-is-active { color: var(--td-brand-color); } .oneid-notification__show--top-left { position: fixed; top: 0; left: 0; } .oneid-notification__show--top-left > .oneid-notification { -webkit-animation-duration: 0.3s; animation-duration: 0.3s; -webkit-animation-name: slidein-top-left; animation-name: slidein-top-left; } @-webkit-keyframes slidein-top-left { from { opacity: 0; -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); } to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @keyframes slidein-top-left { from { opacity: 0; -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); } to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } .oneid-notification__show--top-right { position: fixed; top: 0; right: 0; } .oneid-notification__show--top-right > .oneid-notification { -webkit-animation-duration: 0.3s; animation-duration: 0.3s; -webkit-animation-name: slidein-top-right; animation-name: slidein-top-right; } @-webkit-keyframes slidein-top-right { from { opacity: 0; -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); } to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @keyframes slidein-top-right { from { opacity: 0; -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); } to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } .oneid-notification__show--bottom-left { position: fixed; bottom: 0; left: 0; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: reverse; -ms-flex-direction: column-reverse; flex-direction: column-reverse; } .oneid-notification__show--bottom-left > .oneid-notification { -webkit-animation-duration: 0.3s; animation-duration: 0.3s; -webkit-animation-name: slidein-bottom-left; animation-name: slidein-bottom-left; } @-webkit-keyframes slidein-bottom-left { from { opacity: 0; -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); } to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @keyframes slidein-bottom-left { from { opacity: 0; -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); } to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } .oneid-notification__show--bottom-right { position: fixed; bottom: 0; right: 0; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: reverse; -ms-flex-direction: column-reverse; flex-direction: column-reverse; } .oneid-notification__show--bottom-right > .oneid-notification { -webkit-animation-duration: 0.3s; animation-duration: 0.3s; -webkit-animation-name: slidein-bottom-right; animation-name: slidein-bottom-right; } @-webkit-keyframes slidein-bottom-right { from { opacity: 0; -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); } to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @keyframes slidein-bottom-right { from { opacity: 0; -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); } to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } .oneid-notification-list__show { position: fixed; } a.oneid-menu__item { text-decoration: none; color: unset; } a.oneid-menu__item:hover, a.oneid-menu__item:active { color: inherit; } .oneid-menu__logo > * { margin-left: var(--td-comp-margin-xxl); } .oneid-head-menu { font: var(--td-font-body-medium); color: var(--td-text-color-primary); -webkit-box-sizing: border-box; box-sizing: border-box; margin: 0; padding: 0; list-style: none; position: relative; width: 100%; background-color: var(--td-bg-color-container); } .oneid-head-menu__inner { display: -webkit-box; display: -ms-flexbox; display: flex; height: var(--td-comp-size-xxxl); } .oneid-head-menu__inner li + li { margin-left: var(--td-comp-margin-s); } .oneid-head-menu__inner .oneid-menu:first-child { margin-left: var(--td-comp-margin-xxl); } .oneid-head-menu .oneid-menu__logo:not(:empty) { height: 100%; margin-right: var(--td-comp-margin-xxxl); } .oneid-head-menu .oneid-menu { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .oneid-head-menu .oneid-menu__operations:not(:empty) { position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; height: var(--td-comp-size-xxxl); line-height: 64px; text-align: right; margin-right: var(--td-comp-margin-s); overflow: hidden; } .oneid-head-menu .oneid-menu__operations-icon { width: var(--td-comp-size-m); height: var(--td-comp-size-m); padding: var(--td-comp-paddingTB-s) var(--td-comp-paddingLR-s); line-height: var(--td-comp-size-m); -webkit-box-sizing: border-box; box-sizing: border-box; } .oneid-head-menu .oneid-submenu > .oneid-menu__item { overflow: unset; } .oneid-head-menu .oneid-submenu > .oneid-menu__item::before { content: ""; display: block; position: absolute; bottom: -20px; left: 0; right: 0; height: 20px; } .oneid-head-menu .oneid-menu__item { height: var(--td-comp-size-m); line-height: var(--td-comp-size-m); padding: 0 var(--td-comp-paddingLR-l); -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-transition: all 0.28s cubic-bezier(0.645, 0.045, 0.355, 1); transition: all 0.28s cubic-bezier(0.645, 0.045, 0.355, 1); gap: var(--td-comp-margin-m); } .oneid-head-menu__submenu { border-top: 1px solid var(--td-component-stroke); padding-left: 0; } .oneid-default-menu { font: var(--td-font-body-medium); color: var(--td-text-color-primary); -webkit-box-sizing: border-box; box-sizing: border-box; margin: 0; padding: 0; list-style: none; position: relative; width: 232px; display: inline-block; background: var(--td-bg-color-container); -webkit-transition: width 0.28s cubic-bezier(0.645, 0.045, 0.355, 1); transition: width 0.28s cubic-bezier(0.645, 0.045, 0.355, 1); white-space: nowrap; } .oneid-default-menu .oneid-menu__item { color: var(--td-text-color-secondary); } .oneid-default-menu.oneid-is-collapsed { width: 64px; } .oneid-default-menu.oneid-is-collapsed .oneid-menu__logo > * { margin-left: var(--td-comp-margin-l); } .oneid-default-menu.oneid-is-collapsed .oneid-menu .oneid-menu__item { padding: 0 14px; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .oneid-default-menu.oneid-is-collapsed .oneid-menu .oneid-menu__item .oneid-menu__item-link { margin-left: 0; opacity: 0; content: ""; position: absolute; top: 0; bottom: 0; left: 0; right: 0; } .oneid-default-menu.oneid-is-collapsed .oneid-fake-arrow { display: none; } .oneid-default-menu.oneid-is-collapsed .oneid-menu__item { text-overflow: initial; } .oneid-default-menu.oneid-is-collapsed .oneid-menu__item.oneid-is-active.oneid-is-opened { color: var(--td-brand-color); background-color: var(--td-brand-color-light); } .oneid-default-menu.oneid-is-collapsed .oneid-menu__item.oneid-is-active.oneid-is-opened .oneid-icon { color: var(--td-brand-color); } .oneid-default-menu.oneid-is-collapsed .oneid-menu__item.oneid-menu__item--plain::after { content: ""; } .oneid-default-menu.oneid-is-collapsed .oneid-menu__item span { display: none; } .oneid-default-menu.oneid-is-collapsed .oneid-menu__item .oneid-icon { margin-right: initial; } .oneid-default-menu.oneid-is-collapsed .oneid-submenu-icon { display: none; } .oneid-default-menu.oneid-is-collapsed .oneid-submenu > .oneid-menu__item { min-width: initial; } .oneid-default-menu.oneid-is-collapsed .oneid-submenu > .oneid-menu__item::after { content: ""; display: block; position: absolute; right: -20px; top: 0; bottom: 0; width: 20px; } .oneid-default-menu.oneid-is-collapsed .oneid-menu-group:first-child .oneid-menu-group__title { display: none; } .oneid-default-menu.oneid-is-collapsed .oneid-menu-group:first-child .oneid-menu-group__title + * { margin-top: 0; } .oneid-default-menu.oneid-is-collapsed .oneid-menu-group__title { padding: 0; font-size: 0; } .oneid-default-menu.oneid-is-collapsed .oneid-menu-group__title::after { content: ""; display: block; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); height: 1px; width: 20px; background: var(--td-component-stroke); } .oneid-default-menu.oneid-is-collapsed .oneid-menu__operations { text-align: center; } .oneid-default-menu.oneid-is-collapsed .oneid-menu__operations-icon { display: block; } .oneid-default-menu.oneid-is-collapsed .oneid-menu__log > * { margin: 0 auto; } .oneid-default-menu__inner { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; height: 100%; } .oneid-default-menu__inner .oneid-menu__logo:not(:empty) { -webkit-box-sizing: border-box; box-sizing: border-box; width: 100%; height: var(--td-comp-size-xxxl); border-bottom: 1px solid var(--td-component-stroke); } .oneid-default-menu__inner .oneid-menu { padding: var(--td-comp-paddingTB-l) var(--td-comp-paddingLR-s); position: relative; -webkit-box-flex: 1; -ms-flex: 1; flex: 1; } .oneid-default-menu__inner .oneid-menu--scroll { overflow-y: auto; overflow-x: hidden; } @-moz-document url-prefix() { .oneid-default-menu__inner .oneid-menu--scroll { scrollbar-color: var(--td-scrollbar-color) transparent; scrollbar-width: thin; } } .oneid-default-menu__inner .oneid-menu--scroll::-webkit-scrollbar { width: 6px; height: 6px; } .oneid-default-menu__inner .oneid-menu--scroll::-webkit-scrollbar-thumb { border: 0px solid transparent; background-clip: content-box; background-color: var(--td-scrollbar-color); border-radius: 11px; } .oneid-default-menu__inner .oneid-menu--scroll::-webkit-scrollbar-thumb:vertical:hover, .oneid-default-menu__inner .oneid-menu--scroll::-webkit-scrollbar-thumb:horizontal:hover { background-color: var(--td-scrollbar-hover-color); } .oneid-default-menu__inner .oneid-menu > *:not(.oneid-menu-group):not(:first-child) { margin-top: var(--td-comp-margin-xs); } .oneid-default-menu__inner .oneid-menu .oneid-menu-group > *:not(:first-child), .oneid-default-menu__inner .oneid-menu .oneid-menu__sub > *:not(:first-child), .oneid-default-menu__inner .oneid-menu .oneid-submenu > *:not(:first-child) { margin-top: var(--td-comp-margin-xs); } .oneid-default-menu__inner .oneid-menu-group__title { position: relative; padding: var(--td-comp-paddingTB-l) var(--td-comp-paddingLR-l) var(--td-comp-paddingTB-xs) var(--td-comp-paddingLR-l); color: var(--td-text-color-placeholder); font-size: var(--td-font-body-small); -webkit-box-sizing: border-box; box-sizing: border-box; } .oneid-default-menu .oneid-submenu { position: relative; } .oneid-default-menu .oneid-menu__operations:not(:empty) { width: 100%; position: relative; padding: var(--td-comp-paddingTB-s) var(--td-comp-paddingLR-l); top: 0; left: 0; text-align: left; border-top: solid 1px var(--td-component-stroke); -webkit-box-sizing: border-box; box-sizing: border-box; } .oneid-default-menu .oneid-menu__operations-icon { width: 32px; height: 32px; padding: var(--td-comp-paddingTB-s) var(--td-comp-paddingLR-s); cursor: pointer; color: var(--td-text-color-primary); -webkit-box-sizing: border-box; box-sizing: border-box; } .oneid-default-menu .oneid-menu__item.oneid-is-opened { color: var(--td-text-color-primary); background-color: unset; } .oneid-default-menu .oneid-menu__item.oneid-is-opened .oneid-icon { color: var(--td-text-color-primary); } .oneid-default-menu .oneid-menu__sub { padding: 0; overflow: hidden; } .oneid-default-menu .oneid-menu__sub .oneid-menu__item { padding-left: var(--padding-left, 32px); } .oneid-default-menu .oneid-slide-down-enter-active .oneid-menu__sub { height: 100%; } .oneid-default-menu .oneid-menu__item { position: relative; padding: 0 10px 0 16px; height: var(--td-comp-size-l); line-height: var(--td-comp-size-l); border-bottom: 0; text-align: left; border-radius: var(--td-radius-default); -webkit-transition: background-color 0.28s cubic-bezier(0.38, 0, 0.24, 1), padding 0.28s cubic-bezier(0.38, 0, 0.24, 1); transition: background-color 0.28s cubic-bezier(0.38, 0, 0.24, 1), padding 0.28s cubic-bezier(0.38, 0, 0.24, 1); -webkit-box-sizing: border-box; box-sizing: border-box; } .oneid-default-menu .oneid-menu__item .oneid-icon { width: 20px; height: 20px; -ms-flex-negative: 0; flex-shrink: 0; margin-right: var(--td-comp-margin-s); } .oneid-default-menu .oneid-menu__item .oneid-fake-arrow { margin-left: auto; min-width: 16px; } .oneid-default-menu .oneid-menu__item.oneid-is-active:not(.oneid-is-opened) { color: var(--td-brand-color); background-color: var(--td-brand-color-light); } .oneid-default-menu .oneid-menu__item.oneid-is-active:not(.oneid-is-opened) .oneid-icon { color: var(--td-brand-color); } .oneid-default-menu .oneid-menu__item:hover:not(.oneid-is-active):not(.oneid-is-disabled) { background: var(--td-bg-color-secondarycontainer-hover); } .oneid-default-menu.oneid-menu--dark { background: var(--td-gray-color-13); } .oneid-default-menu.oneid-menu--dark .oneid-menu__item { color: var(--td-font-white-2); } .oneid-default-menu.oneid-menu--dark .oneid-menu__logo:not(:empty) { border-bottom-color: var(--td-gray-color-10); } .oneid-default-menu.oneid-menu--dark .oneid-menu__operations:not(:empty) { border-top-color: var(--td-gray-color-10); } .oneid-default-menu.oneid-menu--dark .oneid-menu__item:hover:not(.oneid-is-active):not(.oneid-is-disabled) { background-color: var(--td-gray-color-10); } .oneid-default-menu.oneid-menu--dark .oneid-menu__item.oneid-is-active:not(.oneid-is-opened) { color: var(--td-text-color-anti); background-color: var(--td-brand-color); } .oneid-default-menu.oneid-menu--dark .oneid-menu__item.oneid-is-active:not(.oneid-is-opened) .oneid-icon { color: var(--td-text-color-anti); } .oneid-default-menu.oneid-menu--dark .oneid-menu__item.oneid-is-opened.oneid-is-active { background-color: transparent; } .oneid-default-menu.oneid-menu--dark .oneid-menu-group__title { color: var(--td-font-white-3); } .oneid-default-menu.oneid-menu--dark.oneid-is-collapsed .oneid-menu-group__title:after { background-color: var(--td-gray-color-10); } .oneid-default-menu.oneid-menu--dark.oneid-is-collapsed .oneid-menu__item.oneid-is-active.oneid-is-opened { background-color: var(--td-brand-color); color: var(--td-text-color-anti); } .oneid-default-menu.oneid-menu--dark.oneid-is-collapsed .oneid-menu__item.oneid-is-active.oneid-is-opened .oneid-icon { color: var(--td-text-color-anti); } .oneid-menu { color: var(--td-text-color-primary); font: var(--td-font-body-medium); list-style: none; padding: 0; margin: 0; } .oneid-menu--dark { color: var(--td-font-white-2); } .oneid-menu__logo:not(:empty) { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .oneid-menu .oneid-submenu { position: relative; } .oneid-menu .oneid-submenu.oneid-is-active > .oneid-menu__item { color: var(--td-gray-color-13); } .oneid-menu .oneid-submenu.oneid-is-active > .oneid-menu__item .oneid-icon { color: var(--td-gray-color-13); } .oneid-menu .oneid-submenu .oneid-submenu-icon { width: 16px; height: 16px; } .oneid-menu .oneid-submenu.oneid-is-opened .oneid-submenu-icon { -webkit-transform: scaleY(-1); transform: scaleY(-1); } .oneid-menu__spacer::before { content: ""; display: block; position: absolute; z-index: 1; } .oneid-menu__spacer--left::before { left: -16px; width: 16px; top: 0; bottom: 0; } .oneid-menu__spacer--top::before { top: -20px; left: 0; right: 0; height: 20px; } .oneid-menu__item { position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; height: 40px; line-height: 40px; text-align: center; color: var(--td-text-color-primary); cursor: pointer; text-overflow: ellipsis; border-radius: var(--td-radius-default); --ripple-color: var(--td-bg-color-container-active); } .oneid-menu__item ::-moz-selection { background: transparent; } .oneid-menu__item ::selection { background: transparent; } .oneid-menu__item-spacer { overflow: unset; } .oneid-menu__item-spacer::before { content: ""; display: block; position: absolute; z-index: 1; } .oneid-menu__item-spacer--right::before { right: -16px; width: 16px; top: 0; bottom: 0; } .oneid-menu__item-spacer--bottom::before { bottom: -20px; left: 0; right: 0; height: 20px; } .oneid-menu__item a { color: unset; text-decoration: none; } .oneid-menu__item a.oneid-menu__item-link { color: unset; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; } .oneid-menu__item a.oneid-menu__item-link::before { content: ""; position: absolute; top: 0; bottom: 0; left: 0; right: 0; } .oneid-menu__item.oneid-is-active { color: var(--td-brand-color); background-color: var(--td-brand-color-light); } .oneid-menu__item.oneid-is-opened { color: var(--td-brand-color); } .oneid-menu__item:hover:not(.oneid-is-active):not(.oneid-is-opened):not(.oneid-is-disabled) { background-color: var(--td-bg-color-container-hover); } .oneid-menu__item.oneid-is-disabled { color: var(--td-text-color-disabled); cursor: not-allowed; } .oneid-menu__content { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .oneid-menu--dark.oneid-head-menu { background-color: var(--td-gray-color-13); } .oneid-menu--dark .oneid-menu__item { color: var(--td-text-color-anti); --ripple-color: var(--td-gray-color-11); } .oneid-menu--dark .oneid-menu__item.oneid-is-active { color: var(--td-text-color-anti); background-color: var(--td-brand-color); } .oneid-menu--dark .oneid-menu__item.oneid-is-opened { color: var(--td-text-color-anti); } .oneid-menu--dark .oneid-menu__item.oneid-is-opened .oneid-icon { color: var(--td-text-color-anti); } .oneid-menu--dark .oneid-menu__item.oneid-is-disabled { color: var(--td-font-white-4); } .oneid-menu--dark .oneid-menu__item:hover:not(.oneid-is-active):not(.oneid-is-opened):not(.oneid-is-disabled) { background-color: var(--td-gray-color-10); } .oneid-menu--dark .oneid-menu__popup { background: var(--td-gray-color-13); border: solid 0.5px var(--td-gray-color-10); } .oneid-menu--dark .oneid-menu__popup .oneid-menu__item { color: var(--td-text-color-anti); border-radius: var(--td-radius-default); } .oneid-menu--dark .oneid-menu__popup .oneid-menu__item.oneid-is-active { color: var(--td-text-color-anti); background-color: var(--td-brand-color); } .oneid-menu--dark .oneid-menu__popup .oneid-menu__item:hover:not(.oneid-is-active) { background-color: var(--td-gray-color-10); } .oneid-menu--dark .oneid-head-menu__submenu { border-top: 1px solid transparent; } .oneid-menu--dark .oneid-menu__operations-icon { color: var(--td-bg-color-container); } .oneid-menu--dark .oneid-menu__operations-icon:hover { background-color: var(--td-brand-color); } .oneid-menu__popup { overflow: hidden; background: var(--td-bg-color-container); z-index: 1000; border-radius: var(--td-radius-medium); opacity: 0; list-style: none; padding: 0; margin: 0; } .oneid-menu__popup.oneid-popup__content { position: absolute; } .oneid-menu__popup-wrapper { padding: var(--td-pop-padding-m); height: 100%; list-style: none; margin: 0; } @-moz-document url-prefix() { .oneid-menu__popup-wrapper { scrollbar-color: var(--td-scrollbar-color) transparent; scrollbar-width: thin; } } .oneid-menu__popup-wrapper::-webkit-scrollbar { width: 8px; height: 8px; } .oneid-menu__popup-wrapper::-webkit-scrollbar-thumb { border: 2px solid transparent; background-clip: content-box; background-color: var(--td-scrollbar-color); border-radius: 15px; } .oneid-menu__popup-wrapper::-webkit-scrollbar-thumb:vertical:hover, .oneid-menu__popup-wrapper::-webkit-scrollbar-thumb:horizontal:hover { background-color: var(--td-scrollbar-hover-color); } .oneid-menu__popup .oneid-fake-arrow { margin-left: auto; } .oneid-menu__popup .oneid-menu__item { padding-left: var(--td-comp-paddingLR-l); padding-right: var(--td-comp-paddingLR-l); } .oneid-menu__popup.oneid-is-vertical { min-width: var(--popup-width, 160px); } .oneid-menu__popup.oneid-is-horizontal .oneid-menu__item { white-space: nowrap; } .oneid-menu__popup.oneid-is-horizontal li + li { margin-top: var(--td-comp-margin-xs); } .oneid-menu__popup.oneid-is-opened { opacity: 1; -webkit-box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.1), 0 8px 10px 1px rgba(0, 0, 0, 0.06), 0 3px 14px 6px rgba(0, 0, 0, 0.05); box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.1), 0 8px 10px 1px rgba(0, 0, 0, 0.06), 0 3px 14px 6px rgba(0, 0, 0, 0.05); overflow: visible; } .oneid-menu__popup .oneid-menu__item { color: var(--td-text-color-primary); height: var(--td-comp-size-s); line-height: var(--td-comp-size-s); } .oneid-menu__popup .oneid-menu__item + .oneid-menu__item { margin-left: 0; } .oneid-menu__popup .oneid-menu__item:hover:not(.oneid-is-active) { background-color: var(--td-bg-color-container-hover); } .oneid-menu__popup .oneid-is-disabled { color: var(--td-text-color-disabled); } .oneid-menu__operations-icon { margin-right: var(--td-comp-margin-l); border-radius: var(--td-radius-default); color: var(--td-text-color-primary); -webkit-transition: background-color 0.24s cubic-bezier(0.38, 0, 0.24, 1); transition: background-color 0.24s cubic-bezier(0.38, 0, 0.24, 1); } .oneid-menu__operations-icon:hover { background-color: var(--td-brand-color-light); } .oneid-opacity-transition { -webkit-transition: opacity 0.28s cubic-bezier(0.55, 0, 0.1, 1); transition: opacity 0.28s cubic-bezier(0.55, 0, 0.1, 1); } .horizontal-collapse-transition .oneid-submenu__title .oneid-submenu__icon-arrow { -webkit-transition: 0.2s; transition: 0.2s; opacity: 0; } .oneid-menu__popup { top: 0; left: calc(100% - var(--td-pop-padding-m)); } .oneid-menu__popup .oneid-menu__item:not(:first-child), .oneid-menu__popup .oneid-submenu:not(:first-child) { margin-top: var(--td-comp-margin-xxs); } .oneid-is-head-menu .oneid-menu__popup { margin-top: calc((var(--td-comp-size-xxxl) - var(--td-comp-size-m)) / 2) !important; } .oneid-menu-is-nested .oneid-menu__popup { margin-top: calc(0px - var(--td-pop-padding-m)) !important; } @-webkit-keyframes tDialogZoomIn { 0% { opacity: 0; -webkit-transform: scale(0.01); transform: scale(0.01); } 100% { opacity: 1; } } @keyframes tDialogZoomIn { 0% { opacity: 0; -webkit-transform: scale(0.01); transform: scale(0.01); } 100% { opacity: 1; } } @-webkit-keyframes tDialogZoomOut { from { opacity: 1; } to { opacity: 0; -webkit-transform: scale(0.01); transform: scale(0.01); } } @keyframes tDialogZoomOut { from { opacity: 1; } to { opacity: 0; -webkit-transform: scale(0.01); transform: scale(0.01); } } @-webkit-keyframes tDialogMaskIn { from { opacity: 0; } to { opacity: 1; } } @keyframes tDialogMaskIn { from { opacity: 0; } to { opacity: 1; } } @-webkit-keyframes tDialogMaskOut { from { opacity: 1; } to { opacity: 0; } } @keyframes tDialogMaskOut { from { opacity: 1; } to { opacity: 0; } } .oneid-dialog-zoom .animation-enter { -webkit-animation-duration: 0.2s; animation-duration: 0.2s; -webkit-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-timing-function: cubic-bezier(0, 0, 0.15, 1); animation-timing-function: cubic-bezier(0, 0, 0.15, 1); -webkit-animation-play-state: paused; animation-play-state: paused; } .oneid-dialog-zoom .animation-exit { -webkit-animation-duration: 0.2s; animation-duration: 0.2s; -webkit-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-timing-function: cubic-bezier(0.38, 0, 0.24, 1); animation-timing-function: cubic-bezier(0.38, 0, 0.24, 1); -webkit-animation-play-state: paused; animation-play-state: paused; } .oneid-dialog-zoom .animation-active { -webkit-animation-play-state: running; animation-play-state: running; -webkit-animation-fill-mode: both; animation-fill-mode: both; } .oneid-dialog-zoom-enter, .oneid-dialog-zoom-enter-from, .oneid-dialog-zoom-appear { -webkit-animation-duration: 0.2s; animation-duration: 0.2s; -webkit-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-timing-function: cubic-bezier(0, 0, 0.15, 1); animation-timing-function: cubic-bezier(0, 0, 0.15, 1); -webkit-animation-play-state: paused; animation-play-state: paused; } .oneid-dialog-zoom-exit { -webkit-animation-duration: 0.2s; animation-duration: 0.2s; -webkit-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-timing-function: cubic-bezier(0.38, 0, 0.24, 1); animation-timing-function: cubic-bezier(0.38, 0, 0.24, 1); -webkit-animation-play-state: paused; animation-play-state: paused; } .oneid-dialog-zoom-enter-active, .oneid-dialog-zoom-appear-active { -webkit-animation-name: tDialogZoomIn; animation-name: tDialogZoomIn; -webkit-animation-play-state: running; animation-play-state: running; -webkit-animation-fill-mode: both; animation-fill-mode: both; } .oneid-dialog-zoom-exit-active { -webkit-animation-name: tDialogZoomOut; animation-name: tDialogZoomOut; -webkit-animation-play-state: running; animation-play-state: running; -webkit-animation-fill-mode: both; animation-fill-mode: both; } .oneid-dialog-zoom__vue-enter-active .oneid-dialog { -webkit-animation-name: tDialogZoomIn; animation-name: tDialogZoomIn; -webkit-animation-duration: 0.2s; animation-duration: 0.2s; -webkit-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-timing-function: cubic-bezier(0, 0, 0.15, 1); animation-timing-function: cubic-bezier(0, 0, 0.15, 1); -webkit-animation-play-state: paused; animation-play-state: paused; } .oneid-dialog-zoom__vue-enter-active .oneid-dialog__mask { -webkit-animation-name: tDialogMaskIn; animation-name: tDialogMaskIn; -webkit-animation-duration: 0.2s; animation-duration: 0.2s; -webkit-animation-timing-function: linear; animation-timing-function: linear; -webkit-animation-play-state: running; animation-play-state: running; -webkit-animation-fill-mode: both; animation-fill-mode: both; } .oneid-dialog-zoom__vue-leave-active .oneid-dialog { -webkit-animation-name: tDialogZoomOut; animation-name: tDialogZoomOut; -webkit-animation-duration: 0.2s; animation-duration: 0.2s; -webkit-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-timing-function: cubic-bezier(0.38, 0, 0.24, 1); animation-timing-function: cubic-bezier(0.38, 0, 0.24, 1); -webkit-animation-play-state: paused; animation-play-state: paused; } .oneid-dialog-zoom__vue-leave-active .oneid-dialog__mask { -webkit-animation-name: tDialogMaskOut; animation-name: tDialogMaskOut; -webkit-animation-duration: 0.2s; animation-duration: 0.2s; -webkit-animation-timing-function: linear; animation-timing-function: linear; -webkit-animation-play-state: running; animation-play-state: running; -webkit-animation-fill-mode: both; animation-fill-mode: both; } .oneid-dialog-zoom__vue-enter-to .oneid-dialog { -webkit-animation-play-state: running; animation-play-state: running; -webkit-animation-fill-mode: both; animation-fill-mode: both; } .oneid-dialog-zoom__vue-leave-to .oneid-dialog { -webkit-animation-play-state: running; animation-play-state: running; -webkit-animation-fill-mode: both; animation-fill-mode: both; } .oneid-dialog-fade-enter, .oneid-dialog-fade-appear { opacity: 0; -webkit-animation-duration: 0.2s; animation-duration: 0.2s; -webkit-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-timing-function: cubic-bezier(0, 0, 0.15, 1); animation-timing-function: cubic-bezier(0, 0, 0.15, 1); -webkit-animation-play-state: paused; animation-play-state: paused; } .oneid-dialog-fade-exit { -webkit-animation-duration: 0.2s; animation-duration: 0.2s; -webkit-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-timing-function: cubic-bezier(0, 0, 0.15, 1); animation-timing-function: cubic-bezier(0, 0, 0.15, 1); -webkit-animation-play-state: paused; animation-play-state: paused; } .oneid-dialog-fade-enter.oneid-dialog-fade-enter-active, .oneid-dialog-fade-appear.oneid-dialog-fade-appear-active { -webkit-animation-name: tDialogFadeIn; animation-name: tDialogFadeIn; -webkit-animation-play-state: running; animation-play-state: running; } .oneid-dialog-fade-exit.oneid-dialog-fade-exit-active { -webkit-animation-name: tDialogFadeOut; animation-name: tDialogFadeOut; -webkit-animation-play-state: running; animation-play-state: running; } @-webkit-keyframes tDialogFadeIn { 0% { opacity: 0; } 100% { opacity: 1; } } @keyframes tDialogFadeIn { 0% { opacity: 0; } 100% { opacity: 1; } } @-webkit-keyframes tDialogFadeOut { 0% { opacity: 1; } 100% { opacity: 0; } } @keyframes tDialogFadeOut { 0% { opacity: 1; } 100% { opacity: 0; } } .oneid-dialog { font: var(--td-font-body-medium); color: var(--td-text-color-primary); -webkit-box-sizing: border-box; box-sizing: border-box; margin: 0; padding: 0; list-style: none; width: 480px; background-color: var(--td-bg-color-container); position: relative; border: 1px solid var(--td-border-level-1-color); border-radius: var(--td-radius-large); } .oneid-dialog .oneid-icon.oneid-is-info { color: var(--td-brand-color); } .oneid-dialog .oneid-icon.oneid-is-success { color: var(--td-success-color); } .oneid-dialog .oneid-icon.oneid-is-warning { color: var(--td-warning-color); } .oneid-dialog .oneid-icon.oneid-is-error { color: var(--td-error-color); } .oneid-dialog--lock { overflow: hidden; } .oneid-dialog__header { color: var(--td-text-color-primary); font: var(--td-font-title-medium); font-weight: 600; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; word-break: break-word; gap: var(--td-comp-margin-s); -webkit-box-sizing: border-box; box-sizing: border-box; } .oneid-dialog__header .oneid-dialog__header-content { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; width: 100%; } .oneid-dialog__header .oneid-icon:not(.oneid-icon-close) { font-size: calc(var(--td-font-size-body-large) + 8px); display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; margin-right: var(--td-comp-margin-s); -ms-flex-negative: 0; flex-shrink: 0; } .oneid-dialog__header--fullscreen { background-color: var(--td-bg-color-secondarycontainer); min-height: var(--td-comp-size-xxxl); -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; padding: 0 var(--td-comp-paddingLR-xxl); } .oneid-dialog__header--fullscreen .oneid-dialog__header-content { -webkit-box-sizing: border-box; box-sizing: border-box; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .oneid-dialog__body { color: var(--td-text-color-secondary); font: var(--td-font-body-medium); overflow: auto; padding: var(--td-comp-paddingTB-l) 0; word-break: break-word; } @-moz-document url-prefix() { .oneid-dialog__body { scrollbar-color: var(--td-scrollbar-color) transparent; scrollbar-width: thin; } } .oneid-dialog__body::-webkit-scrollbar { width: 6px; height: 6px; } .oneid-dialog__body::-webkit-scrollbar-thumb { border: 0px solid transparent; background-clip: content-box; background-color: var(--td-scrollbar-color); border-radius: 11px; } .oneid-dialog__body::-webkit-scrollbar-thumb:vertical:hover, .oneid-dialog__body::-webkit-scrollbar-thumb:horizontal:hover { background-color: var(--td-scrollbar-hover-color); } .oneid-dialog__body__icon, .oneid-dialog__body--icon { padding: var(--td-comp-paddingTB-l) 0; } .oneid-dialog__body--fullscreen { -webkit-box-sizing: border-box; box-sizing: border-box; padding: var(--td-comp-paddingTB-xl) var(--td-comp-paddingLR-xxl); height: calc(100% - var(--td-comp-size-xxxl) - var(--td-comp-size-xxxxl)); overflow: auto; } @-moz-document url-prefix() { .oneid-dialog__body--fullscreen { scrollbar-color: var(--td-scrollbar-color) transparent; scrollbar-width: thin; } } .oneid-dialog__body--fullscreen::-webkit-scrollbar { width: 6px; height: 6px; } .oneid-dialog__body--fullscreen::-webkit-scrollbar-thumb { border: 0px solid transparent; background-clip: content-box; background-color: var(--td-scrollbar-color); border-radius: 11px; } .oneid-dialog__body--fullscreen::-webkit-scrollbar-thumb:vertical:hover, .oneid-dialog__body--fullscreen::-webkit-scrollbar-thumb:horizontal:hover { background-color: var(--td-scrollbar-hover-color); } .oneid-dialog__body--fullscreen--without-footer { -webkit-box-sizing: border-box; box-sizing: border-box; padding: var(--td-comp-paddingTB-xl) var(--td-comp-paddingLR-xxl); height: calc(100% - var(--td-comp-size-xxxl)); overflow: auto; } .oneid-dialog__footer { width: 100%; text-align: right; padding: var(--td-comp-paddingTB-l) 0 0; } .oneid-dialog__footer .oneid-button + .oneid-button { margin-left: var(--td-comp-margin-s); } .oneid-dialog__footer--fullscreen { min-height: var(--td-comp-size-xxxxl); padding: 0 var(--td-comp-paddingLR-xxl) var(--td-comp-paddingTB-xxl); -webkit-box-sizing: border-box; box-sizing: border-box; } .oneid-dialog--default { padding: var(--td-comp-paddingTB-xxl) var(--td-comp-paddingLR-xxl); } .oneid-dialog__close { font-size: calc(var(--td-font-size-body-large) + 4px); color: var(--td-text-color-secondary); display: -webkit-box; display: -ms-flexbox; display: flex; width: calc(var(--td-font-size-body-large) + 4px); height: calc(var(--td-font-size-body-large) + 4px); -webkit-box-align: center; -ms-flex-align: center; align-items: center; border-radius: var(--td-radius-default); -webkit-transition: all 0.2s linear; transition: all 0.2s linear; padding: var(--td-comp-paddingTB-xxs) var(--td-comp-paddingLR-xxs); } .oneid-dialog__close:hover { cursor: pointer; background: var(--td-bg-color-container-hover); } .oneid-dialog__close:active { background: var(--td-bg-color-container-active); } .oneid-dialog__close--fullscreen { display: -webkit-box; display: -ms-flexbox; display: flex; background: transparent; } .oneid-dialog__close--fullscreen:hover { cursor: pointer; background: var(--td-bg-color-secondarycontainer-hover); } .oneid-dialog__close--fullscreen:active { background: var(--td-bg-color-secondarycontainer-active); } .oneid-dialog.oneid-dialog--draggable:hover { cursor: move; } .oneid-dialog.oneid-dialog--draggable .oneid-dialog__header:hover, .oneid-dialog.oneid-dialog--draggable .oneid-dialog__body:hover, .oneid-dialog.oneid-dialog--draggable .oneid-dialog__footer:hover { cursor: auto; } .oneid-dialog__fullscreen { width: 100%; border-radius: 0; } .oneid-dialog__ctx { pointer-events: auto; outline: none; top: 0; left: 0; width: 100%; height: 100%; } .oneid-dialog__ctx.oneid-dialog__ctx--modeless { pointer-events: none; } .oneid-dialog__ctx.oneid-dialog__ctx--fixed { position: fixed; z-index: 2500; } .oneid-dialog__ctx.oneid-dialog__ctx--absolute { position: absolute; } .oneid-dialog__ctx.oneid-dialog__ctx--absolute .oneid-dialog__mask { position: absolute; } .oneid-dialog__ctx.oneid-dialog__ctx--absolute .oneid-dialog__wrap { position: absolute; } .oneid-dialog__ctx.oneid-is-visible { visibility: visible; } .oneid-dialog__ctx.oneid-is-hidden { visibility: hidden; } .oneid-dialog__ctx.oneid-is-display { display: block; } .oneid-dialog__ctx.oneid-not-display { display: none; } .oneid-dialog__ctx .oneid-dialog__mask { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; background: var(--td-mask-active); pointer-events: auto; } .oneid-dialog__ctx .oneid-dialog__wrap { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; overflow: auto; } @-moz-document url-prefix() { .oneid-dialog__ctx .oneid-dialog__wrap { scrollbar-color: var(--td-scrollbar-color) transparent; scrollbar-width: thin; } } .oneid-dialog__ctx .oneid-dialog__wrap::-webkit-scrollbar { width: 8px; height: 8px; } .oneid-dialog__ctx .oneid-dialog__wrap::-webkit-scrollbar-thumb { border: 2px solid transparent; background-clip: content-box; background-color: var(--td-scrollbar-color); border-radius: 15px; } .oneid-dialog__ctx .oneid-dialog__wrap::-webkit-scrollbar-thumb:vertical:hover, .oneid-dialog__ctx .oneid-dialog__wrap::-webkit-scrollbar-thumb:horizontal:hover { background-color: var(--td-scrollbar-hover-color); } .oneid-dialog__ctx .oneid-dialog__position { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; min-height: 100%; width: 100%; position: relative; padding: 48px 0; -webkit-box-sizing: border-box; box-sizing: border-box; } .oneid-dialog__ctx .oneid-dialog__position.oneid-dialog--top { -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; padding-top: 20vh; } .oneid-dialog__ctx .oneid-dialog__position.oneid-dialog--center { -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .oneid-dialog__ctx .oneid-dialog__position_fullscreen { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; min-height: 100%; width: 100%; position: relative; -webkit-box-sizing: border-box; box-sizing: border-box; } .oneid-dialog__ctx .oneid-is-hidden { background: none; } .oneid-dialog__ctx .oneid-dialog { pointer-events: auto; z-index: 2500; } .oneid-dialog__ctx.oneid-dialog__ctx--modeless .oneid-dialog { -webkit-box-shadow: var(--td-shadow-3); box-shadow: var(--td-shadow-3); } .oneid-tree { -webkit-box-sizing: border-box; box-sizing: border-box; margin: 0; padding: 0; list-style: none; font: var(--td-font-body-medium); color: var(--td-text-color-primary); position: relative; } .oneid-tree.oneid-is-disabled { color: var(--td-text-color-disabled); } .oneid-tree.oneid-is-disabled .oneid-icon { color: var(--td-text-color-disabled); } .oneid-tree.oneid-is-disabled .oneid-tree__item.oneid-is-active { background-color: var(--td-bg-color-container-hover); color: var(--td-text-color-disabled); } .oneid-tree.oneid-is-disabled .oneid-tree__item .oneid-icon { color: var(--td-text-color-secondary); } .oneid-tree__empty { color: var(--td-text-color-disabled); } .oneid-tree__branch { display: block; } .oneid-tree__item { --level: 0; --hscale: 2; will-change: opacity, max-height; position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: nowrap; flex-wrap: nowrap; -webkit-box-align: center; -ms-flex-align: center; align-items: center; padding: 0 0 0 calc(var(--td-comp-margin-xxl) * var(--level)); cursor: default; -webkit-transform: translateZ(0); transform: translateZ(0); -webkit-backface-visibility: hidden; backface-visibility: hidden; -webkit-perspective: 1000; perspective: 1000; } .oneid-tree__item .oneid-icon, .oneid-tree__item .oneid-loading { display: inline-block; position: relative; z-index: 2; font-size: calc(var(--td-font-size-body-medium) + 2px); } .oneid-tree__item .oneid-icon { color: var(--td-text-color-secondary); } .oneid-tree__item .oneid-checkbox { -webkit-box-align: center; -ms-flex-align: center; align-items: center; font-size: 0; } .oneid-tree__item .oneid-checkbox__input { -ms-flex-negative: 0; flex-shrink: 0; } .oneid-tree__item .oneid-checkbox__label { overflow: hidden; text-overflow: ellipsis; } .oneid-tree__item .oneid-tree__icon--default .oneid-icon { -webkit-transform: rotate(0); transform: rotate(0); } .oneid-tree__item--open .oneid-icon { color: var(--td-text-color-brand); } .oneid-tree__item--open .oneid-tree__icon--default .oneid-icon { -webkit-transform: rotate(90deg); transform: rotate(90deg); } .oneid-tree__item--clickable { cursor: pointer; } .oneid-tree__item--locked { color: var(--td-text-color-disabled); } .oneid-tree__item--matched { color: inherit; } .oneid-tree__item--draggable { cursor: pointer; } .oneid-tree__item--draggable:hover { background-color: var(--td-bg-color-container-hover); background-clip: content-box; } .oneid-tree__item--draggable::after { position: absolute; top: -1px; right: 0; left: 0; display: block; height: 2px; border-radius: 1px; content: ""; padding: inherit; background-clip: content-box; } .oneid-tree__item--tip-top::after { background-color: var(--td-brand-color); } .oneid-tree__item--tip-bottom::after { top: unset; bottom: -1px; background-color: var(--td-brand-color); } .oneid-tree__item--tip-highlight { background-color: var(--td-brand-color-light); background-clip: content-box; } .oneid-tree__item::before { content: ""; display: block; width: 0; -webkit-box-flex: 0; -ms-flex: 0 0 auto; flex: 0 0 auto; height: calc(var(--td-comp-size-m) + 2px); } .oneid-tree--block-node .oneid-tree__label { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; } .oneid-tree--hoverable .oneid-tree__label:not(.oneid-is-active):not(.oneid-is-checked):hover { background-color: var(--td-bg-color-container-hover); } .oneid-tree__line { --level: 0; --color: var(--td-border-level-1-color); --space: var(--td-comp-margin-xxl); --iconSize: 16px; position: absolute; left: calc(var(--td-comp-margin-xxl) * var(--level) - var(--td-comp-margin-l)); bottom: var(--td-comp-margin-l); width: 1px; height: calc(var(--td-comp-size-m) + 2px); pointer-events: none; } .oneid-tree__line::before { content: ""; position: absolute; bottom: 0; left: 0; display: block; height: calc(var(--td-comp-size-m) + 2px); width: var(--td-comp-margin-m); border-left: 1px solid var(--color); border-bottom: 1px solid var(--color); } .oneid-tree__line--first::before { height: var(--td-line-height-body-medium); } .oneid-tree__line--leaf::before { width: var(--td-comp-margin-m); } .oneid-tree__icon { position: relative; -webkit-box-flex: 0; -ms-flex: none; flex: none; display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; text-align: center; width: calc(var(--td-font-size-body-medium) + 2px); font-size: 0; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; cursor: pointer; } .oneid-tree__icon::after { content: ""; display: block; position: absolute; left: -2px; top: -2px; width: calc(var(--td-font-size-body-medium) + 2px + 4px); height: calc(var(--td-font-size-body-medium) + 2px + 4px); border-radius: var(--td-radius-default); } .oneid-tree__icon:not(:empty):hover { background-color: var(--td-bg-color-container-hover); } .oneid-tree__icon:empty { cursor: initial; } .oneid-tree__label { --ripple-color: var(--td-bg-color-container-active); -ms-flex-wrap: nowrap; flex-wrap: nowrap; -webkit-box-flex: 1; -ms-flex: 1; flex: 1; padding: var(--td-comp-paddingTB-xxs) var(--td-comp-paddingLR-xs); margin-left: var(--td-comp-margin-xs); border-radius: var(--td-radius-default); cursor: pointer; white-space: nowrap; word-wrap: normal; overflow: hidden; text-overflow: ellipsis; } .oneid-tree__label.oneid-is-checked { font-weight: 500; color: var(--td-text-color-primary); background-color: var(--td-brand-color-light); } .oneid-tree__label::-moz-selection { background-color: transparent; } .oneid-tree__label::selection { background-color: transparent; } .oneid-is-active .oneid-tree__label { font-weight: 500; color: var(--td-text-color-primary); background-color: var(--td-brand-color-light); } .oneid-tree__space { display: block; -webkit-box-flex: 1; -ms-flex: 1 0 auto; flex: 1 0 auto; } .oneid-tree__operations { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-flex: 0; -ms-flex: 0 0 auto; flex: 0 0 auto; -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; -webkit-box-align: center; -ms-flex-align: center; align-items: center; margin-left: auto; } .oneid-tree__operations .oneid-icon { cursor: pointer; } .oneid-tree__item.oneid-is-disabled { color: var(--td-text-color-disabled); cursor: default; } .oneid-tree__item.oneid-is-disabled .oneid-checkbox { cursor: default; } .oneid-tree__item--hidden { display: none; } .oneid-tree--transition .oneid-tree__label { -webkit-transition: background-color 0.24s cubic-bezier(0.38, 0, 0.24, 1); transition: background-color 0.24s cubic-bezier(0.38, 0, 0.24, 1); } .oneid-tree--transition .oneid-tree__icon { -webkit-transition: color, -webkit-transform 0.24s cubic-bezier(0.38, 0, 0.24, 1); transition: color, -webkit-transform 0.24s cubic-bezier(0.38, 0, 0.24, 1); transition: color, transform 0.24s cubic-bezier(0.38, 0, 0.24, 1); transition: color, transform 0.24s cubic-bezier(0.38, 0, 0.24, 1), -webkit-transform 0.24s cubic-bezier(0.38, 0, 0.24, 1); } .oneid-tree--transition .oneid-tree__icon::after { -webkit-transition: 0.2s linear; transition: 0.2s linear; } .oneid-tree--transition .oneid-tree__icon:not(:empty):hover { -webkit-transition: 0.2s linear; transition: 0.2s linear; } .oneid-tree--transition .oneid-tree__icon--default .oneid-icon { -webkit-transition: color, -webkit-transform cubic-bezier(0.38, 0, 0.24, 1) 0.2s; transition: color, -webkit-transform cubic-bezier(0.38, 0, 0.24, 1) 0.2s; transition: color, transform cubic-bezier(0.38, 0, 0.24, 1) 0.2s; transition: color, transform cubic-bezier(0.38, 0, 0.24, 1) 0.2s, -webkit-transform cubic-bezier(0.38, 0, 0.24, 1) 0.2s; } .oneid-tree--transition .oneid-tree__item--visible { display: -webkit-box; display: -ms-flexbox; display: flex; max-height: calc((var(--td-comp-size-m) + 2px) * var(--hscale) + 0px); opacity: 1; -webkit-transition: opacity 150ms linear 150ms, max-height 150ms linear 0s; transition: opacity 150ms linear 150ms, max-height 150ms linear 0s; } .oneid-tree--transition .oneid-tree__item--hidden { display: -webkit-box; display: -ms-flexbox; display: flex; max-height: 0; opacity: 0; overflow: hidden; pointer-events: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -webkit-animation: initial; animation: initial; -webkit-transition: opacity 150ms linear 0s, max-height 150ms linear 150ms; transition: opacity 150ms linear 0s, max-height 150ms linear 150ms; } .oneid-tree--transition .oneid-tree__item--enter-active { -webkit-animation: t-tree-toggle 300ms linear; animation: t-tree-toggle 300ms linear; } .oneid-tree--transition .oneid-tree__item--leave-active { animation: t-tree-toggle 300ms reverse linear forwards; } .oneid-tree__vscroll { overflow-y: auto; } .oneid-tree__lazyload { overflow-y: auto; } .oneid-tree__vscroll-cursor { position: absolute; width: 1px; height: 1px; -webkit-transition: -webkit-transform 0.2s; transition: -webkit-transform 0.2s; transition: transform 0.2s; transition: transform 0.2s, -webkit-transform 0.2s; } .oneid-tree--scrolling .oneid-tree__item { will-change: initial; } .oneid-tree--scrolling .v-enter, .oneid-tree--scrolling .v-leave, .oneid-tree--scrolling .oneid-tree__item--visible, .oneid-tree--scrolling .oneid-tree__item--hidden, .oneid-tree--scrolling .oneid-tree__item--enter, .oneid-tree--scrolling .oneid-tree__item--enter-active, .oneid-tree--scrolling .oneid-tree__item--enter-to, .oneid-tree--scrolling .oneid-tree__item--leave, .oneid-tree--scrolling .oneid-tree__item--leave-active .oneid-tree__item--leave-to { -webkit-animation: none; animation: none; -webkit-transition: none; transition: none; } .oneid-tree--scrolling .oneid-tree__item--visible { max-height: initial; } .oneid-tree--scrolling .oneid-tree__item--enter-to, .oneid-tree--scrolling .oneid-tree__item--enter-active { max-height: initial; } .oneid-tree--scrolling .oneid-tree__item--leave-to, .oneid-tree--scrolling .oneid-tree__item--leave-active { max-height: 0; } @-webkit-keyframes t-tree-toggle { 0% { opacity: 0; max-height: 0; } 50% { opacity: 0; max-height: calc((var(--td-comp-size-m) + 2px) * var(--hscale) + 0px); } 100% { opacity: 1; max-height: calc((var(--td-comp-size-m) + 2px) * var(--hscale) + 0px); } } @keyframes t-tree-toggle { 0% { opacity: 0; max-height: 0; } 50% { opacity: 0; max-height: calc((var(--td-comp-size-m) + 2px) * var(--hscale) + 0px); } 100% { opacity: 1; max-height: calc((var(--td-comp-size-m) + 2px) * var(--hscale) + 0px); } } .oneid-tree-select { font: var(--td-font-body-medium); color: var(--td-text-color-primary); -webkit-box-sizing: border-box; box-sizing: border-box; margin: 0; padding: 0; list-style: none; } .oneid-tree-select--without-input input { display: none; } .oneid-tree-select--without-input .oneid-input__suffix-icon { margin-left: auto; } .oneid-tree-select .oneid-fake-arrow { -webkit-transition: color 0.2s cubic-bezier(0.38, 0, 0.24, 1); transition: color 0.2s cubic-bezier(0.38, 0, 0.24, 1); color: var(--td-text-color-placeholder); } .oneid-tree-select .oneid-fake-arrow--highlight { color: var(--td-text-color-brand); } .oneid-tree-select .oneid-fake-arrow--disable { color: var(--td-text-color-disabled); } .oneid-tree-select--placeholder { color: var(--td-text-color-placeholder); } .oneid-tree-select.oneid-single-suffix { padding-right: 20px; } .oneid-tree-select.oneid-tag-prefix { padding-left: 4px; } .oneid-tree-select-popup .oneid-popup__content { padding: var(--td-pop-padding-m); max-height: 300px; overflow-y: auto; } @-moz-document url-prefix() { .oneid-tree-select-popup .oneid-popup__content { scrollbar-color: var(--td-scrollbar-color) transparent; scrollbar-width: thin; } } .oneid-tree-select-popup .oneid-popup__content::-webkit-scrollbar { width: 8px; height: 8px; } .oneid-tree-select-popup .oneid-popup__content::-webkit-scrollbar-thumb { border: 2px solid transparent; background-clip: content-box; background-color: var(--td-scrollbar-color); border-radius: 15px; } .oneid-tree-select-popup .oneid-popup__content::-webkit-scrollbar-thumb:vertical:hover, .oneid-tree-select-popup .oneid-popup__content::-webkit-scrollbar-thumb:horizontal:hover { background-color: var(--td-scrollbar-hover-color); } .oneid-divider { margin: 0; padding: 0; list-style: none; font: var(--td-font-body-medium); margin: var(--td-comp-margin-xxl) 0; border-top: 1px solid var(--td-border-level-1-color); color: var(--td-text-color-primary); -webkit-box-sizing: border-box; box-sizing: border-box; } .oneid-divider--dashed { border-top-style: dashed; } .oneid-divider--horizontal { width: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; } .oneid-divider--vertical { border-top: 0; display: inline-block; margin: 0 var(--td-comp-margin-m); border-left: 1px solid var(--td-border-level-1-color); height: 0.9em; vertical-align: middle; } .oneid-divider--with-text { display: -webkit-box; display: -ms-flexbox; display: flex; border-top: 0; white-space: nowrap; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .oneid-divider--with-text .oneid-divider__inner-text:not(:empty) { padding: 0 1em; display: inline-block; } .oneid-divider--with-text::before, .oneid-divider--with-text::after { content: ""; width: 50%; border-top: 1px solid var(--td-border-level-1-color); } .oneid-divider--with-text-left::before { width: 5%; } .oneid-divider--with-text-left::after { width: 95%; } .oneid-divider--with-text-right::before { width: 95%; } .oneid-divider--with-text-right::after { width: 5%; } .oneid-divider--dashed::before, .oneid-divider--dashed::after { border-top: 1px dashed var(--td-border-level-1-color); } .oneid-divider--vertical.oneid-divider--dashed { border-left: 1px dashed var(--td-border-level-1-color); } .oneid-switch { font: var(--td-font-body-medium); color: var(--td-text-color-primary); -webkit-box-sizing: border-box; box-sizing: border-box; list-style: none; position: relative; display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; vertical-align: middle; -webkit-box-align: center; -ms-flex-align: center; align-items: center; outline: none; border: 0; padding: 0; margin: 0; height: var(--td-comp-size-xxs); line-height: var(--td-comp-size-xxs); border-radius: var(--td-radius-round); min-width: calc(var(--td-comp-size-xxs) / 0.618); -webkit-transition: all 0.2s cubic-bezier(0.38, 0, 0.24, 1); transition: all 0.2s cubic-bezier(0.38, 0, 0.24, 1); background-color: var(--td-bg-color-secondarycomponent); cursor: pointer; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .oneid-switch:hover { background-color: var(--td-bg-color-secondarycomponent-hover); } .oneid-switch__handle { position: absolute; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; top: 4px; left: 4px; width: calc(var(--td-comp-size-xxs) - 8px); height: calc(var(--td-comp-size-xxs) - 8px); border-radius: var(--td-radius-round); -webkit-transition: all 0.2s cubic-bezier(0.38, 0, 0.24, 1); transition: all 0.2s cubic-bezier(0.38, 0, 0.24, 1); -webkit-box-shadow: var(--td-shadow-1); box-shadow: var(--td-shadow-1); } .oneid-switch__handle .oneid-icon { font-size: calc(var(--td-comp-size-xxs) - 4px); color: transparent; } .oneid-switch__handle::before { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; border-radius: var(--td-radius-round); background-color: #fff; -webkit-transition: all 0.2s cubic-bezier(0.38, 0, 0.24, 1); transition: all 0.2s cubic-bezier(0.38, 0, 0.24, 1); } .oneid-switch:active:not(.oneid-is-disabled):not(.oneid-is-loading) .oneid-switch__handle::before { left: 0; right: -6px; } .oneid-switch:active:not(.oneid-is-disabled):not(.oneid-is-loading).oneid-is-checked .oneid-switch__handle::before { right: 0; left: -6px; } .oneid-switch:active:not(.oneid-is-disabled):not(.oneid-is-loading) .oneid-switch__content { opacity: 0; } .oneid-switch__content { -webkit-box-sizing: border-box; box-sizing: border-box; display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; color: var(--td-text-color-anti); padding: 0 var(--td-comp-margin-xs) 0 calc(var(--td-comp-size-xxs) / 0.618 / 2 + 2px); font-size: var(--td-font-size-body-small); min-width: calc(var(--td-comp-size-xxs) / 0.618); -webkit-transition: padding 0.2s cubic-bezier(0.38, 0, 0.24, 1), opacity 0.2s linear; transition: padding 0.2s cubic-bezier(0.38, 0, 0.24, 1), opacity 0.2s linear; } .oneid-switch__content .oneid-icon { font-size: var(--td-font-size-body-large); } .oneid-switch.oneid-is-checked { background-color: var(--td-brand-color); } .oneid-switch.oneid-is-checked:hover { background-color: var(--td-brand-color-hover); } .oneid-switch.oneid-is-checked .oneid-switch__handle { left: calc(100% - 2.5px); -webkit-transform: translate(-100%, 0); transform: translate(-100%, 0); width: calc(var(--td-comp-size-xxs) - 5px); height: calc(var(--td-comp-size-xxs) - 5px); top: 2.5px; } .oneid-switch.oneid-is-checked .oneid-switch__content { padding: 0 calc(var(--td-comp-size-xxs) / 0.618 / 2 + 2px) 0 var(--td-comp-margin-xs); color: var(--td-text-color-anti); } .oneid-switch.oneid-is-loading { cursor: not-allowed; background-color: var(--td-bg-color-component-disabled); } .oneid-switch.oneid-is-loading .oneid-loading { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; } .oneid-switch.oneid-is-loading .oneid-switch__handle .oneid-icon { color: var(--td-bg-color-component-disabled); } .oneid-switch.oneid-is-loading.oneid-is-checked { background-color: var(--td-brand-color-focus); } .oneid-switch.oneid-is-loading.oneid-is-checked .oneid-switch__handle .oneid-icon { color: var(--td-brand-color-focus); } .oneid-switch.oneid-is-disabled { cursor: not-allowed; background-color: var(--td-bg-color-component-disabled); } .oneid-switch.oneid-is-disabled .oneid-switch__handle { -webkit-box-shadow: none; box-shadow: none; } .oneid-switch.oneid-is-disabled.oneid-is-checked { background-color: var(--td-brand-color-disabled); } .oneid-switch.oneid-is-disabled.oneid-is-checked .oneid-switch__handle { -webkit-box-shadow: none; box-shadow: none; } .oneid-switch.oneid-is-disabled.oneid-is-checked .oneid-switch__handle .oneid-icon { color: var(--td-brand-color-disabled); } .oneid-switch.oneid-size-l { min-width: calc(var(--td-comp-size-xs) / 0.618); height: var(--td-comp-size-xs); line-height: var(--td-comp-size-xs); border-radius: var(--td-radius-round); } .oneid-switch.oneid-size-l:active:not(.oneid-is-disabled):not(.oneid-is-loading) .oneid-switch__handle::before { left: 0; right: -8px; } .oneid-switch.oneid-size-l:active:not(.oneid-is-disabled):not(.oneid-is-loading).oneid-is-checked .oneid-switch__handle::before { right: 0; left: -8px; } .oneid-switch.oneid-size-l .oneid-switch__handle { top: 5px; left: 5px; width: calc(var(--td-comp-size-xs) - 10px); height: calc(var(--td-comp-size-xs) - 10px); } .oneid-switch.oneid-size-l .oneid-switch__handle .oneid-icon { font-size: calc(var(--td-comp-size-xs) - 4px); } .oneid-switch.oneid-size-l .oneid-switch__content { padding: 0 var(--td-comp-margin-s) 0 calc(var(--td-comp-size-xs) / 0.618 / 2 + 4px); min-width: calc(var(--td-comp-size-xs) / 0.618); font-size: var(--td-font-size-body-large); } .oneid-switch.oneid-size-l .oneid-switch__content .oneid-icon { font-size: var(--td-font-size-body-large); } .oneid-switch.oneid-size-l.oneid-is-checked .oneid-switch__handle { left: calc(100% - 3px); top: 3px; width: calc(var(--td-comp-size-xs) - 6px); height: calc(var(--td-comp-size-xs) - 6px); } .oneid-switch.oneid-size-l.oneid-is-checked .oneid-switch__content { padding: 0 calc(var(--td-comp-size-xs) / 0.618 / 2 + 4px) 0 var(--td-comp-margin-s); } .oneid-switch.oneid-size-s { min-width: calc(var(--td-comp-size-xxxs) / 0.618); height: var(--td-comp-size-xxxs); line-height: var(--td-comp-size-xxxs); border-radius: var(--td-radius-round); } .oneid-switch.oneid-size-s:active:not(.oneid-is-disabled):not(.oneid-is-loading) .oneid-switch__handle::before { left: 0; right: -4px; } .oneid-switch.oneid-size-s:active:not(.oneid-is-disabled):not(.oneid-is-loading).oneid-is-checked .oneid-switch__handle::before { right: 0; left: -4px; } .oneid-switch.oneid-size-s .oneid-switch__handle { top: 3px; left: 3px; width: calc(var(--td-comp-size-xxxs) - 6px); height: calc(var(--td-comp-size-xxxs) - 6px); } .oneid-switch.oneid-size-s .oneid-switch__handle .oneid-icon { font-size: calc(var(--td-comp-size-xxxs) - 4px); } .oneid-switch.oneid-size-s .oneid-switch__content { padding: 0 var(--td-comp-margin-xxs) 0 calc(var(--td-comp-size-xxxs) / 0.618 / 2 + 2px); min-width: calc(var(--td-comp-size-xxxs) / 0.618); font-size: 9px; } .oneid-switch.oneid-size-s .oneid-switch__content .oneid-icon { font-size: var(--td-font-size-body-large); } .oneid-switch.oneid-size-s.oneid-is-checked .oneid-switch__handle { left: calc(100% - 2px); top: 2px; width: calc(var(--td-comp-size-xxxs) - 4px); height: calc(var(--td-comp-size-xxxs) - 4px); } .oneid-switch.oneid-size-s.oneid-is-checked .oneid-switch__content { padding: 0 calc(var(--td-comp-size-xxxs) / 0.618 / 2 + 2px) 0 var(--td-comp-margin-xxs); } .oneid-anchor { -webkit-box-sizing: border-box; box-sizing: border-box; margin: 0; padding: 0; list-style: none; --td-anchor-space-base: var(--td-size-6); position: relative; background: var(--td-bg-color-container); width: 200px; color: var(--td-text-color-primary); font: var(--td-font-body-medium); } .oneid-anchor .oneid-is-active > a { color: var(--td-brand-color); } .oneid-anchor__line { position: absolute; top: 0; left: 0; width: 1px; height: 100%; background-color: var(--td-component-stroke); cursor: pointer; } .oneid-anchor__line-cursor-wrapper { position: absolute; display: block; height: 0; opacity: 0; -webkit-transition: all 0.2s cubic-bezier(0.24, 0.41, 0.51, 0.9); transition: all 0.2s cubic-bezier(0.24, 0.41, 0.51, 0.9); } .oneid-anchor__line-cursor-wrapper .oneid-anchor__line-cursor { width: 1px; height: 100%; background-color: var(--td-brand-color); } .oneid-anchor__item { padding: var(--td-comp-paddingTB-xxs) var(--td-comp-paddingTB-l); --level: 1; padding-left: calc(var(--level) * var(--td-anchor-space-base)); display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } .oneid-anchor__item.oneid-is-active { font-weight: 500; } .oneid-anchor__item-link { display: inline-block; position: relative; overflow: hidden; word-break: break-all; color: var(--td-text-color-primary); text-decoration: none; text-align: justify; } .oneid-anchor a { -webkit-transition: color 0.2s linear; transition: color 0.2s linear; } .oneid-anchor a:hover { color: var(--td-brand-color); cursor: pointer; } .oneid-anchor a:active { color: var(--td-brand-color-active); } .oneid-anchor.oneid-size-s { width: 120px; } .oneid-anchor.oneid-size-l { width: 320px; } .oneid-anchor__target { cursor: pointer; font: var(--td-font-body-medium); color: var(--td-text-color-primary); } @-webkit-keyframes fadeOut { 0% { opacity: 1; } 100% { opacity: 0; display: none; } } @keyframes fadeOut { 0% { opacity: 1; } 100% { opacity: 0; display: none; } } .oneid-anchor__target .oneid-anchor__copy { display: none; margin: 0 0 0 var(--td-comp-margin-xs); } .oneid-anchor__target:hover .oneid-anchor__copy { display: inline-block; } .oneid-anchor__target:target::after { display: inline-block; content: ""; width: 6px; height: 6px; border-radius: var(--td-radius-circle); background-color: var(--td-brand-color); vertical-align: middle; -webkit-animation: fadeOut 2s 2s linear 1; animation: fadeOut 2s 2s linear 1; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; } .oneid-calendar { font: var(--td-font-body-medium); color: var(--td-text-color-primary); -webkit-box-sizing: border-box; box-sizing: border-box; margin: 0; padding: 0; list-style: none; border: 1px solid var(--td-border-level-1-color); background-color: var(--td-bg-color-container); border-radius: var(--td-radius-large); } .oneid-calendar .oneid-is-disabled.oneid-calendar__table-body-cell:hover { cursor: not-allowed; } .oneid-calendar .oneid-is-disabled .oneid-calendar__table-body-cell-display { color: var(--td-text-color-disabled); } .oneid-calendar .oneid-is-disabled .oneid-calendar__table-body-cell-display:hover { -webkit-box-shadow: none; box-shadow: none; } .oneid-calendar--full { min-width: 560px; padding: var(--td-comp-paddingTB-xxl) var(--td-comp-paddingLR-xxl); } .oneid-calendar--full .oneid-calendar__control { padding: 0; } .oneid-calendar--full .oneid-calendar__title { font: var(--td-font-title-large); -webkit-box-flex: 1; -ms-flex: 1; flex: 1; } .oneid-calendar--full .oneid-calendar__panel { position: relative; margin-top: var(--td-comp-margin-xxxl); } .oneid-calendar--full .oneid-calendar__panel-title { font: var(--td-font-title-large); color: var(--td-text-color-primary); position: absolute; } .oneid-calendar--full .oneid-calendar__table-head-cell, .oneid-calendar--full .oneid-calendar__table-body-cell { margin-right: var(--td-comp-margin-s); position: relative; } .oneid-calendar--full .oneid-calendar__table-body-cell { border-top: 2px solid var(--td-border-level-1-color); padding: 0; height: 104px; line-height: var(--td-line-height-body-medium); display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: end; -ms-flex-align: end; align-items: flex-end; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; margin-left: 0; -webkit-transition-duration: 0.2s; transition-duration: 0.2s; -webkit-transition-property: border-top, background; transition-property: border-top, background; -webkit-transition-timing-function: linear; transition-timing-function: linear; } .oneid-calendar--full .oneid-calendar__table-body-cell-content { padding: var(--td-comp-paddingTB-s) var(--td-comp-paddingLR-xs); width: 100%; -webkit-box-sizing: border-box; box-sizing: border-box; } .oneid-calendar--full .oneid-calendar__table-body-cell.oneid-is-checked { background-color: var(--td-brand-color-light); } .oneid-calendar--full .oneid-calendar__table-body-cell.oneid-is-checked:hover { background-color: var(--td-brand-color-light); } .oneid-calendar--full .oneid-calendar__table-body-cell--now { border-top: 2px solid var(--td-brand-color); } .oneid-calendar--full .oneid-calendar__table-body-cell--now .oneid-calendar__table-body-cell-display { color: var(--td-text-color-primary); } .oneid-calendar--full .oneid-calendar__footer { height: 90px; padding: var(--td-comp-paddingTB-xxl) var(--td-comp-paddingLR-xxl); border-top: 1px solid var(--td-border-level-1-color); } .oneid-calendar--card { width: 280px; border-radius: var(--td-radius-medium); padding: var(--td-comp-paddingTB-m) var(--td-comp-paddingLR-m); } .oneid-calendar--card .oneid-calendar__control { padding: 0; } .oneid-calendar--card .oneid-calendar__control-section { width: 100%; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; } .oneid-calendar--card .oneid-calendar__control-section-cell:last-child { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; text-align: right; display: block; } .oneid-calendar--card .oneid-calendar__panel.oneid-calendar__panel--month { height: 200px; margin-top: var(--td-comp-margin-m); } .oneid-calendar--card .oneid-calendar__panel.oneid-calendar__panel--year { height: 168px; margin-top: var(--td-comp-margin-m); } .oneid-calendar--card .oneid-calendar__panel.oneid-calendar__panel--year .oneid-calendar__table-body-cell-display { min-width: var(--td-comp-size-xxl); } .oneid-calendar--card .oneid-calendar__table { width: 100%; height: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; justify-self: start; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; } .oneid-calendar--card .oneid-calendar__table-head-row, .oneid-calendar--card .oneid-calendar__table-body-row { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; background: var(--td-bg-color-container); } .oneid-calendar--card .oneid-calendar__table-head-cell, .oneid-calendar--card .oneid-calendar__table-body-cell { width: 100%; height: 100%; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; font: var(--td-font-body-medium); -webkit-box-sizing: border-box; box-sizing: border-box; } .oneid-calendar--card .oneid-calendar__table-head-cell-display, .oneid-calendar--card .oneid-calendar__table-body-cell-display { width: var(--td-comp-size-xs); line-height: var(--td-comp-size-xs); } .oneid-calendar--card .oneid-calendar__table-body { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; justify-self: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-flex: 1; -ms-flex: 1; flex: 1; } .oneid-calendar--card .oneid-calendar__table-body-cell { -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .oneid-calendar--card .oneid-calendar__table-body-cell:hover { background-color: var(--td-bg-color-container); } .oneid-calendar--card .oneid-calendar__table-body-cell-display { font: var(--td-font-body-medium); padding-top: calc(var(--td-comp-paddingTB-xxs) / 2); padding-bottom: calc(var(--td-comp-paddingTB-xxs) / 2); text-align: center; border-radius: var(--td-radius-default); -webkit-transition: all 0.2s linear; transition: all 0.2s linear; } .oneid-calendar--card .oneid-calendar__table-body-cell-display:hover { -webkit-box-shadow: inset 0 0 0 1px var(--td-brand-color); box-shadow: inset 0 0 0 1px var(--td-brand-color); -webkit-transition: -webkit-box-shadow 0.2s linear; transition: -webkit-box-shadow 0.2s linear; transition: box-shadow 0.2s linear; transition: box-shadow 0.2s linear, -webkit-box-shadow 0.2s linear; } .oneid-calendar--card .oneid-calendar__table-body-cell--now .oneid-calendar__table-body-cell-display { color: var(--td-brand-color); background-color: var(--td-brand-color-light); position: relative; } .oneid-calendar--card .oneid-is-checked .oneid-calendar__table-body-cell-display { background: var(--td-brand-color); border-radius: var(--td-radius-default); color: var(--td-text-color-anti); } .oneid-calendar--card .oneid-calendar__footer { height: var(--td-comp-size-xxl); padding: 0 var(--td-comp-paddingLR-m); border-top: 1px solid var(--td-border-level-1-color); } .oneid-calendar__control { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .oneid-calendar__control-section { height: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .oneid-calendar__control-section:last-child { margin-right: 0; } .oneid-calendar__control-section-cell { height: 100%; margin-right: var(--td-comp-margin-s); display: -webkit-box; display: -ms-flexbox; display: flex; } .oneid-calendar__control-section-cell .oneid-radio-group { vertical-align: bottom; } .oneid-calendar__control-section-cell .oneid-select { display: inline; } .oneid-calendar__control-section-cell:last-child { margin-right: 0; } .oneid-calendar__panel { -webkit-box-sizing: border-box; box-sizing: border-box; width: 100%; } .oneid-calendar__table { border-collapse: collapse; border-spacing: 0; width: 100%; height: 100%; } .oneid-calendar__table-head, .oneid-calendar__table-body { width: 100%; } .oneid-calendar__table-head-row, .oneid-calendar__table-body-row { width: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; } .oneid-calendar__table-head-cell, .oneid-calendar__table-body-cell { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; font: var(--td-font-title-small); color: var(--td-text-color-primary); cursor: default; padding: 0; } .oneid-calendar__table-head-cell:last-child, .oneid-calendar__table-body-cell:last-child { margin-right: 0; } .oneid-calendar__table-head { margin-bottom: var(--td-comp-margin-s); display: block; } .oneid-calendar__table-head-row { padding-bottom: 0px; background: var(--td-bg-color-container); } .oneid-calendar__table-head-cell { height: 100%; font: var(--td-font-title-small); color: var(--td-text-color-secondary); } .oneid-calendar__table-body-cell { cursor: pointer; } .oneid-calendar__table-body-cell:hover { background-color: var(--td-bg-color-container-hover); -webkit-transition: background-color 0.2s linear; transition: background-color 0.2s linear; } .oneid-calendar__table-body-cell-display { font: var(--td-font-title-small); color: var(--td-text-color-primary); } .oneid-link { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; cursor: pointer; -webkit-box-align: center; -ms-flex-align: center; align-items: center; position: relative; text-decoration: none; outline: none; padding: 0; -webkit-transition: all 0.2s linear; transition: all 0.2s linear; font: var(--td-font-link-medium); } .oneid-link .oneid-link__prefix-icon { margin-right: var(--td-comp-margin-s); display: -webkit-box; display: -ms-flexbox; display: flex; } .oneid-link .oneid-link__suffix-icon { margin-left: var(--td-comp-margin-s); display: -webkit-box; display: -ms-flexbox; display: flex; } .oneid-link.oneid-size-s { font: var(--td-font-link-small); } .oneid-link.oneid-size-s .oneid-link__prefix-icon { margin-right: var(--td-comp-margin-xs); display: -webkit-box; display: -ms-flexbox; display: flex; } .oneid-link.oneid-size-s .oneid-link__suffix-icon { margin-left: var(--td-comp-margin-xs); display: -webkit-box; display: -ms-flexbox; display: flex; } .oneid-link.oneid-size-l { font: var(--td-font-link-large); } .oneid-link.oneid-size-l .oneid-link__prefix-icon { margin-right: var(--td-comp-margin-m); display: -webkit-box; display: -ms-flexbox; display: flex; } .oneid-link.oneid-size-l .oneid-link__suffix-icon { margin-left: var(--td-comp-margin-m); display: -webkit-box; display: -ms-flexbox; display: flex; } .oneid-link--theme-default { color: var(--td-text-color-primary); } .oneid-link--theme-default:active { color: var(--td-brand-color-active); } .oneid-link--theme-default.oneid-link--hover-underline::after { content: ""; position: absolute; left: 0; right: 0; height: 0; bottom: 0; border-bottom: 1px solid var(--td-text-color-primary); opacity: 0; -webkit-transition: all 0.2s linear; transition: all 0.2s linear; } .oneid-link--theme-default.oneid-link--hover-underline:hover::after { opacity: 1; } .oneid-link--theme-default.oneid-link--hover-underline:active::after { opacity: 1; border-color: var(--td-brand-color-active); } .oneid-link--theme-default.oneid-link--hover-color:hover { color: var(--td-brand-color-hover); } .oneid-link--theme-default.oneid-link--hover-color.oneid-is-underline:hover::after { border-color: var(--td-brand-color-hover); } .oneid-link--theme-default.oneid-link--hover-color.oneid-is-underline:active::after { border-color: var(--td-brand-color-active); } .oneid-link--theme-default.oneid-link--hover-color:active { color: var(--td-brand-color-active); } .oneid-link--theme-default.oneid-is-underline::after { content: ""; position: absolute; left: 0; right: 0; height: 0; bottom: 0; opacity: 1; border-bottom: 1px solid var(--td-text-color-primary); -webkit-transition: all 0.2s linear; transition: all 0.2s linear; } .oneid-link--theme-default.oneid-is-disabled { cursor: not-allowed; color: var(--td-text-color-disabled); } .oneid-link--theme-default.oneid-is-disabled:hover, .oneid-link--theme-default.oneid-is-disabled:active { color: var(--td-text-color-disabled); } .oneid-link--theme-default.oneid-is-disabled.oneid-is-underline::after { border-color: var(--td-text-color-disabled); } .oneid-link--theme-primary { color: var(--td-brand-color); } .oneid-link--theme-primary:active { color: var(--td-brand-color-active); } .oneid-link--theme-primary.oneid-link--hover-underline::after { content: ""; position: absolute; left: 0; right: 0; height: 0; bottom: 0; border-bottom: 1px solid var(--td-brand-color); opacity: 0; -webkit-transition: all 0.2s linear; transition: all 0.2s linear; } .oneid-link--theme-primary.oneid-link--hover-underline:hover::after { opacity: 1; } .oneid-link--theme-primary.oneid-link--hover-underline:active::after { opacity: 1; border-color: var(--td-brand-color-active); } .oneid-link--theme-primary.oneid-link--hover-color:hover { color: var(--td-brand-color-hover); } .oneid-link--theme-primary.oneid-link--hover-color.oneid-is-underline:hover::after { border-color: var(--td-brand-color-hover); } .oneid-link--theme-primary.oneid-link--hover-color.oneid-is-underline:active::after { border-color: var(--td-brand-color-active); } .oneid-link--theme-primary.oneid-link--hover-color:active { color: var(--td-brand-color-active); } .oneid-link--theme-primary.oneid-is-underline::after { content: ""; position: absolute; left: 0; right: 0; height: 0; bottom: 0; opacity: 1; border-bottom: 1px solid var(--td-brand-color); -webkit-transition: all 0.2s linear; transition: all 0.2s linear; } .oneid-link--theme-primary.oneid-is-disabled { cursor: not-allowed; color: var(--td-brand-color-disabled); } .oneid-link--theme-primary.oneid-is-disabled:hover, .oneid-link--theme-primary.oneid-is-disabled:active { color: var(--td-brand-color-disabled); } .oneid-link--theme-primary.oneid-is-disabled.oneid-is-underline::after { border-color: var(--td-brand-color-disabled); } .oneid-link--theme-success { color: var(--td-success-color); } .oneid-link--theme-success:active { color: var(--td-success-color-active); } .oneid-link--theme-success.oneid-link--hover-underline::after { content: ""; position: absolute; left: 0; right: 0; height: 0; bottom: 0; border-bottom: 1px solid var(--td-success-color); opacity: 0; -webkit-transition: all 0.2s linear; transition: all 0.2s linear; } .oneid-link--theme-success.oneid-link--hover-underline:hover::after { opacity: 1; } .oneid-link--theme-success.oneid-link--hover-underline:active::after { opacity: 1; border-color: var(--td-success-color-active); } .oneid-link--theme-success.oneid-link--hover-color:hover { color: var(--td-success-color-hover); } .oneid-link--theme-success.oneid-link--hover-color.oneid-is-underline:hover::after { border-color: var(--td-success-color-hover); } .oneid-link--theme-success.oneid-link--hover-color.oneid-is-underline:active::after { border-color: var(--td-success-color-active); } .oneid-link--theme-success.oneid-link--hover-color:active { color: var(--td-success-color-active); } .oneid-link--theme-success.oneid-is-underline::after { content: ""; position: absolute; left: 0; right: 0; height: 0; bottom: 0; opacity: 1; border-bottom: 1px solid var(--td-success-color); -webkit-transition: all 0.2s linear; transition: all 0.2s linear; } .oneid-link--theme-success.oneid-is-disabled { cursor: not-allowed; color: var(--td-success-color-disabled); } .oneid-link--theme-success.oneid-is-disabled:hover, .oneid-link--theme-success.oneid-is-disabled:active { color: var(--td-success-color-disabled); } .oneid-link--theme-success.oneid-is-disabled.oneid-is-underline::after { border-color: var(--td-success-color-disabled); } .oneid-link--theme-danger { color: var(--td-error-color); } .oneid-link--theme-danger:active { color: var(--td-error-color-active); } .oneid-link--theme-danger.oneid-link--hover-underline::after { content: ""; position: absolute; left: 0; right: 0; height: 0; bottom: 0; border-bottom: 1px solid var(--td-error-color); opacity: 0; -webkit-transition: all 0.2s linear; transition: all 0.2s linear; } .oneid-link--theme-danger.oneid-link--hover-underline:hover::after { opacity: 1; } .oneid-link--theme-danger.oneid-link--hover-underline:active::after { opacity: 1; border-color: var(--td-error-color-active); } .oneid-link--theme-danger.oneid-link--hover-color:hover { color: var(--td-error-color-hover); } .oneid-link--theme-danger.oneid-link--hover-color.oneid-is-underline:hover::after { border-color: var(--td-error-color-hover); } .oneid-link--theme-danger.oneid-link--hover-color.oneid-is-underline:active::after { border-color: var(--td-error-color-active); } .oneid-link--theme-danger.oneid-link--hover-color:active { color: var(--td-error-color-active); } .oneid-link--theme-danger.oneid-is-underline::after { content: ""; position: absolute; left: 0; right: 0; height: 0; bottom: 0; opacity: 1; border-bottom: 1px solid var(--td-error-color); -webkit-transition: all 0.2s linear; transition: all 0.2s linear; } .oneid-link--theme-danger.oneid-is-disabled { cursor: not-allowed; color: var(--td-error-color-disabled); } .oneid-link--theme-danger.oneid-is-disabled:hover, .oneid-link--theme-danger.oneid-is-disabled:active { color: var(--td-error-color-disabled); } .oneid-link--theme-danger.oneid-is-disabled.oneid-is-underline::after { border-color: var(--td-error-color-disabled); } .oneid-link--theme-warning { color: var(--td-warning-color); } .oneid-link--theme-warning:active { color: var(--td-warning-color-active); } .oneid-link--theme-warning.oneid-link--hover-underline::after { content: ""; position: absolute; left: 0; right: 0; height: 0; bottom: 0; border-bottom: 1px solid var(--td-warning-color); opacity: 0; -webkit-transition: all 0.2s linear; transition: all 0.2s linear; } .oneid-link--theme-warning.oneid-link--hover-underline:hover::after { opacity: 1; } .oneid-link--theme-warning.oneid-link--hover-underline:active::after { opacity: 1; border-color: var(--td-warning-color-active); } .oneid-link--theme-warning.oneid-link--hover-color:hover { color: var(--td-warning-color-hover); } .oneid-link--theme-warning.oneid-link--hover-color.oneid-is-underline:hover::after { border-color: var(--td-warning-color-hover); } .oneid-link--theme-warning.oneid-link--hover-color.oneid-is-underline:active::after { border-color: var(--td-warning-color-active); } .oneid-link--theme-warning.oneid-link--hover-color:active { color: var(--td-warning-color-active); } .oneid-link--theme-warning.oneid-is-underline::after { content: ""; position: absolute; left: 0; right: 0; height: 0; bottom: 0; opacity: 1; border-bottom: 1px solid var(--td-warning-color); -webkit-transition: all 0.2s linear; transition: all 0.2s linear; } .oneid-link--theme-warning.oneid-is-disabled { cursor: not-allowed; color: var(--td-warning-color-disabled); } .oneid-link--theme-warning.oneid-is-disabled:hover, .oneid-link--theme-warning.oneid-is-disabled:active { color: var(--td-warning-color-disabled); } .oneid-link--theme-warning.oneid-is-disabled.oneid-is-underline::after { border-color: var(--td-warning-color-disabled); } .oneid-space { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; } .oneid-space .oneid-space-item { width: inherit; } .oneid-space-align-start { -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; } .oneid-space-align-end { -webkit-box-align: end; -ms-flex-align: end; align-items: flex-end; } .oneid-space-align-baseline { -webkit-box-align: baseline; -ms-flex-align: baseline; align-items: baseline; } .oneid-space-align-center { -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .oneid-space-vertical { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } .oneid-space-vertical .oneid-space-item-separator { width: 100%; } .oneid-space.oneid-space--break-line { -ms-flex-wrap: wrap; flex-wrap: wrap; } .oneid-space.oneid-space--polyfill { display: -webkit-box; display: -ms-flexbox; display: flex; } .oneid-space.oneid-space--polyfill.oneid-space-horizontal, .oneid-space.oneid-space--polyfill.oneid-space--break-line { margin-left: calc(-1 * var(--td-space-column-gap, 0)); } .oneid-space.oneid-space--polyfill.oneid-space-vertical, .oneid-space.oneid-space--polyfill.oneid-space--break-line { margin-top: calc(-1 * var(--td-space-row-gap, 0)); } .oneid-space.oneid-space--polyfill.oneid-space-horizontal > *, .oneid-space.oneid-space--polyfill.oneid-space--break-line > * { margin-left: var(--td-space-column-gap); } .oneid-space.oneid-space--polyfill.oneid-space-vertical > *, .oneid-space.oneid-space--polyfill.oneid-space--break-line > * { margin-top: var(--td-space-row-gap); } .oneid-image__wrapper { position: relative; background: var(--td-bg-color-secondarycontainer); z-index: 1; } .oneid-image__wrapper--shape-square { border-radius: 0; } .oneid-image__wrapper--shape-round { border-radius: var(--td-radius-medium); } .oneid-image__wrapper--shape-circle { border-radius: 50%; } .oneid-image__wrapper--gallery { border-radius: var(--td-radius-medium); } .oneid-image__wrapper--gallery .oneid-image { position: relative; z-index: 5; } .oneid-image__wrapper--need-hover { cursor: pointer; } .oneid-image { width: 100%; height: 100%; border-radius: inherit; position: relative; z-index: inherit; } .oneid-image--fit-fill { -o-object-fit: fill; object-fit: fill; } .oneid-image--fit-contain { -o-object-fit: contain; object-fit: contain; } .oneid-image--fit-cover { -o-object-fit: cover; object-fit: cover; } .oneid-image--fit-scale-down { -o-object-fit: scale-down; object-fit: scale-down; } .oneid-image--fit-none { -o-object-fit: none; object-fit: none; } .oneid-image--position-center { -o-object-position: center; object-position: center; } .oneid-image--position-bottom { -o-object-position: bottom; object-position: bottom; } .oneid-image--position-top { -o-object-position: top; object-position: top; } .oneid-image--position-left { -o-object-position: left; object-position: left; } .oneid-image--position-right { -o-object-position: right; object-position: right; } .oneid-image__gallery-shadow { position: absolute; left: 0; right: -24px; top: 24px; bottom: 24px; background: rgba(238, 238, 238, 0.26); border-radius: var(--td-radius-medium); z-index: 3; } .oneid-image__gallery-shadow::before, .oneid-image__gallery-shadow::after { content: ""; position: absolute; left: 0; border-radius: var(--td-radius-medium); } .oneid-image__gallery-shadow::after { top: -16px; right: 16px; bottom: -16px; background: rgba(238, 238, 238, 0.8); z-index: 4; } .oneid-image__gallery-shadow::before { top: -8px; right: 8px; bottom: -8px; background: rgba(238, 238, 238, 0.5); z-index: 2; } .oneid-image__placeholder { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; z-index: 0; } .oneid-image__overlay-content { position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: 6; opacity: 1; visibility: visible; -webkit-transition: visibility 0s, opacity 0.2s linear; transition: visibility 0s, opacity 0.2s linear; } .oneid-image__overlay-content--hidden { visibility: hidden; opacity: 0; } .oneid-image__loading, .oneid-image__error { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; z-index: 1; } .oneid-image__loading { color: var(--td-text-color-secondary); } .oneid-image__error { color: var(--td-text-color-disabled); } .oneid-image-viewer__img-error { height: 440px; width: 440px; background-color: var(--td-bg-color-component-disabled); border-radius: 4px; color: #000000; cursor: inherit; position: absolute; } .oneid-image-viewer__img-error .oneid-image-viewer__img-error-content { position: absolute; height: 100%; width: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -ms-flex-line-pack: center; align-content: center; font: var(--td-font-body-medium); } .oneid-image-viewer__img-error .oneid-image-viewer__img-error-content .oneid-image-viewer__img-error-text { margin-top: var(--td-comp-margin-s); } @-webkit-keyframes modal-image-show { 0% { -webkit-transform: scale(0); transform: scale(0); } to { -webkit-transform: scale(1); transform: scale(1); } } @keyframes modal-image-show { 0% { -webkit-transform: scale(0); transform: scale(0); } to { -webkit-transform: scale(1); transform: scale(1); } } @-webkit-keyframes modal-image-hide { 0% { -webkit-transform: scale(1); transform: scale(1); } to { -webkit-transform: scale(0); transform: scale(0); } } @keyframes modal-image-hide { 0% { -webkit-transform: scale(1); transform: scale(1); } to { -webkit-transform: scale(0); transform: scale(0); } } @-webkit-keyframes modal-mask-show { 0% { opacity: 0; } to { opacity: 1; } } @keyframes modal-mask-show { 0% { opacity: 0; } to { opacity: 1; } } @-webkit-keyframes modal-mask-hide { 0% { opacity: 1; } to { opacity: 0; } } @keyframes modal-mask-hide { 0% { opacity: 1; } to { opacity: 0; } } .oneid-image-viewer-preview-image { position: fixed; top: 0; bottom: 0; left: 0; right: 0; z-index: 3000; overflow: hidden; -webkit-animation: 0.2s cubic-bezier(0.82, 0, 1, 0.9) modal-mask-show; animation: 0.2s cubic-bezier(0.82, 0, 1, 0.9) modal-mask-show; } .oneid-image-viewer-preview-image.oneid-is-hide { -webkit-animation: 0.2s cubic-bezier(0, 0, 0.15, 1) modal-mask-hide forwards; animation: 0.2s cubic-bezier(0, 0, 0.15, 1) modal-mask-hide forwards; } .oneid-image-viewer-preview-image.oneid-is-hide .oneid-image-viewer__modal-pic .oneid-image-viewer__modal-box { -webkit-animation: 0.2s cubic-bezier(0, 0, 0.15, 1) modal-image-hide forwards; animation: 0.2s cubic-bezier(0, 0, 0.15, 1) modal-image-hide forwards; } .oneid-image-viewer-preview-image .oneid-image-viewer__modal-index { text-align: center; font-size: var(--td-font-size-body-medium); color: var(--td-text-color-anti); position: absolute; top: 92px; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); background: rgba(0, 0, 0, 0.4); border-radius: var(--td-radius-default); padding: var(--td-comp-paddingTB-xs) var(--td-comp-paddingLR-s); z-index: 1; } .oneid-image-viewer-preview-image .oneid-image-viewer__modal-mask { position: fixed; top: 0; bottom: 0; left: 0; right: 0; background-color: var(--td-mask-active); height: 100%; width: 100%; -webkit-transition: all 0.2s ease; transition: all 0.2s ease; opacity: 1; } .oneid-image-viewer-preview-image .oneid-image-viewer__modal-pic { height: 0; width: 0; position: absolute; top: 50%; left: 50%; } .oneid-image-viewer-preview-image .oneid-image-viewer__modal-pic .oneid-image-viewer__modal-box { width: 100%; height: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-animation: 0.2s cubic-bezier(0.38, 0, 0.24, 1) modal-image-show; animation: 0.2s cubic-bezier(0.38, 0, 0.24, 1) modal-image-show; } .oneid-image-viewer-preview-image .oneid-image-viewer__modal-pic .oneid-image-viewer__modal-box .oneid-image-viewer__modal-image { display: block; max-width: min(90vw, 1000px); max-height: min(90vh, 800px); -webkit-transition: all 0.2s cubic-bezier(0.38, 0, 0.24, 1); transition: all 0.2s cubic-bezier(0.38, 0, 0.24, 1); -webkit-transform: rotate(0deg); transform: rotate(0deg); -o-object-fit: contain; object-fit: contain; } .oneid-image-viewer-preview-image .oneid-image-viewer__modal-header { width: 100%; position: absolute; top: 0; z-index: 1; height: auto; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; background-color: var(--td-bg-color-container); padding: 0 0 12px 0; } .oneid-image-viewer-preview-image .oneid-image-viewer__modal-header.oneid-is-show { padding: 12px 0; } @-webkit-keyframes preview-icon-range { 0% { -webkit-transform: translate(-50%, 50%) rotateZ(0); transform: translate(-50%, 50%) rotateZ(0); } to { -webkit-transform: translate(-50%, 50%) rotateZ(-180deg); transform: translate(-50%, 50%) rotateZ(-180deg); } } @keyframes preview-icon-range { 0% { -webkit-transform: translate(-50%, 50%) rotateZ(0); transform: translate(-50%, 50%) rotateZ(0); } to { -webkit-transform: translate(-50%, 50%) rotateZ(-180deg); transform: translate(-50%, 50%) rotateZ(-180deg); } } @-webkit-keyframes preview-icon-unrange { 0% { -webkit-transform: translate(-50%, 50%) rotateZ(-180deg); transform: translate(-50%, 50%) rotateZ(-180deg); } to { -webkit-transform: translate(-50%, 50%) rotateZ(0); transform: translate(-50%, 50%) rotateZ(0); } } @keyframes preview-icon-unrange { 0% { -webkit-transform: translate(-50%, 50%) rotateZ(-180deg); transform: translate(-50%, 50%) rotateZ(-180deg); } to { -webkit-transform: translate(-50%, 50%) rotateZ(0); transform: translate(-50%, 50%) rotateZ(0); } } .oneid-image-viewer-preview-image .oneid-image-viewer__modal-header .oneid-image-viewer__header-pre-bt { width: var(--td-comp-size-xxs); height: var(--td-comp-size-xxs); display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; position: absolute; left: 50%; bottom: 0; -webkit-transform: translate(-50%, 50%); transform: translate(-50%, 50%); background-color: var(--td-bg-color-container); color: var(--td-text-color-primary); border-radius: 50%; -webkit-box-shadow: var(--td-shadow-inset-top), var(--td-shadow-inset-right), var(--td-shadow-inset-bottom), var(--td-shadow-inset-left); box-shadow: var(--td-shadow-inset-top), var(--td-shadow-inset-right), var(--td-shadow-inset-bottom), var(--td-shadow-inset-left); -webkit-animation: 0.2s cubic-bezier(0.38, 0, 0.24, 1) 0s 1 normal forwards running preview-icon-unrange; animation: 0.2s cubic-bezier(0.38, 0, 0.24, 1) 0s 1 normal forwards running preview-icon-unrange; } .oneid-image-viewer-preview-image .oneid-image-viewer__modal-header .oneid-image-viewer__header-pre-bt .oneid-icon { font-size: var(--td-font-size-body-large); } .oneid-image-viewer-preview-image .oneid-image-viewer__modal-header .oneid-image-viewer__header-pre-bt:hover { background-color: inherit; } @-webkit-keyframes preview-image-show { 0% { height: 0; } to { height: 40px; } } @keyframes preview-image-show { 0% { height: 0; } to { height: 40px; } } @-webkit-keyframes preview-image-hide { 0% { height: 40px; } to { height: 0; } } @keyframes preview-image-hide { 0% { height: 40px; } to { height: 0; } } .oneid-image-viewer-preview-image .oneid-image-viewer__modal-header.oneid-is-show .oneid-image-viewer__header-prev { -webkit-animation: 0.2s cubic-bezier(0.38, 0, 0.24, 1) 0s 1 normal forwards running preview-image-show; animation: 0.2s cubic-bezier(0.38, 0, 0.24, 1) 0s 1 normal forwards running preview-image-show; } .oneid-image-viewer-preview-image .oneid-image-viewer__modal-header.oneid-is-show .oneid-image-viewer__header-pre-bt { -webkit-animation: 0.2s cubic-bezier(0.38, 0, 0.24, 1) 0s 1 normal forwards running preview-icon-range; animation: 0.2s cubic-bezier(0.38, 0, 0.24, 1) 0s 1 normal forwards running preview-icon-range; } .oneid-image-viewer-preview-image .oneid-image-viewer__modal-header .oneid-image-viewer__header-prev { width: 521.7777777778px; -webkit-animation: 0.2s cubic-bezier(0.38, 0, 0.24, 1) 0s 1 normal forwards running preview-image-hide; animation: 0.2s cubic-bezier(0.38, 0, 0.24, 1) 0s 1 normal forwards running preview-image-hide; display: -webkit-box; display: -ms-flexbox; display: flex; position: relative; overflow: hidden; } .oneid-image-viewer-preview-image .oneid-image-viewer__modal-header .oneid-image-viewer__header-prev::before, .oneid-image-viewer-preview-image .oneid-image-viewer__modal-header .oneid-image-viewer__header-prev::after { content: ""; position: absolute; height: 100%; z-index: 1; width: 71.1111111111px; pointer-events: none; } .oneid-image-viewer-preview-image .oneid-image-viewer__modal-header .oneid-image-viewer__header-prev::before { left: 0; background-image: -webkit-gradient(linear, left top, right top, from(var(--td-bg-color-container)), to(rgba(255, 255, 255, 0))); background-image: linear-gradient(to right, var(--td-bg-color-container), rgba(255, 255, 255, 0)); } .oneid-image-viewer-preview-image .oneid-image-viewer__modal-header .oneid-image-viewer__header-prev::after { right: 0; background-image: -webkit-gradient(linear, left top, right top, from(rgba(255, 255, 255, 0)), to(var(--td-bg-color-container))); background-image: linear-gradient(to right, rgba(255, 255, 255, 0), var(--td-bg-color-container)); } .oneid-image-viewer-preview-image .oneid-image-viewer__header-trans { height: 100%; -webkit-transition: -webkit-transform 0.2s; transition: -webkit-transform 0.2s; transition: transform 0.2s; transition: transform 0.2s, -webkit-transform 0.2s; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; gap: 4px; margin-left: 225.3333333333px; } .oneid-image-viewer-preview-image .oneid-image-viewer__header-box { -webkit-box-sizing: border-box; box-sizing: border-box; width: 71.1111111111px; height: 40px; position: relative; -webkit-transition: 0.2s; transition: 0.2s; overflow: hidden; border-radius: var(--td-radius-default); display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; border: 1px solid transparent; background-color: var(--td-bg-color-secondarycontainer); } .oneid-image-viewer-preview-image .oneid-image-viewer__header-box .oneid-image-viewer__header-img { width: auto; height: 100%; } .oneid-image-viewer-preview-image .oneid-image-viewer__header-box:hover, .oneid-image-viewer-preview-image .oneid-image-viewer__header-box.oneid-is-active { border-color: var(--td-brand-color); } .oneid-image-viewer-preview-image .oneid-image-viewer__modal-icon { cursor: pointer; color: var(--td-text-color-primary); border-radius: var(--td-radius-default); -webkit-transition: 0.2s; transition: 0.2s; } .oneid-image-viewer-preview-image .oneid-image-viewer__modal-icon.oneid-image-viewer__modal-close-bt { top: 100px; right: 40px; } .oneid-image-viewer-preview-image .oneid-image-viewer__modal-icon.oneid-image-viewer__modal-next-bt, .oneid-image-viewer-preview-image .oneid-image-viewer__modal-icon.oneid-image-viewer__modal-prev-bt { top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); } .oneid-image-viewer-preview-image .oneid-image-viewer__modal-icon.oneid-image-viewer__modal-prev-bt { left: 40px; } .oneid-image-viewer-preview-image .oneid-image-viewer__modal-icon.oneid-image-viewer__modal-next-bt { right: 40px; } .oneid-image-viewer-preview-image .oneid-image-viewer__modal-icon.oneid-image-viewer__modal-close-bt, .oneid-image-viewer-preview-image .oneid-image-viewer__modal-icon.oneid-image-viewer__modal-prev-bt, .oneid-image-viewer-preview-image .oneid-image-viewer__modal-icon.oneid-image-viewer__modal-next-bt { position: fixed; z-index: 10; color: var(--td-text-color-anti); background-color: rgba(0, 0, 0, 0.4); border-radius: 50%; width: var(--td-comp-size-xl); height: var(--td-comp-size-xl); display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .oneid-image-viewer-preview-image .oneid-image-viewer__modal-icon .oneid-image-viewer__modal-icon-label { margin-left: 2px; } .oneid-image-viewer-preview-image .oneid-image-viewer__modal-icon.oneid-is-disabled { color: rgba(255, 255, 255, 0.22); } .oneid-image-viewer-preview-image .oneid-image-viewer__modal-icon.oneid-is-disabled:hover { background-color: rgba(0, 0, 0, 0.4); } .oneid-image-viewer-preview-image .oneid-image-viewer__modal-icon:hover { background-color: rgba(0, 0, 0, 0.2); } .oneid-image-viewer__mask { width: 100vh; height: 100vh; left: 0; top: 0; z-index: 99; position: fixed; background-color: transparent; } .oneid-image-viewer__utils { width: 100%; position: absolute; bottom: 32px; z-index: 1; height: auto; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; color: var(--td-text-color-primary); -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .oneid-image-viewer__utils .oneid-image-viewer__utils-content { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; height: 50px; line-height: 100%; background: var(--td-bg-color-container); border-radius: var(--td-radius-medium); padding: 0 var(--td-comp-paddingLR-xs); } .oneid-image-viewer__utils .oneid-image-viewer__utils-content .oneid-image-viewer__modal-icon { margin: 0 var(--td-comp-margin-xs); width: var(--td-comp-size-m); height: var(--td-comp-size-m); display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; border-radius: var(--td-radius-default); -webkit-transition: 0.2s; transition: 0.2s; } .oneid-image-viewer__utils .oneid-image-viewer__utils-content .oneid-image-viewer__modal-icon:hover { background-color: var(--td-bg-color-container-hover); } .oneid-image-viewer__utils .oneid-image-viewer__utils-content .oneid-image-viewer__utils-scale { width: var(--td-comp-size-xl); text-align: center; cursor: inherit; } .oneid-image-viewer__utils .oneid-image-viewer__utils-content .oneid-image-viewer__utils-scale:hover { background-color: var(--td-bg-color-container); } .oneid-image-viewer-mini__footer .oneid-image-viewer__utils { position: inherit; } .oneid-image-viewer-mini__content { max-width: min(90vw, 1000px); max-height: min(90vh, 800px); } @keyframes modal-image-show { 0% { -webkit-transform: scale(0); transform: scale(0); } to { -webkit-transform: scale(1); transform: scale(1); } } .oneid-image-viewer-mini__content .oneid-image-viewer__modal-pic .oneid-image-viewer__modal-box { width: 100%; height: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .oneid-image-viewer-mini__content .oneid-image-viewer__modal-pic .oneid-image-viewer__modal-box .oneid-image-viewer__modal-image { display: block; max-width: min(80vw, 800px); max-height: min(80vh, 600px); -webkit-transition: all 0.2s ease; transition: all 0.2s ease; -webkit-transform: rotate(0deg); transform: rotate(0deg); -o-object-fit: contain; object-fit: contain; } .oneid-image-viewer__dialog.oneid-dialog__ctx--fixed { z-index: 3000; } .oneid-image-viewer__dialog .oneid-dialog__header { padding: 0 var(--td-comp-paddingLR-s); pointer-events: none; } .oneid-image-viewer__dialog .oneid-dialog__header .oneid-image-viewer__dialog-title { pointer-events: all; } .oneid-image-viewer__dialog .oneid-dialog__header .oneid-dialog__close { pointer-events: auto; } .oneid-image-viewer__dialog .oneid-dialog { border-color: var(--td-component-border); overflow: hidden; padding: 0; -webkit-box-shadow: var(--td-shadow-3); box-shadow: var(--td-shadow-3); } .oneid-image-viewer__dialog .oneid-dialog__header { height: 40px; width: 100%; font-size: var(--td-font-size-body-medium); background-color: var(--td-bg-color-secondarycontainer); } .oneid-image-viewer__dialog .oneid-dialog__header-content { margin-left: 32px; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .oneid-image-viewer__dialog .oneid-dialog__close:hover { background-color: var(--td-bg-color-secondarycontainer-hover); } .range-input-disabled.oneid-is-disabled { color: var(--td-text-color-disabled); background-color: var(--td-bg-color-component-disabled); } .range-input-disabled.oneid-is-disabled:hover { border-color: var(--td-border-level-2-color); } .range-input-disabled.oneid-is-disabled .oneid-range-input__inner { cursor: not-allowed; color: var(--td-text-color-disabled); } .range-input-disabled.oneid-is-disabled .oneid-range-input__inner::-webkit-input-placeholder { color: var(--td-text-color-disabled); } .range-input-disabled.oneid-is-disabled .oneid-range-input__inner::-moz-placeholder { color: var(--td-text-color-disabled); } .range-input-disabled.oneid-is-disabled .oneid-range-input__inner:-ms-input-placeholder { color: var(--td-text-color-disabled); } .range-input-disabled.oneid-is-disabled .oneid-range-input__inner::-ms-input-placeholder { color: var(--td-text-color-disabled); } .range-input-disabled.oneid-is-disabled .oneid-range-input__inner::placeholder { color: var(--td-text-color-disabled); } .range-input-disabled.oneid-is-disabled > .oneid-range-input__prefix .oneid-icon, .range-input-disabled.oneid-is-disabled > .oneid-range-input__suffix .oneid-icon { color: var(--td-text-color-disabled); } .oneid-range-input { margin: 0; padding: 0; list-style: none; width: 100%; position: relative; font: var(--td-font-body-medium); height: var(--td-comp-size-m); border-width: 1px; border-style: solid; border-radius: var(--td-radius-default); border-color: var(--td-border-level-2-color); padding: var(--td-comp-paddingTB-xs) var(--td-comp-paddingLR-s) var(--td-comp-paddingTB-xs) var(--td-comp-paddingLR-s); background-color: var(--td-bg-color-specialcomponent); color: var(--td-text-color-primary); font-size: var(--td-font-body-medium); -webkit-box-sizing: border-box; box-sizing: border-box; -webkit-transition: all cubic-bezier(0.38, 0, 0.24, 1) 0.2s; transition: all cubic-bezier(0.38, 0, 0.24, 1) 0.2s; display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; gap: 4px; } .oneid-range-input:hover { border-color: var(--td-brand-color); } .oneid-range-input--borderless:not(.oneid-is-focused) { border-color: transparent; -webkit-transition: all cubic-bezier(0.38, 0, 0.24, 1) 0.2s; transition: all cubic-bezier(0.38, 0, 0.24, 1) 0.2s; } .oneid-range-input--borderless:not(.oneid-is-focused):hover { border-color: var(--td-component-border); cursor: pointer; } .oneid-range-input--borderless:not(.oneid-is-focused).oneid-is-disabled { border: none; background-color: var(--td-bg-color-component-disabled); } .oneid-range-input.oneid-is-focused { z-index: 1; border-color: var(--td-brand-color); -webkit-box-shadow: 0 0 0 2px var(--td-brand-color-focus); box-shadow: 0 0 0 2px var(--td-brand-color-focus); } .oneid-range-input.oneid-is-success { border-color: var(--td-success-color); } .oneid-range-input.oneid-is-success:focus { -webkit-box-shadow: 0 0 0 2px var(--td-success-color-focus); box-shadow: 0 0 0 2px var(--td-success-color-focus); } .oneid-range-input.oneid-is-success.oneid-range-input--focused { -webkit-box-shadow: 0 0 0 2px var(--td-success-color-focus); box-shadow: 0 0 0 2px var(--td-success-color-focus); } .oneid-range-input.oneid-is-success > .oneid-range-input__extra { color: var(--td-success-color); } .oneid-range-input.oneid-is-success > .oneid-range-input__tips { color: var(--td-success-color); font-size: var(--td-font-size-body-small); margin-left: calc(-1 * var(--td-comp-paddingLR-xs)); } .oneid-range-input.oneid-is-warning { border-color: var(--td-warning-color); } .oneid-range-input.oneid-is-warning:focus { -webkit-box-shadow: 0 0 0 2px var(--td-warning-color-focus); box-shadow: 0 0 0 2px var(--td-warning-color-focus); } .oneid-range-input.oneid-is-warning.oneid-range-input--focused { -webkit-box-shadow: 0 0 0 2px var(--td-warning-color-focus); box-shadow: 0 0 0 2px var(--td-warning-color-focus); } .oneid-range-input.oneid-is-warning > .oneid-range-input__extra { color: var(--td-warning-color); } .oneid-range-input.oneid-is-warning > .oneid-range-input__tips { color: var(--td-warning-color); font-size: var(--td-font-size-body-small); margin-left: calc(-1 * var(--td-comp-paddingLR-xs)); } .oneid-range-input.oneid-is-error { border-color: var(--td-error-color); } .oneid-range-input.oneid-is-error:focus { -webkit-box-shadow: 0 0 0 2px var(--td-error-color-focus); box-shadow: 0 0 0 2px var(--td-error-color-focus); } .oneid-range-input.oneid-is-error.oneid-range-input--focused { -webkit-box-shadow: 0 0 0 2px var(--td-error-color-focus); box-shadow: 0 0 0 2px var(--td-error-color-focus); } .oneid-range-input.oneid-is-error > .oneid-range-input__extra { color: var(--td-error-color); } .oneid-range-input.oneid-is-error > .oneid-range-input__tips { color: var(--td-error-color); font-size: var(--td-font-size-body-small); margin-left: calc(-1 * var(--td-comp-paddingLR-xs)); } .oneid-range-input.oneid-is-disabled { color: var(--td-text-color-disabled); background-color: var(--td-bg-color-component-disabled); } .oneid-range-input.oneid-is-disabled:hover { border-color: var(--td-border-level-2-color); } .oneid-range-input.oneid-is-disabled .oneid-range-input__inner { cursor: not-allowed; color: var(--td-text-color-disabled); } .oneid-range-input.oneid-is-disabled .oneid-range-input__inner::-webkit-input-placeholder { color: var(--td-text-color-disabled); } .oneid-range-input.oneid-is-disabled .oneid-range-input__inner::-moz-placeholder { color: var(--td-text-color-disabled); } .oneid-range-input.oneid-is-disabled .oneid-range-input__inner:-ms-input-placeholder { color: var(--td-text-color-disabled); } .oneid-range-input.oneid-is-disabled .oneid-range-input__inner::-ms-input-placeholder { color: var(--td-text-color-disabled); } .oneid-range-input.oneid-is-disabled .oneid-range-input__inner::placeholder { color: var(--td-text-color-disabled); } .oneid-range-input.oneid-is-disabled > .oneid-range-input__prefix .oneid-icon, .oneid-range-input.oneid-is-disabled > .oneid-range-input__suffix .oneid-icon { color: var(--td-text-color-disabled); } .oneid-range-input.oneid-range-input--prefix .oneid-range-input__prefix { height: 100%; text-align: center; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; font-size: var(--td-font-size-body-medium); } .oneid-range-input.oneid-range-input--suffix .oneid-range-input__suffix { height: 100%; text-align: center; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; font-size: var(--td-font-size-body-medium); } .oneid-range-input.oneid-size-l { height: var(--td-comp-size-xl); font: var(--td-font-body-large); padding-top: var(--td-comp-paddingTB-xs); padding-bottom: var(--td-comp-paddingTB-xs); } .oneid-range-input.oneid-size-l .oneid-input { padding: 0 var(--td-comp-margin-s); } .oneid-range-input.oneid-size-s { padding: var(--td-comp-paddingTB-xxs) var(--td-comp-margin-xs); height: var(--td-comp-size-xs); font: var(--td-font-body-small); } .oneid-range-input__inner { height: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: var(--td-comp-margin-s); } .oneid-range-input__inner .oneid-input__wrap { height: 100%; border-radius: var(--td-radius-small); } .oneid-range-input__inner > .oneid-range-input__prefix { -ms-flex-negative: 0; flex-shrink: 0; } .oneid-range-input__inner .oneid-input { padding: 0 var(--td-comp-paddingLR-xs); height: 100%; border: 0; -webkit-box-shadow: none; box-shadow: none; font-size: inherit; border-radius: var(--td-radius-small); } .oneid-range-input__inner .oneid-input:hover { background-color: var(--td-bg-color-container-hover); } .oneid-range-input__inner .oneid-input__inner { width: 100%; height: 100%; line-height: 1; } .oneid-range-input__inner .oneid-input.oneid-is-focused { background-color: var(--td-bg-color-component); } .oneid-range-input__extra { font: var(--td-font-body-small); color: var(--td-text-color-placeholder); } .oneid-range-input__status { position: absolute; right: calc(0px - var(--td-comp-margin-xxxl)); top: 0; } .oneid-range-input.oneid-range-input--suffix .oneid-input__clear { opacity: 0; visibility: hidden; -webkit-transition: all cubic-bezier(0.38, 0, 0.24, 1) 0.2s; transition: all cubic-bezier(0.38, 0, 0.24, 1) 0.2s; } .oneid-range-input.oneid-range-input--suffix:hover .oneid-input__clear { opacity: 1; visibility: visible; } .oneid-range-input .oneid-range-input__suffix-clear { cursor: pointer; } .oneid-range-input__prefix > .oneid-icon, .oneid-range-input__suffix > .oneid-icon { -webkit-transition: color 0.2s linear; transition: color 0.2s linear; font-size: 16px; color: var(--td-text-color-placeholder); -ms-flex-negative: 0; flex-shrink: 0; } .oneid-range-input-popup { width: 100%; } .oneid-range-input-popup--visible .oneid-range-input { border-color: var(--td-brand-color); -webkit-box-shadow: 0 0 0 2px var(--td-brand-color-focus); box-shadow: 0 0 0 2px var(--td-brand-color-focus); } .oneid-range-input-popup--visible .oneid-range-input .oneid-icon-time, .oneid-range-input-popup--visible .oneid-range-input .oneid-icon-calendar { color: var(--td-brand-color); } .oneid-range-input-popup--visible .oneid-range-input .oneid-input.oneid-is-focused { background-color: var(--td-bg-color-component); } .flex-center { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .oneid-time-picker, .oneid-time-range-picker { width: 240px; background: transparent; display: inline-block; position: relative; font: var(--td-font-body-medium); color: var(--td-text-color-primary); -webkit-box-sizing: border-box; box-sizing: border-box; margin: 0; padding: 0; list-style: none; } .oneid-time-picker.oneid-is-disabled, .oneid-time-range-picker.oneid-is-disabled { cursor: not-allowed; } .oneid-time-picker > *:focus, .oneid-time-range-picker > *:focus, .oneid-time-picker > *:active, .oneid-time-range-picker > *:active { outline: 0; } .oneid-time-picker__group, .oneid-time-range-picker__group { position: relative; } .oneid-time-picker__group.active, .oneid-time-range-picker__group.active { border: 1px solid var(--td-brand-color); -webkit-box-shadow: 0 0 2px 2px var(--td-brand-color-focus); box-shadow: 0 0 2px 2px var(--td-brand-color-focus); } .oneid-time-picker__group.active + .oneid-time-picker__icon-wrap > .oneid-time-picker__icon-clear, .oneid-time-range-picker__group.active + .oneid-time-picker__icon-wrap > .oneid-time-picker__icon-clear { display: block; } .oneid-time-picker__group-text, .oneid-time-range-picker__group-text { color: var(--td-text-color-primary); } .oneid-time-picker__group input, .oneid-time-range-picker__group input { cursor: pointer; } .oneid-time-range-picker { width: auto; } .oneid-time-picker__panel { width: 280px; background: transparent; border-radius: var(--td-radius-default); display: inline-block; position: relative; font: var(--td-font-body-medium); --timePickerPanelOffsetTop: 15; --timePickerPanelOffsetBottom: 21; } .oneid-time-picker__panel-body { width: 100%; height: calc((var(--td-comp-size-xs) + var(--td-size-3)) * 7 + var(--td-size-3)); position: relative; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .oneid-time-picker__panel-body-active-mask { position: absolute; top: 50%; height: var(--td-comp-size-xs); width: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; } .oneid-time-picker__panel-body-active-mask > div { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; -webkit-transform: translateY(calc(0px - (var(--td-comp-size-xs) + var(--td-size-3)) / 2)); transform: translateY(calc(0px - (var(--td-comp-size-xs) + var(--td-size-3)) / 2)); height: var(--td-comp-size-xs); background-color: var(--td-brand-color-light); margin: var(--td-size-3) var(--td-comp-margin-xs); border-radius: var(--td-radius-default); } .oneid-time-picker__panel-body-scroll { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; height: 100%; overflow-y: scroll; text-align: center; position: relative; list-style: none; padding: 0; margin: 0; } .oneid-time-picker__panel-body-scroll::-webkit-scrollbar { width: 0; } .oneid-time-picker__panel-body-scroll::after, .oneid-time-picker__panel-body-scroll::before { display: block; height: 50%; content: ""; } .oneid-time-picker__panel-body-scroll::before { height: calc(50% - var(--timePickerPanelOffsetTop, 0) * 1px); } .oneid-time-picker__panel-body-scroll::after { height: calc(50% - var(--timePickerPanelOffsetBottom, 0) * 1px); } .oneid-time-picker__panel-body-scroll:last-child { border-right: 0; } .oneid-time-picker__panel-body-scroll-item { height: var(--td-comp-size-xs); font: var(--td-font-body-medium); line-height: var(--td-comp-size-xs); color: var(--td-text-color-secondary); margin: var(--td-size-3) var(--td-comp-margin-xs); border-radius: var(--td-radius-default); text-align: center; cursor: pointer; -webkit-transition: 0.2s linear; transition: 0.2s linear; } .oneid-time-picker__panel-body-scroll-item:not(.oneid-time-picker__panel-body-scroll-item.oneid-is-current):not(.oneid-time-picker__panel-body-scroll-item.oneid-is-disabled):hover { color: var(--td-text-color-primary); } .oneid-time-picker__panel-body-scroll-item:not(.oneid-time-picker__panel-body-scroll-item.oneid-is-current):not(.oneid-time-picker__panel-body-scroll-item.oneid-is-disabled):active { background-color: var(--td-bg-color-container-hover); } .oneid-time-picker__panel-body-scroll-item.oneid-is-disabled { color: var(--td-text-color-disabled); cursor: not-allowed; } .oneid-time-picker__panel-body-scroll-item.oneid-is-hidden { display: none; cursor: not-allowed; } .oneid-time-picker__panel-body-scroll-item.oneid-is-current { color: var(--td-brand-color); } .oneid-time-picker__panel-section-body { padding: var(--td-pop-padding-xl) calc(var(--td-pop-padding-xl) - var(--td-comp-margin-xs)); } .oneid-time-picker__panel-section-footer { width: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-orient: horizontal; -webkit-box-direction: reverse; -ms-flex-direction: row-reverse; flex-direction: row-reverse; -webkit-box-align: center; -ms-flex-align: center; align-items: center; background-color: transparent; position: relative; border-top: 1px solid var(--td-border-level-1-color); -webkit-box-sizing: border-box; box-sizing: border-box; padding: var(--td-pop-padding-xl); } .oneid-form { color: var(--td-text-color-primary); -webkit-box-sizing: border-box; box-sizing: border-box; margin: 0; padding: 0; list-style: none; font: var(--td-font-body-medium); } .oneid-form:not(.oneid-form-inline) .oneid-form__item:last-of-type { margin: 0; } .oneid-form__item { margin-bottom: var(--td-comp-margin-xxl); } .oneid-form__item.oneid-form__item-with-help { margin-bottom: var(--td-comp-margin-xs); } .oneid-form__item.oneid-form__item-with-extra { margin-bottom: var(--td-comp-margin-xxl); } .oneid-form__label { float: left; padding-right: var(--td-comp-paddingLR-xl); vertical-align: middle; line-height: var(--td-comp-margin-xxxl); color: var(--td-text-color-primary); -webkit-box-sizing: border-box; box-sizing: border-box; white-space: nowrap; } .oneid-form__label--top { float: none; min-height: var(--td-comp-margin-xxxl); } .oneid-form__label--left { text-align: left; } .oneid-form__label--right { text-align: right; } .oneid-form__label--required:not(.oneid-form__label--required-right) label::before { display: inline-block; margin-right: var(--td-comp-margin-xs); color: var(--td-error-color); line-height: var(--td-line-height-body-medium); content: "*"; } .oneid-form__label--required-right label::after { display: inline-block; margin-left: var(--td-comp-margin-xs); color: var(--td-error-color); line-height: var(--td-line-height-body-medium); content: "*"; } .oneid-form__label--colon label::after { content: ":"; position: relative; margin: 0 var(--td-comp-margin-xxs); } .oneid-form__controls { min-height: var(--td-comp-margin-xxxl); display: flow-root; position: relative; } .oneid-form__controls-content { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; min-height: var(--td-comp-margin-xxxl); } .oneid-form__controls .oneid-form__item { margin-bottom: 0; margin-right: var(--td-comp-margin-xxl); } .oneid-form__controls.oneid-is-success .oneid-form__status .oneid-icon { color: var(--td-success-color); } .oneid-form__controls.oneid-is-success .oneid-input__extra { color: var(--td-success-color); } .oneid-form__controls.oneid-form--success-border.oneid-is-success .oneid-input__extra { color: var(--td-success-color); } .oneid-form__controls.oneid-form--success-border.oneid-is-success .oneid-form__controls-content .oneid-input, .oneid-form__controls.oneid-form--success-border.oneid-is-success .oneid-form__controls-content .oneid-select, .oneid-form__controls.oneid-form--success-border.oneid-is-success .oneid-form__controls-content .oneid-radio-button, .oneid-form__controls.oneid-form--success-border.oneid-is-success .oneid-form__controls-content .oneid-cascader, .oneid-form__controls.oneid-form--success-border.oneid-is-success .oneid-form__controls-content .oneid-range-input, .oneid-form__controls.oneid-form--success-border.oneid-is-success .oneid-form__controls-content .oneid-textarea__inner { border-color: var(--td-success-color); } .oneid-form__controls.oneid-form--success-border.oneid-is-success .oneid-form__controls-content .oneid-input--focused, .oneid-form__controls.oneid-form--success-border.oneid-is-success .oneid-form__controls-content .oneid-select--focused, .oneid-form__controls.oneid-form--success-border.oneid-is-success .oneid-form__controls-content .oneid-radio-button--focused, .oneid-form__controls.oneid-form--success-border.oneid-is-success .oneid-form__controls-content .oneid-cascader--focused, .oneid-form__controls.oneid-form--success-border.oneid-is-success .oneid-form__controls-content .oneid-range-input--focused, .oneid-form__controls.oneid-form--success-border.oneid-is-success .oneid-form__controls-content .oneid-textarea__inner--focused { -webkit-box-shadow: 0 0 0 2px var(--td-success-color-focus); box-shadow: 0 0 0 2px var(--td-success-color-focus); } .oneid-form__controls.oneid-form--success-border.oneid-is-success .oneid-form__controls-content .oneid-input .oneid-icon, .oneid-form__controls.oneid-form--success-border.oneid-is-success .oneid-form__controls-content .oneid-select .oneid-icon, .oneid-form__controls.oneid-form--success-border.oneid-is-success .oneid-form__controls-content .oneid-radio-button .oneid-icon, .oneid-form__controls.oneid-form--success-border.oneid-is-success .oneid-form__controls-content .oneid-cascader .oneid-icon, .oneid-form__controls.oneid-form--success-border.oneid-is-success .oneid-form__controls-content .oneid-range-input .oneid-icon, .oneid-form__controls.oneid-form--success-border.oneid-is-success .oneid-form__controls-content .oneid-textarea__inner .oneid-icon, .oneid-form__controls.oneid-form--success-border.oneid-is-success .oneid-form__controls-content .oneid-input .oneid-fake-arrow, .oneid-form__controls.oneid-form--success-border.oneid-is-success .oneid-form__controls-content .oneid-select .oneid-fake-arrow, .oneid-form__controls.oneid-form--success-border.oneid-is-success .oneid-form__controls-content .oneid-radio-button .oneid-fake-arrow, .oneid-form__controls.oneid-form--success-border.oneid-is-success .oneid-form__controls-content .oneid-cascader .oneid-fake-arrow, .oneid-form__controls.oneid-form--success-border.oneid-is-success .oneid-form__controls-content .oneid-range-input .oneid-fake-arrow, .oneid-form__controls.oneid-form--success-border.oneid-is-success .oneid-form__controls-content .oneid-textarea__inner .oneid-fake-arrow { color: var(--td-success-color); } .oneid-form__controls.oneid-form--success-border.oneid-is-success .oneid-form__controls-content .oneid-select > .oneid-select__right-icon:not(.oneid-select__right-icon-clear) { color: var(--td-success-color); } .oneid-form__controls.oneid-form--success-border.oneid-is-success .oneid-form__controls-content .oneid-radio-button:last-child { border-right-color: var(--td-success-color); } .oneid-form__controls.oneid-form--success-border.oneid-is-success .oneid-form__controls-content .oneid-textarea__inner.oneid-is-focused { -webkit-box-shadow: 0 0 0 2px var(--td-success-color-focus); box-shadow: 0 0 0 2px var(--td-success-color-focus); } .oneid-form__controls.oneid-form--success-border.oneid-is-success .oneid-form__controls-content .oneid-cascader.oneid-is-active, .oneid-form__controls.oneid-form--success-border.oneid-is-success .oneid-form__controls-content .oneid-select.oneid-is-active { -webkit-box-shadow: 0 0 0 2px var(--td-success-color-focus); box-shadow: 0 0 0 2px var(--td-success-color-focus); } .oneid-form__controls.oneid-form--success-border.oneid-is-success .oneid-form__controls-content .oneid-form__status .oneid-icon { color: var(--td-success-color); } .oneid-form__status { display: -webkit-box; display: -ms-flexbox; display: flex; margin: 0 var(--td-comp-margin-s); } .oneid-form__status > .oneid-icon { font-size: var(--td-comp-size-xxxs); } .oneid-form__status-without-icon { width: 25px; height: 25px; } .oneid-form__status button { width: var(--td-comp-size-m); } .oneid-form__status button + button { margin-left: var(--td-comp-margin-s); } .oneid-form-inline { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; row-gap: var(--td-comp-margin-l); } .oneid-form-inline .oneid-form__item { margin: 0; min-width: 200px; display: inline-block; margin-right: var(--td-comp-margin-xxl); } .oneid-input__extra, .oneid-input__help { margin: 0; width: 100%; height: auto; min-height: var(--td-line-height-body-small); font: var(--td-font-body-small); color: var(--td-text-color-placeholder); } .oneid-input__extra { position: absolute; bottom: calc(0px - var(--td-line-height-body-small)); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .oneid-is-warning .oneid-input__extra { color: var(--td-warning-color); } .oneid-is-warning .oneid-form__controls-content .oneid-input, .oneid-is-warning .oneid-form__controls-content .oneid-select, .oneid-is-warning .oneid-form__controls-content .oneid-radio-button, .oneid-is-warning .oneid-form__controls-content .oneid-cascader, .oneid-is-warning .oneid-form__controls-content .oneid-range-input, .oneid-is-warning .oneid-form__controls-content .oneid-textarea__inner { border-color: var(--td-warning-color); } .oneid-is-warning .oneid-form__controls-content .oneid-input--focused, .oneid-is-warning .oneid-form__controls-content .oneid-select--focused, .oneid-is-warning .oneid-form__controls-content .oneid-radio-button--focused, .oneid-is-warning .oneid-form__controls-content .oneid-cascader--focused, .oneid-is-warning .oneid-form__controls-content .oneid-range-input--focused, .oneid-is-warning .oneid-form__controls-content .oneid-textarea__inner--focused { -webkit-box-shadow: 0 0 0 2px var(--td-warning-color-focus); box-shadow: 0 0 0 2px var(--td-warning-color-focus); } .oneid-is-warning .oneid-form__controls-content .oneid-input .oneid-icon, .oneid-is-warning .oneid-form__controls-content .oneid-select .oneid-icon, .oneid-is-warning .oneid-form__controls-content .oneid-radio-button .oneid-icon, .oneid-is-warning .oneid-form__controls-content .oneid-cascader .oneid-icon, .oneid-is-warning .oneid-form__controls-content .oneid-range-input .oneid-icon, .oneid-is-warning .oneid-form__controls-content .oneid-textarea__inner .oneid-icon, .oneid-is-warning .oneid-form__controls-content .oneid-input .oneid-fake-arrow, .oneid-is-warning .oneid-form__controls-content .oneid-select .oneid-fake-arrow, .oneid-is-warning .oneid-form__controls-content .oneid-radio-button .oneid-fake-arrow, .oneid-is-warning .oneid-form__controls-content .oneid-cascader .oneid-fake-arrow, .oneid-is-warning .oneid-form__controls-content .oneid-range-input .oneid-fake-arrow, .oneid-is-warning .oneid-form__controls-content .oneid-textarea__inner .oneid-fake-arrow { color: var(--td-warning-color); } .oneid-is-warning .oneid-form__controls-content .oneid-select > .oneid-select__right-icon:not(.oneid-select__right-icon-clear) { color: var(--td-warning-color); } .oneid-is-warning .oneid-form__controls-content .oneid-radio-button:last-child { border-right-color: var(--td-warning-color); } .oneid-is-warning .oneid-form__controls-content .oneid-textarea__inner.oneid-is-focused { -webkit-box-shadow: 0 0 0 2px var(--td-warning-color-focus); box-shadow: 0 0 0 2px var(--td-warning-color-focus); } .oneid-is-warning .oneid-form__controls-content .oneid-cascader.oneid-is-active, .oneid-is-warning .oneid-form__controls-content .oneid-select.oneid-is-active { -webkit-box-shadow: 0 0 0 2px var(--td-warning-color-focus); box-shadow: 0 0 0 2px var(--td-warning-color-focus); } .oneid-is-warning .oneid-form__controls-content .oneid-form__status .oneid-icon { color: var(--td-warning-color); } .oneid-is-error .oneid-input__extra { color: var(--td-error-color); } .oneid-is-error .oneid-form__controls-content .oneid-input, .oneid-is-error .oneid-form__controls-content .oneid-select, .oneid-is-error .oneid-form__controls-content .oneid-radio-button, .oneid-is-error .oneid-form__controls-content .oneid-cascader, .oneid-is-error .oneid-form__controls-content .oneid-range-input, .oneid-is-error .oneid-form__controls-content .oneid-textarea__inner { border-color: var(--td-error-color); } .oneid-is-error .oneid-form__controls-content .oneid-input--focused, .oneid-is-error .oneid-form__controls-content .oneid-select--focused, .oneid-is-error .oneid-form__controls-content .oneid-radio-button--focused, .oneid-is-error .oneid-form__controls-content .oneid-cascader--focused, .oneid-is-error .oneid-form__controls-content .oneid-range-input--focused, .oneid-is-error .oneid-form__controls-content .oneid-textarea__inner--focused { -webkit-box-shadow: 0 0 0 2px var(--td-error-color-focus); box-shadow: 0 0 0 2px var(--td-error-color-focus); } .oneid-is-error .oneid-form__controls-content .oneid-input .oneid-icon, .oneid-is-error .oneid-form__controls-content .oneid-select .oneid-icon, .oneid-is-error .oneid-form__controls-content .oneid-radio-button .oneid-icon, .oneid-is-error .oneid-form__controls-content .oneid-cascader .oneid-icon, .oneid-is-error .oneid-form__controls-content .oneid-range-input .oneid-icon, .oneid-is-error .oneid-form__controls-content .oneid-textarea__inner .oneid-icon, .oneid-is-error .oneid-form__controls-content .oneid-input .oneid-fake-arrow, .oneid-is-error .oneid-form__controls-content .oneid-select .oneid-fake-arrow, .oneid-is-error .oneid-form__controls-content .oneid-radio-button .oneid-fake-arrow, .oneid-is-error .oneid-form__controls-content .oneid-cascader .oneid-fake-arrow, .oneid-is-error .oneid-form__controls-content .oneid-range-input .oneid-fake-arrow, .oneid-is-error .oneid-form__controls-content .oneid-textarea__inner .oneid-fake-arrow { color: var(--td-error-color); } .oneid-is-error .oneid-form__controls-content .oneid-select > .oneid-select__right-icon:not(.oneid-select__right-icon-clear) { color: var(--td-error-color); } .oneid-is-error .oneid-form__controls-content .oneid-radio-button:last-child { border-right-color: var(--td-error-color); } .oneid-is-error .oneid-form__controls-content .oneid-textarea__inner.oneid-is-focused { -webkit-box-shadow: 0 0 0 2px var(--td-error-color-focus); box-shadow: 0 0 0 2px var(--td-error-color-focus); } .oneid-is-error .oneid-form__controls-content .oneid-cascader.oneid-is-active, .oneid-is-error .oneid-form__controls-content .oneid-select.oneid-is-active { -webkit-box-shadow: 0 0 0 2px var(--td-error-color-focus); box-shadow: 0 0 0 2px var(--td-error-color-focus); } .oneid-is-error .oneid-form__controls-content .oneid-form__status .oneid-icon { color: var(--td-error-color); } /** * 颜色 */ /** * 尺寸 */ /** * 字体 */ /** * 动画 */ /** * 间距 */ /** * 位置 */ /** * 边框弧度 */ .oneid-drawer-fade-enter, .oneid-drawer-fade-appear { opacity: 0; -webkit-animation-duration: 0.2s; animation-duration: 0.2s; -webkit-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-timing-function: linear; animation-timing-function: linear; -webkit-animation-play-state: paused; animation-play-state: paused; } .oneid-drawer-fade-exit { -webkit-animation-duration: 0.2s; animation-duration: 0.2s; -webkit-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-timing-function: linear; animation-timing-function: linear; -webkit-animation-play-state: paused; animation-play-state: paused; } .oneid-drawer-fade-enter.oneid-drawer-fade-enter-active, .oneid-drawer-fade-enter.oneid-drawer-fade-enter-active.oneid-drawer-fade-enter-to, .oneid-drawer-fade-appear.oneid-drawer-fade-appear-active, .oneid-drawer-fade-appear.oneid-drawer-fade-appear-active.oneid-drawer-fade-appear-to { -webkit-animation-name: tDrawerFadeIn; animation-name: tDrawerFadeIn; -webkit-animation-duration: 0.2s; animation-duration: 0.2s; -webkit-animation-play-state: running; animation-play-state: running; } .oneid-drawer-fade-exit.oneid-drawer-fade-exit-active, .oneid-drawer-fade-leave-active.oneid-drawer-fade-leave-to { -webkit-animation-name: tDrawerFadeOut; animation-name: tDrawerFadeOut; -webkit-animation-duration: 0.2s; animation-duration: 0.2s; -webkit-animation-play-state: running; animation-play-state: running; } @-webkit-keyframes tDrawerFadeIn { 0% { opacity: 0; } 100% { opacity: 1; } } @keyframes tDrawerFadeIn { 0% { opacity: 0; } 100% { opacity: 1; } } @-webkit-keyframes tDrawerFadeOut { 0% { opacity: 1; } 100% { opacity: 0; } } @keyframes tDrawerFadeOut { 0% { opacity: 1; } 100% { opacity: 0; } } .oneid-drawer { font: var(--td-font-body-medium); color: var(--td-text-color-primary); -webkit-box-sizing: border-box; box-sizing: border-box; margin: 0; padding: 0; list-style: none; position: fixed; z-index: 1500; width: 100%; height: 100%; pointer-events: none; overflow: hidden; outline: none; } .oneid-drawer--lock { overflow: hidden; } .oneid-drawer--attach { position: absolute; } .oneid-drawer--left, .oneid-drawer--right { top: 0; } .oneid-drawer--left { left: 0; } .oneid-drawer--right { right: 0; } .oneid-drawer--top, .oneid-drawer--bottom { left: 0; } .oneid-drawer--top { top: 0; } .oneid-drawer--bottom { bottom: 0; } .oneid-drawer__mask { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: var(--td-mask-active); -webkit-transition: opacity 0.2s cubic-bezier(0.38, 0, 0.24, 1); transition: opacity 0.2s cubic-bezier(0.38, 0, 0.24, 1); opacity: 0; } .oneid-drawer__content-wrapper { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; background: var(--td-bg-color-container); width: 16px; height: 16px; font-size: var(--td-font-body-medium); color: var(--td-text-color-secondary); -webkit-box-shadow: var(--td-shadow-2); box-shadow: var(--td-shadow-2); overflow: hidden; pointer-events: auto; -webkit-transition: visibility 0.28s cubic-bezier(0.38, 0, 0.24, 1), -webkit-transform 0.28s cubic-bezier(0.38, 0, 0.24, 1); transition: visibility 0.28s cubic-bezier(0.38, 0, 0.24, 1), -webkit-transform 0.28s cubic-bezier(0.38, 0, 0.24, 1); transition: transform 0.28s cubic-bezier(0.38, 0, 0.24, 1), visibility 0.28s cubic-bezier(0.38, 0, 0.24, 1); transition: transform 0.28s cubic-bezier(0.38, 0, 0.24, 1), visibility 0.28s cubic-bezier(0.38, 0, 0.24, 1), -webkit-transform 0.28s cubic-bezier(0.38, 0, 0.24, 1); position: relative; } .oneid-drawer .oneid-drawer__content-wrapper { position: absolute; width: 100%; height: 100%; visibility: hidden; } .oneid-drawer .oneid-drawer__content-wrapper--left, .oneid-drawer .oneid-drawer__content-wrapper--right { top: 0; } .oneid-drawer .oneid-drawer__content-wrapper--left { left: 0; -webkit-transform: translateX(-100%); transform: translateX(-100%); } .oneid-drawer .oneid-drawer__content-wrapper--right { right: 0; -webkit-transform: translateX(100%); transform: translateX(100%); } .oneid-drawer .oneid-drawer__content-wrapper--top, .oneid-drawer .oneid-drawer__content-wrapper--bottom { left: 0; } .oneid-drawer .oneid-drawer__content-wrapper--top { top: 0; -webkit-transform: translateY(-100%); transform: translateY(-100%); } .oneid-drawer .oneid-drawer__content-wrapper--bottom { bottom: 0; -webkit-transform: translateY(100%); transform: translateY(100%); } .oneid-drawer__header { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; min-height: var(--td-comp-size-xxxl); padding: 0 var(--td-comp-paddingLR-l); font: var(--td-font-title-medium); color: var(--td-text-color-primary); border-bottom: 1px solid var(--td-border-level-1-color); border-radius: var(--td-radius-small) var(--td-radius-small) 0 0; -webkit-box-sizing: border-box; box-sizing: border-box; } .oneid-drawer__body { padding: var(--td-comp-paddingTB-l) var(--td-comp-paddingLR-l); overflow: auto; -webkit-box-flex: 1; -ms-flex: 1; flex: 1; } .oneid-drawer__footer { width: 100%; padding: var(--td-comp-paddingTB-l) var(--td-comp-paddingLR-l); text-align: left; border-top: 1px solid var(--td-border-level-1-color); background-color: var(--td-bg-color-container); -webkit-box-sizing: border-box; box-sizing: border-box; } .oneid-drawer__footer .oneid-button { margin-left: var(--td-comp-margin-s); } .oneid-drawer__footer .oneid-button:first-child { margin-left: 0; } .oneid-drawer__close-btn { position: absolute; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; width: var(--td-comp-size-xs); height: var(--td-comp-size-xs); top: calc((var(--td-comp-size-xxxl) - var(--td-comp-size-xs)) / 2); right: var(--td-comp-margin-s); color: var(--td-text-color-primary); background-color: var(--td-bg-color-container); border-radius: var(--td-radius-default); cursor: pointer; -webkit-transition: background-color 0.2s; transition: background-color 0.2s; } .oneid-drawer__close-btn:hover { background-color: var(--td-bg-color-container-hover); } .oneid-drawer__close-btn:active { background-color: var(--td-bg-color-container-active); } .oneid-drawer__close-btn .oneid-icon { font-size: calc(var(--td-font-size-body-medium) + 2px); vertical-align: unset; } .oneid-drawer--open { width: 100%; height: 100%; pointer-events: auto; } .oneid-drawer--open > .oneid-drawer__content-wrapper { visibility: visible; } .oneid-drawer--open > .oneid-drawer__mask { opacity: 1; width: 100%; height: 100%; } .oneid-drawer--without-mask { pointer-events: none; } [tabindex="-1"]:focus { outline: none !important; /* stylelint-disable-line */ } .oneid-progress { font: var(--td-font-body-medium); color: var(--td-text-color-primary); -webkit-box-sizing: border-box; box-sizing: border-box; margin: 0; padding: 0; list-style: none; } .oneid-progress__inner { position: relative; height: 100%; background: var(--td-brand-color); border-radius: var(--td-radius-round); -webkit-transition: all 0.2s cubic-bezier(0.38, 0, 0.24, 1); transition: all 0.2s cubic-bezier(0.38, 0, 0.24, 1); } .oneid-progress__info { margin-left: var(--td-comp-margin-s); color: var(--td-text-color-primary); white-space: nowrap; display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; } .oneid-progress__icon { font-size: calc(var(--td-font-size-body-medium) + 2px); } .oneid-progress__bar { width: 100%; height: var(--td-size-3); overflow: hidden; background: var(--td-bg-color-component); border-radius: var(--td-radius-round); } .oneid-progress--thin { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .oneid-progress--plump { height: var(--td-comp-size-xxs); border-radius: calc(var(--td-comp-size-xxs) / 2); display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .oneid-progress--plump .oneid-progress__info { font-size: var(--td-font-size-body-small); } .oneid-progress--over-ten .oneid-progress__info { position: absolute; top: 50%; z-index: 10; right: var(--td-comp-margin-s); color: var(--td-text-color-anti); -webkit-transform: translateY(-50%); transform: translateY(-50%); } .oneid-progress--under-ten .oneid-progress__info, .oneid-progress--under-ten .oneid-progress__inner { display: inline-block; } .oneid-progress--under-ten .oneid-progress__info { vertical-align: top; } .oneid-progress--circle { position: relative; } .oneid-progress--circle .oneid-progress__info { position: absolute; display: block; top: 50%; left: 50%; width: 100%; margin: 0; font-size: inherit; font-weight: 600; line-height: 1; text-align: center; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } .oneid-progress--circle .oneid-progress__circle-outer { stroke: var(--td-bg-color-component); } .oneid-progress--circle .oneid-progress__circle-inner { stroke: var(--td-brand-color); -webkit-transition: all 0.2s cubic-bezier(0.38, 0, 0.24, 1); transition: all 0.2s cubic-bezier(0.38, 0, 0.24, 1); } .oneid-progress--circle .oneid-progress__icon { font-size: 2.4em; } .oneid-progress--status--active .oneid-progress__inner::before { position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 1; content: ""; -webkit-animation: progress-active-animation 2s cubic-bezier(0.23, 0.99, 0.86, 0.2) infinite; animation: progress-active-animation 2s cubic-bezier(0.23, 0.99, 0.86, 0.2) infinite; background: var(--td-text-color-anti); opacity: 0.2; } .oneid-progress--status--success .oneid-progress__inner { background: var(--td-success-color); } .oneid-progress--status--success .oneid-progress__circle-inner { stroke: var(--td-success-color); } .oneid-progress--status--success .oneid-progress__icon { color: var(--td-success-color); } .oneid-progress--status--warning .oneid-progress__inner { background: var(--td-warning-color); } .oneid-progress--status--warning .oneid-progress__circle-inner { stroke: var(--td-warning-color); } .oneid-progress--status--warning .oneid-progress__icon { color: var(--td-warning-color); } .oneid-progress--status--error .oneid-progress__inner { background: var(--td-error-color); } .oneid-progress--status--error .oneid-progress__circle-inner { stroke: var(--td-error-color); } .oneid-progress--status--error .oneid-progress__icon { color: var(--td-error-color); } @-webkit-keyframes progress-active-animation { 0% { width: 0; opacity: 0.1; } 35% { width: 50%; opacity: 0.4; } 100% { width: 100%; opacity: 0; } } @keyframes progress-active-animation { 0% { width: 0; opacity: 0.1; } 35% { width: 50%; opacity: 0.4; } 100% { width: 100%; opacity: 0; } } .oneid-popconfirm { font: var(--td-font-body-medium); color: var(--td-text-color-primary); -webkit-box-sizing: border-box; box-sizing: border-box; margin: 0; padding: 0; list-style: none; min-width: 160px; border-radius: var(--td-radius-medium); } .oneid-popconfirm .oneid-popup__content { padding: 0; } .oneid-popconfirm.oneid-popup[data-popper-placement^=top] .oneid-popup__arrow { bottom: -4px; } .oneid-popconfirm__content { position: relative; padding: var(--td-comp-paddingTB-l) var(--td-comp-paddingLR-l); border-radius: var(--td-radius-medium); } .oneid-popconfirm__body { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; text-align: left; } .oneid-popconfirm__body > .oneid-icon { display: inline-block; margin-right: var(--td-comp-margin-s); padding: calc((var(--td-line-height-body-medium) - (var(--td-font-size-body-medium) + 6px)) / 2) 0; font-size: calc(var(--td-font-size-body-medium) + 6px); } .oneid-popconfirm__confirm { margin-left: var(--td-comp-margin-s); } .oneid-popconfirm__inner { display: inline-block; vertical-align: top; max-width: 320px; font: var(--td-font-body-medium); color: var(--td-text-color-primary); } .oneid-popconfirm__icon--warning { color: var(--td-warning-color); } .oneid-popconfirm__icon--danger { color: var(--td-error-color); } .oneid-popconfirm__icon--default { color: var(--td-brand-color); } .oneid-popconfirm__buttons { text-align: right; margin-top: var(--td-comp-margin-l); } .oneid-popconfirm__buttons > span:last-child { margin-right: 0; } .oneid-textarea { font: var(--td-font-body-medium); color: var(--td-text-color-primary); -webkit-box-sizing: border-box; box-sizing: border-box; margin: 0; padding: 0; list-style: none; position: relative; width: 100%; } .oneid-textarea__inner { display: -webkit-box; display: -ms-flexbox; display: flex; width: 100%; height: var(--td-comp-size-xxxl); border: 1px solid var(--td-border-level-2-color); border-radius: var(--td-radius-default); padding: calc((var(--td-comp-size-m) - var(--td-line-height-body-medium)) / 2) var(--td-comp-paddingLR-s); background-color: var(--td-bg-color-specialcomponent); font: var(--td-font-body-medium); color: var(--td-text-color-primary); resize: vertical; outline: none; -webkit-transition: all cubic-bezier(0.38, 0, 0.24, 1) 0.2s, height 0s; transition: all cubic-bezier(0.38, 0, 0.24, 1) 0.2s, height 0s; -webkit-box-sizing: border-box; box-sizing: border-box; } .oneid-textarea__inner:hover { border-color: var(--td-brand-color); } .oneid-textarea__inner:focus { border-color: var(--td-brand-color); -webkit-box-shadow: 0 0 0 2px var(--td-brand-color-focus); box-shadow: 0 0 0 2px var(--td-brand-color-focus); } .oneid-textarea__inner::-webkit-input-placeholder { color: var(--td-text-color-placeholder); } .oneid-textarea__inner::-moz-placeholder { color: var(--td-text-color-placeholder); } .oneid-textarea__inner:-ms-input-placeholder { color: var(--td-text-color-placeholder); } .oneid-textarea__inner::-ms-input-placeholder { color: var(--td-text-color-placeholder); } .oneid-textarea__inner::placeholder { color: var(--td-text-color-placeholder); } .oneid-textarea__inner.oneid-is-success { border-color: var(--td-success-color); } .oneid-textarea__inner.oneid-is-success:focus { -webkit-box-shadow: 0 0 0 2px var(--td-success-color-focus); box-shadow: 0 0 0 2px var(--td-success-color-focus); } .oneid-textarea__inner.oneid-is-warning { border-color: var(--td-warning-color); } .oneid-textarea__inner.oneid-is-warning:focus { -webkit-box-shadow: 0 0 0 2px var(--td-warning-color-focus); box-shadow: 0 0 0 2px var(--td-warning-color-focus); } .oneid-textarea__inner.oneid-is-error { border-color: var(--td-error-color); } .oneid-textarea__inner.oneid-is-error:focus { -webkit-box-shadow: 0 0 0 2px var(--td-error-color-focus); box-shadow: 0 0 0 2px var(--td-error-color-focus); } .oneid-textarea__info_wrapper { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-column-gap: var(--td-comp-margin-s); -moz-column-gap: var(--td-comp-margin-s); column-gap: var(--td-comp-margin-s); -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } .oneid-textarea__info_wrapper_align { -webkit-box-pack: end; -ms-flex-pack: end; justify-content: end; } .oneid-textarea__limit { font: var(--td-font-body-small); color: var(--td-text-color-placeholder); } .oneid-textarea .oneid-is-disabled { color: var(--td-text-color-disabled); background-color: var(--td-bg-color-component-disabled); cursor: not-allowed; } .oneid-textarea .oneid-is-disabled:hover { border-color: var(--td-border-level-2-color); } .oneid-textarea .oneid-is-disabled::-webkit-input-placeholder { color: var(--td-text-color-disabled); } .oneid-textarea .oneid-is-disabled::-moz-placeholder { color: var(--td-text-color-disabled); } .oneid-textarea .oneid-is-disabled:-ms-input-placeholder { color: var(--td-text-color-disabled); } .oneid-textarea .oneid-is-disabled::-ms-input-placeholder { color: var(--td-text-color-disabled); } .oneid-textarea .oneid-is-disabled::placeholder { color: var(--td-text-color-disabled); } .oneid-textarea .oneid-resize-none { resize: none; } .oneid-textarea__tips { height: auto; min-height: var(--td-comp-size-xs); font: var(--td-font-body-small); display: inline-block; } .oneid-textarea__tips--normal { color: var(--td-text-color-placeholder); } .oneid-textarea__tips--success { color: var(--td-success-color); } .oneid-textarea__tips--warning { color: var(--td-warning-color); } .oneid-textarea__tips--error { color: var(--td-error-color); } @-webkit-keyframes changeColor { from { color: var(--td-brand-color-hover); } to { color: var(--td-brand-color-active); } } @keyframes changeColor { from { color: var(--td-brand-color-hover); } to { color: var(--td-brand-color-active); } } .oneid-breadcrumb { color: var(--td-text-color-primary); -webkit-box-sizing: border-box; box-sizing: border-box; margin: 0; padding: 0; list-style: none; font: var(--td-font-body-medium); display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .oneid-breadcrumb__separator { margin: 0 var(--td-comp-margin-xs); display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .oneid-breadcrumb__separator .oneid-icon { color: var(--td-text-color-placeholder); } .oneid-breadcrumb__item { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; color: var(--td-text-color-placeholder); text-decoration: none; } .oneid-breadcrumb__item.oneid-is-current { color: var(--td-text-color-primary); } .oneid-breadcrumb__item.oneid-is-current .oneid-icon { color: var(--td-text-color-placeholder); } .oneid-breadcrumb__item:last-child { color: var(--td-text-color-primary); } .oneid-breadcrumb__item:last-child .oneid-breadcrumb__separator { display: none; } .oneid-breadcrumb__item .oneid-icon { font-size: var(--td-font-size-body-large); } .oneid-breadcrumb__item .oneid-link { color: inherit; text-decoration: none; } .oneid-breadcrumb__item .oneid-link:hover { color: var(--td-brand-color); } .oneid-breadcrumb__item .oneid-is-disabled { cursor: not-allowed; } .oneid-breadcrumb__item .oneid-is-disabled .oneid-breadcrumb__inner { color: var(--td-text-color-disabled); } .oneid-breadcrumb__item .oneid-is-disabled .oneid-breadcrumb__inner:hover { color: var(--td-text-color-disabled); cursor: not-allowed; } .oneid-breadcrumb__item .oneid-is-disabled .oneid-breadcrumb__inner:active { -webkit-animation: none; animation: none; } .oneid-breadcrumb__item--arrow { margin: 0 var(--td-comp-margin-xs); line-height: 0; color: var(--td-text-color-placeholder); display: inline-block; vertical-align: middle; } .oneid-breadcrumb__item--slash { margin: 0 var(--td-comp-margin-xs); line-height: 0; color: var(--td-text-color-placeholder); display: inline-block; vertical-align: middle; } .oneid-breadcrumb__inner { font: var(--td-font-body-medium); word-break: break-all; display: inline-block; vertical-align: middle; } .oneid-breadcrumb__inner .oneid-icon { margin: 0 var(--td-comp-margin-xs); } .oneid-breadcrumb__select { position: relative; } .oneid-breadcrumb__select:hover .oneid-breadcrumb__option { display: block; } .oneid-breadcrumb__select-item:hover .oneid-icon { color: var(--td-brand-color); } .oneid-breadcrumb__option { display: none; position: absolute; top: 28px; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); max-width: 120px; background: var(--td-bg-color-container); -webkit-box-shadow: var(--td-shadow-2); box-shadow: var(--td-shadow-2); z-index: 20; } .oneid-breadcrumb__option-item { padding: 8px; font: var(--td-font-body-medium); color: var(--td-text-color-primary); text-overflow: ellipsis; overflow: hidden; white-space: nowrap; } .oneid-breadcrumb__option-item:hover { color: var(--td-brand-color); } .oneid-breadcrumb__option-item.oneid-is-active { color: var(--td-brand-color); } .oneid-breadcrumb__inner-msg { display: none; position: absolute; left: 50%; bottom: 30px; -webkit-transform: translateX(-50%); transform: translateX(-50%); width: 300px; padding: 8px; color: var(--td-text-color-primary); background: var(--td-bg-color-container); border-radius: calc(var(--td-radius-default) * 0.5); -webkit-box-shadow: var(--td-shadow-2); box-shadow: var(--td-shadow-2); z-index: 20; } .oneid-breadcrumb__inner-msg::before { content: ""; position: absolute; bottom: -8px; left: 50%; margin-left: -4px; width: 0; height: 0; border-style: solid; border-width: 8px 6px 0; border-color: var(--td-bg-color-container) transparent transparent transparent; z-index: 20; } .oneid-breadcrumb--text-overflow { position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .oneid-breadcrumb--text-overflow:hover .oneid-breadcrumb__inner-msg { display: block; } .oneid-breadcrumb--text-overflow .oneid-breadcrumb__inner { max-width: 120px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-transition: color 0.2s linear; transition: color 0.2s linear; } .oneid-breadcrumb--text-overflow .oneid-breadcrumb__inner-text { text-overflow: ellipsis; overflow: hidden; white-space: nowrap; } .oneid-breadcrumb--text-overflow .oneid-breadcrumb__inner:hover { color: var(--td-brand-color); cursor: pointer; } .oneid-breadcrumb--text-overflow .oneid-breadcrumb__inner:active { -webkit-animation: 0.2s linear changeColor; animation: 0.2s linear changeColor; } .oneid-dropdown { font: var(--td-font-body-medium); -webkit-box-sizing: border-box; box-sizing: border-box; margin: 0; padding: 0; list-style: none; background-color: var(--td-bg-color-container); font-size: var(--td-font-size-body-medium); color: var(--td-text-color-primary); position: relative; -webkit-box-shadow: var(--td-shadow-2); box-shadow: var(--td-shadow-2); border: 0.5px solid var(--td-component-border); border-radius: var(--td-radius-medium); } .oneid-dropdown__menu { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; border-radius: var(--td-radius-medium); padding: var(--td-pop-padding-m); gap: 2px; overflow-y: auto; overflow-x: hidden; } @-moz-document url-prefix() { .oneid-dropdown__menu { scrollbar-color: var(--td-scrollbar-color) transparent; scrollbar-width: thin; } } .oneid-dropdown__menu::-webkit-scrollbar { width: 8px; height: 8px; } .oneid-dropdown__menu::-webkit-scrollbar-thumb { border: 2px solid transparent; background-clip: content-box; background-color: var(--td-scrollbar-color); border-radius: 15px; } .oneid-dropdown__menu::-webkit-scrollbar-thumb:vertical:hover, .oneid-dropdown__menu::-webkit-scrollbar-thumb:horizontal:hover { background-color: var(--td-scrollbar-hover-color); } .oneid-dropdown__menu .oneid-divider { margin: var(--td-comp-margin-xs) var(--td-comp-margin-s) var(--td-comp-margin-xxs) var(--td-comp-margin-s); color: var(--td-brand-color-light); width: calc(100% - var(--td-comp-margin-s) * 2); } .oneid-dropdown__menu .oneid-dropdown__item-direction { margin: 0 0 0 var(--td-comp-margin-s); } .oneid-dropdown__menu--overflow .oneid-dropdown__submenu-wrapper--right { left: calc(100% - 14px); } .oneid-dropdown__menu--overflow .oneid-dropdown__submenu-wrapper--left { right: calc(100% - 14px); } .oneid-dropdown__submenu { background-color: var(--td-bg-color-container); -webkit-box-shadow: var(--td-shadow-2); box-shadow: var(--td-shadow-2); border-radius: var(--td-radius-medium); border: 0.5px solid var(--td-component-border); z-index: 1100; position: absolute; padding: var(--td-pop-padding-m); display: none; overflow-y: auto; overflow-x: visible; } @-moz-document url-prefix() { .oneid-dropdown__submenu { scrollbar-color: var(--td-scrollbar-color) transparent; scrollbar-width: thin; } } .oneid-dropdown__submenu::-webkit-scrollbar { width: 8px; height: 8px; } .oneid-dropdown__submenu::-webkit-scrollbar-thumb { border: 2px solid transparent; background-clip: content-box; background-color: var(--td-scrollbar-color); border-radius: 15px; } .oneid-dropdown__submenu::-webkit-scrollbar-thumb:vertical:hover, .oneid-dropdown__submenu::-webkit-scrollbar-thumb:horizontal:hover { background-color: var(--td-scrollbar-hover-color); } .oneid-dropdown__submenu ul { list-style: none; display: grid; padding-left: 0; gap: 2px; } .oneid-dropdown__submenu--disabled { visibility: hidden; } .oneid-dropdown__submenu .oneid-dropdown__item-direction { margin: 0 0 0 var(--td-comp-margin-s); } .oneid-dropdown__submenu-wrapper--right { left: calc(100% - 6px); } .oneid-dropdown__submenu-wrapper--left { right: calc(100% - 6px); } .oneid-dropdown__item { border-radius: var(--td-radius-default); font: var(--td-font-body-medium); cursor: pointer; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; outline: none; -webkit-transition: background-color 0.2s cubic-bezier(0.82, 0, 1, 0.9); transition: background-color 0.2s cubic-bezier(0.82, 0, 1, 0.9); white-space: nowrap; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; padding: calc(var(--td-comp-paddingTB-xs) - 1px) var(--td-comp-paddingLR-s); --ripple-color: var(--td-bg-color-container-active); } .oneid-dropdown__item-icon { display: -webkit-box; display: -ms-flexbox; display: flex; color: currentcolor; margin-right: var(--td-comp-margin-s); font-size: var(--td-font-size-body-large); } .oneid-dropdown__item:hover > div > div { display: -webkit-box; display: -ms-flexbox; display: flex; } .oneid-dropdown__item--disabled { cursor: not-allowed; } .oneid-dropdown__item-content { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-flex: 1; -ms-flex: 1; flex: 1; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; max-width: 100%; } .oneid-dropdown__item-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; -webkit-box-flex: 1; -ms-flex: 1; flex: 1; } .oneid-dropdown__item.oneid-dropdown__item--suffix .oneid-dropdown__item-sub-icon { color: currentcolor; font-size: var(--td-font-size-body-large); -ms-flex-negative: 0; flex-shrink: 0; } .oneid-dropdown__item--theme-default { color: var(--td-text-color-primary); } .oneid-dropdown__item--theme-default:hover { background-color: var(--td-bg-color-container-hover); } .oneid-dropdown__item--theme-default:active { background-color: var(--td-bg-color-container-active); } .oneid-dropdown__item--theme-default.oneid-dropdown__item--active { color: var(--td-brand-color); background-color: var(--td-brand-color-light); } .oneid-dropdown__item--theme-default.oneid-dropdown__item--active:hover { background-color: var(--td-bg-color-container-hover); } .oneid-dropdown__item--theme-default.oneid-dropdown__item--active:active { background-color: var(--td-bg-color-container-active); } .oneid-dropdown__item--theme-default.oneid-dropdown__item--disabled { color: var(--td-text-color-disabled); } .oneid-dropdown__item--theme-default.oneid-dropdown__item--disabled:hover { background-color: var(--td-bg-color-container-hover); } .oneid-dropdown__item--theme-default.oneid-dropdown__item--suffix:hover { background-color: var(--td-brand-color-light); color: var(--td-brand-color); } .oneid-dropdown__item--theme-success { color: var(--td-success-color); } .oneid-dropdown__item--theme-success:hover { background-color: var(--td-bg-color-container-hover); } .oneid-dropdown__item--theme-success:active { background-color: var(--td-bg-color-container-active); } .oneid-dropdown__item--theme-success.oneid-dropdown__item--active { background-color: var(--td-success-color-light); } .oneid-dropdown__item--theme-success.oneid-dropdown__item--active:hover { background-color: var(--td-bg-color-container-hover); } .oneid-dropdown__item--theme-success.oneid-dropdown__item--active:active { background-color: var(--td-bg-color-container-active); } .oneid-dropdown__item--theme-success.oneid-dropdown__item-disabled { color: var(--td-text-color-disabled); } .oneid-dropdown__item--theme-success.oneid-dropdown__item-disabled:hover { background-color: var(--td-bg-color-container-hover); } .oneid-dropdown__item--theme-success.oneid-dropdown__item--suffix:hover { background-color: var(--td-success-color-light); } .oneid-dropdown__item--theme-error { color: var(--td-error-color); } .oneid-dropdown__item--theme-error:hover { background-color: var(--td-bg-color-container-hover); } .oneid-dropdown__item--theme-error:active { background-color: var(--td-bg-color-container-active); } .oneid-dropdown__item--theme-error.oneid-dropdown__item--active { background-color: var(--td-error-color-light); } .oneid-dropdown__item--theme-error.oneid-dropdown__item--active:hover { background-color: var(--td-bg-color-container-hover); } .oneid-dropdown__item--theme-error.oneid-dropdown__item--active:active { background-color: var(--td-bg-color-container-active); } .oneid-dropdown__item--theme-error.oneid-dropdown__item--disabled { color: var(--td-text-color-disabled); } .oneid-dropdown__item--theme-error.oneid-dropdown__item--disabled:hover { background-color: var(--td-bg-color-container-hover); } .oneid-dropdown__item--theme-error.oneid-dropdown__item--suffix:hover { background-color: var(--td-error-color-light); } .oneid-dropdown__item--theme-warning { color: var(--td-warning-color); } .oneid-dropdown__item--theme-warning:hover { background-color: var(--td-bg-color-container-hover); } .oneid-dropdown__item--theme-warning:active { background-color: var(--td-bg-color-container-active); } .oneid-dropdown__item--theme-warning.oneid-dropdown__item--active { background-color: var(--td-warning-color-light); } .oneid-dropdown__item--theme-warning.oneid-dropdown__item--active:hover { background-color: var(--td-bg-color-container-hover); } .oneid-dropdown__item--theme-warning.oneid-dropdown__item--active:active { background-color: var(--td-bg-color-container-active); } .oneid-dropdown__item--theme-warning.oneid-dropdown__item--disabled { color: var(--td-text-color-disabled); } .oneid-dropdown__item--theme-warning.oneid-dropdown__item--disabled:hover { background-color: var(--td-bg-color-container-hover); } .oneid-dropdown__item--theme-warning.oneid-dropdown__item--suffix:hover { background-color: var(--td-warning-color-light); } .oneid-slider__input-container { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; margin-left: var(--td-comp-margin-xxl); } .oneid-slider__input-container.is-vertical { padding-top: var(--td-comp-paddingTB-l); margin-left: 0px; } .oneid-slider__input-container .oneid-slider__center-line { width: var(--td-size-4); height: 1px; background: rgba(0, 0, 0, 0.9); margin: 0 var(--td-comp-margin-s); } .oneid-slider { font: var(--td-font-body-medium); color: var(--td-text-color-primary); -webkit-box-sizing: border-box; box-sizing: border-box; margin: 0; padding: 0; list-style: none; height: calc(var(--td-comp-paddingTB-xs) * 2 + var(--td-size-2)); width: 100%; position: relative; padding: var(--td-comp-paddingTB-xs) 0; } .oneid-slider__container { width: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .oneid-slider__container.is-vertical { height: 100%; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } .oneid-slider__rail { position: absolute; width: 100%; height: var(--td-size-2); background-color: var(--td-bg-color-secondarycomponent); -webkit-transition: 0.2s linear; transition: 0.2s linear; border-radius: var(--td-radius-round); } .oneid-slider__rail:hover { background-color: var(--td-bg-color-secondarycomponent-hover); } .oneid-slider__track { position: absolute; height: var(--td-size-2); background-color: var(--td-brand-color); right: auto; border-radius: var(--td-radius-round); } .oneid-slider__step { position: absolute; width: 100%; height: var(--td-size-2); cursor: pointer; } .oneid-slider__button { width: var(--td-comp-size-xxxs); height: var(--td-comp-size-xxxs); border: 2px solid var(--td-brand-color); background-color: #fff; border-radius: var(--td-radius-circle); -webkit-transition: 0.2s; transition: 0.2s; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -webkit-box-sizing: border-box; box-sizing: border-box; -webkit-box-shadow: var(--td-shadow-1); box-shadow: var(--td-shadow-1); } .oneid-slider__button--dragging { -webkit-box-shadow: 0 0 0px 2px var(--td-brand-color-focus); box-shadow: 0 0 0px 2px var(--td-brand-color-focus); } .oneid-slider__button:hover { background-color: var(--td-gray-color-1); } .oneid-slider__button-wrapper { position: absolute; z-index: 2; top: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); background-color: transparent; text-align: center; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; line-height: normal; outline: none; cursor: pointer; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .oneid-slider__stop { position: absolute; width: 1px; height: var(--td-size-2); background-color: var(--td-bg-color-secondarycomponent); top: 4px; } .oneid-slider__mark { position: absolute; top: 2px; left: 0; width: 100%; } .oneid-slider__mark-text { position: absolute; display: inline-block; font: var(--td-font-body-small); color: var(--td-text-color-primary); top: calc(var(--td-size-2) + var(--td-comp-paddingTB-xs) + 2px); -webkit-transform: translateX(-50%); transform: translateX(-50%); cursor: pointer; } .oneid-slider__mark-text:first-child { -webkit-transform: translateX(0%); transform: translateX(0%); } .oneid-slider__mark-text:last-child { -webkit-transform: translateX(-100%); transform: translateX(-100%); } .oneid-slider--vertical { height: 100%; padding: 0; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; position: relative; } .oneid-slider--vertical .oneid-slider__rail { width: var(--td-size-2); height: 100%; } .oneid-slider--vertical .oneid-slider__track { width: var(--td-size-2); top: auto; } .oneid-slider--vertical .oneid-slider__step { width: var(--td-size-2); height: 100%; } .oneid-slider--vertical .oneid-slider__handle { margin-top: -6px; margin-left: -5px; top: auto; -webkit-transform: translateY(50%); transform: translateY(50%); } .oneid-slider--vertical .oneid-slider__mark { top: 0; left: 12px; width: 18px; height: 100%; } .oneid-slider--vertical .oneid-slider__stop { width: var(--td-size-2); height: 1px; left: 4px; background-color: var(--td-bg-color-secondarycomponent); } .oneid-slider--vertical .oneid-slider__mark-text { -webkit-transform: translateY(-50%); transform: translateY(-50%); margin-top: 0; margin-left: var(--td-comp-margin-xxs); } .oneid-slider--vertical .oneid-slider__button-wrapper { top: auto; position: absolute; z-index: 2; left: 50%; -webkit-transform: translate(-50%, 50%); transform: translate(-50%, 50%); background-color: transparent; text-align: center; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; line-height: normal; outline: none; cursor: pointer; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .oneid-is-disabled { cursor: not-allowed; } .oneid-is-disabled .oneid-slider__track { background-color: var(--td-brand-color-disabled); } .oneid-is-disabled .oneid-slider__rail { background-color: var(--td-bg-color-component-disabled); } .oneid-is-disabled .oneid-slider__handle { border: 2px solid var(--td-brand-color-disabled); } .oneid-is-disabled .oneid-slider__button { border-color: var(--td-brand-color-disabled); outline: none; } .oneid-is-disabled .oneid-slider__mark-text { color: var(--td-text-color-disabled); cursor: not-allowed; } .oneid-is-disabled .oneid-slider__button-wrapper { cursor: not-allowed; } .oneid-select-option__highlight-item .oneid-is-highlight { color: var(--td-brand-color); } .oneid-auto-complete { width: 100%; } .oneid-auto-complete .oneid-input__suffix-clear { display: none; } .oneid-auto-complete:hover .oneid-input__suffix-clear { display: inline-block; } .oneid-auto-complete__panel--empty { height: var(--td-comp-size-m); line-height: var(--td-comp-size-m); color: var(--td-text-color-disabled); text-align: center; } .oneid-cascader .oneid-fake-arrow { color: var(--td-text-color-placeholder); } .oneid-cascader .oneid-fake-arrow--active { color: var(--td-brand-color); } .oneid-cascader__popup .oneid-popup__content { padding: 0; -webkit-box-shadow: var(--td-shadow-2); box-shadow: var(--td-shadow-2); border-radius: var(--td-radius-medium); border: 0.5px solid var(--td-component-border); overflow: hidden; } .oneid-cascader__panel { display: -webkit-box; display: -ms-flexbox; display: flex; height: 100%; } .oneid-cascader__panel.oneid-cascader--normal { height: 200px; } .oneid-cascader__panel.oneid-cascader--multiple { height: 280px; } .oneid-cascader__panel--empty { width: 100%; height: var(--td-comp-size-s); line-height: var(--td-comp-size-s); color: var(--td-text-color-disabled); margin: var(--td-pop-padding-m); text-align: center; padding-left: 0; } .oneid-cascader__panel--empty:hover { background: none; cursor: default; } .oneid-cascader__menu { width: 148px; overflow: auto; -webkit-box-sizing: content-box; box-sizing: content-box; padding: var(--td-pop-padding-m); background: var(--td-bg-color-container); } .oneid-cascader__menu.oneid-size-l { padding: var(--td-pop-padding-l); } .oneid-cascader__menu.oneid-size-s { padding: var(--td-pop-padding-s); } .oneid-cascader__menu--segment { border-right: 1px solid var(--td-component-stroke); } .oneid-cascader__menu--filter { width: auto; min-width: 148px; } .oneid-cascader__item { position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; height: var(--td-comp-size-s); font: var(--td-font-body-medium); color: var(--td-text-color-primary); padding: 0 var(--td-comp-paddingLR-s); border-radius: var(--td-radius-default); margin-top: var(--td-comp-margin-xxs); -webkit-transition: background-color 0.2s cubic-bezier(0.82, 0, 1, 0.9); transition: background-color 0.2s cubic-bezier(0.82, 0, 1, 0.9); list-style: none; --ripple-color: var(--td-bg-color-container-active); } .oneid-cascader__item.oneid-size-s { height: var(--td-comp-size-xs); font: var(--td-font-body-small); padding: 0px var(--td-comp-paddingLR-s); } .oneid-cascader__item.oneid-size-l { height: var(--td-comp-size-m); font: var(--td-font-body-large); padding: 0 var(--td-comp-paddingLR-m); } .oneid-cascader__item.oneid-is-disabled { color: var(--td-text-color-disabled); background-color: transparent; cursor: not-allowed; } .oneid-cascader__item-icon.oneid-icon { position: absolute; height: 100%; right: 0; top: 0; background: transparent; margin: 0 8px; font-size: 16px; color: var(--td-text-color-placeholder); } .oneid-cascader__item-icon.oneid-loading { display: -webkit-box; display: -ms-flexbox; display: flex; color: var(--td-text-color-brand); } .oneid-cascader__item.oneid-is-expanded { background: var(--td-brand-color-light); color: var(--td-text-color-brand); } .oneid-cascader__item.oneid-is-expanded .oneid-icon-chevron-right { color: var(--td-text-color-brand); } .oneid-cascader__item.oneid-is-expanded:hover { cursor: pointer; } .oneid-cascader__item:first-child { margin-top: 0; } .oneid-cascader__item .oneid-checkbox { max-width: 100%; } .oneid-cascader__item .oneid-checkbox .oneid-checkbox__input { -ms-flex-negative: 0; flex-shrink: 0; } .oneid-cascader__item .oneid-checkbox .oneid-checkbox__label { display: block; white-space: nowrap; word-wrap: normal; overflow: hidden; text-overflow: ellipsis; } .oneid-cascader__item .oneid-checkbox .oneid-checkbox__label .oneid-cascader__item__label--filter { color: var(--td-text-color-brand); } .oneid-cascader__item--with-icon { padding: 0 calc(var(--td-comp-paddingLR-s) + 14px) 0 var(--td-comp-paddingLR-s); } .oneid-cascader__item--leaf .oneid-checkbox { width: 100%; } .oneid-cascader__item-label { display: block; position: relative; white-space: nowrap; padding: 0; } .oneid-cascader__item-label--ellipsis { white-space: nowrap; word-wrap: normal; overflow: hidden; text-overflow: ellipsis; } .oneid-cascader__item-label--filter { color: var(--td-text-color-brand); } .oneid-cascader__item:hover:not(.oneid-is-expanded):not(.oneid-is-disabled) { background: var(--td-bg-color-container-hover); cursor: pointer; } .oneid-cascader__item.oneid-is-selected { color: var(--td-brand-color); background: var(--td-brand-color-light); } .oneid-cascader__item.oneid-is-selected .oneid-checkbox__label { color: var(--td-brand-color); } .oneid-date-picker, .oneid-date-range-picker { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; font: var(--td-font-body-medium); color: var(--td-text-color-primary); -webkit-box-sizing: border-box; box-sizing: border-box; margin: 0; padding: 0; list-style: none; } .oneid-date-picker__header-controller-month-popup > .oneid-popup__content, .oneid-date-picker__header-controller-year-popup > .oneid-popup__content { max-height: 160px; } .oneid-date-picker__panel-container > .oneid-popup__content, .oneid-date-range-picker__panel-container > .oneid-popup__content { padding: 0; min-width: 280px; } .oneid-date-picker__panel, .oneid-date-range-picker__panel { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } .oneid-date-picker__panel--direction-row, .oneid-date-range-picker__panel--direction-row { -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; } .oneid-date-picker__panel .oneid-time-picker__panel, .oneid-date-range-picker__panel .oneid-time-picker__panel { width: 216px; } .oneid-date-picker__panel .oneid-time-picker__panel-section-body, .oneid-date-range-picker__panel .oneid-time-picker__panel-section-body { padding: 0; } .oneid-date-picker__panel .oneid-time-picker__panel-body, .oneid-date-range-picker__panel .oneid-time-picker__panel-body { margin: 0; } .oneid-date-picker__panel-content, .oneid-date-range-picker__panel-content, .oneid-date-range-picker__panel-content-wrapper { display: -webkit-box; display: -ms-flexbox; display: flex; } .oneid-date-picker__header { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; gap: var(--td-comp-margin-m); width: 100%; } .oneid-date-picker__header-controller { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; gap: var(--td-comp-margin-s); } .oneid-date-picker__header-controller .oneid-date-picker__header-controller-month { width: 80px; display: -webkit-box; display: -ms-flexbox; display: flex; } .oneid-date-picker__header-controller .oneid-date-picker__header-controller-year { width: 78px; display: -webkit-box; display: -ms-flexbox; display: flex; } .oneid-date-picker__table table { width: 100%; border-collapse: collapse; } .oneid-date-picker__table table th { text-align: center; color: var(--td-text-color-secondary); font-weight: 400; } .oneid-date-picker__table table td.oneid-date-picker__cell { text-align: center; font-weight: 500; } .oneid-date-picker__table table th, .oneid-date-picker__table table th.oneid-date-picker__table-header-cell, .oneid-date-picker__table table td.oneid-date-picker__cell { padding: 0; border: 0; line-height: var(--td-line-height-body-medium); } .oneid-date-picker__table table thead::after { content: "-"; display: block; line-height: var(--td-comp-margin-xs); color: transparent; } .oneid-date-picker__table table thead::before { content: "-"; display: block; line-height: var(--td-comp-margin-xs); color: transparent; } .oneid-date-picker__table-week-row { cursor: pointer; position: -webkit-sticky; position: sticky; } .oneid-date-picker__table-week-row .oneid-date-picker__cell:first-child .oneid-date-picker__cell-inner { color: var(--td-text-color-disabled); } .oneid-date-picker__table-week-row .oneid-date-picker__cell:hover .oneid-date-picker__cell-inner { -webkit-box-shadow: none; box-shadow: none; background: none; } .oneid-date-picker__table-week-row::after { content: ""; position: absolute; left: var(--td-comp-margin-xxxl); right: 0; top: calc(var(--td-comp-margin-xs) - 1px); z-index: 10; height: var(--td-comp-size-xs); border-radius: var(--td-radius-default); -webkit-transition: background-color 0.2s linear, border-color 0.2s linear, color 0.2s linear, -webkit-box-shadow 0.2s cubic-bezier(0.38, 0, 0.24, 1); transition: background-color 0.2s linear, border-color 0.2s linear, color 0.2s linear, -webkit-box-shadow 0.2s cubic-bezier(0.38, 0, 0.24, 1); transition: box-shadow 0.2s cubic-bezier(0.38, 0, 0.24, 1), background-color 0.2s linear, border-color 0.2s linear, color 0.2s linear; transition: box-shadow 0.2s cubic-bezier(0.38, 0, 0.24, 1), background-color 0.2s linear, border-color 0.2s linear, color 0.2s linear, -webkit-box-shadow 0.2s cubic-bezier(0.38, 0, 0.24, 1); pointer-events: none; } .oneid-date-picker__table-week-row:hover .oneid-date-picker__cell:first-child .oneid-date-picker__cell-inner { color: var(--td-brand-color); } .oneid-date-picker__table-week-row:hover::after { -webkit-box-shadow: inset 0 0 0 1px var(--td-brand-color); box-shadow: inset 0 0 0 1px var(--td-brand-color); } .oneid-date-picker__table-week-row--active::after { opacity: 1; z-index: 0; background-color: var(--td-brand-color); } .oneid-date-picker__table-week-row--active .oneid-date-picker__cell:first-child .oneid-date-picker__cell-inner { color: var(--td-brand-color); } .oneid-date-picker__table-week-row--active .oneid-date-picker__cell .oneid-date-picker__cell-inner { background: transparent; color: var(--td-text-color-anti); } .oneid-date-picker__table-week-row--range::after { opacity: 1; z-index: 0; background-color: var(--td-brand-color-light); } .oneid-date-picker__table-week-row--range .oneid-date-picker__cell .oneid-date-picker__cell-inner { background: transparent; } .oneid-date-picker__footer { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; padding: var(--td-pop-padding-xl); gap: var(--td-comp-margin-s); } .oneid-date-picker__footer--bottom { border-top: 1px solid var(--td-component-stroke); } .oneid-date-picker__footer--top { border-bottom: 1px solid var(--td-component-stroke); } .oneid-date-picker__footer--left { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; border-right: 1px solid var(--td-component-stroke); } .oneid-date-picker__footer--left .oneid-date-picker__presets { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } .oneid-date-picker__footer--right { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; border-left: 1px solid var(--td-component-stroke); } .oneid-date-picker__footer--right .oneid-date-picker__presets { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } .oneid-date-picker__presets { display: -webkit-box; display: -ms-flexbox; display: flex; gap: var(--td-comp-margin-s); white-space: nowrap; min-width: var(--td-comp-size-xl); } .oneid-date-picker__presets .oneid-button { cursor: pointer; } .oneid-date-picker__presets a { color: var(--td-brand-color); } .oneid-date-picker__presets a:hover { color: var(--td-brand-color-hover); } .oneid-date-picker__panel-time, .oneid-date-range-picker__panel-time { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; gap: calc(var(--td-comp-margin-m) / 2); padding: var(--td-pop-padding-xl) calc(var(--td-pop-padding-xl) - var(--td-comp-margin-xs)); border-left: 1px solid var(--td-component-stroke); } .oneid-date-picker__panel-time-viewer, .oneid-date-range-picker__panel-time-viewer { display: -webkit-box; display: -ms-flexbox; display: flex; height: var(--td-comp-size-m); line-height: var(--td-line-height-body-medium); -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; color: var(--td-text-color-primary); } .oneid-date-picker__panel-time .oneid-time-picker__panel-body, .oneid-date-range-picker__panel-time .oneid-time-picker__panel-body { margin: 0; } .oneid-date-picker__panel-year, .oneid-date-picker__panel-month, .oneid-date-picker__panel-quarter, .oneid-date-picker__panel-week, .oneid-date-picker__panel-date { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; padding: var(--td-pop-padding-xl); gap: var(--td-comp-margin-m); width: 280px; -webkit-box-sizing: border-box; box-sizing: border-box; } .oneid-date-picker__panel-year .oneid-date-picker__cell--hover-highlight + .oneid-date-picker__cell--hover-highlight::before, .oneid-date-picker__panel-month .oneid-date-picker__cell--hover-highlight + .oneid-date-picker__cell--hover-highlight::before, .oneid-date-picker__panel-year .oneid-date-picker__cell--hover-highlight + .oneid-date-picker__cell--hover-highlight::after, .oneid-date-picker__panel-month .oneid-date-picker__cell--hover-highlight + .oneid-date-picker__cell--hover-highlight::after { opacity: 1; left: calc(0px - (var(--td-comp-size-xs) + var(--td-comp-margin-xxl))); } .oneid-date-picker__panel-year .oneid-date-picker__cell--hover-highlight + .oneid-date-picker__cell--active::after, .oneid-date-picker__panel-month .oneid-date-picker__cell--hover-highlight + .oneid-date-picker__cell--active::after { opacity: 1; left: calc(0px - (var(--td-comp-size-xs) + var(--td-comp-margin-xxl))); z-index: 5; } .oneid-date-picker__panel-year .oneid-date-picker__cell--highlight + .oneid-date-picker__cell--highlight::before, .oneid-date-picker__panel-month .oneid-date-picker__cell--highlight + .oneid-date-picker__cell--highlight::before { left: calc(0px - (var(--td-comp-size-xs) + var(--td-comp-margin-xxl))); } .oneid-date-picker__panel-year .oneid-date-picker__header-controller-year, .oneid-date-picker__panel-month .oneid-date-picker__header-controller-year, .oneid-date-picker__panel-quarter .oneid-date-picker__header-controller-year { width: 130px; display: -webkit-box; display: -ms-flexbox; display: flex; } .oneid-date-picker__panel-year .oneid-date-picker__table table tbody, .oneid-date-picker__panel-month .oneid-date-picker__table table tbody, .oneid-date-picker__panel-quarter .oneid-date-picker__table table tbody { width: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; gap: var(--td-comp-margin-m); -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } .oneid-date-picker__panel-year .oneid-date-picker__table table tbody tr, .oneid-date-picker__panel-month .oneid-date-picker__table table tbody tr, .oneid-date-picker__panel-quarter .oneid-date-picker__table table tbody tr { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } .oneid-date-picker__panel-year .oneid-date-picker__cell--disabled + .oneid-date-picker__cell--disabled:before, .oneid-date-picker__panel-month .oneid-date-picker__cell--disabled + .oneid-date-picker__cell--disabled:before, .oneid-date-picker__panel-quarter .oneid-date-picker__cell--disabled + .oneid-date-picker__cell--disabled:before { left: calc(0px - var(--td-comp-size-xxxl)); } .oneid-date-picker__panel-year .oneid-date-picker__cell:nth-child(1), .oneid-date-picker__panel-month .oneid-date-picker__cell:nth-child(1), .oneid-date-picker__panel-quarter .oneid-date-picker__cell:nth-child(1) { text-align: left; } .oneid-date-picker__panel-year .oneid-date-picker__cell:nth-child(3), .oneid-date-picker__panel-month .oneid-date-picker__cell:nth-child(3), .oneid-date-picker__panel-quarter .oneid-date-picker__cell:nth-child(3) { text-align: right; } .oneid-date-picker__panel-year .oneid-date-picker__cell-inner, .oneid-date-picker__panel-month .oneid-date-picker__cell-inner, .oneid-date-picker__panel-quarter .oneid-date-picker__cell-inner { width: var(--td-comp-size-xxl); } .oneid-date-picker__cell { cursor: pointer; position: relative; padding: 0; } .oneid-date-picker__cell::before, .oneid-date-picker__cell::after { content: ""; position: absolute; top: 50%; right: -5%; left: -5%; z-index: 1; opacity: 0; border-radius: var(--td-radius-default); height: var(--td-comp-size-xs); -webkit-transform: translateY(-50%); transform: translateY(-50%); -webkit-transition: opacity 0.2s cubic-bezier(0, 0, 0.15, 1); transition: opacity 0.2s cubic-bezier(0, 0, 0.15, 1); } .oneid-date-picker__cell:hover .oneid-date-picker__cell-inner { -webkit-box-shadow: inset 0 0 0 1px var(--td-brand-color); box-shadow: inset 0 0 0 1px var(--td-brand-color); } .oneid-date-picker__cell-inner { position: relative; z-index: 5; display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; width: var(--td-comp-size-xs); height: var(--td-comp-size-xs); margin: calc(var(--td-comp-margin-xs) - 1px); border-radius: var(--td-radius-default); -webkit-transition: background-color 0.2s linear, border-color 0.2s linear, color 0.2s linear, -webkit-box-shadow 0.2s cubic-bezier(0.38, 0, 0.24, 1); transition: background-color 0.2s linear, border-color 0.2s linear, color 0.2s linear, -webkit-box-shadow 0.2s cubic-bezier(0.38, 0, 0.24, 1); transition: box-shadow 0.2s cubic-bezier(0.38, 0, 0.24, 1), background-color 0.2s linear, border-color 0.2s linear, color 0.2s linear; transition: box-shadow 0.2s cubic-bezier(0.38, 0, 0.24, 1), background-color 0.2s linear, border-color 0.2s linear, color 0.2s linear, -webkit-box-shadow 0.2s cubic-bezier(0.38, 0, 0.24, 1); } .oneid-date-picker__cell--now .oneid-date-picker__cell-inner { color: var(--td-brand-color); background: var(--td-brand-color-light); } .oneid-date-picker__cell--hover-highlight::after { opacity: 1; background-color: var(--td-brand-color-light); } .oneid-date-picker__cell--highlight::before { opacity: 1; background-color: var(--td-brand-color-light); } .oneid-date-picker__cell--highlight.oneid-date-picker__cell--hover-highlight::after { opacity: 1; background-color: rgba(0, 0, 0, 0.06); } .oneid-date-picker__cell--additional:hover .oneid-date-picker__cell-inner { -webkit-box-shadow: none; box-shadow: none; border-color: var(--td-bg-color-container-hover); background-color: var(--td-bg-color-container-hover); } .oneid-date-picker__cell--additional .oneid-date-picker__cell-inner { color: var(--td-text-color-disabled); } .oneid-date-picker__cell--active .oneid-date-picker__cell-inner { color: var(--td-text-color-anti); background-color: var(--td-brand-color); } .oneid-date-picker__cell--active-start::before { opacity: 1; left: calc((var(--td-comp-margin-xs) - 1px) * 2); border-top-left-radius: var(--td-radius-default); border-bottom-left-radius: var(--td-radius-default); } .oneid-date-picker__cell--active-start:hover::before { left: -5%; } .oneid-date-picker__cell--active-end::before { opacity: 1; right: calc((var(--td-comp-margin-xs) - 1px) * 2); border-top-right-radius: var(--td-radius-default); border-bottom-right-radius: var(--td-radius-default); } .oneid-date-picker__cell--active-end:hover::before { right: -5%; } .oneid-date-picker__cell--disabled:hover .oneid-date-picker__cell-inner { -webkit-box-shadow: none; box-shadow: none; background-color: var(--td-bg-color-component-disabled); } .oneid-date-picker__cell--disabled .oneid-date-picker__cell-inner { cursor: not-allowed; color: var(--td-text-color-disabled); background-color: var(--td-bg-color-component-disabled); } .oneid-date-picker__cell--disabled + .oneid-date-picker__cell--disabled::before { opacity: 1; left: calc(0px - var(--td-comp-size-l)); background-color: var(--td-bg-color-component-disabled); border-radius: var(--td-radius-default); } .oneid-date-picker__input--placeholder input { color: var(--td-text-color-placeholder); } .oneid-upload { font: var(--td-font-body-medium); color: var(--td-text-color-primary); -webkit-box-sizing: border-box; box-sizing: border-box; margin: 0; padding: 0; list-style: none; } .oneid-upload .oneid-is-bordered { border: 1px solid var(--td-component-border); } .oneid-upload .oneid-upload__trigger { display: inline-block; } .oneid-upload .oneid-icon { font-size: calc(var(--td-font-size-body-medium) + 2px); -ms-flex-negative: 0; flex-shrink: 0; } .oneid-upload .oneid-icon-check-circle-filled { color: var(--td-success-color); } .oneid-upload .oneid-icon-error-circle-filled { color: var(--td-error-color); } .oneid-upload .oneid-icon-time-filled { color: var(--td-text-color-placeholder); } .oneid-upload .oneid-icon-add { color: var(--td-text-color-primary); } .oneid-upload__list-file { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; width: 100px; height: 100px; margin-right: var(--td-comp-margin-m); overflow: hidden; } .oneid-upload__list-file .oneid-icon { font-size: var(--td-comp-size-xl); color: var(--td-brand-color); } .oneid-upload__list-item { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -ms-flex-align: center; align-items: center; margin-top: var(--td-comp-margin-m); width: 496px; height: 124px; padding: var(--td-comp-paddingTB-m) var(--td-comp-paddingLR-m); border: 1px solid var(--td-component-border); border-radius: var(--td-radius-default); font: var(--td-font-body-medium); } .oneid-upload__list-item.oneid-is--error .oneid-upload__list-name { color: var(--td-error-color); } .oneid-upload__list-item.oneid-is--error .oneid-upload__list-file .oneid-icon { color: var(--td-error-color); } .oneid-upload__list-content { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .oneid-upload-list__control { cursor: pointer; } .oneid-upload-list__control:hover { color: var(--td-error-color); } .oneid-upload__list-img { -o-object-fit: cover; object-fit: cover; max-width: 100%; max-height: 100%; cursor: pointer; } .oneid-upload__list-name { max-width: 200px; white-space: nowrap; word-wrap: normal; overflow: hidden; text-overflow: ellipsis; } .oneid-upload--highlight { color: var(--td-text-color-brand); } .oneid-upload__single-name { margin-right: var(--td-comp-margin-s); } .oneid-upload__card { font: var(--td-font-body-small); overflow: hidden; width: 100%; margin: 0; padding: 0; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; gap: var(--td-comp-margin-s); } .oneid-upload__card .oneid-is-disabled :hover { cursor: not-allowed; } .oneid-upload__card-item { cursor: pointer; -webkit-box-sizing: border-box; box-sizing: border-box; list-style: none; } .oneid-upload__card-item::after { content: ""; display: block; } .oneid-upload__card-item:hover .oneid-upload__card-mask { opacity: 1; -webkit-transition: opacity 0.2s linear; transition: opacity 0.2s linear; } .oneid-upload__card-item.oneid-is--error .oneid-icon-warning_fill { color: var(--td-error-color); margin-bottom: var(--td-comp-margin-s); } .oneid-upload__card-item.oneid-is--error .oneid-upload__card-status { color: var(--td-error-color); } .oneid-upload__card-item.oneid-is-background { -webkit-transition: border-color 0.2s linear; transition: border-color 0.2s linear; } .oneid-upload__card .oneid-icon-loading { margin-bottom: var(--td-comp-margin-s); } .oneid-upload__card-name { max-width: 100%; margin-top: var(--td-comp-margin-s); white-space: nowrap; word-wrap: normal; overflow: hidden; text-overflow: ellipsis; } .oneid-upload__card-content { position: relative; width: 110px; height: 110px; overflow: hidden; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-sizing: border-box; box-sizing: border-box; background-color: var(--td-bg-color-secondarycontainer); border: 1px dashed var(--td-component-border); padding: var(--td-comp-paddingTB-s) var(--td-comp-paddingLR-s); border-radius: var(--td-radius-default); } .oneid-upload__card-container { width: 110px; height: 110px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; background-color: var(--td-bg-color-secondarycontainer); border: 1px dashed var(--td-component-border); -webkit-box-sizing: border-box; box-sizing: border-box; position: relative; border-radius: var(--td-radius-default); -webkit-transition: border 0.2s linear; transition: border 0.2s linear; } .oneid-upload__card-container:hover:not(.oneid-is-disabled) { border-color: var(--td-brand-color); -webkit-transition: border-color 0.2s linear; transition: border-color 0.2s linear; } .oneid-upload__card-container > .oneid-icon { color: var(--td-text-color-placeholder); } .oneid-upload__card-container > .oneid-icon, .oneid-upload__card-container .oneid-loading { font-size: var(--td-comp-size-xs); margin-bottom: var(--td-comp-margin-s); } .oneid-upload__card-container > p, .oneid-upload__card-container .oneid-upload__add-text { color: var(--td-text-color-placeholder); margin: 0; } .oneid-upload__card-status-wrap { text-align: center; } .oneid-upload__card-status-wrap > svg { margin-bottom: var(--td-comp-margin-s); } .oneid-upload__card-status-wrap .oneid-icon, .oneid-upload__card-status-wrap .oneid-loading { font-size: var(--td-comp-size-xs); } .oneid-upload__card-image { max-width: 100%; max-height: 100%; width: 100%; height: 100%; } .oneid-upload__card-status { color: var(--td-text-color-disabled); font: var(--td-font-body-small); } .oneid-upload__card-mask { background-color: var(--td-mask-active); color: var(--td-text-color-anti); will-change: transform; opacity: 0; z-index: 2; -webkit-transition: opacity 0.2s linear; transition: opacity 0.2s linear; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; position: absolute; left: 0; right: 0; top: 0; bottom: 0; } .oneid-upload__card-mask-item-divider { margin: 0 var(--td-comp-margin-l); border-left: 1px var(--td-text-color-anti) solid; height: var(--td-comp-size-xxxs); } .oneid-upload__card-mask-item > .oneid-icon { cursor: pointer; font-size: calc(var(--td-font-size-body-medium) + 2px); } .oneid-upload__dialog .oneid-dialog { max-width: 80%; } .oneid-upload__dialog .oneid-dialog--default { padding: 32px; } .oneid-upload__dialog .oneid-dialog-body { padding-bottom: 0; } .oneid-upload__dialog .oneid-dialog-body-img-box img { display: block; max-width: 100%; max-height: 100%; } .oneid-upload__dragger { display: -webkit-box; display: -ms-flexbox; display: flex; width: 336px; height: 144px; border: 1px dashed var(--td-component-border); border-radius: var(--td-radius-small); font: var(--td-font-body-medium); color: var(--td-text-color-secondary); cursor: pointer; padding: var(--td-comp-margin-l); position: relative; overflow: auto; -webkit-box-sizing: border-box; box-sizing: border-box; -webkit-transition: border-color 0.2s linear; transition: border-color 0.2s linear; } .oneid-upload__dragger.oneid-is--active { background-color: var(--td-bg-color-container-active); border-color: var(--td-brand-color); } .oneid-upload__dragger:hover { border-color: var(--td-brand-color); } .oneid-upload__dragger-btns { position: absolute; bottom: var(--td-comp-margin-l); } .oneid-upload__dragger .oneid-size-s { display: block; } .oneid-upload__dragger-center { -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .oneid-upload__dragger-error { border-color: var(--td-error-color); } .oneid-upload__dragger-error:hover { border-color: var(--td-error-color); } .oneid-upload__dragger-text { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; font: var(--td-font-body-medium); color: var(--td-text-color-primary); margin-bottom: var(--td-comp-margin-s); max-width: calc(336px - var(--td-comp-margin-l) * 2 - 0); } .oneid-upload__dragger-text .oneid-upload__single-name { white-space: nowrap; word-wrap: normal; overflow: hidden; text-overflow: ellipsis; } .oneid-upload__tips { display: block; color: var(--td-text-color-placeholder); margin-top: var(--td-comp-margin-s); font: var(--td-font-body-small); } .oneid-upload__tips.oneid-upload__tips-error { color: var(--td-error-color); } .oneid-upload__tips.oneid-upload__tips-warn { color: var(--td-warning-color); } .oneid-upload__placeholder { color: var(--td-text-color-placeholder); } .oneid-upload__display-text--margin { margin-top: var(--td-comp-margin-s); } .oneid-upload__single-display-text { color: var(--td-text-color-secondary); font: var(--td-font-body-small); display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .oneid-upload__single-display-text .oneid-upload__flow-status .oneid-icon { font-size: calc(var(--td-font-size-body-medium) + 2px); } .oneid-icon-clear-circle-filled { color: var(--td-text-color-placeholder); margin-top: var(--td-comp-margin-xxs); -webkit-transition: color 0.2s linear; transition: color 0.2s linear; } .oneid-icon-clear-circle-filled:hover { color: var(--td-text-color-secondary); cursor: pointer; -webkit-transition: color 0.2s linear; transition: color 0.2s linear; } .oneid-upload__single-percent { margin-left: var(--td-comp-margin-xs); } .oneid-upload__single-progress { color: var(--td-brand-color); display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .oneid-upload__single-progress .oneid-loading { font-size: calc(var(--td-font-size-body-medium) + 2px); -ms-flex-negative: 0; flex-shrink: 0; } .oneid-upload__single-input-delete { margin-left: var(--td-comp-margin-l); font: var(--td-font-body-medium); color: var(--td-brand-color); cursor: pointer; } .oneid-upload__single-input-preview { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-flex: 1; -ms-flex: 1; flex: 1; } .oneid-upload__single-input-text { display: block; white-space: nowrap; word-wrap: normal; overflow: hidden; text-overflow: ellipsis; } .oneid-upload__single-file-input { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .oneid-upload__single-file-input .oneid-upload__trigger { margin-left: var(--td-comp-margin-l); } .oneid-upload__single-file-input .oneid-upload__single-progress { white-space: nowrap; } .oneid-upload__single-file-input .oneid-input__inner { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } .oneid-upload__dragger-progress { width: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; } .oneid-upload__dragger-progress .oneid-icon, .oneid-upload__dragger-progress .oneid-loading { font-size: calc(var(--td-font-size-body-medium) + 2px); -ms-flex-negative: 0; flex-shrink: 0; } .oneid-upload__dragger-img-wrap { width: 110px; height: 110px; background-color: var(--td-bg-color-secondarycontainer); border-radius: var(--td-radius-default); display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -ms-flex-negative: 0; flex-shrink: 0; } .oneid-upload__dragger-img-wrap > .oneid-image__wrapper--shape-square { width: 100%; } .oneid-upload__dragger-img-wrap > .oneid-image__wrapper--shape-square .oneid-space-item { text-align: center; } .oneid-upload__dragger-img-wrap > img { max-width: 100%; max-height: 100%; } .oneid-upload__dragger-img-wrap + .oneid-upload__dragger-progress-info { margin-left: var(--td-comp-margin-l); max-width: calc(336px - var(--td-comp-margin-l) * 2 - (110px + var(--td-comp-margin-l))); } .oneid-upload__dragger-progress-info { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; } .oneid-upload__dragger-progress-info .oneid-upload__single-display-text { margin-bottom: var(--td-comp-margin-s); } .oneid-upload__dragger-progress-info .oneid-button:hover { background-color: transparent; } .oneid-upload__dragger-progress-cancel, .oneid-upload__dragger-progress-reupload { margin-right: var(--td-comp-margin-l); } .oneid-upload__dragger-progress-cancel:hover, .oneid-upload__dragger-progress-reupload:hover { border-color: transparent; } .oneid-upload__dragger-delete-btn:hover, .oneid-upload__dragger-upload-btn:hover { border-color: transparent; } .oneid-upload__flow-image-flow { width: 498px; } .oneid-upload__flow { min-width: 498px; max-width: 960px; } .oneid-upload__flow-placeholder { display: inline-block; margin-left: var(--td-comp-margin-l); } .oneid-upload__flow-op { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .oneid-upload__flow-bottom { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; margin-top: var(--td-comp-margin-xxl); } .oneid-upload__flow-bottom .oneid-button + .oneid-button { margin-left: var(--td-comp-margin-s); } .oneid-upload__flow-empty { width: 100%; height: 184px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; color: var(--td-text-color-placeholder); } .oneid-upload__flow-table { width: 100%; border: 1px dashed var(--td-component-border); margin-top: var(--td-comp-margin-xxl); border-collapse: collapse; } .oneid-upload__flow-table > thead > tr, .oneid-upload__flow-table > tbody > tr, .oneid-upload__flow-table > tfoot > tr, .oneid-upload__flow-table > tr { border-top: 1px solid var(--td-component-border); } .oneid-upload__flow-table > thead > tr > th, .oneid-upload__flow-table > tbody > tr > th, .oneid-upload__flow-table > tfoot > tr > th, .oneid-upload__flow-table > tr > th { color: var(--td-text-color-placeholder); font-weight: normal; border: 1px solid var(--td-component-border); text-align: left; background-color: var(--td-bg-color-container); } .oneid-upload__flow-table > thead > tr > td, .oneid-upload__flow-table > tbody > tr > td, .oneid-upload__flow-table > tfoot > tr > td, .oneid-upload__flow-table > tr > td { color: var(--td-text-color-primary); } .oneid-upload__flow-table > thead > tr > td, .oneid-upload__flow-table > tbody > tr > td, .oneid-upload__flow-table > tfoot > tr > td, .oneid-upload__flow-table > tr > td, .oneid-upload__flow-table > thead > tr > th, .oneid-upload__flow-table > tbody > tr > th, .oneid-upload__flow-table > tfoot > tr > th, .oneid-upload__flow-table > tr > th { padding: var(--td-comp-paddingTB-m) var(--td-comp-paddingLR-l); } .oneid-upload__flow-table__batch-row { border-left: 1px solid var(--td-component-border); } .oneid-upload__flow-button { color: var(--td-text-color-placeholder); cursor: pointer; -webkit-transition: color 0.2s linear; transition: color 0.2s linear; } .oneid-upload__flow-button:hover { color: var(--td-text-color-secondary); } .oneid-upload__flow-status { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .oneid-upload__flow-status .oneid-icon, .oneid-upload__flow-status .oneid-loading { margin-right: var(--td-comp-margin-s); font-size: calc(var(--td-font-size-body-medium) + 2px); } .oneid-upload__flow-card-area { border: 1px dashed var(--td-component-border); padding: var(--td-comp-paddingTB-m) var(--td-comp-paddingLR-m); margin-top: var(--td-comp-margin-xxl); -webkit-transition: border 0.2s linear; transition: border 0.2s linear; } .oneid-upload__flow-card-area:hover { border-color: var(--td-brand-color); -webkit-transition: border-color 0.2s linear; transition: border-color 0.2s linear; } .oneid-upload__icon-delete, .oneid-upload__single-input-clear { color: var(--td-text-color-placeholder); cursor: pointer; -webkit-transition: color 0.2s linear; transition: color 0.2s linear; } .oneid-upload__icon-delete:hover, .oneid-upload__single-input-clear:hover { color: var(--td-text-color-secondary); -webkit-transition: color 0.2s linear; transition: color 0.2s linear; } .oneid-icon.oneid-upload__single-input-clear { display: none; } .oneid-upload__single-input-preview:hover .oneid-upload__single-input-clear { display: initial; } .oneid-upload__single-input-preview:hover .oneid-upload__status-icon { display: none; } .oneid-upload .oneid-upload__single-name { color: var(--td-text-color-secondary); } .oneid-upload .oneid-upload__file-thumbnail { margin-right: var(--td-comp-paddingLR-s); width: var(--td-comp-size-xxl); height: var(--td-comp-size-xxl); display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; cursor: pointer; } .oneid-upload .oneid-upload__file-thumbnail > svg { font-size: var(--td-comp-size-s); color: var(--td-text-color-placeholder); } .oneid-upload__card-name { margin-top: 8px; } .oneid-upload--theme-file-input { width: 100%; } .oneid-upload__dragger-btns > .oneid-button { padding: 0; } .oneid-upload__file-info { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .oneid-upload__card-container.oneid-is-disabled { cursor: not-allowed; } .oneid-upload__card-container.oneid-is-disabled .oneid-upload__add-text { color: var(--td-text-color-disabled); } .oneid-upload__card-container.oneid-is-disabled .oneid-icon { color: var(--td-text-color-disabled); } /* Swiper */ .oneid-swiper { font: var(--td-font-body-medium); color: var(--td-text-color-primary); -webkit-box-sizing: border-box; box-sizing: border-box; margin: 0; padding: 0; list-style: none; position: relative; height: -webkit-fit-content; height: -moz-fit-content; height: fit-content; } .oneid-swiper__wrap { display: block; position: relative; height: 100%; } .oneid-swiper__content { position: relative; z-index: 1; overflow: hidden; } .oneid-swiper__container { position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; height: 100%; z-index: 1; } .oneid-swiper__container__item { -webkit-box-flex: 0; -ms-flex: 0 0 auto; flex: 0 0 auto; width: 100%; height: 100%; display: inline-block; } .oneid-swiper__arrow { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .oneid-swiper__arrow svg.oneid-icon { width: 20px; height: 20px; } .oneid-swiper__arrow svg.oneid-icon::before { font-size: 24px; } .oneid-swiper__arrow--default .oneid-swiper__arrow-left { position: absolute; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); display: -webkit-box; display: -ms-flexbox; display: flex; width: 24px; height: 24px; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; z-index: 2; background-color: transparent; color: var(--td-font-white-2); -webkit-transition: 0.2s linear; transition: 0.2s linear; cursor: pointer; left: 16px; } .oneid-swiper__arrow--default .oneid-swiper__arrow-left:hover { color: var(--td-bg-color-container); background-color: var(--td-font-white-4); border-radius: var(--td-radius-default); -webkit-transition: 0.2s linear; transition: 0.2s linear; } .oneid-swiper__arrow--default .oneid-swiper__arrow-left:active { background-color: var(--td-font-white-3); -webkit-transition: 0.2s linear; transition: 0.2s linear; } .oneid-swiper__arrow--default .oneid-swiper__arrow-right { position: absolute; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); display: -webkit-box; display: -ms-flexbox; display: flex; width: 24px; height: 24px; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; z-index: 2; background-color: transparent; color: var(--td-font-white-2); -webkit-transition: 0.2s linear; transition: 0.2s linear; cursor: pointer; right: 16px; } .oneid-swiper__arrow--default .oneid-swiper__arrow-right:hover { color: var(--td-bg-color-container); background-color: var(--td-font-white-4); border-radius: var(--td-radius-default); -webkit-transition: 0.2s linear; transition: 0.2s linear; } .oneid-swiper__arrow--default .oneid-swiper__arrow-right:active { background-color: var(--td-font-white-3); -webkit-transition: 0.2s linear; transition: 0.2s linear; } .oneid-swiper-card .oneid-swiper__container { display: block; } .oneid-swiper-card .oneid-swiper__container .oneid-is-active { z-index: 2; } .oneid-swiper-card .oneid-swiper__card { position: absolute; top: 0; left: 0; width: 41.5%; height: 100%; z-index: 0; } .oneid-swiper-fade .oneid-swiper__container { display: block; } .oneid-swiper-fade .oneid-swiper__fade { position: absolute; top: 0; left: 0; } .oneid-swiper__navigation { position: absolute; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; bottom: 0; margin: 0; padding: 0; z-index: 2; } .oneid-swiper__navigation > li { -webkit-box-flex: 1; -ms-flex: 1 0 auto; flex: 1 0 auto; list-style-type: none; display: -webkit-box; display: -ms-flexbox; display: flex; } .oneid-swiper__navigation .oneid-swiper__arrow svg.oneid-icon { width: 16px; height: 16px; } .oneid-swiper__navigation-bars .oneid-swiper__navigation-item { cursor: pointer; margin: 0 0 0 6px; padding: 18px 0; width: 14px; height: auto; } .oneid-swiper__navigation-bars .oneid-swiper__navigation-item span { width: 100%; height: 3px; } .oneid-swiper__navigation-bars .oneid-swiper__navigation-item:nth-child(1) { margin-left: 0; } .oneid-swiper__navigation-bars .oneid-swiper__navigation-item span { background: var(--td-font-white-4); } .oneid-swiper__navigation-bars .oneid-swiper__navigation-item span:hover { background-color: var(--td-font-white-2); } .oneid-swiper__navigation-bars .oneid-swiper__navigation-item span:active { background-color: var(--td-bg-color-container); } .oneid-swiper__navigation-bars .oneid-swiper__navigation-item.oneid-is-active { width: 24px; } .oneid-swiper__navigation-bars .oneid-swiper__navigation-item.oneid-is-active span { background-color: var(--td-bg-color-container); } .oneid-swiper__navigation-dots-bar .oneid-swiper__navigation-item { cursor: pointer; margin: 0 0 0 6px; padding: 18px 0; width: 14px; height: auto; } .oneid-swiper__navigation-dots-bar .oneid-swiper__navigation-item span { border-radius: 1.5px; } .oneid-swiper__navigation-dots-bar .oneid-swiper__navigation-item span { width: 100%; height: 3px; } .oneid-swiper__navigation-dots-bar .oneid-swiper__navigation-item:nth-child(1) { margin-left: 0; } .oneid-swiper__navigation-dots-bar .oneid-swiper__navigation-item span { background: var(--td-font-white-4); } .oneid-swiper__navigation-dots-bar .oneid-swiper__navigation-item span:hover { background-color: var(--td-font-white-2); } .oneid-swiper__navigation-dots-bar .oneid-swiper__navigation-item span:active { background-color: var(--td-bg-color-container); } .oneid-swiper__navigation-dots-bar .oneid-swiper__navigation-item.oneid-is-active { width: 24px; } .oneid-swiper__navigation-dots-bar .oneid-swiper__navigation-item.oneid-is-active span { background-color: var(--td-bg-color-container); } .oneid-swiper__navigation-dots .oneid-swiper__navigation-item { cursor: pointer; margin: 0 0 0 6px; padding: 18px 0; width: var(--td-size-2); height: auto; } .oneid-swiper__navigation-dots .oneid-swiper__navigation-item span { border-radius: 50%; } .oneid-swiper__navigation-dots .oneid-swiper__navigation-item span { width: 100%; height: var(--td-size-2); } .oneid-swiper__navigation-dots .oneid-swiper__navigation-item:nth-child(1) { margin-left: 0; } .oneid-swiper__navigation-dots .oneid-swiper__navigation-item span { background: var(--td-font-white-4); } .oneid-swiper__navigation-dots .oneid-swiper__navigation-item span:hover { background-color: var(--td-font-white-2); } .oneid-swiper__navigation-dots .oneid-swiper__navigation-item span:active { background-color: var(--td-bg-color-container); } .oneid-swiper__navigation-dots .oneid-swiper__navigation-item.oneid-is-active span { background-color: var(--td-bg-color-container); } .oneid-swiper__navigation--fraction { position: absolute; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); top: auto; right: auto; bottom: calc(0px - (var(--td-line-height-body-medium) + 12px)); height: var(--td-line-height-body-medium); line-height: var(--td-line-height-body-medium); } .oneid-swiper__navigation--fraction .oneid-swiper__arrow-left { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; z-index: 2; background-color: transparent; color: var(--td-text-color-secondary); width: var(--td-line-height-body-medium); height: var(--td-line-height-body-medium); cursor: pointer; } .oneid-swiper__navigation--fraction .oneid-swiper__arrow-left:hover { color: var(--td-text-color-primary); } .oneid-swiper__navigation--fraction .oneid-swiper__arrow-left:active { color: var(--td-brand-color-active); } .oneid-swiper__navigation--fraction .oneid-swiper__arrow-right { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; z-index: 2; background-color: transparent; color: var(--td-text-color-secondary); width: var(--td-line-height-body-medium); height: var(--td-line-height-body-medium); cursor: pointer; } .oneid-swiper__navigation--fraction .oneid-swiper__arrow-right:hover { color: var(--td-text-color-primary); } .oneid-swiper__navigation--fraction .oneid-swiper__arrow-right:active { color: var(--td-brand-color-active); } .oneid-swiper__navigation--fraction .oneid-swiper__navigation-text-fraction { display: inline-block; font-size: var(--td-font-size-body-medium); color: var(--td-text-color-secondary); margin: 0; } .oneid-swiper--vertical .oneid-swiper__container { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } .oneid-swiper--vertical .oneid-swiper__navigation { position: absolute; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); left: auto; right: 0; bottom: auto; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .oneid-swiper--vertical .oneid-swiper__navigation-bars .oneid-swiper__navigation-item { cursor: pointer; margin: 6px 0 0 0; padding: 0 18px; width: auto; height: 14px; } .oneid-swiper--vertical .oneid-swiper__navigation-bars .oneid-swiper__navigation-item span { width: 3px; height: 100%; } .oneid-swiper--vertical .oneid-swiper__navigation-bars .oneid-swiper__navigation-item:nth-child(1) { margin-top: 0; } .oneid-swiper--vertical .oneid-swiper__navigation-bars .oneid-swiper__navigation-item span { background: var(--td-font-white-4); } .oneid-swiper--vertical .oneid-swiper__navigation-bars .oneid-swiper__navigation-item span:hover { background-color: var(--td-font-white-2); } .oneid-swiper--vertical .oneid-swiper__navigation-bars .oneid-swiper__navigation-item span:active { background-color: var(--td-bg-color-container); } .oneid-swiper--vertical .oneid-swiper__navigation-bars .oneid-swiper__navigation-item.oneid-is-active { height: 24px; } .oneid-swiper--vertical .oneid-swiper__navigation-bars .oneid-swiper__navigation-item.oneid-is-active span { background-color: var(--td-bg-color-container); } .oneid-swiper--vertical .oneid-swiper__navigation-dots-bar .oneid-swiper__navigation-item { cursor: pointer; margin: 6px 0 0 0; padding: 0 18px; width: auto; height: 14px; } .oneid-swiper--vertical .oneid-swiper__navigation-dots-bar .oneid-swiper__navigation-item span { border-radius: 1.5px; } .oneid-swiper--vertical .oneid-swiper__navigation-dots-bar .oneid-swiper__navigation-item span { width: 3px; height: 100%; } .oneid-swiper--vertical .oneid-swiper__navigation-dots-bar .oneid-swiper__navigation-item:nth-child(1) { margin-top: 0; } .oneid-swiper--vertical .oneid-swiper__navigation-dots-bar .oneid-swiper__navigation-item span { background: var(--td-font-white-4); } .oneid-swiper--vertical .oneid-swiper__navigation-dots-bar .oneid-swiper__navigation-item span:hover { background-color: var(--td-font-white-2); } .oneid-swiper--vertical .oneid-swiper__navigation-dots-bar .oneid-swiper__navigation-item span:active { background-color: var(--td-bg-color-container); } .oneid-swiper--vertical .oneid-swiper__navigation-dots-bar .oneid-swiper__navigation-item.oneid-is-active { height: 24px; } .oneid-swiper--vertical .oneid-swiper__navigation-dots-bar .oneid-swiper__navigation-item.oneid-is-active span { background-color: var(--td-bg-color-container); } .oneid-swiper--vertical .oneid-swiper__navigation-dots .oneid-swiper__navigation-item { cursor: pointer; margin: 6px 0 0 0; padding: 0 18px; width: auto; max-height: var(--td-size-2); } .oneid-swiper--vertical .oneid-swiper__navigation-dots .oneid-swiper__navigation-item span { border-radius: 50%; } .oneid-swiper--vertical .oneid-swiper__navigation-dots .oneid-swiper__navigation-item span { width: var(--td-size-2); height: 100%; } .oneid-swiper--vertical .oneid-swiper__navigation-dots .oneid-swiper__navigation-item:nth-child(1) { margin-top: 0; } .oneid-swiper--vertical .oneid-swiper__navigation-dots .oneid-swiper__navigation-item span { background: var(--td-font-white-4); } .oneid-swiper--vertical .oneid-swiper__navigation-dots .oneid-swiper__navigation-item span:hover { background-color: var(--td-font-white-2); } .oneid-swiper--vertical .oneid-swiper__navigation-dots .oneid-swiper__navigation-item span:active { background-color: var(--td-bg-color-container); } .oneid-swiper--vertical .oneid-swiper__navigation-dots .oneid-swiper__navigation-item.oneid-is-active span { background-color: var(--td-bg-color-container); } .oneid-swiper--outside .oneid-swiper__navigation { bottom: -36px; } .oneid-swiper--outside .oneid-swiper__navigation--fraction { position: absolute; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); top: auto; right: auto; bottom: calc(0px - (var(--td-line-height-body-medium) + 12px)); height: var(--td-line-height-body-medium); line-height: var(--td-line-height-body-medium); } .oneid-swiper--outside .oneid-swiper__navigation--fraction .oneid-swiper__arrow-left { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; z-index: 2; background-color: transparent; color: var(--td-text-color-secondary); width: var(--td-line-height-body-medium); height: var(--td-line-height-body-medium); cursor: pointer; } .oneid-swiper--outside .oneid-swiper__navigation--fraction .oneid-swiper__arrow-left:hover { color: var(--td-text-color-primary); } .oneid-swiper--outside .oneid-swiper__navigation--fraction .oneid-swiper__arrow-left:active { color: var(--td-brand-color-active); } .oneid-swiper--outside .oneid-swiper__navigation--fraction .oneid-swiper__arrow-right { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; z-index: 2; background-color: transparent; color: var(--td-text-color-secondary); width: var(--td-line-height-body-medium); height: var(--td-line-height-body-medium); cursor: pointer; } .oneid-swiper--outside .oneid-swiper__navigation--fraction .oneid-swiper__arrow-right:hover { color: var(--td-text-color-primary); } .oneid-swiper--outside .oneid-swiper__navigation--fraction .oneid-swiper__arrow-right:active { color: var(--td-brand-color-active); } .oneid-swiper--outside .oneid-swiper__navigation--fraction .oneid-swiper__navigation-text-fraction { display: inline-block; font-size: var(--td-font-size-body-medium); color: var(--td-text-color-secondary); margin: 0; } .oneid-swiper--outside .oneid-swiper__navigation-bars .oneid-swiper__navigation-item span { background-color: var(--td-text-color-disabled); } .oneid-swiper--outside .oneid-swiper__navigation-bars .oneid-swiper__navigation-item span:hover { background-color: var(--td-text-color-primary); } .oneid-swiper--outside .oneid-swiper__navigation-bars .oneid-swiper__navigation-item span:active { background-color: var(--td-brand-color-active); } .oneid-swiper--outside .oneid-swiper__navigation-bars .oneid-is-active span { background-color: var(--td-brand-color-active); } .oneid-swiper--outside.oneid-swiper--vertical .oneid-swiper__navigation { bottom: auto; right: -36px; } .oneid-swiper--outside.oneid-swiper--vertical .oneid-swiper__navigation--fraction { position: absolute; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); top: auto; right: auto; bottom: calc(0px - (var(--td-line-height-body-medium) + 12px)); height: var(--td-line-height-body-medium); line-height: var(--td-line-height-body-medium); } .oneid-swiper--outside.oneid-swiper--vertical .oneid-swiper__navigation--fraction .oneid-swiper__arrow-left { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; z-index: 2; background-color: transparent; color: var(--td-text-color-secondary); width: var(--td-line-height-body-medium); height: var(--td-line-height-body-medium); cursor: pointer; } .oneid-swiper--outside.oneid-swiper--vertical .oneid-swiper__navigation--fraction .oneid-swiper__arrow-left:hover { color: var(--td-text-color-primary); } .oneid-swiper--outside.oneid-swiper--vertical .oneid-swiper__navigation--fraction .oneid-swiper__arrow-left:active { color: var(--td-brand-color-active); } .oneid-swiper--outside.oneid-swiper--vertical .oneid-swiper__navigation--fraction .oneid-swiper__arrow-right { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; z-index: 2; background-color: transparent; color: var(--td-text-color-secondary); width: var(--td-line-height-body-medium); height: var(--td-line-height-body-medium); cursor: pointer; } .oneid-swiper--outside.oneid-swiper--vertical .oneid-swiper__navigation--fraction .oneid-swiper__arrow-right:hover { color: var(--td-text-color-primary); } .oneid-swiper--outside.oneid-swiper--vertical .oneid-swiper__navigation--fraction .oneid-swiper__arrow-right:active { color: var(--td-brand-color-active); } .oneid-swiper--outside.oneid-swiper--vertical .oneid-swiper__navigation--fraction .oneid-swiper__navigation-text-fraction { display: inline-block; font-size: var(--td-font-size-body-medium); color: var(--td-text-color-secondary); margin: 0; } .oneid-swiper--outside.oneid-swiper--vertical .oneid-swiper__navigation-bars .oneid-swiper__navigation-item span { background-color: var(--td-text-color-disabled); } .oneid-swiper--outside.oneid-swiper--vertical .oneid-swiper__navigation-bars .oneid-swiper__navigation-item span:hover { background-color: var(--td-text-color-primary); } .oneid-swiper--outside.oneid-swiper--vertical .oneid-swiper__navigation-bars .oneid-swiper__navigation-item span:active { background-color: var(--td-brand-color-active); } .oneid-swiper--outside.oneid-swiper--vertical .oneid-swiper__navigation-bars .oneid-is-active span { background-color: var(--td-brand-color-active); } .oneid-swiper--inside .oneid-swiper__navigation { bottom: 0; } .oneid-swiper--inside .oneid-swiper__navigation--fraction { position: absolute; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); top: auto; right: auto; bottom: calc(0px - (var(--td-line-height-body-medium) + 12px)); height: var(--td-line-height-body-medium); line-height: var(--td-line-height-body-medium); } .oneid-swiper--inside .oneid-swiper__navigation--fraction .oneid-swiper__arrow-left { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; z-index: 2; background-color: transparent; color: var(--td-text-color-secondary); width: var(--td-line-height-body-medium); height: var(--td-line-height-body-medium); cursor: pointer; } .oneid-swiper--inside .oneid-swiper__navigation--fraction .oneid-swiper__arrow-left:hover { color: var(--td-text-color-primary); } .oneid-swiper--inside .oneid-swiper__navigation--fraction .oneid-swiper__arrow-left:active { color: var(--td-brand-color-active); } .oneid-swiper--inside .oneid-swiper__navigation--fraction .oneid-swiper__arrow-right { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; z-index: 2; background-color: transparent; color: var(--td-text-color-secondary); width: var(--td-line-height-body-medium); height: var(--td-line-height-body-medium); cursor: pointer; } .oneid-swiper--inside .oneid-swiper__navigation--fraction .oneid-swiper__arrow-right:hover { color: var(--td-text-color-primary); } .oneid-swiper--inside .oneid-swiper__navigation--fraction .oneid-swiper__arrow-right:active { color: var(--td-brand-color-active); } .oneid-swiper--inside .oneid-swiper__navigation--fraction .oneid-swiper__navigation-text-fraction { display: inline-block; font-size: var(--td-font-size-body-medium); color: var(--td-text-color-secondary); margin: 0; } .oneid-swiper--large .oneid-swiper__arrow i.oneid-icon::before { font-size: 32px; } .oneid-swiper--large .oneid-swiper__arrow--default .oneid-swiper__arrow-left { width: 32px; height: 32px; left: 24px; } .oneid-swiper--large .oneid-swiper__arrow--default .oneid-swiper__arrow-right { width: 32px; height: 32px; right: 24px; } .oneid-swiper--large .oneid-swiper__navigation-bars .oneid-swiper__navigation-item { cursor: pointer; margin: 0 0 0 8px; padding: 24px 0; width: 21px; height: auto; } .oneid-swiper--large .oneid-swiper__navigation-bars .oneid-swiper__navigation-item span { width: 100%; height: 4px; } .oneid-swiper--large .oneid-swiper__navigation-bars .oneid-swiper__navigation-item:nth-child(1) { margin-left: 0; } .oneid-swiper--large .oneid-swiper__navigation-bars .oneid-swiper__navigation-item span { background: var(--td-font-white-4); } .oneid-swiper--large .oneid-swiper__navigation-bars .oneid-swiper__navigation-item span:hover { background-color: var(--td-font-white-2); } .oneid-swiper--large .oneid-swiper__navigation-bars .oneid-swiper__navigation-item span:active { background-color: var(--td-bg-color-container); } .oneid-swiper--large .oneid-swiper__navigation-bars .oneid-swiper__navigation-item.oneid-is-active { width: 36px; } .oneid-swiper--large .oneid-swiper__navigation-bars .oneid-swiper__navigation-item.oneid-is-active span { background-color: var(--td-bg-color-container); } .oneid-swiper--large .oneid-swiper__navigation--fraction { position: absolute; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); top: auto; right: auto; bottom: calc(0px - (var(--td-line-height-body-large) + 12px)); height: var(--td-line-height-body-large); line-height: var(--td-line-height-body-large); } .oneid-swiper--large .oneid-swiper__navigation--fraction .oneid-swiper__arrow-left { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; z-index: 2; background-color: transparent; color: var(--td-text-color-secondary); width: var(--td-line-height-body-large); height: var(--td-line-height-body-large); cursor: pointer; } .oneid-swiper--large .oneid-swiper__navigation--fraction .oneid-swiper__arrow-left:hover { color: var(--td-text-color-primary); } .oneid-swiper--large .oneid-swiper__navigation--fraction .oneid-swiper__arrow-left:active { color: var(--td-brand-color-active); } .oneid-swiper--large .oneid-swiper__navigation--fraction .oneid-swiper__arrow-right { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; z-index: 2; background-color: transparent; color: var(--td-text-color-secondary); width: var(--td-line-height-body-large); height: var(--td-line-height-body-large); cursor: pointer; } .oneid-swiper--large .oneid-swiper__navigation--fraction .oneid-swiper__arrow-right:hover { color: var(--td-text-color-primary); } .oneid-swiper--large .oneid-swiper__navigation--fraction .oneid-swiper__arrow-right:active { color: var(--td-brand-color-active); } .oneid-swiper--large .oneid-swiper__navigation--fraction .oneid-swiper__navigation-text-fraction { display: inline-block; font-size: var(--td-font-size-body-large); color: var(--td-text-color-secondary); margin: 0; } .oneid-swiper--large.oneid-swiper--outside .oneid-swiper__navigation { bottom: -48px; } .oneid-swiper--large.oneid-swiper--outside .oneid-swiper__navigation-bars .oneid-swiper__navigation-item span { background-color: var(--td-text-color-disabled); } .oneid-swiper--large.oneid-swiper--outside .oneid-swiper__navigation-bars .oneid-swiper__navigation-item span:hover { background-color: var(--td-text-color-primary); } .oneid-swiper--large.oneid-swiper--outside .oneid-swiper__navigation-bars .oneid-swiper__navigation-item span:active { background-color: var(--td-brand-color-active); } .oneid-swiper--large.oneid-swiper--outside .oneid-swiper__navigation-bars .oneid-is-active span { background-color: var(--td-brand-color-active); } .oneid-swiper--large.oneid-swiper--vertical .oneid-swiper__navigation-bars .oneid-swiper__navigation-item { cursor: pointer; margin: 8px 0 0 0; padding: 0 24px; width: auto; height: 21px; } .oneid-swiper--large.oneid-swiper--vertical .oneid-swiper__navigation-bars .oneid-swiper__navigation-item span { width: 4px; height: 100%; } .oneid-swiper--large.oneid-swiper--vertical .oneid-swiper__navigation-bars .oneid-swiper__navigation-item:nth-child(1) { margin-top: 0; } .oneid-swiper--large.oneid-swiper--vertical .oneid-swiper__navigation-bars .oneid-swiper__navigation-item span { background: var(--td-font-white-4); } .oneid-swiper--large.oneid-swiper--vertical .oneid-swiper__navigation-bars .oneid-swiper__navigation-item span:hover { background-color: var(--td-font-white-2); } .oneid-swiper--large.oneid-swiper--vertical .oneid-swiper__navigation-bars .oneid-swiper__navigation-item span:active { background-color: var(--td-bg-color-container); } .oneid-swiper--large.oneid-swiper--vertical .oneid-swiper__navigation-bars .oneid-swiper__navigation-item.oneid-is-active { height: 36px; } .oneid-swiper--large.oneid-swiper--vertical .oneid-swiper__navigation-bars .oneid-swiper__navigation-item.oneid-is-active span { background-color: var(--td-bg-color-container); } .oneid-swiper--large.oneid-swiper--vertical.oneid-swiper--outside .oneid-swiper__navigation { right: -48px; } .oneid-swiper--large.oneid-swiper--vertical.oneid-swiper--outside .oneid-swiper__navigation-bars .oneid-swiper__navigation-item span { background-color: var(--td-text-color-disabled); } .oneid-swiper--large.oneid-swiper--vertical.oneid-swiper--outside .oneid-swiper__navigation-bars .oneid-swiper__navigation-item span:hover { background-color: var(--td-text-color-primary); } .oneid-swiper--large.oneid-swiper--vertical.oneid-swiper--outside .oneid-swiper__navigation-bars .oneid-swiper__navigation-item span:active { background-color: var(--td-brand-color-active); } .oneid-swiper--large.oneid-swiper--vertical.oneid-swiper--outside .oneid-swiper__navigation-bars .oneid-is-active span { background-color: var(--td-brand-color-active); } .oneid-swiper--small .oneid-swiper__arrow i.oneid-icon::before { font-size: 16px; } .oneid-swiper--small .oneid-swiper__arrow--default .oneid-swiper__arrow-left { width: 16px; height: 16px; left: 8px; } .oneid-swiper--small .oneid-swiper__arrow--default .oneid-swiper__arrow-right { width: 16px; height: 16px; right: 8px; } .oneid-swiper--small .oneid-swiper__navigation-bars .oneid-swiper__navigation-item { cursor: pointer; margin: 0 0 0 4px; padding: 12px 0; width: 9px; height: auto; } .oneid-swiper--small .oneid-swiper__navigation-bars .oneid-swiper__navigation-item span { width: 100%; height: 2px; } .oneid-swiper--small .oneid-swiper__navigation-bars .oneid-swiper__navigation-item:nth-child(1) { margin-left: 0; } .oneid-swiper--small .oneid-swiper__navigation-bars .oneid-swiper__navigation-item span { background: var(--td-font-white-4); } .oneid-swiper--small .oneid-swiper__navigation-bars .oneid-swiper__navigation-item span:hover { background-color: var(--td-font-white-2); } .oneid-swiper--small .oneid-swiper__navigation-bars .oneid-swiper__navigation-item span:active { background-color: var(--td-bg-color-container); } .oneid-swiper--small .oneid-swiper__navigation-bars .oneid-swiper__navigation-item.oneid-is-active { width: 15px; } .oneid-swiper--small .oneid-swiper__navigation-bars .oneid-swiper__navigation-item.oneid-is-active span { background-color: var(--td-bg-color-container); } .oneid-swiper--small .oneid-swiper__navigation--fraction { position: absolute; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); top: auto; right: auto; bottom: calc(0px - (var(--td-line-height-body-small) + 12px)); height: var(--td-line-height-body-small); line-height: var(--td-line-height-body-small); } .oneid-swiper--small .oneid-swiper__navigation--fraction .oneid-swiper__arrow-left { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; z-index: 2; background-color: transparent; color: var(--td-text-color-secondary); width: var(--td-line-height-body-small); height: var(--td-line-height-body-small); cursor: pointer; } .oneid-swiper--small .oneid-swiper__navigation--fraction .oneid-swiper__arrow-left:hover { color: var(--td-text-color-primary); } .oneid-swiper--small .oneid-swiper__navigation--fraction .oneid-swiper__arrow-left:active { color: var(--td-brand-color-active); } .oneid-swiper--small .oneid-swiper__navigation--fraction .oneid-swiper__arrow-right { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; z-index: 2; background-color: transparent; color: var(--td-text-color-secondary); width: var(--td-line-height-body-small); height: var(--td-line-height-body-small); cursor: pointer; } .oneid-swiper--small .oneid-swiper__navigation--fraction .oneid-swiper__arrow-right:hover { color: var(--td-text-color-primary); } .oneid-swiper--small .oneid-swiper__navigation--fraction .oneid-swiper__arrow-right:active { color: var(--td-brand-color-active); } .oneid-swiper--small .oneid-swiper__navigation--fraction .oneid-swiper__navigation-text-fraction { display: inline-block; font-size: var(--td-font-size-body-small); color: var(--td-text-color-secondary); margin: 0; } .oneid-swiper--small.oneid-swiper--outside .oneid-swiper__navigation { bottom: -24px; } .oneid-swiper--small.oneid-swiper--outside .oneid-swiper__navigation-bars .oneid-swiper__navigation-item span { background-color: var(--td-text-color-disabled); } .oneid-swiper--small.oneid-swiper--outside .oneid-swiper__navigation-bars .oneid-swiper__navigation-item span:hover { background-color: var(--td-text-color-primary); } .oneid-swiper--small.oneid-swiper--outside .oneid-swiper__navigation-bars .oneid-swiper__navigation-item span:active { background-color: var(--td-brand-color-active); } .oneid-swiper--small.oneid-swiper--outside .oneid-swiper__navigation-bars .oneid-is-active span { background-color: var(--td-brand-color-active); } .oneid-swiper--small.oneid-swiper--vertical .oneid-swiper__navigation-bars .oneid-swiper__navigation-item { cursor: pointer; margin: 4px 0 0 0; padding: 0 12px; width: auto; height: 9px; } .oneid-swiper--small.oneid-swiper--vertical .oneid-swiper__navigation-bars .oneid-swiper__navigation-item span { width: 2px; height: 100%; } .oneid-swiper--small.oneid-swiper--vertical .oneid-swiper__navigation-bars .oneid-swiper__navigation-item:nth-child(1) { margin-top: 0; } .oneid-swiper--small.oneid-swiper--vertical .oneid-swiper__navigation-bars .oneid-swiper__navigation-item span { background: var(--td-font-white-4); } .oneid-swiper--small.oneid-swiper--vertical .oneid-swiper__navigation-bars .oneid-swiper__navigation-item span:hover { background-color: var(--td-font-white-2); } .oneid-swiper--small.oneid-swiper--vertical .oneid-swiper__navigation-bars .oneid-swiper__navigation-item span:active { background-color: var(--td-bg-color-container); } .oneid-swiper--small.oneid-swiper--vertical .oneid-swiper__navigation-bars .oneid-swiper__navigation-item.oneid-is-active { height: 15px; } .oneid-swiper--small.oneid-swiper--vertical .oneid-swiper__navigation-bars .oneid-swiper__navigation-item.oneid-is-active span { background-color: var(--td-bg-color-container); } .oneid-swiper--small.oneid-swiper--vertical.oneid-swiper--outside .oneid-swiper__navigation { right: -24px; } .oneid-swiper--small.oneid-swiper--vertical.oneid-swiper--outside .oneid-swiper__navigation-bars .oneid-swiper__navigation-item span { background-color: var(--td-text-color-disabled); } .oneid-swiper--small.oneid-swiper--vertical.oneid-swiper--outside .oneid-swiper__navigation-bars .oneid-swiper__navigation-item span:hover { background-color: var(--td-text-color-primary); } .oneid-swiper--small.oneid-swiper--vertical.oneid-swiper--outside .oneid-swiper__navigation-bars .oneid-swiper__navigation-item span:active { background-color: var(--td-brand-color-active); } .oneid-swiper--small.oneid-swiper--vertical.oneid-swiper--outside .oneid-swiper__navigation-bars .oneid-is-active span { background-color: var(--td-brand-color-active); } .oneid-comment { font: var(--td-font-body-medium); -webkit-box-sizing: border-box; box-sizing: border-box; margin: 0; padding: 0; list-style: none; width: 100%; color: var(--td-text-color-primary); } .oneid-comment__inner { display: -webkit-box; display: -ms-flexbox; display: flex; } .oneid-comment__avatar { -ms-flex-negative: 0; flex-shrink: 0; margin-right: var(--td-comp-margin-xxl); cursor: pointer; display: -webkit-box; display: -ms-flexbox; display: flex; } .oneid-comment__avatar-image { width: var(--td-comp-size-xxxl); height: var(--td-comp-size-xxxl); border-radius: var(--td-radius-circle); } .oneid-comment__content { -webkit-box-flex: 1; -ms-flex: auto; flex: auto; font: var(--td-font-body-medium); } .oneid-comment__author { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; -webkit-box-align: baseline; -ms-flex-align: baseline; align-items: baseline; margin-bottom: var(--td-comp-margin-s); } .oneid-comment__name { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; font: var(--td-font-title-medium); padding-right: var(--td-comp-paddingLR-s); cursor: pointer; } .oneid-comment__time { font: var(--td-font-body-small); padding-right: var(--td-comp-paddingLR-s); color: var(--td-text-color-placeholder); } .oneid-comment__detail { word-break: break-all; font: var(--td-font-body-medium); } .oneid-comment__quote { margin-top: var(--td-comp-margin-l); border-left: 4px solid var(--td-component-stroke); padding-left: var(--td-comp-margin-l); } .oneid-comment__quote .oneid-comment__name, .oneid-comment__quote .oneid-comment__detail { color: var(--td-text-color-secondary); } .oneid-comment__actions { margin-top: var(--td-comp-margin-s); display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; list-style: none; padding: 0; gap: var(--td-comp-margin-s); } .oneid-comment__actions .oneid-button--variant-text { color: var(--td-text-color-placeholder); } .oneid-comment__actions .oneid-button--variant-text .oneid-button__text { gap: var(--td-comp-margin-s); } .oneid-comment__reply { margin-top: var(--td-comp-margin-l); margin-left: calc(var(--td-comp-size-xxxl) + var(--td-comp-margin-xxl)); background-color: var(--td-bg-color-secondarycontainer); border-radius: var(--td-radius-medium); padding: var(--td-comp-paddingTB-l) var(--td-comp-paddingLR-xl); } .oneid-comment__reply .oneid-button--variant-text { color: var(--td-text-color-placeholder); } .oneid-comment__reply .oneid-button--variant-text:hover { background-color: var(--td-bg-color-secondarycontainer-hover); } .oneid-comment__reply .oneid-button--variant-text .oneid-button__text { gap: var(--td-comp-margin-s); } .oneid-transfer { -webkit-box-sizing: border-box; box-sizing: border-box; margin: 0; padding: 0; list-style: none; font: var(--td-font-body-medium); position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -webkit-box-align: stretch; -ms-flex-align: stretch; align-items: stretch; background: transparent; color: var(--td-text-color-primary); max-height: 100%; } .oneid-transfer__list { position: relative; display: inline-block; min-width: 200px; height: 200px; padding-top: var(--td-comp-size-xxl); border: 0; word-break: break-word; vertical-align: middle; } .oneid-transfer__list-source, .oneid-transfer__list-target { border: 1px solid var(--td-border-level-1-color); border-radius: var(--td-radius-medium); } .oneid-transfer__list-header { position: absolute; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; top: 0; height: var(--td-comp-size-xxl); line-height: var(--td-comp-size-xxl); width: calc(200px - var(--td-comp-margin-s) * 2); padding: 0 var(--td-comp-paddingLR-s); margin: 0 var(--td-comp-margin-s); -webkit-box-sizing: border-box; box-sizing: border-box; } .oneid-transfer__list-header + :not(.oneid-transfer__list--with-search) { border-top: 1px solid var(--td-border-level-1-color); } .oneid-transfer__list-header .oneid-checkbox { margin-right: 0; } .oneid-transfer__list-header .oneid-checkbox__label { margin: 0; } .oneid-transfer__list-header div { display: -webkit-box; display: -ms-flexbox; display: flex; } .oneid-transfer__list-header div > span { margin-left: var(--td-comp-margin-s); } .oneid-transfer__list-header > span { color: var(--td-text-color-placeholder); } .oneid-transfer__list-body { position: relative; height: 100%; -webkit-box-sizing: border-box; box-sizing: border-box; } .oneid-transfer__list--with-search { padding-top: var(--td-comp-size-m); border-top: 0; } .oneid-transfer__list-content { height: 100%; width: 100%; overflow: auto; } .oneid-transfer__list-content .oneid-checkbox-group { width: 100%; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; gap: var(--td-comp-margin-xs); margin: var(--td-comp-margin-s) 0; } .oneid-transfer__list-content .oneid-checkbox-group .oneid-checkbox { margin-right: var(--td-comp-margin-s); --ripple-color: var(--td-bg-color-container-active); } .oneid-transfer__list-content .oneid-checkbox-group .oneid-checkbox + .oneid-checkbox { margin-left: var(--td-comp-margin-s); } .oneid-transfer__list-content .oneid-checkbox-group .oneid-checkbox__label { margin: 0; -webkit-box-flex: 1; -ms-flex: 1; flex: 1; } .oneid-transfer__list-content .oneid-checkbox-group .oneid-checkbox__label > span { margin-left: var(--td-comp-margin-s); display: inline-block; } .oneid-transfer__list .oneid-transfer__list-item { padding: var(--td-comp-paddingLR-xs) var(--td-comp-paddingLR-s); display: -webkit-box; display: -ms-flexbox; display: flex; cursor: pointer; margin: 0 var(--td-comp-margin-s); border-radius: var(--td-radius-default); -webkit-transition: background-color 0.2s cubic-bezier(0.38, 0, 0.24, 1); transition: background-color 0.2s cubic-bezier(0.38, 0, 0.24, 1); } .oneid-transfer__list .oneid-transfer__list-item:first-child { margin-top: 0; } .oneid-transfer__list .oneid-transfer__list-item.oneid-is-disabled:hover { background: transparent; } .oneid-transfer__list-item:hover { background: var(--td-bg-color-container-hover); -webkit-transition: background-color 0.2s cubic-bezier(0.38, 0, 0.24, 1); transition: background-color 0.2s cubic-bezier(0.38, 0, 0.24, 1); } .oneid-transfer__list-item.oneid-is-checked { background: var(--td-brand-color-light); } .oneid-transfer__list-wrapper { position: relative; height: 100%; width: 100%; overflow: auto; padding: var(--td-comp-paddingTB-m) var(--td-comp-paddingLR-m); } .oneid-transfer__list-pagination { height: var(--td-comp-size-xs); vertical-align: middle; padding: var(--td-comp-paddingTB-m); } .oneid-transfer__list-footer { position: absolute; left: 0; bottom: 0; border-top: 1px solid var(--td-border-level-1-color); width: 100%; } .oneid-transfer__operations { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; margin: auto var(--td-comp-margin-s); vertical-align: middle; overflow: hidden; gap: var(--td-comp-margin-l); } .oneid-transfer__operations .oneid-icon { font-size: var(--td-comp-size-xxxs); } .oneid-transfer__operations .oneid-icon + .oneid-button__text { margin-left: 0; } .oneid-transfer__empty { text-align: center; position: absolute; color: var(--td-text-color-placeholder); top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } .oneid-transfer__search-wrapper { position: absolute; top: 0; width: 100%; padding: 0 var(--td-comp-margin-s); -webkit-box-sizing: border-box; box-sizing: border-box; } .oneid-transfer__search .oneid-transfer__list { height: 240px; } .oneid-transfer--with-tree .oneid-transfer__list { height: auto; } .oneid-transfer--with-tree .oneid-transfer__list .oneid-tree { padding: 0 var(--td-comp-paddingLR-m); margin: var(--td-comp-margin-s) 0; } .oneid-transfer__pagination .oneid-transfer__list { height: 240px; padding-bottom: calc(var(--td-comp-size-xs) + var(--td-comp-paddingTB-m) * 2); } .oneid-transfer__footer .oneid-transfer__list { height: 248px; padding-bottom: 48px; } .oneid-transfer__pagination.oneid-transfer__footer .oneid-transfer__list { height: 288px; padding-bottom: calc(var(--td-comp-size-xs) + var(--td-comp-paddingTB-m) * 2 + 48px); } .oneid-transfer__search.oneid-transfer__footer .oneid-transfer__list { height: 288px; padding-bottom: 48px; } .oneid-transfer__search.oneid-transfer__pagination .oneid-transfer__list { height: 280px; padding-bottom: 48px; } .oneid-transfer__search.oneid-transfer__footer.oneid-transfer__pagination .oneid-transfer__list { height: 328px; padding-bottom: 88px; } .oneid-transfer__wrapper .oneid-transfer__list { height: 320px; width: 206px; overflow: scroll; } .oneid-avatar { font: var(--td-font-body-medium); color: var(--td-text-color-primary); -webkit-box-sizing: border-box; box-sizing: border-box; margin: 0; padding: 0; list-style: none; position: relative; display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; background: var(--td-brand-color-focus); color: var(--td-text-color-brand); overflow: hidden; white-space: nowrap; vertical-align: middle; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-sizing: content-box; box-sizing: content-box; width: var(--td-comp-size-m); height: var(--td-comp-size-m); font-size: var(--td-font-size-body-large); line-height: var(--td-comp-size-m); } .oneid-avatar.oneid-avatar__icon { font-size: var(--td-comp-size-xxs); } .oneid-avatar--circle { border-radius: var(--td-radius-circle); } .oneid-avatar--round { border-radius: var(--td-radius-default); } .oneid-avatar.oneid-size-s { width: var(--td-comp-size-xs); height: var(--td-comp-size-xs); font-size: var(--td-font-size-body-medium); line-height: var(--td-comp-size-xs); } .oneid-avatar.oneid-size-s.oneid-avatar__icon { font-size: var(--td-comp-size-xxxs); } .oneid-avatar.oneid-size-l { width: var(--td-comp-size-xl); height: var(--td-comp-size-xl); font-size: var(--td-font-size-title-large); line-height: var(--td-comp-size-xl); } .oneid-avatar.oneid-size-l.oneid-avatar__icon { font-size: var(--td-comp-size-xs); } .oneid-avatar > .oneid-image__wrapper { max-width: 100%; max-height: 100%; } .oneid-avatar-group { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .oneid-avatar-group .oneid-avatar { border: 2px solid var(--td-bg-color-container); } .oneid-avatar-group.oneid-avatar--offset-right .oneid-avatar:not(:last-child) { margin-right: calc(0px - var(--td-size-3)); } .oneid-avatar-group.oneid-avatar--offset-right .oneid-avatar:not(:last-child).oneid-size-s { margin-right: calc(0px - var(--td-size-2)); } .oneid-avatar-group.oneid-avatar--offset-right .oneid-avatar:not(:last-child).oneid-size-l { margin-right: calc(0px - var(--td-size-4)); } .oneid-avatar-group.oneid-avatar--offset-left .oneid-avatar:nth-child(1) { z-index: 49; } .oneid-avatar-group.oneid-avatar--offset-left .oneid-avatar:nth-child(2) { z-index: 48; } .oneid-avatar-group.oneid-avatar--offset-left .oneid-avatar:nth-child(3) { z-index: 47; } .oneid-avatar-group.oneid-avatar--offset-left .oneid-avatar:nth-child(4) { z-index: 46; } .oneid-avatar-group.oneid-avatar--offset-left .oneid-avatar:nth-child(5) { z-index: 45; } .oneid-avatar-group.oneid-avatar--offset-left .oneid-avatar:nth-child(6) { z-index: 44; } .oneid-avatar-group.oneid-avatar--offset-left .oneid-avatar:nth-child(7) { z-index: 43; } .oneid-avatar-group.oneid-avatar--offset-left .oneid-avatar:nth-child(8) { z-index: 42; } .oneid-avatar-group.oneid-avatar--offset-left .oneid-avatar:nth-child(9) { z-index: 41; } .oneid-avatar-group.oneid-avatar--offset-left .oneid-avatar:nth-child(10) { z-index: 40; } .oneid-avatar-group.oneid-avatar--offset-left .oneid-avatar:nth-child(11) { z-index: 39; } .oneid-avatar-group.oneid-avatar--offset-left .oneid-avatar:nth-child(12) { z-index: 38; } .oneid-avatar-group.oneid-avatar--offset-left .oneid-avatar:nth-child(13) { z-index: 37; } .oneid-avatar-group.oneid-avatar--offset-left .oneid-avatar:nth-child(14) { z-index: 36; } .oneid-avatar-group.oneid-avatar--offset-left .oneid-avatar:nth-child(15) { z-index: 35; } .oneid-avatar-group.oneid-avatar--offset-left .oneid-avatar:nth-child(16) { z-index: 34; } .oneid-avatar-group.oneid-avatar--offset-left .oneid-avatar:nth-child(17) { z-index: 33; } .oneid-avatar-group.oneid-avatar--offset-left .oneid-avatar:nth-child(18) { z-index: 32; } .oneid-avatar-group.oneid-avatar--offset-left .oneid-avatar:nth-child(19) { z-index: 31; } .oneid-avatar-group.oneid-avatar--offset-left .oneid-avatar:nth-child(20) { z-index: 30; } .oneid-avatar-group.oneid-avatar--offset-left .oneid-avatar:nth-child(21) { z-index: 29; } .oneid-avatar-group.oneid-avatar--offset-left .oneid-avatar:nth-child(22) { z-index: 28; } .oneid-avatar-group.oneid-avatar--offset-left .oneid-avatar:nth-child(23) { z-index: 27; } .oneid-avatar-group.oneid-avatar--offset-left .oneid-avatar:nth-child(24) { z-index: 26; } .oneid-avatar-group.oneid-avatar--offset-left .oneid-avatar:nth-child(25) { z-index: 25; } .oneid-avatar-group.oneid-avatar--offset-left .oneid-avatar:nth-child(26) { z-index: 24; } .oneid-avatar-group.oneid-avatar--offset-left .oneid-avatar:nth-child(27) { z-index: 23; } .oneid-avatar-group.oneid-avatar--offset-left .oneid-avatar:nth-child(28) { z-index: 22; } .oneid-avatar-group.oneid-avatar--offset-left .oneid-avatar:nth-child(29) { z-index: 21; } .oneid-avatar-group.oneid-avatar--offset-left .oneid-avatar:nth-child(30) { z-index: 20; } .oneid-avatar-group.oneid-avatar--offset-left .oneid-avatar:nth-child(31) { z-index: 19; } .oneid-avatar-group.oneid-avatar--offset-left .oneid-avatar:nth-child(32) { z-index: 18; } .oneid-avatar-group.oneid-avatar--offset-left .oneid-avatar:nth-child(33) { z-index: 17; } .oneid-avatar-group.oneid-avatar--offset-left .oneid-avatar:nth-child(34) { z-index: 16; } .oneid-avatar-group.oneid-avatar--offset-left .oneid-avatar:nth-child(35) { z-index: 15; } .oneid-avatar-group.oneid-avatar--offset-left .oneid-avatar:nth-child(36) { z-index: 14; } .oneid-avatar-group.oneid-avatar--offset-left .oneid-avatar:nth-child(37) { z-index: 13; } .oneid-avatar-group.oneid-avatar--offset-left .oneid-avatar:nth-child(38) { z-index: 12; } .oneid-avatar-group.oneid-avatar--offset-left .oneid-avatar:nth-child(39) { z-index: 11; } .oneid-avatar-group.oneid-avatar--offset-left .oneid-avatar:nth-child(40) { z-index: 10; } .oneid-avatar-group.oneid-avatar--offset-left .oneid-avatar:nth-child(41) { z-index: 9; } .oneid-avatar-group.oneid-avatar--offset-left .oneid-avatar:nth-child(42) { z-index: 8; } .oneid-avatar-group.oneid-avatar--offset-left .oneid-avatar:nth-child(43) { z-index: 7; } .oneid-avatar-group.oneid-avatar--offset-left .oneid-avatar:nth-child(44) { z-index: 6; } .oneid-avatar-group.oneid-avatar--offset-left .oneid-avatar:nth-child(45) { z-index: 5; } .oneid-avatar-group.oneid-avatar--offset-left .oneid-avatar:nth-child(46) { z-index: 4; } .oneid-avatar-group.oneid-avatar--offset-left .oneid-avatar:nth-child(47) { z-index: 3; } .oneid-avatar-group.oneid-avatar--offset-left .oneid-avatar:nth-child(48) { z-index: 2; } .oneid-avatar-group.oneid-avatar--offset-left .oneid-avatar:nth-child(49) { z-index: 1; } .oneid-avatar-group.oneid-avatar--offset-left .oneid-avatar:nth-child(50) { z-index: 0; } .oneid-avatar-group.oneid-avatar--offset-left .oneid-avatar:not(:first-child) { margin-left: calc(0px - var(--td-size-3)); } .oneid-avatar-group.oneid-avatar--offset-left .oneid-avatar:not(:first-child).oneid-size-s { margin-left: calc(0px - var(--td-size-2)); } .oneid-avatar-group.oneid-avatar--offset-left .oneid-avatar:not(:first-child).oneid-size-l { margin-left: calc(0px - var(--td-size-4)); } :root, :root[theme-mode=light] { --skeleton-animation-gradient: rgba(0, 0, 0, 0.04); } :root[theme-mode=dark] { --skeleton-animation-gradient: rgba(255, 255, 255, 0.06); } .oneid-skeleton { font: var(--td-font-body-medium); color: var(--td-text-color-primary); -webkit-box-sizing: border-box; box-sizing: border-box; margin: 0; padding: 0; list-style: none; } .oneid-skeleton__row { display: -webkit-box; display: -ms-flexbox; display: flex; margin-bottom: var(--td-comp-margin-l); -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .oneid-skeleton__row:only-child, .oneid-skeleton__row:last-child { margin-bottom: 0; } .oneid-skeleton__col { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; background-color: var(--td-bg-color-secondarycontainer); color: var(--td-text-color-disabled); margin-right: var(--td-comp-margin-l); } .oneid-skeleton__col:first-child:last-child, .oneid-skeleton__col:last-child { margin-right: 0; } .oneid-skeleton--type-text { width: 100%; height: var(--td-font-size-body-large); border-radius: var(--td-radius-default); } .oneid-skeleton--type-rect { width: 120px; height: 88px; border-radius: var(--td-radius-default); } .oneid-skeleton--type-circle { width: 32px; height: 32px; border-radius: var(--td-radius-circle); -ms-flex-negative: 0; flex-shrink: 0; } .oneid-skeleton--animation-gradient { position: relative; overflow-x: hidden; } .oneid-skeleton--animation-gradient::after { content: " "; position: absolute; bottom: 0; left: 0; right: 0; top: 0; background: -webkit-gradient(linear, left top, right top, from(rgba(255, 255, 255, 0)), color-stop(var(--skeleton-animation-gradient)), to(rgba(255, 255, 255, 0))); background: linear-gradient(90deg, rgba(255, 255, 255, 0), var(--skeleton-animation-gradient), rgba(255, 255, 255, 0)); -webkit-animation: t-skeleton--gradient 1.5s linear 2s infinite; animation: t-skeleton--gradient 1.5s linear 2s infinite; } .oneid-skeleton--animation-flashed { -webkit-animation: t-skeleton--flashed 2s linear 2s infinite; animation: t-skeleton--flashed 2s linear 2s infinite; } @-webkit-keyframes t-skeleton--gradient { 0% { -webkit-transform: translateX(-100%) skewX(-15deg); transform: translateX(-100%) skewX(-15deg); } 100% { -webkit-transform: translateX(100%) skewX(-15deg); transform: translateX(100%) skewX(-15deg); } } @keyframes t-skeleton--gradient { 0% { -webkit-transform: translateX(-100%) skewX(-15deg); transform: translateX(-100%) skewX(-15deg); } 100% { -webkit-transform: translateX(100%) skewX(-15deg); transform: translateX(100%) skewX(-15deg); } } @-webkit-keyframes t-skeleton--flashed { 0% { opacity: 1; } 50% { background-color: rgba(230, 230, 230, 0.3); opacity: 0.3; } 100% { opacity: 1; } } @keyframes t-skeleton--flashed { 0% { opacity: 1; } 50% { background-color: rgba(230, 230, 230, 0.3); opacity: 0.3; } 100% { opacity: 1; } } .oneid-color-picker__panel { padding: 0; width: 256px; background: var(--td-bg-color-container); -webkit-box-shadow: var(--td-shadow-2), var(--td-shadow-inset-top), var(--td-shadow-inset-right), var(--td-shadow-inset-bottom), var(--td-shadow-inset-left); box-shadow: var(--td-shadow-2), var(--td-shadow-inset-top), var(--td-shadow-inset-right), var(--td-shadow-inset-bottom), var(--td-shadow-inset-left); border-radius: var(--td-radius-medium); -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .oneid-popup__content .oneid-color-picker__panel { background: transparent; -webkit-box-shadow: unset; box-shadow: unset; } .oneid-color-picker { font: var(--td-font-body-medium); color: var(--td-text-color-primary); -webkit-box-sizing: border-box; box-sizing: border-box; margin: 0; padding: 0; list-style: none; } .oneid-color-picker.oneid-popup__content { -webkit-box-shadow: var(--td-shadow-2), var(--td-shadow-inset-top), var(--td-shadow-inset-right), var(--td-shadow-inset-bottom), var(--td-shadow-inset-left); box-shadow: var(--td-shadow-2), var(--td-shadow-inset-top), var(--td-shadow-inset-right), var(--td-shadow-inset-bottom), var(--td-shadow-inset-left); } .oneid-color-picker__icon { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; font-size: var(--td-comp-size-xxxs); background: transparent; -webkit-transition: 0.2s linear; transition: 0.2s linear; color: var(--td-text-color-secondary); border-radius: var(--td-radius-default); cursor: pointer; } .oneid-color-picker__icon:hover { background: var(--td-bg-color-container-hover); -webkit-transition: 0.2s linear; transition: 0.2s linear; } .oneid-color-picker__icon.oneid-is-disabled { color: var(--td-text-color-disabled); pointer-events: none; } .oneid-color-picker__head { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; padding: var(--td-pop-padding-xl); position: relative; z-index: 2; } .oneid-color-picker__head .oneid-color-picker__close { -ms-flex-negative: 0; flex-shrink: 0; } .oneid-color-picker__head + .oneid-color-picker__body { padding-top: 0; } .oneid-color-picker__body { padding: var(--td-pop-padding-xl); padding-bottom: calc(var(--td-pop-padding-xl) - 4px); } .oneid-color-picker__thumb { position: absolute; z-index: 1; outline: none; border-color: currentcolor; width: calc(var(--td-comp-size-xxxs) + var(--td-size-1)); height: calc(var(--td-comp-size-xxxs) + var(--td-size-1)); border-radius: var(--td-radius-circle); -webkit-box-shadow: var(--td-shadow-1); box-shadow: var(--td-shadow-1); background: var(--td-text-color-anti); color: var(--td-text-color-brand); padding: 2px; -webkit-box-sizing: border-box; box-sizing: border-box; } .oneid-color-picker__thumb::before { content: ""; width: 100%; height: 100%; background: currentcolor; border-radius: var(--td-radius-circle); display: block; } .oneid-color-picker__saturation { height: 160px; border-radius: var(--td-radius-default); position: relative; overflow: hidden; background: transparent; } .oneid-color-picker__saturation::before, .oneid-color-picker__saturation::after { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .oneid-color-picker__saturation::before { /* stylelint-disable-next-line color-no-hex */ background: -webkit-gradient(linear, left top, right top, from(#fff), to(transparent)); background: linear-gradient(90deg, #fff, transparent); } .oneid-color-picker__saturation::after { /* stylelint-disable-next-line color-no-hex */ background: -webkit-gradient(linear, left bottom, left top, from(#000), to(transparent)); background: linear-gradient(0deg, #000, transparent); } .oneid-color-picker__saturation .oneid-color-picker__thumb { width: calc(var(--td-comp-size-xxxs) + var(--td-size-1)); height: calc(var(--td-comp-size-xxxs) + var(--td-size-1)); border-radius: var(--td-radius-circle); -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } .oneid-color-picker__slider-wrapper { border-radius: 4px; padding: 0 calc((var(--td-comp-size-xxxs) + var(--td-size-1)) / 2); position: relative; } .oneid-color-picker__slider-wrapper--hue-type { /* stylelint-disable-next-line color-named */ background: red; } .oneid-color-picker__slider-wrapper--alpha-type { background: var(--td-text-color-anti); /* stylelint-disable-next-line color-no-hex */ background-image: linear-gradient(45deg, #c5c5c5 25%, transparent 0, transparent 75%, #c5c5c5 0, #c5c5c5), linear-gradient(45deg, #c5c5c5 25%, transparent 0, transparent 75%, #c5c5c5 0, #c5c5c5); background-size: 6px 6px; background-position: 0 0, 3px 3px; } .oneid-color-picker__slider-padding { position: absolute; left: 0; top: 0; width: 100%; height: 8px; border-radius: 4px; } .oneid-color-picker__slider { height: 8px; position: relative; border-radius: 4px; cursor: pointer; color: transparent; outline: none; z-index: 1; } .oneid-color-picker__slider .oneid-color-picker__thumb { -webkit-transform: translate(calc((var(--td-comp-size-xxxs) + var(--td-size-1)) * -0.5), -50%); transform: translate(calc((var(--td-comp-size-xxxs) + var(--td-size-1)) * -0.5), -50%); top: 50%; } .oneid-color-picker__slider .oneid-color-picker__rail { position: absolute; top: 0; left: 0; width: 100%; height: 100%; overflow: hidden; border-radius: inherit; } .oneid-color-picker__alpha, .oneid-color-picker__format { margin: var(--td-comp-margin-m) 0 0 0; } .oneid-color-picker__hue { /* stylelint-disable color-no-hex, color-named */ background: -webkit-gradient(linear, left top, right top, from(red), color-stop(17%, #ff0), color-stop(33%, #0f0), color-stop(50%, #0ff), color-stop(67%, #00f), color-stop(83%, #f0f), to(red)); background: linear-gradient(90deg, red, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, red); } .oneid-color-picker__alpha .oneid-color-picker__rail { background: -webkit-gradient(linear, left top, right top, from(transparent), to(currentcolor)); background: linear-gradient(to right, transparent, currentcolor); } .oneid-color-picker__sliders-wrapper { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; margin: var(--td-comp-margin-m) 0; } .oneid-color-picker__sliders { width: 100%; } .oneid-color-picker__sliders-preview { -ms-flex-negative: 0; flex-shrink: 0; margin-left: var(--td-comp-margin-m); width: var(--td-comp-size-s); height: var(--td-comp-size-s); border-radius: var(--td-radius-default); overflow: hidden; background: var(--td-text-color-anti); /* stylelint-disable-next-line color-no-hex */ background-image: linear-gradient(45deg, #c5c5c5 25%, transparent 0, transparent 75%, #c5c5c5 0, #c5c5c5), linear-gradient(45deg, #c5c5c5 25%, transparent 0, transparent 75%, #c5c5c5 0, #c5c5c5); background-size: 6px 6px; background-position: 0 0, 3px 3px; } .oneid-color-picker__sliders-preview-inner { display: block; width: 100%; height: 100%; } .oneid-color-picker__gradient { padding: 0; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; margin-bottom: var(--td-comp-margin-m); } .oneid-color-picker__gradient-slider { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; } .oneid-color-picker__gradient-degree { position: relative; -ms-flex-negative: 0; flex-shrink: 0; margin-left: var(--td-comp-margin-m); width: var(--td-comp-size-xxl); } .oneid-color-picker__gradient-degree .oneid-input { margin: 0; font: var(--td-font-body-small); } .oneid-color-picker__gradient-degree .oneid-input-number { width: 100%; padding: 0; } .oneid-color-picker__gradient .gradient-thumbs { position: absolute; width: 100%; height: 100%; top: 0; left: 0; margin: 0; padding: 0; list-style: none; border-radius: inherit; cursor: pointer; } .oneid-color-picker__gradient .gradient-thumbs__item { top: 50%; left: 0; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); z-index: 0; cursor: pointer; } .oneid-color-picker__gradient .gradient-thumbs__item::before { display: none; } .oneid-color-picker__gradient .gradient-thumbs__item.oneid-is-active { z-index: 1; outline: 2px solid var(--td-component-border); } .oneid-color-picker__gradient .gradient-thumbs__item-inner { display: block; width: 100%; height: 100%; border-radius: var(--td-radius-circle); overflow: hidden; } .oneid-color-picker__gradient .gradient-thumbs__item-inner::before { content: ""; width: 100%; height: 100%; display: block; background-color: currentcolor; } .oneid-color-picker__format { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } .oneid-color-picker__format--item:first-child { -ms-flex-negative: 0; flex-shrink: 0; } .oneid-color-picker__format--item:last-child { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; } .oneid-color-picker__format--item .oneid-size-m, .oneid-color-picker__format--item .oneid-input.oneid-size-m { font: var(--td-font-body-small); } .oneid-color-picker__format--item .oneid-input-number .oneid-input { margin: 0; } .oneid-color-picker__format--item .input-group { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -ms-flex-pack: distribute; justify-content: space-around; margin-left: var(--td-comp-margin-s); } .oneid-color-picker__format--item .input-group__item { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; width: 0; margin-left: -1px; } .oneid-color-picker__format--item .input-group__item .oneid-input { padding: 0 1px; } .oneid-color-picker__format--item .input-group__item .oneid-input:focus, .oneid-color-picker__format--item .input-group__item .oneid-input:focus-within, .oneid-color-picker__format--item .input-group__item .oneid-input:hover { z-index: 1; } .oneid-color-picker__format--item .input-group__item:not(:first-child):not(:last-child) .oneid-input { border-radius: 0; } .oneid-color-picker__format--item .input-group__item:first-child:not(:last-child) .oneid-input { border-top-right-radius: 0; border-bottom-right-radius: 0; } .oneid-color-picker__format--item .input-group__item:last-child:not(:first-child) .oneid-input { border-top-left-radius: 0; border-bottom-left-radius: 0; } .oneid-color-picker__format--item .input-group .oneid-input-number { width: 100%; padding: 0; max-width: 100%; } .oneid-color-picker__format-mode-select { width: 72px; display: -webkit-box; display: -ms-flexbox; display: flex; } .oneid-color-picker__format-mode-select .oneid-select, .oneid-color-picker__format-mode-select .oneid-input { padding-right: 0; } .oneid-color-picker__format-mode-select .oneid-input--prefix > .oneid-input__suffix { padding-left: 0; } .oneid-color-picker__format-mode-select .oneid-select__right-icon { margin-right: var(--td-comp-margin-xs); } .oneid-color-picker__swatches-wrap { margin-top: var(--td-comp-margin-m); position: relative; } .oneid-color-picker__swatches-wrap .oneid-color-picker__swatches + .oneid-color-picker__swatches { margin-top: var(--td-comp-margin-m); } .oneid-color-picker__swatches-wrap .oneid-color-picker__swatches--title { font: var(--td-font-body-small); padding: 0; color: var(--td-text-color-primary); display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } .oneid-color-picker__swatches-wrap .oneid-color-picker__swatches--actions { margin-left: auto; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; font-size: 0; } .oneid-color-picker__swatches-wrap .oneid-color-picker__swatches--actions .oneid-color-picker__icon { width: var(--td-comp-size-xxxs); height: var(--td-comp-size-xxxs); margin-left: var(--td-comp-margin-s); } .oneid-color-picker__swatches-wrap .oneid-color-picker__swatches--items { width: 100%; list-style: none; display: grid; grid-template-columns: repeat(10, var(--td-comp-size-xxxs)); gap: calc((256px - (var(--td-pop-padding-xl) * 2 + var(--td-comp-size-xxxs) * 10)) / 9) calc((256px - (var(--td-pop-padding-xl) * 2 + var(--td-comp-size-xxxs) * 10)) / 9); max-height: calc(4 * (var(--td-comp-size-xxxs) + (256px - (var(--td-pop-padding-xl) * 2 + var(--td-comp-size-xxxs) * 10)) / 9)); overflow-x: hidden; overflow-y: auto; padding: calc(var(--td-pop-padding-xl) - 8px); position: relative; left: calc(0px - (var(--td-pop-padding-xl) - 8px)); -webkit-box-sizing: content-box; box-sizing: content-box; } .oneid-color-picker__swatches-wrap .oneid-color-picker__swatches--item { display: -webkit-box; display: -ms-flexbox; display: flex; width: var(--td-comp-size-xxxs); height: var(--td-comp-size-xxxs); border-radius: var(--td-radius-default); padding: 0; overflow: hidden; cursor: pointer; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; position: relative; -webkit-transform-origin: center; transform-origin: center; -webkit-transition: all 0.2s cubic-bezier(0.38, 0, 0.24, 1); transition: all 0.2s cubic-bezier(0.38, 0, 0.24, 1); -webkit-box-sizing: border-box; box-sizing: border-box; } .oneid-color-picker__swatches-wrap .oneid-color-picker__swatches--item:hover { -webkit-transform: scale(1.25); transform: scale(1.25); -webkit-transform-origin: center; transform-origin: center; } .oneid-color-picker__swatches-wrap .oneid-color-picker__swatches--item__color { width: 100%; height: 100%; position: relative; overflow: hidden; border: 1px solid var(--td-component-border); border-radius: var(--td-radius-default); -ms-flex-negative: 0; flex-shrink: 0; } .oneid-color-picker__swatches-wrap .oneid-color-picker__swatches--item__inner { width: 100%; height: 100%; display: block; } .oneid-color-picker__swatches-wrap .oneid-color-picker__swatches--item:not(.oneid-is-active):hover { padding: 0; } .oneid-color-picker__swatches-wrap .oneid-color-picker__swatches--item.oneid-is-active .oneid-color-picker__swatches--item__color, .oneid-color-picker__swatches-wrap .oneid-color-picker__swatches--item.oneid-is-active .oneid-color-picker__swatches--color { border-color: var(--td-text-color-brand); } .oneid-color-picker__swatches-wrap .oneid-color-picker__swatches--color { width: 100%; height: 100%; position: relative; overflow: hidden; border-radius: var(--td-radius-default); -webkit-box-sizing: border-box; box-sizing: border-box; } .oneid-color-picker__swatches-wrap .oneid-color-picker__swatches--inner { width: 100%; height: 100%; display: block; border-radius: var(--td-radius-default); -webkit-box-shadow: var(--td-shadow-inset-top), var(--td-shadow-inset-right), var(--td-shadow-inset-bottom), var(--td-shadow-inset-left); box-shadow: var(--td-shadow-inset-top), var(--td-shadow-inset-right), var(--td-shadow-inset-bottom), var(--td-shadow-inset-left); } .oneid-color-picker__trigger--default { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .oneid-color-picker__trigger--default > .oneid-input { width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; } .oneid-color-picker__trigger--default .oneid-input { padding: 0 var(--td-comp-paddingLR-s) 0 var(--td-comp-paddingLR-xs); } .oneid-color-picker__trigger--default__color { width: 100%; height: 100%; -webkit-box-sizing: border-box; box-sizing: border-box; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .oneid-color-picker__trigger--default__color .color-inner { border: 1px solid var(--td-scrollbar-color); display: block; width: calc(var(--td-comp-size-xs) - 2px); height: calc(var(--td-comp-size-xs) - 2px); color: transparent; position: relative; border-radius: var(--td-radius-small); } .oneid-color-picker__trigger--default__color .color-inner.oneid-size-s { width: calc(var(--td-comp-size-xxs) - 2px); height: calc(var(--td-comp-size-xxs) - 2px); } .oneid-color-picker__trigger--default__color .color-inner.oneid-size-l { width: calc(var(--td-comp-size-s) - 2px); height: calc(var(--td-comp-size-s) - 2px); } .oneid-color-picker__gradient-slider { padding: 0 calc((var(--td-comp-size-xxxs) + var(--td-size-1)) / 2); border-radius: 4px; } .oneid-color-picker__gradient-slider .oneid-color-picker--bg-alpha { background: var(--td-text-color-anti); /* stylelint-disable-next-line color-no-hex */ background-image: linear-gradient(45deg, #c5c5c5 25%, transparent 0, transparent 75%, #c5c5c5 0, #c5c5c5), linear-gradient(45deg, #c5c5c5 25%, transparent 0, transparent 75%, #c5c5c5 0, #c5c5c5); background-size: 6px 6px; background-position: 0 0, 3px 3px; } .oneid-color-picker__panel.oneid-is-disabled .oneid-color-picker__saturation, .oneid-color-picker__panel.oneid-is-disabled .oneid-color-picker__slider, .oneid-color-picker__panel.oneid-is-disabled .oneid-color-picker__swatches--item { opacity: 0.8; cursor: not-allowed; } .oneid-color-picker__panel.oneid-is-disabled .oneid-color-picker__gradient-slider .gradient-thumbs, .oneid-color-picker__panel.oneid-is-disabled .oneid-color-picker__gradient-slider .gradient-thumbs__item { cursor: not-allowed; } .oneid-color-picker__panel.oneid-is-disabled .oneid-color-picker__swatches--item:hover { padding: 0; } .oneid-color-picker__select-options > .oneid-popup__content { -webkit-box-shadow: var(--td-shadow-1), var(--td-shadow-inset-top), var(--td-shadow-inset-right), var(--td-shadow-inset-bottom), var(--td-shadow-inset-left); box-shadow: var(--td-shadow-1), var(--td-shadow-inset-top), var(--td-shadow-inset-right), var(--td-shadow-inset-bottom), var(--td-shadow-inset-left); } .oneid-card { font: var(--td-font-body-medium); margin: 0; padding: 0; list-style: none; position: relative; -webkit-box-sizing: border-box; box-sizing: border-box; border-radius: var(--td-radius-medium); background-color: var(--td-bg-color-container); color: var(--td-text-color-primary); -webkit-transition: -webkit-box-shadow 0.2s cubic-bezier(0.38, 0, 0.24, 1); transition: -webkit-box-shadow 0.2s cubic-bezier(0.38, 0, 0.24, 1); transition: box-shadow 0.2s cubic-bezier(0.38, 0, 0.24, 1); transition: box-shadow 0.2s cubic-bezier(0.38, 0, 0.24, 1), -webkit-box-shadow 0.2s cubic-bezier(0.38, 0, 0.24, 1); } .oneid-card--bordered { border: 1px solid var(--td-component-border); } .oneid-card--shadow-hover:hover, .oneid-card--shadow { -webkit-box-shadow: var(--td-shadow-1); box-shadow: var(--td-shadow-1); } .oneid-card__cover { display: flow-root; } .oneid-card__cover img { display: flow-root; width: 100%; max-height: 100%; border-radius: var(--td-radius-default) var(--td-radius-default) 0 0; } .oneid-card__body { display: flow-root; padding: var(--td-comp-paddingTB-l) var(--td-comp-paddingLR-xl); } .oneid-card__header { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -ms-flex-align: center; align-items: center; padding: var(--td-comp-paddingTB-l) var(--td-comp-paddingLR-xl); position: relative; } .oneid-card__header-wrapper { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .oneid-card__header + .oneid-card__cover img { border-radius: 0; } .oneid-card__footer { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; padding: var(--td-comp-paddingTB-l) var(--td-comp-paddingLR-xl); } .oneid-card__footer-wrapper { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; } .oneid-size-s .oneid-card__body { padding: var(--td-comp-paddingTB-s) var(--td-comp-paddingLR-l); } .oneid-size-s .oneid-card__header { padding: var(--td-comp-paddingTB-s) var(--td-comp-paddingLR-l); } .oneid-size-s .oneid-card__footer { padding: var(--td-comp-paddingTB-s) var(--td-comp-paddingLR-l); } .oneid-card__avatar { margin-right: var(--td-comp-margin-l); width: var(--td-comp-size-xxxl); height: var(--td-comp-size-xxxl); } .oneid-card__title { font: var(--td-font-title-medium); color: var(--td-text-color-primary); margin-right: var(--td-comp-margin-l); word-break: break-all; } .oneid-card__subtitle { font: var(--td-font-body-medium); color: var(--td-text-color-secondary); word-break: break-all; } .oneid-card__description { font: var(--td-font-body-medium); color: var(--td-text-color-secondary); margin-top: var(--td-comp-margin-xs); word-break: break-all; } .oneid-card__actions { float: right; color: var(--td-brand-color); } .oneid-card__title--bordered { border-bottom: 1px solid var(--td-component-border); } .oneid-collapse { font: var(--td-font-body-medium); color: var(--td-text-color-primary); -webkit-box-sizing: border-box; box-sizing: border-box; margin: 0; padding: 0; list-style: none; border: solid 1px var(--td-component-border); border-bottom: 0; background: var(--td-bg-color-container); } .oneid-collapse.oneid--border-less { border: none; } .oneid-collapse.oneid--border-less .oneid-collapse-panel__header { border-bottom: none; } .oneid-collapse.oneid--border-less .oneid-collapse-panel__body { background: var(--td-bg-color-container); border: none; } .oneid-collapse-panel__icon { -webkit-transition: all 0.2s cubic-bezier(0.38, 0, 0.24, 1); transition: all 0.2s cubic-bezier(0.38, 0, 0.24, 1); cursor: pointer; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .oneid-collapse-panel__icon > .oneid-fake-arrow { -webkit-transform: rotate(-90deg); transform: rotate(-90deg); -webkit-transition: all 0.2s cubic-bezier(0.38, 0, 0.24, 1); transition: all 0.2s cubic-bezier(0.38, 0, 0.24, 1); } .oneid-collapse-panel__icon--left { margin-right: var(--td-comp-margin-s); } .oneid-collapse-panel__icon--right { margin-left: var(--td-comp-margin-s); } .oneid-collapse-panel__icon--active > .oneid-fake-arrow { -webkit-transform: rotate(0); transform: rotate(0); } .oneid-collapse-panel__icon:hover { background-color: var(--td-bg-color-container-hover); border-radius: var(--td-radius-small); } .oneid-collapse-panel__wrapper { overflow: hidden; } .oneid-collapse-panel__wrapper.oneid--borderless .oneid-collapse-panel__header { border-bottom: none; } .oneid-collapse-panel__wrapper.oneid--borderless .oneid-collapse-panel__body { background: var(--td-bg-color-container); border: none; } .oneid-collapse-panel__wrapper .oneid-collapse-panel__header { padding: var(--td-comp-paddingTB-m) var(--td-comp-paddingLR-l); border-bottom: solid 1px var(--td-component-border); font: var(--td-font-title-small); display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .oneid-collapse-panel__wrapper .oneid-collapse-panel__header--blank { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; } .oneid-collapse-panel__wrapper .oneid-collapse-panel__header.oneid-is-clickable { cursor: pointer; } .oneid-collapse-panel__wrapper .oneid-collapse-panel__header-left, .oneid-collapse-panel__wrapper .oneid-collapse-panel__header-right, .oneid-collapse-panel__wrapper .oneid-collapse-panel__header-right-content { display: -webkit-box; display: -ms-flexbox; display: flex; } .oneid-collapse-panel__wrapper .oneid-collapse-panel__body { border-bottom: solid 1px var(--td-component-border); background: var(--td-bg-color-secondarycontainer); overflow: inherit; } .oneid-collapse-panel__wrapper .oneid-collapse-panel__body--collapsed { border: none; } .oneid-collapse-panel__wrapper .oneid-collapse-panel__content { padding: var(--td-comp-paddingTB-m) var(--td-comp-paddingLR-l) var(--td-comp-paddingTB-m) calc(var(--td-comp-paddingLR-l) + var(--td-comp-margin-xxl)); color: var(--td-text-color-secondary); } .oneid-collapse-panel.oneid-is-disabled .oneid-collapse-panel__header { cursor: not-allowed; color: var(--td-text-color-disabled); } .oneid-collapse-panel.oneid-is-disabled .oneid-collapse-panel__icon { cursor: not-allowed; pointer-events: none; } .oneid-collapse-panel.oneid-is-disabled .oneid-collapse-panel__body { background: var(--td-bg-color-component-disabled); } .oneid-collapse-panel.oneid-is-disabled .oneid-collapse-panel__content { color: var(--td-text-color-disabled); } .oneid-watermark { position: relative; } .oneid-timeline { font: var(--td-font-body-medium); color: var(--td-text-color-primary); -webkit-box-sizing: border-box; box-sizing: border-box; margin: 0; padding: 0; list-style: none; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } .oneid-timeline-item { min-height: 72px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; position: relative; } .oneid-timeline-item__label.oneid-timeline-item__label--alternate { position: absolute; } .oneid-timeline-item__wrapper { width: 8px; position: relative; } .oneid-timeline-item__wrapper .oneid-timeline-item__dot { -webkit-box-sizing: unset; box-sizing: unset; position: absolute; width: 4px; height: 4px; border: 2px solid transparent; border-radius: 50%; top: 8px; } .oneid-timeline-item__wrapper .oneid-timeline-item__dot--primary { border-color: var(--td-brand-color); } .oneid-timeline-item__wrapper .oneid-timeline-item__dot--default { border-color: var(--td-component-border); } .oneid-timeline-item__wrapper .oneid-timeline-item__dot--success { border-color: var(--td-success-color); } .oneid-timeline-item__wrapper .oneid-timeline-item__dot--warning { border-color: var(--td-warning-color); } .oneid-timeline-item__wrapper .oneid-timeline-item__dot--error { border-color: var(--td-error-color); } .oneid-timeline-item__wrapper .oneid-timeline-item__dot--custom { position: relative; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); top: 4px; border: 0; } .oneid-timeline-item__wrapper .oneid-timeline-item__dot--custom .oneid-timeline-item__dot-content { position: absolute; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); top: 0; } .oneid-timeline-item__wrapper .oneid-timeline-item__tail { position: absolute; border-left: 2px solid transparent; left: 50%; height: calc(100% - 24px); bottom: 0; -webkit-transform: translateX(-50%); transform: translateX(-50%); padding-bottom: var(--td-comp-size-s); border-color: var(--td-component-border); -webkit-box-sizing: border-box; box-sizing: border-box; } .oneid-timeline-item__wrapper .oneid-timeline-item__tail--theme-dot { border-style: dashed; border-right: 0; } .oneid-timeline-item__label { color: var(--td-text-color-secondary); font-size: var(--td-font-size-body-medium); } .oneid-timeline-item__content { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; padding-left: var(--td-comp-margin-l); font-size: var(--td-font-size-body-large); } .oneid-timeline-item--last .oneid-timeline-item__tail { display: none; } .oneid-timeline-label.oneid-timeline-label--alternate.oneid-timeline-left .oneid-timeline-item__label { text-align: right; left: 0; } .oneid-timeline-label.oneid-timeline-label--alternate.oneid-timeline-left .oneid-timeline-item__wrapper { margin-left: 100px; } .oneid-timeline-label.oneid-timeline-label--alternate.oneid-timeline-right .oneid-timeline-item__label { text-align: left; right: 0; } .oneid-timeline-label.oneid-timeline-label--alternate.oneid-timeline-right .oneid-timeline-item__wrapper { margin-right: 100px; } .oneid-timeline-right .oneid-timeline-item { -webkit-box-orient: horizontal; -webkit-box-direction: reverse; -ms-flex-direction: row-reverse; flex-direction: row-reverse; } .oneid-timeline-right .oneid-timeline-item__content { text-align: right; padding-left: 0; padding-right: var(--td-comp-margin-l); } .oneid-timeline-alternate .oneid-timeline-item-left { margin-left: calc(50% - 4px); } .oneid-timeline-alternate .oneid-timeline-item-right { text-align: right; -webkit-box-orient: horizontal; -webkit-box-direction: reverse; -ms-flex-direction: row-reverse; flex-direction: row-reverse; margin-right: calc(50% - 4px); } .oneid-timeline-alternate .oneid-timeline-item-right .oneid-timeline-item__content { padding-right: var(--td-comp-margin-l); padding-left: 0; } .oneid-timeline-label.oneid-timeline-alternate .oneid-timeline-item__label { width: 100%; } .oneid-timeline-label.oneid-timeline-alternate .oneid-timeline-item-left .oneid-timeline-item__label--alternate { left: 0; -webkit-transform: translateX(-100%); transform: translateX(-100%); text-align: right; padding-right: var(--td-comp-margin-l); } .oneid-timeline-label.oneid-timeline-alternate .oneid-timeline-item-right .oneid-timeline-item__label--alternate { right: 0; -webkit-transform: translateX(100%); transform: translateX(100%); text-align: left; padding-left: var(--td-comp-margin-l); } .oneid-timeline-horizontal { min-height: 200px; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .oneid-timeline-horizontal .oneid-timeline-item { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; padding-right: 8px; min-width: 160px; } .oneid-timeline-horizontal .oneid-timeline-item__wrapper { width: 100%; height: 8px; } .oneid-timeline-horizontal .oneid-timeline-item__wrapper .oneid-timeline-item__dot { position: absolute; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); left: unset; width: 4px; height: 4px; border-radius: 50%; } .oneid-timeline-horizontal .oneid-timeline-item__wrapper .oneid-timeline-item__dot--custom { position: relative; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); border: 0; } .oneid-timeline-horizontal .oneid-timeline-item__wrapper .oneid-timeline-item__dot--custom .oneid-timeline-item__dot-content { position: absolute; left: 0; -webkit-transform: translateY(-50%); transform: translateY(-50%); top: 50%; } .oneid-timeline-horizontal .oneid-timeline-item__wrapper .oneid-timeline-item__tail { left: calc(8px + var(--td-comp-margin-s)); top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); width: calc(100% - (8px + var(--td-comp-margin-s))); border: 0; border-top: 2px solid transparent; padding-bottom: 0; border-color: var(--td-component-border); } .oneid-timeline-horizontal .oneid-timeline-item__wrapper .oneid-timeline-item__tail--theme-dot { border-style: dashed; border-right: 0; } .oneid-timeline-horizontal .oneid-timeline-item__content { padding-left: unset; padding-top: var(--td-comp-margin-l); -webkit-box-flex: unset; -ms-flex: unset; flex: unset; } .oneid-timeline-vertical .oneid-timeline-item__content { padding-bottom: var(--td-comp-margin-l); } .oneid-timeline-label.oneid-timeline-horizontal.oneid-timeline-top .oneid-timeline-item__label--alternate { top: 0; width: 100%; -webkit-transform: translateY(-100%); transform: translateY(-100%); padding-bottom: 0; } .oneid-timeline-label.oneid-timeline-horizontal.oneid-timeline-bottom .oneid-timeline-item { -webkit-box-orient: vertical; -webkit-box-direction: reverse; -ms-flex-direction: column-reverse; flex-direction: column-reverse; } .oneid-timeline-label.oneid-timeline-horizontal.oneid-timeline-bottom .oneid-timeline-item__wrapper { padding-top: 0; } .oneid-timeline-label.oneid-timeline-horizontal.oneid-timeline-bottom .oneid-timeline-item__label--alternate { padding-top: var(--td-comp-margin-l); bottom: 0; width: 100%; -webkit-transform: translateY(100%); transform: translateY(100%); } .oneid-timeline-label.oneid-timeline-horizontal.oneid-timeline-bottom .oneid-timeline-item__content { padding-top: 0; padding-bottom: var(--td-comp-margin-l); } .oneid-timeline-label.oneid-timeline-horizontal.oneid-timeline-alternate .oneid-timeline-item-top .oneid-timeline-item__label--alternate { top: 0; width: 100%; -webkit-transform: translateY(-100%); transform: translateY(-100%); padding-bottom: var(--td-comp-margin-l); } .oneid-timeline-label.oneid-timeline-horizontal.oneid-timeline-alternate .oneid-timeline-item-bottom { -webkit-box-orient: vertical; -webkit-box-direction: reverse; -ms-flex-direction: column-reverse; flex-direction: column-reverse; position: relative; -webkit-transform: translateY(calc(-100% + 8px)); transform: translateY(calc(-100% + 8px)); } .oneid-timeline-label.oneid-timeline-horizontal.oneid-timeline-alternate .oneid-timeline-item-bottom .oneid-timeline-item__content { padding-bottom: var(--td-comp-margin-l); padding-top: unset; } .oneid-timeline-label.oneid-timeline-horizontal.oneid-timeline-alternate .oneid-timeline-item-bottom .oneid-timeline-item__label--alternate { bottom: 0; -webkit-transform: translateY(100%); transform: translateY(100%); padding-top: var(--td-comp-margin-l); } .oneid-rate { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .oneid-rate .oneid-rate__star-top { position: absolute; width: 0; height: 100%; left: 0; top: 0; overflow: hidden; -webkit-transition: all 0.2s cubic-bezier(0.38, 0, 0.24, 1); transition: all 0.2s cubic-bezier(0.38, 0, 0.24, 1); } .oneid-rate .oneid-rate__star-top, .oneid-rate .oneid-rate__star-bottom { display: grid; } .oneid-rate__list { display: -webkit-box; display: -ms-flexbox; display: flex; list-style: none; padding: 0; margin: 0; } .oneid-rate__item { position: relative; cursor: pointer; -webkit-transition: all 0.2s cubic-bezier(0.38, 0, 0.24, 1); transition: all 0.2s cubic-bezier(0.38, 0, 0.24, 1); } .oneid-rate__item:hover { -webkit-transform: scale(1.33); transform: scale(1.33); } .oneid-rate__item--half .oneid-rate__star-top { width: 50%; } .oneid-rate__item--full .oneid-rate__star-top { width: 100%; } .oneid-rate__text { color: var(--td-text-color-primary); font: var(--td-font-mark-medium); margin-left: var(--td-comp-margin-l); } .oneid-guide { font: var(--td-font-body-medium); color: var(--td-text-color-primary); -webkit-box-sizing: border-box; box-sizing: border-box; margin: 0; padding: 0; list-style: none; } .oneid-guide--lock { overflow: hidden; } .oneid-guide--absolute { position: absolute; } .oneid-guide--fixed { position: fixed; } .oneid-guide__overlay { position: fixed; top: 0; bottom: 0; left: 0; right: 0; z-index: 999997; } .oneid-guide__highlight { z-index: 999998; -webkit-transition: 0.2s cubic-bezier(0, 0, 0.15, 1); transition: 0.2s cubic-bezier(0, 0, 0.15, 1); border-radius: var(--td-radius-default); } .oneid-guide__highlight--dialog { border-radius: var(--td-radius-large); } .oneid-guide__highlight--mask { -webkit-box-shadow: 0 0 0 0 var(--td-mask-active), var(--td-mask-active) 0 0 0 5000px; box-shadow: 0 0 0 0 var(--td-mask-active), var(--td-mask-active) 0 0 0 5000px; } .oneid-guide__highlight--nomask { border-radius: var(--td-radius-medium); border: 2px solid var(--td-brand-color); -webkit-box-sizing: border-box; box-sizing: border-box; } .oneid-guide__reference { z-index: 999999; } .oneid-guide__wrapper { position: fixed; left: 0; right: 0; top: 0; bottom: 0; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; z-index: 999999; padding-top: 20vh; } .oneid-guide__wrapper--center { padding-top: 0; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .oneid-guide__dialog { min-width: 320px; max-width: 500px; padding: var(--td-comp-paddingTB-xxl) var(--td-comp-paddingLR-xxl); border-radius: var(--td-radius-large); background: var(--td-bg-color-container); -webkit-animation: tGuideDialogFadeIn 0.3s ease-out; animation: tGuideDialogFadeIn 0.3s ease-out; -webkit-box-sizing: border-box; box-sizing: border-box; } .oneid-guide__dialog--nomask { border: 1px solid var(--td-component-border); } .oneid-guide__dialog .oneid-guide__title { font: var(--td-font-title-medium); font-weight: 700; } .oneid-guide__dialog .oneid-guide__desc { margin-top: var(--td-comp-margin-l); font: var(--td-font-body-medium); } .oneid-guide__tooltip { padding: var(--td-comp-paddingTB-m) var(--td-comp-paddingLR-s); min-width: 240px; max-width: 600px; max-height: 300px; } .oneid-guide__title { text-align: left; color: var(--td-text-color-primary); font: var(--td-font-title-small); font-weight: 700; } .oneid-guide__desc { margin-top: var(--td-comp-margin-s); text-align: left; color: var(--td-text-color-secondary); font: var(--td-font-body-small); } .oneid-guide__action { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .oneid-guide__action button { margin-right: var(--td-comp-margin-s); } .oneid-guide__action button:last-child { margin-right: 0; } .oneid-guide__footer { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .oneid-guide__footer--popup { margin-top: var(--td-comp-margin-l); } .oneid-guide__footer--dialog { margin-top: 24px; } .oneid-guide__footer--dialog .oneid-guide__action { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .oneid-guide__counter { color: var(--td-text-color-placeholder); text-align: left; font: var(--td-font-body-small); -webkit-box-flex: 1; -ms-flex: 1; flex: 1; } .oneid-guide__popup .oneid-guide__popup--content { background: none; -webkit-box-shadow: none; box-shadow: none; padding: 0; } @-webkit-keyframes tGuideDialogFadeIn { 0% { opacity: 0; } 100% { opacity: 1; } } @keyframes tGuideDialogFadeIn { 0% { opacity: 0; } 100% { opacity: 1; } } .oneid-back-top { position: fixed; z-index: 300; overflow: hidden; outline: none; border-color: transparent; background-color: transparent; cursor: pointer; display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; vertical-align: middle; white-space: nowrap; border-width: 0.5px; border-style: solid; -webkit-transition: background 0.2s linear, border 0.2s linear, color 0.2s linear, opacity 0.2s linear, visibility 0.2s linear; transition: background 0.2s linear, border 0.2s linear, color 0.2s linear, opacity 0.2s linear, visibility 0.2s linear; -ms-touch-action: manipulation; touch-action: manipulation; -webkit-box-shadow: var(--td-shadow-3); box-shadow: var(--td-shadow-3); visibility: hidden; opacity: 0; color: var(--td-text-color-primary); } .oneid-back-top__text { font: var(--td-font-body-small); text-align: center; margin-top: var(--td-comp-margin-xxs); } .oneid-back-top__icon { font-size: var(--td-font-headline-small); } .oneid-back-top.oneid-size-m .oneid-back-top__icon { margin-top: 2px; } .oneid-back-top--show { visibility: visible; opacity: 1; } .oneid-back-top--theme-light { border-color: var(--td-component-border); background-color: var(--td-bg-color-container); } .oneid-back-top--theme-light:hover { border-color: var(--td-bg-color-container-hover); background-color: var(--td-bg-color-container-hover); } .oneid-back-top--theme-light .oneid-back-top__text { color: var(--td-text-color-secondary); } .oneid-back-top--theme-light .oneid-back-top__icon { color: var(--td-text-color-primary); } .oneid-back-top--theme-primary { border-color: var(--td-brand-color); background-color: var(--td-brand-color); } .oneid-back-top--theme-primary:hover { border-color: var(--td-brand-color-hover); background-color: var(--td-brand-color-hover); } .oneid-back-top--theme-primary .oneid-back-top__text { color: var(--td-text-color-anti); } .oneid-back-top--theme-primary .oneid-back-top__icon { color: var(--td-text-color-anti); } .oneid-back-top--theme-dark { border-color: rgba(0, 0, 0, 0.9); background-color: rgba(0, 0, 0, 0.9); } .oneid-back-top--theme-dark:hover { border-color: rgba(0, 0, 0, 0.6); background-color: rgba(0, 0, 0, 0.6); } .oneid-back-top--theme-dark .oneid-back-top__text { color: var(--td-text-color-anti); } .oneid-back-top--theme-dark .oneid-back-top__icon { color: var(--td-text-color-anti); } .oneid-back-top.oneid-size-s { width: var(--td-comp-size-xxl); height: var(--td-comp-size-xxl); } .oneid-back-top.oneid-size-s .oneid-back-top__text { display: none; } .oneid-back-top.oneid-size-m { width: var(--td-comp-size-xxxxl); height: var(--td-comp-size-xxxxl); } .oneid-back-top.oneid-size-m .oneid-back-top__text { display: block; } .oneid-back-top--circle { border-radius: var(--td-radius-circle); } .oneid-back-top--square { border-radius: var(--td-radius-medium); } .oneid-statistic { display: inline-block; font-size: var(--td-font-size-body-medium); line-height: var(--td-line-height-body-medium); color: var(--td-text-color-secondary); } .oneid-statistic-title { font-size: var(--td-font-body-medium); margin-bottom: var(--td-comp-margin-s); } .oneid-statistic-content { display: inline-block; color: var(--td-text-color-primary); text-align: left; white-space: nowrap; } .oneid-statistic-content-value { font-size: var(--td-font-size-headline-medium); line-height: var(--td-line-height-headline-medium); font-family: TCloudNumber, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Hiragino Sans GB, Microsoft YaHei UI, Microsoft YaHei, Source Han Sans CN, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol; } .oneid-statistic-content-unit { font-size: var(--td-font-size-body-medium); margin-left: var(--td-comp-margin-xs); font-family: TCloudNumber, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Hiragino Sans GB, Microsoft YaHei UI, Microsoft YaHei, Source Han Sans CN, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol; } .oneid-statistic-content-suffix { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; font-size: var(--td-font-size-title-large); margin-left: var(--td-comp-margin-s); } .oneid-statistic-content-prefix { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; font-size: var(--td-font-size-title-large); margin-right: var(--td-comp-margin-s); } .oneid-statistic-content-prefix .oneid-icon { font-size: var(--td-font-size-title-large); } .oneid-statistic-extra { margin-top: 8px; } .oneid-statistic-extra .oneid-space .oneid-space-item { display: -webkit-box; display: -ms-flexbox; display: flex; } .oneid-descriptions { font: var(--td-font-body-medium); color: var(--td-text-color-primary); -webkit-box-sizing: border-box; box-sizing: border-box; margin: 0; padding: 0; list-style: none; } .oneid-descriptions__header { color: var(--td-text-color-primary); font: var(--td-font-title-medium); margin-bottom: var(--td-comp-margin-m); font-weight: 600; } .oneid-descriptions__body { border-collapse: collapse; font: var(--td-font-body-medium); width: 100%; } .oneid-descriptions__body.oneid-size-l > tbody > tr > td { padding: var(--td-comp-paddingTB-l); } .oneid-descriptions__body.oneid-size-m > tbody > tr > td { padding: var(--td-comp-paddingLR-m) var(--td-comp-paddingLR-l); } .oneid-descriptions__body.oneid-size-s > tbody > tr > td { padding: var(--td-comp-paddingLR-s) var(--td-comp-paddingLR-l); } .oneid-descriptions__body .oneid-descriptions__label { color: var(--td-text-color-placeholder); } .oneid-descriptions__body--fixed { table-layout: fixed; } .oneid-descriptions__body--border > tbody > tr > td { border: 1px solid var(--td-component-border); } .oneid-descriptions__body--border .oneid-descriptions__label { background-color: var(--td-bg-color-secondarycontainer); } .oneid-descriptions__body--border .oneid-descriptions__label:hover { background-color: var(--td-bg-color-container-hover); } .oneid-empty { font: var(--td-font-body-medium); color: var(--td-text-color-primary); -webkit-box-sizing: border-box; box-sizing: border-box; margin: 0; list-style: none; padding: 0; text-align: center; } .oneid-empty__image { font-size: 48px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .oneid-empty__title { font: var(--td-font-body-medium); color: var(--td-text-color-secondary); margin-top: var(--td-comp-margin-s); margin-bottom: 0; } .oneid-empty__description { font: var(--td-font-body-medium); color: var(--td-text-color-placeholder); margin-top: var(--td-comp-margin-xs); margin-bottom: 0; } .oneid-empty__action { margin-top: var(--td-comp-margin-xxl); margin-bottom: 0; } .oneid-empty.oneid-size-s .oneid-empty__image { font-size: 20px; } .oneid-empty.oneid-size-s .oneid-empty__title { font: var(--td-font-body-small); margin-top: var(--td-comp-margin-xxs); } .oneid-empty.oneid-size-s .oneid-empty__description { font: var(--td-font-body-small); margin-top: var(--td-comp-margin-xxs); } .oneid-empty.oneid-size-l .oneid-empty__image { font-size: 64px; } .oneid-typography { color: var(--td-text-color-primary); font: var(--td-font-body-medium); margin: var(--td-comp-margin-m) 0; } h1.oneid-typography { font: var(--td-font-headline-large); margin-top: var(--td-comp-margin-xxxxl); margin-bottom: var(--td-comp-margin-l); } h2.oneid-typography { font: var(--td-font-headline-medium); margin-top: var(--td-comp-margin-xxxl); margin-bottom: var(--td-comp-margin-l); } h3.oneid-typography { font: var(--td-font-headline-small); margin-top: var(--td-comp-margin-xxl); margin-bottom: var(--td-comp-margin-m); } h4.oneid-typography { font: var(--td-font-title-large); margin-top: var(--td-comp-margin-xl); margin-bottom: var(--td-comp-margin-m); } h5.oneid-typography { font: var(--td-font-title-medium); margin-top: var(--td-comp-margin-l); margin-bottom: var(--td-comp-margin-m); } h6.oneid-typography { font: var(--td-font-title-small); } .oneid-typography strong { font-weight: 600; } .oneid-typography mark { background-color: #fcdf47; } .oneid-typography code { border-radius: var(--td-radius-default); border: 1px solid var(--td-component-border); margin: 0 var(--td-comp-margin-xs); background-color: var(--td-bg-color-secondarycontainer); padding: 1px var(--td-comp-paddingLR-s); -webkit-transition: background-color 0.2s; transition: background-color 0.2s; white-space: nowrap; font: var(--td-font-body-small); font-family: Source Code Pro, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Hiragino Sans GB, Microsoft YaHei UI, Microsoft YaHei; display: inline-block; } .oneid-typography code:hover { border-radius: var(--td-radius-default); border: 1px solid var(--td-component-border); background-color: var(--td-bg-color-secondarycontainer-hover); } .oneid-typography kbd { border-radius: var(--td-radius-default); border: 1px solid var(--td-component-border); margin: 0 var(--td-comp-margin-xs); background-color: var(--td-bg-color-secondarycontainer); padding: 1px var(--td-comp-paddingLR-s); -webkit-box-shadow: 0 1px 0 0 var(--td-component-border); box-shadow: 0 1px 0 0 var(--td-component-border); font: var(--td-font-body-small); font-family: Source Code Pro, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Hiragino Sans GB, Microsoft YaHei UI, Microsoft YaHei; display: inline-block; } .oneid-typography--disabled { color: var(--td-text-color-disabled); cursor: not-allowed; } .oneid-typography--success { color: var(--td-success-color); } .oneid-typography--warning { color: var(--td-warning-color); } .oneid-typography--error { color: var(--td-error-color); } .oneid-typography--secondary { color: var(--td-text-color-secondary); } .oneid-typography-ellipsis-symbol, .oneid-typography .oneid-icon-copy { color: var(--td-brand-color); cursor: pointer; } .oneid-typography-ellipsis-symbol:hover, .oneid-typography .oneid-icon-copy:hover { color: var(--td-brand-color-hover); } .oneid-typography .oneid-icon-checked { color: var(--td-success-color); } .oneid-common { user-select: none; } .oneid-common a { background-color: transparent; text-decoration: none; color: #457ae5; cursor: pointer; } .oneid-common a:active, .oneid-common a:hover { outline-width: 0; } .oneid-common a:hover { text-decoration: none; } .oneid-common ul { padding: 0; margin: 0; list-style: none; } .oneid-common li::before { content: "·"; margin-right: 4px; } /*---------------- Message ---------------*/ .oneid-message.t-message { background-color: rgba(0, 0, 0, 0.8); color: #fff; border-radius: 8px; box-shadow: none; align-items: center; max-width: 280px; overflow-wrap: break-word; word-break: normal; } .oneid-message.t-message.oneid-is-error .oneid-svg, .oneid-message.t-message.oneid-is-error .t-icon { color: #fa5151; } .oneid-message.t-message .oneid-svg, .oneid-message.t-message .t-icon { font-size: 16px; margin-right: 8px; top: 0; } .oneid-yuanbao { --oneid-color-dark: #1a1a1a; --oneid-color-white: #fff; --oneid-color-light: #ffffffe5; --oneid-color-red: #fa5151; --oneid-color-green: #27d08e; --oneid-color-link: #457ae5; /*---------------- Button ---------------*/ /*---------------- Checkbox ---------------*/ /*---------------- Dialog ---------------*/ /*---------------- 提示类Dialog ---------------*/ /*---------------- Popup ---------------*/ /*---------------- Loading ---------------*/ /*---------------- Form ---------------*/ } .oneid-yuanbao.oneid-mode-light { --oneid-background-color: var(--oneid-color-white); --oneid-color-maintain: #000; --oneid-color-reverse: #fff; --oneid-color-reverse-90: #ffffffe5; --oneid-color-10: #00000014; --oneid-color-15: #00000026; --oneid-color-40: #0006; --oneid-color-60: #0009; --oneid-color-80: #000c; --oneid-color-90: #000000e5; --oneid-avatar-bgcolor: #ebebeb; --oneid-user-bgcolor: #f6f6f6; --oneid-user-hover-bgcolor: #f2f2f2; --oneid-loading-color-border: #20c57d80; --oneid-loading-color-background: #f4fcf8; --oneid-error-color-background: #f7f7f7; --oneid-brand-blue-color: #457ae5; --oneid-btn-bgcolor: #f6f6f6; --oneid-btn-disable-bgcolor: #dadada; } .oneid-yuanbao.oneid-mode-dark { --oneid-background-color: #303030; --oneid-color-maintain: #fff; --oneid-color-reverse: #000; --oneid-color-reverse-90: #000000e5; --oneid-color-10: #ffffff1a; --oneid-color-15: #ffffff26; --oneid-color-40: #fff6; --oneid-color-60: #fff9; --oneid-color-80: #000c; --oneid-color-90: #ffffffe5; --oneid-avatar-bgcolor: #444; --oneid-user-bgcolor: #3b3b3b; --oneid-user-hover-bgcolor: #424242; --oneid-loading-color-border: #1db472; --oneid-loading-color-background: #2d453c; --oneid-error-color-background: #3b3b3b; --oneid-brand-blue-color: #38f; --oneid-btn-bgcolor: #1d1d1d; --oneid-btn-disable-bgcolor: #3b3b3b; --oneid-scrollbar-color: #444; } .oneid-yuanbao .oneid-button { border-width: 0; border-radius: 8px; background-color: var(--oneid-color-90) !important; border-color: var(--oneid-color-90) !important; --td-brand-color-hover: var(--oneid-font-color); } .oneid-yuanbao .oneid-button .oneid-ripple { display: none; } .oneid-yuanbao .oneid-button.oneid-is-disabled { background-color: var(--oneid-btn-disable-bgcolor) !important; color: var(--oneid-color-white) !important; } .oneid-yuanbao .oneid-checkbox { align-items: flex-start; } .oneid-yuanbao .oneid-checkbox .oneid-checkbox__input { opacity: 0.3; border-color: var(--oneid-color-60); border-radius: 4px; background-color: var(--oneid-background-color); } .oneid-yuanbao .oneid-checkbox.oneid-is-checked .oneid-checkbox__input { opacity: 1; background-color: var(--oneid-color-90); border-color: var(--oneid-color-90); } .oneid-yuanbao .oneid-checkbox.oneid-is-checked .oneid-checkbox__input::after { border-color: var(--oneid-color-reverse-90); } .oneid-yuanbao .oneid-checkbox .oneid-checkbox__label { color: var(--oneid-color-40) !important; margin-left: 3px; line-height: 16px; } .oneid-yuanbao .oneid-checkbox:hover .oneid-checkbox__input { opacity: 1; border-color: var(--oneid-color-90); } .oneid-yuanbao .oneid-checkbox.oneid-is-disabled .oneid-checkbox__input { opacity: 0.3; border-color: var(--oneid-color-60) !important; background-color: var(--oneid-color-40); } .oneid-yuanbao .oneid-checkbox.oneid-is-disabled .oneid-checkbox__input::after { border-color: var(--oneid-color-60) !important; } .oneid-yuanbao .oneid-checkbox.oneid-is-disabled a { color: var(--oneid-color-60); } .oneid-yuanbao .oneid-dialog__position { padding: 0 !important; } .oneid-yuanbao .oneid-dialog { border-radius: 12px; padding: 0; border: none; background-color: var(--oneid-background-color); } .oneid-yuanbao .oneid-dialog__header { color: var(--oneid-color-90); height: 32px; } .oneid-yuanbao .oneid-dialog__body { padding: 0 24px 16px; } .oneid-yuanbao .oneid-dialog__close { width: 24px; height: 24px; padding: 0; margin: 16px 16px 0 0; color: var(--oneid-color-60); } .oneid-yuanbao .oneid-dialog__close:hover { background: none; } .oneid-yuanbao.oneid-prompt-dialog .oneid-dialog { width: 360px; } .oneid-yuanbao.oneid-prompt-dialog .oneid-dialog__header { height: 24px; } .oneid-yuanbao.oneid-prompt-dialog .oneid-dialog__body { padding: 0 24px 24px; } .oneid-yuanbao.oneid-prompt-dialog .oneid-dialog__body .wrapper .header { color: var(--oneid-color-90); font-weight: 600; font-size: 16px; display: flex; align-items: center; } .oneid-yuanbao.oneid-prompt-dialog .oneid-dialog__body .wrapper .header svg { color: #00b259; font-size: 20px; } .oneid-yuanbao.oneid-prompt-dialog .oneid-dialog__body .wrapper .content { padding-top: 16px; color: var(--oneid-color-90); } .oneid-yuanbao.oneid-prompt-dialog .oneid-dialog__footer { box-sizing: border-box; padding: 0 24px 24px 0; } .oneid-yuanbao.oneid-prompt-dialog .oneid-dialog__footer button { width: 88px; height: 36px; color: var(--oneid-color-reverse-90); } .oneid-yuanbao.oneid-prompt-dialog .oneid-dialog__footer button:first-child { color: var(--oneid-color-90); background-color: var(--oneid-user-hover-bgcolor) !important; } .oneid-yuanbao .oneid-popup__content { box-shadow: 0px 8px 12px 0px rgba(0, 0, 0, 0.1019607843); } .oneid-yuanbao .oneid-popup[data-popper-placement^=top] .oneid-popup__content { margin-bottom: 4px; } .oneid-yuanbao .oneid-loading { color: var(--oneid-color-green); font-size: 18px; position: absolute; border-radius: 12px; } .oneid-yuanbao .oneid-loading .oneid-loading--center { position: absolute; top: 28px; border: 1px solid var(--oneid-loading-color-border); padding: 7px 11px; border-radius: 8px; background-color: var(--oneid-loading-color-background); box-shadow: 0px 8px 20px 0px rgba(65, 77, 96, 0.08); } .oneid-yuanbao .oneid-loading__text { color: var(--oneid-color-90); } .oneid-yuanbao .oneid-loading__overlay { background-color: transparent; } .oneid-yuanbao .oneid-form__item { margin-bottom: 16px !important; } .oneid-yuanbao .oneid-form__item-with-extra { margin-bottom: 16px; } .oneid-yuanbao .oneid-form__label { color: var(--oneid-color-90); font-weight: 500; margin-bottom: 8px; line-height: 22px; min-height: auto; } .oneid-yuanbao .oneid-form .oneid-is-error .oneid-input { border-color: var(--oneid-color-red) !important; } .oneid-yuanbao .oneid-form .oneid-input { height: 48px; border-radius: 8px; border: 1px solid var(--oneid-color-10) !important; background-color: transparent; font-size: 16px; padding: 13px 0 13px 12px; caret-color: var(--oneid-color-90); } .oneid-yuanbao .oneid-form .oneid-input input:-webkit-autofill, .oneid-yuanbao .oneid-form .oneid-input input:-webkit-autofill:hover, .oneid-yuanbao .oneid-form .oneid-input input:-webkit-autofill:focus, .oneid-yuanbao .oneid-form .oneid-input input:-webkit-autofill:active { -webkit-text-fill-color: var(--oneid-color-90); box-shadow: 0 0 0px 1000px var(--oneid-background-color) inset; border: 0 none; background-color: transparent; } .oneid-yuanbao .oneid-form .oneid-input.oneid-is-focused { box-shadow: none; } .oneid-yuanbao .oneid-form .oneid-input input { color: var(--oneid-color-90); } .oneid-yuanbao .oneid-form .oneid-input input::placeholder { color: var(--oneid-color-40); } .oneid-yuanbao .oneid-form .oneid-input__suffix { color: var(--oneid-color-90); } .oneid-yuanbao .oneid-form .oneid-input__extra { display: none; } .oneid-upload-avatar__wrapper { border-radius: 16px; display: flex; align-items: center; justify-content: center; overflow: hidden; cursor: pointer; background-color: var(--oneid-avatar-bgcolor); width: 64px; height: 64px; border: none; position: relative; } .oneid-upload-avatar__wrapper:hover { background-color: var(--oneid-btn-disable-bgcolor); } .oneid-upload-avatar__wrapper:hover .oneid-upload-avatar__wrapper--hover-cover { display: flex !important; } .oneid-upload-avatar__avatar-upload-icon { color: #7b818f; } .oneid-upload-avatar__wrapper--hover-cover { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5019607843); display: none !important; cursor: pointer; } .oneid-upload-avatar__wrapper--hover-cover .oneid-svg { color: white !important; } .oneid-upload-avatar__avatar-update-icon { display: flex; align-items: center; justify-content: center; } .oneid-upload-avatar__avatar-update-icon .oneid-svg { width: 24px; height: 24px; font-size: 24px; color: #4e5461; } .oneid-upload-avatar__avatar { height: 100%; } .oneid-upload-avatar-image__upload { display: none; } .oneid-upload-avatar-image__rotate-icon { padding: 4.25px; border-radius: 4px; width: 32.5px; height: 32.5px; display: flex; align-items: center; justify-content: center; box-sizing: border-box; } .oneid-upload-avatar-image__rotate-icon:hover { background-color: #e6e8eb; } .oneid-upload-avatar-image__cropper-wrapper { flex-direction: column; display: flex; align-items: center; } .oneid-upload-avatar-image__cropper { height: 320px; width: 320px; cursor: pointer; } .oneid-upload-avatar-image__error { box-sizing: border-box; height: 320px; display: flex; flex-direction: column; align-items: center; justify-content: center; color: #ff3c33; font-weight: 400; font-size: 14px; border-radius: 4px; background-color: rgba(14, 14, 17, 0.04); border: 1px solid #ff3c33; } .oneid-upload-avatar-image__error i { margin-bottom: 6px; } .oneid-upload-avatar-image__error p { line-height: 20px; } .oneid-upload-avatar-image__error-icon { color: #ff3c33; } .oneid-upload-avatar-image__dialog .cropper-point.point-se { height: 5px !important; width: 5px !important; } .oneid-upload-avatar-image__dialog .oneid-dialog { border: 0; border-radius: 16px; background-color: var(--oneid-background-color); padding: 0; } .oneid-upload-avatar-image__dialog .oneid-dialog__header { height: 30px; border-radius: 16px; } .oneid-upload-avatar-image__dialog .oneid-dialog__body { height: 356px; padding: 0 !important; background-color: var(--oneid-background-color); } .oneid-upload-avatar-image__dialog .oneid-dialog__body .header { line-height: 20px; margin-bottom: 16px; margin: 0 0 16px 40px; color: var(--oneid-color-90); } .oneid-upload-avatar-image__dialog .oneid-dialog__footer { box-sizing: border-box; background-color: var(--oneid-background-color); height: auto; padding: 16px 24px 24px 24px; width: auto; display: flex; border-radius: 16px; justify-content: space-between; } .oneid-upload-avatar-image__dialog .oneid-dialog__footer:has(:only-child) { justify-content: flex-end; } .oneid-upload-avatar-image__dialog .oneid-icon-close { color: #0e0e11; } .oneid-upload-avatar-image__dialog .cropper-face { opacity: 0.5; } .oneid-upload-avatar-image__dialog .advanced-cropper { background-color: var(--oneid-color-80); } .oneid-upload-avatar-image__dialog .advanced-cropper-circle-stencil__preview { border: 0; } .oneid-upload-avatar-image__dialog .advanced-cropper-simple-line { border: 1px solid #d3d6db; } .oneid-upload-avatar-image__dialog .cropper-line { opacity: 0; } .oneid-upload-avatar-image__dialog .cropper-view-box { outline-color: #006eff; } .oneid-upload-avatar-image__dialog .cropper-point { background-color: #006eff; } .oneid-upload-avatar-image__btn { width: 88px; height: 40px !important; box-shadow: none !important; font-size: 14px !important; font-weight: 400; } .oneid-upload-avatar-image__reload-btn.oneid-button.oneid-button--theme-primary { background-color: var(--oneid-btn-bgcolor) !important; color: var(--oneid-color-60) !important; } .oneid-upload-avatar-image__confirm-btn { background-color: var(--oneid-color-90) !important; color: var(--oneid-color-reverse-90) !important; margin-left: 16px !important; } .advanced-cropper-line-wrapper--north, .advanced-cropper-line-wrapper--south { height: 12px; width: 100%; } .advanced-cropper-line-wrapper--north { cursor: n-resize; } .advanced-cropper-line-wrapper--south { cursor: s-resize; } .advanced-cropper-line-wrapper--east, .advanced-cropper-line-wrapper--west { width: 12px; height: 100%; } .advanced-cropper-line-wrapper--east { cursor: e-resize; } .advanced-cropper-line-wrapper--west { cursor: w-resize; } .advanced-cropper-line-wrapper--disabled { cursor: auto; } .advanced-cropper-line-wrapper__content { position: absolute; } .advanced-cropper-line-wrapper__content--east, .advanced-cropper-line-wrapper__content--west { height: 100%; } .advanced-cropper-line-wrapper__content--north, .advanced-cropper-line-wrapper__content--south { width: 100%; } .advanced-cropper-line-wrapper__content--east { left: 50%; -webkit-transform: translateX(-100%); transform: translateX(-100%); } .advanced-cropper-line-wrapper__content--west { right: 50%; -webkit-transform: translateX(100%); transform: translateX(100%); } .advanced-cropper-line-wrapper__content--north { top: 50%; } .advanced-cropper-line-wrapper__content--south { bottom: 50%; } .advanced-cropper-handler-wrapper { position: absolute; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); width: 30px; height: 30px; } .advanced-cropper-handler-wrapper__draggable { width: 100%; height: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .advanced-cropper-handler-wrapper--west-north { cursor: nw-resize; } .advanced-cropper-handler-wrapper--north { cursor: n-resize; } .advanced-cropper-handler-wrapper--east-north { cursor: ne-resize; } .advanced-cropper-handler-wrapper--east { cursor: e-resize; } .advanced-cropper-handler-wrapper--east-south { cursor: se-resize; } .advanced-cropper-handler-wrapper--south { cursor: s-resize; } .advanced-cropper-handler-wrapper--west-south { cursor: sw-resize; } .advanced-cropper-handler-wrapper--west { cursor: w-resize; } .advanced-cropper-handler-wrapper--disabled { cursor: auto; } .advanced-cropper-bounding-box { position: relative; height: 100%; width: 100%; } .advanced-cropper-bounding-box__handler-wrapper { position: absolute; } .advanced-cropper-bounding-box__handler-wrapper--east, .advanced-cropper-bounding-box__handler-wrapper--west { top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); height: 100%; } .advanced-cropper-bounding-box__handler-wrapper--south, .advanced-cropper-bounding-box__handler-wrapper--north { left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); width: 100%; } .advanced-cropper-bounding-box__handler-wrapper--west, .advanced-cropper-bounding-box__handler-wrapper--west-north, .advanced-cropper-bounding-box__handler-wrapper--west-south { left: 0; } .advanced-cropper-bounding-box__handler-wrapper--east, .advanced-cropper-bounding-box__handler-wrapper--east-north, .advanced-cropper-bounding-box__handler-wrapper--east-south { left: 100%; } .advanced-cropper-bounding-box__handler-wrapper--north, .advanced-cropper-bounding-box__handler-wrapper--west-north, .advanced-cropper-bounding-box__handler-wrapper--east-north { top: 0; } .advanced-cropper-bounding-box__handler-wrapper--south, .advanced-cropper-bounding-box__handler-wrapper--west-south, .advanced-cropper-bounding-box__handler-wrapper--east-south { top: 100%; } .advanced-cropper-bounding-box__handler { position: absolute; } .advanced-cropper-bounding-box__handler--west-north { left: 0; top: 0; } .advanced-cropper-bounding-box__handler--north { left: 50%; top: 0; } .advanced-cropper-bounding-box__handler--east-north { left: 100%; top: 0; } .advanced-cropper-bounding-box__handler--east { left: 100%; top: 50%; } .advanced-cropper-bounding-box__handler--east-south { left: 100%; top: 100%; } .advanced-cropper-bounding-box__handler--south { left: 50%; top: 100%; } .advanced-cropper-bounding-box__handler--west-south { left: 0; top: 100%; } .advanced-cropper-bounding-box__handler--west { left: 0; top: 50%; } .advanced-cropper-bounding-box__line { position: absolute; } .advanced-cropper-bounding-box__line--north, .advanced-cropper-bounding-box__line--south { left: 0; -webkit-transform: translateY(-50%); transform: translateY(-50%); } .advanced-cropper-bounding-box__line--north { top: 0; } .advanced-cropper-bounding-box__line--south { top: 100%; } .advanced-cropper-bounding-box__line--west, .advanced-cropper-bounding-box__line--east { top: 0; -webkit-transform: translateX(-50%); transform: translateX(-50%); } .advanced-cropper-bounding-box__line--west { left: 0; } .advanced-cropper-bounding-box__line--east { left: 100%; } .advanced-cropper-artificial-transition { will-change: transform; } .advanced-cropper-background-image { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; position: absolute; -webkit-transform-origin: center; transform-origin: center; pointer-events: none; max-width: none !important; } .advanced-cropper-canvas { display: none; } .advanced-cropper-source { width: 1px; height: 1px; visibility: hidden; position: absolute; opacity: 0; } .advanced-cropper-fade { visibility: hidden; opacity: 0; -webkit-transition: 0.5s; transition: 0.5s; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } .advanced-cropper-fade--visible { opacity: 1; visibility: visible; } .advanced-cropper-wrapper__fade { -webkit-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1; min-height: 0; } .advanced-cropper-stencil-grid { display: table; border-collapse: collapse; table-layout: fixed; opacity: 0; -webkit-transition: opacity 0.3s; transition: opacity 0.3s; } .advanced-cropper-stencil-grid--visible { opacity: 1; } .advanced-cropper-stencil-grid__row { display: table-row; } .advanced-cropper-stencil-grid__cell { display: table-cell; width: 1%; height: 1%; border: currentColor solid 1px; } .advanced-cropper-stencil-grid__cell--top { border-top-color: transparent; } .advanced-cropper-stencil-grid__cell--left { border-left-color: transparent; } .advanced-cropper-stencil-grid__cell--right { border-right-color: transparent; } .advanced-cropper-stencil-grid__cell--bottom { border-bottom-color: transparent; } .advanced-cropper-stencil-overlay { -webkit-box-sizing: content-box; box-sizing: content-box; -webkit-box-shadow: 0 0 0 1000px currentColor; box-shadow: 0 0 0 1000px currentColor; pointer-events: none; width: 100%; height: 100%; position: absolute; -webkit-backface-visibility: hidden; } .advanced-cropper-stencil-wrapper { will-change: transform; } .advanced-cropper-boundary { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; direction: ltr; position: relative; } .advanced-cropper-boundary__content { width: 100%; height: 100%; position: absolute; top: 0; left: 0; } .advanced-cropper-boundary__stretcher { pointer-events: none; position: relative; max-width: 100%; max-height: 100%; } .advanced-cropper-circle-stencil { position: absolute; height: 100%; width: 100%; -webkit-box-sizing: content-box; box-sizing: content-box; -webkit-backface-visibility: hidden; -webkit-transform-style: preserve-3d; } .advanced-cropper-circle-stencil__overlay { border-radius: 50%; overflow: hidden; } .advanced-cropper-circle-stencil__preview { border-radius: 50%; } .advanced-cropper-circle-stencil__draggable-area, .advanced-cropper-circle-stencil__overlay, .advanced-cropper-circle-stencil__preview, .advanced-cropper-circle-stencil__grid { position: absolute; height: 100%; width: 100%; } .advanced-cropper-circle-stencil--movable { cursor: move; } .advanced-cropper-rectangle-stencil { position: absolute; height: 100%; width: 100%; -webkit-box-sizing: border-box; box-sizing: border-box; -webkit-backface-visibility: hidden; -webkit-transform-style: preserve-3d; } .advanced-cropper-rectangle-stencil__draggable-area, .advanced-cropper-rectangle-stencil__overlay, .advanced-cropper-rectangle-stencil__preview, .advanced-cropper-rectangle-stencil__grid { position: absolute; height: 100%; width: 100%; } .advanced-cropper-rectangle-stencil--movable { cursor: move; } .advanced-cropper-simple-line { background: none; border-width: 0; } .advanced-cropper-simple-line--south, .advanced-cropper-simple-line--north { height: 0; width: 100%; } .advanced-cropper-simple-line--east, .advanced-cropper-simple-line--west { height: 100%; width: 0; } .advanced-cropper-simple-line--east { border-right-width: 1px; } .advanced-cropper-simple-line--west { border-left-width: 1px; } .advanced-cropper-simple-line--south { border-bottom-width: 1px; } .advanced-cropper-simple-line--north { border-top-width: 1px; } .advanced-cropper-simple-handler { display: block; } .advanced-cropper-preview { overflow: hidden; -webkit-box-sizing: border-box; box-sizing: border-box; position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } .advanced-cropper-preview__content { overflow: hidden; position: absolute; left: 50%; top: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } .advanced-cropper-preview__image { display: none; pointer-events: none; position: absolute; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -webkit-transform-origin: center; transform-origin: center; max-width: none !important; } .advanced-cropper-preview__image--visible { display: block; } .advanced-cropper-preview__boundary { -webkit-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1; min-height: 0; min-width: 0; } .cropper-preview-wrapper__fade { -webkit-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1; min-height: 0; width: 100%; } .advanced-cropper { overflow: hidden; max-height: 100%; background: black; position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; color: white; } .advanced-cropper__boundary { -webkit-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1; min-height: 0; min-width: 0; } .advanced-cropper__wrapper, .advanced-cropper__background-wrapper { left: 0; top: 0; right: 0; bottom: 0; position: absolute; } .advanced-cropper__stencil-wrapper { position: absolute; } .advanced-cropper * { -webkit-box-sizing: border-box; box-sizing: border-box; } .advanced-cropper-simple-handler { background: currentColor; height: 10px; width: 10px; } .advanced-cropper-simple-line { -webkit-transition: border 0.5s; transition: border 0.5s; border-color: rgba(255, 255, 255, 0.3); border-style: solid; } .advanced-cropper-simple-line--hover { border-color: white; } .advanced-cropper-circle-stencil__preview { border: solid 2px rgba(255, 255, 255, 0.2); } .advanced-cropper-stencil-overlay { color: rgba(0, 0, 0, 0.5); } .advanced-cropper-stencil-grid { color: rgba(255, 255, 255, 0.4); } .advanced-cropper-simple-line { border-color: rgba(255, 255, 255, 0.7); } .advanced-cropper-simple-line--east { border-right-width: 2px; } .advanced-cropper-simple-line--west { border-left-width: 2px; } .advanced-cropper-simple-line--south { border-bottom-width: 2px; } .advanced-cropper-simple-line--north { border-top-width: 2px; } .advanced-cropper-simple-line--hover { border-color: white; } .advanced-cropper-bounding-box__handler { width: 24px; height: 24px; } .advanced-cropper-bounding-box__handler--west-north { -webkit-transform: translate(-5px, -5px); transform: translate(-5px, -5px); } .advanced-cropper-bounding-box__handler--east-south { -webkit-transform: translate(-19px, -19px); transform: translate(-19px, -19px); } .advanced-cropper-bounding-box__handler--west-south { -webkit-transform: translate(-5px, -19px); transform: translate(-5px, -19px); } .advanced-cropper-bounding-box__handler--east-north { -webkit-transform: translate(-19px, -5px); transform: translate(-19px, -5px); } .advanced-cropper-simple-handler { display: block; position: relative; -ms-flex-negative: 0; flex-shrink: 0; -webkit-transition: opacity 0.5s; transition: opacity 0.5s; border: none; background: currentColor; top: auto; left: auto; height: 0px; width: 0px; opacity: 0; } .advanced-cropper-simple-handler--west-north, .advanced-cropper-simple-handler--east-south, .advanced-cropper-simple-handler--west-south, .advanced-cropper-simple-handler--east-north { display: block; height: 16px; width: 16px; background: none; opacity: 1; } .advanced-cropper-simple-handler--west-north { border-left: solid 3px currentColor; border-top: solid 3px currentColor; } .advanced-cropper-simple-handler--east-south { border-right: solid 3px currentColor; border-bottom: solid 3px currentColor; } .advanced-cropper-simple-handler--west-south { border-left: solid 3px currentColor; border-bottom: solid 3px currentColor; } .advanced-cropper-simple-handler--east-north { border-right: solid 3px currentColor; border-top: solid 3px currentColor; } .advanced-cropper-simple-handler--hover { opacity: 1; } .advanced-cropper-circle-stencil { border-color: rgba(255, 255, 255, 0.4); } .advanced-cropper-stencil-grid { color: rgba(255, 255, 255, 0.5); } .oneid-prompt-dialog { width: 400px; } .oneid-prompt-dialog .oneid-dialog__body .wrapper .content .oneid-agreement { font-size: 14px; } .oneid-prompt-dialog.oneid-cancelbtn-red .oneid-dialog__footer button:nth-of-type(2) { background-color: var(--oneid-color-red) !important; } @charset "UTF-8"; .oneid-yuanbao { --oneid-color-dark: #1a1a1a; --oneid-color-white: #fff; --oneid-color-light: #ffffffe5; --oneid-color-red: #fa5151; --oneid-color-green: #27d08e; --oneid-color-link: #457ae5; /*---------------- Button ---------------*/ /*---------------- Checkbox ---------------*/ /*---------------- Dialog ---------------*/ /*---------------- 提示类Dialog ---------------*/ /*---------------- Popup ---------------*/ /*---------------- Loading ---------------*/ /*---------------- Form ---------------*/ } .oneid-yuanbao.oneid-mode-light { --oneid-background-color: var(--oneid-color-white); --oneid-color-maintain: #000; --oneid-color-reverse: #fff; --oneid-color-reverse-90: #ffffffe5; --oneid-color-10: #00000014; --oneid-color-15: #00000026; --oneid-color-40: #0006; --oneid-color-60: #0009; --oneid-color-80: #000c; --oneid-color-90: #000000e5; --oneid-avatar-bgcolor: #ebebeb; --oneid-user-bgcolor: #f6f6f6; --oneid-user-hover-bgcolor: #f2f2f2; --oneid-loading-color-border: #20c57d80; --oneid-loading-color-background: #f4fcf8; --oneid-error-color-background: #f7f7f7; --oneid-brand-blue-color: #457ae5; --oneid-btn-bgcolor: #f6f6f6; --oneid-btn-disable-bgcolor: #dadada; } .oneid-yuanbao.oneid-mode-dark { --oneid-background-color: #303030; --oneid-color-maintain: #fff; --oneid-color-reverse: #000; --oneid-color-reverse-90: #000000e5; --oneid-color-10: #ffffff1a; --oneid-color-15: #ffffff26; --oneid-color-40: #fff6; --oneid-color-60: #fff9; --oneid-color-80: #000c; --oneid-color-90: #ffffffe5; --oneid-avatar-bgcolor: #444; --oneid-user-bgcolor: #3b3b3b; --oneid-user-hover-bgcolor: #424242; --oneid-loading-color-border: #1db472; --oneid-loading-color-background: #2d453c; --oneid-error-color-background: #3b3b3b; --oneid-brand-blue-color: #38f; --oneid-btn-bgcolor: #1d1d1d; --oneid-btn-disable-bgcolor: #3b3b3b; --oneid-scrollbar-color: #444; } .oneid-yuanbao .oneid-button { border-width: 0; border-radius: 8px; background-color: var(--oneid-color-90) !important; border-color: var(--oneid-color-90) !important; --td-brand-color-hover: var(--oneid-font-color); } .oneid-yuanbao .oneid-button .oneid-ripple { display: none; } .oneid-yuanbao .oneid-button.oneid-is-disabled { background-color: var(--oneid-btn-disable-bgcolor) !important; color: var(--oneid-color-white) !important; } .oneid-yuanbao .oneid-checkbox { align-items: flex-start; } .oneid-yuanbao .oneid-checkbox .oneid-checkbox__input { opacity: 0.3; border-color: var(--oneid-color-60); border-radius: 4px; background-color: var(--oneid-background-color); } .oneid-yuanbao .oneid-checkbox.oneid-is-checked .oneid-checkbox__input { opacity: 1; background-color: var(--oneid-color-90); border-color: var(--oneid-color-90); } .oneid-yuanbao .oneid-checkbox.oneid-is-checked .oneid-checkbox__input::after { border-color: var(--oneid-color-reverse-90); } .oneid-yuanbao .oneid-checkbox .oneid-checkbox__label { color: var(--oneid-color-40) !important; margin-left: 3px; line-height: 16px; } .oneid-yuanbao .oneid-checkbox:hover .oneid-checkbox__input { opacity: 1; border-color: var(--oneid-color-90); } .oneid-yuanbao .oneid-checkbox.oneid-is-disabled .oneid-checkbox__input { opacity: 0.3; border-color: var(--oneid-color-60) !important; background-color: var(--oneid-color-40); } .oneid-yuanbao .oneid-checkbox.oneid-is-disabled .oneid-checkbox__input::after { border-color: var(--oneid-color-60) !important; } .oneid-yuanbao .oneid-checkbox.oneid-is-disabled a { color: var(--oneid-color-60); } .oneid-yuanbao .oneid-dialog__position { padding: 0 !important; } .oneid-yuanbao .oneid-dialog { border-radius: 12px; padding: 0; border: none; background-color: var(--oneid-background-color); } .oneid-yuanbao .oneid-dialog__header { color: var(--oneid-color-90); height: 32px; } .oneid-yuanbao .oneid-dialog__body { padding: 0 24px 16px; } .oneid-yuanbao .oneid-dialog__close { width: 24px; height: 24px; padding: 0; margin: 16px 16px 0 0; color: var(--oneid-color-60); } .oneid-yuanbao .oneid-dialog__close:hover { background: none; } .oneid-yuanbao.oneid-prompt-dialog .oneid-dialog { width: 360px; } .oneid-yuanbao.oneid-prompt-dialog .oneid-dialog__header { height: 24px; } .oneid-yuanbao.oneid-prompt-dialog .oneid-dialog__body { padding: 0 24px 24px; } .oneid-yuanbao.oneid-prompt-dialog .oneid-dialog__body .wrapper .header { color: var(--oneid-color-90); font-weight: 600; font-size: 16px; display: flex; align-items: center; } .oneid-yuanbao.oneid-prompt-dialog .oneid-dialog__body .wrapper .header svg { color: #00b259; font-size: 20px; } .oneid-yuanbao.oneid-prompt-dialog .oneid-dialog__body .wrapper .content { padding-top: 16px; color: var(--oneid-color-90); } .oneid-yuanbao.oneid-prompt-dialog .oneid-dialog__footer { box-sizing: border-box; padding: 0 24px 24px 0; } .oneid-yuanbao.oneid-prompt-dialog .oneid-dialog__footer button { width: 88px; height: 36px; color: var(--oneid-color-reverse-90); } .oneid-yuanbao.oneid-prompt-dialog .oneid-dialog__footer button:first-child { color: var(--oneid-color-90); background-color: var(--oneid-user-hover-bgcolor) !important; } .oneid-yuanbao .oneid-popup__content { box-shadow: 0px 8px 12px 0px rgba(0, 0, 0, 0.1019607843); } .oneid-yuanbao .oneid-popup[data-popper-placement^=top] .oneid-popup__content { margin-bottom: 4px; } .oneid-yuanbao .oneid-loading { color: var(--oneid-color-green); font-size: 18px; position: absolute; border-radius: 12px; } .oneid-yuanbao .oneid-loading .oneid-loading--center { position: absolute; top: 28px; border: 1px solid var(--oneid-loading-color-border); padding: 7px 11px; border-radius: 8px; background-color: var(--oneid-loading-color-background); box-shadow: 0px 8px 20px 0px rgba(65, 77, 96, 0.08); } .oneid-yuanbao .oneid-loading__text { color: var(--oneid-color-90); } .oneid-yuanbao .oneid-loading__overlay { background-color: transparent; } .oneid-yuanbao .oneid-form__item { margin-bottom: 16px !important; } .oneid-yuanbao .oneid-form__item-with-extra { margin-bottom: 16px; } .oneid-yuanbao .oneid-form__label { color: var(--oneid-color-90); font-weight: 500; margin-bottom: 8px; line-height: 22px; min-height: auto; } .oneid-yuanbao .oneid-form .oneid-is-error .oneid-input { border-color: var(--oneid-color-red) !important; } .oneid-yuanbao .oneid-form .oneid-input { height: 48px; border-radius: 8px; border: 1px solid var(--oneid-color-10) !important; background-color: transparent; font-size: 16px; padding: 13px 0 13px 12px; caret-color: var(--oneid-color-90); } .oneid-yuanbao .oneid-form .oneid-input input:-webkit-autofill, .oneid-yuanbao .oneid-form .oneid-input input:-webkit-autofill:hover, .oneid-yuanbao .oneid-form .oneid-input input:-webkit-autofill:focus, .oneid-yuanbao .oneid-form .oneid-input input:-webkit-autofill:active { -webkit-text-fill-color: var(--oneid-color-90); box-shadow: 0 0 0px 1000px var(--oneid-background-color) inset; border: 0 none; background-color: transparent; } .oneid-yuanbao .oneid-form .oneid-input.oneid-is-focused { box-shadow: none; } .oneid-yuanbao .oneid-form .oneid-input input { color: var(--oneid-color-90); } .oneid-yuanbao .oneid-form .oneid-input input::placeholder { color: var(--oneid-color-40); } .oneid-yuanbao .oneid-form .oneid-input__suffix { color: var(--oneid-color-90); } .oneid-yuanbao .oneid-form .oneid-input__extra { display: none; } .oneid-select-account-dialog .oneid-dialog { display: flex !important; flex-direction: column; width: 400px; min-height: 400px; max-height: 666px; } .oneid-select-account-dialog .oneid-dialog__header { height: 24px !important; } .oneid-select-account-dialog .oneid-dialog__body { flex: 1; display: flex; flex-direction: column; } .oneid-select-account-dialog .oneid-dialog .oneid-footer { margin-top: 16px; } .oneid-select-account-dialog .header { color: var(--oneid-color-90); cursor: pointer; display: flex; width: fit-content; } .oneid-select-account-dialog .header .title { font-size: 16px; font-weight: 500; } .oneid-account-dialog .oneid-dialog__body { padding-right: 11px !important; } .oneid-select-account-list { display: flex; flex-direction: column; margin-bottom: 32px; padding: 0 3px 0 16px; height: calc(100vh - 30px); } .oneid-select-account-list .list-header { position: relative; display: flex; justify-content: center; align-items: center; color: var(--oneid-color-90); padding: 15px 13px 11px 0; } .oneid-select-account-list .list-header svg { position: absolute; left: 4.5px; } .oneid-select-account-list .list-header .list-title { line-height: 22px; font-size: 20px; font-weight: 600; } .oneid-select-account-list .oneid-account-list__content { margin-top: 8px !important; } .oneid-select-account-list .oneid-footer { margin: 16px 0; } @media (max-width: 320px) { .oneid-prompt-dialog.oneid-yuanbao .oneid-dialog { width: 280px !important; } .oneid-select-account-list .oneid-account-invite__content { padding: 0 21px 0 8px; } .oneid-select-account-list .oneid-account-invite__content .tip { margin-top: 58px; } .oneid-select-account-list .oneid-account-invite__content button.accept-btn { margin-top: 58px; } .oneid-select-account-list .list-header .list-title { font-size: 16px; } } .oneid-account-invite__content { flex: 1; flex-direction: column; display: flex; justify-content: center; } .oneid-account-invite__content .tip { color: var(--oneid-color-90); font-size: 16px; text-align: center; margin-top: 48px; display: flex; justify-content: center; flex-wrap: wrap; line-height: 22px; } .oneid-account-invite__content .tip .tip-active { font-weight: 600; margin-right: 6px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; max-width: calc(100vw - 48px); } .oneid-account-invite__content .account-info { align-self: center; gap: 12px; margin-top: 24px; display: flex; align-items: center; } .oneid-account-invite__content .account-info .logo { align-self: center; width: 40px; height: 40px; border-radius: 50%; } .oneid-account-invite__content .account-info .name { color: var(--oneid-color-90); font-size: 22px; font-weight: 600; text-align: center; line-height: 31px; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; } .oneid-account-invite__content .btn { border-radius: 12px; border: none; font-weight: 500; height: 48px; } .oneid-account-invite__content button.accept-btn { margin-top: 48px; background-color: var(--oneid-color-90); color: var(--oneid-color-reverse-90); } .oneid-account-invite__content button.reject-btn { margin-top: 16px; margin-bottom: 16px; background-color: var(--oneid-user-hover-bgcolor) !important; color: var(--oneid-color-90); } .oneid-account-list__content { flex: 1; display: flex; flex-direction: column; gap: 16px; margin-top: 24px; padding-right: 13px; overflow-y: hidden; } .oneid-account-list__content:hover { overflow-y: scroll; padding-right: 3px; } .oneid-account-list__content::-webkit-scrollbar { width: 10px; } .oneid-account-list__content::-webkit-scrollbar-track { background: transparent; } .oneid-account-list__content::-webkit-scrollbar-thumb { border-width: 3px; border-radius: 10px; border-style: dashed; border-color: transparent; background-color: var(--oneid-scrollbar-color, rgba(0, 0, 0, 0.0784313725)); background-clip: padding-box; } .oneid-account-item__container { background-color: var(--oneid-error-color-background); padding: 16px; gap: 16px; border-radius: 8px; cursor: pointer; display: flex; align-items: center; } .oneid-account-item__container .logo { width: 40px; height: 40px; border-radius: 50%; } .oneid-account-item__container .content { flex: 1; display: flex; align-items: center; } .oneid-account-item__container .content .info { flex: 1; display: flex; flex-direction: column; } .oneid-account-item__container .content .info .name { color: var(--oneid-color-90); font-size: 16px; font-weight: 500; line-height: 22px; } .oneid-account-item__container .content .info .type { color: var(--oneid-color-60); font-size: 12px; line-height: 17px; } .oneid-account-item__container .content .action-name { color: var(--oneid-color-40); font-size: 12px; } .oneid-account-item__container .content .action-icon { color: var(--oneid-color-40); font-size: 16px; } .oneid-account-item__container .content .action-wrapper { display: flex; align-items: center; } .oneid-account-item__container .content .action-wrapper .action-name { color: var(--oneid-brand-blue-color); } .oneid-account-item__container .content .action-wrapper .action-icon { color: var(--oneid-brand-blue-color); } .oneid-account-item__container--disabled .content .info .type { color: var(--oneid-color-15); } .oneid-account-item__container--disabled .content .info .name { color: var(--oneid-color-15); } @charset "UTF-8"; .oneid-yuanbao { --oneid-color-dark: #1a1a1a; --oneid-color-white: #fff; --oneid-color-light: #ffffffe5; --oneid-color-red: #fa5151; --oneid-color-green: #27d08e; --oneid-color-link: #457ae5; /*---------------- Button ---------------*/ /*---------------- Checkbox ---------------*/ /*---------------- Dialog ---------------*/ /*---------------- 提示类Dialog ---------------*/ /*---------------- Popup ---------------*/ /*---------------- Loading ---------------*/ /*---------------- Form ---------------*/ } .oneid-yuanbao.oneid-mode-light { --oneid-background-color: var(--oneid-color-white); --oneid-color-maintain: #000; --oneid-color-reverse: #fff; --oneid-color-reverse-90: #ffffffe5; --oneid-color-10: #00000014; --oneid-color-15: #00000026; --oneid-color-40: #0006; --oneid-color-60: #0009; --oneid-color-80: #000c; --oneid-color-90: #000000e5; --oneid-avatar-bgcolor: #ebebeb; --oneid-user-bgcolor: #f6f6f6; --oneid-user-hover-bgcolor: #f2f2f2; --oneid-loading-color-border: #20c57d80; --oneid-loading-color-background: #f4fcf8; --oneid-error-color-background: #f7f7f7; --oneid-brand-blue-color: #457ae5; --oneid-btn-bgcolor: #f6f6f6; --oneid-btn-disable-bgcolor: #dadada; } .oneid-yuanbao.oneid-mode-dark { --oneid-background-color: #303030; --oneid-color-maintain: #fff; --oneid-color-reverse: #000; --oneid-color-reverse-90: #000000e5; --oneid-color-10: #ffffff1a; --oneid-color-15: #ffffff26; --oneid-color-40: #fff6; --oneid-color-60: #fff9; --oneid-color-80: #000c; --oneid-color-90: #ffffffe5; --oneid-avatar-bgcolor: #444; --oneid-user-bgcolor: #3b3b3b; --oneid-user-hover-bgcolor: #424242; --oneid-loading-color-border: #1db472; --oneid-loading-color-background: #2d453c; --oneid-error-color-background: #3b3b3b; --oneid-brand-blue-color: #38f; --oneid-btn-bgcolor: #1d1d1d; --oneid-btn-disable-bgcolor: #3b3b3b; --oneid-scrollbar-color: #444; } .oneid-yuanbao .oneid-button { border-width: 0; border-radius: 8px; background-color: var(--oneid-color-90) !important; border-color: var(--oneid-color-90) !important; --td-brand-color-hover: var(--oneid-font-color); } .oneid-yuanbao .oneid-button .oneid-ripple { display: none; } .oneid-yuanbao .oneid-button.oneid-is-disabled { background-color: var(--oneid-btn-disable-bgcolor) !important; color: var(--oneid-color-white) !important; } .oneid-yuanbao .oneid-checkbox { align-items: flex-start; } .oneid-yuanbao .oneid-checkbox .oneid-checkbox__input { opacity: 0.3; border-color: var(--oneid-color-60); border-radius: 4px; background-color: var(--oneid-background-color); } .oneid-yuanbao .oneid-checkbox.oneid-is-checked .oneid-checkbox__input { opacity: 1; background-color: var(--oneid-color-90); border-color: var(--oneid-color-90); } .oneid-yuanbao .oneid-checkbox.oneid-is-checked .oneid-checkbox__input::after { border-color: var(--oneid-color-reverse-90); } .oneid-yuanbao .oneid-checkbox .oneid-checkbox__label { color: var(--oneid-color-40) !important; margin-left: 3px; line-height: 16px; } .oneid-yuanbao .oneid-checkbox:hover .oneid-checkbox__input { opacity: 1; border-color: var(--oneid-color-90); } .oneid-yuanbao .oneid-checkbox.oneid-is-disabled .oneid-checkbox__input { opacity: 0.3; border-color: var(--oneid-color-60) !important; background-color: var(--oneid-color-40); } .oneid-yuanbao .oneid-checkbox.oneid-is-disabled .oneid-checkbox__input::after { border-color: var(--oneid-color-60) !important; } .oneid-yuanbao .oneid-checkbox.oneid-is-disabled a { color: var(--oneid-color-60); } .oneid-yuanbao .oneid-dialog__position { padding: 0 !important; } .oneid-yuanbao .oneid-dialog { border-radius: 12px; padding: 0; border: none; background-color: var(--oneid-background-color); } .oneid-yuanbao .oneid-dialog__header { color: var(--oneid-color-90); height: 32px; } .oneid-yuanbao .oneid-dialog__body { padding: 0 24px 16px; } .oneid-yuanbao .oneid-dialog__close { width: 24px; height: 24px; padding: 0; margin: 16px 16px 0 0; color: var(--oneid-color-60); } .oneid-yuanbao .oneid-dialog__close:hover { background: none; } .oneid-yuanbao.oneid-prompt-dialog .oneid-dialog { width: 360px; } .oneid-yuanbao.oneid-prompt-dialog .oneid-dialog__header { height: 24px; } .oneid-yuanbao.oneid-prompt-dialog .oneid-dialog__body { padding: 0 24px 24px; } .oneid-yuanbao.oneid-prompt-dialog .oneid-dialog__body .wrapper .header { color: var(--oneid-color-90); font-weight: 600; font-size: 16px; display: flex; align-items: center; } .oneid-yuanbao.oneid-prompt-dialog .oneid-dialog__body .wrapper .header svg { color: #00b259; font-size: 20px; } .oneid-yuanbao.oneid-prompt-dialog .oneid-dialog__body .wrapper .content { padding-top: 16px; color: var(--oneid-color-90); } .oneid-yuanbao.oneid-prompt-dialog .oneid-dialog__footer { box-sizing: border-box; padding: 0 24px 24px 0; } .oneid-yuanbao.oneid-prompt-dialog .oneid-dialog__footer button { width: 88px; height: 36px; color: var(--oneid-color-reverse-90); } .oneid-yuanbao.oneid-prompt-dialog .oneid-dialog__footer button:first-child { color: var(--oneid-color-90); background-color: var(--oneid-user-hover-bgcolor) !important; } .oneid-yuanbao .oneid-popup__content { box-shadow: 0px 8px 12px 0px rgba(0, 0, 0, 0.1019607843); } .oneid-yuanbao .oneid-popup[data-popper-placement^=top] .oneid-popup__content { margin-bottom: 4px; } .oneid-yuanbao .oneid-loading { color: var(--oneid-color-green); font-size: 18px; position: absolute; border-radius: 12px; } .oneid-yuanbao .oneid-loading .oneid-loading--center { position: absolute; top: 28px; border: 1px solid var(--oneid-loading-color-border); padding: 7px 11px; border-radius: 8px; background-color: var(--oneid-loading-color-background); box-shadow: 0px 8px 20px 0px rgba(65, 77, 96, 0.08); } .oneid-yuanbao .oneid-loading__text { color: var(--oneid-color-90); } .oneid-yuanbao .oneid-loading__overlay { background-color: transparent; } .oneid-yuanbao .oneid-form__item { margin-bottom: 16px !important; } .oneid-yuanbao .oneid-form__item-with-extra { margin-bottom: 16px; } .oneid-yuanbao .oneid-form__label { color: var(--oneid-color-90); font-weight: 500; margin-bottom: 8px; line-height: 22px; min-height: auto; } .oneid-yuanbao .oneid-form .oneid-is-error .oneid-input { border-color: var(--oneid-color-red) !important; } .oneid-yuanbao .oneid-form .oneid-input { height: 48px; border-radius: 8px; border: 1px solid var(--oneid-color-10) !important; background-color: transparent; font-size: 16px; padding: 13px 0 13px 12px; caret-color: var(--oneid-color-90); } .oneid-yuanbao .oneid-form .oneid-input input:-webkit-autofill, .oneid-yuanbao .oneid-form .oneid-input input:-webkit-autofill:hover, .oneid-yuanbao .oneid-form .oneid-input input:-webkit-autofill:focus, .oneid-yuanbao .oneid-form .oneid-input input:-webkit-autofill:active { -webkit-text-fill-color: var(--oneid-color-90); box-shadow: 0 0 0px 1000px var(--oneid-background-color) inset; border: 0 none; background-color: transparent; } .oneid-yuanbao .oneid-form .oneid-input.oneid-is-focused { box-shadow: none; } .oneid-yuanbao .oneid-form .oneid-input input { color: var(--oneid-color-90); } .oneid-yuanbao .oneid-form .oneid-input input::placeholder { color: var(--oneid-color-40); } .oneid-yuanbao .oneid-form .oneid-input__suffix { color: var(--oneid-color-90); } .oneid-yuanbao .oneid-form .oneid-input__extra { display: none; } .oneid-verify-phone-dialog .oneid-dialog { width: 400px; min-height: 340px; } .oneid-verify-phone-dialog .oneid-dialog__header { height: 40px; } .oneid-verify-phone-dialog .oneid-dialog .header { color: var(--oneid-color-90); margin-bottom: 16px; font-weight: 500; font-size: 16px; } .oneid-verify-phone-dialog .oneid-dialog .content { flex-direction: column; display: flex; align-items: center; } .oneid-verify-phone-dialog .oneid-dialog .content .oneid-input { border: none; font-size: 16px; } .oneid-verify-phone-dialog .oneid-dialog .content .oneid-input { background-color: transparent; } .oneid-verify-phone-dialog .oneid-dialog .content .oneid-input__suffix { color: var(--oneid-color-90); } .oneid-verify-phone-dialog .oneid-dialog .content input { color: var(--oneid-color-90); } .oneid-verify-phone-dialog .oneid-dialog .content input::placeholder { color: var(--oneid-color-40); } .oneid-verify-phone-dialog .oneid-dialog .content .oneid-input--focused { box-shadow: none; } .oneid-verify-phone-dialog .oneid-dialog .content .next { margin: 24px 0 32px; height: 48px; font-weight: 500; color: var(--oneid-color-reverse-90); } .oneid-phone-input { position: relative; width: 100%; min-height: 64px; } .oneid-phone-input .wrap { width: 100%; box-sizing: border-box; border-radius: 8px; border: 1px solid var(--oneid-color-10); } .oneid-phone-input .wrap_showList { position: absolute; z-index: 1; background-color: var(--oneid-background-color); } .oneid-phone-input .wrap__formitem { padding: 8px 12px; box-sizing: border-box; border-radius: 8px; width: 100%; display: flex; align-items: center; } .oneid-phone-input .wrap__formitem__areaCode { cursor: pointer; font-size: 16px; color: var(--oneid-color-90); white-space: nowrap; display: flex; align-items: center; } .oneid-phone-input .wrap__formitem__areaCode_disabled { cursor: default !important; } .oneid-phone-input .wrap__arealist__item { cursor: pointer; padding: 8px 10px; margin: 5px 6px; font-size: 16px; line-height: 22px; color: var(--oneid-color-90); } .oneid-phone-input .wrap__arealist__item__icon { display: none !important; } .oneid-phone-input .wrap__arealist__item--active { justify-content: space-between; border-radius: 6px; background: var(--oneid-user-hover-bgcolor); display: flex; align-items: center; } .oneid-phone-input .wrap__arealist__item--active .wrap__arealist__item__icon { display: block !important; } .oneid-phone-input .wrap__arealist__item:hover { justify-content: space-between; border-radius: 6px; background: var(--oneid-user-hover-bgcolor); display: flex; align-items: center; } .oneid-verify-code { width: 100%; } .oneid-verify-code .input-row { position: relative; padding: 7px 12px 7px 4px; border-radius: 8px; border: 1px solid var(--oneid-color-10); justify-content: space-between; display: flex; align-items: center; } .oneid-verify-code .input-row .oneid-input__wrap { flex: 1; } .oneid-verify-code .send-code { cursor: pointer; position: relative; padding-left: 12px; color: var(--oneid-color-90); font-size: 13px; } .oneid-verify-code .send-code::before { position: absolute; content: ""; left: 0; top: 3px; width: 1px; height: 16px; background-color: var(--oneid-color-10); } .oneid-verify-code .countdown { color: var(--oneid-color-40); width: 92px; } @charset "UTF-8"; .oneid-common { --td-screen-xs: 320px; --td-screen-sm: 768px; --td-screen-md: 992px; --td-screen-lg: 1200px; --td-screen-xl: 1400px; --td-screen-xxl: 1880px; } @-moz-document url-prefix() { .oneid-common .narrow-scrollbar { scrollbar-color: var(--td-scrollbar-color) transparent; scrollbar-width: thin; } } .oneid-common .narrow-scrollbar::-webkit-scrollbar { width: 8px; height: 8px; } .oneid-common .narrow-scrollbar::-webkit-scrollbar-thumb { border: 2px solid transparent; background-clip: content-box; background-color: var(--td-scrollbar-color); border-radius: 15px; } .oneid-common .narrow-scrollbar::-webkit-scrollbar-thumb:vertical:hover, .oneid-common .narrow-scrollbar::-webkit-scrollbar-thumb:horizontal:hover { background-color: var(--td-scrollbar-hover-color); } .oneid-common .oneid-fake-arrow path { -webkit-transition: d 0.2s; transition: d 0.2s; stroke: currentcolor; } .oneid-common .oneid-fake-arrow--active path { d: path("M3.75 10.2002L7.99274 5.7998L12.2361 10.0425"); } .oneid-common .oneid-slide-down-enter-active, .oneid-common .oneid-slide-down-leave-active { -webkit-transition: height 0.2s cubic-bezier(0.38, 0, 0.24, 1), max-height 0.2s cubic-bezier(0.38, 0, 0.24, 1); transition: height 0.2s cubic-bezier(0.38, 0, 0.24, 1), max-height 0.2s cubic-bezier(0.38, 0, 0.24, 1); } .oneid-common, .oneid-common[theme-mode=light] { --td-brand-color-1: #f2f3ff; --td-brand-color-2: #d9e1ff; --td-brand-color-3: #b5c7ff; --td-brand-color-4: #8eabff; --td-brand-color-5: #618dff; --td-brand-color-6: #366ef4; --td-brand-color-7: #0052d9; --td-brand-color-8: #003cab; --td-brand-color-9: #002a7c; --td-brand-color-10: #001a57; --td-warning-color-1: #fff1e9; --td-warning-color-2: #ffd9c2; --td-warning-color-3: #ffb98c; --td-warning-color-4: #fa9550; --td-warning-color-5: #e37318; --td-warning-color-6: #be5a00; --td-warning-color-7: #954500; --td-warning-color-8: #713300; --td-warning-color-9: #532300; --td-warning-color-10: #3b1700; --td-error-color-1: #fff0ed; --td-error-color-2: #ffd8d2; --td-error-color-3: #ffb9b0; --td-error-color-4: #ff9285; --td-error-color-5: #f6685d; --td-error-color-6: #d54941; --td-error-color-7: #ad352f; --td-error-color-8: #881f1c; --td-error-color-9: #68070a; --td-error-color-10: #490002; --td-success-color-1: #e3f9e9; --td-success-color-2: #c6f3d7; --td-success-color-3: #92dab2; --td-success-color-4: #56c08d; --td-success-color-5: #2ba471; --td-success-color-6: #008858; --td-success-color-7: #006c45; --td-success-color-8: #005334; --td-success-color-9: #003b23; --td-success-color-10: #002515; --td-gray-color-1: #f3f3f3; --td-gray-color-2: #eee; --td-gray-color-3: #e8e8e8; --td-gray-color-4: #ddd; --td-gray-color-5: #c6c6c6; --td-gray-color-6: #a6a6a6; --td-gray-color-7: #8b8b8b; --td-gray-color-8: #777; --td-gray-color-9: #5e5e5e; --td-gray-color-10: #4b4b4b; --td-gray-color-11: #393939; --td-gray-color-12: #2c2c2c; --td-gray-color-13: #242424; --td-gray-color-14: #181818; --td-font-white-1: #ffffff; --td-font-white-2: rgba(255, 255, 255, 0.55); --td-font-white-3: rgba(255, 255, 255, 0.35); --td-font-white-4: rgba(255, 255, 255, 0.22); --td-font-gray-1: rgba(0, 0, 0, 0.9); --td-font-gray-2: rgba(0, 0, 0, 0.6); --td-font-gray-3: rgba(0, 0, 0, 0.4); --td-font-gray-4: rgba(0, 0, 0, 0.26); --td-brand-color: var(--td-brand-color-7); --td-warning-color: var(--td-warning-color-5); --td-error-color: var(--td-error-color-6); --td-success-color: var(--td-success-color-5); --td-brand-color-hover: var(--td-brand-color-6); --td-brand-color-focus: var(--td-brand-color-2); --td-brand-color-active: var(--td-brand-color-8); --td-brand-color-disabled: var(--td-brand-color-3); --td-brand-color-light: var(--td-brand-color-1); --td-brand-color-light-hover: var(--td-brand-color-2); --td-warning-color-hover: var(--td-warning-color-4); --td-warning-color-focus: var(--td-warning-color-2); --td-warning-color-active: var(--td-warning-color-6); --td-warning-color-disabled: var(--td-warning-color-3); --td-warning-color-light: var(--td-warning-color-1); --td-warning-color-light-hover: var(--td-warning-color-2); --td-error-color-hover: var(--td-error-color-5); --td-error-color-focus: var(--td-error-color-2); --td-error-color-active: var(--td-error-color-7); --td-error-color-disabled: var(--td-error-color-3); --td-error-color-light: var(--td-error-color-1); --td-error-color-light-hover: var(--td-error-color-2); --td-success-color-hover: var(--td-success-color-4); --td-success-color-focus: var(--td-success-color-2); --td-success-color-active: var(--td-success-color-6); --td-success-color-disabled: var(--td-success-color-3); --td-success-color-light: var(--td-success-color-1); --td-success-color-light-hover: var(--td-success-color-2); --td-mask-active: rgba(0, 0, 0, 0.6); --td-mask-disabled: rgba(255, 255, 255, 0.6); --td-bg-color-page: var(--td-gray-color-2); --td-bg-color-container: #fff; --td-bg-color-container-hover: var(--td-gray-color-1); --td-bg-color-container-active: var(--td-gray-color-3); --td-bg-color-container-select: #fff; --td-bg-color-secondarycontainer: var(--td-gray-color-1); --td-bg-color-secondarycontainer-hover: var(--td-gray-color-2); --td-bg-color-secondarycontainer-active: var(--td-gray-color-4); --td-bg-color-component: var(--td-gray-color-3); --td-bg-color-component-hover: var(--td-gray-color-4); --td-bg-color-component-active: var(--td-gray-color-6); --td-bg-color-secondarycomponent: var(--td-gray-color-4); --td-bg-color-secondarycomponent-hover: var(--td-gray-color-5); --td-bg-color-secondarycomponent-active: var(--td-gray-color-6); --td-bg-color-component-disabled: var(--td-gray-color-2); --td-bg-color-specialcomponent: #fff; --td-text-color-primary: var(--td-font-gray-1); --td-text-color-secondary: var(--td-font-gray-2); --td-text-color-placeholder: var(--td-font-gray-3); --td-text-color-disabled: var(--td-font-gray-4); --td-text-color-anti: #fff; --td-text-color-brand: var(--td-brand-color-7); --td-text-color-link: var(--td-brand-color-8); --td-border-level-1-color: var(--td-gray-color-3); --td-component-stroke: var(--td-gray-color-3); --td-border-level-2-color: var(--td-gray-color-4); --td-component-border: var(--td-gray-color-4); --td-shadow-1: 0 1px 10px rgba(0, 0, 0, 0.05), 0 4px 5px rgba(0, 0, 0, 0.08), 0 2px 4px -1px rgba(0, 0, 0, 0.12); --td-shadow-2: 0 3px 14px 2px rgba(0, 0, 0, 0.05), 0 8px 10px 1px rgba(0, 0, 0, 0.06), 0 5px 5px -3px rgba(0, 0, 0, 0.1); --td-shadow-3: 0 6px 30px 5px rgba(0, 0, 0, 0.05), 0 16px 24px 2px rgba(0, 0, 0, 0.04), 0 8px 10px -5px rgba(0, 0, 0, 0.08); --td-shadow-inset-top: inset 0 0.5px 0 #dcdcdc; --td-shadow-inset-right: inset 0.5px 0 0 #dcdcdc; --td-shadow-inset-bottom: inset 0 -0.5px 0 #dcdcdc; --td-shadow-inset-left: inset -0.5px 0 0 #dcdcdc; --td-table-shadow-color: rgba(0, 0, 0, 0.08); --td-scrollbar-color: rgba(0, 0, 0, 0.1); --td-scrollbar-hover-color: rgba(0, 0, 0, 0.3); --td-scroll-track-color: #fff; } .oneid-common[theme-mode=dark] { --td-brand-color-1: #1b2f51; --td-brand-color-2: #173463; --td-brand-color-3: #143975; --td-brand-color-4: #103d88; --td-brand-color-5: #0d429a; --td-brand-color-6: #054bbe; --td-brand-color-7: #2667d4; --td-brand-color-8: #4582e6; --td-brand-color-9: #699ef5; --td-brand-color-10: #96bbf8; --td-warning-color-1: #4f2a1d; --td-warning-color-2: #582f21; --td-warning-color-3: #733c23; --td-warning-color-4: #a75d2b; --td-warning-color-5: #cf6e2d; --td-warning-color-6: #dc7633; --td-warning-color-7: #e8935c; --td-warning-color-8: #ecbf91; --td-warning-color-9: #eed7bf; --td-warning-color-10: #f3e9dc; --td-error-color-1: #472324; --td-error-color-2: #5e2a2d; --td-error-color-3: #703439; --td-error-color-4: #83383e; --td-error-color-5: #a03f46; --td-error-color-6: #c64751; --td-error-color-7: #de6670; --td-error-color-8: #ec888e; --td-error-color-9: #edb1b6; --td-error-color-10: #eeced0; --td-success-color-1: #193a2a; --td-success-color-2: #1a4230; --td-success-color-3: #17533d; --td-success-color-4: #0d7a55; --td-success-color-5: #059465; --td-success-color-6: #43af8a; --td-success-color-7: #46bf96; --td-success-color-8: #80d2b6; --td-success-color-9: #b4e1d3; --td-success-color-10: #deede8; --td-gray-color-1: #f3f3f3; --td-gray-color-2: #eee; --td-gray-color-3: #e8e8e8; --td-gray-color-4: #ddd; --td-gray-color-5: #c6c6c6; --td-gray-color-6: #a6a6a6; --td-gray-color-7: #8b8b8b; --td-gray-color-8: #777; --td-gray-color-9: #5e5e5e; --td-gray-color-10: #4b4b4b; --td-gray-color-11: #393939; --td-gray-color-12: #2c2c2c; --td-gray-color-13: #242424; --td-gray-color-14: #181818; --td-font-white-1: rgba(255, 255, 255, 0.9); --td-font-white-2: rgba(255, 255, 255, 0.55); --td-font-white-3: rgba(255, 255, 255, 0.35); --td-font-white-4: rgba(255, 255, 255, 0.22); --td-font-gray-1: rgba(0, 0, 0, 0.9); --td-font-gray-2: rgba(0, 0, 0, 0.6); --td-font-gray-3: rgba(0, 0, 0, 0.4); --td-font-gray-4: rgba(0, 0, 0, 0.26); --td-brand-color: var(--td-brand-color-8); --td-warning-color: var(--td-warning-color-5); --td-error-color: var(--td-error-color-6); --td-success-color: var(--td-success-color-5); --td-brand-color-hover: var(--td-brand-color-7); --td-brand-color-focus: var(--td-brand-color-2); --td-brand-color-active: var(--td-brand-color-9); --td-brand-color-disabled: var(--td-brand-color-3); --td-brand-color-light: var(--td-brand-color-1); --td-brand-color-light-hover: var(--td-brand-color-2); --td-warning-color-hover: var(--td-warning-color-4); --td-warning-color-focus: var(--td-warning-color-2); --td-warning-color-active: var(--td-warning-color-6); --td-warning-color-disabled: var(--td-warning-color-3); --td-warning-color-light: var(--td-warning-color-1); --td-warning-color-light-hover: var(--td-warning-color-2); --td-error-color-hover: var(--td-error-color-5); --td-error-color-focus: var(--td-error-color-2); --td-error-color-active: var(--td-error-color-7); --td-error-color-disabled: var(--td-error-color-3); --td-error-color-light: var(--td-error-color-1); --td-error-color-light-hover: var(--td-error-color-2); --td-success-color-hover: var(--td-success-color-4); --td-success-color-focus: var(--td-success-color-2); --td-success-color-active: var(--td-success-color-6); --td-success-color-disabled: var(--td-success-color-3); --td-success-color-light: var(--td-success-color-1); --td-success-color-light-hover: var(--td-success-color-2); --td-mask-active: rgba(0, 0, 0, 0.4); --td-mask-disabled: rgba(0, 0, 0, 0.6); --td-bg-color-page: var(--td-gray-color-14); --td-bg-color-container: var(--td-gray-color-13); --td-bg-color-container-hover: var(--td-gray-color-12); --td-bg-color-container-active: var(--td-gray-color-10); --td-bg-color-container-select: var(--td-gray-color-9); --td-bg-color-secondarycontainer: var(--td-gray-color-12); --td-bg-color-secondarycontainer-hover: var(--td-gray-color-11); --td-bg-color-secondarycontainer-active: var(--td-gray-color-9); --td-bg-color-component: var(--td-gray-color-11); --td-bg-color-component-hover: var(--td-gray-color-10); --td-bg-color-component-active: var(--td-gray-color-9); --td-bg-color-secondarycomponent: var(--td-gray-color-10); --td-bg-color-secondarycomponent-hover: var(--td-gray-color-9); --td-bg-color-secondarycomponent-active: var(--td-gray-color-8); --td-bg-color-component-disabled: var(--td-gray-color-12); --td-bg-color-specialcomponent: transparent; --td-text-color-primary: var(--td-font-white-1); --td-text-color-secondary: var(--td-font-white-2); --td-text-color-placeholder: var(--td-font-white-3); --td-text-color-disabled: var(--td-font-white-4); --td-text-color-anti: #fff; --td-text-color-brand: var(--td-brand-color-8); --td-text-color-link: var(--td-brand-color-8); --td-border-level-1-color: var(--td-gray-color-11); --td-component-stroke: var(--td-gray-color-11); --td-border-level-2-color: var(--td-gray-color-9); --td-component-border: var(--td-gray-color-9); --td-shadow-1: 0 4px 6px rgba(0, 0, 0, 0.06), 0 1px 10px rgba(0, 0, 0, 0.08), 0 2px 4px rgba(0, 0, 0, 0.12); --td-shadow-2: 0 8px 10px rgba(0, 0, 0, 0.12), 0 3px 14px rgba(0, 0, 0, 0.1), 0 5px 5px rgba(0, 0, 0, 0.16); --td-shadow-3: 0 16px 24px rgba(0, 0, 0, 0.14), 0 6px 30px rgba(0, 0, 0, 0.12), 0 8px 10px rgba(0, 0, 0, 0.2); --td-shadow-inset-top: inset 0 0.5px 0 #5e5e5e; --td-shadow-inset-right: inset 0.5px 0 0 #5e5e5e; --td-shadow-inset-bottom: inset 0 -0.5px 0 #5e5e5e; --td-shadow-inset-left: inset -0.5px 0 0 #5e5e5e; --td-table-shadow-color: rgba(0, 0, 0, 0.55); --td-scrollbar-color: rgba(255, 255, 255, 0.1); --td-scrollbar-hover-color: rgba(255, 255, 255, 0.3); --td-scroll-track-color: #333; } .oneid-common { --td-radius-small: 2px; --td-radius-default: 3px; --td-radius-medium: 6px; --td-radius-large: 9px; --td-radius-extraLarge: 12px; --td-radius-round: 999px; --td-radius-circle: 50%; } .oneid-common { --td-font-family: PingFang SC, Microsoft YaHei, Arial Regular; --td-font-family-medium: PingFang SC, Microsoft YaHei, Arial Medium; --td-font-size-link-small: 12px; --td-font-size-link-medium: 14px; --td-font-size-link-large: 16px; --td-font-size-mark-small: 12px; --td-font-size-mark-medium: 14px; --td-font-size-body-small: 12px; --td-font-size-body-medium: 14px; --td-font-size-body-large: 16px; --td-font-size-title-small: 14px; --td-font-size-title-medium: 16px; --td-font-size-title-large: 20px; --td-font-size-headline-small: 24px; --td-font-size-headline-medium: 28px; --td-font-size-headline-large: 36px; --td-font-size-display-medium: 48px; --td-font-size-display-large: 64px; --td-line-height-link-small: 20px; --td-line-height-link-medium: 22px; --td-line-height-link-large: 24px; --td-line-height-mark-small: 20px; --td-line-height-mark-medium: 22px; --td-line-height-body-small: 20px; --td-line-height-body-medium: 22px; --td-line-height-body-large: 24px; --td-line-height-title-small: 22px; --td-line-height-title-medium: 24px; --td-line-height-title-large: 28px; --td-line-height-headline-small: 32px; --td-line-height-headline-medium: 36px; --td-line-height-headline-large: 44px; --td-line-height-display-medium: 56px; --td-line-height-display-large: 72px; --td-font-link-small: var(--td-font-size-link-small) / var(--td-line-height-link-small) var(--td-font-family); --td-font-link-medium: var(--td-font-size-link-medium) / var(--td-line-height-link-medium) var(--td-font-family); --td-font-link-large: var(--td-font-size-link-large) / var(--td-line-height-link-large) var(--td-font-family); --td-font-mark-small: 600 var(--td-font-size-mark-small) / var(--td-line-height-mark-small) var(--td-font-family); --td-font-mark-medium: 600 var(--td-font-size-mark-medium) / var(--td-line-height-mark-medium) var(--td-font-family); --td-font-body-small: var(--td-font-size-body-small) / var(--td-line-height-body-small) var(--td-font-family); --td-font-body-medium: var(--td-font-size-body-medium) / var(--td-line-height-body-medium) var(--td-font-family); --td-font-body-large: var(--td-font-size-body-large) / var(--td-line-height-body-large) var(--td-font-family); --td-font-title-small: 600 var(--td-font-size-title-small) / var(--td-line-height-title-small) var(--td-font-family); --td-font-title-medium: 600 var(--td-font-size-title-medium) / var(--td-line-height-title-medium) var(--td-font-family); --td-font-title-large: 600 var(--td-font-size-title-large) / var(--td-line-height-title-large) var(--td-font-family); --td-font-headline-small: 600 var(--td-font-size-headline-small) / var(--td-line-height-headline-small) var(--td-font-family); --td-font-headline-medium: 600 var(--td-font-size-headline-medium) / var(--td-line-height-headline-medium) var(--td-font-family); --td-font-headline-large: 600 var(--td-font-size-headline-large) / var(--td-line-height-headline-large) var(--td-font-family); --td-font-display-medium: 600 var(--td-font-size-display-medium) / var(--td-line-height-display-medium) var(--td-font-family); --td-font-display-large: 600 var(--td-font-size-display-large) / var(--td-line-height-display-large) var(--td-font-family); } .oneid-common { --td-size-1: 2px; --td-size-2: 4px; --td-size-3: 6px; --td-size-4: 8px; --td-size-5: 12px; --td-size-6: 16px; --td-size-7: 20px; --td-size-8: 24px; --td-size-9: 28px; --td-size-10: 32px; --td-size-11: 36px; --td-size-12: 40px; --td-size-13: 48px; --td-size-14: 56px; --td-size-15: 64px; --td-size-16: 72px; --td-comp-size-xxxs: var(--td-size-6); --td-comp-size-xxs: var(--td-size-7); --td-comp-size-xs: var(--td-size-8); --td-comp-size-s: var(--td-size-9); --td-comp-size-m: var(--td-size-10); --td-comp-size-l: var(--td-size-11); --td-comp-size-xl: var(--td-size-12); --td-comp-size-xxl: var(--td-size-13); --td-comp-size-xxxl: var(--td-size-14); --td-comp-size-xxxxl: var(--td-size-15); --td-comp-size-xxxxxl: var(--td-size-16); --td-pop-padding-s: var(--td-size-2); --td-pop-padding-m: var(--td-size-3); --td-pop-padding-l: var(--td-size-4); --td-pop-padding-xl: var(--td-size-5); --td-pop-padding-xxl: var(--td-size-6); --td-comp-paddingLR-xxs: var(--td-size-1); --td-comp-paddingLR-xs: var(--td-size-2); --td-comp-paddingLR-s: var(--td-size-4); --td-comp-paddingLR-m: var(--td-size-5); --td-comp-paddingLR-l: var(--td-size-6); --td-comp-paddingLR-xl: var(--td-size-8); --td-comp-paddingLR-xxl: var(--td-size-10); --td-comp-paddingTB-xxs: var(--td-size-1); --td-comp-paddingTB-xs: var(--td-size-2); --td-comp-paddingTB-s: var(--td-size-4); --td-comp-paddingTB-m: var(--td-size-5); --td-comp-paddingTB-l: var(--td-size-6); --td-comp-paddingTB-xl: var(--td-size-8); --td-comp-paddingTB-xxl: var(--td-size-10); --td-comp-margin-xxs: var(--td-size-1); --td-comp-margin-xs: var(--td-size-2); --td-comp-margin-s: var(--td-size-4); --td-comp-margin-m: var(--td-size-5); --td-comp-margin-l: var(--td-size-6); --td-comp-margin-xl: var(--td-size-7); --td-comp-margin-xxl: var(--td-size-8); --td-comp-margin-xxxl: var(--td-size-10); --td-comp-margin-xxxxl: var(--td-size-12); } .oneid-layout { font: var(--td-font-body-medium); color: var(--td-text-color-primary); -webkit-box-sizing: border-box; box-sizing: border-box; margin: 0; padding: 0; list-style: none; } .oneid-layout, .oneid-layout__direction-vertical { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; background: var(--td-bg-color-page); -webkit-box-flex: 1; -ms-flex: auto; flex: auto; } .oneid-layout--with-sider, .oneid-layout__direction-horizontal { -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; } .oneid-layout__header { height: var(--td-comp-size-xxxl); background-color: var(--td-bg-color-container); } .oneid-layout__content { -webkit-box-flex: 1; -ms-flex: auto; flex: auto; } .oneid-layout__sider { position: relative; -webkit-transition: all 0.2s; transition: all 0.2s; background: var(--td-bg-color-container); width: 232px; } .oneid-layout__footer { color: var(--td-text-color-placeholder); padding: 24px; } .oneid-row { font: var(--td-font-body-medium); color: var(--td-text-color-primary); -webkit-box-sizing: border-box; box-sizing: border-box; margin: 0; padding: 0; list-style: none; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-flow: row wrap; flex-flow: row wrap; } .oneid-row--start { -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; } .oneid-row--center { -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .oneid-row--end { -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; } .oneid-row--space-between { -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } .oneid-row--space-around { -ms-flex-pack: distribute; justify-content: space-around; } .oneid-row--top { -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; } .oneid-row--middle { -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .oneid-row--bottom { -webkit-box-align: end; -ms-flex-align: end; align-items: flex-end; } .oneid-row--align-top, .oneid-row--align-start { -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; } .oneid-row--align-middle, .oneid-row--align-center { -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .oneid-row--align-bottom, .oneid-row--align-end { -webkit-box-align: end; -ms-flex-align: end; align-items: flex-end; } .oneid-row--align-stretch { -webkit-box-align: stretch; -ms-flex-align: stretch; align-items: stretch; } .oneid-row--align-baseline { -webkit-box-align: baseline; -ms-flex-align: baseline; align-items: baseline; } .oneid-col { position: relative; max-width: 100%; min-height: 1px; -webkit-box-sizing: border-box; box-sizing: border-box; } .oneid-col-12 { display: block; -webkit-box-flex: 0; -ms-flex: 0 0 100%; flex: 0 0 100%; max-width: 100%; } .oneid-col-push-12 { left: 100%; } .oneid-col-pull-12 { right: 100%; } .oneid-col-offset-12 { margin-left: 100%; } .oneid-col-order-12 { -webkit-box-ordinal-group: 13; -ms-flex-order: 12; order: 12; } .oneid-col-11 { display: block; -webkit-box-flex: 0; -ms-flex: 0 0 91.66666667%; flex: 0 0 91.66666667%; max-width: 91.66666667%; } .oneid-col-push-11 { left: 91.66666667%; } .oneid-col-pull-11 { right: 91.66666667%; } .oneid-col-offset-11 { margin-left: 91.66666667%; } .oneid-col-order-11 { -webkit-box-ordinal-group: 12; -ms-flex-order: 11; order: 11; } .oneid-col-10 { display: block; -webkit-box-flex: 0; -ms-flex: 0 0 83.33333333%; flex: 0 0 83.33333333%; max-width: 83.33333333%; } .oneid-col-push-10 { left: 83.33333333%; } .oneid-col-pull-10 { right: 83.33333333%; } .oneid-col-offset-10 { margin-left: 83.33333333%; } .oneid-col-order-10 { -webkit-box-ordinal-group: 11; -ms-flex-order: 10; order: 10; } .oneid-col-9 { display: block; -webkit-box-flex: 0; -ms-flex: 0 0 75%; flex: 0 0 75%; max-width: 75%; } .oneid-col-push-9 { left: 75%; } .oneid-col-pull-9 { right: 75%; } .oneid-col-offset-9 { margin-left: 75%; } .oneid-col-order-9 { -webkit-box-ordinal-group: 10; -ms-flex-order: 9; order: 9; } .oneid-col-8 { display: block; -webkit-box-flex: 0; -ms-flex: 0 0 66.66666667%; flex: 0 0 66.66666667%; max-width: 66.66666667%; } .oneid-col-push-8 { left: 66.66666667%; } .oneid-col-pull-8 { right: 66.66666667%; } .oneid-col-offset-8 { margin-left: 66.66666667%; } .oneid-col-order-8 { -webkit-box-ordinal-group: 9; -ms-flex-order: 8; order: 8; } .oneid-col-7 { display: block; -webkit-box-flex: 0; -ms-flex: 0 0 58.33333333%; flex: 0 0 58.33333333%; max-width: 58.33333333%; } .oneid-col-push-7 { left: 58.33333333%; } .oneid-col-pull-7 { right: 58.33333333%; } .oneid-col-offset-7 { margin-left: 58.33333333%; } .oneid-col-order-7 { -webkit-box-ordinal-group: 8; -ms-flex-order: 7; order: 7; } .oneid-col-6 { display: block; -webkit-box-flex: 0; -ms-flex: 0 0 50%; flex: 0 0 50%; max-width: 50%; } .oneid-col-push-6 { left: 50%; } .oneid-col-pull-6 { right: 50%; } .oneid-col-offset-6 { margin-left: 50%; } .oneid-col-order-6 { -webkit-box-ordinal-group: 7; -ms-flex-order: 6; order: 6; } .oneid-col-5 { display: block; -webkit-box-flex: 0; -ms-flex: 0 0 41.66666667%; flex: 0 0 41.66666667%; max-width: 41.66666667%; } .oneid-col-push-5 { left: 41.66666667%; } .oneid-col-pull-5 { right: 41.66666667%; } .oneid-col-offset-5 { margin-left: 41.66666667%; } .oneid-col-order-5 { -webkit-box-ordinal-group: 6; -ms-flex-order: 5; order: 5; } .oneid-col-4 { display: block; -webkit-box-flex: 0; -ms-flex: 0 0 33.33333333%; flex: 0 0 33.33333333%; max-width: 33.33333333%; } .oneid-col-push-4 { left: 33.33333333%; } .oneid-col-pull-4 { right: 33.33333333%; } .oneid-col-offset-4 { margin-left: 33.33333333%; } .oneid-col-order-4 { -webkit-box-ordinal-group: 5; -ms-flex-order: 4; order: 4; } .oneid-col-3 { display: block; -webkit-box-flex: 0; -ms-flex: 0 0 25%; flex: 0 0 25%; max-width: 25%; } .oneid-col-push-3 { left: 25%; } .oneid-col-pull-3 { right: 25%; } .oneid-col-offset-3 { margin-left: 25%; } .oneid-col-order-3 { -webkit-box-ordinal-group: 4; -ms-flex-order: 3; order: 3; } .oneid-col-2 { display: block; -webkit-box-flex: 0; -ms-flex: 0 0 16.66666667%; flex: 0 0 16.66666667%; max-width: 16.66666667%; } .oneid-col-push-2 { left: 16.66666667%; } .oneid-col-pull-2 { right: 16.66666667%; } .oneid-col-offset-2 { margin-left: 16.66666667%; } .oneid-col-order-2 { -webkit-box-ordinal-group: 3; -ms-flex-order: 2; order: 2; } .oneid-col-1 { display: block; -webkit-box-flex: 0; -ms-flex: 0 0 8.33333333%; flex: 0 0 8.33333333%; max-width: 8.33333333%; } .oneid-col-push-1 { left: 8.33333333%; } .oneid-col-pull-1 { right: 8.33333333%; } .oneid-col-offset-1 { margin-left: 8.33333333%; } .oneid-col-order-1 { -webkit-box-ordinal-group: 2; -ms-flex-order: 1; order: 1; } .oneid-col-0 { display: none; } .oneid-col-push-0 { left: auto; } .oneid-col-pull-0 { right: auto; } .oneid-col-push-0 { left: auto; } .oneid-col-pull-0 { right: auto; } .oneid-col-offset-0 { margin-left: 0; } .oneid-col-order-0 { -webkit-box-ordinal-group: 1; -ms-flex-order: 0; order: 0; } .oneid-col-xs-12 { display: block; -webkit-box-flex: 0; -ms-flex: 0 0 100%; flex: 0 0 100%; max-width: 100%; } .oneid-col-xs-push-12 { left: 100%; } .oneid-col-xs-pull-12 { right: 100%; } .oneid-col-xs-offset-12 { margin-left: 100%; } .oneid-col-xs-order-12 { -webkit-box-ordinal-group: 13; -ms-flex-order: 12; order: 12; } .oneid-col-xs-11 { display: block; -webkit-box-flex: 0; -ms-flex: 0 0 91.66666667%; flex: 0 0 91.66666667%; max-width: 91.66666667%; } .oneid-col-xs-push-11 { left: 91.66666667%; } .oneid-col-xs-pull-11 { right: 91.66666667%; } .oneid-col-xs-offset-11 { margin-left: 91.66666667%; } .oneid-col-xs-order-11 { -webkit-box-ordinal-group: 12; -ms-flex-order: 11; order: 11; } .oneid-col-xs-10 { display: block; -webkit-box-flex: 0; -ms-flex: 0 0 83.33333333%; flex: 0 0 83.33333333%; max-width: 83.33333333%; } .oneid-col-xs-push-10 { left: 83.33333333%; } .oneid-col-xs-pull-10 { right: 83.33333333%; } .oneid-col-xs-offset-10 { margin-left: 83.33333333%; } .oneid-col-xs-order-10 { -webkit-box-ordinal-group: 11; -ms-flex-order: 10; order: 10; } .oneid-col-xs-9 { display: block; -webkit-box-flex: 0; -ms-flex: 0 0 75%; flex: 0 0 75%; max-width: 75%; } .oneid-col-xs-push-9 { left: 75%; } .oneid-col-xs-pull-9 { right: 75%; } .oneid-col-xs-offset-9 { margin-left: 75%; } .oneid-col-xs-order-9 { -webkit-box-ordinal-group: 10; -ms-flex-order: 9; order: 9; } .oneid-col-xs-8 { display: block; -webkit-box-flex: 0; -ms-flex: 0 0 66.66666667%; flex: 0 0 66.66666667%; max-width: 66.66666667%; } .oneid-col-xs-push-8 { left: 66.66666667%; } .oneid-col-xs-pull-8 { right: 66.66666667%; } .oneid-col-xs-offset-8 { margin-left: 66.66666667%; } .oneid-col-xs-order-8 { -webkit-box-ordinal-group: 9; -ms-flex-order: 8; order: 8; } .oneid-col-xs-7 { display: block; -webkit-box-flex: 0; -ms-flex: 0 0 58.33333333%; flex: 0 0 58.33333333%; max-width: 58.33333333%; } .oneid-col-xs-push-7 { left: 58.33333333%; } .oneid-col-xs-pull-7 { right: 58.33333333%; } .oneid-col-xs-offset-7 { margin-left: 58.33333333%; } .oneid-col-xs-order-7 { -webkit-box-ordinal-group: 8; -ms-flex-order: 7; order: 7; } .oneid-col-xs-6 { display: block; -webkit-box-flex: 0; -ms-flex: 0 0 50%; flex: 0 0 50%; max-width: 50%; } .oneid-col-xs-push-6 { left: 50%; } .oneid-col-xs-pull-6 { right: 50%; } .oneid-col-xs-offset-6 { margin-left: 50%; } .oneid-col-xs-order-6 { -webkit-box-ordinal-group: 7; -ms-flex-order: 6; order: 6; } .oneid-col-xs-5 { display: block; -webkit-box-flex: 0; -ms-flex: 0 0 41.66666667%; flex: 0 0 41.66666667%; max-width: 41.66666667%; } .oneid-col-xs-push-5 { left: 41.66666667%; } .oneid-col-xs-pull-5 { right: 41.66666667%; } .oneid-col-xs-offset-5 { margin-left: 41.66666667%; } .oneid-col-xs-order-5 { -webkit-box-ordinal-group: 6; -ms-flex-order: 5; order: 5; } .oneid-col-xs-4 { display: block; -webkit-box-flex: 0; -ms-flex: 0 0 33.33333333%; flex: 0 0 33.33333333%; max-width: 33.33333333%; } .oneid-col-xs-push-4 { left: 33.33333333%; } .oneid-col-xs-pull-4 { right: 33.33333333%; } .oneid-col-xs-offset-4 { margin-left: 33.33333333%; } .oneid-col-xs-order-4 { -webkit-box-ordinal-group: 5; -ms-flex-order: 4; order: 4; } .oneid-col-xs-3 { display: block; -webkit-box-flex: 0; -ms-flex: 0 0 25%; flex: 0 0 25%; max-width: 25%; } .oneid-col-xs-push-3 { left: 25%; } .oneid-col-xs-pull-3 { right: 25%; } .oneid-col-xs-offset-3 { margin-left: 25%; } .oneid-col-xs-order-3 { -webkit-box-ordinal-group: 4; -ms-flex-order: 3; order: 3; } .oneid-col-xs-2 { display: block; -webkit-box-flex: 0; -ms-flex: 0 0 16.66666667%; flex: 0 0 16.66666667%; max-width: 16.66666667%; } .oneid-col-xs-push-2 { left: 16.66666667%; } .oneid-col-xs-pull-2 { right: 16.66666667%; } .oneid-col-xs-offset-2 { margin-left: 16.66666667%; } .oneid-col-xs-order-2 { -webkit-box-ordinal-group: 3; -ms-flex-order: 2; order: 2; } .oneid-col-xs-1 { display: block; -webkit-box-flex: 0; -ms-flex: 0 0 8.33333333%; flex: 0 0 8.33333333%; max-width: 8.33333333%; } .oneid-col-xs-push-1 { left: 8.33333333%; } .oneid-col-xs-pull-1 { right: 8.33333333%; } .oneid-col-xs-offset-1 { margin-left: 8.33333333%; } .oneid-col-xs-order-1 { -webkit-box-ordinal-group: 2; -ms-flex-order: 1; order: 1; } .oneid-col-xs-0 { display: none; } .oneid-col-push-0 { left: auto; } .oneid-col-pull-0 { right: auto; } .oneid-col-xs-push-0 { left: auto; } .oneid-col-xs-pull-0 { right: auto; } .oneid-col-xs-offset-0 { margin-left: 0; } .oneid-col-xs-order-0 { -webkit-box-ordinal-group: 1; -ms-flex-order: 0; order: 0; } @media (min-width: 768px) { .oneid-col-sm-12 { display: block; -webkit-box-flex: 0; -ms-flex: 0 0 100%; flex: 0 0 100%; max-width: 100%; } .oneid-col-sm-push-12 { left: 100%; } .oneid-col-sm-pull-12 { right: 100%; } .oneid-col-sm-offset-12 { margin-left: 100%; } .oneid-col-sm-order-12 { -webkit-box-ordinal-group: 13; -ms-flex-order: 12; order: 12; } .oneid-col-sm-11 { display: block; -webkit-box-flex: 0; -ms-flex: 0 0 91.66666667%; flex: 0 0 91.66666667%; max-width: 91.66666667%; } .oneid-col-sm-push-11 { left: 91.66666667%; } .oneid-col-sm-pull-11 { right: 91.66666667%; } .oneid-col-sm-offset-11 { margin-left: 91.66666667%; } .oneid-col-sm-order-11 { -webkit-box-ordinal-group: 12; -ms-flex-order: 11; order: 11; } .oneid-col-sm-10 { display: block; -webkit-box-flex: 0; -ms-flex: 0 0 83.33333333%; flex: 0 0 83.33333333%; max-width: 83.33333333%; } .oneid-col-sm-push-10 { left: 83.33333333%; } .oneid-col-sm-pull-10 { right: 83.33333333%; } .oneid-col-sm-offset-10 { margin-left: 83.33333333%; } .oneid-col-sm-order-10 { -webkit-box-ordinal-group: 11; -ms-flex-order: 10; order: 10; } .oneid-col-sm-9 { display: block; -webkit-box-flex: 0; -ms-flex: 0 0 75%; flex: 0 0 75%; max-width: 75%; } .oneid-col-sm-push-9 { left: 75%; } .oneid-col-sm-pull-9 { right: 75%; } .oneid-col-sm-offset-9 { margin-left: 75%; } .oneid-col-sm-order-9 { -webkit-box-ordinal-group: 10; -ms-flex-order: 9; order: 9; } .oneid-col-sm-8 { display: block; -webkit-box-flex: 0; -ms-flex: 0 0 66.66666667%; flex: 0 0 66.66666667%; max-width: 66.66666667%; } .oneid-col-sm-push-8 { left: 66.66666667%; } .oneid-col-sm-pull-8 { right: 66.66666667%; } .oneid-col-sm-offset-8 { margin-left: 66.66666667%; } .oneid-col-sm-order-8 { -webkit-box-ordinal-group: 9; -ms-flex-order: 8; order: 8; } .oneid-col-sm-7 { display: block; -webkit-box-flex: 0; -ms-flex: 0 0 58.33333333%; flex: 0 0 58.33333333%; max-width: 58.33333333%; } .oneid-col-sm-push-7 { left: 58.33333333%; } .oneid-col-sm-pull-7 { right: 58.33333333%; } .oneid-col-sm-offset-7 { margin-left: 58.33333333%; } .oneid-col-sm-order-7 { -webkit-box-ordinal-group: 8; -ms-flex-order: 7; order: 7; } .oneid-col-sm-6 { display: block; -webkit-box-flex: 0; -ms-flex: 0 0 50%; flex: 0 0 50%; max-width: 50%; } .oneid-col-sm-push-6 { left: 50%; } .oneid-col-sm-pull-6 { right: 50%; } .oneid-col-sm-offset-6 { margin-left: 50%; } .oneid-col-sm-order-6 { -webkit-box-ordinal-group: 7; -ms-flex-order: 6; order: 6; } .oneid-col-sm-5 { display: block; -webkit-box-flex: 0; -ms-flex: 0 0 41.66666667%; flex: 0 0 41.66666667%; max-width: 41.66666667%; } .oneid-col-sm-push-5 { left: 41.66666667%; } .oneid-col-sm-pull-5 { right: 41.66666667%; } .oneid-col-sm-offset-5 { margin-left: 41.66666667%; } .oneid-col-sm-order-5 { -webkit-box-ordinal-group: 6; -ms-flex-order: 5; order: 5; } .oneid-col-sm-4 { display: block; -webkit-box-flex: 0; -ms-flex: 0 0 33.33333333%; flex: 0 0 33.33333333%; max-width: 33.33333333%; } .oneid-col-sm-push-4 { left: 33.33333333%; } .oneid-col-sm-pull-4 { right: 33.33333333%; } .oneid-col-sm-offset-4 { margin-left: 33.33333333%; } .oneid-col-sm-order-4 { -webkit-box-ordinal-group: 5; -ms-flex-order: 4; order: 4; } .oneid-col-sm-3 { display: block; -webkit-box-flex: 0; -ms-flex: 0 0 25%; flex: 0 0 25%; max-width: 25%; } .oneid-col-sm-push-3 { left: 25%; } .oneid-col-sm-pull-3 { right: 25%; } .oneid-col-sm-offset-3 { margin-left: 25%; } .oneid-col-sm-order-3 { -webkit-box-ordinal-group: 4; -ms-flex-order: 3; order: 3; } .oneid-col-sm-2 { display: block; -webkit-box-flex: 0; -ms-flex: 0 0 16.66666667%; flex: 0 0 16.66666667%; max-width: 16.66666667%; } .oneid-col-sm-push-2 { left: 16.66666667%; } .oneid-col-sm-pull-2 { right: 16.66666667%; } .oneid-col-sm-offset-2 { margin-left: 16.66666667%; } .oneid-col-sm-order-2 { -webkit-box-ordinal-group: 3; -ms-flex-order: 2; order: 2; } .oneid-col-sm-1 { display: block; -webkit-box-flex: 0; -ms-flex: 0 0 8.33333333%; flex: 0 0 8.33333333%; max-width: 8.33333333%; } .oneid-col-sm-push-1 { left: 8.33333333%; } .oneid-col-sm-pull-1 { right: 8.33333333%; } .oneid-col-sm-offset-1 { margin-left: 8.33333333%; } .oneid-col-sm-order-1 { -webkit-box-ordinal-group: 2; -ms-flex-order: 1; order: 1; } .oneid-col-sm-0 { display: none; } .oneid-col-push-0 { left: auto; } .oneid-col-pull-0 { right: auto; } .oneid-col-sm-push-0 { left: auto; } .oneid-col-sm-pull-0 { right: auto; } .oneid-col-sm-offset-0 { margin-left: 0; } .oneid-col-sm-order-0 { -webkit-box-ordinal-group: 1; -ms-flex-order: 0; order: 0; } } @media (min-width: 992px) { .oneid-col-md-12 { display: block; -webkit-box-flex: 0; -ms-flex: 0 0 100%; flex: 0 0 100%; max-width: 100%; } .oneid-col-md-push-12 { left: 100%; } .oneid-col-md-pull-12 { right: 100%; } .oneid-col-md-offset-12 { margin-left: 100%; } .oneid-col-md-order-12 { -webkit-box-ordinal-group: 13; -ms-flex-order: 12; order: 12; } .oneid-col-md-11 { display: block; -webkit-box-flex: 0; -ms-flex: 0 0 91.66666667%; flex: 0 0 91.66666667%; max-width: 91.66666667%; } .oneid-col-md-push-11 { left: 91.66666667%; } .oneid-col-md-pull-11 { right: 91.66666667%; } .oneid-col-md-offset-11 { margin-left: 91.66666667%; } .oneid-col-md-order-11 { -webkit-box-ordinal-group: 12; -ms-flex-order: 11; order: 11; } .oneid-col-md-10 { display: block; -webkit-box-flex: 0; -ms-flex: 0 0 83.33333333%; flex: 0 0 83.33333333%; max-width: 83.33333333%; } .oneid-col-md-push-10 { left: 83.33333333%; } .oneid-col-md-pull-10 { right: 83.33333333%; } .oneid-col-md-offset-10 { margin-left: 83.33333333%; } .oneid-col-md-order-10 { -webkit-box-ordinal-group: 11; -ms-flex-order: 10; order: 10; } .oneid-col-md-9 { display: block; -webkit-box-flex: 0; -ms-flex: 0 0 75%; flex: 0 0 75%; max-width: 75%; } .oneid-col-md-push-9 { left: 75%; } .oneid-col-md-pull-9 { right: 75%; } .oneid-col-md-offset-9 { margin-left: 75%; } .oneid-col-md-order-9 { -webkit-box-ordinal-group: 10; -ms-flex-order: 9; order: 9; } .oneid-col-md-8 { display: block; -webkit-box-flex: 0; -ms-flex: 0 0 66.66666667%; flex: 0 0 66.66666667%; max-width: 66.66666667%; } .oneid-col-md-push-8 { left: 66.66666667%; } .oneid-col-md-pull-8 { right: 66.66666667%; } .oneid-col-md-offset-8 { margin-left: 66.66666667%; } .oneid-col-md-order-8 { -webkit-box-ordinal-group: 9; -ms-flex-order: 8; order: 8; } .oneid-col-md-7 { display: block; -webkit-box-flex: 0; -ms-flex: 0 0 58.33333333%; flex: 0 0 58.33333333%; max-width: 58.33333333%; } .oneid-col-md-push-7 { left: 58.33333333%; } .oneid-col-md-pull-7 { right: 58.33333333%; } .oneid-col-md-offset-7 { margin-left: 58.33333333%; } .oneid-col-md-order-7 { -webkit-box-ordinal-group: 8; -ms-flex-order: 7; order: 7; } .oneid-col-md-6 { display: block; -webkit-box-flex: 0; -ms-flex: 0 0 50%; flex: 0 0 50%; max-width: 50%; } .oneid-col-md-push-6 { left: 50%; } .oneid-col-md-pull-6 { right: 50%; } .oneid-col-md-offset-6 { margin-left: 50%; } .oneid-col-md-order-6 { -webkit-box-ordinal-group: 7; -ms-flex-order: 6; order: 6; } .oneid-col-md-5 { display: block; -webkit-box-flex: 0; -ms-flex: 0 0 41.66666667%; flex: 0 0 41.66666667%; max-width: 41.66666667%; } .oneid-col-md-push-5 { left: 41.66666667%; } .oneid-col-md-pull-5 { right: 41.66666667%; } .oneid-col-md-offset-5 { margin-left: 41.66666667%; } .oneid-col-md-order-5 { -webkit-box-ordinal-group: 6; -ms-flex-order: 5; order: 5; } .oneid-col-md-4 { display: block; -webkit-box-flex: 0; -ms-flex: 0 0 33.33333333%; flex: 0 0 33.33333333%; max-width: 33.33333333%; } .oneid-col-md-push-4 { left: 33.33333333%; } .oneid-col-md-pull-4 { right: 33.33333333%; } .oneid-col-md-offset-4 { margin-left: 33.33333333%; } .oneid-col-md-order-4 { -webkit-box-ordinal-group: 5; -ms-flex-order: 4; order: 4; } .oneid-col-md-3 { display: block; -webkit-box-flex: 0; -ms-flex: 0 0 25%; flex: 0 0 25%; max-width: 25%; } .oneid-col-md-push-3 { left: 25%; } .oneid-col-md-pull-3 { right: 25%; } .oneid-col-md-offset-3 { margin-left: 25%; } .oneid-col-md-order-3 { -webkit-box-ordinal-group: 4; -ms-flex-order: 3; order: 3; } .oneid-col-md-2 { display: block; -webkit-box-flex: 0; -ms-flex: 0 0 16.66666667%; flex: 0 0 16.66666667%; max-width: 16.66666667%; } .oneid-col-md-push-2 { left: 16.66666667%; } .oneid-col-md-pull-2 { right: 16.66666667%; } .oneid-col-md-offset-2 { margin-left: 16.66666667%; } .oneid-col-md-order-2 { -webkit-box-ordinal-group: 3; -ms-flex-order: 2; order: 2; } .oneid-col-md-1 { display: block; -webkit-box-flex: 0; -ms-flex: 0 0 8.33333333%; flex: 0 0 8.33333333%; max-width: 8.33333333%; } .oneid-col-md-push-1 { left: 8.33333333%; } .oneid-col-md-pull-1 { right: 8.33333333%; } .oneid-col-md-offset-1 { margin-left: 8.33333333%; } .oneid-col-md-order-1 { -webkit-box-ordinal-group: 2; -ms-flex-order: 1; order: 1; } .oneid-col-md-0 { display: none; } .oneid-col-push-0 { left: auto; } .oneid-col-pull-0 { right: auto; } .oneid-col-md-push-0 { left: auto; } .oneid-col-md-pull-0 { right: auto; } .oneid-col-md-offset-0 { margin-left: 0; } .oneid-col-md-order-0 { -webkit-box-ordinal-group: 1; -ms-flex-order: 0; order: 0; } } @media (min-width: 1200px) { .oneid-col-lg-12 { display: block; -webkit-box-flex: 0; -ms-flex: 0 0 100%; flex: 0 0 100%; max-width: 100%; } .oneid-col-lg-push-12 { left: 100%; } .oneid-col-lg-pull-12 { right: 100%; } .oneid-col-lg-offset-12 { margin-left: 100%; } .oneid-col-lg-order-12 { -webkit-box-ordinal-group: 13; -ms-flex-order: 12; order: 12; } .oneid-col-lg-11 { display: block; -webkit-box-flex: 0; -ms-flex: 0 0 91.66666667%; flex: 0 0 91.66666667%; max-width: 91.66666667%; } .oneid-col-lg-push-11 { left: 91.66666667%; } .oneid-col-lg-pull-11 { right: 91.66666667%; } .oneid-col-lg-offset-11 { margin-left: 91.66666667%; } .oneid-col-lg-order-11 { -webkit-box-ordinal-group: 12; -ms-flex-order: 11; order: 11; } .oneid-col-lg-10 { display: block; -webkit-box-flex: 0; -ms-flex: 0 0 83.33333333%; flex: 0 0 83.33333333%; max-width: 83.33333333%; } .oneid-col-lg-push-10 { left: 83.33333333%; } .oneid-col-lg-pull-10 { right: 83.33333333%; } .oneid-col-lg-offset-10 { margin-left: 83.33333333%; } .oneid-col-lg-order-10 { -webkit-box-ordinal-group: 11; -ms-flex-order: 10; order: 10; } .oneid-col-lg-9 { display: block; -webkit-box-flex: 0; -ms-flex: 0 0 75%; flex: 0 0 75%; max-width: 75%; } .oneid-col-lg-push-9 { left: 75%; } .oneid-col-lg-pull-9 { right: 75%; } .oneid-col-lg-offset-9 { margin-left: 75%; } .oneid-col-lg-order-9 { -webkit-box-ordinal-group: 10; -ms-flex-order: 9; order: 9; } .oneid-col-lg-8 { display: block; -webkit-box-flex: 0; -ms-flex: 0 0 66.66666667%; flex: 0 0 66.66666667%; max-width: 66.66666667%; } .oneid-col-lg-push-8 { left: 66.66666667%; } .oneid-col-lg-pull-8 { right: 66.66666667%; } .oneid-col-lg-offset-8 { margin-left: 66.66666667%; } .oneid-col-lg-order-8 { -webkit-box-ordinal-group: 9; -ms-flex-order: 8; order: 8; } .oneid-col-lg-7 { display: block; -webkit-box-flex: 0; -ms-flex: 0 0 58.33333333%; flex: 0 0 58.33333333%; max-width: 58.33333333%; } .oneid-col-lg-push-7 { left: 58.33333333%; } .oneid-col-lg-pull-7 { right: 58.33333333%; } .oneid-col-lg-offset-7 { margin-left: 58.33333333%; } .oneid-col-lg-order-7 { -webkit-box-ordinal-group: 8; -ms-flex-order: 7; order: 7; } .oneid-col-lg-6 { display: block; -webkit-box-flex: 0; -ms-flex: 0 0 50%; flex: 0 0 50%; max-width: 50%; } .oneid-col-lg-push-6 { left: 50%; } .oneid-col-lg-pull-6 { right: 50%; } .oneid-col-lg-offset-6 { margin-left: 50%; } .oneid-col-lg-order-6 { -webkit-box-ordinal-group: 7; -ms-flex-order: 6; order: 6; } .oneid-col-lg-5 { display: block; -webkit-box-flex: 0; -ms-flex: 0 0 41.66666667%; flex: 0 0 41.66666667%; max-width: 41.66666667%; } .oneid-col-lg-push-5 { left: 41.66666667%; } .oneid-col-lg-pull-5 { right: 41.66666667%; } .oneid-col-lg-offset-5 { margin-left: 41.66666667%; } .oneid-col-lg-order-5 { -webkit-box-ordinal-group: 6; -ms-flex-order: 5; order: 5; } .oneid-col-lg-4 { display: block; -webkit-box-flex: 0; -ms-flex: 0 0 33.33333333%; flex: 0 0 33.33333333%; max-width: 33.33333333%; } .oneid-col-lg-push-4 { left: 33.33333333%; } .oneid-col-lg-pull-4 { right: 33.33333333%; } .oneid-col-lg-offset-4 { margin-left: 33.33333333%; } .oneid-col-lg-order-4 { -webkit-box-ordinal-group: 5; -ms-flex-order: 4; order: 4; } .oneid-col-lg-3 { display: block; -webkit-box-flex: 0; -ms-flex: 0 0 25%; flex: 0 0 25%; max-width: 25%; } .oneid-col-lg-push-3 { left: 25%; } .oneid-col-lg-pull-3 { right: 25%; } .oneid-col-lg-offset-3 { margin-left: 25%; } .oneid-col-lg-order-3 { -webkit-box-ordinal-group: 4; -ms-flex-order: 3; order: 3; } .oneid-col-lg-2 { display: block; -webkit-box-flex: 0; -ms-flex: 0 0 16.66666667%; flex: 0 0 16.66666667%; max-width: 16.66666667%; } .oneid-col-lg-push-2 { left: 16.66666667%; } .oneid-col-lg-pull-2 { right: 16.66666667%; } .oneid-col-lg-offset-2 { margin-left: 16.66666667%; } .oneid-col-lg-order-2 { -webkit-box-ordinal-group: 3; -ms-flex-order: 2; order: 2; } .oneid-col-lg-1 { display: block; -webkit-box-flex: 0; -ms-flex: 0 0 8.33333333%; flex: 0 0 8.33333333%; max-width: 8.33333333%; } .oneid-col-lg-push-1 { left: 8.33333333%; } .oneid-col-lg-pull-1 { right: 8.33333333%; } .oneid-col-lg-offset-1 { margin-left: 8.33333333%; } .oneid-col-lg-order-1 { -webkit-box-ordinal-group: 2; -ms-flex-order: 1; order: 1; } .oneid-col-lg-0 { display: none; } .oneid-col-push-0 { left: auto; } .oneid-col-pull-0 { right: auto; } .oneid-col-lg-push-0 { left: auto; } .oneid-col-lg-pull-0 { right: auto; } .oneid-col-lg-offset-0 { margin-left: 0; } .oneid-col-lg-order-0 { -webkit-box-ordinal-group: 1; -ms-flex-order: 0; order: 0; } } @media (min-width: 1400px) { .oneid-col-xl-12 { display: block; -webkit-box-flex: 0; -ms-flex: 0 0 100%; flex: 0 0 100%; max-width: 100%; } .oneid-col-xl-push-12 { left: 100%; } .oneid-col-xl-pull-12 { right: 100%; } .oneid-col-xl-offset-12 { margin-left: 100%; } .oneid-col-xl-order-12 { -webkit-box-ordinal-group: 13; -ms-flex-order: 12; order: 12; } .oneid-col-xl-11 { display: block; -webkit-box-flex: 0; -ms-flex: 0 0 91.66666667%; flex: 0 0 91.66666667%; max-width: 91.66666667%; } .oneid-col-xl-push-11 { left: 91.66666667%; } .oneid-col-xl-pull-11 { right: 91.66666667%; } .oneid-col-xl-offset-11 { margin-left: 91.66666667%; } .oneid-col-xl-order-11 { -webkit-box-ordinal-group: 12; -ms-flex-order: 11; order: 11; } .oneid-col-xl-10 { display: block; -webkit-box-flex: 0; -ms-flex: 0 0 83.33333333%; flex: 0 0 83.33333333%; max-width: 83.33333333%; } .oneid-col-xl-push-10 { left: 83.33333333%; } .oneid-col-xl-pull-10 { right: 83.33333333%; } .oneid-col-xl-offset-10 { margin-left: 83.33333333%; } .oneid-col-xl-order-10 { -webkit-box-ordinal-group: 11; -ms-flex-order: 10; order: 10; } .oneid-col-xl-9 { display: block; -webkit-box-flex: 0; -ms-flex: 0 0 75%; flex: 0 0 75%; max-width: 75%; } .oneid-col-xl-push-9 { left: 75%; } .oneid-col-xl-pull-9 { right: 75%; } .oneid-col-xl-offset-9 { margin-left: 75%; } .oneid-col-xl-order-9 { -webkit-box-ordinal-group: 10; -ms-flex-order: 9; order: 9; } .oneid-col-xl-8 { display: block; -webkit-box-flex: 0; -ms-flex: 0 0 66.66666667%; flex: 0 0 66.66666667%; max-width: 66.66666667%; } .oneid-col-xl-push-8 { left: 66.66666667%; } .oneid-col-xl-pull-8 { right: 66.66666667%; } .oneid-col-xl-offset-8 { margin-left: 66.66666667%; } .oneid-col-xl-order-8 { -webkit-box-ordinal-group: 9; -ms-flex-order: 8; order: 8; } .oneid-col-xl-7 { display: block; -webkit-box-flex: 0; -ms-flex: 0 0 58.33333333%; flex: 0 0 58.33333333%; max-width: 58.33333333%; } .oneid-col-xl-push-7 { left: 58.33333333%; } .oneid-col-xl-pull-7 { right: 58.33333333%; } .oneid-col-xl-offset-7 { margin-left: 58.33333333%; } .oneid-col-xl-order-7 { -webkit-box-ordinal-group: 8; -ms-flex-order: 7; order: 7; } .oneid-col-xl-6 { display: block; -webkit-box-flex: 0; -ms-flex: 0 0 50%; flex: 0 0 50%; max-width: 50%; } .oneid-col-xl-push-6 { left: 50%; } .oneid-col-xl-pull-6 { right: 50%; } .oneid-col-xl-offset-6 { margin-left: 50%; } .oneid-col-xl-order-6 { -webkit-box-ordinal-group: 7; -ms-flex-order: 6; order: 6; } .oneid-col-xl-5 { display: block; -webkit-box-flex: 0; -ms-flex: 0 0 41.66666667%; flex: 0 0 41.66666667%; max-width: 41.66666667%; } .oneid-col-xl-push-5 { left: 41.66666667%; } .oneid-col-xl-pull-5 { right: 41.66666667%; } .oneid-col-xl-offset-5 { margin-left: 41.66666667%; } .oneid-col-xl-order-5 { -webkit-box-ordinal-group: 6; -ms-flex-order: 5; order: 5; } .oneid-col-xl-4 { display: block; -webkit-box-flex: 0; -ms-flex: 0 0 33.33333333%; flex: 0 0 33.33333333%; max-width: 33.33333333%; } .oneid-col-xl-push-4 { left: 33.33333333%; } .oneid-col-xl-pull-4 { right: 33.33333333%; } .oneid-col-xl-offset-4 { margin-left: 33.33333333%; } .oneid-col-xl-order-4 { -webkit-box-ordinal-group: 5; -ms-flex-order: 4; order: 4; } .oneid-col-xl-3 { display: block; -webkit-box-flex: 0; -ms-flex: 0 0 25%; flex: 0 0 25%; max-width: 25%; } .oneid-col-xl-push-3 { left: 25%; } .oneid-col-xl-pull-3 { right: 25%; } .oneid-col-xl-offset-3 { margin-left: 25%; } .oneid-col-xl-order-3 { -webkit-box-ordinal-group: 4; -ms-flex-order: 3; order: 3; } .oneid-col-xl-2 { display: block; -webkit-box-flex: 0; -ms-flex: 0 0 16.66666667%; flex: 0 0 16.66666667%; max-width: 16.66666667%; } .oneid-col-xl-push-2 { left: 16.66666667%; } .oneid-col-xl-pull-2 { right: 16.66666667%; } .oneid-col-xl-offset-2 { margin-left: 16.66666667%; } .oneid-col-xl-order-2 { -webkit-box-ordinal-group: 3; -ms-flex-order: 2; order: 2; } .oneid-col-xl-1 { display: block; -webkit-box-flex: 0; -ms-flex: 0 0 8.33333333%; flex: 0 0 8.33333333%; max-width: 8.33333333%; } .oneid-col-xl-push-1 { left: 8.33333333%; } .oneid-col-xl-pull-1 { right: 8.33333333%; } .oneid-col-xl-offset-1 { margin-left: 8.33333333%; } .oneid-col-xl-order-1 { -webkit-box-ordinal-group: 2; -ms-flex-order: 1; order: 1; } .oneid-col-xl-0 { display: none; } .oneid-col-push-0 { left: auto; } .oneid-col-pull-0 { right: auto; } .oneid-col-xl-push-0 { left: auto; } .oneid-col-xl-pull-0 { right: auto; } .oneid-col-xl-offset-0 { margin-left: 0; } .oneid-col-xl-order-0 { -webkit-box-ordinal-group: 1; -ms-flex-order: 0; order: 0; } } @media (min-width: 1880px) { .oneid-col-xxl-12 { display: block; -webkit-box-flex: 0; -ms-flex: 0 0 100%; flex: 0 0 100%; max-width: 100%; } .oneid-col-xxl-push-12 { left: 100%; } .oneid-col-xxl-pull-12 { right: 100%; } .oneid-col-xxl-offset-12 { margin-left: 100%; } .oneid-col-xxl-order-12 { -webkit-box-ordinal-group: 13; -ms-flex-order: 12; order: 12; } .oneid-col-xxl-11 { display: block; -webkit-box-flex: 0; -ms-flex: 0 0 91.66666667%; flex: 0 0 91.66666667%; max-width: 91.66666667%; } .oneid-col-xxl-push-11 { left: 91.66666667%; } .oneid-col-xxl-pull-11 { right: 91.66666667%; } .oneid-col-xxl-offset-11 { margin-left: 91.66666667%; } .oneid-col-xxl-order-11 { -webkit-box-ordinal-group: 12; -ms-flex-order: 11; order: 11; } .oneid-col-xxl-10 { display: block; -webkit-box-flex: 0; -ms-flex: 0 0 83.33333333%; flex: 0 0 83.33333333%; max-width: 83.33333333%; } .oneid-col-xxl-push-10 { left: 83.33333333%; } .oneid-col-xxl-pull-10 { right: 83.33333333%; } .oneid-col-xxl-offset-10 { margin-left: 83.33333333%; } .oneid-col-xxl-order-10 { -webkit-box-ordinal-group: 11; -ms-flex-order: 10; order: 10; } .oneid-col-xxl-9 { display: block; -webkit-box-flex: 0; -ms-flex: 0 0 75%; flex: 0 0 75%; max-width: 75%; } .oneid-col-xxl-push-9 { left: 75%; } .oneid-col-xxl-pull-9 { right: 75%; } .oneid-col-xxl-offset-9 { margin-left: 75%; } .oneid-col-xxl-order-9 { -webkit-box-ordinal-group: 10; -ms-flex-order: 9; order: 9; } .oneid-col-xxl-8 { display: block; -webkit-box-flex: 0; -ms-flex: 0 0 66.66666667%; flex: 0 0 66.66666667%; max-width: 66.66666667%; } .oneid-col-xxl-push-8 { left: 66.66666667%; } .oneid-col-xxl-pull-8 { right: 66.66666667%; } .oneid-col-xxl-offset-8 { margin-left: 66.66666667%; } .oneid-col-xxl-order-8 { -webkit-box-ordinal-group: 9; -ms-flex-order: 8; order: 8; } .oneid-col-xxl-7 { display: block; -webkit-box-flex: 0; -ms-flex: 0 0 58.33333333%; flex: 0 0 58.33333333%; max-width: 58.33333333%; } .oneid-col-xxl-push-7 { left: 58.33333333%; } .oneid-col-xxl-pull-7 { right: 58.33333333%; } .oneid-col-xxl-offset-7 { margin-left: 58.33333333%; } .oneid-col-xxl-order-7 { -webkit-box-ordinal-group: 8; -ms-flex-order: 7; order: 7; } .oneid-col-xxl-6 { display: block; -webkit-box-flex: 0; -ms-flex: 0 0 50%; flex: 0 0 50%; max-width: 50%; } .oneid-col-xxl-push-6 { left: 50%; } .oneid-col-xxl-pull-6 { right: 50%; } .oneid-col-xxl-offset-6 { margin-left: 50%; } .oneid-col-xxl-order-6 { -webkit-box-ordinal-group: 7; -ms-flex-order: 6; order: 6; } .oneid-col-xxl-5 { display: block; -webkit-box-flex: 0; -ms-flex: 0 0 41.66666667%; flex: 0 0 41.66666667%; max-width: 41.66666667%; } .oneid-col-xxl-push-5 { left: 41.66666667%; } .oneid-col-xxl-pull-5 { right: 41.66666667%; } .oneid-col-xxl-offset-5 { margin-left: 41.66666667%; } .oneid-col-xxl-order-5 { -webkit-box-ordinal-group: 6; -ms-flex-order: 5; order: 5; } .oneid-col-xxl-4 { display: block; -webkit-box-flex: 0; -ms-flex: 0 0 33.33333333%; flex: 0 0 33.33333333%; max-width: 33.33333333%; } .oneid-col-xxl-push-4 { left: 33.33333333%; } .oneid-col-xxl-pull-4 { right: 33.33333333%; } .oneid-col-xxl-offset-4 { margin-left: 33.33333333%; } .oneid-col-xxl-order-4 { -webkit-box-ordinal-group: 5; -ms-flex-order: 4; order: 4; } .oneid-col-xxl-3 { display: block; -webkit-box-flex: 0; -ms-flex: 0 0 25%; flex: 0 0 25%; max-width: 25%; } .oneid-col-xxl-push-3 { left: 25%; } .oneid-col-xxl-pull-3 { right: 25%; } .oneid-col-xxl-offset-3 { margin-left: 25%; } .oneid-col-xxl-order-3 { -webkit-box-ordinal-group: 4; -ms-flex-order: 3; order: 3; } .oneid-col-xxl-2 { display: block; -webkit-box-flex: 0; -ms-flex: 0 0 16.66666667%; flex: 0 0 16.66666667%; max-width: 16.66666667%; } .oneid-col-xxl-push-2 { left: 16.66666667%; } .oneid-col-xxl-pull-2 { right: 16.66666667%; } .oneid-col-xxl-offset-2 { margin-left: 16.66666667%; } .oneid-col-xxl-order-2 { -webkit-box-ordinal-group: 3; -ms-flex-order: 2; order: 2; } .oneid-col-xxl-1 { display: block; -webkit-box-flex: 0; -ms-flex: 0 0 8.33333333%; flex: 0 0 8.33333333%; max-width: 8.33333333%; } .oneid-col-xxl-push-1 { left: 8.33333333%; } .oneid-col-xxl-pull-1 { right: 8.33333333%; } .oneid-col-xxl-offset-1 { margin-left: 8.33333333%; } .oneid-col-xxl-order-1 { -webkit-box-ordinal-group: 2; -ms-flex-order: 1; order: 1; } .oneid-col-xxl-0 { display: none; } .oneid-col-push-0 { left: auto; } .oneid-col-pull-0 { right: auto; } .oneid-col-xxl-push-0 { left: auto; } .oneid-col-xxl-pull-0 { right: auto; } .oneid-col-xxl-offset-0 { margin-left: 0; } .oneid-col-xxl-order-0 { -webkit-box-ordinal-group: 1; -ms-flex-order: 0; order: 0; } } @-webkit-keyframes t-fade-in { from { opacity: 0; } to { opacity: 1; } } @keyframes t-fade-in { from { opacity: 0; } to { opacity: 1; } } @-webkit-keyframes t-fade-out { from { opacity: 1; } to { opacity: 0; } } @keyframes t-fade-out { from { opacity: 1; } to { opacity: 0; } } @-webkit-keyframes t-spin { from { -webkit-transform: rotate(0deg); transform: rotate(0deg); } to { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @keyframes t-spin { from { -webkit-transform: rotate(0deg); transform: rotate(0deg); } to { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } .oneid-icon-loading { -webkit-animation: t-spin 1s linear infinite; animation: t-spin 1s linear infinite; } @-webkit-keyframes t-zoom-out { from { -webkit-transform: scale(0.2); transform: scale(0.2); } to { -webkit-transform: scale(1); transform: scale(1); } } @keyframes t-zoom-out { from { -webkit-transform: scale(0.2); transform: scale(0.2); } to { -webkit-transform: scale(1); transform: scale(1); } } .oneid-loading { font: var(--td-font-body-medium); color: var(--td-text-color-primary); -webkit-box-sizing: border-box; box-sizing: border-box; margin: 0; padding: 0; list-style: none; position: relative; color: var(--td-brand-color); font-size: var(--td-comp-size-l); } .oneid-loading--lock { overflow: hidden; } .oneid-loading.oneid-size-s { font-size: var(--td-comp-size-xxxs); } .oneid-loading.oneid-size-l { font-size: var(--td-comp-size-xxxl); } .oneid-loading__parent--relative { position: relative !important; } .oneid-loading__fullscreen { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 3500; } .oneid-loading--center { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; vertical-align: middle; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .oneid-loading__content { position: absolute; left: 48%; top: 20%; } .oneid-loading--inherit-color { color: inherit; } .oneid-loading__parent { position: relative; } .oneid-loading__overlay { background-color: var(--td-mask-disabled); } /** 仅用于作为包裹元素时 */ .oneid-loading--full { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 3500; } .oneid-loading--hidden { visibility: hidden; } .oneid-loading--visible { visibility: visible; } .oneid-loading__text { width: auto; display: inline-block; vertical-align: middle; font: var(--td-font-body-medium); margin-left: var(--td-comp-margin-xs); } .oneid-loading__gradient { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; vertical-align: middle; } .oneid-loading__gradient-conic { width: 100%; height: 100%; border-radius: var(--td-radius-circle); /* stylelint-disable-next-line color-no-hex */ background: conic-gradient(from 90deg at 50% 50%, #fff 0deg, currentcolor 360deg); /* stylelint-disable-next-line */ -webkit-mask: radial-gradient(transparent calc(50% - 0.5px), #fff 50%); /* stylelint-disable-next-line color-no-hex */ mask: radial-gradient(transparent calc(50% - 0.5px), #fff 50%); } .content-placement-top .oneid-popup[data-popper-placement^=top] .oneid-popup__content { margin-bottom: var(--td-comp-margin-s); } .content-placement-top .oneid-popup[data-popper-placement^=top] .oneid-popup__content--arrow { margin-bottom: var(--td-comp-margin-l); } .content-placement-bottom .oneid-popup[data-popper-placement^=bottom] .oneid-popup__content { margin-top: var(--td-comp-margin-s); } .content-placement-bottom .oneid-popup[data-popper-placement^=bottom] .oneid-popup__content--arrow { margin-top: var(--td-comp-margin-l); } .content-placement-left .oneid-popup[data-popper-placement^=left] .oneid-popup__content { margin-right: var(--td-comp-margin-s); } .content-placement-left .oneid-popup[data-popper-placement^=left] .oneid-popup__content--arrow { margin-right: var(--td-comp-margin-l); } .content-placement-left .oneid-popup[data-popper-placement^=left] .oneid-popup__content--text { max-width: 480px; } .content-placement-right .oneid-popup[data-popper-placement^=right] .oneid-popup__content { margin-left: var(--td-comp-margin-s); } .content-placement-right .oneid-popup[data-popper-placement^=right] .oneid-popup__content--arrow { margin-left: var(--td-comp-margin-l); } .content-placement-right .oneid-popup[data-popper-placement^=right] .oneid-popup__content--text { max-width: 480px; } .oneid-popup { font: var(--td-font-body-medium); -webkit-box-sizing: border-box; box-sizing: border-box; margin: 0; padding: 0; list-style: none; color: var(--td-text-color-primary); display: inline-block; z-index: 5500; } .oneid-popup__content { position: relative; background: var(--td-bg-color-container); -webkit-box-shadow: var(--td-shadow-2), var(--td-shadow-inset-top), var(--td-shadow-inset-right), var(--td-shadow-inset-bottom), var(--td-shadow-inset-left); box-shadow: var(--td-shadow-2), var(--td-shadow-inset-top), var(--td-shadow-inset-right), var(--td-shadow-inset-bottom), var(--td-shadow-inset-left); border-radius: var(--td-radius-medium); padding: var(--td-comp-paddingTB-xs) var(--td-comp-paddingLR-s); font-size: var(--td-font-size-body-medium); line-height: var(--td-line-height-body-medium); -webkit-box-sizing: border-box; box-sizing: border-box; word-break: break-all; } .oneid-popup__arrow { position: absolute; z-index: 1; width: 8px; height: 8px; } .oneid-popup__arrow::before { position: absolute; content: ""; width: 8px; height: 8px; -webkit-transform: rotate(45deg); transform: rotate(45deg); background: var(--td-bg-color-container); } .oneid-popup[data-popper-placement^=top] .oneid-popup__content { margin-bottom: var(--td-comp-margin-s); } .oneid-popup[data-popper-placement^=top] .oneid-popup__content--arrow { margin-bottom: var(--td-comp-margin-l); } .oneid-popup[data-popper-placement^=bottom] .oneid-popup__content { margin-top: var(--td-comp-margin-s); } .oneid-popup[data-popper-placement^=bottom] .oneid-popup__content--arrow { margin-top: var(--td-comp-margin-l); } .oneid-popup[data-popper-placement^=left] .oneid-popup__content { margin-right: var(--td-comp-margin-s); } .oneid-popup[data-popper-placement^=left] .oneid-popup__content--arrow { margin-right: var(--td-comp-margin-l); } .oneid-popup[data-popper-placement^=left] .oneid-popup__content--text { max-width: 480px; } .oneid-popup[data-popper-placement^=right] .oneid-popup__content { margin-left: var(--td-comp-margin-s); } .oneid-popup[data-popper-placement^=right] .oneid-popup__content--arrow { margin-left: var(--td-comp-margin-l); } .oneid-popup[data-popper-placement^=right] .oneid-popup__content--text { max-width: 480px; } .oneid-popup[data-popper-placement^=top] .oneid-popup__arrow::before { border-top-left-radius: 100%; -webkit-box-shadow: var(--td-shadow-inset-left), var(--td-shadow-inset-bottom); box-shadow: var(--td-shadow-inset-left), var(--td-shadow-inset-bottom); } .oneid-popup[data-popper-placement=top-start] .oneid-popup__arrow { left: 8px; } .oneid-popup[data-popper-placement=top] .oneid-popup__arrow { left: 50%; margin-left: -4px; } .oneid-popup[data-popper-placement=top-end] .oneid-popup__arrow { left: calc(100% - 16px); } .oneid-popup[data-popper-placement^=bottom] .oneid-popup__arrow { top: -4px; } .oneid-popup[data-popper-placement^=bottom] .oneid-popup__arrow::before { border-bottom-right-radius: 100%; -webkit-box-shadow: var(--td-shadow-inset-top), var(--td-shadow-inset-right); box-shadow: var(--td-shadow-inset-top), var(--td-shadow-inset-right); } .oneid-popup[data-popper-placement=bottom-start] .oneid-popup__arrow { left: 8px; } .oneid-popup[data-popper-placement=bottom] .oneid-popup__arrow { left: 50%; margin-left: -4px; } .oneid-popup[data-popper-placement=bottom-end] .oneid-popup__arrow { left: calc(100% - 16px); } .oneid-popup[data-popper-placement^=left] .oneid-popup__arrow { right: -4px; } .oneid-popup[data-popper-placement^=left] .oneid-popup__arrow::before { -webkit-box-shadow: var(--td-shadow-inset-left), var(--td-shadow-inset-top); box-shadow: var(--td-shadow-inset-left), var(--td-shadow-inset-top); } .oneid-popup[data-popper-placement=left-start] .oneid-popup__arrow { top: 8px; } .oneid-popup[data-popper-placement=left] .oneid-popup__arrow { top: 50%; margin-top: -4px; } .oneid-popup[data-popper-placement=left-end] .oneid-popup__arrow { top: calc(100% - 16px); } .oneid-popup[data-popper-placement^=right] .oneid-popup__arrow { left: -4px; } .oneid-popup[data-popper-placement^=right] .oneid-popup__arrow::before { -webkit-box-shadow: var(--td-shadow-inset-right), var(--td-shadow-inset-bottom); box-shadow: var(--td-shadow-inset-right), var(--td-shadow-inset-bottom); } .oneid-popup[data-popper-placement=right-start] .oneid-popup__arrow { top: 8px; } .oneid-popup[data-popper-placement=right] .oneid-popup__arrow { top: 50%; margin-top: -4px; } .oneid-popup[data-popper-placement=right-end] .oneid-popup__arrow { top: calc(100% - 16px); } .oneid-popup--animation-enter, .oneid-popup--animation-enter-from, .oneid-popup--animation-exiting, .oneid-popup--animation-leave-to { opacity: 0; visibility: hidden; } .oneid-popup--animation-enter-to, .oneid-popup--animation-entering, .oneid-popup--animation-leave-from, .oneid-popup--animation-leave { opacity: 1; visibility: visible; -webkit-transform: none; transform: none; } .oneid-popup--animation-enter-active { -webkit-transition: opacity 0.2s linear; transition: opacity 0.2s linear; } .oneid-popup--animation-leave-active { -webkit-transition: opacity 0.2s cubic-bezier(0, 0, 0.15, 1), visibility 0.2s cubic-bezier(0.82, 0, 1, 0.9); transition: opacity 0.2s cubic-bezier(0, 0, 0.15, 1), visibility 0.2s cubic-bezier(0.82, 0, 1, 0.9); } .oneid-popup--animation-expand-enter-active[data-popper-placement^=top] { -webkit-animation: t-popup-animation-expand-in-top 0.2s cubic-bezier(0.38, 0, 0.24, 1), t-fade-in 0.2s linear; animation: t-popup-animation-expand-in-top 0.2s cubic-bezier(0.38, 0, 0.24, 1), t-fade-in 0.2s linear; } .oneid-popup--animation-expand-leave-active[data-popper-placement^=top] { -webkit-animation: t-popup-animation-expand-out-top 0.2s cubic-bezier(0.38, 0, 0.24, 1), t-fade-out 0.2s cubic-bezier(0, 0, 0.15, 1); animation: t-popup-animation-expand-out-top 0.2s cubic-bezier(0.38, 0, 0.24, 1), t-fade-out 0.2s cubic-bezier(0, 0, 0.15, 1); } @-webkit-keyframes t-popup-animation-expand-in-top { 0% { -webkit-clip-path: polygon(-20% 120%, 120% 120%, 120% 120%, -20% 120%); clip-path: polygon(-20% 120%, 120% 120%, 120% 120%, -20% 120%); } 100% { -webkit-clip-path: polygon(-20% 0, 120% 0, 120% 120%, -20% 120%); clip-path: polygon(-20% 0, 120% 0, 120% 120%, -20% 120%); } } @keyframes t-popup-animation-expand-in-top { 0% { -webkit-clip-path: polygon(-20% 120%, 120% 120%, 120% 120%, -20% 120%); clip-path: polygon(-20% 120%, 120% 120%, 120% 120%, -20% 120%); } 100% { -webkit-clip-path: polygon(-20% 0, 120% 0, 120% 120%, -20% 120%); clip-path: polygon(-20% 0, 120% 0, 120% 120%, -20% 120%); } } @-webkit-keyframes t-popup-animation-expand-out-top { 0% { -webkit-clip-path: polygon(-20% 0, 120% 0, 120% 120%, -20% 120%); clip-path: polygon(-20% 0, 120% 0, 120% 120%, -20% 120%); } 100% { -webkit-clip-path: polygon(-20% 120%, 120% 120%, 120% 120%, -20% 120%); clip-path: polygon(-20% 120%, 120% 120%, 120% 120%, -20% 120%); } } @keyframes t-popup-animation-expand-out-top { 0% { -webkit-clip-path: polygon(-20% 0, 120% 0, 120% 120%, -20% 120%); clip-path: polygon(-20% 0, 120% 0, 120% 120%, -20% 120%); } 100% { -webkit-clip-path: polygon(-20% 120%, 120% 120%, 120% 120%, -20% 120%); clip-path: polygon(-20% 120%, 120% 120%, 120% 120%, -20% 120%); } } .oneid-popup--animation-expand-enter-active[data-popper-placement^=bottom] { -webkit-animation: t-popup-animation-expand-in-bottom 0.2s cubic-bezier(0.38, 0, 0.24, 1), t-fade-in 0.2s linear; animation: t-popup-animation-expand-in-bottom 0.2s cubic-bezier(0.38, 0, 0.24, 1), t-fade-in 0.2s linear; } .oneid-popup--animation-expand-leave-active[data-popper-placement^=bottom] { -webkit-animation: t-popup-animation-expand-out-bottom 0.2s cubic-bezier(0.38, 0, 0.24, 1), t-fade-out 0.2s cubic-bezier(0, 0, 0.15, 1); animation: t-popup-animation-expand-out-bottom 0.2s cubic-bezier(0.38, 0, 0.24, 1), t-fade-out 0.2s cubic-bezier(0, 0, 0.15, 1); } @-webkit-keyframes t-popup-animation-expand-in-bottom { 0% { -webkit-clip-path: polygon(-20% 0, 120% 0, 120% 0, -20% 0); clip-path: polygon(-20% 0, 120% 0, 120% 0, -20% 0); } 100% { -webkit-clip-path: polygon(-20% 0, 120% 0, 120% 120%, -20% 120%); clip-path: polygon(-20% 0, 120% 0, 120% 120%, -20% 120%); } } @keyframes t-popup-animation-expand-in-bottom { 0% { -webkit-clip-path: polygon(-20% 0, 120% 0, 120% 0, -20% 0); clip-path: polygon(-20% 0, 120% 0, 120% 0, -20% 0); } 100% { -webkit-clip-path: polygon(-20% 0, 120% 0, 120% 120%, -20% 120%); clip-path: polygon(-20% 0, 120% 0, 120% 120%, -20% 120%); } } @-webkit-keyframes t-popup-animation-expand-out-bottom { 0% { -webkit-clip-path: polygon(-20% 0, 120% 0, 120% 120%, -20% 120%); clip-path: polygon(-20% 0, 120% 0, 120% 120%, -20% 120%); } 100% { -webkit-clip-path: polygon(-20% 0, 120% 0, 120% 0, -20% 0); clip-path: polygon(-20% 0, 120% 0, 120% 0, -20% 0); } } @keyframes t-popup-animation-expand-out-bottom { 0% { -webkit-clip-path: polygon(-20% 0, 120% 0, 120% 120%, -20% 120%); clip-path: polygon(-20% 0, 120% 0, 120% 120%, -20% 120%); } 100% { -webkit-clip-path: polygon(-20% 0, 120% 0, 120% 0, -20% 0); clip-path: polygon(-20% 0, 120% 0, 120% 0, -20% 0); } } .oneid-button { font: var(--td-font-body-medium); color: var(--td-text-color-primary); -webkit-box-sizing: border-box; box-sizing: border-box; margin: 0; padding: 0; list-style: none; position: relative; z-index: 0; overflow: hidden; font-size: var(--td-font-body-medium); outline: none; border-width: 1px; border-style: solid; border-color: transparent; background-color: transparent; cursor: pointer; display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; vertical-align: middle; white-space: nowrap; border-radius: var(--td-radius-default); -webkit-transition: all 0.2s linear; transition: all 0.2s linear; -ms-touch-action: manipulation; touch-action: manipulation; text-decoration: none; } .oneid-button .oneid-button__text, .oneid-button .oneid-icon { position: relative; z-index: 1; display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; } .oneid-button .oneid-icon { font-size: var(--td-font-size-body-large); } .oneid-button .oneid-loading { font-size: var(--td-font-size-body-large); } .oneid-button .oneid-icon + .oneid-button__text:not(:empty) { margin-left: 8px; } .oneid-button .oneid-loading + .oneid-button__text:not(:empty) { margin-left: 8px; } .oneid-button .oneid-button__suffix:not(:empty) { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; margin-left: 8px; } .oneid-button--variant-base { color: var(--td-text-color-anti); height: var(--td-comp-size-m); font: var(--td-font-body-medium); padding-left: calc(var(--td-comp-paddingLR-l) - 1px); padding-right: calc(var(--td-comp-paddingLR-l) - 1px); background-color: var(--td-bg-color-component); border-color: var(--td-bg-color-component); color: var(--td-text-color-primary); } .oneid-button--variant-base .oneid-icon, .oneid-button--variant-base .oneid-loading { font-size: var(--td-font-size-body-large); } .oneid-button--variant-base:hover, .oneid-button--variant-base:focus-visible { background-color: var(--td-bg-color-component-hover); } .oneid-button--variant-base.oneid-is-loading { background-color: var(--td-bg-color-component); } .oneid-button--variant-base.oneid-is-disabled { background-color: var(--td-bg-color-component-disabled); } .oneid-button--variant-base:hover, .oneid-button--variant-base:focus-visible { border-color: var(--td-bg-color-component-hover); } .oneid-button--variant-base.oneid-is-loading { border-color: var(--td-bg-color-component); } .oneid-button--variant-base.oneid-is-disabled { border-color: var(--td-bg-color-component-disabled); } .oneid-button--variant-base:hover, .oneid-button--variant-base:focus-visible { color: var(--td-text-color-primary); } .oneid-button--variant-base.oneid-is-loading { color: var(--td-text-color-primary); } .oneid-button--variant-base.oneid-is-disabled { color: var(--td-text-color-disabled); } .oneid-button--variant-base.oneid-button--theme-primary { color: var(--td-text-color-anti); background-color: var(--td-brand-color); border-color: var(--td-brand-color); } .oneid-button--variant-base.oneid-button--theme-primary:hover, .oneid-button--variant-base.oneid-button--theme-primary:focus-visible { background-color: var(--td-brand-color-hover); } .oneid-button--variant-base.oneid-button--theme-primary.oneid-is-loading { background-color: var(--td-brand-color); } .oneid-button--variant-base.oneid-button--theme-primary.oneid-is-disabled { background-color: var(--td-brand-color-disabled); } .oneid-button--variant-base.oneid-button--theme-primary:hover, .oneid-button--variant-base.oneid-button--theme-primary:focus-visible { border-color: var(--td-brand-color-hover); } .oneid-button--variant-base.oneid-button--theme-primary.oneid-is-loading { border-color: var(--td-brand-color); } .oneid-button--variant-base.oneid-button--theme-primary.oneid-is-disabled { border-color: var(--td-brand-color-disabled); } .oneid-button--variant-base.oneid-button--theme-success { color: var(--td-text-color-anti); background-color: var(--td-success-color); border-color: var(--td-success-color); } .oneid-button--variant-base.oneid-button--theme-success:hover, .oneid-button--variant-base.oneid-button--theme-success:focus-visible { background-color: var(--td-success-color-hover); } .oneid-button--variant-base.oneid-button--theme-success.oneid-is-loading { background-color: var(--td-success-color); } .oneid-button--variant-base.oneid-button--theme-success.oneid-is-disabled { background-color: var(--td-success-color-disabled); } .oneid-button--variant-base.oneid-button--theme-success:hover, .oneid-button--variant-base.oneid-button--theme-success:focus-visible { border-color: var(--td-success-color-hover); } .oneid-button--variant-base.oneid-button--theme-success.oneid-is-loading { border-color: var(--td-success-color); } .oneid-button--variant-base.oneid-button--theme-success.oneid-is-disabled { border-color: var(--td-success-color-disabled); } .oneid-button--variant-base.oneid-button--theme-warning { color: var(--td-text-color-anti); background-color: var(--td-warning-color); border-color: var(--td-warning-color); } .oneid-button--variant-base.oneid-button--theme-warning:hover, .oneid-button--variant-base.oneid-button--theme-warning:focus-visible { background-color: var(--td-warning-color-hover); } .oneid-button--variant-base.oneid-button--theme-warning.oneid-is-loading { background-color: var(--td-warning-color); } .oneid-button--variant-base.oneid-button--theme-warning.oneid-is-disabled { background-color: var(--td-warning-color-disabled); } .oneid-button--variant-base.oneid-button--theme-warning:hover, .oneid-button--variant-base.oneid-button--theme-warning:focus-visible { border-color: var(--td-warning-color-hover); } .oneid-button--variant-base.oneid-button--theme-warning.oneid-is-loading { border-color: var(--td-warning-color); } .oneid-button--variant-base.oneid-button--theme-warning.oneid-is-disabled { border-color: var(--td-warning-color-disabled); } .oneid-button--variant-base.oneid-button--theme-danger { color: var(--td-text-color-anti); background-color: var(--td-error-color); border-color: var(--td-error-color); } .oneid-button--variant-base.oneid-button--theme-danger:hover, .oneid-button--variant-base.oneid-button--theme-danger:focus-visible { background-color: var(--td-error-color-hover); } .oneid-button--variant-base.oneid-button--theme-danger.oneid-is-loading { background-color: var(--td-error-color); } .oneid-button--variant-base.oneid-button--theme-danger.oneid-is-disabled { background-color: var(--td-error-color-disabled); } .oneid-button--variant-base.oneid-button--theme-danger:hover, .oneid-button--variant-base.oneid-button--theme-danger:focus-visible { border-color: var(--td-error-color-hover); } .oneid-button--variant-base.oneid-button--theme-danger.oneid-is-loading { border-color: var(--td-error-color); } .oneid-button--variant-base.oneid-button--theme-danger.oneid-is-disabled { border-color: var(--td-error-color-disabled); } .oneid-button--variant-base.oneid-button--ghost { background-color: transparent; color: var(--td-text-color-anti); border-color: var(--td-text-color-anti); } .oneid-button--variant-base.oneid-button--ghost:hover, .oneid-button--variant-base.oneid-button--ghost:focus-visible { background-color: transparent; } .oneid-button--variant-base.oneid-button--ghost:active { background-color: transparent; } .oneid-button--variant-base.oneid-button--ghost.oneid-is-loading { background-color: transparent; } .oneid-button--variant-base.oneid-button--ghost.oneid-is-disabled { background-color: rgba(255, 255, 255, 0.22); background-color: transparent; } .oneid-button--variant-base.oneid-button--ghost:hover, .oneid-button--variant-base.oneid-button--ghost:focus-visible { color: var(--td-brand-color-hover); } .oneid-button--variant-base.oneid-button--ghost:active { color: var(--td-brand-color-active); } .oneid-button--variant-base.oneid-button--ghost.oneid-is-loading { color: var(--td-text-color-anti); } .oneid-button--variant-base.oneid-button--ghost.oneid-is-disabled { color: rgba(255, 255, 255, 0.22); background-color: transparent; } .oneid-button--variant-base.oneid-button--ghost:hover, .oneid-button--variant-base.oneid-button--ghost:focus-visible { border-color: var(--td-brand-color-hover); } .oneid-button--variant-base.oneid-button--ghost:active { border-color: var(--td-brand-color-active); } .oneid-button--variant-base.oneid-button--ghost.oneid-is-loading { border-color: var(--td-text-color-anti); } .oneid-button--variant-base.oneid-button--ghost.oneid-is-disabled { border-color: rgba(255, 255, 255, 0.22); background-color: transparent; } .oneid-button--variant-base.oneid-button--ghost.oneid-button--theme-primary { color: var(--td-brand-color); border-color: var(--td-brand-color); } .oneid-button--variant-base.oneid-button--ghost.oneid-button--theme-primary:hover, .oneid-button--variant-base.oneid-button--ghost.oneid-button--theme-primary:focus-visible { color: var(--td-brand-color-hover); } .oneid-button--variant-base.oneid-button--ghost.oneid-button--theme-primary:active { color: var(--td-brand-color-active); } .oneid-button--variant-base.oneid-button--ghost.oneid-button--theme-primary.oneid-is-loading { color: var(--td-brand-color); } .oneid-button--variant-base.oneid-button--ghost.oneid-button--theme-primary.oneid-is-disabled { color: rgba(255, 255, 255, 0.22); background-color: transparent; } .oneid-button--variant-base.oneid-button--ghost.oneid-button--theme-primary:hover, .oneid-button--variant-base.oneid-button--ghost.oneid-button--theme-primary:focus-visible { border-color: var(--td-brand-color-hover); } .oneid-button--variant-base.oneid-button--ghost.oneid-button--theme-primary:active { border-color: var(--td-brand-color-active); } .oneid-button--variant-base.oneid-button--ghost.oneid-button--theme-primary.oneid-is-loading { border-color: var(--td-brand-color); } .oneid-button--variant-base.oneid-button--ghost.oneid-button--theme-primary.oneid-is-disabled { border-color: rgba(255, 255, 255, 0.22); background-color: transparent; } .oneid-button--variant-base.oneid-button--ghost.oneid-button--theme-success { color: var(--td-success-color); border-color: var(--td-success-color); } .oneid-button--variant-base.oneid-button--ghost.oneid-button--theme-success:hover, .oneid-button--variant-base.oneid-button--ghost.oneid-button--theme-success:focus-visible { color: var(--td-success-color-hover); } .oneid-button--variant-base.oneid-button--ghost.oneid-button--theme-success:active { color: var(--td-success-color-active); } .oneid-button--variant-base.oneid-button--ghost.oneid-button--theme-success.oneid-is-loading { color: var(--td-success-color); } .oneid-button--variant-base.oneid-button--ghost.oneid-button--theme-success.oneid-is-disabled { color: rgba(255, 255, 255, 0.22); background-color: transparent; } .oneid-button--variant-base.oneid-button--ghost.oneid-button--theme-success:hover, .oneid-button--variant-base.oneid-button--ghost.oneid-button--theme-success:focus-visible { border-color: var(--td-success-color-hover); } .oneid-button--variant-base.oneid-button--ghost.oneid-button--theme-success:active { border-color: var(--td-success-color-active); } .oneid-button--variant-base.oneid-button--ghost.oneid-button--theme-success.oneid-is-loading { border-color: var(--td-success-color); } .oneid-button--variant-base.oneid-button--ghost.oneid-button--theme-success.oneid-is-disabled { border-color: rgba(255, 255, 255, 0.22); background-color: transparent; } .oneid-button--variant-base.oneid-button--ghost.oneid-button--theme-warning { color: var(--td-warning-color); border-color: var(--td-warning-color); } .oneid-button--variant-base.oneid-button--ghost.oneid-button--theme-warning:hover, .oneid-button--variant-base.oneid-button--ghost.oneid-button--theme-warning:focus-visible { color: var(--td-warning-color-hover); } .oneid-button--variant-base.oneid-button--ghost.oneid-button--theme-warning:active { color: var(--td-warning-color-active); } .oneid-button--variant-base.oneid-button--ghost.oneid-button--theme-warning.oneid-is-loading { color: var(--td-warning-color); } .oneid-button--variant-base.oneid-button--ghost.oneid-button--theme-warning.oneid-is-disabled { color: rgba(255, 255, 255, 0.22); background-color: transparent; } .oneid-button--variant-base.oneid-button--ghost.oneid-button--theme-warning:hover, .oneid-button--variant-base.oneid-button--ghost.oneid-button--theme-warning:focus-visible { border-color: var(--td-warning-color-hover); } .oneid-button--variant-base.oneid-button--ghost.oneid-button--theme-warning:active { border-color: var(--td-warning-color-active); } .oneid-button--variant-base.oneid-button--ghost.oneid-button--theme-warning.oneid-is-loading { border-color: var(--td-warning-color); } .oneid-button--variant-base.oneid-button--ghost.oneid-button--theme-warning.oneid-is-disabled { border-color: rgba(255, 255, 255, 0.22); background-color: transparent; } .oneid-button--variant-base.oneid-button--ghost.oneid-button--theme-danger { color: var(--td-error-color); border-color: var(--td-error-color); } .oneid-button--variant-base.oneid-button--ghost.oneid-button--theme-danger:hover, .oneid-button--variant-base.oneid-button--ghost.oneid-button--theme-danger:focus-visible { color: var(--td-error-color-hover); } .oneid-button--variant-base.oneid-button--ghost.oneid-button--theme-danger:active { color: var(--td-error-color-active); } .oneid-button--variant-base.oneid-button--ghost.oneid-button--theme-danger.oneid-is-loading { color: var(--td-error-color); } .oneid-button--variant-base.oneid-button--ghost.oneid-button--theme-danger.oneid-is-disabled { color: rgba(255, 255, 255, 0.22); background-color: transparent; } .oneid-button--variant-base.oneid-button--ghost.oneid-button--theme-danger:hover, .oneid-button--variant-base.oneid-button--ghost.oneid-button--theme-danger:focus-visible { border-color: var(--td-error-color-hover); } .oneid-button--variant-base.oneid-button--ghost.oneid-button--theme-danger:active { border-color: var(--td-error-color-active); } .oneid-button--variant-base.oneid-button--ghost.oneid-button--theme-danger.oneid-is-loading { border-color: var(--td-error-color); } .oneid-button--variant-base.oneid-button--ghost.oneid-button--theme-danger.oneid-is-disabled { border-color: rgba(255, 255, 255, 0.22); background-color: transparent; } .oneid-button--variant-outline { height: var(--td-comp-size-m); font: var(--td-font-body-medium); padding-left: calc(var(--td-comp-paddingLR-l) - 1px); padding-right: calc(var(--td-comp-paddingLR-l) - 1px); color: var(--td-text-color-primary); background-color: var(--td-bg-color-specialcomponent); border-color: var(--td-border-level-2-color); } .oneid-button--variant-outline .oneid-icon, .oneid-button--variant-outline .oneid-loading { font-size: var(--td-font-size-body-large); } .oneid-button--variant-outline:hover, .oneid-button--variant-outline:focus-visible { color: var(--td-brand-color-hover); } .oneid-button--variant-outline.oneid-is-loading { color: var(--td-text-color-primary); } .oneid-button--variant-outline.oneid-is-disabled { color: var(--td-text-color-disabled); } .oneid-button--variant-outline:hover, .oneid-button--variant-outline:focus-visible { background-color: var(--td-bg-color-specialcomponent); } .oneid-button--variant-outline.oneid-is-loading { background-color: var(--td-bg-color-specialcomponent); } .oneid-button--variant-outline.oneid-is-disabled { background-color: var(--td-bg-color-component-disabled); } .oneid-button--variant-outline:hover, .oneid-button--variant-outline:focus-visible { border-color: var(--td-brand-color-hover); } .oneid-button--variant-outline.oneid-is-loading { border-color: var(--td-border-level-2-color); } .oneid-button--variant-outline.oneid-is-disabled { border-color: var(--td-border-level-2-color); } .oneid-button--variant-outline.oneid-button--theme-primary { color: var(--td-brand-color); border-color: var(--td-brand-color); } .oneid-button--variant-outline.oneid-button--theme-primary:hover, .oneid-button--variant-outline.oneid-button--theme-primary:focus-visible { color: var(--td-brand-color-hover); } .oneid-button--variant-outline.oneid-button--theme-primary.oneid-is-loading { color: var(--td-brand-color); } .oneid-button--variant-outline.oneid-button--theme-primary.oneid-is-disabled { color: var(--td-brand-color-disabled); } .oneid-button--variant-outline.oneid-button--theme-primary:hover, .oneid-button--variant-outline.oneid-button--theme-primary:focus-visible { border-color: var(--td-brand-color-hover); } .oneid-button--variant-outline.oneid-button--theme-primary.oneid-is-loading { border-color: var(--td-brand-color); } .oneid-button--variant-outline.oneid-button--theme-primary.oneid-is-disabled { border-color: var(--td-brand-color-disabled); } .oneid-button--variant-outline.oneid-button--theme-success { color: var(--td-success-color); border-color: var(--td-success-color); } .oneid-button--variant-outline.oneid-button--theme-success:hover, .oneid-button--variant-outline.oneid-button--theme-success:focus-visible { color: var(--td-success-color-hover); } .oneid-button--variant-outline.oneid-button--theme-success.oneid-is-loading { color: var(--td-success-color); } .oneid-button--variant-outline.oneid-button--theme-success.oneid-is-disabled { color: var(--td-success-color-disabled); } .oneid-button--variant-outline.oneid-button--theme-success:hover, .oneid-button--variant-outline.oneid-button--theme-success:focus-visible { border-color: var(--td-success-color-hover); } .oneid-button--variant-outline.oneid-button--theme-success.oneid-is-loading { border-color: var(--td-success-color); } .oneid-button--variant-outline.oneid-button--theme-success.oneid-is-disabled { border-color: var(--td-success-color-disabled); } .oneid-button--variant-outline.oneid-button--theme-warning { color: var(--td-warning-color); border-color: var(--td-warning-color); } .oneid-button--variant-outline.oneid-button--theme-warning:hover, .oneid-button--variant-outline.oneid-button--theme-warning:focus-visible { color: var(--td-warning-color-hover); } .oneid-button--variant-outline.oneid-button--theme-warning.oneid-is-loading { color: var(--td-warning-color); } .oneid-button--variant-outline.oneid-button--theme-warning.oneid-is-disabled { color: var(--td-warning-color-disabled); } .oneid-button--variant-outline.oneid-button--theme-warning:hover, .oneid-button--variant-outline.oneid-button--theme-warning:focus-visible { border-color: var(--td-warning-color-hover); } .oneid-button--variant-outline.oneid-button--theme-warning.oneid-is-loading { border-color: var(--td-warning-color); } .oneid-button--variant-outline.oneid-button--theme-warning.oneid-is-disabled { border-color: var(--td-warning-color-disabled); } .oneid-button--variant-outline.oneid-button--theme-danger { color: var(--td-error-color); border-color: var(--td-error-color); } .oneid-button--variant-outline.oneid-button--theme-danger:hover, .oneid-button--variant-outline.oneid-button--theme-danger:focus-visible { color: var(--td-error-color-hover); } .oneid-button--variant-outline.oneid-button--theme-danger.oneid-is-loading { color: var(--td-error-color); } .oneid-button--variant-outline.oneid-button--theme-danger.oneid-is-disabled { color: var(--td-error-color-disabled); } .oneid-button--variant-outline.oneid-button--theme-danger:hover, .oneid-button--variant-outline.oneid-button--theme-danger:focus-visible { border-color: var(--td-error-color-hover); } .oneid-button--variant-outline.oneid-button--theme-danger.oneid-is-loading { border-color: var(--td-error-color); } .oneid-button--variant-outline.oneid-button--theme-danger.oneid-is-disabled { border-color: var(--td-error-color-disabled); } .oneid-button--variant-outline.oneid-button--ghost { background-color: transparent; color: var(--td-text-color-anti); border-color: var(--td-text-color-anti); } .oneid-button--variant-outline.oneid-button--ghost:hover, .oneid-button--variant-outline.oneid-button--ghost:focus-visible { background-color: transparent; } .oneid-button--variant-outline.oneid-button--ghost:active { background-color: transparent; } .oneid-button--variant-outline.oneid-button--ghost.oneid-is-loading { background-color: transparent; } .oneid-button--variant-outline.oneid-button--ghost.oneid-is-disabled { background-color: rgba(255, 255, 255, 0.22); background-color: transparent; } .oneid-button--variant-outline.oneid-button--ghost:hover, .oneid-button--variant-outline.oneid-button--ghost:focus-visible { color: var(--td-brand-color-hover); } .oneid-button--variant-outline.oneid-button--ghost:active { color: var(--td-brand-color-active); } .oneid-button--variant-outline.oneid-button--ghost.oneid-is-loading { color: var(--td-text-color-anti); } .oneid-button--variant-outline.oneid-button--ghost.oneid-is-disabled { color: rgba(255, 255, 255, 0.22); background-color: transparent; } .oneid-button--variant-outline.oneid-button--ghost:hover, .oneid-button--variant-outline.oneid-button--ghost:focus-visible { border-color: var(--td-brand-color-hover); } .oneid-button--variant-outline.oneid-button--ghost:active { border-color: var(--td-brand-color-active); } .oneid-button--variant-outline.oneid-button--ghost.oneid-is-loading { border-color: var(--td-text-color-anti); } .oneid-button--variant-outline.oneid-button--ghost.oneid-is-disabled { border-color: rgba(255, 255, 255, 0.22); background-color: transparent; } .oneid-button--variant-outline.oneid-button--ghost.oneid-button--theme-primary { color: var(--td-brand-color); border-color: var(--td-brand-color); } .oneid-button--variant-outline.oneid-button--ghost.oneid-button--theme-primary:hover, .oneid-button--variant-outline.oneid-button--ghost.oneid-button--theme-primary:focus-visible { color: var(--td-brand-color-hover); } .oneid-button--variant-outline.oneid-button--ghost.oneid-button--theme-primary:active { color: var(--td-brand-color-active); } .oneid-button--variant-outline.oneid-button--ghost.oneid-button--theme-primary.oneid-is-loading { color: var(--td-brand-color); } .oneid-button--variant-outline.oneid-button--ghost.oneid-button--theme-primary.oneid-is-disabled { color: rgba(255, 255, 255, 0.22); background-color: transparent; } .oneid-button--variant-outline.oneid-button--ghost.oneid-button--theme-primary:hover, .oneid-button--variant-outline.oneid-button--ghost.oneid-button--theme-primary:focus-visible { border-color: var(--td-brand-color-hover); } .oneid-button--variant-outline.oneid-button--ghost.oneid-button--theme-primary:active { border-color: var(--td-brand-color-active); } .oneid-button--variant-outline.oneid-button--ghost.oneid-button--theme-primary.oneid-is-loading { border-color: var(--td-brand-color); } .oneid-button--variant-outline.oneid-button--ghost.oneid-button--theme-primary.oneid-is-disabled { border-color: rgba(255, 255, 255, 0.22); background-color: transparent; } .oneid-button--variant-outline.oneid-button--ghost.oneid-button--theme-success { color: var(--td-success-color); border-color: var(--td-success-color); } .oneid-button--variant-outline.oneid-button--ghost.oneid-button--theme-success:hover, .oneid-button--variant-outline.oneid-button--ghost.oneid-button--theme-success:focus-visible { color: var(--td-success-color-hover); } .oneid-button--variant-outline.oneid-button--ghost.oneid-button--theme-success:active { color: var(--td-success-color-active); } .oneid-button--variant-outline.oneid-button--ghost.oneid-button--theme-success.oneid-is-loading { color: var(--td-success-color); } .oneid-button--variant-outline.oneid-button--ghost.oneid-button--theme-success.oneid-is-disabled { color: rgba(255, 255, 255, 0.22); background-color: transparent; } .oneid-button--variant-outline.oneid-button--ghost.oneid-button--theme-success:hover, .oneid-button--variant-outline.oneid-button--ghost.oneid-button--theme-success:focus-visible { border-color: var(--td-success-color-hover); } .oneid-button--variant-outline.oneid-button--ghost.oneid-button--theme-success:active { border-color: var(--td-success-color-active); } .oneid-button--variant-outline.oneid-button--ghost.oneid-button--theme-success.oneid-is-loading { border-color: var(--td-success-color); } .oneid-button--variant-outline.oneid-button--ghost.oneid-button--theme-success.oneid-is-disabled { border-color: rgba(255, 255, 255, 0.22); background-color: transparent; } .oneid-button--variant-outline.oneid-button--ghost.oneid-button--theme-warning { color: var(--td-warning-color); border-color: var(--td-warning-color); } .oneid-button--variant-outline.oneid-button--ghost.oneid-button--theme-warning:hover, .oneid-button--variant-outline.oneid-button--ghost.oneid-button--theme-warning:focus-visible { color: var(--td-warning-color-hover); } .oneid-button--variant-outline.oneid-button--ghost.oneid-button--theme-warning:active { color: var(--td-warning-color-active); } .oneid-button--variant-outline.oneid-button--ghost.oneid-button--theme-warning.oneid-is-loading { color: var(--td-warning-color); } .oneid-button--variant-outline.oneid-button--ghost.oneid-button--theme-warning.oneid-is-disabled { color: rgba(255, 255, 255, 0.22); background-color: transparent; } .oneid-button--variant-outline.oneid-button--ghost.oneid-button--theme-warning:hover, .oneid-button--variant-outline.oneid-button--ghost.oneid-button--theme-warning:focus-visible { border-color: var(--td-warning-color-hover); } .oneid-button--variant-outline.oneid-button--ghost.oneid-button--theme-warning:active { border-color: var(--td-warning-color-active); } .oneid-button--variant-outline.oneid-button--ghost.oneid-button--theme-warning.oneid-is-loading { border-color: var(--td-warning-color); } .oneid-button--variant-outline.oneid-button--ghost.oneid-button--theme-warning.oneid-is-disabled { border-color: rgba(255, 255, 255, 0.22); background-color: transparent; } .oneid-button--variant-outline.oneid-button--ghost.oneid-button--theme-danger { color: var(--td-error-color); border-color: var(--td-error-color); } .oneid-button--variant-outline.oneid-button--ghost.oneid-button--theme-danger:hover, .oneid-button--variant-outline.oneid-button--ghost.oneid-button--theme-danger:focus-visible { color: var(--td-error-color-hover); } .oneid-button--variant-outline.oneid-button--ghost.oneid-button--theme-danger:active { color: var(--td-error-color-active); } .oneid-button--variant-outline.oneid-button--ghost.oneid-button--theme-danger.oneid-is-loading { color: var(--td-error-color); } .oneid-button--variant-outline.oneid-button--ghost.oneid-button--theme-danger.oneid-is-disabled { color: rgba(255, 255, 255, 0.22); background-color: transparent; } .oneid-button--variant-outline.oneid-button--ghost.oneid-button--theme-danger:hover, .oneid-button--variant-outline.oneid-button--ghost.oneid-button--theme-danger:focus-visible { border-color: var(--td-error-color-hover); } .oneid-button--variant-outline.oneid-button--ghost.oneid-button--theme-danger:active { border-color: var(--td-error-color-active); } .oneid-button--variant-outline.oneid-button--ghost.oneid-button--theme-danger.oneid-is-loading { border-color: var(--td-error-color); } .oneid-button--variant-outline.oneid-button--ghost.oneid-button--theme-danger.oneid-is-disabled { border-color: rgba(255, 255, 255, 0.22); background-color: transparent; } .oneid-button--variant-dashed { height: var(--td-comp-size-m); font: var(--td-font-body-medium); padding-left: calc(var(--td-comp-paddingLR-l) - 1px); padding-right: calc(var(--td-comp-paddingLR-l) - 1px); color: var(--td-text-color-primary); background-color: var(--td-bg-color-specialcomponent); border-color: var(--td-border-level-2-color); border-style: dashed; } .oneid-button--variant-dashed .oneid-icon, .oneid-button--variant-dashed .oneid-loading { font-size: var(--td-font-size-body-large); } .oneid-button--variant-dashed:hover, .oneid-button--variant-dashed:focus-visible { color: var(--td-brand-color-hover); } .oneid-button--variant-dashed.oneid-is-loading { color: var(--td-text-color-primary); } .oneid-button--variant-dashed.oneid-is-disabled { color: var(--td-text-color-disabled); } .oneid-button--variant-dashed:hover, .oneid-button--variant-dashed:focus-visible { background-color: var(--td-bg-color-specialcomponent); } .oneid-button--variant-dashed.oneid-is-loading { background-color: var(--td-bg-color-specialcomponent); } .oneid-button--variant-dashed.oneid-is-disabled { background-color: var(--td-bg-color-component-disabled); } .oneid-button--variant-dashed:hover, .oneid-button--variant-dashed:focus-visible { border-color: var(--td-brand-color-hover); } .oneid-button--variant-dashed.oneid-is-loading { border-color: var(--td-border-level-2-color); } .oneid-button--variant-dashed.oneid-is-disabled { border-color: var(--td-border-level-2-color); } .oneid-button--variant-dashed.oneid-button--theme-primary { color: var(--td-brand-color); border-color: var(--td-brand-color); } .oneid-button--variant-dashed.oneid-button--theme-primary:hover, .oneid-button--variant-dashed.oneid-button--theme-primary:focus-visible { color: var(--td-brand-color-hover); } .oneid-button--variant-dashed.oneid-button--theme-primary.oneid-is-loading { color: var(--td-brand-color); } .oneid-button--variant-dashed.oneid-button--theme-primary.oneid-is-disabled { color: var(--td-brand-color-disabled); } .oneid-button--variant-dashed.oneid-button--theme-primary:hover, .oneid-button--variant-dashed.oneid-button--theme-primary:focus-visible { border-color: var(--td-brand-color-hover); } .oneid-button--variant-dashed.oneid-button--theme-primary.oneid-is-loading { border-color: var(--td-brand-color); } .oneid-button--variant-dashed.oneid-button--theme-primary.oneid-is-disabled { border-color: var(--td-brand-color-disabled); } .oneid-button--variant-dashed.oneid-button--theme-success { color: var(--td-success-color); border-color: var(--td-success-color); } .oneid-button--variant-dashed.oneid-button--theme-success:hover, .oneid-button--variant-dashed.oneid-button--theme-success:focus-visible { color: var(--td-success-color-hover); } .oneid-button--variant-dashed.oneid-button--theme-success.oneid-is-loading { color: var(--td-success-color); } .oneid-button--variant-dashed.oneid-button--theme-success.oneid-is-disabled { color: var(--td-success-color-disabled); } .oneid-button--variant-dashed.oneid-button--theme-success:hover, .oneid-button--variant-dashed.oneid-button--theme-success:focus-visible { border-color: var(--td-success-color-hover); } .oneid-button--variant-dashed.oneid-button--theme-success.oneid-is-loading { border-color: var(--td-success-color); } .oneid-button--variant-dashed.oneid-button--theme-success.oneid-is-disabled { border-color: var(--td-success-color-disabled); } .oneid-button--variant-dashed.oneid-button--theme-warning { color: var(--td-warning-color); border-color: var(--td-warning-color); } .oneid-button--variant-dashed.oneid-button--theme-warning:hover, .oneid-button--variant-dashed.oneid-button--theme-warning:focus-visible { color: var(--td-warning-color-hover); } .oneid-button--variant-dashed.oneid-button--theme-warning.oneid-is-loading { color: var(--td-warning-color); } .oneid-button--variant-dashed.oneid-button--theme-warning.oneid-is-disabled { color: var(--td-warning-color-disabled); } .oneid-button--variant-dashed.oneid-button--theme-warning:hover, .oneid-button--variant-dashed.oneid-button--theme-warning:focus-visible { border-color: var(--td-warning-color-hover); } .oneid-button--variant-dashed.oneid-button--theme-warning.oneid-is-loading { border-color: var(--td-warning-color); } .oneid-button--variant-dashed.oneid-button--theme-warning.oneid-is-disabled { border-color: var(--td-warning-color-disabled); } .oneid-button--variant-dashed.oneid-button--theme-danger { color: var(--td-error-color); border-color: var(--td-error-color); } .oneid-button--variant-dashed.oneid-button--theme-danger:hover, .oneid-button--variant-dashed.oneid-button--theme-danger:focus-visible { color: var(--td-error-color-hover); } .oneid-button--variant-dashed.oneid-button--theme-danger.oneid-is-loading { color: var(--td-error-color); } .oneid-button--variant-dashed.oneid-button--theme-danger.oneid-is-disabled { color: var(--td-error-color-disabled); } .oneid-button--variant-dashed.oneid-button--theme-danger:hover, .oneid-button--variant-dashed.oneid-button--theme-danger:focus-visible { border-color: var(--td-error-color-hover); } .oneid-button--variant-dashed.oneid-button--theme-danger.oneid-is-loading { border-color: var(--td-error-color); } .oneid-button--variant-dashed.oneid-button--theme-danger.oneid-is-disabled { border-color: var(--td-error-color-disabled); } .oneid-button--variant-dashed.oneid-button--ghost { background-color: transparent; color: var(--td-text-color-anti); border-color: var(--td-text-color-anti); } .oneid-button--variant-dashed.oneid-button--ghost:hover, .oneid-button--variant-dashed.oneid-button--ghost:focus-visible { background-color: transparent; } .oneid-button--variant-dashed.oneid-button--ghost:active { background-color: transparent; } .oneid-button--variant-dashed.oneid-button--ghost.oneid-is-loading { background-color: transparent; } .oneid-button--variant-dashed.oneid-button--ghost.oneid-is-disabled { background-color: rgba(255, 255, 255, 0.22); background-color: transparent; } .oneid-button--variant-dashed.oneid-button--ghost:hover, .oneid-button--variant-dashed.oneid-button--ghost:focus-visible { color: var(--td-brand-color-hover); } .oneid-button--variant-dashed.oneid-button--ghost:active { color: var(--td-brand-color-active); } .oneid-button--variant-dashed.oneid-button--ghost.oneid-is-loading { color: var(--td-text-color-anti); } .oneid-button--variant-dashed.oneid-button--ghost.oneid-is-disabled { color: rgba(255, 255, 255, 0.22); background-color: transparent; } .oneid-button--variant-dashed.oneid-button--ghost:hover, .oneid-button--variant-dashed.oneid-button--ghost:focus-visible { border-color: var(--td-brand-color-hover); } .oneid-button--variant-dashed.oneid-button--ghost:active { border-color: var(--td-brand-color-active); } .oneid-button--variant-dashed.oneid-button--ghost.oneid-is-loading { border-color: var(--td-text-color-anti); } .oneid-button--variant-dashed.oneid-button--ghost.oneid-is-disabled { border-color: rgba(255, 255, 255, 0.22); background-color: transparent; } .oneid-button--variant-dashed.oneid-button--ghost.oneid-button--theme-primary { color: var(--td-brand-color); border-color: var(--td-brand-color); } .oneid-button--variant-dashed.oneid-button--ghost.oneid-button--theme-primary:hover, .oneid-button--variant-dashed.oneid-button--ghost.oneid-button--theme-primary:focus-visible { color: var(--td-brand-color-hover); } .oneid-button--variant-dashed.oneid-button--ghost.oneid-button--theme-primary:active { color: var(--td-brand-color-active); } .oneid-button--variant-dashed.oneid-button--ghost.oneid-button--theme-primary.oneid-is-loading { color: var(--td-brand-color); } .oneid-button--variant-dashed.oneid-button--ghost.oneid-button--theme-primary.oneid-is-disabled { color: rgba(255, 255, 255, 0.22); background-color: transparent; } .oneid-button--variant-dashed.oneid-button--ghost.oneid-button--theme-primary:hover, .oneid-button--variant-dashed.oneid-button--ghost.oneid-button--theme-primary:focus-visible { border-color: var(--td-brand-color-hover); } .oneid-button--variant-dashed.oneid-button--ghost.oneid-button--theme-primary:active { border-color: var(--td-brand-color-active); } .oneid-button--variant-dashed.oneid-button--ghost.oneid-button--theme-primary.oneid-is-loading { border-color: var(--td-brand-color); } .oneid-button--variant-dashed.oneid-button--ghost.oneid-button--theme-primary.oneid-is-disabled { border-color: rgba(255, 255, 255, 0.22); background-color: transparent; } .oneid-button--variant-dashed.oneid-button--ghost.oneid-button--theme-success { color: var(--td-success-color); border-color: var(--td-success-color); } .oneid-button--variant-dashed.oneid-button--ghost.oneid-button--theme-success:hover, .oneid-button--variant-dashed.oneid-button--ghost.oneid-button--theme-success:focus-visible { color: var(--td-success-color-hover); } .oneid-button--variant-dashed.oneid-button--ghost.oneid-button--theme-success:active { color: var(--td-success-color-active); } .oneid-button--variant-dashed.oneid-button--ghost.oneid-button--theme-success.oneid-is-loading { color: var(--td-success-color); } .oneid-button--variant-dashed.oneid-button--ghost.oneid-button--theme-success.oneid-is-disabled { color: rgba(255, 255, 255, 0.22); background-color: transparent; } .oneid-button--variant-dashed.oneid-button--ghost.oneid-button--theme-success:hover, .oneid-button--variant-dashed.oneid-button--ghost.oneid-button--theme-success:focus-visible { border-color: var(--td-success-color-hover); } .oneid-button--variant-dashed.oneid-button--ghost.oneid-button--theme-success:active { border-color: var(--td-success-color-active); } .oneid-button--variant-dashed.oneid-button--ghost.oneid-button--theme-success.oneid-is-loading { border-color: var(--td-success-color); } .oneid-button--variant-dashed.oneid-button--ghost.oneid-button--theme-success.oneid-is-disabled { border-color: rgba(255, 255, 255, 0.22); background-color: transparent; } .oneid-button--variant-dashed.oneid-button--ghost.oneid-button--theme-warning { color: var(--td-warning-color); border-color: var(--td-warning-color); } .oneid-button--variant-dashed.oneid-button--ghost.oneid-button--theme-warning:hover, .oneid-button--variant-dashed.oneid-button--ghost.oneid-button--theme-warning:focus-visible { color: var(--td-warning-color-hover); } .oneid-button--variant-dashed.oneid-button--ghost.oneid-button--theme-warning:active { color: var(--td-warning-color-active); } .oneid-button--variant-dashed.oneid-button--ghost.oneid-button--theme-warning.oneid-is-loading { color: var(--td-warning-color); } .oneid-button--variant-dashed.oneid-button--ghost.oneid-button--theme-warning.oneid-is-disabled { color: rgba(255, 255, 255, 0.22); background-color: transparent; } .oneid-button--variant-dashed.oneid-button--ghost.oneid-button--theme-warning:hover, .oneid-button--variant-dashed.oneid-button--ghost.oneid-button--theme-warning:focus-visible { border-color: var(--td-warning-color-hover); } .oneid-button--variant-dashed.oneid-button--ghost.oneid-button--theme-warning:active { border-color: var(--td-warning-color-active); } .oneid-button--variant-dashed.oneid-button--ghost.oneid-button--theme-warning.oneid-is-loading { border-color: var(--td-warning-color); } .oneid-button--variant-dashed.oneid-button--ghost.oneid-button--theme-warning.oneid-is-disabled { border-color: rgba(255, 255, 255, 0.22); background-color: transparent; } .oneid-button--variant-dashed.oneid-button--ghost.oneid-button--theme-danger { color: var(--td-error-color); border-color: var(--td-error-color); } .oneid-button--variant-dashed.oneid-button--ghost.oneid-button--theme-danger:hover, .oneid-button--variant-dashed.oneid-button--ghost.oneid-button--theme-danger:focus-visible { color: var(--td-error-color-hover); } .oneid-button--variant-dashed.oneid-button--ghost.oneid-button--theme-danger:active { color: var(--td-error-color-active); } .oneid-button--variant-dashed.oneid-button--ghost.oneid-button--theme-danger.oneid-is-loading { color: var(--td-error-color); } .oneid-button--variant-dashed.oneid-button--ghost.oneid-button--theme-danger.oneid-is-disabled { color: rgba(255, 255, 255, 0.22); background-color: transparent; } .oneid-button--variant-dashed.oneid-button--ghost.oneid-button--theme-danger:hover, .oneid-button--variant-dashed.oneid-button--ghost.oneid-button--theme-danger:focus-visible { border-color: var(--td-error-color-hover); } .oneid-button--variant-dashed.oneid-button--ghost.oneid-button--theme-danger:active { border-color: var(--td-error-color-active); } .oneid-button--variant-dashed.oneid-button--ghost.oneid-button--theme-danger.oneid-is-loading { border-color: var(--td-error-color); } .oneid-button--variant-dashed.oneid-button--ghost.oneid-button--theme-danger.oneid-is-disabled { border-color: rgba(255, 255, 255, 0.22); background-color: transparent; } .oneid-button--variant-text { height: var(--td-comp-size-m); font: var(--td-font-body-medium); padding-left: calc(var(--td-comp-paddingLR-l) - 1px); padding-right: calc(var(--td-comp-paddingLR-l) - 1px); color: var(--td-text-color-primary); background-color: transparent; border-color: transparent; } .oneid-button--variant-text .oneid-icon, .oneid-button--variant-text .oneid-loading { font-size: var(--td-font-size-body-large); } .oneid-button--variant-text:hover, .oneid-button--variant-text:focus-visible { color: var(--td-text-color-primary); } .oneid-button--variant-text.oneid-is-loading { color: var(--td-text-color-primary); } .oneid-button--variant-text.oneid-is-disabled { color: var(--td-text-color-disabled); } .oneid-button--variant-text:hover, .oneid-button--variant-text:focus-visible { background-color: var(--td-bg-color-container-hover); } .oneid-button--variant-text.oneid-is-loading { background-color: transparent; } .oneid-button--variant-text.oneid-is-disabled { background-color: transparent; } .oneid-button--variant-text:hover, .oneid-button--variant-text:focus-visible { border-color: var(--td-bg-color-container-hover); } .oneid-button--variant-text.oneid-is-loading { border-color: transparent; } .oneid-button--variant-text.oneid-is-disabled { border-color: transparent; } .oneid-button--variant-text.oneid-button--theme-primary { color: var(--td-brand-color); } .oneid-button--variant-text.oneid-button--theme-primary:hover, .oneid-button--variant-text.oneid-button--theme-primary:focus-visible { color: var(--td-brand-color-hover); } .oneid-button--variant-text.oneid-button--theme-primary.oneid-is-loading { color: var(--td-brand-color); } .oneid-button--variant-text.oneid-button--theme-primary.oneid-is-disabled { color: var(--td-brand-color-disabled); } .oneid-button--variant-text.oneid-button--theme-success { color: var(--td-success-color); } .oneid-button--variant-text.oneid-button--theme-success:hover, .oneid-button--variant-text.oneid-button--theme-success:focus-visible { color: var(--td-success-color-hover); } .oneid-button--variant-text.oneid-button--theme-success.oneid-is-loading { color: var(--td-success-color); } .oneid-button--variant-text.oneid-button--theme-success.oneid-is-disabled { color: var(--td-success-color-disabled); } .oneid-button--variant-text.oneid-button--theme-warning { color: var(--td-warning-color); } .oneid-button--variant-text.oneid-button--theme-warning:hover, .oneid-button--variant-text.oneid-button--theme-warning:focus-visible { color: var(--td-warning-color-hover); } .oneid-button--variant-text.oneid-button--theme-warning.oneid-is-loading { color: var(--td-warning-color); } .oneid-button--variant-text.oneid-button--theme-warning.oneid-is-disabled { color: var(--td-warning-color-disabled); } .oneid-button--variant-text.oneid-button--theme-danger { color: var(--td-error-color); } .oneid-button--variant-text.oneid-button--theme-danger:hover, .oneid-button--variant-text.oneid-button--theme-danger:focus-visible { color: var(--td-error-color-hover); } .oneid-button--variant-text.oneid-button--theme-danger.oneid-is-loading { color: var(--td-error-color); } .oneid-button--variant-text.oneid-button--theme-danger.oneid-is-disabled { color: var(--td-error-color-disabled); } .oneid-button--variant-text.oneid-button--ghost { background: none; color: var(--td-text-color-anti); } .oneid-button--variant-text.oneid-button--ghost:hover, .oneid-button--variant-text.oneid-button--ghost:focus-visible { color: var(--td-brand-color-hover); } .oneid-button--variant-text.oneid-button--ghost:active { color: var(--td-brand-color-active); } .oneid-button--variant-text.oneid-button--ghost.oneid-is-loading { color: var(--td-text-color-anti); } .oneid-button--variant-text.oneid-button--ghost.oneid-is-disabled { color: rgba(255, 255, 255, 0.22); background-color: transparent; } .oneid-button--variant-text.oneid-button--ghost.oneid-button--theme-primary { color: var(--td-brand-color); } .oneid-button--variant-text.oneid-button--ghost.oneid-button--theme-primary:hover, .oneid-button--variant-text.oneid-button--ghost.oneid-button--theme-primary:focus-visible { color: var(--td-brand-color-hover); } .oneid-button--variant-text.oneid-button--ghost.oneid-button--theme-primary:active { color: var(--td-brand-color-active); } .oneid-button--variant-text.oneid-button--ghost.oneid-button--theme-primary.oneid-is-loading { color: var(--td-brand-color); } .oneid-button--variant-text.oneid-button--ghost.oneid-button--theme-primary.oneid-is-disabled { color: rgba(255, 255, 255, 0.22); background-color: transparent; } .oneid-button--variant-text.oneid-button--ghost.oneid-button--theme-success { color: var(--td-success-color); } .oneid-button--variant-text.oneid-button--ghost.oneid-button--theme-success:hover, .oneid-button--variant-text.oneid-button--ghost.oneid-button--theme-success:focus-visible { color: var(--td-success-color-hover); } .oneid-button--variant-text.oneid-button--ghost.oneid-button--theme-success:active { color: var(--td-success-color-active); } .oneid-button--variant-text.oneid-button--ghost.oneid-button--theme-success.oneid-is-loading { color: var(--td-success-color); } .oneid-button--variant-text.oneid-button--ghost.oneid-button--theme-success.oneid-is-disabled { color: rgba(255, 255, 255, 0.22); background-color: transparent; } .oneid-button--variant-text.oneid-button--ghost.oneid-button--theme-warning { color: var(--td-warning-color); } .oneid-button--variant-text.oneid-button--ghost.oneid-button--theme-warning:hover, .oneid-button--variant-text.oneid-button--ghost.oneid-button--theme-warning:focus-visible { color: var(--td-warning-color-hover); } .oneid-button--variant-text.oneid-button--ghost.oneid-button--theme-warning:active { color: var(--td-warning-color-active); } .oneid-button--variant-text.oneid-button--ghost.oneid-button--theme-warning.oneid-is-loading { color: var(--td-warning-color); } .oneid-button--variant-text.oneid-button--ghost.oneid-button--theme-warning.oneid-is-disabled { color: rgba(255, 255, 255, 0.22); background-color: transparent; } .oneid-button--variant-text.oneid-button--ghost.oneid-button--theme-danger { color: var(--td-error-color); } .oneid-button--variant-text.oneid-button--ghost.oneid-button--theme-danger:hover, .oneid-button--variant-text.oneid-button--ghost.oneid-button--theme-danger:focus-visible { color: var(--td-error-color-hover); } .oneid-button--variant-text.oneid-button--ghost.oneid-button--theme-danger:active { color: var(--td-error-color-active); } .oneid-button--variant-text.oneid-button--ghost.oneid-button--theme-danger.oneid-is-loading { color: var(--td-error-color); } .oneid-button--variant-text.oneid-button--ghost.oneid-button--theme-danger.oneid-is-disabled { color: rgba(255, 255, 255, 0.22); background-color: transparent; } .oneid-button.oneid-is-loading, .oneid-button.oneid-is-disabled { cursor: not-allowed; } .oneid-button.oneid-size-s { height: var(--td-comp-size-xs); font: var(--td-font-body-small); padding-left: calc(var(--td-comp-paddingLR-s) - 1px); padding-right: calc(var(--td-comp-paddingLR-s) - 1px); } .oneid-button.oneid-size-s .oneid-icon, .oneid-button.oneid-size-s .oneid-loading { font-size: var(--td-font-size-body-medium); } .oneid-button.oneid-size-l { height: var(--td-comp-size-xl); font: var(--td-font-body-large); padding-left: calc(var(--td-comp-paddingLR-xl) - 1px); padding-right: calc(var(--td-comp-paddingLR-xl) - 1px); } .oneid-button.oneid-size-l .oneid-icon, .oneid-button.oneid-size-l .oneid-loading { font-size: var(--td-font-size-title-large); } .oneid-button--shape-square { width: var(--td-comp-size-m); padding: 0; } .oneid-button--shape-square.oneid-size-s { width: var(--td-comp-size-xs); padding: 0; } .oneid-button--shape-square.oneid-size-l { width: var(--td-comp-size-xl); padding: 0; } .oneid-button--shape-round { border-radius: var(--td-radius-round); } .oneid-button--shape-round.oneid-size-s { border-radius: calc(var(--td-comp-size-xs) / 2); } .oneid-button--shape-round.oneid-size-l { border-radius: calc(var(--td-comp-size-xl) / 2); } .oneid-button--shape-circle { width: var(--td-comp-size-m); padding: 0; text-align: center; border-radius: calc(var(--td-comp-size-m) / 2); } .oneid-button--shape-circle .oneid-icon { font-size: var(--td-font-size-body-large); } .oneid-button--shape-circle .oneid-loading { font-size: var(--td-font-size-body-large); } .oneid-button--shape-circle.oneid-size-s { width: var(--td-comp-size-xs); border-radius: calc(var(--td-comp-size-xs) / 2); } .oneid-button--shape-circle.oneid-size-l { width: var(--td-comp-size-xl); padding: 0; border-radius: calc(var(--td-comp-size-xl) / 2); } .oneid-button.oneid-size-full-width { display: -webkit-box; display: -ms-flexbox; display: flex; width: 100%; } .oneid-button--ghost { --ripple-color: var(--td-gray-color-10); } .oneid-button:not(.oneid-is-disabled):not(.oneid-button--ghost) { --ripple-color: var(--td-bg-color-container-active); } .oneid-button--variant-base:not(.oneid-is-disabled):not(.oneid-button--ghost) { --ripple-color: var(--td-bg-color-component-active); } .oneid-button--variant-base.oneid-button--theme-primary:not(.oneid-is-disabled):not(.oneid-button--ghost) { --ripple-color: var(--td-brand-color-active); } .oneid-button--variant-base.oneid-button--theme-success:not(.oneid-is-disabled):not(.oneid-button--ghost) { --ripple-color: var(--td-success-color-active); } .oneid-button--variant-base.oneid-button--theme-warning:not(.oneid-is-disabled):not(.oneid-button--ghost) { --ripple-color: var(--td-warning-color-active); } .oneid-button--variant-base.oneid-button--theme-danger:not(.oneid-is-disabled):not(.oneid-button--ghost) { --ripple-color: var(--td-error-color-active); } .input-readonly.oneid-is-readonly { color: var(--td-text-color-primary); background-color: var(--td-bg-color-specialcomponent); } .input-readonly.oneid-is-readonly .oneid-input__inner { cursor: pointer; } .input-disabled.oneid-is-disabled { color: var(--td-text-color-disabled); background-color: var(--td-bg-color-component-disabled); } .input-disabled.oneid-is-disabled:hover { border-color: var(--td-border-level-2-color); } .input-disabled.oneid-is-disabled .oneid-input__inner { cursor: not-allowed; color: var(--td-text-color-disabled); text-overflow: initial; } .input-disabled.oneid-is-disabled .oneid-input__inner::-webkit-input-placeholder { color: var(--td-text-color-disabled); } .input-disabled.oneid-is-disabled .oneid-input__inner::-moz-placeholder { color: var(--td-text-color-disabled); } .input-disabled.oneid-is-disabled .oneid-input__inner:-ms-input-placeholder { color: var(--td-text-color-disabled); } .input-disabled.oneid-is-disabled .oneid-input__inner::-ms-input-placeholder { color: var(--td-text-color-disabled); } .input-disabled.oneid-is-disabled .oneid-input__inner::placeholder { color: var(--td-text-color-disabled); } .input-disabled.oneid-is-disabled > .oneid-input__prefix .oneid-icon, .input-disabled.oneid-is-disabled > .oneid-input__suffix .oneid-icon { color: var(--td-text-color-disabled); } .input-disabled.oneid-is-disabled > .oneid-input__prefix .oneid-icon:hover, .input-disabled.oneid-is-disabled > .oneid-input__suffix .oneid-icon:hover { color: var(--td-text-color-disabled); } .oneid-tips { font-size: var(--td-font-size-body-small); } .oneid-tips.oneid-is-default { color: var(--td-text-color-placeholder); } .oneid-tips.oneid-is-error { color: var(--td-error-color); } .oneid-tips.oneid-is-warning { color: var(--td-warning-color); } .oneid-tips.oneid-is-success { color: var(--td-success-color); } .oneid-input { margin: 0; padding: 0; list-style: none; position: relative; height: var(--td-comp-size-m); border-width: 1px; border-style: solid; border-radius: var(--td-radius-default); border-color: var(--td-border-level-2-color); padding: 0 var(--td-comp-paddingLR-s); background-color: var(--td-bg-color-specialcomponent); outline: none; color: var(--td-text-color-primary); font: var(--td-font-body-medium); width: 100%; -webkit-box-sizing: border-box; box-sizing: border-box; -webkit-transition: border cubic-bezier(0.38, 0, 0.24, 1) 0.2s, background-color cubic-bezier(0.38, 0, 0.24, 1) 0.2s, -webkit-box-shadow cubic-bezier(0.38, 0, 0.24, 1) 0.2s; transition: border cubic-bezier(0.38, 0, 0.24, 1) 0.2s, background-color cubic-bezier(0.38, 0, 0.24, 1) 0.2s, -webkit-box-shadow cubic-bezier(0.38, 0, 0.24, 1) 0.2s; transition: border cubic-bezier(0.38, 0, 0.24, 1) 0.2s, box-shadow cubic-bezier(0.38, 0, 0.24, 1) 0.2s, background-color cubic-bezier(0.38, 0, 0.24, 1) 0.2s; transition: border cubic-bezier(0.38, 0, 0.24, 1) 0.2s, box-shadow cubic-bezier(0.38, 0, 0.24, 1) 0.2s, background-color cubic-bezier(0.38, 0, 0.24, 1) 0.2s, -webkit-box-shadow cubic-bezier(0.38, 0, 0.24, 1) 0.2s; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; overflow: hidden; } .oneid-input:hover { border-color: var(--td-brand-color); } .oneid-input:focus { z-index: 1; border-color: var(--td-brand-color); -webkit-box-shadow: 0 0 0 2px var(--td-brand-color-focus); box-shadow: 0 0 0 2px var(--td-brand-color-focus); } .oneid-input--borderless:not(.oneid-input--focused) { border-color: transparent; -webkit-transition: border cubic-bezier(0.38, 0, 0.24, 1) 0.2s, background-color cubic-bezier(0.38, 0, 0.24, 1) 0.2s, -webkit-box-shadow cubic-bezier(0.38, 0, 0.24, 1) 0.2s; transition: border cubic-bezier(0.38, 0, 0.24, 1) 0.2s, background-color cubic-bezier(0.38, 0, 0.24, 1) 0.2s, -webkit-box-shadow cubic-bezier(0.38, 0, 0.24, 1) 0.2s; transition: border cubic-bezier(0.38, 0, 0.24, 1) 0.2s, box-shadow cubic-bezier(0.38, 0, 0.24, 1) 0.2s, background-color cubic-bezier(0.38, 0, 0.24, 1) 0.2s; transition: border cubic-bezier(0.38, 0, 0.24, 1) 0.2s, box-shadow cubic-bezier(0.38, 0, 0.24, 1) 0.2s, background-color cubic-bezier(0.38, 0, 0.24, 1) 0.2s, -webkit-box-shadow cubic-bezier(0.38, 0, 0.24, 1) 0.2s; } .oneid-input--borderless:not(.oneid-input--focused):hover { border-color: var(--td-component-border); background-color: var(--td-bg-color-container-hover); cursor: pointer; } .oneid-input--borderless:not(.oneid-input--focused).oneid-is-disabled { border: none; background-color: var(--td-bg-color-component-disabled); } .oneid-input--focused { border-color: var(--td-brand-color); -webkit-box-shadow: 0 0 0 2px var(--td-brand-color-focus); box-shadow: 0 0 0 2px var(--td-brand-color-focus); z-index: 1; } .oneid-input :focus-visible { outline: none; } .oneid-input__inner { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; border: none; outline: none; padding: 0; max-width: 100%; min-width: 0; color: var(--td-text-color-primary); font: inherit; background-color: transparent; -webkit-box-sizing: border-box; box-sizing: border-box; white-space: nowrap; word-wrap: normal; overflow: hidden; text-overflow: ellipsis; } .oneid-input__inner::-webkit-input-placeholder { color: var(--td-text-color-placeholder); } .oneid-input__inner::-moz-placeholder { color: var(--td-text-color-placeholder); } .oneid-input__inner:-ms-input-placeholder { color: var(--td-text-color-placeholder); } .oneid-input__inner::-ms-input-placeholder { color: var(--td-text-color-placeholder); } .oneid-input__inner::placeholder { color: var(--td-text-color-placeholder); } .oneid-input__inner:-moz-placeholder { text-overflow: ellipsis; width: 100%; } .oneid-input__inner:-ms-input-placeholder { text-overflow: ellipsis; width: 100%; } .oneid-input__inner:placeholder-shown { text-overflow: ellipsis; width: 100%; } .oneid-input__inner[type=password]::-ms-reveal { display: none; } .oneid-input__inner[type=search]::-webkit-search-decoration, .oneid-input__inner[type=search]::-webkit-search-cancel-button, .oneid-input__inner[type=search]::-webkit-search-results-button, .oneid-input__inner[type=search]::-webkit-search-results-decoration { -webkit-appearance: none; appearance: none; } .oneid-input__inner.oneid-input--soft-hidden { width: 0; } .oneid-input__extra { font: var(--td-font-body-small); color: var(--td-text-color-placeholder); } .oneid-input__status { position: absolute; right: -24px; top: 0; } .oneid-input.oneid-input--suffix > span.oneid-input__clear { opacity: 0; visibility: hidden; -webkit-transition: border cubic-bezier(0.38, 0, 0.24, 1) 0.2s, background-color cubic-bezier(0.38, 0, 0.24, 1) 0.2s, -webkit-box-shadow cubic-bezier(0.38, 0, 0.24, 1) 0.2s; transition: border cubic-bezier(0.38, 0, 0.24, 1) 0.2s, background-color cubic-bezier(0.38, 0, 0.24, 1) 0.2s, -webkit-box-shadow cubic-bezier(0.38, 0, 0.24, 1) 0.2s; transition: border cubic-bezier(0.38, 0, 0.24, 1) 0.2s, box-shadow cubic-bezier(0.38, 0, 0.24, 1) 0.2s, background-color cubic-bezier(0.38, 0, 0.24, 1) 0.2s; transition: border cubic-bezier(0.38, 0, 0.24, 1) 0.2s, box-shadow cubic-bezier(0.38, 0, 0.24, 1) 0.2s, background-color cubic-bezier(0.38, 0, 0.24, 1) 0.2s, -webkit-box-shadow cubic-bezier(0.38, 0, 0.24, 1) 0.2s; } .oneid-input.oneid-input--suffix:hover > span.oneid-input__clear { opacity: 1; visibility: visible; } .oneid-input.oneid-is-success { border-color: var(--td-success-color); } .oneid-input.oneid-is-success:focus { -webkit-box-shadow: 0 0 0 2px var(--td-success-color-focus); box-shadow: 0 0 0 2px var(--td-success-color-focus); } .oneid-input.oneid-is-success.oneid-input--focused { -webkit-box-shadow: 0 0 0 2px var(--td-success-color-focus); box-shadow: 0 0 0 2px var(--td-success-color-focus); } .oneid-input.oneid-is-success > .oneid-input__extra { color: var(--td-success-color); } .oneid-input.oneid-is-warning { border-color: var(--td-warning-color); } .oneid-input.oneid-is-warning:focus { -webkit-box-shadow: 0 0 0 2px var(--td-warning-color-focus); box-shadow: 0 0 0 2px var(--td-warning-color-focus); } .oneid-input.oneid-is-warning.oneid-input--focused { -webkit-box-shadow: 0 0 0 2px var(--td-warning-color-focus); box-shadow: 0 0 0 2px var(--td-warning-color-focus); } .oneid-input.oneid-is-warning > .oneid-input__extra { color: var(--td-warning-color); } .oneid-input.oneid-is-error { border-color: var(--td-error-color); } .oneid-input.oneid-is-error:focus { -webkit-box-shadow: 0 0 0 2px var(--td-error-color-focus); box-shadow: 0 0 0 2px var(--td-error-color-focus); } .oneid-input.oneid-is-error.oneid-input--focused { -webkit-box-shadow: 0 0 0 2px var(--td-error-color-focus); box-shadow: 0 0 0 2px var(--td-error-color-focus); } .oneid-input.oneid-is-error > .oneid-input__extra { color: var(--td-error-color); } .oneid-input.oneid-is-readonly { color: var(--td-text-color-primary); background-color: var(--td-bg-color-specialcomponent); } .oneid-input.oneid-is-readonly .oneid-input__inner { cursor: pointer; } .oneid-input.oneid-is-disabled { color: var(--td-text-color-disabled); background-color: var(--td-bg-color-component-disabled); } .oneid-input.oneid-is-disabled:hover { border-color: var(--td-border-level-2-color); } .oneid-input.oneid-is-disabled .oneid-input__inner { cursor: not-allowed; color: var(--td-text-color-disabled); text-overflow: initial; } .oneid-input.oneid-is-disabled .oneid-input__inner::-webkit-input-placeholder { color: var(--td-text-color-disabled); } .oneid-input.oneid-is-disabled .oneid-input__inner::-moz-placeholder { color: var(--td-text-color-disabled); } .oneid-input.oneid-is-disabled .oneid-input__inner:-ms-input-placeholder { color: var(--td-text-color-disabled); } .oneid-input.oneid-is-disabled .oneid-input__inner::-ms-input-placeholder { color: var(--td-text-color-disabled); } .oneid-input.oneid-is-disabled .oneid-input__inner::placeholder { color: var(--td-text-color-disabled); } .oneid-input.oneid-is-disabled > .oneid-input__prefix .oneid-icon, .oneid-input.oneid-is-disabled > .oneid-input__suffix .oneid-icon { color: var(--td-text-color-disabled); } .oneid-input.oneid-is-disabled > .oneid-input__prefix .oneid-icon:hover, .oneid-input.oneid-is-disabled > .oneid-input__suffix .oneid-icon:hover { color: var(--td-text-color-disabled); } .oneid-input.oneid-input--prefix > .oneid-input__prefix { z-index: 2; height: 100%; text-align: center; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .oneid-input.oneid-input--prefix > .oneid-input__prefix-icon { font-size: var(--td-font-size-body-large); } .oneid-input.oneid-input--suffix > .oneid-input__suffix { z-index: 2; height: 100%; text-align: center; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .oneid-input.oneid-input--suffix > .oneid-input__suffix-icon { font-size: var(--td-font-size-body-large); } .oneid-input .oneid-input__suffix-clear { cursor: pointer; } .oneid-input.oneid-size-l { height: var(--td-comp-size-xl); font: var(--td-font-body-large); padding: var(--td-comp-paddingTB-m) var(--td-comp-paddingLR-m); } .oneid-input.oneid-size-s { height: var(--td-comp-size-xs); font: var(--td-font-body-small); } .oneid-input .oneid-input__prefix > .oneid-icon, .oneid-input .oneid-input__suffix > .oneid-icon { font-size: inherit; } .oneid-input .oneid-input__prefix > .oneid-icon { font-size: 16px; color: var(--td-text-color-placeholder); } .oneid-input .oneid-input__prefix:not(:empty) { margin-right: var(--td-comp-margin-s); } .oneid-input .oneid-input__suffix > .oneid-icon { color: var(--td-text-color-placeholder); -webkit-transition: all 0.2s linear; transition: all 0.2s linear; } .oneid-input .oneid-input__suffix > .oneid-icon:hover { color: var(--td-text-color-secondary); -webkit-transition: all 0.2s linear; transition: all 0.2s linear; } .oneid-input .oneid-input__suffix:not(:empty) { margin-left: var(--td-comp-margin-s); } .oneid-input.oneid-is-focused .oneid-input__prefix > .oneid-icon { color: var(--td-brand-color); } .oneid-input.oneid-is-focused .oneid-input__suffix > .oneid-icon-time, .oneid-input.oneid-is-focused .oneid-input__suffix .oneid-icon-calendar { color: var(--td-brand-color); } .oneid-input-group { position: relative; display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-align: stretch; -ms-flex-align: stretch; align-items: stretch; } .oneid-input-group .oneid-input__wrap { border-radius: 0; } .oneid-input-group .oneid-input__wrap:first-child { border-radius: var(--td-radius-default) 0 0 var(--td-radius-default); } .oneid-input-group .oneid-input__wrap:last-child { border-radius: 0 var(--td-radius-default) var(--td-radius-default) 0; } .oneid-input-group .oneid-button, .oneid-input-group .oneid-select { border-radius: 0; } .oneid-input-group .oneid-button:not(:first-child), .oneid-input-group .oneid-select:not(:first-child) { margin-left: -1px; } .oneid-input-group .oneid-input__wrap:not(:first-child) .oneid-input { margin-left: -1px; } .oneid-input-group .oneid-input__wrap:first-child .oneid-input { border-radius: var(--td-radius-default) 0 0 var(--td-radius-default); } .oneid-input-group .oneid-input__wrap:last-child .oneid-input { border-radius: 0 var(--td-radius-default) var(--td-radius-default) 0; } .oneid-input-group .oneid-button:first-child, .oneid-input-group .oneid-select:first-child { border-radius: var(--td-radius-default) 0 0 var(--td-radius-default); } .oneid-input-group .oneid-button:last-child, .oneid-input-group .oneid-select:last-child { border-radius: 0 var(--td-radius-default) var(--td-radius-default) 0; } .oneid-input-group--separate .oneid-input__wrap + .oneid-input__wrap { margin-left: var(--td-comp-margin-xxxl); } .oneid-input-group--separate .oneid-button, .oneid-input-group--separate .oneid-select { border-radius: var(--td-radius-default); } .oneid-input-group--separate .oneid-button:first-child, .oneid-input-group--separate .oneid-select:first-child { border-radius: var(--td-radius-default) 0 0 var(--td-radius-default); } .oneid-input-group--separate .oneid-button:last-child, .oneid-input-group--separate .oneid-select:last-child { border-radius: 0 var(--td-radius-default) var(--td-radius-default) 0; } .oneid-input-group--separate .oneid-input__wrap .oneid-input { border-radius: var(--td-radius-default); } .oneid-input-group--separate .oneid-input__wrap .oneid-input:first-child { border-radius: var(--td-radius-default); } .oneid-input-group--separate .oneid-input__wrap .oneid-input:last-child { border-radius: var(--td-radius-default); } .oneid-input-group .oneid-input__inner, .oneid-input-group .oneid-button, .oneid-input-group .oneid-select { position: relative; z-index: 0; } .oneid-input-group .oneid-input__inner:hover, .oneid-input-group .oneid-button:hover, .oneid-input-group .oneid-select:hover, .oneid-input-group .oneid-input__inner:focus, .oneid-input-group .oneid-button:focus, .oneid-input-group .oneid-select:focus, .oneid-input-group .oneid-input__inner:active, .oneid-input-group .oneid-button:active, .oneid-input-group .oneid-select:active { z-index: 1; } .oneid-input__wrap { width: 100%; } .oneid-input__tips { height: auto; min-height: var(--td-line-height-body-small); font: var(--td-font-body-small); position: absolute; } .oneid-input__tips--default { color: var(--td-text-color-placeholder); } .oneid-input__tips--success { color: var(--td-success-color); } .oneid-input__tips--warning { color: var(--td-warning-color); } .oneid-input__tips--error { color: var(--td-error-color); } .oneid-align-center > .oneid-input__inner { text-align: center; } .oneid-align-right > .oneid-input__inner { text-align: right; } .oneid-input__input-pre { position: absolute; visibility: hidden; white-space: pre; display: block; } .oneid-input--auto-width { width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; min-width: 60px; } .oneid-input__limit-number { font: var(--td-font-body-medium); color: var(--td-text-color-placeholder); background: var(--td-bg-color-specialcomponent); } .oneid-input__limit-number.oneid-is-disabled { background: var(--td-bg-color-component-disabled); } .oneid-input-adornment { font: var(--td-font-body-medium); color: var(--td-text-color-primary); -webkit-box-sizing: border-box; box-sizing: border-box; margin: 0; padding: 0; list-style: none; display: -webkit-box; display: -ms-flexbox; display: flex; } .oneid-input-adornment__prepend .oneid-input, .oneid-input-adornment__append .oneid-input, .oneid-input-adornment__prepend .oneid-textarea__inner, .oneid-input-adornment__append .oneid-textarea__inner { background-color: transparent; } .oneid-input-adornment__prepend { background-color: var(--td-bg-color-secondarycontainer); color: var(--td-text-color-primary); word-break: keep-all; margin-right: -1px; } .oneid-input-adornment__append { background-color: var(--td-bg-color-secondarycontainer); color: var(--td-text-color-primary); word-break: keep-all; margin-left: -1px; } .oneid-input-adornment__text { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; height: 100%; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-sizing: border-box; box-sizing: border-box; white-space: nowrap; padding: 0 var(--td-comp-paddingLR-s); border: 1px solid var(--td-border-level-2-color); } .oneid-input-adornment > :first-child { border-radius: var(--td-radius-default) 0 0 var(--td-radius-default); } .oneid-input-adornment > :first-child .oneid-input, .oneid-input-adornment > :first-child .oneid-input-adornment__text, .oneid-input-adornment > :first-child .oneid-textarea__inner { border-radius: var(--td-radius-default) 0 0 var(--td-radius-default); } .oneid-input-adornment > :last-child { border-radius: 0 var(--td-radius-default) var(--td-radius-default) 0; } .oneid-input-adornment > :last-child .oneid-input, .oneid-input-adornment > :last-child .oneid-input-adornment__text, .oneid-input-adornment > :last-child .oneid-textarea__inner { border-radius: 0 var(--td-radius-default) var(--td-radius-default) 0; } .oneid-input-adornment > :not(:last-child):hover { z-index: 2; } .oneid-input-adornment > :not(:first-child):not(:last-child) .oneid-input, .oneid-input-adornment > :not(:first-child):not(:last-child) .oneid-textarea__inner { border-radius: 0; } /* Alert */ .oneid-alert { font: var(--td-font-body-medium); color: var(--td-text-color-primary); -webkit-box-sizing: border-box; box-sizing: border-box; margin: 0; padding: 0; list-style: none; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; padding: var(--td-comp-paddingTB-l) var(--td-comp-paddingLR-xl); opacity: 1; -webkit-transition: opacity 0.2s; transition: opacity 0.2s; border-radius: var(--td-radius-medium); } .oneid-alert.oneid-is-hidden { /* 隐藏 */ display: none; } .oneid-alert--closing { opacity: 0; } .oneid-alert--info { background-color: var(--td-brand-color-focus); } .oneid-alert--info .oneid-alert__icon { color: var(--td-brand-color); } .oneid-alert--info .oneid-alert__swiper-trigger-wrap { color: var(--td-brand-color); } .oneid-alert--info .oneid-alert__swiper-trigger--active { color: var(--td-brand-color); } .oneid-alert--success { background-color: var(--td-success-color-focus); } .oneid-alert--success .oneid-alert__icon { color: var(--td-success-color); } .oneid-alert--success .oneid-alert__swiper-trigger-wrap { color: var(--td-success-color-focus); } .oneid-alert--success .oneid-alert__swiper-trigger--active { color: var(--td-success-color); } .oneid-alert--warning { background-color: var(--td-warning-color-focus); } .oneid-alert--warning .oneid-alert__icon { color: var(--td-warning-color); } .oneid-alert--warning .oneid-alert__swiper-trigger-wrap { color: var(--td-warning-color-focus); } .oneid-alert--warning .oneid-alert__swiper-trigger--active { color: var(--td-warning-color); } .oneid-alert--error { background-color: var(--td-error-color-focus); } .oneid-alert--error .oneid-alert__icon { color: var(--td-error-color); } .oneid-alert--error .oneid-alert__swiper-trigger-wrap { color: var(--td-error-color-focus); } .oneid-alert--error .oneid-alert__swiper-trigger--active { color: var(--td-error-color); } .oneid-alert__icon { font-size: var(--td-line-height-body-medium); display: inherit; } .oneid-alert__icon, .oneid-alert__close { -webkit-box-flex: 0; -ms-flex: 0 0 auto; flex: 0 0 auto; line-height: var(--td-line-height-body-small); } .oneid-alert__content { -webkit-box-flex: 1; -ms-flex: 1 1 0px; flex: 1 1 0; font-size: var(--td-font-size-body-medium); line-height: var(--td-line-height-body-medium); overflow: hidden; } .oneid-alert__title, .oneid-alert__message { width: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; } .oneid-alert__title { color: var(--td-text-color-primary); font-weight: bold; } .oneid-alert__title + .oneid-alert__message { margin-top: var(--td-comp-margin-s); } .oneid-alert__description { color: var(--td-text-color-secondary); -webkit-box-flex: 0; -ms-flex: 0 1 auto; flex: 0 1 auto; -webkit-transition: height 0.2s; transition: height 0.2s; } .oneid-alert__operation { -webkit-box-flex: 0; -ms-flex: 0 0 auto; flex: 0 0 auto; padding: 0 var(--td-comp-paddingLR-s); color: var(--td-brand-color); cursor: pointer; -webkit-transition: color 0.2s; transition: color 0.2s; } .oneid-alert__operation:hover { color: var(--td-brand-color-hover); } .oneid-alert__operation:active { color: var(--td-brand-color-active); } .oneid-alert__icon + .oneid-alert__content { margin-left: var(--td-comp-margin-s); } .oneid-alert__collapse { margin-top: var(--td-comp-margin-s); color: var(--td-brand-color); cursor: pointer; } .oneid-alert__close { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; margin-left: var(--td-comp-margin-l); color: var(--td-text-color-secondary); cursor: pointer; -webkit-transition: color 0.2s; transition: color 0.2s; } .oneid-alert__close:hover { color: var(--td-text-color-primary); } .oneid-alert__close > .oneid-icon { font-size: calc(var(--td-line-height-body-medium) - 2px); padding: calc((var(--td-line-height-body-medium) - (var(--td-line-height-body-medium) - 2px)) / 2) 0; } .oneid-badge { font: var(--td-font-body-medium); color: var(--td-text-color-primary); -webkit-box-sizing: border-box; box-sizing: border-box; margin: 0; padding: 0; list-style: none; position: relative; display: inline-block; } .oneid-badge--dot, .oneid-badge--circle, .oneid-badge--round { position: absolute; top: 0; right: 0; color: var(--td-text-color-anti); text-align: center; font: var(--td-font-body-small); -webkit-transform: translate(50%, -50%); transform: translate(50%, -50%); -webkit-transform-origin: 100% 0; transform-origin: 100% 0; -webkit-box-sizing: content-box; box-sizing: content-box; } .oneid-badge--static { position: static; display: inline-block; -webkit-transform: none; transform: none; } .oneid-badge--dot { right: 1px; margin-top: 1px; width: 6px; height: 6px; border-radius: var(--td-radius-circle); background-color: var(--td-error-color); } .oneid-badge--circle, .oneid-badge--round { padding-right: calc((var(--td-comp-size-xxs) - 8px) / 2); padding-left: calc((var(--td-comp-size-xxs) - 8px) / 2); min-width: 8px; height: var(--td-comp-size-xxs); background-color: var(--td-error-color); line-height: var(--td-comp-size-xxs); } .oneid-badge--circle.oneid-size-s, .oneid-badge--round.oneid-size-s { padding-right: calc((var(--td-comp-size-xxxs) - 8px) / 2); padding-left: calc((var(--td-comp-size-xxxs) - 8px) / 2); min-width: 8px; height: var(--td-comp-size-xxxs); line-height: var(--td-comp-size-xxxs); } .oneid-badge--circle { border-radius: calc(var(--td-comp-size-xxs) / 2); } .oneid-badge--round { border-radius: var(--td-radius-default); } .oneid-radio-group { font: var(--td-font-body-medium); color: var(--td-text-color-primary); -webkit-box-sizing: border-box; box-sizing: border-box; margin: 0; padding: 0; list-style: none; display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; max-width: 100%; border-radius: var(--td-radius-default); -ms-flex-wrap: wrap; flex-wrap: wrap; } @-moz-document url-prefix() { .oneid-radio-group { scrollbar-color: var(--td-scrollbar-color) transparent; scrollbar-width: thin; } } .oneid-radio-group::-webkit-scrollbar { width: 4px; height: 4px; } .oneid-radio-group::-webkit-scrollbar-thumb { border: 0px solid transparent; background-clip: content-box; background-color: var(--td-scrollbar-color); border-radius: 7px; } .oneid-radio-group::-webkit-scrollbar-thumb:vertical:hover, .oneid-radio-group::-webkit-scrollbar-thumb:horizontal:hover { background-color: var(--td-scrollbar-hover-color); } .oneid-radio-group .oneid-radio { margin-right: var(--td-comp-margin-xxl); } .oneid-radio-group.oneid-radio-group__outline { -ms-flex-wrap: wrap; flex-wrap: wrap; row-gap: var(--td-comp-margin-xs); } .oneid-radio-group.oneid-radio-group__outline.oneid-size-s .oneid-radio-button { height: var(--td-comp-size-xs); } .oneid-radio-group.oneid-radio-group__outline.oneid-size-m .oneid-radio-button { height: var(--td-comp-size-m); } .oneid-radio-group.oneid-radio-group__outline.oneid-size-l .oneid-radio-button { height: var(--td-comp-size-xl); } .oneid-radio-group.oneid-radio-group__outline .oneid-radio-button:first-child { border-radius: var(--td-radius-default) 0 0 var(--td-radius-default); } .oneid-radio-group.oneid-radio-group__outline .oneid-radio-button:last-child { border-radius: 0 var(--td-radius-default) var(--td-radius-default) 0; } .oneid-radio-group.oneid-radio-group__outline .oneid-radio-button:only-child { border-radius: var(--td-radius-default); } .oneid-radio-group.oneid-radio-group__outline .oneid-radio-button.oneid-is-checked { color: var(--td-brand-color); } .oneid-radio-group.oneid-radio-group__outline .oneid-radio-button.oneid-is-disabled.oneid-is-checked { color: var(--td-brand-color-disabled); border-color: var(--td-brand-color-disabled); background-color: var(--td-bg-color-specialcomponent); } .oneid-radio-group.oneid-radio-group--filled { border-color: var(--td-bg-color-component); padding: var(--td-comp-paddingTB-xxs) var(--td-comp-paddingLR-xxs); border-radius: var(--td-radius-default); background-color: var(--td-bg-color-component); position: relative; } .oneid-radio-group.oneid-radio-group--filled .oneid-radio-group__bg-block { position: absolute; left: 2px; top: 2px; width: 0; height: calc(100% - 4px); background-color: var(--td-bg-color-container-select); -webkit-transition: all 0.2s cubic-bezier(0.38, 0, 0.24, 1); transition: all 0.2s cubic-bezier(0.38, 0, 0.24, 1); border-radius: var(--td-radius-small); } .oneid-radio-group.oneid-radio-group--filled .oneid-radio-button { color: var(--td-text-color-secondary); border: 0; background-color: transparent; } .oneid-radio-group.oneid-radio-group--filled .oneid-radio-button:hover { color: var(--td-text-color-primary); } .oneid-radio-group.oneid-radio-group--filled .oneid-radio-button::before { content: ""; position: absolute; left: 0px; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); width: 1px; height: calc(100% - 16px); background-color: var(--td-component-border); -webkit-transition: opacity 0.2s cubic-bezier(0, 0, 0.15, 1); transition: opacity 0.2s cubic-bezier(0, 0, 0.15, 1); } .oneid-radio-group.oneid-radio-group--filled .oneid-radio-button:first-child::before { opacity: 0; } .oneid-radio-group.oneid-radio-group--filled .oneid-radio-button.oneid-is-checked { position: relative; color: var(--td-text-color-primary); z-index: 1; border: 0; -webkit-transition: color 0.2s linear; transition: color 0.2s linear; } .oneid-radio-group.oneid-radio-group--filled .oneid-radio-button.oneid-is-checked::before { opacity: 0; } .oneid-radio-group.oneid-radio-group--filled .oneid-radio-button.oneid-is-checked + label::before { opacity: 0; } .oneid-radio-group.oneid-radio-group--filled .oneid-radio-button.oneid-is-disabled { background-color: transparent; } .oneid-radio-group.oneid-radio-group--filled .oneid-radio-button.oneid-is-disabled.oneid-is-checked { color: var(--td-text-color-disabled); } .oneid-radio-group.oneid-radio-group--filled .oneid-radio-button.oneid-is-disabled.oneid-is-checked ~ .oneid-radio-group__bg-block { background-color: var(--td-bg-color-component-disabled); } .oneid-radio-group.oneid-radio-group--primary-filled .oneid-radio-group__bg-block { background-color: var(--td-brand-color); } .oneid-radio-group.oneid-radio-group--primary-filled .oneid-radio-button.oneid-is-checked { color: var(--td-text-color-anti); } .oneid-radio-group.oneid-radio-group--primary-filled .oneid-radio-button.oneid-is-disabled.oneid-is-checked { color: var(--td-text-color-anti); } .oneid-radio-group.oneid-radio-group--primary-filled .oneid-radio-button.oneid-is-disabled.oneid-is-checked ~ .oneid-radio-group__bg-block { background-color: var(--td-brand-color-disabled); } .oneid-radio-group.oneid-size-s .oneid-radio-button { height: calc(var(--td-comp-size-xs) - var(--td-comp-paddingTB-xxs) * 2); padding: 0px var(--td-comp-paddingLR-s); font: var(--td-font-body-small); } .oneid-radio-group.oneid-size-s .oneid-radio-button::before { height: calc(100% - 16px); } .oneid-radio-group.oneid-size-m .oneid-radio-button { height: calc(var(--td-comp-size-m) - var(--td-comp-paddingTB-xxs) * 2); padding: var(--td-comp-paddingTB-xs) var(--td-comp-paddingLR-l); font: var(--td-font-body-medium); } .oneid-radio-group.oneid-size-m .oneid-radio-button::before { height: calc(100% - 20px); } .oneid-radio-group.oneid-size-l .oneid-radio-button { height: calc(var(--td-comp-size-xl) - var(--td-comp-paddingTB-xxs) * 2); padding: var(--td-comp-paddingTB-s) var(--td-comp-paddingLR-xl); font: var(--td-font-body-large); } .oneid-radio-group.oneid-size-l .oneid-radio-button::before { height: calc(100% - 24px); } .oneid-radio-group .oneid-radio-button { cursor: pointer; position: relative; border: 1px solid; border-color: var(--td-border-level-2-color); border-right: 0; display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-transition: color 0.2s cubic-bezier(0, 0, 0.15, 1); transition: color 0.2s cubic-bezier(0, 0, 0.15, 1); color: var(--td-text-color-primary); white-space: nowrap; -webkit-box-sizing: border-box; box-sizing: border-box; } .oneid-radio-group .oneid-radio-button:first-child { border-radius: var(--td-radius-small) 0 0 var(--td-radius-small); } .oneid-radio-group .oneid-radio-button:last-child { border-right: 1px solid; border-right-color: var(--td-border-level-2-color); border-radius: 0 var(--td-radius-small) var(--td-radius-small) 0; } .oneid-radio-group .oneid-radio-button__former { opacity: 0; height: 0; width: 0; font: var(--td-font-body-medium); color: var(--td-text-color-primary); -webkit-box-sizing: border-box; box-sizing: border-box; margin: 0; padding: 0; list-style: none; } .oneid-radio-group .oneid-radio-button:hover { color: var(--td-brand-color); } .oneid-radio-group .oneid-radio-button.oneid-is-checked { border-right: 1px solid; border-color: var(--td-brand-color); -webkit-transition: border-color 0.2s cubic-bezier(0, 0, 0.15, 1); transition: border-color 0.2s cubic-bezier(0, 0, 0.15, 1); } .oneid-radio-group .oneid-radio-button.oneid-is-checked + .oneid-radio-button { border-left: 0; } .oneid-radio-group .oneid-radio-button.oneid-is-disabled { cursor: not-allowed; color: var(--td-text-color-disabled); background-color: var(--td-bg-color-component-disabled); } .oneid-radio-group .oneid-radio-button.oneid-is-disabled:hover { border-color: var(--td-border-level-2-color); color: var(--td-text-color-disabled); } .oneid-radio-group .oneid-radio-button.oneid-is-disabled:hover::after { width: 0; } .oneid-radio-group .oneid-radio-button.oneid-is-disabled.oneid-is-checked { color: var(--td-text-color-disabled); } .oneid-radio-group .oneid-radio-button.oneid-is-disabled.oneid-is-checked::after { width: 0; } .oneid-radio { font: var(--td-font-body-medium); color: var(--td-text-color-primary); -webkit-box-sizing: border-box; box-sizing: border-box; margin: 0; padding: 0; list-style: none; position: relative; cursor: pointer; display: inline-block; } .oneid-radio__former { font: var(--td-font-body-medium); color: var(--td-text-color-primary); -webkit-box-sizing: border-box; box-sizing: border-box; margin: 0; padding: 0; list-style: none; opacity: 0; position: absolute; } .oneid-radio__input { position: relative; display: inline-block; width: 16px; height: 16px; vertical-align: middle; border-radius: var(--td-radius-circle); border: 1px solid var(--td-border-level-2-color); background-color: var(--td-bg-color-container); -webkit-transition: border 0.2s cubic-bezier(0, 0, 0.15, 1); transition: border 0.2s cubic-bezier(0, 0, 0.15, 1); } .oneid-radio__input::after { content: ""; position: absolute; top: 50%; left: 50%; width: 16px; height: 16px; margin-top: -8px; margin-left: -8px; -webkit-transform: scale(0.5); transform: scale(0.5); opacity: 0; border-radius: var(--td-radius-circle); background-color: var(--td-brand-color); -webkit-transition: all 0.2s cubic-bezier(0, 0, 0.15, 1); transition: all 0.2s cubic-bezier(0, 0, 0.15, 1); } .oneid-radio__label { display: inline-block; margin-left: var(--td-comp-margin-s); color: var(--td-text-color-primary); vertical-align: middle; font: var(--td-font-body-medium); white-space: nowrap; } .oneid-radio:hover .oneid-radio__input { border-color: var(--td-brand-color); } .oneid-radio.oneid-is-checked .oneid-radio__input { border-color: var(--td-brand-color); } .oneid-radio.oneid-is-checked .oneid-radio__input::after { opacity: 1; } .oneid-radio.oneid-is-disabled { cursor: not-allowed; } .oneid-radio.oneid-is-disabled .oneid-radio__label { color: var(--td-text-color-disabled); } .oneid-radio.oneid-is-disabled .oneid-radio__input { background-color: var(--td-bg-color-component-disabled); } .oneid-radio.oneid-is-disabled:hover .oneid-radio__input { border-color: var(--td-border-level-2-color); } .oneid-radio.oneid-is-disabled.oneid-is-checked .oneid-radio__input { border-color: var(--td-border-level-2-color); } .oneid-radio.oneid-is-disabled.oneid-is-checked .oneid-radio__input::after { background-color: var(--td-text-color-disabled); } .oneid-radio:focus-visible:focus-visible { outline: 2px solid var(--td-brand-color); outline-offset: var(--td-comp-paddingTB-xs); border-radius: 0; } .oneid-checkbox-group { font: var(--td-font-body-medium); color: var(--td-text-color-primary); -webkit-box-sizing: border-box; box-sizing: border-box; margin: 0; padding: 0; list-style: none; display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -ms-flex-wrap: wrap; flex-wrap: wrap; gap: 16px; } .oneid-checkbox { font: var(--td-font-body-medium); -webkit-box-sizing: border-box; box-sizing: border-box; margin: 0; padding: 0; list-style: none; display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; position: relative; cursor: pointer; color: var(--td-text-color-primary); } .oneid-checkbox + .oneid-checkbox { margin-left: inherit; } .oneid-checkbox__former { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; outline: 0; -webkit-appearance: none; -moz-appearance: none; appearance: none; } .oneid-checkbox__input { position: relative; display: inline-block; width: 16px; height: 16px; vertical-align: middle; border: 1px solid var(--td-border-level-2-color); border-radius: var(--td-radius-default); background-color: var(--td-bg-color-container); -webkit-box-sizing: border-box; box-sizing: border-box; -ms-flex-negative: 0; flex-shrink: 0; } .oneid-checkbox__input::after { content: ""; position: absolute; opacity: 0; -webkit-box-sizing: border-box; box-sizing: border-box; } .oneid-checkbox__label { display: inline-block; margin-left: 8px; vertical-align: middle; font: var(--td-font-body-medium); } .oneid-checkbox:hover .oneid-checkbox__input { border-color: var(--td-brand-color); -webkit-transition: border-color 0.2s linear; transition: border-color 0.2s linear; } .oneid-checkbox.oneid-is-checked .oneid-checkbox__input { border-color: var(--td-brand-color); background-color: var(--td-brand-color); -webkit-transition: background-color 0.2s cubic-bezier(0.82, 0, 1, 0.9); transition: background-color 0.2s cubic-bezier(0.82, 0, 1, 0.9); } .oneid-checkbox.oneid-is-checked .oneid-checkbox__input::after { opacity: 1; top: 6px; left: 3px; width: 5px; height: 9px; border: 2px solid var(--td-text-color-anti); border-radius: 0 0 1px; border-top: 0; border-left: 0; -webkit-transform: rotate(45deg) scale(1) translate(-50%, -50%); transform: rotate(45deg) scale(1) translate(-50%, -50%); background: transparent; } .oneid-checkbox.oneid-is-indeterminate .oneid-checkbox__input { border-color: var(--td-brand-color); background-color: var(--td-brand-color); -webkit-transition: background-color 0.2s cubic-bezier(0.82, 0, 1, 0.9); transition: background-color 0.2s cubic-bezier(0.82, 0, 1, 0.9); } .oneid-checkbox.oneid-is-indeterminate .oneid-checkbox__input::after { opacity: 1; width: 16px; height: 4px; left: -1px; right: 0; top: 5px; border: unset; -webkit-transform: scale(0.5); transform: scale(0.5); background-color: var(--td-font-white-1); } .oneid-checkbox.oneid-is-disabled { cursor: not-allowed; } .oneid-checkbox.oneid-is-disabled .oneid-checkbox__label { color: var(--td-text-color-disabled); } .oneid-checkbox.oneid-is-disabled .oneid-checkbox__input { background-color: var(--td-bg-color-component-disabled); } .oneid-checkbox.oneid-is-disabled:hover .oneid-checkbox__input { border-color: var(--td-border-level-2-color); } .oneid-checkbox.oneid-is-disabled.oneid-is-checked .oneid-checkbox__input { border-color: var(--td-border-level-2-color); } .oneid-checkbox.oneid-is-disabled.oneid-is-checked .oneid-checkbox__input::after { border-color: var(--td-text-color-disabled); } .oneid-checkbox.oneid-is-disabled.oneid-is-indeterminate .oneid-checkbox__input { border-color: var(--td-border-level-2-color); } .oneid-checkbox.oneid-is-disabled.oneid-is-indeterminate .oneid-checkbox__input::after { background-color: var(--td-text-color-disabled); } .oneid-checkbox:focus-visible:focus-visible { outline: 2px solid var(--td-brand-color); outline-offset: var(--td-comp-paddingTB-xs); border-radius: 0; } @-webkit-keyframes t-fade-in { from { opacity: 0; } to { opacity: 1; } } @keyframes t-fade-in { from { opacity: 0; } to { opacity: 1; } } @-webkit-keyframes t-fade-out { from { opacity: 1; } to { opacity: 0; } } @keyframes t-fade-out { from { opacity: 1; } to { opacity: 0; } } @-webkit-keyframes t-spin { from { -webkit-transform: rotate(0deg); transform: rotate(0deg); } to { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @keyframes t-spin { from { -webkit-transform: rotate(0deg); transform: rotate(0deg); } to { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } .oneid-icon-loading { -webkit-animation: t-spin 1s linear infinite; animation: t-spin 1s linear infinite; } @-webkit-keyframes t-zoom-out { from { -webkit-transform: scale(0.2); transform: scale(0.2); } to { -webkit-transform: scale(1); transform: scale(1); } } @keyframes t-zoom-out { from { -webkit-transform: scale(0.2); transform: scale(0.2); } to { -webkit-transform: scale(1); transform: scale(1); } } .oneid-input-number { font: var(--td-font-body-medium); color: var(--td-text-color-primary); margin: 0; padding: 0; list-style: none; display: inline-block; position: relative; -webkit-box-sizing: border-box; box-sizing: border-box; padding: 0 var(--td-comp-size-m); -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; width: 144px; } .oneid-input-number:not(.oneid-input-number--column) > .oneid-input-number__decrease + .oneid-input__wrap { margin-left: var(--td-comp-margin-xs); } .oneid-input-number input::-webkit-outer-spin-button, .oneid-input-number input::-webkit-inner-spin-button { -webkit-appearance: none; appearance: none; } .oneid-input-number input[type=number] { -webkit-appearance: textfield; -moz-appearance: textfield; appearance: textfield; } .oneid-input-number > .oneid-input__tips { position: absolute; left: 0; } .oneid-input-number input + .oneid-input__suffix { margin-left: var(--td-comp-paddingLR-s); } .oneid-input-number .oneid-input__prefix { margin-right: var(--td-comp-paddingLR-s); } .oneid-input-number .oneid-input { color: var(--td-text-color-primary); } .oneid-input-number.oneid-input-number--auto-width { width: auto; } .oneid-input-number.oneid-input-number--auto-width.oneid-is-controls-right { min-width: auto; width: auto; } .oneid-input-number.oneid-input-number--auto-width .oneid-input__inner { min-width: 42px; } .oneid-input-number .oneid-input-number__decrease, .oneid-input-number .oneid-input-number__increase { width: var(--td-comp-size-m); height: var(--td-comp-size-m); position: absolute; top: 0; border: 1px solid var(--td-border-level-2-color); -webkit-box-sizing: border-box; box-sizing: border-box; border-radius: var(--td-radius-default); background-color: transparent; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; z-index: 1; cursor: pointer; -webkit-transition: all cubic-bezier(0.38, 0, 0.24, 1) 0.2s; transition: all cubic-bezier(0.38, 0, 0.24, 1) 0.2s; } .oneid-input-number .oneid-input-number__decrease:hover, .oneid-input-number .oneid-input-number__increase:hover { color: var(--td-brand-color); border-color: var(--td-brand-color); } .oneid-input-number .oneid-input-number__decrease:hover .oneid-icon, .oneid-input-number .oneid-input-number__increase:hover .oneid-icon { color: var(--td-brand-color); } .oneid-input-number .oneid-input-number__decrease:active, .oneid-input-number .oneid-input-number__increase:active { color: var(--td-brand-color); background-color: var(--td-bg-color-container-hover); } .oneid-input-number .oneid-input-number__decrease .oneid-icon, .oneid-input-number .oneid-input-number__increase .oneid-icon { position: relative; z-index: 1; font-size: var(--td-font-size-body-large); color: var(--td-text-color-secondary); } .oneid-input-number .oneid-input-number__decrease.oneid-is-disabled, .oneid-input-number .oneid-input-number__increase.oneid-is-disabled { color: var(--td-text-color-disabled); cursor: no-drop; background-color: var(--td-bg-color-component-disabled); } .oneid-input-number .oneid-input-number__decrease.oneid-is-disabled .oneid-icon, .oneid-input-number .oneid-input-number__increase.oneid-is-disabled .oneid-icon { color: var(--td-text-color-disabled); } .oneid-input-number .oneid-input-number__decrease.oneid-is-disabled:hover, .oneid-input-number .oneid-input-number__increase.oneid-is-disabled:hover { border-color: var(--td-border-level-2-color); } .oneid-input-number .oneid-input-number__decrease.oneid-is-disabled:hover .oneid-icon, .oneid-input-number .oneid-input-number__increase.oneid-is-disabled:hover .oneid-icon { color: var(--td-text-color-disabled); } .oneid-input-number .oneid-input-number__decrease.oneid-is-disabled::-webkit-input-placeholder, .oneid-input-number .oneid-input-number__increase.oneid-is-disabled::-webkit-input-placeholder { color: var(--td-text-color-disabled); } .oneid-input-number .oneid-input-number__decrease.oneid-is-disabled::-moz-placeholder, .oneid-input-number .oneid-input-number__increase.oneid-is-disabled::-moz-placeholder { color: var(--td-text-color-disabled); } .oneid-input-number .oneid-input-number__decrease.oneid-is-disabled:-ms-input-placeholder, .oneid-input-number .oneid-input-number__increase.oneid-is-disabled:-ms-input-placeholder { color: var(--td-text-color-disabled); } .oneid-input-number .oneid-input-number__decrease.oneid-is-disabled::-ms-input-placeholder, .oneid-input-number .oneid-input-number__increase.oneid-is-disabled::-ms-input-placeholder { color: var(--td-text-color-disabled); } .oneid-input-number .oneid-input-number__decrease.oneid-is-disabled::placeholder, .oneid-input-number .oneid-input-number__increase.oneid-is-disabled::placeholder { color: var(--td-text-color-disabled); } .oneid-input-number .oneid-input-number__decrease { left: 0; } .oneid-input-number .oneid-input-number__increase { right: -8px; } .oneid-input-number.oneid-is-disabled .oneid-input { cursor: no-drop; background-color: var(--td-bg-color-component-disabled); color: var(--td-text-color-disabled); } .oneid-input-number.oneid-is-disabled .oneid-input:hover, .oneid-input-number.oneid-is-disabled .oneid-input:focus, .oneid-input-number.oneid-is-disabled .oneid-input:active { border-color: var(--td-border-level-2-color); } .oneid-input-number.oneid-is-disabled .oneid-input-number__decrease, .oneid-input-number.oneid-is-disabled .oneid-input-number__increase { color: var(--td-text-color-disabled); cursor: no-drop; background-color: var(--td-bg-color-component-disabled); } .oneid-input-number.oneid-is-disabled .oneid-input-number__decrease .oneid-icon, .oneid-input-number.oneid-is-disabled .oneid-input-number__increase .oneid-icon { color: var(--td-text-color-secondary); } .oneid-input-number.oneid-size-s { width: 120px; padding: 0 var(--td-comp-size-xs); } .oneid-input-number.oneid-size-s .oneid-input { font-size: var(--td-font-size-body-small); height: var(--td-comp-size-xs); line-height: var(--td-comp-size-xs); } .oneid-input-number.oneid-size-s .oneid-input-number__decrease, .oneid-input-number.oneid-size-s .oneid-input-number__increase { font-size: var(--td-font-size-body-medium); width: var(--td-comp-size-xs); height: var(--td-comp-size-xs); } .oneid-input-number.oneid-size-l { width: 168px; padding: 0 var(--td-comp-size-xl); } .oneid-input-number.oneid-size-l .oneid-input { height: var(--td-comp-size-xl); line-height: var(--td-comp-size-xl); } .oneid-input-number.oneid-size-l .oneid-input-number__decrease, .oneid-input-number.oneid-size-l .oneid-input-number__increase { font-size: 18px; width: var(--td-comp-size-xl); height: var(--td-comp-size-xl); } .oneid-input-number.oneid-size-l.oneid-is-controls-right .oneid-input { height: var(--td-comp-size-xl); line-height: var(--td-comp-size-xl); padding-right: calc(var(--td-comp-size-xl) + var(--td-comp-paddingLR-s)); } .oneid-input-number.oneid-size-l.oneid-is-controls-right .oneid-input-number__decrease, .oneid-input-number.oneid-size-l.oneid-is-controls-right .oneid-input-number__increase { width: var(--td-comp-size-xl); font-size: var(--td-font-size-body-large); } .oneid-input-number.oneid-size-l .oneid-input--prefix { font: var(--td-font-body-large); padding: 0 var(--td-comp-paddingLR-m); } .oneid-input-number.oneid-input-number--normal { padding: 0; border-radius: var(--td-radius-default); } .oneid-input-number.oneid-input-number--normal.oneid-is-disabled { cursor: no-drop; color: var(--td-text-color-disabled); } .oneid-input-number.oneid-input-number--normal.oneid-is-disabled:hover .oneid-input { border-color: var(--td-border-level-2-color); } .oneid-input-number.oneid-input-number--normal.oneid-is-disabled::-webkit-input-placeholder { color: var(--td-text-color-disabled); } .oneid-input-number.oneid-input-number--normal.oneid-is-disabled::-moz-placeholder { color: var(--td-text-color-disabled); } .oneid-input-number.oneid-input-number--normal.oneid-is-disabled:-ms-input-placeholder { color: var(--td-text-color-disabled); } .oneid-input-number.oneid-input-number--normal.oneid-is-disabled::-ms-input-placeholder { color: var(--td-text-color-disabled); } .oneid-input-number.oneid-input-number--normal.oneid-is-disabled::placeholder { color: var(--td-text-color-disabled); } .oneid-input-number.oneid-input-number--normal.oneid-is-disabled .oneid-input:focus { -webkit-box-shadow: none; box-shadow: none; } .oneid-input-number.oneid-is-controls-right { width: 96px; padding: 0; } .oneid-input-number.oneid-is-controls-right:hover .oneid-input-number__decrease, .oneid-input-number.oneid-is-controls-right:hover .oneid-input-number__increase { opacity: 1; visibility: visible; } .oneid-input-number.oneid-is-controls-right .oneid-input { width: 100%; -webkit-box-sizing: border-box; box-sizing: border-box; margin: 0; padding-right: calc(var(--td-comp-size-m) + var(--td-comp-paddingLR-s)); border-radius: var(--td-radius-default); } .oneid-input-number.oneid-is-controls-right .oneid-input-number__decrease, .oneid-input-number.oneid-is-controls-right .oneid-input-number__increase { width: var(--td-comp-size-m); height: calc(var(--td-comp-size-m) / 2 - 2px); border: 0; left: initial; top: initial; right: 1px; border-radius: 0; background: var(--td-bg-color-secondarycontainer); opacity: 0; visibility: hidden; z-index: 2; } .oneid-input-number.oneid-is-controls-right .oneid-input-number__decrease .oneid-icon, .oneid-input-number.oneid-is-controls-right .oneid-input-number__increase .oneid-icon { font-size: var(--td-font-size-body-small); } .oneid-input-number.oneid-is-controls-right .oneid-input-number__decrease:hover, .oneid-input-number.oneid-is-controls-right .oneid-input-number__increase:hover { background: var(--td-bg-color-component-hover); } .oneid-input-number.oneid-is-controls-right .oneid-input-number__decrease:hover .oneid-icon, .oneid-input-number.oneid-is-controls-right .oneid-input-number__increase:hover .oneid-icon { color: var(--td-text-color-primary); } .oneid-input-number.oneid-is-controls-right .oneid-input-number__decrease.oneid-is-disabled, .oneid-input-number.oneid-is-controls-right .oneid-input-number__increase.oneid-is-disabled { color: var(--td-text-color-disabled); cursor: no-drop; background-color: var(--td-bg-color-component-disabled); } .oneid-input-number.oneid-is-controls-right .oneid-input-number__decrease.oneid-is-disabled .oneid-icon, .oneid-input-number.oneid-is-controls-right .oneid-input-number__increase.oneid-is-disabled .oneid-icon { color: var(--td-text-color-disabled); } .oneid-input-number.oneid-is-controls-right .oneid-input-number__decrease.oneid-is-disabled:hover, .oneid-input-number.oneid-is-controls-right .oneid-input-number__increase.oneid-is-disabled:hover { border-color: var(--td-border-level-2-color); } .oneid-input-number.oneid-is-controls-right .oneid-input-number__decrease.oneid-is-disabled:hover .oneid-icon, .oneid-input-number.oneid-is-controls-right .oneid-input-number__increase.oneid-is-disabled:hover .oneid-icon { color: var(--td-text-color-disabled); } .oneid-input-number.oneid-is-controls-right .oneid-input-number__decrease.oneid-is-disabled::-webkit-input-placeholder, .oneid-input-number.oneid-is-controls-right .oneid-input-number__increase.oneid-is-disabled::-webkit-input-placeholder { color: var(--td-text-color-disabled); } .oneid-input-number.oneid-is-controls-right .oneid-input-number__decrease.oneid-is-disabled::-moz-placeholder, .oneid-input-number.oneid-is-controls-right .oneid-input-number__increase.oneid-is-disabled::-moz-placeholder { color: var(--td-text-color-disabled); } .oneid-input-number.oneid-is-controls-right .oneid-input-number__decrease.oneid-is-disabled:-ms-input-placeholder, .oneid-input-number.oneid-is-controls-right .oneid-input-number__increase.oneid-is-disabled:-ms-input-placeholder { color: var(--td-text-color-disabled); } .oneid-input-number.oneid-is-controls-right .oneid-input-number__decrease.oneid-is-disabled::-ms-input-placeholder, .oneid-input-number.oneid-is-controls-right .oneid-input-number__increase.oneid-is-disabled::-ms-input-placeholder { color: var(--td-text-color-disabled); } .oneid-input-number.oneid-is-controls-right .oneid-input-number__decrease.oneid-is-disabled::placeholder, .oneid-input-number.oneid-is-controls-right .oneid-input-number__increase.oneid-is-disabled::placeholder { color: var(--td-text-color-disabled); } .oneid-input-number.oneid-is-controls-right .oneid-input-number__increase { top: 1px; border-top-right-radius: calc(var(--td-radius-default) - 1px); } .oneid-input-number.oneid-is-controls-right .oneid-input-number__decrease { top: calc(var(--td-comp-size-m) / 2 - 2px + 3px); border-bottom-right-radius: calc(var(--td-radius-default) - 1px); } .oneid-input-number.oneid-is-controls-right.oneid-size-l { width: 120px; } .oneid-input-number.oneid-is-controls-right.oneid-size-l .oneid-input-number__increase, .oneid-input-number.oneid-is-controls-right.oneid-size-l .oneid-input-number__decrease { height: calc(var(--td-comp-size-xl) / 2 - 2px); } .oneid-input-number.oneid-is-controls-right.oneid-size-l .oneid-input-number__decrease { top: calc(var(--td-comp-size-xl) / 2 - 2px + 3px); } .oneid-input-number.oneid-is-controls-right.oneid-size-s { width: 88px; } .oneid-input-number.oneid-is-controls-right.oneid-size-s .oneid-input-number__increase, .oneid-input-number.oneid-is-controls-right.oneid-size-s .oneid-input-number__decrease { height: calc(var(--td-comp-size-xs) / 2 - 2px); } .oneid-input-number.oneid-is-controls-right.oneid-size-s .oneid-input-number__decrease { top: calc(var(--td-comp-size-xs) / 2 - 2px + 3px); } .oneid-input-number--row .oneid-input__wrap { width: initial; margin-right: var(--td-comp-margin-xs); } .oneid-input-number--row .oneid-input-number__increase { right: 0; } .default-step-icon { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; width: 22px; height: 22px; text-align: center; border-radius: var(--td-radius-circle); font-size: var(--td-font-size-body-large); } .oneid-steps { font: var(--td-font-body-medium); color: var(--td-text-color-primary); -webkit-box-sizing: border-box; box-sizing: border-box; margin: 0; padding: 0; list-style: none; display: -webkit-box; display: -ms-flexbox; display: flex; width: 100%; } .oneid-steps .oneid-steps-item { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; overflow: hidden; vertical-align: top; margin-right: var(--td-comp-margin-s); position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; } .oneid-steps .oneid-steps-item:last-child { -webkit-box-flex: 0; -ms-flex: none; flex: none; } .oneid-steps .oneid-steps-item__inner { width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; } .oneid-steps .oneid-steps-item__inner.oneid-steps-item--clickable { cursor: pointer; } .oneid-steps .oneid-steps-item--finish .oneid-steps-item__icon .oneid-icon { color: var(--td-brand-color); } .oneid-steps .oneid-steps-item--finish .oneid-steps-item__icon--number { border-color: var(--td-brand-color); } .oneid-steps .oneid-steps-item--finish .oneid-steps-item__title { color: var(--td-text-color-primary); font-weight: normal; } .oneid-steps .oneid-steps-item--finish .oneid-steps-item__description { color: var(--td-text-color-secondary); } .oneid-steps .oneid-steps-item--process .oneid-steps-item__icon .oneid-icon { color: var(--td-brand-color); } .oneid-steps .oneid-steps-item--process .oneid-steps-item__icon--number { border-color: var(--td-brand-color); background-color: var(--td-brand-color); color: var(--td-text-color-anti); font-weight: bold; } .oneid-steps .oneid-steps-item--process .oneid-steps-item__title { color: var(--td-brand-color); font-weight: bold; } .oneid-steps .oneid-steps-item--process .oneid-steps-item__description { color: var(--td-text-color-secondary); } .oneid-steps .oneid-steps-item--error .oneid-steps-item__icon .oneid-icon { color: var(--td-error-color); } .oneid-steps .oneid-steps-item--error .oneid-steps-item__icon--number { color: var(--td-error-color); border-color: var(--td-error-color); } .oneid-steps .oneid-steps-item--error .oneid-steps-item__title { color: var(--td-error-color); } .oneid-steps .oneid-steps-item--error .oneid-steps-item__description { color: var(--td-text-color-secondary); } .oneid-steps .oneid-steps-item__icon { vertical-align: top; font-size: var(--td-font-size-body-medium); margin-right: var(--td-comp-margin-s); color: var(--td-text-color-placeholder); } .oneid-steps .oneid-steps-item__icon--number { color: var(--td-text-color-placeholder); border: 1px solid var(--td-text-color-placeholder); display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; width: 22px; height: 22px; text-align: center; border-radius: var(--td-radius-circle); font-size: var(--td-font-size-body-large); } .oneid-steps .oneid-steps-item__icon--finish { border: 1px solid var(--td-brand-color); display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; width: 22px; height: 22px; text-align: center; border-radius: var(--td-radius-circle); font-size: var(--td-font-size-body-large); } .oneid-steps .oneid-steps-item__icon--error { border: 1px solid var(--td-error-color); color: #000; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; width: 22px; height: 22px; text-align: center; border-radius: var(--td-radius-circle); font-size: var(--td-font-size-body-large); } .oneid-steps .oneid-steps-item__icon > .oneid-icon { font-size: calc(var(--td-font-size-body-medium) + 10px); } .oneid-steps .oneid-steps-item__title { position: relative; padding-right: var(--td-comp-margin-s); color: var(--td-text-color-placeholder); font-size: var(--td-font-size-body-large); line-height: 24px; } .oneid-steps .oneid-steps-item__description { color: var(--td-text-color-placeholder); font-size: var(--td-font-size-body-medium); margin-bottom: var(--td-comp-margin-xs); line-height: 22px; } .oneid-steps--line-separator .oneid-steps-item:before, .oneid-steps--line-separator .oneid-steps-item:after, .oneid-steps--line-separator .oneid-steps-item__title:after { border-style: solid; } .oneid-steps--dashed-separator .oneid-steps-item:before, .oneid-steps--dashed-separator .oneid-steps-item:after, .oneid-steps--dashed-separator .oneid-steps-item__title:after { border-style: dashed; } .oneid-steps--horizontal.oneid-steps--default-anchor .oneid-steps-item__title { width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; margin-bottom: var(--td-comp-margin-xs); } .oneid-steps--horizontal.oneid-steps--default-anchor .oneid-steps-item__icon__number { width: 22px; height: 22px; } .oneid-steps--horizontal.oneid-steps--default-anchor .oneid-steps-item__icon > .oneid-icon { font-size: calc(var(--td-font-size-body-medium) + 10px); } .oneid-steps--horizontal.oneid-steps--default-anchor .oneid-steps-item:not(:last-child) .oneid-steps-item__title:after { content: ""; display: block; width: 9999px; border-left: 0; border-top: 0; border-bottom-width: 1px; border-bottom-color: var(--td-text-color-placeholder); position: absolute; left: 100%; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); } .oneid-steps--horizontal.oneid-steps--default-anchor.oneid-steps--arrow-separator .oneid-steps-item:not(:last-child):after { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; height: 24px; content: "^"; -webkit-transform: rotateZ(90deg); transform: rotateZ(90deg); display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: end; -ms-flex-align: end; align-items: flex-end; border: 0; font-size: var(--td-font-size-body-large); color: var(--td-text-color-placeholder); } .oneid-steps--horizontal.oneid-steps--default-anchor.oneid-steps--arrow-separator .oneid-steps-item--finish:not(:last-child)::after { color: var(--td-brand-color); } .oneid-steps--horizontal.oneid-steps--default-anchor .oneid-steps-item--finish:not(:last-child) .oneid-steps-item__title:after { border-bottom-width: 2px; border-bottom-color: var(--td-brand-color); color: var(--td-brand-color); } .oneid-steps--horizontal.oneid-steps--default-anchor.oneid-steps--reverse .oneid-steps-item:not(:last-child) .oneid-steps-item__title:after { content: ""; display: block; width: 9999px; border-left: 0; border-top: 0; border-bottom-width: 1px; border-bottom-color: var(--td-text-color-placeholder); position: absolute; left: 100%; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); } .oneid-steps--horizontal.oneid-steps--default-anchor.oneid-steps--reverse.oneid-steps--arrow-separator .oneid-steps-item:not(:last-child):after { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; height: 24px; content: "^"; -webkit-transform: rotateZ(90deg); transform: rotateZ(90deg); display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: end; -ms-flex-align: end; align-items: flex-end; border: 0; font-size: var(--td-font-size-body-large); color: var(--td-text-color-placeholder); } .oneid-steps--horizontal.oneid-steps--default-anchor.oneid-steps--reverse.oneid-steps--arrow-separator .oneid-steps-item--finish:not(:last-child)::after { color: var(--td-brand-color); } .oneid-steps--horizontal.oneid-steps--default-anchor.oneid-steps--reverse.oneid-steps--arrow-separator .oneid-steps-item:not(:last-child):after { -webkit-transform: rotateZ(-90deg); transform: rotateZ(-90deg); } .oneid-steps--horizontal.oneid-steps--default-anchor.oneid-steps--reverse.oneid-steps--arrow-separator .oneid-steps-item--process:not(:last-child)::after, .oneid-steps--horizontal.oneid-steps--default-anchor.oneid-steps--reverse.oneid-steps--arrow-separator .oneid-steps-item--finish:not(:last-child)::after { color: var(--td-brand-color); } .oneid-steps--horizontal.oneid-steps--default-anchor.oneid-steps--reverse .oneid-steps-item--finish:not(:last-child) .oneid-steps-item__title:after { border-bottom-width: 2px; border-bottom-color: var(--td-brand-color); color: var(--td-brand-color); } .oneid-steps--horizontal.oneid-steps--default-anchor.oneid-steps--reverse .oneid-steps-item--process:not(:last-child) .oneid-steps-item__title:after, .oneid-steps--horizontal.oneid-steps--default-anchor.oneid-steps--reverse .oneid-steps-item--finish:not(:last-child) .oneid-steps-item__title:after { border-bottom-width: 2px; border-bottom-color: var(--td-brand-color); color: var(--td-brand-color); } .oneid-steps--horizontal.oneid-steps--dot-anchor .oneid-steps-item { overflow: visible; } .oneid-steps--horizontal.oneid-steps--dot-anchor .oneid-steps-item .oneid-steps-item__title { padding-right: 0; margin-bottom: var(--td-comp-margin-xs); } .oneid-steps--horizontal.oneid-steps--dot-anchor .oneid-steps-item--finish .oneid-steps-item__icon { border-color: var(--td-brand-color); } .oneid-steps--horizontal.oneid-steps--dot-anchor .oneid-steps-item--process .oneid-steps-item__icon { background: var(--td-brand-color); border-color: var(--td-brand-color); } .oneid-steps--horizontal.oneid-steps--dot-anchor .oneid-steps-item--error .oneid-steps-item__icon { background: var(--td-error-color); border-color: var(--td-error-color); } .oneid-steps--horizontal.oneid-steps--dot-anchor .oneid-steps-item__inner { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .oneid-steps--horizontal.oneid-steps--dot-anchor .oneid-steps-item__icon { display: block; width: 8px; height: 8px; border: 2px solid var(--td-text-color-placeholder); border-radius: var(--td-radius-circle); margin-bottom: var(--td-comp-margin-xs); position: relative; -webkit-box-sizing: border-box; box-sizing: border-box; -ms-flex-negative: 0; flex-shrink: 0; } .oneid-steps--horizontal.oneid-steps--dot-anchor .oneid-steps-item__content { text-align: center; width: 140px; } .oneid-steps--horizontal.oneid-steps--dot-anchor.oneid-steps--arrow-separator .oneid-steps-item:not(:last-child)::after { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; content: "^"; display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; border: 0; font-size: var(--td-font-size-body-large); -webkit-transform: rotateZ(90deg); transform: rotateZ(90deg); color: var(--td-text-color-placeholder); } .oneid-steps--horizontal.oneid-steps--dot-anchor.oneid-steps--arrow-separator .oneid-steps-item--finish:not(:last-child)::after { color: var(--td-brand-color); } .oneid-steps--horizontal.oneid-steps--dot-anchor .oneid-steps-item:not(:last-child)::after { content: ""; display: block; width: calc(100% - 16px); border-left: 0; border-top: 0; border-bottom-width: 1px; border-bottom-color: var(--td-text-color-placeholder); position: absolute; left: 78px; top: 2.5px; } .oneid-steps--horizontal.oneid-steps--dot-anchor .oneid-steps-item:not(:last-child):not(.oneid-steps-item--finish)::after { border-color: var(--td-text-color-placeholder); } .oneid-steps--horizontal.oneid-steps--dot-anchor .oneid-steps-item--finish:not(:last-child)::after { color: var(--td-brand-color); border-bottom-color: var(--td-brand-color); border-bottom-width: 2px; } .oneid-steps--horizontal.oneid-steps--dot-anchor.oneid-steps--reverse.oneid-steps--arrow-separator .oneid-steps-item:not(:last-child)::after { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; content: "^"; display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; border: 0; font-size: var(--td-font-size-body-large); -webkit-transform: rotateZ(90deg); transform: rotateZ(90deg); color: var(--td-text-color-placeholder); } .oneid-steps--horizontal.oneid-steps--dot-anchor.oneid-steps--reverse.oneid-steps--arrow-separator .oneid-steps-item--finish:not(:last-child)::after { color: var(--td-brand-color); } .oneid-steps--horizontal.oneid-steps--dot-anchor.oneid-steps--reverse.oneid-steps--arrow-separator .oneid-steps-item:not(:last-child)::after { -webkit-transform: rotateZ(-90deg); transform: rotateZ(-90deg); } .oneid-steps--horizontal.oneid-steps--dot-anchor.oneid-steps--reverse.oneid-steps--arrow-separator .oneid-steps-item--process:not(:last-child)::after, .oneid-steps--horizontal.oneid-steps--dot-anchor.oneid-steps--reverse.oneid-steps--arrow-separator .oneid-steps-item--finish:not(:last-child)::after { color: var(--td-brand-color); } .oneid-steps--horizontal.oneid-steps--dot-anchor.oneid-steps--reverse .oneid-steps-item:not(:last-child)::after { content: ""; display: block; width: calc(100% - 16px); border-left: 0; border-top: 0; border-bottom-width: 1px; border-bottom-color: var(--td-text-color-placeholder); position: absolute; left: 78px; top: 2.5px; } .oneid-steps--horizontal.oneid-steps--dot-anchor.oneid-steps--reverse .oneid-steps-item:not(:last-child):not(.oneid-steps-item--finish)::after { border-color: var(--td-text-color-placeholder); } .oneid-steps--horizontal.oneid-steps--dot-anchor.oneid-steps--reverse .oneid-steps-item--finish:not(:last-child)::after { color: var(--td-brand-color); border-bottom-color: var(--td-brand-color); border-bottom-width: 2px; } .oneid-steps--horizontal.oneid-steps--dot-anchor.oneid-steps--reverse .oneid-steps-item--process:not(:last-child)::after, .oneid-steps--horizontal.oneid-steps--dot-anchor.oneid-steps--reverse .oneid-steps-item--finish:not(:last-child)::after { color: var(--td-brand-color); border-bottom-color: var(--td-brand-color); border-bottom-width: 2px; } .oneid-steps--vertical { width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } .oneid-steps--vertical.oneid-steps--positive.oneid-steps--arrow-separator .oneid-steps-item:not(:last-child)::before { content: "^"; border: 0; height: calc(100% - 24px); position: absolute; top: 24px; left: 6px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; font-size: var(--td-font-size-body-large); -webkit-transform: rotateZ(180deg); transform: rotateZ(180deg); color: var(--td-text-color-placeholder); } .oneid-steps--vertical.oneid-steps--positive.oneid-steps--arrow-separator .oneid-steps-item--finish:not(:last-child)::before { color: var(--td-brand-color); } .oneid-steps--vertical.oneid-steps--positive .oneid-steps-item { padding-bottom: var(--td-comp-margin-xxl); margin-bottom: 5px; } .oneid-steps--vertical.oneid-steps--positive .oneid-steps-item:not(:last-child)::before { content: ""; display: block; height: 100%; border-left: 0; border-top: 0; border-right-width: 1px; border-right-color: var(--td-text-color-placeholder); position: absolute; top: 35px; left: 11px; } .oneid-steps--vertical.oneid-steps--positive .oneid-steps-item--finish:not(:last-child)::before { border-right-width: 2px; border-right-color: var(--td-brand-color); color: var(--td-brand-color); } .oneid-steps--vertical.oneid-steps--default-anchor .oneid-steps-item__content { margin-left: 0px; } .oneid-steps--vertical.oneid-steps--default-anchor .oneid-steps-item__title { margin-bottom: var(--td-comp-margin-xs); } .oneid-steps--vertical.oneid-steps--dot-anchor.oneid-steps--positive.oneid-steps--arrow-separator .oneid-steps-item:not(:last-child)::before { content: "^"; border: 0; height: calc(100% - 4px); position: absolute; top: 8px; left: 0; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; font-size: var(--td-font-size-body-medium); color: var(--td-text-color-placeholder); } .oneid-steps--vertical.oneid-steps--dot-anchor.oneid-steps--positive.oneid-steps--arrow-separator .oneid-steps-item--finish:not(:last-child)::before { color: var(--td-brand-color); } .oneid-steps--vertical.oneid-steps--dot-anchor.oneid-steps--positive .oneid-steps-item:not(:last-child)::before { content: ""; display: block; height: 100%; border-bottom: 0; border-left: 0; border-right-width: 1px; border-right-color: var(--td-text-color-placeholder); position: absolute; left: 3.5px; top: 17px; } .oneid-steps--vertical.oneid-steps--dot-anchor.oneid-steps--positive .oneid-steps-item--finish:not(:last-child)::before { color: var(--td-brand-color); border-right-color: var(--td-brand-color); border-right-width: 2px; } .oneid-steps--vertical.oneid-steps--dot-anchor.oneid-steps--positive .oneid-steps-item:not(:last-child).oneid-steps-item--default::before { border-color: var(--td-text-color-placeholder); } .oneid-steps--vertical.oneid-steps--dot-anchor .oneid-steps-item { margin-bottom: 0; } .oneid-steps--vertical.oneid-steps--dot-anchor .oneid-steps-item .oneid-steps-item__title { margin-bottom: var(--td-comp-margin-xs); } .oneid-steps--vertical.oneid-steps--dot-anchor .oneid-steps-item--finish .oneid-steps-item__icon { border-color: var(--td-brand-color); } .oneid-steps--vertical.oneid-steps--dot-anchor .oneid-steps-item--process .oneid-steps-item__icon { background: var(--td-brand-color); border-color: var(--td-brand-color); } .oneid-steps--vertical.oneid-steps--dot-anchor .oneid-steps-item--error .oneid-steps-item__icon { background: var(--td-error-color); border-color: var(--td-error-color); } .oneid-steps--vertical.oneid-steps--dot-anchor .oneid-steps-item__icon { display: block; width: 8px; height: 8px; border: 2px solid var(--td-text-color-placeholder); border-radius: var(--td-radius-circle); margin-bottom: var(--td-comp-margin-xs); position: relative; -webkit-box-sizing: border-box; box-sizing: border-box; -ms-flex-negative: 0; flex-shrink: 0; top: 8px; } .oneid-steps--vertical.oneid-steps--reverse.oneid-steps--arrow-separator .oneid-steps-item:not(:last-child)::before { content: "^"; border: 0; height: calc(100% - 24px); position: absolute; top: 24px; left: 6px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; font-size: var(--td-font-size-body-large); -webkit-transform: rotateZ(180deg); transform: rotateZ(180deg); color: var(--td-text-color-placeholder); } .oneid-steps--vertical.oneid-steps--reverse.oneid-steps--arrow-separator .oneid-steps-item--finish:not(:last-child)::before { color: var(--td-brand-color); } .oneid-steps--vertical.oneid-steps--reverse.oneid-steps--arrow-separator .oneid-steps-item:not(:last-child)::before { -webkit-transform: rotateZ(0); transform: rotateZ(0); margin-top: var(--td-comp-margin-xs); } .oneid-steps--vertical.oneid-steps--reverse.oneid-steps--arrow-separator .oneid-steps-item--process:not(:last-child)::before, .oneid-steps--vertical.oneid-steps--reverse.oneid-steps--arrow-separator .oneid-steps-item--finish:not(:last-child)::before { color: var(--td-brand-color); } .oneid-steps--vertical.oneid-steps--reverse .oneid-steps-item { padding-bottom: var(--td-comp-margin-xxl); margin-bottom: 5px; } .oneid-steps--vertical.oneid-steps--reverse .oneid-steps-item:not(:last-child)::before { content: ""; display: block; height: 100%; border-left: 0; border-bottom: 0; border-right-width: 1px; border-right-color: var(--td-text-color-placeholder); position: absolute; top: 35px; left: 11px; } .oneid-steps--vertical.oneid-steps--reverse .oneid-steps-item--process:not(:last-child)::before, .oneid-steps--vertical.oneid-steps--reverse .oneid-steps-item--finish:not(:last-child)::before { border-right-width: 2px; border-right-color: var(--td-brand-color); color: var(--td-brand-color); } .oneid-steps--vertical.oneid-steps--reverse.oneid-steps--dot-anchor.oneid-steps--arrow-separator .oneid-steps-item:not(:last-child)::before { content: "^"; border: 0; height: calc(100% - 4px); position: absolute; top: 8px; left: 0; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; font-size: var(--td-font-size-body-medium); color: var(--td-text-color-placeholder); } .oneid-steps--vertical.oneid-steps--reverse.oneid-steps--dot-anchor.oneid-steps--arrow-separator .oneid-steps-item--finish:not(:last-child)::before { color: var(--td-brand-color); } .oneid-steps--vertical.oneid-steps--reverse.oneid-steps--dot-anchor.oneid-steps--arrow-separator .oneid-steps-item--process:not(:last-child)::before, .oneid-steps--vertical.oneid-steps--reverse.oneid-steps--dot-anchor.oneid-steps--arrow-separator .oneid-steps-item--finish:not(:last-child)::before { color: var(--td-brand-color); } .oneid-steps--vertical.oneid-steps--reverse.oneid-steps--dot-anchor .oneid-steps-item { margin-bottom: 0; } .oneid-steps--vertical.oneid-steps--reverse.oneid-steps--dot-anchor .oneid-steps-item:not(:last-child)::before { content: ""; display: block; height: 100%; border-bottom: 0; border-left: 0; border-right-width: 1px; border-right-color: var(--td-text-color-placeholder); position: absolute; left: 3.5px; top: 17px; } .oneid-steps--vertical.oneid-steps--reverse.oneid-steps--dot-anchor .oneid-steps-item:last-child::before { display: none; } .oneid-steps--vertical.oneid-steps--reverse.oneid-steps--dot-anchor .oneid-steps-item--process:not(:last-child)::before, .oneid-steps--vertical.oneid-steps--reverse.oneid-steps--dot-anchor .oneid-steps-item--finish:not(:last-child)::before { border-right-width: 2px; border-right-color: var(--td-brand-color); color: var(--td-brand-color); } .oneid-steps--vertical.oneid-steps--reverse.oneid-steps--dot-anchor .oneid-steps-item:not(:last-child).oneid-steps-item--default::before { border-color: var(--td-text-color-placeholder); } .oneid-sticky-tool { position: fixed; opacity: 1; -webkit-box-sizing: border-box; box-sizing: border-box; background-color: var(--td-bg-color-container); border: 0.5px solid var(--td-component-border); -webkit-box-shadow: var(--td-shadow-3); box-shadow: var(--td-shadow-3); } .oneid-sticky-tool-popup-content { -webkit-box-shadow: var(--td-shadow-3); box-shadow: var(--td-shadow-3); font-size: var(--td-font-size-body-small); color: var(--td-text-color-secondary); } .oneid-sticky-tool .oneid-sticky-item { opacity: 1; position: relative; margin: var(--td-comp-margin-xs); text-align: center; font-size: var(--td-font-size-body-small); color: var(--td-text-color-secondary); -webkit-transition: background-color 0.2s linear; transition: background-color 0.2s linear; } .oneid-sticky-tool .oneid-sticky-item:hover { cursor: pointer; background-color: var(--td-bg-color-container-hover); } .oneid-sticky-tool .oneid-sticky-item--normal { width: var(--td-comp-size-xxxl); height: var(--td-comp-size-xxxl); } .oneid-sticky-tool .oneid-sticky-item--normal .oneid-icon { width: 24px; height: 24px; margin: var(--td-comp-margin-s) var(--td-comp-margin-l) 0 var(--td-comp-margin-l); color: var(--td-text-color-primary); } .oneid-sticky-tool .oneid-sticky-item--compact { width: var(--td-comp-size-xl); height: var(--td-comp-size-xl); } .oneid-sticky-tool .oneid-sticky-item--compact .oneid-icon { width: 24px; height: 24px; margin: var(--td-comp-margin-s); color: var(--td-text-color-primary); } .oneid-sticky-tool .oneid-sticky-item--square { border-radius: var(--td-radius-default); } .oneid-sticky-tool .oneid-sticky-item--round { border-radius: var(--td-radius-circle); } .oneid-sticky-tool .oneid-sticky-item .oneid-sticky-item__label { width: 100%; height: var(--td-comp-size-xxs); line-height: var(--td-comp-size-xxs); margin-top: var(--td-comp-margin-xxs); text-align: center; } .oneid-sticky-tool--square { border-radius: var(--td-radius-medium); } .oneid-sticky-tool--round { border-radius: var(--td-radius-round); } .oneid-message { margin: 0; padding: 0; list-style: none; width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; outline: 0; border-radius: var(--td-radius-medium); background-color: var(--td-bg-color-container); -webkit-box-shadow: var(--td-shadow-3), var(--td-shadow-inset-top), var(--td-shadow-inset-right), var(--td-shadow-inset-bottom), var(--td-shadow-inset-left); box-shadow: var(--td-shadow-3), var(--td-shadow-inset-top), var(--td-shadow-inset-right), var(--td-shadow-inset-bottom), var(--td-shadow-inset-left); -webkit-box-sizing: border-box; box-sizing: border-box; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; color: var(--td-text-color-primary); font: var(--td-font-body-medium); padding: var(--td-comp-paddingTB-m) var(--td-comp-paddingLR-l); } .oneid-message > .oneid-icon, .oneid-message > [data-t-icon] > .oneid-icon, .oneid-message .oneid-loading { color: var(--td-brand-color); margin-right: var(--td-comp-margin-s); -ms-flex-negative: 0; flex-shrink: 0; font-size: calc(var(--td-font-size-body-medium) + 6px); } .oneid-message.oneid-is-success > .oneid-icon, .oneid-message.oneid-is-success > [data-t-icon] > .oneid-icon, .oneid-message.oneid-is-success .oneid-loading { color: var(--td-success-color); } .oneid-message.oneid-is-warning > .oneid-icon, .oneid-message.oneid-is-warning > [data-t-icon] > .oneid-icon, .oneid-message.oneid-is-warning .oneid-loading { color: var(--td-warning-color); } .oneid-message.oneid-is-error > .oneid-icon, .oneid-message.oneid-is-error > [data-t-icon] > .oneid-icon, .oneid-message.oneid-is-error .oneid-loading { color: var(--td-error-color); } .oneid-message.oneid-is-closable .oneid-message__close { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; margin-right: 0; margin-left: var(--td-comp-margin-xxl); cursor: pointer; color: var(--td-text-color-secondary); } .oneid-message.oneid-is-closable .oneid-message__close .oneid-icon-close { font-size: calc(var(--td-font-size-body-medium) + 2px); border-radius: var(--td-radius-default); -webkit-transition: all 0.2s linear; transition: all 0.2s linear; } .oneid-message.oneid-is-closable .oneid-message__close .oneid-icon-close:hover { background: var(--td-bg-color-container-hover); } .oneid-message.oneid-is-closable .oneid-message__close .oneid-icon-close:active { background: var(--td-bg-color-container-active); } .oneid-message__list { position: fixed; z-index: 6000; } .oneid-message__list .oneid-message { margin-bottom: var(--td-comp-margin-s); word-break: break-all; } .oneid-tooltip .oneid-popup__content { display: inline-block; border: 0; z-index: 5600; margin-bottom: 1px; max-width: 480px; word-break: break-word; -webkit-box-sizing: border-box; box-sizing: border-box; border-radius: var(--td-radius-medium); color: var(--td-text-color-primary); } .oneid-tooltip--default .oneid-popup__content { color: var(--td-text-color-anti); background: var(--td-gray-color-13); -webkit-box-shadow: inset 0 0.5px 0 var(--td-gray-color-9), inset 0.5px 0 0 var(--td-gray-color-9), inset 0 -0.5px 0 var(--td-gray-color-9), inset -0.5px 0 0 var(--td-gray-color-9); box-shadow: inset 0 0.5px 0 var(--td-gray-color-9), inset 0.5px 0 0 var(--td-gray-color-9), inset 0 -0.5px 0 var(--td-gray-color-9), inset -0.5px 0 0 var(--td-gray-color-9); } .oneid-tooltip--default[data-popper-placement^=left] .oneid-popup__arrow:before { -webkit-box-shadow: inset -0.5px 0 0 var(--td-gray-color-9), inset 0 0.5px 0 var(--td-gray-color-9); box-shadow: inset -0.5px 0 0 var(--td-gray-color-9), inset 0 0.5px 0 var(--td-gray-color-9); } .oneid-tooltip--default[data-popper-placement^=right] .oneid-popup__arrow:before { -webkit-box-shadow: inset 0.5px 0 0 var(--td-gray-color-9), inset 0 -0.5px 0 var(--td-gray-color-9); box-shadow: inset 0.5px 0 0 var(--td-gray-color-9), inset 0 -0.5px 0 var(--td-gray-color-9); } .oneid-tooltip--default[data-popper-placement^=top] .oneid-popup__arrow:before { -webkit-box-shadow: inset 0 -0.5px 0 var(--td-gray-color-9), inset -0.5px 0 0 var(--td-gray-color-9); box-shadow: inset 0 -0.5px 0 var(--td-gray-color-9), inset -0.5px 0 0 var(--td-gray-color-9); } .oneid-tooltip--default[data-popper-placement^=bottom] .oneid-popup__arrow:before { -webkit-box-shadow: inset 0.5px 0 0 var(--td-gray-color-9), inset 0 0.5px 0 var(--td-gray-color-9); box-shadow: inset 0.5px 0 0 var(--td-gray-color-9), inset 0 0.5px 0 var(--td-gray-color-9); } .oneid-tooltip--primary .oneid-popup__content { color: var(--td-brand-color); background: var(--td-brand-color-light); } .oneid-tooltip--success .oneid-popup__content { color: var(--td-success-color); background: var(--td-success-color-light); } .oneid-tooltip--danger .oneid-popup__content { color: var(--td-error-color); background: var(--td-error-color-light); } .oneid-tooltip--warning .oneid-popup__content { color: var(--td-warning-color); background: var(--td-warning-color-light); } .oneid-tooltip .oneid-popup__arrow { background: inherit; height: auto; } .oneid-tooltip .oneid-popup__arrow::before { background: inherit; } .oneid-tooltip--noshadow .oneid-popup__content, .oneid-tooltip--noshadow[data-popper-placement] .oneid-popup__arrow:before { -webkit-box-shadow: none; box-shadow: none; } .oneid-affix { position: fixed; z-index: 500; } .oneid-tag { font: var(--td-font-body-medium); color: var(--td-text-color-primary); -webkit-box-sizing: border-box; box-sizing: border-box; margin: 0; padding: 0; list-style: none; display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; padding: 0px var(--td-comp-paddingLR-s); height: var(--td-comp-size-xs); font: var(--td-font-body-small); color: var(--td-text-color-anti); border-radius: var(--td-radius-default); border: 1px solid transparent; white-space: nowrap; } .oneid-tag .oneid-icon { margin-right: var(--td-comp-margin-xs); width: calc(var(--td-font-size-body-medium) + 2px); height: calc(var(--td-font-size-body-medium) + 2px); -ms-flex-negative: 0; flex-shrink: 0; } .oneid-tag .oneid-tag__icon-close { margin-right: 0; margin-left: var(--td-comp-margin-s); font: var(--td-font-body-medium); cursor: pointer; -webkit-transition: color 0.2s cubic-bezier(0.38, 0, 0.24, 1); transition: color 0.2s cubic-bezier(0.38, 0, 0.24, 1); } .oneid-tag--default { color: var(--td-text-color-primary); background-color: var(--td-bg-color-component); } .oneid-tag--default .oneid-tag__icon-close { color: var(--td-text-color-placeholder); } .oneid-tag--default .oneid-tag__icon-close:hover { color: var(--td-text-color-primary); } .oneid-tag--default:active { cursor: default; } .oneid-tag--default.oneid-tag--disabled { color: var(--td-text-color-disabled); background-color: var(--td-bg-color-component-disabled); border-color: var(--td-component-border); cursor: not-allowed; } .oneid-tag--default.oneid-tag--disabled:hover { cursor: not-allowed; } .oneid-tag--default.oneid-tag--disabled .oneid-icon:hover { cursor: pointer; } .oneid-tag--default.oneid-tag--outline { border-color: var(--td-component-border); } .oneid-tag--default.oneid-tag--light { background-color: var(--td-bg-color-secondarycontainer); } .oneid-tag--default.oneid-tag--light-outline { border-color: var(--td-component-border); background-color: var(--td-bg-color-secondarycontainer); } .oneid-tag--primary { background-color: var(--td-brand-color); } .oneid-tag--primary.oneid-tag--outline { border-color: var(--td-brand-color); } .oneid-tag--primary.oneid-tag--light { background-color: var(--td-brand-color-light); } .oneid-tag--primary.oneid-tag--light-outline { border-color: var(--td-brand-color); background-color: var(--td-brand-color-light); } .oneid-tag--primary.oneid-tag--light, .oneid-tag--primary.oneid-tag--outline, .oneid-tag--primary.oneid-tag--light-outline { color: var(--td-brand-color); } .oneid-tag--primary.oneid-tag--light .oneid-tag__icon-close:hover, .oneid-tag--primary.oneid-tag--outline .oneid-tag__icon-close:hover, .oneid-tag--primary.oneid-tag--light-outline .oneid-tag__icon-close:hover { color: var(--td-brand-color-hover); } .oneid-tag--success { background-color: var(--td-success-color); } .oneid-tag--success.oneid-tag--outline { border-color: var(--td-success-color); } .oneid-tag--success.oneid-tag--light { background-color: var(--td-success-color-light); } .oneid-tag--success.oneid-tag--light-outline { border-color: var(--td-success-color); background-color: var(--td-success-color-light); } .oneid-tag--success.oneid-tag--light, .oneid-tag--success.oneid-tag--outline, .oneid-tag--success.oneid-tag--light-outline { color: var(--td-success-color); } .oneid-tag--success.oneid-tag--light .oneid-tag__icon-close:hover, .oneid-tag--success.oneid-tag--outline .oneid-tag__icon-close:hover, .oneid-tag--success.oneid-tag--light-outline .oneid-tag__icon-close:hover { color: var(--td-success-color-hover); } .oneid-tag--warning { background-color: var(--td-warning-color); } .oneid-tag--warning.oneid-tag--outline { border-color: var(--td-warning-color); } .oneid-tag--warning.oneid-tag--light { background-color: var(--td-warning-color-light); } .oneid-tag--warning.oneid-tag--light-outline { border-color: var(--td-warning-color); background-color: var(--td-warning-color-light); } .oneid-tag--warning.oneid-tag--light, .oneid-tag--warning.oneid-tag--outline, .oneid-tag--warning.oneid-tag--light-outline { color: var(--td-warning-color); } .oneid-tag--warning.oneid-tag--light .oneid-tag__icon-close:hover, .oneid-tag--warning.oneid-tag--outline .oneid-tag__icon-close:hover, .oneid-tag--warning.oneid-tag--light-outline .oneid-tag__icon-close:hover { color: var(--td-warning-color-hover); } .oneid-tag--danger { background-color: var(--td-error-color); } .oneid-tag--danger.oneid-tag--outline { border-color: var(--td-error-color); } .oneid-tag--danger.oneid-tag--light { background-color: var(--td-error-color-light); } .oneid-tag--danger.oneid-tag--light-outline { border-color: var(--td-error-color); background-color: var(--td-error-color-light); } .oneid-tag--danger .oneid-tag__icon-close { fill: var(--td-error-color); } .oneid-tag--danger .oneid-tag__icon-close:hover { fill: var(--td-error-color-hover); } .oneid-tag--danger.oneid-tag--light, .oneid-tag--danger.oneid-tag--outline, .oneid-tag--danger.oneid-tag--light-outline { color: var(--td-error-color); } .oneid-tag--danger.oneid-tag--light .oneid-tag__icon-close:hover, .oneid-tag--danger.oneid-tag--outline .oneid-tag__icon-close:hover, .oneid-tag--danger.oneid-tag--light-outline .oneid-tag__icon-close:hover { color: var(--td-error-color-hover); } .oneid-tag--dark.oneid-tag:not(.oneid-tag--default) .oneid-tag__icon-close { color: var(--td-font-white-2); } .oneid-tag--dark.oneid-tag:not(.oneid-tag--default) .oneid-tag__icon-close:hover { color: var(--td-font-white-1); } .oneid-tag.oneid-tag--outline { background: transparent; } .oneid-tag.oneid-size-s { padding: 0px var(--td-comp-paddingLR-xs); height: var(--td-comp-size-xxs); font: var(--td-font-body-small); } .oneid-tag.oneid-size-s .oneid-icon { font-size: var(--td-font-body-small); } .oneid-tag.oneid-size-l { padding: 0px var(--td-comp-paddingLR-m); height: var(--td-comp-size-m); font: var(--td-font-body-medium); } .oneid-tag.oneid-size-l .oneid-icon { font: var(--td-font-body-medium); } .oneid-tag.oneid-tag--round { border-radius: var(--td-radius-extraLarge); } .oneid-tag.oneid-tag--mark { border-radius: 0 var(--td-radius-extraLarge) var(--td-radius-extraLarge) 0; } .oneid-tag.oneid-tag--ellipsis .oneid-tag--text { display: inline-block; white-space: nowrap; word-wrap: normal; overflow: hidden; text-overflow: ellipsis; } .oneid-tag.oneid-tag--check:not(.oneid-tag--disabled) { -webkit-transition: background-color 0.2s cubic-bezier(0.38, 0, 0.24, 1); transition: background-color 0.2s cubic-bezier(0.38, 0, 0.24, 1); cursor: pointer; } .oneid-tag.oneid-tag--check:not(.oneid-tag--disabled).oneid-tag--default.oneid-tag--dark:not(.oneid-tag--checked):hover { background-color: var(--td-bg-color-component-hover); } .oneid-tag.oneid-tag--check:not(.oneid-tag--disabled).oneid-tag--primary.oneid-tag--dark.oneid-tag--checked:hover { background-color: var(--td-brand-color-hover); } .oneid-tag.oneid-tag--check:not(.oneid-tag--disabled).oneid-tag--default.oneid-tag--outline:not(.oneid-tag--checked):hover { color: var(--td-brand-color-hover); } .oneid-tag--check.oneid-tag--disabled.oneid-tag--primary.oneid-tag--dark { background-color: var(--td-brand-color-disabled); cursor: not-allowed; } .oneid-tag--check.oneid-tag--disabled.oneid-tag--primary.oneid-tag--outline { color: var(--td-text-color-disabled); background-color: var(--td-bg-color-component-disabled); border-color: var(--td-text-color-disabled); cursor: not-allowed; } .oneid-check-tag-group .oneid-tag:not(:last-child) { margin-right: var(--td-comp-margin-s); } a .oneid-tag { cursor: pointer; -webkit-transition: all 0.2s linear; transition: all 0.2s linear; } a .oneid-tag:hover { color: var(--td-brand-color); background-color: var(--td-bg-color-component-hover); } a .oneid-tag:active { color: var(--td-brand-color-active); background-color: var(--td-bg-color-component-active); } @-webkit-keyframes t-fade-in { from { opacity: 0; } to { opacity: 1; } } @keyframes t-fade-in { from { opacity: 0; } to { opacity: 1; } } @-webkit-keyframes t-fade-out { from { opacity: 1; } to { opacity: 0; } } @keyframes t-fade-out { from { opacity: 1; } to { opacity: 0; } } @-webkit-keyframes t-spin { from { -webkit-transform: rotate(0deg); transform: rotate(0deg); } to { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @keyframes t-spin { from { -webkit-transform: rotate(0deg); transform: rotate(0deg); } to { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } .oneid-icon-loading { -webkit-animation: t-spin 1s linear infinite; animation: t-spin 1s linear infinite; } @-webkit-keyframes t-zoom-out { from { -webkit-transform: scale(0.2); transform: scale(0.2); } to { -webkit-transform: scale(1); transform: scale(1); } } @keyframes t-zoom-out { from { -webkit-transform: scale(0.2); transform: scale(0.2); } to { -webkit-transform: scale(1); transform: scale(1); } } .oneid-tag-input { font: var(--td-font-body-medium); color: var(--td-text-color-primary); -webkit-box-sizing: border-box; box-sizing: border-box; margin: 0; padding: 0; list-style: none; /** 设计稿:未填充标签场景,边距和已填充不同 */ } .oneid-tag-input .oneid-tag { vertical-align: middle; -webkit-animation: t-fade-in 0.2s ease-in-out; animation: t-fade-in 0.2s ease-in-out; margin: 3px var(--td-comp-margin-xs) 3px 0; } .oneid-tag-input .oneid-tag-input__drag_wrapper + .oneid-tag-input__drag_wrapper { margin-left: var(--td-comp-margin-xs); } .oneid-tag-input .oneid-input { overflow: hidden; min-height: var(--td-comp-size-m); height: -webkit-fit-content; height: -moz-fit-content; height: fit-content; padding: 0 var(--td-comp-paddingLR-s) 0 var(--td-comp-margin-xs); } .oneid-tag-input .oneid-input .oneid-input__suffix-icon { right: var(--td-comp-margin-s); } .oneid-tag-input .oneid-input.oneid-size-s { padding: 0 var(--td-comp-paddingLR-s) 0 var(--td-comp-margin-xs); min-height: var(--td-comp-size-xs); } .oneid-tag-input .oneid-input.oneid-size-s .oneid-tag { margin: 1px var(--td-comp-margin-xs) 1px 0; } .oneid-tag-input .oneid-input.oneid-size-l { min-height: var(--td-comp-size-xl); padding: 0 var(--td-comp-paddingLR-m) 0 var(--td-comp-margin-s); } .oneid-tag-input .oneid-input.oneid-size-l .oneid-input__suffix-icon { right: var(--td-comp-margin-m); } .oneid-tag-input.oneid-is-empty .oneid-input__inner { margin-left: var(--td-comp-margin-xs); } .oneid-tag-input:hover .oneid-input__inner:not(.oneid-input--soft-hidden), .oneid-tag-input .oneid-input--focused .oneid-input__inner:not(.oneid-input--soft-hidden) { min-width: 20px; } .oneid-tag-input .oneid-tag-input__prefix { margin-left: var(--td-comp-margin-xs); line-height: 1; } .oneid-tag-input .oneid-tag-input__prefix > .oneid-icon { color: var(--td-text-color-placeholder); } .oneid-tag-input .oneid-input .oneid-input__prefix:not(:empty) { margin-right: 0; } .oneid-tag-input.oneid-input--auto-width .oneid-input.oneid-input--focused { padding-right: calc(var(--td-comp-paddingLR-xxl) + var(--td-comp-paddingLR-xxs)); } .oneid-tag-input.oneid-input--auto-width .oneid-input__prefix { white-space: nowrap; } .oneid-tag-input .oneid-input__prefix--scrollable { overflow-y: hidden; overflow-x: auto; } @-moz-document url-prefix() { .oneid-tag-input .oneid-input__prefix--scrollable { scrollbar-color: var(--td-scrollbar-color) transparent; scrollbar-width: thin; } } .oneid-tag-input .oneid-input__prefix--scrollable::-webkit-scrollbar { width: 6px; height: 6px; } .oneid-tag-input .oneid-input__prefix--scrollable::-webkit-scrollbar-thumb { border: 0px solid transparent; background-clip: content-box; background-color: var(--td-scrollbar-color); border-radius: 11px; } .oneid-tag-input .oneid-input__prefix--scrollable::-webkit-scrollbar-thumb:vertical:hover, .oneid-tag-input .oneid-input__prefix--scrollable::-webkit-scrollbar-thumb:horizontal:hover { background-color: var(--td-scrollbar-hover-color); } .oneid-tag-input__suffix-clear { cursor: pointer; } .oneid-tag-input--break-line:not(.oneid-is-empty) .oneid-input { display: block; } .oneid-tag-input--break-line:not(.oneid-is-empty) .oneid-input.oneid-input--prefix > .oneid-input__prefix { display: inline; text-align: left; } .oneid-tag-input--break-line:not(.oneid-is-empty) .oneid-input .oneid-input__suffix-icon { position: absolute; bottom: 0; } .oneid-tag-input--break-line:not(.oneid-is-empty) .oneid-tag-input__prefix { vertical-align: middle; } .oneid-tag-input__prefix { width: -webkit-max-content; width: -moz-max-content; width: max-content; display: inline-block; margin-right: var(--td-comp-margin-s); } /** 换行模式避免标签和右侧图标重合,需保留图标宽度 22px 和左侧距离标签间距 8px */ .oneid-tag-input--break-line.oneid-tag-input--with-tag:not(.oneid-input--auto-width) .oneid-input, .oneid-tag-input.oneid-input--auto-width:hover .oneid-input { padding-right: calc(var(--td-comp-paddingLR-xxl) + var(--td-comp-paddingLR-xxs)); } .oneid-tag-input--break-line.oneid-tag-input--with-tag:not(.oneid-input--auto-width) .oneid-size-l .oneid-input, .oneid-tag-input.oneid-input--auto-width:hover .oneid-size-l .oneid-input { padding-right: calc(var(--td-comp-paddingLR-xxl) + var(--td-comp-paddingLR-xs)); } /** auto-width 模式,左右边距相同 */ .oneid-tag-input.oneid-input--auto-width .oneid-input { padding-right: 0; } /** max-rows模式,限制最大高度 */ .oneid-tag-input--max-rows .oneid-input { max-height: calc(var(--max-rows, 1) * (var(--td-comp-size-m) - 2px)); overflow-y: scroll; } .oneid-tag-input--max-rows .oneid-input.oneid-size-s { max-height: calc(var(--max-rows, 1) * var(--td-comp-size-xs)); } .oneid-tag-input--max-rows .oneid-input.oneid-size-l { max-height: calc(var(--max-rows, 1) * (var(--td-comp-size-xl) - 2px)); } .oneid-select-input { font: var(--td-font-body-medium); color: var(--td-text-color-primary); -webkit-box-sizing: border-box; box-sizing: border-box; margin: 0; padding: 0; list-style: none; width: 100%; display: inline-block; vertical-align: middle; } /** 宽度自适应场景,多选,预留图标的位置。带标签和不带标签的布局不同,故而间距不同 */ .oneid-select-input--multiple .oneid-input--auto-width.oneid-tag-input__with-suffix-icon.oneid-tag-input--with-tag .oneid-input { padding-right: var(--td-comp-paddingLR-xl); } .oneid-select-input--multiple .oneid-input--auto-width.oneid-tag-input__with-suffix-icon.oneid-tag-input--with-tag .oneid-input.oneid-size-l { padding-right: calc(var(--td-comp-paddingLR-xl) + var(--td-comp-paddingLR-s)); } .oneid-select-input--multiple .oneid-input--auto-width.oneid-tag-input__with-suffix-icon.oneid-is-empty .oneid-input { padding-right: var(--td-comp-paddingLR-s); } .oneid-select-input--multiple .oneid-input--auto-width.oneid-tag-input__with-suffix-icon.oneid-is-empty .oneid-input.oneid-size-l { padding-right: var(--td-comp-paddingLR-m); } /** 无边框模式 */ .oneid-select-input--borderless { /** 无边框模式的多选 */ } .oneid-select-input--borderless .oneid-input { -webkit-box-shadow: none; box-shadow: none; border: 1px solid transparent; background: transparent; -webkit-transition: all 0.2s linear; transition: all 0.2s linear; } .oneid-select-input--borderless .oneid-input:hover:not(.oneid-input--focused) { border-color: var(--td-component-border); background-color: var(--td-bg-color-container-hover); border-radius: var(--td-radius-default); } .oneid-select-input--borderless .oneid-input--focused { border-color: var(--td-brand-color); -webkit-box-shadow: 0 0 0 2px var(--td-brand-color-focus); box-shadow: 0 0 0 2px var(--td-brand-color-focus); background-color: var(--td-bg-color-specialcomponent); } .oneid-select-input--borderless.oneid-select-input--multiple:not(.oneid-select-input--empty).oneid-select-input--popup-visible input { display: inline-block; } .oneid-select-input--borderless.oneid-select-input--multiple:not(.oneid-select-input--empty).oneid-select-input--popup-visible .oneid-input { background-color: var(--td-bg-color-container-hover); } .oneid-select-input--borderless.oneid-tag-input { border: 0; -webkit-box-shadow: none; box-shadow: none; background: transparent; -webkit-transition: background-color 0.2s linear; transition: background-color 0.2s linear; } .oneid-select-input--borderless.oneid-tag-input:hover { background-color: var(--td-bg-color-container-hover); border-radius: var(--td-radius-default); } .oneid-select__wrap { width: 100%; } .oneid-select__dropdown .oneid-popup__content { margin: var(--td-comp-paddingTB-s) 0; padding: 0; max-height: 300px; overflow-y: auto; -ms-scroll-chaining: none; overscroll-behavior: contain; -webkit-box-shadow: var(--td-shadow-2); box-shadow: var(--td-shadow-2); } @-moz-document url-prefix() { .oneid-select__dropdown .oneid-popup__content { scrollbar-color: var(--td-scrollbar-color) transparent; scrollbar-width: thin; } } .oneid-select__dropdown .oneid-popup__content::-webkit-scrollbar { width: 8px; height: 8px; } .oneid-select__dropdown .oneid-popup__content::-webkit-scrollbar-thumb { border: 2px solid transparent; background-clip: content-box; background-color: var(--td-scrollbar-color); border-radius: 15px; } .oneid-select__dropdown .oneid-popup__content::-webkit-scrollbar-thumb:vertical:hover, .oneid-select__dropdown .oneid-popup__content::-webkit-scrollbar-thumb:horizontal:hover { background-color: var(--td-scrollbar-hover-color); } .oneid-select__dropdown-inner { min-height: var(--td-comp-size-m); } .oneid-select__dropdown-inner .oneid-select__list .oneid-select__list { padding: 0; } .oneid-select__dropdown-inner .oneid-select__list, .oneid-select__dropdown-inner .oneid-tree { padding: var(--td-pop-padding-m); } .oneid-select__dropdown-inner--size-s { min-height: var(--td-comp-size-xs); } .oneid-select__dropdown-inner--size-s .oneid-select__list, .oneid-select__dropdown-inner--size-s .oneid-tree { padding: var(--td-pop-padding-s); } .oneid-select__dropdown-inner--size-l { min-height: var(--td-comp-size-xl); } .oneid-select__dropdown-inner--size-l .oneid-select__list, .oneid-select__dropdown-inner--size-l .oneid-tree { padding: var(--td-pop-padding-l); } .oneid-select__list { margin: 0; padding: 0; list-style: none; } .oneid-select__dropdown.oneid-popup { padding: 0; } .oneid-select__empty.oneid-size-s { line-height: var(--td-comp-size-xs); } .oneid-select__empty { text-align: center; color: var(--td-text-color-disabled); line-height: var(--td-comp-size-m); padding: 0 var(--td-comp-paddingLR-s); } .oneid-select__empty.oneid-size-l { line-height: var(--td-comp-size-xl); } .oneid-select__loading-tips.oneid-size-s { min-height: var(--td-comp-size-xs); line-height: var(--td-comp-size-xs); } .oneid-select__loading-tips { position: fixed; top: var(--td-comp-paddingTB-s); left: 0; bottom: var(--td-comp-paddingTB-s); right: 0; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; background-color: var(--td-bg-color-container); border-radius: var(--td-radius-default); min-height: var(--td-comp-size-m); line-height: var(--td-comp-size-m); color: var(--td-text-color-disabled); z-index: 1000; } .oneid-select__loading-tips.oneid-size-l { min-height: var(--td-comp-size-xl); line-height: var(--td-comp-size-xl); } .oneid-select-option-group + .oneid-select-option-group { padding-top: var(--td-comp-margin-xs); margin-top: var(--td-comp-margin-xs); } .oneid-select-option-group__divider + .oneid-select-option-group__divider { position: relative; } .oneid-select-option-group__divider + .oneid-select-option-group__divider::before { content: ""; width: 100%; height: 1px; padding: 0 var(--td-comp-paddingLR-s); position: absolute; top: 0; left: 0; -webkit-box-sizing: border-box; box-sizing: border-box; background-color: var(--td-border-level-1-color); background-clip: content-box; } ul.oneid-select-option-group__header, .oneid-select-option-group__header { color: var(--td-text-color-placeholder); display: block; height: var(--td-comp-size-s); line-height: var(--td-comp-size-s); padding: 0 var(--td-comp-paddingLR-s); -webkit-box-sizing: border-box; box-sizing: border-box; white-space: nowrap; word-wrap: normal; overflow: hidden; text-overflow: ellipsis; } .oneid-select-option-group__header.oneid-size-l { height: var(--td-comp-size-l); line-height: var(--td-comp-size-l); padding: 0 var(--td-comp-paddingLR-m); } .oneid-select-option-group__header.oneid-size-s { height: var(--td-comp-size-xxs); line-height: var(--td-comp-size-xxs); padding: 0 var(--td-comp-paddingLR-s); } .oneid-select-option { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; border-radius: var(--td-radius-default); height: var(--td-comp-size-s); font: var(--td-font-body-medium); cursor: pointer; padding: 0 var(--td-comp-paddingLR-s); color: var(--td-text-color-primary); -webkit-transition: background-color 0.2s cubic-bezier(0.38, 0, 0.24, 1); transition: background-color 0.2s cubic-bezier(0.38, 0, 0.24, 1); -webkit-box-sizing: border-box; box-sizing: border-box; --ripple-color: var(--td-bg-color-container-active); } .oneid-select-option span { position: relative; white-space: nowrap; word-wrap: normal; overflow: hidden; text-overflow: ellipsis; } .oneid-select-option:not(.oneid-is-disabled):not(.oneid-is-selected):hover { background-color: var(--td-bg-color-container-hover); } .oneid-select-option:not(.oneid-is-disabled):not(.oneid-is-selected):hover .oneid-checkbox__label { color: inherit; } .oneid-select-option:not(.oneid-is-disabled):not(.oneid-is-selected):hover .oneid-checkbox__input { border-color: var(--td-brand-color); } .oneid-select-option .oneid-checkbox__label { color: var(--td-text-color-primary); -webkit-box-flex: 1; -ms-flex: 1; flex: 1; white-space: nowrap; word-wrap: normal; overflow: hidden; text-overflow: ellipsis; } .oneid-select-option .oneid-checkbox { width: 100%; } .oneid-select-option.oneid-is-disabled { cursor: not-allowed; color: var(--td-text-color-disabled); background: var(--td-bg-color-specialcomponent); } .oneid-select-option.oneid-is-disabled:hover, .oneid-select-option.oneid-is-disabled :active { background: var(--td-bg-color-specialcomponent); } .oneid-select-option.oneid-size-l { height: var(--td-comp-size-l); padding: 0 var(--td-comp-paddingLR-m); font: var(--td-font-body-large); } .oneid-select-option.oneid-size-m { font: var(--td-font-body-medium); } .oneid-select-option.oneid-size-s { height: var(--td-comp-size-xxs); padding: 0 var(--td-comp-paddingLR-s); font: var(--td-font-body-small); } .oneid-select-option.oneid-is-selected:not(.oneid-is-disabled) { color: var(--td-brand-color); background-color: var(--td-brand-color-light); -webkit-transition: all 0.2s linear; transition: all 0.2s linear; } .oneid-select-option.oneid-is-selected:not(.oneid-is-disabled) .oneid-checkbox__label { color: var(--td-brand-color); } .oneid-select-option.oneid-is-selected:not(.oneid-is-disabled):hover { background-color: var(--td-brand-color-light); } /** 规范 CSS 类名为 --hover */ .oneid-select-option.oneid-select-option__hover:not(.oneid-is-disabled).oneid-select-option.oneid-select-option__hover:not(.oneid-is-selected), .oneid-select-option.oneid-select-option__hover:not(.oneid-is-disabled).oneid-select-option.oneid-select-option--hover:not(.oneid-is-selected), .oneid-select-option.oneid-select-option--hover:not(.oneid-is-disabled).oneid-select-option.oneid-select-option__hover:not(.oneid-is-selected), .oneid-select-option.oneid-select-option--hover:not(.oneid-is-disabled).oneid-select-option.oneid-select-option--hover:not(.oneid-is-selected) { background-color: var(--td-bg-color-container-hover); } .oneid-select-option.oneid-select-option__hover:not(.oneid-is-disabled).oneid-select-option.oneid-select-option__hover:not(.oneid-is-selected) .oneid-checkbox__input, .oneid-select-option.oneid-select-option__hover:not(.oneid-is-disabled).oneid-select-option.oneid-select-option--hover:not(.oneid-is-selected) .oneid-checkbox__input, .oneid-select-option.oneid-select-option--hover:not(.oneid-is-disabled).oneid-select-option.oneid-select-option__hover:not(.oneid-is-selected) .oneid-checkbox__input, .oneid-select-option.oneid-select-option--hover:not(.oneid-is-disabled).oneid-select-option.oneid-select-option--hover:not(.oneid-is-selected) .oneid-checkbox__input { border-color: var(--td-brand-color); } .oneid-select-option.oneid-select-option__hover .oneid-checkbox__label, .oneid-select-option.oneid-select-option--hover .oneid-checkbox__label { color: inherit; } .oneid-select-option + .oneid-select-option { margin-top: var(--td-comp-paddingTB-xxs); } .oneid-select.oneid-select-input--borderless .oneid-select__right-icon { position: relative; margin: 0; } .oneid-select .oneid-fake-arrow { color: var(--td-text-color-placeholder); } .oneid-select .oneid-fake-arrow--active { color: var(--td-brand-color); } .oneid-is-selected.oneid-select-option__hover { background-color: var(--td-brand-color-light-hover); } .oneid-is-selected.oneid-select-option__hover .oneid-checkbox__label { color: var(--td-brand-color); } .oneid-pagination-mini { font: var(--td-font-body-medium); color: var(--td-text-color-primary); -webkit-box-sizing: border-box; box-sizing: border-box; margin: 0; padding: 0; list-style: none; } .oneid-pagination-mini--outline .oneid-pagination-mini__prev { border-top-right-radius: 0; border-bottom-right-radius: 0; position: relative; z-index: 1; } .oneid-pagination-mini--outline .oneid-pagination-mini__current { border-radius: 0; position: relative; margin-left: -1px; } .oneid-pagination-mini--outline .oneid-pagination-mini__current:hover { z-index: 1; } .oneid-pagination-mini--outline .oneid-pagination-mini__next { border-top-left-radius: 0; border-bottom-left-radius: 0; position: relative; margin-left: -1px; } .oneid-pagination-mini--outline .oneid-pagination-mini__next:hover { z-index: 1; } .oneid-pagination { font: var(--td-font-body-medium); color: var(--td-text-color-primary); -webkit-box-sizing: border-box; box-sizing: border-box; margin: 0; padding: 0; list-style: none; width: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; white-space: nowrap; color: var(--td-text-color-secondary); -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .oneid-pagination.oneid-is-disabled { color: var(--td-text-color-disabled); } .oneid-pagination__total { font: var(--td-font-body-medium); -webkit-box-flex: 1; -ms-flex: 1; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .oneid-pagination .oneid-select__wrap { width: auto; } .oneid-pagination__select { -ms-flex-negative: 0; flex-shrink: 0; margin-right: var(--td-comp-margin-l); height: var(--td-comp-size-m); font-size: var(--td-font-size-body-medium); color: var(--td-text-color-secondary); } .oneid-pagination__btn { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -ms-flex-negative: 0; flex-shrink: 0; cursor: pointer; color: var(--td-text-color-secondary); border-radius: var(--td-radius-default); font: var(--td-font-body-large); width: var(--td-comp-size-m); height: var(--td-comp-size-m); line-height: var(--td-comp-size-m); } .oneid-pagination__btn:hover { background-color: var(--td-bg-color-secondarycontainer-hover); -webkit-transition: all 0.2s cubic-bezier(0.82, 0, 1, 0.9); transition: all 0.2s cubic-bezier(0.82, 0, 1, 0.9); } .oneid-pagination__btn:active { background-color: var(--td-bg-color-secondarycontainer-active); } .oneid-pagination__btn.oneid-is-disabled, .oneid-pagination__btn.oneid-is-disabled:hover, .oneid-pagination__btn.oneid-is-disabled:active { background: none; color: var(--td-text-color-disabled); } .oneid-pagination__btn.oneid-is-disabled { cursor: not-allowed; } .oneid-pagination__btn-prev { margin-right: var(--td-comp-margin-s); } .oneid-pagination__btn-next { margin-left: var(--td-comp-margin-s); } .oneid-pagination__btn + .oneid-pagination__select { margin-right: 0; } .oneid-pagination__pager { -ms-flex-negative: 0; flex-shrink: 0; display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; vertical-align: middle; list-style: none; padding: 0; margin: 0; } .oneid-pagination__pager li:not(:last-child) { margin-right: var(--td-comp-margin-s); } .oneid-pagination__number { display: inline-block; border: 1px solid var(--td-component-border); text-align: center; border-radius: var(--td-radius-default); cursor: pointer; background-color: var(--td-bg-color-container); -webkit-box-sizing: border-box; box-sizing: border-box; height: var(--td-comp-size-m); min-width: var(--td-comp-size-m); line-height: calc(var(--td-comp-size-m) - 2px); font-size: var(--td-font-body-medium); padding-left: var(--td-comp-paddingLR-xs); padding-right: var(--td-comp-paddingLR-xs); } .oneid-pagination__number:hover { color: var(--td-brand-color-hover); border-color: var(--td-brand-color-hover); -webkit-transition: all 0.2s cubic-bezier(0.82, 0, 1, 0.9); transition: all 0.2s cubic-bezier(0.82, 0, 1, 0.9); } .oneid-pagination__number:active { background-color: var(--td-brand-color); color: var(--td-text-color-anti); border-color: var(--td-brand-color); } .oneid-pagination__number.oneid-is-current { background-color: var(--td-brand-color); color: var(--td-text-color-anti); border-color: var(--td-brand-color); } .oneid-pagination__number.oneid-is-current.oneid-is-disabled, .oneid-pagination__number.oneid-is-current.oneid-is-disabled:hover, .oneid-pagination__number.oneid-is-current.oneid-is-disabled:active { background-color: var(--td-brand-color-focus); color: var(--td-text-color-anti); border-color: var(--td-brand-color-focus); } .oneid-pagination__number.oneid-is-disabled { cursor: auto; background-color: var(--td-bg-color-component-disabled); color: var(--td-text-color-disabled); } .oneid-pagination__number.oneid-is-disabled:hover, .oneid-pagination__number.oneid-is-disabled:active { background-color: var(--td-bg-color-component-disabled); color: var(--td-text-color-disabled); border-color: var(--td-component-border); } .oneid-pagination__number--more { border: 0 none; padding: 0; } .oneid-pagination__number--more:hover { color: var(--td-text-color-primary); background-color: var(--td-bg-color-secondarycontainer-hover); -webkit-transition: all 0.2s cubic-bezier(0.82, 0, 1, 0.9); transition: all 0.2s cubic-bezier(0.82, 0, 1, 0.9); } .oneid-pagination__number--more:active { color: var(--td-text-color-primary); background-color: var(--td-bg-color-secondarycontainer-active); } .oneid-pagination__number--more.oneid-is-disabled, .oneid-pagination__number--more.oneid-is-disabled:hover, .oneid-pagination__number--more.oneid-is-disabled:active { background: none; } .oneid-pagination__number--more .oneid-icon-more { -webkit-transform: rotate(90deg); transform: rotate(90deg); color: var(--td-text-color-disabled); } .oneid-pagination__jump { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -ms-flex-negative: 0; flex-shrink: 0; margin-left: var(--td-comp-margin-s); font-size: var(--td-font-body-medium); gap: var(--td-comp-margin-s); background-color: var(--td-bg-color-secondarycontainer); height: var(--td-comp-size-m); padding-left: var(--td-comp-margin-s); border-radius: var(--td-radius-default); } .oneid-pagination .oneid-input-adornment__append { border: none; height: calc(var(--td-comp-size-m) - 4px); color: var(--td-text-color-secondary); background-color: transparent; } .oneid-pagination .oneid-input-adornment__append .oneid-input-adornment__text { border: none; } .oneid-pagination .oneid-input-number { width: 56px; } .oneid-pagination .oneid-input-number .oneid-input { height: calc(var(--td-comp-size-m) - 4px); border-radius: var(--td-radius-default); } .oneid-pagination .oneid-input-number .oneid-input__inner { text-align: center; } .oneid-pagination.oneid-size-s { font: var(--td-font-body-small); } .oneid-pagination.oneid-size-s .oneid-pagination__jump { height: var(--td-comp-size-xs); } .oneid-pagination.oneid-size-s .oneid-input-adornment__append { height: calc(var(--td-comp-size-xs) - 4px); font: var(--td-font-body-small); } .oneid-pagination.oneid-size-s .oneid-input-number { width: 48px; } .oneid-pagination.oneid-size-s .oneid-input-number .oneid-input { height: calc(var(--td-comp-size-xs) - 4px); } .oneid-pagination.oneid-size-s .oneid-pagination__total { font: var(--td-font-body-small); } .oneid-pagination.oneid-size-s .oneid-pagination__select { height: var(--td-comp-size-xs); font-size: var(--td-font-size-body-small); } .oneid-pagination.oneid-size-s .oneid-pagination__number { border: 0 none; height: var(--td-comp-size-xs); min-width: var(--td-comp-size-xs); line-height: var(--td-comp-size-xs); font-size: var(--td-font-body-small); padding-left: var(--td-comp-paddingLR-xxs); padding-right: var(--td-comp-paddingLR-xxs); } .oneid-pagination.oneid-size-s .oneid-pagination__number:hover:not(.oneid-pagination.oneid-size-s .oneid-pagination__number.oneid-is-current) { color: var(--td-text-color-primary); background-color: var(--td-bg-color-secondarycontainer-hover); -webkit-transition: all 0.2s cubic-bezier(0.82, 0, 1, 0.9); transition: all 0.2s cubic-bezier(0.82, 0, 1, 0.9); } .oneid-pagination.oneid-size-s .oneid-pagination__number:active:not(.oneid-pagination.oneid-size-s .oneid-pagination__number.oneid-is-current) { color: var(--td-text-color-primary); background-color: var(--td-bg-color-secondarycontainer-active); } .oneid-pagination.oneid-size-s .oneid-pagination__number.oneid-is-disabled { background: none; color: var(--td-text-color-disabled); } .oneid-pagination.oneid-size-s .oneid-pagination__number.oneid-is-current.oneid-is-disabled { background-color: var(--td-brand-color-focus); color: var(--td-text-color-anti); border-color: var(--td-brand-color-focus); } .oneid-pagination.oneid-size-s .oneid-pagination__btn { border: 0 none; background: none; width: var(--td-comp-size-xs); height: var(--td-comp-size-xs); line-height: var(--td-comp-size-xs); } .oneid-pagination.oneid-size-s .oneid-pagination__btn:hover { background-color: var(--td-bg-color-secondarycontainer-hover); -webkit-transition: all 0.2s cubic-bezier(0.82, 0, 1, 0.9); transition: all 0.2s cubic-bezier(0.82, 0, 1, 0.9); } .oneid-pagination.oneid-size-s .oneid-pagination__btn:active { background-color: var(--td-bg-color-secondarycontainer-active); } .oneid-pagination.oneid-size-s .oneid-pagination__btn.oneid-is-disabled, .oneid-pagination.oneid-size-s .oneid-pagination__btn.oneid-is-disabled:hover, .oneid-pagination.oneid-size-s .oneid-pagination__btn.oneid-is-disabled:active { background: none; color: var(--td-text-color-disabled); } /** IE 兼容 **/ .oneid-pagination-ie { /** 在 IE11 以下浏览器,input autoWidth 计算无法依赖 observer,因而加上最小宽度,避免分页信息出现 0 的情况 */ } .oneid-pagination-ie .oneid-select .oneid-input__inner { min-width: 54px; } /** 吸顶表头 Affix 组件,zIndex: 1000。宽度拖拽辅助线层级需高于表头 */ @-moz-document url-prefix() { .scrollbar { scrollbar-color: var(--td-scrollbar-color) transparent; scrollbar-width: thin; } } .scrollbar::-webkit-scrollbar { width: 6px; height: 6px; } .scrollbar::-webkit-scrollbar-thumb { border: 0px solid transparent; background-clip: content-box; background-color: var(--td-scrollbar-color); border-radius: 11px; } .scrollbar::-webkit-scrollbar-thumb:vertical:hover, .scrollbar::-webkit-scrollbar-thumb:horizontal:hover { background-color: var(--td-scrollbar-hover-color); } .scrollbar.oneid-table__affixed-footer-elm::-webkit-scrollbar-track, .scrollbar.oneid-table__scrollbar--obvious::-webkit-scrollbar-track { background: var(--td-scroll-track-color); } .oneid-table__affixed-footer-wrap > .scrollbar.oneid-table__affixed-footer-elm::-webkit-scrollbar-thumb, .oneid-table--width-overflow.oneid-table--footer-affixed .oneid-table__content::-webkit-scrollbar-thumb, .oneid-table--width-overflow.oneid-table--horizontal-bar-affixed .oneid-table__content::-webkit-scrollbar-thumb { background: transparent; } .oneid-table.oneid-table--overflow-visible { overflow: initial; } .oneid-table { -webkit-box-sizing: border-box; box-sizing: border-box; margin: 0; padding: 0; list-style: none; width: 100%; font: var(--td-font-body-medium); color: var(--td-text-color-primary); background-color: var(--td-bg-color-container); position: relative; /** loading need to be top of fixed columns */ } .oneid-table .oneid-popup:not(.oneid-tooltip)[data-popper-placement^=top] .oneid-popup__arrow { bottom: -4px; } .oneid-table:focus-visible { outline: none; } .oneid-table .oneid-loading--full { z-index: 72; } .oneid-table.oneid-vertical-align-top th:not(.oneid-table__cell-check), .oneid-table.oneid-vertical-align-top td:not(.oneid-table__cell-check) { vertical-align: top; } .oneid-table.oneid-vertical-align-middle th:not(.oneid-table__cell-check), .oneid-table.oneid-vertical-align-middle td:not(.oneid-table__cell-check) { vertical-align: middle; } .oneid-table.oneid-vertical-align-bottom th:not(.oneid-table__cell-check), .oneid-table.oneid-vertical-align-bottom td:not(.oneid-table__cell-check) { vertical-align: bottom; } .oneid-table .oneid-table__resize-line { display: none; position: absolute; left: 10px; width: 0; border-left: 1px solid var(--td-component-border); z-index: 1001; } .oneid-table__column-controller-trigger.oneid-align-top-right, .oneid-table__column-controller-trigger.oneid-align-bottom-right { text-align: right; } .oneid-table__column-controller-trigger { padding: var(--td-comp-paddingTB-l) 0; } .oneid-table__column-controller-item:not(:last-child) { margin-bottom: var(--td-comp-margin-l); } .oneid-table__content { position: relative; } @-moz-document url-prefix() { .oneid-table__content { scrollbar-color: var(--td-scrollbar-color) transparent; scrollbar-width: thin; } } .oneid-table__content::-webkit-scrollbar { width: 6px; height: 6px; } .oneid-table__content::-webkit-scrollbar-thumb { border: 0px solid transparent; background-clip: content-box; background-color: var(--td-scrollbar-color); border-radius: 11px; } .oneid-table__content::-webkit-scrollbar-thumb:vertical:hover, .oneid-table__content::-webkit-scrollbar-thumb:horizontal:hover { background-color: var(--td-scrollbar-hover-color); } @-moz-document url-prefix() { .oneid-table__content { scrollbar-color: var(--td-scrollbar-color) transparent; scrollbar-width: thin; } } .oneid-table__content::-webkit-scrollbar { width: 6px; height: 6px; } .oneid-table__content::-webkit-scrollbar-thumb { border: 0px solid transparent; background-clip: content-box; background-color: var(--td-scrollbar-color); border-radius: 11px; } .oneid-table__content::-webkit-scrollbar-thumb:vertical:hover, .oneid-table__content::-webkit-scrollbar-thumb:horizontal:hover { background-color: var(--td-scrollbar-hover-color); } .oneid-table__pagination { padding: var(--td-comp-paddingTB-l) var(--td-comp-paddingLR-l); -webkit-box-sizing: border-box; box-sizing: border-box; } .oneid-table .oneid-icon { font-size: var(--td-font-size-body-large); } .oneid-table table { width: 100%; border-spacing: 0; } .oneid-table .oneid-text-ellipsis { line-height: var(--td-line-height-body-medium); white-space: nowrap; word-wrap: normal; overflow: hidden; text-overflow: ellipsis; } .oneid-table th, .oneid-table td { position: relative; padding: var(--td-comp-paddingTB-m) var(--td-comp-paddingLR-l); border-bottom: 1px solid var(--td-component-border); line-height: var(--td-line-height-body-medium); font-weight: normal; overflow-wrap: break-word; background-color: inherit; -webkit-box-sizing: border-box; box-sizing: border-box; text-align: left; } .oneid-table th.oneid-table__th-drag { padding: 0; height: 0; text-align: center; } .oneid-table thead td, .oneid-table th { color: var(--td-text-color-placeholder); } .oneid-table td[key=row-select] { padding: 13px 0 11px var(--td-comp-paddingLR-l); } .oneid-table td.oneid-align-left, .oneid-table th.oneid-align-left { text-align: left; } .oneid-table td.oneid-align-right, .oneid-table th.oneid-align-right { text-align: right; } .oneid-table td.oneid-align-center, .oneid-table th.oneid-align-center { text-align: center; } .oneid-table tr { background-color: var(--td-bg-color-container); } .oneid-table.oneid-size-s th, .oneid-table.oneid-size-s td { padding: var(--td-comp-paddingTB-s) var(--td-comp-paddingLR-s); } .oneid-table.oneid-size-l th, .oneid-table.oneid-size-l td { padding: var(--td-comp-paddingTB-l) var(--td-comp-paddingLR-xl); } .oneid-table .oneid-table__expandable-icon-cell, .oneid-table .oneid-table__selection-cell { padding: 0; height: 0; } .oneid-table td.oneid-table__handle-draggable { text-align: center; height: 0; padding: 0; } .oneid-table .oneid-table__cell--selectable > .oneid-checkbox { vertical-align: middle; } .oneid-table .oneid-table__cell--selectable + td, .oneid-table .oneid-table__cell--selectable + th { padding-left: 0; } .oneid-table--bordered td, .oneid-table--bordered th { border-left: 1px solid var(--td-component-border); } .oneid-table--bordered td.oneid-table__cell--fixed-left-last::before, .oneid-table--bordered th.oneid-table__cell--fixed-left-last::before { border-right: 1px solid var(--td-component-border); } .oneid-table--bordered th:first-child, .oneid-table--bordered td.oneid-table__td-first-col { border-left-width: 0; } .oneid-table--bordered:not(.oneid-table--rowspan-colspan) td:first-child { border-left-width: 0; } .oneid-table--bordered .oneid-table__content { border-left: 1px solid var(--td-component-border); } .oneid-table--bordered .oneid-table__content::-webkit-scrollbar-corner { background-color: transparent; } .oneid-table--bordered .oneid-table__content { border: 1px solid var(--td-component-border); border-radius: var(--td-radius-default); } .oneid-table--bordered .oneid-table--loading { border-bottom: 1px solid var(--td-component-border); } .oneid-table--bordered .oneid-table__pagination { padding: var(--td-comp-paddingTB-l) var(--td-comp-paddingLR-l); } .oneid-table--bordered .oneid-table__bottom-content + .oneid-table__pagination { padding: 0; } .oneid-table--bordered.oneid-table__header--fixed .oneid-table__content { border-bottom: 1px solid var(--td-component-border); } .oneid-table--bordered .oneid-table__td-last-row { border-bottom: none; } .oneid-table--striped:not(.oneid-table--bordered) th, .oneid-table--striped:not(.oneid-table--bordered) td { border-bottom: none; } .oneid-table--striped.oneid-table--header-fixed > .oneid-table__content > table > tbody tr:nth-of-type(even) { background-color: var(--td-bg-color-secondarycontainer); } .oneid-table--striped:not(.oneid-table--header-fixed) > .oneid-table__content > table > tbody > tr:nth-of-type(odd):not(.oneid-table__expanded-row) { background-color: var(--td-bg-color-secondarycontainer); } .oneid-table--striped.oneid-table--hoverable.oneid-table__header--fixed tbody tr:nth-of-type(even):hover { background-color: var(--td-bg-color-secondarycontainer-hover); } .oneid-table--striped.oneid-table--hoverable:not(.oneid-table__header--fixed) > .oneid-table__content > table > tbody tr:nth-of-type(odd):hover { background-color: var(--td-bg-color-secondarycontainer-hover); } .oneid-table--striped.oneid-table--hoverable > .oneid-table__content > table > tbody tr { -webkit-transition: background-color 0.2s linear; transition: background-color 0.2s linear; } .oneid-table--striped.oneid-table--hoverable > .oneid-table__content > table > tbody tr:hover { background-color: var(--td-bg-color-container-hover); } .oneid-table--hoverable tbody tr { -webkit-transition: background-color 0.2s linear; transition: background-color 0.2s linear; } .oneid-table--hoverable tbody tr:hover { background-color: var(--td-bg-color-container-hover); } .oneid-table.oneid-table--align-top tbody td { vertical-align: top; } .oneid-table .oneid-table__cell--highlight { background-color: var(--td-bg-color-secondarycontainer); } .oneid-table__header--fixed table { table-layout: fixed; } .oneid-table__header--fixed th, .oneid-table__header--fixed td { overflow-wrap: break-word; } .oneid-table__header--fixed.oneid-table__header, .oneid-table__header--fixed .oneid-table__header { width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; position: relative; z-index: 5; } @-moz-document url-prefix() { .oneid-table__header--fixed .oneid-table__header { scrollbar-color: var(--td-scrollbar-color) transparent; scrollbar-width: thin; } } .oneid-table__header--fixed .oneid-table__header::-webkit-scrollbar { width: 6px; height: 6px; } .oneid-table__header--fixed .oneid-table__header::-webkit-scrollbar-thumb { border: 0px solid transparent; background-clip: content-box; background-color: var(--td-scrollbar-color); border-radius: 11px; } .oneid-table__header--fixed .oneid-table__header::-webkit-scrollbar-thumb:vertical:hover, .oneid-table__header--fixed .oneid-table__header::-webkit-scrollbar-thumb:horizontal:hover { background-color: var(--td-scrollbar-hover-color); } @-moz-document url-prefix() { .oneid-table__header--fixed .oneid-table__header { scrollbar-color: var(--td-scrollbar-color) transparent; scrollbar-width: thin; } } .oneid-table__header--fixed .oneid-table__header::-webkit-scrollbar { width: 6px; height: 6px; } .oneid-table__header--fixed .oneid-table__header::-webkit-scrollbar-thumb { border: 0px solid transparent; background-clip: content-box; background-color: var(--td-scrollbar-color); border-radius: 11px; } .oneid-table__header--fixed .oneid-table__header::-webkit-scrollbar-thumb:vertical:hover, .oneid-table__header--fixed .oneid-table__header::-webkit-scrollbar-thumb:horizontal:hover { background-color: var(--td-scrollbar-hover-color); } .oneid-table__header--fixed .oneid-table__body { overflow-y: auto; width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; } @-moz-document url-prefix() { .oneid-table__header--fixed .oneid-table__body { scrollbar-color: var(--td-scrollbar-color) transparent; scrollbar-width: thin; } } .oneid-table__header--fixed .oneid-table__body::-webkit-scrollbar { width: 6px; height: 6px; } .oneid-table__header--fixed .oneid-table__body::-webkit-scrollbar-thumb { border: 0px solid transparent; background-clip: content-box; background-color: var(--td-scrollbar-color); border-radius: 11px; } .oneid-table__header--fixed .oneid-table__body::-webkit-scrollbar-thumb:vertical:hover, .oneid-table__header--fixed .oneid-table__body::-webkit-scrollbar-thumb:horizontal:hover { background-color: var(--td-scrollbar-hover-color); } @-moz-document url-prefix() { .oneid-table__header--fixed .oneid-table__body { scrollbar-color: var(--td-scrollbar-color) transparent; scrollbar-width: thin; } } .oneid-table__header--fixed .oneid-table__body::-webkit-scrollbar { width: 6px; height: 6px; } .oneid-table__header--fixed .oneid-table__body::-webkit-scrollbar-thumb { border: 0px solid transparent; background-clip: content-box; background-color: var(--td-scrollbar-color); border-radius: 11px; } .oneid-table__header--fixed .oneid-table__body::-webkit-scrollbar-thumb:vertical:hover, .oneid-table__header--fixed .oneid-table__body::-webkit-scrollbar-thumb:horizontal:hover { background-color: var(--td-scrollbar-hover-color); } .oneid-table:not(.oneid-table--bordered) .oneid-table__cell--selectable + td, .oneid-table:not(.oneid-table--bordered) .oneid-table__cell--selectable + th { padding-left: 0; } .oneid-table__cell--fixed.oneid-table__header--fixed .oneid-table__header { overflow: hidden; width: 100%; } .oneid-table__cell--fixed.oneid-table__header--fixed .oneid-table__header .oneid-table__cell--fixed-left:last-child::after, .oneid-table__cell--fixed.oneid-table__header--fixed .oneid-table__header .oneid-table__cell--fixed-right:last-child::after { content: ""; position: absolute; right: -6px; width: 6px; height: 100%; top: 0; background-color: var(--td-bg-color-secondarycontainer); } .oneid-table__cell--fixed.oneid-table__header--fixed .oneid-table__body { overflow: auto scroll; } .oneid-table__cell--fixed .oneid-table__content { overflow: auto hidden; } .oneid-table__cell--fixed table { table-layout: fixed; min-width: 100%; } .oneid-table__cell--fixed th, .oneid-table__cell--fixed td { position: relative; } .oneid-table__cell--fixed .oneid-table__cell--fixed-left-last::before { z-index: -1; background-color: inherit; } .oneid-table__cell--fixed .oneid-table__cell--fixed-left-last::after { position: absolute; top: 0; bottom: 0; content: ""; -webkit-transition: -webkit-box-shadow 0.3s; transition: -webkit-box-shadow 0.3s; transition: box-shadow 0.3s; transition: box-shadow 0.3s, -webkit-box-shadow 0.3s; pointer-events: none; z-index: -2; } .oneid-table__cell--fixed .oneid-table__cell--fixed-left-last::after { right: 0; -webkit-transform: translateX(100%); transform: translateX(100%); } .oneid-table__cell--fixed .oneid-table__cell--fixed-right-first::before { z-index: -1; background-color: inherit; } .oneid-table__cell--fixed .oneid-table__cell--fixed-right-first::after { position: absolute; top: 0; bottom: 0; content: ""; -webkit-transition: -webkit-box-shadow 0.3s; transition: -webkit-box-shadow 0.3s; transition: box-shadow 0.3s; transition: box-shadow 0.3s, -webkit-box-shadow 0.3s; pointer-events: none; z-index: -2; } .oneid-table__cell--fixed .oneid-table__cell--fixed-right-first::after { left: 0; -webkit-transform: translateX(-100%); transform: translateX(-100%); } .oneid-table .oneid-table__cell-resizable { position: relative; } .oneid-table .oneid-table__cell-resizable .oneid-table__cell--resizer { position: absolute; top: 0; right: -5px; bottom: 0; z-index: 10; width: 10px; cursor: col-resize; } .oneid-table .oneid-table__row--disabled { color: var(--td-text-color-disabled); } .oneid-table .oneid-table__cell--title { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .oneid-table__column-controller-desc { margin-bottom: var(--td-comp-margin-xxl); } .oneid-table__column-controller-block { padding: var(--td-comp-paddingTB-m) var(--td-comp-paddingLR-l); border: 1px solid var(--td-component-border); border-bottom: 1px solid var(--td-component-border); } .oneid-table__column-controller-block + .oneid-table__column-controller-block { border-top: 0; padding: var(--td-comp-paddingTB-l) var(--td-comp-paddingLR-l); border-bottom: 1px solid var(--td-component-border); } .oneid-table__column-controller--fixed .oneid-checkbox { width: 108px; } /** 表格行点击高亮悬浮态 */ .oneid-table.oneid-table__row--active-single tbody > tr.oneid-table__row--active, .oneid-table.oneid-table__row--active-multiple tbody > tr.oneid-table__row--active { background-color: var(--td-brand-color-light); } .oneid-table.oneid-table__row--active-single tbody > tr.oneid-table__row--active.oneid-table__row--hover, .oneid-table.oneid-table__row--active-multiple tbody > tr.oneid-table__row--active.oneid-table__row--hover { background-color: var(--td-brand-color-light-hover); } .oneid-table.oneid-table--hoverable tbody > tr.oneid-table__row--active:hover { background-color: var(--td-brand-color-light-hover); } /** 键盘操作悬浮表格行 */ .oneid-table.oneid-table--row-expandable tbody > tr.oneid-table__row--hover, .oneid-table.oneid-table--row-select tbody > tr.oneid-table__row--hover, .oneid-table.oneid-table__row--active-multiple tbody > tr.oneid-table__row--hover { background-color: var(--td-bg-color-container-hover); } .oneid-table--bordered .oneid-table__cell--sortable .oneid-table__cell--title, .oneid-table--bordered .oneid-table__cell--filterable .oneid-table__cell--title { -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } .oneid-table th.oneid-align-right .oneid-table__cell--title { -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; } /** * 有边框和无边框的图标排列不一样,需谨慎修改 * 无边框模式,图标依次紧跟标题 * 有边框模式,只有一个图标时,图标靠近边框右侧;有两个图标时,排序图标靠近标题,过滤图标靠近边框右侧 */ .oneid-table__cell--sort-trigger { text-align: center; vertical-align: text-bottom; } .oneid-table__cell--sort-trigger svg { vertical-align: initial; } .oneid-table--loading { position: relative; } .oneid-table--loading-progressbar { overflow: hidden; position: absolute; top: 0; left: 0; height: 1px; background-color: var(--td-brand-color); -webkit-animation: tTableProgressbar 2s ease-in-out; animation: tTableProgressbar 2s ease-in-out; -webkit-animation-fill-mode: both; animation-fill-mode: both; } .oneid-table--loading-message { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; min-height: 120px; color: var(--td-text-color-placeholder); } .oneid-table__expanded-cell { padding-left: 45px; } .oneid-table__async-loading { text-align: center; } .oneid-table__async-loading.oneid-is-load-more { cursor: pointer; } .oneid-table__empty { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; min-height: 120px; color: var(--td-text-color-disabled); } .oneid-table__filter-icon, .oneid-table__sort-icon { -webkit-box-align: center; -ms-flex-align: center; align-items: center; background-color: transparent; display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; cursor: pointer; vertical-align: text-bottom; -webkit-transition: 0.2s linear; transition: 0.2s linear; } .oneid-table__filter-icon > svg, .oneid-table__sort-icon > svg { margin-top: 0; } .oneid-table__sort-icon .oneid-is-focus, .oneid-table__sort-icon.oneid-is-focus, .oneid-table__sort-icon:hover { color: var(--td-brand-color); border-radius: var(--td-radius-circle); -webkit-transition: 0.2s linear; transition: 0.2s linear; } .oneid-table__filter-icon .oneid-is-focus, .oneid-table__filter-icon.oneid-is-focus, .oneid-table__filter-icon:hover { color: var(--td-brand-color); -webkit-transition: 0.2s linear; transition: 0.2s linear; } .oneid-table__filter-pop .oneid-popup__content { padding: 0; } .oneid-table__filter-pop .oneid-table__filter-pop-content .oneid-table__filter-pop-content-inner { padding: var(--td-comp-paddingTB-l) var(--td-comp-paddingLR-l); } .oneid-table__filter-pop .oneid-table__filter-pop-content .oneid-table__filter-pop-content-inner .oneid-table__filter-popup-input { margin-bottom: var(--td-comp-margin-s); } .oneid-table__filter-pop .oneid-table__filter-pop-content .oneid-radio-group { display: block; height: auto; } .oneid-table__filter-pop .oneid-table__filter-pop-content .oneid-checkbox-group { display: block; } .oneid-table__filter-pop .oneid-table__filter-pop-content .oneid-checkbox, .oneid-table__filter-pop .oneid-table__filter-pop-content .oneid-radio { display: block; margin: var(--td-comp-margin-xs) 0; } .oneid-table__filter-pop .oneid-table__filter-pop-content .oneid-table__filter-pop-content-button { border-top: 1px solid var(--td-component-border); padding: var(--td-comp-paddingTB-l) var(--td-comp-paddingLR-l); } .oneid-table__filter-pop .oneid-table__filter-pop-content .oneid-table__filter-pop-content-button .oneid-button + .oneid-button { margin-left: var(--td-comp-margin-l); } .oneid-table__filter-pop .oneid-table__list-filter-input--sticky .oneid-table__filter-pop-content .oneid-table__filter-pop-content-inner { padding: 0; max-height: 280px; overflow: auto; position: relative; } .oneid-table__filter-pop .oneid-table__list-filter-input--sticky .oneid-table__filter-pop-content .oneid-table__filter-pop-content-inner .oneid-input__wrap { padding: var(--td-comp-paddingTB-l) var(--td-comp-paddingLR-l) 0 var(--td-comp-paddingLR-l); position: -webkit-sticky; position: sticky; top: 0; z-index: 1; background-color: var(--td-bg-color-container); } .oneid-table__filter-pop .oneid-table__list-filter-input--sticky .oneid-table__filter-pop-content .oneid-table__filter-pop-content-inner .oneid-radio-group { padding: 0 var(--td-comp-paddingLR-l); } .oneid-table__filter-pop-content-inner > .oneid-input__wrap { width: 200px; } .oneid-table__filter-pop-content-inner > .oneid-date-range-picker__panel { margin: calc(0px - var(--td-comp-margin-l)); } .oneid-table__sort-icon--active { color: var(--td-brand-color); -webkit-transition: 0.2s linear; transition: 0.2s linear; } .oneid-table__double-icons { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .oneid-table__double-icons .oneid-table__sort-icon { position: relative; } .oneid-table__double-icons .oneid-table-sort-asc { top: var(--td-comp-margin-xxs); } .oneid-table__double-icons .oneid-table-sort-desc { bottom: var(--td-comp-margin-xxs); } .oneid-table__filter-icon-wrap { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; pointer-events: all; height: var(--td-font-size-body-large); width: var(--td-font-size-body-large); margin-left: var(--td-comp-margin-s); } .oneid-table--bordered .oneid-table__filter-icon-wrap { -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; } .oneid-table--bordered .oneid-table__cell--sortable.oneid-table__cell--filterable .oneid-table__filter-icon-wrap { -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-flex: 1; -ms-flex: 1; flex: 1; } .oneid-table .oneid-align-center .oneid-table__cell--sortable, .oneid-table .oneid-align-center .oneid-table__cell--filterable { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-pack: distribute; justify-content: space-around; } .oneid-table__expand-box { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; width: 100%; height: 100%; color: var(--td-text-color-placeholder); cursor: pointer; -webkit-transition: all 0.2s cubic-bezier(0.38, 0, 0.24, 1) 0s; transition: all 0.2s cubic-bezier(0.38, 0, 0.24, 1) 0s; } .oneid-table__expand-box:hover { color: var(--td-brand-color); -webkit-transition: 0.2s linear; transition: 0.2s linear; } @-webkit-keyframes tTableProgressbar { 0% { width: 0; } 100% { width: 100%; } } @keyframes tTableProgressbar { 0% { width: 0; } 100% { width: 100%; } } .oneid-table__th-row-select .oneid-table__th-cell-inner { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .oneid-table-expandable-icon-cell + .oneid-table__cell--selectable[key=row-select] { padding-left: var(--td-comp-margin-s); } .oneid-table__filter--bottom-buttons { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; padding: var(--td-comp-paddingTB-l) var(--td-comp-paddingLR-l); border-top: 1px solid var(--td-component-border); } .oneid-table__filter--bottom-buttons > .oneid-button + .oneid-button { margin-left: var(--td-comp-margin-s); } .oneid-table__row-filter-inner { position: -webkit-sticky; position: sticky; left: 0; text-align: center; } .oneid-table__filter-result { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .oneid-table__filter-result > .oneid-button { margin-left: var(--td-comp-margin-s); } .oneid-table--layout-fixed { table-layout: fixed; } .oneid-table--layout-auto { table-layout: auto; } .oneid-table__ellipsis { white-space: nowrap; width: 100%; } .oneid-table__content { overflow: auto; } .oneid-table__content--scrollable-to-left .oneid-table__cell--fixed-left-last::after { border-right: 2px solid var(--td-component-border); } .oneid-table__content--scrollable-to-right .oneid-table__cell--fixed-right-first::after { border-left: 2px solid var(--td-component-border); } .oneid-table--bordered.oneid-table__content--scrollable-to-left .oneid-table__cell--fixed-left-last::after { border-right: 4px solid var(--td-component-border); } .oneid-table--bordered.oneid-table__content--scrollable-to-right .oneid-table__cell--fixed-right-first::after { border-left: 4px solid var(--td-component-border); } .oneid-table__scroll-bar-divider { position: absolute; bottom: 0; right: 0; height: 100%; border-right: 1px solid var(--td-component-border); z-index: 71; } .oneid-table__footer, .oneid-table__header.oneid-table__header--fixed { position: -webkit-sticky; position: sticky; z-index: 50; } .oneid-table:not(.oneid-table--striped) .oneid-table__footer > tr { background-color: var(--td-bg-color-secondarycontainer); } .oneid-table__header--fixed:not(.oneid-table__header--multiple) > tr > th { background-color: var(--td-bg-color-secondarycontainer); } .oneid-table__row--fixed-top, .oneid-table__row--fixed-bottom { position: -webkit-sticky; position: sticky; z-index: 70; } .oneid-table__row--fixed-bottom-first > td { border-top: 1px solid var(--td-component-border); } .oneid-table--bordered .oneid-table__content .oneid-table__row--without-border-bottom > td { border-bottom: 0; } .oneid-table--bordered tbody > tr:last-child > td, .oneid-table--bordered tfoot > tr:last-child > td { border-bottom: 0; } .oneid-table--bordered tfoot > tr:first-child > td { border-top: 1px solid var(--td-component-border); } .oneid-table__header.oneid-table__header--fixed { top: 0; } .oneid-table__footer.oneid-table__footer--fixed { bottom: 0; } .oneid-table--column-fixed .oneid-table__cell--fixed-left-last::before { z-index: -1; background-color: inherit; } .oneid-table--column-fixed .oneid-table__cell--fixed-left-last::after { position: absolute; top: 0; bottom: 0; content: ""; -webkit-transition: -webkit-box-shadow 0.3s; transition: -webkit-box-shadow 0.3s; transition: box-shadow 0.3s; transition: box-shadow 0.3s, -webkit-box-shadow 0.3s; pointer-events: none; z-index: -2; } .oneid-table--column-fixed .oneid-table__cell--fixed-left-last::after { right: 0; -webkit-transform: translateX(100%); transform: translateX(100%); } .oneid-table--column-fixed .oneid-table__cell--fixed-right-first::before { z-index: -1; background-color: inherit; } .oneid-table--column-fixed .oneid-table__cell--fixed-right-first::after { position: absolute; top: 0; bottom: 0; content: ""; -webkit-transition: -webkit-box-shadow 0.3s; transition: -webkit-box-shadow 0.3s; transition: box-shadow 0.3s; transition: box-shadow 0.3s, -webkit-box-shadow 0.3s; pointer-events: none; z-index: -2; } .oneid-table--column-fixed .oneid-table__cell--fixed-right-first::after { left: 0; -webkit-transform: translateX(-100%); transform: translateX(-100%); } .oneid-table--column-fixed .oneid-table__cell--fixed-left, .oneid-table--column-fixed .oneid-table__cell--fixed-right { position: -webkit-sticky; position: sticky; } .oneid-table--column-fixed .oneid-table__cell--fixed-left { z-index: 30; } .oneid-table--column-fixed .oneid-table__cell--fixed-right { z-index: 31; } .oneid-table__empty-row > td { padding: 0; border: 0; } .oneid-table:not(.oneid-table--bordered) .oneid-table__header.oneid-table--bordered > tr:first-child > th { border-top: 1px solid var(--td-component-border); } .oneid-table--multiple-header .oneid-table__header th.oneid-table__header-th--bordered { border-left-width: 1px; } .oneid-table__header.oneid-table__header--multiple > tr { background-color: var(--td-bg-color-container); } .oneid-table__tree-op-icon { margin-right: var(--td-comp-margin-s); cursor: pointer; display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; vertical-align: -3px; } .oneid-table__tree-op-icon:hover { color: var(--td-brand-color); -webkit-transition: 0.2s linear; transition: 0.2s linear; } .oneid-table__tree-leaf-node .oneid-table__tree-op-icon { min-width: 0; margin-right: var(--td-comp-margin-xxs); } .oneid-table__virtual-scroll-cursor { position: absolute; width: 1px; height: 1px; -webkit-transition: -webkit-transform 0.2s; transition: -webkit-transform 0.2s; transition: transform 0.2s; transition: transform 0.2s, -webkit-transform 0.2s; } .oneid-table__virtual-scroll-header { position: absolute; z-index: 51; left: 0; } /** 用于隐藏表头滚动条 */ .oneid-table__affixed-header-elm-wrap { overflow: hidden; } .oneid-table__affixed-header-elm-wrap, .oneid-table__affixed-header-elm { position: absolute; left: 0; z-index: 51; } .oneid-table__affixed-header-elm { overflow: auto; -webkit-transition: opacity 0.2s linear; transition: opacity 0.2s linear; opacity: 1; } .oneid-table__affixed-footer-elm { overflow: auto; z-index: 50; } .oneid-table--bordered .oneid-table__affixed-header-elm { border: 1px solid var(--td-component-border); border-bottom: 0; border-right: 0; } .oneid-table--bordered .oneid-table__affixed-footer-elm { border-left: 1px solid var(--td-component-border); border-bottom: 1px solid var(--td-component-border); } .oneid-table--multiple-header.oneid-table--bordered .oneid-table__affixed-header-elm { border-right: 0; } .oneid-is-hidden { display: none; } .oneid-positive-rotate-90 { -webkit-transform: rotate(90deg); transform: rotate(90deg); } .oneid-negative-rotate-180 { -webkit-transform: rotate(180deg); transform: rotate(180deg); } .oneid-table__expanded-row > td, .oneid-table__row--full > td { padding: 0; } /** @{prefix}-table__row--full 和 @{prefix}-table__row-full-element 同时存在,是为了保证 固定列时,当前行不随内容进行横向滚动 */ .oneid-table__row-full-element { padding: var(--td-comp-paddingTB-m) var(--td-comp-paddingLR-l); } .oneid-table__row-full-inner { position: -webkit-sticky; position: sticky; left: 0; } .oneid-table__row-full-inner:not(.oneid-table__empty) { display: inline-block; } .oneid-table__tree-col { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .oneid-table__tree-col--inline { display: inline; } .oneid-table--full-height { height: 100%; } /** 默认最小高度限制为 Empty 高度加表头高度 */ .oneid-table--loading .oneid-table__content { min-height: 168px; } .oneid-table__handle-draggable:hover, .oneid-table--row-draggable tr, .oneid-table__th--drag-sort { cursor: move; } .oneid-table__ele--draggable-chosen { -webkit-box-shadow: var(--td-shadow-1); box-shadow: var(--td-shadow-1); } .oneid-table:not(.oneid-table--row-edit) .oneid-table__cell--editable { min-height: 22px; line-height: var(--td-line-height-body-medium); cursor: pointer; } .oneid-table:not(.oneid-table--row-edit) .oneid-table__cell--editable .oneid-icon { margin-left: var(--td-comp-margin-s); font-size: var(--td-font-size-body-large); -webkit-transition: 0.2s linear; transition: 0.2s linear; color: var(--td-text-color-placeholder); } .oneid-table:not(.oneid-table--row-edit) .oneid-table__cell--editable .oneid-icon:hover { color: var(--td-brand-color); } .oneid-table:not(.oneid-table--row-edit) .oneid-table__cell--editable:hover { -webkit-transition: 0.2s linear; transition: 0.2s linear; } /** 吸底的分页器,需要背景色,避免表格文本内容显示穿透 */ .oneid-affix .oneid-table__pagination { background-color: var(--td-bg-color-container); } .oneid-table--bordered .oneid-affix .oneid-table__pagination { border-top: 1px solid var(--td-component-border); } .oneid-table__bottom-content + .oneid-table__pagination-wrap .oneid-table__pagination { border: 0; padding: 0; } .oneid-table--column-resizable:not(.oneid-table--bordered) { /** 表格左边有冻结列滚动时,去掉hover表头时多出的一个像素,避免出现表头的冻结列跟表内容的冻结列没有对齐的问题 */ } .oneid-table--column-resizable:not(.oneid-table--bordered) th { border-top: 1px solid transparent; } .oneid-table--column-resizable:not(.oneid-table--bordered) thead.oneid-table__header:hover th:not(:last-child) { border-right: 1px solid var(--td-component-border); } .oneid-table--column-resizable:not(.oneid-table--bordered) thead.oneid-table__header:hover th { border-top: 1px solid var(--td-component-border); } .oneid-table--column-resizable:not(.oneid-table--bordered).oneid-table__content--scrollable-to-left.oneid-table__content--scrollable-to-right thead.oneid-table__header:hover .oneid-table__cell--fixed-left-last:not(:last-child), .oneid-table--column-resizable:not(.oneid-table--bordered).oneid-table__content--scrollable-to-left thead.oneid-table__header:hover .oneid-table__cell--fixed-left-last:not(:last-child) { border-right: 0; } /** 可选中行的场景下,将 Checkbox 和 Radio 铺满整个单元格,增大点击范围,方便用户选中 */ .oneid-table td.oneid-table__cell-check, .oneid-table th.oneid-table__cell-check { padding: 0; /** HTML 特性: th/td 必须设置为 0,他们的子元素才能设置为 100% */ height: 0; } .oneid-table td.oneid-table__cell-check .oneid-radio__label:empty, .oneid-table th.oneid-table__cell-check .oneid-radio__label:empty, .oneid-table td.oneid-table__cell-check .oneid-checkbox__label:empty, .oneid-table th.oneid-table__cell-check .oneid-checkbox__label:empty { display: none; } .oneid-table .oneid-table__cell-check .oneid-radio, .oneid-table .oneid-table__cell-check .oneid-checkbox, .oneid-table .oneid-table__cell-check .oneid-table__th-cell-inner { width: 100%; height: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .oneid-table td .oneid-input__tips { position: initial; } .oneid-table .oneid-table__sort-column { background-color: var(--td-bg-color-secondarycontainer); } .oneid-table__ellipsis-content.oneid-size-s .oneid-popup__content { font: var(--td-font-body-medium); } .oneid-list { font: var(--td-font-body-medium); -webkit-box-sizing: border-box; box-sizing: border-box; margin: 0; padding: 0; list-style: none; overflow: auto; color: var(--td-text-color-primary); background: var(--td-bg-color-container); } @-moz-document url-prefix() { .oneid-list { scrollbar-color: var(--td-scrollbar-color) transparent; scrollbar-width: thin; } } .oneid-list::-webkit-scrollbar { width: 6px; height: 6px; } .oneid-list::-webkit-scrollbar-thumb { border: 0px solid transparent; background-clip: content-box; background-color: var(--td-scrollbar-color); border-radius: 11px; } .oneid-list::-webkit-scrollbar-thumb:vertical:hover, .oneid-list::-webkit-scrollbar-thumb:horizontal:hover { background-color: var(--td-scrollbar-hover-color); } .oneid-list__inner { list-style: none; padding: 0; margin: 0; } .oneid-list-item { font: var(--td-font-body-medium); padding: var(--td-comp-paddingTB-m) var(--td-comp-paddingLR-l); display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -ms-flex-align: center; align-items: center; position: relative; } .oneid-list-item::after { content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 1px; } .oneid-list-item-main { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; width: 100%; -webkit-box-flex: 1; -ms-flex: 1; flex: 1; } .oneid-list-item__meta { display: -webkit-box; display: -ms-flexbox; display: flex; } .oneid-list-item__meta-avatar { width: var(--td-comp-size-xxxl); height: var(--td-comp-size-xxxl); border-radius: calc(var(--td-comp-size-xxxl) / 2); overflow: hidden; background: var(--td-bg-color-page); margin-right: var(--td-comp-margin-l); -ms-flex-negative: 0; flex-shrink: 0; } .oneid-list-item__meta-avatar img { max-width: 100%; width: 100%; height: 100%; } .oneid-list-item__meta-title { padding: 0; font: var(--td-font-title-medium); margin: 0 0 var(--td-comp-margin-s); color: var(--td-text-color-primary); } .oneid-list-item__meta-description { margin-right: var(--td-comp-margin-xxl); color: var(--td-text-color-primary); } .oneid-list-item__action { list-style: none; padding: 0; -ms-flex-negative: 0; flex-shrink: 0; } .oneid-list-item__action > li { display: inline-block; } .oneid-list-item__action > li:not(:last-child) { margin-right: var(--td-comp-margin-l); } .oneid-list-item__action > li .oneid-icon { color: var(--td-text-color-secondary); font-size: var(--td-comp-size-xxxs); } .oneid-list-item__action > li .oneid-icon:hover { color: var(--td-text-color-link); cursor: pointer; } .oneid-list-item__action > li > a { text-decoration: none; color: var(--td-brand-color); } .oneid-list--split .oneid-list-item::after { background: var(--td-border-level-1-color); } .oneid-list--stripe .oneid-list-item:nth-child(even) { background: var(--td-bg-color-secondarycontainer); } .oneid-list--vertical-action .oneid-list-item { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } .oneid-list.oneid-size-s .oneid-list-item { padding: var(--td-comp-paddingTB-s) var(--td-comp-paddingLR-m); } .oneid-list.oneid-size-l .oneid-list-item { padding: var(--td-comp-paddingTB-l) var(--td-comp-paddingLR-xl); } .oneid-list__header, .oneid-list__footer { background: var(--td-bg-color-container); padding: var(--td-comp-paddingTB-m) var(--td-comp-paddingLR-l); } .oneid-list__load { background: var(--td-bg-color-container); text-align: center; line-height: var(--td-line-height-body-medium); } .oneid-list__load > div { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .oneid-list__load:not(:empty) { padding: var(--td-comp-paddingTB-m) var(--td-comp-paddingLR-l); } .oneid-list__load .oneid-loading { font-size: var(--td-comp-size-xxxs); margin-right: var(--td-comp-margin-s); } .oneid-list__load .oneid-loading.oneid-is-load-more { cursor: pointer; } .oneid-tabs { font: var(--td-font-body-medium); color: var(--td-text-color-primary); -webkit-box-sizing: border-box; box-sizing: border-box; margin: 0; padding: 0; list-style: none; overflow: hidden; background-color: var(--td-bg-color-container); } .oneid-tabs__header.oneid-is-left { float: left; } .oneid-tabs__header.oneid-is-right { float: right; } .oneid-tabs__header .oneid-icon { font-size: var(--td-font-size-body-large); } .oneid-tabs__nav { position: relative; overflow: hidden; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .oneid-tabs__operations { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; position: absolute; border-bottom: 1px solid var(--td-component-stroke); background-color: var(--td-bg-color-container); } .oneid-tabs__operations--left { left: 0; z-index: 2; } .oneid-tabs__operations--right { right: 0; z-index: 2; } .oneid-tabs__operations--right .oneid-tabs__btn:first-child { -webkit-box-shadow: -10px 0 20px 5px rgba(0, 0, 0, 0.05); box-shadow: -10px 0 20px 5px rgba(0, 0, 0, 0.05); } .oneid-tabs__operations--right .oneid-tabs__nav-action { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; width: 100%; -webkit-box-flex: 1; -ms-flex: 1; flex: 1; } .oneid-tabs__btn { width: 40px; height: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; background-color: var(--td-bg-color-secondarycontainer); border-left: 1px solid var(--td-component-stroke); cursor: pointer; color: var(--td-text-color-secondary); font: var(--td-font-body-large); -webkit-transition: all 0.24s cubic-bezier(0.38, 0, 0.24, 1); transition: all 0.24s cubic-bezier(0.38, 0, 0.24, 1); z-index: 1; opacity: 1; } .oneid-tabs__btn:hover { background-color: var(--td-bg-color-secondarycontainer-hover); } .oneid-tabs__btn.oneid-size-m { height: var(--td-comp-size-xxl); line-height: var(--td-comp-size-xxl); } .oneid-tabs__btn.oneid-size-l { height: var(--td-comp-size-xxxxl); line-height: var(--td-comp-size-xxxxl); } .oneid-tabs__btn--left { border-right: 1px solid var(--td-component-stroke); -webkit-box-shadow: 10px 0px 20px 5px rgba(0, 0, 0, 0.05); box-shadow: 10px 0px 20px 5px rgba(0, 0, 0, 0.05); } .oneid-tabs__btn--left.fade-enter, .oneid-tabs__btn--left.fade-enter-from, .oneid-tabs__btn--left.fade-leave-to { -webkit-transform: translateX(-50px); transform: translateX(-50px); } .oneid-tabs__btn--right.fade-enter, .oneid-tabs__btn--right.fade-enter-from, .oneid-tabs__btn--right.fade-leave-to { -webkit-transform: translateX(50px); transform: translateX(50px); } .oneid-tabs__nav-container { position: relative; } .oneid-tabs__nav-container.oneid-is-top::after { content: ""; width: 100%; height: 1px; position: absolute; top: auto; right: auto; bottom: 0; left: 0; background-color: var(--td-component-stroke); } .oneid-tabs__nav-container.oneid-is-bottom::after { content: ""; width: 100%; height: 1px; position: absolute; top: 0; right: auto; bottom: auto; left: 0; background-color: var(--td-component-stroke); } .oneid-tabs__nav-container.oneid-is-left::after { content: ""; width: 1px; height: 100%; position: absolute; top: 0; right: 0; bottom: auto; left: auto; background-color: var(--td-component-stroke); } .oneid-tabs__nav-container.oneid-is-right::after { content: ""; width: 1px; height: 100%; position: absolute; top: 0; right: auto; bottom: auto; left: 0; background-color: var(--td-component-stroke); } .oneid-tabs__nav-container.oneid-is-addable { margin-right: 40px; } .oneid-tabs__nav-container.oneid-tabs__nav--card::after { content: ""; background-color: transparent; } .oneid-tabs__scroll-btn { position: absolute; z-index: 1; width: 40px; height: 100%; display: block; background-color: var(--td-bg-color-secondarycontainer); text-align: center; border-bottom: 1px solid var(--td-component-stroke); cursor: pointer; color: var(--td-text-color-secondary); font: var(--td-font-body-large); } .oneid-tabs__scroll-btn.oneid-size-m { height: var(--td-comp-size-xxl); line-height: var(--td-comp-size-xxl); } .oneid-tabs__scroll-btn.oneid-size-l { height: var(--td-comp-size-xxxxl); line-height: var(--td-comp-size-xxxxl); } .oneid-tabs__nav-scroll { position: relative; display: inline-block; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-flex: 1; -ms-flex: auto; flex: auto; -ms-flex-item-align: stretch; align-self: stretch; overflow: hidden; white-space: nowrap; -webkit-transform: translate(0); transform: translate(0); z-index: 1; } .oneid-tabs__nav-wrap { position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; font-size: 0; } .oneid-tabs__nav-wrap.oneid-is-smooth { -webkit-transition: -webkit-transform 0.24s cubic-bezier(0, 0, 0.15, 1); transition: -webkit-transform 0.24s cubic-bezier(0, 0, 0.15, 1); transition: transform 0.24s cubic-bezier(0, 0, 0.15, 1); transition: transform 0.24s cubic-bezier(0, 0, 0.15, 1), -webkit-transform 0.24s cubic-bezier(0, 0, 0.15, 1); } .oneid-tabs__nav-wrap.oneid-is-vertical { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } .oneid-tabs__bar { position: absolute; background-color: var(--td-brand-color); z-index: 1; -webkit-transition: all 0.24s cubic-bezier(0.38, 0, 0.24, 1); transition: all 0.24s cubic-bezier(0.38, 0, 0.24, 1); border-radius: var(--td-radius-small); } .oneid-tabs__bar.oneid-is-top { bottom: 0; left: 0; height: 3px; } .oneid-tabs__bar.oneid-is-bottom { top: 0; left: 0; height: 3px; } .oneid-tabs__bar.oneid-is-left { top: 0; right: 0; width: 3px; } .oneid-tabs__bar.oneid-is-right { top: 0; left: 0; width: 3px; } .oneid-tabs__nav-item { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; font: var(--td-font-body-medium); color: var(--td-text-color-secondary); position: relative; overflow: hidden; z-index: 0; cursor: pointer; -ms-flex-negative: 0; flex-shrink: 0; -webkit-transition: background-color cubic-bezier(0.38, 0, 0.24, 1) 0.2s; transition: background-color cubic-bezier(0.38, 0, 0.24, 1) 0.2s; --ripple-color: var(--td-bg-color-container-active); } .oneid-tabs__nav-item-wrapper { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; height: var(--td-comp-size-m); padding: 0 var(--td-comp-paddingLR-s); margin-left: var(--td-comp-margin-s); margin-right: var(--td-comp-margin-s); border-radius: var(--td-radius-default); -webkit-transition: background-color cubic-bezier(0.38, 0, 0.24, 1) 0.2s; transition: background-color cubic-bezier(0.38, 0, 0.24, 1) 0.2s; --ripple-color: var(--td-bg-color-container-active); } .oneid-tabs__nav-item.oneid-size-l { font: var(--td-font-body-large); } .oneid-tabs__nav-item.oneid-size-l .oneid-tabs__nav-item-wrapper { height: var(--td-comp-size-xxl); padding: 0 var(--td-comp-paddingLR-m); } .oneid-tabs__nav-item-text-wrapper { position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .oneid-tabs__nav-item:not(.oneid-is-disabled):not(.oneid-is-active):hover .oneid-tabs__nav-item-wrapper { background-color: var(--td-bg-color-container-hover); } .oneid-tabs__nav-item.oneid-is-left, .oneid-tabs__nav-item.oneid-is-right { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .oneid-tabs__nav-item.oneid-size-m { height: var(--td-comp-size-xxl); line-height: var(--td-comp-size-xxl); } .oneid-tabs__nav-item.oneid-size-l { height: var(--td-comp-size-xxxxl); line-height: var(--td-comp-size-xxxxl); } .oneid-tabs__nav-item.oneid-is-active { color: var(--td-brand-color); text-shadow: 0 0 0.3px currentcolor; } .oneid-tabs__nav-item.oneid-is-disabled { color: var(--td-text-color-disabled); cursor: not-allowed; } .oneid-tabs__nav-item > .remove-btn { margin-left: var(--td-comp-margin-s); -webkit-transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1); transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1); } .oneid-tabs__nav--card { background-color: var(--td-bg-color-secondarycontainer); } .oneid-tabs__nav--card.oneid-tabs__nav-item { padding-right: var(--td-comp-paddingLR-l); padding-left: var(--td-comp-paddingLR-l); border-bottom: 1px solid var(--td-component-stroke); } .oneid-tabs__nav--card.oneid-tabs__nav-item::after { display: none; } .oneid-tabs__nav--card.oneid-tabs__nav-item:not(.oneid-is-disabled):not(.oneid-is-active):hover { background-color: var(--td-bg-color-secondarycontainer-hover); } .oneid-tabs__nav--card.oneid-tabs__nav-item:not(:first-of-type) { border-left: 1px solid var(--td-component-stroke); } .oneid-tabs__nav--card.oneid-tabs__nav-item:last-of-type { border-right: 1px solid var(--td-component-stroke); } .oneid-tabs__nav--card.oneid-tabs__nav-item.oneid-is-active { color: var(--td-brand-color); background-color: var(--td-bg-color-container); border-bottom-color: var(--td-bg-color-container); } .oneid-tabs__nav--card.oneid-tabs__nav-item.oneid-size-l { padding-left: var(--td-comp-paddingLR-xl); padding-right: var(--td-comp-paddingLR-xl); } .oneid-tabs__nav--card .oneid-icon-close { color: var(--td-text-color-secondary); -webkit-transition: color cubic-bezier(0.38, 0, 0.24, 1) 0.2s; transition: color cubic-bezier(0.38, 0, 0.24, 1) 0.2s; } .oneid-tabs__nav--card .oneid-icon-close:hover { color: var(--td-text-color-primary); } .oneid-tabs__content { overflow: hidden; position: relative; } .oneid-tab-panel.oneid-is-hidden { display: none; } .oneid-notification { color: var(--td-text-color-primary); margin: 0; padding: 0; list-style: none; font: var(--td-font-body-medium); outline: 0; border: 0; background-color: var(--td-bg-color-container); display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-shadow: var(--td-shadow-2), var(--td-shadow-inset-top), var(--td-shadow-inset-right), var(--td-shadow-inset-bottom), var(--td-shadow-inset-left); box-shadow: var(--td-shadow-2), var(--td-shadow-inset-top), var(--td-shadow-inset-right), var(--td-shadow-inset-bottom), var(--td-shadow-inset-left); -webkit-box-sizing: border-box; box-sizing: border-box; border-radius: var(--td-radius-medium); width: 360px; padding: var(--td-comp-paddingTB-l) var(--td-comp-paddingLR-l); } .oneid-notification__icon { width: calc(var(--td-font-size-body-large) + 8px); text-align: center; margin-right: var(--td-comp-margin-s); } .oneid-notification__icon .oneid-icon { font-size: calc(var(--td-font-size-body-large) + 8px); } .oneid-notification .oneid-icon.oneid-is-info { color: var(--td-brand-color); } .oneid-notification .oneid-icon.oneid-is-success { color: var(--td-success-color); } .oneid-notification .oneid-icon.oneid-is-warning { color: var(--td-warning-color); } .oneid-notification .oneid-icon.oneid-is-error { color: var(--td-error-color-6); } .oneid-notification__main { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; } .oneid-notification__title__wrap { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } .oneid-notification__title { font: var(--td-font-title-medium); color: var(--td-text-color-primary); } .oneid-notification .oneid-icon-close { cursor: pointer; font-size: var(--td-font-size-body-large); border-radius: var(--td-radius-default); color: var(--td-text-color-secondary); } .oneid-notification .oneid-icon-close:hover { background: var(--td-bg-color-container-hover); } .oneid-notification .oneid-icon-close:active { background: var(--td-bg-color-container-active); } .oneid-notification__content { font: var(--td-font-body-medium); color: var(--td-text-color-secondary); margin-top: var(--td-comp-margin-s); max-height: 66px; overflow: hidden; text-overflow: ellipsis; word-break: break-all; /* stylelint-disable-next-line */ display: -webkit-box; -webkit-line-clamp: 3; /* stylelint-disable-next-line */ -webkit-box-orient: vertical; } .oneid-notification__detail { margin-top: var(--td-comp-margin-l); text-align: right; font: var(--td-font-body-medium); } .oneid-notification__detail-item { cursor: pointer; } .oneid-notification__detail-item:hover { color: inherit; background: var(--td-bg-color-container-hover); } .oneid-notification__detail-item:active { color: inherit; background: var(--td-bg-color-container-active); } .oneid-notification__detail-item + .oneid-notification__detail-item { margin-left: var(--td-comp-margin-s); } .oneid-notification__detail-item.oneid-is-active { color: var(--td-brand-color); } .oneid-notification__show--top-left { position: fixed; top: 0; left: 0; } .oneid-notification__show--top-left > .oneid-notification { -webkit-animation-duration: 0.3s; animation-duration: 0.3s; -webkit-animation-name: slidein-top-left; animation-name: slidein-top-left; } @-webkit-keyframes slidein-top-left { from { opacity: 0; -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); } to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @keyframes slidein-top-left { from { opacity: 0; -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); } to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } .oneid-notification__show--top-right { position: fixed; top: 0; right: 0; } .oneid-notification__show--top-right > .oneid-notification { -webkit-animation-duration: 0.3s; animation-duration: 0.3s; -webkit-animation-name: slidein-top-right; animation-name: slidein-top-right; } @-webkit-keyframes slidein-top-right { from { opacity: 0; -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); } to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @keyframes slidein-top-right { from { opacity: 0; -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); } to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } .oneid-notification__show--bottom-left { position: fixed; bottom: 0; left: 0; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: reverse; -ms-flex-direction: column-reverse; flex-direction: column-reverse; } .oneid-notification__show--bottom-left > .oneid-notification { -webkit-animation-duration: 0.3s; animation-duration: 0.3s; -webkit-animation-name: slidein-bottom-left; animation-name: slidein-bottom-left; } @-webkit-keyframes slidein-bottom-left { from { opacity: 0; -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); } to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @keyframes slidein-bottom-left { from { opacity: 0; -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); } to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } .oneid-notification__show--bottom-right { position: fixed; bottom: 0; right: 0; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: reverse; -ms-flex-direction: column-reverse; flex-direction: column-reverse; } .oneid-notification__show--bottom-right > .oneid-notification { -webkit-animation-duration: 0.3s; animation-duration: 0.3s; -webkit-animation-name: slidein-bottom-right; animation-name: slidein-bottom-right; } @-webkit-keyframes slidein-bottom-right { from { opacity: 0; -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); } to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @keyframes slidein-bottom-right { from { opacity: 0; -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); } to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } .oneid-notification-list__show { position: fixed; } a.oneid-menu__item { text-decoration: none; color: unset; } a.oneid-menu__item:hover, a.oneid-menu__item:active { color: inherit; } .oneid-menu__logo > * { margin-left: var(--td-comp-margin-xxl); } .oneid-head-menu { font: var(--td-font-body-medium); color: var(--td-text-color-primary); -webkit-box-sizing: border-box; box-sizing: border-box; margin: 0; padding: 0; list-style: none; position: relative; width: 100%; background-color: var(--td-bg-color-container); } .oneid-head-menu__inner { display: -webkit-box; display: -ms-flexbox; display: flex; height: var(--td-comp-size-xxxl); } .oneid-head-menu__inner li + li { margin-left: var(--td-comp-margin-s); } .oneid-head-menu__inner .oneid-menu:first-child { margin-left: var(--td-comp-margin-xxl); } .oneid-head-menu .oneid-menu__logo:not(:empty) { height: 100%; margin-right: var(--td-comp-margin-xxxl); } .oneid-head-menu .oneid-menu { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .oneid-head-menu .oneid-menu__operations:not(:empty) { position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; height: var(--td-comp-size-xxxl); line-height: 64px; text-align: right; margin-right: var(--td-comp-margin-s); overflow: hidden; } .oneid-head-menu .oneid-menu__operations-icon { width: var(--td-comp-size-m); height: var(--td-comp-size-m); padding: var(--td-comp-paddingTB-s) var(--td-comp-paddingLR-s); line-height: var(--td-comp-size-m); -webkit-box-sizing: border-box; box-sizing: border-box; } .oneid-head-menu .oneid-submenu > .oneid-menu__item { overflow: unset; } .oneid-head-menu .oneid-submenu > .oneid-menu__item::before { content: ""; display: block; position: absolute; bottom: -20px; left: 0; right: 0; height: 20px; } .oneid-head-menu .oneid-menu__item { height: var(--td-comp-size-m); line-height: var(--td-comp-size-m); padding: 0 var(--td-comp-paddingLR-l); -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-transition: all 0.28s cubic-bezier(0.645, 0.045, 0.355, 1); transition: all 0.28s cubic-bezier(0.645, 0.045, 0.355, 1); gap: var(--td-comp-margin-m); } .oneid-head-menu__submenu { border-top: 1px solid var(--td-component-stroke); padding-left: 0; } .oneid-default-menu { font: var(--td-font-body-medium); color: var(--td-text-color-primary); -webkit-box-sizing: border-box; box-sizing: border-box; margin: 0; padding: 0; list-style: none; position: relative; width: 232px; display: inline-block; background: var(--td-bg-color-container); -webkit-transition: width 0.28s cubic-bezier(0.645, 0.045, 0.355, 1); transition: width 0.28s cubic-bezier(0.645, 0.045, 0.355, 1); white-space: nowrap; } .oneid-default-menu .oneid-menu__item { color: var(--td-text-color-secondary); } .oneid-default-menu.oneid-is-collapsed { width: 64px; } .oneid-default-menu.oneid-is-collapsed .oneid-menu__logo > * { margin-left: var(--td-comp-margin-l); } .oneid-default-menu.oneid-is-collapsed .oneid-menu .oneid-menu__item { padding: 0 14px; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .oneid-default-menu.oneid-is-collapsed .oneid-menu .oneid-menu__item .oneid-menu__item-link { margin-left: 0; opacity: 0; content: ""; position: absolute; top: 0; bottom: 0; left: 0; right: 0; } .oneid-default-menu.oneid-is-collapsed .oneid-fake-arrow { display: none; } .oneid-default-menu.oneid-is-collapsed .oneid-menu__item { text-overflow: initial; } .oneid-default-menu.oneid-is-collapsed .oneid-menu__item.oneid-is-active.oneid-is-opened { color: var(--td-brand-color); background-color: var(--td-brand-color-light); } .oneid-default-menu.oneid-is-collapsed .oneid-menu__item.oneid-is-active.oneid-is-opened .oneid-icon { color: var(--td-brand-color); } .oneid-default-menu.oneid-is-collapsed .oneid-menu__item.oneid-menu__item--plain::after { content: ""; } .oneid-default-menu.oneid-is-collapsed .oneid-menu__item span { display: none; } .oneid-default-menu.oneid-is-collapsed .oneid-menu__item .oneid-icon { margin-right: initial; } .oneid-default-menu.oneid-is-collapsed .oneid-submenu-icon { display: none; } .oneid-default-menu.oneid-is-collapsed .oneid-submenu > .oneid-menu__item { min-width: initial; } .oneid-default-menu.oneid-is-collapsed .oneid-submenu > .oneid-menu__item::after { content: ""; display: block; position: absolute; right: -20px; top: 0; bottom: 0; width: 20px; } .oneid-default-menu.oneid-is-collapsed .oneid-menu-group:first-child .oneid-menu-group__title { display: none; } .oneid-default-menu.oneid-is-collapsed .oneid-menu-group:first-child .oneid-menu-group__title + * { margin-top: 0; } .oneid-default-menu.oneid-is-collapsed .oneid-menu-group__title { padding: 0; font-size: 0; } .oneid-default-menu.oneid-is-collapsed .oneid-menu-group__title::after { content: ""; display: block; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); height: 1px; width: 20px; background: var(--td-component-stroke); } .oneid-default-menu.oneid-is-collapsed .oneid-menu__operations { text-align: center; } .oneid-default-menu.oneid-is-collapsed .oneid-menu__operations-icon { display: block; } .oneid-default-menu.oneid-is-collapsed .oneid-menu__log > * { margin: 0 auto; } .oneid-default-menu__inner { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; height: 100%; } .oneid-default-menu__inner .oneid-menu__logo:not(:empty) { -webkit-box-sizing: border-box; box-sizing: border-box; width: 100%; height: var(--td-comp-size-xxxl); border-bottom: 1px solid var(--td-component-stroke); } .oneid-default-menu__inner .oneid-menu { padding: var(--td-comp-paddingTB-l) var(--td-comp-paddingLR-s); position: relative; -webkit-box-flex: 1; -ms-flex: 1; flex: 1; } .oneid-default-menu__inner .oneid-menu--scroll { overflow-y: auto; overflow-x: hidden; } @-moz-document url-prefix() { .oneid-default-menu__inner .oneid-menu--scroll { scrollbar-color: var(--td-scrollbar-color) transparent; scrollbar-width: thin; } } .oneid-default-menu__inner .oneid-menu--scroll::-webkit-scrollbar { width: 6px; height: 6px; } .oneid-default-menu__inner .oneid-menu--scroll::-webkit-scrollbar-thumb { border: 0px solid transparent; background-clip: content-box; background-color: var(--td-scrollbar-color); border-radius: 11px; } .oneid-default-menu__inner .oneid-menu--scroll::-webkit-scrollbar-thumb:vertical:hover, .oneid-default-menu__inner .oneid-menu--scroll::-webkit-scrollbar-thumb:horizontal:hover { background-color: var(--td-scrollbar-hover-color); } .oneid-default-menu__inner .oneid-menu > *:not(.oneid-menu-group):not(:first-child) { margin-top: var(--td-comp-margin-xs); } .oneid-default-menu__inner .oneid-menu .oneid-menu-group > *:not(:first-child), .oneid-default-menu__inner .oneid-menu .oneid-menu__sub > *:not(:first-child), .oneid-default-menu__inner .oneid-menu .oneid-submenu > *:not(:first-child) { margin-top: var(--td-comp-margin-xs); } .oneid-default-menu__inner .oneid-menu-group__title { position: relative; padding: var(--td-comp-paddingTB-l) var(--td-comp-paddingLR-l) var(--td-comp-paddingTB-xs) var(--td-comp-paddingLR-l); color: var(--td-text-color-placeholder); font-size: var(--td-font-body-small); -webkit-box-sizing: border-box; box-sizing: border-box; } .oneid-default-menu .oneid-submenu { position: relative; } .oneid-default-menu .oneid-menu__operations:not(:empty) { width: 100%; position: relative; padding: var(--td-comp-paddingTB-s) var(--td-comp-paddingLR-l); top: 0; left: 0; text-align: left; border-top: solid 1px var(--td-component-stroke); -webkit-box-sizing: border-box; box-sizing: border-box; } .oneid-default-menu .oneid-menu__operations-icon { width: 32px; height: 32px; padding: var(--td-comp-paddingTB-s) var(--td-comp-paddingLR-s); cursor: pointer; color: var(--td-text-color-primary); -webkit-box-sizing: border-box; box-sizing: border-box; } .oneid-default-menu .oneid-menu__item.oneid-is-opened { color: var(--td-text-color-primary); background-color: unset; } .oneid-default-menu .oneid-menu__item.oneid-is-opened .oneid-icon { color: var(--td-text-color-primary); } .oneid-default-menu .oneid-menu__sub { padding: 0; overflow: hidden; } .oneid-default-menu .oneid-menu__sub .oneid-menu__item { padding-left: var(--padding-left, 32px); } .oneid-default-menu .oneid-slide-down-enter-active .oneid-menu__sub { height: 100%; } .oneid-default-menu .oneid-menu__item { position: relative; padding: 0 10px 0 16px; height: var(--td-comp-size-l); line-height: var(--td-comp-size-l); border-bottom: 0; text-align: left; border-radius: var(--td-radius-default); -webkit-transition: background-color 0.28s cubic-bezier(0.38, 0, 0.24, 1), padding 0.28s cubic-bezier(0.38, 0, 0.24, 1); transition: background-color 0.28s cubic-bezier(0.38, 0, 0.24, 1), padding 0.28s cubic-bezier(0.38, 0, 0.24, 1); -webkit-box-sizing: border-box; box-sizing: border-box; } .oneid-default-menu .oneid-menu__item .oneid-icon { width: 20px; height: 20px; -ms-flex-negative: 0; flex-shrink: 0; margin-right: var(--td-comp-margin-s); } .oneid-default-menu .oneid-menu__item .oneid-fake-arrow { margin-left: auto; min-width: 16px; } .oneid-default-menu .oneid-menu__item.oneid-is-active:not(.oneid-is-opened) { color: var(--td-brand-color); background-color: var(--td-brand-color-light); } .oneid-default-menu .oneid-menu__item.oneid-is-active:not(.oneid-is-opened) .oneid-icon { color: var(--td-brand-color); } .oneid-default-menu .oneid-menu__item:hover:not(.oneid-is-active):not(.oneid-is-disabled) { background: var(--td-bg-color-secondarycontainer-hover); } .oneid-default-menu.oneid-menu--dark { background: var(--td-gray-color-13); } .oneid-default-menu.oneid-menu--dark .oneid-menu__item { color: var(--td-font-white-2); } .oneid-default-menu.oneid-menu--dark .oneid-menu__logo:not(:empty) { border-bottom-color: var(--td-gray-color-10); } .oneid-default-menu.oneid-menu--dark .oneid-menu__operations:not(:empty) { border-top-color: var(--td-gray-color-10); } .oneid-default-menu.oneid-menu--dark .oneid-menu__item:hover:not(.oneid-is-active):not(.oneid-is-disabled) { background-color: var(--td-gray-color-10); } .oneid-default-menu.oneid-menu--dark .oneid-menu__item.oneid-is-active:not(.oneid-is-opened) { color: var(--td-text-color-anti); background-color: var(--td-brand-color); } .oneid-default-menu.oneid-menu--dark .oneid-menu__item.oneid-is-active:not(.oneid-is-opened) .oneid-icon { color: var(--td-text-color-anti); } .oneid-default-menu.oneid-menu--dark .oneid-menu__item.oneid-is-opened.oneid-is-active { background-color: transparent; } .oneid-default-menu.oneid-menu--dark .oneid-menu-group__title { color: var(--td-font-white-3); } .oneid-default-menu.oneid-menu--dark.oneid-is-collapsed .oneid-menu-group__title:after { background-color: var(--td-gray-color-10); } .oneid-default-menu.oneid-menu--dark.oneid-is-collapsed .oneid-menu__item.oneid-is-active.oneid-is-opened { background-color: var(--td-brand-color); color: var(--td-text-color-anti); } .oneid-default-menu.oneid-menu--dark.oneid-is-collapsed .oneid-menu__item.oneid-is-active.oneid-is-opened .oneid-icon { color: var(--td-text-color-anti); } .oneid-menu { color: var(--td-text-color-primary); font: var(--td-font-body-medium); list-style: none; padding: 0; margin: 0; } .oneid-menu--dark { color: var(--td-font-white-2); } .oneid-menu__logo:not(:empty) { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .oneid-menu .oneid-submenu { position: relative; } .oneid-menu .oneid-submenu.oneid-is-active > .oneid-menu__item { color: var(--td-gray-color-13); } .oneid-menu .oneid-submenu.oneid-is-active > .oneid-menu__item .oneid-icon { color: var(--td-gray-color-13); } .oneid-menu .oneid-submenu .oneid-submenu-icon { width: 16px; height: 16px; } .oneid-menu .oneid-submenu.oneid-is-opened .oneid-submenu-icon { -webkit-transform: scaleY(-1); transform: scaleY(-1); } .oneid-menu__spacer::before { content: ""; display: block; position: absolute; z-index: 1; } .oneid-menu__spacer--left::before { left: -16px; width: 16px; top: 0; bottom: 0; } .oneid-menu__spacer--top::before { top: -20px; left: 0; right: 0; height: 20px; } .oneid-menu__item { position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; height: 40px; line-height: 40px; text-align: center; color: var(--td-text-color-primary); cursor: pointer; text-overflow: ellipsis; border-radius: var(--td-radius-default); --ripple-color: var(--td-bg-color-container-active); } .oneid-menu__item ::-moz-selection { background: transparent; } .oneid-menu__item ::selection { background: transparent; } .oneid-menu__item-spacer { overflow: unset; } .oneid-menu__item-spacer::before { content: ""; display: block; position: absolute; z-index: 1; } .oneid-menu__item-spacer--right::before { right: -16px; width: 16px; top: 0; bottom: 0; } .oneid-menu__item-spacer--bottom::before { bottom: -20px; left: 0; right: 0; height: 20px; } .oneid-menu__item a { color: unset; text-decoration: none; } .oneid-menu__item a.oneid-menu__item-link { color: unset; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; } .oneid-menu__item a.oneid-menu__item-link::before { content: ""; position: absolute; top: 0; bottom: 0; left: 0; right: 0; } .oneid-menu__item.oneid-is-active { color: var(--td-brand-color); background-color: var(--td-brand-color-light); } .oneid-menu__item.oneid-is-opened { color: var(--td-brand-color); } .oneid-menu__item:hover:not(.oneid-is-active):not(.oneid-is-opened):not(.oneid-is-disabled) { background-color: var(--td-bg-color-container-hover); } .oneid-menu__item.oneid-is-disabled { color: var(--td-text-color-disabled); cursor: not-allowed; } .oneid-menu__content { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .oneid-menu--dark.oneid-head-menu { background-color: var(--td-gray-color-13); } .oneid-menu--dark .oneid-menu__item { color: var(--td-text-color-anti); --ripple-color: var(--td-gray-color-11); } .oneid-menu--dark .oneid-menu__item.oneid-is-active { color: var(--td-text-color-anti); background-color: var(--td-brand-color); } .oneid-menu--dark .oneid-menu__item.oneid-is-opened { color: var(--td-text-color-anti); } .oneid-menu--dark .oneid-menu__item.oneid-is-opened .oneid-icon { color: var(--td-text-color-anti); } .oneid-menu--dark .oneid-menu__item.oneid-is-disabled { color: var(--td-font-white-4); } .oneid-menu--dark .oneid-menu__item:hover:not(.oneid-is-active):not(.oneid-is-opened):not(.oneid-is-disabled) { background-color: var(--td-gray-color-10); } .oneid-menu--dark .oneid-menu__popup { background: var(--td-gray-color-13); border: solid 0.5px var(--td-gray-color-10); } .oneid-menu--dark .oneid-menu__popup .oneid-menu__item { color: var(--td-text-color-anti); border-radius: var(--td-radius-default); } .oneid-menu--dark .oneid-menu__popup .oneid-menu__item.oneid-is-active { color: var(--td-text-color-anti); background-color: var(--td-brand-color); } .oneid-menu--dark .oneid-menu__popup .oneid-menu__item:hover:not(.oneid-is-active) { background-color: var(--td-gray-color-10); } .oneid-menu--dark .oneid-head-menu__submenu { border-top: 1px solid transparent; } .oneid-menu--dark .oneid-menu__operations-icon { color: var(--td-bg-color-container); } .oneid-menu--dark .oneid-menu__operations-icon:hover { background-color: var(--td-brand-color); } .oneid-menu__popup { overflow: hidden; background: var(--td-bg-color-container); z-index: 1000; border-radius: var(--td-radius-medium); opacity: 0; list-style: none; padding: 0; margin: 0; } .oneid-menu__popup.oneid-popup__content { position: absolute; } .oneid-menu__popup-wrapper { padding: var(--td-pop-padding-m); height: 100%; list-style: none; margin: 0; } @-moz-document url-prefix() { .oneid-menu__popup-wrapper { scrollbar-color: var(--td-scrollbar-color) transparent; scrollbar-width: thin; } } .oneid-menu__popup-wrapper::-webkit-scrollbar { width: 8px; height: 8px; } .oneid-menu__popup-wrapper::-webkit-scrollbar-thumb { border: 2px solid transparent; background-clip: content-box; background-color: var(--td-scrollbar-color); border-radius: 15px; } .oneid-menu__popup-wrapper::-webkit-scrollbar-thumb:vertical:hover, .oneid-menu__popup-wrapper::-webkit-scrollbar-thumb:horizontal:hover { background-color: var(--td-scrollbar-hover-color); } .oneid-menu__popup .oneid-fake-arrow { margin-left: auto; } .oneid-menu__popup .oneid-menu__item { padding-left: var(--td-comp-paddingLR-l); padding-right: var(--td-comp-paddingLR-l); } .oneid-menu__popup.oneid-is-vertical { min-width: var(--popup-width, 160px); } .oneid-menu__popup.oneid-is-horizontal .oneid-menu__item { white-space: nowrap; } .oneid-menu__popup.oneid-is-horizontal li + li { margin-top: var(--td-comp-margin-xs); } .oneid-menu__popup.oneid-is-opened { opacity: 1; -webkit-box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.1), 0 8px 10px 1px rgba(0, 0, 0, 0.06), 0 3px 14px 6px rgba(0, 0, 0, 0.05); box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.1), 0 8px 10px 1px rgba(0, 0, 0, 0.06), 0 3px 14px 6px rgba(0, 0, 0, 0.05); overflow: visible; } .oneid-menu__popup .oneid-menu__item { color: var(--td-text-color-primary); height: var(--td-comp-size-s); line-height: var(--td-comp-size-s); } .oneid-menu__popup .oneid-menu__item + .oneid-menu__item { margin-left: 0; } .oneid-menu__popup .oneid-menu__item:hover:not(.oneid-is-active) { background-color: var(--td-bg-color-container-hover); } .oneid-menu__popup .oneid-is-disabled { color: var(--td-text-color-disabled); } .oneid-menu__operations-icon { margin-right: var(--td-comp-margin-l); border-radius: var(--td-radius-default); color: var(--td-text-color-primary); -webkit-transition: background-color 0.24s cubic-bezier(0.38, 0, 0.24, 1); transition: background-color 0.24s cubic-bezier(0.38, 0, 0.24, 1); } .oneid-menu__operations-icon:hover { background-color: var(--td-brand-color-light); } .oneid-opacity-transition { -webkit-transition: opacity 0.28s cubic-bezier(0.55, 0, 0.1, 1); transition: opacity 0.28s cubic-bezier(0.55, 0, 0.1, 1); } .horizontal-collapse-transition .oneid-submenu__title .oneid-submenu__icon-arrow { -webkit-transition: 0.2s; transition: 0.2s; opacity: 0; } .oneid-menu__popup { top: 0; left: calc(100% - var(--td-pop-padding-m)); } .oneid-menu__popup .oneid-menu__item:not(:first-child), .oneid-menu__popup .oneid-submenu:not(:first-child) { margin-top: var(--td-comp-margin-xxs); } .oneid-is-head-menu .oneid-menu__popup { margin-top: calc((var(--td-comp-size-xxxl) - var(--td-comp-size-m)) / 2) !important; } .oneid-menu-is-nested .oneid-menu__popup { margin-top: calc(0px - var(--td-pop-padding-m)) !important; } @-webkit-keyframes tDialogZoomIn { 0% { opacity: 0; -webkit-transform: scale(0.01); transform: scale(0.01); } 100% { opacity: 1; } } @keyframes tDialogZoomIn { 0% { opacity: 0; -webkit-transform: scale(0.01); transform: scale(0.01); } 100% { opacity: 1; } } @-webkit-keyframes tDialogZoomOut { from { opacity: 1; } to { opacity: 0; -webkit-transform: scale(0.01); transform: scale(0.01); } } @keyframes tDialogZoomOut { from { opacity: 1; } to { opacity: 0; -webkit-transform: scale(0.01); transform: scale(0.01); } } @-webkit-keyframes tDialogMaskIn { from { opacity: 0; } to { opacity: 1; } } @keyframes tDialogMaskIn { from { opacity: 0; } to { opacity: 1; } } @-webkit-keyframes tDialogMaskOut { from { opacity: 1; } to { opacity: 0; } } @keyframes tDialogMaskOut { from { opacity: 1; } to { opacity: 0; } } .oneid-dialog-zoom .animation-enter { -webkit-animation-duration: 0.2s; animation-duration: 0.2s; -webkit-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-timing-function: cubic-bezier(0, 0, 0.15, 1); animation-timing-function: cubic-bezier(0, 0, 0.15, 1); -webkit-animation-play-state: paused; animation-play-state: paused; } .oneid-dialog-zoom .animation-exit { -webkit-animation-duration: 0.2s; animation-duration: 0.2s; -webkit-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-timing-function: cubic-bezier(0.38, 0, 0.24, 1); animation-timing-function: cubic-bezier(0.38, 0, 0.24, 1); -webkit-animation-play-state: paused; animation-play-state: paused; } .oneid-dialog-zoom .animation-active { -webkit-animation-play-state: running; animation-play-state: running; -webkit-animation-fill-mode: both; animation-fill-mode: both; } .oneid-dialog-zoom-enter, .oneid-dialog-zoom-enter-from, .oneid-dialog-zoom-appear { -webkit-animation-duration: 0.2s; animation-duration: 0.2s; -webkit-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-timing-function: cubic-bezier(0, 0, 0.15, 1); animation-timing-function: cubic-bezier(0, 0, 0.15, 1); -webkit-animation-play-state: paused; animation-play-state: paused; } .oneid-dialog-zoom-exit { -webkit-animation-duration: 0.2s; animation-duration: 0.2s; -webkit-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-timing-function: cubic-bezier(0.38, 0, 0.24, 1); animation-timing-function: cubic-bezier(0.38, 0, 0.24, 1); -webkit-animation-play-state: paused; animation-play-state: paused; } .oneid-dialog-zoom-enter-active, .oneid-dialog-zoom-appear-active { -webkit-animation-name: tDialogZoomIn; animation-name: tDialogZoomIn; -webkit-animation-play-state: running; animation-play-state: running; -webkit-animation-fill-mode: both; animation-fill-mode: both; } .oneid-dialog-zoom-exit-active { -webkit-animation-name: tDialogZoomOut; animation-name: tDialogZoomOut; -webkit-animation-play-state: running; animation-play-state: running; -webkit-animation-fill-mode: both; animation-fill-mode: both; } .oneid-dialog-zoom__vue-enter-active .oneid-dialog { -webkit-animation-name: tDialogZoomIn; animation-name: tDialogZoomIn; -webkit-animation-duration: 0.2s; animation-duration: 0.2s; -webkit-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-timing-function: cubic-bezier(0, 0, 0.15, 1); animation-timing-function: cubic-bezier(0, 0, 0.15, 1); -webkit-animation-play-state: paused; animation-play-state: paused; } .oneid-dialog-zoom__vue-enter-active .oneid-dialog__mask { -webkit-animation-name: tDialogMaskIn; animation-name: tDialogMaskIn; -webkit-animation-duration: 0.2s; animation-duration: 0.2s; -webkit-animation-timing-function: linear; animation-timing-function: linear; -webkit-animation-play-state: running; animation-play-state: running; -webkit-animation-fill-mode: both; animation-fill-mode: both; } .oneid-dialog-zoom__vue-leave-active .oneid-dialog { -webkit-animation-name: tDialogZoomOut; animation-name: tDialogZoomOut; -webkit-animation-duration: 0.2s; animation-duration: 0.2s; -webkit-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-timing-function: cubic-bezier(0.38, 0, 0.24, 1); animation-timing-function: cubic-bezier(0.38, 0, 0.24, 1); -webkit-animation-play-state: paused; animation-play-state: paused; } .oneid-dialog-zoom__vue-leave-active .oneid-dialog__mask { -webkit-animation-name: tDialogMaskOut; animation-name: tDialogMaskOut; -webkit-animation-duration: 0.2s; animation-duration: 0.2s; -webkit-animation-timing-function: linear; animation-timing-function: linear; -webkit-animation-play-state: running; animation-play-state: running; -webkit-animation-fill-mode: both; animation-fill-mode: both; } .oneid-dialog-zoom__vue-enter-to .oneid-dialog { -webkit-animation-play-state: running; animation-play-state: running; -webkit-animation-fill-mode: both; animation-fill-mode: both; } .oneid-dialog-zoom__vue-leave-to .oneid-dialog { -webkit-animation-play-state: running; animation-play-state: running; -webkit-animation-fill-mode: both; animation-fill-mode: both; } .oneid-dialog-fade-enter, .oneid-dialog-fade-appear { opacity: 0; -webkit-animation-duration: 0.2s; animation-duration: 0.2s; -webkit-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-timing-function: cubic-bezier(0, 0, 0.15, 1); animation-timing-function: cubic-bezier(0, 0, 0.15, 1); -webkit-animation-play-state: paused; animation-play-state: paused; } .oneid-dialog-fade-exit { -webkit-animation-duration: 0.2s; animation-duration: 0.2s; -webkit-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-timing-function: cubic-bezier(0, 0, 0.15, 1); animation-timing-function: cubic-bezier(0, 0, 0.15, 1); -webkit-animation-play-state: paused; animation-play-state: paused; } .oneid-dialog-fade-enter.oneid-dialog-fade-enter-active, .oneid-dialog-fade-appear.oneid-dialog-fade-appear-active { -webkit-animation-name: tDialogFadeIn; animation-name: tDialogFadeIn; -webkit-animation-play-state: running; animation-play-state: running; } .oneid-dialog-fade-exit.oneid-dialog-fade-exit-active { -webkit-animation-name: tDialogFadeOut; animation-name: tDialogFadeOut; -webkit-animation-play-state: running; animation-play-state: running; } @-webkit-keyframes tDialogFadeIn { 0% { opacity: 0; } 100% { opacity: 1; } } @keyframes tDialogFadeIn { 0% { opacity: 0; } 100% { opacity: 1; } } @-webkit-keyframes tDialogFadeOut { 0% { opacity: 1; } 100% { opacity: 0; } } @keyframes tDialogFadeOut { 0% { opacity: 1; } 100% { opacity: 0; } } .oneid-dialog { font: var(--td-font-body-medium); color: var(--td-text-color-primary); -webkit-box-sizing: border-box; box-sizing: border-box; margin: 0; padding: 0; list-style: none; width: 480px; background-color: var(--td-bg-color-container); position: relative; border: 1px solid var(--td-border-level-1-color); border-radius: var(--td-radius-large); } .oneid-dialog .oneid-icon.oneid-is-info { color: var(--td-brand-color); } .oneid-dialog .oneid-icon.oneid-is-success { color: var(--td-success-color); } .oneid-dialog .oneid-icon.oneid-is-warning { color: var(--td-warning-color); } .oneid-dialog .oneid-icon.oneid-is-error { color: var(--td-error-color); } .oneid-dialog--lock { overflow: hidden; } .oneid-dialog__header { color: var(--td-text-color-primary); font: var(--td-font-title-medium); font-weight: 600; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; word-break: break-word; gap: var(--td-comp-margin-s); -webkit-box-sizing: border-box; box-sizing: border-box; } .oneid-dialog__header .oneid-dialog__header-content { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; width: 100%; } .oneid-dialog__header .oneid-icon:not(.oneid-icon-close) { font-size: calc(var(--td-font-size-body-large) + 8px); display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; margin-right: var(--td-comp-margin-s); -ms-flex-negative: 0; flex-shrink: 0; } .oneid-dialog__header--fullscreen { background-color: var(--td-bg-color-secondarycontainer); min-height: var(--td-comp-size-xxxl); -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; padding: 0 var(--td-comp-paddingLR-xxl); } .oneid-dialog__header--fullscreen .oneid-dialog__header-content { -webkit-box-sizing: border-box; box-sizing: border-box; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .oneid-dialog__body { color: var(--td-text-color-secondary); font: var(--td-font-body-medium); overflow: auto; padding: var(--td-comp-paddingTB-l) 0; word-break: break-word; } @-moz-document url-prefix() { .oneid-dialog__body { scrollbar-color: var(--td-scrollbar-color) transparent; scrollbar-width: thin; } } .oneid-dialog__body::-webkit-scrollbar { width: 6px; height: 6px; } .oneid-dialog__body::-webkit-scrollbar-thumb { border: 0px solid transparent; background-clip: content-box; background-color: var(--td-scrollbar-color); border-radius: 11px; } .oneid-dialog__body::-webkit-scrollbar-thumb:vertical:hover, .oneid-dialog__body::-webkit-scrollbar-thumb:horizontal:hover { background-color: var(--td-scrollbar-hover-color); } .oneid-dialog__body__icon, .oneid-dialog__body--icon { padding: var(--td-comp-paddingTB-l) 0; } .oneid-dialog__body--fullscreen { -webkit-box-sizing: border-box; box-sizing: border-box; padding: var(--td-comp-paddingTB-xl) var(--td-comp-paddingLR-xxl); height: calc(100% - var(--td-comp-size-xxxl) - var(--td-comp-size-xxxxl)); overflow: auto; } @-moz-document url-prefix() { .oneid-dialog__body--fullscreen { scrollbar-color: var(--td-scrollbar-color) transparent; scrollbar-width: thin; } } .oneid-dialog__body--fullscreen::-webkit-scrollbar { width: 6px; height: 6px; } .oneid-dialog__body--fullscreen::-webkit-scrollbar-thumb { border: 0px solid transparent; background-clip: content-box; background-color: var(--td-scrollbar-color); border-radius: 11px; } .oneid-dialog__body--fullscreen::-webkit-scrollbar-thumb:vertical:hover, .oneid-dialog__body--fullscreen::-webkit-scrollbar-thumb:horizontal:hover { background-color: var(--td-scrollbar-hover-color); } .oneid-dialog__body--fullscreen--without-footer { -webkit-box-sizing: border-box; box-sizing: border-box; padding: var(--td-comp-paddingTB-xl) var(--td-comp-paddingLR-xxl); height: calc(100% - var(--td-comp-size-xxxl)); overflow: auto; } .oneid-dialog__footer { width: 100%; text-align: right; padding: var(--td-comp-paddingTB-l) 0 0; } .oneid-dialog__footer .oneid-button + .oneid-button { margin-left: var(--td-comp-margin-s); } .oneid-dialog__footer--fullscreen { min-height: var(--td-comp-size-xxxxl); padding: 0 var(--td-comp-paddingLR-xxl) var(--td-comp-paddingTB-xxl); -webkit-box-sizing: border-box; box-sizing: border-box; } .oneid-dialog--default { padding: var(--td-comp-paddingTB-xxl) var(--td-comp-paddingLR-xxl); } .oneid-dialog__close { font-size: calc(var(--td-font-size-body-large) + 4px); color: var(--td-text-color-secondary); display: -webkit-box; display: -ms-flexbox; display: flex; width: calc(var(--td-font-size-body-large) + 4px); height: calc(var(--td-font-size-body-large) + 4px); -webkit-box-align: center; -ms-flex-align: center; align-items: center; border-radius: var(--td-radius-default); -webkit-transition: all 0.2s linear; transition: all 0.2s linear; padding: var(--td-comp-paddingTB-xxs) var(--td-comp-paddingLR-xxs); } .oneid-dialog__close:hover { cursor: pointer; background: var(--td-bg-color-container-hover); } .oneid-dialog__close:active { background: var(--td-bg-color-container-active); } .oneid-dialog__close--fullscreen { display: -webkit-box; display: -ms-flexbox; display: flex; background: transparent; } .oneid-dialog__close--fullscreen:hover { cursor: pointer; background: var(--td-bg-color-secondarycontainer-hover); } .oneid-dialog__close--fullscreen:active { background: var(--td-bg-color-secondarycontainer-active); } .oneid-dialog.oneid-dialog--draggable:hover { cursor: move; } .oneid-dialog.oneid-dialog--draggable .oneid-dialog__header:hover, .oneid-dialog.oneid-dialog--draggable .oneid-dialog__body:hover, .oneid-dialog.oneid-dialog--draggable .oneid-dialog__footer:hover { cursor: auto; } .oneid-dialog__fullscreen { width: 100%; border-radius: 0; } .oneid-dialog__ctx { pointer-events: auto; outline: none; top: 0; left: 0; width: 100%; height: 100%; } .oneid-dialog__ctx.oneid-dialog__ctx--modeless { pointer-events: none; } .oneid-dialog__ctx.oneid-dialog__ctx--fixed { position: fixed; z-index: 2500; } .oneid-dialog__ctx.oneid-dialog__ctx--absolute { position: absolute; } .oneid-dialog__ctx.oneid-dialog__ctx--absolute .oneid-dialog__mask { position: absolute; } .oneid-dialog__ctx.oneid-dialog__ctx--absolute .oneid-dialog__wrap { position: absolute; } .oneid-dialog__ctx.oneid-is-visible { visibility: visible; } .oneid-dialog__ctx.oneid-is-hidden { visibility: hidden; } .oneid-dialog__ctx.oneid-is-display { display: block; } .oneid-dialog__ctx.oneid-not-display { display: none; } .oneid-dialog__ctx .oneid-dialog__mask { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; background: var(--td-mask-active); pointer-events: auto; } .oneid-dialog__ctx .oneid-dialog__wrap { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; overflow: auto; } @-moz-document url-prefix() { .oneid-dialog__ctx .oneid-dialog__wrap { scrollbar-color: var(--td-scrollbar-color) transparent; scrollbar-width: thin; } } .oneid-dialog__ctx .oneid-dialog__wrap::-webkit-scrollbar { width: 8px; height: 8px; } .oneid-dialog__ctx .oneid-dialog__wrap::-webkit-scrollbar-thumb { border: 2px solid transparent; background-clip: content-box; background-color: var(--td-scrollbar-color); border-radius: 15px; } .oneid-dialog__ctx .oneid-dialog__wrap::-webkit-scrollbar-thumb:vertical:hover, .oneid-dialog__ctx .oneid-dialog__wrap::-webkit-scrollbar-thumb:horizontal:hover { background-color: var(--td-scrollbar-hover-color); } .oneid-dialog__ctx .oneid-dialog__position { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; min-height: 100%; width: 100%; position: relative; padding: 48px 0; -webkit-box-sizing: border-box; box-sizing: border-box; } .oneid-dialog__ctx .oneid-dialog__position.oneid-dialog--top { -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; padding-top: 20vh; } .oneid-dialog__ctx .oneid-dialog__position.oneid-dialog--center { -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .oneid-dialog__ctx .oneid-dialog__position_fullscreen { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; min-height: 100%; width: 100%; position: relative; -webkit-box-sizing: border-box; box-sizing: border-box; } .oneid-dialog__ctx .oneid-is-hidden { background: none; } .oneid-dialog__ctx .oneid-dialog { pointer-events: auto; z-index: 2500; } .oneid-dialog__ctx.oneid-dialog__ctx--modeless .oneid-dialog { -webkit-box-shadow: var(--td-shadow-3); box-shadow: var(--td-shadow-3); } .oneid-tree { -webkit-box-sizing: border-box; box-sizing: border-box; margin: 0; padding: 0; list-style: none; font: var(--td-font-body-medium); color: var(--td-text-color-primary); position: relative; } .oneid-tree.oneid-is-disabled { color: var(--td-text-color-disabled); } .oneid-tree.oneid-is-disabled .oneid-icon { color: var(--td-text-color-disabled); } .oneid-tree.oneid-is-disabled .oneid-tree__item.oneid-is-active { background-color: var(--td-bg-color-container-hover); color: var(--td-text-color-disabled); } .oneid-tree.oneid-is-disabled .oneid-tree__item .oneid-icon { color: var(--td-text-color-secondary); } .oneid-tree__empty { color: var(--td-text-color-disabled); } .oneid-tree__branch { display: block; } .oneid-tree__item { --level: 0; --hscale: 2; will-change: opacity, max-height; position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: nowrap; flex-wrap: nowrap; -webkit-box-align: center; -ms-flex-align: center; align-items: center; padding: 0 0 0 calc(var(--td-comp-margin-xxl) * var(--level)); cursor: default; -webkit-transform: translateZ(0); transform: translateZ(0); -webkit-backface-visibility: hidden; backface-visibility: hidden; -webkit-perspective: 1000; perspective: 1000; } .oneid-tree__item .oneid-icon, .oneid-tree__item .oneid-loading { display: inline-block; position: relative; z-index: 2; font-size: calc(var(--td-font-size-body-medium) + 2px); } .oneid-tree__item .oneid-icon { color: var(--td-text-color-secondary); } .oneid-tree__item .oneid-checkbox { -webkit-box-align: center; -ms-flex-align: center; align-items: center; font-size: 0; } .oneid-tree__item .oneid-checkbox__input { -ms-flex-negative: 0; flex-shrink: 0; } .oneid-tree__item .oneid-checkbox__label { overflow: hidden; text-overflow: ellipsis; } .oneid-tree__item .oneid-tree__icon--default .oneid-icon { -webkit-transform: rotate(0); transform: rotate(0); } .oneid-tree__item--open .oneid-icon { color: var(--td-text-color-brand); } .oneid-tree__item--open .oneid-tree__icon--default .oneid-icon { -webkit-transform: rotate(90deg); transform: rotate(90deg); } .oneid-tree__item--clickable { cursor: pointer; } .oneid-tree__item--locked { color: var(--td-text-color-disabled); } .oneid-tree__item--matched { color: inherit; } .oneid-tree__item--draggable { cursor: pointer; } .oneid-tree__item--draggable:hover { background-color: var(--td-bg-color-container-hover); background-clip: content-box; } .oneid-tree__item--draggable::after { position: absolute; top: -1px; right: 0; left: 0; display: block; height: 2px; border-radius: 1px; content: ""; padding: inherit; background-clip: content-box; } .oneid-tree__item--tip-top::after { background-color: var(--td-brand-color); } .oneid-tree__item--tip-bottom::after { top: unset; bottom: -1px; background-color: var(--td-brand-color); } .oneid-tree__item--tip-highlight { background-color: var(--td-brand-color-light); background-clip: content-box; } .oneid-tree__item::before { content: ""; display: block; width: 0; -webkit-box-flex: 0; -ms-flex: 0 0 auto; flex: 0 0 auto; height: calc(var(--td-comp-size-m) + 2px); } .oneid-tree--block-node .oneid-tree__label { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; } .oneid-tree--hoverable .oneid-tree__label:not(.oneid-is-active):not(.oneid-is-checked):hover { background-color: var(--td-bg-color-container-hover); } .oneid-tree__line { --level: 0; --color: var(--td-border-level-1-color); --space: var(--td-comp-margin-xxl); --iconSize: 16px; position: absolute; left: calc(var(--td-comp-margin-xxl) * var(--level) - var(--td-comp-margin-l)); bottom: var(--td-comp-margin-l); width: 1px; height: calc(var(--td-comp-size-m) + 2px); pointer-events: none; } .oneid-tree__line::before { content: ""; position: absolute; bottom: 0; left: 0; display: block; height: calc(var(--td-comp-size-m) + 2px); width: var(--td-comp-margin-m); border-left: 1px solid var(--color); border-bottom: 1px solid var(--color); } .oneid-tree__line--first::before { height: var(--td-line-height-body-medium); } .oneid-tree__line--leaf::before { width: var(--td-comp-margin-m); } .oneid-tree__icon { position: relative; -webkit-box-flex: 0; -ms-flex: none; flex: none; display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; text-align: center; width: calc(var(--td-font-size-body-medium) + 2px); font-size: 0; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; cursor: pointer; } .oneid-tree__icon::after { content: ""; display: block; position: absolute; left: -2px; top: -2px; width: calc(var(--td-font-size-body-medium) + 2px + 4px); height: calc(var(--td-font-size-body-medium) + 2px + 4px); border-radius: var(--td-radius-default); } .oneid-tree__icon:not(:empty):hover { background-color: var(--td-bg-color-container-hover); } .oneid-tree__icon:empty { cursor: initial; } .oneid-tree__label { --ripple-color: var(--td-bg-color-container-active); -ms-flex-wrap: nowrap; flex-wrap: nowrap; -webkit-box-flex: 1; -ms-flex: 1; flex: 1; padding: var(--td-comp-paddingTB-xxs) var(--td-comp-paddingLR-xs); margin-left: var(--td-comp-margin-xs); border-radius: var(--td-radius-default); cursor: pointer; white-space: nowrap; word-wrap: normal; overflow: hidden; text-overflow: ellipsis; } .oneid-tree__label.oneid-is-checked { font-weight: 500; color: var(--td-text-color-primary); background-color: var(--td-brand-color-light); } .oneid-tree__label::-moz-selection { background-color: transparent; } .oneid-tree__label::selection { background-color: transparent; } .oneid-is-active .oneid-tree__label { font-weight: 500; color: var(--td-text-color-primary); background-color: var(--td-brand-color-light); } .oneid-tree__space { display: block; -webkit-box-flex: 1; -ms-flex: 1 0 auto; flex: 1 0 auto; } .oneid-tree__operations { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-flex: 0; -ms-flex: 0 0 auto; flex: 0 0 auto; -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; -webkit-box-align: center; -ms-flex-align: center; align-items: center; margin-left: auto; } .oneid-tree__operations .oneid-icon { cursor: pointer; } .oneid-tree__item.oneid-is-disabled { color: var(--td-text-color-disabled); cursor: default; } .oneid-tree__item.oneid-is-disabled .oneid-checkbox { cursor: default; } .oneid-tree__item--hidden { display: none; } .oneid-tree--transition .oneid-tree__label { -webkit-transition: background-color 0.24s cubic-bezier(0.38, 0, 0.24, 1); transition: background-color 0.24s cubic-bezier(0.38, 0, 0.24, 1); } .oneid-tree--transition .oneid-tree__icon { -webkit-transition: color, -webkit-transform 0.24s cubic-bezier(0.38, 0, 0.24, 1); transition: color, -webkit-transform 0.24s cubic-bezier(0.38, 0, 0.24, 1); transition: color, transform 0.24s cubic-bezier(0.38, 0, 0.24, 1); transition: color, transform 0.24s cubic-bezier(0.38, 0, 0.24, 1), -webkit-transform 0.24s cubic-bezier(0.38, 0, 0.24, 1); } .oneid-tree--transition .oneid-tree__icon::after { -webkit-transition: 0.2s linear; transition: 0.2s linear; } .oneid-tree--transition .oneid-tree__icon:not(:empty):hover { -webkit-transition: 0.2s linear; transition: 0.2s linear; } .oneid-tree--transition .oneid-tree__icon--default .oneid-icon { -webkit-transition: color, -webkit-transform cubic-bezier(0.38, 0, 0.24, 1) 0.2s; transition: color, -webkit-transform cubic-bezier(0.38, 0, 0.24, 1) 0.2s; transition: color, transform cubic-bezier(0.38, 0, 0.24, 1) 0.2s; transition: color, transform cubic-bezier(0.38, 0, 0.24, 1) 0.2s, -webkit-transform cubic-bezier(0.38, 0, 0.24, 1) 0.2s; } .oneid-tree--transition .oneid-tree__item--visible { display: -webkit-box; display: -ms-flexbox; display: flex; max-height: calc((var(--td-comp-size-m) + 2px) * var(--hscale) + 0px); opacity: 1; -webkit-transition: opacity 150ms linear 150ms, max-height 150ms linear 0s; transition: opacity 150ms linear 150ms, max-height 150ms linear 0s; } .oneid-tree--transition .oneid-tree__item--hidden { display: -webkit-box; display: -ms-flexbox; display: flex; max-height: 0; opacity: 0; overflow: hidden; pointer-events: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -webkit-animation: initial; animation: initial; -webkit-transition: opacity 150ms linear 0s, max-height 150ms linear 150ms; transition: opacity 150ms linear 0s, max-height 150ms linear 150ms; } .oneid-tree--transition .oneid-tree__item--enter-active { -webkit-animation: t-tree-toggle 300ms linear; animation: t-tree-toggle 300ms linear; } .oneid-tree--transition .oneid-tree__item--leave-active { animation: t-tree-toggle 300ms reverse linear forwards; } .oneid-tree__vscroll { overflow-y: auto; } .oneid-tree__lazyload { overflow-y: auto; } .oneid-tree__vscroll-cursor { position: absolute; width: 1px; height: 1px; -webkit-transition: -webkit-transform 0.2s; transition: -webkit-transform 0.2s; transition: transform 0.2s; transition: transform 0.2s, -webkit-transform 0.2s; } .oneid-tree--scrolling .oneid-tree__item { will-change: initial; } .oneid-tree--scrolling .v-enter, .oneid-tree--scrolling .v-leave, .oneid-tree--scrolling .oneid-tree__item--visible, .oneid-tree--scrolling .oneid-tree__item--hidden, .oneid-tree--scrolling .oneid-tree__item--enter, .oneid-tree--scrolling .oneid-tree__item--enter-active, .oneid-tree--scrolling .oneid-tree__item--enter-to, .oneid-tree--scrolling .oneid-tree__item--leave, .oneid-tree--scrolling .oneid-tree__item--leave-active .oneid-tree__item--leave-to { -webkit-animation: none; animation: none; -webkit-transition: none; transition: none; } .oneid-tree--scrolling .oneid-tree__item--visible { max-height: initial; } .oneid-tree--scrolling .oneid-tree__item--enter-to, .oneid-tree--scrolling .oneid-tree__item--enter-active { max-height: initial; } .oneid-tree--scrolling .oneid-tree__item--leave-to, .oneid-tree--scrolling .oneid-tree__item--leave-active { max-height: 0; } @-webkit-keyframes t-tree-toggle { 0% { opacity: 0; max-height: 0; } 50% { opacity: 0; max-height: calc((var(--td-comp-size-m) + 2px) * var(--hscale) + 0px); } 100% { opacity: 1; max-height: calc((var(--td-comp-size-m) + 2px) * var(--hscale) + 0px); } } @keyframes t-tree-toggle { 0% { opacity: 0; max-height: 0; } 50% { opacity: 0; max-height: calc((var(--td-comp-size-m) + 2px) * var(--hscale) + 0px); } 100% { opacity: 1; max-height: calc((var(--td-comp-size-m) + 2px) * var(--hscale) + 0px); } } .oneid-tree-select { font: var(--td-font-body-medium); color: var(--td-text-color-primary); -webkit-box-sizing: border-box; box-sizing: border-box; margin: 0; padding: 0; list-style: none; } .oneid-tree-select--without-input input { display: none; } .oneid-tree-select--without-input .oneid-input__suffix-icon { margin-left: auto; } .oneid-tree-select .oneid-fake-arrow { -webkit-transition: color 0.2s cubic-bezier(0.38, 0, 0.24, 1); transition: color 0.2s cubic-bezier(0.38, 0, 0.24, 1); color: var(--td-text-color-placeholder); } .oneid-tree-select .oneid-fake-arrow--highlight { color: var(--td-text-color-brand); } .oneid-tree-select .oneid-fake-arrow--disable { color: var(--td-text-color-disabled); } .oneid-tree-select--placeholder { color: var(--td-text-color-placeholder); } .oneid-tree-select.oneid-single-suffix { padding-right: 20px; } .oneid-tree-select.oneid-tag-prefix { padding-left: 4px; } .oneid-tree-select-popup .oneid-popup__content { padding: var(--td-pop-padding-m); max-height: 300px; overflow-y: auto; } @-moz-document url-prefix() { .oneid-tree-select-popup .oneid-popup__content { scrollbar-color: var(--td-scrollbar-color) transparent; scrollbar-width: thin; } } .oneid-tree-select-popup .oneid-popup__content::-webkit-scrollbar { width: 8px; height: 8px; } .oneid-tree-select-popup .oneid-popup__content::-webkit-scrollbar-thumb { border: 2px solid transparent; background-clip: content-box; background-color: var(--td-scrollbar-color); border-radius: 15px; } .oneid-tree-select-popup .oneid-popup__content::-webkit-scrollbar-thumb:vertical:hover, .oneid-tree-select-popup .oneid-popup__content::-webkit-scrollbar-thumb:horizontal:hover { background-color: var(--td-scrollbar-hover-color); } .oneid-divider { margin: 0; padding: 0; list-style: none; font: var(--td-font-body-medium); margin: var(--td-comp-margin-xxl) 0; border-top: 1px solid var(--td-border-level-1-color); color: var(--td-text-color-primary); -webkit-box-sizing: border-box; box-sizing: border-box; } .oneid-divider--dashed { border-top-style: dashed; } .oneid-divider--horizontal { width: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; } .oneid-divider--vertical { border-top: 0; display: inline-block; margin: 0 var(--td-comp-margin-m); border-left: 1px solid var(--td-border-level-1-color); height: 0.9em; vertical-align: middle; } .oneid-divider--with-text { display: -webkit-box; display: -ms-flexbox; display: flex; border-top: 0; white-space: nowrap; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .oneid-divider--with-text .oneid-divider__inner-text:not(:empty) { padding: 0 1em; display: inline-block; } .oneid-divider--with-text::before, .oneid-divider--with-text::after { content: ""; width: 50%; border-top: 1px solid var(--td-border-level-1-color); } .oneid-divider--with-text-left::before { width: 5%; } .oneid-divider--with-text-left::after { width: 95%; } .oneid-divider--with-text-right::before { width: 95%; } .oneid-divider--with-text-right::after { width: 5%; } .oneid-divider--dashed::before, .oneid-divider--dashed::after { border-top: 1px dashed var(--td-border-level-1-color); } .oneid-divider--vertical.oneid-divider--dashed { border-left: 1px dashed var(--td-border-level-1-color); } .oneid-switch { font: var(--td-font-body-medium); color: var(--td-text-color-primary); -webkit-box-sizing: border-box; box-sizing: border-box; list-style: none; position: relative; display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; vertical-align: middle; -webkit-box-align: center; -ms-flex-align: center; align-items: center; outline: none; border: 0; padding: 0; margin: 0; height: var(--td-comp-size-xxs); line-height: var(--td-comp-size-xxs); border-radius: var(--td-radius-round); min-width: calc(var(--td-comp-size-xxs) / 0.618); -webkit-transition: all 0.2s cubic-bezier(0.38, 0, 0.24, 1); transition: all 0.2s cubic-bezier(0.38, 0, 0.24, 1); background-color: var(--td-bg-color-secondarycomponent); cursor: pointer; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .oneid-switch:hover { background-color: var(--td-bg-color-secondarycomponent-hover); } .oneid-switch__handle { position: absolute; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; top: 4px; left: 4px; width: calc(var(--td-comp-size-xxs) - 8px); height: calc(var(--td-comp-size-xxs) - 8px); border-radius: var(--td-radius-round); -webkit-transition: all 0.2s cubic-bezier(0.38, 0, 0.24, 1); transition: all 0.2s cubic-bezier(0.38, 0, 0.24, 1); -webkit-box-shadow: var(--td-shadow-1); box-shadow: var(--td-shadow-1); } .oneid-switch__handle .oneid-icon { font-size: calc(var(--td-comp-size-xxs) - 4px); color: transparent; } .oneid-switch__handle::before { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; border-radius: var(--td-radius-round); background-color: #fff; -webkit-transition: all 0.2s cubic-bezier(0.38, 0, 0.24, 1); transition: all 0.2s cubic-bezier(0.38, 0, 0.24, 1); } .oneid-switch:active:not(.oneid-is-disabled):not(.oneid-is-loading) .oneid-switch__handle::before { left: 0; right: -6px; } .oneid-switch:active:not(.oneid-is-disabled):not(.oneid-is-loading).oneid-is-checked .oneid-switch__handle::before { right: 0; left: -6px; } .oneid-switch:active:not(.oneid-is-disabled):not(.oneid-is-loading) .oneid-switch__content { opacity: 0; } .oneid-switch__content { -webkit-box-sizing: border-box; box-sizing: border-box; display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; color: var(--td-text-color-anti); padding: 0 var(--td-comp-margin-xs) 0 calc(var(--td-comp-size-xxs) / 0.618 / 2 + 2px); font-size: var(--td-font-size-body-small); min-width: calc(var(--td-comp-size-xxs) / 0.618); -webkit-transition: padding 0.2s cubic-bezier(0.38, 0, 0.24, 1), opacity 0.2s linear; transition: padding 0.2s cubic-bezier(0.38, 0, 0.24, 1), opacity 0.2s linear; } .oneid-switch__content .oneid-icon { font-size: var(--td-font-size-body-large); } .oneid-switch.oneid-is-checked { background-color: var(--td-brand-color); } .oneid-switch.oneid-is-checked:hover { background-color: var(--td-brand-color-hover); } .oneid-switch.oneid-is-checked .oneid-switch__handle { left: calc(100% - 2.5px); -webkit-transform: translate(-100%, 0); transform: translate(-100%, 0); width: calc(var(--td-comp-size-xxs) - 5px); height: calc(var(--td-comp-size-xxs) - 5px); top: 2.5px; } .oneid-switch.oneid-is-checked .oneid-switch__content { padding: 0 calc(var(--td-comp-size-xxs) / 0.618 / 2 + 2px) 0 var(--td-comp-margin-xs); color: var(--td-text-color-anti); } .oneid-switch.oneid-is-loading { cursor: not-allowed; background-color: var(--td-bg-color-component-disabled); } .oneid-switch.oneid-is-loading .oneid-loading { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; } .oneid-switch.oneid-is-loading .oneid-switch__handle .oneid-icon { color: var(--td-bg-color-component-disabled); } .oneid-switch.oneid-is-loading.oneid-is-checked { background-color: var(--td-brand-color-focus); } .oneid-switch.oneid-is-loading.oneid-is-checked .oneid-switch__handle .oneid-icon { color: var(--td-brand-color-focus); } .oneid-switch.oneid-is-disabled { cursor: not-allowed; background-color: var(--td-bg-color-component-disabled); } .oneid-switch.oneid-is-disabled .oneid-switch__handle { -webkit-box-shadow: none; box-shadow: none; } .oneid-switch.oneid-is-disabled.oneid-is-checked { background-color: var(--td-brand-color-disabled); } .oneid-switch.oneid-is-disabled.oneid-is-checked .oneid-switch__handle { -webkit-box-shadow: none; box-shadow: none; } .oneid-switch.oneid-is-disabled.oneid-is-checked .oneid-switch__handle .oneid-icon { color: var(--td-brand-color-disabled); } .oneid-switch.oneid-size-l { min-width: calc(var(--td-comp-size-xs) / 0.618); height: var(--td-comp-size-xs); line-height: var(--td-comp-size-xs); border-radius: var(--td-radius-round); } .oneid-switch.oneid-size-l:active:not(.oneid-is-disabled):not(.oneid-is-loading) .oneid-switch__handle::before { left: 0; right: -8px; } .oneid-switch.oneid-size-l:active:not(.oneid-is-disabled):not(.oneid-is-loading).oneid-is-checked .oneid-switch__handle::before { right: 0; left: -8px; } .oneid-switch.oneid-size-l .oneid-switch__handle { top: 5px; left: 5px; width: calc(var(--td-comp-size-xs) - 10px); height: calc(var(--td-comp-size-xs) - 10px); } .oneid-switch.oneid-size-l .oneid-switch__handle .oneid-icon { font-size: calc(var(--td-comp-size-xs) - 4px); } .oneid-switch.oneid-size-l .oneid-switch__content { padding: 0 var(--td-comp-margin-s) 0 calc(var(--td-comp-size-xs) / 0.618 / 2 + 4px); min-width: calc(var(--td-comp-size-xs) / 0.618); font-size: var(--td-font-size-body-large); } .oneid-switch.oneid-size-l .oneid-switch__content .oneid-icon { font-size: var(--td-font-size-body-large); } .oneid-switch.oneid-size-l.oneid-is-checked .oneid-switch__handle { left: calc(100% - 3px); top: 3px; width: calc(var(--td-comp-size-xs) - 6px); height: calc(var(--td-comp-size-xs) - 6px); } .oneid-switch.oneid-size-l.oneid-is-checked .oneid-switch__content { padding: 0 calc(var(--td-comp-size-xs) / 0.618 / 2 + 4px) 0 var(--td-comp-margin-s); } .oneid-switch.oneid-size-s { min-width: calc(var(--td-comp-size-xxxs) / 0.618); height: var(--td-comp-size-xxxs); line-height: var(--td-comp-size-xxxs); border-radius: var(--td-radius-round); } .oneid-switch.oneid-size-s:active:not(.oneid-is-disabled):not(.oneid-is-loading) .oneid-switch__handle::before { left: 0; right: -4px; } .oneid-switch.oneid-size-s:active:not(.oneid-is-disabled):not(.oneid-is-loading).oneid-is-checked .oneid-switch__handle::before { right: 0; left: -4px; } .oneid-switch.oneid-size-s .oneid-switch__handle { top: 3px; left: 3px; width: calc(var(--td-comp-size-xxxs) - 6px); height: calc(var(--td-comp-size-xxxs) - 6px); } .oneid-switch.oneid-size-s .oneid-switch__handle .oneid-icon { font-size: calc(var(--td-comp-size-xxxs) - 4px); } .oneid-switch.oneid-size-s .oneid-switch__content { padding: 0 var(--td-comp-margin-xxs) 0 calc(var(--td-comp-size-xxxs) / 0.618 / 2 + 2px); min-width: calc(var(--td-comp-size-xxxs) / 0.618); font-size: 9px; } .oneid-switch.oneid-size-s .oneid-switch__content .oneid-icon { font-size: var(--td-font-size-body-large); } .oneid-switch.oneid-size-s.oneid-is-checked .oneid-switch__handle { left: calc(100% - 2px); top: 2px; width: calc(var(--td-comp-size-xxxs) - 4px); height: calc(var(--td-comp-size-xxxs) - 4px); } .oneid-switch.oneid-size-s.oneid-is-checked .oneid-switch__content { padding: 0 calc(var(--td-comp-size-xxxs) / 0.618 / 2 + 2px) 0 var(--td-comp-margin-xxs); } .oneid-anchor { -webkit-box-sizing: border-box; box-sizing: border-box; margin: 0; padding: 0; list-style: none; --td-anchor-space-base: var(--td-size-6); position: relative; background: var(--td-bg-color-container); width: 200px; color: var(--td-text-color-primary); font: var(--td-font-body-medium); } .oneid-anchor .oneid-is-active > a { color: var(--td-brand-color); } .oneid-anchor__line { position: absolute; top: 0; left: 0; width: 1px; height: 100%; background-color: var(--td-component-stroke); cursor: pointer; } .oneid-anchor__line-cursor-wrapper { position: absolute; display: block; height: 0; opacity: 0; -webkit-transition: all 0.2s cubic-bezier(0.24, 0.41, 0.51, 0.9); transition: all 0.2s cubic-bezier(0.24, 0.41, 0.51, 0.9); } .oneid-anchor__line-cursor-wrapper .oneid-anchor__line-cursor { width: 1px; height: 100%; background-color: var(--td-brand-color); } .oneid-anchor__item { padding: var(--td-comp-paddingTB-xxs) var(--td-comp-paddingTB-l); --level: 1; padding-left: calc(var(--level) * var(--td-anchor-space-base)); display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } .oneid-anchor__item.oneid-is-active { font-weight: 500; } .oneid-anchor__item-link { display: inline-block; position: relative; overflow: hidden; word-break: break-all; color: var(--td-text-color-primary); text-decoration: none; text-align: justify; } .oneid-anchor a { -webkit-transition: color 0.2s linear; transition: color 0.2s linear; } .oneid-anchor a:hover { color: var(--td-brand-color); cursor: pointer; } .oneid-anchor a:active { color: var(--td-brand-color-active); } .oneid-anchor.oneid-size-s { width: 120px; } .oneid-anchor.oneid-size-l { width: 320px; } .oneid-anchor__target { cursor: pointer; font: var(--td-font-body-medium); color: var(--td-text-color-primary); } @-webkit-keyframes fadeOut { 0% { opacity: 1; } 100% { opacity: 0; display: none; } } @keyframes fadeOut { 0% { opacity: 1; } 100% { opacity: 0; display: none; } } .oneid-anchor__target .oneid-anchor__copy { display: none; margin: 0 0 0 var(--td-comp-margin-xs); } .oneid-anchor__target:hover .oneid-anchor__copy { display: inline-block; } .oneid-anchor__target:target::after { display: inline-block; content: ""; width: 6px; height: 6px; border-radius: var(--td-radius-circle); background-color: var(--td-brand-color); vertical-align: middle; -webkit-animation: fadeOut 2s 2s linear 1; animation: fadeOut 2s 2s linear 1; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; } .oneid-calendar { font: var(--td-font-body-medium); color: var(--td-text-color-primary); -webkit-box-sizing: border-box; box-sizing: border-box; margin: 0; padding: 0; list-style: none; border: 1px solid var(--td-border-level-1-color); background-color: var(--td-bg-color-container); border-radius: var(--td-radius-large); } .oneid-calendar .oneid-is-disabled.oneid-calendar__table-body-cell:hover { cursor: not-allowed; } .oneid-calendar .oneid-is-disabled .oneid-calendar__table-body-cell-display { color: var(--td-text-color-disabled); } .oneid-calendar .oneid-is-disabled .oneid-calendar__table-body-cell-display:hover { -webkit-box-shadow: none; box-shadow: none; } .oneid-calendar--full { min-width: 560px; padding: var(--td-comp-paddingTB-xxl) var(--td-comp-paddingLR-xxl); } .oneid-calendar--full .oneid-calendar__control { padding: 0; } .oneid-calendar--full .oneid-calendar__title { font: var(--td-font-title-large); -webkit-box-flex: 1; -ms-flex: 1; flex: 1; } .oneid-calendar--full .oneid-calendar__panel { position: relative; margin-top: var(--td-comp-margin-xxxl); } .oneid-calendar--full .oneid-calendar__panel-title { font: var(--td-font-title-large); color: var(--td-text-color-primary); position: absolute; } .oneid-calendar--full .oneid-calendar__table-head-cell, .oneid-calendar--full .oneid-calendar__table-body-cell { margin-right: var(--td-comp-margin-s); position: relative; } .oneid-calendar--full .oneid-calendar__table-body-cell { border-top: 2px solid var(--td-border-level-1-color); padding: 0; height: 104px; line-height: var(--td-line-height-body-medium); display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: end; -ms-flex-align: end; align-items: flex-end; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; margin-left: 0; -webkit-transition-duration: 0.2s; transition-duration: 0.2s; -webkit-transition-property: border-top, background; transition-property: border-top, background; -webkit-transition-timing-function: linear; transition-timing-function: linear; } .oneid-calendar--full .oneid-calendar__table-body-cell-content { padding: var(--td-comp-paddingTB-s) var(--td-comp-paddingLR-xs); width: 100%; -webkit-box-sizing: border-box; box-sizing: border-box; } .oneid-calendar--full .oneid-calendar__table-body-cell.oneid-is-checked { background-color: var(--td-brand-color-light); } .oneid-calendar--full .oneid-calendar__table-body-cell.oneid-is-checked:hover { background-color: var(--td-brand-color-light); } .oneid-calendar--full .oneid-calendar__table-body-cell--now { border-top: 2px solid var(--td-brand-color); } .oneid-calendar--full .oneid-calendar__table-body-cell--now .oneid-calendar__table-body-cell-display { color: var(--td-text-color-primary); } .oneid-calendar--full .oneid-calendar__footer { height: 90px; padding: var(--td-comp-paddingTB-xxl) var(--td-comp-paddingLR-xxl); border-top: 1px solid var(--td-border-level-1-color); } .oneid-calendar--card { width: 280px; border-radius: var(--td-radius-medium); padding: var(--td-comp-paddingTB-m) var(--td-comp-paddingLR-m); } .oneid-calendar--card .oneid-calendar__control { padding: 0; } .oneid-calendar--card .oneid-calendar__control-section { width: 100%; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; } .oneid-calendar--card .oneid-calendar__control-section-cell:last-child { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; text-align: right; display: block; } .oneid-calendar--card .oneid-calendar__panel.oneid-calendar__panel--month { height: 200px; margin-top: var(--td-comp-margin-m); } .oneid-calendar--card .oneid-calendar__panel.oneid-calendar__panel--year { height: 168px; margin-top: var(--td-comp-margin-m); } .oneid-calendar--card .oneid-calendar__panel.oneid-calendar__panel--year .oneid-calendar__table-body-cell-display { min-width: var(--td-comp-size-xxl); } .oneid-calendar--card .oneid-calendar__table { width: 100%; height: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; justify-self: start; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; } .oneid-calendar--card .oneid-calendar__table-head-row, .oneid-calendar--card .oneid-calendar__table-body-row { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; background: var(--td-bg-color-container); } .oneid-calendar--card .oneid-calendar__table-head-cell, .oneid-calendar--card .oneid-calendar__table-body-cell { width: 100%; height: 100%; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; font: var(--td-font-body-medium); -webkit-box-sizing: border-box; box-sizing: border-box; } .oneid-calendar--card .oneid-calendar__table-head-cell-display, .oneid-calendar--card .oneid-calendar__table-body-cell-display { width: var(--td-comp-size-xs); line-height: var(--td-comp-size-xs); } .oneid-calendar--card .oneid-calendar__table-body { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; justify-self: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-flex: 1; -ms-flex: 1; flex: 1; } .oneid-calendar--card .oneid-calendar__table-body-cell { -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .oneid-calendar--card .oneid-calendar__table-body-cell:hover { background-color: var(--td-bg-color-container); } .oneid-calendar--card .oneid-calendar__table-body-cell-display { font: var(--td-font-body-medium); padding-top: calc(var(--td-comp-paddingTB-xxs) / 2); padding-bottom: calc(var(--td-comp-paddingTB-xxs) / 2); text-align: center; border-radius: var(--td-radius-default); -webkit-transition: all 0.2s linear; transition: all 0.2s linear; } .oneid-calendar--card .oneid-calendar__table-body-cell-display:hover { -webkit-box-shadow: inset 0 0 0 1px var(--td-brand-color); box-shadow: inset 0 0 0 1px var(--td-brand-color); -webkit-transition: -webkit-box-shadow 0.2s linear; transition: -webkit-box-shadow 0.2s linear; transition: box-shadow 0.2s linear; transition: box-shadow 0.2s linear, -webkit-box-shadow 0.2s linear; } .oneid-calendar--card .oneid-calendar__table-body-cell--now .oneid-calendar__table-body-cell-display { color: var(--td-brand-color); background-color: var(--td-brand-color-light); position: relative; } .oneid-calendar--card .oneid-is-checked .oneid-calendar__table-body-cell-display { background: var(--td-brand-color); border-radius: var(--td-radius-default); color: var(--td-text-color-anti); } .oneid-calendar--card .oneid-calendar__footer { height: var(--td-comp-size-xxl); padding: 0 var(--td-comp-paddingLR-m); border-top: 1px solid var(--td-border-level-1-color); } .oneid-calendar__control { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .oneid-calendar__control-section { height: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .oneid-calendar__control-section:last-child { margin-right: 0; } .oneid-calendar__control-section-cell { height: 100%; margin-right: var(--td-comp-margin-s); display: -webkit-box; display: -ms-flexbox; display: flex; } .oneid-calendar__control-section-cell .oneid-radio-group { vertical-align: bottom; } .oneid-calendar__control-section-cell .oneid-select { display: inline; } .oneid-calendar__control-section-cell:last-child { margin-right: 0; } .oneid-calendar__panel { -webkit-box-sizing: border-box; box-sizing: border-box; width: 100%; } .oneid-calendar__table { border-collapse: collapse; border-spacing: 0; width: 100%; height: 100%; } .oneid-calendar__table-head, .oneid-calendar__table-body { width: 100%; } .oneid-calendar__table-head-row, .oneid-calendar__table-body-row { width: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; } .oneid-calendar__table-head-cell, .oneid-calendar__table-body-cell { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; font: var(--td-font-title-small); color: var(--td-text-color-primary); cursor: default; padding: 0; } .oneid-calendar__table-head-cell:last-child, .oneid-calendar__table-body-cell:last-child { margin-right: 0; } .oneid-calendar__table-head { margin-bottom: var(--td-comp-margin-s); display: block; } .oneid-calendar__table-head-row { padding-bottom: 0px; background: var(--td-bg-color-container); } .oneid-calendar__table-head-cell { height: 100%; font: var(--td-font-title-small); color: var(--td-text-color-secondary); } .oneid-calendar__table-body-cell { cursor: pointer; } .oneid-calendar__table-body-cell:hover { background-color: var(--td-bg-color-container-hover); -webkit-transition: background-color 0.2s linear; transition: background-color 0.2s linear; } .oneid-calendar__table-body-cell-display { font: var(--td-font-title-small); color: var(--td-text-color-primary); } .oneid-link { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; cursor: pointer; -webkit-box-align: center; -ms-flex-align: center; align-items: center; position: relative; text-decoration: none; outline: none; padding: 0; -webkit-transition: all 0.2s linear; transition: all 0.2s linear; font: var(--td-font-link-medium); } .oneid-link .oneid-link__prefix-icon { margin-right: var(--td-comp-margin-s); display: -webkit-box; display: -ms-flexbox; display: flex; } .oneid-link .oneid-link__suffix-icon { margin-left: var(--td-comp-margin-s); display: -webkit-box; display: -ms-flexbox; display: flex; } .oneid-link.oneid-size-s { font: var(--td-font-link-small); } .oneid-link.oneid-size-s .oneid-link__prefix-icon { margin-right: var(--td-comp-margin-xs); display: -webkit-box; display: -ms-flexbox; display: flex; } .oneid-link.oneid-size-s .oneid-link__suffix-icon { margin-left: var(--td-comp-margin-xs); display: -webkit-box; display: -ms-flexbox; display: flex; } .oneid-link.oneid-size-l { font: var(--td-font-link-large); } .oneid-link.oneid-size-l .oneid-link__prefix-icon { margin-right: var(--td-comp-margin-m); display: -webkit-box; display: -ms-flexbox; display: flex; } .oneid-link.oneid-size-l .oneid-link__suffix-icon { margin-left: var(--td-comp-margin-m); display: -webkit-box; display: -ms-flexbox; display: flex; } .oneid-link--theme-default { color: var(--td-text-color-primary); } .oneid-link--theme-default:active { color: var(--td-brand-color-active); } .oneid-link--theme-default.oneid-link--hover-underline::after { content: ""; position: absolute; left: 0; right: 0; height: 0; bottom: 0; border-bottom: 1px solid var(--td-text-color-primary); opacity: 0; -webkit-transition: all 0.2s linear; transition: all 0.2s linear; } .oneid-link--theme-default.oneid-link--hover-underline:hover::after { opacity: 1; } .oneid-link--theme-default.oneid-link--hover-underline:active::after { opacity: 1; border-color: var(--td-brand-color-active); } .oneid-link--theme-default.oneid-link--hover-color:hover { color: var(--td-brand-color-hover); } .oneid-link--theme-default.oneid-link--hover-color.oneid-is-underline:hover::after { border-color: var(--td-brand-color-hover); } .oneid-link--theme-default.oneid-link--hover-color.oneid-is-underline:active::after { border-color: var(--td-brand-color-active); } .oneid-link--theme-default.oneid-link--hover-color:active { color: var(--td-brand-color-active); } .oneid-link--theme-default.oneid-is-underline::after { content: ""; position: absolute; left: 0; right: 0; height: 0; bottom: 0; opacity: 1; border-bottom: 1px solid var(--td-text-color-primary); -webkit-transition: all 0.2s linear; transition: all 0.2s linear; } .oneid-link--theme-default.oneid-is-disabled { cursor: not-allowed; color: var(--td-text-color-disabled); } .oneid-link--theme-default.oneid-is-disabled:hover, .oneid-link--theme-default.oneid-is-disabled:active { color: var(--td-text-color-disabled); } .oneid-link--theme-default.oneid-is-disabled.oneid-is-underline::after { border-color: var(--td-text-color-disabled); } .oneid-link--theme-primary { color: var(--td-brand-color); } .oneid-link--theme-primary:active { color: var(--td-brand-color-active); } .oneid-link--theme-primary.oneid-link--hover-underline::after { content: ""; position: absolute; left: 0; right: 0; height: 0; bottom: 0; border-bottom: 1px solid var(--td-brand-color); opacity: 0; -webkit-transition: all 0.2s linear; transition: all 0.2s linear; } .oneid-link--theme-primary.oneid-link--hover-underline:hover::after { opacity: 1; } .oneid-link--theme-primary.oneid-link--hover-underline:active::after { opacity: 1; border-color: var(--td-brand-color-active); } .oneid-link--theme-primary.oneid-link--hover-color:hover { color: var(--td-brand-color-hover); } .oneid-link--theme-primary.oneid-link--hover-color.oneid-is-underline:hover::after { border-color: var(--td-brand-color-hover); } .oneid-link--theme-primary.oneid-link--hover-color.oneid-is-underline:active::after { border-color: var(--td-brand-color-active); } .oneid-link--theme-primary.oneid-link--hover-color:active { color: var(--td-brand-color-active); } .oneid-link--theme-primary.oneid-is-underline::after { content: ""; position: absolute; left: 0; right: 0; height: 0; bottom: 0; opacity: 1; border-bottom: 1px solid var(--td-brand-color); -webkit-transition: all 0.2s linear; transition: all 0.2s linear; } .oneid-link--theme-primary.oneid-is-disabled { cursor: not-allowed; color: var(--td-brand-color-disabled); } .oneid-link--theme-primary.oneid-is-disabled:hover, .oneid-link--theme-primary.oneid-is-disabled:active { color: var(--td-brand-color-disabled); } .oneid-link--theme-primary.oneid-is-disabled.oneid-is-underline::after { border-color: var(--td-brand-color-disabled); } .oneid-link--theme-success { color: var(--td-success-color); } .oneid-link--theme-success:active { color: var(--td-success-color-active); } .oneid-link--theme-success.oneid-link--hover-underline::after { content: ""; position: absolute; left: 0; right: 0; height: 0; bottom: 0; border-bottom: 1px solid var(--td-success-color); opacity: 0; -webkit-transition: all 0.2s linear; transition: all 0.2s linear; } .oneid-link--theme-success.oneid-link--hover-underline:hover::after { opacity: 1; } .oneid-link--theme-success.oneid-link--hover-underline:active::after { opacity: 1; border-color: var(--td-success-color-active); } .oneid-link--theme-success.oneid-link--hover-color:hover { color: var(--td-success-color-hover); } .oneid-link--theme-success.oneid-link--hover-color.oneid-is-underline:hover::after { border-color: var(--td-success-color-hover); } .oneid-link--theme-success.oneid-link--hover-color.oneid-is-underline:active::after { border-color: var(--td-success-color-active); } .oneid-link--theme-success.oneid-link--hover-color:active { color: var(--td-success-color-active); } .oneid-link--theme-success.oneid-is-underline::after { content: ""; position: absolute; left: 0; right: 0; height: 0; bottom: 0; opacity: 1; border-bottom: 1px solid var(--td-success-color); -webkit-transition: all 0.2s linear; transition: all 0.2s linear; } .oneid-link--theme-success.oneid-is-disabled { cursor: not-allowed; color: var(--td-success-color-disabled); } .oneid-link--theme-success.oneid-is-disabled:hover, .oneid-link--theme-success.oneid-is-disabled:active { color: var(--td-success-color-disabled); } .oneid-link--theme-success.oneid-is-disabled.oneid-is-underline::after { border-color: var(--td-success-color-disabled); } .oneid-link--theme-danger { color: var(--td-error-color); } .oneid-link--theme-danger:active { color: var(--td-error-color-active); } .oneid-link--theme-danger.oneid-link--hover-underline::after { content: ""; position: absolute; left: 0; right: 0; height: 0; bottom: 0; border-bottom: 1px solid var(--td-error-color); opacity: 0; -webkit-transition: all 0.2s linear; transition: all 0.2s linear; } .oneid-link--theme-danger.oneid-link--hover-underline:hover::after { opacity: 1; } .oneid-link--theme-danger.oneid-link--hover-underline:active::after { opacity: 1; border-color: var(--td-error-color-active); } .oneid-link--theme-danger.oneid-link--hover-color:hover { color: var(--td-error-color-hover); } .oneid-link--theme-danger.oneid-link--hover-color.oneid-is-underline:hover::after { border-color: var(--td-error-color-hover); } .oneid-link--theme-danger.oneid-link--hover-color.oneid-is-underline:active::after { border-color: var(--td-error-color-active); } .oneid-link--theme-danger.oneid-link--hover-color:active { color: var(--td-error-color-active); } .oneid-link--theme-danger.oneid-is-underline::after { content: ""; position: absolute; left: 0; right: 0; height: 0; bottom: 0; opacity: 1; border-bottom: 1px solid var(--td-error-color); -webkit-transition: all 0.2s linear; transition: all 0.2s linear; } .oneid-link--theme-danger.oneid-is-disabled { cursor: not-allowed; color: var(--td-error-color-disabled); } .oneid-link--theme-danger.oneid-is-disabled:hover, .oneid-link--theme-danger.oneid-is-disabled:active { color: var(--td-error-color-disabled); } .oneid-link--theme-danger.oneid-is-disabled.oneid-is-underline::after { border-color: var(--td-error-color-disabled); } .oneid-link--theme-warning { color: var(--td-warning-color); } .oneid-link--theme-warning:active { color: var(--td-warning-color-active); } .oneid-link--theme-warning.oneid-link--hover-underline::after { content: ""; position: absolute; left: 0; right: 0; height: 0; bottom: 0; border-bottom: 1px solid var(--td-warning-color); opacity: 0; -webkit-transition: all 0.2s linear; transition: all 0.2s linear; } .oneid-link--theme-warning.oneid-link--hover-underline:hover::after { opacity: 1; } .oneid-link--theme-warning.oneid-link--hover-underline:active::after { opacity: 1; border-color: var(--td-warning-color-active); } .oneid-link--theme-warning.oneid-link--hover-color:hover { color: var(--td-warning-color-hover); } .oneid-link--theme-warning.oneid-link--hover-color.oneid-is-underline:hover::after { border-color: var(--td-warning-color-hover); } .oneid-link--theme-warning.oneid-link--hover-color.oneid-is-underline:active::after { border-color: var(--td-warning-color-active); } .oneid-link--theme-warning.oneid-link--hover-color:active { color: var(--td-warning-color-active); } .oneid-link--theme-warning.oneid-is-underline::after { content: ""; position: absolute; left: 0; right: 0; height: 0; bottom: 0; opacity: 1; border-bottom: 1px solid var(--td-warning-color); -webkit-transition: all 0.2s linear; transition: all 0.2s linear; } .oneid-link--theme-warning.oneid-is-disabled { cursor: not-allowed; color: var(--td-warning-color-disabled); } .oneid-link--theme-warning.oneid-is-disabled:hover, .oneid-link--theme-warning.oneid-is-disabled:active { color: var(--td-warning-color-disabled); } .oneid-link--theme-warning.oneid-is-disabled.oneid-is-underline::after { border-color: var(--td-warning-color-disabled); } .oneid-space { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; } .oneid-space .oneid-space-item { width: inherit; } .oneid-space-align-start { -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; } .oneid-space-align-end { -webkit-box-align: end; -ms-flex-align: end; align-items: flex-end; } .oneid-space-align-baseline { -webkit-box-align: baseline; -ms-flex-align: baseline; align-items: baseline; } .oneid-space-align-center { -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .oneid-space-vertical { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } .oneid-space-vertical .oneid-space-item-separator { width: 100%; } .oneid-space.oneid-space--break-line { -ms-flex-wrap: wrap; flex-wrap: wrap; } .oneid-space.oneid-space--polyfill { display: -webkit-box; display: -ms-flexbox; display: flex; } .oneid-space.oneid-space--polyfill.oneid-space-horizontal, .oneid-space.oneid-space--polyfill.oneid-space--break-line { margin-left: calc(-1 * var(--td-space-column-gap, 0)); } .oneid-space.oneid-space--polyfill.oneid-space-vertical, .oneid-space.oneid-space--polyfill.oneid-space--break-line { margin-top: calc(-1 * var(--td-space-row-gap, 0)); } .oneid-space.oneid-space--polyfill.oneid-space-horizontal > *, .oneid-space.oneid-space--polyfill.oneid-space--break-line > * { margin-left: var(--td-space-column-gap); } .oneid-space.oneid-space--polyfill.oneid-space-vertical > *, .oneid-space.oneid-space--polyfill.oneid-space--break-line > * { margin-top: var(--td-space-row-gap); } .oneid-image__wrapper { position: relative; background: var(--td-bg-color-secondarycontainer); z-index: 1; } .oneid-image__wrapper--shape-square { border-radius: 0; } .oneid-image__wrapper--shape-round { border-radius: var(--td-radius-medium); } .oneid-image__wrapper--shape-circle { border-radius: 50%; } .oneid-image__wrapper--gallery { border-radius: var(--td-radius-medium); } .oneid-image__wrapper--gallery .oneid-image { position: relative; z-index: 5; } .oneid-image__wrapper--need-hover { cursor: pointer; } .oneid-image { width: 100%; height: 100%; border-radius: inherit; position: relative; z-index: inherit; } .oneid-image--fit-fill { -o-object-fit: fill; object-fit: fill; } .oneid-image--fit-contain { -o-object-fit: contain; object-fit: contain; } .oneid-image--fit-cover { -o-object-fit: cover; object-fit: cover; } .oneid-image--fit-scale-down { -o-object-fit: scale-down; object-fit: scale-down; } .oneid-image--fit-none { -o-object-fit: none; object-fit: none; } .oneid-image--position-center { -o-object-position: center; object-position: center; } .oneid-image--position-bottom { -o-object-position: bottom; object-position: bottom; } .oneid-image--position-top { -o-object-position: top; object-position: top; } .oneid-image--position-left { -o-object-position: left; object-position: left; } .oneid-image--position-right { -o-object-position: right; object-position: right; } .oneid-image__gallery-shadow { position: absolute; left: 0; right: -24px; top: 24px; bottom: 24px; background: rgba(238, 238, 238, 0.26); border-radius: var(--td-radius-medium); z-index: 3; } .oneid-image__gallery-shadow::before, .oneid-image__gallery-shadow::after { content: ""; position: absolute; left: 0; border-radius: var(--td-radius-medium); } .oneid-image__gallery-shadow::after { top: -16px; right: 16px; bottom: -16px; background: rgba(238, 238, 238, 0.8); z-index: 4; } .oneid-image__gallery-shadow::before { top: -8px; right: 8px; bottom: -8px; background: rgba(238, 238, 238, 0.5); z-index: 2; } .oneid-image__placeholder { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; z-index: 0; } .oneid-image__overlay-content { position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: 6; opacity: 1; visibility: visible; -webkit-transition: visibility 0s, opacity 0.2s linear; transition: visibility 0s, opacity 0.2s linear; } .oneid-image__overlay-content--hidden { visibility: hidden; opacity: 0; } .oneid-image__loading, .oneid-image__error { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; z-index: 1; } .oneid-image__loading { color: var(--td-text-color-secondary); } .oneid-image__error { color: var(--td-text-color-disabled); } .oneid-image-viewer__img-error { height: 440px; width: 440px; background-color: var(--td-bg-color-component-disabled); border-radius: 4px; color: #000000; cursor: inherit; position: absolute; } .oneid-image-viewer__img-error .oneid-image-viewer__img-error-content { position: absolute; height: 100%; width: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -ms-flex-line-pack: center; align-content: center; font: var(--td-font-body-medium); } .oneid-image-viewer__img-error .oneid-image-viewer__img-error-content .oneid-image-viewer__img-error-text { margin-top: var(--td-comp-margin-s); } @-webkit-keyframes modal-image-show { 0% { -webkit-transform: scale(0); transform: scale(0); } to { -webkit-transform: scale(1); transform: scale(1); } } @keyframes modal-image-show { 0% { -webkit-transform: scale(0); transform: scale(0); } to { -webkit-transform: scale(1); transform: scale(1); } } @-webkit-keyframes modal-image-hide { 0% { -webkit-transform: scale(1); transform: scale(1); } to { -webkit-transform: scale(0); transform: scale(0); } } @keyframes modal-image-hide { 0% { -webkit-transform: scale(1); transform: scale(1); } to { -webkit-transform: scale(0); transform: scale(0); } } @-webkit-keyframes modal-mask-show { 0% { opacity: 0; } to { opacity: 1; } } @keyframes modal-mask-show { 0% { opacity: 0; } to { opacity: 1; } } @-webkit-keyframes modal-mask-hide { 0% { opacity: 1; } to { opacity: 0; } } @keyframes modal-mask-hide { 0% { opacity: 1; } to { opacity: 0; } } .oneid-image-viewer-preview-image { position: fixed; top: 0; bottom: 0; left: 0; right: 0; z-index: 3000; overflow: hidden; -webkit-animation: 0.2s cubic-bezier(0.82, 0, 1, 0.9) modal-mask-show; animation: 0.2s cubic-bezier(0.82, 0, 1, 0.9) modal-mask-show; } .oneid-image-viewer-preview-image.oneid-is-hide { -webkit-animation: 0.2s cubic-bezier(0, 0, 0.15, 1) modal-mask-hide forwards; animation: 0.2s cubic-bezier(0, 0, 0.15, 1) modal-mask-hide forwards; } .oneid-image-viewer-preview-image.oneid-is-hide .oneid-image-viewer__modal-pic .oneid-image-viewer__modal-box { -webkit-animation: 0.2s cubic-bezier(0, 0, 0.15, 1) modal-image-hide forwards; animation: 0.2s cubic-bezier(0, 0, 0.15, 1) modal-image-hide forwards; } .oneid-image-viewer-preview-image .oneid-image-viewer__modal-index { text-align: center; font-size: var(--td-font-size-body-medium); color: var(--td-text-color-anti); position: absolute; top: 92px; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); background: rgba(0, 0, 0, 0.4); border-radius: var(--td-radius-default); padding: var(--td-comp-paddingTB-xs) var(--td-comp-paddingLR-s); z-index: 1; } .oneid-image-viewer-preview-image .oneid-image-viewer__modal-mask { position: fixed; top: 0; bottom: 0; left: 0; right: 0; background-color: var(--td-mask-active); height: 100%; width: 100%; -webkit-transition: all 0.2s ease; transition: all 0.2s ease; opacity: 1; } .oneid-image-viewer-preview-image .oneid-image-viewer__modal-pic { height: 0; width: 0; position: absolute; top: 50%; left: 50%; } .oneid-image-viewer-preview-image .oneid-image-viewer__modal-pic .oneid-image-viewer__modal-box { width: 100%; height: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-animation: 0.2s cubic-bezier(0.38, 0, 0.24, 1) modal-image-show; animation: 0.2s cubic-bezier(0.38, 0, 0.24, 1) modal-image-show; } .oneid-image-viewer-preview-image .oneid-image-viewer__modal-pic .oneid-image-viewer__modal-box .oneid-image-viewer__modal-image { display: block; max-width: min(90vw, 1000px); max-height: min(90vh, 800px); -webkit-transition: all 0.2s cubic-bezier(0.38, 0, 0.24, 1); transition: all 0.2s cubic-bezier(0.38, 0, 0.24, 1); -webkit-transform: rotate(0deg); transform: rotate(0deg); -o-object-fit: contain; object-fit: contain; } .oneid-image-viewer-preview-image .oneid-image-viewer__modal-header { width: 100%; position: absolute; top: 0; z-index: 1; height: auto; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; background-color: var(--td-bg-color-container); padding: 0 0 12px 0; } .oneid-image-viewer-preview-image .oneid-image-viewer__modal-header.oneid-is-show { padding: 12px 0; } @-webkit-keyframes preview-icon-range { 0% { -webkit-transform: translate(-50%, 50%) rotateZ(0); transform: translate(-50%, 50%) rotateZ(0); } to { -webkit-transform: translate(-50%, 50%) rotateZ(-180deg); transform: translate(-50%, 50%) rotateZ(-180deg); } } @keyframes preview-icon-range { 0% { -webkit-transform: translate(-50%, 50%) rotateZ(0); transform: translate(-50%, 50%) rotateZ(0); } to { -webkit-transform: translate(-50%, 50%) rotateZ(-180deg); transform: translate(-50%, 50%) rotateZ(-180deg); } } @-webkit-keyframes preview-icon-unrange { 0% { -webkit-transform: translate(-50%, 50%) rotateZ(-180deg); transform: translate(-50%, 50%) rotateZ(-180deg); } to { -webkit-transform: translate(-50%, 50%) rotateZ(0); transform: translate(-50%, 50%) rotateZ(0); } } @keyframes preview-icon-unrange { 0% { -webkit-transform: translate(-50%, 50%) rotateZ(-180deg); transform: translate(-50%, 50%) rotateZ(-180deg); } to { -webkit-transform: translate(-50%, 50%) rotateZ(0); transform: translate(-50%, 50%) rotateZ(0); } } .oneid-image-viewer-preview-image .oneid-image-viewer__modal-header .oneid-image-viewer__header-pre-bt { width: var(--td-comp-size-xxs); height: var(--td-comp-size-xxs); display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; position: absolute; left: 50%; bottom: 0; -webkit-transform: translate(-50%, 50%); transform: translate(-50%, 50%); background-color: var(--td-bg-color-container); color: var(--td-text-color-primary); border-radius: 50%; -webkit-box-shadow: var(--td-shadow-inset-top), var(--td-shadow-inset-right), var(--td-shadow-inset-bottom), var(--td-shadow-inset-left); box-shadow: var(--td-shadow-inset-top), var(--td-shadow-inset-right), var(--td-shadow-inset-bottom), var(--td-shadow-inset-left); -webkit-animation: 0.2s cubic-bezier(0.38, 0, 0.24, 1) 0s 1 normal forwards running preview-icon-unrange; animation: 0.2s cubic-bezier(0.38, 0, 0.24, 1) 0s 1 normal forwards running preview-icon-unrange; } .oneid-image-viewer-preview-image .oneid-image-viewer__modal-header .oneid-image-viewer__header-pre-bt .oneid-icon { font-size: var(--td-font-size-body-large); } .oneid-image-viewer-preview-image .oneid-image-viewer__modal-header .oneid-image-viewer__header-pre-bt:hover { background-color: inherit; } @-webkit-keyframes preview-image-show { 0% { height: 0; } to { height: 40px; } } @keyframes preview-image-show { 0% { height: 0; } to { height: 40px; } } @-webkit-keyframes preview-image-hide { 0% { height: 40px; } to { height: 0; } } @keyframes preview-image-hide { 0% { height: 40px; } to { height: 0; } } .oneid-image-viewer-preview-image .oneid-image-viewer__modal-header.oneid-is-show .oneid-image-viewer__header-prev { -webkit-animation: 0.2s cubic-bezier(0.38, 0, 0.24, 1) 0s 1 normal forwards running preview-image-show; animation: 0.2s cubic-bezier(0.38, 0, 0.24, 1) 0s 1 normal forwards running preview-image-show; } .oneid-image-viewer-preview-image .oneid-image-viewer__modal-header.oneid-is-show .oneid-image-viewer__header-pre-bt { -webkit-animation: 0.2s cubic-bezier(0.38, 0, 0.24, 1) 0s 1 normal forwards running preview-icon-range; animation: 0.2s cubic-bezier(0.38, 0, 0.24, 1) 0s 1 normal forwards running preview-icon-range; } .oneid-image-viewer-preview-image .oneid-image-viewer__modal-header .oneid-image-viewer__header-prev { width: 521.7777777778px; -webkit-animation: 0.2s cubic-bezier(0.38, 0, 0.24, 1) 0s 1 normal forwards running preview-image-hide; animation: 0.2s cubic-bezier(0.38, 0, 0.24, 1) 0s 1 normal forwards running preview-image-hide; display: -webkit-box; display: -ms-flexbox; display: flex; position: relative; overflow: hidden; } .oneid-image-viewer-preview-image .oneid-image-viewer__modal-header .oneid-image-viewer__header-prev::before, .oneid-image-viewer-preview-image .oneid-image-viewer__modal-header .oneid-image-viewer__header-prev::after { content: ""; position: absolute; height: 100%; z-index: 1; width: 71.1111111111px; pointer-events: none; } .oneid-image-viewer-preview-image .oneid-image-viewer__modal-header .oneid-image-viewer__header-prev::before { left: 0; background-image: -webkit-gradient(linear, left top, right top, from(var(--td-bg-color-container)), to(rgba(255, 255, 255, 0))); background-image: linear-gradient(to right, var(--td-bg-color-container), rgba(255, 255, 255, 0)); } .oneid-image-viewer-preview-image .oneid-image-viewer__modal-header .oneid-image-viewer__header-prev::after { right: 0; background-image: -webkit-gradient(linear, left top, right top, from(rgba(255, 255, 255, 0)), to(var(--td-bg-color-container))); background-image: linear-gradient(to right, rgba(255, 255, 255, 0), var(--td-bg-color-container)); } .oneid-image-viewer-preview-image .oneid-image-viewer__header-trans { height: 100%; -webkit-transition: -webkit-transform 0.2s; transition: -webkit-transform 0.2s; transition: transform 0.2s; transition: transform 0.2s, -webkit-transform 0.2s; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; gap: 4px; margin-left: 225.3333333333px; } .oneid-image-viewer-preview-image .oneid-image-viewer__header-box { -webkit-box-sizing: border-box; box-sizing: border-box; width: 71.1111111111px; height: 40px; position: relative; -webkit-transition: 0.2s; transition: 0.2s; overflow: hidden; border-radius: var(--td-radius-default); display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; border: 1px solid transparent; background-color: var(--td-bg-color-secondarycontainer); } .oneid-image-viewer-preview-image .oneid-image-viewer__header-box .oneid-image-viewer__header-img { width: auto; height: 100%; } .oneid-image-viewer-preview-image .oneid-image-viewer__header-box:hover, .oneid-image-viewer-preview-image .oneid-image-viewer__header-box.oneid-is-active { border-color: var(--td-brand-color); } .oneid-image-viewer-preview-image .oneid-image-viewer__modal-icon { cursor: pointer; color: var(--td-text-color-primary); border-radius: var(--td-radius-default); -webkit-transition: 0.2s; transition: 0.2s; } .oneid-image-viewer-preview-image .oneid-image-viewer__modal-icon.oneid-image-viewer__modal-close-bt { top: 100px; right: 40px; } .oneid-image-viewer-preview-image .oneid-image-viewer__modal-icon.oneid-image-viewer__modal-next-bt, .oneid-image-viewer-preview-image .oneid-image-viewer__modal-icon.oneid-image-viewer__modal-prev-bt { top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); } .oneid-image-viewer-preview-image .oneid-image-viewer__modal-icon.oneid-image-viewer__modal-prev-bt { left: 40px; } .oneid-image-viewer-preview-image .oneid-image-viewer__modal-icon.oneid-image-viewer__modal-next-bt { right: 40px; } .oneid-image-viewer-preview-image .oneid-image-viewer__modal-icon.oneid-image-viewer__modal-close-bt, .oneid-image-viewer-preview-image .oneid-image-viewer__modal-icon.oneid-image-viewer__modal-prev-bt, .oneid-image-viewer-preview-image .oneid-image-viewer__modal-icon.oneid-image-viewer__modal-next-bt { position: fixed; z-index: 10; color: var(--td-text-color-anti); background-color: rgba(0, 0, 0, 0.4); border-radius: 50%; width: var(--td-comp-size-xl); height: var(--td-comp-size-xl); display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .oneid-image-viewer-preview-image .oneid-image-viewer__modal-icon .oneid-image-viewer__modal-icon-label { margin-left: 2px; } .oneid-image-viewer-preview-image .oneid-image-viewer__modal-icon.oneid-is-disabled { color: rgba(255, 255, 255, 0.22); } .oneid-image-viewer-preview-image .oneid-image-viewer__modal-icon.oneid-is-disabled:hover { background-color: rgba(0, 0, 0, 0.4); } .oneid-image-viewer-preview-image .oneid-image-viewer__modal-icon:hover { background-color: rgba(0, 0, 0, 0.2); } .oneid-image-viewer__mask { width: 100vh; height: 100vh; left: 0; top: 0; z-index: 99; position: fixed; background-color: transparent; } .oneid-image-viewer__utils { width: 100%; position: absolute; bottom: 32px; z-index: 1; height: auto; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; color: var(--td-text-color-primary); -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .oneid-image-viewer__utils .oneid-image-viewer__utils-content { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; height: 50px; line-height: 100%; background: var(--td-bg-color-container); border-radius: var(--td-radius-medium); padding: 0 var(--td-comp-paddingLR-xs); } .oneid-image-viewer__utils .oneid-image-viewer__utils-content .oneid-image-viewer__modal-icon { margin: 0 var(--td-comp-margin-xs); width: var(--td-comp-size-m); height: var(--td-comp-size-m); display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; border-radius: var(--td-radius-default); -webkit-transition: 0.2s; transition: 0.2s; } .oneid-image-viewer__utils .oneid-image-viewer__utils-content .oneid-image-viewer__modal-icon:hover { background-color: var(--td-bg-color-container-hover); } .oneid-image-viewer__utils .oneid-image-viewer__utils-content .oneid-image-viewer__utils-scale { width: var(--td-comp-size-xl); text-align: center; cursor: inherit; } .oneid-image-viewer__utils .oneid-image-viewer__utils-content .oneid-image-viewer__utils-scale:hover { background-color: var(--td-bg-color-container); } .oneid-image-viewer-mini__footer .oneid-image-viewer__utils { position: inherit; } .oneid-image-viewer-mini__content { max-width: min(90vw, 1000px); max-height: min(90vh, 800px); } @keyframes modal-image-show { 0% { -webkit-transform: scale(0); transform: scale(0); } to { -webkit-transform: scale(1); transform: scale(1); } } .oneid-image-viewer-mini__content .oneid-image-viewer__modal-pic .oneid-image-viewer__modal-box { width: 100%; height: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .oneid-image-viewer-mini__content .oneid-image-viewer__modal-pic .oneid-image-viewer__modal-box .oneid-image-viewer__modal-image { display: block; max-width: min(80vw, 800px); max-height: min(80vh, 600px); -webkit-transition: all 0.2s ease; transition: all 0.2s ease; -webkit-transform: rotate(0deg); transform: rotate(0deg); -o-object-fit: contain; object-fit: contain; } .oneid-image-viewer__dialog.oneid-dialog__ctx--fixed { z-index: 3000; } .oneid-image-viewer__dialog .oneid-dialog__header { padding: 0 var(--td-comp-paddingLR-s); pointer-events: none; } .oneid-image-viewer__dialog .oneid-dialog__header .oneid-image-viewer__dialog-title { pointer-events: all; } .oneid-image-viewer__dialog .oneid-dialog__header .oneid-dialog__close { pointer-events: auto; } .oneid-image-viewer__dialog .oneid-dialog { border-color: var(--td-component-border); overflow: hidden; padding: 0; -webkit-box-shadow: var(--td-shadow-3); box-shadow: var(--td-shadow-3); } .oneid-image-viewer__dialog .oneid-dialog__header { height: 40px; width: 100%; font-size: var(--td-font-size-body-medium); background-color: var(--td-bg-color-secondarycontainer); } .oneid-image-viewer__dialog .oneid-dialog__header-content { margin-left: 32px; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .oneid-image-viewer__dialog .oneid-dialog__close:hover { background-color: var(--td-bg-color-secondarycontainer-hover); } .range-input-disabled.oneid-is-disabled { color: var(--td-text-color-disabled); background-color: var(--td-bg-color-component-disabled); } .range-input-disabled.oneid-is-disabled:hover { border-color: var(--td-border-level-2-color); } .range-input-disabled.oneid-is-disabled .oneid-range-input__inner { cursor: not-allowed; color: var(--td-text-color-disabled); } .range-input-disabled.oneid-is-disabled .oneid-range-input__inner::-webkit-input-placeholder { color: var(--td-text-color-disabled); } .range-input-disabled.oneid-is-disabled .oneid-range-input__inner::-moz-placeholder { color: var(--td-text-color-disabled); } .range-input-disabled.oneid-is-disabled .oneid-range-input__inner:-ms-input-placeholder { color: var(--td-text-color-disabled); } .range-input-disabled.oneid-is-disabled .oneid-range-input__inner::-ms-input-placeholder { color: var(--td-text-color-disabled); } .range-input-disabled.oneid-is-disabled .oneid-range-input__inner::placeholder { color: var(--td-text-color-disabled); } .range-input-disabled.oneid-is-disabled > .oneid-range-input__prefix .oneid-icon, .range-input-disabled.oneid-is-disabled > .oneid-range-input__suffix .oneid-icon { color: var(--td-text-color-disabled); } .oneid-range-input { margin: 0; padding: 0; list-style: none; width: 100%; position: relative; font: var(--td-font-body-medium); height: var(--td-comp-size-m); border-width: 1px; border-style: solid; border-radius: var(--td-radius-default); border-color: var(--td-border-level-2-color); padding: var(--td-comp-paddingTB-xs) var(--td-comp-paddingLR-s) var(--td-comp-paddingTB-xs) var(--td-comp-paddingLR-s); background-color: var(--td-bg-color-specialcomponent); color: var(--td-text-color-primary); font-size: var(--td-font-body-medium); -webkit-box-sizing: border-box; box-sizing: border-box; -webkit-transition: all cubic-bezier(0.38, 0, 0.24, 1) 0.2s; transition: all cubic-bezier(0.38, 0, 0.24, 1) 0.2s; display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; gap: 4px; } .oneid-range-input:hover { border-color: var(--td-brand-color); } .oneid-range-input--borderless:not(.oneid-is-focused) { border-color: transparent; -webkit-transition: all cubic-bezier(0.38, 0, 0.24, 1) 0.2s; transition: all cubic-bezier(0.38, 0, 0.24, 1) 0.2s; } .oneid-range-input--borderless:not(.oneid-is-focused):hover { border-color: var(--td-component-border); cursor: pointer; } .oneid-range-input--borderless:not(.oneid-is-focused).oneid-is-disabled { border: none; background-color: var(--td-bg-color-component-disabled); } .oneid-range-input.oneid-is-focused { z-index: 1; border-color: var(--td-brand-color); -webkit-box-shadow: 0 0 0 2px var(--td-brand-color-focus); box-shadow: 0 0 0 2px var(--td-brand-color-focus); } .oneid-range-input.oneid-is-success { border-color: var(--td-success-color); } .oneid-range-input.oneid-is-success:focus { -webkit-box-shadow: 0 0 0 2px var(--td-success-color-focus); box-shadow: 0 0 0 2px var(--td-success-color-focus); } .oneid-range-input.oneid-is-success.oneid-range-input--focused { -webkit-box-shadow: 0 0 0 2px var(--td-success-color-focus); box-shadow: 0 0 0 2px var(--td-success-color-focus); } .oneid-range-input.oneid-is-success > .oneid-range-input__extra { color: var(--td-success-color); } .oneid-range-input.oneid-is-success > .oneid-range-input__tips { color: var(--td-success-color); font-size: var(--td-font-size-body-small); margin-left: calc(-1 * var(--td-comp-paddingLR-xs)); } .oneid-range-input.oneid-is-warning { border-color: var(--td-warning-color); } .oneid-range-input.oneid-is-warning:focus { -webkit-box-shadow: 0 0 0 2px var(--td-warning-color-focus); box-shadow: 0 0 0 2px var(--td-warning-color-focus); } .oneid-range-input.oneid-is-warning.oneid-range-input--focused { -webkit-box-shadow: 0 0 0 2px var(--td-warning-color-focus); box-shadow: 0 0 0 2px var(--td-warning-color-focus); } .oneid-range-input.oneid-is-warning > .oneid-range-input__extra { color: var(--td-warning-color); } .oneid-range-input.oneid-is-warning > .oneid-range-input__tips { color: var(--td-warning-color); font-size: var(--td-font-size-body-small); margin-left: calc(-1 * var(--td-comp-paddingLR-xs)); } .oneid-range-input.oneid-is-error { border-color: var(--td-error-color); } .oneid-range-input.oneid-is-error:focus { -webkit-box-shadow: 0 0 0 2px var(--td-error-color-focus); box-shadow: 0 0 0 2px var(--td-error-color-focus); } .oneid-range-input.oneid-is-error.oneid-range-input--focused { -webkit-box-shadow: 0 0 0 2px var(--td-error-color-focus); box-shadow: 0 0 0 2px var(--td-error-color-focus); } .oneid-range-input.oneid-is-error > .oneid-range-input__extra { color: var(--td-error-color); } .oneid-range-input.oneid-is-error > .oneid-range-input__tips { color: var(--td-error-color); font-size: var(--td-font-size-body-small); margin-left: calc(-1 * var(--td-comp-paddingLR-xs)); } .oneid-range-input.oneid-is-disabled { color: var(--td-text-color-disabled); background-color: var(--td-bg-color-component-disabled); } .oneid-range-input.oneid-is-disabled:hover { border-color: var(--td-border-level-2-color); } .oneid-range-input.oneid-is-disabled .oneid-range-input__inner { cursor: not-allowed; color: var(--td-text-color-disabled); } .oneid-range-input.oneid-is-disabled .oneid-range-input__inner::-webkit-input-placeholder { color: var(--td-text-color-disabled); } .oneid-range-input.oneid-is-disabled .oneid-range-input__inner::-moz-placeholder { color: var(--td-text-color-disabled); } .oneid-range-input.oneid-is-disabled .oneid-range-input__inner:-ms-input-placeholder { color: var(--td-text-color-disabled); } .oneid-range-input.oneid-is-disabled .oneid-range-input__inner::-ms-input-placeholder { color: var(--td-text-color-disabled); } .oneid-range-input.oneid-is-disabled .oneid-range-input__inner::placeholder { color: var(--td-text-color-disabled); } .oneid-range-input.oneid-is-disabled > .oneid-range-input__prefix .oneid-icon, .oneid-range-input.oneid-is-disabled > .oneid-range-input__suffix .oneid-icon { color: var(--td-text-color-disabled); } .oneid-range-input.oneid-range-input--prefix .oneid-range-input__prefix { height: 100%; text-align: center; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; font-size: var(--td-font-size-body-medium); } .oneid-range-input.oneid-range-input--suffix .oneid-range-input__suffix { height: 100%; text-align: center; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; font-size: var(--td-font-size-body-medium); } .oneid-range-input.oneid-size-l { height: var(--td-comp-size-xl); font: var(--td-font-body-large); padding-top: var(--td-comp-paddingTB-xs); padding-bottom: var(--td-comp-paddingTB-xs); } .oneid-range-input.oneid-size-l .oneid-input { padding: 0 var(--td-comp-margin-s); } .oneid-range-input.oneid-size-s { padding: var(--td-comp-paddingTB-xxs) var(--td-comp-margin-xs); height: var(--td-comp-size-xs); font: var(--td-font-body-small); } .oneid-range-input__inner { height: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: var(--td-comp-margin-s); } .oneid-range-input__inner .oneid-input__wrap { height: 100%; border-radius: var(--td-radius-small); } .oneid-range-input__inner > .oneid-range-input__prefix { -ms-flex-negative: 0; flex-shrink: 0; } .oneid-range-input__inner .oneid-input { padding: 0 var(--td-comp-paddingLR-xs); height: 100%; border: 0; -webkit-box-shadow: none; box-shadow: none; font-size: inherit; border-radius: var(--td-radius-small); } .oneid-range-input__inner .oneid-input:hover { background-color: var(--td-bg-color-container-hover); } .oneid-range-input__inner .oneid-input__inner { width: 100%; height: 100%; line-height: 1; } .oneid-range-input__inner .oneid-input.oneid-is-focused { background-color: var(--td-bg-color-component); } .oneid-range-input__extra { font: var(--td-font-body-small); color: var(--td-text-color-placeholder); } .oneid-range-input__status { position: absolute; right: calc(0px - var(--td-comp-margin-xxxl)); top: 0; } .oneid-range-input.oneid-range-input--suffix .oneid-input__clear { opacity: 0; visibility: hidden; -webkit-transition: all cubic-bezier(0.38, 0, 0.24, 1) 0.2s; transition: all cubic-bezier(0.38, 0, 0.24, 1) 0.2s; } .oneid-range-input.oneid-range-input--suffix:hover .oneid-input__clear { opacity: 1; visibility: visible; } .oneid-range-input .oneid-range-input__suffix-clear { cursor: pointer; } .oneid-range-input__prefix > .oneid-icon, .oneid-range-input__suffix > .oneid-icon { -webkit-transition: color 0.2s linear; transition: color 0.2s linear; font-size: 16px; color: var(--td-text-color-placeholder); -ms-flex-negative: 0; flex-shrink: 0; } .oneid-range-input-popup { width: 100%; } .oneid-range-input-popup--visible .oneid-range-input { border-color: var(--td-brand-color); -webkit-box-shadow: 0 0 0 2px var(--td-brand-color-focus); box-shadow: 0 0 0 2px var(--td-brand-color-focus); } .oneid-range-input-popup--visible .oneid-range-input .oneid-icon-time, .oneid-range-input-popup--visible .oneid-range-input .oneid-icon-calendar { color: var(--td-brand-color); } .oneid-range-input-popup--visible .oneid-range-input .oneid-input.oneid-is-focused { background-color: var(--td-bg-color-component); } .flex-center { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .oneid-time-picker, .oneid-time-range-picker { width: 240px; background: transparent; display: inline-block; position: relative; font: var(--td-font-body-medium); color: var(--td-text-color-primary); -webkit-box-sizing: border-box; box-sizing: border-box; margin: 0; padding: 0; list-style: none; } .oneid-time-picker.oneid-is-disabled, .oneid-time-range-picker.oneid-is-disabled { cursor: not-allowed; } .oneid-time-picker > *:focus, .oneid-time-range-picker > *:focus, .oneid-time-picker > *:active, .oneid-time-range-picker > *:active { outline: 0; } .oneid-time-picker__group, .oneid-time-range-picker__group { position: relative; } .oneid-time-picker__group.active, .oneid-time-range-picker__group.active { border: 1px solid var(--td-brand-color); -webkit-box-shadow: 0 0 2px 2px var(--td-brand-color-focus); box-shadow: 0 0 2px 2px var(--td-brand-color-focus); } .oneid-time-picker__group.active + .oneid-time-picker__icon-wrap > .oneid-time-picker__icon-clear, .oneid-time-range-picker__group.active + .oneid-time-picker__icon-wrap > .oneid-time-picker__icon-clear { display: block; } .oneid-time-picker__group-text, .oneid-time-range-picker__group-text { color: var(--td-text-color-primary); } .oneid-time-picker__group input, .oneid-time-range-picker__group input { cursor: pointer; } .oneid-time-range-picker { width: auto; } .oneid-time-picker__panel { width: 280px; background: transparent; border-radius: var(--td-radius-default); display: inline-block; position: relative; font: var(--td-font-body-medium); --timePickerPanelOffsetTop: 15; --timePickerPanelOffsetBottom: 21; } .oneid-time-picker__panel-body { width: 100%; height: calc((var(--td-comp-size-xs) + var(--td-size-3)) * 7 + var(--td-size-3)); position: relative; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .oneid-time-picker__panel-body-active-mask { position: absolute; top: 50%; height: var(--td-comp-size-xs); width: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; } .oneid-time-picker__panel-body-active-mask > div { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; -webkit-transform: translateY(calc(0px - (var(--td-comp-size-xs) + var(--td-size-3)) / 2)); transform: translateY(calc(0px - (var(--td-comp-size-xs) + var(--td-size-3)) / 2)); height: var(--td-comp-size-xs); background-color: var(--td-brand-color-light); margin: var(--td-size-3) var(--td-comp-margin-xs); border-radius: var(--td-radius-default); } .oneid-time-picker__panel-body-scroll { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; height: 100%; overflow-y: scroll; text-align: center; position: relative; list-style: none; padding: 0; margin: 0; } .oneid-time-picker__panel-body-scroll::-webkit-scrollbar { width: 0; } .oneid-time-picker__panel-body-scroll::after, .oneid-time-picker__panel-body-scroll::before { display: block; height: 50%; content: ""; } .oneid-time-picker__panel-body-scroll::before { height: calc(50% - var(--timePickerPanelOffsetTop, 0) * 1px); } .oneid-time-picker__panel-body-scroll::after { height: calc(50% - var(--timePickerPanelOffsetBottom, 0) * 1px); } .oneid-time-picker__panel-body-scroll:last-child { border-right: 0; } .oneid-time-picker__panel-body-scroll-item { height: var(--td-comp-size-xs); font: var(--td-font-body-medium); line-height: var(--td-comp-size-xs); color: var(--td-text-color-secondary); margin: var(--td-size-3) var(--td-comp-margin-xs); border-radius: var(--td-radius-default); text-align: center; cursor: pointer; -webkit-transition: 0.2s linear; transition: 0.2s linear; } .oneid-time-picker__panel-body-scroll-item:not(.oneid-time-picker__panel-body-scroll-item.oneid-is-current):not(.oneid-time-picker__panel-body-scroll-item.oneid-is-disabled):hover { color: var(--td-text-color-primary); } .oneid-time-picker__panel-body-scroll-item:not(.oneid-time-picker__panel-body-scroll-item.oneid-is-current):not(.oneid-time-picker__panel-body-scroll-item.oneid-is-disabled):active { background-color: var(--td-bg-color-container-hover); } .oneid-time-picker__panel-body-scroll-item.oneid-is-disabled { color: var(--td-text-color-disabled); cursor: not-allowed; } .oneid-time-picker__panel-body-scroll-item.oneid-is-hidden { display: none; cursor: not-allowed; } .oneid-time-picker__panel-body-scroll-item.oneid-is-current { color: var(--td-brand-color); } .oneid-time-picker__panel-section-body { padding: var(--td-pop-padding-xl) calc(var(--td-pop-padding-xl) - var(--td-comp-margin-xs)); } .oneid-time-picker__panel-section-footer { width: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-orient: horizontal; -webkit-box-direction: reverse; -ms-flex-direction: row-reverse; flex-direction: row-reverse; -webkit-box-align: center; -ms-flex-align: center; align-items: center; background-color: transparent; position: relative; border-top: 1px solid var(--td-border-level-1-color); -webkit-box-sizing: border-box; box-sizing: border-box; padding: var(--td-pop-padding-xl); } .oneid-form { color: var(--td-text-color-primary); -webkit-box-sizing: border-box; box-sizing: border-box; margin: 0; padding: 0; list-style: none; font: var(--td-font-body-medium); } .oneid-form:not(.oneid-form-inline) .oneid-form__item:last-of-type { margin: 0; } .oneid-form__item { margin-bottom: var(--td-comp-margin-xxl); } .oneid-form__item.oneid-form__item-with-help { margin-bottom: var(--td-comp-margin-xs); } .oneid-form__item.oneid-form__item-with-extra { margin-bottom: var(--td-comp-margin-xxl); } .oneid-form__label { float: left; padding-right: var(--td-comp-paddingLR-xl); vertical-align: middle; line-height: var(--td-comp-margin-xxxl); color: var(--td-text-color-primary); -webkit-box-sizing: border-box; box-sizing: border-box; white-space: nowrap; } .oneid-form__label--top { float: none; min-height: var(--td-comp-margin-xxxl); } .oneid-form__label--left { text-align: left; } .oneid-form__label--right { text-align: right; } .oneid-form__label--required:not(.oneid-form__label--required-right) label::before { display: inline-block; margin-right: var(--td-comp-margin-xs); color: var(--td-error-color); line-height: var(--td-line-height-body-medium); content: "*"; } .oneid-form__label--required-right label::after { display: inline-block; margin-left: var(--td-comp-margin-xs); color: var(--td-error-color); line-height: var(--td-line-height-body-medium); content: "*"; } .oneid-form__label--colon label::after { content: ":"; position: relative; margin: 0 var(--td-comp-margin-xxs); } .oneid-form__controls { min-height: var(--td-comp-margin-xxxl); display: flow-root; position: relative; } .oneid-form__controls-content { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; min-height: var(--td-comp-margin-xxxl); } .oneid-form__controls .oneid-form__item { margin-bottom: 0; margin-right: var(--td-comp-margin-xxl); } .oneid-form__controls.oneid-is-success .oneid-form__status .oneid-icon { color: var(--td-success-color); } .oneid-form__controls.oneid-is-success .oneid-input__extra { color: var(--td-success-color); } .oneid-form__controls.oneid-form--success-border.oneid-is-success .oneid-input__extra { color: var(--td-success-color); } .oneid-form__controls.oneid-form--success-border.oneid-is-success .oneid-form__controls-content .oneid-input, .oneid-form__controls.oneid-form--success-border.oneid-is-success .oneid-form__controls-content .oneid-select, .oneid-form__controls.oneid-form--success-border.oneid-is-success .oneid-form__controls-content .oneid-radio-button, .oneid-form__controls.oneid-form--success-border.oneid-is-success .oneid-form__controls-content .oneid-cascader, .oneid-form__controls.oneid-form--success-border.oneid-is-success .oneid-form__controls-content .oneid-range-input, .oneid-form__controls.oneid-form--success-border.oneid-is-success .oneid-form__controls-content .oneid-textarea__inner { border-color: var(--td-success-color); } .oneid-form__controls.oneid-form--success-border.oneid-is-success .oneid-form__controls-content .oneid-input--focused, .oneid-form__controls.oneid-form--success-border.oneid-is-success .oneid-form__controls-content .oneid-select--focused, .oneid-form__controls.oneid-form--success-border.oneid-is-success .oneid-form__controls-content .oneid-radio-button--focused, .oneid-form__controls.oneid-form--success-border.oneid-is-success .oneid-form__controls-content .oneid-cascader--focused, .oneid-form__controls.oneid-form--success-border.oneid-is-success .oneid-form__controls-content .oneid-range-input--focused, .oneid-form__controls.oneid-form--success-border.oneid-is-success .oneid-form__controls-content .oneid-textarea__inner--focused { -webkit-box-shadow: 0 0 0 2px var(--td-success-color-focus); box-shadow: 0 0 0 2px var(--td-success-color-focus); } .oneid-form__controls.oneid-form--success-border.oneid-is-success .oneid-form__controls-content .oneid-input .oneid-icon, .oneid-form__controls.oneid-form--success-border.oneid-is-success .oneid-form__controls-content .oneid-select .oneid-icon, .oneid-form__controls.oneid-form--success-border.oneid-is-success .oneid-form__controls-content .oneid-radio-button .oneid-icon, .oneid-form__controls.oneid-form--success-border.oneid-is-success .oneid-form__controls-content .oneid-cascader .oneid-icon, .oneid-form__controls.oneid-form--success-border.oneid-is-success .oneid-form__controls-content .oneid-range-input .oneid-icon, .oneid-form__controls.oneid-form--success-border.oneid-is-success .oneid-form__controls-content .oneid-textarea__inner .oneid-icon, .oneid-form__controls.oneid-form--success-border.oneid-is-success .oneid-form__controls-content .oneid-input .oneid-fake-arrow, .oneid-form__controls.oneid-form--success-border.oneid-is-success .oneid-form__controls-content .oneid-select .oneid-fake-arrow, .oneid-form__controls.oneid-form--success-border.oneid-is-success .oneid-form__controls-content .oneid-radio-button .oneid-fake-arrow, .oneid-form__controls.oneid-form--success-border.oneid-is-success .oneid-form__controls-content .oneid-cascader .oneid-fake-arrow, .oneid-form__controls.oneid-form--success-border.oneid-is-success .oneid-form__controls-content .oneid-range-input .oneid-fake-arrow, .oneid-form__controls.oneid-form--success-border.oneid-is-success .oneid-form__controls-content .oneid-textarea__inner .oneid-fake-arrow { color: var(--td-success-color); } .oneid-form__controls.oneid-form--success-border.oneid-is-success .oneid-form__controls-content .oneid-select > .oneid-select__right-icon:not(.oneid-select__right-icon-clear) { color: var(--td-success-color); } .oneid-form__controls.oneid-form--success-border.oneid-is-success .oneid-form__controls-content .oneid-radio-button:last-child { border-right-color: var(--td-success-color); } .oneid-form__controls.oneid-form--success-border.oneid-is-success .oneid-form__controls-content .oneid-textarea__inner.oneid-is-focused { -webkit-box-shadow: 0 0 0 2px var(--td-success-color-focus); box-shadow: 0 0 0 2px var(--td-success-color-focus); } .oneid-form__controls.oneid-form--success-border.oneid-is-success .oneid-form__controls-content .oneid-cascader.oneid-is-active, .oneid-form__controls.oneid-form--success-border.oneid-is-success .oneid-form__controls-content .oneid-select.oneid-is-active { -webkit-box-shadow: 0 0 0 2px var(--td-success-color-focus); box-shadow: 0 0 0 2px var(--td-success-color-focus); } .oneid-form__controls.oneid-form--success-border.oneid-is-success .oneid-form__controls-content .oneid-form__status .oneid-icon { color: var(--td-success-color); } .oneid-form__status { display: -webkit-box; display: -ms-flexbox; display: flex; margin: 0 var(--td-comp-margin-s); } .oneid-form__status > .oneid-icon { font-size: var(--td-comp-size-xxxs); } .oneid-form__status-without-icon { width: 25px; height: 25px; } .oneid-form__status button { width: var(--td-comp-size-m); } .oneid-form__status button + button { margin-left: var(--td-comp-margin-s); } .oneid-form-inline { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; row-gap: var(--td-comp-margin-l); } .oneid-form-inline .oneid-form__item { margin: 0; min-width: 200px; display: inline-block; margin-right: var(--td-comp-margin-xxl); } .oneid-input__extra, .oneid-input__help { margin: 0; width: 100%; height: auto; min-height: var(--td-line-height-body-small); font: var(--td-font-body-small); color: var(--td-text-color-placeholder); } .oneid-input__extra { position: absolute; bottom: calc(0px - var(--td-line-height-body-small)); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .oneid-is-warning .oneid-input__extra { color: var(--td-warning-color); } .oneid-is-warning .oneid-form__controls-content .oneid-input, .oneid-is-warning .oneid-form__controls-content .oneid-select, .oneid-is-warning .oneid-form__controls-content .oneid-radio-button, .oneid-is-warning .oneid-form__controls-content .oneid-cascader, .oneid-is-warning .oneid-form__controls-content .oneid-range-input, .oneid-is-warning .oneid-form__controls-content .oneid-textarea__inner { border-color: var(--td-warning-color); } .oneid-is-warning .oneid-form__controls-content .oneid-input--focused, .oneid-is-warning .oneid-form__controls-content .oneid-select--focused, .oneid-is-warning .oneid-form__controls-content .oneid-radio-button--focused, .oneid-is-warning .oneid-form__controls-content .oneid-cascader--focused, .oneid-is-warning .oneid-form__controls-content .oneid-range-input--focused, .oneid-is-warning .oneid-form__controls-content .oneid-textarea__inner--focused { -webkit-box-shadow: 0 0 0 2px var(--td-warning-color-focus); box-shadow: 0 0 0 2px var(--td-warning-color-focus); } .oneid-is-warning .oneid-form__controls-content .oneid-input .oneid-icon, .oneid-is-warning .oneid-form__controls-content .oneid-select .oneid-icon, .oneid-is-warning .oneid-form__controls-content .oneid-radio-button .oneid-icon, .oneid-is-warning .oneid-form__controls-content .oneid-cascader .oneid-icon, .oneid-is-warning .oneid-form__controls-content .oneid-range-input .oneid-icon, .oneid-is-warning .oneid-form__controls-content .oneid-textarea__inner .oneid-icon, .oneid-is-warning .oneid-form__controls-content .oneid-input .oneid-fake-arrow, .oneid-is-warning .oneid-form__controls-content .oneid-select .oneid-fake-arrow, .oneid-is-warning .oneid-form__controls-content .oneid-radio-button .oneid-fake-arrow, .oneid-is-warning .oneid-form__controls-content .oneid-cascader .oneid-fake-arrow, .oneid-is-warning .oneid-form__controls-content .oneid-range-input .oneid-fake-arrow, .oneid-is-warning .oneid-form__controls-content .oneid-textarea__inner .oneid-fake-arrow { color: var(--td-warning-color); } .oneid-is-warning .oneid-form__controls-content .oneid-select > .oneid-select__right-icon:not(.oneid-select__right-icon-clear) { color: var(--td-warning-color); } .oneid-is-warning .oneid-form__controls-content .oneid-radio-button:last-child { border-right-color: var(--td-warning-color); } .oneid-is-warning .oneid-form__controls-content .oneid-textarea__inner.oneid-is-focused { -webkit-box-shadow: 0 0 0 2px var(--td-warning-color-focus); box-shadow: 0 0 0 2px var(--td-warning-color-focus); } .oneid-is-warning .oneid-form__controls-content .oneid-cascader.oneid-is-active, .oneid-is-warning .oneid-form__controls-content .oneid-select.oneid-is-active { -webkit-box-shadow: 0 0 0 2px var(--td-warning-color-focus); box-shadow: 0 0 0 2px var(--td-warning-color-focus); } .oneid-is-warning .oneid-form__controls-content .oneid-form__status .oneid-icon { color: var(--td-warning-color); } .oneid-is-error .oneid-input__extra { color: var(--td-error-color); } .oneid-is-error .oneid-form__controls-content .oneid-input, .oneid-is-error .oneid-form__controls-content .oneid-select, .oneid-is-error .oneid-form__controls-content .oneid-radio-button, .oneid-is-error .oneid-form__controls-content .oneid-cascader, .oneid-is-error .oneid-form__controls-content .oneid-range-input, .oneid-is-error .oneid-form__controls-content .oneid-textarea__inner { border-color: var(--td-error-color); } .oneid-is-error .oneid-form__controls-content .oneid-input--focused, .oneid-is-error .oneid-form__controls-content .oneid-select--focused, .oneid-is-error .oneid-form__controls-content .oneid-radio-button--focused, .oneid-is-error .oneid-form__controls-content .oneid-cascader--focused, .oneid-is-error .oneid-form__controls-content .oneid-range-input--focused, .oneid-is-error .oneid-form__controls-content .oneid-textarea__inner--focused { -webkit-box-shadow: 0 0 0 2px var(--td-error-color-focus); box-shadow: 0 0 0 2px var(--td-error-color-focus); } .oneid-is-error .oneid-form__controls-content .oneid-input .oneid-icon, .oneid-is-error .oneid-form__controls-content .oneid-select .oneid-icon, .oneid-is-error .oneid-form__controls-content .oneid-radio-button .oneid-icon, .oneid-is-error .oneid-form__controls-content .oneid-cascader .oneid-icon, .oneid-is-error .oneid-form__controls-content .oneid-range-input .oneid-icon, .oneid-is-error .oneid-form__controls-content .oneid-textarea__inner .oneid-icon, .oneid-is-error .oneid-form__controls-content .oneid-input .oneid-fake-arrow, .oneid-is-error .oneid-form__controls-content .oneid-select .oneid-fake-arrow, .oneid-is-error .oneid-form__controls-content .oneid-radio-button .oneid-fake-arrow, .oneid-is-error .oneid-form__controls-content .oneid-cascader .oneid-fake-arrow, .oneid-is-error .oneid-form__controls-content .oneid-range-input .oneid-fake-arrow, .oneid-is-error .oneid-form__controls-content .oneid-textarea__inner .oneid-fake-arrow { color: var(--td-error-color); } .oneid-is-error .oneid-form__controls-content .oneid-select > .oneid-select__right-icon:not(.oneid-select__right-icon-clear) { color: var(--td-error-color); } .oneid-is-error .oneid-form__controls-content .oneid-radio-button:last-child { border-right-color: var(--td-error-color); } .oneid-is-error .oneid-form__controls-content .oneid-textarea__inner.oneid-is-focused { -webkit-box-shadow: 0 0 0 2px var(--td-error-color-focus); box-shadow: 0 0 0 2px var(--td-error-color-focus); } .oneid-is-error .oneid-form__controls-content .oneid-cascader.oneid-is-active, .oneid-is-error .oneid-form__controls-content .oneid-select.oneid-is-active { -webkit-box-shadow: 0 0 0 2px var(--td-error-color-focus); box-shadow: 0 0 0 2px var(--td-error-color-focus); } .oneid-is-error .oneid-form__controls-content .oneid-form__status .oneid-icon { color: var(--td-error-color); } /** * 颜色 */ /** * 尺寸 */ /** * 字体 */ /** * 动画 */ /** * 间距 */ /** * 位置 */ /** * 边框弧度 */ .oneid-drawer-fade-enter, .oneid-drawer-fade-appear { opacity: 0; -webkit-animation-duration: 0.2s; animation-duration: 0.2s; -webkit-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-timing-function: linear; animation-timing-function: linear; -webkit-animation-play-state: paused; animation-play-state: paused; } .oneid-drawer-fade-exit { -webkit-animation-duration: 0.2s; animation-duration: 0.2s; -webkit-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-timing-function: linear; animation-timing-function: linear; -webkit-animation-play-state: paused; animation-play-state: paused; } .oneid-drawer-fade-enter.oneid-drawer-fade-enter-active, .oneid-drawer-fade-enter.oneid-drawer-fade-enter-active.oneid-drawer-fade-enter-to, .oneid-drawer-fade-appear.oneid-drawer-fade-appear-active, .oneid-drawer-fade-appear.oneid-drawer-fade-appear-active.oneid-drawer-fade-appear-to { -webkit-animation-name: tDrawerFadeIn; animation-name: tDrawerFadeIn; -webkit-animation-duration: 0.2s; animation-duration: 0.2s; -webkit-animation-play-state: running; animation-play-state: running; } .oneid-drawer-fade-exit.oneid-drawer-fade-exit-active, .oneid-drawer-fade-leave-active.oneid-drawer-fade-leave-to { -webkit-animation-name: tDrawerFadeOut; animation-name: tDrawerFadeOut; -webkit-animation-duration: 0.2s; animation-duration: 0.2s; -webkit-animation-play-state: running; animation-play-state: running; } @-webkit-keyframes tDrawerFadeIn { 0% { opacity: 0; } 100% { opacity: 1; } } @keyframes tDrawerFadeIn { 0% { opacity: 0; } 100% { opacity: 1; } } @-webkit-keyframes tDrawerFadeOut { 0% { opacity: 1; } 100% { opacity: 0; } } @keyframes tDrawerFadeOut { 0% { opacity: 1; } 100% { opacity: 0; } } .oneid-drawer { font: var(--td-font-body-medium); color: var(--td-text-color-primary); -webkit-box-sizing: border-box; box-sizing: border-box; margin: 0; padding: 0; list-style: none; position: fixed; z-index: 1500; width: 100%; height: 100%; pointer-events: none; overflow: hidden; outline: none; } .oneid-drawer--lock { overflow: hidden; } .oneid-drawer--attach { position: absolute; } .oneid-drawer--left, .oneid-drawer--right { top: 0; } .oneid-drawer--left { left: 0; } .oneid-drawer--right { right: 0; } .oneid-drawer--top, .oneid-drawer--bottom { left: 0; } .oneid-drawer--top { top: 0; } .oneid-drawer--bottom { bottom: 0; } .oneid-drawer__mask { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: var(--td-mask-active); -webkit-transition: opacity 0.2s cubic-bezier(0.38, 0, 0.24, 1); transition: opacity 0.2s cubic-bezier(0.38, 0, 0.24, 1); opacity: 0; } .oneid-drawer__content-wrapper { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; background: var(--td-bg-color-container); width: 16px; height: 16px; font-size: var(--td-font-body-medium); color: var(--td-text-color-secondary); -webkit-box-shadow: var(--td-shadow-2); box-shadow: var(--td-shadow-2); overflow: hidden; pointer-events: auto; -webkit-transition: visibility 0.28s cubic-bezier(0.38, 0, 0.24, 1), -webkit-transform 0.28s cubic-bezier(0.38, 0, 0.24, 1); transition: visibility 0.28s cubic-bezier(0.38, 0, 0.24, 1), -webkit-transform 0.28s cubic-bezier(0.38, 0, 0.24, 1); transition: transform 0.28s cubic-bezier(0.38, 0, 0.24, 1), visibility 0.28s cubic-bezier(0.38, 0, 0.24, 1); transition: transform 0.28s cubic-bezier(0.38, 0, 0.24, 1), visibility 0.28s cubic-bezier(0.38, 0, 0.24, 1), -webkit-transform 0.28s cubic-bezier(0.38, 0, 0.24, 1); position: relative; } .oneid-drawer .oneid-drawer__content-wrapper { position: absolute; width: 100%; height: 100%; visibility: hidden; } .oneid-drawer .oneid-drawer__content-wrapper--left, .oneid-drawer .oneid-drawer__content-wrapper--right { top: 0; } .oneid-drawer .oneid-drawer__content-wrapper--left { left: 0; -webkit-transform: translateX(-100%); transform: translateX(-100%); } .oneid-drawer .oneid-drawer__content-wrapper--right { right: 0; -webkit-transform: translateX(100%); transform: translateX(100%); } .oneid-drawer .oneid-drawer__content-wrapper--top, .oneid-drawer .oneid-drawer__content-wrapper--bottom { left: 0; } .oneid-drawer .oneid-drawer__content-wrapper--top { top: 0; -webkit-transform: translateY(-100%); transform: translateY(-100%); } .oneid-drawer .oneid-drawer__content-wrapper--bottom { bottom: 0; -webkit-transform: translateY(100%); transform: translateY(100%); } .oneid-drawer__header { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; min-height: var(--td-comp-size-xxxl); padding: 0 var(--td-comp-paddingLR-l); font: var(--td-font-title-medium); color: var(--td-text-color-primary); border-bottom: 1px solid var(--td-border-level-1-color); border-radius: var(--td-radius-small) var(--td-radius-small) 0 0; -webkit-box-sizing: border-box; box-sizing: border-box; } .oneid-drawer__body { padding: var(--td-comp-paddingTB-l) var(--td-comp-paddingLR-l); overflow: auto; -webkit-box-flex: 1; -ms-flex: 1; flex: 1; } .oneid-drawer__footer { width: 100%; padding: var(--td-comp-paddingTB-l) var(--td-comp-paddingLR-l); text-align: left; border-top: 1px solid var(--td-border-level-1-color); background-color: var(--td-bg-color-container); -webkit-box-sizing: border-box; box-sizing: border-box; } .oneid-drawer__footer .oneid-button { margin-left: var(--td-comp-margin-s); } .oneid-drawer__footer .oneid-button:first-child { margin-left: 0; } .oneid-drawer__close-btn { position: absolute; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; width: var(--td-comp-size-xs); height: var(--td-comp-size-xs); top: calc((var(--td-comp-size-xxxl) - var(--td-comp-size-xs)) / 2); right: var(--td-comp-margin-s); color: var(--td-text-color-primary); background-color: var(--td-bg-color-container); border-radius: var(--td-radius-default); cursor: pointer; -webkit-transition: background-color 0.2s; transition: background-color 0.2s; } .oneid-drawer__close-btn:hover { background-color: var(--td-bg-color-container-hover); } .oneid-drawer__close-btn:active { background-color: var(--td-bg-color-container-active); } .oneid-drawer__close-btn .oneid-icon { font-size: calc(var(--td-font-size-body-medium) + 2px); vertical-align: unset; } .oneid-drawer--open { width: 100%; height: 100%; pointer-events: auto; } .oneid-drawer--open > .oneid-drawer__content-wrapper { visibility: visible; } .oneid-drawer--open > .oneid-drawer__mask { opacity: 1; width: 100%; height: 100%; } .oneid-drawer--without-mask { pointer-events: none; } [tabindex="-1"]:focus { outline: none !important; /* stylelint-disable-line */ } .oneid-progress { font: var(--td-font-body-medium); color: var(--td-text-color-primary); -webkit-box-sizing: border-box; box-sizing: border-box; margin: 0; padding: 0; list-style: none; } .oneid-progress__inner { position: relative; height: 100%; background: var(--td-brand-color); border-radius: var(--td-radius-round); -webkit-transition: all 0.2s cubic-bezier(0.38, 0, 0.24, 1); transition: all 0.2s cubic-bezier(0.38, 0, 0.24, 1); } .oneid-progress__info { margin-left: var(--td-comp-margin-s); color: var(--td-text-color-primary); white-space: nowrap; display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; } .oneid-progress__icon { font-size: calc(var(--td-font-size-body-medium) + 2px); } .oneid-progress__bar { width: 100%; height: var(--td-size-3); overflow: hidden; background: var(--td-bg-color-component); border-radius: var(--td-radius-round); } .oneid-progress--thin { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .oneid-progress--plump { height: var(--td-comp-size-xxs); border-radius: calc(var(--td-comp-size-xxs) / 2); display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .oneid-progress--plump .oneid-progress__info { font-size: var(--td-font-size-body-small); } .oneid-progress--over-ten .oneid-progress__info { position: absolute; top: 50%; z-index: 10; right: var(--td-comp-margin-s); color: var(--td-text-color-anti); -webkit-transform: translateY(-50%); transform: translateY(-50%); } .oneid-progress--under-ten .oneid-progress__info, .oneid-progress--under-ten .oneid-progress__inner { display: inline-block; } .oneid-progress--under-ten .oneid-progress__info { vertical-align: top; } .oneid-progress--circle { position: relative; } .oneid-progress--circle .oneid-progress__info { position: absolute; display: block; top: 50%; left: 50%; width: 100%; margin: 0; font-size: inherit; font-weight: 600; line-height: 1; text-align: center; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } .oneid-progress--circle .oneid-progress__circle-outer { stroke: var(--td-bg-color-component); } .oneid-progress--circle .oneid-progress__circle-inner { stroke: var(--td-brand-color); -webkit-transition: all 0.2s cubic-bezier(0.38, 0, 0.24, 1); transition: all 0.2s cubic-bezier(0.38, 0, 0.24, 1); } .oneid-progress--circle .oneid-progress__icon { font-size: 2.4em; } .oneid-progress--status--active .oneid-progress__inner::before { position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 1; content: ""; -webkit-animation: progress-active-animation 2s cubic-bezier(0.23, 0.99, 0.86, 0.2) infinite; animation: progress-active-animation 2s cubic-bezier(0.23, 0.99, 0.86, 0.2) infinite; background: var(--td-text-color-anti); opacity: 0.2; } .oneid-progress--status--success .oneid-progress__inner { background: var(--td-success-color); } .oneid-progress--status--success .oneid-progress__circle-inner { stroke: var(--td-success-color); } .oneid-progress--status--success .oneid-progress__icon { color: var(--td-success-color); } .oneid-progress--status--warning .oneid-progress__inner { background: var(--td-warning-color); } .oneid-progress--status--warning .oneid-progress__circle-inner { stroke: var(--td-warning-color); } .oneid-progress--status--warning .oneid-progress__icon { color: var(--td-warning-color); } .oneid-progress--status--error .oneid-progress__inner { background: var(--td-error-color); } .oneid-progress--status--error .oneid-progress__circle-inner { stroke: var(--td-error-color); } .oneid-progress--status--error .oneid-progress__icon { color: var(--td-error-color); } @-webkit-keyframes progress-active-animation { 0% { width: 0; opacity: 0.1; } 35% { width: 50%; opacity: 0.4; } 100% { width: 100%; opacity: 0; } } @keyframes progress-active-animation { 0% { width: 0; opacity: 0.1; } 35% { width: 50%; opacity: 0.4; } 100% { width: 100%; opacity: 0; } } .oneid-popconfirm { font: var(--td-font-body-medium); color: var(--td-text-color-primary); -webkit-box-sizing: border-box; box-sizing: border-box; margin: 0; padding: 0; list-style: none; min-width: 160px; border-radius: var(--td-radius-medium); } .oneid-popconfirm .oneid-popup__content { padding: 0; } .oneid-popconfirm.oneid-popup[data-popper-placement^=top] .oneid-popup__arrow { bottom: -4px; } .oneid-popconfirm__content { position: relative; padding: var(--td-comp-paddingTB-l) var(--td-comp-paddingLR-l); border-radius: var(--td-radius-medium); } .oneid-popconfirm__body { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; text-align: left; } .oneid-popconfirm__body > .oneid-icon { display: inline-block; margin-right: var(--td-comp-margin-s); padding: calc((var(--td-line-height-body-medium) - (var(--td-font-size-body-medium) + 6px)) / 2) 0; font-size: calc(var(--td-font-size-body-medium) + 6px); } .oneid-popconfirm__confirm { margin-left: var(--td-comp-margin-s); } .oneid-popconfirm__inner { display: inline-block; vertical-align: top; max-width: 320px; font: var(--td-font-body-medium); color: var(--td-text-color-primary); } .oneid-popconfirm__icon--warning { color: var(--td-warning-color); } .oneid-popconfirm__icon--danger { color: var(--td-error-color); } .oneid-popconfirm__icon--default { color: var(--td-brand-color); } .oneid-popconfirm__buttons { text-align: right; margin-top: var(--td-comp-margin-l); } .oneid-popconfirm__buttons > span:last-child { margin-right: 0; } .oneid-textarea { font: var(--td-font-body-medium); color: var(--td-text-color-primary); -webkit-box-sizing: border-box; box-sizing: border-box; margin: 0; padding: 0; list-style: none; position: relative; width: 100%; } .oneid-textarea__inner { display: -webkit-box; display: -ms-flexbox; display: flex; width: 100%; height: var(--td-comp-size-xxxl); border: 1px solid var(--td-border-level-2-color); border-radius: var(--td-radius-default); padding: calc((var(--td-comp-size-m) - var(--td-line-height-body-medium)) / 2) var(--td-comp-paddingLR-s); background-color: var(--td-bg-color-specialcomponent); font: var(--td-font-body-medium); color: var(--td-text-color-primary); resize: vertical; outline: none; -webkit-transition: all cubic-bezier(0.38, 0, 0.24, 1) 0.2s, height 0s; transition: all cubic-bezier(0.38, 0, 0.24, 1) 0.2s, height 0s; -webkit-box-sizing: border-box; box-sizing: border-box; } .oneid-textarea__inner:hover { border-color: var(--td-brand-color); } .oneid-textarea__inner:focus { border-color: var(--td-brand-color); -webkit-box-shadow: 0 0 0 2px var(--td-brand-color-focus); box-shadow: 0 0 0 2px var(--td-brand-color-focus); } .oneid-textarea__inner::-webkit-input-placeholder { color: var(--td-text-color-placeholder); } .oneid-textarea__inner::-moz-placeholder { color: var(--td-text-color-placeholder); } .oneid-textarea__inner:-ms-input-placeholder { color: var(--td-text-color-placeholder); } .oneid-textarea__inner::-ms-input-placeholder { color: var(--td-text-color-placeholder); } .oneid-textarea__inner::placeholder { color: var(--td-text-color-placeholder); } .oneid-textarea__inner.oneid-is-success { border-color: var(--td-success-color); } .oneid-textarea__inner.oneid-is-success:focus { -webkit-box-shadow: 0 0 0 2px var(--td-success-color-focus); box-shadow: 0 0 0 2px var(--td-success-color-focus); } .oneid-textarea__inner.oneid-is-warning { border-color: var(--td-warning-color); } .oneid-textarea__inner.oneid-is-warning:focus { -webkit-box-shadow: 0 0 0 2px var(--td-warning-color-focus); box-shadow: 0 0 0 2px var(--td-warning-color-focus); } .oneid-textarea__inner.oneid-is-error { border-color: var(--td-error-color); } .oneid-textarea__inner.oneid-is-error:focus { -webkit-box-shadow: 0 0 0 2px var(--td-error-color-focus); box-shadow: 0 0 0 2px var(--td-error-color-focus); } .oneid-textarea__info_wrapper { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-column-gap: var(--td-comp-margin-s); -moz-column-gap: var(--td-comp-margin-s); column-gap: var(--td-comp-margin-s); -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } .oneid-textarea__info_wrapper_align { -webkit-box-pack: end; -ms-flex-pack: end; justify-content: end; } .oneid-textarea__limit { font: var(--td-font-body-small); color: var(--td-text-color-placeholder); } .oneid-textarea .oneid-is-disabled { color: var(--td-text-color-disabled); background-color: var(--td-bg-color-component-disabled); cursor: not-allowed; } .oneid-textarea .oneid-is-disabled:hover { border-color: var(--td-border-level-2-color); } .oneid-textarea .oneid-is-disabled::-webkit-input-placeholder { color: var(--td-text-color-disabled); } .oneid-textarea .oneid-is-disabled::-moz-placeholder { color: var(--td-text-color-disabled); } .oneid-textarea .oneid-is-disabled:-ms-input-placeholder { color: var(--td-text-color-disabled); } .oneid-textarea .oneid-is-disabled::-ms-input-placeholder { color: var(--td-text-color-disabled); } .oneid-textarea .oneid-is-disabled::placeholder { color: var(--td-text-color-disabled); } .oneid-textarea .oneid-resize-none { resize: none; } .oneid-textarea__tips { height: auto; min-height: var(--td-comp-size-xs); font: var(--td-font-body-small); display: inline-block; } .oneid-textarea__tips--normal { color: var(--td-text-color-placeholder); } .oneid-textarea__tips--success { color: var(--td-success-color); } .oneid-textarea__tips--warning { color: var(--td-warning-color); } .oneid-textarea__tips--error { color: var(--td-error-color); } @-webkit-keyframes changeColor { from { color: var(--td-brand-color-hover); } to { color: var(--td-brand-color-active); } } @keyframes changeColor { from { color: var(--td-brand-color-hover); } to { color: var(--td-brand-color-active); } } .oneid-breadcrumb { color: var(--td-text-color-primary); -webkit-box-sizing: border-box; box-sizing: border-box; margin: 0; padding: 0; list-style: none; font: var(--td-font-body-medium); display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .oneid-breadcrumb__separator { margin: 0 var(--td-comp-margin-xs); display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .oneid-breadcrumb__separator .oneid-icon { color: var(--td-text-color-placeholder); } .oneid-breadcrumb__item { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; color: var(--td-text-color-placeholder); text-decoration: none; } .oneid-breadcrumb__item.oneid-is-current { color: var(--td-text-color-primary); } .oneid-breadcrumb__item.oneid-is-current .oneid-icon { color: var(--td-text-color-placeholder); } .oneid-breadcrumb__item:last-child { color: var(--td-text-color-primary); } .oneid-breadcrumb__item:last-child .oneid-breadcrumb__separator { display: none; } .oneid-breadcrumb__item .oneid-icon { font-size: var(--td-font-size-body-large); } .oneid-breadcrumb__item .oneid-link { color: inherit; text-decoration: none; } .oneid-breadcrumb__item .oneid-link:hover { color: var(--td-brand-color); } .oneid-breadcrumb__item .oneid-is-disabled { cursor: not-allowed; } .oneid-breadcrumb__item .oneid-is-disabled .oneid-breadcrumb__inner { color: var(--td-text-color-disabled); } .oneid-breadcrumb__item .oneid-is-disabled .oneid-breadcrumb__inner:hover { color: var(--td-text-color-disabled); cursor: not-allowed; } .oneid-breadcrumb__item .oneid-is-disabled .oneid-breadcrumb__inner:active { -webkit-animation: none; animation: none; } .oneid-breadcrumb__item--arrow { margin: 0 var(--td-comp-margin-xs); line-height: 0; color: var(--td-text-color-placeholder); display: inline-block; vertical-align: middle; } .oneid-breadcrumb__item--slash { margin: 0 var(--td-comp-margin-xs); line-height: 0; color: var(--td-text-color-placeholder); display: inline-block; vertical-align: middle; } .oneid-breadcrumb__inner { font: var(--td-font-body-medium); word-break: break-all; display: inline-block; vertical-align: middle; } .oneid-breadcrumb__inner .oneid-icon { margin: 0 var(--td-comp-margin-xs); } .oneid-breadcrumb__select { position: relative; } .oneid-breadcrumb__select:hover .oneid-breadcrumb__option { display: block; } .oneid-breadcrumb__select-item:hover .oneid-icon { color: var(--td-brand-color); } .oneid-breadcrumb__option { display: none; position: absolute; top: 28px; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); max-width: 120px; background: var(--td-bg-color-container); -webkit-box-shadow: var(--td-shadow-2); box-shadow: var(--td-shadow-2); z-index: 20; } .oneid-breadcrumb__option-item { padding: 8px; font: var(--td-font-body-medium); color: var(--td-text-color-primary); text-overflow: ellipsis; overflow: hidden; white-space: nowrap; } .oneid-breadcrumb__option-item:hover { color: var(--td-brand-color); } .oneid-breadcrumb__option-item.oneid-is-active { color: var(--td-brand-color); } .oneid-breadcrumb__inner-msg { display: none; position: absolute; left: 50%; bottom: 30px; -webkit-transform: translateX(-50%); transform: translateX(-50%); width: 300px; padding: 8px; color: var(--td-text-color-primary); background: var(--td-bg-color-container); border-radius: calc(var(--td-radius-default) * 0.5); -webkit-box-shadow: var(--td-shadow-2); box-shadow: var(--td-shadow-2); z-index: 20; } .oneid-breadcrumb__inner-msg::before { content: ""; position: absolute; bottom: -8px; left: 50%; margin-left: -4px; width: 0; height: 0; border-style: solid; border-width: 8px 6px 0; border-color: var(--td-bg-color-container) transparent transparent transparent; z-index: 20; } .oneid-breadcrumb--text-overflow { position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .oneid-breadcrumb--text-overflow:hover .oneid-breadcrumb__inner-msg { display: block; } .oneid-breadcrumb--text-overflow .oneid-breadcrumb__inner { max-width: 120px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-transition: color 0.2s linear; transition: color 0.2s linear; } .oneid-breadcrumb--text-overflow .oneid-breadcrumb__inner-text { text-overflow: ellipsis; overflow: hidden; white-space: nowrap; } .oneid-breadcrumb--text-overflow .oneid-breadcrumb__inner:hover { color: var(--td-brand-color); cursor: pointer; } .oneid-breadcrumb--text-overflow .oneid-breadcrumb__inner:active { -webkit-animation: 0.2s linear changeColor; animation: 0.2s linear changeColor; } .oneid-dropdown { font: var(--td-font-body-medium); -webkit-box-sizing: border-box; box-sizing: border-box; margin: 0; padding: 0; list-style: none; background-color: var(--td-bg-color-container); font-size: var(--td-font-size-body-medium); color: var(--td-text-color-primary); position: relative; -webkit-box-shadow: var(--td-shadow-2); box-shadow: var(--td-shadow-2); border: 0.5px solid var(--td-component-border); border-radius: var(--td-radius-medium); } .oneid-dropdown__menu { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; border-radius: var(--td-radius-medium); padding: var(--td-pop-padding-m); gap: 2px; overflow-y: auto; overflow-x: hidden; } @-moz-document url-prefix() { .oneid-dropdown__menu { scrollbar-color: var(--td-scrollbar-color) transparent; scrollbar-width: thin; } } .oneid-dropdown__menu::-webkit-scrollbar { width: 8px; height: 8px; } .oneid-dropdown__menu::-webkit-scrollbar-thumb { border: 2px solid transparent; background-clip: content-box; background-color: var(--td-scrollbar-color); border-radius: 15px; } .oneid-dropdown__menu::-webkit-scrollbar-thumb:vertical:hover, .oneid-dropdown__menu::-webkit-scrollbar-thumb:horizontal:hover { background-color: var(--td-scrollbar-hover-color); } .oneid-dropdown__menu .oneid-divider { margin: var(--td-comp-margin-xs) var(--td-comp-margin-s) var(--td-comp-margin-xxs) var(--td-comp-margin-s); color: var(--td-brand-color-light); width: calc(100% - var(--td-comp-margin-s) * 2); } .oneid-dropdown__menu .oneid-dropdown__item-direction { margin: 0 0 0 var(--td-comp-margin-s); } .oneid-dropdown__menu--overflow .oneid-dropdown__submenu-wrapper--right { left: calc(100% - 14px); } .oneid-dropdown__menu--overflow .oneid-dropdown__submenu-wrapper--left { right: calc(100% - 14px); } .oneid-dropdown__submenu { background-color: var(--td-bg-color-container); -webkit-box-shadow: var(--td-shadow-2); box-shadow: var(--td-shadow-2); border-radius: var(--td-radius-medium); border: 0.5px solid var(--td-component-border); z-index: 1100; position: absolute; padding: var(--td-pop-padding-m); display: none; overflow-y: auto; overflow-x: visible; } @-moz-document url-prefix() { .oneid-dropdown__submenu { scrollbar-color: var(--td-scrollbar-color) transparent; scrollbar-width: thin; } } .oneid-dropdown__submenu::-webkit-scrollbar { width: 8px; height: 8px; } .oneid-dropdown__submenu::-webkit-scrollbar-thumb { border: 2px solid transparent; background-clip: content-box; background-color: var(--td-scrollbar-color); border-radius: 15px; } .oneid-dropdown__submenu::-webkit-scrollbar-thumb:vertical:hover, .oneid-dropdown__submenu::-webkit-scrollbar-thumb:horizontal:hover { background-color: var(--td-scrollbar-hover-color); } .oneid-dropdown__submenu ul { list-style: none; display: grid; padding-left: 0; gap: 2px; } .oneid-dropdown__submenu--disabled { visibility: hidden; } .oneid-dropdown__submenu .oneid-dropdown__item-direction { margin: 0 0 0 var(--td-comp-margin-s); } .oneid-dropdown__submenu-wrapper--right { left: calc(100% - 6px); } .oneid-dropdown__submenu-wrapper--left { right: calc(100% - 6px); } .oneid-dropdown__item { border-radius: var(--td-radius-default); font: var(--td-font-body-medium); cursor: pointer; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; outline: none; -webkit-transition: background-color 0.2s cubic-bezier(0.82, 0, 1, 0.9); transition: background-color 0.2s cubic-bezier(0.82, 0, 1, 0.9); white-space: nowrap; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; padding: calc(var(--td-comp-paddingTB-xs) - 1px) var(--td-comp-paddingLR-s); --ripple-color: var(--td-bg-color-container-active); } .oneid-dropdown__item-icon { display: -webkit-box; display: -ms-flexbox; display: flex; color: currentcolor; margin-right: var(--td-comp-margin-s); font-size: var(--td-font-size-body-large); } .oneid-dropdown__item:hover > div > div { display: -webkit-box; display: -ms-flexbox; display: flex; } .oneid-dropdown__item--disabled { cursor: not-allowed; } .oneid-dropdown__item-content { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-flex: 1; -ms-flex: 1; flex: 1; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; max-width: 100%; } .oneid-dropdown__item-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; -webkit-box-flex: 1; -ms-flex: 1; flex: 1; } .oneid-dropdown__item.oneid-dropdown__item--suffix .oneid-dropdown__item-sub-icon { color: currentcolor; font-size: var(--td-font-size-body-large); -ms-flex-negative: 0; flex-shrink: 0; } .oneid-dropdown__item--theme-default { color: var(--td-text-color-primary); } .oneid-dropdown__item--theme-default:hover { background-color: var(--td-bg-color-container-hover); } .oneid-dropdown__item--theme-default:active { background-color: var(--td-bg-color-container-active); } .oneid-dropdown__item--theme-default.oneid-dropdown__item--active { color: var(--td-brand-color); background-color: var(--td-brand-color-light); } .oneid-dropdown__item--theme-default.oneid-dropdown__item--active:hover { background-color: var(--td-bg-color-container-hover); } .oneid-dropdown__item--theme-default.oneid-dropdown__item--active:active { background-color: var(--td-bg-color-container-active); } .oneid-dropdown__item--theme-default.oneid-dropdown__item--disabled { color: var(--td-text-color-disabled); } .oneid-dropdown__item--theme-default.oneid-dropdown__item--disabled:hover { background-color: var(--td-bg-color-container-hover); } .oneid-dropdown__item--theme-default.oneid-dropdown__item--suffix:hover { background-color: var(--td-brand-color-light); color: var(--td-brand-color); } .oneid-dropdown__item--theme-success { color: var(--td-success-color); } .oneid-dropdown__item--theme-success:hover { background-color: var(--td-bg-color-container-hover); } .oneid-dropdown__item--theme-success:active { background-color: var(--td-bg-color-container-active); } .oneid-dropdown__item--theme-success.oneid-dropdown__item--active { background-color: var(--td-success-color-light); } .oneid-dropdown__item--theme-success.oneid-dropdown__item--active:hover { background-color: var(--td-bg-color-container-hover); } .oneid-dropdown__item--theme-success.oneid-dropdown__item--active:active { background-color: var(--td-bg-color-container-active); } .oneid-dropdown__item--theme-success.oneid-dropdown__item-disabled { color: var(--td-text-color-disabled); } .oneid-dropdown__item--theme-success.oneid-dropdown__item-disabled:hover { background-color: var(--td-bg-color-container-hover); } .oneid-dropdown__item--theme-success.oneid-dropdown__item--suffix:hover { background-color: var(--td-success-color-light); } .oneid-dropdown__item--theme-error { color: var(--td-error-color); } .oneid-dropdown__item--theme-error:hover { background-color: var(--td-bg-color-container-hover); } .oneid-dropdown__item--theme-error:active { background-color: var(--td-bg-color-container-active); } .oneid-dropdown__item--theme-error.oneid-dropdown__item--active { background-color: var(--td-error-color-light); } .oneid-dropdown__item--theme-error.oneid-dropdown__item--active:hover { background-color: var(--td-bg-color-container-hover); } .oneid-dropdown__item--theme-error.oneid-dropdown__item--active:active { background-color: var(--td-bg-color-container-active); } .oneid-dropdown__item--theme-error.oneid-dropdown__item--disabled { color: var(--td-text-color-disabled); } .oneid-dropdown__item--theme-error.oneid-dropdown__item--disabled:hover { background-color: var(--td-bg-color-container-hover); } .oneid-dropdown__item--theme-error.oneid-dropdown__item--suffix:hover { background-color: var(--td-error-color-light); } .oneid-dropdown__item--theme-warning { color: var(--td-warning-color); } .oneid-dropdown__item--theme-warning:hover { background-color: var(--td-bg-color-container-hover); } .oneid-dropdown__item--theme-warning:active { background-color: var(--td-bg-color-container-active); } .oneid-dropdown__item--theme-warning.oneid-dropdown__item--active { background-color: var(--td-warning-color-light); } .oneid-dropdown__item--theme-warning.oneid-dropdown__item--active:hover { background-color: var(--td-bg-color-container-hover); } .oneid-dropdown__item--theme-warning.oneid-dropdown__item--active:active { background-color: var(--td-bg-color-container-active); } .oneid-dropdown__item--theme-warning.oneid-dropdown__item--disabled { color: var(--td-text-color-disabled); } .oneid-dropdown__item--theme-warning.oneid-dropdown__item--disabled:hover { background-color: var(--td-bg-color-container-hover); } .oneid-dropdown__item--theme-warning.oneid-dropdown__item--suffix:hover { background-color: var(--td-warning-color-light); } .oneid-slider__input-container { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; margin-left: var(--td-comp-margin-xxl); } .oneid-slider__input-container.is-vertical { padding-top: var(--td-comp-paddingTB-l); margin-left: 0px; } .oneid-slider__input-container .oneid-slider__center-line { width: var(--td-size-4); height: 1px; background: rgba(0, 0, 0, 0.9); margin: 0 var(--td-comp-margin-s); } .oneid-slider { font: var(--td-font-body-medium); color: var(--td-text-color-primary); -webkit-box-sizing: border-box; box-sizing: border-box; margin: 0; padding: 0; list-style: none; height: calc(var(--td-comp-paddingTB-xs) * 2 + var(--td-size-2)); width: 100%; position: relative; padding: var(--td-comp-paddingTB-xs) 0; } .oneid-slider__container { width: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .oneid-slider__container.is-vertical { height: 100%; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } .oneid-slider__rail { position: absolute; width: 100%; height: var(--td-size-2); background-color: var(--td-bg-color-secondarycomponent); -webkit-transition: 0.2s linear; transition: 0.2s linear; border-radius: var(--td-radius-round); } .oneid-slider__rail:hover { background-color: var(--td-bg-color-secondarycomponent-hover); } .oneid-slider__track { position: absolute; height: var(--td-size-2); background-color: var(--td-brand-color); right: auto; border-radius: var(--td-radius-round); } .oneid-slider__step { position: absolute; width: 100%; height: var(--td-size-2); cursor: pointer; } .oneid-slider__button { width: var(--td-comp-size-xxxs); height: var(--td-comp-size-xxxs); border: 2px solid var(--td-brand-color); background-color: #fff; border-radius: var(--td-radius-circle); -webkit-transition: 0.2s; transition: 0.2s; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -webkit-box-sizing: border-box; box-sizing: border-box; -webkit-box-shadow: var(--td-shadow-1); box-shadow: var(--td-shadow-1); } .oneid-slider__button--dragging { -webkit-box-shadow: 0 0 0px 2px var(--td-brand-color-focus); box-shadow: 0 0 0px 2px var(--td-brand-color-focus); } .oneid-slider__button:hover { background-color: var(--td-gray-color-1); } .oneid-slider__button-wrapper { position: absolute; z-index: 2; top: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); background-color: transparent; text-align: center; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; line-height: normal; outline: none; cursor: pointer; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .oneid-slider__stop { position: absolute; width: 1px; height: var(--td-size-2); background-color: var(--td-bg-color-secondarycomponent); top: 4px; } .oneid-slider__mark { position: absolute; top: 2px; left: 0; width: 100%; } .oneid-slider__mark-text { position: absolute; display: inline-block; font: var(--td-font-body-small); color: var(--td-text-color-primary); top: calc(var(--td-size-2) + var(--td-comp-paddingTB-xs) + 2px); -webkit-transform: translateX(-50%); transform: translateX(-50%); cursor: pointer; } .oneid-slider__mark-text:first-child { -webkit-transform: translateX(0%); transform: translateX(0%); } .oneid-slider__mark-text:last-child { -webkit-transform: translateX(-100%); transform: translateX(-100%); } .oneid-slider--vertical { height: 100%; padding: 0; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; position: relative; } .oneid-slider--vertical .oneid-slider__rail { width: var(--td-size-2); height: 100%; } .oneid-slider--vertical .oneid-slider__track { width: var(--td-size-2); top: auto; } .oneid-slider--vertical .oneid-slider__step { width: var(--td-size-2); height: 100%; } .oneid-slider--vertical .oneid-slider__handle { margin-top: -6px; margin-left: -5px; top: auto; -webkit-transform: translateY(50%); transform: translateY(50%); } .oneid-slider--vertical .oneid-slider__mark { top: 0; left: 12px; width: 18px; height: 100%; } .oneid-slider--vertical .oneid-slider__stop { width: var(--td-size-2); height: 1px; left: 4px; background-color: var(--td-bg-color-secondarycomponent); } .oneid-slider--vertical .oneid-slider__mark-text { -webkit-transform: translateY(-50%); transform: translateY(-50%); margin-top: 0; margin-left: var(--td-comp-margin-xxs); } .oneid-slider--vertical .oneid-slider__button-wrapper { top: auto; position: absolute; z-index: 2; left: 50%; -webkit-transform: translate(-50%, 50%); transform: translate(-50%, 50%); background-color: transparent; text-align: center; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; line-height: normal; outline: none; cursor: pointer; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .oneid-is-disabled { cursor: not-allowed; } .oneid-is-disabled .oneid-slider__track { background-color: var(--td-brand-color-disabled); } .oneid-is-disabled .oneid-slider__rail { background-color: var(--td-bg-color-component-disabled); } .oneid-is-disabled .oneid-slider__handle { border: 2px solid var(--td-brand-color-disabled); } .oneid-is-disabled .oneid-slider__button { border-color: var(--td-brand-color-disabled); outline: none; } .oneid-is-disabled .oneid-slider__mark-text { color: var(--td-text-color-disabled); cursor: not-allowed; } .oneid-is-disabled .oneid-slider__button-wrapper { cursor: not-allowed; } .oneid-select-option__highlight-item .oneid-is-highlight { color: var(--td-brand-color); } .oneid-auto-complete { width: 100%; } .oneid-auto-complete .oneid-input__suffix-clear { display: none; } .oneid-auto-complete:hover .oneid-input__suffix-clear { display: inline-block; } .oneid-auto-complete__panel--empty { height: var(--td-comp-size-m); line-height: var(--td-comp-size-m); color: var(--td-text-color-disabled); text-align: center; } .oneid-cascader .oneid-fake-arrow { color: var(--td-text-color-placeholder); } .oneid-cascader .oneid-fake-arrow--active { color: var(--td-brand-color); } .oneid-cascader__popup .oneid-popup__content { padding: 0; -webkit-box-shadow: var(--td-shadow-2); box-shadow: var(--td-shadow-2); border-radius: var(--td-radius-medium); border: 0.5px solid var(--td-component-border); overflow: hidden; } .oneid-cascader__panel { display: -webkit-box; display: -ms-flexbox; display: flex; height: 100%; } .oneid-cascader__panel.oneid-cascader--normal { height: 200px; } .oneid-cascader__panel.oneid-cascader--multiple { height: 280px; } .oneid-cascader__panel--empty { width: 100%; height: var(--td-comp-size-s); line-height: var(--td-comp-size-s); color: var(--td-text-color-disabled); margin: var(--td-pop-padding-m); text-align: center; padding-left: 0; } .oneid-cascader__panel--empty:hover { background: none; cursor: default; } .oneid-cascader__menu { width: 148px; overflow: auto; -webkit-box-sizing: content-box; box-sizing: content-box; padding: var(--td-pop-padding-m); background: var(--td-bg-color-container); } .oneid-cascader__menu.oneid-size-l { padding: var(--td-pop-padding-l); } .oneid-cascader__menu.oneid-size-s { padding: var(--td-pop-padding-s); } .oneid-cascader__menu--segment { border-right: 1px solid var(--td-component-stroke); } .oneid-cascader__menu--filter { width: auto; min-width: 148px; } .oneid-cascader__item { position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; height: var(--td-comp-size-s); font: var(--td-font-body-medium); color: var(--td-text-color-primary); padding: 0 var(--td-comp-paddingLR-s); border-radius: var(--td-radius-default); margin-top: var(--td-comp-margin-xxs); -webkit-transition: background-color 0.2s cubic-bezier(0.82, 0, 1, 0.9); transition: background-color 0.2s cubic-bezier(0.82, 0, 1, 0.9); list-style: none; --ripple-color: var(--td-bg-color-container-active); } .oneid-cascader__item.oneid-size-s { height: var(--td-comp-size-xs); font: var(--td-font-body-small); padding: 0px var(--td-comp-paddingLR-s); } .oneid-cascader__item.oneid-size-l { height: var(--td-comp-size-m); font: var(--td-font-body-large); padding: 0 var(--td-comp-paddingLR-m); } .oneid-cascader__item.oneid-is-disabled { color: var(--td-text-color-disabled); background-color: transparent; cursor: not-allowed; } .oneid-cascader__item-icon.oneid-icon { position: absolute; height: 100%; right: 0; top: 0; background: transparent; margin: 0 8px; font-size: 16px; color: var(--td-text-color-placeholder); } .oneid-cascader__item-icon.oneid-loading { display: -webkit-box; display: -ms-flexbox; display: flex; color: var(--td-text-color-brand); } .oneid-cascader__item.oneid-is-expanded { background: var(--td-brand-color-light); color: var(--td-text-color-brand); } .oneid-cascader__item.oneid-is-expanded .oneid-icon-chevron-right { color: var(--td-text-color-brand); } .oneid-cascader__item.oneid-is-expanded:hover { cursor: pointer; } .oneid-cascader__item:first-child { margin-top: 0; } .oneid-cascader__item .oneid-checkbox { max-width: 100%; } .oneid-cascader__item .oneid-checkbox .oneid-checkbox__input { -ms-flex-negative: 0; flex-shrink: 0; } .oneid-cascader__item .oneid-checkbox .oneid-checkbox__label { display: block; white-space: nowrap; word-wrap: normal; overflow: hidden; text-overflow: ellipsis; } .oneid-cascader__item .oneid-checkbox .oneid-checkbox__label .oneid-cascader__item__label--filter { color: var(--td-text-color-brand); } .oneid-cascader__item--with-icon { padding: 0 calc(var(--td-comp-paddingLR-s) + 14px) 0 var(--td-comp-paddingLR-s); } .oneid-cascader__item--leaf .oneid-checkbox { width: 100%; } .oneid-cascader__item-label { display: block; position: relative; white-space: nowrap; padding: 0; } .oneid-cascader__item-label--ellipsis { white-space: nowrap; word-wrap: normal; overflow: hidden; text-overflow: ellipsis; } .oneid-cascader__item-label--filter { color: var(--td-text-color-brand); } .oneid-cascader__item:hover:not(.oneid-is-expanded):not(.oneid-is-disabled) { background: var(--td-bg-color-container-hover); cursor: pointer; } .oneid-cascader__item.oneid-is-selected { color: var(--td-brand-color); background: var(--td-brand-color-light); } .oneid-cascader__item.oneid-is-selected .oneid-checkbox__label { color: var(--td-brand-color); } .oneid-date-picker, .oneid-date-range-picker { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; font: var(--td-font-body-medium); color: var(--td-text-color-primary); -webkit-box-sizing: border-box; box-sizing: border-box; margin: 0; padding: 0; list-style: none; } .oneid-date-picker__header-controller-month-popup > .oneid-popup__content, .oneid-date-picker__header-controller-year-popup > .oneid-popup__content { max-height: 160px; } .oneid-date-picker__panel-container > .oneid-popup__content, .oneid-date-range-picker__panel-container > .oneid-popup__content { padding: 0; min-width: 280px; } .oneid-date-picker__panel, .oneid-date-range-picker__panel { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } .oneid-date-picker__panel--direction-row, .oneid-date-range-picker__panel--direction-row { -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; } .oneid-date-picker__panel .oneid-time-picker__panel, .oneid-date-range-picker__panel .oneid-time-picker__panel { width: 216px; } .oneid-date-picker__panel .oneid-time-picker__panel-section-body, .oneid-date-range-picker__panel .oneid-time-picker__panel-section-body { padding: 0; } .oneid-date-picker__panel .oneid-time-picker__panel-body, .oneid-date-range-picker__panel .oneid-time-picker__panel-body { margin: 0; } .oneid-date-picker__panel-content, .oneid-date-range-picker__panel-content, .oneid-date-range-picker__panel-content-wrapper { display: -webkit-box; display: -ms-flexbox; display: flex; } .oneid-date-picker__header { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; gap: var(--td-comp-margin-m); width: 100%; } .oneid-date-picker__header-controller { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; gap: var(--td-comp-margin-s); } .oneid-date-picker__header-controller .oneid-date-picker__header-controller-month { width: 80px; display: -webkit-box; display: -ms-flexbox; display: flex; } .oneid-date-picker__header-controller .oneid-date-picker__header-controller-year { width: 78px; display: -webkit-box; display: -ms-flexbox; display: flex; } .oneid-date-picker__table table { width: 100%; border-collapse: collapse; } .oneid-date-picker__table table th { text-align: center; color: var(--td-text-color-secondary); font-weight: 400; } .oneid-date-picker__table table td.oneid-date-picker__cell { text-align: center; font-weight: 500; } .oneid-date-picker__table table th, .oneid-date-picker__table table th.oneid-date-picker__table-header-cell, .oneid-date-picker__table table td.oneid-date-picker__cell { padding: 0; border: 0; line-height: var(--td-line-height-body-medium); } .oneid-date-picker__table table thead::after { content: "-"; display: block; line-height: var(--td-comp-margin-xs); color: transparent; } .oneid-date-picker__table table thead::before { content: "-"; display: block; line-height: var(--td-comp-margin-xs); color: transparent; } .oneid-date-picker__table-week-row { cursor: pointer; position: -webkit-sticky; position: sticky; } .oneid-date-picker__table-week-row .oneid-date-picker__cell:first-child .oneid-date-picker__cell-inner { color: var(--td-text-color-disabled); } .oneid-date-picker__table-week-row .oneid-date-picker__cell:hover .oneid-date-picker__cell-inner { -webkit-box-shadow: none; box-shadow: none; background: none; } .oneid-date-picker__table-week-row::after { content: ""; position: absolute; left: var(--td-comp-margin-xxxl); right: 0; top: calc(var(--td-comp-margin-xs) - 1px); z-index: 10; height: var(--td-comp-size-xs); border-radius: var(--td-radius-default); -webkit-transition: background-color 0.2s linear, border-color 0.2s linear, color 0.2s linear, -webkit-box-shadow 0.2s cubic-bezier(0.38, 0, 0.24, 1); transition: background-color 0.2s linear, border-color 0.2s linear, color 0.2s linear, -webkit-box-shadow 0.2s cubic-bezier(0.38, 0, 0.24, 1); transition: box-shadow 0.2s cubic-bezier(0.38, 0, 0.24, 1), background-color 0.2s linear, border-color 0.2s linear, color 0.2s linear; transition: box-shadow 0.2s cubic-bezier(0.38, 0, 0.24, 1), background-color 0.2s linear, border-color 0.2s linear, color 0.2s linear, -webkit-box-shadow 0.2s cubic-bezier(0.38, 0, 0.24, 1); pointer-events: none; } .oneid-date-picker__table-week-row:hover .oneid-date-picker__cell:first-child .oneid-date-picker__cell-inner { color: var(--td-brand-color); } .oneid-date-picker__table-week-row:hover::after { -webkit-box-shadow: inset 0 0 0 1px var(--td-brand-color); box-shadow: inset 0 0 0 1px var(--td-brand-color); } .oneid-date-picker__table-week-row--active::after { opacity: 1; z-index: 0; background-color: var(--td-brand-color); } .oneid-date-picker__table-week-row--active .oneid-date-picker__cell:first-child .oneid-date-picker__cell-inner { color: var(--td-brand-color); } .oneid-date-picker__table-week-row--active .oneid-date-picker__cell .oneid-date-picker__cell-inner { background: transparent; color: var(--td-text-color-anti); } .oneid-date-picker__table-week-row--range::after { opacity: 1; z-index: 0; background-color: var(--td-brand-color-light); } .oneid-date-picker__table-week-row--range .oneid-date-picker__cell .oneid-date-picker__cell-inner { background: transparent; } .oneid-date-picker__footer { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; padding: var(--td-pop-padding-xl); gap: var(--td-comp-margin-s); } .oneid-date-picker__footer--bottom { border-top: 1px solid var(--td-component-stroke); } .oneid-date-picker__footer--top { border-bottom: 1px solid var(--td-component-stroke); } .oneid-date-picker__footer--left { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; border-right: 1px solid var(--td-component-stroke); } .oneid-date-picker__footer--left .oneid-date-picker__presets { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } .oneid-date-picker__footer--right { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; border-left: 1px solid var(--td-component-stroke); } .oneid-date-picker__footer--right .oneid-date-picker__presets { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } .oneid-date-picker__presets { display: -webkit-box; display: -ms-flexbox; display: flex; gap: var(--td-comp-margin-s); white-space: nowrap; min-width: var(--td-comp-size-xl); } .oneid-date-picker__presets .oneid-button { cursor: pointer; } .oneid-date-picker__presets a { color: var(--td-brand-color); } .oneid-date-picker__presets a:hover { color: var(--td-brand-color-hover); } .oneid-date-picker__panel-time, .oneid-date-range-picker__panel-time { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; gap: calc(var(--td-comp-margin-m) / 2); padding: var(--td-pop-padding-xl) calc(var(--td-pop-padding-xl) - var(--td-comp-margin-xs)); border-left: 1px solid var(--td-component-stroke); } .oneid-date-picker__panel-time-viewer, .oneid-date-range-picker__panel-time-viewer { display: -webkit-box; display: -ms-flexbox; display: flex; height: var(--td-comp-size-m); line-height: var(--td-line-height-body-medium); -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; color: var(--td-text-color-primary); } .oneid-date-picker__panel-time .oneid-time-picker__panel-body, .oneid-date-range-picker__panel-time .oneid-time-picker__panel-body { margin: 0; } .oneid-date-picker__panel-year, .oneid-date-picker__panel-month, .oneid-date-picker__panel-quarter, .oneid-date-picker__panel-week, .oneid-date-picker__panel-date { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; padding: var(--td-pop-padding-xl); gap: var(--td-comp-margin-m); width: 280px; -webkit-box-sizing: border-box; box-sizing: border-box; } .oneid-date-picker__panel-year .oneid-date-picker__cell--hover-highlight + .oneid-date-picker__cell--hover-highlight::before, .oneid-date-picker__panel-month .oneid-date-picker__cell--hover-highlight + .oneid-date-picker__cell--hover-highlight::before, .oneid-date-picker__panel-year .oneid-date-picker__cell--hover-highlight + .oneid-date-picker__cell--hover-highlight::after, .oneid-date-picker__panel-month .oneid-date-picker__cell--hover-highlight + .oneid-date-picker__cell--hover-highlight::after { opacity: 1; left: calc(0px - (var(--td-comp-size-xs) + var(--td-comp-margin-xxl))); } .oneid-date-picker__panel-year .oneid-date-picker__cell--hover-highlight + .oneid-date-picker__cell--active::after, .oneid-date-picker__panel-month .oneid-date-picker__cell--hover-highlight + .oneid-date-picker__cell--active::after { opacity: 1; left: calc(0px - (var(--td-comp-size-xs) + var(--td-comp-margin-xxl))); z-index: 5; } .oneid-date-picker__panel-year .oneid-date-picker__cell--highlight + .oneid-date-picker__cell--highlight::before, .oneid-date-picker__panel-month .oneid-date-picker__cell--highlight + .oneid-date-picker__cell--highlight::before { left: calc(0px - (var(--td-comp-size-xs) + var(--td-comp-margin-xxl))); } .oneid-date-picker__panel-year .oneid-date-picker__header-controller-year, .oneid-date-picker__panel-month .oneid-date-picker__header-controller-year, .oneid-date-picker__panel-quarter .oneid-date-picker__header-controller-year { width: 130px; display: -webkit-box; display: -ms-flexbox; display: flex; } .oneid-date-picker__panel-year .oneid-date-picker__table table tbody, .oneid-date-picker__panel-month .oneid-date-picker__table table tbody, .oneid-date-picker__panel-quarter .oneid-date-picker__table table tbody { width: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; gap: var(--td-comp-margin-m); -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } .oneid-date-picker__panel-year .oneid-date-picker__table table tbody tr, .oneid-date-picker__panel-month .oneid-date-picker__table table tbody tr, .oneid-date-picker__panel-quarter .oneid-date-picker__table table tbody tr { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } .oneid-date-picker__panel-year .oneid-date-picker__cell--disabled + .oneid-date-picker__cell--disabled:before, .oneid-date-picker__panel-month .oneid-date-picker__cell--disabled + .oneid-date-picker__cell--disabled:before, .oneid-date-picker__panel-quarter .oneid-date-picker__cell--disabled + .oneid-date-picker__cell--disabled:before { left: calc(0px - var(--td-comp-size-xxxl)); } .oneid-date-picker__panel-year .oneid-date-picker__cell:nth-child(1), .oneid-date-picker__panel-month .oneid-date-picker__cell:nth-child(1), .oneid-date-picker__panel-quarter .oneid-date-picker__cell:nth-child(1) { text-align: left; } .oneid-date-picker__panel-year .oneid-date-picker__cell:nth-child(3), .oneid-date-picker__panel-month .oneid-date-picker__cell:nth-child(3), .oneid-date-picker__panel-quarter .oneid-date-picker__cell:nth-child(3) { text-align: right; } .oneid-date-picker__panel-year .oneid-date-picker__cell-inner, .oneid-date-picker__panel-month .oneid-date-picker__cell-inner, .oneid-date-picker__panel-quarter .oneid-date-picker__cell-inner { width: var(--td-comp-size-xxl); } .oneid-date-picker__cell { cursor: pointer; position: relative; padding: 0; } .oneid-date-picker__cell::before, .oneid-date-picker__cell::after { content: ""; position: absolute; top: 50%; right: -5%; left: -5%; z-index: 1; opacity: 0; border-radius: var(--td-radius-default); height: var(--td-comp-size-xs); -webkit-transform: translateY(-50%); transform: translateY(-50%); -webkit-transition: opacity 0.2s cubic-bezier(0, 0, 0.15, 1); transition: opacity 0.2s cubic-bezier(0, 0, 0.15, 1); } .oneid-date-picker__cell:hover .oneid-date-picker__cell-inner { -webkit-box-shadow: inset 0 0 0 1px var(--td-brand-color); box-shadow: inset 0 0 0 1px var(--td-brand-color); } .oneid-date-picker__cell-inner { position: relative; z-index: 5; display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; width: var(--td-comp-size-xs); height: var(--td-comp-size-xs); margin: calc(var(--td-comp-margin-xs) - 1px); border-radius: var(--td-radius-default); -webkit-transition: background-color 0.2s linear, border-color 0.2s linear, color 0.2s linear, -webkit-box-shadow 0.2s cubic-bezier(0.38, 0, 0.24, 1); transition: background-color 0.2s linear, border-color 0.2s linear, color 0.2s linear, -webkit-box-shadow 0.2s cubic-bezier(0.38, 0, 0.24, 1); transition: box-shadow 0.2s cubic-bezier(0.38, 0, 0.24, 1), background-color 0.2s linear, border-color 0.2s linear, color 0.2s linear; transition: box-shadow 0.2s cubic-bezier(0.38, 0, 0.24, 1), background-color 0.2s linear, border-color 0.2s linear, color 0.2s linear, -webkit-box-shadow 0.2s cubic-bezier(0.38, 0, 0.24, 1); } .oneid-date-picker__cell--now .oneid-date-picker__cell-inner { color: var(--td-brand-color); background: var(--td-brand-color-light); } .oneid-date-picker__cell--hover-highlight::after { opacity: 1; background-color: var(--td-brand-color-light); } .oneid-date-picker__cell--highlight::before { opacity: 1; background-color: var(--td-brand-color-light); } .oneid-date-picker__cell--highlight.oneid-date-picker__cell--hover-highlight::after { opacity: 1; background-color: rgba(0, 0, 0, 0.06); } .oneid-date-picker__cell--additional:hover .oneid-date-picker__cell-inner { -webkit-box-shadow: none; box-shadow: none; border-color: var(--td-bg-color-container-hover); background-color: var(--td-bg-color-container-hover); } .oneid-date-picker__cell--additional .oneid-date-picker__cell-inner { color: var(--td-text-color-disabled); } .oneid-date-picker__cell--active .oneid-date-picker__cell-inner { color: var(--td-text-color-anti); background-color: var(--td-brand-color); } .oneid-date-picker__cell--active-start::before { opacity: 1; left: calc((var(--td-comp-margin-xs) - 1px) * 2); border-top-left-radius: var(--td-radius-default); border-bottom-left-radius: var(--td-radius-default); } .oneid-date-picker__cell--active-start:hover::before { left: -5%; } .oneid-date-picker__cell--active-end::before { opacity: 1; right: calc((var(--td-comp-margin-xs) - 1px) * 2); border-top-right-radius: var(--td-radius-default); border-bottom-right-radius: var(--td-radius-default); } .oneid-date-picker__cell--active-end:hover::before { right: -5%; } .oneid-date-picker__cell--disabled:hover .oneid-date-picker__cell-inner { -webkit-box-shadow: none; box-shadow: none; background-color: var(--td-bg-color-component-disabled); } .oneid-date-picker__cell--disabled .oneid-date-picker__cell-inner { cursor: not-allowed; color: var(--td-text-color-disabled); background-color: var(--td-bg-color-component-disabled); } .oneid-date-picker__cell--disabled + .oneid-date-picker__cell--disabled::before { opacity: 1; left: calc(0px - var(--td-comp-size-l)); background-color: var(--td-bg-color-component-disabled); border-radius: var(--td-radius-default); } .oneid-date-picker__input--placeholder input { color: var(--td-text-color-placeholder); } .oneid-upload { font: var(--td-font-body-medium); color: var(--td-text-color-primary); -webkit-box-sizing: border-box; box-sizing: border-box; margin: 0; padding: 0; list-style: none; } .oneid-upload .oneid-is-bordered { border: 1px solid var(--td-component-border); } .oneid-upload .oneid-upload__trigger { display: inline-block; } .oneid-upload .oneid-icon { font-size: calc(var(--td-font-size-body-medium) + 2px); -ms-flex-negative: 0; flex-shrink: 0; } .oneid-upload .oneid-icon-check-circle-filled { color: var(--td-success-color); } .oneid-upload .oneid-icon-error-circle-filled { color: var(--td-error-color); } .oneid-upload .oneid-icon-time-filled { color: var(--td-text-color-placeholder); } .oneid-upload .oneid-icon-add { color: var(--td-text-color-primary); } .oneid-upload__list-file { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; width: 100px; height: 100px; margin-right: var(--td-comp-margin-m); overflow: hidden; } .oneid-upload__list-file .oneid-icon { font-size: var(--td-comp-size-xl); color: var(--td-brand-color); } .oneid-upload__list-item { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -ms-flex-align: center; align-items: center; margin-top: var(--td-comp-margin-m); width: 496px; height: 124px; padding: var(--td-comp-paddingTB-m) var(--td-comp-paddingLR-m); border: 1px solid var(--td-component-border); border-radius: var(--td-radius-default); font: var(--td-font-body-medium); } .oneid-upload__list-item.oneid-is--error .oneid-upload__list-name { color: var(--td-error-color); } .oneid-upload__list-item.oneid-is--error .oneid-upload__list-file .oneid-icon { color: var(--td-error-color); } .oneid-upload__list-content { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .oneid-upload-list__control { cursor: pointer; } .oneid-upload-list__control:hover { color: var(--td-error-color); } .oneid-upload__list-img { -o-object-fit: cover; object-fit: cover; max-width: 100%; max-height: 100%; cursor: pointer; } .oneid-upload__list-name { max-width: 200px; white-space: nowrap; word-wrap: normal; overflow: hidden; text-overflow: ellipsis; } .oneid-upload--highlight { color: var(--td-text-color-brand); } .oneid-upload__single-name { margin-right: var(--td-comp-margin-s); } .oneid-upload__card { font: var(--td-font-body-small); overflow: hidden; width: 100%; margin: 0; padding: 0; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; gap: var(--td-comp-margin-s); } .oneid-upload__card .oneid-is-disabled :hover { cursor: not-allowed; } .oneid-upload__card-item { cursor: pointer; -webkit-box-sizing: border-box; box-sizing: border-box; list-style: none; } .oneid-upload__card-item::after { content: ""; display: block; } .oneid-upload__card-item:hover .oneid-upload__card-mask { opacity: 1; -webkit-transition: opacity 0.2s linear; transition: opacity 0.2s linear; } .oneid-upload__card-item.oneid-is--error .oneid-icon-warning_fill { color: var(--td-error-color); margin-bottom: var(--td-comp-margin-s); } .oneid-upload__card-item.oneid-is--error .oneid-upload__card-status { color: var(--td-error-color); } .oneid-upload__card-item.oneid-is-background { -webkit-transition: border-color 0.2s linear; transition: border-color 0.2s linear; } .oneid-upload__card .oneid-icon-loading { margin-bottom: var(--td-comp-margin-s); } .oneid-upload__card-name { max-width: 100%; margin-top: var(--td-comp-margin-s); white-space: nowrap; word-wrap: normal; overflow: hidden; text-overflow: ellipsis; } .oneid-upload__card-content { position: relative; width: 110px; height: 110px; overflow: hidden; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-sizing: border-box; box-sizing: border-box; background-color: var(--td-bg-color-secondarycontainer); border: 1px dashed var(--td-component-border); padding: var(--td-comp-paddingTB-s) var(--td-comp-paddingLR-s); border-radius: var(--td-radius-default); } .oneid-upload__card-container { width: 110px; height: 110px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; background-color: var(--td-bg-color-secondarycontainer); border: 1px dashed var(--td-component-border); -webkit-box-sizing: border-box; box-sizing: border-box; position: relative; border-radius: var(--td-radius-default); -webkit-transition: border 0.2s linear; transition: border 0.2s linear; } .oneid-upload__card-container:hover:not(.oneid-is-disabled) { border-color: var(--td-brand-color); -webkit-transition: border-color 0.2s linear; transition: border-color 0.2s linear; } .oneid-upload__card-container > .oneid-icon { color: var(--td-text-color-placeholder); } .oneid-upload__card-container > .oneid-icon, .oneid-upload__card-container .oneid-loading { font-size: var(--td-comp-size-xs); margin-bottom: var(--td-comp-margin-s); } .oneid-upload__card-container > p, .oneid-upload__card-container .oneid-upload__add-text { color: var(--td-text-color-placeholder); margin: 0; } .oneid-upload__card-status-wrap { text-align: center; } .oneid-upload__card-status-wrap > svg { margin-bottom: var(--td-comp-margin-s); } .oneid-upload__card-status-wrap .oneid-icon, .oneid-upload__card-status-wrap .oneid-loading { font-size: var(--td-comp-size-xs); } .oneid-upload__card-image { max-width: 100%; max-height: 100%; width: 100%; height: 100%; } .oneid-upload__card-status { color: var(--td-text-color-disabled); font: var(--td-font-body-small); } .oneid-upload__card-mask { background-color: var(--td-mask-active); color: var(--td-text-color-anti); will-change: transform; opacity: 0; z-index: 2; -webkit-transition: opacity 0.2s linear; transition: opacity 0.2s linear; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; position: absolute; left: 0; right: 0; top: 0; bottom: 0; } .oneid-upload__card-mask-item-divider { margin: 0 var(--td-comp-margin-l); border-left: 1px var(--td-text-color-anti) solid; height: var(--td-comp-size-xxxs); } .oneid-upload__card-mask-item > .oneid-icon { cursor: pointer; font-size: calc(var(--td-font-size-body-medium) + 2px); } .oneid-upload__dialog .oneid-dialog { max-width: 80%; } .oneid-upload__dialog .oneid-dialog--default { padding: 32px; } .oneid-upload__dialog .oneid-dialog-body { padding-bottom: 0; } .oneid-upload__dialog .oneid-dialog-body-img-box img { display: block; max-width: 100%; max-height: 100%; } .oneid-upload__dragger { display: -webkit-box; display: -ms-flexbox; display: flex; width: 336px; height: 144px; border: 1px dashed var(--td-component-border); border-radius: var(--td-radius-small); font: var(--td-font-body-medium); color: var(--td-text-color-secondary); cursor: pointer; padding: var(--td-comp-margin-l); position: relative; overflow: auto; -webkit-box-sizing: border-box; box-sizing: border-box; -webkit-transition: border-color 0.2s linear; transition: border-color 0.2s linear; } .oneid-upload__dragger.oneid-is--active { background-color: var(--td-bg-color-container-active); border-color: var(--td-brand-color); } .oneid-upload__dragger:hover { border-color: var(--td-brand-color); } .oneid-upload__dragger-btns { position: absolute; bottom: var(--td-comp-margin-l); } .oneid-upload__dragger .oneid-size-s { display: block; } .oneid-upload__dragger-center { -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .oneid-upload__dragger-error { border-color: var(--td-error-color); } .oneid-upload__dragger-error:hover { border-color: var(--td-error-color); } .oneid-upload__dragger-text { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; font: var(--td-font-body-medium); color: var(--td-text-color-primary); margin-bottom: var(--td-comp-margin-s); max-width: calc(336px - var(--td-comp-margin-l) * 2 - 0); } .oneid-upload__dragger-text .oneid-upload__single-name { white-space: nowrap; word-wrap: normal; overflow: hidden; text-overflow: ellipsis; } .oneid-upload__tips { display: block; color: var(--td-text-color-placeholder); margin-top: var(--td-comp-margin-s); font: var(--td-font-body-small); } .oneid-upload__tips.oneid-upload__tips-error { color: var(--td-error-color); } .oneid-upload__tips.oneid-upload__tips-warn { color: var(--td-warning-color); } .oneid-upload__placeholder { color: var(--td-text-color-placeholder); } .oneid-upload__display-text--margin { margin-top: var(--td-comp-margin-s); } .oneid-upload__single-display-text { color: var(--td-text-color-secondary); font: var(--td-font-body-small); display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .oneid-upload__single-display-text .oneid-upload__flow-status .oneid-icon { font-size: calc(var(--td-font-size-body-medium) + 2px); } .oneid-icon-clear-circle-filled { color: var(--td-text-color-placeholder); margin-top: var(--td-comp-margin-xxs); -webkit-transition: color 0.2s linear; transition: color 0.2s linear; } .oneid-icon-clear-circle-filled:hover { color: var(--td-text-color-secondary); cursor: pointer; -webkit-transition: color 0.2s linear; transition: color 0.2s linear; } .oneid-upload__single-percent { margin-left: var(--td-comp-margin-xs); } .oneid-upload__single-progress { color: var(--td-brand-color); display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .oneid-upload__single-progress .oneid-loading { font-size: calc(var(--td-font-size-body-medium) + 2px); -ms-flex-negative: 0; flex-shrink: 0; } .oneid-upload__single-input-delete { margin-left: var(--td-comp-margin-l); font: var(--td-font-body-medium); color: var(--td-brand-color); cursor: pointer; } .oneid-upload__single-input-preview { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-flex: 1; -ms-flex: 1; flex: 1; } .oneid-upload__single-input-text { display: block; white-space: nowrap; word-wrap: normal; overflow: hidden; text-overflow: ellipsis; } .oneid-upload__single-file-input { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .oneid-upload__single-file-input .oneid-upload__trigger { margin-left: var(--td-comp-margin-l); } .oneid-upload__single-file-input .oneid-upload__single-progress { white-space: nowrap; } .oneid-upload__single-file-input .oneid-input__inner { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } .oneid-upload__dragger-progress { width: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; } .oneid-upload__dragger-progress .oneid-icon, .oneid-upload__dragger-progress .oneid-loading { font-size: calc(var(--td-font-size-body-medium) + 2px); -ms-flex-negative: 0; flex-shrink: 0; } .oneid-upload__dragger-img-wrap { width: 110px; height: 110px; background-color: var(--td-bg-color-secondarycontainer); border-radius: var(--td-radius-default); display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -ms-flex-negative: 0; flex-shrink: 0; } .oneid-upload__dragger-img-wrap > .oneid-image__wrapper--shape-square { width: 100%; } .oneid-upload__dragger-img-wrap > .oneid-image__wrapper--shape-square .oneid-space-item { text-align: center; } .oneid-upload__dragger-img-wrap > img { max-width: 100%; max-height: 100%; } .oneid-upload__dragger-img-wrap + .oneid-upload__dragger-progress-info { margin-left: var(--td-comp-margin-l); max-width: calc(336px - var(--td-comp-margin-l) * 2 - (110px + var(--td-comp-margin-l))); } .oneid-upload__dragger-progress-info { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; } .oneid-upload__dragger-progress-info .oneid-upload__single-display-text { margin-bottom: var(--td-comp-margin-s); } .oneid-upload__dragger-progress-info .oneid-button:hover { background-color: transparent; } .oneid-upload__dragger-progress-cancel, .oneid-upload__dragger-progress-reupload { margin-right: var(--td-comp-margin-l); } .oneid-upload__dragger-progress-cancel:hover, .oneid-upload__dragger-progress-reupload:hover { border-color: transparent; } .oneid-upload__dragger-delete-btn:hover, .oneid-upload__dragger-upload-btn:hover { border-color: transparent; } .oneid-upload__flow-image-flow { width: 498px; } .oneid-upload__flow { min-width: 498px; max-width: 960px; } .oneid-upload__flow-placeholder { display: inline-block; margin-left: var(--td-comp-margin-l); } .oneid-upload__flow-op { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .oneid-upload__flow-bottom { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; margin-top: var(--td-comp-margin-xxl); } .oneid-upload__flow-bottom .oneid-button + .oneid-button { margin-left: var(--td-comp-margin-s); } .oneid-upload__flow-empty { width: 100%; height: 184px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; color: var(--td-text-color-placeholder); } .oneid-upload__flow-table { width: 100%; border: 1px dashed var(--td-component-border); margin-top: var(--td-comp-margin-xxl); border-collapse: collapse; } .oneid-upload__flow-table > thead > tr, .oneid-upload__flow-table > tbody > tr, .oneid-upload__flow-table > tfoot > tr, .oneid-upload__flow-table > tr { border-top: 1px solid var(--td-component-border); } .oneid-upload__flow-table > thead > tr > th, .oneid-upload__flow-table > tbody > tr > th, .oneid-upload__flow-table > tfoot > tr > th, .oneid-upload__flow-table > tr > th { color: var(--td-text-color-placeholder); font-weight: normal; border: 1px solid var(--td-component-border); text-align: left; background-color: var(--td-bg-color-container); } .oneid-upload__flow-table > thead > tr > td, .oneid-upload__flow-table > tbody > tr > td, .oneid-upload__flow-table > tfoot > tr > td, .oneid-upload__flow-table > tr > td { color: var(--td-text-color-primary); } .oneid-upload__flow-table > thead > tr > td, .oneid-upload__flow-table > tbody > tr > td, .oneid-upload__flow-table > tfoot > tr > td, .oneid-upload__flow-table > tr > td, .oneid-upload__flow-table > thead > tr > th, .oneid-upload__flow-table > tbody > tr > th, .oneid-upload__flow-table > tfoot > tr > th, .oneid-upload__flow-table > tr > th { padding: var(--td-comp-paddingTB-m) var(--td-comp-paddingLR-l); } .oneid-upload__flow-table__batch-row { border-left: 1px solid var(--td-component-border); } .oneid-upload__flow-button { color: var(--td-text-color-placeholder); cursor: pointer; -webkit-transition: color 0.2s linear; transition: color 0.2s linear; } .oneid-upload__flow-button:hover { color: var(--td-text-color-secondary); } .oneid-upload__flow-status { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .oneid-upload__flow-status .oneid-icon, .oneid-upload__flow-status .oneid-loading { margin-right: var(--td-comp-margin-s); font-size: calc(var(--td-font-size-body-medium) + 2px); } .oneid-upload__flow-card-area { border: 1px dashed var(--td-component-border); padding: var(--td-comp-paddingTB-m) var(--td-comp-paddingLR-m); margin-top: var(--td-comp-margin-xxl); -webkit-transition: border 0.2s linear; transition: border 0.2s linear; } .oneid-upload__flow-card-area:hover { border-color: var(--td-brand-color); -webkit-transition: border-color 0.2s linear; transition: border-color 0.2s linear; } .oneid-upload__icon-delete, .oneid-upload__single-input-clear { color: var(--td-text-color-placeholder); cursor: pointer; -webkit-transition: color 0.2s linear; transition: color 0.2s linear; } .oneid-upload__icon-delete:hover, .oneid-upload__single-input-clear:hover { color: var(--td-text-color-secondary); -webkit-transition: color 0.2s linear; transition: color 0.2s linear; } .oneid-icon.oneid-upload__single-input-clear { display: none; } .oneid-upload__single-input-preview:hover .oneid-upload__single-input-clear { display: initial; } .oneid-upload__single-input-preview:hover .oneid-upload__status-icon { display: none; } .oneid-upload .oneid-upload__single-name { color: var(--td-text-color-secondary); } .oneid-upload .oneid-upload__file-thumbnail { margin-right: var(--td-comp-paddingLR-s); width: var(--td-comp-size-xxl); height: var(--td-comp-size-xxl); display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; cursor: pointer; } .oneid-upload .oneid-upload__file-thumbnail > svg { font-size: var(--td-comp-size-s); color: var(--td-text-color-placeholder); } .oneid-upload__card-name { margin-top: 8px; } .oneid-upload--theme-file-input { width: 100%; } .oneid-upload__dragger-btns > .oneid-button { padding: 0; } .oneid-upload__file-info { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .oneid-upload__card-container.oneid-is-disabled { cursor: not-allowed; } .oneid-upload__card-container.oneid-is-disabled .oneid-upload__add-text { color: var(--td-text-color-disabled); } .oneid-upload__card-container.oneid-is-disabled .oneid-icon { color: var(--td-text-color-disabled); } /* Swiper */ .oneid-swiper { font: var(--td-font-body-medium); color: var(--td-text-color-primary); -webkit-box-sizing: border-box; box-sizing: border-box; margin: 0; padding: 0; list-style: none; position: relative; height: -webkit-fit-content; height: -moz-fit-content; height: fit-content; } .oneid-swiper__wrap { display: block; position: relative; height: 100%; } .oneid-swiper__content { position: relative; z-index: 1; overflow: hidden; } .oneid-swiper__container { position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; height: 100%; z-index: 1; } .oneid-swiper__container__item { -webkit-box-flex: 0; -ms-flex: 0 0 auto; flex: 0 0 auto; width: 100%; height: 100%; display: inline-block; } .oneid-swiper__arrow { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .oneid-swiper__arrow svg.oneid-icon { width: 20px; height: 20px; } .oneid-swiper__arrow svg.oneid-icon::before { font-size: 24px; } .oneid-swiper__arrow--default .oneid-swiper__arrow-left { position: absolute; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); display: -webkit-box; display: -ms-flexbox; display: flex; width: 24px; height: 24px; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; z-index: 2; background-color: transparent; color: var(--td-font-white-2); -webkit-transition: 0.2s linear; transition: 0.2s linear; cursor: pointer; left: 16px; } .oneid-swiper__arrow--default .oneid-swiper__arrow-left:hover { color: var(--td-bg-color-container); background-color: var(--td-font-white-4); border-radius: var(--td-radius-default); -webkit-transition: 0.2s linear; transition: 0.2s linear; } .oneid-swiper__arrow--default .oneid-swiper__arrow-left:active { background-color: var(--td-font-white-3); -webkit-transition: 0.2s linear; transition: 0.2s linear; } .oneid-swiper__arrow--default .oneid-swiper__arrow-right { position: absolute; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); display: -webkit-box; display: -ms-flexbox; display: flex; width: 24px; height: 24px; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; z-index: 2; background-color: transparent; color: var(--td-font-white-2); -webkit-transition: 0.2s linear; transition: 0.2s linear; cursor: pointer; right: 16px; } .oneid-swiper__arrow--default .oneid-swiper__arrow-right:hover { color: var(--td-bg-color-container); background-color: var(--td-font-white-4); border-radius: var(--td-radius-default); -webkit-transition: 0.2s linear; transition: 0.2s linear; } .oneid-swiper__arrow--default .oneid-swiper__arrow-right:active { background-color: var(--td-font-white-3); -webkit-transition: 0.2s linear; transition: 0.2s linear; } .oneid-swiper-card .oneid-swiper__container { display: block; } .oneid-swiper-card .oneid-swiper__container .oneid-is-active { z-index: 2; } .oneid-swiper-card .oneid-swiper__card { position: absolute; top: 0; left: 0; width: 41.5%; height: 100%; z-index: 0; } .oneid-swiper-fade .oneid-swiper__container { display: block; } .oneid-swiper-fade .oneid-swiper__fade { position: absolute; top: 0; left: 0; } .oneid-swiper__navigation { position: absolute; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; bottom: 0; margin: 0; padding: 0; z-index: 2; } .oneid-swiper__navigation > li { -webkit-box-flex: 1; -ms-flex: 1 0 auto; flex: 1 0 auto; list-style-type: none; display: -webkit-box; display: -ms-flexbox; display: flex; } .oneid-swiper__navigation .oneid-swiper__arrow svg.oneid-icon { width: 16px; height: 16px; } .oneid-swiper__navigation-bars .oneid-swiper__navigation-item { cursor: pointer; margin: 0 0 0 6px; padding: 18px 0; width: 14px; height: auto; } .oneid-swiper__navigation-bars .oneid-swiper__navigation-item span { width: 100%; height: 3px; } .oneid-swiper__navigation-bars .oneid-swiper__navigation-item:nth-child(1) { margin-left: 0; } .oneid-swiper__navigation-bars .oneid-swiper__navigation-item span { background: var(--td-font-white-4); } .oneid-swiper__navigation-bars .oneid-swiper__navigation-item span:hover { background-color: var(--td-font-white-2); } .oneid-swiper__navigation-bars .oneid-swiper__navigation-item span:active { background-color: var(--td-bg-color-container); } .oneid-swiper__navigation-bars .oneid-swiper__navigation-item.oneid-is-active { width: 24px; } .oneid-swiper__navigation-bars .oneid-swiper__navigation-item.oneid-is-active span { background-color: var(--td-bg-color-container); } .oneid-swiper__navigation-dots-bar .oneid-swiper__navigation-item { cursor: pointer; margin: 0 0 0 6px; padding: 18px 0; width: 14px; height: auto; } .oneid-swiper__navigation-dots-bar .oneid-swiper__navigation-item span { border-radius: 1.5px; } .oneid-swiper__navigation-dots-bar .oneid-swiper__navigation-item span { width: 100%; height: 3px; } .oneid-swiper__navigation-dots-bar .oneid-swiper__navigation-item:nth-child(1) { margin-left: 0; } .oneid-swiper__navigation-dots-bar .oneid-swiper__navigation-item span { background: var(--td-font-white-4); } .oneid-swiper__navigation-dots-bar .oneid-swiper__navigation-item span:hover { background-color: var(--td-font-white-2); } .oneid-swiper__navigation-dots-bar .oneid-swiper__navigation-item span:active { background-color: var(--td-bg-color-container); } .oneid-swiper__navigation-dots-bar .oneid-swiper__navigation-item.oneid-is-active { width: 24px; } .oneid-swiper__navigation-dots-bar .oneid-swiper__navigation-item.oneid-is-active span { background-color: var(--td-bg-color-container); } .oneid-swiper__navigation-dots .oneid-swiper__navigation-item { cursor: pointer; margin: 0 0 0 6px; padding: 18px 0; width: var(--td-size-2); height: auto; } .oneid-swiper__navigation-dots .oneid-swiper__navigation-item span { border-radius: 50%; } .oneid-swiper__navigation-dots .oneid-swiper__navigation-item span { width: 100%; height: var(--td-size-2); } .oneid-swiper__navigation-dots .oneid-swiper__navigation-item:nth-child(1) { margin-left: 0; } .oneid-swiper__navigation-dots .oneid-swiper__navigation-item span { background: var(--td-font-white-4); } .oneid-swiper__navigation-dots .oneid-swiper__navigation-item span:hover { background-color: var(--td-font-white-2); } .oneid-swiper__navigation-dots .oneid-swiper__navigation-item span:active { background-color: var(--td-bg-color-container); } .oneid-swiper__navigation-dots .oneid-swiper__navigation-item.oneid-is-active span { background-color: var(--td-bg-color-container); } .oneid-swiper__navigation--fraction { position: absolute; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); top: auto; right: auto; bottom: calc(0px - (var(--td-line-height-body-medium) + 12px)); height: var(--td-line-height-body-medium); line-height: var(--td-line-height-body-medium); } .oneid-swiper__navigation--fraction .oneid-swiper__arrow-left { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; z-index: 2; background-color: transparent; color: var(--td-text-color-secondary); width: var(--td-line-height-body-medium); height: var(--td-line-height-body-medium); cursor: pointer; } .oneid-swiper__navigation--fraction .oneid-swiper__arrow-left:hover { color: var(--td-text-color-primary); } .oneid-swiper__navigation--fraction .oneid-swiper__arrow-left:active { color: var(--td-brand-color-active); } .oneid-swiper__navigation--fraction .oneid-swiper__arrow-right { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; z-index: 2; background-color: transparent; color: var(--td-text-color-secondary); width: var(--td-line-height-body-medium); height: var(--td-line-height-body-medium); cursor: pointer; } .oneid-swiper__navigation--fraction .oneid-swiper__arrow-right:hover { color: var(--td-text-color-primary); } .oneid-swiper__navigation--fraction .oneid-swiper__arrow-right:active { color: var(--td-brand-color-active); } .oneid-swiper__navigation--fraction .oneid-swiper__navigation-text-fraction { display: inline-block; font-size: var(--td-font-size-body-medium); color: var(--td-text-color-secondary); margin: 0; } .oneid-swiper--vertical .oneid-swiper__container { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } .oneid-swiper--vertical .oneid-swiper__navigation { position: absolute; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); left: auto; right: 0; bottom: auto; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .oneid-swiper--vertical .oneid-swiper__navigation-bars .oneid-swiper__navigation-item { cursor: pointer; margin: 6px 0 0 0; padding: 0 18px; width: auto; height: 14px; } .oneid-swiper--vertical .oneid-swiper__navigation-bars .oneid-swiper__navigation-item span { width: 3px; height: 100%; } .oneid-swiper--vertical .oneid-swiper__navigation-bars .oneid-swiper__navigation-item:nth-child(1) { margin-top: 0; } .oneid-swiper--vertical .oneid-swiper__navigation-bars .oneid-swiper__navigation-item span { background: var(--td-font-white-4); } .oneid-swiper--vertical .oneid-swiper__navigation-bars .oneid-swiper__navigation-item span:hover { background-color: var(--td-font-white-2); } .oneid-swiper--vertical .oneid-swiper__navigation-bars .oneid-swiper__navigation-item span:active { background-color: var(--td-bg-color-container); } .oneid-swiper--vertical .oneid-swiper__navigation-bars .oneid-swiper__navigation-item.oneid-is-active { height: 24px; } .oneid-swiper--vertical .oneid-swiper__navigation-bars .oneid-swiper__navigation-item.oneid-is-active span { background-color: var(--td-bg-color-container); } .oneid-swiper--vertical .oneid-swiper__navigation-dots-bar .oneid-swiper__navigation-item { cursor: pointer; margin: 6px 0 0 0; padding: 0 18px; width: auto; height: 14px; } .oneid-swiper--vertical .oneid-swiper__navigation-dots-bar .oneid-swiper__navigation-item span { border-radius: 1.5px; } .oneid-swiper--vertical .oneid-swiper__navigation-dots-bar .oneid-swiper__navigation-item span { width: 3px; height: 100%; } .oneid-swiper--vertical .oneid-swiper__navigation-dots-bar .oneid-swiper__navigation-item:nth-child(1) { margin-top: 0; } .oneid-swiper--vertical .oneid-swiper__navigation-dots-bar .oneid-swiper__navigation-item span { background: var(--td-font-white-4); } .oneid-swiper--vertical .oneid-swiper__navigation-dots-bar .oneid-swiper__navigation-item span:hover { background-color: var(--td-font-white-2); } .oneid-swiper--vertical .oneid-swiper__navigation-dots-bar .oneid-swiper__navigation-item span:active { background-color: var(--td-bg-color-container); } .oneid-swiper--vertical .oneid-swiper__navigation-dots-bar .oneid-swiper__navigation-item.oneid-is-active { height: 24px; } .oneid-swiper--vertical .oneid-swiper__navigation-dots-bar .oneid-swiper__navigation-item.oneid-is-active span { background-color: var(--td-bg-color-container); } .oneid-swiper--vertical .oneid-swiper__navigation-dots .oneid-swiper__navigation-item { cursor: pointer; margin: 6px 0 0 0; padding: 0 18px; width: auto; max-height: var(--td-size-2); } .oneid-swiper--vertical .oneid-swiper__navigation-dots .oneid-swiper__navigation-item span { border-radius: 50%; } .oneid-swiper--vertical .oneid-swiper__navigation-dots .oneid-swiper__navigation-item span { width: var(--td-size-2); height: 100%; } .oneid-swiper--vertical .oneid-swiper__navigation-dots .oneid-swiper__navigation-item:nth-child(1) { margin-top: 0; } .oneid-swiper--vertical .oneid-swiper__navigation-dots .oneid-swiper__navigation-item span { background: var(--td-font-white-4); } .oneid-swiper--vertical .oneid-swiper__navigation-dots .oneid-swiper__navigation-item span:hover { background-color: var(--td-font-white-2); } .oneid-swiper--vertical .oneid-swiper__navigation-dots .oneid-swiper__navigation-item span:active { background-color: var(--td-bg-color-container); } .oneid-swiper--vertical .oneid-swiper__navigation-dots .oneid-swiper__navigation-item.oneid-is-active span { background-color: var(--td-bg-color-container); } .oneid-swiper--outside .oneid-swiper__navigation { bottom: -36px; } .oneid-swiper--outside .oneid-swiper__navigation--fraction { position: absolute; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); top: auto; right: auto; bottom: calc(0px - (var(--td-line-height-body-medium) + 12px)); height: var(--td-line-height-body-medium); line-height: var(--td-line-height-body-medium); } .oneid-swiper--outside .oneid-swiper__navigation--fraction .oneid-swiper__arrow-left { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; z-index: 2; background-color: transparent; color: var(--td-text-color-secondary); width: var(--td-line-height-body-medium); height: var(--td-line-height-body-medium); cursor: pointer; } .oneid-swiper--outside .oneid-swiper__navigation--fraction .oneid-swiper__arrow-left:hover { color: var(--td-text-color-primary); } .oneid-swiper--outside .oneid-swiper__navigation--fraction .oneid-swiper__arrow-left:active { color: var(--td-brand-color-active); } .oneid-swiper--outside .oneid-swiper__navigation--fraction .oneid-swiper__arrow-right { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; z-index: 2; background-color: transparent; color: var(--td-text-color-secondary); width: var(--td-line-height-body-medium); height: var(--td-line-height-body-medium); cursor: pointer; } .oneid-swiper--outside .oneid-swiper__navigation--fraction .oneid-swiper__arrow-right:hover { color: var(--td-text-color-primary); } .oneid-swiper--outside .oneid-swiper__navigation--fraction .oneid-swiper__arrow-right:active { color: var(--td-brand-color-active); } .oneid-swiper--outside .oneid-swiper__navigation--fraction .oneid-swiper__navigation-text-fraction { display: inline-block; font-size: var(--td-font-size-body-medium); color: var(--td-text-color-secondary); margin: 0; } .oneid-swiper--outside .oneid-swiper__navigation-bars .oneid-swiper__navigation-item span { background-color: var(--td-text-color-disabled); } .oneid-swiper--outside .oneid-swiper__navigation-bars .oneid-swiper__navigation-item span:hover { background-color: var(--td-text-color-primary); } .oneid-swiper--outside .oneid-swiper__navigation-bars .oneid-swiper__navigation-item span:active { background-color: var(--td-brand-color-active); } .oneid-swiper--outside .oneid-swiper__navigation-bars .oneid-is-active span { background-color: var(--td-brand-color-active); } .oneid-swiper--outside.oneid-swiper--vertical .oneid-swiper__navigation { bottom: auto; right: -36px; } .oneid-swiper--outside.oneid-swiper--vertical .oneid-swiper__navigation--fraction { position: absolute; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); top: auto; right: auto; bottom: calc(0px - (var(--td-line-height-body-medium) + 12px)); height: var(--td-line-height-body-medium); line-height: var(--td-line-height-body-medium); } .oneid-swiper--outside.oneid-swiper--vertical .oneid-swiper__navigation--fraction .oneid-swiper__arrow-left { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; z-index: 2; background-color: transparent; color: var(--td-text-color-secondary); width: var(--td-line-height-body-medium); height: var(--td-line-height-body-medium); cursor: pointer; } .oneid-swiper--outside.oneid-swiper--vertical .oneid-swiper__navigation--fraction .oneid-swiper__arrow-left:hover { color: var(--td-text-color-primary); } .oneid-swiper--outside.oneid-swiper--vertical .oneid-swiper__navigation--fraction .oneid-swiper__arrow-left:active { color: var(--td-brand-color-active); } .oneid-swiper--outside.oneid-swiper--vertical .oneid-swiper__navigation--fraction .oneid-swiper__arrow-right { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; z-index: 2; background-color: transparent; color: var(--td-text-color-secondary); width: var(--td-line-height-body-medium); height: var(--td-line-height-body-medium); cursor: pointer; } .oneid-swiper--outside.oneid-swiper--vertical .oneid-swiper__navigation--fraction .oneid-swiper__arrow-right:hover { color: var(--td-text-color-primary); } .oneid-swiper--outside.oneid-swiper--vertical .oneid-swiper__navigation--fraction .oneid-swiper__arrow-right:active { color: var(--td-brand-color-active); } .oneid-swiper--outside.oneid-swiper--vertical .oneid-swiper__navigation--fraction .oneid-swiper__navigation-text-fraction { display: inline-block; font-size: var(--td-font-size-body-medium); color: var(--td-text-color-secondary); margin: 0; } .oneid-swiper--outside.oneid-swiper--vertical .oneid-swiper__navigation-bars .oneid-swiper__navigation-item span { background-color: var(--td-text-color-disabled); } .oneid-swiper--outside.oneid-swiper--vertical .oneid-swiper__navigation-bars .oneid-swiper__navigation-item span:hover { background-color: var(--td-text-color-primary); } .oneid-swiper--outside.oneid-swiper--vertical .oneid-swiper__navigation-bars .oneid-swiper__navigation-item span:active { background-color: var(--td-brand-color-active); } .oneid-swiper--outside.oneid-swiper--vertical .oneid-swiper__navigation-bars .oneid-is-active span { background-color: var(--td-brand-color-active); } .oneid-swiper--inside .oneid-swiper__navigation { bottom: 0; } .oneid-swiper--inside .oneid-swiper__navigation--fraction { position: absolute; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); top: auto; right: auto; bottom: calc(0px - (var(--td-line-height-body-medium) + 12px)); height: var(--td-line-height-body-medium); line-height: var(--td-line-height-body-medium); } .oneid-swiper--inside .oneid-swiper__navigation--fraction .oneid-swiper__arrow-left { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; z-index: 2; background-color: transparent; color: var(--td-text-color-secondary); width: var(--td-line-height-body-medium); height: var(--td-line-height-body-medium); cursor: pointer; } .oneid-swiper--inside .oneid-swiper__navigation--fraction .oneid-swiper__arrow-left:hover { color: var(--td-text-color-primary); } .oneid-swiper--inside .oneid-swiper__navigation--fraction .oneid-swiper__arrow-left:active { color: var(--td-brand-color-active); } .oneid-swiper--inside .oneid-swiper__navigation--fraction .oneid-swiper__arrow-right { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; z-index: 2; background-color: transparent; color: var(--td-text-color-secondary); width: var(--td-line-height-body-medium); height: var(--td-line-height-body-medium); cursor: pointer; } .oneid-swiper--inside .oneid-swiper__navigation--fraction .oneid-swiper__arrow-right:hover { color: var(--td-text-color-primary); } .oneid-swiper--inside .oneid-swiper__navigation--fraction .oneid-swiper__arrow-right:active { color: var(--td-brand-color-active); } .oneid-swiper--inside .oneid-swiper__navigation--fraction .oneid-swiper__navigation-text-fraction { display: inline-block; font-size: var(--td-font-size-body-medium); color: var(--td-text-color-secondary); margin: 0; } .oneid-swiper--large .oneid-swiper__arrow i.oneid-icon::before { font-size: 32px; } .oneid-swiper--large .oneid-swiper__arrow--default .oneid-swiper__arrow-left { width: 32px; height: 32px; left: 24px; } .oneid-swiper--large .oneid-swiper__arrow--default .oneid-swiper__arrow-right { width: 32px; height: 32px; right: 24px; } .oneid-swiper--large .oneid-swiper__navigation-bars .oneid-swiper__navigation-item { cursor: pointer; margin: 0 0 0 8px; padding: 24px 0; width: 21px; height: auto; } .oneid-swiper--large .oneid-swiper__navigation-bars .oneid-swiper__navigation-item span { width: 100%; height: 4px; } .oneid-swiper--large .oneid-swiper__navigation-bars .oneid-swiper__navigation-item:nth-child(1) { margin-left: 0; } .oneid-swiper--large .oneid-swiper__navigation-bars .oneid-swiper__navigation-item span { background: var(--td-font-white-4); } .oneid-swiper--large .oneid-swiper__navigation-bars .oneid-swiper__navigation-item span:hover { background-color: var(--td-font-white-2); } .oneid-swiper--large .oneid-swiper__navigation-bars .oneid-swiper__navigation-item span:active { background-color: var(--td-bg-color-container); } .oneid-swiper--large .oneid-swiper__navigation-bars .oneid-swiper__navigation-item.oneid-is-active { width: 36px; } .oneid-swiper--large .oneid-swiper__navigation-bars .oneid-swiper__navigation-item.oneid-is-active span { background-color: var(--td-bg-color-container); } .oneid-swiper--large .oneid-swiper__navigation--fraction { position: absolute; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); top: auto; right: auto; bottom: calc(0px - (var(--td-line-height-body-large) + 12px)); height: var(--td-line-height-body-large); line-height: var(--td-line-height-body-large); } .oneid-swiper--large .oneid-swiper__navigation--fraction .oneid-swiper__arrow-left { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; z-index: 2; background-color: transparent; color: var(--td-text-color-secondary); width: var(--td-line-height-body-large); height: var(--td-line-height-body-large); cursor: pointer; } .oneid-swiper--large .oneid-swiper__navigation--fraction .oneid-swiper__arrow-left:hover { color: var(--td-text-color-primary); } .oneid-swiper--large .oneid-swiper__navigation--fraction .oneid-swiper__arrow-left:active { color: var(--td-brand-color-active); } .oneid-swiper--large .oneid-swiper__navigation--fraction .oneid-swiper__arrow-right { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; z-index: 2; background-color: transparent; color: var(--td-text-color-secondary); width: var(--td-line-height-body-large); height: var(--td-line-height-body-large); cursor: pointer; } .oneid-swiper--large .oneid-swiper__navigation--fraction .oneid-swiper__arrow-right:hover { color: var(--td-text-color-primary); } .oneid-swiper--large .oneid-swiper__navigation--fraction .oneid-swiper__arrow-right:active { color: var(--td-brand-color-active); } .oneid-swiper--large .oneid-swiper__navigation--fraction .oneid-swiper__navigation-text-fraction { display: inline-block; font-size: var(--td-font-size-body-large); color: var(--td-text-color-secondary); margin: 0; } .oneid-swiper--large.oneid-swiper--outside .oneid-swiper__navigation { bottom: -48px; } .oneid-swiper--large.oneid-swiper--outside .oneid-swiper__navigation-bars .oneid-swiper__navigation-item span { background-color: var(--td-text-color-disabled); } .oneid-swiper--large.oneid-swiper--outside .oneid-swiper__navigation-bars .oneid-swiper__navigation-item span:hover { background-color: var(--td-text-color-primary); } .oneid-swiper--large.oneid-swiper--outside .oneid-swiper__navigation-bars .oneid-swiper__navigation-item span:active { background-color: var(--td-brand-color-active); } .oneid-swiper--large.oneid-swiper--outside .oneid-swiper__navigation-bars .oneid-is-active span { background-color: var(--td-brand-color-active); } .oneid-swiper--large.oneid-swiper--vertical .oneid-swiper__navigation-bars .oneid-swiper__navigation-item { cursor: pointer; margin: 8px 0 0 0; padding: 0 24px; width: auto; height: 21px; } .oneid-swiper--large.oneid-swiper--vertical .oneid-swiper__navigation-bars .oneid-swiper__navigation-item span { width: 4px; height: 100%; } .oneid-swiper--large.oneid-swiper--vertical .oneid-swiper__navigation-bars .oneid-swiper__navigation-item:nth-child(1) { margin-top: 0; } .oneid-swiper--large.oneid-swiper--vertical .oneid-swiper__navigation-bars .oneid-swiper__navigation-item span { background: var(--td-font-white-4); } .oneid-swiper--large.oneid-swiper--vertical .oneid-swiper__navigation-bars .oneid-swiper__navigation-item span:hover { background-color: var(--td-font-white-2); } .oneid-swiper--large.oneid-swiper--vertical .oneid-swiper__navigation-bars .oneid-swiper__navigation-item span:active { background-color: var(--td-bg-color-container); } .oneid-swiper--large.oneid-swiper--vertical .oneid-swiper__navigation-bars .oneid-swiper__navigation-item.oneid-is-active { height: 36px; } .oneid-swiper--large.oneid-swiper--vertical .oneid-swiper__navigation-bars .oneid-swiper__navigation-item.oneid-is-active span { background-color: var(--td-bg-color-container); } .oneid-swiper--large.oneid-swiper--vertical.oneid-swiper--outside .oneid-swiper__navigation { right: -48px; } .oneid-swiper--large.oneid-swiper--vertical.oneid-swiper--outside .oneid-swiper__navigation-bars .oneid-swiper__navigation-item span { background-color: var(--td-text-color-disabled); } .oneid-swiper--large.oneid-swiper--vertical.oneid-swiper--outside .oneid-swiper__navigation-bars .oneid-swiper__navigation-item span:hover { background-color: var(--td-text-color-primary); } .oneid-swiper--large.oneid-swiper--vertical.oneid-swiper--outside .oneid-swiper__navigation-bars .oneid-swiper__navigation-item span:active { background-color: var(--td-brand-color-active); } .oneid-swiper--large.oneid-swiper--vertical.oneid-swiper--outside .oneid-swiper__navigation-bars .oneid-is-active span { background-color: var(--td-brand-color-active); } .oneid-swiper--small .oneid-swiper__arrow i.oneid-icon::before { font-size: 16px; } .oneid-swiper--small .oneid-swiper__arrow--default .oneid-swiper__arrow-left { width: 16px; height: 16px; left: 8px; } .oneid-swiper--small .oneid-swiper__arrow--default .oneid-swiper__arrow-right { width: 16px; height: 16px; right: 8px; } .oneid-swiper--small .oneid-swiper__navigation-bars .oneid-swiper__navigation-item { cursor: pointer; margin: 0 0 0 4px; padding: 12px 0; width: 9px; height: auto; } .oneid-swiper--small .oneid-swiper__navigation-bars .oneid-swiper__navigation-item span { width: 100%; height: 2px; } .oneid-swiper--small .oneid-swiper__navigation-bars .oneid-swiper__navigation-item:nth-child(1) { margin-left: 0; } .oneid-swiper--small .oneid-swiper__navigation-bars .oneid-swiper__navigation-item span { background: var(--td-font-white-4); } .oneid-swiper--small .oneid-swiper__navigation-bars .oneid-swiper__navigation-item span:hover { background-color: var(--td-font-white-2); } .oneid-swiper--small .oneid-swiper__navigation-bars .oneid-swiper__navigation-item span:active { background-color: var(--td-bg-color-container); } .oneid-swiper--small .oneid-swiper__navigation-bars .oneid-swiper__navigation-item.oneid-is-active { width: 15px; } .oneid-swiper--small .oneid-swiper__navigation-bars .oneid-swiper__navigation-item.oneid-is-active span { background-color: var(--td-bg-color-container); } .oneid-swiper--small .oneid-swiper__navigation--fraction { position: absolute; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); top: auto; right: auto; bottom: calc(0px - (var(--td-line-height-body-small) + 12px)); height: var(--td-line-height-body-small); line-height: var(--td-line-height-body-small); } .oneid-swiper--small .oneid-swiper__navigation--fraction .oneid-swiper__arrow-left { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; z-index: 2; background-color: transparent; color: var(--td-text-color-secondary); width: var(--td-line-height-body-small); height: var(--td-line-height-body-small); cursor: pointer; } .oneid-swiper--small .oneid-swiper__navigation--fraction .oneid-swiper__arrow-left:hover { color: var(--td-text-color-primary); } .oneid-swiper--small .oneid-swiper__navigation--fraction .oneid-swiper__arrow-left:active { color: var(--td-brand-color-active); } .oneid-swiper--small .oneid-swiper__navigation--fraction .oneid-swiper__arrow-right { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; z-index: 2; background-color: transparent; color: var(--td-text-color-secondary); width: var(--td-line-height-body-small); height: var(--td-line-height-body-small); cursor: pointer; } .oneid-swiper--small .oneid-swiper__navigation--fraction .oneid-swiper__arrow-right:hover { color: var(--td-text-color-primary); } .oneid-swiper--small .oneid-swiper__navigation--fraction .oneid-swiper__arrow-right:active { color: var(--td-brand-color-active); } .oneid-swiper--small .oneid-swiper__navigation--fraction .oneid-swiper__navigation-text-fraction { display: inline-block; font-size: var(--td-font-size-body-small); color: var(--td-text-color-secondary); margin: 0; } .oneid-swiper--small.oneid-swiper--outside .oneid-swiper__navigation { bottom: -24px; } .oneid-swiper--small.oneid-swiper--outside .oneid-swiper__navigation-bars .oneid-swiper__navigation-item span { background-color: var(--td-text-color-disabled); } .oneid-swiper--small.oneid-swiper--outside .oneid-swiper__navigation-bars .oneid-swiper__navigation-item span:hover { background-color: var(--td-text-color-primary); } .oneid-swiper--small.oneid-swiper--outside .oneid-swiper__navigation-bars .oneid-swiper__navigation-item span:active { background-color: var(--td-brand-color-active); } .oneid-swiper--small.oneid-swiper--outside .oneid-swiper__navigation-bars .oneid-is-active span { background-color: var(--td-brand-color-active); } .oneid-swiper--small.oneid-swiper--vertical .oneid-swiper__navigation-bars .oneid-swiper__navigation-item { cursor: pointer; margin: 4px 0 0 0; padding: 0 12px; width: auto; height: 9px; } .oneid-swiper--small.oneid-swiper--vertical .oneid-swiper__navigation-bars .oneid-swiper__navigation-item span { width: 2px; height: 100%; } .oneid-swiper--small.oneid-swiper--vertical .oneid-swiper__navigation-bars .oneid-swiper__navigation-item:nth-child(1) { margin-top: 0; } .oneid-swiper--small.oneid-swiper--vertical .oneid-swiper__navigation-bars .oneid-swiper__navigation-item span { background: var(--td-font-white-4); } .oneid-swiper--small.oneid-swiper--vertical .oneid-swiper__navigation-bars .oneid-swiper__navigation-item span:hover { background-color: var(--td-font-white-2); } .oneid-swiper--small.oneid-swiper--vertical .oneid-swiper__navigation-bars .oneid-swiper__navigation-item span:active { background-color: var(--td-bg-color-container); } .oneid-swiper--small.oneid-swiper--vertical .oneid-swiper__navigation-bars .oneid-swiper__navigation-item.oneid-is-active { height: 15px; } .oneid-swiper--small.oneid-swiper--vertical .oneid-swiper__navigation-bars .oneid-swiper__navigation-item.oneid-is-active span { background-color: var(--td-bg-color-container); } .oneid-swiper--small.oneid-swiper--vertical.oneid-swiper--outside .oneid-swiper__navigation { right: -24px; } .oneid-swiper--small.oneid-swiper--vertical.oneid-swiper--outside .oneid-swiper__navigation-bars .oneid-swiper__navigation-item span { background-color: var(--td-text-color-disabled); } .oneid-swiper--small.oneid-swiper--vertical.oneid-swiper--outside .oneid-swiper__navigation-bars .oneid-swiper__navigation-item span:hover { background-color: var(--td-text-color-primary); } .oneid-swiper--small.oneid-swiper--vertical.oneid-swiper--outside .oneid-swiper__navigation-bars .oneid-swiper__navigation-item span:active { background-color: var(--td-brand-color-active); } .oneid-swiper--small.oneid-swiper--vertical.oneid-swiper--outside .oneid-swiper__navigation-bars .oneid-is-active span { background-color: var(--td-brand-color-active); } .oneid-comment { font: var(--td-font-body-medium); -webkit-box-sizing: border-box; box-sizing: border-box; margin: 0; padding: 0; list-style: none; width: 100%; color: var(--td-text-color-primary); } .oneid-comment__inner { display: -webkit-box; display: -ms-flexbox; display: flex; } .oneid-comment__avatar { -ms-flex-negative: 0; flex-shrink: 0; margin-right: var(--td-comp-margin-xxl); cursor: pointer; display: -webkit-box; display: -ms-flexbox; display: flex; } .oneid-comment__avatar-image { width: var(--td-comp-size-xxxl); height: var(--td-comp-size-xxxl); border-radius: var(--td-radius-circle); } .oneid-comment__content { -webkit-box-flex: 1; -ms-flex: auto; flex: auto; font: var(--td-font-body-medium); } .oneid-comment__author { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; -webkit-box-align: baseline; -ms-flex-align: baseline; align-items: baseline; margin-bottom: var(--td-comp-margin-s); } .oneid-comment__name { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; font: var(--td-font-title-medium); padding-right: var(--td-comp-paddingLR-s); cursor: pointer; } .oneid-comment__time { font: var(--td-font-body-small); padding-right: var(--td-comp-paddingLR-s); color: var(--td-text-color-placeholder); } .oneid-comment__detail { word-break: break-all; font: var(--td-font-body-medium); } .oneid-comment__quote { margin-top: var(--td-comp-margin-l); border-left: 4px solid var(--td-component-stroke); padding-left: var(--td-comp-margin-l); } .oneid-comment__quote .oneid-comment__name, .oneid-comment__quote .oneid-comment__detail { color: var(--td-text-color-secondary); } .oneid-comment__actions { margin-top: var(--td-comp-margin-s); display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; list-style: none; padding: 0; gap: var(--td-comp-margin-s); } .oneid-comment__actions .oneid-button--variant-text { color: var(--td-text-color-placeholder); } .oneid-comment__actions .oneid-button--variant-text .oneid-button__text { gap: var(--td-comp-margin-s); } .oneid-comment__reply { margin-top: var(--td-comp-margin-l); margin-left: calc(var(--td-comp-size-xxxl) + var(--td-comp-margin-xxl)); background-color: var(--td-bg-color-secondarycontainer); border-radius: var(--td-radius-medium); padding: var(--td-comp-paddingTB-l) var(--td-comp-paddingLR-xl); } .oneid-comment__reply .oneid-button--variant-text { color: var(--td-text-color-placeholder); } .oneid-comment__reply .oneid-button--variant-text:hover { background-color: var(--td-bg-color-secondarycontainer-hover); } .oneid-comment__reply .oneid-button--variant-text .oneid-button__text { gap: var(--td-comp-margin-s); } .oneid-transfer { -webkit-box-sizing: border-box; box-sizing: border-box; margin: 0; padding: 0; list-style: none; font: var(--td-font-body-medium); position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -webkit-box-align: stretch; -ms-flex-align: stretch; align-items: stretch; background: transparent; color: var(--td-text-color-primary); max-height: 100%; } .oneid-transfer__list { position: relative; display: inline-block; min-width: 200px; height: 200px; padding-top: var(--td-comp-size-xxl); border: 0; word-break: break-word; vertical-align: middle; } .oneid-transfer__list-source, .oneid-transfer__list-target { border: 1px solid var(--td-border-level-1-color); border-radius: var(--td-radius-medium); } .oneid-transfer__list-header { position: absolute; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; top: 0; height: var(--td-comp-size-xxl); line-height: var(--td-comp-size-xxl); width: calc(200px - var(--td-comp-margin-s) * 2); padding: 0 var(--td-comp-paddingLR-s); margin: 0 var(--td-comp-margin-s); -webkit-box-sizing: border-box; box-sizing: border-box; } .oneid-transfer__list-header + :not(.oneid-transfer__list--with-search) { border-top: 1px solid var(--td-border-level-1-color); } .oneid-transfer__list-header .oneid-checkbox { margin-right: 0; } .oneid-transfer__list-header .oneid-checkbox__label { margin: 0; } .oneid-transfer__list-header div { display: -webkit-box; display: -ms-flexbox; display: flex; } .oneid-transfer__list-header div > span { margin-left: var(--td-comp-margin-s); } .oneid-transfer__list-header > span { color: var(--td-text-color-placeholder); } .oneid-transfer__list-body { position: relative; height: 100%; -webkit-box-sizing: border-box; box-sizing: border-box; } .oneid-transfer__list--with-search { padding-top: var(--td-comp-size-m); border-top: 0; } .oneid-transfer__list-content { height: 100%; width: 100%; overflow: auto; } .oneid-transfer__list-content .oneid-checkbox-group { width: 100%; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; gap: var(--td-comp-margin-xs); margin: var(--td-comp-margin-s) 0; } .oneid-transfer__list-content .oneid-checkbox-group .oneid-checkbox { margin-right: var(--td-comp-margin-s); --ripple-color: var(--td-bg-color-container-active); } .oneid-transfer__list-content .oneid-checkbox-group .oneid-checkbox + .oneid-checkbox { margin-left: var(--td-comp-margin-s); } .oneid-transfer__list-content .oneid-checkbox-group .oneid-checkbox__label { margin: 0; -webkit-box-flex: 1; -ms-flex: 1; flex: 1; } .oneid-transfer__list-content .oneid-checkbox-group .oneid-checkbox__label > span { margin-left: var(--td-comp-margin-s); display: inline-block; } .oneid-transfer__list .oneid-transfer__list-item { padding: var(--td-comp-paddingLR-xs) var(--td-comp-paddingLR-s); display: -webkit-box; display: -ms-flexbox; display: flex; cursor: pointer; margin: 0 var(--td-comp-margin-s); border-radius: var(--td-radius-default); -webkit-transition: background-color 0.2s cubic-bezier(0.38, 0, 0.24, 1); transition: background-color 0.2s cubic-bezier(0.38, 0, 0.24, 1); } .oneid-transfer__list .oneid-transfer__list-item:first-child { margin-top: 0; } .oneid-transfer__list .oneid-transfer__list-item.oneid-is-disabled:hover { background: transparent; } .oneid-transfer__list-item:hover { background: var(--td-bg-color-container-hover); -webkit-transition: background-color 0.2s cubic-bezier(0.38, 0, 0.24, 1); transition: background-color 0.2s cubic-bezier(0.38, 0, 0.24, 1); } .oneid-transfer__list-item.oneid-is-checked { background: var(--td-brand-color-light); } .oneid-transfer__list-wrapper { position: relative; height: 100%; width: 100%; overflow: auto; padding: var(--td-comp-paddingTB-m) var(--td-comp-paddingLR-m); } .oneid-transfer__list-pagination { height: var(--td-comp-size-xs); vertical-align: middle; padding: var(--td-comp-paddingTB-m); } .oneid-transfer__list-footer { position: absolute; left: 0; bottom: 0; border-top: 1px solid var(--td-border-level-1-color); width: 100%; } .oneid-transfer__operations { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; margin: auto var(--td-comp-margin-s); vertical-align: middle; overflow: hidden; gap: var(--td-comp-margin-l); } .oneid-transfer__operations .oneid-icon { font-size: var(--td-comp-size-xxxs); } .oneid-transfer__operations .oneid-icon + .oneid-button__text { margin-left: 0; } .oneid-transfer__empty { text-align: center; position: absolute; color: var(--td-text-color-placeholder); top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } .oneid-transfer__search-wrapper { position: absolute; top: 0; width: 100%; padding: 0 var(--td-comp-margin-s); -webkit-box-sizing: border-box; box-sizing: border-box; } .oneid-transfer__search .oneid-transfer__list { height: 240px; } .oneid-transfer--with-tree .oneid-transfer__list { height: auto; } .oneid-transfer--with-tree .oneid-transfer__list .oneid-tree { padding: 0 var(--td-comp-paddingLR-m); margin: var(--td-comp-margin-s) 0; } .oneid-transfer__pagination .oneid-transfer__list { height: 240px; padding-bottom: calc(var(--td-comp-size-xs) + var(--td-comp-paddingTB-m) * 2); } .oneid-transfer__footer .oneid-transfer__list { height: 248px; padding-bottom: 48px; } .oneid-transfer__pagination.oneid-transfer__footer .oneid-transfer__list { height: 288px; padding-bottom: calc(var(--td-comp-size-xs) + var(--td-comp-paddingTB-m) * 2 + 48px); } .oneid-transfer__search.oneid-transfer__footer .oneid-transfer__list { height: 288px; padding-bottom: 48px; } .oneid-transfer__search.oneid-transfer__pagination .oneid-transfer__list { height: 280px; padding-bottom: 48px; } .oneid-transfer__search.oneid-transfer__footer.oneid-transfer__pagination .oneid-transfer__list { height: 328px; padding-bottom: 88px; } .oneid-transfer__wrapper .oneid-transfer__list { height: 320px; width: 206px; overflow: scroll; } .oneid-avatar { font: var(--td-font-body-medium); color: var(--td-text-color-primary); -webkit-box-sizing: border-box; box-sizing: border-box; margin: 0; padding: 0; list-style: none; position: relative; display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; background: var(--td-brand-color-focus); color: var(--td-text-color-brand); overflow: hidden; white-space: nowrap; vertical-align: middle; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-sizing: content-box; box-sizing: content-box; width: var(--td-comp-size-m); height: var(--td-comp-size-m); font-size: var(--td-font-size-body-large); line-height: var(--td-comp-size-m); } .oneid-avatar.oneid-avatar__icon { font-size: var(--td-comp-size-xxs); } .oneid-avatar--circle { border-radius: var(--td-radius-circle); } .oneid-avatar--round { border-radius: var(--td-radius-default); } .oneid-avatar.oneid-size-s { width: var(--td-comp-size-xs); height: var(--td-comp-size-xs); font-size: var(--td-font-size-body-medium); line-height: var(--td-comp-size-xs); } .oneid-avatar.oneid-size-s.oneid-avatar__icon { font-size: var(--td-comp-size-xxxs); } .oneid-avatar.oneid-size-l { width: var(--td-comp-size-xl); height: var(--td-comp-size-xl); font-size: var(--td-font-size-title-large); line-height: var(--td-comp-size-xl); } .oneid-avatar.oneid-size-l.oneid-avatar__icon { font-size: var(--td-comp-size-xs); } .oneid-avatar > .oneid-image__wrapper { max-width: 100%; max-height: 100%; } .oneid-avatar-group { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .oneid-avatar-group .oneid-avatar { border: 2px solid var(--td-bg-color-container); } .oneid-avatar-group.oneid-avatar--offset-right .oneid-avatar:not(:last-child) { margin-right: calc(0px - var(--td-size-3)); } .oneid-avatar-group.oneid-avatar--offset-right .oneid-avatar:not(:last-child).oneid-size-s { margin-right: calc(0px - var(--td-size-2)); } .oneid-avatar-group.oneid-avatar--offset-right .oneid-avatar:not(:last-child).oneid-size-l { margin-right: calc(0px - var(--td-size-4)); } .oneid-avatar-group.oneid-avatar--offset-left .oneid-avatar:nth-child(1) { z-index: 49; } .oneid-avatar-group.oneid-avatar--offset-left .oneid-avatar:nth-child(2) { z-index: 48; } .oneid-avatar-group.oneid-avatar--offset-left .oneid-avatar:nth-child(3) { z-index: 47; } .oneid-avatar-group.oneid-avatar--offset-left .oneid-avatar:nth-child(4) { z-index: 46; } .oneid-avatar-group.oneid-avatar--offset-left .oneid-avatar:nth-child(5) { z-index: 45; } .oneid-avatar-group.oneid-avatar--offset-left .oneid-avatar:nth-child(6) { z-index: 44; } .oneid-avatar-group.oneid-avatar--offset-left .oneid-avatar:nth-child(7) { z-index: 43; } .oneid-avatar-group.oneid-avatar--offset-left .oneid-avatar:nth-child(8) { z-index: 42; } .oneid-avatar-group.oneid-avatar--offset-left .oneid-avatar:nth-child(9) { z-index: 41; } .oneid-avatar-group.oneid-avatar--offset-left .oneid-avatar:nth-child(10) { z-index: 40; } .oneid-avatar-group.oneid-avatar--offset-left .oneid-avatar:nth-child(11) { z-index: 39; } .oneid-avatar-group.oneid-avatar--offset-left .oneid-avatar:nth-child(12) { z-index: 38; } .oneid-avatar-group.oneid-avatar--offset-left .oneid-avatar:nth-child(13) { z-index: 37; } .oneid-avatar-group.oneid-avatar--offset-left .oneid-avatar:nth-child(14) { z-index: 36; } .oneid-avatar-group.oneid-avatar--offset-left .oneid-avatar:nth-child(15) { z-index: 35; } .oneid-avatar-group.oneid-avatar--offset-left .oneid-avatar:nth-child(16) { z-index: 34; } .oneid-avatar-group.oneid-avatar--offset-left .oneid-avatar:nth-child(17) { z-index: 33; } .oneid-avatar-group.oneid-avatar--offset-left .oneid-avatar:nth-child(18) { z-index: 32; } .oneid-avatar-group.oneid-avatar--offset-left .oneid-avatar:nth-child(19) { z-index: 31; } .oneid-avatar-group.oneid-avatar--offset-left .oneid-avatar:nth-child(20) { z-index: 30; } .oneid-avatar-group.oneid-avatar--offset-left .oneid-avatar:nth-child(21) { z-index: 29; } .oneid-avatar-group.oneid-avatar--offset-left .oneid-avatar:nth-child(22) { z-index: 28; } .oneid-avatar-group.oneid-avatar--offset-left .oneid-avatar:nth-child(23) { z-index: 27; } .oneid-avatar-group.oneid-avatar--offset-left .oneid-avatar:nth-child(24) { z-index: 26; } .oneid-avatar-group.oneid-avatar--offset-left .oneid-avatar:nth-child(25) { z-index: 25; } .oneid-avatar-group.oneid-avatar--offset-left .oneid-avatar:nth-child(26) { z-index: 24; } .oneid-avatar-group.oneid-avatar--offset-left .oneid-avatar:nth-child(27) { z-index: 23; } .oneid-avatar-group.oneid-avatar--offset-left .oneid-avatar:nth-child(28) { z-index: 22; } .oneid-avatar-group.oneid-avatar--offset-left .oneid-avatar:nth-child(29) { z-index: 21; } .oneid-avatar-group.oneid-avatar--offset-left .oneid-avatar:nth-child(30) { z-index: 20; } .oneid-avatar-group.oneid-avatar--offset-left .oneid-avatar:nth-child(31) { z-index: 19; } .oneid-avatar-group.oneid-avatar--offset-left .oneid-avatar:nth-child(32) { z-index: 18; } .oneid-avatar-group.oneid-avatar--offset-left .oneid-avatar:nth-child(33) { z-index: 17; } .oneid-avatar-group.oneid-avatar--offset-left .oneid-avatar:nth-child(34) { z-index: 16; } .oneid-avatar-group.oneid-avatar--offset-left .oneid-avatar:nth-child(35) { z-index: 15; } .oneid-avatar-group.oneid-avatar--offset-left .oneid-avatar:nth-child(36) { z-index: 14; } .oneid-avatar-group.oneid-avatar--offset-left .oneid-avatar:nth-child(37) { z-index: 13; } .oneid-avatar-group.oneid-avatar--offset-left .oneid-avatar:nth-child(38) { z-index: 12; } .oneid-avatar-group.oneid-avatar--offset-left .oneid-avatar:nth-child(39) { z-index: 11; } .oneid-avatar-group.oneid-avatar--offset-left .oneid-avatar:nth-child(40) { z-index: 10; } .oneid-avatar-group.oneid-avatar--offset-left .oneid-avatar:nth-child(41) { z-index: 9; } .oneid-avatar-group.oneid-avatar--offset-left .oneid-avatar:nth-child(42) { z-index: 8; } .oneid-avatar-group.oneid-avatar--offset-left .oneid-avatar:nth-child(43) { z-index: 7; } .oneid-avatar-group.oneid-avatar--offset-left .oneid-avatar:nth-child(44) { z-index: 6; } .oneid-avatar-group.oneid-avatar--offset-left .oneid-avatar:nth-child(45) { z-index: 5; } .oneid-avatar-group.oneid-avatar--offset-left .oneid-avatar:nth-child(46) { z-index: 4; } .oneid-avatar-group.oneid-avatar--offset-left .oneid-avatar:nth-child(47) { z-index: 3; } .oneid-avatar-group.oneid-avatar--offset-left .oneid-avatar:nth-child(48) { z-index: 2; } .oneid-avatar-group.oneid-avatar--offset-left .oneid-avatar:nth-child(49) { z-index: 1; } .oneid-avatar-group.oneid-avatar--offset-left .oneid-avatar:nth-child(50) { z-index: 0; } .oneid-avatar-group.oneid-avatar--offset-left .oneid-avatar:not(:first-child) { margin-left: calc(0px - var(--td-size-3)); } .oneid-avatar-group.oneid-avatar--offset-left .oneid-avatar:not(:first-child).oneid-size-s { margin-left: calc(0px - var(--td-size-2)); } .oneid-avatar-group.oneid-avatar--offset-left .oneid-avatar:not(:first-child).oneid-size-l { margin-left: calc(0px - var(--td-size-4)); } :root, :root[theme-mode=light] { --skeleton-animation-gradient: rgba(0, 0, 0, 0.04); } :root[theme-mode=dark] { --skeleton-animation-gradient: rgba(255, 255, 255, 0.06); } .oneid-skeleton { font: var(--td-font-body-medium); color: var(--td-text-color-primary); -webkit-box-sizing: border-box; box-sizing: border-box; margin: 0; padding: 0; list-style: none; } .oneid-skeleton__row { display: -webkit-box; display: -ms-flexbox; display: flex; margin-bottom: var(--td-comp-margin-l); -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .oneid-skeleton__row:only-child, .oneid-skeleton__row:last-child { margin-bottom: 0; } .oneid-skeleton__col { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; background-color: var(--td-bg-color-secondarycontainer); color: var(--td-text-color-disabled); margin-right: var(--td-comp-margin-l); } .oneid-skeleton__col:first-child:last-child, .oneid-skeleton__col:last-child { margin-right: 0; } .oneid-skeleton--type-text { width: 100%; height: var(--td-font-size-body-large); border-radius: var(--td-radius-default); } .oneid-skeleton--type-rect { width: 120px; height: 88px; border-radius: var(--td-radius-default); } .oneid-skeleton--type-circle { width: 32px; height: 32px; border-radius: var(--td-radius-circle); -ms-flex-negative: 0; flex-shrink: 0; } .oneid-skeleton--animation-gradient { position: relative; overflow-x: hidden; } .oneid-skeleton--animation-gradient::after { content: " "; position: absolute; bottom: 0; left: 0; right: 0; top: 0; background: -webkit-gradient(linear, left top, right top, from(rgba(255, 255, 255, 0)), color-stop(var(--skeleton-animation-gradient)), to(rgba(255, 255, 255, 0))); background: linear-gradient(90deg, rgba(255, 255, 255, 0), var(--skeleton-animation-gradient), rgba(255, 255, 255, 0)); -webkit-animation: t-skeleton--gradient 1.5s linear 2s infinite; animation: t-skeleton--gradient 1.5s linear 2s infinite; } .oneid-skeleton--animation-flashed { -webkit-animation: t-skeleton--flashed 2s linear 2s infinite; animation: t-skeleton--flashed 2s linear 2s infinite; } @-webkit-keyframes t-skeleton--gradient { 0% { -webkit-transform: translateX(-100%) skewX(-15deg); transform: translateX(-100%) skewX(-15deg); } 100% { -webkit-transform: translateX(100%) skewX(-15deg); transform: translateX(100%) skewX(-15deg); } } @keyframes t-skeleton--gradient { 0% { -webkit-transform: translateX(-100%) skewX(-15deg); transform: translateX(-100%) skewX(-15deg); } 100% { -webkit-transform: translateX(100%) skewX(-15deg); transform: translateX(100%) skewX(-15deg); } } @-webkit-keyframes t-skeleton--flashed { 0% { opacity: 1; } 50% { background-color: rgba(230, 230, 230, 0.3); opacity: 0.3; } 100% { opacity: 1; } } @keyframes t-skeleton--flashed { 0% { opacity: 1; } 50% { background-color: rgba(230, 230, 230, 0.3); opacity: 0.3; } 100% { opacity: 1; } } .oneid-color-picker__panel { padding: 0; width: 256px; background: var(--td-bg-color-container); -webkit-box-shadow: var(--td-shadow-2), var(--td-shadow-inset-top), var(--td-shadow-inset-right), var(--td-shadow-inset-bottom), var(--td-shadow-inset-left); box-shadow: var(--td-shadow-2), var(--td-shadow-inset-top), var(--td-shadow-inset-right), var(--td-shadow-inset-bottom), var(--td-shadow-inset-left); border-radius: var(--td-radius-medium); -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .oneid-popup__content .oneid-color-picker__panel { background: transparent; -webkit-box-shadow: unset; box-shadow: unset; } .oneid-color-picker { font: var(--td-font-body-medium); color: var(--td-text-color-primary); -webkit-box-sizing: border-box; box-sizing: border-box; margin: 0; padding: 0; list-style: none; } .oneid-color-picker.oneid-popup__content { -webkit-box-shadow: var(--td-shadow-2), var(--td-shadow-inset-top), var(--td-shadow-inset-right), var(--td-shadow-inset-bottom), var(--td-shadow-inset-left); box-shadow: var(--td-shadow-2), var(--td-shadow-inset-top), var(--td-shadow-inset-right), var(--td-shadow-inset-bottom), var(--td-shadow-inset-left); } .oneid-color-picker__icon { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; font-size: var(--td-comp-size-xxxs); background: transparent; -webkit-transition: 0.2s linear; transition: 0.2s linear; color: var(--td-text-color-secondary); border-radius: var(--td-radius-default); cursor: pointer; } .oneid-color-picker__icon:hover { background: var(--td-bg-color-container-hover); -webkit-transition: 0.2s linear; transition: 0.2s linear; } .oneid-color-picker__icon.oneid-is-disabled { color: var(--td-text-color-disabled); pointer-events: none; } .oneid-color-picker__head { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; padding: var(--td-pop-padding-xl); position: relative; z-index: 2; } .oneid-color-picker__head .oneid-color-picker__close { -ms-flex-negative: 0; flex-shrink: 0; } .oneid-color-picker__head + .oneid-color-picker__body { padding-top: 0; } .oneid-color-picker__body { padding: var(--td-pop-padding-xl); padding-bottom: calc(var(--td-pop-padding-xl) - 4px); } .oneid-color-picker__thumb { position: absolute; z-index: 1; outline: none; border-color: currentcolor; width: calc(var(--td-comp-size-xxxs) + var(--td-size-1)); height: calc(var(--td-comp-size-xxxs) + var(--td-size-1)); border-radius: var(--td-radius-circle); -webkit-box-shadow: var(--td-shadow-1); box-shadow: var(--td-shadow-1); background: var(--td-text-color-anti); color: var(--td-text-color-brand); padding: 2px; -webkit-box-sizing: border-box; box-sizing: border-box; } .oneid-color-picker__thumb::before { content: ""; width: 100%; height: 100%; background: currentcolor; border-radius: var(--td-radius-circle); display: block; } .oneid-color-picker__saturation { height: 160px; border-radius: var(--td-radius-default); position: relative; overflow: hidden; background: transparent; } .oneid-color-picker__saturation::before, .oneid-color-picker__saturation::after { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .oneid-color-picker__saturation::before { /* stylelint-disable-next-line color-no-hex */ background: -webkit-gradient(linear, left top, right top, from(#fff), to(transparent)); background: linear-gradient(90deg, #fff, transparent); } .oneid-color-picker__saturation::after { /* stylelint-disable-next-line color-no-hex */ background: -webkit-gradient(linear, left bottom, left top, from(#000), to(transparent)); background: linear-gradient(0deg, #000, transparent); } .oneid-color-picker__saturation .oneid-color-picker__thumb { width: calc(var(--td-comp-size-xxxs) + var(--td-size-1)); height: calc(var(--td-comp-size-xxxs) + var(--td-size-1)); border-radius: var(--td-radius-circle); -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } .oneid-color-picker__slider-wrapper { border-radius: 4px; padding: 0 calc((var(--td-comp-size-xxxs) + var(--td-size-1)) / 2); position: relative; } .oneid-color-picker__slider-wrapper--hue-type { /* stylelint-disable-next-line color-named */ background: red; } .oneid-color-picker__slider-wrapper--alpha-type { background: var(--td-text-color-anti); /* stylelint-disable-next-line color-no-hex */ background-image: linear-gradient(45deg, #c5c5c5 25%, transparent 0, transparent 75%, #c5c5c5 0, #c5c5c5), linear-gradient(45deg, #c5c5c5 25%, transparent 0, transparent 75%, #c5c5c5 0, #c5c5c5); background-size: 6px 6px; background-position: 0 0, 3px 3px; } .oneid-color-picker__slider-padding { position: absolute; left: 0; top: 0; width: 100%; height: 8px; border-radius: 4px; } .oneid-color-picker__slider { height: 8px; position: relative; border-radius: 4px; cursor: pointer; color: transparent; outline: none; z-index: 1; } .oneid-color-picker__slider .oneid-color-picker__thumb { -webkit-transform: translate(calc((var(--td-comp-size-xxxs) + var(--td-size-1)) * -0.5), -50%); transform: translate(calc((var(--td-comp-size-xxxs) + var(--td-size-1)) * -0.5), -50%); top: 50%; } .oneid-color-picker__slider .oneid-color-picker__rail { position: absolute; top: 0; left: 0; width: 100%; height: 100%; overflow: hidden; border-radius: inherit; } .oneid-color-picker__alpha, .oneid-color-picker__format { margin: var(--td-comp-margin-m) 0 0 0; } .oneid-color-picker__hue { /* stylelint-disable color-no-hex, color-named */ background: -webkit-gradient(linear, left top, right top, from(red), color-stop(17%, #ff0), color-stop(33%, #0f0), color-stop(50%, #0ff), color-stop(67%, #00f), color-stop(83%, #f0f), to(red)); background: linear-gradient(90deg, red, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, red); } .oneid-color-picker__alpha .oneid-color-picker__rail { background: -webkit-gradient(linear, left top, right top, from(transparent), to(currentcolor)); background: linear-gradient(to right, transparent, currentcolor); } .oneid-color-picker__sliders-wrapper { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; margin: var(--td-comp-margin-m) 0; } .oneid-color-picker__sliders { width: 100%; } .oneid-color-picker__sliders-preview { -ms-flex-negative: 0; flex-shrink: 0; margin-left: var(--td-comp-margin-m); width: var(--td-comp-size-s); height: var(--td-comp-size-s); border-radius: var(--td-radius-default); overflow: hidden; background: var(--td-text-color-anti); /* stylelint-disable-next-line color-no-hex */ background-image: linear-gradient(45deg, #c5c5c5 25%, transparent 0, transparent 75%, #c5c5c5 0, #c5c5c5), linear-gradient(45deg, #c5c5c5 25%, transparent 0, transparent 75%, #c5c5c5 0, #c5c5c5); background-size: 6px 6px; background-position: 0 0, 3px 3px; } .oneid-color-picker__sliders-preview-inner { display: block; width: 100%; height: 100%; } .oneid-color-picker__gradient { padding: 0; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; margin-bottom: var(--td-comp-margin-m); } .oneid-color-picker__gradient-slider { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; } .oneid-color-picker__gradient-degree { position: relative; -ms-flex-negative: 0; flex-shrink: 0; margin-left: var(--td-comp-margin-m); width: var(--td-comp-size-xxl); } .oneid-color-picker__gradient-degree .oneid-input { margin: 0; font: var(--td-font-body-small); } .oneid-color-picker__gradient-degree .oneid-input-number { width: 100%; padding: 0; } .oneid-color-picker__gradient .gradient-thumbs { position: absolute; width: 100%; height: 100%; top: 0; left: 0; margin: 0; padding: 0; list-style: none; border-radius: inherit; cursor: pointer; } .oneid-color-picker__gradient .gradient-thumbs__item { top: 50%; left: 0; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); z-index: 0; cursor: pointer; } .oneid-color-picker__gradient .gradient-thumbs__item::before { display: none; } .oneid-color-picker__gradient .gradient-thumbs__item.oneid-is-active { z-index: 1; outline: 2px solid var(--td-component-border); } .oneid-color-picker__gradient .gradient-thumbs__item-inner { display: block; width: 100%; height: 100%; border-radius: var(--td-radius-circle); overflow: hidden; } .oneid-color-picker__gradient .gradient-thumbs__item-inner::before { content: ""; width: 100%; height: 100%; display: block; background-color: currentcolor; } .oneid-color-picker__format { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } .oneid-color-picker__format--item:first-child { -ms-flex-negative: 0; flex-shrink: 0; } .oneid-color-picker__format--item:last-child { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; } .oneid-color-picker__format--item .oneid-size-m, .oneid-color-picker__format--item .oneid-input.oneid-size-m { font: var(--td-font-body-small); } .oneid-color-picker__format--item .oneid-input-number .oneid-input { margin: 0; } .oneid-color-picker__format--item .input-group { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -ms-flex-pack: distribute; justify-content: space-around; margin-left: var(--td-comp-margin-s); } .oneid-color-picker__format--item .input-group__item { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; width: 0; margin-left: -1px; } .oneid-color-picker__format--item .input-group__item .oneid-input { padding: 0 1px; } .oneid-color-picker__format--item .input-group__item .oneid-input:focus, .oneid-color-picker__format--item .input-group__item .oneid-input:focus-within, .oneid-color-picker__format--item .input-group__item .oneid-input:hover { z-index: 1; } .oneid-color-picker__format--item .input-group__item:not(:first-child):not(:last-child) .oneid-input { border-radius: 0; } .oneid-color-picker__format--item .input-group__item:first-child:not(:last-child) .oneid-input { border-top-right-radius: 0; border-bottom-right-radius: 0; } .oneid-color-picker__format--item .input-group__item:last-child:not(:first-child) .oneid-input { border-top-left-radius: 0; border-bottom-left-radius: 0; } .oneid-color-picker__format--item .input-group .oneid-input-number { width: 100%; padding: 0; max-width: 100%; } .oneid-color-picker__format-mode-select { width: 72px; display: -webkit-box; display: -ms-flexbox; display: flex; } .oneid-color-picker__format-mode-select .oneid-select, .oneid-color-picker__format-mode-select .oneid-input { padding-right: 0; } .oneid-color-picker__format-mode-select .oneid-input--prefix > .oneid-input__suffix { padding-left: 0; } .oneid-color-picker__format-mode-select .oneid-select__right-icon { margin-right: var(--td-comp-margin-xs); } .oneid-color-picker__swatches-wrap { margin-top: var(--td-comp-margin-m); position: relative; } .oneid-color-picker__swatches-wrap .oneid-color-picker__swatches + .oneid-color-picker__swatches { margin-top: var(--td-comp-margin-m); } .oneid-color-picker__swatches-wrap .oneid-color-picker__swatches--title { font: var(--td-font-body-small); padding: 0; color: var(--td-text-color-primary); display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } .oneid-color-picker__swatches-wrap .oneid-color-picker__swatches--actions { margin-left: auto; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; font-size: 0; } .oneid-color-picker__swatches-wrap .oneid-color-picker__swatches--actions .oneid-color-picker__icon { width: var(--td-comp-size-xxxs); height: var(--td-comp-size-xxxs); margin-left: var(--td-comp-margin-s); } .oneid-color-picker__swatches-wrap .oneid-color-picker__swatches--items { width: 100%; list-style: none; display: grid; grid-template-columns: repeat(10, var(--td-comp-size-xxxs)); gap: calc((256px - (var(--td-pop-padding-xl) * 2 + var(--td-comp-size-xxxs) * 10)) / 9) calc((256px - (var(--td-pop-padding-xl) * 2 + var(--td-comp-size-xxxs) * 10)) / 9); max-height: calc(4 * (var(--td-comp-size-xxxs) + (256px - (var(--td-pop-padding-xl) * 2 + var(--td-comp-size-xxxs) * 10)) / 9)); overflow-x: hidden; overflow-y: auto; padding: calc(var(--td-pop-padding-xl) - 8px); position: relative; left: calc(0px - (var(--td-pop-padding-xl) - 8px)); -webkit-box-sizing: content-box; box-sizing: content-box; } .oneid-color-picker__swatches-wrap .oneid-color-picker__swatches--item { display: -webkit-box; display: -ms-flexbox; display: flex; width: var(--td-comp-size-xxxs); height: var(--td-comp-size-xxxs); border-radius: var(--td-radius-default); padding: 0; overflow: hidden; cursor: pointer; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; position: relative; -webkit-transform-origin: center; transform-origin: center; -webkit-transition: all 0.2s cubic-bezier(0.38, 0, 0.24, 1); transition: all 0.2s cubic-bezier(0.38, 0, 0.24, 1); -webkit-box-sizing: border-box; box-sizing: border-box; } .oneid-color-picker__swatches-wrap .oneid-color-picker__swatches--item:hover { -webkit-transform: scale(1.25); transform: scale(1.25); -webkit-transform-origin: center; transform-origin: center; } .oneid-color-picker__swatches-wrap .oneid-color-picker__swatches--item__color { width: 100%; height: 100%; position: relative; overflow: hidden; border: 1px solid var(--td-component-border); border-radius: var(--td-radius-default); -ms-flex-negative: 0; flex-shrink: 0; } .oneid-color-picker__swatches-wrap .oneid-color-picker__swatches--item__inner { width: 100%; height: 100%; display: block; } .oneid-color-picker__swatches-wrap .oneid-color-picker__swatches--item:not(.oneid-is-active):hover { padding: 0; } .oneid-color-picker__swatches-wrap .oneid-color-picker__swatches--item.oneid-is-active .oneid-color-picker__swatches--item__color, .oneid-color-picker__swatches-wrap .oneid-color-picker__swatches--item.oneid-is-active .oneid-color-picker__swatches--color { border-color: var(--td-text-color-brand); } .oneid-color-picker__swatches-wrap .oneid-color-picker__swatches--color { width: 100%; height: 100%; position: relative; overflow: hidden; border-radius: var(--td-radius-default); -webkit-box-sizing: border-box; box-sizing: border-box; } .oneid-color-picker__swatches-wrap .oneid-color-picker__swatches--inner { width: 100%; height: 100%; display: block; border-radius: var(--td-radius-default); -webkit-box-shadow: var(--td-shadow-inset-top), var(--td-shadow-inset-right), var(--td-shadow-inset-bottom), var(--td-shadow-inset-left); box-shadow: var(--td-shadow-inset-top), var(--td-shadow-inset-right), var(--td-shadow-inset-bottom), var(--td-shadow-inset-left); } .oneid-color-picker__trigger--default { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .oneid-color-picker__trigger--default > .oneid-input { width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; } .oneid-color-picker__trigger--default .oneid-input { padding: 0 var(--td-comp-paddingLR-s) 0 var(--td-comp-paddingLR-xs); } .oneid-color-picker__trigger--default__color { width: 100%; height: 100%; -webkit-box-sizing: border-box; box-sizing: border-box; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .oneid-color-picker__trigger--default__color .color-inner { border: 1px solid var(--td-scrollbar-color); display: block; width: calc(var(--td-comp-size-xs) - 2px); height: calc(var(--td-comp-size-xs) - 2px); color: transparent; position: relative; border-radius: var(--td-radius-small); } .oneid-color-picker__trigger--default__color .color-inner.oneid-size-s { width: calc(var(--td-comp-size-xxs) - 2px); height: calc(var(--td-comp-size-xxs) - 2px); } .oneid-color-picker__trigger--default__color .color-inner.oneid-size-l { width: calc(var(--td-comp-size-s) - 2px); height: calc(var(--td-comp-size-s) - 2px); } .oneid-color-picker__gradient-slider { padding: 0 calc((var(--td-comp-size-xxxs) + var(--td-size-1)) / 2); border-radius: 4px; } .oneid-color-picker__gradient-slider .oneid-color-picker--bg-alpha { background: var(--td-text-color-anti); /* stylelint-disable-next-line color-no-hex */ background-image: linear-gradient(45deg, #c5c5c5 25%, transparent 0, transparent 75%, #c5c5c5 0, #c5c5c5), linear-gradient(45deg, #c5c5c5 25%, transparent 0, transparent 75%, #c5c5c5 0, #c5c5c5); background-size: 6px 6px; background-position: 0 0, 3px 3px; } .oneid-color-picker__panel.oneid-is-disabled .oneid-color-picker__saturation, .oneid-color-picker__panel.oneid-is-disabled .oneid-color-picker__slider, .oneid-color-picker__panel.oneid-is-disabled .oneid-color-picker__swatches--item { opacity: 0.8; cursor: not-allowed; } .oneid-color-picker__panel.oneid-is-disabled .oneid-color-picker__gradient-slider .gradient-thumbs, .oneid-color-picker__panel.oneid-is-disabled .oneid-color-picker__gradient-slider .gradient-thumbs__item { cursor: not-allowed; } .oneid-color-picker__panel.oneid-is-disabled .oneid-color-picker__swatches--item:hover { padding: 0; } .oneid-color-picker__select-options > .oneid-popup__content { -webkit-box-shadow: var(--td-shadow-1), var(--td-shadow-inset-top), var(--td-shadow-inset-right), var(--td-shadow-inset-bottom), var(--td-shadow-inset-left); box-shadow: var(--td-shadow-1), var(--td-shadow-inset-top), var(--td-shadow-inset-right), var(--td-shadow-inset-bottom), var(--td-shadow-inset-left); } .oneid-card { font: var(--td-font-body-medium); margin: 0; padding: 0; list-style: none; position: relative; -webkit-box-sizing: border-box; box-sizing: border-box; border-radius: var(--td-radius-medium); background-color: var(--td-bg-color-container); color: var(--td-text-color-primary); -webkit-transition: -webkit-box-shadow 0.2s cubic-bezier(0.38, 0, 0.24, 1); transition: -webkit-box-shadow 0.2s cubic-bezier(0.38, 0, 0.24, 1); transition: box-shadow 0.2s cubic-bezier(0.38, 0, 0.24, 1); transition: box-shadow 0.2s cubic-bezier(0.38, 0, 0.24, 1), -webkit-box-shadow 0.2s cubic-bezier(0.38, 0, 0.24, 1); } .oneid-card--bordered { border: 1px solid var(--td-component-border); } .oneid-card--shadow-hover:hover, .oneid-card--shadow { -webkit-box-shadow: var(--td-shadow-1); box-shadow: var(--td-shadow-1); } .oneid-card__cover { display: flow-root; } .oneid-card__cover img { display: flow-root; width: 100%; max-height: 100%; border-radius: var(--td-radius-default) var(--td-radius-default) 0 0; } .oneid-card__body { display: flow-root; padding: var(--td-comp-paddingTB-l) var(--td-comp-paddingLR-xl); } .oneid-card__header { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -ms-flex-align: center; align-items: center; padding: var(--td-comp-paddingTB-l) var(--td-comp-paddingLR-xl); position: relative; } .oneid-card__header-wrapper { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .oneid-card__header + .oneid-card__cover img { border-radius: 0; } .oneid-card__footer { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; padding: var(--td-comp-paddingTB-l) var(--td-comp-paddingLR-xl); } .oneid-card__footer-wrapper { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; } .oneid-size-s .oneid-card__body { padding: var(--td-comp-paddingTB-s) var(--td-comp-paddingLR-l); } .oneid-size-s .oneid-card__header { padding: var(--td-comp-paddingTB-s) var(--td-comp-paddingLR-l); } .oneid-size-s .oneid-card__footer { padding: var(--td-comp-paddingTB-s) var(--td-comp-paddingLR-l); } .oneid-card__avatar { margin-right: var(--td-comp-margin-l); width: var(--td-comp-size-xxxl); height: var(--td-comp-size-xxxl); } .oneid-card__title { font: var(--td-font-title-medium); color: var(--td-text-color-primary); margin-right: var(--td-comp-margin-l); word-break: break-all; } .oneid-card__subtitle { font: var(--td-font-body-medium); color: var(--td-text-color-secondary); word-break: break-all; } .oneid-card__description { font: var(--td-font-body-medium); color: var(--td-text-color-secondary); margin-top: var(--td-comp-margin-xs); word-break: break-all; } .oneid-card__actions { float: right; color: var(--td-brand-color); } .oneid-card__title--bordered { border-bottom: 1px solid var(--td-component-border); } .oneid-collapse { font: var(--td-font-body-medium); color: var(--td-text-color-primary); -webkit-box-sizing: border-box; box-sizing: border-box; margin: 0; padding: 0; list-style: none; border: solid 1px var(--td-component-border); border-bottom: 0; background: var(--td-bg-color-container); } .oneid-collapse.oneid--border-less { border: none; } .oneid-collapse.oneid--border-less .oneid-collapse-panel__header { border-bottom: none; } .oneid-collapse.oneid--border-less .oneid-collapse-panel__body { background: var(--td-bg-color-container); border: none; } .oneid-collapse-panel__icon { -webkit-transition: all 0.2s cubic-bezier(0.38, 0, 0.24, 1); transition: all 0.2s cubic-bezier(0.38, 0, 0.24, 1); cursor: pointer; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .oneid-collapse-panel__icon > .oneid-fake-arrow { -webkit-transform: rotate(-90deg); transform: rotate(-90deg); -webkit-transition: all 0.2s cubic-bezier(0.38, 0, 0.24, 1); transition: all 0.2s cubic-bezier(0.38, 0, 0.24, 1); } .oneid-collapse-panel__icon--left { margin-right: var(--td-comp-margin-s); } .oneid-collapse-panel__icon--right { margin-left: var(--td-comp-margin-s); } .oneid-collapse-panel__icon--active > .oneid-fake-arrow { -webkit-transform: rotate(0); transform: rotate(0); } .oneid-collapse-panel__icon:hover { background-color: var(--td-bg-color-container-hover); border-radius: var(--td-radius-small); } .oneid-collapse-panel__wrapper { overflow: hidden; } .oneid-collapse-panel__wrapper.oneid--borderless .oneid-collapse-panel__header { border-bottom: none; } .oneid-collapse-panel__wrapper.oneid--borderless .oneid-collapse-panel__body { background: var(--td-bg-color-container); border: none; } .oneid-collapse-panel__wrapper .oneid-collapse-panel__header { padding: var(--td-comp-paddingTB-m) var(--td-comp-paddingLR-l); border-bottom: solid 1px var(--td-component-border); font: var(--td-font-title-small); display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .oneid-collapse-panel__wrapper .oneid-collapse-panel__header--blank { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; } .oneid-collapse-panel__wrapper .oneid-collapse-panel__header.oneid-is-clickable { cursor: pointer; } .oneid-collapse-panel__wrapper .oneid-collapse-panel__header-left, .oneid-collapse-panel__wrapper .oneid-collapse-panel__header-right, .oneid-collapse-panel__wrapper .oneid-collapse-panel__header-right-content { display: -webkit-box; display: -ms-flexbox; display: flex; } .oneid-collapse-panel__wrapper .oneid-collapse-panel__body { border-bottom: solid 1px var(--td-component-border); background: var(--td-bg-color-secondarycontainer); overflow: inherit; } .oneid-collapse-panel__wrapper .oneid-collapse-panel__body--collapsed { border: none; } .oneid-collapse-panel__wrapper .oneid-collapse-panel__content { padding: var(--td-comp-paddingTB-m) var(--td-comp-paddingLR-l) var(--td-comp-paddingTB-m) calc(var(--td-comp-paddingLR-l) + var(--td-comp-margin-xxl)); color: var(--td-text-color-secondary); } .oneid-collapse-panel.oneid-is-disabled .oneid-collapse-panel__header { cursor: not-allowed; color: var(--td-text-color-disabled); } .oneid-collapse-panel.oneid-is-disabled .oneid-collapse-panel__icon { cursor: not-allowed; pointer-events: none; } .oneid-collapse-panel.oneid-is-disabled .oneid-collapse-panel__body { background: var(--td-bg-color-component-disabled); } .oneid-collapse-panel.oneid-is-disabled .oneid-collapse-panel__content { color: var(--td-text-color-disabled); } .oneid-watermark { position: relative; } .oneid-timeline { font: var(--td-font-body-medium); color: var(--td-text-color-primary); -webkit-box-sizing: border-box; box-sizing: border-box; margin: 0; padding: 0; list-style: none; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } .oneid-timeline-item { min-height: 72px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; position: relative; } .oneid-timeline-item__label.oneid-timeline-item__label--alternate { position: absolute; } .oneid-timeline-item__wrapper { width: 8px; position: relative; } .oneid-timeline-item__wrapper .oneid-timeline-item__dot { -webkit-box-sizing: unset; box-sizing: unset; position: absolute; width: 4px; height: 4px; border: 2px solid transparent; border-radius: 50%; top: 8px; } .oneid-timeline-item__wrapper .oneid-timeline-item__dot--primary { border-color: var(--td-brand-color); } .oneid-timeline-item__wrapper .oneid-timeline-item__dot--default { border-color: var(--td-component-border); } .oneid-timeline-item__wrapper .oneid-timeline-item__dot--success { border-color: var(--td-success-color); } .oneid-timeline-item__wrapper .oneid-timeline-item__dot--warning { border-color: var(--td-warning-color); } .oneid-timeline-item__wrapper .oneid-timeline-item__dot--error { border-color: var(--td-error-color); } .oneid-timeline-item__wrapper .oneid-timeline-item__dot--custom { position: relative; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); top: 4px; border: 0; } .oneid-timeline-item__wrapper .oneid-timeline-item__dot--custom .oneid-timeline-item__dot-content { position: absolute; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); top: 0; } .oneid-timeline-item__wrapper .oneid-timeline-item__tail { position: absolute; border-left: 2px solid transparent; left: 50%; height: calc(100% - 24px); bottom: 0; -webkit-transform: translateX(-50%); transform: translateX(-50%); padding-bottom: var(--td-comp-size-s); border-color: var(--td-component-border); -webkit-box-sizing: border-box; box-sizing: border-box; } .oneid-timeline-item__wrapper .oneid-timeline-item__tail--theme-dot { border-style: dashed; border-right: 0; } .oneid-timeline-item__label { color: var(--td-text-color-secondary); font-size: var(--td-font-size-body-medium); } .oneid-timeline-item__content { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; padding-left: var(--td-comp-margin-l); font-size: var(--td-font-size-body-large); } .oneid-timeline-item--last .oneid-timeline-item__tail { display: none; } .oneid-timeline-label.oneid-timeline-label--alternate.oneid-timeline-left .oneid-timeline-item__label { text-align: right; left: 0; } .oneid-timeline-label.oneid-timeline-label--alternate.oneid-timeline-left .oneid-timeline-item__wrapper { margin-left: 100px; } .oneid-timeline-label.oneid-timeline-label--alternate.oneid-timeline-right .oneid-timeline-item__label { text-align: left; right: 0; } .oneid-timeline-label.oneid-timeline-label--alternate.oneid-timeline-right .oneid-timeline-item__wrapper { margin-right: 100px; } .oneid-timeline-right .oneid-timeline-item { -webkit-box-orient: horizontal; -webkit-box-direction: reverse; -ms-flex-direction: row-reverse; flex-direction: row-reverse; } .oneid-timeline-right .oneid-timeline-item__content { text-align: right; padding-left: 0; padding-right: var(--td-comp-margin-l); } .oneid-timeline-alternate .oneid-timeline-item-left { margin-left: calc(50% - 4px); } .oneid-timeline-alternate .oneid-timeline-item-right { text-align: right; -webkit-box-orient: horizontal; -webkit-box-direction: reverse; -ms-flex-direction: row-reverse; flex-direction: row-reverse; margin-right: calc(50% - 4px); } .oneid-timeline-alternate .oneid-timeline-item-right .oneid-timeline-item__content { padding-right: var(--td-comp-margin-l); padding-left: 0; } .oneid-timeline-label.oneid-timeline-alternate .oneid-timeline-item__label { width: 100%; } .oneid-timeline-label.oneid-timeline-alternate .oneid-timeline-item-left .oneid-timeline-item__label--alternate { left: 0; -webkit-transform: translateX(-100%); transform: translateX(-100%); text-align: right; padding-right: var(--td-comp-margin-l); } .oneid-timeline-label.oneid-timeline-alternate .oneid-timeline-item-right .oneid-timeline-item__label--alternate { right: 0; -webkit-transform: translateX(100%); transform: translateX(100%); text-align: left; padding-left: var(--td-comp-margin-l); } .oneid-timeline-horizontal { min-height: 200px; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .oneid-timeline-horizontal .oneid-timeline-item { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; padding-right: 8px; min-width: 160px; } .oneid-timeline-horizontal .oneid-timeline-item__wrapper { width: 100%; height: 8px; } .oneid-timeline-horizontal .oneid-timeline-item__wrapper .oneid-timeline-item__dot { position: absolute; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); left: unset; width: 4px; height: 4px; border-radius: 50%; } .oneid-timeline-horizontal .oneid-timeline-item__wrapper .oneid-timeline-item__dot--custom { position: relative; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); border: 0; } .oneid-timeline-horizontal .oneid-timeline-item__wrapper .oneid-timeline-item__dot--custom .oneid-timeline-item__dot-content { position: absolute; left: 0; -webkit-transform: translateY(-50%); transform: translateY(-50%); top: 50%; } .oneid-timeline-horizontal .oneid-timeline-item__wrapper .oneid-timeline-item__tail { left: calc(8px + var(--td-comp-margin-s)); top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); width: calc(100% - (8px + var(--td-comp-margin-s))); border: 0; border-top: 2px solid transparent; padding-bottom: 0; border-color: var(--td-component-border); } .oneid-timeline-horizontal .oneid-timeline-item__wrapper .oneid-timeline-item__tail--theme-dot { border-style: dashed; border-right: 0; } .oneid-timeline-horizontal .oneid-timeline-item__content { padding-left: unset; padding-top: var(--td-comp-margin-l); -webkit-box-flex: unset; -ms-flex: unset; flex: unset; } .oneid-timeline-vertical .oneid-timeline-item__content { padding-bottom: var(--td-comp-margin-l); } .oneid-timeline-label.oneid-timeline-horizontal.oneid-timeline-top .oneid-timeline-item__label--alternate { top: 0; width: 100%; -webkit-transform: translateY(-100%); transform: translateY(-100%); padding-bottom: 0; } .oneid-timeline-label.oneid-timeline-horizontal.oneid-timeline-bottom .oneid-timeline-item { -webkit-box-orient: vertical; -webkit-box-direction: reverse; -ms-flex-direction: column-reverse; flex-direction: column-reverse; } .oneid-timeline-label.oneid-timeline-horizontal.oneid-timeline-bottom .oneid-timeline-item__wrapper { padding-top: 0; } .oneid-timeline-label.oneid-timeline-horizontal.oneid-timeline-bottom .oneid-timeline-item__label--alternate { padding-top: var(--td-comp-margin-l); bottom: 0; width: 100%; -webkit-transform: translateY(100%); transform: translateY(100%); } .oneid-timeline-label.oneid-timeline-horizontal.oneid-timeline-bottom .oneid-timeline-item__content { padding-top: 0; padding-bottom: var(--td-comp-margin-l); } .oneid-timeline-label.oneid-timeline-horizontal.oneid-timeline-alternate .oneid-timeline-item-top .oneid-timeline-item__label--alternate { top: 0; width: 100%; -webkit-transform: translateY(-100%); transform: translateY(-100%); padding-bottom: var(--td-comp-margin-l); } .oneid-timeline-label.oneid-timeline-horizontal.oneid-timeline-alternate .oneid-timeline-item-bottom { -webkit-box-orient: vertical; -webkit-box-direction: reverse; -ms-flex-direction: column-reverse; flex-direction: column-reverse; position: relative; -webkit-transform: translateY(calc(-100% + 8px)); transform: translateY(calc(-100% + 8px)); } .oneid-timeline-label.oneid-timeline-horizontal.oneid-timeline-alternate .oneid-timeline-item-bottom .oneid-timeline-item__content { padding-bottom: var(--td-comp-margin-l); padding-top: unset; } .oneid-timeline-label.oneid-timeline-horizontal.oneid-timeline-alternate .oneid-timeline-item-bottom .oneid-timeline-item__label--alternate { bottom: 0; -webkit-transform: translateY(100%); transform: translateY(100%); padding-top: var(--td-comp-margin-l); } .oneid-rate { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .oneid-rate .oneid-rate__star-top { position: absolute; width: 0; height: 100%; left: 0; top: 0; overflow: hidden; -webkit-transition: all 0.2s cubic-bezier(0.38, 0, 0.24, 1); transition: all 0.2s cubic-bezier(0.38, 0, 0.24, 1); } .oneid-rate .oneid-rate__star-top, .oneid-rate .oneid-rate__star-bottom { display: grid; } .oneid-rate__list { display: -webkit-box; display: -ms-flexbox; display: flex; list-style: none; padding: 0; margin: 0; } .oneid-rate__item { position: relative; cursor: pointer; -webkit-transition: all 0.2s cubic-bezier(0.38, 0, 0.24, 1); transition: all 0.2s cubic-bezier(0.38, 0, 0.24, 1); } .oneid-rate__item:hover { -webkit-transform: scale(1.33); transform: scale(1.33); } .oneid-rate__item--half .oneid-rate__star-top { width: 50%; } .oneid-rate__item--full .oneid-rate__star-top { width: 100%; } .oneid-rate__text { color: var(--td-text-color-primary); font: var(--td-font-mark-medium); margin-left: var(--td-comp-margin-l); } .oneid-guide { font: var(--td-font-body-medium); color: var(--td-text-color-primary); -webkit-box-sizing: border-box; box-sizing: border-box; margin: 0; padding: 0; list-style: none; } .oneid-guide--lock { overflow: hidden; } .oneid-guide--absolute { position: absolute; } .oneid-guide--fixed { position: fixed; } .oneid-guide__overlay { position: fixed; top: 0; bottom: 0; left: 0; right: 0; z-index: 999997; } .oneid-guide__highlight { z-index: 999998; -webkit-transition: 0.2s cubic-bezier(0, 0, 0.15, 1); transition: 0.2s cubic-bezier(0, 0, 0.15, 1); border-radius: var(--td-radius-default); } .oneid-guide__highlight--dialog { border-radius: var(--td-radius-large); } .oneid-guide__highlight--mask { -webkit-box-shadow: 0 0 0 0 var(--td-mask-active), var(--td-mask-active) 0 0 0 5000px; box-shadow: 0 0 0 0 var(--td-mask-active), var(--td-mask-active) 0 0 0 5000px; } .oneid-guide__highlight--nomask { border-radius: var(--td-radius-medium); border: 2px solid var(--td-brand-color); -webkit-box-sizing: border-box; box-sizing: border-box; } .oneid-guide__reference { z-index: 999999; } .oneid-guide__wrapper { position: fixed; left: 0; right: 0; top: 0; bottom: 0; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; z-index: 999999; padding-top: 20vh; } .oneid-guide__wrapper--center { padding-top: 0; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .oneid-guide__dialog { min-width: 320px; max-width: 500px; padding: var(--td-comp-paddingTB-xxl) var(--td-comp-paddingLR-xxl); border-radius: var(--td-radius-large); background: var(--td-bg-color-container); -webkit-animation: tGuideDialogFadeIn 0.3s ease-out; animation: tGuideDialogFadeIn 0.3s ease-out; -webkit-box-sizing: border-box; box-sizing: border-box; } .oneid-guide__dialog--nomask { border: 1px solid var(--td-component-border); } .oneid-guide__dialog .oneid-guide__title { font: var(--td-font-title-medium); font-weight: 700; } .oneid-guide__dialog .oneid-guide__desc { margin-top: var(--td-comp-margin-l); font: var(--td-font-body-medium); } .oneid-guide__tooltip { padding: var(--td-comp-paddingTB-m) var(--td-comp-paddingLR-s); min-width: 240px; max-width: 600px; max-height: 300px; } .oneid-guide__title { text-align: left; color: var(--td-text-color-primary); font: var(--td-font-title-small); font-weight: 700; } .oneid-guide__desc { margin-top: var(--td-comp-margin-s); text-align: left; color: var(--td-text-color-secondary); font: var(--td-font-body-small); } .oneid-guide__action { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .oneid-guide__action button { margin-right: var(--td-comp-margin-s); } .oneid-guide__action button:last-child { margin-right: 0; } .oneid-guide__footer { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .oneid-guide__footer--popup { margin-top: var(--td-comp-margin-l); } .oneid-guide__footer--dialog { margin-top: 24px; } .oneid-guide__footer--dialog .oneid-guide__action { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .oneid-guide__counter { color: var(--td-text-color-placeholder); text-align: left; font: var(--td-font-body-small); -webkit-box-flex: 1; -ms-flex: 1; flex: 1; } .oneid-guide__popup .oneid-guide__popup--content { background: none; -webkit-box-shadow: none; box-shadow: none; padding: 0; } @-webkit-keyframes tGuideDialogFadeIn { 0% { opacity: 0; } 100% { opacity: 1; } } @keyframes tGuideDialogFadeIn { 0% { opacity: 0; } 100% { opacity: 1; } } .oneid-back-top { position: fixed; z-index: 300; overflow: hidden; outline: none; border-color: transparent; background-color: transparent; cursor: pointer; display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; vertical-align: middle; white-space: nowrap; border-width: 0.5px; border-style: solid; -webkit-transition: background 0.2s linear, border 0.2s linear, color 0.2s linear, opacity 0.2s linear, visibility 0.2s linear; transition: background 0.2s linear, border 0.2s linear, color 0.2s linear, opacity 0.2s linear, visibility 0.2s linear; -ms-touch-action: manipulation; touch-action: manipulation; -webkit-box-shadow: var(--td-shadow-3); box-shadow: var(--td-shadow-3); visibility: hidden; opacity: 0; color: var(--td-text-color-primary); } .oneid-back-top__text { font: var(--td-font-body-small); text-align: center; margin-top: var(--td-comp-margin-xxs); } .oneid-back-top__icon { font-size: var(--td-font-headline-small); } .oneid-back-top.oneid-size-m .oneid-back-top__icon { margin-top: 2px; } .oneid-back-top--show { visibility: visible; opacity: 1; } .oneid-back-top--theme-light { border-color: var(--td-component-border); background-color: var(--td-bg-color-container); } .oneid-back-top--theme-light:hover { border-color: var(--td-bg-color-container-hover); background-color: var(--td-bg-color-container-hover); } .oneid-back-top--theme-light .oneid-back-top__text { color: var(--td-text-color-secondary); } .oneid-back-top--theme-light .oneid-back-top__icon { color: var(--td-text-color-primary); } .oneid-back-top--theme-primary { border-color: var(--td-brand-color); background-color: var(--td-brand-color); } .oneid-back-top--theme-primary:hover { border-color: var(--td-brand-color-hover); background-color: var(--td-brand-color-hover); } .oneid-back-top--theme-primary .oneid-back-top__text { color: var(--td-text-color-anti); } .oneid-back-top--theme-primary .oneid-back-top__icon { color: var(--td-text-color-anti); } .oneid-back-top--theme-dark { border-color: rgba(0, 0, 0, 0.9); background-color: rgba(0, 0, 0, 0.9); } .oneid-back-top--theme-dark:hover { border-color: rgba(0, 0, 0, 0.6); background-color: rgba(0, 0, 0, 0.6); } .oneid-back-top--theme-dark .oneid-back-top__text { color: var(--td-text-color-anti); } .oneid-back-top--theme-dark .oneid-back-top__icon { color: var(--td-text-color-anti); } .oneid-back-top.oneid-size-s { width: var(--td-comp-size-xxl); height: var(--td-comp-size-xxl); } .oneid-back-top.oneid-size-s .oneid-back-top__text { display: none; } .oneid-back-top.oneid-size-m { width: var(--td-comp-size-xxxxl); height: var(--td-comp-size-xxxxl); } .oneid-back-top.oneid-size-m .oneid-back-top__text { display: block; } .oneid-back-top--circle { border-radius: var(--td-radius-circle); } .oneid-back-top--square { border-radius: var(--td-radius-medium); } .oneid-statistic { display: inline-block; font-size: var(--td-font-size-body-medium); line-height: var(--td-line-height-body-medium); color: var(--td-text-color-secondary); } .oneid-statistic-title { font-size: var(--td-font-body-medium); margin-bottom: var(--td-comp-margin-s); } .oneid-statistic-content { display: inline-block; color: var(--td-text-color-primary); text-align: left; white-space: nowrap; } .oneid-statistic-content-value { font-size: var(--td-font-size-headline-medium); line-height: var(--td-line-height-headline-medium); font-family: TCloudNumber, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Hiragino Sans GB, Microsoft YaHei UI, Microsoft YaHei, Source Han Sans CN, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol; } .oneid-statistic-content-unit { font-size: var(--td-font-size-body-medium); margin-left: var(--td-comp-margin-xs); font-family: TCloudNumber, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Hiragino Sans GB, Microsoft YaHei UI, Microsoft YaHei, Source Han Sans CN, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol; } .oneid-statistic-content-suffix { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; font-size: var(--td-font-size-title-large); margin-left: var(--td-comp-margin-s); } .oneid-statistic-content-prefix { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; font-size: var(--td-font-size-title-large); margin-right: var(--td-comp-margin-s); } .oneid-statistic-content-prefix .oneid-icon { font-size: var(--td-font-size-title-large); } .oneid-statistic-extra { margin-top: 8px; } .oneid-statistic-extra .oneid-space .oneid-space-item { display: -webkit-box; display: -ms-flexbox; display: flex; } .oneid-descriptions { font: var(--td-font-body-medium); color: var(--td-text-color-primary); -webkit-box-sizing: border-box; box-sizing: border-box; margin: 0; padding: 0; list-style: none; } .oneid-descriptions__header { color: var(--td-text-color-primary); font: var(--td-font-title-medium); margin-bottom: var(--td-comp-margin-m); font-weight: 600; } .oneid-descriptions__body { border-collapse: collapse; font: var(--td-font-body-medium); width: 100%; } .oneid-descriptions__body.oneid-size-l > tbody > tr > td { padding: var(--td-comp-paddingTB-l); } .oneid-descriptions__body.oneid-size-m > tbody > tr > td { padding: var(--td-comp-paddingLR-m) var(--td-comp-paddingLR-l); } .oneid-descriptions__body.oneid-size-s > tbody > tr > td { padding: var(--td-comp-paddingLR-s) var(--td-comp-paddingLR-l); } .oneid-descriptions__body .oneid-descriptions__label { color: var(--td-text-color-placeholder); } .oneid-descriptions__body--fixed { table-layout: fixed; } .oneid-descriptions__body--border > tbody > tr > td { border: 1px solid var(--td-component-border); } .oneid-descriptions__body--border .oneid-descriptions__label { background-color: var(--td-bg-color-secondarycontainer); } .oneid-descriptions__body--border .oneid-descriptions__label:hover { background-color: var(--td-bg-color-container-hover); } .oneid-empty { font: var(--td-font-body-medium); color: var(--td-text-color-primary); -webkit-box-sizing: border-box; box-sizing: border-box; margin: 0; list-style: none; padding: 0; text-align: center; } .oneid-empty__image { font-size: 48px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .oneid-empty__title { font: var(--td-font-body-medium); color: var(--td-text-color-secondary); margin-top: var(--td-comp-margin-s); margin-bottom: 0; } .oneid-empty__description { font: var(--td-font-body-medium); color: var(--td-text-color-placeholder); margin-top: var(--td-comp-margin-xs); margin-bottom: 0; } .oneid-empty__action { margin-top: var(--td-comp-margin-xxl); margin-bottom: 0; } .oneid-empty.oneid-size-s .oneid-empty__image { font-size: 20px; } .oneid-empty.oneid-size-s .oneid-empty__title { font: var(--td-font-body-small); margin-top: var(--td-comp-margin-xxs); } .oneid-empty.oneid-size-s .oneid-empty__description { font: var(--td-font-body-small); margin-top: var(--td-comp-margin-xxs); } .oneid-empty.oneid-size-l .oneid-empty__image { font-size: 64px; } .oneid-typography { color: var(--td-text-color-primary); font: var(--td-font-body-medium); margin: var(--td-comp-margin-m) 0; } h1.oneid-typography { font: var(--td-font-headline-large); margin-top: var(--td-comp-margin-xxxxl); margin-bottom: var(--td-comp-margin-l); } h2.oneid-typography { font: var(--td-font-headline-medium); margin-top: var(--td-comp-margin-xxxl); margin-bottom: var(--td-comp-margin-l); } h3.oneid-typography { font: var(--td-font-headline-small); margin-top: var(--td-comp-margin-xxl); margin-bottom: var(--td-comp-margin-m); } h4.oneid-typography { font: var(--td-font-title-large); margin-top: var(--td-comp-margin-xl); margin-bottom: var(--td-comp-margin-m); } h5.oneid-typography { font: var(--td-font-title-medium); margin-top: var(--td-comp-margin-l); margin-bottom: var(--td-comp-margin-m); } h6.oneid-typography { font: var(--td-font-title-small); } .oneid-typography strong { font-weight: 600; } .oneid-typography mark { background-color: #fcdf47; } .oneid-typography code { border-radius: var(--td-radius-default); border: 1px solid var(--td-component-border); margin: 0 var(--td-comp-margin-xs); background-color: var(--td-bg-color-secondarycontainer); padding: 1px var(--td-comp-paddingLR-s); -webkit-transition: background-color 0.2s; transition: background-color 0.2s; white-space: nowrap; font: var(--td-font-body-small); font-family: Source Code Pro, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Hiragino Sans GB, Microsoft YaHei UI, Microsoft YaHei; display: inline-block; } .oneid-typography code:hover { border-radius: var(--td-radius-default); border: 1px solid var(--td-component-border); background-color: var(--td-bg-color-secondarycontainer-hover); } .oneid-typography kbd { border-radius: var(--td-radius-default); border: 1px solid var(--td-component-border); margin: 0 var(--td-comp-margin-xs); background-color: var(--td-bg-color-secondarycontainer); padding: 1px var(--td-comp-paddingLR-s); -webkit-box-shadow: 0 1px 0 0 var(--td-component-border); box-shadow: 0 1px 0 0 var(--td-component-border); font: var(--td-font-body-small); font-family: Source Code Pro, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Hiragino Sans GB, Microsoft YaHei UI, Microsoft YaHei; display: inline-block; } .oneid-typography--disabled { color: var(--td-text-color-disabled); cursor: not-allowed; } .oneid-typography--success { color: var(--td-success-color); } .oneid-typography--warning { color: var(--td-warning-color); } .oneid-typography--error { color: var(--td-error-color); } .oneid-typography--secondary { color: var(--td-text-color-secondary); } .oneid-typography-ellipsis-symbol, .oneid-typography .oneid-icon-copy { color: var(--td-brand-color); cursor: pointer; } .oneid-typography-ellipsis-symbol:hover, .oneid-typography .oneid-icon-copy:hover { color: var(--td-brand-color-hover); } .oneid-typography .oneid-icon-checked { color: var(--td-success-color); } .oneid-common { user-select: none; } .oneid-common a { background-color: transparent; text-decoration: none; color: #457ae5; cursor: pointer; } .oneid-common a:active, .oneid-common a:hover { outline-width: 0; } .oneid-common a:hover { text-decoration: none; } .oneid-common ul { padding: 0; margin: 0; list-style: none; } .oneid-common li::before { content: "·"; margin-right: 4px; } /*---------------- Message ---------------*/ .oneid-message.t-message { background-color: rgba(0, 0, 0, 0.8); color: #fff; border-radius: 8px; box-shadow: none; align-items: center; max-width: 280px; overflow-wrap: break-word; word-break: normal; } .oneid-message.t-message.oneid-is-error .oneid-svg, .oneid-message.t-message.oneid-is-error .t-icon { color: #fa5151; } .oneid-message.t-message .oneid-svg, .oneid-message.t-message .t-icon { font-size: 16px; margin-right: 8px; top: 0; } @charset "UTF-8"; .oneid-yuanbao { --oneid-color-dark: #1a1a1a; --oneid-color-white: #fff; --oneid-color-light: #ffffffe5; --oneid-color-red: #fa5151; --oneid-color-green: #27d08e; --oneid-color-link: #457ae5; /*---------------- Button ---------------*/ /*---------------- Checkbox ---------------*/ /*---------------- Dialog ---------------*/ /*---------------- 提示类Dialog ---------------*/ /*---------------- Popup ---------------*/ /*---------------- Loading ---------------*/ /*---------------- Form ---------------*/ } .oneid-yuanbao.oneid-mode-light { --oneid-background-color: var(--oneid-color-white); --oneid-color-maintain: #000; --oneid-color-reverse: #fff; --oneid-color-reverse-90: #ffffffe5; --oneid-color-10: #00000014; --oneid-color-15: #00000026; --oneid-color-40: #0006; --oneid-color-60: #0009; --oneid-color-80: #000c; --oneid-color-90: #000000e5; --oneid-avatar-bgcolor: #ebebeb; --oneid-user-bgcolor: #f6f6f6; --oneid-user-hover-bgcolor: #f2f2f2; --oneid-loading-color-border: #20c57d80; --oneid-loading-color-background: #f4fcf8; --oneid-error-color-background: #f7f7f7; --oneid-brand-blue-color: #457ae5; --oneid-btn-bgcolor: #f6f6f6; --oneid-btn-disable-bgcolor: #dadada; } .oneid-yuanbao.oneid-mode-dark { --oneid-background-color: #303030; --oneid-color-maintain: #fff; --oneid-color-reverse: #000; --oneid-color-reverse-90: #000000e5; --oneid-color-10: #ffffff1a; --oneid-color-15: #ffffff26; --oneid-color-40: #fff6; --oneid-color-60: #fff9; --oneid-color-80: #000c; --oneid-color-90: #ffffffe5; --oneid-avatar-bgcolor: #444; --oneid-user-bgcolor: #3b3b3b; --oneid-user-hover-bgcolor: #424242; --oneid-loading-color-border: #1db472; --oneid-loading-color-background: #2d453c; --oneid-error-color-background: #3b3b3b; --oneid-brand-blue-color: #38f; --oneid-btn-bgcolor: #1d1d1d; --oneid-btn-disable-bgcolor: #3b3b3b; --oneid-scrollbar-color: #444; } .oneid-yuanbao .oneid-button { border-width: 0; border-radius: 8px; background-color: var(--oneid-color-90) !important; border-color: var(--oneid-color-90) !important; --td-brand-color-hover: var(--oneid-font-color); } .oneid-yuanbao .oneid-button .oneid-ripple { display: none; } .oneid-yuanbao .oneid-button.oneid-is-disabled { background-color: var(--oneid-btn-disable-bgcolor) !important; color: var(--oneid-color-white) !important; } .oneid-yuanbao .oneid-checkbox { align-items: flex-start; } .oneid-yuanbao .oneid-checkbox .oneid-checkbox__input { opacity: 0.3; border-color: var(--oneid-color-60); border-radius: 4px; background-color: var(--oneid-background-color); } .oneid-yuanbao .oneid-checkbox.oneid-is-checked .oneid-checkbox__input { opacity: 1; background-color: var(--oneid-color-90); border-color: var(--oneid-color-90); } .oneid-yuanbao .oneid-checkbox.oneid-is-checked .oneid-checkbox__input::after { border-color: var(--oneid-color-reverse-90); } .oneid-yuanbao .oneid-checkbox .oneid-checkbox__label { color: var(--oneid-color-40) !important; margin-left: 3px; line-height: 16px; } .oneid-yuanbao .oneid-checkbox:hover .oneid-checkbox__input { opacity: 1; border-color: var(--oneid-color-90); } .oneid-yuanbao .oneid-checkbox.oneid-is-disabled .oneid-checkbox__input { opacity: 0.3; border-color: var(--oneid-color-60) !important; background-color: var(--oneid-color-40); } .oneid-yuanbao .oneid-checkbox.oneid-is-disabled .oneid-checkbox__input::after { border-color: var(--oneid-color-60) !important; } .oneid-yuanbao .oneid-checkbox.oneid-is-disabled a { color: var(--oneid-color-60); } .oneid-yuanbao .oneid-dialog__position { padding: 0 !important; } .oneid-yuanbao .oneid-dialog { border-radius: 12px; padding: 0; border: none; background-color: var(--oneid-background-color); } .oneid-yuanbao .oneid-dialog__header { color: var(--oneid-color-90); height: 32px; } .oneid-yuanbao .oneid-dialog__body { padding: 0 24px 16px; } .oneid-yuanbao .oneid-dialog__close { width: 24px; height: 24px; padding: 0; margin: 16px 16px 0 0; color: var(--oneid-color-60); } .oneid-yuanbao .oneid-dialog__close:hover { background: none; } .oneid-yuanbao.oneid-prompt-dialog .oneid-dialog { width: 360px; } .oneid-yuanbao.oneid-prompt-dialog .oneid-dialog__header { height: 24px; } .oneid-yuanbao.oneid-prompt-dialog .oneid-dialog__body { padding: 0 24px 24px; } .oneid-yuanbao.oneid-prompt-dialog .oneid-dialog__body .wrapper .header { color: var(--oneid-color-90); font-weight: 600; font-size: 16px; display: flex; align-items: center; } .oneid-yuanbao.oneid-prompt-dialog .oneid-dialog__body .wrapper .header svg { color: #00b259; font-size: 20px; } .oneid-yuanbao.oneid-prompt-dialog .oneid-dialog__body .wrapper .content { padding-top: 16px; color: var(--oneid-color-90); } .oneid-yuanbao.oneid-prompt-dialog .oneid-dialog__footer { box-sizing: border-box; padding: 0 24px 24px 0; } .oneid-yuanbao.oneid-prompt-dialog .oneid-dialog__footer button { width: 88px; height: 36px; color: var(--oneid-color-reverse-90); } .oneid-yuanbao.oneid-prompt-dialog .oneid-dialog__footer button:first-child { color: var(--oneid-color-90); background-color: var(--oneid-user-hover-bgcolor) !important; } .oneid-yuanbao .oneid-popup__content { box-shadow: 0px 8px 12px 0px rgba(0, 0, 0, 0.1019607843); } .oneid-yuanbao .oneid-popup[data-popper-placement^=top] .oneid-popup__content { margin-bottom: 4px; } .oneid-yuanbao .oneid-loading { color: var(--oneid-color-green); font-size: 18px; position: absolute; border-radius: 12px; } .oneid-yuanbao .oneid-loading .oneid-loading--center { position: absolute; top: 28px; border: 1px solid var(--oneid-loading-color-border); padding: 7px 11px; border-radius: 8px; background-color: var(--oneid-loading-color-background); box-shadow: 0px 8px 20px 0px rgba(65, 77, 96, 0.08); } .oneid-yuanbao .oneid-loading__text { color: var(--oneid-color-90); } .oneid-yuanbao .oneid-loading__overlay { background-color: transparent; } .oneid-yuanbao .oneid-form__item { margin-bottom: 16px !important; } .oneid-yuanbao .oneid-form__item-with-extra { margin-bottom: 16px; } .oneid-yuanbao .oneid-form__label { color: var(--oneid-color-90); font-weight: 500; margin-bottom: 8px; line-height: 22px; min-height: auto; } .oneid-yuanbao .oneid-form .oneid-is-error .oneid-input { border-color: var(--oneid-color-red) !important; } .oneid-yuanbao .oneid-form .oneid-input { height: 48px; border-radius: 8px; border: 1px solid var(--oneid-color-10) !important; background-color: transparent; font-size: 16px; padding: 13px 0 13px 12px; caret-color: var(--oneid-color-90); } .oneid-yuanbao .oneid-form .oneid-input input:-webkit-autofill, .oneid-yuanbao .oneid-form .oneid-input input:-webkit-autofill:hover, .oneid-yuanbao .oneid-form .oneid-input input:-webkit-autofill:focus, .oneid-yuanbao .oneid-form .oneid-input input:-webkit-autofill:active { -webkit-text-fill-color: var(--oneid-color-90); box-shadow: 0 0 0px 1000px var(--oneid-background-color) inset; border: 0 none; background-color: transparent; } .oneid-yuanbao .oneid-form .oneid-input.oneid-is-focused { box-shadow: none; } .oneid-yuanbao .oneid-form .oneid-input input { color: var(--oneid-color-90); } .oneid-yuanbao .oneid-form .oneid-input input::placeholder { color: var(--oneid-color-40); } .oneid-yuanbao .oneid-form .oneid-input__suffix { color: var(--oneid-color-90); } .oneid-yuanbao .oneid-form .oneid-input__extra { display: none; } .oneid-authorization-dialog .oneid-dialog { width: 330px; min-height: 397px; display: flex !important; flex-direction: column; } .oneid-authorization-dialog .oneid-dialog__body { flex: 1; height: 100%; display: flex; padding-bottom: 24px !important; } .oneid-authorization-dialog .oneid-dialog .oneid-agreement .oneid-checkbox__label { font-size: 11px; } .oneid-dialog-close-animation .oneid-dialog-zoom .animation-enter, .oneid-dialog-close-animation .oneid-dialog-zoom .animation-exit, .oneid-dialog-close-animation .oneid-dialog-zoom .animation-active, .oneid-dialog-close-animation .oneid-dialog-fade-enter, .oneid-dialog-close-animation .oneid-dialog-fade-appear, .oneid-dialog-close-animation .oneid-dialog-fade-exit, .oneid-dialog-close-animation .oneid-dialog-fade-enter.oneid-dialog-fade-enter-active, .oneid-dialog-close-animation .oneid-dialog-fade-appear.oneid-dialog-fade-appear-active, .oneid-dialog-close-animation .oneid-dialog-fade-exit.oneid-dialog-fade-exit-active, .oneid-dialog-close-animation .oneid-dialog-zoom-enter, .oneid-dialog-close-animation .oneid-dialog-zoom-enter-from, .oneid-dialog-close-animation .oneid-dialog-zoom-appear, .oneid-dialog-close-animation .oneid-dialog-zoom-exit, .oneid-dialog-close-animation .oneid-dialog-zoom-enter-active, .oneid-dialog-close-animation .oneid-dialog-zoom-appear-active, .oneid-dialog-close-animation .oneid-dialog-zoom-exit-active { opacity: 1; animation: none !important; transform: none !important; } .oneid-container { width: 100%; align-items: center; display: flex; flex-direction: column; justify-content: center; display: flex; flex-direction: column; } .oneid-container .content { box-sizing: border-box; height: 100%; display: flex; flex-direction: column; } .oneid-container .header { color: var(--oneid-color-90); align-items: center; display: flex; flex-direction: column; } .oneid-container .header .logo { gap: 13px; align-items: center; display: flex; flex-direction: row; } .oneid-container .header .logo img { width: 44px; height: 44px; border-radius: 50%; } .oneid-container .header .title { margin-top: 12px; font-size: 18px; font-weight: 500; line-height: 1.5; } .oneid-container .list { flex: 1; gap: 12px; height: 100%; overflow-y: auto; margin: 20px 0 28px; display: flex; flex-direction: column; } .oneid-container .list .users { overflow-y: hidden; border-radius: 8px; background-color: var(--oneid-user-bgcolor); font-size: 12px; display: flex; flex-direction: column; } .oneid-container .list .users .title { padding: 10px 0 0 16px; line-height: 17px; color: var(--oneid-color-60); } .oneid-container .list .desc ul { color: var(--oneid-color-60); font-size: 12px; margin: 0 13px; gap: 4px; display: flex; flex-direction: column; } .oneid-container .list .desc ul li { display: flex; align-items: baseline; line-height: 17px; } .oneid-container .footer { display: flex; flex-direction: column; margin: 0 13px; } .oneid-container .footer .actions { margin-bottom: 10px; text-align: center; } .oneid-container .footer .actions button { width: 100%; height: 36px; font-weight: 500; color: var(--oneid-color-reverse-90); } .oneid-container .footer .actions.loading { opacity: 0.3; } @media (max-height: 560px) { .oneid-container .list { margin: 16px 0 16px; } } .oneid-agreement { display: flex !important; justify-content: center; color: var(--oneid-color-60) !important; } .oneid-agreement .oneid-checkbox__input { border-radius: 50% !important; } .oneid-agreement .oneid-checkbox__label { font-size: 12px; } .oneid-agreement .oneid-checkbox__label a { color: #576b95; } @keyframes shakeAnimation { 0%, 100% { transform: translateX(0); } 10%, 30%, 50%, 70%, 90% { transform: translateX(-4px); } 20%, 40%, 60%, 80% { transform: translateX(4px); } } .oneid-shake-container.shake { animation: shakeAnimation 0.6s; } .oneid-user-list-selector__container { display: flex; flex-direction: column; overflow-y: hidden; padding: 0 10px; max-height: 115px; } .oneid-user-list-selector__container:hover { overflow-y: scroll; padding-right: 0; } .oneid-user-list-selector__container::-webkit-scrollbar { width: 10px; } .oneid-user-list-selector__container::-webkit-scrollbar-track { background: transparent; } .oneid-user-list-selector__container::-webkit-scrollbar-thumb { border-radius: 18px; border-style: dashed; border-color: transparent; background-color: rgba(0, 0, 0, 0.0784313725); background-clip: padding-box; } .oneid-user-list-selector-item__container { display: flex; align-items: center; gap: 8px; padding: 9px 6px; cursor: default; position: relative; } .oneid-user-list-selector-item__containerClickable { cursor: pointer; border-radius: 8px; } .oneid-user-list-selector-item__containerClickable:not(:last-child)::before { content: ""; position: absolute; bottom: 0; left: 6px; right: 6px; border-bottom: 0.5px solid var(--oneid-color-10); } .oneid-user-list-selector-item__containerClickable:hover { background-color: var(--oneid-user-hover-bgcolor); } .oneid-user-list-selector-item__avatarWrapper { position: relative; } .oneid-user-list-selector-item__avatarExtra > * { position: absolute; bottom: -1px; right: -1px; font-size: 10px; border-radius: 50%; border: 1px solid var(--oneid-background-color); padding: 1px; box-sizing: border-box; z-index: 1; } .oneid-user-list-selector-item__avatar { box-shadow: 0 1.5px 4.5px 0 rgba(65, 97, 152, 0.12); } .oneid-user-list-selector-item__defaultAvatar { border-radius: 50%; font-size: 28px; color: #f2f6fc; background-color: #c4cddf; display: block; } .oneid-user-list-selector-item__infoWrapper { display: flex; flex-direction: column; flex: 1; } .oneid-user-list-selector-item__infoExtra { color: #7b818f; } .oneid-user-list-selector-item__checkIcon { color: var(--oneid-color-90); font-size: 16px; } .oneid-user-list-selector-item__disabledCheckIcon { opacity: 0.15; } .oneid-user-list-selector-item__overlayInner { font-size: 12px; } .oneid-multi-line-text__text { position: relative; display: -webkit-box; overflow: hidden; word-break: break-all; -webkit-box-orient: vertical; -moz-box-orient: vertical; white-space: normal; color: var(--oneid-color-90); } .oneid-multi-line-text__muli-line-popup { width: 250px; } .oneid-multi-line-text__muli-line-popup .oneid-popup__arrow { bottom: auto !important; } .oneid-multi-line-text__muli-line-popup-dark { background: #262626; color: var(--oneid-color-white); } .oneid-multi-line-text__muli-line-popup-dark .oneid-popup__arrow::before { background: #262626; } .oneid-bridge-error { display: flex; flex-direction: column; margin-top: 72px; } .oneid-bridge-error .header-error { display: flex; flex-direction: column; align-items: center; } .oneid-bridge-error .header-error .icon { width: 64px; height: 64px; border-radius: 32px; background-color: var(--oneid-error-color-background); color: var(--oneid-color-40); font-size: 40px; display: flex; align-items: center; justify-content: center; } .oneid-bridge-error .header-error .desc { flex-direction: column; margin-top: 20px; display: flex; align-items: center; justify-content: center; } .oneid-bridge-error .header-error .desc .title { font-size: 16px; font-weight: 500; margin-bottom: 8px; color: var(--oneid-color-90); } .oneid-bridge-error .header-error .desc .msg { color: var(--oneid-color-40); } .oneid-bridge-error .action { flex: 1; margin-top: 52px; display: flex; align-items: center; justify-content: center; } .oneid-bridge-error .action button { height: 36px; width: 120px; font-weight: 500; color: var(--oneid-color-reverse-90); } @charset "UTF-8"; .oneid-yuanbao { --oneid-color-dark: #1a1a1a; --oneid-color-white: #fff; --oneid-color-light: #ffffffe5; --oneid-color-red: #fa5151; --oneid-color-green: #27d08e; --oneid-color-link: #457ae5; /*---------------- Button ---------------*/ /*---------------- Checkbox ---------------*/ /*---------------- Dialog ---------------*/ /*---------------- 提示类Dialog ---------------*/ /*---------------- Popup ---------------*/ /*---------------- Loading ---------------*/ /*---------------- Form ---------------*/ } .oneid-yuanbao.oneid-mode-light { --oneid-background-color: var(--oneid-color-white); --oneid-color-maintain: #000; --oneid-color-reverse: #fff; --oneid-color-reverse-90: #ffffffe5; --oneid-color-10: #00000014; --oneid-color-15: #00000026; --oneid-color-40: #0006; --oneid-color-60: #0009; --oneid-color-80: #000c; --oneid-color-90: #000000e5; --oneid-avatar-bgcolor: #ebebeb; --oneid-user-bgcolor: #f6f6f6; --oneid-user-hover-bgcolor: #f2f2f2; --oneid-loading-color-border: #20c57d80; --oneid-loading-color-background: #f4fcf8; --oneid-error-color-background: #f7f7f7; --oneid-brand-blue-color: #457ae5; --oneid-btn-bgcolor: #f6f6f6; --oneid-btn-disable-bgcolor: #dadada; } .oneid-yuanbao.oneid-mode-dark { --oneid-background-color: #303030; --oneid-color-maintain: #fff; --oneid-color-reverse: #000; --oneid-color-reverse-90: #000000e5; --oneid-color-10: #ffffff1a; --oneid-color-15: #ffffff26; --oneid-color-40: #fff6; --oneid-color-60: #fff9; --oneid-color-80: #000c; --oneid-color-90: #ffffffe5; --oneid-avatar-bgcolor: #444; --oneid-user-bgcolor: #3b3b3b; --oneid-user-hover-bgcolor: #424242; --oneid-loading-color-border: #1db472; --oneid-loading-color-background: #2d453c; --oneid-error-color-background: #3b3b3b; --oneid-brand-blue-color: #38f; --oneid-btn-bgcolor: #1d1d1d; --oneid-btn-disable-bgcolor: #3b3b3b; --oneid-scrollbar-color: #444; } .oneid-yuanbao .oneid-button { border-width: 0; border-radius: 8px; background-color: var(--oneid-color-90) !important; border-color: var(--oneid-color-90) !important; --td-brand-color-hover: var(--oneid-font-color); } .oneid-yuanbao .oneid-button .oneid-ripple { display: none; } .oneid-yuanbao .oneid-button.oneid-is-disabled { background-color: var(--oneid-btn-disable-bgcolor) !important; color: var(--oneid-color-white) !important; } .oneid-yuanbao .oneid-checkbox { align-items: flex-start; } .oneid-yuanbao .oneid-checkbox .oneid-checkbox__input { opacity: 0.3; border-color: var(--oneid-color-60); border-radius: 4px; background-color: var(--oneid-background-color); } .oneid-yuanbao .oneid-checkbox.oneid-is-checked .oneid-checkbox__input { opacity: 1; background-color: var(--oneid-color-90); border-color: var(--oneid-color-90); } .oneid-yuanbao .oneid-checkbox.oneid-is-checked .oneid-checkbox__input::after { border-color: var(--oneid-color-reverse-90); } .oneid-yuanbao .oneid-checkbox .oneid-checkbox__label { color: var(--oneid-color-40) !important; margin-left: 3px; line-height: 16px; } .oneid-yuanbao .oneid-checkbox:hover .oneid-checkbox__input { opacity: 1; border-color: var(--oneid-color-90); } .oneid-yuanbao .oneid-checkbox.oneid-is-disabled .oneid-checkbox__input { opacity: 0.3; border-color: var(--oneid-color-60) !important; background-color: var(--oneid-color-40); } .oneid-yuanbao .oneid-checkbox.oneid-is-disabled .oneid-checkbox__input::after { border-color: var(--oneid-color-60) !important; } .oneid-yuanbao .oneid-checkbox.oneid-is-disabled a { color: var(--oneid-color-60); } .oneid-yuanbao .oneid-dialog__position { padding: 0 !important; } .oneid-yuanbao .oneid-dialog { border-radius: 12px; padding: 0; border: none; background-color: var(--oneid-background-color); } .oneid-yuanbao .oneid-dialog__header { color: var(--oneid-color-90); height: 32px; } .oneid-yuanbao .oneid-dialog__body { padding: 0 24px 16px; } .oneid-yuanbao .oneid-dialog__close { width: 24px; height: 24px; padding: 0; margin: 16px 16px 0 0; color: var(--oneid-color-60); } .oneid-yuanbao .oneid-dialog__close:hover { background: none; } .oneid-yuanbao.oneid-prompt-dialog .oneid-dialog { width: 360px; } .oneid-yuanbao.oneid-prompt-dialog .oneid-dialog__header { height: 24px; } .oneid-yuanbao.oneid-prompt-dialog .oneid-dialog__body { padding: 0 24px 24px; } .oneid-yuanbao.oneid-prompt-dialog .oneid-dialog__body .wrapper .header { color: var(--oneid-color-90); font-weight: 600; font-size: 16px; display: flex; align-items: center; } .oneid-yuanbao.oneid-prompt-dialog .oneid-dialog__body .wrapper .header svg { color: #00b259; font-size: 20px; } .oneid-yuanbao.oneid-prompt-dialog .oneid-dialog__body .wrapper .content { padding-top: 16px; color: var(--oneid-color-90); } .oneid-yuanbao.oneid-prompt-dialog .oneid-dialog__footer { box-sizing: border-box; padding: 0 24px 24px 0; } .oneid-yuanbao.oneid-prompt-dialog .oneid-dialog__footer button { width: 88px; height: 36px; color: var(--oneid-color-reverse-90); } .oneid-yuanbao.oneid-prompt-dialog .oneid-dialog__footer button:first-child { color: var(--oneid-color-90); background-color: var(--oneid-user-hover-bgcolor) !important; } .oneid-yuanbao .oneid-popup__content { box-shadow: 0px 8px 12px 0px rgba(0, 0, 0, 0.1019607843); } .oneid-yuanbao .oneid-popup[data-popper-placement^=top] .oneid-popup__content { margin-bottom: 4px; } .oneid-yuanbao .oneid-loading { color: var(--oneid-color-green); font-size: 18px; position: absolute; border-radius: 12px; } .oneid-yuanbao .oneid-loading .oneid-loading--center { position: absolute; top: 28px; border: 1px solid var(--oneid-loading-color-border); padding: 7px 11px; border-radius: 8px; background-color: var(--oneid-loading-color-background); box-shadow: 0px 8px 20px 0px rgba(65, 77, 96, 0.08); } .oneid-yuanbao .oneid-loading__text { color: var(--oneid-color-90); } .oneid-yuanbao .oneid-loading__overlay { background-color: transparent; } .oneid-yuanbao .oneid-form__item { margin-bottom: 16px !important; } .oneid-yuanbao .oneid-form__item-with-extra { margin-bottom: 16px; } .oneid-yuanbao .oneid-form__label { color: var(--oneid-color-90); font-weight: 500; margin-bottom: 8px; line-height: 22px; min-height: auto; } .oneid-yuanbao .oneid-form .oneid-is-error .oneid-input { border-color: var(--oneid-color-red) !important; } .oneid-yuanbao .oneid-form .oneid-input { height: 48px; border-radius: 8px; border: 1px solid var(--oneid-color-10) !important; background-color: transparent; font-size: 16px; padding: 13px 0 13px 12px; caret-color: var(--oneid-color-90); } .oneid-yuanbao .oneid-form .oneid-input input:-webkit-autofill, .oneid-yuanbao .oneid-form .oneid-input input:-webkit-autofill:hover, .oneid-yuanbao .oneid-form .oneid-input input:-webkit-autofill:focus, .oneid-yuanbao .oneid-form .oneid-input input:-webkit-autofill:active { -webkit-text-fill-color: var(--oneid-color-90); box-shadow: 0 0 0px 1000px var(--oneid-background-color) inset; border: 0 none; background-color: transparent; } .oneid-yuanbao .oneid-form .oneid-input.oneid-is-focused { box-shadow: none; } .oneid-yuanbao .oneid-form .oneid-input input { color: var(--oneid-color-90); } .oneid-yuanbao .oneid-form .oneid-input input::placeholder { color: var(--oneid-color-40); } .oneid-yuanbao .oneid-form .oneid-input__suffix { color: var(--oneid-color-90); } .oneid-yuanbao .oneid-form .oneid-input__extra { display: none; } .oneid-create-account-dialog .oneid-dialog { width: 400px; min-height: 506px; } .oneid-create-account-dialog .oneid-dialog__header { height: 24px !important; } .oneid-create-account-dialog .oneid-dialog .header { color: var(--oneid-color-90); margin-bottom: 8px; font-weight: 500; size: 16px; line-height: 20px; } .oneid-create-account-dialog .oneid-dialog .content { flex-direction: column; display: flex; align-items: center; } .oneid-create-account-dialog .oneid-dialog .content .oneid-form { width: 100%; } .oneid-create-account-dialog .oneid-dialog .content .oneid-form-item__logo { flex-direction: column; display: flex; align-items: center; } .oneid-create-account-dialog .oneid-dialog .content .oneid-loading { color: var(--oneid-color-maintain); } .oneid-create-account-dialog .oneid-dialog .content .upload-avatar-icon { width: 24px; height: 24px; font-size: 24px; color: var(--oneid-color-40); } .oneid-create-account-dialog .oneid-dialog .content .review-loading .oneid-upload-avatar__wrapper--hover-cover { display: flex !important; } .oneid-create-account-dialog .oneid-dialog .content .review-loading .oneid-upload-avatar__wrapper--hover-cover .oneid-loading { color: var(--oneid-color-reverse); } .oneid-create-account-dialog .oneid-dialog .content .create { margin-bottom: 16px; height: 48px; font-weight: 500; color: var(--oneid-color-reverse-90); } .oneid-create-account-dialog .oneid-dialog .footer { margin-top: 32px; } .oneid-create-account-dialog .avatar-item { margin-bottom: 16px !important; } .oneid-create-account-dialog .avatar-item .oneid-form__controls { flex-direction: column; gap: 8px; display: flex; align-items: center; } .oneid-create-account-dialog .avatar-item .oneid-form__controls .oneid-input__help { color: var(--oneid-color-60); font-size: 14px; } .oneid-footer { min-height: 30px; background-size: contain; background-repeat: no-repeat; background-position: center; } @charset "UTF-8"; .oneid-common { --td-screen-xs: 320px; --td-screen-sm: 768px; --td-screen-md: 992px; --td-screen-lg: 1200px; --td-screen-xl: 1400px; --td-screen-xxl: 1880px; } @-moz-document url-prefix() { .oneid-common .narrow-scrollbar { scrollbar-color: var(--td-scrollbar-color) transparent; scrollbar-width: thin; } } .oneid-common .narrow-scrollbar::-webkit-scrollbar { width: 8px; height: 8px; } .oneid-common .narrow-scrollbar::-webkit-scrollbar-thumb { border: 2px solid transparent; background-clip: content-box; background-color: var(--td-scrollbar-color); border-radius: 15px; } .oneid-common .narrow-scrollbar::-webkit-scrollbar-thumb:vertical:hover, .oneid-common .narrow-scrollbar::-webkit-scrollbar-thumb:horizontal:hover { background-color: var(--td-scrollbar-hover-color); } .oneid-common .oneid-fake-arrow path { -webkit-transition: d 0.2s; transition: d 0.2s; stroke: currentcolor; } .oneid-common .oneid-fake-arrow--active path { d: path("M3.75 10.2002L7.99274 5.7998L12.2361 10.0425"); } .oneid-common .oneid-slide-down-enter-active, .oneid-common .oneid-slide-down-leave-active { -webkit-transition: height 0.2s cubic-bezier(0.38, 0, 0.24, 1), max-height 0.2s cubic-bezier(0.38, 0, 0.24, 1); transition: height 0.2s cubic-bezier(0.38, 0, 0.24, 1), max-height 0.2s cubic-bezier(0.38, 0, 0.24, 1); } .oneid-common, .oneid-common[theme-mode=light] { --td-brand-color-1: #f2f3ff; --td-brand-color-2: #d9e1ff; --td-brand-color-3: #b5c7ff; --td-brand-color-4: #8eabff; --td-brand-color-5: #618dff; --td-brand-color-6: #366ef4; --td-brand-color-7: #0052d9; --td-brand-color-8: #003cab; --td-brand-color-9: #002a7c; --td-brand-color-10: #001a57; --td-warning-color-1: #fff1e9; --td-warning-color-2: #ffd9c2; --td-warning-color-3: #ffb98c; --td-warning-color-4: #fa9550; --td-warning-color-5: #e37318; --td-warning-color-6: #be5a00; --td-warning-color-7: #954500; --td-warning-color-8: #713300; --td-warning-color-9: #532300; --td-warning-color-10: #3b1700; --td-error-color-1: #fff0ed; --td-error-color-2: #ffd8d2; --td-error-color-3: #ffb9b0; --td-error-color-4: #ff9285; --td-error-color-5: #f6685d; --td-error-color-6: #d54941; --td-error-color-7: #ad352f; --td-error-color-8: #881f1c; --td-error-color-9: #68070a; --td-error-color-10: #490002; --td-success-color-1: #e3f9e9; --td-success-color-2: #c6f3d7; --td-success-color-3: #92dab2; --td-success-color-4: #56c08d; --td-success-color-5: #2ba471; --td-success-color-6: #008858; --td-success-color-7: #006c45; --td-success-color-8: #005334; --td-success-color-9: #003b23; --td-success-color-10: #002515; --td-gray-color-1: #f3f3f3; --td-gray-color-2: #eee; --td-gray-color-3: #e8e8e8; --td-gray-color-4: #ddd; --td-gray-color-5: #c6c6c6; --td-gray-color-6: #a6a6a6; --td-gray-color-7: #8b8b8b; --td-gray-color-8: #777; --td-gray-color-9: #5e5e5e; --td-gray-color-10: #4b4b4b; --td-gray-color-11: #393939; --td-gray-color-12: #2c2c2c; --td-gray-color-13: #242424; --td-gray-color-14: #181818; --td-font-white-1: #ffffff; --td-font-white-2: rgba(255, 255, 255, 0.55); --td-font-white-3: rgba(255, 255, 255, 0.35); --td-font-white-4: rgba(255, 255, 255, 0.22); --td-font-gray-1: rgba(0, 0, 0, 0.9); --td-font-gray-2: rgba(0, 0, 0, 0.6); --td-font-gray-3: rgba(0, 0, 0, 0.4); --td-font-gray-4: rgba(0, 0, 0, 0.26); --td-brand-color: var(--td-brand-color-7); --td-warning-color: var(--td-warning-color-5); --td-error-color: var(--td-error-color-6); --td-success-color: var(--td-success-color-5); --td-brand-color-hover: var(--td-brand-color-6); --td-brand-color-focus: var(--td-brand-color-2); --td-brand-color-active: var(--td-brand-color-8); --td-brand-color-disabled: var(--td-brand-color-3); --td-brand-color-light: var(--td-brand-color-1); --td-brand-color-light-hover: var(--td-brand-color-2); --td-warning-color-hover: var(--td-warning-color-4); --td-warning-color-focus: var(--td-warning-color-2); --td-warning-color-active: var(--td-warning-color-6); --td-warning-color-disabled: var(--td-warning-color-3); --td-warning-color-light: var(--td-warning-color-1); --td-warning-color-light-hover: var(--td-warning-color-2); --td-error-color-hover: var(--td-error-color-5); --td-error-color-focus: var(--td-error-color-2); --td-error-color-active: var(--td-error-color-7); --td-error-color-disabled: var(--td-error-color-3); --td-error-color-light: var(--td-error-color-1); --td-error-color-light-hover: var(--td-error-color-2); --td-success-color-hover: var(--td-success-color-4); --td-success-color-focus: var(--td-success-color-2); --td-success-color-active: var(--td-success-color-6); --td-success-color-disabled: var(--td-success-color-3); --td-success-color-light: var(--td-success-color-1); --td-success-color-light-hover: var(--td-success-color-2); --td-mask-active: rgba(0, 0, 0, 0.6); --td-mask-disabled: rgba(255, 255, 255, 0.6); --td-bg-color-page: var(--td-gray-color-2); --td-bg-color-container: #fff; --td-bg-color-container-hover: var(--td-gray-color-1); --td-bg-color-container-active: var(--td-gray-color-3); --td-bg-color-container-select: #fff; --td-bg-color-secondarycontainer: var(--td-gray-color-1); --td-bg-color-secondarycontainer-hover: var(--td-gray-color-2); --td-bg-color-secondarycontainer-active: var(--td-gray-color-4); --td-bg-color-component: var(--td-gray-color-3); --td-bg-color-component-hover: var(--td-gray-color-4); --td-bg-color-component-active: var(--td-gray-color-6); --td-bg-color-secondarycomponent: var(--td-gray-color-4); --td-bg-color-secondarycomponent-hover: var(--td-gray-color-5); --td-bg-color-secondarycomponent-active: var(--td-gray-color-6); --td-bg-color-component-disabled: var(--td-gray-color-2); --td-bg-color-specialcomponent: #fff; --td-text-color-primary: var(--td-font-gray-1); --td-text-color-secondary: var(--td-font-gray-2); --td-text-color-placeholder: var(--td-font-gray-3); --td-text-color-disabled: var(--td-font-gray-4); --td-text-color-anti: #fff; --td-text-color-brand: var(--td-brand-color-7); --td-text-color-link: var(--td-brand-color-8); --td-border-level-1-color: var(--td-gray-color-3); --td-component-stroke: var(--td-gray-color-3); --td-border-level-2-color: var(--td-gray-color-4); --td-component-border: var(--td-gray-color-4); --td-shadow-1: 0 1px 10px rgba(0, 0, 0, 0.05), 0 4px 5px rgba(0, 0, 0, 0.08), 0 2px 4px -1px rgba(0, 0, 0, 0.12); --td-shadow-2: 0 3px 14px 2px rgba(0, 0, 0, 0.05), 0 8px 10px 1px rgba(0, 0, 0, 0.06), 0 5px 5px -3px rgba(0, 0, 0, 0.1); --td-shadow-3: 0 6px 30px 5px rgba(0, 0, 0, 0.05), 0 16px 24px 2px rgba(0, 0, 0, 0.04), 0 8px 10px -5px rgba(0, 0, 0, 0.08); --td-shadow-inset-top: inset 0 0.5px 0 #dcdcdc; --td-shadow-inset-right: inset 0.5px 0 0 #dcdcdc; --td-shadow-inset-bottom: inset 0 -0.5px 0 #dcdcdc; --td-shadow-inset-left: inset -0.5px 0 0 #dcdcdc; --td-table-shadow-color: rgba(0, 0, 0, 0.08); --td-scrollbar-color: rgba(0, 0, 0, 0.1); --td-scrollbar-hover-color: rgba(0, 0, 0, 0.3); --td-scroll-track-color: #fff; } .oneid-common[theme-mode=dark] { --td-brand-color-1: #1b2f51; --td-brand-color-2: #173463; --td-brand-color-3: #143975; --td-brand-color-4: #103d88; --td-brand-color-5: #0d429a; --td-brand-color-6: #054bbe; --td-brand-color-7: #2667d4; --td-brand-color-8: #4582e6; --td-brand-color-9: #699ef5; --td-brand-color-10: #96bbf8; --td-warning-color-1: #4f2a1d; --td-warning-color-2: #582f21; --td-warning-color-3: #733c23; --td-warning-color-4: #a75d2b; --td-warning-color-5: #cf6e2d; --td-warning-color-6: #dc7633; --td-warning-color-7: #e8935c; --td-warning-color-8: #ecbf91; --td-warning-color-9: #eed7bf; --td-warning-color-10: #f3e9dc; --td-error-color-1: #472324; --td-error-color-2: #5e2a2d; --td-error-color-3: #703439; --td-error-color-4: #83383e; --td-error-color-5: #a03f46; --td-error-color-6: #c64751; --td-error-color-7: #de6670; --td-error-color-8: #ec888e; --td-error-color-9: #edb1b6; --td-error-color-10: #eeced0; --td-success-color-1: #193a2a; --td-success-color-2: #1a4230; --td-success-color-3: #17533d; --td-success-color-4: #0d7a55; --td-success-color-5: #059465; --td-success-color-6: #43af8a; --td-success-color-7: #46bf96; --td-success-color-8: #80d2b6; --td-success-color-9: #b4e1d3; --td-success-color-10: #deede8; --td-gray-color-1: #f3f3f3; --td-gray-color-2: #eee; --td-gray-color-3: #e8e8e8; --td-gray-color-4: #ddd; --td-gray-color-5: #c6c6c6; --td-gray-color-6: #a6a6a6; --td-gray-color-7: #8b8b8b; --td-gray-color-8: #777; --td-gray-color-9: #5e5e5e; --td-gray-color-10: #4b4b4b; --td-gray-color-11: #393939; --td-gray-color-12: #2c2c2c; --td-gray-color-13: #242424; --td-gray-color-14: #181818; --td-font-white-1: rgba(255, 255, 255, 0.9); --td-font-white-2: rgba(255, 255, 255, 0.55); --td-font-white-3: rgba(255, 255, 255, 0.35); --td-font-white-4: rgba(255, 255, 255, 0.22); --td-font-gray-1: rgba(0, 0, 0, 0.9); --td-font-gray-2: rgba(0, 0, 0, 0.6); --td-font-gray-3: rgba(0, 0, 0, 0.4); --td-font-gray-4: rgba(0, 0, 0, 0.26); --td-brand-color: var(--td-brand-color-8); --td-warning-color: var(--td-warning-color-5); --td-error-color: var(--td-error-color-6); --td-success-color: var(--td-success-color-5); --td-brand-color-hover: var(--td-brand-color-7); --td-brand-color-focus: var(--td-brand-color-2); --td-brand-color-active: var(--td-brand-color-9); --td-brand-color-disabled: var(--td-brand-color-3); --td-brand-color-light: var(--td-brand-color-1); --td-brand-color-light-hover: var(--td-brand-color-2); --td-warning-color-hover: var(--td-warning-color-4); --td-warning-color-focus: var(--td-warning-color-2); --td-warning-color-active: var(--td-warning-color-6); --td-warning-color-disabled: var(--td-warning-color-3); --td-warning-color-light: var(--td-warning-color-1); --td-warning-color-light-hover: var(--td-warning-color-2); --td-error-color-hover: var(--td-error-color-5); --td-error-color-focus: var(--td-error-color-2); --td-error-color-active: var(--td-error-color-7); --td-error-color-disabled: var(--td-error-color-3); --td-error-color-light: var(--td-error-color-1); --td-error-color-light-hover: var(--td-error-color-2); --td-success-color-hover: var(--td-success-color-4); --td-success-color-focus: var(--td-success-color-2); --td-success-color-active: var(--td-success-color-6); --td-success-color-disabled: var(--td-success-color-3); --td-success-color-light: var(--td-success-color-1); --td-success-color-light-hover: var(--td-success-color-2); --td-mask-active: rgba(0, 0, 0, 0.4); --td-mask-disabled: rgba(0, 0, 0, 0.6); --td-bg-color-page: var(--td-gray-color-14); --td-bg-color-container: var(--td-gray-color-13); --td-bg-color-container-hover: var(--td-gray-color-12); --td-bg-color-container-active: var(--td-gray-color-10); --td-bg-color-container-select: var(--td-gray-color-9); --td-bg-color-secondarycontainer: var(--td-gray-color-12); --td-bg-color-secondarycontainer-hover: var(--td-gray-color-11); --td-bg-color-secondarycontainer-active: var(--td-gray-color-9); --td-bg-color-component: var(--td-gray-color-11); --td-bg-color-component-hover: var(--td-gray-color-10); --td-bg-color-component-active: var(--td-gray-color-9); --td-bg-color-secondarycomponent: var(--td-gray-color-10); --td-bg-color-secondarycomponent-hover: var(--td-gray-color-9); --td-bg-color-secondarycomponent-active: var(--td-gray-color-8); --td-bg-color-component-disabled: var(--td-gray-color-12); --td-bg-color-specialcomponent: transparent; --td-text-color-primary: var(--td-font-white-1); --td-text-color-secondary: var(--td-font-white-2); --td-text-color-placeholder: var(--td-font-white-3); --td-text-color-disabled: var(--td-font-white-4); --td-text-color-anti: #fff; --td-text-color-brand: var(--td-brand-color-8); --td-text-color-link: var(--td-brand-color-8); --td-border-level-1-color: var(--td-gray-color-11); --td-component-stroke: var(--td-gray-color-11); --td-border-level-2-color: var(--td-gray-color-9); --td-component-border: var(--td-gray-color-9); --td-shadow-1: 0 4px 6px rgba(0, 0, 0, 0.06), 0 1px 10px rgba(0, 0, 0, 0.08), 0 2px 4px rgba(0, 0, 0, 0.12); --td-shadow-2: 0 8px 10px rgba(0, 0, 0, 0.12), 0 3px 14px rgba(0, 0, 0, 0.1), 0 5px 5px rgba(0, 0, 0, 0.16); --td-shadow-3: 0 16px 24px rgba(0, 0, 0, 0.14), 0 6px 30px rgba(0, 0, 0, 0.12), 0 8px 10px rgba(0, 0, 0, 0.2); --td-shadow-inset-top: inset 0 0.5px 0 #5e5e5e; --td-shadow-inset-right: inset 0.5px 0 0 #5e5e5e; --td-shadow-inset-bottom: inset 0 -0.5px 0 #5e5e5e; --td-shadow-inset-left: inset -0.5px 0 0 #5e5e5e; --td-table-shadow-color: rgba(0, 0, 0, 0.55); --td-scrollbar-color: rgba(255, 255, 255, 0.1); --td-scrollbar-hover-color: rgba(255, 255, 255, 0.3); --td-scroll-track-color: #333; } .oneid-common { --td-radius-small: 2px; --td-radius-default: 3px; --td-radius-medium: 6px; --td-radius-large: 9px; --td-radius-extraLarge: 12px; --td-radius-round: 999px; --td-radius-circle: 50%; } .oneid-common { --td-font-family: PingFang SC, Microsoft YaHei, Arial Regular; --td-font-family-medium: PingFang SC, Microsoft YaHei, Arial Medium; --td-font-size-link-small: 12px; --td-font-size-link-medium: 14px; --td-font-size-link-large: 16px; --td-font-size-mark-small: 12px; --td-font-size-mark-medium: 14px; --td-font-size-body-small: 12px; --td-font-size-body-medium: 14px; --td-font-size-body-large: 16px; --td-font-size-title-small: 14px; --td-font-size-title-medium: 16px; --td-font-size-title-large: 20px; --td-font-size-headline-small: 24px; --td-font-size-headline-medium: 28px; --td-font-size-headline-large: 36px; --td-font-size-display-medium: 48px; --td-font-size-display-large: 64px; --td-line-height-link-small: 20px; --td-line-height-link-medium: 22px; --td-line-height-link-large: 24px; --td-line-height-mark-small: 20px; --td-line-height-mark-medium: 22px; --td-line-height-body-small: 20px; --td-line-height-body-medium: 22px; --td-line-height-body-large: 24px; --td-line-height-title-small: 22px; --td-line-height-title-medium: 24px; --td-line-height-title-large: 28px; --td-line-height-headline-small: 32px; --td-line-height-headline-medium: 36px; --td-line-height-headline-large: 44px; --td-line-height-display-medium: 56px; --td-line-height-display-large: 72px; --td-font-link-small: var(--td-font-size-link-small) / var(--td-line-height-link-small) var(--td-font-family); --td-font-link-medium: var(--td-font-size-link-medium) / var(--td-line-height-link-medium) var(--td-font-family); --td-font-link-large: var(--td-font-size-link-large) / var(--td-line-height-link-large) var(--td-font-family); --td-font-mark-small: 600 var(--td-font-size-mark-small) / var(--td-line-height-mark-small) var(--td-font-family); --td-font-mark-medium: 600 var(--td-font-size-mark-medium) / var(--td-line-height-mark-medium) var(--td-font-family); --td-font-body-small: var(--td-font-size-body-small) / var(--td-line-height-body-small) var(--td-font-family); --td-font-body-medium: var(--td-font-size-body-medium) / var(--td-line-height-body-medium) var(--td-font-family); --td-font-body-large: var(--td-font-size-body-large) / var(--td-line-height-body-large) var(--td-font-family); --td-font-title-small: 600 var(--td-font-size-title-small) / var(--td-line-height-title-small) var(--td-font-family); --td-font-title-medium: 600 var(--td-font-size-title-medium) / var(--td-line-height-title-medium) var(--td-font-family); --td-font-title-large: 600 var(--td-font-size-title-large) / var(--td-line-height-title-large) var(--td-font-family); --td-font-headline-small: 600 var(--td-font-size-headline-small) / var(--td-line-height-headline-small) var(--td-font-family); --td-font-headline-medium: 600 var(--td-font-size-headline-medium) / var(--td-line-height-headline-medium) var(--td-font-family); --td-font-headline-large: 600 var(--td-font-size-headline-large) / var(--td-line-height-headline-large) var(--td-font-family); --td-font-display-medium: 600 var(--td-font-size-display-medium) / var(--td-line-height-display-medium) var(--td-font-family); --td-font-display-large: 600 var(--td-font-size-display-large) / var(--td-line-height-display-large) var(--td-font-family); } .oneid-common { --td-size-1: 2px; --td-size-2: 4px; --td-size-3: 6px; --td-size-4: 8px; --td-size-5: 12px; --td-size-6: 16px; --td-size-7: 20px; --td-size-8: 24px; --td-size-9: 28px; --td-size-10: 32px; --td-size-11: 36px; --td-size-12: 40px; --td-size-13: 48px; --td-size-14: 56px; --td-size-15: 64px; --td-size-16: 72px; --td-comp-size-xxxs: var(--td-size-6); --td-comp-size-xxs: var(--td-size-7); --td-comp-size-xs: var(--td-size-8); --td-comp-size-s: var(--td-size-9); --td-comp-size-m: var(--td-size-10); --td-comp-size-l: var(--td-size-11); --td-comp-size-xl: var(--td-size-12); --td-comp-size-xxl: var(--td-size-13); --td-comp-size-xxxl: var(--td-size-14); --td-comp-size-xxxxl: var(--td-size-15); --td-comp-size-xxxxxl: var(--td-size-16); --td-pop-padding-s: var(--td-size-2); --td-pop-padding-m: var(--td-size-3); --td-pop-padding-l: var(--td-size-4); --td-pop-padding-xl: var(--td-size-5); --td-pop-padding-xxl: var(--td-size-6); --td-comp-paddingLR-xxs: var(--td-size-1); --td-comp-paddingLR-xs: var(--td-size-2); --td-comp-paddingLR-s: var(--td-size-4); --td-comp-paddingLR-m: var(--td-size-5); --td-comp-paddingLR-l: var(--td-size-6); --td-comp-paddingLR-xl: var(--td-size-8); --td-comp-paddingLR-xxl: var(--td-size-10); --td-comp-paddingTB-xxs: var(--td-size-1); --td-comp-paddingTB-xs: var(--td-size-2); --td-comp-paddingTB-s: var(--td-size-4); --td-comp-paddingTB-m: var(--td-size-5); --td-comp-paddingTB-l: var(--td-size-6); --td-comp-paddingTB-xl: var(--td-size-8); --td-comp-paddingTB-xxl: var(--td-size-10); --td-comp-margin-xxs: var(--td-size-1); --td-comp-margin-xs: var(--td-size-2); --td-comp-margin-s: var(--td-size-4); --td-comp-margin-m: var(--td-size-5); --td-comp-margin-l: var(--td-size-6); --td-comp-margin-xl: var(--td-size-7); --td-comp-margin-xxl: var(--td-size-8); --td-comp-margin-xxxl: var(--td-size-10); --td-comp-margin-xxxxl: var(--td-size-12); } .oneid-layout { font: var(--td-font-body-medium); color: var(--td-text-color-primary); -webkit-box-sizing: border-box; box-sizing: border-box; margin: 0; padding: 0; list-style: none; } .oneid-layout, .oneid-layout__direction-vertical { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; background: var(--td-bg-color-page); -webkit-box-flex: 1; -ms-flex: auto; flex: auto; } .oneid-layout--with-sider, .oneid-layout__direction-horizontal { -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; } .oneid-layout__header { height: var(--td-comp-size-xxxl); background-color: var(--td-bg-color-container); } .oneid-layout__content { -webkit-box-flex: 1; -ms-flex: auto; flex: auto; } .oneid-layout__sider { position: relative; -webkit-transition: all 0.2s; transition: all 0.2s; background: var(--td-bg-color-container); width: 232px; } .oneid-layout__footer { color: var(--td-text-color-placeholder); padding: 24px; } .oneid-row { font: var(--td-font-body-medium); color: var(--td-text-color-primary); -webkit-box-sizing: border-box; box-sizing: border-box; margin: 0; padding: 0; list-style: none; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-flow: row wrap; flex-flow: row wrap; } .oneid-row--start { -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; } .oneid-row--center { -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .oneid-row--end { -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; } .oneid-row--space-between { -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } .oneid-row--space-around { -ms-flex-pack: distribute; justify-content: space-around; } .oneid-row--top { -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; } .oneid-row--middle { -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .oneid-row--bottom { -webkit-box-align: end; -ms-flex-align: end; align-items: flex-end; } .oneid-row--align-top, .oneid-row--align-start { -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; } .oneid-row--align-middle, .oneid-row--align-center { -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .oneid-row--align-bottom, .oneid-row--align-end { -webkit-box-align: end; -ms-flex-align: end; align-items: flex-end; } .oneid-row--align-stretch { -webkit-box-align: stretch; -ms-flex-align: stretch; align-items: stretch; } .oneid-row--align-baseline { -webkit-box-align: baseline; -ms-flex-align: baseline; align-items: baseline; } .oneid-col { position: relative; max-width: 100%; min-height: 1px; -webkit-box-sizing: border-box; box-sizing: border-box; } .oneid-col-12 { display: block; -webkit-box-flex: 0; -ms-flex: 0 0 100%; flex: 0 0 100%; max-width: 100%; } .oneid-col-push-12 { left: 100%; } .oneid-col-pull-12 { right: 100%; } .oneid-col-offset-12 { margin-left: 100%; } .oneid-col-order-12 { -webkit-box-ordinal-group: 13; -ms-flex-order: 12; order: 12; } .oneid-col-11 { display: block; -webkit-box-flex: 0; -ms-flex: 0 0 91.66666667%; flex: 0 0 91.66666667%; max-width: 91.66666667%; } .oneid-col-push-11 { left: 91.66666667%; } .oneid-col-pull-11 { right: 91.66666667%; } .oneid-col-offset-11 { margin-left: 91.66666667%; } .oneid-col-order-11 { -webkit-box-ordinal-group: 12; -ms-flex-order: 11; order: 11; } .oneid-col-10 { display: block; -webkit-box-flex: 0; -ms-flex: 0 0 83.33333333%; flex: 0 0 83.33333333%; max-width: 83.33333333%; } .oneid-col-push-10 { left: 83.33333333%; } .oneid-col-pull-10 { right: 83.33333333%; } .oneid-col-offset-10 { margin-left: 83.33333333%; } .oneid-col-order-10 { -webkit-box-ordinal-group: 11; -ms-flex-order: 10; order: 10; } .oneid-col-9 { display: block; -webkit-box-flex: 0; -ms-flex: 0 0 75%; flex: 0 0 75%; max-width: 75%; } .oneid-col-push-9 { left: 75%; } .oneid-col-pull-9 { right: 75%; } .oneid-col-offset-9 { margin-left: 75%; } .oneid-col-order-9 { -webkit-box-ordinal-group: 10; -ms-flex-order: 9; order: 9; } .oneid-col-8 { display: block; -webkit-box-flex: 0; -ms-flex: 0 0 66.66666667%; flex: 0 0 66.66666667%; max-width: 66.66666667%; } .oneid-col-push-8 { left: 66.66666667%; } .oneid-col-pull-8 { right: 66.66666667%; } .oneid-col-offset-8 { margin-left: 66.66666667%; } .oneid-col-order-8 { -webkit-box-ordinal-group: 9; -ms-flex-order: 8; order: 8; } .oneid-col-7 { display: block; -webkit-box-flex: 0; -ms-flex: 0 0 58.33333333%; flex: 0 0 58.33333333%; max-width: 58.33333333%; } .oneid-col-push-7 { left: 58.33333333%; } .oneid-col-pull-7 { right: 58.33333333%; } .oneid-col-offset-7 { margin-left: 58.33333333%; } .oneid-col-order-7 { -webkit-box-ordinal-group: 8; -ms-flex-order: 7; order: 7; } .oneid-col-6 { display: block; -webkit-box-flex: 0; -ms-flex: 0 0 50%; flex: 0 0 50%; max-width: 50%; } .oneid-col-push-6 { left: 50%; } .oneid-col-pull-6 { right: 50%; } .oneid-col-offset-6 { margin-left: 50%; } .oneid-col-order-6 { -webkit-box-ordinal-group: 7; -ms-flex-order: 6; order: 6; } .oneid-col-5 { display: block; -webkit-box-flex: 0; -ms-flex: 0 0 41.66666667%; flex: 0 0 41.66666667%; max-width: 41.66666667%; } .oneid-col-push-5 { left: 41.66666667%; } .oneid-col-pull-5 { right: 41.66666667%; } .oneid-col-offset-5 { margin-left: 41.66666667%; } .oneid-col-order-5 { -webkit-box-ordinal-group: 6; -ms-flex-order: 5; order: 5; } .oneid-col-4 { display: block; -webkit-box-flex: 0; -ms-flex: 0 0 33.33333333%; flex: 0 0 33.33333333%; max-width: 33.33333333%; } .oneid-col-push-4 { left: 33.33333333%; } .oneid-col-pull-4 { right: 33.33333333%; } .oneid-col-offset-4 { margin-left: 33.33333333%; } .oneid-col-order-4 { -webkit-box-ordinal-group: 5; -ms-flex-order: 4; order: 4; } .oneid-col-3 { display: block; -webkit-box-flex: 0; -ms-flex: 0 0 25%; flex: 0 0 25%; max-width: 25%; } .oneid-col-push-3 { left: 25%; } .oneid-col-pull-3 { right: 25%; } .oneid-col-offset-3 { margin-left: 25%; } .oneid-col-order-3 { -webkit-box-ordinal-group: 4; -ms-flex-order: 3; order: 3; } .oneid-col-2 { display: block; -webkit-box-flex: 0; -ms-flex: 0 0 16.66666667%; flex: 0 0 16.66666667%; max-width: 16.66666667%; } .oneid-col-push-2 { left: 16.66666667%; } .oneid-col-pull-2 { right: 16.66666667%; } .oneid-col-offset-2 { margin-left: 16.66666667%; } .oneid-col-order-2 { -webkit-box-ordinal-group: 3; -ms-flex-order: 2; order: 2; } .oneid-col-1 { display: block; -webkit-box-flex: 0; -ms-flex: 0 0 8.33333333%; flex: 0 0 8.33333333%; max-width: 8.33333333%; } .oneid-col-push-1 { left: 8.33333333%; } .oneid-col-pull-1 { right: 8.33333333%; } .oneid-col-offset-1 { margin-left: 8.33333333%; } .oneid-col-order-1 { -webkit-box-ordinal-group: 2; -ms-flex-order: 1; order: 1; } .oneid-col-0 { display: none; } .oneid-col-push-0 { left: auto; } .oneid-col-pull-0 { right: auto; } .oneid-col-push-0 { left: auto; } .oneid-col-pull-0 { right: auto; } .oneid-col-offset-0 { margin-left: 0; } .oneid-col-order-0 { -webkit-box-ordinal-group: 1; -ms-flex-order: 0; order: 0; } .oneid-col-xs-12 { display: block; -webkit-box-flex: 0; -ms-flex: 0 0 100%; flex: 0 0 100%; max-width: 100%; } .oneid-col-xs-push-12 { left: 100%; } .oneid-col-xs-pull-12 { right: 100%; } .oneid-col-xs-offset-12 { margin-left: 100%; } .oneid-col-xs-order-12 { -webkit-box-ordinal-group: 13; -ms-flex-order: 12; order: 12; } .oneid-col-xs-11 { display: block; -webkit-box-flex: 0; -ms-flex: 0 0 91.66666667%; flex: 0 0 91.66666667%; max-width: 91.66666667%; } .oneid-col-xs-push-11 { left: 91.66666667%; } .oneid-col-xs-pull-11 { right: 91.66666667%; } .oneid-col-xs-offset-11 { margin-left: 91.66666667%; } .oneid-col-xs-order-11 { -webkit-box-ordinal-group: 12; -ms-flex-order: 11; order: 11; } .oneid-col-xs-10 { display: block; -webkit-box-flex: 0; -ms-flex: 0 0 83.33333333%; flex: 0 0 83.33333333%; max-width: 83.33333333%; } .oneid-col-xs-push-10 { left: 83.33333333%; } .oneid-col-xs-pull-10 { right: 83.33333333%; } .oneid-col-xs-offset-10 { margin-left: 83.33333333%; } .oneid-col-xs-order-10 { -webkit-box-ordinal-group: 11; -ms-flex-order: 10; order: 10; } .oneid-col-xs-9 { display: block; -webkit-box-flex: 0; -ms-flex: 0 0 75%; flex: 0 0 75%; max-width: 75%; } .oneid-col-xs-push-9 { left: 75%; } .oneid-col-xs-pull-9 { right: 75%; } .oneid-col-xs-offset-9 { margin-left: 75%; } .oneid-col-xs-order-9 { -webkit-box-ordinal-group: 10; -ms-flex-order: 9; order: 9; } .oneid-col-xs-8 { display: block; -webkit-box-flex: 0; -ms-flex: 0 0 66.66666667%; flex: 0 0 66.66666667%; max-width: 66.66666667%; } .oneid-col-xs-push-8 { left: 66.66666667%; } .oneid-col-xs-pull-8 { right: 66.66666667%; } .oneid-col-xs-offset-8 { margin-left: 66.66666667%; } .oneid-col-xs-order-8 { -webkit-box-ordinal-group: 9; -ms-flex-order: 8; order: 8; } .oneid-col-xs-7 { display: block; -webkit-box-flex: 0; -ms-flex: 0 0 58.33333333%; flex: 0 0 58.33333333%; max-width: 58.33333333%; } .oneid-col-xs-push-7 { left: 58.33333333%; } .oneid-col-xs-pull-7 { right: 58.33333333%; } .oneid-col-xs-offset-7 { margin-left: 58.33333333%; } .oneid-col-xs-order-7 { -webkit-box-ordinal-group: 8; -ms-flex-order: 7; order: 7; } .oneid-col-xs-6 { display: block; -webkit-box-flex: 0; -ms-flex: 0 0 50%; flex: 0 0 50%; max-width: 50%; } .oneid-col-xs-push-6 { left: 50%; } .oneid-col-xs-pull-6 { right: 50%; } .oneid-col-xs-offset-6 { margin-left: 50%; } .oneid-col-xs-order-6 { -webkit-box-ordinal-group: 7; -ms-flex-order: 6; order: 6; } .oneid-col-xs-5 { display: block; -webkit-box-flex: 0; -ms-flex: 0 0 41.66666667%; flex: 0 0 41.66666667%; max-width: 41.66666667%; } .oneid-col-xs-push-5 { left: 41.66666667%; } .oneid-col-xs-pull-5 { right: 41.66666667%; } .oneid-col-xs-offset-5 { margin-left: 41.66666667%; } .oneid-col-xs-order-5 { -webkit-box-ordinal-group: 6; -ms-flex-order: 5; order: 5; } .oneid-col-xs-4 { display: block; -webkit-box-flex: 0; -ms-flex: 0 0 33.33333333%; flex: 0 0 33.33333333%; max-width: 33.33333333%; } .oneid-col-xs-push-4 { left: 33.33333333%; } .oneid-col-xs-pull-4 { right: 33.33333333%; } .oneid-col-xs-offset-4 { margin-left: 33.33333333%; } .oneid-col-xs-order-4 { -webkit-box-ordinal-group: 5; -ms-flex-order: 4; order: 4; } .oneid-col-xs-3 { display: block; -webkit-box-flex: 0; -ms-flex: 0 0 25%; flex: 0 0 25%; max-width: 25%; } .oneid-col-xs-push-3 { left: 25%; } .oneid-col-xs-pull-3 { right: 25%; } .oneid-col-xs-offset-3 { margin-left: 25%; } .oneid-col-xs-order-3 { -webkit-box-ordinal-group: 4; -ms-flex-order: 3; order: 3; } .oneid-col-xs-2 { display: block; -webkit-box-flex: 0; -ms-flex: 0 0 16.66666667%; flex: 0 0 16.66666667%; max-width: 16.66666667%; } .oneid-col-xs-push-2 { left: 16.66666667%; } .oneid-col-xs-pull-2 { right: 16.66666667%; } .oneid-col-xs-offset-2 { margin-left: 16.66666667%; } .oneid-col-xs-order-2 { -webkit-box-ordinal-group: 3; -ms-flex-order: 2; order: 2; } .oneid-col-xs-1 { display: block; -webkit-box-flex: 0; -ms-flex: 0 0 8.33333333%; flex: 0 0 8.33333333%; max-width: 8.33333333%; } .oneid-col-xs-push-1 { left: 8.33333333%; } .oneid-col-xs-pull-1 { right: 8.33333333%; } .oneid-col-xs-offset-1 { margin-left: 8.33333333%; } .oneid-col-xs-order-1 { -webkit-box-ordinal-group: 2; -ms-flex-order: 1; order: 1; } .oneid-col-xs-0 { display: none; } .oneid-col-push-0 { left: auto; } .oneid-col-pull-0 { right: auto; } .oneid-col-xs-push-0 { left: auto; } .oneid-col-xs-pull-0 { right: auto; } .oneid-col-xs-offset-0 { margin-left: 0; } .oneid-col-xs-order-0 { -webkit-box-ordinal-group: 1; -ms-flex-order: 0; order: 0; } @media (min-width: 768px) { .oneid-col-sm-12 { display: block; -webkit-box-flex: 0; -ms-flex: 0 0 100%; flex: 0 0 100%; max-width: 100%; } .oneid-col-sm-push-12 { left: 100%; } .oneid-col-sm-pull-12 { right: 100%; } .oneid-col-sm-offset-12 { margin-left: 100%; } .oneid-col-sm-order-12 { -webkit-box-ordinal-group: 13; -ms-flex-order: 12; order: 12; } .oneid-col-sm-11 { display: block; -webkit-box-flex: 0; -ms-flex: 0 0 91.66666667%; flex: 0 0 91.66666667%; max-width: 91.66666667%; } .oneid-col-sm-push-11 { left: 91.66666667%; } .oneid-col-sm-pull-11 { right: 91.66666667%; } .oneid-col-sm-offset-11 { margin-left: 91.66666667%; } .oneid-col-sm-order-11 { -webkit-box-ordinal-group: 12; -ms-flex-order: 11; order: 11; } .oneid-col-sm-10 { display: block; -webkit-box-flex: 0; -ms-flex: 0 0 83.33333333%; flex: 0 0 83.33333333%; max-width: 83.33333333%; } .oneid-col-sm-push-10 { left: 83.33333333%; } .oneid-col-sm-pull-10 { right: 83.33333333%; } .oneid-col-sm-offset-10 { margin-left: 83.33333333%; } .oneid-col-sm-order-10 { -webkit-box-ordinal-group: 11; -ms-flex-order: 10; order: 10; } .oneid-col-sm-9 { display: block; -webkit-box-flex: 0; -ms-flex: 0 0 75%; flex: 0 0 75%; max-width: 75%; } .oneid-col-sm-push-9 { left: 75%; } .oneid-col-sm-pull-9 { right: 75%; } .oneid-col-sm-offset-9 { margin-left: 75%; } .oneid-col-sm-order-9 { -webkit-box-ordinal-group: 10; -ms-flex-order: 9; order: 9; } .oneid-col-sm-8 { display: block; -webkit-box-flex: 0; -ms-flex: 0 0 66.66666667%; flex: 0 0 66.66666667%; max-width: 66.66666667%; } .oneid-col-sm-push-8 { left: 66.66666667%; } .oneid-col-sm-pull-8 { right: 66.66666667%; } .oneid-col-sm-offset-8 { margin-left: 66.66666667%; } .oneid-col-sm-order-8 { -webkit-box-ordinal-group: 9; -ms-flex-order: 8; order: 8; } .oneid-col-sm-7 { display: block; -webkit-box-flex: 0; -ms-flex: 0 0 58.33333333%; flex: 0 0 58.33333333%; max-width: 58.33333333%; } .oneid-col-sm-push-7 { left: 58.33333333%; } .oneid-col-sm-pull-7 { right: 58.33333333%; } .oneid-col-sm-offset-7 { margin-left: 58.33333333%; } .oneid-col-sm-order-7 { -webkit-box-ordinal-group: 8; -ms-flex-order: 7; order: 7; } .oneid-col-sm-6 { display: block; -webkit-box-flex: 0; -ms-flex: 0 0 50%; flex: 0 0 50%; max-width: 50%; } .oneid-col-sm-push-6 { left: 50%; } .oneid-col-sm-pull-6 { right: 50%; } .oneid-col-sm-offset-6 { margin-left: 50%; } .oneid-col-sm-order-6 { -webkit-box-ordinal-group: 7; -ms-flex-order: 6; order: 6; } .oneid-col-sm-5 { display: block; -webkit-box-flex: 0; -ms-flex: 0 0 41.66666667%; flex: 0 0 41.66666667%; max-width: 41.66666667%; } .oneid-col-sm-push-5 { left: 41.66666667%; } .oneid-col-sm-pull-5 { right: 41.66666667%; } .oneid-col-sm-offset-5 { margin-left: 41.66666667%; } .oneid-col-sm-order-5 { -webkit-box-ordinal-group: 6; -ms-flex-order: 5; order: 5; } .oneid-col-sm-4 { display: block; -webkit-box-flex: 0; -ms-flex: 0 0 33.33333333%; flex: 0 0 33.33333333%; max-width: 33.33333333%; } .oneid-col-sm-push-4 { left: 33.33333333%; } .oneid-col-sm-pull-4 { right: 33.33333333%; } .oneid-col-sm-offset-4 { margin-left: 33.33333333%; } .oneid-col-sm-order-4 { -webkit-box-ordinal-group: 5; -ms-flex-order: 4; order: 4; } .oneid-col-sm-3 { display: block; -webkit-box-flex: 0; -ms-flex: 0 0 25%; flex: 0 0 25%; max-width: 25%; } .oneid-col-sm-push-3 { left: 25%; } .oneid-col-sm-pull-3 { right: 25%; } .oneid-col-sm-offset-3 { margin-left: 25%; } .oneid-col-sm-order-3 { -webkit-box-ordinal-group: 4; -ms-flex-order: 3; order: 3; } .oneid-col-sm-2 { display: block; -webkit-box-flex: 0; -ms-flex: 0 0 16.66666667%; flex: 0 0 16.66666667%; max-width: 16.66666667%; } .oneid-col-sm-push-2 { left: 16.66666667%; } .oneid-col-sm-pull-2 { right: 16.66666667%; } .oneid-col-sm-offset-2 { margin-left: 16.66666667%; } .oneid-col-sm-order-2 { -webkit-box-ordinal-group: 3; -ms-flex-order: 2; order: 2; } .oneid-col-sm-1 { display: block; -webkit-box-flex: 0; -ms-flex: 0 0 8.33333333%; flex: 0 0 8.33333333%; max-width: 8.33333333%; } .oneid-col-sm-push-1 { left: 8.33333333%; } .oneid-col-sm-pull-1 { right: 8.33333333%; } .oneid-col-sm-offset-1 { margin-left: 8.33333333%; } .oneid-col-sm-order-1 { -webkit-box-ordinal-group: 2; -ms-flex-order: 1; order: 1; } .oneid-col-sm-0 { display: none; } .oneid-col-push-0 { left: auto; } .oneid-col-pull-0 { right: auto; } .oneid-col-sm-push-0 { left: auto; } .oneid-col-sm-pull-0 { right: auto; } .oneid-col-sm-offset-0 { margin-left: 0; } .oneid-col-sm-order-0 { -webkit-box-ordinal-group: 1; -ms-flex-order: 0; order: 0; } } @media (min-width: 992px) { .oneid-col-md-12 { display: block; -webkit-box-flex: 0; -ms-flex: 0 0 100%; flex: 0 0 100%; max-width: 100%; } .oneid-col-md-push-12 { left: 100%; } .oneid-col-md-pull-12 { right: 100%; } .oneid-col-md-offset-12 { margin-left: 100%; } .oneid-col-md-order-12 { -webkit-box-ordinal-group: 13; -ms-flex-order: 12; order: 12; } .oneid-col-md-11 { display: block; -webkit-box-flex: 0; -ms-flex: 0 0 91.66666667%; flex: 0 0 91.66666667%; max-width: 91.66666667%; } .oneid-col-md-push-11 { left: 91.66666667%; } .oneid-col-md-pull-11 { right: 91.66666667%; } .oneid-col-md-offset-11 { margin-left: 91.66666667%; } .oneid-col-md-order-11 { -webkit-box-ordinal-group: 12; -ms-flex-order: 11; order: 11; } .oneid-col-md-10 { display: block; -webkit-box-flex: 0; -ms-flex: 0 0 83.33333333%; flex: 0 0 83.33333333%; max-width: 83.33333333%; } .oneid-col-md-push-10 { left: 83.33333333%; } .oneid-col-md-pull-10 { right: 83.33333333%; } .oneid-col-md-offset-10 { margin-left: 83.33333333%; } .oneid-col-md-order-10 { -webkit-box-ordinal-group: 11; -ms-flex-order: 10; order: 10; } .oneid-col-md-9 { display: block; -webkit-box-flex: 0; -ms-flex: 0 0 75%; flex: 0 0 75%; max-width: 75%; } .oneid-col-md-push-9 { left: 75%; } .oneid-col-md-pull-9 { right: 75%; } .oneid-col-md-offset-9 { margin-left: 75%; } .oneid-col-md-order-9 { -webkit-box-ordinal-group: 10; -ms-flex-order: 9; order: 9; } .oneid-col-md-8 { display: block; -webkit-box-flex: 0; -ms-flex: 0 0 66.66666667%; flex: 0 0 66.66666667%; max-width: 66.66666667%; } .oneid-col-md-push-8 { left: 66.66666667%; } .oneid-col-md-pull-8 { right: 66.66666667%; } .oneid-col-md-offset-8 { margin-left: 66.66666667%; } .oneid-col-md-order-8 { -webkit-box-ordinal-group: 9; -ms-flex-order: 8; order: 8; } .oneid-col-md-7 { display: block; -webkit-box-flex: 0; -ms-flex: 0 0 58.33333333%; flex: 0 0 58.33333333%; max-width: 58.33333333%; } .oneid-col-md-push-7 { left: 58.33333333%; } .oneid-col-md-pull-7 { right: 58.33333333%; } .oneid-col-md-offset-7 { margin-left: 58.33333333%; } .oneid-col-md-order-7 { -webkit-box-ordinal-group: 8; -ms-flex-order: 7; order: 7; } .oneid-col-md-6 { display: block; -webkit-box-flex: 0; -ms-flex: 0 0 50%; flex: 0 0 50%; max-width: 50%; } .oneid-col-md-push-6 { left: 50%; } .oneid-col-md-pull-6 { right: 50%; } .oneid-col-md-offset-6 { margin-left: 50%; } .oneid-col-md-order-6 { -webkit-box-ordinal-group: 7; -ms-flex-order: 6; order: 6; } .oneid-col-md-5 { display: block; -webkit-box-flex: 0; -ms-flex: 0 0 41.66666667%; flex: 0 0 41.66666667%; max-width: 41.66666667%; } .oneid-col-md-push-5 { left: 41.66666667%; } .oneid-col-md-pull-5 { right: 41.66666667%; } .oneid-col-md-offset-5 { margin-left: 41.66666667%; } .oneid-col-md-order-5 { -webkit-box-ordinal-group: 6; -ms-flex-order: 5; order: 5; } .oneid-col-md-4 { display: block; -webkit-box-flex: 0; -ms-flex: 0 0 33.33333333%; flex: 0 0 33.33333333%; max-width: 33.33333333%; } .oneid-col-md-push-4 { left: 33.33333333%; } .oneid-col-md-pull-4 { right: 33.33333333%; } .oneid-col-md-offset-4 { margin-left: 33.33333333%; } .oneid-col-md-order-4 { -webkit-box-ordinal-group: 5; -ms-flex-order: 4; order: 4; } .oneid-col-md-3 { display: block; -webkit-box-flex: 0; -ms-flex: 0 0 25%; flex: 0 0 25%; max-width: 25%; } .oneid-col-md-push-3 { left: 25%; } .oneid-col-md-pull-3 { right: 25%; } .oneid-col-md-offset-3 { margin-left: 25%; } .oneid-col-md-order-3 { -webkit-box-ordinal-group: 4; -ms-flex-order: 3; order: 3; } .oneid-col-md-2 { display: block; -webkit-box-flex: 0; -ms-flex: 0 0 16.66666667%; flex: 0 0 16.66666667%; max-width: 16.66666667%; } .oneid-col-md-push-2 { left: 16.66666667%; } .oneid-col-md-pull-2 { right: 16.66666667%; } .oneid-col-md-offset-2 { margin-left: 16.66666667%; } .oneid-col-md-order-2 { -webkit-box-ordinal-group: 3; -ms-flex-order: 2; order: 2; } .oneid-col-md-1 { display: block; -webkit-box-flex: 0; -ms-flex: 0 0 8.33333333%; flex: 0 0 8.33333333%; max-width: 8.33333333%; } .oneid-col-md-push-1 { left: 8.33333333%; } .oneid-col-md-pull-1 { right: 8.33333333%; } .oneid-col-md-offset-1 { margin-left: 8.33333333%; } .oneid-col-md-order-1 { -webkit-box-ordinal-group: 2; -ms-flex-order: 1; order: 1; } .oneid-col-md-0 { display: none; } .oneid-col-push-0 { left: auto; } .oneid-col-pull-0 { right: auto; } .oneid-col-md-push-0 { left: auto; } .oneid-col-md-pull-0 { right: auto; } .oneid-col-md-offset-0 { margin-left: 0; } .oneid-col-md-order-0 { -webkit-box-ordinal-group: 1; -ms-flex-order: 0; order: 0; } } @media (min-width: 1200px) { .oneid-col-lg-12 { display: block; -webkit-box-flex: 0; -ms-flex: 0 0 100%; flex: 0 0 100%; max-width: 100%; } .oneid-col-lg-push-12 { left: 100%; } .oneid-col-lg-pull-12 { right: 100%; } .oneid-col-lg-offset-12 { margin-left: 100%; } .oneid-col-lg-order-12 { -webkit-box-ordinal-group: 13; -ms-flex-order: 12; order: 12; } .oneid-col-lg-11 { display: block; -webkit-box-flex: 0; -ms-flex: 0 0 91.66666667%; flex: 0 0 91.66666667%; max-width: 91.66666667%; } .oneid-col-lg-push-11 { left: 91.66666667%; } .oneid-col-lg-pull-11 { right: 91.66666667%; } .oneid-col-lg-offset-11 { margin-left: 91.66666667%; } .oneid-col-lg-order-11 { -webkit-box-ordinal-group: 12; -ms-flex-order: 11; order: 11; } .oneid-col-lg-10 { display: block; -webkit-box-flex: 0; -ms-flex: 0 0 83.33333333%; flex: 0 0 83.33333333%; max-width: 83.33333333%; } .oneid-col-lg-push-10 { left: 83.33333333%; } .oneid-col-lg-pull-10 { right: 83.33333333%; } .oneid-col-lg-offset-10 { margin-left: 83.33333333%; } .oneid-col-lg-order-10 { -webkit-box-ordinal-group: 11; -ms-flex-order: 10; order: 10; } .oneid-col-lg-9 { display: block; -webkit-box-flex: 0; -ms-flex: 0 0 75%; flex: 0 0 75%; max-width: 75%; } .oneid-col-lg-push-9 { left: 75%; } .oneid-col-lg-pull-9 { right: 75%; } .oneid-col-lg-offset-9 { margin-left: 75%; } .oneid-col-lg-order-9 { -webkit-box-ordinal-group: 10; -ms-flex-order: 9; order: 9; } .oneid-col-lg-8 { display: block; -webkit-box-flex: 0; -ms-flex: 0 0 66.66666667%; flex: 0 0 66.66666667%; max-width: 66.66666667%; } .oneid-col-lg-push-8 { left: 66.66666667%; } .oneid-col-lg-pull-8 { right: 66.66666667%; } .oneid-col-lg-offset-8 { margin-left: 66.66666667%; } .oneid-col-lg-order-8 { -webkit-box-ordinal-group: 9; -ms-flex-order: 8; order: 8; } .oneid-col-lg-7 { display: block; -webkit-box-flex: 0; -ms-flex: 0 0 58.33333333%; flex: 0 0 58.33333333%; max-width: 58.33333333%; } .oneid-col-lg-push-7 { left: 58.33333333%; } .oneid-col-lg-pull-7 { right: 58.33333333%; } .oneid-col-lg-offset-7 { margin-left: 58.33333333%; } .oneid-col-lg-order-7 { -webkit-box-ordinal-group: 8; -ms-flex-order: 7; order: 7; } .oneid-col-lg-6 { display: block; -webkit-box-flex: 0; -ms-flex: 0 0 50%; flex: 0 0 50%; max-width: 50%; } .oneid-col-lg-push-6 { left: 50%; } .oneid-col-lg-pull-6 { right: 50%; } .oneid-col-lg-offset-6 { margin-left: 50%; } .oneid-col-lg-order-6 { -webkit-box-ordinal-group: 7; -ms-flex-order: 6; order: 6; } .oneid-col-lg-5 { display: block; -webkit-box-flex: 0; -ms-flex: 0 0 41.66666667%; flex: 0 0 41.66666667%; max-width: 41.66666667%; } .oneid-col-lg-push-5 { left: 41.66666667%; } .oneid-col-lg-pull-5 { right: 41.66666667%; } .oneid-col-lg-offset-5 { margin-left: 41.66666667%; } .oneid-col-lg-order-5 { -webkit-box-ordinal-group: 6; -ms-flex-order: 5; order: 5; } .oneid-col-lg-4 { display: block; -webkit-box-flex: 0; -ms-flex: 0 0 33.33333333%; flex: 0 0 33.33333333%; max-width: 33.33333333%; } .oneid-col-lg-push-4 { left: 33.33333333%; } .oneid-col-lg-pull-4 { right: 33.33333333%; } .oneid-col-lg-offset-4 { margin-left: 33.33333333%; } .oneid-col-lg-order-4 { -webkit-box-ordinal-group: 5; -ms-flex-order: 4; order: 4; } .oneid-col-lg-3 { display: block; -webkit-box-flex: 0; -ms-flex: 0 0 25%; flex: 0 0 25%; max-width: 25%; } .oneid-col-lg-push-3 { left: 25%; } .oneid-col-lg-pull-3 { right: 25%; } .oneid-col-lg-offset-3 { margin-left: 25%; } .oneid-col-lg-order-3 { -webkit-box-ordinal-group: 4; -ms-flex-order: 3; order: 3; } .oneid-col-lg-2 { display: block; -webkit-box-flex: 0; -ms-flex: 0 0 16.66666667%; flex: 0 0 16.66666667%; max-width: 16.66666667%; } .oneid-col-lg-push-2 { left: 16.66666667%; } .oneid-col-lg-pull-2 { right: 16.66666667%; } .oneid-col-lg-offset-2 { margin-left: 16.66666667%; } .oneid-col-lg-order-2 { -webkit-box-ordinal-group: 3; -ms-flex-order: 2; order: 2; } .oneid-col-lg-1 { display: block; -webkit-box-flex: 0; -ms-flex: 0 0 8.33333333%; flex: 0 0 8.33333333%; max-width: 8.33333333%; } .oneid-col-lg-push-1 { left: 8.33333333%; } .oneid-col-lg-pull-1 { right: 8.33333333%; } .oneid-col-lg-offset-1 { margin-left: 8.33333333%; } .oneid-col-lg-order-1 { -webkit-box-ordinal-group: 2; -ms-flex-order: 1; order: 1; } .oneid-col-lg-0 { display: none; } .oneid-col-push-0 { left: auto; } .oneid-col-pull-0 { right: auto; } .oneid-col-lg-push-0 { left: auto; } .oneid-col-lg-pull-0 { right: auto; } .oneid-col-lg-offset-0 { margin-left: 0; } .oneid-col-lg-order-0 { -webkit-box-ordinal-group: 1; -ms-flex-order: 0; order: 0; } } @media (min-width: 1400px) { .oneid-col-xl-12 { display: block; -webkit-box-flex: 0; -ms-flex: 0 0 100%; flex: 0 0 100%; max-width: 100%; } .oneid-col-xl-push-12 { left: 100%; } .oneid-col-xl-pull-12 { right: 100%; } .oneid-col-xl-offset-12 { margin-left: 100%; } .oneid-col-xl-order-12 { -webkit-box-ordinal-group: 13; -ms-flex-order: 12; order: 12; } .oneid-col-xl-11 { display: block; -webkit-box-flex: 0; -ms-flex: 0 0 91.66666667%; flex: 0 0 91.66666667%; max-width: 91.66666667%; } .oneid-col-xl-push-11 { left: 91.66666667%; } .oneid-col-xl-pull-11 { right: 91.66666667%; } .oneid-col-xl-offset-11 { margin-left: 91.66666667%; } .oneid-col-xl-order-11 { -webkit-box-ordinal-group: 12; -ms-flex-order: 11; order: 11; } .oneid-col-xl-10 { display: block; -webkit-box-flex: 0; -ms-flex: 0 0 83.33333333%; flex: 0 0 83.33333333%; max-width: 83.33333333%; } .oneid-col-xl-push-10 { left: 83.33333333%; } .oneid-col-xl-pull-10 { right: 83.33333333%; } .oneid-col-xl-offset-10 { margin-left: 83.33333333%; } .oneid-col-xl-order-10 { -webkit-box-ordinal-group: 11; -ms-flex-order: 10; order: 10; } .oneid-col-xl-9 { display: block; -webkit-box-flex: 0; -ms-flex: 0 0 75%; flex: 0 0 75%; max-width: 75%; } .oneid-col-xl-push-9 { left: 75%; } .oneid-col-xl-pull-9 { right: 75%; } .oneid-col-xl-offset-9 { margin-left: 75%; } .oneid-col-xl-order-9 { -webkit-box-ordinal-group: 10; -ms-flex-order: 9; order: 9; } .oneid-col-xl-8 { display: block; -webkit-box-flex: 0; -ms-flex: 0 0 66.66666667%; flex: 0 0 66.66666667%; max-width: 66.66666667%; } .oneid-col-xl-push-8 { left: 66.66666667%; } .oneid-col-xl-pull-8 { right: 66.66666667%; } .oneid-col-xl-offset-8 { margin-left: 66.66666667%; } .oneid-col-xl-order-8 { -webkit-box-ordinal-group: 9; -ms-flex-order: 8; order: 8; } .oneid-col-xl-7 { display: block; -webkit-box-flex: 0; -ms-flex: 0 0 58.33333333%; flex: 0 0 58.33333333%; max-width: 58.33333333%; } .oneid-col-xl-push-7 { left: 58.33333333%; } .oneid-col-xl-pull-7 { right: 58.33333333%; } .oneid-col-xl-offset-7 { margin-left: 58.33333333%; } .oneid-col-xl-order-7 { -webkit-box-ordinal-group: 8; -ms-flex-order: 7; order: 7; } .oneid-col-xl-6 { display: block; -webkit-box-flex: 0; -ms-flex: 0 0 50%; flex: 0 0 50%; max-width: 50%; } .oneid-col-xl-push-6 { left: 50%; } .oneid-col-xl-pull-6 { right: 50%; } .oneid-col-xl-offset-6 { margin-left: 50%; } .oneid-col-xl-order-6 { -webkit-box-ordinal-group: 7; -ms-flex-order: 6; order: 6; } .oneid-col-xl-5 { display: block; -webkit-box-flex: 0; -ms-flex: 0 0 41.66666667%; flex: 0 0 41.66666667%; max-width: 41.66666667%; } .oneid-col-xl-push-5 { left: 41.66666667%; } .oneid-col-xl-pull-5 { right: 41.66666667%; } .oneid-col-xl-offset-5 { margin-left: 41.66666667%; } .oneid-col-xl-order-5 { -webkit-box-ordinal-group: 6; -ms-flex-order: 5; order: 5; } .oneid-col-xl-4 { display: block; -webkit-box-flex: 0; -ms-flex: 0 0 33.33333333%; flex: 0 0 33.33333333%; max-width: 33.33333333%; } .oneid-col-xl-push-4 { left: 33.33333333%; } .oneid-col-xl-pull-4 { right: 33.33333333%; } .oneid-col-xl-offset-4 { margin-left: 33.33333333%; } .oneid-col-xl-order-4 { -webkit-box-ordinal-group: 5; -ms-flex-order: 4; order: 4; } .oneid-col-xl-3 { display: block; -webkit-box-flex: 0; -ms-flex: 0 0 25%; flex: 0 0 25%; max-width: 25%; } .oneid-col-xl-push-3 { left: 25%; } .oneid-col-xl-pull-3 { right: 25%; } .oneid-col-xl-offset-3 { margin-left: 25%; } .oneid-col-xl-order-3 { -webkit-box-ordinal-group: 4; -ms-flex-order: 3; order: 3; } .oneid-col-xl-2 { display: block; -webkit-box-flex: 0; -ms-flex: 0 0 16.66666667%; flex: 0 0 16.66666667%; max-width: 16.66666667%; } .oneid-col-xl-push-2 { left: 16.66666667%; } .oneid-col-xl-pull-2 { right: 16.66666667%; } .oneid-col-xl-offset-2 { margin-left: 16.66666667%; } .oneid-col-xl-order-2 { -webkit-box-ordinal-group: 3; -ms-flex-order: 2; order: 2; } .oneid-col-xl-1 { display: block; -webkit-box-flex: 0; -ms-flex: 0 0 8.33333333%; flex: 0 0 8.33333333%; max-width: 8.33333333%; } .oneid-col-xl-push-1 { left: 8.33333333%; } .oneid-col-xl-pull-1 { right: 8.33333333%; } .oneid-col-xl-offset-1 { margin-left: 8.33333333%; } .oneid-col-xl-order-1 { -webkit-box-ordinal-group: 2; -ms-flex-order: 1; order: 1; } .oneid-col-xl-0 { display: none; } .oneid-col-push-0 { left: auto; } .oneid-col-pull-0 { right: auto; } .oneid-col-xl-push-0 { left: auto; } .oneid-col-xl-pull-0 { right: auto; } .oneid-col-xl-offset-0 { margin-left: 0; } .oneid-col-xl-order-0 { -webkit-box-ordinal-group: 1; -ms-flex-order: 0; order: 0; } } @media (min-width: 1880px) { .oneid-col-xxl-12 { display: block; -webkit-box-flex: 0; -ms-flex: 0 0 100%; flex: 0 0 100%; max-width: 100%; } .oneid-col-xxl-push-12 { left: 100%; } .oneid-col-xxl-pull-12 { right: 100%; } .oneid-col-xxl-offset-12 { margin-left: 100%; } .oneid-col-xxl-order-12 { -webkit-box-ordinal-group: 13; -ms-flex-order: 12; order: 12; } .oneid-col-xxl-11 { display: block; -webkit-box-flex: 0; -ms-flex: 0 0 91.66666667%; flex: 0 0 91.66666667%; max-width: 91.66666667%; } .oneid-col-xxl-push-11 { left: 91.66666667%; } .oneid-col-xxl-pull-11 { right: 91.66666667%; } .oneid-col-xxl-offset-11 { margin-left: 91.66666667%; } .oneid-col-xxl-order-11 { -webkit-box-ordinal-group: 12; -ms-flex-order: 11; order: 11; } .oneid-col-xxl-10 { display: block; -webkit-box-flex: 0; -ms-flex: 0 0 83.33333333%; flex: 0 0 83.33333333%; max-width: 83.33333333%; } .oneid-col-xxl-push-10 { left: 83.33333333%; } .oneid-col-xxl-pull-10 { right: 83.33333333%; } .oneid-col-xxl-offset-10 { margin-left: 83.33333333%; } .oneid-col-xxl-order-10 { -webkit-box-ordinal-group: 11; -ms-flex-order: 10; order: 10; } .oneid-col-xxl-9 { display: block; -webkit-box-flex: 0; -ms-flex: 0 0 75%; flex: 0 0 75%; max-width: 75%; } .oneid-col-xxl-push-9 { left: 75%; } .oneid-col-xxl-pull-9 { right: 75%; } .oneid-col-xxl-offset-9 { margin-left: 75%; } .oneid-col-xxl-order-9 { -webkit-box-ordinal-group: 10; -ms-flex-order: 9; order: 9; } .oneid-col-xxl-8 { display: block; -webkit-box-flex: 0; -ms-flex: 0 0 66.66666667%; flex: 0 0 66.66666667%; max-width: 66.66666667%; } .oneid-col-xxl-push-8 { left: 66.66666667%; } .oneid-col-xxl-pull-8 { right: 66.66666667%; } .oneid-col-xxl-offset-8 { margin-left: 66.66666667%; } .oneid-col-xxl-order-8 { -webkit-box-ordinal-group: 9; -ms-flex-order: 8; order: 8; } .oneid-col-xxl-7 { display: block; -webkit-box-flex: 0; -ms-flex: 0 0 58.33333333%; flex: 0 0 58.33333333%; max-width: 58.33333333%; } .oneid-col-xxl-push-7 { left: 58.33333333%; } .oneid-col-xxl-pull-7 { right: 58.33333333%; } .oneid-col-xxl-offset-7 { margin-left: 58.33333333%; } .oneid-col-xxl-order-7 { -webkit-box-ordinal-group: 8; -ms-flex-order: 7; order: 7; } .oneid-col-xxl-6 { display: block; -webkit-box-flex: 0; -ms-flex: 0 0 50%; flex: 0 0 50%; max-width: 50%; } .oneid-col-xxl-push-6 { left: 50%; } .oneid-col-xxl-pull-6 { right: 50%; } .oneid-col-xxl-offset-6 { margin-left: 50%; } .oneid-col-xxl-order-6 { -webkit-box-ordinal-group: 7; -ms-flex-order: 6; order: 6; } .oneid-col-xxl-5 { display: block; -webkit-box-flex: 0; -ms-flex: 0 0 41.66666667%; flex: 0 0 41.66666667%; max-width: 41.66666667%; } .oneid-col-xxl-push-5 { left: 41.66666667%; } .oneid-col-xxl-pull-5 { right: 41.66666667%; } .oneid-col-xxl-offset-5 { margin-left: 41.66666667%; } .oneid-col-xxl-order-5 { -webkit-box-ordinal-group: 6; -ms-flex-order: 5; order: 5; } .oneid-col-xxl-4 { display: block; -webkit-box-flex: 0; -ms-flex: 0 0 33.33333333%; flex: 0 0 33.33333333%; max-width: 33.33333333%; } .oneid-col-xxl-push-4 { left: 33.33333333%; } .oneid-col-xxl-pull-4 { right: 33.33333333%; } .oneid-col-xxl-offset-4 { margin-left: 33.33333333%; } .oneid-col-xxl-order-4 { -webkit-box-ordinal-group: 5; -ms-flex-order: 4; order: 4; } .oneid-col-xxl-3 { display: block; -webkit-box-flex: 0; -ms-flex: 0 0 25%; flex: 0 0 25%; max-width: 25%; } .oneid-col-xxl-push-3 { left: 25%; } .oneid-col-xxl-pull-3 { right: 25%; } .oneid-col-xxl-offset-3 { margin-left: 25%; } .oneid-col-xxl-order-3 { -webkit-box-ordinal-group: 4; -ms-flex-order: 3; order: 3; } .oneid-col-xxl-2 { display: block; -webkit-box-flex: 0; -ms-flex: 0 0 16.66666667%; flex: 0 0 16.66666667%; max-width: 16.66666667%; } .oneid-col-xxl-push-2 { left: 16.66666667%; } .oneid-col-xxl-pull-2 { right: 16.66666667%; } .oneid-col-xxl-offset-2 { margin-left: 16.66666667%; } .oneid-col-xxl-order-2 { -webkit-box-ordinal-group: 3; -ms-flex-order: 2; order: 2; } .oneid-col-xxl-1 { display: block; -webkit-box-flex: 0; -ms-flex: 0 0 8.33333333%; flex: 0 0 8.33333333%; max-width: 8.33333333%; } .oneid-col-xxl-push-1 { left: 8.33333333%; } .oneid-col-xxl-pull-1 { right: 8.33333333%; } .oneid-col-xxl-offset-1 { margin-left: 8.33333333%; } .oneid-col-xxl-order-1 { -webkit-box-ordinal-group: 2; -ms-flex-order: 1; order: 1; } .oneid-col-xxl-0 { display: none; } .oneid-col-push-0 { left: auto; } .oneid-col-pull-0 { right: auto; } .oneid-col-xxl-push-0 { left: auto; } .oneid-col-xxl-pull-0 { right: auto; } .oneid-col-xxl-offset-0 { margin-left: 0; } .oneid-col-xxl-order-0 { -webkit-box-ordinal-group: 1; -ms-flex-order: 0; order: 0; } } @-webkit-keyframes t-fade-in { from { opacity: 0; } to { opacity: 1; } } @keyframes t-fade-in { from { opacity: 0; } to { opacity: 1; } } @-webkit-keyframes t-fade-out { from { opacity: 1; } to { opacity: 0; } } @keyframes t-fade-out { from { opacity: 1; } to { opacity: 0; } } @-webkit-keyframes t-spin { from { -webkit-transform: rotate(0deg); transform: rotate(0deg); } to { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @keyframes t-spin { from { -webkit-transform: rotate(0deg); transform: rotate(0deg); } to { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } .oneid-icon-loading { -webkit-animation: t-spin 1s linear infinite; animation: t-spin 1s linear infinite; } @-webkit-keyframes t-zoom-out { from { -webkit-transform: scale(0.2); transform: scale(0.2); } to { -webkit-transform: scale(1); transform: scale(1); } } @keyframes t-zoom-out { from { -webkit-transform: scale(0.2); transform: scale(0.2); } to { -webkit-transform: scale(1); transform: scale(1); } } .oneid-loading { font: var(--td-font-body-medium); color: var(--td-text-color-primary); -webkit-box-sizing: border-box; box-sizing: border-box; margin: 0; padding: 0; list-style: none; position: relative; color: var(--td-brand-color); font-size: var(--td-comp-size-l); } .oneid-loading--lock { overflow: hidden; } .oneid-loading.oneid-size-s { font-size: var(--td-comp-size-xxxs); } .oneid-loading.oneid-size-l { font-size: var(--td-comp-size-xxxl); } .oneid-loading__parent--relative { position: relative !important; } .oneid-loading__fullscreen { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 3500; } .oneid-loading--center { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; vertical-align: middle; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .oneid-loading__content { position: absolute; left: 48%; top: 20%; } .oneid-loading--inherit-color { color: inherit; } .oneid-loading__parent { position: relative; } .oneid-loading__overlay { background-color: var(--td-mask-disabled); } /** 仅用于作为包裹元素时 */ .oneid-loading--full { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 3500; } .oneid-loading--hidden { visibility: hidden; } .oneid-loading--visible { visibility: visible; } .oneid-loading__text { width: auto; display: inline-block; vertical-align: middle; font: var(--td-font-body-medium); margin-left: var(--td-comp-margin-xs); } .oneid-loading__gradient { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; vertical-align: middle; } .oneid-loading__gradient-conic { width: 100%; height: 100%; border-radius: var(--td-radius-circle); /* stylelint-disable-next-line color-no-hex */ background: conic-gradient(from 90deg at 50% 50%, #fff 0deg, currentcolor 360deg); /* stylelint-disable-next-line */ -webkit-mask: radial-gradient(transparent calc(50% - 0.5px), #fff 50%); /* stylelint-disable-next-line color-no-hex */ mask: radial-gradient(transparent calc(50% - 0.5px), #fff 50%); } .content-placement-top .oneid-popup[data-popper-placement^=top] .oneid-popup__content { margin-bottom: var(--td-comp-margin-s); } .content-placement-top .oneid-popup[data-popper-placement^=top] .oneid-popup__content--arrow { margin-bottom: var(--td-comp-margin-l); } .content-placement-bottom .oneid-popup[data-popper-placement^=bottom] .oneid-popup__content { margin-top: var(--td-comp-margin-s); } .content-placement-bottom .oneid-popup[data-popper-placement^=bottom] .oneid-popup__content--arrow { margin-top: var(--td-comp-margin-l); } .content-placement-left .oneid-popup[data-popper-placement^=left] .oneid-popup__content { margin-right: var(--td-comp-margin-s); } .content-placement-left .oneid-popup[data-popper-placement^=left] .oneid-popup__content--arrow { margin-right: var(--td-comp-margin-l); } .content-placement-left .oneid-popup[data-popper-placement^=left] .oneid-popup__content--text { max-width: 480px; } .content-placement-right .oneid-popup[data-popper-placement^=right] .oneid-popup__content { margin-left: var(--td-comp-margin-s); } .content-placement-right .oneid-popup[data-popper-placement^=right] .oneid-popup__content--arrow { margin-left: var(--td-comp-margin-l); } .content-placement-right .oneid-popup[data-popper-placement^=right] .oneid-popup__content--text { max-width: 480px; } .oneid-popup { font: var(--td-font-body-medium); -webkit-box-sizing: border-box; box-sizing: border-box; margin: 0; padding: 0; list-style: none; color: var(--td-text-color-primary); display: inline-block; z-index: 5500; } .oneid-popup__content { position: relative; background: var(--td-bg-color-container); -webkit-box-shadow: var(--td-shadow-2), var(--td-shadow-inset-top), var(--td-shadow-inset-right), var(--td-shadow-inset-bottom), var(--td-shadow-inset-left); box-shadow: var(--td-shadow-2), var(--td-shadow-inset-top), var(--td-shadow-inset-right), var(--td-shadow-inset-bottom), var(--td-shadow-inset-left); border-radius: var(--td-radius-medium); padding: var(--td-comp-paddingTB-xs) var(--td-comp-paddingLR-s); font-size: var(--td-font-size-body-medium); line-height: var(--td-line-height-body-medium); -webkit-box-sizing: border-box; box-sizing: border-box; word-break: break-all; } .oneid-popup__arrow { position: absolute; z-index: 1; width: 8px; height: 8px; } .oneid-popup__arrow::before { position: absolute; content: ""; width: 8px; height: 8px; -webkit-transform: rotate(45deg); transform: rotate(45deg); background: var(--td-bg-color-container); } .oneid-popup[data-popper-placement^=top] .oneid-popup__content { margin-bottom: var(--td-comp-margin-s); } .oneid-popup[data-popper-placement^=top] .oneid-popup__content--arrow { margin-bottom: var(--td-comp-margin-l); } .oneid-popup[data-popper-placement^=bottom] .oneid-popup__content { margin-top: var(--td-comp-margin-s); } .oneid-popup[data-popper-placement^=bottom] .oneid-popup__content--arrow { margin-top: var(--td-comp-margin-l); } .oneid-popup[data-popper-placement^=left] .oneid-popup__content { margin-right: var(--td-comp-margin-s); } .oneid-popup[data-popper-placement^=left] .oneid-popup__content--arrow { margin-right: var(--td-comp-margin-l); } .oneid-popup[data-popper-placement^=left] .oneid-popup__content--text { max-width: 480px; } .oneid-popup[data-popper-placement^=right] .oneid-popup__content { margin-left: var(--td-comp-margin-s); } .oneid-popup[data-popper-placement^=right] .oneid-popup__content--arrow { margin-left: var(--td-comp-margin-l); } .oneid-popup[data-popper-placement^=right] .oneid-popup__content--text { max-width: 480px; } .oneid-popup[data-popper-placement^=top] .oneid-popup__arrow::before { border-top-left-radius: 100%; -webkit-box-shadow: var(--td-shadow-inset-left), var(--td-shadow-inset-bottom); box-shadow: var(--td-shadow-inset-left), var(--td-shadow-inset-bottom); } .oneid-popup[data-popper-placement=top-start] .oneid-popup__arrow { left: 8px; } .oneid-popup[data-popper-placement=top] .oneid-popup__arrow { left: 50%; margin-left: -4px; } .oneid-popup[data-popper-placement=top-end] .oneid-popup__arrow { left: calc(100% - 16px); } .oneid-popup[data-popper-placement^=bottom] .oneid-popup__arrow { top: -4px; } .oneid-popup[data-popper-placement^=bottom] .oneid-popup__arrow::before { border-bottom-right-radius: 100%; -webkit-box-shadow: var(--td-shadow-inset-top), var(--td-shadow-inset-right); box-shadow: var(--td-shadow-inset-top), var(--td-shadow-inset-right); } .oneid-popup[data-popper-placement=bottom-start] .oneid-popup__arrow { left: 8px; } .oneid-popup[data-popper-placement=bottom] .oneid-popup__arrow { left: 50%; margin-left: -4px; } .oneid-popup[data-popper-placement=bottom-end] .oneid-popup__arrow { left: calc(100% - 16px); } .oneid-popup[data-popper-placement^=left] .oneid-popup__arrow { right: -4px; } .oneid-popup[data-popper-placement^=left] .oneid-popup__arrow::before { -webkit-box-shadow: var(--td-shadow-inset-left), var(--td-shadow-inset-top); box-shadow: var(--td-shadow-inset-left), var(--td-shadow-inset-top); } .oneid-popup[data-popper-placement=left-start] .oneid-popup__arrow { top: 8px; } .oneid-popup[data-popper-placement=left] .oneid-popup__arrow { top: 50%; margin-top: -4px; } .oneid-popup[data-popper-placement=left-end] .oneid-popup__arrow { top: calc(100% - 16px); } .oneid-popup[data-popper-placement^=right] .oneid-popup__arrow { left: -4px; } .oneid-popup[data-popper-placement^=right] .oneid-popup__arrow::before { -webkit-box-shadow: var(--td-shadow-inset-right), var(--td-shadow-inset-bottom); box-shadow: var(--td-shadow-inset-right), var(--td-shadow-inset-bottom); } .oneid-popup[data-popper-placement=right-start] .oneid-popup__arrow { top: 8px; } .oneid-popup[data-popper-placement=right] .oneid-popup__arrow { top: 50%; margin-top: -4px; } .oneid-popup[data-popper-placement=right-end] .oneid-popup__arrow { top: calc(100% - 16px); } .oneid-popup--animation-enter, .oneid-popup--animation-enter-from, .oneid-popup--animation-exiting, .oneid-popup--animation-leave-to { opacity: 0; visibility: hidden; } .oneid-popup--animation-enter-to, .oneid-popup--animation-entering, .oneid-popup--animation-leave-from, .oneid-popup--animation-leave { opacity: 1; visibility: visible; -webkit-transform: none; transform: none; } .oneid-popup--animation-enter-active { -webkit-transition: opacity 0.2s linear; transition: opacity 0.2s linear; } .oneid-popup--animation-leave-active { -webkit-transition: opacity 0.2s cubic-bezier(0, 0, 0.15, 1), visibility 0.2s cubic-bezier(0.82, 0, 1, 0.9); transition: opacity 0.2s cubic-bezier(0, 0, 0.15, 1), visibility 0.2s cubic-bezier(0.82, 0, 1, 0.9); } .oneid-popup--animation-expand-enter-active[data-popper-placement^=top] { -webkit-animation: t-popup-animation-expand-in-top 0.2s cubic-bezier(0.38, 0, 0.24, 1), t-fade-in 0.2s linear; animation: t-popup-animation-expand-in-top 0.2s cubic-bezier(0.38, 0, 0.24, 1), t-fade-in 0.2s linear; } .oneid-popup--animation-expand-leave-active[data-popper-placement^=top] { -webkit-animation: t-popup-animation-expand-out-top 0.2s cubic-bezier(0.38, 0, 0.24, 1), t-fade-out 0.2s cubic-bezier(0, 0, 0.15, 1); animation: t-popup-animation-expand-out-top 0.2s cubic-bezier(0.38, 0, 0.24, 1), t-fade-out 0.2s cubic-bezier(0, 0, 0.15, 1); } @-webkit-keyframes t-popup-animation-expand-in-top { 0% { -webkit-clip-path: polygon(-20% 120%, 120% 120%, 120% 120%, -20% 120%); clip-path: polygon(-20% 120%, 120% 120%, 120% 120%, -20% 120%); } 100% { -webkit-clip-path: polygon(-20% 0, 120% 0, 120% 120%, -20% 120%); clip-path: polygon(-20% 0, 120% 0, 120% 120%, -20% 120%); } } @keyframes t-popup-animation-expand-in-top { 0% { -webkit-clip-path: polygon(-20% 120%, 120% 120%, 120% 120%, -20% 120%); clip-path: polygon(-20% 120%, 120% 120%, 120% 120%, -20% 120%); } 100% { -webkit-clip-path: polygon(-20% 0, 120% 0, 120% 120%, -20% 120%); clip-path: polygon(-20% 0, 120% 0, 120% 120%, -20% 120%); } } @-webkit-keyframes t-popup-animation-expand-out-top { 0% { -webkit-clip-path: polygon(-20% 0, 120% 0, 120% 120%, -20% 120%); clip-path: polygon(-20% 0, 120% 0, 120% 120%, -20% 120%); } 100% { -webkit-clip-path: polygon(-20% 120%, 120% 120%, 120% 120%, -20% 120%); clip-path: polygon(-20% 120%, 120% 120%, 120% 120%, -20% 120%); } } @keyframes t-popup-animation-expand-out-top { 0% { -webkit-clip-path: polygon(-20% 0, 120% 0, 120% 120%, -20% 120%); clip-path: polygon(-20% 0, 120% 0, 120% 120%, -20% 120%); } 100% { -webkit-clip-path: polygon(-20% 120%, 120% 120%, 120% 120%, -20% 120%); clip-path: polygon(-20% 120%, 120% 120%, 120% 120%, -20% 120%); } } .oneid-popup--animation-expand-enter-active[data-popper-placement^=bottom] { -webkit-animation: t-popup-animation-expand-in-bottom 0.2s cubic-bezier(0.38, 0, 0.24, 1), t-fade-in 0.2s linear; animation: t-popup-animation-expand-in-bottom 0.2s cubic-bezier(0.38, 0, 0.24, 1), t-fade-in 0.2s linear; } .oneid-popup--animation-expand-leave-active[data-popper-placement^=bottom] { -webkit-animation: t-popup-animation-expand-out-bottom 0.2s cubic-bezier(0.38, 0, 0.24, 1), t-fade-out 0.2s cubic-bezier(0, 0, 0.15, 1); animation: t-popup-animation-expand-out-bottom 0.2s cubic-bezier(0.38, 0, 0.24, 1), t-fade-out 0.2s cubic-bezier(0, 0, 0.15, 1); } @-webkit-keyframes t-popup-animation-expand-in-bottom { 0% { -webkit-clip-path: polygon(-20% 0, 120% 0, 120% 0, -20% 0); clip-path: polygon(-20% 0, 120% 0, 120% 0, -20% 0); } 100% { -webkit-clip-path: polygon(-20% 0, 120% 0, 120% 120%, -20% 120%); clip-path: polygon(-20% 0, 120% 0, 120% 120%, -20% 120%); } } @keyframes t-popup-animation-expand-in-bottom { 0% { -webkit-clip-path: polygon(-20% 0, 120% 0, 120% 0, -20% 0); clip-path: polygon(-20% 0, 120% 0, 120% 0, -20% 0); } 100% { -webkit-clip-path: polygon(-20% 0, 120% 0, 120% 120%, -20% 120%); clip-path: polygon(-20% 0, 120% 0, 120% 120%, -20% 120%); } } @-webkit-keyframes t-popup-animation-expand-out-bottom { 0% { -webkit-clip-path: polygon(-20% 0, 120% 0, 120% 120%, -20% 120%); clip-path: polygon(-20% 0, 120% 0, 120% 120%, -20% 120%); } 100% { -webkit-clip-path: polygon(-20% 0, 120% 0, 120% 0, -20% 0); clip-path: polygon(-20% 0, 120% 0, 120% 0, -20% 0); } } @keyframes t-popup-animation-expand-out-bottom { 0% { -webkit-clip-path: polygon(-20% 0, 120% 0, 120% 120%, -20% 120%); clip-path: polygon(-20% 0, 120% 0, 120% 120%, -20% 120%); } 100% { -webkit-clip-path: polygon(-20% 0, 120% 0, 120% 0, -20% 0); clip-path: polygon(-20% 0, 120% 0, 120% 0, -20% 0); } } .oneid-button { font: var(--td-font-body-medium); color: var(--td-text-color-primary); -webkit-box-sizing: border-box; box-sizing: border-box; margin: 0; padding: 0; list-style: none; position: relative; z-index: 0; overflow: hidden; font-size: var(--td-font-body-medium); outline: none; border-width: 1px; border-style: solid; border-color: transparent; background-color: transparent; cursor: pointer; display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; vertical-align: middle; white-space: nowrap; border-radius: var(--td-radius-default); -webkit-transition: all 0.2s linear; transition: all 0.2s linear; -ms-touch-action: manipulation; touch-action: manipulation; text-decoration: none; } .oneid-button .oneid-button__text, .oneid-button .oneid-icon { position: relative; z-index: 1; display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; } .oneid-button .oneid-icon { font-size: var(--td-font-size-body-large); } .oneid-button .oneid-loading { font-size: var(--td-font-size-body-large); } .oneid-button .oneid-icon + .oneid-button__text:not(:empty) { margin-left: 8px; } .oneid-button .oneid-loading + .oneid-button__text:not(:empty) { margin-left: 8px; } .oneid-button .oneid-button__suffix:not(:empty) { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; margin-left: 8px; } .oneid-button--variant-base { color: var(--td-text-color-anti); height: var(--td-comp-size-m); font: var(--td-font-body-medium); padding-left: calc(var(--td-comp-paddingLR-l) - 1px); padding-right: calc(var(--td-comp-paddingLR-l) - 1px); background-color: var(--td-bg-color-component); border-color: var(--td-bg-color-component); color: var(--td-text-color-primary); } .oneid-button--variant-base .oneid-icon, .oneid-button--variant-base .oneid-loading { font-size: var(--td-font-size-body-large); } .oneid-button--variant-base:hover, .oneid-button--variant-base:focus-visible { background-color: var(--td-bg-color-component-hover); } .oneid-button--variant-base.oneid-is-loading { background-color: var(--td-bg-color-component); } .oneid-button--variant-base.oneid-is-disabled { background-color: var(--td-bg-color-component-disabled); } .oneid-button--variant-base:hover, .oneid-button--variant-base:focus-visible { border-color: var(--td-bg-color-component-hover); } .oneid-button--variant-base.oneid-is-loading { border-color: var(--td-bg-color-component); } .oneid-button--variant-base.oneid-is-disabled { border-color: var(--td-bg-color-component-disabled); } .oneid-button--variant-base:hover, .oneid-button--variant-base:focus-visible { color: var(--td-text-color-primary); } .oneid-button--variant-base.oneid-is-loading { color: var(--td-text-color-primary); } .oneid-button--variant-base.oneid-is-disabled { color: var(--td-text-color-disabled); } .oneid-button--variant-base.oneid-button--theme-primary { color: var(--td-text-color-anti); background-color: var(--td-brand-color); border-color: var(--td-brand-color); } .oneid-button--variant-base.oneid-button--theme-primary:hover, .oneid-button--variant-base.oneid-button--theme-primary:focus-visible { background-color: var(--td-brand-color-hover); } .oneid-button--variant-base.oneid-button--theme-primary.oneid-is-loading { background-color: var(--td-brand-color); } .oneid-button--variant-base.oneid-button--theme-primary.oneid-is-disabled { background-color: var(--td-brand-color-disabled); } .oneid-button--variant-base.oneid-button--theme-primary:hover, .oneid-button--variant-base.oneid-button--theme-primary:focus-visible { border-color: var(--td-brand-color-hover); } .oneid-button--variant-base.oneid-button--theme-primary.oneid-is-loading { border-color: var(--td-brand-color); } .oneid-button--variant-base.oneid-button--theme-primary.oneid-is-disabled { border-color: var(--td-brand-color-disabled); } .oneid-button--variant-base.oneid-button--theme-success { color: var(--td-text-color-anti); background-color: var(--td-success-color); border-color: var(--td-success-color); } .oneid-button--variant-base.oneid-button--theme-success:hover, .oneid-button--variant-base.oneid-button--theme-success:focus-visible { background-color: var(--td-success-color-hover); } .oneid-button--variant-base.oneid-button--theme-success.oneid-is-loading { background-color: var(--td-success-color); } .oneid-button--variant-base.oneid-button--theme-success.oneid-is-disabled { background-color: var(--td-success-color-disabled); } .oneid-button--variant-base.oneid-button--theme-success:hover, .oneid-button--variant-base.oneid-button--theme-success:focus-visible { border-color: var(--td-success-color-hover); } .oneid-button--variant-base.oneid-button--theme-success.oneid-is-loading { border-color: var(--td-success-color); } .oneid-button--variant-base.oneid-button--theme-success.oneid-is-disabled { border-color: var(--td-success-color-disabled); } .oneid-button--variant-base.oneid-button--theme-warning { color: var(--td-text-color-anti); background-color: var(--td-warning-color); border-color: var(--td-warning-color); } .oneid-button--variant-base.oneid-button--theme-warning:hover, .oneid-button--variant-base.oneid-button--theme-warning:focus-visible { background-color: var(--td-warning-color-hover); } .oneid-button--variant-base.oneid-button--theme-warning.oneid-is-loading { background-color: var(--td-warning-color); } .oneid-button--variant-base.oneid-button--theme-warning.oneid-is-disabled { background-color: var(--td-warning-color-disabled); } .oneid-button--variant-base.oneid-button--theme-warning:hover, .oneid-button--variant-base.oneid-button--theme-warning:focus-visible { border-color: var(--td-warning-color-hover); } .oneid-button--variant-base.oneid-button--theme-warning.oneid-is-loading { border-color: var(--td-warning-color); } .oneid-button--variant-base.oneid-button--theme-warning.oneid-is-disabled { border-color: var(--td-warning-color-disabled); } .oneid-button--variant-base.oneid-button--theme-danger { color: var(--td-text-color-anti); background-color: var(--td-error-color); border-color: var(--td-error-color); } .oneid-button--variant-base.oneid-button--theme-danger:hover, .oneid-button--variant-base.oneid-button--theme-danger:focus-visible { background-color: var(--td-error-color-hover); } .oneid-button--variant-base.oneid-button--theme-danger.oneid-is-loading { background-color: var(--td-error-color); } .oneid-button--variant-base.oneid-button--theme-danger.oneid-is-disabled { background-color: var(--td-error-color-disabled); } .oneid-button--variant-base.oneid-button--theme-danger:hover, .oneid-button--variant-base.oneid-button--theme-danger:focus-visible { border-color: var(--td-error-color-hover); } .oneid-button--variant-base.oneid-button--theme-danger.oneid-is-loading { border-color: var(--td-error-color); } .oneid-button--variant-base.oneid-button--theme-danger.oneid-is-disabled { border-color: var(--td-error-color-disabled); } .oneid-button--variant-base.oneid-button--ghost { background-color: transparent; color: var(--td-text-color-anti); border-color: var(--td-text-color-anti); } .oneid-button--variant-base.oneid-button--ghost:hover, .oneid-button--variant-base.oneid-button--ghost:focus-visible { background-color: transparent; } .oneid-button--variant-base.oneid-button--ghost:active { background-color: transparent; } .oneid-button--variant-base.oneid-button--ghost.oneid-is-loading { background-color: transparent; } .oneid-button--variant-base.oneid-button--ghost.oneid-is-disabled { background-color: rgba(255, 255, 255, 0.22); background-color: transparent; } .oneid-button--variant-base.oneid-button--ghost:hover, .oneid-button--variant-base.oneid-button--ghost:focus-visible { color: var(--td-brand-color-hover); } .oneid-button--variant-base.oneid-button--ghost:active { color: var(--td-brand-color-active); } .oneid-button--variant-base.oneid-button--ghost.oneid-is-loading { color: var(--td-text-color-anti); } .oneid-button--variant-base.oneid-button--ghost.oneid-is-disabled { color: rgba(255, 255, 255, 0.22); background-color: transparent; } .oneid-button--variant-base.oneid-button--ghost:hover, .oneid-button--variant-base.oneid-button--ghost:focus-visible { border-color: var(--td-brand-color-hover); } .oneid-button--variant-base.oneid-button--ghost:active { border-color: var(--td-brand-color-active); } .oneid-button--variant-base.oneid-button--ghost.oneid-is-loading { border-color: var(--td-text-color-anti); } .oneid-button--variant-base.oneid-button--ghost.oneid-is-disabled { border-color: rgba(255, 255, 255, 0.22); background-color: transparent; } .oneid-button--variant-base.oneid-button--ghost.oneid-button--theme-primary { color: var(--td-brand-color); border-color: var(--td-brand-color); } .oneid-button--variant-base.oneid-button--ghost.oneid-button--theme-primary:hover, .oneid-button--variant-base.oneid-button--ghost.oneid-button--theme-primary:focus-visible { color: var(--td-brand-color-hover); } .oneid-button--variant-base.oneid-button--ghost.oneid-button--theme-primary:active { color: var(--td-brand-color-active); } .oneid-button--variant-base.oneid-button--ghost.oneid-button--theme-primary.oneid-is-loading { color: var(--td-brand-color); } .oneid-button--variant-base.oneid-button--ghost.oneid-button--theme-primary.oneid-is-disabled { color: rgba(255, 255, 255, 0.22); background-color: transparent; } .oneid-button--variant-base.oneid-button--ghost.oneid-button--theme-primary:hover, .oneid-button--variant-base.oneid-button--ghost.oneid-button--theme-primary:focus-visible { border-color: var(--td-brand-color-hover); } .oneid-button--variant-base.oneid-button--ghost.oneid-button--theme-primary:active { border-color: var(--td-brand-color-active); } .oneid-button--variant-base.oneid-button--ghost.oneid-button--theme-primary.oneid-is-loading { border-color: var(--td-brand-color); } .oneid-button--variant-base.oneid-button--ghost.oneid-button--theme-primary.oneid-is-disabled { border-color: rgba(255, 255, 255, 0.22); background-color: transparent; } .oneid-button--variant-base.oneid-button--ghost.oneid-button--theme-success { color: var(--td-success-color); border-color: var(--td-success-color); } .oneid-button--variant-base.oneid-button--ghost.oneid-button--theme-success:hover, .oneid-button--variant-base.oneid-button--ghost.oneid-button--theme-success:focus-visible { color: var(--td-success-color-hover); } .oneid-button--variant-base.oneid-button--ghost.oneid-button--theme-success:active { color: var(--td-success-color-active); } .oneid-button--variant-base.oneid-button--ghost.oneid-button--theme-success.oneid-is-loading { color: var(--td-success-color); } .oneid-button--variant-base.oneid-button--ghost.oneid-button--theme-success.oneid-is-disabled { color: rgba(255, 255, 255, 0.22); background-color: transparent; } .oneid-button--variant-base.oneid-button--ghost.oneid-button--theme-success:hover, .oneid-button--variant-base.oneid-button--ghost.oneid-button--theme-success:focus-visible { border-color: var(--td-success-color-hover); } .oneid-button--variant-base.oneid-button--ghost.oneid-button--theme-success:active { border-color: var(--td-success-color-active); } .oneid-button--variant-base.oneid-button--ghost.oneid-button--theme-success.oneid-is-loading { border-color: var(--td-success-color); } .oneid-button--variant-base.oneid-button--ghost.oneid-button--theme-success.oneid-is-disabled { border-color: rgba(255, 255, 255, 0.22); background-color: transparent; } .oneid-button--variant-base.oneid-button--ghost.oneid-button--theme-warning { color: var(--td-warning-color); border-color: var(--td-warning-color); } .oneid-button--variant-base.oneid-button--ghost.oneid-button--theme-warning:hover, .oneid-button--variant-base.oneid-button--ghost.oneid-button--theme-warning:focus-visible { color: var(--td-warning-color-hover); } .oneid-button--variant-base.oneid-button--ghost.oneid-button--theme-warning:active { color: var(--td-warning-color-active); } .oneid-button--variant-base.oneid-button--ghost.oneid-button--theme-warning.oneid-is-loading { color: var(--td-warning-color); } .oneid-button--variant-base.oneid-button--ghost.oneid-button--theme-warning.oneid-is-disabled { color: rgba(255, 255, 255, 0.22); background-color: transparent; } .oneid-button--variant-base.oneid-button--ghost.oneid-button--theme-warning:hover, .oneid-button--variant-base.oneid-button--ghost.oneid-button--theme-warning:focus-visible { border-color: var(--td-warning-color-hover); } .oneid-button--variant-base.oneid-button--ghost.oneid-button--theme-warning:active { border-color: var(--td-warning-color-active); } .oneid-button--variant-base.oneid-button--ghost.oneid-button--theme-warning.oneid-is-loading { border-color: var(--td-warning-color); } .oneid-button--variant-base.oneid-button--ghost.oneid-button--theme-warning.oneid-is-disabled { border-color: rgba(255, 255, 255, 0.22); background-color: transparent; } .oneid-button--variant-base.oneid-button--ghost.oneid-button--theme-danger { color: var(--td-error-color); border-color: var(--td-error-color); } .oneid-button--variant-base.oneid-button--ghost.oneid-button--theme-danger:hover, .oneid-button--variant-base.oneid-button--ghost.oneid-button--theme-danger:focus-visible { color: var(--td-error-color-hover); } .oneid-button--variant-base.oneid-button--ghost.oneid-button--theme-danger:active { color: var(--td-error-color-active); } .oneid-button--variant-base.oneid-button--ghost.oneid-button--theme-danger.oneid-is-loading { color: var(--td-error-color); } .oneid-button--variant-base.oneid-button--ghost.oneid-button--theme-danger.oneid-is-disabled { color: rgba(255, 255, 255, 0.22); background-color: transparent; } .oneid-button--variant-base.oneid-button--ghost.oneid-button--theme-danger:hover, .oneid-button--variant-base.oneid-button--ghost.oneid-button--theme-danger:focus-visible { border-color: var(--td-error-color-hover); } .oneid-button--variant-base.oneid-button--ghost.oneid-button--theme-danger:active { border-color: var(--td-error-color-active); } .oneid-button--variant-base.oneid-button--ghost.oneid-button--theme-danger.oneid-is-loading { border-color: var(--td-error-color); } .oneid-button--variant-base.oneid-button--ghost.oneid-button--theme-danger.oneid-is-disabled { border-color: rgba(255, 255, 255, 0.22); background-color: transparent; } .oneid-button--variant-outline { height: var(--td-comp-size-m); font: var(--td-font-body-medium); padding-left: calc(var(--td-comp-paddingLR-l) - 1px); padding-right: calc(var(--td-comp-paddingLR-l) - 1px); color: var(--td-text-color-primary); background-color: var(--td-bg-color-specialcomponent); border-color: var(--td-border-level-2-color); } .oneid-button--variant-outline .oneid-icon, .oneid-button--variant-outline .oneid-loading { font-size: var(--td-font-size-body-large); } .oneid-button--variant-outline:hover, .oneid-button--variant-outline:focus-visible { color: var(--td-brand-color-hover); } .oneid-button--variant-outline.oneid-is-loading { color: var(--td-text-color-primary); } .oneid-button--variant-outline.oneid-is-disabled { color: var(--td-text-color-disabled); } .oneid-button--variant-outline:hover, .oneid-button--variant-outline:focus-visible { background-color: var(--td-bg-color-specialcomponent); } .oneid-button--variant-outline.oneid-is-loading { background-color: var(--td-bg-color-specialcomponent); } .oneid-button--variant-outline.oneid-is-disabled { background-color: var(--td-bg-color-component-disabled); } .oneid-button--variant-outline:hover, .oneid-button--variant-outline:focus-visible { border-color: var(--td-brand-color-hover); } .oneid-button--variant-outline.oneid-is-loading { border-color: var(--td-border-level-2-color); } .oneid-button--variant-outline.oneid-is-disabled { border-color: var(--td-border-level-2-color); } .oneid-button--variant-outline.oneid-button--theme-primary { color: var(--td-brand-color); border-color: var(--td-brand-color); } .oneid-button--variant-outline.oneid-button--theme-primary:hover, .oneid-button--variant-outline.oneid-button--theme-primary:focus-visible { color: var(--td-brand-color-hover); } .oneid-button--variant-outline.oneid-button--theme-primary.oneid-is-loading { color: var(--td-brand-color); } .oneid-button--variant-outline.oneid-button--theme-primary.oneid-is-disabled { color: var(--td-brand-color-disabled); } .oneid-button--variant-outline.oneid-button--theme-primary:hover, .oneid-button--variant-outline.oneid-button--theme-primary:focus-visible { border-color: var(--td-brand-color-hover); } .oneid-button--variant-outline.oneid-button--theme-primary.oneid-is-loading { border-color: var(--td-brand-color); } .oneid-button--variant-outline.oneid-button--theme-primary.oneid-is-disabled { border-color: var(--td-brand-color-disabled); } .oneid-button--variant-outline.oneid-button--theme-success { color: var(--td-success-color); border-color: var(--td-success-color); } .oneid-button--variant-outline.oneid-button--theme-success:hover, .oneid-button--variant-outline.oneid-button--theme-success:focus-visible { color: var(--td-success-color-hover); } .oneid-button--variant-outline.oneid-button--theme-success.oneid-is-loading { color: var(--td-success-color); } .oneid-button--variant-outline.oneid-button--theme-success.oneid-is-disabled { color: var(--td-success-color-disabled); } .oneid-button--variant-outline.oneid-button--theme-success:hover, .oneid-button--variant-outline.oneid-button--theme-success:focus-visible { border-color: var(--td-success-color-hover); } .oneid-button--variant-outline.oneid-button--theme-success.oneid-is-loading { border-color: var(--td-success-color); } .oneid-button--variant-outline.oneid-button--theme-success.oneid-is-disabled { border-color: var(--td-success-color-disabled); } .oneid-button--variant-outline.oneid-button--theme-warning { color: var(--td-warning-color); border-color: var(--td-warning-color); } .oneid-button--variant-outline.oneid-button--theme-warning:hover, .oneid-button--variant-outline.oneid-button--theme-warning:focus-visible { color: var(--td-warning-color-hover); } .oneid-button--variant-outline.oneid-button--theme-warning.oneid-is-loading { color: var(--td-warning-color); } .oneid-button--variant-outline.oneid-button--theme-warning.oneid-is-disabled { color: var(--td-warning-color-disabled); } .oneid-button--variant-outline.oneid-button--theme-warning:hover, .oneid-button--variant-outline.oneid-button--theme-warning:focus-visible { border-color: var(--td-warning-color-hover); } .oneid-button--variant-outline.oneid-button--theme-warning.oneid-is-loading { border-color: var(--td-warning-color); } .oneid-button--variant-outline.oneid-button--theme-warning.oneid-is-disabled { border-color: var(--td-warning-color-disabled); } .oneid-button--variant-outline.oneid-button--theme-danger { color: var(--td-error-color); border-color: var(--td-error-color); } .oneid-button--variant-outline.oneid-button--theme-danger:hover, .oneid-button--variant-outline.oneid-button--theme-danger:focus-visible { color: var(--td-error-color-hover); } .oneid-button--variant-outline.oneid-button--theme-danger.oneid-is-loading { color: var(--td-error-color); } .oneid-button--variant-outline.oneid-button--theme-danger.oneid-is-disabled { color: var(--td-error-color-disabled); } .oneid-button--variant-outline.oneid-button--theme-danger:hover, .oneid-button--variant-outline.oneid-button--theme-danger:focus-visible { border-color: var(--td-error-color-hover); } .oneid-button--variant-outline.oneid-button--theme-danger.oneid-is-loading { border-color: var(--td-error-color); } .oneid-button--variant-outline.oneid-button--theme-danger.oneid-is-disabled { border-color: var(--td-error-color-disabled); } .oneid-button--variant-outline.oneid-button--ghost { background-color: transparent; color: var(--td-text-color-anti); border-color: var(--td-text-color-anti); } .oneid-button--variant-outline.oneid-button--ghost:hover, .oneid-button--variant-outline.oneid-button--ghost:focus-visible { background-color: transparent; } .oneid-button--variant-outline.oneid-button--ghost:active { background-color: transparent; } .oneid-button--variant-outline.oneid-button--ghost.oneid-is-loading { background-color: transparent; } .oneid-button--variant-outline.oneid-button--ghost.oneid-is-disabled { background-color: rgba(255, 255, 255, 0.22); background-color: transparent; } .oneid-button--variant-outline.oneid-button--ghost:hover, .oneid-button--variant-outline.oneid-button--ghost:focus-visible { color: var(--td-brand-color-hover); } .oneid-button--variant-outline.oneid-button--ghost:active { color: var(--td-brand-color-active); } .oneid-button--variant-outline.oneid-button--ghost.oneid-is-loading { color: var(--td-text-color-anti); } .oneid-button--variant-outline.oneid-button--ghost.oneid-is-disabled { color: rgba(255, 255, 255, 0.22); background-color: transparent; } .oneid-button--variant-outline.oneid-button--ghost:hover, .oneid-button--variant-outline.oneid-button--ghost:focus-visible { border-color: var(--td-brand-color-hover); } .oneid-button--variant-outline.oneid-button--ghost:active { border-color: var(--td-brand-color-active); } .oneid-button--variant-outline.oneid-button--ghost.oneid-is-loading { border-color: var(--td-text-color-anti); } .oneid-button--variant-outline.oneid-button--ghost.oneid-is-disabled { border-color: rgba(255, 255, 255, 0.22); background-color: transparent; } .oneid-button--variant-outline.oneid-button--ghost.oneid-button--theme-primary { color: var(--td-brand-color); border-color: var(--td-brand-color); } .oneid-button--variant-outline.oneid-button--ghost.oneid-button--theme-primary:hover, .oneid-button--variant-outline.oneid-button--ghost.oneid-button--theme-primary:focus-visible { color: var(--td-brand-color-hover); } .oneid-button--variant-outline.oneid-button--ghost.oneid-button--theme-primary:active { color: var(--td-brand-color-active); } .oneid-button--variant-outline.oneid-button--ghost.oneid-button--theme-primary.oneid-is-loading { color: var(--td-brand-color); } .oneid-button--variant-outline.oneid-button--ghost.oneid-button--theme-primary.oneid-is-disabled { color: rgba(255, 255, 255, 0.22); background-color: transparent; } .oneid-button--variant-outline.oneid-button--ghost.oneid-button--theme-primary:hover, .oneid-button--variant-outline.oneid-button--ghost.oneid-button--theme-primary:focus-visible { border-color: var(--td-brand-color-hover); } .oneid-button--variant-outline.oneid-button--ghost.oneid-button--theme-primary:active { border-color: var(--td-brand-color-active); } .oneid-button--variant-outline.oneid-button--ghost.oneid-button--theme-primary.oneid-is-loading { border-color: var(--td-brand-color); } .oneid-button--variant-outline.oneid-button--ghost.oneid-button--theme-primary.oneid-is-disabled { border-color: rgba(255, 255, 255, 0.22); background-color: transparent; } .oneid-button--variant-outline.oneid-button--ghost.oneid-button--theme-success { color: var(--td-success-color); border-color: var(--td-success-color); } .oneid-button--variant-outline.oneid-button--ghost.oneid-button--theme-success:hover, .oneid-button--variant-outline.oneid-button--ghost.oneid-button--theme-success:focus-visible { color: var(--td-success-color-hover); } .oneid-button--variant-outline.oneid-button--ghost.oneid-button--theme-success:active { color: var(--td-success-color-active); } .oneid-button--variant-outline.oneid-button--ghost.oneid-button--theme-success.oneid-is-loading { color: var(--td-success-color); } .oneid-button--variant-outline.oneid-button--ghost.oneid-button--theme-success.oneid-is-disabled { color: rgba(255, 255, 255, 0.22); background-color: transparent; } .oneid-button--variant-outline.oneid-button--ghost.oneid-button--theme-success:hover, .oneid-button--variant-outline.oneid-button--ghost.oneid-button--theme-success:focus-visible { border-color: var(--td-success-color-hover); } .oneid-button--variant-outline.oneid-button--ghost.oneid-button--theme-success:active { border-color: var(--td-success-color-active); } .oneid-button--variant-outline.oneid-button--ghost.oneid-button--theme-success.oneid-is-loading { border-color: var(--td-success-color); } .oneid-button--variant-outline.oneid-button--ghost.oneid-button--theme-success.oneid-is-disabled { border-color: rgba(255, 255, 255, 0.22); background-color: transparent; } .oneid-button--variant-outline.oneid-button--ghost.oneid-button--theme-warning { color: var(--td-warning-color); border-color: var(--td-warning-color); } .oneid-button--variant-outline.oneid-button--ghost.oneid-button--theme-warning:hover, .oneid-button--variant-outline.oneid-button--ghost.oneid-button--theme-warning:focus-visible { color: var(--td-warning-color-hover); } .oneid-button--variant-outline.oneid-button--ghost.oneid-button--theme-warning:active { color: var(--td-warning-color-active); } .oneid-button--variant-outline.oneid-button--ghost.oneid-button--theme-warning.oneid-is-loading { color: var(--td-warning-color); } .oneid-button--variant-outline.oneid-button--ghost.oneid-button--theme-warning.oneid-is-disabled { color: rgba(255, 255, 255, 0.22); background-color: transparent; } .oneid-button--variant-outline.oneid-button--ghost.oneid-button--theme-warning:hover, .oneid-button--variant-outline.oneid-button--ghost.oneid-button--theme-warning:focus-visible { border-color: var(--td-warning-color-hover); } .oneid-button--variant-outline.oneid-button--ghost.oneid-button--theme-warning:active { border-color: var(--td-warning-color-active); } .oneid-button--variant-outline.oneid-button--ghost.oneid-button--theme-warning.oneid-is-loading { border-color: var(--td-warning-color); } .oneid-button--variant-outline.oneid-button--ghost.oneid-button--theme-warning.oneid-is-disabled { border-color: rgba(255, 255, 255, 0.22); background-color: transparent; } .oneid-button--variant-outline.oneid-button--ghost.oneid-button--theme-danger { color: var(--td-error-color); border-color: var(--td-error-color); } .oneid-button--variant-outline.oneid-button--ghost.oneid-button--theme-danger:hover, .oneid-button--variant-outline.oneid-button--ghost.oneid-button--theme-danger:focus-visible { color: var(--td-error-color-hover); } .oneid-button--variant-outline.oneid-button--ghost.oneid-button--theme-danger:active { color: var(--td-error-color-active); } .oneid-button--variant-outline.oneid-button--ghost.oneid-button--theme-danger.oneid-is-loading { color: var(--td-error-color); } .oneid-button--variant-outline.oneid-button--ghost.oneid-button--theme-danger.oneid-is-disabled { color: rgba(255, 255, 255, 0.22); background-color: transparent; } .oneid-button--variant-outline.oneid-button--ghost.oneid-button--theme-danger:hover, .oneid-button--variant-outline.oneid-button--ghost.oneid-button--theme-danger:focus-visible { border-color: var(--td-error-color-hover); } .oneid-button--variant-outline.oneid-button--ghost.oneid-button--theme-danger:active { border-color: var(--td-error-color-active); } .oneid-button--variant-outline.oneid-button--ghost.oneid-button--theme-danger.oneid-is-loading { border-color: var(--td-error-color); } .oneid-button--variant-outline.oneid-button--ghost.oneid-button--theme-danger.oneid-is-disabled { border-color: rgba(255, 255, 255, 0.22); background-color: transparent; } .oneid-button--variant-dashed { height: var(--td-comp-size-m); font: var(--td-font-body-medium); padding-left: calc(var(--td-comp-paddingLR-l) - 1px); padding-right: calc(var(--td-comp-paddingLR-l) - 1px); color: var(--td-text-color-primary); background-color: var(--td-bg-color-specialcomponent); border-color: var(--td-border-level-2-color); border-style: dashed; } .oneid-button--variant-dashed .oneid-icon, .oneid-button--variant-dashed .oneid-loading { font-size: var(--td-font-size-body-large); } .oneid-button--variant-dashed:hover, .oneid-button--variant-dashed:focus-visible { color: var(--td-brand-color-hover); } .oneid-button--variant-dashed.oneid-is-loading { color: var(--td-text-color-primary); } .oneid-button--variant-dashed.oneid-is-disabled { color: var(--td-text-color-disabled); } .oneid-button--variant-dashed:hover, .oneid-button--variant-dashed:focus-visible { background-color: var(--td-bg-color-specialcomponent); } .oneid-button--variant-dashed.oneid-is-loading { background-color: var(--td-bg-color-specialcomponent); } .oneid-button--variant-dashed.oneid-is-disabled { background-color: var(--td-bg-color-component-disabled); } .oneid-button--variant-dashed:hover, .oneid-button--variant-dashed:focus-visible { border-color: var(--td-brand-color-hover); } .oneid-button--variant-dashed.oneid-is-loading { border-color: var(--td-border-level-2-color); } .oneid-button--variant-dashed.oneid-is-disabled { border-color: var(--td-border-level-2-color); } .oneid-button--variant-dashed.oneid-button--theme-primary { color: var(--td-brand-color); border-color: var(--td-brand-color); } .oneid-button--variant-dashed.oneid-button--theme-primary:hover, .oneid-button--variant-dashed.oneid-button--theme-primary:focus-visible { color: var(--td-brand-color-hover); } .oneid-button--variant-dashed.oneid-button--theme-primary.oneid-is-loading { color: var(--td-brand-color); } .oneid-button--variant-dashed.oneid-button--theme-primary.oneid-is-disabled { color: var(--td-brand-color-disabled); } .oneid-button--variant-dashed.oneid-button--theme-primary:hover, .oneid-button--variant-dashed.oneid-button--theme-primary:focus-visible { border-color: var(--td-brand-color-hover); } .oneid-button--variant-dashed.oneid-button--theme-primary.oneid-is-loading { border-color: var(--td-brand-color); } .oneid-button--variant-dashed.oneid-button--theme-primary.oneid-is-disabled { border-color: var(--td-brand-color-disabled); } .oneid-button--variant-dashed.oneid-button--theme-success { color: var(--td-success-color); border-color: var(--td-success-color); } .oneid-button--variant-dashed.oneid-button--theme-success:hover, .oneid-button--variant-dashed.oneid-button--theme-success:focus-visible { color: var(--td-success-color-hover); } .oneid-button--variant-dashed.oneid-button--theme-success.oneid-is-loading { color: var(--td-success-color); } .oneid-button--variant-dashed.oneid-button--theme-success.oneid-is-disabled { color: var(--td-success-color-disabled); } .oneid-button--variant-dashed.oneid-button--theme-success:hover, .oneid-button--variant-dashed.oneid-button--theme-success:focus-visible { border-color: var(--td-success-color-hover); } .oneid-button--variant-dashed.oneid-button--theme-success.oneid-is-loading { border-color: var(--td-success-color); } .oneid-button--variant-dashed.oneid-button--theme-success.oneid-is-disabled { border-color: var(--td-success-color-disabled); } .oneid-button--variant-dashed.oneid-button--theme-warning { color: var(--td-warning-color); border-color: var(--td-warning-color); } .oneid-button--variant-dashed.oneid-button--theme-warning:hover, .oneid-button--variant-dashed.oneid-button--theme-warning:focus-visible { color: var(--td-warning-color-hover); } .oneid-button--variant-dashed.oneid-button--theme-warning.oneid-is-loading { color: var(--td-warning-color); } .oneid-button--variant-dashed.oneid-button--theme-warning.oneid-is-disabled { color: var(--td-warning-color-disabled); } .oneid-button--variant-dashed.oneid-button--theme-warning:hover, .oneid-button--variant-dashed.oneid-button--theme-warning:focus-visible { border-color: var(--td-warning-color-hover); } .oneid-button--variant-dashed.oneid-button--theme-warning.oneid-is-loading { border-color: var(--td-warning-color); } .oneid-button--variant-dashed.oneid-button--theme-warning.oneid-is-disabled { border-color: var(--td-warning-color-disabled); } .oneid-button--variant-dashed.oneid-button--theme-danger { color: var(--td-error-color); border-color: var(--td-error-color); } .oneid-button--variant-dashed.oneid-button--theme-danger:hover, .oneid-button--variant-dashed.oneid-button--theme-danger:focus-visible { color: var(--td-error-color-hover); } .oneid-button--variant-dashed.oneid-button--theme-danger.oneid-is-loading { color: var(--td-error-color); } .oneid-button--variant-dashed.oneid-button--theme-danger.oneid-is-disabled { color: var(--td-error-color-disabled); } .oneid-button--variant-dashed.oneid-button--theme-danger:hover, .oneid-button--variant-dashed.oneid-button--theme-danger:focus-visible { border-color: var(--td-error-color-hover); } .oneid-button--variant-dashed.oneid-button--theme-danger.oneid-is-loading { border-color: var(--td-error-color); } .oneid-button--variant-dashed.oneid-button--theme-danger.oneid-is-disabled { border-color: var(--td-error-color-disabled); } .oneid-button--variant-dashed.oneid-button--ghost { background-color: transparent; color: var(--td-text-color-anti); border-color: var(--td-text-color-anti); } .oneid-button--variant-dashed.oneid-button--ghost:hover, .oneid-button--variant-dashed.oneid-button--ghost:focus-visible { background-color: transparent; } .oneid-button--variant-dashed.oneid-button--ghost:active { background-color: transparent; } .oneid-button--variant-dashed.oneid-button--ghost.oneid-is-loading { background-color: transparent; } .oneid-button--variant-dashed.oneid-button--ghost.oneid-is-disabled { background-color: rgba(255, 255, 255, 0.22); background-color: transparent; } .oneid-button--variant-dashed.oneid-button--ghost:hover, .oneid-button--variant-dashed.oneid-button--ghost:focus-visible { color: var(--td-brand-color-hover); } .oneid-button--variant-dashed.oneid-button--ghost:active { color: var(--td-brand-color-active); } .oneid-button--variant-dashed.oneid-button--ghost.oneid-is-loading { color: var(--td-text-color-anti); } .oneid-button--variant-dashed.oneid-button--ghost.oneid-is-disabled { color: rgba(255, 255, 255, 0.22); background-color: transparent; } .oneid-button--variant-dashed.oneid-button--ghost:hover, .oneid-button--variant-dashed.oneid-button--ghost:focus-visible { border-color: var(--td-brand-color-hover); } .oneid-button--variant-dashed.oneid-button--ghost:active { border-color: var(--td-brand-color-active); } .oneid-button--variant-dashed.oneid-button--ghost.oneid-is-loading { border-color: var(--td-text-color-anti); } .oneid-button--variant-dashed.oneid-button--ghost.oneid-is-disabled { border-color: rgba(255, 255, 255, 0.22); background-color: transparent; } .oneid-button--variant-dashed.oneid-button--ghost.oneid-button--theme-primary { color: var(--td-brand-color); border-color: var(--td-brand-color); } .oneid-button--variant-dashed.oneid-button--ghost.oneid-button--theme-primary:hover, .oneid-button--variant-dashed.oneid-button--ghost.oneid-button--theme-primary:focus-visible { color: var(--td-brand-color-hover); } .oneid-button--variant-dashed.oneid-button--ghost.oneid-button--theme-primary:active { color: var(--td-brand-color-active); } .oneid-button--variant-dashed.oneid-button--ghost.oneid-button--theme-primary.oneid-is-loading { color: var(--td-brand-color); } .oneid-button--variant-dashed.oneid-button--ghost.oneid-button--theme-primary.oneid-is-disabled { color: rgba(255, 255, 255, 0.22); background-color: transparent; } .oneid-button--variant-dashed.oneid-button--ghost.oneid-button--theme-primary:hover, .oneid-button--variant-dashed.oneid-button--ghost.oneid-button--theme-primary:focus-visible { border-color: var(--td-brand-color-hover); } .oneid-button--variant-dashed.oneid-button--ghost.oneid-button--theme-primary:active { border-color: var(--td-brand-color-active); } .oneid-button--variant-dashed.oneid-button--ghost.oneid-button--theme-primary.oneid-is-loading { border-color: var(--td-brand-color); } .oneid-button--variant-dashed.oneid-button--ghost.oneid-button--theme-primary.oneid-is-disabled { border-color: rgba(255, 255, 255, 0.22); background-color: transparent; } .oneid-button--variant-dashed.oneid-button--ghost.oneid-button--theme-success { color: var(--td-success-color); border-color: var(--td-success-color); } .oneid-button--variant-dashed.oneid-button--ghost.oneid-button--theme-success:hover, .oneid-button--variant-dashed.oneid-button--ghost.oneid-button--theme-success:focus-visible { color: var(--td-success-color-hover); } .oneid-button--variant-dashed.oneid-button--ghost.oneid-button--theme-success:active { color: var(--td-success-color-active); } .oneid-button--variant-dashed.oneid-button--ghost.oneid-button--theme-success.oneid-is-loading { color: var(--td-success-color); } .oneid-button--variant-dashed.oneid-button--ghost.oneid-button--theme-success.oneid-is-disabled { color: rgba(255, 255, 255, 0.22); background-color: transparent; } .oneid-button--variant-dashed.oneid-button--ghost.oneid-button--theme-success:hover, .oneid-button--variant-dashed.oneid-button--ghost.oneid-button--theme-success:focus-visible { border-color: var(--td-success-color-hover); } .oneid-button--variant-dashed.oneid-button--ghost.oneid-button--theme-success:active { border-color: var(--td-success-color-active); } .oneid-button--variant-dashed.oneid-button--ghost.oneid-button--theme-success.oneid-is-loading { border-color: var(--td-success-color); } .oneid-button--variant-dashed.oneid-button--ghost.oneid-button--theme-success.oneid-is-disabled { border-color: rgba(255, 255, 255, 0.22); background-color: transparent; } .oneid-button--variant-dashed.oneid-button--ghost.oneid-button--theme-warning { color: var(--td-warning-color); border-color: var(--td-warning-color); } .oneid-button--variant-dashed.oneid-button--ghost.oneid-button--theme-warning:hover, .oneid-button--variant-dashed.oneid-button--ghost.oneid-button--theme-warning:focus-visible { color: var(--td-warning-color-hover); } .oneid-button--variant-dashed.oneid-button--ghost.oneid-button--theme-warning:active { color: var(--td-warning-color-active); } .oneid-button--variant-dashed.oneid-button--ghost.oneid-button--theme-warning.oneid-is-loading { color: var(--td-warning-color); } .oneid-button--variant-dashed.oneid-button--ghost.oneid-button--theme-warning.oneid-is-disabled { color: rgba(255, 255, 255, 0.22); background-color: transparent; } .oneid-button--variant-dashed.oneid-button--ghost.oneid-button--theme-warning:hover, .oneid-button--variant-dashed.oneid-button--ghost.oneid-button--theme-warning:focus-visible { border-color: var(--td-warning-color-hover); } .oneid-button--variant-dashed.oneid-button--ghost.oneid-button--theme-warning:active { border-color: var(--td-warning-color-active); } .oneid-button--variant-dashed.oneid-button--ghost.oneid-button--theme-warning.oneid-is-loading { border-color: var(--td-warning-color); } .oneid-button--variant-dashed.oneid-button--ghost.oneid-button--theme-warning.oneid-is-disabled { border-color: rgba(255, 255, 255, 0.22); background-color: transparent; } .oneid-button--variant-dashed.oneid-button--ghost.oneid-button--theme-danger { color: var(--td-error-color); border-color: var(--td-error-color); } .oneid-button--variant-dashed.oneid-button--ghost.oneid-button--theme-danger:hover, .oneid-button--variant-dashed.oneid-button--ghost.oneid-button--theme-danger:focus-visible { color: var(--td-error-color-hover); } .oneid-button--variant-dashed.oneid-button--ghost.oneid-button--theme-danger:active { color: var(--td-error-color-active); } .oneid-button--variant-dashed.oneid-button--ghost.oneid-button--theme-danger.oneid-is-loading { color: var(--td-error-color); } .oneid-button--variant-dashed.oneid-button--ghost.oneid-button--theme-danger.oneid-is-disabled { color: rgba(255, 255, 255, 0.22); background-color: transparent; } .oneid-button--variant-dashed.oneid-button--ghost.oneid-button--theme-danger:hover, .oneid-button--variant-dashed.oneid-button--ghost.oneid-button--theme-danger:focus-visible { border-color: var(--td-error-color-hover); } .oneid-button--variant-dashed.oneid-button--ghost.oneid-button--theme-danger:active { border-color: var(--td-error-color-active); } .oneid-button--variant-dashed.oneid-button--ghost.oneid-button--theme-danger.oneid-is-loading { border-color: var(--td-error-color); } .oneid-button--variant-dashed.oneid-button--ghost.oneid-button--theme-danger.oneid-is-disabled { border-color: rgba(255, 255, 255, 0.22); background-color: transparent; } .oneid-button--variant-text { height: var(--td-comp-size-m); font: var(--td-font-body-medium); padding-left: calc(var(--td-comp-paddingLR-l) - 1px); padding-right: calc(var(--td-comp-paddingLR-l) - 1px); color: var(--td-text-color-primary); background-color: transparent; border-color: transparent; } .oneid-button--variant-text .oneid-icon, .oneid-button--variant-text .oneid-loading { font-size: var(--td-font-size-body-large); } .oneid-button--variant-text:hover, .oneid-button--variant-text:focus-visible { color: var(--td-text-color-primary); } .oneid-button--variant-text.oneid-is-loading { color: var(--td-text-color-primary); } .oneid-button--variant-text.oneid-is-disabled { color: var(--td-text-color-disabled); } .oneid-button--variant-text:hover, .oneid-button--variant-text:focus-visible { background-color: var(--td-bg-color-container-hover); } .oneid-button--variant-text.oneid-is-loading { background-color: transparent; } .oneid-button--variant-text.oneid-is-disabled { background-color: transparent; } .oneid-button--variant-text:hover, .oneid-button--variant-text:focus-visible { border-color: var(--td-bg-color-container-hover); } .oneid-button--variant-text.oneid-is-loading { border-color: transparent; } .oneid-button--variant-text.oneid-is-disabled { border-color: transparent; } .oneid-button--variant-text.oneid-button--theme-primary { color: var(--td-brand-color); } .oneid-button--variant-text.oneid-button--theme-primary:hover, .oneid-button--variant-text.oneid-button--theme-primary:focus-visible { color: var(--td-brand-color-hover); } .oneid-button--variant-text.oneid-button--theme-primary.oneid-is-loading { color: var(--td-brand-color); } .oneid-button--variant-text.oneid-button--theme-primary.oneid-is-disabled { color: var(--td-brand-color-disabled); } .oneid-button--variant-text.oneid-button--theme-success { color: var(--td-success-color); } .oneid-button--variant-text.oneid-button--theme-success:hover, .oneid-button--variant-text.oneid-button--theme-success:focus-visible { color: var(--td-success-color-hover); } .oneid-button--variant-text.oneid-button--theme-success.oneid-is-loading { color: var(--td-success-color); } .oneid-button--variant-text.oneid-button--theme-success.oneid-is-disabled { color: var(--td-success-color-disabled); } .oneid-button--variant-text.oneid-button--theme-warning { color: var(--td-warning-color); } .oneid-button--variant-text.oneid-button--theme-warning:hover, .oneid-button--variant-text.oneid-button--theme-warning:focus-visible { color: var(--td-warning-color-hover); } .oneid-button--variant-text.oneid-button--theme-warning.oneid-is-loading { color: var(--td-warning-color); } .oneid-button--variant-text.oneid-button--theme-warning.oneid-is-disabled { color: var(--td-warning-color-disabled); } .oneid-button--variant-text.oneid-button--theme-danger { color: var(--td-error-color); } .oneid-button--variant-text.oneid-button--theme-danger:hover, .oneid-button--variant-text.oneid-button--theme-danger:focus-visible { color: var(--td-error-color-hover); } .oneid-button--variant-text.oneid-button--theme-danger.oneid-is-loading { color: var(--td-error-color); } .oneid-button--variant-text.oneid-button--theme-danger.oneid-is-disabled { color: var(--td-error-color-disabled); } .oneid-button--variant-text.oneid-button--ghost { background: none; color: var(--td-text-color-anti); } .oneid-button--variant-text.oneid-button--ghost:hover, .oneid-button--variant-text.oneid-button--ghost:focus-visible { color: var(--td-brand-color-hover); } .oneid-button--variant-text.oneid-button--ghost:active { color: var(--td-brand-color-active); } .oneid-button--variant-text.oneid-button--ghost.oneid-is-loading { color: var(--td-text-color-anti); } .oneid-button--variant-text.oneid-button--ghost.oneid-is-disabled { color: rgba(255, 255, 255, 0.22); background-color: transparent; } .oneid-button--variant-text.oneid-button--ghost.oneid-button--theme-primary { color: var(--td-brand-color); } .oneid-button--variant-text.oneid-button--ghost.oneid-button--theme-primary:hover, .oneid-button--variant-text.oneid-button--ghost.oneid-button--theme-primary:focus-visible { color: var(--td-brand-color-hover); } .oneid-button--variant-text.oneid-button--ghost.oneid-button--theme-primary:active { color: var(--td-brand-color-active); } .oneid-button--variant-text.oneid-button--ghost.oneid-button--theme-primary.oneid-is-loading { color: var(--td-brand-color); } .oneid-button--variant-text.oneid-button--ghost.oneid-button--theme-primary.oneid-is-disabled { color: rgba(255, 255, 255, 0.22); background-color: transparent; } .oneid-button--variant-text.oneid-button--ghost.oneid-button--theme-success { color: var(--td-success-color); } .oneid-button--variant-text.oneid-button--ghost.oneid-button--theme-success:hover, .oneid-button--variant-text.oneid-button--ghost.oneid-button--theme-success:focus-visible { color: var(--td-success-color-hover); } .oneid-button--variant-text.oneid-button--ghost.oneid-button--theme-success:active { color: var(--td-success-color-active); } .oneid-button--variant-text.oneid-button--ghost.oneid-button--theme-success.oneid-is-loading { color: var(--td-success-color); } .oneid-button--variant-text.oneid-button--ghost.oneid-button--theme-success.oneid-is-disabled { color: rgba(255, 255, 255, 0.22); background-color: transparent; } .oneid-button--variant-text.oneid-button--ghost.oneid-button--theme-warning { color: var(--td-warning-color); } .oneid-button--variant-text.oneid-button--ghost.oneid-button--theme-warning:hover, .oneid-button--variant-text.oneid-button--ghost.oneid-button--theme-warning:focus-visible { color: var(--td-warning-color-hover); } .oneid-button--variant-text.oneid-button--ghost.oneid-button--theme-warning:active { color: var(--td-warning-color-active); } .oneid-button--variant-text.oneid-button--ghost.oneid-button--theme-warning.oneid-is-loading { color: var(--td-warning-color); } .oneid-button--variant-text.oneid-button--ghost.oneid-button--theme-warning.oneid-is-disabled { color: rgba(255, 255, 255, 0.22); background-color: transparent; } .oneid-button--variant-text.oneid-button--ghost.oneid-button--theme-danger { color: var(--td-error-color); } .oneid-button--variant-text.oneid-button--ghost.oneid-button--theme-danger:hover, .oneid-button--variant-text.oneid-button--ghost.oneid-button--theme-danger:focus-visible { color: var(--td-error-color-hover); } .oneid-button--variant-text.oneid-button--ghost.oneid-button--theme-danger:active { color: var(--td-error-color-active); } .oneid-button--variant-text.oneid-button--ghost.oneid-button--theme-danger.oneid-is-loading { color: var(--td-error-color); } .oneid-button--variant-text.oneid-button--ghost.oneid-button--theme-danger.oneid-is-disabled { color: rgba(255, 255, 255, 0.22); background-color: transparent; } .oneid-button.oneid-is-loading, .oneid-button.oneid-is-disabled { cursor: not-allowed; } .oneid-button.oneid-size-s { height: var(--td-comp-size-xs); font: var(--td-font-body-small); padding-left: calc(var(--td-comp-paddingLR-s) - 1px); padding-right: calc(var(--td-comp-paddingLR-s) - 1px); } .oneid-button.oneid-size-s .oneid-icon, .oneid-button.oneid-size-s .oneid-loading { font-size: var(--td-font-size-body-medium); } .oneid-button.oneid-size-l { height: var(--td-comp-size-xl); font: var(--td-font-body-large); padding-left: calc(var(--td-comp-paddingLR-xl) - 1px); padding-right: calc(var(--td-comp-paddingLR-xl) - 1px); } .oneid-button.oneid-size-l .oneid-icon, .oneid-button.oneid-size-l .oneid-loading { font-size: var(--td-font-size-title-large); } .oneid-button--shape-square { width: var(--td-comp-size-m); padding: 0; } .oneid-button--shape-square.oneid-size-s { width: var(--td-comp-size-xs); padding: 0; } .oneid-button--shape-square.oneid-size-l { width: var(--td-comp-size-xl); padding: 0; } .oneid-button--shape-round { border-radius: var(--td-radius-round); } .oneid-button--shape-round.oneid-size-s { border-radius: calc(var(--td-comp-size-xs) / 2); } .oneid-button--shape-round.oneid-size-l { border-radius: calc(var(--td-comp-size-xl) / 2); } .oneid-button--shape-circle { width: var(--td-comp-size-m); padding: 0; text-align: center; border-radius: calc(var(--td-comp-size-m) / 2); } .oneid-button--shape-circle .oneid-icon { font-size: var(--td-font-size-body-large); } .oneid-button--shape-circle .oneid-loading { font-size: var(--td-font-size-body-large); } .oneid-button--shape-circle.oneid-size-s { width: var(--td-comp-size-xs); border-radius: calc(var(--td-comp-size-xs) / 2); } .oneid-button--shape-circle.oneid-size-l { width: var(--td-comp-size-xl); padding: 0; border-radius: calc(var(--td-comp-size-xl) / 2); } .oneid-button.oneid-size-full-width { display: -webkit-box; display: -ms-flexbox; display: flex; width: 100%; } .oneid-button--ghost { --ripple-color: var(--td-gray-color-10); } .oneid-button:not(.oneid-is-disabled):not(.oneid-button--ghost) { --ripple-color: var(--td-bg-color-container-active); } .oneid-button--variant-base:not(.oneid-is-disabled):not(.oneid-button--ghost) { --ripple-color: var(--td-bg-color-component-active); } .oneid-button--variant-base.oneid-button--theme-primary:not(.oneid-is-disabled):not(.oneid-button--ghost) { --ripple-color: var(--td-brand-color-active); } .oneid-button--variant-base.oneid-button--theme-success:not(.oneid-is-disabled):not(.oneid-button--ghost) { --ripple-color: var(--td-success-color-active); } .oneid-button--variant-base.oneid-button--theme-warning:not(.oneid-is-disabled):not(.oneid-button--ghost) { --ripple-color: var(--td-warning-color-active); } .oneid-button--variant-base.oneid-button--theme-danger:not(.oneid-is-disabled):not(.oneid-button--ghost) { --ripple-color: var(--td-error-color-active); } .input-readonly.oneid-is-readonly { color: var(--td-text-color-primary); background-color: var(--td-bg-color-specialcomponent); } .input-readonly.oneid-is-readonly .oneid-input__inner { cursor: pointer; } .input-disabled.oneid-is-disabled { color: var(--td-text-color-disabled); background-color: var(--td-bg-color-component-disabled); } .input-disabled.oneid-is-disabled:hover { border-color: var(--td-border-level-2-color); } .input-disabled.oneid-is-disabled .oneid-input__inner { cursor: not-allowed; color: var(--td-text-color-disabled); text-overflow: initial; } .input-disabled.oneid-is-disabled .oneid-input__inner::-webkit-input-placeholder { color: var(--td-text-color-disabled); } .input-disabled.oneid-is-disabled .oneid-input__inner::-moz-placeholder { color: var(--td-text-color-disabled); } .input-disabled.oneid-is-disabled .oneid-input__inner:-ms-input-placeholder { color: var(--td-text-color-disabled); } .input-disabled.oneid-is-disabled .oneid-input__inner::-ms-input-placeholder { color: var(--td-text-color-disabled); } .input-disabled.oneid-is-disabled .oneid-input__inner::placeholder { color: var(--td-text-color-disabled); } .input-disabled.oneid-is-disabled > .oneid-input__prefix .oneid-icon, .input-disabled.oneid-is-disabled > .oneid-input__suffix .oneid-icon { color: var(--td-text-color-disabled); } .input-disabled.oneid-is-disabled > .oneid-input__prefix .oneid-icon:hover, .input-disabled.oneid-is-disabled > .oneid-input__suffix .oneid-icon:hover { color: var(--td-text-color-disabled); } .oneid-tips { font-size: var(--td-font-size-body-small); } .oneid-tips.oneid-is-default { color: var(--td-text-color-placeholder); } .oneid-tips.oneid-is-error { color: var(--td-error-color); } .oneid-tips.oneid-is-warning { color: var(--td-warning-color); } .oneid-tips.oneid-is-success { color: var(--td-success-color); } .oneid-input { margin: 0; padding: 0; list-style: none; position: relative; height: var(--td-comp-size-m); border-width: 1px; border-style: solid; border-radius: var(--td-radius-default); border-color: var(--td-border-level-2-color); padding: 0 var(--td-comp-paddingLR-s); background-color: var(--td-bg-color-specialcomponent); outline: none; color: var(--td-text-color-primary); font: var(--td-font-body-medium); width: 100%; -webkit-box-sizing: border-box; box-sizing: border-box; -webkit-transition: border cubic-bezier(0.38, 0, 0.24, 1) 0.2s, background-color cubic-bezier(0.38, 0, 0.24, 1) 0.2s, -webkit-box-shadow cubic-bezier(0.38, 0, 0.24, 1) 0.2s; transition: border cubic-bezier(0.38, 0, 0.24, 1) 0.2s, background-color cubic-bezier(0.38, 0, 0.24, 1) 0.2s, -webkit-box-shadow cubic-bezier(0.38, 0, 0.24, 1) 0.2s; transition: border cubic-bezier(0.38, 0, 0.24, 1) 0.2s, box-shadow cubic-bezier(0.38, 0, 0.24, 1) 0.2s, background-color cubic-bezier(0.38, 0, 0.24, 1) 0.2s; transition: border cubic-bezier(0.38, 0, 0.24, 1) 0.2s, box-shadow cubic-bezier(0.38, 0, 0.24, 1) 0.2s, background-color cubic-bezier(0.38, 0, 0.24, 1) 0.2s, -webkit-box-shadow cubic-bezier(0.38, 0, 0.24, 1) 0.2s; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; overflow: hidden; } .oneid-input:hover { border-color: var(--td-brand-color); } .oneid-input:focus { z-index: 1; border-color: var(--td-brand-color); -webkit-box-shadow: 0 0 0 2px var(--td-brand-color-focus); box-shadow: 0 0 0 2px var(--td-brand-color-focus); } .oneid-input--borderless:not(.oneid-input--focused) { border-color: transparent; -webkit-transition: border cubic-bezier(0.38, 0, 0.24, 1) 0.2s, background-color cubic-bezier(0.38, 0, 0.24, 1) 0.2s, -webkit-box-shadow cubic-bezier(0.38, 0, 0.24, 1) 0.2s; transition: border cubic-bezier(0.38, 0, 0.24, 1) 0.2s, background-color cubic-bezier(0.38, 0, 0.24, 1) 0.2s, -webkit-box-shadow cubic-bezier(0.38, 0, 0.24, 1) 0.2s; transition: border cubic-bezier(0.38, 0, 0.24, 1) 0.2s, box-shadow cubic-bezier(0.38, 0, 0.24, 1) 0.2s, background-color cubic-bezier(0.38, 0, 0.24, 1) 0.2s; transition: border cubic-bezier(0.38, 0, 0.24, 1) 0.2s, box-shadow cubic-bezier(0.38, 0, 0.24, 1) 0.2s, background-color cubic-bezier(0.38, 0, 0.24, 1) 0.2s, -webkit-box-shadow cubic-bezier(0.38, 0, 0.24, 1) 0.2s; } .oneid-input--borderless:not(.oneid-input--focused):hover { border-color: var(--td-component-border); background-color: var(--td-bg-color-container-hover); cursor: pointer; } .oneid-input--borderless:not(.oneid-input--focused).oneid-is-disabled { border: none; background-color: var(--td-bg-color-component-disabled); } .oneid-input--focused { border-color: var(--td-brand-color); -webkit-box-shadow: 0 0 0 2px var(--td-brand-color-focus); box-shadow: 0 0 0 2px var(--td-brand-color-focus); z-index: 1; } .oneid-input :focus-visible { outline: none; } .oneid-input__inner { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; border: none; outline: none; padding: 0; max-width: 100%; min-width: 0; color: var(--td-text-color-primary); font: inherit; background-color: transparent; -webkit-box-sizing: border-box; box-sizing: border-box; white-space: nowrap; word-wrap: normal; overflow: hidden; text-overflow: ellipsis; } .oneid-input__inner::-webkit-input-placeholder { color: var(--td-text-color-placeholder); } .oneid-input__inner::-moz-placeholder { color: var(--td-text-color-placeholder); } .oneid-input__inner:-ms-input-placeholder { color: var(--td-text-color-placeholder); } .oneid-input__inner::-ms-input-placeholder { color: var(--td-text-color-placeholder); } .oneid-input__inner::placeholder { color: var(--td-text-color-placeholder); } .oneid-input__inner:-moz-placeholder { text-overflow: ellipsis; width: 100%; } .oneid-input__inner:-ms-input-placeholder { text-overflow: ellipsis; width: 100%; } .oneid-input__inner:placeholder-shown { text-overflow: ellipsis; width: 100%; } .oneid-input__inner[type=password]::-ms-reveal { display: none; } .oneid-input__inner[type=search]::-webkit-search-decoration, .oneid-input__inner[type=search]::-webkit-search-cancel-button, .oneid-input__inner[type=search]::-webkit-search-results-button, .oneid-input__inner[type=search]::-webkit-search-results-decoration { -webkit-appearance: none; appearance: none; } .oneid-input__inner.oneid-input--soft-hidden { width: 0; } .oneid-input__extra { font: var(--td-font-body-small); color: var(--td-text-color-placeholder); } .oneid-input__status { position: absolute; right: -24px; top: 0; } .oneid-input.oneid-input--suffix > span.oneid-input__clear { opacity: 0; visibility: hidden; -webkit-transition: border cubic-bezier(0.38, 0, 0.24, 1) 0.2s, background-color cubic-bezier(0.38, 0, 0.24, 1) 0.2s, -webkit-box-shadow cubic-bezier(0.38, 0, 0.24, 1) 0.2s; transition: border cubic-bezier(0.38, 0, 0.24, 1) 0.2s, background-color cubic-bezier(0.38, 0, 0.24, 1) 0.2s, -webkit-box-shadow cubic-bezier(0.38, 0, 0.24, 1) 0.2s; transition: border cubic-bezier(0.38, 0, 0.24, 1) 0.2s, box-shadow cubic-bezier(0.38, 0, 0.24, 1) 0.2s, background-color cubic-bezier(0.38, 0, 0.24, 1) 0.2s; transition: border cubic-bezier(0.38, 0, 0.24, 1) 0.2s, box-shadow cubic-bezier(0.38, 0, 0.24, 1) 0.2s, background-color cubic-bezier(0.38, 0, 0.24, 1) 0.2s, -webkit-box-shadow cubic-bezier(0.38, 0, 0.24, 1) 0.2s; } .oneid-input.oneid-input--suffix:hover > span.oneid-input__clear { opacity: 1; visibility: visible; } .oneid-input.oneid-is-success { border-color: var(--td-success-color); } .oneid-input.oneid-is-success:focus { -webkit-box-shadow: 0 0 0 2px var(--td-success-color-focus); box-shadow: 0 0 0 2px var(--td-success-color-focus); } .oneid-input.oneid-is-success.oneid-input--focused { -webkit-box-shadow: 0 0 0 2px var(--td-success-color-focus); box-shadow: 0 0 0 2px var(--td-success-color-focus); } .oneid-input.oneid-is-success > .oneid-input__extra { color: var(--td-success-color); } .oneid-input.oneid-is-warning { border-color: var(--td-warning-color); } .oneid-input.oneid-is-warning:focus { -webkit-box-shadow: 0 0 0 2px var(--td-warning-color-focus); box-shadow: 0 0 0 2px var(--td-warning-color-focus); } .oneid-input.oneid-is-warning.oneid-input--focused { -webkit-box-shadow: 0 0 0 2px var(--td-warning-color-focus); box-shadow: 0 0 0 2px var(--td-warning-color-focus); } .oneid-input.oneid-is-warning > .oneid-input__extra { color: var(--td-warning-color); } .oneid-input.oneid-is-error { border-color: var(--td-error-color); } .oneid-input.oneid-is-error:focus { -webkit-box-shadow: 0 0 0 2px var(--td-error-color-focus); box-shadow: 0 0 0 2px var(--td-error-color-focus); } .oneid-input.oneid-is-error.oneid-input--focused { -webkit-box-shadow: 0 0 0 2px var(--td-error-color-focus); box-shadow: 0 0 0 2px var(--td-error-color-focus); } .oneid-input.oneid-is-error > .oneid-input__extra { color: var(--td-error-color); } .oneid-input.oneid-is-readonly { color: var(--td-text-color-primary); background-color: var(--td-bg-color-specialcomponent); } .oneid-input.oneid-is-readonly .oneid-input__inner { cursor: pointer; } .oneid-input.oneid-is-disabled { color: var(--td-text-color-disabled); background-color: var(--td-bg-color-component-disabled); } .oneid-input.oneid-is-disabled:hover { border-color: var(--td-border-level-2-color); } .oneid-input.oneid-is-disabled .oneid-input__inner { cursor: not-allowed; color: var(--td-text-color-disabled); text-overflow: initial; } .oneid-input.oneid-is-disabled .oneid-input__inner::-webkit-input-placeholder { color: var(--td-text-color-disabled); } .oneid-input.oneid-is-disabled .oneid-input__inner::-moz-placeholder { color: var(--td-text-color-disabled); } .oneid-input.oneid-is-disabled .oneid-input__inner:-ms-input-placeholder { color: var(--td-text-color-disabled); } .oneid-input.oneid-is-disabled .oneid-input__inner::-ms-input-placeholder { color: var(--td-text-color-disabled); } .oneid-input.oneid-is-disabled .oneid-input__inner::placeholder { color: var(--td-text-color-disabled); } .oneid-input.oneid-is-disabled > .oneid-input__prefix .oneid-icon, .oneid-input.oneid-is-disabled > .oneid-input__suffix .oneid-icon { color: var(--td-text-color-disabled); } .oneid-input.oneid-is-disabled > .oneid-input__prefix .oneid-icon:hover, .oneid-input.oneid-is-disabled > .oneid-input__suffix .oneid-icon:hover { color: var(--td-text-color-disabled); } .oneid-input.oneid-input--prefix > .oneid-input__prefix { z-index: 2; height: 100%; text-align: center; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .oneid-input.oneid-input--prefix > .oneid-input__prefix-icon { font-size: var(--td-font-size-body-large); } .oneid-input.oneid-input--suffix > .oneid-input__suffix { z-index: 2; height: 100%; text-align: center; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .oneid-input.oneid-input--suffix > .oneid-input__suffix-icon { font-size: var(--td-font-size-body-large); } .oneid-input .oneid-input__suffix-clear { cursor: pointer; } .oneid-input.oneid-size-l { height: var(--td-comp-size-xl); font: var(--td-font-body-large); padding: var(--td-comp-paddingTB-m) var(--td-comp-paddingLR-m); } .oneid-input.oneid-size-s { height: var(--td-comp-size-xs); font: var(--td-font-body-small); } .oneid-input .oneid-input__prefix > .oneid-icon, .oneid-input .oneid-input__suffix > .oneid-icon { font-size: inherit; } .oneid-input .oneid-input__prefix > .oneid-icon { font-size: 16px; color: var(--td-text-color-placeholder); } .oneid-input .oneid-input__prefix:not(:empty) { margin-right: var(--td-comp-margin-s); } .oneid-input .oneid-input__suffix > .oneid-icon { color: var(--td-text-color-placeholder); -webkit-transition: all 0.2s linear; transition: all 0.2s linear; } .oneid-input .oneid-input__suffix > .oneid-icon:hover { color: var(--td-text-color-secondary); -webkit-transition: all 0.2s linear; transition: all 0.2s linear; } .oneid-input .oneid-input__suffix:not(:empty) { margin-left: var(--td-comp-margin-s); } .oneid-input.oneid-is-focused .oneid-input__prefix > .oneid-icon { color: var(--td-brand-color); } .oneid-input.oneid-is-focused .oneid-input__suffix > .oneid-icon-time, .oneid-input.oneid-is-focused .oneid-input__suffix .oneid-icon-calendar { color: var(--td-brand-color); } .oneid-input-group { position: relative; display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-align: stretch; -ms-flex-align: stretch; align-items: stretch; } .oneid-input-group .oneid-input__wrap { border-radius: 0; } .oneid-input-group .oneid-input__wrap:first-child { border-radius: var(--td-radius-default) 0 0 var(--td-radius-default); } .oneid-input-group .oneid-input__wrap:last-child { border-radius: 0 var(--td-radius-default) var(--td-radius-default) 0; } .oneid-input-group .oneid-button, .oneid-input-group .oneid-select { border-radius: 0; } .oneid-input-group .oneid-button:not(:first-child), .oneid-input-group .oneid-select:not(:first-child) { margin-left: -1px; } .oneid-input-group .oneid-input__wrap:not(:first-child) .oneid-input { margin-left: -1px; } .oneid-input-group .oneid-input__wrap:first-child .oneid-input { border-radius: var(--td-radius-default) 0 0 var(--td-radius-default); } .oneid-input-group .oneid-input__wrap:last-child .oneid-input { border-radius: 0 var(--td-radius-default) var(--td-radius-default) 0; } .oneid-input-group .oneid-button:first-child, .oneid-input-group .oneid-select:first-child { border-radius: var(--td-radius-default) 0 0 var(--td-radius-default); } .oneid-input-group .oneid-button:last-child, .oneid-input-group .oneid-select:last-child { border-radius: 0 var(--td-radius-default) var(--td-radius-default) 0; } .oneid-input-group--separate .oneid-input__wrap + .oneid-input__wrap { margin-left: var(--td-comp-margin-xxxl); } .oneid-input-group--separate .oneid-button, .oneid-input-group--separate .oneid-select { border-radius: var(--td-radius-default); } .oneid-input-group--separate .oneid-button:first-child, .oneid-input-group--separate .oneid-select:first-child { border-radius: var(--td-radius-default) 0 0 var(--td-radius-default); } .oneid-input-group--separate .oneid-button:last-child, .oneid-input-group--separate .oneid-select:last-child { border-radius: 0 var(--td-radius-default) var(--td-radius-default) 0; } .oneid-input-group--separate .oneid-input__wrap .oneid-input { border-radius: var(--td-radius-default); } .oneid-input-group--separate .oneid-input__wrap .oneid-input:first-child { border-radius: var(--td-radius-default); } .oneid-input-group--separate .oneid-input__wrap .oneid-input:last-child { border-radius: var(--td-radius-default); } .oneid-input-group .oneid-input__inner, .oneid-input-group .oneid-button, .oneid-input-group .oneid-select { position: relative; z-index: 0; } .oneid-input-group .oneid-input__inner:hover, .oneid-input-group .oneid-button:hover, .oneid-input-group .oneid-select:hover, .oneid-input-group .oneid-input__inner:focus, .oneid-input-group .oneid-button:focus, .oneid-input-group .oneid-select:focus, .oneid-input-group .oneid-input__inner:active, .oneid-input-group .oneid-button:active, .oneid-input-group .oneid-select:active { z-index: 1; } .oneid-input__wrap { width: 100%; } .oneid-input__tips { height: auto; min-height: var(--td-line-height-body-small); font: var(--td-font-body-small); position: absolute; } .oneid-input__tips--default { color: var(--td-text-color-placeholder); } .oneid-input__tips--success { color: var(--td-success-color); } .oneid-input__tips--warning { color: var(--td-warning-color); } .oneid-input__tips--error { color: var(--td-error-color); } .oneid-align-center > .oneid-input__inner { text-align: center; } .oneid-align-right > .oneid-input__inner { text-align: right; } .oneid-input__input-pre { position: absolute; visibility: hidden; white-space: pre; display: block; } .oneid-input--auto-width { width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; min-width: 60px; } .oneid-input__limit-number { font: var(--td-font-body-medium); color: var(--td-text-color-placeholder); background: var(--td-bg-color-specialcomponent); } .oneid-input__limit-number.oneid-is-disabled { background: var(--td-bg-color-component-disabled); } .oneid-input-adornment { font: var(--td-font-body-medium); color: var(--td-text-color-primary); -webkit-box-sizing: border-box; box-sizing: border-box; margin: 0; padding: 0; list-style: none; display: -webkit-box; display: -ms-flexbox; display: flex; } .oneid-input-adornment__prepend .oneid-input, .oneid-input-adornment__append .oneid-input, .oneid-input-adornment__prepend .oneid-textarea__inner, .oneid-input-adornment__append .oneid-textarea__inner { background-color: transparent; } .oneid-input-adornment__prepend { background-color: var(--td-bg-color-secondarycontainer); color: var(--td-text-color-primary); word-break: keep-all; margin-right: -1px; } .oneid-input-adornment__append { background-color: var(--td-bg-color-secondarycontainer); color: var(--td-text-color-primary); word-break: keep-all; margin-left: -1px; } .oneid-input-adornment__text { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; height: 100%; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-sizing: border-box; box-sizing: border-box; white-space: nowrap; padding: 0 var(--td-comp-paddingLR-s); border: 1px solid var(--td-border-level-2-color); } .oneid-input-adornment > :first-child { border-radius: var(--td-radius-default) 0 0 var(--td-radius-default); } .oneid-input-adornment > :first-child .oneid-input, .oneid-input-adornment > :first-child .oneid-input-adornment__text, .oneid-input-adornment > :first-child .oneid-textarea__inner { border-radius: var(--td-radius-default) 0 0 var(--td-radius-default); } .oneid-input-adornment > :last-child { border-radius: 0 var(--td-radius-default) var(--td-radius-default) 0; } .oneid-input-adornment > :last-child .oneid-input, .oneid-input-adornment > :last-child .oneid-input-adornment__text, .oneid-input-adornment > :last-child .oneid-textarea__inner { border-radius: 0 var(--td-radius-default) var(--td-radius-default) 0; } .oneid-input-adornment > :not(:last-child):hover { z-index: 2; } .oneid-input-adornment > :not(:first-child):not(:last-child) .oneid-input, .oneid-input-adornment > :not(:first-child):not(:last-child) .oneid-textarea__inner { border-radius: 0; } /* Alert */ .oneid-alert { font: var(--td-font-body-medium); color: var(--td-text-color-primary); -webkit-box-sizing: border-box; box-sizing: border-box; margin: 0; padding: 0; list-style: none; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; padding: var(--td-comp-paddingTB-l) var(--td-comp-paddingLR-xl); opacity: 1; -webkit-transition: opacity 0.2s; transition: opacity 0.2s; border-radius: var(--td-radius-medium); } .oneid-alert.oneid-is-hidden { /* 隐藏 */ display: none; } .oneid-alert--closing { opacity: 0; } .oneid-alert--info { background-color: var(--td-brand-color-focus); } .oneid-alert--info .oneid-alert__icon { color: var(--td-brand-color); } .oneid-alert--info .oneid-alert__swiper-trigger-wrap { color: var(--td-brand-color); } .oneid-alert--info .oneid-alert__swiper-trigger--active { color: var(--td-brand-color); } .oneid-alert--success { background-color: var(--td-success-color-focus); } .oneid-alert--success .oneid-alert__icon { color: var(--td-success-color); } .oneid-alert--success .oneid-alert__swiper-trigger-wrap { color: var(--td-success-color-focus); } .oneid-alert--success .oneid-alert__swiper-trigger--active { color: var(--td-success-color); } .oneid-alert--warning { background-color: var(--td-warning-color-focus); } .oneid-alert--warning .oneid-alert__icon { color: var(--td-warning-color); } .oneid-alert--warning .oneid-alert__swiper-trigger-wrap { color: var(--td-warning-color-focus); } .oneid-alert--warning .oneid-alert__swiper-trigger--active { color: var(--td-warning-color); } .oneid-alert--error { background-color: var(--td-error-color-focus); } .oneid-alert--error .oneid-alert__icon { color: var(--td-error-color); } .oneid-alert--error .oneid-alert__swiper-trigger-wrap { color: var(--td-error-color-focus); } .oneid-alert--error .oneid-alert__swiper-trigger--active { color: var(--td-error-color); } .oneid-alert__icon { font-size: var(--td-line-height-body-medium); display: inherit; } .oneid-alert__icon, .oneid-alert__close { -webkit-box-flex: 0; -ms-flex: 0 0 auto; flex: 0 0 auto; line-height: var(--td-line-height-body-small); } .oneid-alert__content { -webkit-box-flex: 1; -ms-flex: 1 1 0px; flex: 1 1 0; font-size: var(--td-font-size-body-medium); line-height: var(--td-line-height-body-medium); overflow: hidden; } .oneid-alert__title, .oneid-alert__message { width: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; } .oneid-alert__title { color: var(--td-text-color-primary); font-weight: bold; } .oneid-alert__title + .oneid-alert__message { margin-top: var(--td-comp-margin-s); } .oneid-alert__description { color: var(--td-text-color-secondary); -webkit-box-flex: 0; -ms-flex: 0 1 auto; flex: 0 1 auto; -webkit-transition: height 0.2s; transition: height 0.2s; } .oneid-alert__operation { -webkit-box-flex: 0; -ms-flex: 0 0 auto; flex: 0 0 auto; padding: 0 var(--td-comp-paddingLR-s); color: var(--td-brand-color); cursor: pointer; -webkit-transition: color 0.2s; transition: color 0.2s; } .oneid-alert__operation:hover { color: var(--td-brand-color-hover); } .oneid-alert__operation:active { color: var(--td-brand-color-active); } .oneid-alert__icon + .oneid-alert__content { margin-left: var(--td-comp-margin-s); } .oneid-alert__collapse { margin-top: var(--td-comp-margin-s); color: var(--td-brand-color); cursor: pointer; } .oneid-alert__close { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; margin-left: var(--td-comp-margin-l); color: var(--td-text-color-secondary); cursor: pointer; -webkit-transition: color 0.2s; transition: color 0.2s; } .oneid-alert__close:hover { color: var(--td-text-color-primary); } .oneid-alert__close > .oneid-icon { font-size: calc(var(--td-line-height-body-medium) - 2px); padding: calc((var(--td-line-height-body-medium) - (var(--td-line-height-body-medium) - 2px)) / 2) 0; } .oneid-badge { font: var(--td-font-body-medium); color: var(--td-text-color-primary); -webkit-box-sizing: border-box; box-sizing: border-box; margin: 0; padding: 0; list-style: none; position: relative; display: inline-block; } .oneid-badge--dot, .oneid-badge--circle, .oneid-badge--round { position: absolute; top: 0; right: 0; color: var(--td-text-color-anti); text-align: center; font: var(--td-font-body-small); -webkit-transform: translate(50%, -50%); transform: translate(50%, -50%); -webkit-transform-origin: 100% 0; transform-origin: 100% 0; -webkit-box-sizing: content-box; box-sizing: content-box; } .oneid-badge--static { position: static; display: inline-block; -webkit-transform: none; transform: none; } .oneid-badge--dot { right: 1px; margin-top: 1px; width: 6px; height: 6px; border-radius: var(--td-radius-circle); background-color: var(--td-error-color); } .oneid-badge--circle, .oneid-badge--round { padding-right: calc((var(--td-comp-size-xxs) - 8px) / 2); padding-left: calc((var(--td-comp-size-xxs) - 8px) / 2); min-width: 8px; height: var(--td-comp-size-xxs); background-color: var(--td-error-color); line-height: var(--td-comp-size-xxs); } .oneid-badge--circle.oneid-size-s, .oneid-badge--round.oneid-size-s { padding-right: calc((var(--td-comp-size-xxxs) - 8px) / 2); padding-left: calc((var(--td-comp-size-xxxs) - 8px) / 2); min-width: 8px; height: var(--td-comp-size-xxxs); line-height: var(--td-comp-size-xxxs); } .oneid-badge--circle { border-radius: calc(var(--td-comp-size-xxs) / 2); } .oneid-badge--round { border-radius: var(--td-radius-default); } .oneid-radio-group { font: var(--td-font-body-medium); color: var(--td-text-color-primary); -webkit-box-sizing: border-box; box-sizing: border-box; margin: 0; padding: 0; list-style: none; display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; max-width: 100%; border-radius: var(--td-radius-default); -ms-flex-wrap: wrap; flex-wrap: wrap; } @-moz-document url-prefix() { .oneid-radio-group { scrollbar-color: var(--td-scrollbar-color) transparent; scrollbar-width: thin; } } .oneid-radio-group::-webkit-scrollbar { width: 4px; height: 4px; } .oneid-radio-group::-webkit-scrollbar-thumb { border: 0px solid transparent; background-clip: content-box; background-color: var(--td-scrollbar-color); border-radius: 7px; } .oneid-radio-group::-webkit-scrollbar-thumb:vertical:hover, .oneid-radio-group::-webkit-scrollbar-thumb:horizontal:hover { background-color: var(--td-scrollbar-hover-color); } .oneid-radio-group .oneid-radio { margin-right: var(--td-comp-margin-xxl); } .oneid-radio-group.oneid-radio-group__outline { -ms-flex-wrap: wrap; flex-wrap: wrap; row-gap: var(--td-comp-margin-xs); } .oneid-radio-group.oneid-radio-group__outline.oneid-size-s .oneid-radio-button { height: var(--td-comp-size-xs); } .oneid-radio-group.oneid-radio-group__outline.oneid-size-m .oneid-radio-button { height: var(--td-comp-size-m); } .oneid-radio-group.oneid-radio-group__outline.oneid-size-l .oneid-radio-button { height: var(--td-comp-size-xl); } .oneid-radio-group.oneid-radio-group__outline .oneid-radio-button:first-child { border-radius: var(--td-radius-default) 0 0 var(--td-radius-default); } .oneid-radio-group.oneid-radio-group__outline .oneid-radio-button:last-child { border-radius: 0 var(--td-radius-default) var(--td-radius-default) 0; } .oneid-radio-group.oneid-radio-group__outline .oneid-radio-button:only-child { border-radius: var(--td-radius-default); } .oneid-radio-group.oneid-radio-group__outline .oneid-radio-button.oneid-is-checked { color: var(--td-brand-color); } .oneid-radio-group.oneid-radio-group__outline .oneid-radio-button.oneid-is-disabled.oneid-is-checked { color: var(--td-brand-color-disabled); border-color: var(--td-brand-color-disabled); background-color: var(--td-bg-color-specialcomponent); } .oneid-radio-group.oneid-radio-group--filled { border-color: var(--td-bg-color-component); padding: var(--td-comp-paddingTB-xxs) var(--td-comp-paddingLR-xxs); border-radius: var(--td-radius-default); background-color: var(--td-bg-color-component); position: relative; } .oneid-radio-group.oneid-radio-group--filled .oneid-radio-group__bg-block { position: absolute; left: 2px; top: 2px; width: 0; height: calc(100% - 4px); background-color: var(--td-bg-color-container-select); -webkit-transition: all 0.2s cubic-bezier(0.38, 0, 0.24, 1); transition: all 0.2s cubic-bezier(0.38, 0, 0.24, 1); border-radius: var(--td-radius-small); } .oneid-radio-group.oneid-radio-group--filled .oneid-radio-button { color: var(--td-text-color-secondary); border: 0; background-color: transparent; } .oneid-radio-group.oneid-radio-group--filled .oneid-radio-button:hover { color: var(--td-text-color-primary); } .oneid-radio-group.oneid-radio-group--filled .oneid-radio-button::before { content: ""; position: absolute; left: 0px; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); width: 1px; height: calc(100% - 16px); background-color: var(--td-component-border); -webkit-transition: opacity 0.2s cubic-bezier(0, 0, 0.15, 1); transition: opacity 0.2s cubic-bezier(0, 0, 0.15, 1); } .oneid-radio-group.oneid-radio-group--filled .oneid-radio-button:first-child::before { opacity: 0; } .oneid-radio-group.oneid-radio-group--filled .oneid-radio-button.oneid-is-checked { position: relative; color: var(--td-text-color-primary); z-index: 1; border: 0; -webkit-transition: color 0.2s linear; transition: color 0.2s linear; } .oneid-radio-group.oneid-radio-group--filled .oneid-radio-button.oneid-is-checked::before { opacity: 0; } .oneid-radio-group.oneid-radio-group--filled .oneid-radio-button.oneid-is-checked + label::before { opacity: 0; } .oneid-radio-group.oneid-radio-group--filled .oneid-radio-button.oneid-is-disabled { background-color: transparent; } .oneid-radio-group.oneid-radio-group--filled .oneid-radio-button.oneid-is-disabled.oneid-is-checked { color: var(--td-text-color-disabled); } .oneid-radio-group.oneid-radio-group--filled .oneid-radio-button.oneid-is-disabled.oneid-is-checked ~ .oneid-radio-group__bg-block { background-color: var(--td-bg-color-component-disabled); } .oneid-radio-group.oneid-radio-group--primary-filled .oneid-radio-group__bg-block { background-color: var(--td-brand-color); } .oneid-radio-group.oneid-radio-group--primary-filled .oneid-radio-button.oneid-is-checked { color: var(--td-text-color-anti); } .oneid-radio-group.oneid-radio-group--primary-filled .oneid-radio-button.oneid-is-disabled.oneid-is-checked { color: var(--td-text-color-anti); } .oneid-radio-group.oneid-radio-group--primary-filled .oneid-radio-button.oneid-is-disabled.oneid-is-checked ~ .oneid-radio-group__bg-block { background-color: var(--td-brand-color-disabled); } .oneid-radio-group.oneid-size-s .oneid-radio-button { height: calc(var(--td-comp-size-xs) - var(--td-comp-paddingTB-xxs) * 2); padding: 0px var(--td-comp-paddingLR-s); font: var(--td-font-body-small); } .oneid-radio-group.oneid-size-s .oneid-radio-button::before { height: calc(100% - 16px); } .oneid-radio-group.oneid-size-m .oneid-radio-button { height: calc(var(--td-comp-size-m) - var(--td-comp-paddingTB-xxs) * 2); padding: var(--td-comp-paddingTB-xs) var(--td-comp-paddingLR-l); font: var(--td-font-body-medium); } .oneid-radio-group.oneid-size-m .oneid-radio-button::before { height: calc(100% - 20px); } .oneid-radio-group.oneid-size-l .oneid-radio-button { height: calc(var(--td-comp-size-xl) - var(--td-comp-paddingTB-xxs) * 2); padding: var(--td-comp-paddingTB-s) var(--td-comp-paddingLR-xl); font: var(--td-font-body-large); } .oneid-radio-group.oneid-size-l .oneid-radio-button::before { height: calc(100% - 24px); } .oneid-radio-group .oneid-radio-button { cursor: pointer; position: relative; border: 1px solid; border-color: var(--td-border-level-2-color); border-right: 0; display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-transition: color 0.2s cubic-bezier(0, 0, 0.15, 1); transition: color 0.2s cubic-bezier(0, 0, 0.15, 1); color: var(--td-text-color-primary); white-space: nowrap; -webkit-box-sizing: border-box; box-sizing: border-box; } .oneid-radio-group .oneid-radio-button:first-child { border-radius: var(--td-radius-small) 0 0 var(--td-radius-small); } .oneid-radio-group .oneid-radio-button:last-child { border-right: 1px solid; border-right-color: var(--td-border-level-2-color); border-radius: 0 var(--td-radius-small) var(--td-radius-small) 0; } .oneid-radio-group .oneid-radio-button__former { opacity: 0; height: 0; width: 0; font: var(--td-font-body-medium); color: var(--td-text-color-primary); -webkit-box-sizing: border-box; box-sizing: border-box; margin: 0; padding: 0; list-style: none; } .oneid-radio-group .oneid-radio-button:hover { color: var(--td-brand-color); } .oneid-radio-group .oneid-radio-button.oneid-is-checked { border-right: 1px solid; border-color: var(--td-brand-color); -webkit-transition: border-color 0.2s cubic-bezier(0, 0, 0.15, 1); transition: border-color 0.2s cubic-bezier(0, 0, 0.15, 1); } .oneid-radio-group .oneid-radio-button.oneid-is-checked + .oneid-radio-button { border-left: 0; } .oneid-radio-group .oneid-radio-button.oneid-is-disabled { cursor: not-allowed; color: var(--td-text-color-disabled); background-color: var(--td-bg-color-component-disabled); } .oneid-radio-group .oneid-radio-button.oneid-is-disabled:hover { border-color: var(--td-border-level-2-color); color: var(--td-text-color-disabled); } .oneid-radio-group .oneid-radio-button.oneid-is-disabled:hover::after { width: 0; } .oneid-radio-group .oneid-radio-button.oneid-is-disabled.oneid-is-checked { color: var(--td-text-color-disabled); } .oneid-radio-group .oneid-radio-button.oneid-is-disabled.oneid-is-checked::after { width: 0; } .oneid-radio { font: var(--td-font-body-medium); color: var(--td-text-color-primary); -webkit-box-sizing: border-box; box-sizing: border-box; margin: 0; padding: 0; list-style: none; position: relative; cursor: pointer; display: inline-block; } .oneid-radio__former { font: var(--td-font-body-medium); color: var(--td-text-color-primary); -webkit-box-sizing: border-box; box-sizing: border-box; margin: 0; padding: 0; list-style: none; opacity: 0; position: absolute; } .oneid-radio__input { position: relative; display: inline-block; width: 16px; height: 16px; vertical-align: middle; border-radius: var(--td-radius-circle); border: 1px solid var(--td-border-level-2-color); background-color: var(--td-bg-color-container); -webkit-transition: border 0.2s cubic-bezier(0, 0, 0.15, 1); transition: border 0.2s cubic-bezier(0, 0, 0.15, 1); } .oneid-radio__input::after { content: ""; position: absolute; top: 50%; left: 50%; width: 16px; height: 16px; margin-top: -8px; margin-left: -8px; -webkit-transform: scale(0.5); transform: scale(0.5); opacity: 0; border-radius: var(--td-radius-circle); background-color: var(--td-brand-color); -webkit-transition: all 0.2s cubic-bezier(0, 0, 0.15, 1); transition: all 0.2s cubic-bezier(0, 0, 0.15, 1); } .oneid-radio__label { display: inline-block; margin-left: var(--td-comp-margin-s); color: var(--td-text-color-primary); vertical-align: middle; font: var(--td-font-body-medium); white-space: nowrap; } .oneid-radio:hover .oneid-radio__input { border-color: var(--td-brand-color); } .oneid-radio.oneid-is-checked .oneid-radio__input { border-color: var(--td-brand-color); } .oneid-radio.oneid-is-checked .oneid-radio__input::after { opacity: 1; } .oneid-radio.oneid-is-disabled { cursor: not-allowed; } .oneid-radio.oneid-is-disabled .oneid-radio__label { color: var(--td-text-color-disabled); } .oneid-radio.oneid-is-disabled .oneid-radio__input { background-color: var(--td-bg-color-component-disabled); } .oneid-radio.oneid-is-disabled:hover .oneid-radio__input { border-color: var(--td-border-level-2-color); } .oneid-radio.oneid-is-disabled.oneid-is-checked .oneid-radio__input { border-color: var(--td-border-level-2-color); } .oneid-radio.oneid-is-disabled.oneid-is-checked .oneid-radio__input::after { background-color: var(--td-text-color-disabled); } .oneid-radio:focus-visible:focus-visible { outline: 2px solid var(--td-brand-color); outline-offset: var(--td-comp-paddingTB-xs); border-radius: 0; } .oneid-checkbox-group { font: var(--td-font-body-medium); color: var(--td-text-color-primary); -webkit-box-sizing: border-box; box-sizing: border-box; margin: 0; padding: 0; list-style: none; display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -ms-flex-wrap: wrap; flex-wrap: wrap; gap: 16px; } .oneid-checkbox { font: var(--td-font-body-medium); -webkit-box-sizing: border-box; box-sizing: border-box; margin: 0; padding: 0; list-style: none; display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; position: relative; cursor: pointer; color: var(--td-text-color-primary); } .oneid-checkbox + .oneid-checkbox { margin-left: inherit; } .oneid-checkbox__former { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; outline: 0; -webkit-appearance: none; -moz-appearance: none; appearance: none; } .oneid-checkbox__input { position: relative; display: inline-block; width: 16px; height: 16px; vertical-align: middle; border: 1px solid var(--td-border-level-2-color); border-radius: var(--td-radius-default); background-color: var(--td-bg-color-container); -webkit-box-sizing: border-box; box-sizing: border-box; -ms-flex-negative: 0; flex-shrink: 0; } .oneid-checkbox__input::after { content: ""; position: absolute; opacity: 0; -webkit-box-sizing: border-box; box-sizing: border-box; } .oneid-checkbox__label { display: inline-block; margin-left: 8px; vertical-align: middle; font: var(--td-font-body-medium); } .oneid-checkbox:hover .oneid-checkbox__input { border-color: var(--td-brand-color); -webkit-transition: border-color 0.2s linear; transition: border-color 0.2s linear; } .oneid-checkbox.oneid-is-checked .oneid-checkbox__input { border-color: var(--td-brand-color); background-color: var(--td-brand-color); -webkit-transition: background-color 0.2s cubic-bezier(0.82, 0, 1, 0.9); transition: background-color 0.2s cubic-bezier(0.82, 0, 1, 0.9); } .oneid-checkbox.oneid-is-checked .oneid-checkbox__input::after { opacity: 1; top: 6px; left: 3px; width: 5px; height: 9px; border: 2px solid var(--td-text-color-anti); border-radius: 0 0 1px; border-top: 0; border-left: 0; -webkit-transform: rotate(45deg) scale(1) translate(-50%, -50%); transform: rotate(45deg) scale(1) translate(-50%, -50%); background: transparent; } .oneid-checkbox.oneid-is-indeterminate .oneid-checkbox__input { border-color: var(--td-brand-color); background-color: var(--td-brand-color); -webkit-transition: background-color 0.2s cubic-bezier(0.82, 0, 1, 0.9); transition: background-color 0.2s cubic-bezier(0.82, 0, 1, 0.9); } .oneid-checkbox.oneid-is-indeterminate .oneid-checkbox__input::after { opacity: 1; width: 16px; height: 4px; left: -1px; right: 0; top: 5px; border: unset; -webkit-transform: scale(0.5); transform: scale(0.5); background-color: var(--td-font-white-1); } .oneid-checkbox.oneid-is-disabled { cursor: not-allowed; } .oneid-checkbox.oneid-is-disabled .oneid-checkbox__label { color: var(--td-text-color-disabled); } .oneid-checkbox.oneid-is-disabled .oneid-checkbox__input { background-color: var(--td-bg-color-component-disabled); } .oneid-checkbox.oneid-is-disabled:hover .oneid-checkbox__input { border-color: var(--td-border-level-2-color); } .oneid-checkbox.oneid-is-disabled.oneid-is-checked .oneid-checkbox__input { border-color: var(--td-border-level-2-color); } .oneid-checkbox.oneid-is-disabled.oneid-is-checked .oneid-checkbox__input::after { border-color: var(--td-text-color-disabled); } .oneid-checkbox.oneid-is-disabled.oneid-is-indeterminate .oneid-checkbox__input { border-color: var(--td-border-level-2-color); } .oneid-checkbox.oneid-is-disabled.oneid-is-indeterminate .oneid-checkbox__input::after { background-color: var(--td-text-color-disabled); } .oneid-checkbox:focus-visible:focus-visible { outline: 2px solid var(--td-brand-color); outline-offset: var(--td-comp-paddingTB-xs); border-radius: 0; } @-webkit-keyframes t-fade-in { from { opacity: 0; } to { opacity: 1; } } @keyframes t-fade-in { from { opacity: 0; } to { opacity: 1; } } @-webkit-keyframes t-fade-out { from { opacity: 1; } to { opacity: 0; } } @keyframes t-fade-out { from { opacity: 1; } to { opacity: 0; } } @-webkit-keyframes t-spin { from { -webkit-transform: rotate(0deg); transform: rotate(0deg); } to { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @keyframes t-spin { from { -webkit-transform: rotate(0deg); transform: rotate(0deg); } to { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } .oneid-icon-loading { -webkit-animation: t-spin 1s linear infinite; animation: t-spin 1s linear infinite; } @-webkit-keyframes t-zoom-out { from { -webkit-transform: scale(0.2); transform: scale(0.2); } to { -webkit-transform: scale(1); transform: scale(1); } } @keyframes t-zoom-out { from { -webkit-transform: scale(0.2); transform: scale(0.2); } to { -webkit-transform: scale(1); transform: scale(1); } } .oneid-input-number { font: var(--td-font-body-medium); color: var(--td-text-color-primary); margin: 0; padding: 0; list-style: none; display: inline-block; position: relative; -webkit-box-sizing: border-box; box-sizing: border-box; padding: 0 var(--td-comp-size-m); -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; width: 144px; } .oneid-input-number:not(.oneid-input-number--column) > .oneid-input-number__decrease + .oneid-input__wrap { margin-left: var(--td-comp-margin-xs); } .oneid-input-number input::-webkit-outer-spin-button, .oneid-input-number input::-webkit-inner-spin-button { -webkit-appearance: none; appearance: none; } .oneid-input-number input[type=number] { -webkit-appearance: textfield; -moz-appearance: textfield; appearance: textfield; } .oneid-input-number > .oneid-input__tips { position: absolute; left: 0; } .oneid-input-number input + .oneid-input__suffix { margin-left: var(--td-comp-paddingLR-s); } .oneid-input-number .oneid-input__prefix { margin-right: var(--td-comp-paddingLR-s); } .oneid-input-number .oneid-input { color: var(--td-text-color-primary); } .oneid-input-number.oneid-input-number--auto-width { width: auto; } .oneid-input-number.oneid-input-number--auto-width.oneid-is-controls-right { min-width: auto; width: auto; } .oneid-input-number.oneid-input-number--auto-width .oneid-input__inner { min-width: 42px; } .oneid-input-number .oneid-input-number__decrease, .oneid-input-number .oneid-input-number__increase { width: var(--td-comp-size-m); height: var(--td-comp-size-m); position: absolute; top: 0; border: 1px solid var(--td-border-level-2-color); -webkit-box-sizing: border-box; box-sizing: border-box; border-radius: var(--td-radius-default); background-color: transparent; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; z-index: 1; cursor: pointer; -webkit-transition: all cubic-bezier(0.38, 0, 0.24, 1) 0.2s; transition: all cubic-bezier(0.38, 0, 0.24, 1) 0.2s; } .oneid-input-number .oneid-input-number__decrease:hover, .oneid-input-number .oneid-input-number__increase:hover { color: var(--td-brand-color); border-color: var(--td-brand-color); } .oneid-input-number .oneid-input-number__decrease:hover .oneid-icon, .oneid-input-number .oneid-input-number__increase:hover .oneid-icon { color: var(--td-brand-color); } .oneid-input-number .oneid-input-number__decrease:active, .oneid-input-number .oneid-input-number__increase:active { color: var(--td-brand-color); background-color: var(--td-bg-color-container-hover); } .oneid-input-number .oneid-input-number__decrease .oneid-icon, .oneid-input-number .oneid-input-number__increase .oneid-icon { position: relative; z-index: 1; font-size: var(--td-font-size-body-large); color: var(--td-text-color-secondary); } .oneid-input-number .oneid-input-number__decrease.oneid-is-disabled, .oneid-input-number .oneid-input-number__increase.oneid-is-disabled { color: var(--td-text-color-disabled); cursor: no-drop; background-color: var(--td-bg-color-component-disabled); } .oneid-input-number .oneid-input-number__decrease.oneid-is-disabled .oneid-icon, .oneid-input-number .oneid-input-number__increase.oneid-is-disabled .oneid-icon { color: var(--td-text-color-disabled); } .oneid-input-number .oneid-input-number__decrease.oneid-is-disabled:hover, .oneid-input-number .oneid-input-number__increase.oneid-is-disabled:hover { border-color: var(--td-border-level-2-color); } .oneid-input-number .oneid-input-number__decrease.oneid-is-disabled:hover .oneid-icon, .oneid-input-number .oneid-input-number__increase.oneid-is-disabled:hover .oneid-icon { color: var(--td-text-color-disabled); } .oneid-input-number .oneid-input-number__decrease.oneid-is-disabled::-webkit-input-placeholder, .oneid-input-number .oneid-input-number__increase.oneid-is-disabled::-webkit-input-placeholder { color: var(--td-text-color-disabled); } .oneid-input-number .oneid-input-number__decrease.oneid-is-disabled::-moz-placeholder, .oneid-input-number .oneid-input-number__increase.oneid-is-disabled::-moz-placeholder { color: var(--td-text-color-disabled); } .oneid-input-number .oneid-input-number__decrease.oneid-is-disabled:-ms-input-placeholder, .oneid-input-number .oneid-input-number__increase.oneid-is-disabled:-ms-input-placeholder { color: var(--td-text-color-disabled); } .oneid-input-number .oneid-input-number__decrease.oneid-is-disabled::-ms-input-placeholder, .oneid-input-number .oneid-input-number__increase.oneid-is-disabled::-ms-input-placeholder { color: var(--td-text-color-disabled); } .oneid-input-number .oneid-input-number__decrease.oneid-is-disabled::placeholder, .oneid-input-number .oneid-input-number__increase.oneid-is-disabled::placeholder { color: var(--td-text-color-disabled); } .oneid-input-number .oneid-input-number__decrease { left: 0; } .oneid-input-number .oneid-input-number__increase { right: -8px; } .oneid-input-number.oneid-is-disabled .oneid-input { cursor: no-drop; background-color: var(--td-bg-color-component-disabled); color: var(--td-text-color-disabled); } .oneid-input-number.oneid-is-disabled .oneid-input:hover, .oneid-input-number.oneid-is-disabled .oneid-input:focus, .oneid-input-number.oneid-is-disabled .oneid-input:active { border-color: var(--td-border-level-2-color); } .oneid-input-number.oneid-is-disabled .oneid-input-number__decrease, .oneid-input-number.oneid-is-disabled .oneid-input-number__increase { color: var(--td-text-color-disabled); cursor: no-drop; background-color: var(--td-bg-color-component-disabled); } .oneid-input-number.oneid-is-disabled .oneid-input-number__decrease .oneid-icon, .oneid-input-number.oneid-is-disabled .oneid-input-number__increase .oneid-icon { color: var(--td-text-color-secondary); } .oneid-input-number.oneid-size-s { width: 120px; padding: 0 var(--td-comp-size-xs); } .oneid-input-number.oneid-size-s .oneid-input { font-size: var(--td-font-size-body-small); height: var(--td-comp-size-xs); line-height: var(--td-comp-size-xs); } .oneid-input-number.oneid-size-s .oneid-input-number__decrease, .oneid-input-number.oneid-size-s .oneid-input-number__increase { font-size: var(--td-font-size-body-medium); width: var(--td-comp-size-xs); height: var(--td-comp-size-xs); } .oneid-input-number.oneid-size-l { width: 168px; padding: 0 var(--td-comp-size-xl); } .oneid-input-number.oneid-size-l .oneid-input { height: var(--td-comp-size-xl); line-height: var(--td-comp-size-xl); } .oneid-input-number.oneid-size-l .oneid-input-number__decrease, .oneid-input-number.oneid-size-l .oneid-input-number__increase { font-size: 18px; width: var(--td-comp-size-xl); height: var(--td-comp-size-xl); } .oneid-input-number.oneid-size-l.oneid-is-controls-right .oneid-input { height: var(--td-comp-size-xl); line-height: var(--td-comp-size-xl); padding-right: calc(var(--td-comp-size-xl) + var(--td-comp-paddingLR-s)); } .oneid-input-number.oneid-size-l.oneid-is-controls-right .oneid-input-number__decrease, .oneid-input-number.oneid-size-l.oneid-is-controls-right .oneid-input-number__increase { width: var(--td-comp-size-xl); font-size: var(--td-font-size-body-large); } .oneid-input-number.oneid-size-l .oneid-input--prefix { font: var(--td-font-body-large); padding: 0 var(--td-comp-paddingLR-m); } .oneid-input-number.oneid-input-number--normal { padding: 0; border-radius: var(--td-radius-default); } .oneid-input-number.oneid-input-number--normal.oneid-is-disabled { cursor: no-drop; color: var(--td-text-color-disabled); } .oneid-input-number.oneid-input-number--normal.oneid-is-disabled:hover .oneid-input { border-color: var(--td-border-level-2-color); } .oneid-input-number.oneid-input-number--normal.oneid-is-disabled::-webkit-input-placeholder { color: var(--td-text-color-disabled); } .oneid-input-number.oneid-input-number--normal.oneid-is-disabled::-moz-placeholder { color: var(--td-text-color-disabled); } .oneid-input-number.oneid-input-number--normal.oneid-is-disabled:-ms-input-placeholder { color: var(--td-text-color-disabled); } .oneid-input-number.oneid-input-number--normal.oneid-is-disabled::-ms-input-placeholder { color: var(--td-text-color-disabled); } .oneid-input-number.oneid-input-number--normal.oneid-is-disabled::placeholder { color: var(--td-text-color-disabled); } .oneid-input-number.oneid-input-number--normal.oneid-is-disabled .oneid-input:focus { -webkit-box-shadow: none; box-shadow: none; } .oneid-input-number.oneid-is-controls-right { width: 96px; padding: 0; } .oneid-input-number.oneid-is-controls-right:hover .oneid-input-number__decrease, .oneid-input-number.oneid-is-controls-right:hover .oneid-input-number__increase { opacity: 1; visibility: visible; } .oneid-input-number.oneid-is-controls-right .oneid-input { width: 100%; -webkit-box-sizing: border-box; box-sizing: border-box; margin: 0; padding-right: calc(var(--td-comp-size-m) + var(--td-comp-paddingLR-s)); border-radius: var(--td-radius-default); } .oneid-input-number.oneid-is-controls-right .oneid-input-number__decrease, .oneid-input-number.oneid-is-controls-right .oneid-input-number__increase { width: var(--td-comp-size-m); height: calc(var(--td-comp-size-m) / 2 - 2px); border: 0; left: initial; top: initial; right: 1px; border-radius: 0; background: var(--td-bg-color-secondarycontainer); opacity: 0; visibility: hidden; z-index: 2; } .oneid-input-number.oneid-is-controls-right .oneid-input-number__decrease .oneid-icon, .oneid-input-number.oneid-is-controls-right .oneid-input-number__increase .oneid-icon { font-size: var(--td-font-size-body-small); } .oneid-input-number.oneid-is-controls-right .oneid-input-number__decrease:hover, .oneid-input-number.oneid-is-controls-right .oneid-input-number__increase:hover { background: var(--td-bg-color-component-hover); } .oneid-input-number.oneid-is-controls-right .oneid-input-number__decrease:hover .oneid-icon, .oneid-input-number.oneid-is-controls-right .oneid-input-number__increase:hover .oneid-icon { color: var(--td-text-color-primary); } .oneid-input-number.oneid-is-controls-right .oneid-input-number__decrease.oneid-is-disabled, .oneid-input-number.oneid-is-controls-right .oneid-input-number__increase.oneid-is-disabled { color: var(--td-text-color-disabled); cursor: no-drop; background-color: var(--td-bg-color-component-disabled); } .oneid-input-number.oneid-is-controls-right .oneid-input-number__decrease.oneid-is-disabled .oneid-icon, .oneid-input-number.oneid-is-controls-right .oneid-input-number__increase.oneid-is-disabled .oneid-icon { color: var(--td-text-color-disabled); } .oneid-input-number.oneid-is-controls-right .oneid-input-number__decrease.oneid-is-disabled:hover, .oneid-input-number.oneid-is-controls-right .oneid-input-number__increase.oneid-is-disabled:hover { border-color: var(--td-border-level-2-color); } .oneid-input-number.oneid-is-controls-right .oneid-input-number__decrease.oneid-is-disabled:hover .oneid-icon, .oneid-input-number.oneid-is-controls-right .oneid-input-number__increase.oneid-is-disabled:hover .oneid-icon { color: var(--td-text-color-disabled); } .oneid-input-number.oneid-is-controls-right .oneid-input-number__decrease.oneid-is-disabled::-webkit-input-placeholder, .oneid-input-number.oneid-is-controls-right .oneid-input-number__increase.oneid-is-disabled::-webkit-input-placeholder { color: var(--td-text-color-disabled); } .oneid-input-number.oneid-is-controls-right .oneid-input-number__decrease.oneid-is-disabled::-moz-placeholder, .oneid-input-number.oneid-is-controls-right .oneid-input-number__increase.oneid-is-disabled::-moz-placeholder { color: var(--td-text-color-disabled); } .oneid-input-number.oneid-is-controls-right .oneid-input-number__decrease.oneid-is-disabled:-ms-input-placeholder, .oneid-input-number.oneid-is-controls-right .oneid-input-number__increase.oneid-is-disabled:-ms-input-placeholder { color: var(--td-text-color-disabled); } .oneid-input-number.oneid-is-controls-right .oneid-input-number__decrease.oneid-is-disabled::-ms-input-placeholder, .oneid-input-number.oneid-is-controls-right .oneid-input-number__increase.oneid-is-disabled::-ms-input-placeholder { color: var(--td-text-color-disabled); } .oneid-input-number.oneid-is-controls-right .oneid-input-number__decrease.oneid-is-disabled::placeholder, .oneid-input-number.oneid-is-controls-right .oneid-input-number__increase.oneid-is-disabled::placeholder { color: var(--td-text-color-disabled); } .oneid-input-number.oneid-is-controls-right .oneid-input-number__increase { top: 1px; border-top-right-radius: calc(var(--td-radius-default) - 1px); } .oneid-input-number.oneid-is-controls-right .oneid-input-number__decrease { top: calc(var(--td-comp-size-m) / 2 - 2px + 3px); border-bottom-right-radius: calc(var(--td-radius-default) - 1px); } .oneid-input-number.oneid-is-controls-right.oneid-size-l { width: 120px; } .oneid-input-number.oneid-is-controls-right.oneid-size-l .oneid-input-number__increase, .oneid-input-number.oneid-is-controls-right.oneid-size-l .oneid-input-number__decrease { height: calc(var(--td-comp-size-xl) / 2 - 2px); } .oneid-input-number.oneid-is-controls-right.oneid-size-l .oneid-input-number__decrease { top: calc(var(--td-comp-size-xl) / 2 - 2px + 3px); } .oneid-input-number.oneid-is-controls-right.oneid-size-s { width: 88px; } .oneid-input-number.oneid-is-controls-right.oneid-size-s .oneid-input-number__increase, .oneid-input-number.oneid-is-controls-right.oneid-size-s .oneid-input-number__decrease { height: calc(var(--td-comp-size-xs) / 2 - 2px); } .oneid-input-number.oneid-is-controls-right.oneid-size-s .oneid-input-number__decrease { top: calc(var(--td-comp-size-xs) / 2 - 2px + 3px); } .oneid-input-number--row .oneid-input__wrap { width: initial; margin-right: var(--td-comp-margin-xs); } .oneid-input-number--row .oneid-input-number__increase { right: 0; } .default-step-icon { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; width: 22px; height: 22px; text-align: center; border-radius: var(--td-radius-circle); font-size: var(--td-font-size-body-large); } .oneid-steps { font: var(--td-font-body-medium); color: var(--td-text-color-primary); -webkit-box-sizing: border-box; box-sizing: border-box; margin: 0; padding: 0; list-style: none; display: -webkit-box; display: -ms-flexbox; display: flex; width: 100%; } .oneid-steps .oneid-steps-item { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; overflow: hidden; vertical-align: top; margin-right: var(--td-comp-margin-s); position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; } .oneid-steps .oneid-steps-item:last-child { -webkit-box-flex: 0; -ms-flex: none; flex: none; } .oneid-steps .oneid-steps-item__inner { width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; } .oneid-steps .oneid-steps-item__inner.oneid-steps-item--clickable { cursor: pointer; } .oneid-steps .oneid-steps-item--finish .oneid-steps-item__icon .oneid-icon { color: var(--td-brand-color); } .oneid-steps .oneid-steps-item--finish .oneid-steps-item__icon--number { border-color: var(--td-brand-color); } .oneid-steps .oneid-steps-item--finish .oneid-steps-item__title { color: var(--td-text-color-primary); font-weight: normal; } .oneid-steps .oneid-steps-item--finish .oneid-steps-item__description { color: var(--td-text-color-secondary); } .oneid-steps .oneid-steps-item--process .oneid-steps-item__icon .oneid-icon { color: var(--td-brand-color); } .oneid-steps .oneid-steps-item--process .oneid-steps-item__icon--number { border-color: var(--td-brand-color); background-color: var(--td-brand-color); color: var(--td-text-color-anti); font-weight: bold; } .oneid-steps .oneid-steps-item--process .oneid-steps-item__title { color: var(--td-brand-color); font-weight: bold; } .oneid-steps .oneid-steps-item--process .oneid-steps-item__description { color: var(--td-text-color-secondary); } .oneid-steps .oneid-steps-item--error .oneid-steps-item__icon .oneid-icon { color: var(--td-error-color); } .oneid-steps .oneid-steps-item--error .oneid-steps-item__icon--number { color: var(--td-error-color); border-color: var(--td-error-color); } .oneid-steps .oneid-steps-item--error .oneid-steps-item__title { color: var(--td-error-color); } .oneid-steps .oneid-steps-item--error .oneid-steps-item__description { color: var(--td-text-color-secondary); } .oneid-steps .oneid-steps-item__icon { vertical-align: top; font-size: var(--td-font-size-body-medium); margin-right: var(--td-comp-margin-s); color: var(--td-text-color-placeholder); } .oneid-steps .oneid-steps-item__icon--number { color: var(--td-text-color-placeholder); border: 1px solid var(--td-text-color-placeholder); display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; width: 22px; height: 22px; text-align: center; border-radius: var(--td-radius-circle); font-size: var(--td-font-size-body-large); } .oneid-steps .oneid-steps-item__icon--finish { border: 1px solid var(--td-brand-color); display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; width: 22px; height: 22px; text-align: center; border-radius: var(--td-radius-circle); font-size: var(--td-font-size-body-large); } .oneid-steps .oneid-steps-item__icon--error { border: 1px solid var(--td-error-color); color: #000; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; width: 22px; height: 22px; text-align: center; border-radius: var(--td-radius-circle); font-size: var(--td-font-size-body-large); } .oneid-steps .oneid-steps-item__icon > .oneid-icon { font-size: calc(var(--td-font-size-body-medium) + 10px); } .oneid-steps .oneid-steps-item__title { position: relative; padding-right: var(--td-comp-margin-s); color: var(--td-text-color-placeholder); font-size: var(--td-font-size-body-large); line-height: 24px; } .oneid-steps .oneid-steps-item__description { color: var(--td-text-color-placeholder); font-size: var(--td-font-size-body-medium); margin-bottom: var(--td-comp-margin-xs); line-height: 22px; } .oneid-steps--line-separator .oneid-steps-item:before, .oneid-steps--line-separator .oneid-steps-item:after, .oneid-steps--line-separator .oneid-steps-item__title:after { border-style: solid; } .oneid-steps--dashed-separator .oneid-steps-item:before, .oneid-steps--dashed-separator .oneid-steps-item:after, .oneid-steps--dashed-separator .oneid-steps-item__title:after { border-style: dashed; } .oneid-steps--horizontal.oneid-steps--default-anchor .oneid-steps-item__title { width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; margin-bottom: var(--td-comp-margin-xs); } .oneid-steps--horizontal.oneid-steps--default-anchor .oneid-steps-item__icon__number { width: 22px; height: 22px; } .oneid-steps--horizontal.oneid-steps--default-anchor .oneid-steps-item__icon > .oneid-icon { font-size: calc(var(--td-font-size-body-medium) + 10px); } .oneid-steps--horizontal.oneid-steps--default-anchor .oneid-steps-item:not(:last-child) .oneid-steps-item__title:after { content: ""; display: block; width: 9999px; border-left: 0; border-top: 0; border-bottom-width: 1px; border-bottom-color: var(--td-text-color-placeholder); position: absolute; left: 100%; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); } .oneid-steps--horizontal.oneid-steps--default-anchor.oneid-steps--arrow-separator .oneid-steps-item:not(:last-child):after { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; height: 24px; content: "^"; -webkit-transform: rotateZ(90deg); transform: rotateZ(90deg); display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: end; -ms-flex-align: end; align-items: flex-end; border: 0; font-size: var(--td-font-size-body-large); color: var(--td-text-color-placeholder); } .oneid-steps--horizontal.oneid-steps--default-anchor.oneid-steps--arrow-separator .oneid-steps-item--finish:not(:last-child)::after { color: var(--td-brand-color); } .oneid-steps--horizontal.oneid-steps--default-anchor .oneid-steps-item--finish:not(:last-child) .oneid-steps-item__title:after { border-bottom-width: 2px; border-bottom-color: var(--td-brand-color); color: var(--td-brand-color); } .oneid-steps--horizontal.oneid-steps--default-anchor.oneid-steps--reverse .oneid-steps-item:not(:last-child) .oneid-steps-item__title:after { content: ""; display: block; width: 9999px; border-left: 0; border-top: 0; border-bottom-width: 1px; border-bottom-color: var(--td-text-color-placeholder); position: absolute; left: 100%; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); } .oneid-steps--horizontal.oneid-steps--default-anchor.oneid-steps--reverse.oneid-steps--arrow-separator .oneid-steps-item:not(:last-child):after { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; height: 24px; content: "^"; -webkit-transform: rotateZ(90deg); transform: rotateZ(90deg); display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: end; -ms-flex-align: end; align-items: flex-end; border: 0; font-size: var(--td-font-size-body-large); color: var(--td-text-color-placeholder); } .oneid-steps--horizontal.oneid-steps--default-anchor.oneid-steps--reverse.oneid-steps--arrow-separator .oneid-steps-item--finish:not(:last-child)::after { color: var(--td-brand-color); } .oneid-steps--horizontal.oneid-steps--default-anchor.oneid-steps--reverse.oneid-steps--arrow-separator .oneid-steps-item:not(:last-child):after { -webkit-transform: rotateZ(-90deg); transform: rotateZ(-90deg); } .oneid-steps--horizontal.oneid-steps--default-anchor.oneid-steps--reverse.oneid-steps--arrow-separator .oneid-steps-item--process:not(:last-child)::after, .oneid-steps--horizontal.oneid-steps--default-anchor.oneid-steps--reverse.oneid-steps--arrow-separator .oneid-steps-item--finish:not(:last-child)::after { color: var(--td-brand-color); } .oneid-steps--horizontal.oneid-steps--default-anchor.oneid-steps--reverse .oneid-steps-item--finish:not(:last-child) .oneid-steps-item__title:after { border-bottom-width: 2px; border-bottom-color: var(--td-brand-color); color: var(--td-brand-color); } .oneid-steps--horizontal.oneid-steps--default-anchor.oneid-steps--reverse .oneid-steps-item--process:not(:last-child) .oneid-steps-item__title:after, .oneid-steps--horizontal.oneid-steps--default-anchor.oneid-steps--reverse .oneid-steps-item--finish:not(:last-child) .oneid-steps-item__title:after { border-bottom-width: 2px; border-bottom-color: var(--td-brand-color); color: var(--td-brand-color); } .oneid-steps--horizontal.oneid-steps--dot-anchor .oneid-steps-item { overflow: visible; } .oneid-steps--horizontal.oneid-steps--dot-anchor .oneid-steps-item .oneid-steps-item__title { padding-right: 0; margin-bottom: var(--td-comp-margin-xs); } .oneid-steps--horizontal.oneid-steps--dot-anchor .oneid-steps-item--finish .oneid-steps-item__icon { border-color: var(--td-brand-color); } .oneid-steps--horizontal.oneid-steps--dot-anchor .oneid-steps-item--process .oneid-steps-item__icon { background: var(--td-brand-color); border-color: var(--td-brand-color); } .oneid-steps--horizontal.oneid-steps--dot-anchor .oneid-steps-item--error .oneid-steps-item__icon { background: var(--td-error-color); border-color: var(--td-error-color); } .oneid-steps--horizontal.oneid-steps--dot-anchor .oneid-steps-item__inner { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .oneid-steps--horizontal.oneid-steps--dot-anchor .oneid-steps-item__icon { display: block; width: 8px; height: 8px; border: 2px solid var(--td-text-color-placeholder); border-radius: var(--td-radius-circle); margin-bottom: var(--td-comp-margin-xs); position: relative; -webkit-box-sizing: border-box; box-sizing: border-box; -ms-flex-negative: 0; flex-shrink: 0; } .oneid-steps--horizontal.oneid-steps--dot-anchor .oneid-steps-item__content { text-align: center; width: 140px; } .oneid-steps--horizontal.oneid-steps--dot-anchor.oneid-steps--arrow-separator .oneid-steps-item:not(:last-child)::after { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; content: "^"; display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; border: 0; font-size: var(--td-font-size-body-large); -webkit-transform: rotateZ(90deg); transform: rotateZ(90deg); color: var(--td-text-color-placeholder); } .oneid-steps--horizontal.oneid-steps--dot-anchor.oneid-steps--arrow-separator .oneid-steps-item--finish:not(:last-child)::after { color: var(--td-brand-color); } .oneid-steps--horizontal.oneid-steps--dot-anchor .oneid-steps-item:not(:last-child)::after { content: ""; display: block; width: calc(100% - 16px); border-left: 0; border-top: 0; border-bottom-width: 1px; border-bottom-color: var(--td-text-color-placeholder); position: absolute; left: 78px; top: 2.5px; } .oneid-steps--horizontal.oneid-steps--dot-anchor .oneid-steps-item:not(:last-child):not(.oneid-steps-item--finish)::after { border-color: var(--td-text-color-placeholder); } .oneid-steps--horizontal.oneid-steps--dot-anchor .oneid-steps-item--finish:not(:last-child)::after { color: var(--td-brand-color); border-bottom-color: var(--td-brand-color); border-bottom-width: 2px; } .oneid-steps--horizontal.oneid-steps--dot-anchor.oneid-steps--reverse.oneid-steps--arrow-separator .oneid-steps-item:not(:last-child)::after { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; content: "^"; display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; border: 0; font-size: var(--td-font-size-body-large); -webkit-transform: rotateZ(90deg); transform: rotateZ(90deg); color: var(--td-text-color-placeholder); } .oneid-steps--horizontal.oneid-steps--dot-anchor.oneid-steps--reverse.oneid-steps--arrow-separator .oneid-steps-item--finish:not(:last-child)::after { color: var(--td-brand-color); } .oneid-steps--horizontal.oneid-steps--dot-anchor.oneid-steps--reverse.oneid-steps--arrow-separator .oneid-steps-item:not(:last-child)::after { -webkit-transform: rotateZ(-90deg); transform: rotateZ(-90deg); } .oneid-steps--horizontal.oneid-steps--dot-anchor.oneid-steps--reverse.oneid-steps--arrow-separator .oneid-steps-item--process:not(:last-child)::after, .oneid-steps--horizontal.oneid-steps--dot-anchor.oneid-steps--reverse.oneid-steps--arrow-separator .oneid-steps-item--finish:not(:last-child)::after { color: var(--td-brand-color); } .oneid-steps--horizontal.oneid-steps--dot-anchor.oneid-steps--reverse .oneid-steps-item:not(:last-child)::after { content: ""; display: block; width: calc(100% - 16px); border-left: 0; border-top: 0; border-bottom-width: 1px; border-bottom-color: var(--td-text-color-placeholder); position: absolute; left: 78px; top: 2.5px; } .oneid-steps--horizontal.oneid-steps--dot-anchor.oneid-steps--reverse .oneid-steps-item:not(:last-child):not(.oneid-steps-item--finish)::after { border-color: var(--td-text-color-placeholder); } .oneid-steps--horizontal.oneid-steps--dot-anchor.oneid-steps--reverse .oneid-steps-item--finish:not(:last-child)::after { color: var(--td-brand-color); border-bottom-color: var(--td-brand-color); border-bottom-width: 2px; } .oneid-steps--horizontal.oneid-steps--dot-anchor.oneid-steps--reverse .oneid-steps-item--process:not(:last-child)::after, .oneid-steps--horizontal.oneid-steps--dot-anchor.oneid-steps--reverse .oneid-steps-item--finish:not(:last-child)::after { color: var(--td-brand-color); border-bottom-color: var(--td-brand-color); border-bottom-width: 2px; } .oneid-steps--vertical { width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } .oneid-steps--vertical.oneid-steps--positive.oneid-steps--arrow-separator .oneid-steps-item:not(:last-child)::before { content: "^"; border: 0; height: calc(100% - 24px); position: absolute; top: 24px; left: 6px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; font-size: var(--td-font-size-body-large); -webkit-transform: rotateZ(180deg); transform: rotateZ(180deg); color: var(--td-text-color-placeholder); } .oneid-steps--vertical.oneid-steps--positive.oneid-steps--arrow-separator .oneid-steps-item--finish:not(:last-child)::before { color: var(--td-brand-color); } .oneid-steps--vertical.oneid-steps--positive .oneid-steps-item { padding-bottom: var(--td-comp-margin-xxl); margin-bottom: 5px; } .oneid-steps--vertical.oneid-steps--positive .oneid-steps-item:not(:last-child)::before { content: ""; display: block; height: 100%; border-left: 0; border-top: 0; border-right-width: 1px; border-right-color: var(--td-text-color-placeholder); position: absolute; top: 35px; left: 11px; } .oneid-steps--vertical.oneid-steps--positive .oneid-steps-item--finish:not(:last-child)::before { border-right-width: 2px; border-right-color: var(--td-brand-color); color: var(--td-brand-color); } .oneid-steps--vertical.oneid-steps--default-anchor .oneid-steps-item__content { margin-left: 0px; } .oneid-steps--vertical.oneid-steps--default-anchor .oneid-steps-item__title { margin-bottom: var(--td-comp-margin-xs); } .oneid-steps--vertical.oneid-steps--dot-anchor.oneid-steps--positive.oneid-steps--arrow-separator .oneid-steps-item:not(:last-child)::before { content: "^"; border: 0; height: calc(100% - 4px); position: absolute; top: 8px; left: 0; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; font-size: var(--td-font-size-body-medium); color: var(--td-text-color-placeholder); } .oneid-steps--vertical.oneid-steps--dot-anchor.oneid-steps--positive.oneid-steps--arrow-separator .oneid-steps-item--finish:not(:last-child)::before { color: var(--td-brand-color); } .oneid-steps--vertical.oneid-steps--dot-anchor.oneid-steps--positive .oneid-steps-item:not(:last-child)::before { content: ""; display: block; height: 100%; border-bottom: 0; border-left: 0; border-right-width: 1px; border-right-color: var(--td-text-color-placeholder); position: absolute; left: 3.5px; top: 17px; } .oneid-steps--vertical.oneid-steps--dot-anchor.oneid-steps--positive .oneid-steps-item--finish:not(:last-child)::before { color: var(--td-brand-color); border-right-color: var(--td-brand-color); border-right-width: 2px; } .oneid-steps--vertical.oneid-steps--dot-anchor.oneid-steps--positive .oneid-steps-item:not(:last-child).oneid-steps-item--default::before { border-color: var(--td-text-color-placeholder); } .oneid-steps--vertical.oneid-steps--dot-anchor .oneid-steps-item { margin-bottom: 0; } .oneid-steps--vertical.oneid-steps--dot-anchor .oneid-steps-item .oneid-steps-item__title { margin-bottom: var(--td-comp-margin-xs); } .oneid-steps--vertical.oneid-steps--dot-anchor .oneid-steps-item--finish .oneid-steps-item__icon { border-color: var(--td-brand-color); } .oneid-steps--vertical.oneid-steps--dot-anchor .oneid-steps-item--process .oneid-steps-item__icon { background: var(--td-brand-color); border-color: var(--td-brand-color); } .oneid-steps--vertical.oneid-steps--dot-anchor .oneid-steps-item--error .oneid-steps-item__icon { background: var(--td-error-color); border-color: var(--td-error-color); } .oneid-steps--vertical.oneid-steps--dot-anchor .oneid-steps-item__icon { display: block; width: 8px; height: 8px; border: 2px solid var(--td-text-color-placeholder); border-radius: var(--td-radius-circle); margin-bottom: var(--td-comp-margin-xs); position: relative; -webkit-box-sizing: border-box; box-sizing: border-box; -ms-flex-negative: 0; flex-shrink: 0; top: 8px; } .oneid-steps--vertical.oneid-steps--reverse.oneid-steps--arrow-separator .oneid-steps-item:not(:last-child)::before { content: "^"; border: 0; height: calc(100% - 24px); position: absolute; top: 24px; left: 6px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; font-size: var(--td-font-size-body-large); -webkit-transform: rotateZ(180deg); transform: rotateZ(180deg); color: var(--td-text-color-placeholder); } .oneid-steps--vertical.oneid-steps--reverse.oneid-steps--arrow-separator .oneid-steps-item--finish:not(:last-child)::before { color: var(--td-brand-color); } .oneid-steps--vertical.oneid-steps--reverse.oneid-steps--arrow-separator .oneid-steps-item:not(:last-child)::before { -webkit-transform: rotateZ(0); transform: rotateZ(0); margin-top: var(--td-comp-margin-xs); } .oneid-steps--vertical.oneid-steps--reverse.oneid-steps--arrow-separator .oneid-steps-item--process:not(:last-child)::before, .oneid-steps--vertical.oneid-steps--reverse.oneid-steps--arrow-separator .oneid-steps-item--finish:not(:last-child)::before { color: var(--td-brand-color); } .oneid-steps--vertical.oneid-steps--reverse .oneid-steps-item { padding-bottom: var(--td-comp-margin-xxl); margin-bottom: 5px; } .oneid-steps--vertical.oneid-steps--reverse .oneid-steps-item:not(:last-child)::before { content: ""; display: block; height: 100%; border-left: 0; border-bottom: 0; border-right-width: 1px; border-right-color: var(--td-text-color-placeholder); position: absolute; top: 35px; left: 11px; } .oneid-steps--vertical.oneid-steps--reverse .oneid-steps-item--process:not(:last-child)::before, .oneid-steps--vertical.oneid-steps--reverse .oneid-steps-item--finish:not(:last-child)::before { border-right-width: 2px; border-right-color: var(--td-brand-color); color: var(--td-brand-color); } .oneid-steps--vertical.oneid-steps--reverse.oneid-steps--dot-anchor.oneid-steps--arrow-separator .oneid-steps-item:not(:last-child)::before { content: "^"; border: 0; height: calc(100% - 4px); position: absolute; top: 8px; left: 0; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; font-size: var(--td-font-size-body-medium); color: var(--td-text-color-placeholder); } .oneid-steps--vertical.oneid-steps--reverse.oneid-steps--dot-anchor.oneid-steps--arrow-separator .oneid-steps-item--finish:not(:last-child)::before { color: var(--td-brand-color); } .oneid-steps--vertical.oneid-steps--reverse.oneid-steps--dot-anchor.oneid-steps--arrow-separator .oneid-steps-item--process:not(:last-child)::before, .oneid-steps--vertical.oneid-steps--reverse.oneid-steps--dot-anchor.oneid-steps--arrow-separator .oneid-steps-item--finish:not(:last-child)::before { color: var(--td-brand-color); } .oneid-steps--vertical.oneid-steps--reverse.oneid-steps--dot-anchor .oneid-steps-item { margin-bottom: 0; } .oneid-steps--vertical.oneid-steps--reverse.oneid-steps--dot-anchor .oneid-steps-item:not(:last-child)::before { content: ""; display: block; height: 100%; border-bottom: 0; border-left: 0; border-right-width: 1px; border-right-color: var(--td-text-color-placeholder); position: absolute; left: 3.5px; top: 17px; } .oneid-steps--vertical.oneid-steps--reverse.oneid-steps--dot-anchor .oneid-steps-item:last-child::before { display: none; } .oneid-steps--vertical.oneid-steps--reverse.oneid-steps--dot-anchor .oneid-steps-item--process:not(:last-child)::before, .oneid-steps--vertical.oneid-steps--reverse.oneid-steps--dot-anchor .oneid-steps-item--finish:not(:last-child)::before { border-right-width: 2px; border-right-color: var(--td-brand-color); color: var(--td-brand-color); } .oneid-steps--vertical.oneid-steps--reverse.oneid-steps--dot-anchor .oneid-steps-item:not(:last-child).oneid-steps-item--default::before { border-color: var(--td-text-color-placeholder); } .oneid-sticky-tool { position: fixed; opacity: 1; -webkit-box-sizing: border-box; box-sizing: border-box; background-color: var(--td-bg-color-container); border: 0.5px solid var(--td-component-border); -webkit-box-shadow: var(--td-shadow-3); box-shadow: var(--td-shadow-3); } .oneid-sticky-tool-popup-content { -webkit-box-shadow: var(--td-shadow-3); box-shadow: var(--td-shadow-3); font-size: var(--td-font-size-body-small); color: var(--td-text-color-secondary); } .oneid-sticky-tool .oneid-sticky-item { opacity: 1; position: relative; margin: var(--td-comp-margin-xs); text-align: center; font-size: var(--td-font-size-body-small); color: var(--td-text-color-secondary); -webkit-transition: background-color 0.2s linear; transition: background-color 0.2s linear; } .oneid-sticky-tool .oneid-sticky-item:hover { cursor: pointer; background-color: var(--td-bg-color-container-hover); } .oneid-sticky-tool .oneid-sticky-item--normal { width: var(--td-comp-size-xxxl); height: var(--td-comp-size-xxxl); } .oneid-sticky-tool .oneid-sticky-item--normal .oneid-icon { width: 24px; height: 24px; margin: var(--td-comp-margin-s) var(--td-comp-margin-l) 0 var(--td-comp-margin-l); color: var(--td-text-color-primary); } .oneid-sticky-tool .oneid-sticky-item--compact { width: var(--td-comp-size-xl); height: var(--td-comp-size-xl); } .oneid-sticky-tool .oneid-sticky-item--compact .oneid-icon { width: 24px; height: 24px; margin: var(--td-comp-margin-s); color: var(--td-text-color-primary); } .oneid-sticky-tool .oneid-sticky-item--square { border-radius: var(--td-radius-default); } .oneid-sticky-tool .oneid-sticky-item--round { border-radius: var(--td-radius-circle); } .oneid-sticky-tool .oneid-sticky-item .oneid-sticky-item__label { width: 100%; height: var(--td-comp-size-xxs); line-height: var(--td-comp-size-xxs); margin-top: var(--td-comp-margin-xxs); text-align: center; } .oneid-sticky-tool--square { border-radius: var(--td-radius-medium); } .oneid-sticky-tool--round { border-radius: var(--td-radius-round); } .oneid-message { margin: 0; padding: 0; list-style: none; width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; outline: 0; border-radius: var(--td-radius-medium); background-color: var(--td-bg-color-container); -webkit-box-shadow: var(--td-shadow-3), var(--td-shadow-inset-top), var(--td-shadow-inset-right), var(--td-shadow-inset-bottom), var(--td-shadow-inset-left); box-shadow: var(--td-shadow-3), var(--td-shadow-inset-top), var(--td-shadow-inset-right), var(--td-shadow-inset-bottom), var(--td-shadow-inset-left); -webkit-box-sizing: border-box; box-sizing: border-box; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; color: var(--td-text-color-primary); font: var(--td-font-body-medium); padding: var(--td-comp-paddingTB-m) var(--td-comp-paddingLR-l); } .oneid-message > .oneid-icon, .oneid-message > [data-t-icon] > .oneid-icon, .oneid-message .oneid-loading { color: var(--td-brand-color); margin-right: var(--td-comp-margin-s); -ms-flex-negative: 0; flex-shrink: 0; font-size: calc(var(--td-font-size-body-medium) + 6px); } .oneid-message.oneid-is-success > .oneid-icon, .oneid-message.oneid-is-success > [data-t-icon] > .oneid-icon, .oneid-message.oneid-is-success .oneid-loading { color: var(--td-success-color); } .oneid-message.oneid-is-warning > .oneid-icon, .oneid-message.oneid-is-warning > [data-t-icon] > .oneid-icon, .oneid-message.oneid-is-warning .oneid-loading { color: var(--td-warning-color); } .oneid-message.oneid-is-error > .oneid-icon, .oneid-message.oneid-is-error > [data-t-icon] > .oneid-icon, .oneid-message.oneid-is-error .oneid-loading { color: var(--td-error-color); } .oneid-message.oneid-is-closable .oneid-message__close { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; margin-right: 0; margin-left: var(--td-comp-margin-xxl); cursor: pointer; color: var(--td-text-color-secondary); } .oneid-message.oneid-is-closable .oneid-message__close .oneid-icon-close { font-size: calc(var(--td-font-size-body-medium) + 2px); border-radius: var(--td-radius-default); -webkit-transition: all 0.2s linear; transition: all 0.2s linear; } .oneid-message.oneid-is-closable .oneid-message__close .oneid-icon-close:hover { background: var(--td-bg-color-container-hover); } .oneid-message.oneid-is-closable .oneid-message__close .oneid-icon-close:active { background: var(--td-bg-color-container-active); } .oneid-message__list { position: fixed; z-index: 6000; } .oneid-message__list .oneid-message { margin-bottom: var(--td-comp-margin-s); word-break: break-all; } .oneid-tooltip .oneid-popup__content { display: inline-block; border: 0; z-index: 5600; margin-bottom: 1px; max-width: 480px; word-break: break-word; -webkit-box-sizing: border-box; box-sizing: border-box; border-radius: var(--td-radius-medium); color: var(--td-text-color-primary); } .oneid-tooltip--default .oneid-popup__content { color: var(--td-text-color-anti); background: var(--td-gray-color-13); -webkit-box-shadow: inset 0 0.5px 0 var(--td-gray-color-9), inset 0.5px 0 0 var(--td-gray-color-9), inset 0 -0.5px 0 var(--td-gray-color-9), inset -0.5px 0 0 var(--td-gray-color-9); box-shadow: inset 0 0.5px 0 var(--td-gray-color-9), inset 0.5px 0 0 var(--td-gray-color-9), inset 0 -0.5px 0 var(--td-gray-color-9), inset -0.5px 0 0 var(--td-gray-color-9); } .oneid-tooltip--default[data-popper-placement^=left] .oneid-popup__arrow:before { -webkit-box-shadow: inset -0.5px 0 0 var(--td-gray-color-9), inset 0 0.5px 0 var(--td-gray-color-9); box-shadow: inset -0.5px 0 0 var(--td-gray-color-9), inset 0 0.5px 0 var(--td-gray-color-9); } .oneid-tooltip--default[data-popper-placement^=right] .oneid-popup__arrow:before { -webkit-box-shadow: inset 0.5px 0 0 var(--td-gray-color-9), inset 0 -0.5px 0 var(--td-gray-color-9); box-shadow: inset 0.5px 0 0 var(--td-gray-color-9), inset 0 -0.5px 0 var(--td-gray-color-9); } .oneid-tooltip--default[data-popper-placement^=top] .oneid-popup__arrow:before { -webkit-box-shadow: inset 0 -0.5px 0 var(--td-gray-color-9), inset -0.5px 0 0 var(--td-gray-color-9); box-shadow: inset 0 -0.5px 0 var(--td-gray-color-9), inset -0.5px 0 0 var(--td-gray-color-9); } .oneid-tooltip--default[data-popper-placement^=bottom] .oneid-popup__arrow:before { -webkit-box-shadow: inset 0.5px 0 0 var(--td-gray-color-9), inset 0 0.5px 0 var(--td-gray-color-9); box-shadow: inset 0.5px 0 0 var(--td-gray-color-9), inset 0 0.5px 0 var(--td-gray-color-9); } .oneid-tooltip--primary .oneid-popup__content { color: var(--td-brand-color); background: var(--td-brand-color-light); } .oneid-tooltip--success .oneid-popup__content { color: var(--td-success-color); background: var(--td-success-color-light); } .oneid-tooltip--danger .oneid-popup__content { color: var(--td-error-color); background: var(--td-error-color-light); } .oneid-tooltip--warning .oneid-popup__content { color: var(--td-warning-color); background: var(--td-warning-color-light); } .oneid-tooltip .oneid-popup__arrow { background: inherit; height: auto; } .oneid-tooltip .oneid-popup__arrow::before { background: inherit; } .oneid-tooltip--noshadow .oneid-popup__content, .oneid-tooltip--noshadow[data-popper-placement] .oneid-popup__arrow:before { -webkit-box-shadow: none; box-shadow: none; } .oneid-affix { position: fixed; z-index: 500; } .oneid-tag { font: var(--td-font-body-medium); color: var(--td-text-color-primary); -webkit-box-sizing: border-box; box-sizing: border-box; margin: 0; padding: 0; list-style: none; display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; padding: 0px var(--td-comp-paddingLR-s); height: var(--td-comp-size-xs); font: var(--td-font-body-small); color: var(--td-text-color-anti); border-radius: var(--td-radius-default); border: 1px solid transparent; white-space: nowrap; } .oneid-tag .oneid-icon { margin-right: var(--td-comp-margin-xs); width: calc(var(--td-font-size-body-medium) + 2px); height: calc(var(--td-font-size-body-medium) + 2px); -ms-flex-negative: 0; flex-shrink: 0; } .oneid-tag .oneid-tag__icon-close { margin-right: 0; margin-left: var(--td-comp-margin-s); font: var(--td-font-body-medium); cursor: pointer; -webkit-transition: color 0.2s cubic-bezier(0.38, 0, 0.24, 1); transition: color 0.2s cubic-bezier(0.38, 0, 0.24, 1); } .oneid-tag--default { color: var(--td-text-color-primary); background-color: var(--td-bg-color-component); } .oneid-tag--default .oneid-tag__icon-close { color: var(--td-text-color-placeholder); } .oneid-tag--default .oneid-tag__icon-close:hover { color: var(--td-text-color-primary); } .oneid-tag--default:active { cursor: default; } .oneid-tag--default.oneid-tag--disabled { color: var(--td-text-color-disabled); background-color: var(--td-bg-color-component-disabled); border-color: var(--td-component-border); cursor: not-allowed; } .oneid-tag--default.oneid-tag--disabled:hover { cursor: not-allowed; } .oneid-tag--default.oneid-tag--disabled .oneid-icon:hover { cursor: pointer; } .oneid-tag--default.oneid-tag--outline { border-color: var(--td-component-border); } .oneid-tag--default.oneid-tag--light { background-color: var(--td-bg-color-secondarycontainer); } .oneid-tag--default.oneid-tag--light-outline { border-color: var(--td-component-border); background-color: var(--td-bg-color-secondarycontainer); } .oneid-tag--primary { background-color: var(--td-brand-color); } .oneid-tag--primary.oneid-tag--outline { border-color: var(--td-brand-color); } .oneid-tag--primary.oneid-tag--light { background-color: var(--td-brand-color-light); } .oneid-tag--primary.oneid-tag--light-outline { border-color: var(--td-brand-color); background-color: var(--td-brand-color-light); } .oneid-tag--primary.oneid-tag--light, .oneid-tag--primary.oneid-tag--outline, .oneid-tag--primary.oneid-tag--light-outline { color: var(--td-brand-color); } .oneid-tag--primary.oneid-tag--light .oneid-tag__icon-close:hover, .oneid-tag--primary.oneid-tag--outline .oneid-tag__icon-close:hover, .oneid-tag--primary.oneid-tag--light-outline .oneid-tag__icon-close:hover { color: var(--td-brand-color-hover); } .oneid-tag--success { background-color: var(--td-success-color); } .oneid-tag--success.oneid-tag--outline { border-color: var(--td-success-color); } .oneid-tag--success.oneid-tag--light { background-color: var(--td-success-color-light); } .oneid-tag--success.oneid-tag--light-outline { border-color: var(--td-success-color); background-color: var(--td-success-color-light); } .oneid-tag--success.oneid-tag--light, .oneid-tag--success.oneid-tag--outline, .oneid-tag--success.oneid-tag--light-outline { color: var(--td-success-color); } .oneid-tag--success.oneid-tag--light .oneid-tag__icon-close:hover, .oneid-tag--success.oneid-tag--outline .oneid-tag__icon-close:hover, .oneid-tag--success.oneid-tag--light-outline .oneid-tag__icon-close:hover { color: var(--td-success-color-hover); } .oneid-tag--warning { background-color: var(--td-warning-color); } .oneid-tag--warning.oneid-tag--outline { border-color: var(--td-warning-color); } .oneid-tag--warning.oneid-tag--light { background-color: var(--td-warning-color-light); } .oneid-tag--warning.oneid-tag--light-outline { border-color: var(--td-warning-color); background-color: var(--td-warning-color-light); } .oneid-tag--warning.oneid-tag--light, .oneid-tag--warning.oneid-tag--outline, .oneid-tag--warning.oneid-tag--light-outline { color: var(--td-warning-color); } .oneid-tag--warning.oneid-tag--light .oneid-tag__icon-close:hover, .oneid-tag--warning.oneid-tag--outline .oneid-tag__icon-close:hover, .oneid-tag--warning.oneid-tag--light-outline .oneid-tag__icon-close:hover { color: var(--td-warning-color-hover); } .oneid-tag--danger { background-color: var(--td-error-color); } .oneid-tag--danger.oneid-tag--outline { border-color: var(--td-error-color); } .oneid-tag--danger.oneid-tag--light { background-color: var(--td-error-color-light); } .oneid-tag--danger.oneid-tag--light-outline { border-color: var(--td-error-color); background-color: var(--td-error-color-light); } .oneid-tag--danger .oneid-tag__icon-close { fill: var(--td-error-color); } .oneid-tag--danger .oneid-tag__icon-close:hover { fill: var(--td-error-color-hover); } .oneid-tag--danger.oneid-tag--light, .oneid-tag--danger.oneid-tag--outline, .oneid-tag--danger.oneid-tag--light-outline { color: var(--td-error-color); } .oneid-tag--danger.oneid-tag--light .oneid-tag__icon-close:hover, .oneid-tag--danger.oneid-tag--outline .oneid-tag__icon-close:hover, .oneid-tag--danger.oneid-tag--light-outline .oneid-tag__icon-close:hover { color: var(--td-error-color-hover); } .oneid-tag--dark.oneid-tag:not(.oneid-tag--default) .oneid-tag__icon-close { color: var(--td-font-white-2); } .oneid-tag--dark.oneid-tag:not(.oneid-tag--default) .oneid-tag__icon-close:hover { color: var(--td-font-white-1); } .oneid-tag.oneid-tag--outline { background: transparent; } .oneid-tag.oneid-size-s { padding: 0px var(--td-comp-paddingLR-xs); height: var(--td-comp-size-xxs); font: var(--td-font-body-small); } .oneid-tag.oneid-size-s .oneid-icon { font-size: var(--td-font-body-small); } .oneid-tag.oneid-size-l { padding: 0px var(--td-comp-paddingLR-m); height: var(--td-comp-size-m); font: var(--td-font-body-medium); } .oneid-tag.oneid-size-l .oneid-icon { font: var(--td-font-body-medium); } .oneid-tag.oneid-tag--round { border-radius: var(--td-radius-extraLarge); } .oneid-tag.oneid-tag--mark { border-radius: 0 var(--td-radius-extraLarge) var(--td-radius-extraLarge) 0; } .oneid-tag.oneid-tag--ellipsis .oneid-tag--text { display: inline-block; white-space: nowrap; word-wrap: normal; overflow: hidden; text-overflow: ellipsis; } .oneid-tag.oneid-tag--check:not(.oneid-tag--disabled) { -webkit-transition: background-color 0.2s cubic-bezier(0.38, 0, 0.24, 1); transition: background-color 0.2s cubic-bezier(0.38, 0, 0.24, 1); cursor: pointer; } .oneid-tag.oneid-tag--check:not(.oneid-tag--disabled).oneid-tag--default.oneid-tag--dark:not(.oneid-tag--checked):hover { background-color: var(--td-bg-color-component-hover); } .oneid-tag.oneid-tag--check:not(.oneid-tag--disabled).oneid-tag--primary.oneid-tag--dark.oneid-tag--checked:hover { background-color: var(--td-brand-color-hover); } .oneid-tag.oneid-tag--check:not(.oneid-tag--disabled).oneid-tag--default.oneid-tag--outline:not(.oneid-tag--checked):hover { color: var(--td-brand-color-hover); } .oneid-tag--check.oneid-tag--disabled.oneid-tag--primary.oneid-tag--dark { background-color: var(--td-brand-color-disabled); cursor: not-allowed; } .oneid-tag--check.oneid-tag--disabled.oneid-tag--primary.oneid-tag--outline { color: var(--td-text-color-disabled); background-color: var(--td-bg-color-component-disabled); border-color: var(--td-text-color-disabled); cursor: not-allowed; } .oneid-check-tag-group .oneid-tag:not(:last-child) { margin-right: var(--td-comp-margin-s); } a .oneid-tag { cursor: pointer; -webkit-transition: all 0.2s linear; transition: all 0.2s linear; } a .oneid-tag:hover { color: var(--td-brand-color); background-color: var(--td-bg-color-component-hover); } a .oneid-tag:active { color: var(--td-brand-color-active); background-color: var(--td-bg-color-component-active); } @-webkit-keyframes t-fade-in { from { opacity: 0; } to { opacity: 1; } } @keyframes t-fade-in { from { opacity: 0; } to { opacity: 1; } } @-webkit-keyframes t-fade-out { from { opacity: 1; } to { opacity: 0; } } @keyframes t-fade-out { from { opacity: 1; } to { opacity: 0; } } @-webkit-keyframes t-spin { from { -webkit-transform: rotate(0deg); transform: rotate(0deg); } to { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @keyframes t-spin { from { -webkit-transform: rotate(0deg); transform: rotate(0deg); } to { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } .oneid-icon-loading { -webkit-animation: t-spin 1s linear infinite; animation: t-spin 1s linear infinite; } @-webkit-keyframes t-zoom-out { from { -webkit-transform: scale(0.2); transform: scale(0.2); } to { -webkit-transform: scale(1); transform: scale(1); } } @keyframes t-zoom-out { from { -webkit-transform: scale(0.2); transform: scale(0.2); } to { -webkit-transform: scale(1); transform: scale(1); } } .oneid-tag-input { font: var(--td-font-body-medium); color: var(--td-text-color-primary); -webkit-box-sizing: border-box; box-sizing: border-box; margin: 0; padding: 0; list-style: none; /** 设计稿:未填充标签场景,边距和已填充不同 */ } .oneid-tag-input .oneid-tag { vertical-align: middle; -webkit-animation: t-fade-in 0.2s ease-in-out; animation: t-fade-in 0.2s ease-in-out; margin: 3px var(--td-comp-margin-xs) 3px 0; } .oneid-tag-input .oneid-tag-input__drag_wrapper + .oneid-tag-input__drag_wrapper { margin-left: var(--td-comp-margin-xs); } .oneid-tag-input .oneid-input { overflow: hidden; min-height: var(--td-comp-size-m); height: -webkit-fit-content; height: -moz-fit-content; height: fit-content; padding: 0 var(--td-comp-paddingLR-s) 0 var(--td-comp-margin-xs); } .oneid-tag-input .oneid-input .oneid-input__suffix-icon { right: var(--td-comp-margin-s); } .oneid-tag-input .oneid-input.oneid-size-s { padding: 0 var(--td-comp-paddingLR-s) 0 var(--td-comp-margin-xs); min-height: var(--td-comp-size-xs); } .oneid-tag-input .oneid-input.oneid-size-s .oneid-tag { margin: 1px var(--td-comp-margin-xs) 1px 0; } .oneid-tag-input .oneid-input.oneid-size-l { min-height: var(--td-comp-size-xl); padding: 0 var(--td-comp-paddingLR-m) 0 var(--td-comp-margin-s); } .oneid-tag-input .oneid-input.oneid-size-l .oneid-input__suffix-icon { right: var(--td-comp-margin-m); } .oneid-tag-input.oneid-is-empty .oneid-input__inner { margin-left: var(--td-comp-margin-xs); } .oneid-tag-input:hover .oneid-input__inner:not(.oneid-input--soft-hidden), .oneid-tag-input .oneid-input--focused .oneid-input__inner:not(.oneid-input--soft-hidden) { min-width: 20px; } .oneid-tag-input .oneid-tag-input__prefix { margin-left: var(--td-comp-margin-xs); line-height: 1; } .oneid-tag-input .oneid-tag-input__prefix > .oneid-icon { color: var(--td-text-color-placeholder); } .oneid-tag-input .oneid-input .oneid-input__prefix:not(:empty) { margin-right: 0; } .oneid-tag-input.oneid-input--auto-width .oneid-input.oneid-input--focused { padding-right: calc(var(--td-comp-paddingLR-xxl) + var(--td-comp-paddingLR-xxs)); } .oneid-tag-input.oneid-input--auto-width .oneid-input__prefix { white-space: nowrap; } .oneid-tag-input .oneid-input__prefix--scrollable { overflow-y: hidden; overflow-x: auto; } @-moz-document url-prefix() { .oneid-tag-input .oneid-input__prefix--scrollable { scrollbar-color: var(--td-scrollbar-color) transparent; scrollbar-width: thin; } } .oneid-tag-input .oneid-input__prefix--scrollable::-webkit-scrollbar { width: 6px; height: 6px; } .oneid-tag-input .oneid-input__prefix--scrollable::-webkit-scrollbar-thumb { border: 0px solid transparent; background-clip: content-box; background-color: var(--td-scrollbar-color); border-radius: 11px; } .oneid-tag-input .oneid-input__prefix--scrollable::-webkit-scrollbar-thumb:vertical:hover, .oneid-tag-input .oneid-input__prefix--scrollable::-webkit-scrollbar-thumb:horizontal:hover { background-color: var(--td-scrollbar-hover-color); } .oneid-tag-input__suffix-clear { cursor: pointer; } .oneid-tag-input--break-line:not(.oneid-is-empty) .oneid-input { display: block; } .oneid-tag-input--break-line:not(.oneid-is-empty) .oneid-input.oneid-input--prefix > .oneid-input__prefix { display: inline; text-align: left; } .oneid-tag-input--break-line:not(.oneid-is-empty) .oneid-input .oneid-input__suffix-icon { position: absolute; bottom: 0; } .oneid-tag-input--break-line:not(.oneid-is-empty) .oneid-tag-input__prefix { vertical-align: middle; } .oneid-tag-input__prefix { width: -webkit-max-content; width: -moz-max-content; width: max-content; display: inline-block; margin-right: var(--td-comp-margin-s); } /** 换行模式避免标签和右侧图标重合,需保留图标宽度 22px 和左侧距离标签间距 8px */ .oneid-tag-input--break-line.oneid-tag-input--with-tag:not(.oneid-input--auto-width) .oneid-input, .oneid-tag-input.oneid-input--auto-width:hover .oneid-input { padding-right: calc(var(--td-comp-paddingLR-xxl) + var(--td-comp-paddingLR-xxs)); } .oneid-tag-input--break-line.oneid-tag-input--with-tag:not(.oneid-input--auto-width) .oneid-size-l .oneid-input, .oneid-tag-input.oneid-input--auto-width:hover .oneid-size-l .oneid-input { padding-right: calc(var(--td-comp-paddingLR-xxl) + var(--td-comp-paddingLR-xs)); } /** auto-width 模式,左右边距相同 */ .oneid-tag-input.oneid-input--auto-width .oneid-input { padding-right: 0; } /** max-rows模式,限制最大高度 */ .oneid-tag-input--max-rows .oneid-input { max-height: calc(var(--max-rows, 1) * (var(--td-comp-size-m) - 2px)); overflow-y: scroll; } .oneid-tag-input--max-rows .oneid-input.oneid-size-s { max-height: calc(var(--max-rows, 1) * var(--td-comp-size-xs)); } .oneid-tag-input--max-rows .oneid-input.oneid-size-l { max-height: calc(var(--max-rows, 1) * (var(--td-comp-size-xl) - 2px)); } .oneid-select-input { font: var(--td-font-body-medium); color: var(--td-text-color-primary); -webkit-box-sizing: border-box; box-sizing: border-box; margin: 0; padding: 0; list-style: none; width: 100%; display: inline-block; vertical-align: middle; } /** 宽度自适应场景,多选,预留图标的位置。带标签和不带标签的布局不同,故而间距不同 */ .oneid-select-input--multiple .oneid-input--auto-width.oneid-tag-input__with-suffix-icon.oneid-tag-input--with-tag .oneid-input { padding-right: var(--td-comp-paddingLR-xl); } .oneid-select-input--multiple .oneid-input--auto-width.oneid-tag-input__with-suffix-icon.oneid-tag-input--with-tag .oneid-input.oneid-size-l { padding-right: calc(var(--td-comp-paddingLR-xl) + var(--td-comp-paddingLR-s)); } .oneid-select-input--multiple .oneid-input--auto-width.oneid-tag-input__with-suffix-icon.oneid-is-empty .oneid-input { padding-right: var(--td-comp-paddingLR-s); } .oneid-select-input--multiple .oneid-input--auto-width.oneid-tag-input__with-suffix-icon.oneid-is-empty .oneid-input.oneid-size-l { padding-right: var(--td-comp-paddingLR-m); } /** 无边框模式 */ .oneid-select-input--borderless { /** 无边框模式的多选 */ } .oneid-select-input--borderless .oneid-input { -webkit-box-shadow: none; box-shadow: none; border: 1px solid transparent; background: transparent; -webkit-transition: all 0.2s linear; transition: all 0.2s linear; } .oneid-select-input--borderless .oneid-input:hover:not(.oneid-input--focused) { border-color: var(--td-component-border); background-color: var(--td-bg-color-container-hover); border-radius: var(--td-radius-default); } .oneid-select-input--borderless .oneid-input--focused { border-color: var(--td-brand-color); -webkit-box-shadow: 0 0 0 2px var(--td-brand-color-focus); box-shadow: 0 0 0 2px var(--td-brand-color-focus); background-color: var(--td-bg-color-specialcomponent); } .oneid-select-input--borderless.oneid-select-input--multiple:not(.oneid-select-input--empty).oneid-select-input--popup-visible input { display: inline-block; } .oneid-select-input--borderless.oneid-select-input--multiple:not(.oneid-select-input--empty).oneid-select-input--popup-visible .oneid-input { background-color: var(--td-bg-color-container-hover); } .oneid-select-input--borderless.oneid-tag-input { border: 0; -webkit-box-shadow: none; box-shadow: none; background: transparent; -webkit-transition: background-color 0.2s linear; transition: background-color 0.2s linear; } .oneid-select-input--borderless.oneid-tag-input:hover { background-color: var(--td-bg-color-container-hover); border-radius: var(--td-radius-default); } .oneid-select__wrap { width: 100%; } .oneid-select__dropdown .oneid-popup__content { margin: var(--td-comp-paddingTB-s) 0; padding: 0; max-height: 300px; overflow-y: auto; -ms-scroll-chaining: none; overscroll-behavior: contain; -webkit-box-shadow: var(--td-shadow-2); box-shadow: var(--td-shadow-2); } @-moz-document url-prefix() { .oneid-select__dropdown .oneid-popup__content { scrollbar-color: var(--td-scrollbar-color) transparent; scrollbar-width: thin; } } .oneid-select__dropdown .oneid-popup__content::-webkit-scrollbar { width: 8px; height: 8px; } .oneid-select__dropdown .oneid-popup__content::-webkit-scrollbar-thumb { border: 2px solid transparent; background-clip: content-box; background-color: var(--td-scrollbar-color); border-radius: 15px; } .oneid-select__dropdown .oneid-popup__content::-webkit-scrollbar-thumb:vertical:hover, .oneid-select__dropdown .oneid-popup__content::-webkit-scrollbar-thumb:horizontal:hover { background-color: var(--td-scrollbar-hover-color); } .oneid-select__dropdown-inner { min-height: var(--td-comp-size-m); } .oneid-select__dropdown-inner .oneid-select__list .oneid-select__list { padding: 0; } .oneid-select__dropdown-inner .oneid-select__list, .oneid-select__dropdown-inner .oneid-tree { padding: var(--td-pop-padding-m); } .oneid-select__dropdown-inner--size-s { min-height: var(--td-comp-size-xs); } .oneid-select__dropdown-inner--size-s .oneid-select__list, .oneid-select__dropdown-inner--size-s .oneid-tree { padding: var(--td-pop-padding-s); } .oneid-select__dropdown-inner--size-l { min-height: var(--td-comp-size-xl); } .oneid-select__dropdown-inner--size-l .oneid-select__list, .oneid-select__dropdown-inner--size-l .oneid-tree { padding: var(--td-pop-padding-l); } .oneid-select__list { margin: 0; padding: 0; list-style: none; } .oneid-select__dropdown.oneid-popup { padding: 0; } .oneid-select__empty.oneid-size-s { line-height: var(--td-comp-size-xs); } .oneid-select__empty { text-align: center; color: var(--td-text-color-disabled); line-height: var(--td-comp-size-m); padding: 0 var(--td-comp-paddingLR-s); } .oneid-select__empty.oneid-size-l { line-height: var(--td-comp-size-xl); } .oneid-select__loading-tips.oneid-size-s { min-height: var(--td-comp-size-xs); line-height: var(--td-comp-size-xs); } .oneid-select__loading-tips { position: fixed; top: var(--td-comp-paddingTB-s); left: 0; bottom: var(--td-comp-paddingTB-s); right: 0; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; background-color: var(--td-bg-color-container); border-radius: var(--td-radius-default); min-height: var(--td-comp-size-m); line-height: var(--td-comp-size-m); color: var(--td-text-color-disabled); z-index: 1000; } .oneid-select__loading-tips.oneid-size-l { min-height: var(--td-comp-size-xl); line-height: var(--td-comp-size-xl); } .oneid-select-option-group + .oneid-select-option-group { padding-top: var(--td-comp-margin-xs); margin-top: var(--td-comp-margin-xs); } .oneid-select-option-group__divider + .oneid-select-option-group__divider { position: relative; } .oneid-select-option-group__divider + .oneid-select-option-group__divider::before { content: ""; width: 100%; height: 1px; padding: 0 var(--td-comp-paddingLR-s); position: absolute; top: 0; left: 0; -webkit-box-sizing: border-box; box-sizing: border-box; background-color: var(--td-border-level-1-color); background-clip: content-box; } ul.oneid-select-option-group__header, .oneid-select-option-group__header { color: var(--td-text-color-placeholder); display: block; height: var(--td-comp-size-s); line-height: var(--td-comp-size-s); padding: 0 var(--td-comp-paddingLR-s); -webkit-box-sizing: border-box; box-sizing: border-box; white-space: nowrap; word-wrap: normal; overflow: hidden; text-overflow: ellipsis; } .oneid-select-option-group__header.oneid-size-l { height: var(--td-comp-size-l); line-height: var(--td-comp-size-l); padding: 0 var(--td-comp-paddingLR-m); } .oneid-select-option-group__header.oneid-size-s { height: var(--td-comp-size-xxs); line-height: var(--td-comp-size-xxs); padding: 0 var(--td-comp-paddingLR-s); } .oneid-select-option { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; border-radius: var(--td-radius-default); height: var(--td-comp-size-s); font: var(--td-font-body-medium); cursor: pointer; padding: 0 var(--td-comp-paddingLR-s); color: var(--td-text-color-primary); -webkit-transition: background-color 0.2s cubic-bezier(0.38, 0, 0.24, 1); transition: background-color 0.2s cubic-bezier(0.38, 0, 0.24, 1); -webkit-box-sizing: border-box; box-sizing: border-box; --ripple-color: var(--td-bg-color-container-active); } .oneid-select-option span { position: relative; white-space: nowrap; word-wrap: normal; overflow: hidden; text-overflow: ellipsis; } .oneid-select-option:not(.oneid-is-disabled):not(.oneid-is-selected):hover { background-color: var(--td-bg-color-container-hover); } .oneid-select-option:not(.oneid-is-disabled):not(.oneid-is-selected):hover .oneid-checkbox__label { color: inherit; } .oneid-select-option:not(.oneid-is-disabled):not(.oneid-is-selected):hover .oneid-checkbox__input { border-color: var(--td-brand-color); } .oneid-select-option .oneid-checkbox__label { color: var(--td-text-color-primary); -webkit-box-flex: 1; -ms-flex: 1; flex: 1; white-space: nowrap; word-wrap: normal; overflow: hidden; text-overflow: ellipsis; } .oneid-select-option .oneid-checkbox { width: 100%; } .oneid-select-option.oneid-is-disabled { cursor: not-allowed; color: var(--td-text-color-disabled); background: var(--td-bg-color-specialcomponent); } .oneid-select-option.oneid-is-disabled:hover, .oneid-select-option.oneid-is-disabled :active { background: var(--td-bg-color-specialcomponent); } .oneid-select-option.oneid-size-l { height: var(--td-comp-size-l); padding: 0 var(--td-comp-paddingLR-m); font: var(--td-font-body-large); } .oneid-select-option.oneid-size-m { font: var(--td-font-body-medium); } .oneid-select-option.oneid-size-s { height: var(--td-comp-size-xxs); padding: 0 var(--td-comp-paddingLR-s); font: var(--td-font-body-small); } .oneid-select-option.oneid-is-selected:not(.oneid-is-disabled) { color: var(--td-brand-color); background-color: var(--td-brand-color-light); -webkit-transition: all 0.2s linear; transition: all 0.2s linear; } .oneid-select-option.oneid-is-selected:not(.oneid-is-disabled) .oneid-checkbox__label { color: var(--td-brand-color); } .oneid-select-option.oneid-is-selected:not(.oneid-is-disabled):hover { background-color: var(--td-brand-color-light); } /** 规范 CSS 类名为 --hover */ .oneid-select-option.oneid-select-option__hover:not(.oneid-is-disabled).oneid-select-option.oneid-select-option__hover:not(.oneid-is-selected), .oneid-select-option.oneid-select-option__hover:not(.oneid-is-disabled).oneid-select-option.oneid-select-option--hover:not(.oneid-is-selected), .oneid-select-option.oneid-select-option--hover:not(.oneid-is-disabled).oneid-select-option.oneid-select-option__hover:not(.oneid-is-selected), .oneid-select-option.oneid-select-option--hover:not(.oneid-is-disabled).oneid-select-option.oneid-select-option--hover:not(.oneid-is-selected) { background-color: var(--td-bg-color-container-hover); } .oneid-select-option.oneid-select-option__hover:not(.oneid-is-disabled).oneid-select-option.oneid-select-option__hover:not(.oneid-is-selected) .oneid-checkbox__input, .oneid-select-option.oneid-select-option__hover:not(.oneid-is-disabled).oneid-select-option.oneid-select-option--hover:not(.oneid-is-selected) .oneid-checkbox__input, .oneid-select-option.oneid-select-option--hover:not(.oneid-is-disabled).oneid-select-option.oneid-select-option__hover:not(.oneid-is-selected) .oneid-checkbox__input, .oneid-select-option.oneid-select-option--hover:not(.oneid-is-disabled).oneid-select-option.oneid-select-option--hover:not(.oneid-is-selected) .oneid-checkbox__input { border-color: var(--td-brand-color); } .oneid-select-option.oneid-select-option__hover .oneid-checkbox__label, .oneid-select-option.oneid-select-option--hover .oneid-checkbox__label { color: inherit; } .oneid-select-option + .oneid-select-option { margin-top: var(--td-comp-paddingTB-xxs); } .oneid-select.oneid-select-input--borderless .oneid-select__right-icon { position: relative; margin: 0; } .oneid-select .oneid-fake-arrow { color: var(--td-text-color-placeholder); } .oneid-select .oneid-fake-arrow--active { color: var(--td-brand-color); } .oneid-is-selected.oneid-select-option__hover { background-color: var(--td-brand-color-light-hover); } .oneid-is-selected.oneid-select-option__hover .oneid-checkbox__label { color: var(--td-brand-color); } .oneid-pagination-mini { font: var(--td-font-body-medium); color: var(--td-text-color-primary); -webkit-box-sizing: border-box; box-sizing: border-box; margin: 0; padding: 0; list-style: none; } .oneid-pagination-mini--outline .oneid-pagination-mini__prev { border-top-right-radius: 0; border-bottom-right-radius: 0; position: relative; z-index: 1; } .oneid-pagination-mini--outline .oneid-pagination-mini__current { border-radius: 0; position: relative; margin-left: -1px; } .oneid-pagination-mini--outline .oneid-pagination-mini__current:hover { z-index: 1; } .oneid-pagination-mini--outline .oneid-pagination-mini__next { border-top-left-radius: 0; border-bottom-left-radius: 0; position: relative; margin-left: -1px; } .oneid-pagination-mini--outline .oneid-pagination-mini__next:hover { z-index: 1; } .oneid-pagination { font: var(--td-font-body-medium); color: var(--td-text-color-primary); -webkit-box-sizing: border-box; box-sizing: border-box; margin: 0; padding: 0; list-style: none; width: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; white-space: nowrap; color: var(--td-text-color-secondary); -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .oneid-pagination.oneid-is-disabled { color: var(--td-text-color-disabled); } .oneid-pagination__total { font: var(--td-font-body-medium); -webkit-box-flex: 1; -ms-flex: 1; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .oneid-pagination .oneid-select__wrap { width: auto; } .oneid-pagination__select { -ms-flex-negative: 0; flex-shrink: 0; margin-right: var(--td-comp-margin-l); height: var(--td-comp-size-m); font-size: var(--td-font-size-body-medium); color: var(--td-text-color-secondary); } .oneid-pagination__btn { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -ms-flex-negative: 0; flex-shrink: 0; cursor: pointer; color: var(--td-text-color-secondary); border-radius: var(--td-radius-default); font: var(--td-font-body-large); width: var(--td-comp-size-m); height: var(--td-comp-size-m); line-height: var(--td-comp-size-m); } .oneid-pagination__btn:hover { background-color: var(--td-bg-color-secondarycontainer-hover); -webkit-transition: all 0.2s cubic-bezier(0.82, 0, 1, 0.9); transition: all 0.2s cubic-bezier(0.82, 0, 1, 0.9); } .oneid-pagination__btn:active { background-color: var(--td-bg-color-secondarycontainer-active); } .oneid-pagination__btn.oneid-is-disabled, .oneid-pagination__btn.oneid-is-disabled:hover, .oneid-pagination__btn.oneid-is-disabled:active { background: none; color: var(--td-text-color-disabled); } .oneid-pagination__btn.oneid-is-disabled { cursor: not-allowed; } .oneid-pagination__btn-prev { margin-right: var(--td-comp-margin-s); } .oneid-pagination__btn-next { margin-left: var(--td-comp-margin-s); } .oneid-pagination__btn + .oneid-pagination__select { margin-right: 0; } .oneid-pagination__pager { -ms-flex-negative: 0; flex-shrink: 0; display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; vertical-align: middle; list-style: none; padding: 0; margin: 0; } .oneid-pagination__pager li:not(:last-child) { margin-right: var(--td-comp-margin-s); } .oneid-pagination__number { display: inline-block; border: 1px solid var(--td-component-border); text-align: center; border-radius: var(--td-radius-default); cursor: pointer; background-color: var(--td-bg-color-container); -webkit-box-sizing: border-box; box-sizing: border-box; height: var(--td-comp-size-m); min-width: var(--td-comp-size-m); line-height: calc(var(--td-comp-size-m) - 2px); font-size: var(--td-font-body-medium); padding-left: var(--td-comp-paddingLR-xs); padding-right: var(--td-comp-paddingLR-xs); } .oneid-pagination__number:hover { color: var(--td-brand-color-hover); border-color: var(--td-brand-color-hover); -webkit-transition: all 0.2s cubic-bezier(0.82, 0, 1, 0.9); transition: all 0.2s cubic-bezier(0.82, 0, 1, 0.9); } .oneid-pagination__number:active { background-color: var(--td-brand-color); color: var(--td-text-color-anti); border-color: var(--td-brand-color); } .oneid-pagination__number.oneid-is-current { background-color: var(--td-brand-color); color: var(--td-text-color-anti); border-color: var(--td-brand-color); } .oneid-pagination__number.oneid-is-current.oneid-is-disabled, .oneid-pagination__number.oneid-is-current.oneid-is-disabled:hover, .oneid-pagination__number.oneid-is-current.oneid-is-disabled:active { background-color: var(--td-brand-color-focus); color: var(--td-text-color-anti); border-color: var(--td-brand-color-focus); } .oneid-pagination__number.oneid-is-disabled { cursor: auto; background-color: var(--td-bg-color-component-disabled); color: var(--td-text-color-disabled); } .oneid-pagination__number.oneid-is-disabled:hover, .oneid-pagination__number.oneid-is-disabled:active { background-color: var(--td-bg-color-component-disabled); color: var(--td-text-color-disabled); border-color: var(--td-component-border); } .oneid-pagination__number--more { border: 0 none; padding: 0; } .oneid-pagination__number--more:hover { color: var(--td-text-color-primary); background-color: var(--td-bg-color-secondarycontainer-hover); -webkit-transition: all 0.2s cubic-bezier(0.82, 0, 1, 0.9); transition: all 0.2s cubic-bezier(0.82, 0, 1, 0.9); } .oneid-pagination__number--more:active { color: var(--td-text-color-primary); background-color: var(--td-bg-color-secondarycontainer-active); } .oneid-pagination__number--more.oneid-is-disabled, .oneid-pagination__number--more.oneid-is-disabled:hover, .oneid-pagination__number--more.oneid-is-disabled:active { background: none; } .oneid-pagination__number--more .oneid-icon-more { -webkit-transform: rotate(90deg); transform: rotate(90deg); color: var(--td-text-color-disabled); } .oneid-pagination__jump { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -ms-flex-negative: 0; flex-shrink: 0; margin-left: var(--td-comp-margin-s); font-size: var(--td-font-body-medium); gap: var(--td-comp-margin-s); background-color: var(--td-bg-color-secondarycontainer); height: var(--td-comp-size-m); padding-left: var(--td-comp-margin-s); border-radius: var(--td-radius-default); } .oneid-pagination .oneid-input-adornment__append { border: none; height: calc(var(--td-comp-size-m) - 4px); color: var(--td-text-color-secondary); background-color: transparent; } .oneid-pagination .oneid-input-adornment__append .oneid-input-adornment__text { border: none; } .oneid-pagination .oneid-input-number { width: 56px; } .oneid-pagination .oneid-input-number .oneid-input { height: calc(var(--td-comp-size-m) - 4px); border-radius: var(--td-radius-default); } .oneid-pagination .oneid-input-number .oneid-input__inner { text-align: center; } .oneid-pagination.oneid-size-s { font: var(--td-font-body-small); } .oneid-pagination.oneid-size-s .oneid-pagination__jump { height: var(--td-comp-size-xs); } .oneid-pagination.oneid-size-s .oneid-input-adornment__append { height: calc(var(--td-comp-size-xs) - 4px); font: var(--td-font-body-small); } .oneid-pagination.oneid-size-s .oneid-input-number { width: 48px; } .oneid-pagination.oneid-size-s .oneid-input-number .oneid-input { height: calc(var(--td-comp-size-xs) - 4px); } .oneid-pagination.oneid-size-s .oneid-pagination__total { font: var(--td-font-body-small); } .oneid-pagination.oneid-size-s .oneid-pagination__select { height: var(--td-comp-size-xs); font-size: var(--td-font-size-body-small); } .oneid-pagination.oneid-size-s .oneid-pagination__number { border: 0 none; height: var(--td-comp-size-xs); min-width: var(--td-comp-size-xs); line-height: var(--td-comp-size-xs); font-size: var(--td-font-body-small); padding-left: var(--td-comp-paddingLR-xxs); padding-right: var(--td-comp-paddingLR-xxs); } .oneid-pagination.oneid-size-s .oneid-pagination__number:hover:not(.oneid-pagination.oneid-size-s .oneid-pagination__number.oneid-is-current) { color: var(--td-text-color-primary); background-color: var(--td-bg-color-secondarycontainer-hover); -webkit-transition: all 0.2s cubic-bezier(0.82, 0, 1, 0.9); transition: all 0.2s cubic-bezier(0.82, 0, 1, 0.9); } .oneid-pagination.oneid-size-s .oneid-pagination__number:active:not(.oneid-pagination.oneid-size-s .oneid-pagination__number.oneid-is-current) { color: var(--td-text-color-primary); background-color: var(--td-bg-color-secondarycontainer-active); } .oneid-pagination.oneid-size-s .oneid-pagination__number.oneid-is-disabled { background: none; color: var(--td-text-color-disabled); } .oneid-pagination.oneid-size-s .oneid-pagination__number.oneid-is-current.oneid-is-disabled { background-color: var(--td-brand-color-focus); color: var(--td-text-color-anti); border-color: var(--td-brand-color-focus); } .oneid-pagination.oneid-size-s .oneid-pagination__btn { border: 0 none; background: none; width: var(--td-comp-size-xs); height: var(--td-comp-size-xs); line-height: var(--td-comp-size-xs); } .oneid-pagination.oneid-size-s .oneid-pagination__btn:hover { background-color: var(--td-bg-color-secondarycontainer-hover); -webkit-transition: all 0.2s cubic-bezier(0.82, 0, 1, 0.9); transition: all 0.2s cubic-bezier(0.82, 0, 1, 0.9); } .oneid-pagination.oneid-size-s .oneid-pagination__btn:active { background-color: var(--td-bg-color-secondarycontainer-active); } .oneid-pagination.oneid-size-s .oneid-pagination__btn.oneid-is-disabled, .oneid-pagination.oneid-size-s .oneid-pagination__btn.oneid-is-disabled:hover, .oneid-pagination.oneid-size-s .oneid-pagination__btn.oneid-is-disabled:active { background: none; color: var(--td-text-color-disabled); } /** IE 兼容 **/ .oneid-pagination-ie { /** 在 IE11 以下浏览器,input autoWidth 计算无法依赖 observer,因而加上最小宽度,避免分页信息出现 0 的情况 */ } .oneid-pagination-ie .oneid-select .oneid-input__inner { min-width: 54px; } /** 吸顶表头 Affix 组件,zIndex: 1000。宽度拖拽辅助线层级需高于表头 */ @-moz-document url-prefix() { .scrollbar { scrollbar-color: var(--td-scrollbar-color) transparent; scrollbar-width: thin; } } .scrollbar::-webkit-scrollbar { width: 6px; height: 6px; } .scrollbar::-webkit-scrollbar-thumb { border: 0px solid transparent; background-clip: content-box; background-color: var(--td-scrollbar-color); border-radius: 11px; } .scrollbar::-webkit-scrollbar-thumb:vertical:hover, .scrollbar::-webkit-scrollbar-thumb:horizontal:hover { background-color: var(--td-scrollbar-hover-color); } .scrollbar.oneid-table__affixed-footer-elm::-webkit-scrollbar-track, .scrollbar.oneid-table__scrollbar--obvious::-webkit-scrollbar-track { background: var(--td-scroll-track-color); } .oneid-table__affixed-footer-wrap > .scrollbar.oneid-table__affixed-footer-elm::-webkit-scrollbar-thumb, .oneid-table--width-overflow.oneid-table--footer-affixed .oneid-table__content::-webkit-scrollbar-thumb, .oneid-table--width-overflow.oneid-table--horizontal-bar-affixed .oneid-table__content::-webkit-scrollbar-thumb { background: transparent; } .oneid-table.oneid-table--overflow-visible { overflow: initial; } .oneid-table { -webkit-box-sizing: border-box; box-sizing: border-box; margin: 0; padding: 0; list-style: none; width: 100%; font: var(--td-font-body-medium); color: var(--td-text-color-primary); background-color: var(--td-bg-color-container); position: relative; /** loading need to be top of fixed columns */ } .oneid-table .oneid-popup:not(.oneid-tooltip)[data-popper-placement^=top] .oneid-popup__arrow { bottom: -4px; } .oneid-table:focus-visible { outline: none; } .oneid-table .oneid-loading--full { z-index: 72; } .oneid-table.oneid-vertical-align-top th:not(.oneid-table__cell-check), .oneid-table.oneid-vertical-align-top td:not(.oneid-table__cell-check) { vertical-align: top; } .oneid-table.oneid-vertical-align-middle th:not(.oneid-table__cell-check), .oneid-table.oneid-vertical-align-middle td:not(.oneid-table__cell-check) { vertical-align: middle; } .oneid-table.oneid-vertical-align-bottom th:not(.oneid-table__cell-check), .oneid-table.oneid-vertical-align-bottom td:not(.oneid-table__cell-check) { vertical-align: bottom; } .oneid-table .oneid-table__resize-line { display: none; position: absolute; left: 10px; width: 0; border-left: 1px solid var(--td-component-border); z-index: 1001; } .oneid-table__column-controller-trigger.oneid-align-top-right, .oneid-table__column-controller-trigger.oneid-align-bottom-right { text-align: right; } .oneid-table__column-controller-trigger { padding: var(--td-comp-paddingTB-l) 0; } .oneid-table__column-controller-item:not(:last-child) { margin-bottom: var(--td-comp-margin-l); } .oneid-table__content { position: relative; } @-moz-document url-prefix() { .oneid-table__content { scrollbar-color: var(--td-scrollbar-color) transparent; scrollbar-width: thin; } } .oneid-table__content::-webkit-scrollbar { width: 6px; height: 6px; } .oneid-table__content::-webkit-scrollbar-thumb { border: 0px solid transparent; background-clip: content-box; background-color: var(--td-scrollbar-color); border-radius: 11px; } .oneid-table__content::-webkit-scrollbar-thumb:vertical:hover, .oneid-table__content::-webkit-scrollbar-thumb:horizontal:hover { background-color: var(--td-scrollbar-hover-color); } @-moz-document url-prefix() { .oneid-table__content { scrollbar-color: var(--td-scrollbar-color) transparent; scrollbar-width: thin; } } .oneid-table__content::-webkit-scrollbar { width: 6px; height: 6px; } .oneid-table__content::-webkit-scrollbar-thumb { border: 0px solid transparent; background-clip: content-box; background-color: var(--td-scrollbar-color); border-radius: 11px; } .oneid-table__content::-webkit-scrollbar-thumb:vertical:hover, .oneid-table__content::-webkit-scrollbar-thumb:horizontal:hover { background-color: var(--td-scrollbar-hover-color); } .oneid-table__pagination { padding: var(--td-comp-paddingTB-l) var(--td-comp-paddingLR-l); -webkit-box-sizing: border-box; box-sizing: border-box; } .oneid-table .oneid-icon { font-size: var(--td-font-size-body-large); } .oneid-table table { width: 100%; border-spacing: 0; } .oneid-table .oneid-text-ellipsis { line-height: var(--td-line-height-body-medium); white-space: nowrap; word-wrap: normal; overflow: hidden; text-overflow: ellipsis; } .oneid-table th, .oneid-table td { position: relative; padding: var(--td-comp-paddingTB-m) var(--td-comp-paddingLR-l); border-bottom: 1px solid var(--td-component-border); line-height: var(--td-line-height-body-medium); font-weight: normal; overflow-wrap: break-word; background-color: inherit; -webkit-box-sizing: border-box; box-sizing: border-box; text-align: left; } .oneid-table th.oneid-table__th-drag { padding: 0; height: 0; text-align: center; } .oneid-table thead td, .oneid-table th { color: var(--td-text-color-placeholder); } .oneid-table td[key=row-select] { padding: 13px 0 11px var(--td-comp-paddingLR-l); } .oneid-table td.oneid-align-left, .oneid-table th.oneid-align-left { text-align: left; } .oneid-table td.oneid-align-right, .oneid-table th.oneid-align-right { text-align: right; } .oneid-table td.oneid-align-center, .oneid-table th.oneid-align-center { text-align: center; } .oneid-table tr { background-color: var(--td-bg-color-container); } .oneid-table.oneid-size-s th, .oneid-table.oneid-size-s td { padding: var(--td-comp-paddingTB-s) var(--td-comp-paddingLR-s); } .oneid-table.oneid-size-l th, .oneid-table.oneid-size-l td { padding: var(--td-comp-paddingTB-l) var(--td-comp-paddingLR-xl); } .oneid-table .oneid-table__expandable-icon-cell, .oneid-table .oneid-table__selection-cell { padding: 0; height: 0; } .oneid-table td.oneid-table__handle-draggable { text-align: center; height: 0; padding: 0; } .oneid-table .oneid-table__cell--selectable > .oneid-checkbox { vertical-align: middle; } .oneid-table .oneid-table__cell--selectable + td, .oneid-table .oneid-table__cell--selectable + th { padding-left: 0; } .oneid-table--bordered td, .oneid-table--bordered th { border-left: 1px solid var(--td-component-border); } .oneid-table--bordered td.oneid-table__cell--fixed-left-last::before, .oneid-table--bordered th.oneid-table__cell--fixed-left-last::before { border-right: 1px solid var(--td-component-border); } .oneid-table--bordered th:first-child, .oneid-table--bordered td.oneid-table__td-first-col { border-left-width: 0; } .oneid-table--bordered:not(.oneid-table--rowspan-colspan) td:first-child { border-left-width: 0; } .oneid-table--bordered .oneid-table__content { border-left: 1px solid var(--td-component-border); } .oneid-table--bordered .oneid-table__content::-webkit-scrollbar-corner { background-color: transparent; } .oneid-table--bordered .oneid-table__content { border: 1px solid var(--td-component-border); border-radius: var(--td-radius-default); } .oneid-table--bordered .oneid-table--loading { border-bottom: 1px solid var(--td-component-border); } .oneid-table--bordered .oneid-table__pagination { padding: var(--td-comp-paddingTB-l) var(--td-comp-paddingLR-l); } .oneid-table--bordered .oneid-table__bottom-content + .oneid-table__pagination { padding: 0; } .oneid-table--bordered.oneid-table__header--fixed .oneid-table__content { border-bottom: 1px solid var(--td-component-border); } .oneid-table--bordered .oneid-table__td-last-row { border-bottom: none; } .oneid-table--striped:not(.oneid-table--bordered) th, .oneid-table--striped:not(.oneid-table--bordered) td { border-bottom: none; } .oneid-table--striped.oneid-table--header-fixed > .oneid-table__content > table > tbody tr:nth-of-type(even) { background-color: var(--td-bg-color-secondarycontainer); } .oneid-table--striped:not(.oneid-table--header-fixed) > .oneid-table__content > table > tbody > tr:nth-of-type(odd):not(.oneid-table__expanded-row) { background-color: var(--td-bg-color-secondarycontainer); } .oneid-table--striped.oneid-table--hoverable.oneid-table__header--fixed tbody tr:nth-of-type(even):hover { background-color: var(--td-bg-color-secondarycontainer-hover); } .oneid-table--striped.oneid-table--hoverable:not(.oneid-table__header--fixed) > .oneid-table__content > table > tbody tr:nth-of-type(odd):hover { background-color: var(--td-bg-color-secondarycontainer-hover); } .oneid-table--striped.oneid-table--hoverable > .oneid-table__content > table > tbody tr { -webkit-transition: background-color 0.2s linear; transition: background-color 0.2s linear; } .oneid-table--striped.oneid-table--hoverable > .oneid-table__content > table > tbody tr:hover { background-color: var(--td-bg-color-container-hover); } .oneid-table--hoverable tbody tr { -webkit-transition: background-color 0.2s linear; transition: background-color 0.2s linear; } .oneid-table--hoverable tbody tr:hover { background-color: var(--td-bg-color-container-hover); } .oneid-table.oneid-table--align-top tbody td { vertical-align: top; } .oneid-table .oneid-table__cell--highlight { background-color: var(--td-bg-color-secondarycontainer); } .oneid-table__header--fixed table { table-layout: fixed; } .oneid-table__header--fixed th, .oneid-table__header--fixed td { overflow-wrap: break-word; } .oneid-table__header--fixed.oneid-table__header, .oneid-table__header--fixed .oneid-table__header { width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; position: relative; z-index: 5; } @-moz-document url-prefix() { .oneid-table__header--fixed .oneid-table__header { scrollbar-color: var(--td-scrollbar-color) transparent; scrollbar-width: thin; } } .oneid-table__header--fixed .oneid-table__header::-webkit-scrollbar { width: 6px; height: 6px; } .oneid-table__header--fixed .oneid-table__header::-webkit-scrollbar-thumb { border: 0px solid transparent; background-clip: content-box; background-color: var(--td-scrollbar-color); border-radius: 11px; } .oneid-table__header--fixed .oneid-table__header::-webkit-scrollbar-thumb:vertical:hover, .oneid-table__header--fixed .oneid-table__header::-webkit-scrollbar-thumb:horizontal:hover { background-color: var(--td-scrollbar-hover-color); } @-moz-document url-prefix() { .oneid-table__header--fixed .oneid-table__header { scrollbar-color: var(--td-scrollbar-color) transparent; scrollbar-width: thin; } } .oneid-table__header--fixed .oneid-table__header::-webkit-scrollbar { width: 6px; height: 6px; } .oneid-table__header--fixed .oneid-table__header::-webkit-scrollbar-thumb { border: 0px solid transparent; background-clip: content-box; background-color: var(--td-scrollbar-color); border-radius: 11px; } .oneid-table__header--fixed .oneid-table__header::-webkit-scrollbar-thumb:vertical:hover, .oneid-table__header--fixed .oneid-table__header::-webkit-scrollbar-thumb:horizontal:hover { background-color: var(--td-scrollbar-hover-color); } .oneid-table__header--fixed .oneid-table__body { overflow-y: auto; width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; } @-moz-document url-prefix() { .oneid-table__header--fixed .oneid-table__body { scrollbar-color: var(--td-scrollbar-color) transparent; scrollbar-width: thin; } } .oneid-table__header--fixed .oneid-table__body::-webkit-scrollbar { width: 6px; height: 6px; } .oneid-table__header--fixed .oneid-table__body::-webkit-scrollbar-thumb { border: 0px solid transparent; background-clip: content-box; background-color: var(--td-scrollbar-color); border-radius: 11px; } .oneid-table__header--fixed .oneid-table__body::-webkit-scrollbar-thumb:vertical:hover, .oneid-table__header--fixed .oneid-table__body::-webkit-scrollbar-thumb:horizontal:hover { background-color: var(--td-scrollbar-hover-color); } @-moz-document url-prefix() { .oneid-table__header--fixed .oneid-table__body { scrollbar-color: var(--td-scrollbar-color) transparent; scrollbar-width: thin; } } .oneid-table__header--fixed .oneid-table__body::-webkit-scrollbar { width: 6px; height: 6px; } .oneid-table__header--fixed .oneid-table__body::-webkit-scrollbar-thumb { border: 0px solid transparent; background-clip: content-box; background-color: var(--td-scrollbar-color); border-radius: 11px; } .oneid-table__header--fixed .oneid-table__body::-webkit-scrollbar-thumb:vertical:hover, .oneid-table__header--fixed .oneid-table__body::-webkit-scrollbar-thumb:horizontal:hover { background-color: var(--td-scrollbar-hover-color); } .oneid-table:not(.oneid-table--bordered) .oneid-table__cell--selectable + td, .oneid-table:not(.oneid-table--bordered) .oneid-table__cell--selectable + th { padding-left: 0; } .oneid-table__cell--fixed.oneid-table__header--fixed .oneid-table__header { overflow: hidden; width: 100%; } .oneid-table__cell--fixed.oneid-table__header--fixed .oneid-table__header .oneid-table__cell--fixed-left:last-child::after, .oneid-table__cell--fixed.oneid-table__header--fixed .oneid-table__header .oneid-table__cell--fixed-right:last-child::after { content: ""; position: absolute; right: -6px; width: 6px; height: 100%; top: 0; background-color: var(--td-bg-color-secondarycontainer); } .oneid-table__cell--fixed.oneid-table__header--fixed .oneid-table__body { overflow: auto scroll; } .oneid-table__cell--fixed .oneid-table__content { overflow: auto hidden; } .oneid-table__cell--fixed table { table-layout: fixed; min-width: 100%; } .oneid-table__cell--fixed th, .oneid-table__cell--fixed td { position: relative; } .oneid-table__cell--fixed .oneid-table__cell--fixed-left-last::before { z-index: -1; background-color: inherit; } .oneid-table__cell--fixed .oneid-table__cell--fixed-left-last::after { position: absolute; top: 0; bottom: 0; content: ""; -webkit-transition: -webkit-box-shadow 0.3s; transition: -webkit-box-shadow 0.3s; transition: box-shadow 0.3s; transition: box-shadow 0.3s, -webkit-box-shadow 0.3s; pointer-events: none; z-index: -2; } .oneid-table__cell--fixed .oneid-table__cell--fixed-left-last::after { right: 0; -webkit-transform: translateX(100%); transform: translateX(100%); } .oneid-table__cell--fixed .oneid-table__cell--fixed-right-first::before { z-index: -1; background-color: inherit; } .oneid-table__cell--fixed .oneid-table__cell--fixed-right-first::after { position: absolute; top: 0; bottom: 0; content: ""; -webkit-transition: -webkit-box-shadow 0.3s; transition: -webkit-box-shadow 0.3s; transition: box-shadow 0.3s; transition: box-shadow 0.3s, -webkit-box-shadow 0.3s; pointer-events: none; z-index: -2; } .oneid-table__cell--fixed .oneid-table__cell--fixed-right-first::after { left: 0; -webkit-transform: translateX(-100%); transform: translateX(-100%); } .oneid-table .oneid-table__cell-resizable { position: relative; } .oneid-table .oneid-table__cell-resizable .oneid-table__cell--resizer { position: absolute; top: 0; right: -5px; bottom: 0; z-index: 10; width: 10px; cursor: col-resize; } .oneid-table .oneid-table__row--disabled { color: var(--td-text-color-disabled); } .oneid-table .oneid-table__cell--title { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .oneid-table__column-controller-desc { margin-bottom: var(--td-comp-margin-xxl); } .oneid-table__column-controller-block { padding: var(--td-comp-paddingTB-m) var(--td-comp-paddingLR-l); border: 1px solid var(--td-component-border); border-bottom: 1px solid var(--td-component-border); } .oneid-table__column-controller-block + .oneid-table__column-controller-block { border-top: 0; padding: var(--td-comp-paddingTB-l) var(--td-comp-paddingLR-l); border-bottom: 1px solid var(--td-component-border); } .oneid-table__column-controller--fixed .oneid-checkbox { width: 108px; } /** 表格行点击高亮悬浮态 */ .oneid-table.oneid-table__row--active-single tbody > tr.oneid-table__row--active, .oneid-table.oneid-table__row--active-multiple tbody > tr.oneid-table__row--active { background-color: var(--td-brand-color-light); } .oneid-table.oneid-table__row--active-single tbody > tr.oneid-table__row--active.oneid-table__row--hover, .oneid-table.oneid-table__row--active-multiple tbody > tr.oneid-table__row--active.oneid-table__row--hover { background-color: var(--td-brand-color-light-hover); } .oneid-table.oneid-table--hoverable tbody > tr.oneid-table__row--active:hover { background-color: var(--td-brand-color-light-hover); } /** 键盘操作悬浮表格行 */ .oneid-table.oneid-table--row-expandable tbody > tr.oneid-table__row--hover, .oneid-table.oneid-table--row-select tbody > tr.oneid-table__row--hover, .oneid-table.oneid-table__row--active-multiple tbody > tr.oneid-table__row--hover { background-color: var(--td-bg-color-container-hover); } .oneid-table--bordered .oneid-table__cell--sortable .oneid-table__cell--title, .oneid-table--bordered .oneid-table__cell--filterable .oneid-table__cell--title { -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } .oneid-table th.oneid-align-right .oneid-table__cell--title { -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; } /** * 有边框和无边框的图标排列不一样,需谨慎修改 * 无边框模式,图标依次紧跟标题 * 有边框模式,只有一个图标时,图标靠近边框右侧;有两个图标时,排序图标靠近标题,过滤图标靠近边框右侧 */ .oneid-table__cell--sort-trigger { text-align: center; vertical-align: text-bottom; } .oneid-table__cell--sort-trigger svg { vertical-align: initial; } .oneid-table--loading { position: relative; } .oneid-table--loading-progressbar { overflow: hidden; position: absolute; top: 0; left: 0; height: 1px; background-color: var(--td-brand-color); -webkit-animation: tTableProgressbar 2s ease-in-out; animation: tTableProgressbar 2s ease-in-out; -webkit-animation-fill-mode: both; animation-fill-mode: both; } .oneid-table--loading-message { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; min-height: 120px; color: var(--td-text-color-placeholder); } .oneid-table__expanded-cell { padding-left: 45px; } .oneid-table__async-loading { text-align: center; } .oneid-table__async-loading.oneid-is-load-more { cursor: pointer; } .oneid-table__empty { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; min-height: 120px; color: var(--td-text-color-disabled); } .oneid-table__filter-icon, .oneid-table__sort-icon { -webkit-box-align: center; -ms-flex-align: center; align-items: center; background-color: transparent; display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; cursor: pointer; vertical-align: text-bottom; -webkit-transition: 0.2s linear; transition: 0.2s linear; } .oneid-table__filter-icon > svg, .oneid-table__sort-icon > svg { margin-top: 0; } .oneid-table__sort-icon .oneid-is-focus, .oneid-table__sort-icon.oneid-is-focus, .oneid-table__sort-icon:hover { color: var(--td-brand-color); border-radius: var(--td-radius-circle); -webkit-transition: 0.2s linear; transition: 0.2s linear; } .oneid-table__filter-icon .oneid-is-focus, .oneid-table__filter-icon.oneid-is-focus, .oneid-table__filter-icon:hover { color: var(--td-brand-color); -webkit-transition: 0.2s linear; transition: 0.2s linear; } .oneid-table__filter-pop .oneid-popup__content { padding: 0; } .oneid-table__filter-pop .oneid-table__filter-pop-content .oneid-table__filter-pop-content-inner { padding: var(--td-comp-paddingTB-l) var(--td-comp-paddingLR-l); } .oneid-table__filter-pop .oneid-table__filter-pop-content .oneid-table__filter-pop-content-inner .oneid-table__filter-popup-input { margin-bottom: var(--td-comp-margin-s); } .oneid-table__filter-pop .oneid-table__filter-pop-content .oneid-radio-group { display: block; height: auto; } .oneid-table__filter-pop .oneid-table__filter-pop-content .oneid-checkbox-group { display: block; } .oneid-table__filter-pop .oneid-table__filter-pop-content .oneid-checkbox, .oneid-table__filter-pop .oneid-table__filter-pop-content .oneid-radio { display: block; margin: var(--td-comp-margin-xs) 0; } .oneid-table__filter-pop .oneid-table__filter-pop-content .oneid-table__filter-pop-content-button { border-top: 1px solid var(--td-component-border); padding: var(--td-comp-paddingTB-l) var(--td-comp-paddingLR-l); } .oneid-table__filter-pop .oneid-table__filter-pop-content .oneid-table__filter-pop-content-button .oneid-button + .oneid-button { margin-left: var(--td-comp-margin-l); } .oneid-table__filter-pop .oneid-table__list-filter-input--sticky .oneid-table__filter-pop-content .oneid-table__filter-pop-content-inner { padding: 0; max-height: 280px; overflow: auto; position: relative; } .oneid-table__filter-pop .oneid-table__list-filter-input--sticky .oneid-table__filter-pop-content .oneid-table__filter-pop-content-inner .oneid-input__wrap { padding: var(--td-comp-paddingTB-l) var(--td-comp-paddingLR-l) 0 var(--td-comp-paddingLR-l); position: -webkit-sticky; position: sticky; top: 0; z-index: 1; background-color: var(--td-bg-color-container); } .oneid-table__filter-pop .oneid-table__list-filter-input--sticky .oneid-table__filter-pop-content .oneid-table__filter-pop-content-inner .oneid-radio-group { padding: 0 var(--td-comp-paddingLR-l); } .oneid-table__filter-pop-content-inner > .oneid-input__wrap { width: 200px; } .oneid-table__filter-pop-content-inner > .oneid-date-range-picker__panel { margin: calc(0px - var(--td-comp-margin-l)); } .oneid-table__sort-icon--active { color: var(--td-brand-color); -webkit-transition: 0.2s linear; transition: 0.2s linear; } .oneid-table__double-icons { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .oneid-table__double-icons .oneid-table__sort-icon { position: relative; } .oneid-table__double-icons .oneid-table-sort-asc { top: var(--td-comp-margin-xxs); } .oneid-table__double-icons .oneid-table-sort-desc { bottom: var(--td-comp-margin-xxs); } .oneid-table__filter-icon-wrap { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; pointer-events: all; height: var(--td-font-size-body-large); width: var(--td-font-size-body-large); margin-left: var(--td-comp-margin-s); } .oneid-table--bordered .oneid-table__filter-icon-wrap { -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; } .oneid-table--bordered .oneid-table__cell--sortable.oneid-table__cell--filterable .oneid-table__filter-icon-wrap { -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-flex: 1; -ms-flex: 1; flex: 1; } .oneid-table .oneid-align-center .oneid-table__cell--sortable, .oneid-table .oneid-align-center .oneid-table__cell--filterable { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-pack: distribute; justify-content: space-around; } .oneid-table__expand-box { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; width: 100%; height: 100%; color: var(--td-text-color-placeholder); cursor: pointer; -webkit-transition: all 0.2s cubic-bezier(0.38, 0, 0.24, 1) 0s; transition: all 0.2s cubic-bezier(0.38, 0, 0.24, 1) 0s; } .oneid-table__expand-box:hover { color: var(--td-brand-color); -webkit-transition: 0.2s linear; transition: 0.2s linear; } @-webkit-keyframes tTableProgressbar { 0% { width: 0; } 100% { width: 100%; } } @keyframes tTableProgressbar { 0% { width: 0; } 100% { width: 100%; } } .oneid-table__th-row-select .oneid-table__th-cell-inner { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .oneid-table-expandable-icon-cell + .oneid-table__cell--selectable[key=row-select] { padding-left: var(--td-comp-margin-s); } .oneid-table__filter--bottom-buttons { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; padding: var(--td-comp-paddingTB-l) var(--td-comp-paddingLR-l); border-top: 1px solid var(--td-component-border); } .oneid-table__filter--bottom-buttons > .oneid-button + .oneid-button { margin-left: var(--td-comp-margin-s); } .oneid-table__row-filter-inner { position: -webkit-sticky; position: sticky; left: 0; text-align: center; } .oneid-table__filter-result { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .oneid-table__filter-result > .oneid-button { margin-left: var(--td-comp-margin-s); } .oneid-table--layout-fixed { table-layout: fixed; } .oneid-table--layout-auto { table-layout: auto; } .oneid-table__ellipsis { white-space: nowrap; width: 100%; } .oneid-table__content { overflow: auto; } .oneid-table__content--scrollable-to-left .oneid-table__cell--fixed-left-last::after { border-right: 2px solid var(--td-component-border); } .oneid-table__content--scrollable-to-right .oneid-table__cell--fixed-right-first::after { border-left: 2px solid var(--td-component-border); } .oneid-table--bordered.oneid-table__content--scrollable-to-left .oneid-table__cell--fixed-left-last::after { border-right: 4px solid var(--td-component-border); } .oneid-table--bordered.oneid-table__content--scrollable-to-right .oneid-table__cell--fixed-right-first::after { border-left: 4px solid var(--td-component-border); } .oneid-table__scroll-bar-divider { position: absolute; bottom: 0; right: 0; height: 100%; border-right: 1px solid var(--td-component-border); z-index: 71; } .oneid-table__footer, .oneid-table__header.oneid-table__header--fixed { position: -webkit-sticky; position: sticky; z-index: 50; } .oneid-table:not(.oneid-table--striped) .oneid-table__footer > tr { background-color: var(--td-bg-color-secondarycontainer); } .oneid-table__header--fixed:not(.oneid-table__header--multiple) > tr > th { background-color: var(--td-bg-color-secondarycontainer); } .oneid-table__row--fixed-top, .oneid-table__row--fixed-bottom { position: -webkit-sticky; position: sticky; z-index: 70; } .oneid-table__row--fixed-bottom-first > td { border-top: 1px solid var(--td-component-border); } .oneid-table--bordered .oneid-table__content .oneid-table__row--without-border-bottom > td { border-bottom: 0; } .oneid-table--bordered tbody > tr:last-child > td, .oneid-table--bordered tfoot > tr:last-child > td { border-bottom: 0; } .oneid-table--bordered tfoot > tr:first-child > td { border-top: 1px solid var(--td-component-border); } .oneid-table__header.oneid-table__header--fixed { top: 0; } .oneid-table__footer.oneid-table__footer--fixed { bottom: 0; } .oneid-table--column-fixed .oneid-table__cell--fixed-left-last::before { z-index: -1; background-color: inherit; } .oneid-table--column-fixed .oneid-table__cell--fixed-left-last::after { position: absolute; top: 0; bottom: 0; content: ""; -webkit-transition: -webkit-box-shadow 0.3s; transition: -webkit-box-shadow 0.3s; transition: box-shadow 0.3s; transition: box-shadow 0.3s, -webkit-box-shadow 0.3s; pointer-events: none; z-index: -2; } .oneid-table--column-fixed .oneid-table__cell--fixed-left-last::after { right: 0; -webkit-transform: translateX(100%); transform: translateX(100%); } .oneid-table--column-fixed .oneid-table__cell--fixed-right-first::before { z-index: -1; background-color: inherit; } .oneid-table--column-fixed .oneid-table__cell--fixed-right-first::after { position: absolute; top: 0; bottom: 0; content: ""; -webkit-transition: -webkit-box-shadow 0.3s; transition: -webkit-box-shadow 0.3s; transition: box-shadow 0.3s; transition: box-shadow 0.3s, -webkit-box-shadow 0.3s; pointer-events: none; z-index: -2; } .oneid-table--column-fixed .oneid-table__cell--fixed-right-first::after { left: 0; -webkit-transform: translateX(-100%); transform: translateX(-100%); } .oneid-table--column-fixed .oneid-table__cell--fixed-left, .oneid-table--column-fixed .oneid-table__cell--fixed-right { position: -webkit-sticky; position: sticky; } .oneid-table--column-fixed .oneid-table__cell--fixed-left { z-index: 30; } .oneid-table--column-fixed .oneid-table__cell--fixed-right { z-index: 31; } .oneid-table__empty-row > td { padding: 0; border: 0; } .oneid-table:not(.oneid-table--bordered) .oneid-table__header.oneid-table--bordered > tr:first-child > th { border-top: 1px solid var(--td-component-border); } .oneid-table--multiple-header .oneid-table__header th.oneid-table__header-th--bordered { border-left-width: 1px; } .oneid-table__header.oneid-table__header--multiple > tr { background-color: var(--td-bg-color-container); } .oneid-table__tree-op-icon { margin-right: var(--td-comp-margin-s); cursor: pointer; display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; vertical-align: -3px; } .oneid-table__tree-op-icon:hover { color: var(--td-brand-color); -webkit-transition: 0.2s linear; transition: 0.2s linear; } .oneid-table__tree-leaf-node .oneid-table__tree-op-icon { min-width: 0; margin-right: var(--td-comp-margin-xxs); } .oneid-table__virtual-scroll-cursor { position: absolute; width: 1px; height: 1px; -webkit-transition: -webkit-transform 0.2s; transition: -webkit-transform 0.2s; transition: transform 0.2s; transition: transform 0.2s, -webkit-transform 0.2s; } .oneid-table__virtual-scroll-header { position: absolute; z-index: 51; left: 0; } /** 用于隐藏表头滚动条 */ .oneid-table__affixed-header-elm-wrap { overflow: hidden; } .oneid-table__affixed-header-elm-wrap, .oneid-table__affixed-header-elm { position: absolute; left: 0; z-index: 51; } .oneid-table__affixed-header-elm { overflow: auto; -webkit-transition: opacity 0.2s linear; transition: opacity 0.2s linear; opacity: 1; } .oneid-table__affixed-footer-elm { overflow: auto; z-index: 50; } .oneid-table--bordered .oneid-table__affixed-header-elm { border: 1px solid var(--td-component-border); border-bottom: 0; border-right: 0; } .oneid-table--bordered .oneid-table__affixed-footer-elm { border-left: 1px solid var(--td-component-border); border-bottom: 1px solid var(--td-component-border); } .oneid-table--multiple-header.oneid-table--bordered .oneid-table__affixed-header-elm { border-right: 0; } .oneid-is-hidden { display: none; } .oneid-positive-rotate-90 { -webkit-transform: rotate(90deg); transform: rotate(90deg); } .oneid-negative-rotate-180 { -webkit-transform: rotate(180deg); transform: rotate(180deg); } .oneid-table__expanded-row > td, .oneid-table__row--full > td { padding: 0; } /** @{prefix}-table__row--full 和 @{prefix}-table__row-full-element 同时存在,是为了保证 固定列时,当前行不随内容进行横向滚动 */ .oneid-table__row-full-element { padding: var(--td-comp-paddingTB-m) var(--td-comp-paddingLR-l); } .oneid-table__row-full-inner { position: -webkit-sticky; position: sticky; left: 0; } .oneid-table__row-full-inner:not(.oneid-table__empty) { display: inline-block; } .oneid-table__tree-col { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .oneid-table__tree-col--inline { display: inline; } .oneid-table--full-height { height: 100%; } /** 默认最小高度限制为 Empty 高度加表头高度 */ .oneid-table--loading .oneid-table__content { min-height: 168px; } .oneid-table__handle-draggable:hover, .oneid-table--row-draggable tr, .oneid-table__th--drag-sort { cursor: move; } .oneid-table__ele--draggable-chosen { -webkit-box-shadow: var(--td-shadow-1); box-shadow: var(--td-shadow-1); } .oneid-table:not(.oneid-table--row-edit) .oneid-table__cell--editable { min-height: 22px; line-height: var(--td-line-height-body-medium); cursor: pointer; } .oneid-table:not(.oneid-table--row-edit) .oneid-table__cell--editable .oneid-icon { margin-left: var(--td-comp-margin-s); font-size: var(--td-font-size-body-large); -webkit-transition: 0.2s linear; transition: 0.2s linear; color: var(--td-text-color-placeholder); } .oneid-table:not(.oneid-table--row-edit) .oneid-table__cell--editable .oneid-icon:hover { color: var(--td-brand-color); } .oneid-table:not(.oneid-table--row-edit) .oneid-table__cell--editable:hover { -webkit-transition: 0.2s linear; transition: 0.2s linear; } /** 吸底的分页器,需要背景色,避免表格文本内容显示穿透 */ .oneid-affix .oneid-table__pagination { background-color: var(--td-bg-color-container); } .oneid-table--bordered .oneid-affix .oneid-table__pagination { border-top: 1px solid var(--td-component-border); } .oneid-table__bottom-content + .oneid-table__pagination-wrap .oneid-table__pagination { border: 0; padding: 0; } .oneid-table--column-resizable:not(.oneid-table--bordered) { /** 表格左边有冻结列滚动时,去掉hover表头时多出的一个像素,避免出现表头的冻结列跟表内容的冻结列没有对齐的问题 */ } .oneid-table--column-resizable:not(.oneid-table--bordered) th { border-top: 1px solid transparent; } .oneid-table--column-resizable:not(.oneid-table--bordered) thead.oneid-table__header:hover th:not(:last-child) { border-right: 1px solid var(--td-component-border); } .oneid-table--column-resizable:not(.oneid-table--bordered) thead.oneid-table__header:hover th { border-top: 1px solid var(--td-component-border); } .oneid-table--column-resizable:not(.oneid-table--bordered).oneid-table__content--scrollable-to-left.oneid-table__content--scrollable-to-right thead.oneid-table__header:hover .oneid-table__cell--fixed-left-last:not(:last-child), .oneid-table--column-resizable:not(.oneid-table--bordered).oneid-table__content--scrollable-to-left thead.oneid-table__header:hover .oneid-table__cell--fixed-left-last:not(:last-child) { border-right: 0; } /** 可选中行的场景下,将 Checkbox 和 Radio 铺满整个单元格,增大点击范围,方便用户选中 */ .oneid-table td.oneid-table__cell-check, .oneid-table th.oneid-table__cell-check { padding: 0; /** HTML 特性: th/td 必须设置为 0,他们的子元素才能设置为 100% */ height: 0; } .oneid-table td.oneid-table__cell-check .oneid-radio__label:empty, .oneid-table th.oneid-table__cell-check .oneid-radio__label:empty, .oneid-table td.oneid-table__cell-check .oneid-checkbox__label:empty, .oneid-table th.oneid-table__cell-check .oneid-checkbox__label:empty { display: none; } .oneid-table .oneid-table__cell-check .oneid-radio, .oneid-table .oneid-table__cell-check .oneid-checkbox, .oneid-table .oneid-table__cell-check .oneid-table__th-cell-inner { width: 100%; height: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .oneid-table td .oneid-input__tips { position: initial; } .oneid-table .oneid-table__sort-column { background-color: var(--td-bg-color-secondarycontainer); } .oneid-table__ellipsis-content.oneid-size-s .oneid-popup__content { font: var(--td-font-body-medium); } .oneid-list { font: var(--td-font-body-medium); -webkit-box-sizing: border-box; box-sizing: border-box; margin: 0; padding: 0; list-style: none; overflow: auto; color: var(--td-text-color-primary); background: var(--td-bg-color-container); } @-moz-document url-prefix() { .oneid-list { scrollbar-color: var(--td-scrollbar-color) transparent; scrollbar-width: thin; } } .oneid-list::-webkit-scrollbar { width: 6px; height: 6px; } .oneid-list::-webkit-scrollbar-thumb { border: 0px solid transparent; background-clip: content-box; background-color: var(--td-scrollbar-color); border-radius: 11px; } .oneid-list::-webkit-scrollbar-thumb:vertical:hover, .oneid-list::-webkit-scrollbar-thumb:horizontal:hover { background-color: var(--td-scrollbar-hover-color); } .oneid-list__inner { list-style: none; padding: 0; margin: 0; } .oneid-list-item { font: var(--td-font-body-medium); padding: var(--td-comp-paddingTB-m) var(--td-comp-paddingLR-l); display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -ms-flex-align: center; align-items: center; position: relative; } .oneid-list-item::after { content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 1px; } .oneid-list-item-main { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; width: 100%; -webkit-box-flex: 1; -ms-flex: 1; flex: 1; } .oneid-list-item__meta { display: -webkit-box; display: -ms-flexbox; display: flex; } .oneid-list-item__meta-avatar { width: var(--td-comp-size-xxxl); height: var(--td-comp-size-xxxl); border-radius: calc(var(--td-comp-size-xxxl) / 2); overflow: hidden; background: var(--td-bg-color-page); margin-right: var(--td-comp-margin-l); -ms-flex-negative: 0; flex-shrink: 0; } .oneid-list-item__meta-avatar img { max-width: 100%; width: 100%; height: 100%; } .oneid-list-item__meta-title { padding: 0; font: var(--td-font-title-medium); margin: 0 0 var(--td-comp-margin-s); color: var(--td-text-color-primary); } .oneid-list-item__meta-description { margin-right: var(--td-comp-margin-xxl); color: var(--td-text-color-primary); } .oneid-list-item__action { list-style: none; padding: 0; -ms-flex-negative: 0; flex-shrink: 0; } .oneid-list-item__action > li { display: inline-block; } .oneid-list-item__action > li:not(:last-child) { margin-right: var(--td-comp-margin-l); } .oneid-list-item__action > li .oneid-icon { color: var(--td-text-color-secondary); font-size: var(--td-comp-size-xxxs); } .oneid-list-item__action > li .oneid-icon:hover { color: var(--td-text-color-link); cursor: pointer; } .oneid-list-item__action > li > a { text-decoration: none; color: var(--td-brand-color); } .oneid-list--split .oneid-list-item::after { background: var(--td-border-level-1-color); } .oneid-list--stripe .oneid-list-item:nth-child(even) { background: var(--td-bg-color-secondarycontainer); } .oneid-list--vertical-action .oneid-list-item { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } .oneid-list.oneid-size-s .oneid-list-item { padding: var(--td-comp-paddingTB-s) var(--td-comp-paddingLR-m); } .oneid-list.oneid-size-l .oneid-list-item { padding: var(--td-comp-paddingTB-l) var(--td-comp-paddingLR-xl); } .oneid-list__header, .oneid-list__footer { background: var(--td-bg-color-container); padding: var(--td-comp-paddingTB-m) var(--td-comp-paddingLR-l); } .oneid-list__load { background: var(--td-bg-color-container); text-align: center; line-height: var(--td-line-height-body-medium); } .oneid-list__load > div { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .oneid-list__load:not(:empty) { padding: var(--td-comp-paddingTB-m) var(--td-comp-paddingLR-l); } .oneid-list__load .oneid-loading { font-size: var(--td-comp-size-xxxs); margin-right: var(--td-comp-margin-s); } .oneid-list__load .oneid-loading.oneid-is-load-more { cursor: pointer; } .oneid-tabs { font: var(--td-font-body-medium); color: var(--td-text-color-primary); -webkit-box-sizing: border-box; box-sizing: border-box; margin: 0; padding: 0; list-style: none; overflow: hidden; background-color: var(--td-bg-color-container); } .oneid-tabs__header.oneid-is-left { float: left; } .oneid-tabs__header.oneid-is-right { float: right; } .oneid-tabs__header .oneid-icon { font-size: var(--td-font-size-body-large); } .oneid-tabs__nav { position: relative; overflow: hidden; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .oneid-tabs__operations { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; position: absolute; border-bottom: 1px solid var(--td-component-stroke); background-color: var(--td-bg-color-container); } .oneid-tabs__operations--left { left: 0; z-index: 2; } .oneid-tabs__operations--right { right: 0; z-index: 2; } .oneid-tabs__operations--right .oneid-tabs__btn:first-child { -webkit-box-shadow: -10px 0 20px 5px rgba(0, 0, 0, 0.05); box-shadow: -10px 0 20px 5px rgba(0, 0, 0, 0.05); } .oneid-tabs__operations--right .oneid-tabs__nav-action { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; width: 100%; -webkit-box-flex: 1; -ms-flex: 1; flex: 1; } .oneid-tabs__btn { width: 40px; height: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; background-color: var(--td-bg-color-secondarycontainer); border-left: 1px solid var(--td-component-stroke); cursor: pointer; color: var(--td-text-color-secondary); font: var(--td-font-body-large); -webkit-transition: all 0.24s cubic-bezier(0.38, 0, 0.24, 1); transition: all 0.24s cubic-bezier(0.38, 0, 0.24, 1); z-index: 1; opacity: 1; } .oneid-tabs__btn:hover { background-color: var(--td-bg-color-secondarycontainer-hover); } .oneid-tabs__btn.oneid-size-m { height: var(--td-comp-size-xxl); line-height: var(--td-comp-size-xxl); } .oneid-tabs__btn.oneid-size-l { height: var(--td-comp-size-xxxxl); line-height: var(--td-comp-size-xxxxl); } .oneid-tabs__btn--left { border-right: 1px solid var(--td-component-stroke); -webkit-box-shadow: 10px 0px 20px 5px rgba(0, 0, 0, 0.05); box-shadow: 10px 0px 20px 5px rgba(0, 0, 0, 0.05); } .oneid-tabs__btn--left.fade-enter, .oneid-tabs__btn--left.fade-enter-from, .oneid-tabs__btn--left.fade-leave-to { -webkit-transform: translateX(-50px); transform: translateX(-50px); } .oneid-tabs__btn--right.fade-enter, .oneid-tabs__btn--right.fade-enter-from, .oneid-tabs__btn--right.fade-leave-to { -webkit-transform: translateX(50px); transform: translateX(50px); } .oneid-tabs__nav-container { position: relative; } .oneid-tabs__nav-container.oneid-is-top::after { content: ""; width: 100%; height: 1px; position: absolute; top: auto; right: auto; bottom: 0; left: 0; background-color: var(--td-component-stroke); } .oneid-tabs__nav-container.oneid-is-bottom::after { content: ""; width: 100%; height: 1px; position: absolute; top: 0; right: auto; bottom: auto; left: 0; background-color: var(--td-component-stroke); } .oneid-tabs__nav-container.oneid-is-left::after { content: ""; width: 1px; height: 100%; position: absolute; top: 0; right: 0; bottom: auto; left: auto; background-color: var(--td-component-stroke); } .oneid-tabs__nav-container.oneid-is-right::after { content: ""; width: 1px; height: 100%; position: absolute; top: 0; right: auto; bottom: auto; left: 0; background-color: var(--td-component-stroke); } .oneid-tabs__nav-container.oneid-is-addable { margin-right: 40px; } .oneid-tabs__nav-container.oneid-tabs__nav--card::after { content: ""; background-color: transparent; } .oneid-tabs__scroll-btn { position: absolute; z-index: 1; width: 40px; height: 100%; display: block; background-color: var(--td-bg-color-secondarycontainer); text-align: center; border-bottom: 1px solid var(--td-component-stroke); cursor: pointer; color: var(--td-text-color-secondary); font: var(--td-font-body-large); } .oneid-tabs__scroll-btn.oneid-size-m { height: var(--td-comp-size-xxl); line-height: var(--td-comp-size-xxl); } .oneid-tabs__scroll-btn.oneid-size-l { height: var(--td-comp-size-xxxxl); line-height: var(--td-comp-size-xxxxl); } .oneid-tabs__nav-scroll { position: relative; display: inline-block; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-flex: 1; -ms-flex: auto; flex: auto; -ms-flex-item-align: stretch; align-self: stretch; overflow: hidden; white-space: nowrap; -webkit-transform: translate(0); transform: translate(0); z-index: 1; } .oneid-tabs__nav-wrap { position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; font-size: 0; } .oneid-tabs__nav-wrap.oneid-is-smooth { -webkit-transition: -webkit-transform 0.24s cubic-bezier(0, 0, 0.15, 1); transition: -webkit-transform 0.24s cubic-bezier(0, 0, 0.15, 1); transition: transform 0.24s cubic-bezier(0, 0, 0.15, 1); transition: transform 0.24s cubic-bezier(0, 0, 0.15, 1), -webkit-transform 0.24s cubic-bezier(0, 0, 0.15, 1); } .oneid-tabs__nav-wrap.oneid-is-vertical { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } .oneid-tabs__bar { position: absolute; background-color: var(--td-brand-color); z-index: 1; -webkit-transition: all 0.24s cubic-bezier(0.38, 0, 0.24, 1); transition: all 0.24s cubic-bezier(0.38, 0, 0.24, 1); border-radius: var(--td-radius-small); } .oneid-tabs__bar.oneid-is-top { bottom: 0; left: 0; height: 3px; } .oneid-tabs__bar.oneid-is-bottom { top: 0; left: 0; height: 3px; } .oneid-tabs__bar.oneid-is-left { top: 0; right: 0; width: 3px; } .oneid-tabs__bar.oneid-is-right { top: 0; left: 0; width: 3px; } .oneid-tabs__nav-item { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; font: var(--td-font-body-medium); color: var(--td-text-color-secondary); position: relative; overflow: hidden; z-index: 0; cursor: pointer; -ms-flex-negative: 0; flex-shrink: 0; -webkit-transition: background-color cubic-bezier(0.38, 0, 0.24, 1) 0.2s; transition: background-color cubic-bezier(0.38, 0, 0.24, 1) 0.2s; --ripple-color: var(--td-bg-color-container-active); } .oneid-tabs__nav-item-wrapper { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; height: var(--td-comp-size-m); padding: 0 var(--td-comp-paddingLR-s); margin-left: var(--td-comp-margin-s); margin-right: var(--td-comp-margin-s); border-radius: var(--td-radius-default); -webkit-transition: background-color cubic-bezier(0.38, 0, 0.24, 1) 0.2s; transition: background-color cubic-bezier(0.38, 0, 0.24, 1) 0.2s; --ripple-color: var(--td-bg-color-container-active); } .oneid-tabs__nav-item.oneid-size-l { font: var(--td-font-body-large); } .oneid-tabs__nav-item.oneid-size-l .oneid-tabs__nav-item-wrapper { height: var(--td-comp-size-xxl); padding: 0 var(--td-comp-paddingLR-m); } .oneid-tabs__nav-item-text-wrapper { position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .oneid-tabs__nav-item:not(.oneid-is-disabled):not(.oneid-is-active):hover .oneid-tabs__nav-item-wrapper { background-color: var(--td-bg-color-container-hover); } .oneid-tabs__nav-item.oneid-is-left, .oneid-tabs__nav-item.oneid-is-right { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .oneid-tabs__nav-item.oneid-size-m { height: var(--td-comp-size-xxl); line-height: var(--td-comp-size-xxl); } .oneid-tabs__nav-item.oneid-size-l { height: var(--td-comp-size-xxxxl); line-height: var(--td-comp-size-xxxxl); } .oneid-tabs__nav-item.oneid-is-active { color: var(--td-brand-color); text-shadow: 0 0 0.3px currentcolor; } .oneid-tabs__nav-item.oneid-is-disabled { color: var(--td-text-color-disabled); cursor: not-allowed; } .oneid-tabs__nav-item > .remove-btn { margin-left: var(--td-comp-margin-s); -webkit-transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1); transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1); } .oneid-tabs__nav--card { background-color: var(--td-bg-color-secondarycontainer); } .oneid-tabs__nav--card.oneid-tabs__nav-item { padding-right: var(--td-comp-paddingLR-l); padding-left: var(--td-comp-paddingLR-l); border-bottom: 1px solid var(--td-component-stroke); } .oneid-tabs__nav--card.oneid-tabs__nav-item::after { display: none; } .oneid-tabs__nav--card.oneid-tabs__nav-item:not(.oneid-is-disabled):not(.oneid-is-active):hover { background-color: var(--td-bg-color-secondarycontainer-hover); } .oneid-tabs__nav--card.oneid-tabs__nav-item:not(:first-of-type) { border-left: 1px solid var(--td-component-stroke); } .oneid-tabs__nav--card.oneid-tabs__nav-item:last-of-type { border-right: 1px solid var(--td-component-stroke); } .oneid-tabs__nav--card.oneid-tabs__nav-item.oneid-is-active { color: var(--td-brand-color); background-color: var(--td-bg-color-container); border-bottom-color: var(--td-bg-color-container); } .oneid-tabs__nav--card.oneid-tabs__nav-item.oneid-size-l { padding-left: var(--td-comp-paddingLR-xl); padding-right: var(--td-comp-paddingLR-xl); } .oneid-tabs__nav--card .oneid-icon-close { color: var(--td-text-color-secondary); -webkit-transition: color cubic-bezier(0.38, 0, 0.24, 1) 0.2s; transition: color cubic-bezier(0.38, 0, 0.24, 1) 0.2s; } .oneid-tabs__nav--card .oneid-icon-close:hover { color: var(--td-text-color-primary); } .oneid-tabs__content { overflow: hidden; position: relative; } .oneid-tab-panel.oneid-is-hidden { display: none; } .oneid-notification { color: var(--td-text-color-primary); margin: 0; padding: 0; list-style: none; font: var(--td-font-body-medium); outline: 0; border: 0; background-color: var(--td-bg-color-container); display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-shadow: var(--td-shadow-2), var(--td-shadow-inset-top), var(--td-shadow-inset-right), var(--td-shadow-inset-bottom), var(--td-shadow-inset-left); box-shadow: var(--td-shadow-2), var(--td-shadow-inset-top), var(--td-shadow-inset-right), var(--td-shadow-inset-bottom), var(--td-shadow-inset-left); -webkit-box-sizing: border-box; box-sizing: border-box; border-radius: var(--td-radius-medium); width: 360px; padding: var(--td-comp-paddingTB-l) var(--td-comp-paddingLR-l); } .oneid-notification__icon { width: calc(var(--td-font-size-body-large) + 8px); text-align: center; margin-right: var(--td-comp-margin-s); } .oneid-notification__icon .oneid-icon { font-size: calc(var(--td-font-size-body-large) + 8px); } .oneid-notification .oneid-icon.oneid-is-info { color: var(--td-brand-color); } .oneid-notification .oneid-icon.oneid-is-success { color: var(--td-success-color); } .oneid-notification .oneid-icon.oneid-is-warning { color: var(--td-warning-color); } .oneid-notification .oneid-icon.oneid-is-error { color: var(--td-error-color-6); } .oneid-notification__main { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; } .oneid-notification__title__wrap { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } .oneid-notification__title { font: var(--td-font-title-medium); color: var(--td-text-color-primary); } .oneid-notification .oneid-icon-close { cursor: pointer; font-size: var(--td-font-size-body-large); border-radius: var(--td-radius-default); color: var(--td-text-color-secondary); } .oneid-notification .oneid-icon-close:hover { background: var(--td-bg-color-container-hover); } .oneid-notification .oneid-icon-close:active { background: var(--td-bg-color-container-active); } .oneid-notification__content { font: var(--td-font-body-medium); color: var(--td-text-color-secondary); margin-top: var(--td-comp-margin-s); max-height: 66px; overflow: hidden; text-overflow: ellipsis; word-break: break-all; /* stylelint-disable-next-line */ display: -webkit-box; -webkit-line-clamp: 3; /* stylelint-disable-next-line */ -webkit-box-orient: vertical; } .oneid-notification__detail { margin-top: var(--td-comp-margin-l); text-align: right; font: var(--td-font-body-medium); } .oneid-notification__detail-item { cursor: pointer; } .oneid-notification__detail-item:hover { color: inherit; background: var(--td-bg-color-container-hover); } .oneid-notification__detail-item:active { color: inherit; background: var(--td-bg-color-container-active); } .oneid-notification__detail-item + .oneid-notification__detail-item { margin-left: var(--td-comp-margin-s); } .oneid-notification__detail-item.oneid-is-active { color: var(--td-brand-color); } .oneid-notification__show--top-left { position: fixed; top: 0; left: 0; } .oneid-notification__show--top-left > .oneid-notification { -webkit-animation-duration: 0.3s; animation-duration: 0.3s; -webkit-animation-name: slidein-top-left; animation-name: slidein-top-left; } @-webkit-keyframes slidein-top-left { from { opacity: 0; -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); } to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @keyframes slidein-top-left { from { opacity: 0; -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); } to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } .oneid-notification__show--top-right { position: fixed; top: 0; right: 0; } .oneid-notification__show--top-right > .oneid-notification { -webkit-animation-duration: 0.3s; animation-duration: 0.3s; -webkit-animation-name: slidein-top-right; animation-name: slidein-top-right; } @-webkit-keyframes slidein-top-right { from { opacity: 0; -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); } to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @keyframes slidein-top-right { from { opacity: 0; -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); } to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } .oneid-notification__show--bottom-left { position: fixed; bottom: 0; left: 0; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: reverse; -ms-flex-direction: column-reverse; flex-direction: column-reverse; } .oneid-notification__show--bottom-left > .oneid-notification { -webkit-animation-duration: 0.3s; animation-duration: 0.3s; -webkit-animation-name: slidein-bottom-left; animation-name: slidein-bottom-left; } @-webkit-keyframes slidein-bottom-left { from { opacity: 0; -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); } to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @keyframes slidein-bottom-left { from { opacity: 0; -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); } to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } .oneid-notification__show--bottom-right { position: fixed; bottom: 0; right: 0; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: reverse; -ms-flex-direction: column-reverse; flex-direction: column-reverse; } .oneid-notification__show--bottom-right > .oneid-notification { -webkit-animation-duration: 0.3s; animation-duration: 0.3s; -webkit-animation-name: slidein-bottom-right; animation-name: slidein-bottom-right; } @-webkit-keyframes slidein-bottom-right { from { opacity: 0; -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); } to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @keyframes slidein-bottom-right { from { opacity: 0; -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); } to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } .oneid-notification-list__show { position: fixed; } a.oneid-menu__item { text-decoration: none; color: unset; } a.oneid-menu__item:hover, a.oneid-menu__item:active { color: inherit; } .oneid-menu__logo > * { margin-left: var(--td-comp-margin-xxl); } .oneid-head-menu { font: var(--td-font-body-medium); color: var(--td-text-color-primary); -webkit-box-sizing: border-box; box-sizing: border-box; margin: 0; padding: 0; list-style: none; position: relative; width: 100%; background-color: var(--td-bg-color-container); } .oneid-head-menu__inner { display: -webkit-box; display: -ms-flexbox; display: flex; height: var(--td-comp-size-xxxl); } .oneid-head-menu__inner li + li { margin-left: var(--td-comp-margin-s); } .oneid-head-menu__inner .oneid-menu:first-child { margin-left: var(--td-comp-margin-xxl); } .oneid-head-menu .oneid-menu__logo:not(:empty) { height: 100%; margin-right: var(--td-comp-margin-xxxl); } .oneid-head-menu .oneid-menu { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .oneid-head-menu .oneid-menu__operations:not(:empty) { position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; height: var(--td-comp-size-xxxl); line-height: 64px; text-align: right; margin-right: var(--td-comp-margin-s); overflow: hidden; } .oneid-head-menu .oneid-menu__operations-icon { width: var(--td-comp-size-m); height: var(--td-comp-size-m); padding: var(--td-comp-paddingTB-s) var(--td-comp-paddingLR-s); line-height: var(--td-comp-size-m); -webkit-box-sizing: border-box; box-sizing: border-box; } .oneid-head-menu .oneid-submenu > .oneid-menu__item { overflow: unset; } .oneid-head-menu .oneid-submenu > .oneid-menu__item::before { content: ""; display: block; position: absolute; bottom: -20px; left: 0; right: 0; height: 20px; } .oneid-head-menu .oneid-menu__item { height: var(--td-comp-size-m); line-height: var(--td-comp-size-m); padding: 0 var(--td-comp-paddingLR-l); -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-transition: all 0.28s cubic-bezier(0.645, 0.045, 0.355, 1); transition: all 0.28s cubic-bezier(0.645, 0.045, 0.355, 1); gap: var(--td-comp-margin-m); } .oneid-head-menu__submenu { border-top: 1px solid var(--td-component-stroke); padding-left: 0; } .oneid-default-menu { font: var(--td-font-body-medium); color: var(--td-text-color-primary); -webkit-box-sizing: border-box; box-sizing: border-box; margin: 0; padding: 0; list-style: none; position: relative; width: 232px; display: inline-block; background: var(--td-bg-color-container); -webkit-transition: width 0.28s cubic-bezier(0.645, 0.045, 0.355, 1); transition: width 0.28s cubic-bezier(0.645, 0.045, 0.355, 1); white-space: nowrap; } .oneid-default-menu .oneid-menu__item { color: var(--td-text-color-secondary); } .oneid-default-menu.oneid-is-collapsed { width: 64px; } .oneid-default-menu.oneid-is-collapsed .oneid-menu__logo > * { margin-left: var(--td-comp-margin-l); } .oneid-default-menu.oneid-is-collapsed .oneid-menu .oneid-menu__item { padding: 0 14px; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .oneid-default-menu.oneid-is-collapsed .oneid-menu .oneid-menu__item .oneid-menu__item-link { margin-left: 0; opacity: 0; content: ""; position: absolute; top: 0; bottom: 0; left: 0; right: 0; } .oneid-default-menu.oneid-is-collapsed .oneid-fake-arrow { display: none; } .oneid-default-menu.oneid-is-collapsed .oneid-menu__item { text-overflow: initial; } .oneid-default-menu.oneid-is-collapsed .oneid-menu__item.oneid-is-active.oneid-is-opened { color: var(--td-brand-color); background-color: var(--td-brand-color-light); } .oneid-default-menu.oneid-is-collapsed .oneid-menu__item.oneid-is-active.oneid-is-opened .oneid-icon { color: var(--td-brand-color); } .oneid-default-menu.oneid-is-collapsed .oneid-menu__item.oneid-menu__item--plain::after { content: ""; } .oneid-default-menu.oneid-is-collapsed .oneid-menu__item span { display: none; } .oneid-default-menu.oneid-is-collapsed .oneid-menu__item .oneid-icon { margin-right: initial; } .oneid-default-menu.oneid-is-collapsed .oneid-submenu-icon { display: none; } .oneid-default-menu.oneid-is-collapsed .oneid-submenu > .oneid-menu__item { min-width: initial; } .oneid-default-menu.oneid-is-collapsed .oneid-submenu > .oneid-menu__item::after { content: ""; display: block; position: absolute; right: -20px; top: 0; bottom: 0; width: 20px; } .oneid-default-menu.oneid-is-collapsed .oneid-menu-group:first-child .oneid-menu-group__title { display: none; } .oneid-default-menu.oneid-is-collapsed .oneid-menu-group:first-child .oneid-menu-group__title + * { margin-top: 0; } .oneid-default-menu.oneid-is-collapsed .oneid-menu-group__title { padding: 0; font-size: 0; } .oneid-default-menu.oneid-is-collapsed .oneid-menu-group__title::after { content: ""; display: block; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); height: 1px; width: 20px; background: var(--td-component-stroke); } .oneid-default-menu.oneid-is-collapsed .oneid-menu__operations { text-align: center; } .oneid-default-menu.oneid-is-collapsed .oneid-menu__operations-icon { display: block; } .oneid-default-menu.oneid-is-collapsed .oneid-menu__log > * { margin: 0 auto; } .oneid-default-menu__inner { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; height: 100%; } .oneid-default-menu__inner .oneid-menu__logo:not(:empty) { -webkit-box-sizing: border-box; box-sizing: border-box; width: 100%; height: var(--td-comp-size-xxxl); border-bottom: 1px solid var(--td-component-stroke); } .oneid-default-menu__inner .oneid-menu { padding: var(--td-comp-paddingTB-l) var(--td-comp-paddingLR-s); position: relative; -webkit-box-flex: 1; -ms-flex: 1; flex: 1; } .oneid-default-menu__inner .oneid-menu--scroll { overflow-y: auto; overflow-x: hidden; } @-moz-document url-prefix() { .oneid-default-menu__inner .oneid-menu--scroll { scrollbar-color: var(--td-scrollbar-color) transparent; scrollbar-width: thin; } } .oneid-default-menu__inner .oneid-menu--scroll::-webkit-scrollbar { width: 6px; height: 6px; } .oneid-default-menu__inner .oneid-menu--scroll::-webkit-scrollbar-thumb { border: 0px solid transparent; background-clip: content-box; background-color: var(--td-scrollbar-color); border-radius: 11px; } .oneid-default-menu__inner .oneid-menu--scroll::-webkit-scrollbar-thumb:vertical:hover, .oneid-default-menu__inner .oneid-menu--scroll::-webkit-scrollbar-thumb:horizontal:hover { background-color: var(--td-scrollbar-hover-color); } .oneid-default-menu__inner .oneid-menu > *:not(.oneid-menu-group):not(:first-child) { margin-top: var(--td-comp-margin-xs); } .oneid-default-menu__inner .oneid-menu .oneid-menu-group > *:not(:first-child), .oneid-default-menu__inner .oneid-menu .oneid-menu__sub > *:not(:first-child), .oneid-default-menu__inner .oneid-menu .oneid-submenu > *:not(:first-child) { margin-top: var(--td-comp-margin-xs); } .oneid-default-menu__inner .oneid-menu-group__title { position: relative; padding: var(--td-comp-paddingTB-l) var(--td-comp-paddingLR-l) var(--td-comp-paddingTB-xs) var(--td-comp-paddingLR-l); color: var(--td-text-color-placeholder); font-size: var(--td-font-body-small); -webkit-box-sizing: border-box; box-sizing: border-box; } .oneid-default-menu .oneid-submenu { position: relative; } .oneid-default-menu .oneid-menu__operations:not(:empty) { width: 100%; position: relative; padding: var(--td-comp-paddingTB-s) var(--td-comp-paddingLR-l); top: 0; left: 0; text-align: left; border-top: solid 1px var(--td-component-stroke); -webkit-box-sizing: border-box; box-sizing: border-box; } .oneid-default-menu .oneid-menu__operations-icon { width: 32px; height: 32px; padding: var(--td-comp-paddingTB-s) var(--td-comp-paddingLR-s); cursor: pointer; color: var(--td-text-color-primary); -webkit-box-sizing: border-box; box-sizing: border-box; } .oneid-default-menu .oneid-menu__item.oneid-is-opened { color: var(--td-text-color-primary); background-color: unset; } .oneid-default-menu .oneid-menu__item.oneid-is-opened .oneid-icon { color: var(--td-text-color-primary); } .oneid-default-menu .oneid-menu__sub { padding: 0; overflow: hidden; } .oneid-default-menu .oneid-menu__sub .oneid-menu__item { padding-left: var(--padding-left, 32px); } .oneid-default-menu .oneid-slide-down-enter-active .oneid-menu__sub { height: 100%; } .oneid-default-menu .oneid-menu__item { position: relative; padding: 0 10px 0 16px; height: var(--td-comp-size-l); line-height: var(--td-comp-size-l); border-bottom: 0; text-align: left; border-radius: var(--td-radius-default); -webkit-transition: background-color 0.28s cubic-bezier(0.38, 0, 0.24, 1), padding 0.28s cubic-bezier(0.38, 0, 0.24, 1); transition: background-color 0.28s cubic-bezier(0.38, 0, 0.24, 1), padding 0.28s cubic-bezier(0.38, 0, 0.24, 1); -webkit-box-sizing: border-box; box-sizing: border-box; } .oneid-default-menu .oneid-menu__item .oneid-icon { width: 20px; height: 20px; -ms-flex-negative: 0; flex-shrink: 0; margin-right: var(--td-comp-margin-s); } .oneid-default-menu .oneid-menu__item .oneid-fake-arrow { margin-left: auto; min-width: 16px; } .oneid-default-menu .oneid-menu__item.oneid-is-active:not(.oneid-is-opened) { color: var(--td-brand-color); background-color: var(--td-brand-color-light); } .oneid-default-menu .oneid-menu__item.oneid-is-active:not(.oneid-is-opened) .oneid-icon { color: var(--td-brand-color); } .oneid-default-menu .oneid-menu__item:hover:not(.oneid-is-active):not(.oneid-is-disabled) { background: var(--td-bg-color-secondarycontainer-hover); } .oneid-default-menu.oneid-menu--dark { background: var(--td-gray-color-13); } .oneid-default-menu.oneid-menu--dark .oneid-menu__item { color: var(--td-font-white-2); } .oneid-default-menu.oneid-menu--dark .oneid-menu__logo:not(:empty) { border-bottom-color: var(--td-gray-color-10); } .oneid-default-menu.oneid-menu--dark .oneid-menu__operations:not(:empty) { border-top-color: var(--td-gray-color-10); } .oneid-default-menu.oneid-menu--dark .oneid-menu__item:hover:not(.oneid-is-active):not(.oneid-is-disabled) { background-color: var(--td-gray-color-10); } .oneid-default-menu.oneid-menu--dark .oneid-menu__item.oneid-is-active:not(.oneid-is-opened) { color: var(--td-text-color-anti); background-color: var(--td-brand-color); } .oneid-default-menu.oneid-menu--dark .oneid-menu__item.oneid-is-active:not(.oneid-is-opened) .oneid-icon { color: var(--td-text-color-anti); } .oneid-default-menu.oneid-menu--dark .oneid-menu__item.oneid-is-opened.oneid-is-active { background-color: transparent; } .oneid-default-menu.oneid-menu--dark .oneid-menu-group__title { color: var(--td-font-white-3); } .oneid-default-menu.oneid-menu--dark.oneid-is-collapsed .oneid-menu-group__title:after { background-color: var(--td-gray-color-10); } .oneid-default-menu.oneid-menu--dark.oneid-is-collapsed .oneid-menu__item.oneid-is-active.oneid-is-opened { background-color: var(--td-brand-color); color: var(--td-text-color-anti); } .oneid-default-menu.oneid-menu--dark.oneid-is-collapsed .oneid-menu__item.oneid-is-active.oneid-is-opened .oneid-icon { color: var(--td-text-color-anti); } .oneid-menu { color: var(--td-text-color-primary); font: var(--td-font-body-medium); list-style: none; padding: 0; margin: 0; } .oneid-menu--dark { color: var(--td-font-white-2); } .oneid-menu__logo:not(:empty) { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .oneid-menu .oneid-submenu { position: relative; } .oneid-menu .oneid-submenu.oneid-is-active > .oneid-menu__item { color: var(--td-gray-color-13); } .oneid-menu .oneid-submenu.oneid-is-active > .oneid-menu__item .oneid-icon { color: var(--td-gray-color-13); } .oneid-menu .oneid-submenu .oneid-submenu-icon { width: 16px; height: 16px; } .oneid-menu .oneid-submenu.oneid-is-opened .oneid-submenu-icon { -webkit-transform: scaleY(-1); transform: scaleY(-1); } .oneid-menu__spacer::before { content: ""; display: block; position: absolute; z-index: 1; } .oneid-menu__spacer--left::before { left: -16px; width: 16px; top: 0; bottom: 0; } .oneid-menu__spacer--top::before { top: -20px; left: 0; right: 0; height: 20px; } .oneid-menu__item { position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; height: 40px; line-height: 40px; text-align: center; color: var(--td-text-color-primary); cursor: pointer; text-overflow: ellipsis; border-radius: var(--td-radius-default); --ripple-color: var(--td-bg-color-container-active); } .oneid-menu__item ::-moz-selection { background: transparent; } .oneid-menu__item ::selection { background: transparent; } .oneid-menu__item-spacer { overflow: unset; } .oneid-menu__item-spacer::before { content: ""; display: block; position: absolute; z-index: 1; } .oneid-menu__item-spacer--right::before { right: -16px; width: 16px; top: 0; bottom: 0; } .oneid-menu__item-spacer--bottom::before { bottom: -20px; left: 0; right: 0; height: 20px; } .oneid-menu__item a { color: unset; text-decoration: none; } .oneid-menu__item a.oneid-menu__item-link { color: unset; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; } .oneid-menu__item a.oneid-menu__item-link::before { content: ""; position: absolute; top: 0; bottom: 0; left: 0; right: 0; } .oneid-menu__item.oneid-is-active { color: var(--td-brand-color); background-color: var(--td-brand-color-light); } .oneid-menu__item.oneid-is-opened { color: var(--td-brand-color); } .oneid-menu__item:hover:not(.oneid-is-active):not(.oneid-is-opened):not(.oneid-is-disabled) { background-color: var(--td-bg-color-container-hover); } .oneid-menu__item.oneid-is-disabled { color: var(--td-text-color-disabled); cursor: not-allowed; } .oneid-menu__content { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .oneid-menu--dark.oneid-head-menu { background-color: var(--td-gray-color-13); } .oneid-menu--dark .oneid-menu__item { color: var(--td-text-color-anti); --ripple-color: var(--td-gray-color-11); } .oneid-menu--dark .oneid-menu__item.oneid-is-active { color: var(--td-text-color-anti); background-color: var(--td-brand-color); } .oneid-menu--dark .oneid-menu__item.oneid-is-opened { color: var(--td-text-color-anti); } .oneid-menu--dark .oneid-menu__item.oneid-is-opened .oneid-icon { color: var(--td-text-color-anti); } .oneid-menu--dark .oneid-menu__item.oneid-is-disabled { color: var(--td-font-white-4); } .oneid-menu--dark .oneid-menu__item:hover:not(.oneid-is-active):not(.oneid-is-opened):not(.oneid-is-disabled) { background-color: var(--td-gray-color-10); } .oneid-menu--dark .oneid-menu__popup { background: var(--td-gray-color-13); border: solid 0.5px var(--td-gray-color-10); } .oneid-menu--dark .oneid-menu__popup .oneid-menu__item { color: var(--td-text-color-anti); border-radius: var(--td-radius-default); } .oneid-menu--dark .oneid-menu__popup .oneid-menu__item.oneid-is-active { color: var(--td-text-color-anti); background-color: var(--td-brand-color); } .oneid-menu--dark .oneid-menu__popup .oneid-menu__item:hover:not(.oneid-is-active) { background-color: var(--td-gray-color-10); } .oneid-menu--dark .oneid-head-menu__submenu { border-top: 1px solid transparent; } .oneid-menu--dark .oneid-menu__operations-icon { color: var(--td-bg-color-container); } .oneid-menu--dark .oneid-menu__operations-icon:hover { background-color: var(--td-brand-color); } .oneid-menu__popup { overflow: hidden; background: var(--td-bg-color-container); z-index: 1000; border-radius: var(--td-radius-medium); opacity: 0; list-style: none; padding: 0; margin: 0; } .oneid-menu__popup.oneid-popup__content { position: absolute; } .oneid-menu__popup-wrapper { padding: var(--td-pop-padding-m); height: 100%; list-style: none; margin: 0; } @-moz-document url-prefix() { .oneid-menu__popup-wrapper { scrollbar-color: var(--td-scrollbar-color) transparent; scrollbar-width: thin; } } .oneid-menu__popup-wrapper::-webkit-scrollbar { width: 8px; height: 8px; } .oneid-menu__popup-wrapper::-webkit-scrollbar-thumb { border: 2px solid transparent; background-clip: content-box; background-color: var(--td-scrollbar-color); border-radius: 15px; } .oneid-menu__popup-wrapper::-webkit-scrollbar-thumb:vertical:hover, .oneid-menu__popup-wrapper::-webkit-scrollbar-thumb:horizontal:hover { background-color: var(--td-scrollbar-hover-color); } .oneid-menu__popup .oneid-fake-arrow { margin-left: auto; } .oneid-menu__popup .oneid-menu__item { padding-left: var(--td-comp-paddingLR-l); padding-right: var(--td-comp-paddingLR-l); } .oneid-menu__popup.oneid-is-vertical { min-width: var(--popup-width, 160px); } .oneid-menu__popup.oneid-is-horizontal .oneid-menu__item { white-space: nowrap; } .oneid-menu__popup.oneid-is-horizontal li + li { margin-top: var(--td-comp-margin-xs); } .oneid-menu__popup.oneid-is-opened { opacity: 1; -webkit-box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.1), 0 8px 10px 1px rgba(0, 0, 0, 0.06), 0 3px 14px 6px rgba(0, 0, 0, 0.05); box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.1), 0 8px 10px 1px rgba(0, 0, 0, 0.06), 0 3px 14px 6px rgba(0, 0, 0, 0.05); overflow: visible; } .oneid-menu__popup .oneid-menu__item { color: var(--td-text-color-primary); height: var(--td-comp-size-s); line-height: var(--td-comp-size-s); } .oneid-menu__popup .oneid-menu__item + .oneid-menu__item { margin-left: 0; } .oneid-menu__popup .oneid-menu__item:hover:not(.oneid-is-active) { background-color: var(--td-bg-color-container-hover); } .oneid-menu__popup .oneid-is-disabled { color: var(--td-text-color-disabled); } .oneid-menu__operations-icon { margin-right: var(--td-comp-margin-l); border-radius: var(--td-radius-default); color: var(--td-text-color-primary); -webkit-transition: background-color 0.24s cubic-bezier(0.38, 0, 0.24, 1); transition: background-color 0.24s cubic-bezier(0.38, 0, 0.24, 1); } .oneid-menu__operations-icon:hover { background-color: var(--td-brand-color-light); } .oneid-opacity-transition { -webkit-transition: opacity 0.28s cubic-bezier(0.55, 0, 0.1, 1); transition: opacity 0.28s cubic-bezier(0.55, 0, 0.1, 1); } .horizontal-collapse-transition .oneid-submenu__title .oneid-submenu__icon-arrow { -webkit-transition: 0.2s; transition: 0.2s; opacity: 0; } .oneid-menu__popup { top: 0; left: calc(100% - var(--td-pop-padding-m)); } .oneid-menu__popup .oneid-menu__item:not(:first-child), .oneid-menu__popup .oneid-submenu:not(:first-child) { margin-top: var(--td-comp-margin-xxs); } .oneid-is-head-menu .oneid-menu__popup { margin-top: calc((var(--td-comp-size-xxxl) - var(--td-comp-size-m)) / 2) !important; } .oneid-menu-is-nested .oneid-menu__popup { margin-top: calc(0px - var(--td-pop-padding-m)) !important; } @-webkit-keyframes tDialogZoomIn { 0% { opacity: 0; -webkit-transform: scale(0.01); transform: scale(0.01); } 100% { opacity: 1; } } @keyframes tDialogZoomIn { 0% { opacity: 0; -webkit-transform: scale(0.01); transform: scale(0.01); } 100% { opacity: 1; } } @-webkit-keyframes tDialogZoomOut { from { opacity: 1; } to { opacity: 0; -webkit-transform: scale(0.01); transform: scale(0.01); } } @keyframes tDialogZoomOut { from { opacity: 1; } to { opacity: 0; -webkit-transform: scale(0.01); transform: scale(0.01); } } @-webkit-keyframes tDialogMaskIn { from { opacity: 0; } to { opacity: 1; } } @keyframes tDialogMaskIn { from { opacity: 0; } to { opacity: 1; } } @-webkit-keyframes tDialogMaskOut { from { opacity: 1; } to { opacity: 0; } } @keyframes tDialogMaskOut { from { opacity: 1; } to { opacity: 0; } } .oneid-dialog-zoom .animation-enter { -webkit-animation-duration: 0.2s; animation-duration: 0.2s; -webkit-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-timing-function: cubic-bezier(0, 0, 0.15, 1); animation-timing-function: cubic-bezier(0, 0, 0.15, 1); -webkit-animation-play-state: paused; animation-play-state: paused; } .oneid-dialog-zoom .animation-exit { -webkit-animation-duration: 0.2s; animation-duration: 0.2s; -webkit-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-timing-function: cubic-bezier(0.38, 0, 0.24, 1); animation-timing-function: cubic-bezier(0.38, 0, 0.24, 1); -webkit-animation-play-state: paused; animation-play-state: paused; } .oneid-dialog-zoom .animation-active { -webkit-animation-play-state: running; animation-play-state: running; -webkit-animation-fill-mode: both; animation-fill-mode: both; } .oneid-dialog-zoom-enter, .oneid-dialog-zoom-enter-from, .oneid-dialog-zoom-appear { -webkit-animation-duration: 0.2s; animation-duration: 0.2s; -webkit-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-timing-function: cubic-bezier(0, 0, 0.15, 1); animation-timing-function: cubic-bezier(0, 0, 0.15, 1); -webkit-animation-play-state: paused; animation-play-state: paused; } .oneid-dialog-zoom-exit { -webkit-animation-duration: 0.2s; animation-duration: 0.2s; -webkit-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-timing-function: cubic-bezier(0.38, 0, 0.24, 1); animation-timing-function: cubic-bezier(0.38, 0, 0.24, 1); -webkit-animation-play-state: paused; animation-play-state: paused; } .oneid-dialog-zoom-enter-active, .oneid-dialog-zoom-appear-active { -webkit-animation-name: tDialogZoomIn; animation-name: tDialogZoomIn; -webkit-animation-play-state: running; animation-play-state: running; -webkit-animation-fill-mode: both; animation-fill-mode: both; } .oneid-dialog-zoom-exit-active { -webkit-animation-name: tDialogZoomOut; animation-name: tDialogZoomOut; -webkit-animation-play-state: running; animation-play-state: running; -webkit-animation-fill-mode: both; animation-fill-mode: both; } .oneid-dialog-zoom__vue-enter-active .oneid-dialog { -webkit-animation-name: tDialogZoomIn; animation-name: tDialogZoomIn; -webkit-animation-duration: 0.2s; animation-duration: 0.2s; -webkit-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-timing-function: cubic-bezier(0, 0, 0.15, 1); animation-timing-function: cubic-bezier(0, 0, 0.15, 1); -webkit-animation-play-state: paused; animation-play-state: paused; } .oneid-dialog-zoom__vue-enter-active .oneid-dialog__mask { -webkit-animation-name: tDialogMaskIn; animation-name: tDialogMaskIn; -webkit-animation-duration: 0.2s; animation-duration: 0.2s; -webkit-animation-timing-function: linear; animation-timing-function: linear; -webkit-animation-play-state: running; animation-play-state: running; -webkit-animation-fill-mode: both; animation-fill-mode: both; } .oneid-dialog-zoom__vue-leave-active .oneid-dialog { -webkit-animation-name: tDialogZoomOut; animation-name: tDialogZoomOut; -webkit-animation-duration: 0.2s; animation-duration: 0.2s; -webkit-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-timing-function: cubic-bezier(0.38, 0, 0.24, 1); animation-timing-function: cubic-bezier(0.38, 0, 0.24, 1); -webkit-animation-play-state: paused; animation-play-state: paused; } .oneid-dialog-zoom__vue-leave-active .oneid-dialog__mask { -webkit-animation-name: tDialogMaskOut; animation-name: tDialogMaskOut; -webkit-animation-duration: 0.2s; animation-duration: 0.2s; -webkit-animation-timing-function: linear; animation-timing-function: linear; -webkit-animation-play-state: running; animation-play-state: running; -webkit-animation-fill-mode: both; animation-fill-mode: both; } .oneid-dialog-zoom__vue-enter-to .oneid-dialog { -webkit-animation-play-state: running; animation-play-state: running; -webkit-animation-fill-mode: both; animation-fill-mode: both; } .oneid-dialog-zoom__vue-leave-to .oneid-dialog { -webkit-animation-play-state: running; animation-play-state: running; -webkit-animation-fill-mode: both; animation-fill-mode: both; } .oneid-dialog-fade-enter, .oneid-dialog-fade-appear { opacity: 0; -webkit-animation-duration: 0.2s; animation-duration: 0.2s; -webkit-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-timing-function: cubic-bezier(0, 0, 0.15, 1); animation-timing-function: cubic-bezier(0, 0, 0.15, 1); -webkit-animation-play-state: paused; animation-play-state: paused; } .oneid-dialog-fade-exit { -webkit-animation-duration: 0.2s; animation-duration: 0.2s; -webkit-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-timing-function: cubic-bezier(0, 0, 0.15, 1); animation-timing-function: cubic-bezier(0, 0, 0.15, 1); -webkit-animation-play-state: paused; animation-play-state: paused; } .oneid-dialog-fade-enter.oneid-dialog-fade-enter-active, .oneid-dialog-fade-appear.oneid-dialog-fade-appear-active { -webkit-animation-name: tDialogFadeIn; animation-name: tDialogFadeIn; -webkit-animation-play-state: running; animation-play-state: running; } .oneid-dialog-fade-exit.oneid-dialog-fade-exit-active { -webkit-animation-name: tDialogFadeOut; animation-name: tDialogFadeOut; -webkit-animation-play-state: running; animation-play-state: running; } @-webkit-keyframes tDialogFadeIn { 0% { opacity: 0; } 100% { opacity: 1; } } @keyframes tDialogFadeIn { 0% { opacity: 0; } 100% { opacity: 1; } } @-webkit-keyframes tDialogFadeOut { 0% { opacity: 1; } 100% { opacity: 0; } } @keyframes tDialogFadeOut { 0% { opacity: 1; } 100% { opacity: 0; } } .oneid-dialog { font: var(--td-font-body-medium); color: var(--td-text-color-primary); -webkit-box-sizing: border-box; box-sizing: border-box; margin: 0; padding: 0; list-style: none; width: 480px; background-color: var(--td-bg-color-container); position: relative; border: 1px solid var(--td-border-level-1-color); border-radius: var(--td-radius-large); } .oneid-dialog .oneid-icon.oneid-is-info { color: var(--td-brand-color); } .oneid-dialog .oneid-icon.oneid-is-success { color: var(--td-success-color); } .oneid-dialog .oneid-icon.oneid-is-warning { color: var(--td-warning-color); } .oneid-dialog .oneid-icon.oneid-is-error { color: var(--td-error-color); } .oneid-dialog--lock { overflow: hidden; } .oneid-dialog__header { color: var(--td-text-color-primary); font: var(--td-font-title-medium); font-weight: 600; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; word-break: break-word; gap: var(--td-comp-margin-s); -webkit-box-sizing: border-box; box-sizing: border-box; } .oneid-dialog__header .oneid-dialog__header-content { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; width: 100%; } .oneid-dialog__header .oneid-icon:not(.oneid-icon-close) { font-size: calc(var(--td-font-size-body-large) + 8px); display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; margin-right: var(--td-comp-margin-s); -ms-flex-negative: 0; flex-shrink: 0; } .oneid-dialog__header--fullscreen { background-color: var(--td-bg-color-secondarycontainer); min-height: var(--td-comp-size-xxxl); -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; padding: 0 var(--td-comp-paddingLR-xxl); } .oneid-dialog__header--fullscreen .oneid-dialog__header-content { -webkit-box-sizing: border-box; box-sizing: border-box; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .oneid-dialog__body { color: var(--td-text-color-secondary); font: var(--td-font-body-medium); overflow: auto; padding: var(--td-comp-paddingTB-l) 0; word-break: break-word; } @-moz-document url-prefix() { .oneid-dialog__body { scrollbar-color: var(--td-scrollbar-color) transparent; scrollbar-width: thin; } } .oneid-dialog__body::-webkit-scrollbar { width: 6px; height: 6px; } .oneid-dialog__body::-webkit-scrollbar-thumb { border: 0px solid transparent; background-clip: content-box; background-color: var(--td-scrollbar-color); border-radius: 11px; } .oneid-dialog__body::-webkit-scrollbar-thumb:vertical:hover, .oneid-dialog__body::-webkit-scrollbar-thumb:horizontal:hover { background-color: var(--td-scrollbar-hover-color); } .oneid-dialog__body__icon, .oneid-dialog__body--icon { padding: var(--td-comp-paddingTB-l) 0; } .oneid-dialog__body--fullscreen { -webkit-box-sizing: border-box; box-sizing: border-box; padding: var(--td-comp-paddingTB-xl) var(--td-comp-paddingLR-xxl); height: calc(100% - var(--td-comp-size-xxxl) - var(--td-comp-size-xxxxl)); overflow: auto; } @-moz-document url-prefix() { .oneid-dialog__body--fullscreen { scrollbar-color: var(--td-scrollbar-color) transparent; scrollbar-width: thin; } } .oneid-dialog__body--fullscreen::-webkit-scrollbar { width: 6px; height: 6px; } .oneid-dialog__body--fullscreen::-webkit-scrollbar-thumb { border: 0px solid transparent; background-clip: content-box; background-color: var(--td-scrollbar-color); border-radius: 11px; } .oneid-dialog__body--fullscreen::-webkit-scrollbar-thumb:vertical:hover, .oneid-dialog__body--fullscreen::-webkit-scrollbar-thumb:horizontal:hover { background-color: var(--td-scrollbar-hover-color); } .oneid-dialog__body--fullscreen--without-footer { -webkit-box-sizing: border-box; box-sizing: border-box; padding: var(--td-comp-paddingTB-xl) var(--td-comp-paddingLR-xxl); height: calc(100% - var(--td-comp-size-xxxl)); overflow: auto; } .oneid-dialog__footer { width: 100%; text-align: right; padding: var(--td-comp-paddingTB-l) 0 0; } .oneid-dialog__footer .oneid-button + .oneid-button { margin-left: var(--td-comp-margin-s); } .oneid-dialog__footer--fullscreen { min-height: var(--td-comp-size-xxxxl); padding: 0 var(--td-comp-paddingLR-xxl) var(--td-comp-paddingTB-xxl); -webkit-box-sizing: border-box; box-sizing: border-box; } .oneid-dialog--default { padding: var(--td-comp-paddingTB-xxl) var(--td-comp-paddingLR-xxl); } .oneid-dialog__close { font-size: calc(var(--td-font-size-body-large) + 4px); color: var(--td-text-color-secondary); display: -webkit-box; display: -ms-flexbox; display: flex; width: calc(var(--td-font-size-body-large) + 4px); height: calc(var(--td-font-size-body-large) + 4px); -webkit-box-align: center; -ms-flex-align: center; align-items: center; border-radius: var(--td-radius-default); -webkit-transition: all 0.2s linear; transition: all 0.2s linear; padding: var(--td-comp-paddingTB-xxs) var(--td-comp-paddingLR-xxs); } .oneid-dialog__close:hover { cursor: pointer; background: var(--td-bg-color-container-hover); } .oneid-dialog__close:active { background: var(--td-bg-color-container-active); } .oneid-dialog__close--fullscreen { display: -webkit-box; display: -ms-flexbox; display: flex; background: transparent; } .oneid-dialog__close--fullscreen:hover { cursor: pointer; background: var(--td-bg-color-secondarycontainer-hover); } .oneid-dialog__close--fullscreen:active { background: var(--td-bg-color-secondarycontainer-active); } .oneid-dialog.oneid-dialog--draggable:hover { cursor: move; } .oneid-dialog.oneid-dialog--draggable .oneid-dialog__header:hover, .oneid-dialog.oneid-dialog--draggable .oneid-dialog__body:hover, .oneid-dialog.oneid-dialog--draggable .oneid-dialog__footer:hover { cursor: auto; } .oneid-dialog__fullscreen { width: 100%; border-radius: 0; } .oneid-dialog__ctx { pointer-events: auto; outline: none; top: 0; left: 0; width: 100%; height: 100%; } .oneid-dialog__ctx.oneid-dialog__ctx--modeless { pointer-events: none; } .oneid-dialog__ctx.oneid-dialog__ctx--fixed { position: fixed; z-index: 2500; } .oneid-dialog__ctx.oneid-dialog__ctx--absolute { position: absolute; } .oneid-dialog__ctx.oneid-dialog__ctx--absolute .oneid-dialog__mask { position: absolute; } .oneid-dialog__ctx.oneid-dialog__ctx--absolute .oneid-dialog__wrap { position: absolute; } .oneid-dialog__ctx.oneid-is-visible { visibility: visible; } .oneid-dialog__ctx.oneid-is-hidden { visibility: hidden; } .oneid-dialog__ctx.oneid-is-display { display: block; } .oneid-dialog__ctx.oneid-not-display { display: none; } .oneid-dialog__ctx .oneid-dialog__mask { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; background: var(--td-mask-active); pointer-events: auto; } .oneid-dialog__ctx .oneid-dialog__wrap { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; overflow: auto; } @-moz-document url-prefix() { .oneid-dialog__ctx .oneid-dialog__wrap { scrollbar-color: var(--td-scrollbar-color) transparent; scrollbar-width: thin; } } .oneid-dialog__ctx .oneid-dialog__wrap::-webkit-scrollbar { width: 8px; height: 8px; } .oneid-dialog__ctx .oneid-dialog__wrap::-webkit-scrollbar-thumb { border: 2px solid transparent; background-clip: content-box; background-color: var(--td-scrollbar-color); border-radius: 15px; } .oneid-dialog__ctx .oneid-dialog__wrap::-webkit-scrollbar-thumb:vertical:hover, .oneid-dialog__ctx .oneid-dialog__wrap::-webkit-scrollbar-thumb:horizontal:hover { background-color: var(--td-scrollbar-hover-color); } .oneid-dialog__ctx .oneid-dialog__position { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; min-height: 100%; width: 100%; position: relative; padding: 48px 0; -webkit-box-sizing: border-box; box-sizing: border-box; } .oneid-dialog__ctx .oneid-dialog__position.oneid-dialog--top { -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; padding-top: 20vh; } .oneid-dialog__ctx .oneid-dialog__position.oneid-dialog--center { -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .oneid-dialog__ctx .oneid-dialog__position_fullscreen { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; min-height: 100%; width: 100%; position: relative; -webkit-box-sizing: border-box; box-sizing: border-box; } .oneid-dialog__ctx .oneid-is-hidden { background: none; } .oneid-dialog__ctx .oneid-dialog { pointer-events: auto; z-index: 2500; } .oneid-dialog__ctx.oneid-dialog__ctx--modeless .oneid-dialog { -webkit-box-shadow: var(--td-shadow-3); box-shadow: var(--td-shadow-3); } .oneid-tree { -webkit-box-sizing: border-box; box-sizing: border-box; margin: 0; padding: 0; list-style: none; font: var(--td-font-body-medium); color: var(--td-text-color-primary); position: relative; } .oneid-tree.oneid-is-disabled { color: var(--td-text-color-disabled); } .oneid-tree.oneid-is-disabled .oneid-icon { color: var(--td-text-color-disabled); } .oneid-tree.oneid-is-disabled .oneid-tree__item.oneid-is-active { background-color: var(--td-bg-color-container-hover); color: var(--td-text-color-disabled); } .oneid-tree.oneid-is-disabled .oneid-tree__item .oneid-icon { color: var(--td-text-color-secondary); } .oneid-tree__empty { color: var(--td-text-color-disabled); } .oneid-tree__branch { display: block; } .oneid-tree__item { --level: 0; --hscale: 2; will-change: opacity, max-height; position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: nowrap; flex-wrap: nowrap; -webkit-box-align: center; -ms-flex-align: center; align-items: center; padding: 0 0 0 calc(var(--td-comp-margin-xxl) * var(--level)); cursor: default; -webkit-transform: translateZ(0); transform: translateZ(0); -webkit-backface-visibility: hidden; backface-visibility: hidden; -webkit-perspective: 1000; perspective: 1000; } .oneid-tree__item .oneid-icon, .oneid-tree__item .oneid-loading { display: inline-block; position: relative; z-index: 2; font-size: calc(var(--td-font-size-body-medium) + 2px); } .oneid-tree__item .oneid-icon { color: var(--td-text-color-secondary); } .oneid-tree__item .oneid-checkbox { -webkit-box-align: center; -ms-flex-align: center; align-items: center; font-size: 0; } .oneid-tree__item .oneid-checkbox__input { -ms-flex-negative: 0; flex-shrink: 0; } .oneid-tree__item .oneid-checkbox__label { overflow: hidden; text-overflow: ellipsis; } .oneid-tree__item .oneid-tree__icon--default .oneid-icon { -webkit-transform: rotate(0); transform: rotate(0); } .oneid-tree__item--open .oneid-icon { color: var(--td-text-color-brand); } .oneid-tree__item--open .oneid-tree__icon--default .oneid-icon { -webkit-transform: rotate(90deg); transform: rotate(90deg); } .oneid-tree__item--clickable { cursor: pointer; } .oneid-tree__item--locked { color: var(--td-text-color-disabled); } .oneid-tree__item--matched { color: inherit; } .oneid-tree__item--draggable { cursor: pointer; } .oneid-tree__item--draggable:hover { background-color: var(--td-bg-color-container-hover); background-clip: content-box; } .oneid-tree__item--draggable::after { position: absolute; top: -1px; right: 0; left: 0; display: block; height: 2px; border-radius: 1px; content: ""; padding: inherit; background-clip: content-box; } .oneid-tree__item--tip-top::after { background-color: var(--td-brand-color); } .oneid-tree__item--tip-bottom::after { top: unset; bottom: -1px; background-color: var(--td-brand-color); } .oneid-tree__item--tip-highlight { background-color: var(--td-brand-color-light); background-clip: content-box; } .oneid-tree__item::before { content: ""; display: block; width: 0; -webkit-box-flex: 0; -ms-flex: 0 0 auto; flex: 0 0 auto; height: calc(var(--td-comp-size-m) + 2px); } .oneid-tree--block-node .oneid-tree__label { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; } .oneid-tree--hoverable .oneid-tree__label:not(.oneid-is-active):not(.oneid-is-checked):hover { background-color: var(--td-bg-color-container-hover); } .oneid-tree__line { --level: 0; --color: var(--td-border-level-1-color); --space: var(--td-comp-margin-xxl); --iconSize: 16px; position: absolute; left: calc(var(--td-comp-margin-xxl) * var(--level) - var(--td-comp-margin-l)); bottom: var(--td-comp-margin-l); width: 1px; height: calc(var(--td-comp-size-m) + 2px); pointer-events: none; } .oneid-tree__line::before { content: ""; position: absolute; bottom: 0; left: 0; display: block; height: calc(var(--td-comp-size-m) + 2px); width: var(--td-comp-margin-m); border-left: 1px solid var(--color); border-bottom: 1px solid var(--color); } .oneid-tree__line--first::before { height: var(--td-line-height-body-medium); } .oneid-tree__line--leaf::before { width: var(--td-comp-margin-m); } .oneid-tree__icon { position: relative; -webkit-box-flex: 0; -ms-flex: none; flex: none; display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; text-align: center; width: calc(var(--td-font-size-body-medium) + 2px); font-size: 0; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; cursor: pointer; } .oneid-tree__icon::after { content: ""; display: block; position: absolute; left: -2px; top: -2px; width: calc(var(--td-font-size-body-medium) + 2px + 4px); height: calc(var(--td-font-size-body-medium) + 2px + 4px); border-radius: var(--td-radius-default); } .oneid-tree__icon:not(:empty):hover { background-color: var(--td-bg-color-container-hover); } .oneid-tree__icon:empty { cursor: initial; } .oneid-tree__label { --ripple-color: var(--td-bg-color-container-active); -ms-flex-wrap: nowrap; flex-wrap: nowrap; -webkit-box-flex: 1; -ms-flex: 1; flex: 1; padding: var(--td-comp-paddingTB-xxs) var(--td-comp-paddingLR-xs); margin-left: var(--td-comp-margin-xs); border-radius: var(--td-radius-default); cursor: pointer; white-space: nowrap; word-wrap: normal; overflow: hidden; text-overflow: ellipsis; } .oneid-tree__label.oneid-is-checked { font-weight: 500; color: var(--td-text-color-primary); background-color: var(--td-brand-color-light); } .oneid-tree__label::-moz-selection { background-color: transparent; } .oneid-tree__label::selection { background-color: transparent; } .oneid-is-active .oneid-tree__label { font-weight: 500; color: var(--td-text-color-primary); background-color: var(--td-brand-color-light); } .oneid-tree__space { display: block; -webkit-box-flex: 1; -ms-flex: 1 0 auto; flex: 1 0 auto; } .oneid-tree__operations { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-flex: 0; -ms-flex: 0 0 auto; flex: 0 0 auto; -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; -webkit-box-align: center; -ms-flex-align: center; align-items: center; margin-left: auto; } .oneid-tree__operations .oneid-icon { cursor: pointer; } .oneid-tree__item.oneid-is-disabled { color: var(--td-text-color-disabled); cursor: default; } .oneid-tree__item.oneid-is-disabled .oneid-checkbox { cursor: default; } .oneid-tree__item--hidden { display: none; } .oneid-tree--transition .oneid-tree__label { -webkit-transition: background-color 0.24s cubic-bezier(0.38, 0, 0.24, 1); transition: background-color 0.24s cubic-bezier(0.38, 0, 0.24, 1); } .oneid-tree--transition .oneid-tree__icon { -webkit-transition: color, -webkit-transform 0.24s cubic-bezier(0.38, 0, 0.24, 1); transition: color, -webkit-transform 0.24s cubic-bezier(0.38, 0, 0.24, 1); transition: color, transform 0.24s cubic-bezier(0.38, 0, 0.24, 1); transition: color, transform 0.24s cubic-bezier(0.38, 0, 0.24, 1), -webkit-transform 0.24s cubic-bezier(0.38, 0, 0.24, 1); } .oneid-tree--transition .oneid-tree__icon::after { -webkit-transition: 0.2s linear; transition: 0.2s linear; } .oneid-tree--transition .oneid-tree__icon:not(:empty):hover { -webkit-transition: 0.2s linear; transition: 0.2s linear; } .oneid-tree--transition .oneid-tree__icon--default .oneid-icon { -webkit-transition: color, -webkit-transform cubic-bezier(0.38, 0, 0.24, 1) 0.2s; transition: color, -webkit-transform cubic-bezier(0.38, 0, 0.24, 1) 0.2s; transition: color, transform cubic-bezier(0.38, 0, 0.24, 1) 0.2s; transition: color, transform cubic-bezier(0.38, 0, 0.24, 1) 0.2s, -webkit-transform cubic-bezier(0.38, 0, 0.24, 1) 0.2s; } .oneid-tree--transition .oneid-tree__item--visible { display: -webkit-box; display: -ms-flexbox; display: flex; max-height: calc((var(--td-comp-size-m) + 2px) * var(--hscale) + 0px); opacity: 1; -webkit-transition: opacity 150ms linear 150ms, max-height 150ms linear 0s; transition: opacity 150ms linear 150ms, max-height 150ms linear 0s; } .oneid-tree--transition .oneid-tree__item--hidden { display: -webkit-box; display: -ms-flexbox; display: flex; max-height: 0; opacity: 0; overflow: hidden; pointer-events: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -webkit-animation: initial; animation: initial; -webkit-transition: opacity 150ms linear 0s, max-height 150ms linear 150ms; transition: opacity 150ms linear 0s, max-height 150ms linear 150ms; } .oneid-tree--transition .oneid-tree__item--enter-active { -webkit-animation: t-tree-toggle 300ms linear; animation: t-tree-toggle 300ms linear; } .oneid-tree--transition .oneid-tree__item--leave-active { animation: t-tree-toggle 300ms reverse linear forwards; } .oneid-tree__vscroll { overflow-y: auto; } .oneid-tree__lazyload { overflow-y: auto; } .oneid-tree__vscroll-cursor { position: absolute; width: 1px; height: 1px; -webkit-transition: -webkit-transform 0.2s; transition: -webkit-transform 0.2s; transition: transform 0.2s; transition: transform 0.2s, -webkit-transform 0.2s; } .oneid-tree--scrolling .oneid-tree__item { will-change: initial; } .oneid-tree--scrolling .v-enter, .oneid-tree--scrolling .v-leave, .oneid-tree--scrolling .oneid-tree__item--visible, .oneid-tree--scrolling .oneid-tree__item--hidden, .oneid-tree--scrolling .oneid-tree__item--enter, .oneid-tree--scrolling .oneid-tree__item--enter-active, .oneid-tree--scrolling .oneid-tree__item--enter-to, .oneid-tree--scrolling .oneid-tree__item--leave, .oneid-tree--scrolling .oneid-tree__item--leave-active .oneid-tree__item--leave-to { -webkit-animation: none; animation: none; -webkit-transition: none; transition: none; } .oneid-tree--scrolling .oneid-tree__item--visible { max-height: initial; } .oneid-tree--scrolling .oneid-tree__item--enter-to, .oneid-tree--scrolling .oneid-tree__item--enter-active { max-height: initial; } .oneid-tree--scrolling .oneid-tree__item--leave-to, .oneid-tree--scrolling .oneid-tree__item--leave-active { max-height: 0; } @-webkit-keyframes t-tree-toggle { 0% { opacity: 0; max-height: 0; } 50% { opacity: 0; max-height: calc((var(--td-comp-size-m) + 2px) * var(--hscale) + 0px); } 100% { opacity: 1; max-height: calc((var(--td-comp-size-m) + 2px) * var(--hscale) + 0px); } } @keyframes t-tree-toggle { 0% { opacity: 0; max-height: 0; } 50% { opacity: 0; max-height: calc((var(--td-comp-size-m) + 2px) * var(--hscale) + 0px); } 100% { opacity: 1; max-height: calc((var(--td-comp-size-m) + 2px) * var(--hscale) + 0px); } } .oneid-tree-select { font: var(--td-font-body-medium); color: var(--td-text-color-primary); -webkit-box-sizing: border-box; box-sizing: border-box; margin: 0; padding: 0; list-style: none; } .oneid-tree-select--without-input input { display: none; } .oneid-tree-select--without-input .oneid-input__suffix-icon { margin-left: auto; } .oneid-tree-select .oneid-fake-arrow { -webkit-transition: color 0.2s cubic-bezier(0.38, 0, 0.24, 1); transition: color 0.2s cubic-bezier(0.38, 0, 0.24, 1); color: var(--td-text-color-placeholder); } .oneid-tree-select .oneid-fake-arrow--highlight { color: var(--td-text-color-brand); } .oneid-tree-select .oneid-fake-arrow--disable { color: var(--td-text-color-disabled); } .oneid-tree-select--placeholder { color: var(--td-text-color-placeholder); } .oneid-tree-select.oneid-single-suffix { padding-right: 20px; } .oneid-tree-select.oneid-tag-prefix { padding-left: 4px; } .oneid-tree-select-popup .oneid-popup__content { padding: var(--td-pop-padding-m); max-height: 300px; overflow-y: auto; } @-moz-document url-prefix() { .oneid-tree-select-popup .oneid-popup__content { scrollbar-color: var(--td-scrollbar-color) transparent; scrollbar-width: thin; } } .oneid-tree-select-popup .oneid-popup__content::-webkit-scrollbar { width: 8px; height: 8px; } .oneid-tree-select-popup .oneid-popup__content::-webkit-scrollbar-thumb { border: 2px solid transparent; background-clip: content-box; background-color: var(--td-scrollbar-color); border-radius: 15px; } .oneid-tree-select-popup .oneid-popup__content::-webkit-scrollbar-thumb:vertical:hover, .oneid-tree-select-popup .oneid-popup__content::-webkit-scrollbar-thumb:horizontal:hover { background-color: var(--td-scrollbar-hover-color); } .oneid-divider { margin: 0; padding: 0; list-style: none; font: var(--td-font-body-medium); margin: var(--td-comp-margin-xxl) 0; border-top: 1px solid var(--td-border-level-1-color); color: var(--td-text-color-primary); -webkit-box-sizing: border-box; box-sizing: border-box; } .oneid-divider--dashed { border-top-style: dashed; } .oneid-divider--horizontal { width: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; } .oneid-divider--vertical { border-top: 0; display: inline-block; margin: 0 var(--td-comp-margin-m); border-left: 1px solid var(--td-border-level-1-color); height: 0.9em; vertical-align: middle; } .oneid-divider--with-text { display: -webkit-box; display: -ms-flexbox; display: flex; border-top: 0; white-space: nowrap; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .oneid-divider--with-text .oneid-divider__inner-text:not(:empty) { padding: 0 1em; display: inline-block; } .oneid-divider--with-text::before, .oneid-divider--with-text::after { content: ""; width: 50%; border-top: 1px solid var(--td-border-level-1-color); } .oneid-divider--with-text-left::before { width: 5%; } .oneid-divider--with-text-left::after { width: 95%; } .oneid-divider--with-text-right::before { width: 95%; } .oneid-divider--with-text-right::after { width: 5%; } .oneid-divider--dashed::before, .oneid-divider--dashed::after { border-top: 1px dashed var(--td-border-level-1-color); } .oneid-divider--vertical.oneid-divider--dashed { border-left: 1px dashed var(--td-border-level-1-color); } .oneid-switch { font: var(--td-font-body-medium); color: var(--td-text-color-primary); -webkit-box-sizing: border-box; box-sizing: border-box; list-style: none; position: relative; display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; vertical-align: middle; -webkit-box-align: center; -ms-flex-align: center; align-items: center; outline: none; border: 0; padding: 0; margin: 0; height: var(--td-comp-size-xxs); line-height: var(--td-comp-size-xxs); border-radius: var(--td-radius-round); min-width: calc(var(--td-comp-size-xxs) / 0.618); -webkit-transition: all 0.2s cubic-bezier(0.38, 0, 0.24, 1); transition: all 0.2s cubic-bezier(0.38, 0, 0.24, 1); background-color: var(--td-bg-color-secondarycomponent); cursor: pointer; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .oneid-switch:hover { background-color: var(--td-bg-color-secondarycomponent-hover); } .oneid-switch__handle { position: absolute; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; top: 4px; left: 4px; width: calc(var(--td-comp-size-xxs) - 8px); height: calc(var(--td-comp-size-xxs) - 8px); border-radius: var(--td-radius-round); -webkit-transition: all 0.2s cubic-bezier(0.38, 0, 0.24, 1); transition: all 0.2s cubic-bezier(0.38, 0, 0.24, 1); -webkit-box-shadow: var(--td-shadow-1); box-shadow: var(--td-shadow-1); } .oneid-switch__handle .oneid-icon { font-size: calc(var(--td-comp-size-xxs) - 4px); color: transparent; } .oneid-switch__handle::before { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; border-radius: var(--td-radius-round); background-color: #fff; -webkit-transition: all 0.2s cubic-bezier(0.38, 0, 0.24, 1); transition: all 0.2s cubic-bezier(0.38, 0, 0.24, 1); } .oneid-switch:active:not(.oneid-is-disabled):not(.oneid-is-loading) .oneid-switch__handle::before { left: 0; right: -6px; } .oneid-switch:active:not(.oneid-is-disabled):not(.oneid-is-loading).oneid-is-checked .oneid-switch__handle::before { right: 0; left: -6px; } .oneid-switch:active:not(.oneid-is-disabled):not(.oneid-is-loading) .oneid-switch__content { opacity: 0; } .oneid-switch__content { -webkit-box-sizing: border-box; box-sizing: border-box; display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; color: var(--td-text-color-anti); padding: 0 var(--td-comp-margin-xs) 0 calc(var(--td-comp-size-xxs) / 0.618 / 2 + 2px); font-size: var(--td-font-size-body-small); min-width: calc(var(--td-comp-size-xxs) / 0.618); -webkit-transition: padding 0.2s cubic-bezier(0.38, 0, 0.24, 1), opacity 0.2s linear; transition: padding 0.2s cubic-bezier(0.38, 0, 0.24, 1), opacity 0.2s linear; } .oneid-switch__content .oneid-icon { font-size: var(--td-font-size-body-large); } .oneid-switch.oneid-is-checked { background-color: var(--td-brand-color); } .oneid-switch.oneid-is-checked:hover { background-color: var(--td-brand-color-hover); } .oneid-switch.oneid-is-checked .oneid-switch__handle { left: calc(100% - 2.5px); -webkit-transform: translate(-100%, 0); transform: translate(-100%, 0); width: calc(var(--td-comp-size-xxs) - 5px); height: calc(var(--td-comp-size-xxs) - 5px); top: 2.5px; } .oneid-switch.oneid-is-checked .oneid-switch__content { padding: 0 calc(var(--td-comp-size-xxs) / 0.618 / 2 + 2px) 0 var(--td-comp-margin-xs); color: var(--td-text-color-anti); } .oneid-switch.oneid-is-loading { cursor: not-allowed; background-color: var(--td-bg-color-component-disabled); } .oneid-switch.oneid-is-loading .oneid-loading { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; } .oneid-switch.oneid-is-loading .oneid-switch__handle .oneid-icon { color: var(--td-bg-color-component-disabled); } .oneid-switch.oneid-is-loading.oneid-is-checked { background-color: var(--td-brand-color-focus); } .oneid-switch.oneid-is-loading.oneid-is-checked .oneid-switch__handle .oneid-icon { color: var(--td-brand-color-focus); } .oneid-switch.oneid-is-disabled { cursor: not-allowed; background-color: var(--td-bg-color-component-disabled); } .oneid-switch.oneid-is-disabled .oneid-switch__handle { -webkit-box-shadow: none; box-shadow: none; } .oneid-switch.oneid-is-disabled.oneid-is-checked { background-color: var(--td-brand-color-disabled); } .oneid-switch.oneid-is-disabled.oneid-is-checked .oneid-switch__handle { -webkit-box-shadow: none; box-shadow: none; } .oneid-switch.oneid-is-disabled.oneid-is-checked .oneid-switch__handle .oneid-icon { color: var(--td-brand-color-disabled); } .oneid-switch.oneid-size-l { min-width: calc(var(--td-comp-size-xs) / 0.618); height: var(--td-comp-size-xs); line-height: var(--td-comp-size-xs); border-radius: var(--td-radius-round); } .oneid-switch.oneid-size-l:active:not(.oneid-is-disabled):not(.oneid-is-loading) .oneid-switch__handle::before { left: 0; right: -8px; } .oneid-switch.oneid-size-l:active:not(.oneid-is-disabled):not(.oneid-is-loading).oneid-is-checked .oneid-switch__handle::before { right: 0; left: -8px; } .oneid-switch.oneid-size-l .oneid-switch__handle { top: 5px; left: 5px; width: calc(var(--td-comp-size-xs) - 10px); height: calc(var(--td-comp-size-xs) - 10px); } .oneid-switch.oneid-size-l .oneid-switch__handle .oneid-icon { font-size: calc(var(--td-comp-size-xs) - 4px); } .oneid-switch.oneid-size-l .oneid-switch__content { padding: 0 var(--td-comp-margin-s) 0 calc(var(--td-comp-size-xs) / 0.618 / 2 + 4px); min-width: calc(var(--td-comp-size-xs) / 0.618); font-size: var(--td-font-size-body-large); } .oneid-switch.oneid-size-l .oneid-switch__content .oneid-icon { font-size: var(--td-font-size-body-large); } .oneid-switch.oneid-size-l.oneid-is-checked .oneid-switch__handle { left: calc(100% - 3px); top: 3px; width: calc(var(--td-comp-size-xs) - 6px); height: calc(var(--td-comp-size-xs) - 6px); } .oneid-switch.oneid-size-l.oneid-is-checked .oneid-switch__content { padding: 0 calc(var(--td-comp-size-xs) / 0.618 / 2 + 4px) 0 var(--td-comp-margin-s); } .oneid-switch.oneid-size-s { min-width: calc(var(--td-comp-size-xxxs) / 0.618); height: var(--td-comp-size-xxxs); line-height: var(--td-comp-size-xxxs); border-radius: var(--td-radius-round); } .oneid-switch.oneid-size-s:active:not(.oneid-is-disabled):not(.oneid-is-loading) .oneid-switch__handle::before { left: 0; right: -4px; } .oneid-switch.oneid-size-s:active:not(.oneid-is-disabled):not(.oneid-is-loading).oneid-is-checked .oneid-switch__handle::before { right: 0; left: -4px; } .oneid-switch.oneid-size-s .oneid-switch__handle { top: 3px; left: 3px; width: calc(var(--td-comp-size-xxxs) - 6px); height: calc(var(--td-comp-size-xxxs) - 6px); } .oneid-switch.oneid-size-s .oneid-switch__handle .oneid-icon { font-size: calc(var(--td-comp-size-xxxs) - 4px); } .oneid-switch.oneid-size-s .oneid-switch__content { padding: 0 var(--td-comp-margin-xxs) 0 calc(var(--td-comp-size-xxxs) / 0.618 / 2 + 2px); min-width: calc(var(--td-comp-size-xxxs) / 0.618); font-size: 9px; } .oneid-switch.oneid-size-s .oneid-switch__content .oneid-icon { font-size: var(--td-font-size-body-large); } .oneid-switch.oneid-size-s.oneid-is-checked .oneid-switch__handle { left: calc(100% - 2px); top: 2px; width: calc(var(--td-comp-size-xxxs) - 4px); height: calc(var(--td-comp-size-xxxs) - 4px); } .oneid-switch.oneid-size-s.oneid-is-checked .oneid-switch__content { padding: 0 calc(var(--td-comp-size-xxxs) / 0.618 / 2 + 2px) 0 var(--td-comp-margin-xxs); } .oneid-anchor { -webkit-box-sizing: border-box; box-sizing: border-box; margin: 0; padding: 0; list-style: none; --td-anchor-space-base: var(--td-size-6); position: relative; background: var(--td-bg-color-container); width: 200px; color: var(--td-text-color-primary); font: var(--td-font-body-medium); } .oneid-anchor .oneid-is-active > a { color: var(--td-brand-color); } .oneid-anchor__line { position: absolute; top: 0; left: 0; width: 1px; height: 100%; background-color: var(--td-component-stroke); cursor: pointer; } .oneid-anchor__line-cursor-wrapper { position: absolute; display: block; height: 0; opacity: 0; -webkit-transition: all 0.2s cubic-bezier(0.24, 0.41, 0.51, 0.9); transition: all 0.2s cubic-bezier(0.24, 0.41, 0.51, 0.9); } .oneid-anchor__line-cursor-wrapper .oneid-anchor__line-cursor { width: 1px; height: 100%; background-color: var(--td-brand-color); } .oneid-anchor__item { padding: var(--td-comp-paddingTB-xxs) var(--td-comp-paddingTB-l); --level: 1; padding-left: calc(var(--level) * var(--td-anchor-space-base)); display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } .oneid-anchor__item.oneid-is-active { font-weight: 500; } .oneid-anchor__item-link { display: inline-block; position: relative; overflow: hidden; word-break: break-all; color: var(--td-text-color-primary); text-decoration: none; text-align: justify; } .oneid-anchor a { -webkit-transition: color 0.2s linear; transition: color 0.2s linear; } .oneid-anchor a:hover { color: var(--td-brand-color); cursor: pointer; } .oneid-anchor a:active { color: var(--td-brand-color-active); } .oneid-anchor.oneid-size-s { width: 120px; } .oneid-anchor.oneid-size-l { width: 320px; } .oneid-anchor__target { cursor: pointer; font: var(--td-font-body-medium); color: var(--td-text-color-primary); } @-webkit-keyframes fadeOut { 0% { opacity: 1; } 100% { opacity: 0; display: none; } } @keyframes fadeOut { 0% { opacity: 1; } 100% { opacity: 0; display: none; } } .oneid-anchor__target .oneid-anchor__copy { display: none; margin: 0 0 0 var(--td-comp-margin-xs); } .oneid-anchor__target:hover .oneid-anchor__copy { display: inline-block; } .oneid-anchor__target:target::after { display: inline-block; content: ""; width: 6px; height: 6px; border-radius: var(--td-radius-circle); background-color: var(--td-brand-color); vertical-align: middle; -webkit-animation: fadeOut 2s 2s linear 1; animation: fadeOut 2s 2s linear 1; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; } .oneid-calendar { font: var(--td-font-body-medium); color: var(--td-text-color-primary); -webkit-box-sizing: border-box; box-sizing: border-box; margin: 0; padding: 0; list-style: none; border: 1px solid var(--td-border-level-1-color); background-color: var(--td-bg-color-container); border-radius: var(--td-radius-large); } .oneid-calendar .oneid-is-disabled.oneid-calendar__table-body-cell:hover { cursor: not-allowed; } .oneid-calendar .oneid-is-disabled .oneid-calendar__table-body-cell-display { color: var(--td-text-color-disabled); } .oneid-calendar .oneid-is-disabled .oneid-calendar__table-body-cell-display:hover { -webkit-box-shadow: none; box-shadow: none; } .oneid-calendar--full { min-width: 560px; padding: var(--td-comp-paddingTB-xxl) var(--td-comp-paddingLR-xxl); } .oneid-calendar--full .oneid-calendar__control { padding: 0; } .oneid-calendar--full .oneid-calendar__title { font: var(--td-font-title-large); -webkit-box-flex: 1; -ms-flex: 1; flex: 1; } .oneid-calendar--full .oneid-calendar__panel { position: relative; margin-top: var(--td-comp-margin-xxxl); } .oneid-calendar--full .oneid-calendar__panel-title { font: var(--td-font-title-large); color: var(--td-text-color-primary); position: absolute; } .oneid-calendar--full .oneid-calendar__table-head-cell, .oneid-calendar--full .oneid-calendar__table-body-cell { margin-right: var(--td-comp-margin-s); position: relative; } .oneid-calendar--full .oneid-calendar__table-body-cell { border-top: 2px solid var(--td-border-level-1-color); padding: 0; height: 104px; line-height: var(--td-line-height-body-medium); display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: end; -ms-flex-align: end; align-items: flex-end; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; margin-left: 0; -webkit-transition-duration: 0.2s; transition-duration: 0.2s; -webkit-transition-property: border-top, background; transition-property: border-top, background; -webkit-transition-timing-function: linear; transition-timing-function: linear; } .oneid-calendar--full .oneid-calendar__table-body-cell-content { padding: var(--td-comp-paddingTB-s) var(--td-comp-paddingLR-xs); width: 100%; -webkit-box-sizing: border-box; box-sizing: border-box; } .oneid-calendar--full .oneid-calendar__table-body-cell.oneid-is-checked { background-color: var(--td-brand-color-light); } .oneid-calendar--full .oneid-calendar__table-body-cell.oneid-is-checked:hover { background-color: var(--td-brand-color-light); } .oneid-calendar--full .oneid-calendar__table-body-cell--now { border-top: 2px solid var(--td-brand-color); } .oneid-calendar--full .oneid-calendar__table-body-cell--now .oneid-calendar__table-body-cell-display { color: var(--td-text-color-primary); } .oneid-calendar--full .oneid-calendar__footer { height: 90px; padding: var(--td-comp-paddingTB-xxl) var(--td-comp-paddingLR-xxl); border-top: 1px solid var(--td-border-level-1-color); } .oneid-calendar--card { width: 280px; border-radius: var(--td-radius-medium); padding: var(--td-comp-paddingTB-m) var(--td-comp-paddingLR-m); } .oneid-calendar--card .oneid-calendar__control { padding: 0; } .oneid-calendar--card .oneid-calendar__control-section { width: 100%; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; } .oneid-calendar--card .oneid-calendar__control-section-cell:last-child { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; text-align: right; display: block; } .oneid-calendar--card .oneid-calendar__panel.oneid-calendar__panel--month { height: 200px; margin-top: var(--td-comp-margin-m); } .oneid-calendar--card .oneid-calendar__panel.oneid-calendar__panel--year { height: 168px; margin-top: var(--td-comp-margin-m); } .oneid-calendar--card .oneid-calendar__panel.oneid-calendar__panel--year .oneid-calendar__table-body-cell-display { min-width: var(--td-comp-size-xxl); } .oneid-calendar--card .oneid-calendar__table { width: 100%; height: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; justify-self: start; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; } .oneid-calendar--card .oneid-calendar__table-head-row, .oneid-calendar--card .oneid-calendar__table-body-row { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; background: var(--td-bg-color-container); } .oneid-calendar--card .oneid-calendar__table-head-cell, .oneid-calendar--card .oneid-calendar__table-body-cell { width: 100%; height: 100%; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; font: var(--td-font-body-medium); -webkit-box-sizing: border-box; box-sizing: border-box; } .oneid-calendar--card .oneid-calendar__table-head-cell-display, .oneid-calendar--card .oneid-calendar__table-body-cell-display { width: var(--td-comp-size-xs); line-height: var(--td-comp-size-xs); } .oneid-calendar--card .oneid-calendar__table-body { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; justify-self: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-flex: 1; -ms-flex: 1; flex: 1; } .oneid-calendar--card .oneid-calendar__table-body-cell { -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .oneid-calendar--card .oneid-calendar__table-body-cell:hover { background-color: var(--td-bg-color-container); } .oneid-calendar--card .oneid-calendar__table-body-cell-display { font: var(--td-font-body-medium); padding-top: calc(var(--td-comp-paddingTB-xxs) / 2); padding-bottom: calc(var(--td-comp-paddingTB-xxs) / 2); text-align: center; border-radius: var(--td-radius-default); -webkit-transition: all 0.2s linear; transition: all 0.2s linear; } .oneid-calendar--card .oneid-calendar__table-body-cell-display:hover { -webkit-box-shadow: inset 0 0 0 1px var(--td-brand-color); box-shadow: inset 0 0 0 1px var(--td-brand-color); -webkit-transition: -webkit-box-shadow 0.2s linear; transition: -webkit-box-shadow 0.2s linear; transition: box-shadow 0.2s linear; transition: box-shadow 0.2s linear, -webkit-box-shadow 0.2s linear; } .oneid-calendar--card .oneid-calendar__table-body-cell--now .oneid-calendar__table-body-cell-display { color: var(--td-brand-color); background-color: var(--td-brand-color-light); position: relative; } .oneid-calendar--card .oneid-is-checked .oneid-calendar__table-body-cell-display { background: var(--td-brand-color); border-radius: var(--td-radius-default); color: var(--td-text-color-anti); } .oneid-calendar--card .oneid-calendar__footer { height: var(--td-comp-size-xxl); padding: 0 var(--td-comp-paddingLR-m); border-top: 1px solid var(--td-border-level-1-color); } .oneid-calendar__control { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .oneid-calendar__control-section { height: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .oneid-calendar__control-section:last-child { margin-right: 0; } .oneid-calendar__control-section-cell { height: 100%; margin-right: var(--td-comp-margin-s); display: -webkit-box; display: -ms-flexbox; display: flex; } .oneid-calendar__control-section-cell .oneid-radio-group { vertical-align: bottom; } .oneid-calendar__control-section-cell .oneid-select { display: inline; } .oneid-calendar__control-section-cell:last-child { margin-right: 0; } .oneid-calendar__panel { -webkit-box-sizing: border-box; box-sizing: border-box; width: 100%; } .oneid-calendar__table { border-collapse: collapse; border-spacing: 0; width: 100%; height: 100%; } .oneid-calendar__table-head, .oneid-calendar__table-body { width: 100%; } .oneid-calendar__table-head-row, .oneid-calendar__table-body-row { width: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; } .oneid-calendar__table-head-cell, .oneid-calendar__table-body-cell { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; font: var(--td-font-title-small); color: var(--td-text-color-primary); cursor: default; padding: 0; } .oneid-calendar__table-head-cell:last-child, .oneid-calendar__table-body-cell:last-child { margin-right: 0; } .oneid-calendar__table-head { margin-bottom: var(--td-comp-margin-s); display: block; } .oneid-calendar__table-head-row { padding-bottom: 0px; background: var(--td-bg-color-container); } .oneid-calendar__table-head-cell { height: 100%; font: var(--td-font-title-small); color: var(--td-text-color-secondary); } .oneid-calendar__table-body-cell { cursor: pointer; } .oneid-calendar__table-body-cell:hover { background-color: var(--td-bg-color-container-hover); -webkit-transition: background-color 0.2s linear; transition: background-color 0.2s linear; } .oneid-calendar__table-body-cell-display { font: var(--td-font-title-small); color: var(--td-text-color-primary); } .oneid-link { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; cursor: pointer; -webkit-box-align: center; -ms-flex-align: center; align-items: center; position: relative; text-decoration: none; outline: none; padding: 0; -webkit-transition: all 0.2s linear; transition: all 0.2s linear; font: var(--td-font-link-medium); } .oneid-link .oneid-link__prefix-icon { margin-right: var(--td-comp-margin-s); display: -webkit-box; display: -ms-flexbox; display: flex; } .oneid-link .oneid-link__suffix-icon { margin-left: var(--td-comp-margin-s); display: -webkit-box; display: -ms-flexbox; display: flex; } .oneid-link.oneid-size-s { font: var(--td-font-link-small); } .oneid-link.oneid-size-s .oneid-link__prefix-icon { margin-right: var(--td-comp-margin-xs); display: -webkit-box; display: -ms-flexbox; display: flex; } .oneid-link.oneid-size-s .oneid-link__suffix-icon { margin-left: var(--td-comp-margin-xs); display: -webkit-box; display: -ms-flexbox; display: flex; } .oneid-link.oneid-size-l { font: var(--td-font-link-large); } .oneid-link.oneid-size-l .oneid-link__prefix-icon { margin-right: var(--td-comp-margin-m); display: -webkit-box; display: -ms-flexbox; display: flex; } .oneid-link.oneid-size-l .oneid-link__suffix-icon { margin-left: var(--td-comp-margin-m); display: -webkit-box; display: -ms-flexbox; display: flex; } .oneid-link--theme-default { color: var(--td-text-color-primary); } .oneid-link--theme-default:active { color: var(--td-brand-color-active); } .oneid-link--theme-default.oneid-link--hover-underline::after { content: ""; position: absolute; left: 0; right: 0; height: 0; bottom: 0; border-bottom: 1px solid var(--td-text-color-primary); opacity: 0; -webkit-transition: all 0.2s linear; transition: all 0.2s linear; } .oneid-link--theme-default.oneid-link--hover-underline:hover::after { opacity: 1; } .oneid-link--theme-default.oneid-link--hover-underline:active::after { opacity: 1; border-color: var(--td-brand-color-active); } .oneid-link--theme-default.oneid-link--hover-color:hover { color: var(--td-brand-color-hover); } .oneid-link--theme-default.oneid-link--hover-color.oneid-is-underline:hover::after { border-color: var(--td-brand-color-hover); } .oneid-link--theme-default.oneid-link--hover-color.oneid-is-underline:active::after { border-color: var(--td-brand-color-active); } .oneid-link--theme-default.oneid-link--hover-color:active { color: var(--td-brand-color-active); } .oneid-link--theme-default.oneid-is-underline::after { content: ""; position: absolute; left: 0; right: 0; height: 0; bottom: 0; opacity: 1; border-bottom: 1px solid var(--td-text-color-primary); -webkit-transition: all 0.2s linear; transition: all 0.2s linear; } .oneid-link--theme-default.oneid-is-disabled { cursor: not-allowed; color: var(--td-text-color-disabled); } .oneid-link--theme-default.oneid-is-disabled:hover, .oneid-link--theme-default.oneid-is-disabled:active { color: var(--td-text-color-disabled); } .oneid-link--theme-default.oneid-is-disabled.oneid-is-underline::after { border-color: var(--td-text-color-disabled); } .oneid-link--theme-primary { color: var(--td-brand-color); } .oneid-link--theme-primary:active { color: var(--td-brand-color-active); } .oneid-link--theme-primary.oneid-link--hover-underline::after { content: ""; position: absolute; left: 0; right: 0; height: 0; bottom: 0; border-bottom: 1px solid var(--td-brand-color); opacity: 0; -webkit-transition: all 0.2s linear; transition: all 0.2s linear; } .oneid-link--theme-primary.oneid-link--hover-underline:hover::after { opacity: 1; } .oneid-link--theme-primary.oneid-link--hover-underline:active::after { opacity: 1; border-color: var(--td-brand-color-active); } .oneid-link--theme-primary.oneid-link--hover-color:hover { color: var(--td-brand-color-hover); } .oneid-link--theme-primary.oneid-link--hover-color.oneid-is-underline:hover::after { border-color: var(--td-brand-color-hover); } .oneid-link--theme-primary.oneid-link--hover-color.oneid-is-underline:active::after { border-color: var(--td-brand-color-active); } .oneid-link--theme-primary.oneid-link--hover-color:active { color: var(--td-brand-color-active); } .oneid-link--theme-primary.oneid-is-underline::after { content: ""; position: absolute; left: 0; right: 0; height: 0; bottom: 0; opacity: 1; border-bottom: 1px solid var(--td-brand-color); -webkit-transition: all 0.2s linear; transition: all 0.2s linear; } .oneid-link--theme-primary.oneid-is-disabled { cursor: not-allowed; color: var(--td-brand-color-disabled); } .oneid-link--theme-primary.oneid-is-disabled:hover, .oneid-link--theme-primary.oneid-is-disabled:active { color: var(--td-brand-color-disabled); } .oneid-link--theme-primary.oneid-is-disabled.oneid-is-underline::after { border-color: var(--td-brand-color-disabled); } .oneid-link--theme-success { color: var(--td-success-color); } .oneid-link--theme-success:active { color: var(--td-success-color-active); } .oneid-link--theme-success.oneid-link--hover-underline::after { content: ""; position: absolute; left: 0; right: 0; height: 0; bottom: 0; border-bottom: 1px solid var(--td-success-color); opacity: 0; -webkit-transition: all 0.2s linear; transition: all 0.2s linear; } .oneid-link--theme-success.oneid-link--hover-underline:hover::after { opacity: 1; } .oneid-link--theme-success.oneid-link--hover-underline:active::after { opacity: 1; border-color: var(--td-success-color-active); } .oneid-link--theme-success.oneid-link--hover-color:hover { color: var(--td-success-color-hover); } .oneid-link--theme-success.oneid-link--hover-color.oneid-is-underline:hover::after { border-color: var(--td-success-color-hover); } .oneid-link--theme-success.oneid-link--hover-color.oneid-is-underline:active::after { border-color: var(--td-success-color-active); } .oneid-link--theme-success.oneid-link--hover-color:active { color: var(--td-success-color-active); } .oneid-link--theme-success.oneid-is-underline::after { content: ""; position: absolute; left: 0; right: 0; height: 0; bottom: 0; opacity: 1; border-bottom: 1px solid var(--td-success-color); -webkit-transition: all 0.2s linear; transition: all 0.2s linear; } .oneid-link--theme-success.oneid-is-disabled { cursor: not-allowed; color: var(--td-success-color-disabled); } .oneid-link--theme-success.oneid-is-disabled:hover, .oneid-link--theme-success.oneid-is-disabled:active { color: var(--td-success-color-disabled); } .oneid-link--theme-success.oneid-is-disabled.oneid-is-underline::after { border-color: var(--td-success-color-disabled); } .oneid-link--theme-danger { color: var(--td-error-color); } .oneid-link--theme-danger:active { color: var(--td-error-color-active); } .oneid-link--theme-danger.oneid-link--hover-underline::after { content: ""; position: absolute; left: 0; right: 0; height: 0; bottom: 0; border-bottom: 1px solid var(--td-error-color); opacity: 0; -webkit-transition: all 0.2s linear; transition: all 0.2s linear; } .oneid-link--theme-danger.oneid-link--hover-underline:hover::after { opacity: 1; } .oneid-link--theme-danger.oneid-link--hover-underline:active::after { opacity: 1; border-color: var(--td-error-color-active); } .oneid-link--theme-danger.oneid-link--hover-color:hover { color: var(--td-error-color-hover); } .oneid-link--theme-danger.oneid-link--hover-color.oneid-is-underline:hover::after { border-color: var(--td-error-color-hover); } .oneid-link--theme-danger.oneid-link--hover-color.oneid-is-underline:active::after { border-color: var(--td-error-color-active); } .oneid-link--theme-danger.oneid-link--hover-color:active { color: var(--td-error-color-active); } .oneid-link--theme-danger.oneid-is-underline::after { content: ""; position: absolute; left: 0; right: 0; height: 0; bottom: 0; opacity: 1; border-bottom: 1px solid var(--td-error-color); -webkit-transition: all 0.2s linear; transition: all 0.2s linear; } .oneid-link--theme-danger.oneid-is-disabled { cursor: not-allowed; color: var(--td-error-color-disabled); } .oneid-link--theme-danger.oneid-is-disabled:hover, .oneid-link--theme-danger.oneid-is-disabled:active { color: var(--td-error-color-disabled); } .oneid-link--theme-danger.oneid-is-disabled.oneid-is-underline::after { border-color: var(--td-error-color-disabled); } .oneid-link--theme-warning { color: var(--td-warning-color); } .oneid-link--theme-warning:active { color: var(--td-warning-color-active); } .oneid-link--theme-warning.oneid-link--hover-underline::after { content: ""; position: absolute; left: 0; right: 0; height: 0; bottom: 0; border-bottom: 1px solid var(--td-warning-color); opacity: 0; -webkit-transition: all 0.2s linear; transition: all 0.2s linear; } .oneid-link--theme-warning.oneid-link--hover-underline:hover::after { opacity: 1; } .oneid-link--theme-warning.oneid-link--hover-underline:active::after { opacity: 1; border-color: var(--td-warning-color-active); } .oneid-link--theme-warning.oneid-link--hover-color:hover { color: var(--td-warning-color-hover); } .oneid-link--theme-warning.oneid-link--hover-color.oneid-is-underline:hover::after { border-color: var(--td-warning-color-hover); } .oneid-link--theme-warning.oneid-link--hover-color.oneid-is-underline:active::after { border-color: var(--td-warning-color-active); } .oneid-link--theme-warning.oneid-link--hover-color:active { color: var(--td-warning-color-active); } .oneid-link--theme-warning.oneid-is-underline::after { content: ""; position: absolute; left: 0; right: 0; height: 0; bottom: 0; opacity: 1; border-bottom: 1px solid var(--td-warning-color); -webkit-transition: all 0.2s linear; transition: all 0.2s linear; } .oneid-link--theme-warning.oneid-is-disabled { cursor: not-allowed; color: var(--td-warning-color-disabled); } .oneid-link--theme-warning.oneid-is-disabled:hover, .oneid-link--theme-warning.oneid-is-disabled:active { color: var(--td-warning-color-disabled); } .oneid-link--theme-warning.oneid-is-disabled.oneid-is-underline::after { border-color: var(--td-warning-color-disabled); } .oneid-space { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; } .oneid-space .oneid-space-item { width: inherit; } .oneid-space-align-start { -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; } .oneid-space-align-end { -webkit-box-align: end; -ms-flex-align: end; align-items: flex-end; } .oneid-space-align-baseline { -webkit-box-align: baseline; -ms-flex-align: baseline; align-items: baseline; } .oneid-space-align-center { -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .oneid-space-vertical { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } .oneid-space-vertical .oneid-space-item-separator { width: 100%; } .oneid-space.oneid-space--break-line { -ms-flex-wrap: wrap; flex-wrap: wrap; } .oneid-space.oneid-space--polyfill { display: -webkit-box; display: -ms-flexbox; display: flex; } .oneid-space.oneid-space--polyfill.oneid-space-horizontal, .oneid-space.oneid-space--polyfill.oneid-space--break-line { margin-left: calc(-1 * var(--td-space-column-gap, 0)); } .oneid-space.oneid-space--polyfill.oneid-space-vertical, .oneid-space.oneid-space--polyfill.oneid-space--break-line { margin-top: calc(-1 * var(--td-space-row-gap, 0)); } .oneid-space.oneid-space--polyfill.oneid-space-horizontal > *, .oneid-space.oneid-space--polyfill.oneid-space--break-line > * { margin-left: var(--td-space-column-gap); } .oneid-space.oneid-space--polyfill.oneid-space-vertical > *, .oneid-space.oneid-space--polyfill.oneid-space--break-line > * { margin-top: var(--td-space-row-gap); } .oneid-image__wrapper { position: relative; background: var(--td-bg-color-secondarycontainer); z-index: 1; } .oneid-image__wrapper--shape-square { border-radius: 0; } .oneid-image__wrapper--shape-round { border-radius: var(--td-radius-medium); } .oneid-image__wrapper--shape-circle { border-radius: 50%; } .oneid-image__wrapper--gallery { border-radius: var(--td-radius-medium); } .oneid-image__wrapper--gallery .oneid-image { position: relative; z-index: 5; } .oneid-image__wrapper--need-hover { cursor: pointer; } .oneid-image { width: 100%; height: 100%; border-radius: inherit; position: relative; z-index: inherit; } .oneid-image--fit-fill { -o-object-fit: fill; object-fit: fill; } .oneid-image--fit-contain { -o-object-fit: contain; object-fit: contain; } .oneid-image--fit-cover { -o-object-fit: cover; object-fit: cover; } .oneid-image--fit-scale-down { -o-object-fit: scale-down; object-fit: scale-down; } .oneid-image--fit-none { -o-object-fit: none; object-fit: none; } .oneid-image--position-center { -o-object-position: center; object-position: center; } .oneid-image--position-bottom { -o-object-position: bottom; object-position: bottom; } .oneid-image--position-top { -o-object-position: top; object-position: top; } .oneid-image--position-left { -o-object-position: left; object-position: left; } .oneid-image--position-right { -o-object-position: right; object-position: right; } .oneid-image__gallery-shadow { position: absolute; left: 0; right: -24px; top: 24px; bottom: 24px; background: rgba(238, 238, 238, 0.26); border-radius: var(--td-radius-medium); z-index: 3; } .oneid-image__gallery-shadow::before, .oneid-image__gallery-shadow::after { content: ""; position: absolute; left: 0; border-radius: var(--td-radius-medium); } .oneid-image__gallery-shadow::after { top: -16px; right: 16px; bottom: -16px; background: rgba(238, 238, 238, 0.8); z-index: 4; } .oneid-image__gallery-shadow::before { top: -8px; right: 8px; bottom: -8px; background: rgba(238, 238, 238, 0.5); z-index: 2; } .oneid-image__placeholder { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; z-index: 0; } .oneid-image__overlay-content { position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: 6; opacity: 1; visibility: visible; -webkit-transition: visibility 0s, opacity 0.2s linear; transition: visibility 0s, opacity 0.2s linear; } .oneid-image__overlay-content--hidden { visibility: hidden; opacity: 0; } .oneid-image__loading, .oneid-image__error { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; z-index: 1; } .oneid-image__loading { color: var(--td-text-color-secondary); } .oneid-image__error { color: var(--td-text-color-disabled); } .oneid-image-viewer__img-error { height: 440px; width: 440px; background-color: var(--td-bg-color-component-disabled); border-radius: 4px; color: #000000; cursor: inherit; position: absolute; } .oneid-image-viewer__img-error .oneid-image-viewer__img-error-content { position: absolute; height: 100%; width: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -ms-flex-line-pack: center; align-content: center; font: var(--td-font-body-medium); } .oneid-image-viewer__img-error .oneid-image-viewer__img-error-content .oneid-image-viewer__img-error-text { margin-top: var(--td-comp-margin-s); } @-webkit-keyframes modal-image-show { 0% { -webkit-transform: scale(0); transform: scale(0); } to { -webkit-transform: scale(1); transform: scale(1); } } @keyframes modal-image-show { 0% { -webkit-transform: scale(0); transform: scale(0); } to { -webkit-transform: scale(1); transform: scale(1); } } @-webkit-keyframes modal-image-hide { 0% { -webkit-transform: scale(1); transform: scale(1); } to { -webkit-transform: scale(0); transform: scale(0); } } @keyframes modal-image-hide { 0% { -webkit-transform: scale(1); transform: scale(1); } to { -webkit-transform: scale(0); transform: scale(0); } } @-webkit-keyframes modal-mask-show { 0% { opacity: 0; } to { opacity: 1; } } @keyframes modal-mask-show { 0% { opacity: 0; } to { opacity: 1; } } @-webkit-keyframes modal-mask-hide { 0% { opacity: 1; } to { opacity: 0; } } @keyframes modal-mask-hide { 0% { opacity: 1; } to { opacity: 0; } } .oneid-image-viewer-preview-image { position: fixed; top: 0; bottom: 0; left: 0; right: 0; z-index: 3000; overflow: hidden; -webkit-animation: 0.2s cubic-bezier(0.82, 0, 1, 0.9) modal-mask-show; animation: 0.2s cubic-bezier(0.82, 0, 1, 0.9) modal-mask-show; } .oneid-image-viewer-preview-image.oneid-is-hide { -webkit-animation: 0.2s cubic-bezier(0, 0, 0.15, 1) modal-mask-hide forwards; animation: 0.2s cubic-bezier(0, 0, 0.15, 1) modal-mask-hide forwards; } .oneid-image-viewer-preview-image.oneid-is-hide .oneid-image-viewer__modal-pic .oneid-image-viewer__modal-box { -webkit-animation: 0.2s cubic-bezier(0, 0, 0.15, 1) modal-image-hide forwards; animation: 0.2s cubic-bezier(0, 0, 0.15, 1) modal-image-hide forwards; } .oneid-image-viewer-preview-image .oneid-image-viewer__modal-index { text-align: center; font-size: var(--td-font-size-body-medium); color: var(--td-text-color-anti); position: absolute; top: 92px; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); background: rgba(0, 0, 0, 0.4); border-radius: var(--td-radius-default); padding: var(--td-comp-paddingTB-xs) var(--td-comp-paddingLR-s); z-index: 1; } .oneid-image-viewer-preview-image .oneid-image-viewer__modal-mask { position: fixed; top: 0; bottom: 0; left: 0; right: 0; background-color: var(--td-mask-active); height: 100%; width: 100%; -webkit-transition: all 0.2s ease; transition: all 0.2s ease; opacity: 1; } .oneid-image-viewer-preview-image .oneid-image-viewer__modal-pic { height: 0; width: 0; position: absolute; top: 50%; left: 50%; } .oneid-image-viewer-preview-image .oneid-image-viewer__modal-pic .oneid-image-viewer__modal-box { width: 100%; height: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-animation: 0.2s cubic-bezier(0.38, 0, 0.24, 1) modal-image-show; animation: 0.2s cubic-bezier(0.38, 0, 0.24, 1) modal-image-show; } .oneid-image-viewer-preview-image .oneid-image-viewer__modal-pic .oneid-image-viewer__modal-box .oneid-image-viewer__modal-image { display: block; max-width: min(90vw, 1000px); max-height: min(90vh, 800px); -webkit-transition: all 0.2s cubic-bezier(0.38, 0, 0.24, 1); transition: all 0.2s cubic-bezier(0.38, 0, 0.24, 1); -webkit-transform: rotate(0deg); transform: rotate(0deg); -o-object-fit: contain; object-fit: contain; } .oneid-image-viewer-preview-image .oneid-image-viewer__modal-header { width: 100%; position: absolute; top: 0; z-index: 1; height: auto; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; background-color: var(--td-bg-color-container); padding: 0 0 12px 0; } .oneid-image-viewer-preview-image .oneid-image-viewer__modal-header.oneid-is-show { padding: 12px 0; } @-webkit-keyframes preview-icon-range { 0% { -webkit-transform: translate(-50%, 50%) rotateZ(0); transform: translate(-50%, 50%) rotateZ(0); } to { -webkit-transform: translate(-50%, 50%) rotateZ(-180deg); transform: translate(-50%, 50%) rotateZ(-180deg); } } @keyframes preview-icon-range { 0% { -webkit-transform: translate(-50%, 50%) rotateZ(0); transform: translate(-50%, 50%) rotateZ(0); } to { -webkit-transform: translate(-50%, 50%) rotateZ(-180deg); transform: translate(-50%, 50%) rotateZ(-180deg); } } @-webkit-keyframes preview-icon-unrange { 0% { -webkit-transform: translate(-50%, 50%) rotateZ(-180deg); transform: translate(-50%, 50%) rotateZ(-180deg); } to { -webkit-transform: translate(-50%, 50%) rotateZ(0); transform: translate(-50%, 50%) rotateZ(0); } } @keyframes preview-icon-unrange { 0% { -webkit-transform: translate(-50%, 50%) rotateZ(-180deg); transform: translate(-50%, 50%) rotateZ(-180deg); } to { -webkit-transform: translate(-50%, 50%) rotateZ(0); transform: translate(-50%, 50%) rotateZ(0); } } .oneid-image-viewer-preview-image .oneid-image-viewer__modal-header .oneid-image-viewer__header-pre-bt { width: var(--td-comp-size-xxs); height: var(--td-comp-size-xxs); display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; position: absolute; left: 50%; bottom: 0; -webkit-transform: translate(-50%, 50%); transform: translate(-50%, 50%); background-color: var(--td-bg-color-container); color: var(--td-text-color-primary); border-radius: 50%; -webkit-box-shadow: var(--td-shadow-inset-top), var(--td-shadow-inset-right), var(--td-shadow-inset-bottom), var(--td-shadow-inset-left); box-shadow: var(--td-shadow-inset-top), var(--td-shadow-inset-right), var(--td-shadow-inset-bottom), var(--td-shadow-inset-left); -webkit-animation: 0.2s cubic-bezier(0.38, 0, 0.24, 1) 0s 1 normal forwards running preview-icon-unrange; animation: 0.2s cubic-bezier(0.38, 0, 0.24, 1) 0s 1 normal forwards running preview-icon-unrange; } .oneid-image-viewer-preview-image .oneid-image-viewer__modal-header .oneid-image-viewer__header-pre-bt .oneid-icon { font-size: var(--td-font-size-body-large); } .oneid-image-viewer-preview-image .oneid-image-viewer__modal-header .oneid-image-viewer__header-pre-bt:hover { background-color: inherit; } @-webkit-keyframes preview-image-show { 0% { height: 0; } to { height: 40px; } } @keyframes preview-image-show { 0% { height: 0; } to { height: 40px; } } @-webkit-keyframes preview-image-hide { 0% { height: 40px; } to { height: 0; } } @keyframes preview-image-hide { 0% { height: 40px; } to { height: 0; } } .oneid-image-viewer-preview-image .oneid-image-viewer__modal-header.oneid-is-show .oneid-image-viewer__header-prev { -webkit-animation: 0.2s cubic-bezier(0.38, 0, 0.24, 1) 0s 1 normal forwards running preview-image-show; animation: 0.2s cubic-bezier(0.38, 0, 0.24, 1) 0s 1 normal forwards running preview-image-show; } .oneid-image-viewer-preview-image .oneid-image-viewer__modal-header.oneid-is-show .oneid-image-viewer__header-pre-bt { -webkit-animation: 0.2s cubic-bezier(0.38, 0, 0.24, 1) 0s 1 normal forwards running preview-icon-range; animation: 0.2s cubic-bezier(0.38, 0, 0.24, 1) 0s 1 normal forwards running preview-icon-range; } .oneid-image-viewer-preview-image .oneid-image-viewer__modal-header .oneid-image-viewer__header-prev { width: 521.7777777778px; -webkit-animation: 0.2s cubic-bezier(0.38, 0, 0.24, 1) 0s 1 normal forwards running preview-image-hide; animation: 0.2s cubic-bezier(0.38, 0, 0.24, 1) 0s 1 normal forwards running preview-image-hide; display: -webkit-box; display: -ms-flexbox; display: flex; position: relative; overflow: hidden; } .oneid-image-viewer-preview-image .oneid-image-viewer__modal-header .oneid-image-viewer__header-prev::before, .oneid-image-viewer-preview-image .oneid-image-viewer__modal-header .oneid-image-viewer__header-prev::after { content: ""; position: absolute; height: 100%; z-index: 1; width: 71.1111111111px; pointer-events: none; } .oneid-image-viewer-preview-image .oneid-image-viewer__modal-header .oneid-image-viewer__header-prev::before { left: 0; background-image: -webkit-gradient(linear, left top, right top, from(var(--td-bg-color-container)), to(rgba(255, 255, 255, 0))); background-image: linear-gradient(to right, var(--td-bg-color-container), rgba(255, 255, 255, 0)); } .oneid-image-viewer-preview-image .oneid-image-viewer__modal-header .oneid-image-viewer__header-prev::after { right: 0; background-image: -webkit-gradient(linear, left top, right top, from(rgba(255, 255, 255, 0)), to(var(--td-bg-color-container))); background-image: linear-gradient(to right, rgba(255, 255, 255, 0), var(--td-bg-color-container)); } .oneid-image-viewer-preview-image .oneid-image-viewer__header-trans { height: 100%; -webkit-transition: -webkit-transform 0.2s; transition: -webkit-transform 0.2s; transition: transform 0.2s; transition: transform 0.2s, -webkit-transform 0.2s; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; gap: 4px; margin-left: 225.3333333333px; } .oneid-image-viewer-preview-image .oneid-image-viewer__header-box { -webkit-box-sizing: border-box; box-sizing: border-box; width: 71.1111111111px; height: 40px; position: relative; -webkit-transition: 0.2s; transition: 0.2s; overflow: hidden; border-radius: var(--td-radius-default); display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; border: 1px solid transparent; background-color: var(--td-bg-color-secondarycontainer); } .oneid-image-viewer-preview-image .oneid-image-viewer__header-box .oneid-image-viewer__header-img { width: auto; height: 100%; } .oneid-image-viewer-preview-image .oneid-image-viewer__header-box:hover, .oneid-image-viewer-preview-image .oneid-image-viewer__header-box.oneid-is-active { border-color: var(--td-brand-color); } .oneid-image-viewer-preview-image .oneid-image-viewer__modal-icon { cursor: pointer; color: var(--td-text-color-primary); border-radius: var(--td-radius-default); -webkit-transition: 0.2s; transition: 0.2s; } .oneid-image-viewer-preview-image .oneid-image-viewer__modal-icon.oneid-image-viewer__modal-close-bt { top: 100px; right: 40px; } .oneid-image-viewer-preview-image .oneid-image-viewer__modal-icon.oneid-image-viewer__modal-next-bt, .oneid-image-viewer-preview-image .oneid-image-viewer__modal-icon.oneid-image-viewer__modal-prev-bt { top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); } .oneid-image-viewer-preview-image .oneid-image-viewer__modal-icon.oneid-image-viewer__modal-prev-bt { left: 40px; } .oneid-image-viewer-preview-image .oneid-image-viewer__modal-icon.oneid-image-viewer__modal-next-bt { right: 40px; } .oneid-image-viewer-preview-image .oneid-image-viewer__modal-icon.oneid-image-viewer__modal-close-bt, .oneid-image-viewer-preview-image .oneid-image-viewer__modal-icon.oneid-image-viewer__modal-prev-bt, .oneid-image-viewer-preview-image .oneid-image-viewer__modal-icon.oneid-image-viewer__modal-next-bt { position: fixed; z-index: 10; color: var(--td-text-color-anti); background-color: rgba(0, 0, 0, 0.4); border-radius: 50%; width: var(--td-comp-size-xl); height: var(--td-comp-size-xl); display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .oneid-image-viewer-preview-image .oneid-image-viewer__modal-icon .oneid-image-viewer__modal-icon-label { margin-left: 2px; } .oneid-image-viewer-preview-image .oneid-image-viewer__modal-icon.oneid-is-disabled { color: rgba(255, 255, 255, 0.22); } .oneid-image-viewer-preview-image .oneid-image-viewer__modal-icon.oneid-is-disabled:hover { background-color: rgba(0, 0, 0, 0.4); } .oneid-image-viewer-preview-image .oneid-image-viewer__modal-icon:hover { background-color: rgba(0, 0, 0, 0.2); } .oneid-image-viewer__mask { width: 100vh; height: 100vh; left: 0; top: 0; z-index: 99; position: fixed; background-color: transparent; } .oneid-image-viewer__utils { width: 100%; position: absolute; bottom: 32px; z-index: 1; height: auto; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; color: var(--td-text-color-primary); -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .oneid-image-viewer__utils .oneid-image-viewer__utils-content { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; height: 50px; line-height: 100%; background: var(--td-bg-color-container); border-radius: var(--td-radius-medium); padding: 0 var(--td-comp-paddingLR-xs); } .oneid-image-viewer__utils .oneid-image-viewer__utils-content .oneid-image-viewer__modal-icon { margin: 0 var(--td-comp-margin-xs); width: var(--td-comp-size-m); height: var(--td-comp-size-m); display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; border-radius: var(--td-radius-default); -webkit-transition: 0.2s; transition: 0.2s; } .oneid-image-viewer__utils .oneid-image-viewer__utils-content .oneid-image-viewer__modal-icon:hover { background-color: var(--td-bg-color-container-hover); } .oneid-image-viewer__utils .oneid-image-viewer__utils-content .oneid-image-viewer__utils-scale { width: var(--td-comp-size-xl); text-align: center; cursor: inherit; } .oneid-image-viewer__utils .oneid-image-viewer__utils-content .oneid-image-viewer__utils-scale:hover { background-color: var(--td-bg-color-container); } .oneid-image-viewer-mini__footer .oneid-image-viewer__utils { position: inherit; } .oneid-image-viewer-mini__content { max-width: min(90vw, 1000px); max-height: min(90vh, 800px); } @keyframes modal-image-show { 0% { -webkit-transform: scale(0); transform: scale(0); } to { -webkit-transform: scale(1); transform: scale(1); } } .oneid-image-viewer-mini__content .oneid-image-viewer__modal-pic .oneid-image-viewer__modal-box { width: 100%; height: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .oneid-image-viewer-mini__content .oneid-image-viewer__modal-pic .oneid-image-viewer__modal-box .oneid-image-viewer__modal-image { display: block; max-width: min(80vw, 800px); max-height: min(80vh, 600px); -webkit-transition: all 0.2s ease; transition: all 0.2s ease; -webkit-transform: rotate(0deg); transform: rotate(0deg); -o-object-fit: contain; object-fit: contain; } .oneid-image-viewer__dialog.oneid-dialog__ctx--fixed { z-index: 3000; } .oneid-image-viewer__dialog .oneid-dialog__header { padding: 0 var(--td-comp-paddingLR-s); pointer-events: none; } .oneid-image-viewer__dialog .oneid-dialog__header .oneid-image-viewer__dialog-title { pointer-events: all; } .oneid-image-viewer__dialog .oneid-dialog__header .oneid-dialog__close { pointer-events: auto; } .oneid-image-viewer__dialog .oneid-dialog { border-color: var(--td-component-border); overflow: hidden; padding: 0; -webkit-box-shadow: var(--td-shadow-3); box-shadow: var(--td-shadow-3); } .oneid-image-viewer__dialog .oneid-dialog__header { height: 40px; width: 100%; font-size: var(--td-font-size-body-medium); background-color: var(--td-bg-color-secondarycontainer); } .oneid-image-viewer__dialog .oneid-dialog__header-content { margin-left: 32px; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .oneid-image-viewer__dialog .oneid-dialog__close:hover { background-color: var(--td-bg-color-secondarycontainer-hover); } .range-input-disabled.oneid-is-disabled { color: var(--td-text-color-disabled); background-color: var(--td-bg-color-component-disabled); } .range-input-disabled.oneid-is-disabled:hover { border-color: var(--td-border-level-2-color); } .range-input-disabled.oneid-is-disabled .oneid-range-input__inner { cursor: not-allowed; color: var(--td-text-color-disabled); } .range-input-disabled.oneid-is-disabled .oneid-range-input__inner::-webkit-input-placeholder { color: var(--td-text-color-disabled); } .range-input-disabled.oneid-is-disabled .oneid-range-input__inner::-moz-placeholder { color: var(--td-text-color-disabled); } .range-input-disabled.oneid-is-disabled .oneid-range-input__inner:-ms-input-placeholder { color: var(--td-text-color-disabled); } .range-input-disabled.oneid-is-disabled .oneid-range-input__inner::-ms-input-placeholder { color: var(--td-text-color-disabled); } .range-input-disabled.oneid-is-disabled .oneid-range-input__inner::placeholder { color: var(--td-text-color-disabled); } .range-input-disabled.oneid-is-disabled > .oneid-range-input__prefix .oneid-icon, .range-input-disabled.oneid-is-disabled > .oneid-range-input__suffix .oneid-icon { color: var(--td-text-color-disabled); } .oneid-range-input { margin: 0; padding: 0; list-style: none; width: 100%; position: relative; font: var(--td-font-body-medium); height: var(--td-comp-size-m); border-width: 1px; border-style: solid; border-radius: var(--td-radius-default); border-color: var(--td-border-level-2-color); padding: var(--td-comp-paddingTB-xs) var(--td-comp-paddingLR-s) var(--td-comp-paddingTB-xs) var(--td-comp-paddingLR-s); background-color: var(--td-bg-color-specialcomponent); color: var(--td-text-color-primary); font-size: var(--td-font-body-medium); -webkit-box-sizing: border-box; box-sizing: border-box; -webkit-transition: all cubic-bezier(0.38, 0, 0.24, 1) 0.2s; transition: all cubic-bezier(0.38, 0, 0.24, 1) 0.2s; display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; gap: 4px; } .oneid-range-input:hover { border-color: var(--td-brand-color); } .oneid-range-input--borderless:not(.oneid-is-focused) { border-color: transparent; -webkit-transition: all cubic-bezier(0.38, 0, 0.24, 1) 0.2s; transition: all cubic-bezier(0.38, 0, 0.24, 1) 0.2s; } .oneid-range-input--borderless:not(.oneid-is-focused):hover { border-color: var(--td-component-border); cursor: pointer; } .oneid-range-input--borderless:not(.oneid-is-focused).oneid-is-disabled { border: none; background-color: var(--td-bg-color-component-disabled); } .oneid-range-input.oneid-is-focused { z-index: 1; border-color: var(--td-brand-color); -webkit-box-shadow: 0 0 0 2px var(--td-brand-color-focus); box-shadow: 0 0 0 2px var(--td-brand-color-focus); } .oneid-range-input.oneid-is-success { border-color: var(--td-success-color); } .oneid-range-input.oneid-is-success:focus { -webkit-box-shadow: 0 0 0 2px var(--td-success-color-focus); box-shadow: 0 0 0 2px var(--td-success-color-focus); } .oneid-range-input.oneid-is-success.oneid-range-input--focused { -webkit-box-shadow: 0 0 0 2px var(--td-success-color-focus); box-shadow: 0 0 0 2px var(--td-success-color-focus); } .oneid-range-input.oneid-is-success > .oneid-range-input__extra { color: var(--td-success-color); } .oneid-range-input.oneid-is-success > .oneid-range-input__tips { color: var(--td-success-color); font-size: var(--td-font-size-body-small); margin-left: calc(-1 * var(--td-comp-paddingLR-xs)); } .oneid-range-input.oneid-is-warning { border-color: var(--td-warning-color); } .oneid-range-input.oneid-is-warning:focus { -webkit-box-shadow: 0 0 0 2px var(--td-warning-color-focus); box-shadow: 0 0 0 2px var(--td-warning-color-focus); } .oneid-range-input.oneid-is-warning.oneid-range-input--focused { -webkit-box-shadow: 0 0 0 2px var(--td-warning-color-focus); box-shadow: 0 0 0 2px var(--td-warning-color-focus); } .oneid-range-input.oneid-is-warning > .oneid-range-input__extra { color: var(--td-warning-color); } .oneid-range-input.oneid-is-warning > .oneid-range-input__tips { color: var(--td-warning-color); font-size: var(--td-font-size-body-small); margin-left: calc(-1 * var(--td-comp-paddingLR-xs)); } .oneid-range-input.oneid-is-error { border-color: var(--td-error-color); } .oneid-range-input.oneid-is-error:focus { -webkit-box-shadow: 0 0 0 2px var(--td-error-color-focus); box-shadow: 0 0 0 2px var(--td-error-color-focus); } .oneid-range-input.oneid-is-error.oneid-range-input--focused { -webkit-box-shadow: 0 0 0 2px var(--td-error-color-focus); box-shadow: 0 0 0 2px var(--td-error-color-focus); } .oneid-range-input.oneid-is-error > .oneid-range-input__extra { color: var(--td-error-color); } .oneid-range-input.oneid-is-error > .oneid-range-input__tips { color: var(--td-error-color); font-size: var(--td-font-size-body-small); margin-left: calc(-1 * var(--td-comp-paddingLR-xs)); } .oneid-range-input.oneid-is-disabled { color: var(--td-text-color-disabled); background-color: var(--td-bg-color-component-disabled); } .oneid-range-input.oneid-is-disabled:hover { border-color: var(--td-border-level-2-color); } .oneid-range-input.oneid-is-disabled .oneid-range-input__inner { cursor: not-allowed; color: var(--td-text-color-disabled); } .oneid-range-input.oneid-is-disabled .oneid-range-input__inner::-webkit-input-placeholder { color: var(--td-text-color-disabled); } .oneid-range-input.oneid-is-disabled .oneid-range-input__inner::-moz-placeholder { color: var(--td-text-color-disabled); } .oneid-range-input.oneid-is-disabled .oneid-range-input__inner:-ms-input-placeholder { color: var(--td-text-color-disabled); } .oneid-range-input.oneid-is-disabled .oneid-range-input__inner::-ms-input-placeholder { color: var(--td-text-color-disabled); } .oneid-range-input.oneid-is-disabled .oneid-range-input__inner::placeholder { color: var(--td-text-color-disabled); } .oneid-range-input.oneid-is-disabled > .oneid-range-input__prefix .oneid-icon, .oneid-range-input.oneid-is-disabled > .oneid-range-input__suffix .oneid-icon { color: var(--td-text-color-disabled); } .oneid-range-input.oneid-range-input--prefix .oneid-range-input__prefix { height: 100%; text-align: center; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; font-size: var(--td-font-size-body-medium); } .oneid-range-input.oneid-range-input--suffix .oneid-range-input__suffix { height: 100%; text-align: center; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; font-size: var(--td-font-size-body-medium); } .oneid-range-input.oneid-size-l { height: var(--td-comp-size-xl); font: var(--td-font-body-large); padding-top: var(--td-comp-paddingTB-xs); padding-bottom: var(--td-comp-paddingTB-xs); } .oneid-range-input.oneid-size-l .oneid-input { padding: 0 var(--td-comp-margin-s); } .oneid-range-input.oneid-size-s { padding: var(--td-comp-paddingTB-xxs) var(--td-comp-margin-xs); height: var(--td-comp-size-xs); font: var(--td-font-body-small); } .oneid-range-input__inner { height: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: var(--td-comp-margin-s); } .oneid-range-input__inner .oneid-input__wrap { height: 100%; border-radius: var(--td-radius-small); } .oneid-range-input__inner > .oneid-range-input__prefix { -ms-flex-negative: 0; flex-shrink: 0; } .oneid-range-input__inner .oneid-input { padding: 0 var(--td-comp-paddingLR-xs); height: 100%; border: 0; -webkit-box-shadow: none; box-shadow: none; font-size: inherit; border-radius: var(--td-radius-small); } .oneid-range-input__inner .oneid-input:hover { background-color: var(--td-bg-color-container-hover); } .oneid-range-input__inner .oneid-input__inner { width: 100%; height: 100%; line-height: 1; } .oneid-range-input__inner .oneid-input.oneid-is-focused { background-color: var(--td-bg-color-component); } .oneid-range-input__extra { font: var(--td-font-body-small); color: var(--td-text-color-placeholder); } .oneid-range-input__status { position: absolute; right: calc(0px - var(--td-comp-margin-xxxl)); top: 0; } .oneid-range-input.oneid-range-input--suffix .oneid-input__clear { opacity: 0; visibility: hidden; -webkit-transition: all cubic-bezier(0.38, 0, 0.24, 1) 0.2s; transition: all cubic-bezier(0.38, 0, 0.24, 1) 0.2s; } .oneid-range-input.oneid-range-input--suffix:hover .oneid-input__clear { opacity: 1; visibility: visible; } .oneid-range-input .oneid-range-input__suffix-clear { cursor: pointer; } .oneid-range-input__prefix > .oneid-icon, .oneid-range-input__suffix > .oneid-icon { -webkit-transition: color 0.2s linear; transition: color 0.2s linear; font-size: 16px; color: var(--td-text-color-placeholder); -ms-flex-negative: 0; flex-shrink: 0; } .oneid-range-input-popup { width: 100%; } .oneid-range-input-popup--visible .oneid-range-input { border-color: var(--td-brand-color); -webkit-box-shadow: 0 0 0 2px var(--td-brand-color-focus); box-shadow: 0 0 0 2px var(--td-brand-color-focus); } .oneid-range-input-popup--visible .oneid-range-input .oneid-icon-time, .oneid-range-input-popup--visible .oneid-range-input .oneid-icon-calendar { color: var(--td-brand-color); } .oneid-range-input-popup--visible .oneid-range-input .oneid-input.oneid-is-focused { background-color: var(--td-bg-color-component); } .flex-center { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .oneid-time-picker, .oneid-time-range-picker { width: 240px; background: transparent; display: inline-block; position: relative; font: var(--td-font-body-medium); color: var(--td-text-color-primary); -webkit-box-sizing: border-box; box-sizing: border-box; margin: 0; padding: 0; list-style: none; } .oneid-time-picker.oneid-is-disabled, .oneid-time-range-picker.oneid-is-disabled { cursor: not-allowed; } .oneid-time-picker > *:focus, .oneid-time-range-picker > *:focus, .oneid-time-picker > *:active, .oneid-time-range-picker > *:active { outline: 0; } .oneid-time-picker__group, .oneid-time-range-picker__group { position: relative; } .oneid-time-picker__group.active, .oneid-time-range-picker__group.active { border: 1px solid var(--td-brand-color); -webkit-box-shadow: 0 0 2px 2px var(--td-brand-color-focus); box-shadow: 0 0 2px 2px var(--td-brand-color-focus); } .oneid-time-picker__group.active + .oneid-time-picker__icon-wrap > .oneid-time-picker__icon-clear, .oneid-time-range-picker__group.active + .oneid-time-picker__icon-wrap > .oneid-time-picker__icon-clear { display: block; } .oneid-time-picker__group-text, .oneid-time-range-picker__group-text { color: var(--td-text-color-primary); } .oneid-time-picker__group input, .oneid-time-range-picker__group input { cursor: pointer; } .oneid-time-range-picker { width: auto; } .oneid-time-picker__panel { width: 280px; background: transparent; border-radius: var(--td-radius-default); display: inline-block; position: relative; font: var(--td-font-body-medium); --timePickerPanelOffsetTop: 15; --timePickerPanelOffsetBottom: 21; } .oneid-time-picker__panel-body { width: 100%; height: calc((var(--td-comp-size-xs) + var(--td-size-3)) * 7 + var(--td-size-3)); position: relative; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .oneid-time-picker__panel-body-active-mask { position: absolute; top: 50%; height: var(--td-comp-size-xs); width: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; } .oneid-time-picker__panel-body-active-mask > div { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; -webkit-transform: translateY(calc(0px - (var(--td-comp-size-xs) + var(--td-size-3)) / 2)); transform: translateY(calc(0px - (var(--td-comp-size-xs) + var(--td-size-3)) / 2)); height: var(--td-comp-size-xs); background-color: var(--td-brand-color-light); margin: var(--td-size-3) var(--td-comp-margin-xs); border-radius: var(--td-radius-default); } .oneid-time-picker__panel-body-scroll { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; height: 100%; overflow-y: scroll; text-align: center; position: relative; list-style: none; padding: 0; margin: 0; } .oneid-time-picker__panel-body-scroll::-webkit-scrollbar { width: 0; } .oneid-time-picker__panel-body-scroll::after, .oneid-time-picker__panel-body-scroll::before { display: block; height: 50%; content: ""; } .oneid-time-picker__panel-body-scroll::before { height: calc(50% - var(--timePickerPanelOffsetTop, 0) * 1px); } .oneid-time-picker__panel-body-scroll::after { height: calc(50% - var(--timePickerPanelOffsetBottom, 0) * 1px); } .oneid-time-picker__panel-body-scroll:last-child { border-right: 0; } .oneid-time-picker__panel-body-scroll-item { height: var(--td-comp-size-xs); font: var(--td-font-body-medium); line-height: var(--td-comp-size-xs); color: var(--td-text-color-secondary); margin: var(--td-size-3) var(--td-comp-margin-xs); border-radius: var(--td-radius-default); text-align: center; cursor: pointer; -webkit-transition: 0.2s linear; transition: 0.2s linear; } .oneid-time-picker__panel-body-scroll-item:not(.oneid-time-picker__panel-body-scroll-item.oneid-is-current):not(.oneid-time-picker__panel-body-scroll-item.oneid-is-disabled):hover { color: var(--td-text-color-primary); } .oneid-time-picker__panel-body-scroll-item:not(.oneid-time-picker__panel-body-scroll-item.oneid-is-current):not(.oneid-time-picker__panel-body-scroll-item.oneid-is-disabled):active { background-color: var(--td-bg-color-container-hover); } .oneid-time-picker__panel-body-scroll-item.oneid-is-disabled { color: var(--td-text-color-disabled); cursor: not-allowed; } .oneid-time-picker__panel-body-scroll-item.oneid-is-hidden { display: none; cursor: not-allowed; } .oneid-time-picker__panel-body-scroll-item.oneid-is-current { color: var(--td-brand-color); } .oneid-time-picker__panel-section-body { padding: var(--td-pop-padding-xl) calc(var(--td-pop-padding-xl) - var(--td-comp-margin-xs)); } .oneid-time-picker__panel-section-footer { width: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-orient: horizontal; -webkit-box-direction: reverse; -ms-flex-direction: row-reverse; flex-direction: row-reverse; -webkit-box-align: center; -ms-flex-align: center; align-items: center; background-color: transparent; position: relative; border-top: 1px solid var(--td-border-level-1-color); -webkit-box-sizing: border-box; box-sizing: border-box; padding: var(--td-pop-padding-xl); } .oneid-form { color: var(--td-text-color-primary); -webkit-box-sizing: border-box; box-sizing: border-box; margin: 0; padding: 0; list-style: none; font: var(--td-font-body-medium); } .oneid-form:not(.oneid-form-inline) .oneid-form__item:last-of-type { margin: 0; } .oneid-form__item { margin-bottom: var(--td-comp-margin-xxl); } .oneid-form__item.oneid-form__item-with-help { margin-bottom: var(--td-comp-margin-xs); } .oneid-form__item.oneid-form__item-with-extra { margin-bottom: var(--td-comp-margin-xxl); } .oneid-form__label { float: left; padding-right: var(--td-comp-paddingLR-xl); vertical-align: middle; line-height: var(--td-comp-margin-xxxl); color: var(--td-text-color-primary); -webkit-box-sizing: border-box; box-sizing: border-box; white-space: nowrap; } .oneid-form__label--top { float: none; min-height: var(--td-comp-margin-xxxl); } .oneid-form__label--left { text-align: left; } .oneid-form__label--right { text-align: right; } .oneid-form__label--required:not(.oneid-form__label--required-right) label::before { display: inline-block; margin-right: var(--td-comp-margin-xs); color: var(--td-error-color); line-height: var(--td-line-height-body-medium); content: "*"; } .oneid-form__label--required-right label::after { display: inline-block; margin-left: var(--td-comp-margin-xs); color: var(--td-error-color); line-height: var(--td-line-height-body-medium); content: "*"; } .oneid-form__label--colon label::after { content: ":"; position: relative; margin: 0 var(--td-comp-margin-xxs); } .oneid-form__controls { min-height: var(--td-comp-margin-xxxl); display: flow-root; position: relative; } .oneid-form__controls-content { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; min-height: var(--td-comp-margin-xxxl); } .oneid-form__controls .oneid-form__item { margin-bottom: 0; margin-right: var(--td-comp-margin-xxl); } .oneid-form__controls.oneid-is-success .oneid-form__status .oneid-icon { color: var(--td-success-color); } .oneid-form__controls.oneid-is-success .oneid-input__extra { color: var(--td-success-color); } .oneid-form__controls.oneid-form--success-border.oneid-is-success .oneid-input__extra { color: var(--td-success-color); } .oneid-form__controls.oneid-form--success-border.oneid-is-success .oneid-form__controls-content .oneid-input, .oneid-form__controls.oneid-form--success-border.oneid-is-success .oneid-form__controls-content .oneid-select, .oneid-form__controls.oneid-form--success-border.oneid-is-success .oneid-form__controls-content .oneid-radio-button, .oneid-form__controls.oneid-form--success-border.oneid-is-success .oneid-form__controls-content .oneid-cascader, .oneid-form__controls.oneid-form--success-border.oneid-is-success .oneid-form__controls-content .oneid-range-input, .oneid-form__controls.oneid-form--success-border.oneid-is-success .oneid-form__controls-content .oneid-textarea__inner { border-color: var(--td-success-color); } .oneid-form__controls.oneid-form--success-border.oneid-is-success .oneid-form__controls-content .oneid-input--focused, .oneid-form__controls.oneid-form--success-border.oneid-is-success .oneid-form__controls-content .oneid-select--focused, .oneid-form__controls.oneid-form--success-border.oneid-is-success .oneid-form__controls-content .oneid-radio-button--focused, .oneid-form__controls.oneid-form--success-border.oneid-is-success .oneid-form__controls-content .oneid-cascader--focused, .oneid-form__controls.oneid-form--success-border.oneid-is-success .oneid-form__controls-content .oneid-range-input--focused, .oneid-form__controls.oneid-form--success-border.oneid-is-success .oneid-form__controls-content .oneid-textarea__inner--focused { -webkit-box-shadow: 0 0 0 2px var(--td-success-color-focus); box-shadow: 0 0 0 2px var(--td-success-color-focus); } .oneid-form__controls.oneid-form--success-border.oneid-is-success .oneid-form__controls-content .oneid-input .oneid-icon, .oneid-form__controls.oneid-form--success-border.oneid-is-success .oneid-form__controls-content .oneid-select .oneid-icon, .oneid-form__controls.oneid-form--success-border.oneid-is-success .oneid-form__controls-content .oneid-radio-button .oneid-icon, .oneid-form__controls.oneid-form--success-border.oneid-is-success .oneid-form__controls-content .oneid-cascader .oneid-icon, .oneid-form__controls.oneid-form--success-border.oneid-is-success .oneid-form__controls-content .oneid-range-input .oneid-icon, .oneid-form__controls.oneid-form--success-border.oneid-is-success .oneid-form__controls-content .oneid-textarea__inner .oneid-icon, .oneid-form__controls.oneid-form--success-border.oneid-is-success .oneid-form__controls-content .oneid-input .oneid-fake-arrow, .oneid-form__controls.oneid-form--success-border.oneid-is-success .oneid-form__controls-content .oneid-select .oneid-fake-arrow, .oneid-form__controls.oneid-form--success-border.oneid-is-success .oneid-form__controls-content .oneid-radio-button .oneid-fake-arrow, .oneid-form__controls.oneid-form--success-border.oneid-is-success .oneid-form__controls-content .oneid-cascader .oneid-fake-arrow, .oneid-form__controls.oneid-form--success-border.oneid-is-success .oneid-form__controls-content .oneid-range-input .oneid-fake-arrow, .oneid-form__controls.oneid-form--success-border.oneid-is-success .oneid-form__controls-content .oneid-textarea__inner .oneid-fake-arrow { color: var(--td-success-color); } .oneid-form__controls.oneid-form--success-border.oneid-is-success .oneid-form__controls-content .oneid-select > .oneid-select__right-icon:not(.oneid-select__right-icon-clear) { color: var(--td-success-color); } .oneid-form__controls.oneid-form--success-border.oneid-is-success .oneid-form__controls-content .oneid-radio-button:last-child { border-right-color: var(--td-success-color); } .oneid-form__controls.oneid-form--success-border.oneid-is-success .oneid-form__controls-content .oneid-textarea__inner.oneid-is-focused { -webkit-box-shadow: 0 0 0 2px var(--td-success-color-focus); box-shadow: 0 0 0 2px var(--td-success-color-focus); } .oneid-form__controls.oneid-form--success-border.oneid-is-success .oneid-form__controls-content .oneid-cascader.oneid-is-active, .oneid-form__controls.oneid-form--success-border.oneid-is-success .oneid-form__controls-content .oneid-select.oneid-is-active { -webkit-box-shadow: 0 0 0 2px var(--td-success-color-focus); box-shadow: 0 0 0 2px var(--td-success-color-focus); } .oneid-form__controls.oneid-form--success-border.oneid-is-success .oneid-form__controls-content .oneid-form__status .oneid-icon { color: var(--td-success-color); } .oneid-form__status { display: -webkit-box; display: -ms-flexbox; display: flex; margin: 0 var(--td-comp-margin-s); } .oneid-form__status > .oneid-icon { font-size: var(--td-comp-size-xxxs); } .oneid-form__status-without-icon { width: 25px; height: 25px; } .oneid-form__status button { width: var(--td-comp-size-m); } .oneid-form__status button + button { margin-left: var(--td-comp-margin-s); } .oneid-form-inline { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; row-gap: var(--td-comp-margin-l); } .oneid-form-inline .oneid-form__item { margin: 0; min-width: 200px; display: inline-block; margin-right: var(--td-comp-margin-xxl); } .oneid-input__extra, .oneid-input__help { margin: 0; width: 100%; height: auto; min-height: var(--td-line-height-body-small); font: var(--td-font-body-small); color: var(--td-text-color-placeholder); } .oneid-input__extra { position: absolute; bottom: calc(0px - var(--td-line-height-body-small)); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .oneid-is-warning .oneid-input__extra { color: var(--td-warning-color); } .oneid-is-warning .oneid-form__controls-content .oneid-input, .oneid-is-warning .oneid-form__controls-content .oneid-select, .oneid-is-warning .oneid-form__controls-content .oneid-radio-button, .oneid-is-warning .oneid-form__controls-content .oneid-cascader, .oneid-is-warning .oneid-form__controls-content .oneid-range-input, .oneid-is-warning .oneid-form__controls-content .oneid-textarea__inner { border-color: var(--td-warning-color); } .oneid-is-warning .oneid-form__controls-content .oneid-input--focused, .oneid-is-warning .oneid-form__controls-content .oneid-select--focused, .oneid-is-warning .oneid-form__controls-content .oneid-radio-button--focused, .oneid-is-warning .oneid-form__controls-content .oneid-cascader--focused, .oneid-is-warning .oneid-form__controls-content .oneid-range-input--focused, .oneid-is-warning .oneid-form__controls-content .oneid-textarea__inner--focused { -webkit-box-shadow: 0 0 0 2px var(--td-warning-color-focus); box-shadow: 0 0 0 2px var(--td-warning-color-focus); } .oneid-is-warning .oneid-form__controls-content .oneid-input .oneid-icon, .oneid-is-warning .oneid-form__controls-content .oneid-select .oneid-icon, .oneid-is-warning .oneid-form__controls-content .oneid-radio-button .oneid-icon, .oneid-is-warning .oneid-form__controls-content .oneid-cascader .oneid-icon, .oneid-is-warning .oneid-form__controls-content .oneid-range-input .oneid-icon, .oneid-is-warning .oneid-form__controls-content .oneid-textarea__inner .oneid-icon, .oneid-is-warning .oneid-form__controls-content .oneid-input .oneid-fake-arrow, .oneid-is-warning .oneid-form__controls-content .oneid-select .oneid-fake-arrow, .oneid-is-warning .oneid-form__controls-content .oneid-radio-button .oneid-fake-arrow, .oneid-is-warning .oneid-form__controls-content .oneid-cascader .oneid-fake-arrow, .oneid-is-warning .oneid-form__controls-content .oneid-range-input .oneid-fake-arrow, .oneid-is-warning .oneid-form__controls-content .oneid-textarea__inner .oneid-fake-arrow { color: var(--td-warning-color); } .oneid-is-warning .oneid-form__controls-content .oneid-select > .oneid-select__right-icon:not(.oneid-select__right-icon-clear) { color: var(--td-warning-color); } .oneid-is-warning .oneid-form__controls-content .oneid-radio-button:last-child { border-right-color: var(--td-warning-color); } .oneid-is-warning .oneid-form__controls-content .oneid-textarea__inner.oneid-is-focused { -webkit-box-shadow: 0 0 0 2px var(--td-warning-color-focus); box-shadow: 0 0 0 2px var(--td-warning-color-focus); } .oneid-is-warning .oneid-form__controls-content .oneid-cascader.oneid-is-active, .oneid-is-warning .oneid-form__controls-content .oneid-select.oneid-is-active { -webkit-box-shadow: 0 0 0 2px var(--td-warning-color-focus); box-shadow: 0 0 0 2px var(--td-warning-color-focus); } .oneid-is-warning .oneid-form__controls-content .oneid-form__status .oneid-icon { color: var(--td-warning-color); } .oneid-is-error .oneid-input__extra { color: var(--td-error-color); } .oneid-is-error .oneid-form__controls-content .oneid-input, .oneid-is-error .oneid-form__controls-content .oneid-select, .oneid-is-error .oneid-form__controls-content .oneid-radio-button, .oneid-is-error .oneid-form__controls-content .oneid-cascader, .oneid-is-error .oneid-form__controls-content .oneid-range-input, .oneid-is-error .oneid-form__controls-content .oneid-textarea__inner { border-color: var(--td-error-color); } .oneid-is-error .oneid-form__controls-content .oneid-input--focused, .oneid-is-error .oneid-form__controls-content .oneid-select--focused, .oneid-is-error .oneid-form__controls-content .oneid-radio-button--focused, .oneid-is-error .oneid-form__controls-content .oneid-cascader--focused, .oneid-is-error .oneid-form__controls-content .oneid-range-input--focused, .oneid-is-error .oneid-form__controls-content .oneid-textarea__inner--focused { -webkit-box-shadow: 0 0 0 2px var(--td-error-color-focus); box-shadow: 0 0 0 2px var(--td-error-color-focus); } .oneid-is-error .oneid-form__controls-content .oneid-input .oneid-icon, .oneid-is-error .oneid-form__controls-content .oneid-select .oneid-icon, .oneid-is-error .oneid-form__controls-content .oneid-radio-button .oneid-icon, .oneid-is-error .oneid-form__controls-content .oneid-cascader .oneid-icon, .oneid-is-error .oneid-form__controls-content .oneid-range-input .oneid-icon, .oneid-is-error .oneid-form__controls-content .oneid-textarea__inner .oneid-icon, .oneid-is-error .oneid-form__controls-content .oneid-input .oneid-fake-arrow, .oneid-is-error .oneid-form__controls-content .oneid-select .oneid-fake-arrow, .oneid-is-error .oneid-form__controls-content .oneid-radio-button .oneid-fake-arrow, .oneid-is-error .oneid-form__controls-content .oneid-cascader .oneid-fake-arrow, .oneid-is-error .oneid-form__controls-content .oneid-range-input .oneid-fake-arrow, .oneid-is-error .oneid-form__controls-content .oneid-textarea__inner .oneid-fake-arrow { color: var(--td-error-color); } .oneid-is-error .oneid-form__controls-content .oneid-select > .oneid-select__right-icon:not(.oneid-select__right-icon-clear) { color: var(--td-error-color); } .oneid-is-error .oneid-form__controls-content .oneid-radio-button:last-child { border-right-color: var(--td-error-color); } .oneid-is-error .oneid-form__controls-content .oneid-textarea__inner.oneid-is-focused { -webkit-box-shadow: 0 0 0 2px var(--td-error-color-focus); box-shadow: 0 0 0 2px var(--td-error-color-focus); } .oneid-is-error .oneid-form__controls-content .oneid-cascader.oneid-is-active, .oneid-is-error .oneid-form__controls-content .oneid-select.oneid-is-active { -webkit-box-shadow: 0 0 0 2px var(--td-error-color-focus); box-shadow: 0 0 0 2px var(--td-error-color-focus); } .oneid-is-error .oneid-form__controls-content .oneid-form__status .oneid-icon { color: var(--td-error-color); } /** * 颜色 */ /** * 尺寸 */ /** * 字体 */ /** * 动画 */ /** * 间距 */ /** * 位置 */ /** * 边框弧度 */ .oneid-drawer-fade-enter, .oneid-drawer-fade-appear { opacity: 0; -webkit-animation-duration: 0.2s; animation-duration: 0.2s; -webkit-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-timing-function: linear; animation-timing-function: linear; -webkit-animation-play-state: paused; animation-play-state: paused; } .oneid-drawer-fade-exit { -webkit-animation-duration: 0.2s; animation-duration: 0.2s; -webkit-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-timing-function: linear; animation-timing-function: linear; -webkit-animation-play-state: paused; animation-play-state: paused; } .oneid-drawer-fade-enter.oneid-drawer-fade-enter-active, .oneid-drawer-fade-enter.oneid-drawer-fade-enter-active.oneid-drawer-fade-enter-to, .oneid-drawer-fade-appear.oneid-drawer-fade-appear-active, .oneid-drawer-fade-appear.oneid-drawer-fade-appear-active.oneid-drawer-fade-appear-to { -webkit-animation-name: tDrawerFadeIn; animation-name: tDrawerFadeIn; -webkit-animation-duration: 0.2s; animation-duration: 0.2s; -webkit-animation-play-state: running; animation-play-state: running; } .oneid-drawer-fade-exit.oneid-drawer-fade-exit-active, .oneid-drawer-fade-leave-active.oneid-drawer-fade-leave-to { -webkit-animation-name: tDrawerFadeOut; animation-name: tDrawerFadeOut; -webkit-animation-duration: 0.2s; animation-duration: 0.2s; -webkit-animation-play-state: running; animation-play-state: running; } @-webkit-keyframes tDrawerFadeIn { 0% { opacity: 0; } 100% { opacity: 1; } } @keyframes tDrawerFadeIn { 0% { opacity: 0; } 100% { opacity: 1; } } @-webkit-keyframes tDrawerFadeOut { 0% { opacity: 1; } 100% { opacity: 0; } } @keyframes tDrawerFadeOut { 0% { opacity: 1; } 100% { opacity: 0; } } .oneid-drawer { font: var(--td-font-body-medium); color: var(--td-text-color-primary); -webkit-box-sizing: border-box; box-sizing: border-box; margin: 0; padding: 0; list-style: none; position: fixed; z-index: 1500; width: 100%; height: 100%; pointer-events: none; overflow: hidden; outline: none; } .oneid-drawer--lock { overflow: hidden; } .oneid-drawer--attach { position: absolute; } .oneid-drawer--left, .oneid-drawer--right { top: 0; } .oneid-drawer--left { left: 0; } .oneid-drawer--right { right: 0; } .oneid-drawer--top, .oneid-drawer--bottom { left: 0; } .oneid-drawer--top { top: 0; } .oneid-drawer--bottom { bottom: 0; } .oneid-drawer__mask { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: var(--td-mask-active); -webkit-transition: opacity 0.2s cubic-bezier(0.38, 0, 0.24, 1); transition: opacity 0.2s cubic-bezier(0.38, 0, 0.24, 1); opacity: 0; } .oneid-drawer__content-wrapper { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; background: var(--td-bg-color-container); width: 16px; height: 16px; font-size: var(--td-font-body-medium); color: var(--td-text-color-secondary); -webkit-box-shadow: var(--td-shadow-2); box-shadow: var(--td-shadow-2); overflow: hidden; pointer-events: auto; -webkit-transition: visibility 0.28s cubic-bezier(0.38, 0, 0.24, 1), -webkit-transform 0.28s cubic-bezier(0.38, 0, 0.24, 1); transition: visibility 0.28s cubic-bezier(0.38, 0, 0.24, 1), -webkit-transform 0.28s cubic-bezier(0.38, 0, 0.24, 1); transition: transform 0.28s cubic-bezier(0.38, 0, 0.24, 1), visibility 0.28s cubic-bezier(0.38, 0, 0.24, 1); transition: transform 0.28s cubic-bezier(0.38, 0, 0.24, 1), visibility 0.28s cubic-bezier(0.38, 0, 0.24, 1), -webkit-transform 0.28s cubic-bezier(0.38, 0, 0.24, 1); position: relative; } .oneid-drawer .oneid-drawer__content-wrapper { position: absolute; width: 100%; height: 100%; visibility: hidden; } .oneid-drawer .oneid-drawer__content-wrapper--left, .oneid-drawer .oneid-drawer__content-wrapper--right { top: 0; } .oneid-drawer .oneid-drawer__content-wrapper--left { left: 0; -webkit-transform: translateX(-100%); transform: translateX(-100%); } .oneid-drawer .oneid-drawer__content-wrapper--right { right: 0; -webkit-transform: translateX(100%); transform: translateX(100%); } .oneid-drawer .oneid-drawer__content-wrapper--top, .oneid-drawer .oneid-drawer__content-wrapper--bottom { left: 0; } .oneid-drawer .oneid-drawer__content-wrapper--top { top: 0; -webkit-transform: translateY(-100%); transform: translateY(-100%); } .oneid-drawer .oneid-drawer__content-wrapper--bottom { bottom: 0; -webkit-transform: translateY(100%); transform: translateY(100%); } .oneid-drawer__header { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; min-height: var(--td-comp-size-xxxl); padding: 0 var(--td-comp-paddingLR-l); font: var(--td-font-title-medium); color: var(--td-text-color-primary); border-bottom: 1px solid var(--td-border-level-1-color); border-radius: var(--td-radius-small) var(--td-radius-small) 0 0; -webkit-box-sizing: border-box; box-sizing: border-box; } .oneid-drawer__body { padding: var(--td-comp-paddingTB-l) var(--td-comp-paddingLR-l); overflow: auto; -webkit-box-flex: 1; -ms-flex: 1; flex: 1; } .oneid-drawer__footer { width: 100%; padding: var(--td-comp-paddingTB-l) var(--td-comp-paddingLR-l); text-align: left; border-top: 1px solid var(--td-border-level-1-color); background-color: var(--td-bg-color-container); -webkit-box-sizing: border-box; box-sizing: border-box; } .oneid-drawer__footer .oneid-button { margin-left: var(--td-comp-margin-s); } .oneid-drawer__footer .oneid-button:first-child { margin-left: 0; } .oneid-drawer__close-btn { position: absolute; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; width: var(--td-comp-size-xs); height: var(--td-comp-size-xs); top: calc((var(--td-comp-size-xxxl) - var(--td-comp-size-xs)) / 2); right: var(--td-comp-margin-s); color: var(--td-text-color-primary); background-color: var(--td-bg-color-container); border-radius: var(--td-radius-default); cursor: pointer; -webkit-transition: background-color 0.2s; transition: background-color 0.2s; } .oneid-drawer__close-btn:hover { background-color: var(--td-bg-color-container-hover); } .oneid-drawer__close-btn:active { background-color: var(--td-bg-color-container-active); } .oneid-drawer__close-btn .oneid-icon { font-size: calc(var(--td-font-size-body-medium) + 2px); vertical-align: unset; } .oneid-drawer--open { width: 100%; height: 100%; pointer-events: auto; } .oneid-drawer--open > .oneid-drawer__content-wrapper { visibility: visible; } .oneid-drawer--open > .oneid-drawer__mask { opacity: 1; width: 100%; height: 100%; } .oneid-drawer--without-mask { pointer-events: none; } [tabindex="-1"]:focus { outline: none !important; /* stylelint-disable-line */ } .oneid-progress { font: var(--td-font-body-medium); color: var(--td-text-color-primary); -webkit-box-sizing: border-box; box-sizing: border-box; margin: 0; padding: 0; list-style: none; } .oneid-progress__inner { position: relative; height: 100%; background: var(--td-brand-color); border-radius: var(--td-radius-round); -webkit-transition: all 0.2s cubic-bezier(0.38, 0, 0.24, 1); transition: all 0.2s cubic-bezier(0.38, 0, 0.24, 1); } .oneid-progress__info { margin-left: var(--td-comp-margin-s); color: var(--td-text-color-primary); white-space: nowrap; display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; } .oneid-progress__icon { font-size: calc(var(--td-font-size-body-medium) + 2px); } .oneid-progress__bar { width: 100%; height: var(--td-size-3); overflow: hidden; background: var(--td-bg-color-component); border-radius: var(--td-radius-round); } .oneid-progress--thin { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .oneid-progress--plump { height: var(--td-comp-size-xxs); border-radius: calc(var(--td-comp-size-xxs) / 2); display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .oneid-progress--plump .oneid-progress__info { font-size: var(--td-font-size-body-small); } .oneid-progress--over-ten .oneid-progress__info { position: absolute; top: 50%; z-index: 10; right: var(--td-comp-margin-s); color: var(--td-text-color-anti); -webkit-transform: translateY(-50%); transform: translateY(-50%); } .oneid-progress--under-ten .oneid-progress__info, .oneid-progress--under-ten .oneid-progress__inner { display: inline-block; } .oneid-progress--under-ten .oneid-progress__info { vertical-align: top; } .oneid-progress--circle { position: relative; } .oneid-progress--circle .oneid-progress__info { position: absolute; display: block; top: 50%; left: 50%; width: 100%; margin: 0; font-size: inherit; font-weight: 600; line-height: 1; text-align: center; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } .oneid-progress--circle .oneid-progress__circle-outer { stroke: var(--td-bg-color-component); } .oneid-progress--circle .oneid-progress__circle-inner { stroke: var(--td-brand-color); -webkit-transition: all 0.2s cubic-bezier(0.38, 0, 0.24, 1); transition: all 0.2s cubic-bezier(0.38, 0, 0.24, 1); } .oneid-progress--circle .oneid-progress__icon { font-size: 2.4em; } .oneid-progress--status--active .oneid-progress__inner::before { position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 1; content: ""; -webkit-animation: progress-active-animation 2s cubic-bezier(0.23, 0.99, 0.86, 0.2) infinite; animation: progress-active-animation 2s cubic-bezier(0.23, 0.99, 0.86, 0.2) infinite; background: var(--td-text-color-anti); opacity: 0.2; } .oneid-progress--status--success .oneid-progress__inner { background: var(--td-success-color); } .oneid-progress--status--success .oneid-progress__circle-inner { stroke: var(--td-success-color); } .oneid-progress--status--success .oneid-progress__icon { color: var(--td-success-color); } .oneid-progress--status--warning .oneid-progress__inner { background: var(--td-warning-color); } .oneid-progress--status--warning .oneid-progress__circle-inner { stroke: var(--td-warning-color); } .oneid-progress--status--warning .oneid-progress__icon { color: var(--td-warning-color); } .oneid-progress--status--error .oneid-progress__inner { background: var(--td-error-color); } .oneid-progress--status--error .oneid-progress__circle-inner { stroke: var(--td-error-color); } .oneid-progress--status--error .oneid-progress__icon { color: var(--td-error-color); } @-webkit-keyframes progress-active-animation { 0% { width: 0; opacity: 0.1; } 35% { width: 50%; opacity: 0.4; } 100% { width: 100%; opacity: 0; } } @keyframes progress-active-animation { 0% { width: 0; opacity: 0.1; } 35% { width: 50%; opacity: 0.4; } 100% { width: 100%; opacity: 0; } } .oneid-popconfirm { font: var(--td-font-body-medium); color: var(--td-text-color-primary); -webkit-box-sizing: border-box; box-sizing: border-box; margin: 0; padding: 0; list-style: none; min-width: 160px; border-radius: var(--td-radius-medium); } .oneid-popconfirm .oneid-popup__content { padding: 0; } .oneid-popconfirm.oneid-popup[data-popper-placement^=top] .oneid-popup__arrow { bottom: -4px; } .oneid-popconfirm__content { position: relative; padding: var(--td-comp-paddingTB-l) var(--td-comp-paddingLR-l); border-radius: var(--td-radius-medium); } .oneid-popconfirm__body { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; text-align: left; } .oneid-popconfirm__body > .oneid-icon { display: inline-block; margin-right: var(--td-comp-margin-s); padding: calc((var(--td-line-height-body-medium) - (var(--td-font-size-body-medium) + 6px)) / 2) 0; font-size: calc(var(--td-font-size-body-medium) + 6px); } .oneid-popconfirm__confirm { margin-left: var(--td-comp-margin-s); } .oneid-popconfirm__inner { display: inline-block; vertical-align: top; max-width: 320px; font: var(--td-font-body-medium); color: var(--td-text-color-primary); } .oneid-popconfirm__icon--warning { color: var(--td-warning-color); } .oneid-popconfirm__icon--danger { color: var(--td-error-color); } .oneid-popconfirm__icon--default { color: var(--td-brand-color); } .oneid-popconfirm__buttons { text-align: right; margin-top: var(--td-comp-margin-l); } .oneid-popconfirm__buttons > span:last-child { margin-right: 0; } .oneid-textarea { font: var(--td-font-body-medium); color: var(--td-text-color-primary); -webkit-box-sizing: border-box; box-sizing: border-box; margin: 0; padding: 0; list-style: none; position: relative; width: 100%; } .oneid-textarea__inner { display: -webkit-box; display: -ms-flexbox; display: flex; width: 100%; height: var(--td-comp-size-xxxl); border: 1px solid var(--td-border-level-2-color); border-radius: var(--td-radius-default); padding: calc((var(--td-comp-size-m) - var(--td-line-height-body-medium)) / 2) var(--td-comp-paddingLR-s); background-color: var(--td-bg-color-specialcomponent); font: var(--td-font-body-medium); color: var(--td-text-color-primary); resize: vertical; outline: none; -webkit-transition: all cubic-bezier(0.38, 0, 0.24, 1) 0.2s, height 0s; transition: all cubic-bezier(0.38, 0, 0.24, 1) 0.2s, height 0s; -webkit-box-sizing: border-box; box-sizing: border-box; } .oneid-textarea__inner:hover { border-color: var(--td-brand-color); } .oneid-textarea__inner:focus { border-color: var(--td-brand-color); -webkit-box-shadow: 0 0 0 2px var(--td-brand-color-focus); box-shadow: 0 0 0 2px var(--td-brand-color-focus); } .oneid-textarea__inner::-webkit-input-placeholder { color: var(--td-text-color-placeholder); } .oneid-textarea__inner::-moz-placeholder { color: var(--td-text-color-placeholder); } .oneid-textarea__inner:-ms-input-placeholder { color: var(--td-text-color-placeholder); } .oneid-textarea__inner::-ms-input-placeholder { color: var(--td-text-color-placeholder); } .oneid-textarea__inner::placeholder { color: var(--td-text-color-placeholder); } .oneid-textarea__inner.oneid-is-success { border-color: var(--td-success-color); } .oneid-textarea__inner.oneid-is-success:focus { -webkit-box-shadow: 0 0 0 2px var(--td-success-color-focus); box-shadow: 0 0 0 2px var(--td-success-color-focus); } .oneid-textarea__inner.oneid-is-warning { border-color: var(--td-warning-color); } .oneid-textarea__inner.oneid-is-warning:focus { -webkit-box-shadow: 0 0 0 2px var(--td-warning-color-focus); box-shadow: 0 0 0 2px var(--td-warning-color-focus); } .oneid-textarea__inner.oneid-is-error { border-color: var(--td-error-color); } .oneid-textarea__inner.oneid-is-error:focus { -webkit-box-shadow: 0 0 0 2px var(--td-error-color-focus); box-shadow: 0 0 0 2px var(--td-error-color-focus); } .oneid-textarea__info_wrapper { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-column-gap: var(--td-comp-margin-s); -moz-column-gap: var(--td-comp-margin-s); column-gap: var(--td-comp-margin-s); -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } .oneid-textarea__info_wrapper_align { -webkit-box-pack: end; -ms-flex-pack: end; justify-content: end; } .oneid-textarea__limit { font: var(--td-font-body-small); color: var(--td-text-color-placeholder); } .oneid-textarea .oneid-is-disabled { color: var(--td-text-color-disabled); background-color: var(--td-bg-color-component-disabled); cursor: not-allowed; } .oneid-textarea .oneid-is-disabled:hover { border-color: var(--td-border-level-2-color); } .oneid-textarea .oneid-is-disabled::-webkit-input-placeholder { color: var(--td-text-color-disabled); } .oneid-textarea .oneid-is-disabled::-moz-placeholder { color: var(--td-text-color-disabled); } .oneid-textarea .oneid-is-disabled:-ms-input-placeholder { color: var(--td-text-color-disabled); } .oneid-textarea .oneid-is-disabled::-ms-input-placeholder { color: var(--td-text-color-disabled); } .oneid-textarea .oneid-is-disabled::placeholder { color: var(--td-text-color-disabled); } .oneid-textarea .oneid-resize-none { resize: none; } .oneid-textarea__tips { height: auto; min-height: var(--td-comp-size-xs); font: var(--td-font-body-small); display: inline-block; } .oneid-textarea__tips--normal { color: var(--td-text-color-placeholder); } .oneid-textarea__tips--success { color: var(--td-success-color); } .oneid-textarea__tips--warning { color: var(--td-warning-color); } .oneid-textarea__tips--error { color: var(--td-error-color); } @-webkit-keyframes changeColor { from { color: var(--td-brand-color-hover); } to { color: var(--td-brand-color-active); } } @keyframes changeColor { from { color: var(--td-brand-color-hover); } to { color: var(--td-brand-color-active); } } .oneid-breadcrumb { color: var(--td-text-color-primary); -webkit-box-sizing: border-box; box-sizing: border-box; margin: 0; padding: 0; list-style: none; font: var(--td-font-body-medium); display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .oneid-breadcrumb__separator { margin: 0 var(--td-comp-margin-xs); display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .oneid-breadcrumb__separator .oneid-icon { color: var(--td-text-color-placeholder); } .oneid-breadcrumb__item { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; color: var(--td-text-color-placeholder); text-decoration: none; } .oneid-breadcrumb__item.oneid-is-current { color: var(--td-text-color-primary); } .oneid-breadcrumb__item.oneid-is-current .oneid-icon { color: var(--td-text-color-placeholder); } .oneid-breadcrumb__item:last-child { color: var(--td-text-color-primary); } .oneid-breadcrumb__item:last-child .oneid-breadcrumb__separator { display: none; } .oneid-breadcrumb__item .oneid-icon { font-size: var(--td-font-size-body-large); } .oneid-breadcrumb__item .oneid-link { color: inherit; text-decoration: none; } .oneid-breadcrumb__item .oneid-link:hover { color: var(--td-brand-color); } .oneid-breadcrumb__item .oneid-is-disabled { cursor: not-allowed; } .oneid-breadcrumb__item .oneid-is-disabled .oneid-breadcrumb__inner { color: var(--td-text-color-disabled); } .oneid-breadcrumb__item .oneid-is-disabled .oneid-breadcrumb__inner:hover { color: var(--td-text-color-disabled); cursor: not-allowed; } .oneid-breadcrumb__item .oneid-is-disabled .oneid-breadcrumb__inner:active { -webkit-animation: none; animation: none; } .oneid-breadcrumb__item--arrow { margin: 0 var(--td-comp-margin-xs); line-height: 0; color: var(--td-text-color-placeholder); display: inline-block; vertical-align: middle; } .oneid-breadcrumb__item--slash { margin: 0 var(--td-comp-margin-xs); line-height: 0; color: var(--td-text-color-placeholder); display: inline-block; vertical-align: middle; } .oneid-breadcrumb__inner { font: var(--td-font-body-medium); word-break: break-all; display: inline-block; vertical-align: middle; } .oneid-breadcrumb__inner .oneid-icon { margin: 0 var(--td-comp-margin-xs); } .oneid-breadcrumb__select { position: relative; } .oneid-breadcrumb__select:hover .oneid-breadcrumb__option { display: block; } .oneid-breadcrumb__select-item:hover .oneid-icon { color: var(--td-brand-color); } .oneid-breadcrumb__option { display: none; position: absolute; top: 28px; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); max-width: 120px; background: var(--td-bg-color-container); -webkit-box-shadow: var(--td-shadow-2); box-shadow: var(--td-shadow-2); z-index: 20; } .oneid-breadcrumb__option-item { padding: 8px; font: var(--td-font-body-medium); color: var(--td-text-color-primary); text-overflow: ellipsis; overflow: hidden; white-space: nowrap; } .oneid-breadcrumb__option-item:hover { color: var(--td-brand-color); } .oneid-breadcrumb__option-item.oneid-is-active { color: var(--td-brand-color); } .oneid-breadcrumb__inner-msg { display: none; position: absolute; left: 50%; bottom: 30px; -webkit-transform: translateX(-50%); transform: translateX(-50%); width: 300px; padding: 8px; color: var(--td-text-color-primary); background: var(--td-bg-color-container); border-radius: calc(var(--td-radius-default) * 0.5); -webkit-box-shadow: var(--td-shadow-2); box-shadow: var(--td-shadow-2); z-index: 20; } .oneid-breadcrumb__inner-msg::before { content: ""; position: absolute; bottom: -8px; left: 50%; margin-left: -4px; width: 0; height: 0; border-style: solid; border-width: 8px 6px 0; border-color: var(--td-bg-color-container) transparent transparent transparent; z-index: 20; } .oneid-breadcrumb--text-overflow { position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .oneid-breadcrumb--text-overflow:hover .oneid-breadcrumb__inner-msg { display: block; } .oneid-breadcrumb--text-overflow .oneid-breadcrumb__inner { max-width: 120px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-transition: color 0.2s linear; transition: color 0.2s linear; } .oneid-breadcrumb--text-overflow .oneid-breadcrumb__inner-text { text-overflow: ellipsis; overflow: hidden; white-space: nowrap; } .oneid-breadcrumb--text-overflow .oneid-breadcrumb__inner:hover { color: var(--td-brand-color); cursor: pointer; } .oneid-breadcrumb--text-overflow .oneid-breadcrumb__inner:active { -webkit-animation: 0.2s linear changeColor; animation: 0.2s linear changeColor; } .oneid-dropdown { font: var(--td-font-body-medium); -webkit-box-sizing: border-box; box-sizing: border-box; margin: 0; padding: 0; list-style: none; background-color: var(--td-bg-color-container); font-size: var(--td-font-size-body-medium); color: var(--td-text-color-primary); position: relative; -webkit-box-shadow: var(--td-shadow-2); box-shadow: var(--td-shadow-2); border: 0.5px solid var(--td-component-border); border-radius: var(--td-radius-medium); } .oneid-dropdown__menu { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; border-radius: var(--td-radius-medium); padding: var(--td-pop-padding-m); gap: 2px; overflow-y: auto; overflow-x: hidden; } @-moz-document url-prefix() { .oneid-dropdown__menu { scrollbar-color: var(--td-scrollbar-color) transparent; scrollbar-width: thin; } } .oneid-dropdown__menu::-webkit-scrollbar { width: 8px; height: 8px; } .oneid-dropdown__menu::-webkit-scrollbar-thumb { border: 2px solid transparent; background-clip: content-box; background-color: var(--td-scrollbar-color); border-radius: 15px; } .oneid-dropdown__menu::-webkit-scrollbar-thumb:vertical:hover, .oneid-dropdown__menu::-webkit-scrollbar-thumb:horizontal:hover { background-color: var(--td-scrollbar-hover-color); } .oneid-dropdown__menu .oneid-divider { margin: var(--td-comp-margin-xs) var(--td-comp-margin-s) var(--td-comp-margin-xxs) var(--td-comp-margin-s); color: var(--td-brand-color-light); width: calc(100% - var(--td-comp-margin-s) * 2); } .oneid-dropdown__menu .oneid-dropdown__item-direction { margin: 0 0 0 var(--td-comp-margin-s); } .oneid-dropdown__menu--overflow .oneid-dropdown__submenu-wrapper--right { left: calc(100% - 14px); } .oneid-dropdown__menu--overflow .oneid-dropdown__submenu-wrapper--left { right: calc(100% - 14px); } .oneid-dropdown__submenu { background-color: var(--td-bg-color-container); -webkit-box-shadow: var(--td-shadow-2); box-shadow: var(--td-shadow-2); border-radius: var(--td-radius-medium); border: 0.5px solid var(--td-component-border); z-index: 1100; position: absolute; padding: var(--td-pop-padding-m); display: none; overflow-y: auto; overflow-x: visible; } @-moz-document url-prefix() { .oneid-dropdown__submenu { scrollbar-color: var(--td-scrollbar-color) transparent; scrollbar-width: thin; } } .oneid-dropdown__submenu::-webkit-scrollbar { width: 8px; height: 8px; } .oneid-dropdown__submenu::-webkit-scrollbar-thumb { border: 2px solid transparent; background-clip: content-box; background-color: var(--td-scrollbar-color); border-radius: 15px; } .oneid-dropdown__submenu::-webkit-scrollbar-thumb:vertical:hover, .oneid-dropdown__submenu::-webkit-scrollbar-thumb:horizontal:hover { background-color: var(--td-scrollbar-hover-color); } .oneid-dropdown__submenu ul { list-style: none; display: grid; padding-left: 0; gap: 2px; } .oneid-dropdown__submenu--disabled { visibility: hidden; } .oneid-dropdown__submenu .oneid-dropdown__item-direction { margin: 0 0 0 var(--td-comp-margin-s); } .oneid-dropdown__submenu-wrapper--right { left: calc(100% - 6px); } .oneid-dropdown__submenu-wrapper--left { right: calc(100% - 6px); } .oneid-dropdown__item { border-radius: var(--td-radius-default); font: var(--td-font-body-medium); cursor: pointer; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; outline: none; -webkit-transition: background-color 0.2s cubic-bezier(0.82, 0, 1, 0.9); transition: background-color 0.2s cubic-bezier(0.82, 0, 1, 0.9); white-space: nowrap; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; padding: calc(var(--td-comp-paddingTB-xs) - 1px) var(--td-comp-paddingLR-s); --ripple-color: var(--td-bg-color-container-active); } .oneid-dropdown__item-icon { display: -webkit-box; display: -ms-flexbox; display: flex; color: currentcolor; margin-right: var(--td-comp-margin-s); font-size: var(--td-font-size-body-large); } .oneid-dropdown__item:hover > div > div { display: -webkit-box; display: -ms-flexbox; display: flex; } .oneid-dropdown__item--disabled { cursor: not-allowed; } .oneid-dropdown__item-content { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-flex: 1; -ms-flex: 1; flex: 1; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; max-width: 100%; } .oneid-dropdown__item-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; -webkit-box-flex: 1; -ms-flex: 1; flex: 1; } .oneid-dropdown__item.oneid-dropdown__item--suffix .oneid-dropdown__item-sub-icon { color: currentcolor; font-size: var(--td-font-size-body-large); -ms-flex-negative: 0; flex-shrink: 0; } .oneid-dropdown__item--theme-default { color: var(--td-text-color-primary); } .oneid-dropdown__item--theme-default:hover { background-color: var(--td-bg-color-container-hover); } .oneid-dropdown__item--theme-default:active { background-color: var(--td-bg-color-container-active); } .oneid-dropdown__item--theme-default.oneid-dropdown__item--active { color: var(--td-brand-color); background-color: var(--td-brand-color-light); } .oneid-dropdown__item--theme-default.oneid-dropdown__item--active:hover { background-color: var(--td-bg-color-container-hover); } .oneid-dropdown__item--theme-default.oneid-dropdown__item--active:active { background-color: var(--td-bg-color-container-active); } .oneid-dropdown__item--theme-default.oneid-dropdown__item--disabled { color: var(--td-text-color-disabled); } .oneid-dropdown__item--theme-default.oneid-dropdown__item--disabled:hover { background-color: var(--td-bg-color-container-hover); } .oneid-dropdown__item--theme-default.oneid-dropdown__item--suffix:hover { background-color: var(--td-brand-color-light); color: var(--td-brand-color); } .oneid-dropdown__item--theme-success { color: var(--td-success-color); } .oneid-dropdown__item--theme-success:hover { background-color: var(--td-bg-color-container-hover); } .oneid-dropdown__item--theme-success:active { background-color: var(--td-bg-color-container-active); } .oneid-dropdown__item--theme-success.oneid-dropdown__item--active { background-color: var(--td-success-color-light); } .oneid-dropdown__item--theme-success.oneid-dropdown__item--active:hover { background-color: var(--td-bg-color-container-hover); } .oneid-dropdown__item--theme-success.oneid-dropdown__item--active:active { background-color: var(--td-bg-color-container-active); } .oneid-dropdown__item--theme-success.oneid-dropdown__item-disabled { color: var(--td-text-color-disabled); } .oneid-dropdown__item--theme-success.oneid-dropdown__item-disabled:hover { background-color: var(--td-bg-color-container-hover); } .oneid-dropdown__item--theme-success.oneid-dropdown__item--suffix:hover { background-color: var(--td-success-color-light); } .oneid-dropdown__item--theme-error { color: var(--td-error-color); } .oneid-dropdown__item--theme-error:hover { background-color: var(--td-bg-color-container-hover); } .oneid-dropdown__item--theme-error:active { background-color: var(--td-bg-color-container-active); } .oneid-dropdown__item--theme-error.oneid-dropdown__item--active { background-color: var(--td-error-color-light); } .oneid-dropdown__item--theme-error.oneid-dropdown__item--active:hover { background-color: var(--td-bg-color-container-hover); } .oneid-dropdown__item--theme-error.oneid-dropdown__item--active:active { background-color: var(--td-bg-color-container-active); } .oneid-dropdown__item--theme-error.oneid-dropdown__item--disabled { color: var(--td-text-color-disabled); } .oneid-dropdown__item--theme-error.oneid-dropdown__item--disabled:hover { background-color: var(--td-bg-color-container-hover); } .oneid-dropdown__item--theme-error.oneid-dropdown__item--suffix:hover { background-color: var(--td-error-color-light); } .oneid-dropdown__item--theme-warning { color: var(--td-warning-color); } .oneid-dropdown__item--theme-warning:hover { background-color: var(--td-bg-color-container-hover); } .oneid-dropdown__item--theme-warning:active { background-color: var(--td-bg-color-container-active); } .oneid-dropdown__item--theme-warning.oneid-dropdown__item--active { background-color: var(--td-warning-color-light); } .oneid-dropdown__item--theme-warning.oneid-dropdown__item--active:hover { background-color: var(--td-bg-color-container-hover); } .oneid-dropdown__item--theme-warning.oneid-dropdown__item--active:active { background-color: var(--td-bg-color-container-active); } .oneid-dropdown__item--theme-warning.oneid-dropdown__item--disabled { color: var(--td-text-color-disabled); } .oneid-dropdown__item--theme-warning.oneid-dropdown__item--disabled:hover { background-color: var(--td-bg-color-container-hover); } .oneid-dropdown__item--theme-warning.oneid-dropdown__item--suffix:hover { background-color: var(--td-warning-color-light); } .oneid-slider__input-container { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; margin-left: var(--td-comp-margin-xxl); } .oneid-slider__input-container.is-vertical { padding-top: var(--td-comp-paddingTB-l); margin-left: 0px; } .oneid-slider__input-container .oneid-slider__center-line { width: var(--td-size-4); height: 1px; background: rgba(0, 0, 0, 0.9); margin: 0 var(--td-comp-margin-s); } .oneid-slider { font: var(--td-font-body-medium); color: var(--td-text-color-primary); -webkit-box-sizing: border-box; box-sizing: border-box; margin: 0; padding: 0; list-style: none; height: calc(var(--td-comp-paddingTB-xs) * 2 + var(--td-size-2)); width: 100%; position: relative; padding: var(--td-comp-paddingTB-xs) 0; } .oneid-slider__container { width: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .oneid-slider__container.is-vertical { height: 100%; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } .oneid-slider__rail { position: absolute; width: 100%; height: var(--td-size-2); background-color: var(--td-bg-color-secondarycomponent); -webkit-transition: 0.2s linear; transition: 0.2s linear; border-radius: var(--td-radius-round); } .oneid-slider__rail:hover { background-color: var(--td-bg-color-secondarycomponent-hover); } .oneid-slider__track { position: absolute; height: var(--td-size-2); background-color: var(--td-brand-color); right: auto; border-radius: var(--td-radius-round); } .oneid-slider__step { position: absolute; width: 100%; height: var(--td-size-2); cursor: pointer; } .oneid-slider__button { width: var(--td-comp-size-xxxs); height: var(--td-comp-size-xxxs); border: 2px solid var(--td-brand-color); background-color: #fff; border-radius: var(--td-radius-circle); -webkit-transition: 0.2s; transition: 0.2s; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -webkit-box-sizing: border-box; box-sizing: border-box; -webkit-box-shadow: var(--td-shadow-1); box-shadow: var(--td-shadow-1); } .oneid-slider__button--dragging { -webkit-box-shadow: 0 0 0px 2px var(--td-brand-color-focus); box-shadow: 0 0 0px 2px var(--td-brand-color-focus); } .oneid-slider__button:hover { background-color: var(--td-gray-color-1); } .oneid-slider__button-wrapper { position: absolute; z-index: 2; top: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); background-color: transparent; text-align: center; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; line-height: normal; outline: none; cursor: pointer; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .oneid-slider__stop { position: absolute; width: 1px; height: var(--td-size-2); background-color: var(--td-bg-color-secondarycomponent); top: 4px; } .oneid-slider__mark { position: absolute; top: 2px; left: 0; width: 100%; } .oneid-slider__mark-text { position: absolute; display: inline-block; font: var(--td-font-body-small); color: var(--td-text-color-primary); top: calc(var(--td-size-2) + var(--td-comp-paddingTB-xs) + 2px); -webkit-transform: translateX(-50%); transform: translateX(-50%); cursor: pointer; } .oneid-slider__mark-text:first-child { -webkit-transform: translateX(0%); transform: translateX(0%); } .oneid-slider__mark-text:last-child { -webkit-transform: translateX(-100%); transform: translateX(-100%); } .oneid-slider--vertical { height: 100%; padding: 0; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; position: relative; } .oneid-slider--vertical .oneid-slider__rail { width: var(--td-size-2); height: 100%; } .oneid-slider--vertical .oneid-slider__track { width: var(--td-size-2); top: auto; } .oneid-slider--vertical .oneid-slider__step { width: var(--td-size-2); height: 100%; } .oneid-slider--vertical .oneid-slider__handle { margin-top: -6px; margin-left: -5px; top: auto; -webkit-transform: translateY(50%); transform: translateY(50%); } .oneid-slider--vertical .oneid-slider__mark { top: 0; left: 12px; width: 18px; height: 100%; } .oneid-slider--vertical .oneid-slider__stop { width: var(--td-size-2); height: 1px; left: 4px; background-color: var(--td-bg-color-secondarycomponent); } .oneid-slider--vertical .oneid-slider__mark-text { -webkit-transform: translateY(-50%); transform: translateY(-50%); margin-top: 0; margin-left: var(--td-comp-margin-xxs); } .oneid-slider--vertical .oneid-slider__button-wrapper { top: auto; position: absolute; z-index: 2; left: 50%; -webkit-transform: translate(-50%, 50%); transform: translate(-50%, 50%); background-color: transparent; text-align: center; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; line-height: normal; outline: none; cursor: pointer; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .oneid-is-disabled { cursor: not-allowed; } .oneid-is-disabled .oneid-slider__track { background-color: var(--td-brand-color-disabled); } .oneid-is-disabled .oneid-slider__rail { background-color: var(--td-bg-color-component-disabled); } .oneid-is-disabled .oneid-slider__handle { border: 2px solid var(--td-brand-color-disabled); } .oneid-is-disabled .oneid-slider__button { border-color: var(--td-brand-color-disabled); outline: none; } .oneid-is-disabled .oneid-slider__mark-text { color: var(--td-text-color-disabled); cursor: not-allowed; } .oneid-is-disabled .oneid-slider__button-wrapper { cursor: not-allowed; } .oneid-select-option__highlight-item .oneid-is-highlight { color: var(--td-brand-color); } .oneid-auto-complete { width: 100%; } .oneid-auto-complete .oneid-input__suffix-clear { display: none; } .oneid-auto-complete:hover .oneid-input__suffix-clear { display: inline-block; } .oneid-auto-complete__panel--empty { height: var(--td-comp-size-m); line-height: var(--td-comp-size-m); color: var(--td-text-color-disabled); text-align: center; } .oneid-cascader .oneid-fake-arrow { color: var(--td-text-color-placeholder); } .oneid-cascader .oneid-fake-arrow--active { color: var(--td-brand-color); } .oneid-cascader__popup .oneid-popup__content { padding: 0; -webkit-box-shadow: var(--td-shadow-2); box-shadow: var(--td-shadow-2); border-radius: var(--td-radius-medium); border: 0.5px solid var(--td-component-border); overflow: hidden; } .oneid-cascader__panel { display: -webkit-box; display: -ms-flexbox; display: flex; height: 100%; } .oneid-cascader__panel.oneid-cascader--normal { height: 200px; } .oneid-cascader__panel.oneid-cascader--multiple { height: 280px; } .oneid-cascader__panel--empty { width: 100%; height: var(--td-comp-size-s); line-height: var(--td-comp-size-s); color: var(--td-text-color-disabled); margin: var(--td-pop-padding-m); text-align: center; padding-left: 0; } .oneid-cascader__panel--empty:hover { background: none; cursor: default; } .oneid-cascader__menu { width: 148px; overflow: auto; -webkit-box-sizing: content-box; box-sizing: content-box; padding: var(--td-pop-padding-m); background: var(--td-bg-color-container); } .oneid-cascader__menu.oneid-size-l { padding: var(--td-pop-padding-l); } .oneid-cascader__menu.oneid-size-s { padding: var(--td-pop-padding-s); } .oneid-cascader__menu--segment { border-right: 1px solid var(--td-component-stroke); } .oneid-cascader__menu--filter { width: auto; min-width: 148px; } .oneid-cascader__item { position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; height: var(--td-comp-size-s); font: var(--td-font-body-medium); color: var(--td-text-color-primary); padding: 0 var(--td-comp-paddingLR-s); border-radius: var(--td-radius-default); margin-top: var(--td-comp-margin-xxs); -webkit-transition: background-color 0.2s cubic-bezier(0.82, 0, 1, 0.9); transition: background-color 0.2s cubic-bezier(0.82, 0, 1, 0.9); list-style: none; --ripple-color: var(--td-bg-color-container-active); } .oneid-cascader__item.oneid-size-s { height: var(--td-comp-size-xs); font: var(--td-font-body-small); padding: 0px var(--td-comp-paddingLR-s); } .oneid-cascader__item.oneid-size-l { height: var(--td-comp-size-m); font: var(--td-font-body-large); padding: 0 var(--td-comp-paddingLR-m); } .oneid-cascader__item.oneid-is-disabled { color: var(--td-text-color-disabled); background-color: transparent; cursor: not-allowed; } .oneid-cascader__item-icon.oneid-icon { position: absolute; height: 100%; right: 0; top: 0; background: transparent; margin: 0 8px; font-size: 16px; color: var(--td-text-color-placeholder); } .oneid-cascader__item-icon.oneid-loading { display: -webkit-box; display: -ms-flexbox; display: flex; color: var(--td-text-color-brand); } .oneid-cascader__item.oneid-is-expanded { background: var(--td-brand-color-light); color: var(--td-text-color-brand); } .oneid-cascader__item.oneid-is-expanded .oneid-icon-chevron-right { color: var(--td-text-color-brand); } .oneid-cascader__item.oneid-is-expanded:hover { cursor: pointer; } .oneid-cascader__item:first-child { margin-top: 0; } .oneid-cascader__item .oneid-checkbox { max-width: 100%; } .oneid-cascader__item .oneid-checkbox .oneid-checkbox__input { -ms-flex-negative: 0; flex-shrink: 0; } .oneid-cascader__item .oneid-checkbox .oneid-checkbox__label { display: block; white-space: nowrap; word-wrap: normal; overflow: hidden; text-overflow: ellipsis; } .oneid-cascader__item .oneid-checkbox .oneid-checkbox__label .oneid-cascader__item__label--filter { color: var(--td-text-color-brand); } .oneid-cascader__item--with-icon { padding: 0 calc(var(--td-comp-paddingLR-s) + 14px) 0 var(--td-comp-paddingLR-s); } .oneid-cascader__item--leaf .oneid-checkbox { width: 100%; } .oneid-cascader__item-label { display: block; position: relative; white-space: nowrap; padding: 0; } .oneid-cascader__item-label--ellipsis { white-space: nowrap; word-wrap: normal; overflow: hidden; text-overflow: ellipsis; } .oneid-cascader__item-label--filter { color: var(--td-text-color-brand); } .oneid-cascader__item:hover:not(.oneid-is-expanded):not(.oneid-is-disabled) { background: var(--td-bg-color-container-hover); cursor: pointer; } .oneid-cascader__item.oneid-is-selected { color: var(--td-brand-color); background: var(--td-brand-color-light); } .oneid-cascader__item.oneid-is-selected .oneid-checkbox__label { color: var(--td-brand-color); } .oneid-date-picker, .oneid-date-range-picker { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; font: var(--td-font-body-medium); color: var(--td-text-color-primary); -webkit-box-sizing: border-box; box-sizing: border-box; margin: 0; padding: 0; list-style: none; } .oneid-date-picker__header-controller-month-popup > .oneid-popup__content, .oneid-date-picker__header-controller-year-popup > .oneid-popup__content { max-height: 160px; } .oneid-date-picker__panel-container > .oneid-popup__content, .oneid-date-range-picker__panel-container > .oneid-popup__content { padding: 0; min-width: 280px; } .oneid-date-picker__panel, .oneid-date-range-picker__panel { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } .oneid-date-picker__panel--direction-row, .oneid-date-range-picker__panel--direction-row { -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; } .oneid-date-picker__panel .oneid-time-picker__panel, .oneid-date-range-picker__panel .oneid-time-picker__panel { width: 216px; } .oneid-date-picker__panel .oneid-time-picker__panel-section-body, .oneid-date-range-picker__panel .oneid-time-picker__panel-section-body { padding: 0; } .oneid-date-picker__panel .oneid-time-picker__panel-body, .oneid-date-range-picker__panel .oneid-time-picker__panel-body { margin: 0; } .oneid-date-picker__panel-content, .oneid-date-range-picker__panel-content, .oneid-date-range-picker__panel-content-wrapper { display: -webkit-box; display: -ms-flexbox; display: flex; } .oneid-date-picker__header { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; gap: var(--td-comp-margin-m); width: 100%; } .oneid-date-picker__header-controller { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; gap: var(--td-comp-margin-s); } .oneid-date-picker__header-controller .oneid-date-picker__header-controller-month { width: 80px; display: -webkit-box; display: -ms-flexbox; display: flex; } .oneid-date-picker__header-controller .oneid-date-picker__header-controller-year { width: 78px; display: -webkit-box; display: -ms-flexbox; display: flex; } .oneid-date-picker__table table { width: 100%; border-collapse: collapse; } .oneid-date-picker__table table th { text-align: center; color: var(--td-text-color-secondary); font-weight: 400; } .oneid-date-picker__table table td.oneid-date-picker__cell { text-align: center; font-weight: 500; } .oneid-date-picker__table table th, .oneid-date-picker__table table th.oneid-date-picker__table-header-cell, .oneid-date-picker__table table td.oneid-date-picker__cell { padding: 0; border: 0; line-height: var(--td-line-height-body-medium); } .oneid-date-picker__table table thead::after { content: "-"; display: block; line-height: var(--td-comp-margin-xs); color: transparent; } .oneid-date-picker__table table thead::before { content: "-"; display: block; line-height: var(--td-comp-margin-xs); color: transparent; } .oneid-date-picker__table-week-row { cursor: pointer; position: -webkit-sticky; position: sticky; } .oneid-date-picker__table-week-row .oneid-date-picker__cell:first-child .oneid-date-picker__cell-inner { color: var(--td-text-color-disabled); } .oneid-date-picker__table-week-row .oneid-date-picker__cell:hover .oneid-date-picker__cell-inner { -webkit-box-shadow: none; box-shadow: none; background: none; } .oneid-date-picker__table-week-row::after { content: ""; position: absolute; left: var(--td-comp-margin-xxxl); right: 0; top: calc(var(--td-comp-margin-xs) - 1px); z-index: 10; height: var(--td-comp-size-xs); border-radius: var(--td-radius-default); -webkit-transition: background-color 0.2s linear, border-color 0.2s linear, color 0.2s linear, -webkit-box-shadow 0.2s cubic-bezier(0.38, 0, 0.24, 1); transition: background-color 0.2s linear, border-color 0.2s linear, color 0.2s linear, -webkit-box-shadow 0.2s cubic-bezier(0.38, 0, 0.24, 1); transition: box-shadow 0.2s cubic-bezier(0.38, 0, 0.24, 1), background-color 0.2s linear, border-color 0.2s linear, color 0.2s linear; transition: box-shadow 0.2s cubic-bezier(0.38, 0, 0.24, 1), background-color 0.2s linear, border-color 0.2s linear, color 0.2s linear, -webkit-box-shadow 0.2s cubic-bezier(0.38, 0, 0.24, 1); pointer-events: none; } .oneid-date-picker__table-week-row:hover .oneid-date-picker__cell:first-child .oneid-date-picker__cell-inner { color: var(--td-brand-color); } .oneid-date-picker__table-week-row:hover::after { -webkit-box-shadow: inset 0 0 0 1px var(--td-brand-color); box-shadow: inset 0 0 0 1px var(--td-brand-color); } .oneid-date-picker__table-week-row--active::after { opacity: 1; z-index: 0; background-color: var(--td-brand-color); } .oneid-date-picker__table-week-row--active .oneid-date-picker__cell:first-child .oneid-date-picker__cell-inner { color: var(--td-brand-color); } .oneid-date-picker__table-week-row--active .oneid-date-picker__cell .oneid-date-picker__cell-inner { background: transparent; color: var(--td-text-color-anti); } .oneid-date-picker__table-week-row--range::after { opacity: 1; z-index: 0; background-color: var(--td-brand-color-light); } .oneid-date-picker__table-week-row--range .oneid-date-picker__cell .oneid-date-picker__cell-inner { background: transparent; } .oneid-date-picker__footer { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; padding: var(--td-pop-padding-xl); gap: var(--td-comp-margin-s); } .oneid-date-picker__footer--bottom { border-top: 1px solid var(--td-component-stroke); } .oneid-date-picker__footer--top { border-bottom: 1px solid var(--td-component-stroke); } .oneid-date-picker__footer--left { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; border-right: 1px solid var(--td-component-stroke); } .oneid-date-picker__footer--left .oneid-date-picker__presets { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } .oneid-date-picker__footer--right { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; border-left: 1px solid var(--td-component-stroke); } .oneid-date-picker__footer--right .oneid-date-picker__presets { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } .oneid-date-picker__presets { display: -webkit-box; display: -ms-flexbox; display: flex; gap: var(--td-comp-margin-s); white-space: nowrap; min-width: var(--td-comp-size-xl); } .oneid-date-picker__presets .oneid-button { cursor: pointer; } .oneid-date-picker__presets a { color: var(--td-brand-color); } .oneid-date-picker__presets a:hover { color: var(--td-brand-color-hover); } .oneid-date-picker__panel-time, .oneid-date-range-picker__panel-time { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; gap: calc(var(--td-comp-margin-m) / 2); padding: var(--td-pop-padding-xl) calc(var(--td-pop-padding-xl) - var(--td-comp-margin-xs)); border-left: 1px solid var(--td-component-stroke); } .oneid-date-picker__panel-time-viewer, .oneid-date-range-picker__panel-time-viewer { display: -webkit-box; display: -ms-flexbox; display: flex; height: var(--td-comp-size-m); line-height: var(--td-line-height-body-medium); -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; color: var(--td-text-color-primary); } .oneid-date-picker__panel-time .oneid-time-picker__panel-body, .oneid-date-range-picker__panel-time .oneid-time-picker__panel-body { margin: 0; } .oneid-date-picker__panel-year, .oneid-date-picker__panel-month, .oneid-date-picker__panel-quarter, .oneid-date-picker__panel-week, .oneid-date-picker__panel-date { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; padding: var(--td-pop-padding-xl); gap: var(--td-comp-margin-m); width: 280px; -webkit-box-sizing: border-box; box-sizing: border-box; } .oneid-date-picker__panel-year .oneid-date-picker__cell--hover-highlight + .oneid-date-picker__cell--hover-highlight::before, .oneid-date-picker__panel-month .oneid-date-picker__cell--hover-highlight + .oneid-date-picker__cell--hover-highlight::before, .oneid-date-picker__panel-year .oneid-date-picker__cell--hover-highlight + .oneid-date-picker__cell--hover-highlight::after, .oneid-date-picker__panel-month .oneid-date-picker__cell--hover-highlight + .oneid-date-picker__cell--hover-highlight::after { opacity: 1; left: calc(0px - (var(--td-comp-size-xs) + var(--td-comp-margin-xxl))); } .oneid-date-picker__panel-year .oneid-date-picker__cell--hover-highlight + .oneid-date-picker__cell--active::after, .oneid-date-picker__panel-month .oneid-date-picker__cell--hover-highlight + .oneid-date-picker__cell--active::after { opacity: 1; left: calc(0px - (var(--td-comp-size-xs) + var(--td-comp-margin-xxl))); z-index: 5; } .oneid-date-picker__panel-year .oneid-date-picker__cell--highlight + .oneid-date-picker__cell--highlight::before, .oneid-date-picker__panel-month .oneid-date-picker__cell--highlight + .oneid-date-picker__cell--highlight::before { left: calc(0px - (var(--td-comp-size-xs) + var(--td-comp-margin-xxl))); } .oneid-date-picker__panel-year .oneid-date-picker__header-controller-year, .oneid-date-picker__panel-month .oneid-date-picker__header-controller-year, .oneid-date-picker__panel-quarter .oneid-date-picker__header-controller-year { width: 130px; display: -webkit-box; display: -ms-flexbox; display: flex; } .oneid-date-picker__panel-year .oneid-date-picker__table table tbody, .oneid-date-picker__panel-month .oneid-date-picker__table table tbody, .oneid-date-picker__panel-quarter .oneid-date-picker__table table tbody { width: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; gap: var(--td-comp-margin-m); -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } .oneid-date-picker__panel-year .oneid-date-picker__table table tbody tr, .oneid-date-picker__panel-month .oneid-date-picker__table table tbody tr, .oneid-date-picker__panel-quarter .oneid-date-picker__table table tbody tr { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } .oneid-date-picker__panel-year .oneid-date-picker__cell--disabled + .oneid-date-picker__cell--disabled:before, .oneid-date-picker__panel-month .oneid-date-picker__cell--disabled + .oneid-date-picker__cell--disabled:before, .oneid-date-picker__panel-quarter .oneid-date-picker__cell--disabled + .oneid-date-picker__cell--disabled:before { left: calc(0px - var(--td-comp-size-xxxl)); } .oneid-date-picker__panel-year .oneid-date-picker__cell:nth-child(1), .oneid-date-picker__panel-month .oneid-date-picker__cell:nth-child(1), .oneid-date-picker__panel-quarter .oneid-date-picker__cell:nth-child(1) { text-align: left; } .oneid-date-picker__panel-year .oneid-date-picker__cell:nth-child(3), .oneid-date-picker__panel-month .oneid-date-picker__cell:nth-child(3), .oneid-date-picker__panel-quarter .oneid-date-picker__cell:nth-child(3) { text-align: right; } .oneid-date-picker__panel-year .oneid-date-picker__cell-inner, .oneid-date-picker__panel-month .oneid-date-picker__cell-inner, .oneid-date-picker__panel-quarter .oneid-date-picker__cell-inner { width: var(--td-comp-size-xxl); } .oneid-date-picker__cell { cursor: pointer; position: relative; padding: 0; } .oneid-date-picker__cell::before, .oneid-date-picker__cell::after { content: ""; position: absolute; top: 50%; right: -5%; left: -5%; z-index: 1; opacity: 0; border-radius: var(--td-radius-default); height: var(--td-comp-size-xs); -webkit-transform: translateY(-50%); transform: translateY(-50%); -webkit-transition: opacity 0.2s cubic-bezier(0, 0, 0.15, 1); transition: opacity 0.2s cubic-bezier(0, 0, 0.15, 1); } .oneid-date-picker__cell:hover .oneid-date-picker__cell-inner { -webkit-box-shadow: inset 0 0 0 1px var(--td-brand-color); box-shadow: inset 0 0 0 1px var(--td-brand-color); } .oneid-date-picker__cell-inner { position: relative; z-index: 5; display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; width: var(--td-comp-size-xs); height: var(--td-comp-size-xs); margin: calc(var(--td-comp-margin-xs) - 1px); border-radius: var(--td-radius-default); -webkit-transition: background-color 0.2s linear, border-color 0.2s linear, color 0.2s linear, -webkit-box-shadow 0.2s cubic-bezier(0.38, 0, 0.24, 1); transition: background-color 0.2s linear, border-color 0.2s linear, color 0.2s linear, -webkit-box-shadow 0.2s cubic-bezier(0.38, 0, 0.24, 1); transition: box-shadow 0.2s cubic-bezier(0.38, 0, 0.24, 1), background-color 0.2s linear, border-color 0.2s linear, color 0.2s linear; transition: box-shadow 0.2s cubic-bezier(0.38, 0, 0.24, 1), background-color 0.2s linear, border-color 0.2s linear, color 0.2s linear, -webkit-box-shadow 0.2s cubic-bezier(0.38, 0, 0.24, 1); } .oneid-date-picker__cell--now .oneid-date-picker__cell-inner { color: var(--td-brand-color); background: var(--td-brand-color-light); } .oneid-date-picker__cell--hover-highlight::after { opacity: 1; background-color: var(--td-brand-color-light); } .oneid-date-picker__cell--highlight::before { opacity: 1; background-color: var(--td-brand-color-light); } .oneid-date-picker__cell--highlight.oneid-date-picker__cell--hover-highlight::after { opacity: 1; background-color: rgba(0, 0, 0, 0.06); } .oneid-date-picker__cell--additional:hover .oneid-date-picker__cell-inner { -webkit-box-shadow: none; box-shadow: none; border-color: var(--td-bg-color-container-hover); background-color: var(--td-bg-color-container-hover); } .oneid-date-picker__cell--additional .oneid-date-picker__cell-inner { color: var(--td-text-color-disabled); } .oneid-date-picker__cell--active .oneid-date-picker__cell-inner { color: var(--td-text-color-anti); background-color: var(--td-brand-color); } .oneid-date-picker__cell--active-start::before { opacity: 1; left: calc((var(--td-comp-margin-xs) - 1px) * 2); border-top-left-radius: var(--td-radius-default); border-bottom-left-radius: var(--td-radius-default); } .oneid-date-picker__cell--active-start:hover::before { left: -5%; } .oneid-date-picker__cell--active-end::before { opacity: 1; right: calc((var(--td-comp-margin-xs) - 1px) * 2); border-top-right-radius: var(--td-radius-default); border-bottom-right-radius: var(--td-radius-default); } .oneid-date-picker__cell--active-end:hover::before { right: -5%; } .oneid-date-picker__cell--disabled:hover .oneid-date-picker__cell-inner { -webkit-box-shadow: none; box-shadow: none; background-color: var(--td-bg-color-component-disabled); } .oneid-date-picker__cell--disabled .oneid-date-picker__cell-inner { cursor: not-allowed; color: var(--td-text-color-disabled); background-color: var(--td-bg-color-component-disabled); } .oneid-date-picker__cell--disabled + .oneid-date-picker__cell--disabled::before { opacity: 1; left: calc(0px - var(--td-comp-size-l)); background-color: var(--td-bg-color-component-disabled); border-radius: var(--td-radius-default); } .oneid-date-picker__input--placeholder input { color: var(--td-text-color-placeholder); } .oneid-upload { font: var(--td-font-body-medium); color: var(--td-text-color-primary); -webkit-box-sizing: border-box; box-sizing: border-box; margin: 0; padding: 0; list-style: none; } .oneid-upload .oneid-is-bordered { border: 1px solid var(--td-component-border); } .oneid-upload .oneid-upload__trigger { display: inline-block; } .oneid-upload .oneid-icon { font-size: calc(var(--td-font-size-body-medium) + 2px); -ms-flex-negative: 0; flex-shrink: 0; } .oneid-upload .oneid-icon-check-circle-filled { color: var(--td-success-color); } .oneid-upload .oneid-icon-error-circle-filled { color: var(--td-error-color); } .oneid-upload .oneid-icon-time-filled { color: var(--td-text-color-placeholder); } .oneid-upload .oneid-icon-add { color: var(--td-text-color-primary); } .oneid-upload__list-file { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; width: 100px; height: 100px; margin-right: var(--td-comp-margin-m); overflow: hidden; } .oneid-upload__list-file .oneid-icon { font-size: var(--td-comp-size-xl); color: var(--td-brand-color); } .oneid-upload__list-item { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -ms-flex-align: center; align-items: center; margin-top: var(--td-comp-margin-m); width: 496px; height: 124px; padding: var(--td-comp-paddingTB-m) var(--td-comp-paddingLR-m); border: 1px solid var(--td-component-border); border-radius: var(--td-radius-default); font: var(--td-font-body-medium); } .oneid-upload__list-item.oneid-is--error .oneid-upload__list-name { color: var(--td-error-color); } .oneid-upload__list-item.oneid-is--error .oneid-upload__list-file .oneid-icon { color: var(--td-error-color); } .oneid-upload__list-content { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .oneid-upload-list__control { cursor: pointer; } .oneid-upload-list__control:hover { color: var(--td-error-color); } .oneid-upload__list-img { -o-object-fit: cover; object-fit: cover; max-width: 100%; max-height: 100%; cursor: pointer; } .oneid-upload__list-name { max-width: 200px; white-space: nowrap; word-wrap: normal; overflow: hidden; text-overflow: ellipsis; } .oneid-upload--highlight { color: var(--td-text-color-brand); } .oneid-upload__single-name { margin-right: var(--td-comp-margin-s); } .oneid-upload__card { font: var(--td-font-body-small); overflow: hidden; width: 100%; margin: 0; padding: 0; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; gap: var(--td-comp-margin-s); } .oneid-upload__card .oneid-is-disabled :hover { cursor: not-allowed; } .oneid-upload__card-item { cursor: pointer; -webkit-box-sizing: border-box; box-sizing: border-box; list-style: none; } .oneid-upload__card-item::after { content: ""; display: block; } .oneid-upload__card-item:hover .oneid-upload__card-mask { opacity: 1; -webkit-transition: opacity 0.2s linear; transition: opacity 0.2s linear; } .oneid-upload__card-item.oneid-is--error .oneid-icon-warning_fill { color: var(--td-error-color); margin-bottom: var(--td-comp-margin-s); } .oneid-upload__card-item.oneid-is--error .oneid-upload__card-status { color: var(--td-error-color); } .oneid-upload__card-item.oneid-is-background { -webkit-transition: border-color 0.2s linear; transition: border-color 0.2s linear; } .oneid-upload__card .oneid-icon-loading { margin-bottom: var(--td-comp-margin-s); } .oneid-upload__card-name { max-width: 100%; margin-top: var(--td-comp-margin-s); white-space: nowrap; word-wrap: normal; overflow: hidden; text-overflow: ellipsis; } .oneid-upload__card-content { position: relative; width: 110px; height: 110px; overflow: hidden; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-sizing: border-box; box-sizing: border-box; background-color: var(--td-bg-color-secondarycontainer); border: 1px dashed var(--td-component-border); padding: var(--td-comp-paddingTB-s) var(--td-comp-paddingLR-s); border-radius: var(--td-radius-default); } .oneid-upload__card-container { width: 110px; height: 110px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; background-color: var(--td-bg-color-secondarycontainer); border: 1px dashed var(--td-component-border); -webkit-box-sizing: border-box; box-sizing: border-box; position: relative; border-radius: var(--td-radius-default); -webkit-transition: border 0.2s linear; transition: border 0.2s linear; } .oneid-upload__card-container:hover:not(.oneid-is-disabled) { border-color: var(--td-brand-color); -webkit-transition: border-color 0.2s linear; transition: border-color 0.2s linear; } .oneid-upload__card-container > .oneid-icon { color: var(--td-text-color-placeholder); } .oneid-upload__card-container > .oneid-icon, .oneid-upload__card-container .oneid-loading { font-size: var(--td-comp-size-xs); margin-bottom: var(--td-comp-margin-s); } .oneid-upload__card-container > p, .oneid-upload__card-container .oneid-upload__add-text { color: var(--td-text-color-placeholder); margin: 0; } .oneid-upload__card-status-wrap { text-align: center; } .oneid-upload__card-status-wrap > svg { margin-bottom: var(--td-comp-margin-s); } .oneid-upload__card-status-wrap .oneid-icon, .oneid-upload__card-status-wrap .oneid-loading { font-size: var(--td-comp-size-xs); } .oneid-upload__card-image { max-width: 100%; max-height: 100%; width: 100%; height: 100%; } .oneid-upload__card-status { color: var(--td-text-color-disabled); font: var(--td-font-body-small); } .oneid-upload__card-mask { background-color: var(--td-mask-active); color: var(--td-text-color-anti); will-change: transform; opacity: 0; z-index: 2; -webkit-transition: opacity 0.2s linear; transition: opacity 0.2s linear; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; position: absolute; left: 0; right: 0; top: 0; bottom: 0; } .oneid-upload__card-mask-item-divider { margin: 0 var(--td-comp-margin-l); border-left: 1px var(--td-text-color-anti) solid; height: var(--td-comp-size-xxxs); } .oneid-upload__card-mask-item > .oneid-icon { cursor: pointer; font-size: calc(var(--td-font-size-body-medium) + 2px); } .oneid-upload__dialog .oneid-dialog { max-width: 80%; } .oneid-upload__dialog .oneid-dialog--default { padding: 32px; } .oneid-upload__dialog .oneid-dialog-body { padding-bottom: 0; } .oneid-upload__dialog .oneid-dialog-body-img-box img { display: block; max-width: 100%; max-height: 100%; } .oneid-upload__dragger { display: -webkit-box; display: -ms-flexbox; display: flex; width: 336px; height: 144px; border: 1px dashed var(--td-component-border); border-radius: var(--td-radius-small); font: var(--td-font-body-medium); color: var(--td-text-color-secondary); cursor: pointer; padding: var(--td-comp-margin-l); position: relative; overflow: auto; -webkit-box-sizing: border-box; box-sizing: border-box; -webkit-transition: border-color 0.2s linear; transition: border-color 0.2s linear; } .oneid-upload__dragger.oneid-is--active { background-color: var(--td-bg-color-container-active); border-color: var(--td-brand-color); } .oneid-upload__dragger:hover { border-color: var(--td-brand-color); } .oneid-upload__dragger-btns { position: absolute; bottom: var(--td-comp-margin-l); } .oneid-upload__dragger .oneid-size-s { display: block; } .oneid-upload__dragger-center { -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .oneid-upload__dragger-error { border-color: var(--td-error-color); } .oneid-upload__dragger-error:hover { border-color: var(--td-error-color); } .oneid-upload__dragger-text { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; font: var(--td-font-body-medium); color: var(--td-text-color-primary); margin-bottom: var(--td-comp-margin-s); max-width: calc(336px - var(--td-comp-margin-l) * 2 - 0); } .oneid-upload__dragger-text .oneid-upload__single-name { white-space: nowrap; word-wrap: normal; overflow: hidden; text-overflow: ellipsis; } .oneid-upload__tips { display: block; color: var(--td-text-color-placeholder); margin-top: var(--td-comp-margin-s); font: var(--td-font-body-small); } .oneid-upload__tips.oneid-upload__tips-error { color: var(--td-error-color); } .oneid-upload__tips.oneid-upload__tips-warn { color: var(--td-warning-color); } .oneid-upload__placeholder { color: var(--td-text-color-placeholder); } .oneid-upload__display-text--margin { margin-top: var(--td-comp-margin-s); } .oneid-upload__single-display-text { color: var(--td-text-color-secondary); font: var(--td-font-body-small); display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .oneid-upload__single-display-text .oneid-upload__flow-status .oneid-icon { font-size: calc(var(--td-font-size-body-medium) + 2px); } .oneid-icon-clear-circle-filled { color: var(--td-text-color-placeholder); margin-top: var(--td-comp-margin-xxs); -webkit-transition: color 0.2s linear; transition: color 0.2s linear; } .oneid-icon-clear-circle-filled:hover { color: var(--td-text-color-secondary); cursor: pointer; -webkit-transition: color 0.2s linear; transition: color 0.2s linear; } .oneid-upload__single-percent { margin-left: var(--td-comp-margin-xs); } .oneid-upload__single-progress { color: var(--td-brand-color); display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .oneid-upload__single-progress .oneid-loading { font-size: calc(var(--td-font-size-body-medium) + 2px); -ms-flex-negative: 0; flex-shrink: 0; } .oneid-upload__single-input-delete { margin-left: var(--td-comp-margin-l); font: var(--td-font-body-medium); color: var(--td-brand-color); cursor: pointer; } .oneid-upload__single-input-preview { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-flex: 1; -ms-flex: 1; flex: 1; } .oneid-upload__single-input-text { display: block; white-space: nowrap; word-wrap: normal; overflow: hidden; text-overflow: ellipsis; } .oneid-upload__single-file-input { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .oneid-upload__single-file-input .oneid-upload__trigger { margin-left: var(--td-comp-margin-l); } .oneid-upload__single-file-input .oneid-upload__single-progress { white-space: nowrap; } .oneid-upload__single-file-input .oneid-input__inner { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } .oneid-upload__dragger-progress { width: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; } .oneid-upload__dragger-progress .oneid-icon, .oneid-upload__dragger-progress .oneid-loading { font-size: calc(var(--td-font-size-body-medium) + 2px); -ms-flex-negative: 0; flex-shrink: 0; } .oneid-upload__dragger-img-wrap { width: 110px; height: 110px; background-color: var(--td-bg-color-secondarycontainer); border-radius: var(--td-radius-default); display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -ms-flex-negative: 0; flex-shrink: 0; } .oneid-upload__dragger-img-wrap > .oneid-image__wrapper--shape-square { width: 100%; } .oneid-upload__dragger-img-wrap > .oneid-image__wrapper--shape-square .oneid-space-item { text-align: center; } .oneid-upload__dragger-img-wrap > img { max-width: 100%; max-height: 100%; } .oneid-upload__dragger-img-wrap + .oneid-upload__dragger-progress-info { margin-left: var(--td-comp-margin-l); max-width: calc(336px - var(--td-comp-margin-l) * 2 - (110px + var(--td-comp-margin-l))); } .oneid-upload__dragger-progress-info { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; } .oneid-upload__dragger-progress-info .oneid-upload__single-display-text { margin-bottom: var(--td-comp-margin-s); } .oneid-upload__dragger-progress-info .oneid-button:hover { background-color: transparent; } .oneid-upload__dragger-progress-cancel, .oneid-upload__dragger-progress-reupload { margin-right: var(--td-comp-margin-l); } .oneid-upload__dragger-progress-cancel:hover, .oneid-upload__dragger-progress-reupload:hover { border-color: transparent; } .oneid-upload__dragger-delete-btn:hover, .oneid-upload__dragger-upload-btn:hover { border-color: transparent; } .oneid-upload__flow-image-flow { width: 498px; } .oneid-upload__flow { min-width: 498px; max-width: 960px; } .oneid-upload__flow-placeholder { display: inline-block; margin-left: var(--td-comp-margin-l); } .oneid-upload__flow-op { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .oneid-upload__flow-bottom { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; margin-top: var(--td-comp-margin-xxl); } .oneid-upload__flow-bottom .oneid-button + .oneid-button { margin-left: var(--td-comp-margin-s); } .oneid-upload__flow-empty { width: 100%; height: 184px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; color: var(--td-text-color-placeholder); } .oneid-upload__flow-table { width: 100%; border: 1px dashed var(--td-component-border); margin-top: var(--td-comp-margin-xxl); border-collapse: collapse; } .oneid-upload__flow-table > thead > tr, .oneid-upload__flow-table > tbody > tr, .oneid-upload__flow-table > tfoot > tr, .oneid-upload__flow-table > tr { border-top: 1px solid var(--td-component-border); } .oneid-upload__flow-table > thead > tr > th, .oneid-upload__flow-table > tbody > tr > th, .oneid-upload__flow-table > tfoot > tr > th, .oneid-upload__flow-table > tr > th { color: var(--td-text-color-placeholder); font-weight: normal; border: 1px solid var(--td-component-border); text-align: left; background-color: var(--td-bg-color-container); } .oneid-upload__flow-table > thead > tr > td, .oneid-upload__flow-table > tbody > tr > td, .oneid-upload__flow-table > tfoot > tr > td, .oneid-upload__flow-table > tr > td { color: var(--td-text-color-primary); } .oneid-upload__flow-table > thead > tr > td, .oneid-upload__flow-table > tbody > tr > td, .oneid-upload__flow-table > tfoot > tr > td, .oneid-upload__flow-table > tr > td, .oneid-upload__flow-table > thead > tr > th, .oneid-upload__flow-table > tbody > tr > th, .oneid-upload__flow-table > tfoot > tr > th, .oneid-upload__flow-table > tr > th { padding: var(--td-comp-paddingTB-m) var(--td-comp-paddingLR-l); } .oneid-upload__flow-table__batch-row { border-left: 1px solid var(--td-component-border); } .oneid-upload__flow-button { color: var(--td-text-color-placeholder); cursor: pointer; -webkit-transition: color 0.2s linear; transition: color 0.2s linear; } .oneid-upload__flow-button:hover { color: var(--td-text-color-secondary); } .oneid-upload__flow-status { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .oneid-upload__flow-status .oneid-icon, .oneid-upload__flow-status .oneid-loading { margin-right: var(--td-comp-margin-s); font-size: calc(var(--td-font-size-body-medium) + 2px); } .oneid-upload__flow-card-area { border: 1px dashed var(--td-component-border); padding: var(--td-comp-paddingTB-m) var(--td-comp-paddingLR-m); margin-top: var(--td-comp-margin-xxl); -webkit-transition: border 0.2s linear; transition: border 0.2s linear; } .oneid-upload__flow-card-area:hover { border-color: var(--td-brand-color); -webkit-transition: border-color 0.2s linear; transition: border-color 0.2s linear; } .oneid-upload__icon-delete, .oneid-upload__single-input-clear { color: var(--td-text-color-placeholder); cursor: pointer; -webkit-transition: color 0.2s linear; transition: color 0.2s linear; } .oneid-upload__icon-delete:hover, .oneid-upload__single-input-clear:hover { color: var(--td-text-color-secondary); -webkit-transition: color 0.2s linear; transition: color 0.2s linear; } .oneid-icon.oneid-upload__single-input-clear { display: none; } .oneid-upload__single-input-preview:hover .oneid-upload__single-input-clear { display: initial; } .oneid-upload__single-input-preview:hover .oneid-upload__status-icon { display: none; } .oneid-upload .oneid-upload__single-name { color: var(--td-text-color-secondary); } .oneid-upload .oneid-upload__file-thumbnail { margin-right: var(--td-comp-paddingLR-s); width: var(--td-comp-size-xxl); height: var(--td-comp-size-xxl); display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; cursor: pointer; } .oneid-upload .oneid-upload__file-thumbnail > svg { font-size: var(--td-comp-size-s); color: var(--td-text-color-placeholder); } .oneid-upload__card-name { margin-top: 8px; } .oneid-upload--theme-file-input { width: 100%; } .oneid-upload__dragger-btns > .oneid-button { padding: 0; } .oneid-upload__file-info { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .oneid-upload__card-container.oneid-is-disabled { cursor: not-allowed; } .oneid-upload__card-container.oneid-is-disabled .oneid-upload__add-text { color: var(--td-text-color-disabled); } .oneid-upload__card-container.oneid-is-disabled .oneid-icon { color: var(--td-text-color-disabled); } /* Swiper */ .oneid-swiper { font: var(--td-font-body-medium); color: var(--td-text-color-primary); -webkit-box-sizing: border-box; box-sizing: border-box; margin: 0; padding: 0; list-style: none; position: relative; height: -webkit-fit-content; height: -moz-fit-content; height: fit-content; } .oneid-swiper__wrap { display: block; position: relative; height: 100%; } .oneid-swiper__content { position: relative; z-index: 1; overflow: hidden; } .oneid-swiper__container { position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; height: 100%; z-index: 1; } .oneid-swiper__container__item { -webkit-box-flex: 0; -ms-flex: 0 0 auto; flex: 0 0 auto; width: 100%; height: 100%; display: inline-block; } .oneid-swiper__arrow { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .oneid-swiper__arrow svg.oneid-icon { width: 20px; height: 20px; } .oneid-swiper__arrow svg.oneid-icon::before { font-size: 24px; } .oneid-swiper__arrow--default .oneid-swiper__arrow-left { position: absolute; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); display: -webkit-box; display: -ms-flexbox; display: flex; width: 24px; height: 24px; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; z-index: 2; background-color: transparent; color: var(--td-font-white-2); -webkit-transition: 0.2s linear; transition: 0.2s linear; cursor: pointer; left: 16px; } .oneid-swiper__arrow--default .oneid-swiper__arrow-left:hover { color: var(--td-bg-color-container); background-color: var(--td-font-white-4); border-radius: var(--td-radius-default); -webkit-transition: 0.2s linear; transition: 0.2s linear; } .oneid-swiper__arrow--default .oneid-swiper__arrow-left:active { background-color: var(--td-font-white-3); -webkit-transition: 0.2s linear; transition: 0.2s linear; } .oneid-swiper__arrow--default .oneid-swiper__arrow-right { position: absolute; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); display: -webkit-box; display: -ms-flexbox; display: flex; width: 24px; height: 24px; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; z-index: 2; background-color: transparent; color: var(--td-font-white-2); -webkit-transition: 0.2s linear; transition: 0.2s linear; cursor: pointer; right: 16px; } .oneid-swiper__arrow--default .oneid-swiper__arrow-right:hover { color: var(--td-bg-color-container); background-color: var(--td-font-white-4); border-radius: var(--td-radius-default); -webkit-transition: 0.2s linear; transition: 0.2s linear; } .oneid-swiper__arrow--default .oneid-swiper__arrow-right:active { background-color: var(--td-font-white-3); -webkit-transition: 0.2s linear; transition: 0.2s linear; } .oneid-swiper-card .oneid-swiper__container { display: block; } .oneid-swiper-card .oneid-swiper__container .oneid-is-active { z-index: 2; } .oneid-swiper-card .oneid-swiper__card { position: absolute; top: 0; left: 0; width: 41.5%; height: 100%; z-index: 0; } .oneid-swiper-fade .oneid-swiper__container { display: block; } .oneid-swiper-fade .oneid-swiper__fade { position: absolute; top: 0; left: 0; } .oneid-swiper__navigation { position: absolute; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; bottom: 0; margin: 0; padding: 0; z-index: 2; } .oneid-swiper__navigation > li { -webkit-box-flex: 1; -ms-flex: 1 0 auto; flex: 1 0 auto; list-style-type: none; display: -webkit-box; display: -ms-flexbox; display: flex; } .oneid-swiper__navigation .oneid-swiper__arrow svg.oneid-icon { width: 16px; height: 16px; } .oneid-swiper__navigation-bars .oneid-swiper__navigation-item { cursor: pointer; margin: 0 0 0 6px; padding: 18px 0; width: 14px; height: auto; } .oneid-swiper__navigation-bars .oneid-swiper__navigation-item span { width: 100%; height: 3px; } .oneid-swiper__navigation-bars .oneid-swiper__navigation-item:nth-child(1) { margin-left: 0; } .oneid-swiper__navigation-bars .oneid-swiper__navigation-item span { background: var(--td-font-white-4); } .oneid-swiper__navigation-bars .oneid-swiper__navigation-item span:hover { background-color: var(--td-font-white-2); } .oneid-swiper__navigation-bars .oneid-swiper__navigation-item span:active { background-color: var(--td-bg-color-container); } .oneid-swiper__navigation-bars .oneid-swiper__navigation-item.oneid-is-active { width: 24px; } .oneid-swiper__navigation-bars .oneid-swiper__navigation-item.oneid-is-active span { background-color: var(--td-bg-color-container); } .oneid-swiper__navigation-dots-bar .oneid-swiper__navigation-item { cursor: pointer; margin: 0 0 0 6px; padding: 18px 0; width: 14px; height: auto; } .oneid-swiper__navigation-dots-bar .oneid-swiper__navigation-item span { border-radius: 1.5px; } .oneid-swiper__navigation-dots-bar .oneid-swiper__navigation-item span { width: 100%; height: 3px; } .oneid-swiper__navigation-dots-bar .oneid-swiper__navigation-item:nth-child(1) { margin-left: 0; } .oneid-swiper__navigation-dots-bar .oneid-swiper__navigation-item span { background: var(--td-font-white-4); } .oneid-swiper__navigation-dots-bar .oneid-swiper__navigation-item span:hover { background-color: var(--td-font-white-2); } .oneid-swiper__navigation-dots-bar .oneid-swiper__navigation-item span:active { background-color: var(--td-bg-color-container); } .oneid-swiper__navigation-dots-bar .oneid-swiper__navigation-item.oneid-is-active { width: 24px; } .oneid-swiper__navigation-dots-bar .oneid-swiper__navigation-item.oneid-is-active span { background-color: var(--td-bg-color-container); } .oneid-swiper__navigation-dots .oneid-swiper__navigation-item { cursor: pointer; margin: 0 0 0 6px; padding: 18px 0; width: var(--td-size-2); height: auto; } .oneid-swiper__navigation-dots .oneid-swiper__navigation-item span { border-radius: 50%; } .oneid-swiper__navigation-dots .oneid-swiper__navigation-item span { width: 100%; height: var(--td-size-2); } .oneid-swiper__navigation-dots .oneid-swiper__navigation-item:nth-child(1) { margin-left: 0; } .oneid-swiper__navigation-dots .oneid-swiper__navigation-item span { background: var(--td-font-white-4); } .oneid-swiper__navigation-dots .oneid-swiper__navigation-item span:hover { background-color: var(--td-font-white-2); } .oneid-swiper__navigation-dots .oneid-swiper__navigation-item span:active { background-color: var(--td-bg-color-container); } .oneid-swiper__navigation-dots .oneid-swiper__navigation-item.oneid-is-active span { background-color: var(--td-bg-color-container); } .oneid-swiper__navigation--fraction { position: absolute; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); top: auto; right: auto; bottom: calc(0px - (var(--td-line-height-body-medium) + 12px)); height: var(--td-line-height-body-medium); line-height: var(--td-line-height-body-medium); } .oneid-swiper__navigation--fraction .oneid-swiper__arrow-left { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; z-index: 2; background-color: transparent; color: var(--td-text-color-secondary); width: var(--td-line-height-body-medium); height: var(--td-line-height-body-medium); cursor: pointer; } .oneid-swiper__navigation--fraction .oneid-swiper__arrow-left:hover { color: var(--td-text-color-primary); } .oneid-swiper__navigation--fraction .oneid-swiper__arrow-left:active { color: var(--td-brand-color-active); } .oneid-swiper__navigation--fraction .oneid-swiper__arrow-right { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; z-index: 2; background-color: transparent; color: var(--td-text-color-secondary); width: var(--td-line-height-body-medium); height: var(--td-line-height-body-medium); cursor: pointer; } .oneid-swiper__navigation--fraction .oneid-swiper__arrow-right:hover { color: var(--td-text-color-primary); } .oneid-swiper__navigation--fraction .oneid-swiper__arrow-right:active { color: var(--td-brand-color-active); } .oneid-swiper__navigation--fraction .oneid-swiper__navigation-text-fraction { display: inline-block; font-size: var(--td-font-size-body-medium); color: var(--td-text-color-secondary); margin: 0; } .oneid-swiper--vertical .oneid-swiper__container { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } .oneid-swiper--vertical .oneid-swiper__navigation { position: absolute; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); left: auto; right: 0; bottom: auto; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .oneid-swiper--vertical .oneid-swiper__navigation-bars .oneid-swiper__navigation-item { cursor: pointer; margin: 6px 0 0 0; padding: 0 18px; width: auto; height: 14px; } .oneid-swiper--vertical .oneid-swiper__navigation-bars .oneid-swiper__navigation-item span { width: 3px; height: 100%; } .oneid-swiper--vertical .oneid-swiper__navigation-bars .oneid-swiper__navigation-item:nth-child(1) { margin-top: 0; } .oneid-swiper--vertical .oneid-swiper__navigation-bars .oneid-swiper__navigation-item span { background: var(--td-font-white-4); } .oneid-swiper--vertical .oneid-swiper__navigation-bars .oneid-swiper__navigation-item span:hover { background-color: var(--td-font-white-2); } .oneid-swiper--vertical .oneid-swiper__navigation-bars .oneid-swiper__navigation-item span:active { background-color: var(--td-bg-color-container); } .oneid-swiper--vertical .oneid-swiper__navigation-bars .oneid-swiper__navigation-item.oneid-is-active { height: 24px; } .oneid-swiper--vertical .oneid-swiper__navigation-bars .oneid-swiper__navigation-item.oneid-is-active span { background-color: var(--td-bg-color-container); } .oneid-swiper--vertical .oneid-swiper__navigation-dots-bar .oneid-swiper__navigation-item { cursor: pointer; margin: 6px 0 0 0; padding: 0 18px; width: auto; height: 14px; } .oneid-swiper--vertical .oneid-swiper__navigation-dots-bar .oneid-swiper__navigation-item span { border-radius: 1.5px; } .oneid-swiper--vertical .oneid-swiper__navigation-dots-bar .oneid-swiper__navigation-item span { width: 3px; height: 100%; } .oneid-swiper--vertical .oneid-swiper__navigation-dots-bar .oneid-swiper__navigation-item:nth-child(1) { margin-top: 0; } .oneid-swiper--vertical .oneid-swiper__navigation-dots-bar .oneid-swiper__navigation-item span { background: var(--td-font-white-4); } .oneid-swiper--vertical .oneid-swiper__navigation-dots-bar .oneid-swiper__navigation-item span:hover { background-color: var(--td-font-white-2); } .oneid-swiper--vertical .oneid-swiper__navigation-dots-bar .oneid-swiper__navigation-item span:active { background-color: var(--td-bg-color-container); } .oneid-swiper--vertical .oneid-swiper__navigation-dots-bar .oneid-swiper__navigation-item.oneid-is-active { height: 24px; } .oneid-swiper--vertical .oneid-swiper__navigation-dots-bar .oneid-swiper__navigation-item.oneid-is-active span { background-color: var(--td-bg-color-container); } .oneid-swiper--vertical .oneid-swiper__navigation-dots .oneid-swiper__navigation-item { cursor: pointer; margin: 6px 0 0 0; padding: 0 18px; width: auto; max-height: var(--td-size-2); } .oneid-swiper--vertical .oneid-swiper__navigation-dots .oneid-swiper__navigation-item span { border-radius: 50%; } .oneid-swiper--vertical .oneid-swiper__navigation-dots .oneid-swiper__navigation-item span { width: var(--td-size-2); height: 100%; } .oneid-swiper--vertical .oneid-swiper__navigation-dots .oneid-swiper__navigation-item:nth-child(1) { margin-top: 0; } .oneid-swiper--vertical .oneid-swiper__navigation-dots .oneid-swiper__navigation-item span { background: var(--td-font-white-4); } .oneid-swiper--vertical .oneid-swiper__navigation-dots .oneid-swiper__navigation-item span:hover { background-color: var(--td-font-white-2); } .oneid-swiper--vertical .oneid-swiper__navigation-dots .oneid-swiper__navigation-item span:active { background-color: var(--td-bg-color-container); } .oneid-swiper--vertical .oneid-swiper__navigation-dots .oneid-swiper__navigation-item.oneid-is-active span { background-color: var(--td-bg-color-container); } .oneid-swiper--outside .oneid-swiper__navigation { bottom: -36px; } .oneid-swiper--outside .oneid-swiper__navigation--fraction { position: absolute; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); top: auto; right: auto; bottom: calc(0px - (var(--td-line-height-body-medium) + 12px)); height: var(--td-line-height-body-medium); line-height: var(--td-line-height-body-medium); } .oneid-swiper--outside .oneid-swiper__navigation--fraction .oneid-swiper__arrow-left { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; z-index: 2; background-color: transparent; color: var(--td-text-color-secondary); width: var(--td-line-height-body-medium); height: var(--td-line-height-body-medium); cursor: pointer; } .oneid-swiper--outside .oneid-swiper__navigation--fraction .oneid-swiper__arrow-left:hover { color: var(--td-text-color-primary); } .oneid-swiper--outside .oneid-swiper__navigation--fraction .oneid-swiper__arrow-left:active { color: var(--td-brand-color-active); } .oneid-swiper--outside .oneid-swiper__navigation--fraction .oneid-swiper__arrow-right { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; z-index: 2; background-color: transparent; color: var(--td-text-color-secondary); width: var(--td-line-height-body-medium); height: var(--td-line-height-body-medium); cursor: pointer; } .oneid-swiper--outside .oneid-swiper__navigation--fraction .oneid-swiper__arrow-right:hover { color: var(--td-text-color-primary); } .oneid-swiper--outside .oneid-swiper__navigation--fraction .oneid-swiper__arrow-right:active { color: var(--td-brand-color-active); } .oneid-swiper--outside .oneid-swiper__navigation--fraction .oneid-swiper__navigation-text-fraction { display: inline-block; font-size: var(--td-font-size-body-medium); color: var(--td-text-color-secondary); margin: 0; } .oneid-swiper--outside .oneid-swiper__navigation-bars .oneid-swiper__navigation-item span { background-color: var(--td-text-color-disabled); } .oneid-swiper--outside .oneid-swiper__navigation-bars .oneid-swiper__navigation-item span:hover { background-color: var(--td-text-color-primary); } .oneid-swiper--outside .oneid-swiper__navigation-bars .oneid-swiper__navigation-item span:active { background-color: var(--td-brand-color-active); } .oneid-swiper--outside .oneid-swiper__navigation-bars .oneid-is-active span { background-color: var(--td-brand-color-active); } .oneid-swiper--outside.oneid-swiper--vertical .oneid-swiper__navigation { bottom: auto; right: -36px; } .oneid-swiper--outside.oneid-swiper--vertical .oneid-swiper__navigation--fraction { position: absolute; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); top: auto; right: auto; bottom: calc(0px - (var(--td-line-height-body-medium) + 12px)); height: var(--td-line-height-body-medium); line-height: var(--td-line-height-body-medium); } .oneid-swiper--outside.oneid-swiper--vertical .oneid-swiper__navigation--fraction .oneid-swiper__arrow-left { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; z-index: 2; background-color: transparent; color: var(--td-text-color-secondary); width: var(--td-line-height-body-medium); height: var(--td-line-height-body-medium); cursor: pointer; } .oneid-swiper--outside.oneid-swiper--vertical .oneid-swiper__navigation--fraction .oneid-swiper__arrow-left:hover { color: var(--td-text-color-primary); } .oneid-swiper--outside.oneid-swiper--vertical .oneid-swiper__navigation--fraction .oneid-swiper__arrow-left:active { color: var(--td-brand-color-active); } .oneid-swiper--outside.oneid-swiper--vertical .oneid-swiper__navigation--fraction .oneid-swiper__arrow-right { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; z-index: 2; background-color: transparent; color: var(--td-text-color-secondary); width: var(--td-line-height-body-medium); height: var(--td-line-height-body-medium); cursor: pointer; } .oneid-swiper--outside.oneid-swiper--vertical .oneid-swiper__navigation--fraction .oneid-swiper__arrow-right:hover { color: var(--td-text-color-primary); } .oneid-swiper--outside.oneid-swiper--vertical .oneid-swiper__navigation--fraction .oneid-swiper__arrow-right:active { color: var(--td-brand-color-active); } .oneid-swiper--outside.oneid-swiper--vertical .oneid-swiper__navigation--fraction .oneid-swiper__navigation-text-fraction { display: inline-block; font-size: var(--td-font-size-body-medium); color: var(--td-text-color-secondary); margin: 0; } .oneid-swiper--outside.oneid-swiper--vertical .oneid-swiper__navigation-bars .oneid-swiper__navigation-item span { background-color: var(--td-text-color-disabled); } .oneid-swiper--outside.oneid-swiper--vertical .oneid-swiper__navigation-bars .oneid-swiper__navigation-item span:hover { background-color: var(--td-text-color-primary); } .oneid-swiper--outside.oneid-swiper--vertical .oneid-swiper__navigation-bars .oneid-swiper__navigation-item span:active { background-color: var(--td-brand-color-active); } .oneid-swiper--outside.oneid-swiper--vertical .oneid-swiper__navigation-bars .oneid-is-active span { background-color: var(--td-brand-color-active); } .oneid-swiper--inside .oneid-swiper__navigation { bottom: 0; } .oneid-swiper--inside .oneid-swiper__navigation--fraction { position: absolute; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); top: auto; right: auto; bottom: calc(0px - (var(--td-line-height-body-medium) + 12px)); height: var(--td-line-height-body-medium); line-height: var(--td-line-height-body-medium); } .oneid-swiper--inside .oneid-swiper__navigation--fraction .oneid-swiper__arrow-left { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; z-index: 2; background-color: transparent; color: var(--td-text-color-secondary); width: var(--td-line-height-body-medium); height: var(--td-line-height-body-medium); cursor: pointer; } .oneid-swiper--inside .oneid-swiper__navigation--fraction .oneid-swiper__arrow-left:hover { color: var(--td-text-color-primary); } .oneid-swiper--inside .oneid-swiper__navigation--fraction .oneid-swiper__arrow-left:active { color: var(--td-brand-color-active); } .oneid-swiper--inside .oneid-swiper__navigation--fraction .oneid-swiper__arrow-right { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; z-index: 2; background-color: transparent; color: var(--td-text-color-secondary); width: var(--td-line-height-body-medium); height: var(--td-line-height-body-medium); cursor: pointer; } .oneid-swiper--inside .oneid-swiper__navigation--fraction .oneid-swiper__arrow-right:hover { color: var(--td-text-color-primary); } .oneid-swiper--inside .oneid-swiper__navigation--fraction .oneid-swiper__arrow-right:active { color: var(--td-brand-color-active); } .oneid-swiper--inside .oneid-swiper__navigation--fraction .oneid-swiper__navigation-text-fraction { display: inline-block; font-size: var(--td-font-size-body-medium); color: var(--td-text-color-secondary); margin: 0; } .oneid-swiper--large .oneid-swiper__arrow i.oneid-icon::before { font-size: 32px; } .oneid-swiper--large .oneid-swiper__arrow--default .oneid-swiper__arrow-left { width: 32px; height: 32px; left: 24px; } .oneid-swiper--large .oneid-swiper__arrow--default .oneid-swiper__arrow-right { width: 32px; height: 32px; right: 24px; } .oneid-swiper--large .oneid-swiper__navigation-bars .oneid-swiper__navigation-item { cursor: pointer; margin: 0 0 0 8px; padding: 24px 0; width: 21px; height: auto; } .oneid-swiper--large .oneid-swiper__navigation-bars .oneid-swiper__navigation-item span { width: 100%; height: 4px; } .oneid-swiper--large .oneid-swiper__navigation-bars .oneid-swiper__navigation-item:nth-child(1) { margin-left: 0; } .oneid-swiper--large .oneid-swiper__navigation-bars .oneid-swiper__navigation-item span { background: var(--td-font-white-4); } .oneid-swiper--large .oneid-swiper__navigation-bars .oneid-swiper__navigation-item span:hover { background-color: var(--td-font-white-2); } .oneid-swiper--large .oneid-swiper__navigation-bars .oneid-swiper__navigation-item span:active { background-color: var(--td-bg-color-container); } .oneid-swiper--large .oneid-swiper__navigation-bars .oneid-swiper__navigation-item.oneid-is-active { width: 36px; } .oneid-swiper--large .oneid-swiper__navigation-bars .oneid-swiper__navigation-item.oneid-is-active span { background-color: var(--td-bg-color-container); } .oneid-swiper--large .oneid-swiper__navigation--fraction { position: absolute; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); top: auto; right: auto; bottom: calc(0px - (var(--td-line-height-body-large) + 12px)); height: var(--td-line-height-body-large); line-height: var(--td-line-height-body-large); } .oneid-swiper--large .oneid-swiper__navigation--fraction .oneid-swiper__arrow-left { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; z-index: 2; background-color: transparent; color: var(--td-text-color-secondary); width: var(--td-line-height-body-large); height: var(--td-line-height-body-large); cursor: pointer; } .oneid-swiper--large .oneid-swiper__navigation--fraction .oneid-swiper__arrow-left:hover { color: var(--td-text-color-primary); } .oneid-swiper--large .oneid-swiper__navigation--fraction .oneid-swiper__arrow-left:active { color: var(--td-brand-color-active); } .oneid-swiper--large .oneid-swiper__navigation--fraction .oneid-swiper__arrow-right { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; z-index: 2; background-color: transparent; color: var(--td-text-color-secondary); width: var(--td-line-height-body-large); height: var(--td-line-height-body-large); cursor: pointer; } .oneid-swiper--large .oneid-swiper__navigation--fraction .oneid-swiper__arrow-right:hover { color: var(--td-text-color-primary); } .oneid-swiper--large .oneid-swiper__navigation--fraction .oneid-swiper__arrow-right:active { color: var(--td-brand-color-active); } .oneid-swiper--large .oneid-swiper__navigation--fraction .oneid-swiper__navigation-text-fraction { display: inline-block; font-size: var(--td-font-size-body-large); color: var(--td-text-color-secondary); margin: 0; } .oneid-swiper--large.oneid-swiper--outside .oneid-swiper__navigation { bottom: -48px; } .oneid-swiper--large.oneid-swiper--outside .oneid-swiper__navigation-bars .oneid-swiper__navigation-item span { background-color: var(--td-text-color-disabled); } .oneid-swiper--large.oneid-swiper--outside .oneid-swiper__navigation-bars .oneid-swiper__navigation-item span:hover { background-color: var(--td-text-color-primary); } .oneid-swiper--large.oneid-swiper--outside .oneid-swiper__navigation-bars .oneid-swiper__navigation-item span:active { background-color: var(--td-brand-color-active); } .oneid-swiper--large.oneid-swiper--outside .oneid-swiper__navigation-bars .oneid-is-active span { background-color: var(--td-brand-color-active); } .oneid-swiper--large.oneid-swiper--vertical .oneid-swiper__navigation-bars .oneid-swiper__navigation-item { cursor: pointer; margin: 8px 0 0 0; padding: 0 24px; width: auto; height: 21px; } .oneid-swiper--large.oneid-swiper--vertical .oneid-swiper__navigation-bars .oneid-swiper__navigation-item span { width: 4px; height: 100%; } .oneid-swiper--large.oneid-swiper--vertical .oneid-swiper__navigation-bars .oneid-swiper__navigation-item:nth-child(1) { margin-top: 0; } .oneid-swiper--large.oneid-swiper--vertical .oneid-swiper__navigation-bars .oneid-swiper__navigation-item span { background: var(--td-font-white-4); } .oneid-swiper--large.oneid-swiper--vertical .oneid-swiper__navigation-bars .oneid-swiper__navigation-item span:hover { background-color: var(--td-font-white-2); } .oneid-swiper--large.oneid-swiper--vertical .oneid-swiper__navigation-bars .oneid-swiper__navigation-item span:active { background-color: var(--td-bg-color-container); } .oneid-swiper--large.oneid-swiper--vertical .oneid-swiper__navigation-bars .oneid-swiper__navigation-item.oneid-is-active { height: 36px; } .oneid-swiper--large.oneid-swiper--vertical .oneid-swiper__navigation-bars .oneid-swiper__navigation-item.oneid-is-active span { background-color: var(--td-bg-color-container); } .oneid-swiper--large.oneid-swiper--vertical.oneid-swiper--outside .oneid-swiper__navigation { right: -48px; } .oneid-swiper--large.oneid-swiper--vertical.oneid-swiper--outside .oneid-swiper__navigation-bars .oneid-swiper__navigation-item span { background-color: var(--td-text-color-disabled); } .oneid-swiper--large.oneid-swiper--vertical.oneid-swiper--outside .oneid-swiper__navigation-bars .oneid-swiper__navigation-item span:hover { background-color: var(--td-text-color-primary); } .oneid-swiper--large.oneid-swiper--vertical.oneid-swiper--outside .oneid-swiper__navigation-bars .oneid-swiper__navigation-item span:active { background-color: var(--td-brand-color-active); } .oneid-swiper--large.oneid-swiper--vertical.oneid-swiper--outside .oneid-swiper__navigation-bars .oneid-is-active span { background-color: var(--td-brand-color-active); } .oneid-swiper--small .oneid-swiper__arrow i.oneid-icon::before { font-size: 16px; } .oneid-swiper--small .oneid-swiper__arrow--default .oneid-swiper__arrow-left { width: 16px; height: 16px; left: 8px; } .oneid-swiper--small .oneid-swiper__arrow--default .oneid-swiper__arrow-right { width: 16px; height: 16px; right: 8px; } .oneid-swiper--small .oneid-swiper__navigation-bars .oneid-swiper__navigation-item { cursor: pointer; margin: 0 0 0 4px; padding: 12px 0; width: 9px; height: auto; } .oneid-swiper--small .oneid-swiper__navigation-bars .oneid-swiper__navigation-item span { width: 100%; height: 2px; } .oneid-swiper--small .oneid-swiper__navigation-bars .oneid-swiper__navigation-item:nth-child(1) { margin-left: 0; } .oneid-swiper--small .oneid-swiper__navigation-bars .oneid-swiper__navigation-item span { background: var(--td-font-white-4); } .oneid-swiper--small .oneid-swiper__navigation-bars .oneid-swiper__navigation-item span:hover { background-color: var(--td-font-white-2); } .oneid-swiper--small .oneid-swiper__navigation-bars .oneid-swiper__navigation-item span:active { background-color: var(--td-bg-color-container); } .oneid-swiper--small .oneid-swiper__navigation-bars .oneid-swiper__navigation-item.oneid-is-active { width: 15px; } .oneid-swiper--small .oneid-swiper__navigation-bars .oneid-swiper__navigation-item.oneid-is-active span { background-color: var(--td-bg-color-container); } .oneid-swiper--small .oneid-swiper__navigation--fraction { position: absolute; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); top: auto; right: auto; bottom: calc(0px - (var(--td-line-height-body-small) + 12px)); height: var(--td-line-height-body-small); line-height: var(--td-line-height-body-small); } .oneid-swiper--small .oneid-swiper__navigation--fraction .oneid-swiper__arrow-left { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; z-index: 2; background-color: transparent; color: var(--td-text-color-secondary); width: var(--td-line-height-body-small); height: var(--td-line-height-body-small); cursor: pointer; } .oneid-swiper--small .oneid-swiper__navigation--fraction .oneid-swiper__arrow-left:hover { color: var(--td-text-color-primary); } .oneid-swiper--small .oneid-swiper__navigation--fraction .oneid-swiper__arrow-left:active { color: var(--td-brand-color-active); } .oneid-swiper--small .oneid-swiper__navigation--fraction .oneid-swiper__arrow-right { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; z-index: 2; background-color: transparent; color: var(--td-text-color-secondary); width: var(--td-line-height-body-small); height: var(--td-line-height-body-small); cursor: pointer; } .oneid-swiper--small .oneid-swiper__navigation--fraction .oneid-swiper__arrow-right:hover { color: var(--td-text-color-primary); } .oneid-swiper--small .oneid-swiper__navigation--fraction .oneid-swiper__arrow-right:active { color: var(--td-brand-color-active); } .oneid-swiper--small .oneid-swiper__navigation--fraction .oneid-swiper__navigation-text-fraction { display: inline-block; font-size: var(--td-font-size-body-small); color: var(--td-text-color-secondary); margin: 0; } .oneid-swiper--small.oneid-swiper--outside .oneid-swiper__navigation { bottom: -24px; } .oneid-swiper--small.oneid-swiper--outside .oneid-swiper__navigation-bars .oneid-swiper__navigation-item span { background-color: var(--td-text-color-disabled); } .oneid-swiper--small.oneid-swiper--outside .oneid-swiper__navigation-bars .oneid-swiper__navigation-item span:hover { background-color: var(--td-text-color-primary); } .oneid-swiper--small.oneid-swiper--outside .oneid-swiper__navigation-bars .oneid-swiper__navigation-item span:active { background-color: var(--td-brand-color-active); } .oneid-swiper--small.oneid-swiper--outside .oneid-swiper__navigation-bars .oneid-is-active span { background-color: var(--td-brand-color-active); } .oneid-swiper--small.oneid-swiper--vertical .oneid-swiper__navigation-bars .oneid-swiper__navigation-item { cursor: pointer; margin: 4px 0 0 0; padding: 0 12px; width: auto; height: 9px; } .oneid-swiper--small.oneid-swiper--vertical .oneid-swiper__navigation-bars .oneid-swiper__navigation-item span { width: 2px; height: 100%; } .oneid-swiper--small.oneid-swiper--vertical .oneid-swiper__navigation-bars .oneid-swiper__navigation-item:nth-child(1) { margin-top: 0; } .oneid-swiper--small.oneid-swiper--vertical .oneid-swiper__navigation-bars .oneid-swiper__navigation-item span { background: var(--td-font-white-4); } .oneid-swiper--small.oneid-swiper--vertical .oneid-swiper__navigation-bars .oneid-swiper__navigation-item span:hover { background-color: var(--td-font-white-2); } .oneid-swiper--small.oneid-swiper--vertical .oneid-swiper__navigation-bars .oneid-swiper__navigation-item span:active { background-color: var(--td-bg-color-container); } .oneid-swiper--small.oneid-swiper--vertical .oneid-swiper__navigation-bars .oneid-swiper__navigation-item.oneid-is-active { height: 15px; } .oneid-swiper--small.oneid-swiper--vertical .oneid-swiper__navigation-bars .oneid-swiper__navigation-item.oneid-is-active span { background-color: var(--td-bg-color-container); } .oneid-swiper--small.oneid-swiper--vertical.oneid-swiper--outside .oneid-swiper__navigation { right: -24px; } .oneid-swiper--small.oneid-swiper--vertical.oneid-swiper--outside .oneid-swiper__navigation-bars .oneid-swiper__navigation-item span { background-color: var(--td-text-color-disabled); } .oneid-swiper--small.oneid-swiper--vertical.oneid-swiper--outside .oneid-swiper__navigation-bars .oneid-swiper__navigation-item span:hover { background-color: var(--td-text-color-primary); } .oneid-swiper--small.oneid-swiper--vertical.oneid-swiper--outside .oneid-swiper__navigation-bars .oneid-swiper__navigation-item span:active { background-color: var(--td-brand-color-active); } .oneid-swiper--small.oneid-swiper--vertical.oneid-swiper--outside .oneid-swiper__navigation-bars .oneid-is-active span { background-color: var(--td-brand-color-active); } .oneid-comment { font: var(--td-font-body-medium); -webkit-box-sizing: border-box; box-sizing: border-box; margin: 0; padding: 0; list-style: none; width: 100%; color: var(--td-text-color-primary); } .oneid-comment__inner { display: -webkit-box; display: -ms-flexbox; display: flex; } .oneid-comment__avatar { -ms-flex-negative: 0; flex-shrink: 0; margin-right: var(--td-comp-margin-xxl); cursor: pointer; display: -webkit-box; display: -ms-flexbox; display: flex; } .oneid-comment__avatar-image { width: var(--td-comp-size-xxxl); height: var(--td-comp-size-xxxl); border-radius: var(--td-radius-circle); } .oneid-comment__content { -webkit-box-flex: 1; -ms-flex: auto; flex: auto; font: var(--td-font-body-medium); } .oneid-comment__author { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; -webkit-box-align: baseline; -ms-flex-align: baseline; align-items: baseline; margin-bottom: var(--td-comp-margin-s); } .oneid-comment__name { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; font: var(--td-font-title-medium); padding-right: var(--td-comp-paddingLR-s); cursor: pointer; } .oneid-comment__time { font: var(--td-font-body-small); padding-right: var(--td-comp-paddingLR-s); color: var(--td-text-color-placeholder); } .oneid-comment__detail { word-break: break-all; font: var(--td-font-body-medium); } .oneid-comment__quote { margin-top: var(--td-comp-margin-l); border-left: 4px solid var(--td-component-stroke); padding-left: var(--td-comp-margin-l); } .oneid-comment__quote .oneid-comment__name, .oneid-comment__quote .oneid-comment__detail { color: var(--td-text-color-secondary); } .oneid-comment__actions { margin-top: var(--td-comp-margin-s); display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; list-style: none; padding: 0; gap: var(--td-comp-margin-s); } .oneid-comment__actions .oneid-button--variant-text { color: var(--td-text-color-placeholder); } .oneid-comment__actions .oneid-button--variant-text .oneid-button__text { gap: var(--td-comp-margin-s); } .oneid-comment__reply { margin-top: var(--td-comp-margin-l); margin-left: calc(var(--td-comp-size-xxxl) + var(--td-comp-margin-xxl)); background-color: var(--td-bg-color-secondarycontainer); border-radius: var(--td-radius-medium); padding: var(--td-comp-paddingTB-l) var(--td-comp-paddingLR-xl); } .oneid-comment__reply .oneid-button--variant-text { color: var(--td-text-color-placeholder); } .oneid-comment__reply .oneid-button--variant-text:hover { background-color: var(--td-bg-color-secondarycontainer-hover); } .oneid-comment__reply .oneid-button--variant-text .oneid-button__text { gap: var(--td-comp-margin-s); } .oneid-transfer { -webkit-box-sizing: border-box; box-sizing: border-box; margin: 0; padding: 0; list-style: none; font: var(--td-font-body-medium); position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -webkit-box-align: stretch; -ms-flex-align: stretch; align-items: stretch; background: transparent; color: var(--td-text-color-primary); max-height: 100%; } .oneid-transfer__list { position: relative; display: inline-block; min-width: 200px; height: 200px; padding-top: var(--td-comp-size-xxl); border: 0; word-break: break-word; vertical-align: middle; } .oneid-transfer__list-source, .oneid-transfer__list-target { border: 1px solid var(--td-border-level-1-color); border-radius: var(--td-radius-medium); } .oneid-transfer__list-header { position: absolute; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; top: 0; height: var(--td-comp-size-xxl); line-height: var(--td-comp-size-xxl); width: calc(200px - var(--td-comp-margin-s) * 2); padding: 0 var(--td-comp-paddingLR-s); margin: 0 var(--td-comp-margin-s); -webkit-box-sizing: border-box; box-sizing: border-box; } .oneid-transfer__list-header + :not(.oneid-transfer__list--with-search) { border-top: 1px solid var(--td-border-level-1-color); } .oneid-transfer__list-header .oneid-checkbox { margin-right: 0; } .oneid-transfer__list-header .oneid-checkbox__label { margin: 0; } .oneid-transfer__list-header div { display: -webkit-box; display: -ms-flexbox; display: flex; } .oneid-transfer__list-header div > span { margin-left: var(--td-comp-margin-s); } .oneid-transfer__list-header > span { color: var(--td-text-color-placeholder); } .oneid-transfer__list-body { position: relative; height: 100%; -webkit-box-sizing: border-box; box-sizing: border-box; } .oneid-transfer__list--with-search { padding-top: var(--td-comp-size-m); border-top: 0; } .oneid-transfer__list-content { height: 100%; width: 100%; overflow: auto; } .oneid-transfer__list-content .oneid-checkbox-group { width: 100%; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; gap: var(--td-comp-margin-xs); margin: var(--td-comp-margin-s) 0; } .oneid-transfer__list-content .oneid-checkbox-group .oneid-checkbox { margin-right: var(--td-comp-margin-s); --ripple-color: var(--td-bg-color-container-active); } .oneid-transfer__list-content .oneid-checkbox-group .oneid-checkbox + .oneid-checkbox { margin-left: var(--td-comp-margin-s); } .oneid-transfer__list-content .oneid-checkbox-group .oneid-checkbox__label { margin: 0; -webkit-box-flex: 1; -ms-flex: 1; flex: 1; } .oneid-transfer__list-content .oneid-checkbox-group .oneid-checkbox__label > span { margin-left: var(--td-comp-margin-s); display: inline-block; } .oneid-transfer__list .oneid-transfer__list-item { padding: var(--td-comp-paddingLR-xs) var(--td-comp-paddingLR-s); display: -webkit-box; display: -ms-flexbox; display: flex; cursor: pointer; margin: 0 var(--td-comp-margin-s); border-radius: var(--td-radius-default); -webkit-transition: background-color 0.2s cubic-bezier(0.38, 0, 0.24, 1); transition: background-color 0.2s cubic-bezier(0.38, 0, 0.24, 1); } .oneid-transfer__list .oneid-transfer__list-item:first-child { margin-top: 0; } .oneid-transfer__list .oneid-transfer__list-item.oneid-is-disabled:hover { background: transparent; } .oneid-transfer__list-item:hover { background: var(--td-bg-color-container-hover); -webkit-transition: background-color 0.2s cubic-bezier(0.38, 0, 0.24, 1); transition: background-color 0.2s cubic-bezier(0.38, 0, 0.24, 1); } .oneid-transfer__list-item.oneid-is-checked { background: var(--td-brand-color-light); } .oneid-transfer__list-wrapper { position: relative; height: 100%; width: 100%; overflow: auto; padding: var(--td-comp-paddingTB-m) var(--td-comp-paddingLR-m); } .oneid-transfer__list-pagination { height: var(--td-comp-size-xs); vertical-align: middle; padding: var(--td-comp-paddingTB-m); } .oneid-transfer__list-footer { position: absolute; left: 0; bottom: 0; border-top: 1px solid var(--td-border-level-1-color); width: 100%; } .oneid-transfer__operations { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; margin: auto var(--td-comp-margin-s); vertical-align: middle; overflow: hidden; gap: var(--td-comp-margin-l); } .oneid-transfer__operations .oneid-icon { font-size: var(--td-comp-size-xxxs); } .oneid-transfer__operations .oneid-icon + .oneid-button__text { margin-left: 0; } .oneid-transfer__empty { text-align: center; position: absolute; color: var(--td-text-color-placeholder); top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } .oneid-transfer__search-wrapper { position: absolute; top: 0; width: 100%; padding: 0 var(--td-comp-margin-s); -webkit-box-sizing: border-box; box-sizing: border-box; } .oneid-transfer__search .oneid-transfer__list { height: 240px; } .oneid-transfer--with-tree .oneid-transfer__list { height: auto; } .oneid-transfer--with-tree .oneid-transfer__list .oneid-tree { padding: 0 var(--td-comp-paddingLR-m); margin: var(--td-comp-margin-s) 0; } .oneid-transfer__pagination .oneid-transfer__list { height: 240px; padding-bottom: calc(var(--td-comp-size-xs) + var(--td-comp-paddingTB-m) * 2); } .oneid-transfer__footer .oneid-transfer__list { height: 248px; padding-bottom: 48px; } .oneid-transfer__pagination.oneid-transfer__footer .oneid-transfer__list { height: 288px; padding-bottom: calc(var(--td-comp-size-xs) + var(--td-comp-paddingTB-m) * 2 + 48px); } .oneid-transfer__search.oneid-transfer__footer .oneid-transfer__list { height: 288px; padding-bottom: 48px; } .oneid-transfer__search.oneid-transfer__pagination .oneid-transfer__list { height: 280px; padding-bottom: 48px; } .oneid-transfer__search.oneid-transfer__footer.oneid-transfer__pagination .oneid-transfer__list { height: 328px; padding-bottom: 88px; } .oneid-transfer__wrapper .oneid-transfer__list { height: 320px; width: 206px; overflow: scroll; } .oneid-avatar { font: var(--td-font-body-medium); color: var(--td-text-color-primary); -webkit-box-sizing: border-box; box-sizing: border-box; margin: 0; padding: 0; list-style: none; position: relative; display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; background: var(--td-brand-color-focus); color: var(--td-text-color-brand); overflow: hidden; white-space: nowrap; vertical-align: middle; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-sizing: content-box; box-sizing: content-box; width: var(--td-comp-size-m); height: var(--td-comp-size-m); font-size: var(--td-font-size-body-large); line-height: var(--td-comp-size-m); } .oneid-avatar.oneid-avatar__icon { font-size: var(--td-comp-size-xxs); } .oneid-avatar--circle { border-radius: var(--td-radius-circle); } .oneid-avatar--round { border-radius: var(--td-radius-default); } .oneid-avatar.oneid-size-s { width: var(--td-comp-size-xs); height: var(--td-comp-size-xs); font-size: var(--td-font-size-body-medium); line-height: var(--td-comp-size-xs); } .oneid-avatar.oneid-size-s.oneid-avatar__icon { font-size: var(--td-comp-size-xxxs); } .oneid-avatar.oneid-size-l { width: var(--td-comp-size-xl); height: var(--td-comp-size-xl); font-size: var(--td-font-size-title-large); line-height: var(--td-comp-size-xl); } .oneid-avatar.oneid-size-l.oneid-avatar__icon { font-size: var(--td-comp-size-xs); } .oneid-avatar > .oneid-image__wrapper { max-width: 100%; max-height: 100%; } .oneid-avatar-group { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .oneid-avatar-group .oneid-avatar { border: 2px solid var(--td-bg-color-container); } .oneid-avatar-group.oneid-avatar--offset-right .oneid-avatar:not(:last-child) { margin-right: calc(0px - var(--td-size-3)); } .oneid-avatar-group.oneid-avatar--offset-right .oneid-avatar:not(:last-child).oneid-size-s { margin-right: calc(0px - var(--td-size-2)); } .oneid-avatar-group.oneid-avatar--offset-right .oneid-avatar:not(:last-child).oneid-size-l { margin-right: calc(0px - var(--td-size-4)); } .oneid-avatar-group.oneid-avatar--offset-left .oneid-avatar:nth-child(1) { z-index: 49; } .oneid-avatar-group.oneid-avatar--offset-left .oneid-avatar:nth-child(2) { z-index: 48; } .oneid-avatar-group.oneid-avatar--offset-left .oneid-avatar:nth-child(3) { z-index: 47; } .oneid-avatar-group.oneid-avatar--offset-left .oneid-avatar:nth-child(4) { z-index: 46; } .oneid-avatar-group.oneid-avatar--offset-left .oneid-avatar:nth-child(5) { z-index: 45; } .oneid-avatar-group.oneid-avatar--offset-left .oneid-avatar:nth-child(6) { z-index: 44; } .oneid-avatar-group.oneid-avatar--offset-left .oneid-avatar:nth-child(7) { z-index: 43; } .oneid-avatar-group.oneid-avatar--offset-left .oneid-avatar:nth-child(8) { z-index: 42; } .oneid-avatar-group.oneid-avatar--offset-left .oneid-avatar:nth-child(9) { z-index: 41; } .oneid-avatar-group.oneid-avatar--offset-left .oneid-avatar:nth-child(10) { z-index: 40; } .oneid-avatar-group.oneid-avatar--offset-left .oneid-avatar:nth-child(11) { z-index: 39; } .oneid-avatar-group.oneid-avatar--offset-left .oneid-avatar:nth-child(12) { z-index: 38; } .oneid-avatar-group.oneid-avatar--offset-left .oneid-avatar:nth-child(13) { z-index: 37; } .oneid-avatar-group.oneid-avatar--offset-left .oneid-avatar:nth-child(14) { z-index: 36; } .oneid-avatar-group.oneid-avatar--offset-left .oneid-avatar:nth-child(15) { z-index: 35; } .oneid-avatar-group.oneid-avatar--offset-left .oneid-avatar:nth-child(16) { z-index: 34; } .oneid-avatar-group.oneid-avatar--offset-left .oneid-avatar:nth-child(17) { z-index: 33; } .oneid-avatar-group.oneid-avatar--offset-left .oneid-avatar:nth-child(18) { z-index: 32; } .oneid-avatar-group.oneid-avatar--offset-left .oneid-avatar:nth-child(19) { z-index: 31; } .oneid-avatar-group.oneid-avatar--offset-left .oneid-avatar:nth-child(20) { z-index: 30; } .oneid-avatar-group.oneid-avatar--offset-left .oneid-avatar:nth-child(21) { z-index: 29; } .oneid-avatar-group.oneid-avatar--offset-left .oneid-avatar:nth-child(22) { z-index: 28; } .oneid-avatar-group.oneid-avatar--offset-left .oneid-avatar:nth-child(23) { z-index: 27; } .oneid-avatar-group.oneid-avatar--offset-left .oneid-avatar:nth-child(24) { z-index: 26; } .oneid-avatar-group.oneid-avatar--offset-left .oneid-avatar:nth-child(25) { z-index: 25; } .oneid-avatar-group.oneid-avatar--offset-left .oneid-avatar:nth-child(26) { z-index: 24; } .oneid-avatar-group.oneid-avatar--offset-left .oneid-avatar:nth-child(27) { z-index: 23; } .oneid-avatar-group.oneid-avatar--offset-left .oneid-avatar:nth-child(28) { z-index: 22; } .oneid-avatar-group.oneid-avatar--offset-left .oneid-avatar:nth-child(29) { z-index: 21; } .oneid-avatar-group.oneid-avatar--offset-left .oneid-avatar:nth-child(30) { z-index: 20; } .oneid-avatar-group.oneid-avatar--offset-left .oneid-avatar:nth-child(31) { z-index: 19; } .oneid-avatar-group.oneid-avatar--offset-left .oneid-avatar:nth-child(32) { z-index: 18; } .oneid-avatar-group.oneid-avatar--offset-left .oneid-avatar:nth-child(33) { z-index: 17; } .oneid-avatar-group.oneid-avatar--offset-left .oneid-avatar:nth-child(34) { z-index: 16; } .oneid-avatar-group.oneid-avatar--offset-left .oneid-avatar:nth-child(35) { z-index: 15; } .oneid-avatar-group.oneid-avatar--offset-left .oneid-avatar:nth-child(36) { z-index: 14; } .oneid-avatar-group.oneid-avatar--offset-left .oneid-avatar:nth-child(37) { z-index: 13; } .oneid-avatar-group.oneid-avatar--offset-left .oneid-avatar:nth-child(38) { z-index: 12; } .oneid-avatar-group.oneid-avatar--offset-left .oneid-avatar:nth-child(39) { z-index: 11; } .oneid-avatar-group.oneid-avatar--offset-left .oneid-avatar:nth-child(40) { z-index: 10; } .oneid-avatar-group.oneid-avatar--offset-left .oneid-avatar:nth-child(41) { z-index: 9; } .oneid-avatar-group.oneid-avatar--offset-left .oneid-avatar:nth-child(42) { z-index: 8; } .oneid-avatar-group.oneid-avatar--offset-left .oneid-avatar:nth-child(43) { z-index: 7; } .oneid-avatar-group.oneid-avatar--offset-left .oneid-avatar:nth-child(44) { z-index: 6; } .oneid-avatar-group.oneid-avatar--offset-left .oneid-avatar:nth-child(45) { z-index: 5; } .oneid-avatar-group.oneid-avatar--offset-left .oneid-avatar:nth-child(46) { z-index: 4; } .oneid-avatar-group.oneid-avatar--offset-left .oneid-avatar:nth-child(47) { z-index: 3; } .oneid-avatar-group.oneid-avatar--offset-left .oneid-avatar:nth-child(48) { z-index: 2; } .oneid-avatar-group.oneid-avatar--offset-left .oneid-avatar:nth-child(49) { z-index: 1; } .oneid-avatar-group.oneid-avatar--offset-left .oneid-avatar:nth-child(50) { z-index: 0; } .oneid-avatar-group.oneid-avatar--offset-left .oneid-avatar:not(:first-child) { margin-left: calc(0px - var(--td-size-3)); } .oneid-avatar-group.oneid-avatar--offset-left .oneid-avatar:not(:first-child).oneid-size-s { margin-left: calc(0px - var(--td-size-2)); } .oneid-avatar-group.oneid-avatar--offset-left .oneid-avatar:not(:first-child).oneid-size-l { margin-left: calc(0px - var(--td-size-4)); } :root, :root[theme-mode=light] { --skeleton-animation-gradient: rgba(0, 0, 0, 0.04); } :root[theme-mode=dark] { --skeleton-animation-gradient: rgba(255, 255, 255, 0.06); } .oneid-skeleton { font: var(--td-font-body-medium); color: var(--td-text-color-primary); -webkit-box-sizing: border-box; box-sizing: border-box; margin: 0; padding: 0; list-style: none; } .oneid-skeleton__row { display: -webkit-box; display: -ms-flexbox; display: flex; margin-bottom: var(--td-comp-margin-l); -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .oneid-skeleton__row:only-child, .oneid-skeleton__row:last-child { margin-bottom: 0; } .oneid-skeleton__col { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; background-color: var(--td-bg-color-secondarycontainer); color: var(--td-text-color-disabled); margin-right: var(--td-comp-margin-l); } .oneid-skeleton__col:first-child:last-child, .oneid-skeleton__col:last-child { margin-right: 0; } .oneid-skeleton--type-text { width: 100%; height: var(--td-font-size-body-large); border-radius: var(--td-radius-default); } .oneid-skeleton--type-rect { width: 120px; height: 88px; border-radius: var(--td-radius-default); } .oneid-skeleton--type-circle { width: 32px; height: 32px; border-radius: var(--td-radius-circle); -ms-flex-negative: 0; flex-shrink: 0; } .oneid-skeleton--animation-gradient { position: relative; overflow-x: hidden; } .oneid-skeleton--animation-gradient::after { content: " "; position: absolute; bottom: 0; left: 0; right: 0; top: 0; background: -webkit-gradient(linear, left top, right top, from(rgba(255, 255, 255, 0)), color-stop(var(--skeleton-animation-gradient)), to(rgba(255, 255, 255, 0))); background: linear-gradient(90deg, rgba(255, 255, 255, 0), var(--skeleton-animation-gradient), rgba(255, 255, 255, 0)); -webkit-animation: t-skeleton--gradient 1.5s linear 2s infinite; animation: t-skeleton--gradient 1.5s linear 2s infinite; } .oneid-skeleton--animation-flashed { -webkit-animation: t-skeleton--flashed 2s linear 2s infinite; animation: t-skeleton--flashed 2s linear 2s infinite; } @-webkit-keyframes t-skeleton--gradient { 0% { -webkit-transform: translateX(-100%) skewX(-15deg); transform: translateX(-100%) skewX(-15deg); } 100% { -webkit-transform: translateX(100%) skewX(-15deg); transform: translateX(100%) skewX(-15deg); } } @keyframes t-skeleton--gradient { 0% { -webkit-transform: translateX(-100%) skewX(-15deg); transform: translateX(-100%) skewX(-15deg); } 100% { -webkit-transform: translateX(100%) skewX(-15deg); transform: translateX(100%) skewX(-15deg); } } @-webkit-keyframes t-skeleton--flashed { 0% { opacity: 1; } 50% { background-color: rgba(230, 230, 230, 0.3); opacity: 0.3; } 100% { opacity: 1; } } @keyframes t-skeleton--flashed { 0% { opacity: 1; } 50% { background-color: rgba(230, 230, 230, 0.3); opacity: 0.3; } 100% { opacity: 1; } } .oneid-color-picker__panel { padding: 0; width: 256px; background: var(--td-bg-color-container); -webkit-box-shadow: var(--td-shadow-2), var(--td-shadow-inset-top), var(--td-shadow-inset-right), var(--td-shadow-inset-bottom), var(--td-shadow-inset-left); box-shadow: var(--td-shadow-2), var(--td-shadow-inset-top), var(--td-shadow-inset-right), var(--td-shadow-inset-bottom), var(--td-shadow-inset-left); border-radius: var(--td-radius-medium); -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .oneid-popup__content .oneid-color-picker__panel { background: transparent; -webkit-box-shadow: unset; box-shadow: unset; } .oneid-color-picker { font: var(--td-font-body-medium); color: var(--td-text-color-primary); -webkit-box-sizing: border-box; box-sizing: border-box; margin: 0; padding: 0; list-style: none; } .oneid-color-picker.oneid-popup__content { -webkit-box-shadow: var(--td-shadow-2), var(--td-shadow-inset-top), var(--td-shadow-inset-right), var(--td-shadow-inset-bottom), var(--td-shadow-inset-left); box-shadow: var(--td-shadow-2), var(--td-shadow-inset-top), var(--td-shadow-inset-right), var(--td-shadow-inset-bottom), var(--td-shadow-inset-left); } .oneid-color-picker__icon { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; font-size: var(--td-comp-size-xxxs); background: transparent; -webkit-transition: 0.2s linear; transition: 0.2s linear; color: var(--td-text-color-secondary); border-radius: var(--td-radius-default); cursor: pointer; } .oneid-color-picker__icon:hover { background: var(--td-bg-color-container-hover); -webkit-transition: 0.2s linear; transition: 0.2s linear; } .oneid-color-picker__icon.oneid-is-disabled { color: var(--td-text-color-disabled); pointer-events: none; } .oneid-color-picker__head { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; padding: var(--td-pop-padding-xl); position: relative; z-index: 2; } .oneid-color-picker__head .oneid-color-picker__close { -ms-flex-negative: 0; flex-shrink: 0; } .oneid-color-picker__head + .oneid-color-picker__body { padding-top: 0; } .oneid-color-picker__body { padding: var(--td-pop-padding-xl); padding-bottom: calc(var(--td-pop-padding-xl) - 4px); } .oneid-color-picker__thumb { position: absolute; z-index: 1; outline: none; border-color: currentcolor; width: calc(var(--td-comp-size-xxxs) + var(--td-size-1)); height: calc(var(--td-comp-size-xxxs) + var(--td-size-1)); border-radius: var(--td-radius-circle); -webkit-box-shadow: var(--td-shadow-1); box-shadow: var(--td-shadow-1); background: var(--td-text-color-anti); color: var(--td-text-color-brand); padding: 2px; -webkit-box-sizing: border-box; box-sizing: border-box; } .oneid-color-picker__thumb::before { content: ""; width: 100%; height: 100%; background: currentcolor; border-radius: var(--td-radius-circle); display: block; } .oneid-color-picker__saturation { height: 160px; border-radius: var(--td-radius-default); position: relative; overflow: hidden; background: transparent; } .oneid-color-picker__saturation::before, .oneid-color-picker__saturation::after { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .oneid-color-picker__saturation::before { /* stylelint-disable-next-line color-no-hex */ background: -webkit-gradient(linear, left top, right top, from(#fff), to(transparent)); background: linear-gradient(90deg, #fff, transparent); } .oneid-color-picker__saturation::after { /* stylelint-disable-next-line color-no-hex */ background: -webkit-gradient(linear, left bottom, left top, from(#000), to(transparent)); background: linear-gradient(0deg, #000, transparent); } .oneid-color-picker__saturation .oneid-color-picker__thumb { width: calc(var(--td-comp-size-xxxs) + var(--td-size-1)); height: calc(var(--td-comp-size-xxxs) + var(--td-size-1)); border-radius: var(--td-radius-circle); -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } .oneid-color-picker__slider-wrapper { border-radius: 4px; padding: 0 calc((var(--td-comp-size-xxxs) + var(--td-size-1)) / 2); position: relative; } .oneid-color-picker__slider-wrapper--hue-type { /* stylelint-disable-next-line color-named */ background: red; } .oneid-color-picker__slider-wrapper--alpha-type { background: var(--td-text-color-anti); /* stylelint-disable-next-line color-no-hex */ background-image: linear-gradient(45deg, #c5c5c5 25%, transparent 0, transparent 75%, #c5c5c5 0, #c5c5c5), linear-gradient(45deg, #c5c5c5 25%, transparent 0, transparent 75%, #c5c5c5 0, #c5c5c5); background-size: 6px 6px; background-position: 0 0, 3px 3px; } .oneid-color-picker__slider-padding { position: absolute; left: 0; top: 0; width: 100%; height: 8px; border-radius: 4px; } .oneid-color-picker__slider { height: 8px; position: relative; border-radius: 4px; cursor: pointer; color: transparent; outline: none; z-index: 1; } .oneid-color-picker__slider .oneid-color-picker__thumb { -webkit-transform: translate(calc((var(--td-comp-size-xxxs) + var(--td-size-1)) * -0.5), -50%); transform: translate(calc((var(--td-comp-size-xxxs) + var(--td-size-1)) * -0.5), -50%); top: 50%; } .oneid-color-picker__slider .oneid-color-picker__rail { position: absolute; top: 0; left: 0; width: 100%; height: 100%; overflow: hidden; border-radius: inherit; } .oneid-color-picker__alpha, .oneid-color-picker__format { margin: var(--td-comp-margin-m) 0 0 0; } .oneid-color-picker__hue { /* stylelint-disable color-no-hex, color-named */ background: -webkit-gradient(linear, left top, right top, from(red), color-stop(17%, #ff0), color-stop(33%, #0f0), color-stop(50%, #0ff), color-stop(67%, #00f), color-stop(83%, #f0f), to(red)); background: linear-gradient(90deg, red, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, red); } .oneid-color-picker__alpha .oneid-color-picker__rail { background: -webkit-gradient(linear, left top, right top, from(transparent), to(currentcolor)); background: linear-gradient(to right, transparent, currentcolor); } .oneid-color-picker__sliders-wrapper { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; margin: var(--td-comp-margin-m) 0; } .oneid-color-picker__sliders { width: 100%; } .oneid-color-picker__sliders-preview { -ms-flex-negative: 0; flex-shrink: 0; margin-left: var(--td-comp-margin-m); width: var(--td-comp-size-s); height: var(--td-comp-size-s); border-radius: var(--td-radius-default); overflow: hidden; background: var(--td-text-color-anti); /* stylelint-disable-next-line color-no-hex */ background-image: linear-gradient(45deg, #c5c5c5 25%, transparent 0, transparent 75%, #c5c5c5 0, #c5c5c5), linear-gradient(45deg, #c5c5c5 25%, transparent 0, transparent 75%, #c5c5c5 0, #c5c5c5); background-size: 6px 6px; background-position: 0 0, 3px 3px; } .oneid-color-picker__sliders-preview-inner { display: block; width: 100%; height: 100%; } .oneid-color-picker__gradient { padding: 0; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; margin-bottom: var(--td-comp-margin-m); } .oneid-color-picker__gradient-slider { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; } .oneid-color-picker__gradient-degree { position: relative; -ms-flex-negative: 0; flex-shrink: 0; margin-left: var(--td-comp-margin-m); width: var(--td-comp-size-xxl); } .oneid-color-picker__gradient-degree .oneid-input { margin: 0; font: var(--td-font-body-small); } .oneid-color-picker__gradient-degree .oneid-input-number { width: 100%; padding: 0; } .oneid-color-picker__gradient .gradient-thumbs { position: absolute; width: 100%; height: 100%; top: 0; left: 0; margin: 0; padding: 0; list-style: none; border-radius: inherit; cursor: pointer; } .oneid-color-picker__gradient .gradient-thumbs__item { top: 50%; left: 0; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); z-index: 0; cursor: pointer; } .oneid-color-picker__gradient .gradient-thumbs__item::before { display: none; } .oneid-color-picker__gradient .gradient-thumbs__item.oneid-is-active { z-index: 1; outline: 2px solid var(--td-component-border); } .oneid-color-picker__gradient .gradient-thumbs__item-inner { display: block; width: 100%; height: 100%; border-radius: var(--td-radius-circle); overflow: hidden; } .oneid-color-picker__gradient .gradient-thumbs__item-inner::before { content: ""; width: 100%; height: 100%; display: block; background-color: currentcolor; } .oneid-color-picker__format { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } .oneid-color-picker__format--item:first-child { -ms-flex-negative: 0; flex-shrink: 0; } .oneid-color-picker__format--item:last-child { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; } .oneid-color-picker__format--item .oneid-size-m, .oneid-color-picker__format--item .oneid-input.oneid-size-m { font: var(--td-font-body-small); } .oneid-color-picker__format--item .oneid-input-number .oneid-input { margin: 0; } .oneid-color-picker__format--item .input-group { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -ms-flex-pack: distribute; justify-content: space-around; margin-left: var(--td-comp-margin-s); } .oneid-color-picker__format--item .input-group__item { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; width: 0; margin-left: -1px; } .oneid-color-picker__format--item .input-group__item .oneid-input { padding: 0 1px; } .oneid-color-picker__format--item .input-group__item .oneid-input:focus, .oneid-color-picker__format--item .input-group__item .oneid-input:focus-within, .oneid-color-picker__format--item .input-group__item .oneid-input:hover { z-index: 1; } .oneid-color-picker__format--item .input-group__item:not(:first-child):not(:last-child) .oneid-input { border-radius: 0; } .oneid-color-picker__format--item .input-group__item:first-child:not(:last-child) .oneid-input { border-top-right-radius: 0; border-bottom-right-radius: 0; } .oneid-color-picker__format--item .input-group__item:last-child:not(:first-child) .oneid-input { border-top-left-radius: 0; border-bottom-left-radius: 0; } .oneid-color-picker__format--item .input-group .oneid-input-number { width: 100%; padding: 0; max-width: 100%; } .oneid-color-picker__format-mode-select { width: 72px; display: -webkit-box; display: -ms-flexbox; display: flex; } .oneid-color-picker__format-mode-select .oneid-select, .oneid-color-picker__format-mode-select .oneid-input { padding-right: 0; } .oneid-color-picker__format-mode-select .oneid-input--prefix > .oneid-input__suffix { padding-left: 0; } .oneid-color-picker__format-mode-select .oneid-select__right-icon { margin-right: var(--td-comp-margin-xs); } .oneid-color-picker__swatches-wrap { margin-top: var(--td-comp-margin-m); position: relative; } .oneid-color-picker__swatches-wrap .oneid-color-picker__swatches + .oneid-color-picker__swatches { margin-top: var(--td-comp-margin-m); } .oneid-color-picker__swatches-wrap .oneid-color-picker__swatches--title { font: var(--td-font-body-small); padding: 0; color: var(--td-text-color-primary); display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } .oneid-color-picker__swatches-wrap .oneid-color-picker__swatches--actions { margin-left: auto; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; font-size: 0; } .oneid-color-picker__swatches-wrap .oneid-color-picker__swatches--actions .oneid-color-picker__icon { width: var(--td-comp-size-xxxs); height: var(--td-comp-size-xxxs); margin-left: var(--td-comp-margin-s); } .oneid-color-picker__swatches-wrap .oneid-color-picker__swatches--items { width: 100%; list-style: none; display: grid; grid-template-columns: repeat(10, var(--td-comp-size-xxxs)); gap: calc((256px - (var(--td-pop-padding-xl) * 2 + var(--td-comp-size-xxxs) * 10)) / 9) calc((256px - (var(--td-pop-padding-xl) * 2 + var(--td-comp-size-xxxs) * 10)) / 9); max-height: calc(4 * (var(--td-comp-size-xxxs) + (256px - (var(--td-pop-padding-xl) * 2 + var(--td-comp-size-xxxs) * 10)) / 9)); overflow-x: hidden; overflow-y: auto; padding: calc(var(--td-pop-padding-xl) - 8px); position: relative; left: calc(0px - (var(--td-pop-padding-xl) - 8px)); -webkit-box-sizing: content-box; box-sizing: content-box; } .oneid-color-picker__swatches-wrap .oneid-color-picker__swatches--item { display: -webkit-box; display: -ms-flexbox; display: flex; width: var(--td-comp-size-xxxs); height: var(--td-comp-size-xxxs); border-radius: var(--td-radius-default); padding: 0; overflow: hidden; cursor: pointer; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; position: relative; -webkit-transform-origin: center; transform-origin: center; -webkit-transition: all 0.2s cubic-bezier(0.38, 0, 0.24, 1); transition: all 0.2s cubic-bezier(0.38, 0, 0.24, 1); -webkit-box-sizing: border-box; box-sizing: border-box; } .oneid-color-picker__swatches-wrap .oneid-color-picker__swatches--item:hover { -webkit-transform: scale(1.25); transform: scale(1.25); -webkit-transform-origin: center; transform-origin: center; } .oneid-color-picker__swatches-wrap .oneid-color-picker__swatches--item__color { width: 100%; height: 100%; position: relative; overflow: hidden; border: 1px solid var(--td-component-border); border-radius: var(--td-radius-default); -ms-flex-negative: 0; flex-shrink: 0; } .oneid-color-picker__swatches-wrap .oneid-color-picker__swatches--item__inner { width: 100%; height: 100%; display: block; } .oneid-color-picker__swatches-wrap .oneid-color-picker__swatches--item:not(.oneid-is-active):hover { padding: 0; } .oneid-color-picker__swatches-wrap .oneid-color-picker__swatches--item.oneid-is-active .oneid-color-picker__swatches--item__color, .oneid-color-picker__swatches-wrap .oneid-color-picker__swatches--item.oneid-is-active .oneid-color-picker__swatches--color { border-color: var(--td-text-color-brand); } .oneid-color-picker__swatches-wrap .oneid-color-picker__swatches--color { width: 100%; height: 100%; position: relative; overflow: hidden; border-radius: var(--td-radius-default); -webkit-box-sizing: border-box; box-sizing: border-box; } .oneid-color-picker__swatches-wrap .oneid-color-picker__swatches--inner { width: 100%; height: 100%; display: block; border-radius: var(--td-radius-default); -webkit-box-shadow: var(--td-shadow-inset-top), var(--td-shadow-inset-right), var(--td-shadow-inset-bottom), var(--td-shadow-inset-left); box-shadow: var(--td-shadow-inset-top), var(--td-shadow-inset-right), var(--td-shadow-inset-bottom), var(--td-shadow-inset-left); } .oneid-color-picker__trigger--default { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .oneid-color-picker__trigger--default > .oneid-input { width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; } .oneid-color-picker__trigger--default .oneid-input { padding: 0 var(--td-comp-paddingLR-s) 0 var(--td-comp-paddingLR-xs); } .oneid-color-picker__trigger--default__color { width: 100%; height: 100%; -webkit-box-sizing: border-box; box-sizing: border-box; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .oneid-color-picker__trigger--default__color .color-inner { border: 1px solid var(--td-scrollbar-color); display: block; width: calc(var(--td-comp-size-xs) - 2px); height: calc(var(--td-comp-size-xs) - 2px); color: transparent; position: relative; border-radius: var(--td-radius-small); } .oneid-color-picker__trigger--default__color .color-inner.oneid-size-s { width: calc(var(--td-comp-size-xxs) - 2px); height: calc(var(--td-comp-size-xxs) - 2px); } .oneid-color-picker__trigger--default__color .color-inner.oneid-size-l { width: calc(var(--td-comp-size-s) - 2px); height: calc(var(--td-comp-size-s) - 2px); } .oneid-color-picker__gradient-slider { padding: 0 calc((var(--td-comp-size-xxxs) + var(--td-size-1)) / 2); border-radius: 4px; } .oneid-color-picker__gradient-slider .oneid-color-picker--bg-alpha { background: var(--td-text-color-anti); /* stylelint-disable-next-line color-no-hex */ background-image: linear-gradient(45deg, #c5c5c5 25%, transparent 0, transparent 75%, #c5c5c5 0, #c5c5c5), linear-gradient(45deg, #c5c5c5 25%, transparent 0, transparent 75%, #c5c5c5 0, #c5c5c5); background-size: 6px 6px; background-position: 0 0, 3px 3px; } .oneid-color-picker__panel.oneid-is-disabled .oneid-color-picker__saturation, .oneid-color-picker__panel.oneid-is-disabled .oneid-color-picker__slider, .oneid-color-picker__panel.oneid-is-disabled .oneid-color-picker__swatches--item { opacity: 0.8; cursor: not-allowed; } .oneid-color-picker__panel.oneid-is-disabled .oneid-color-picker__gradient-slider .gradient-thumbs, .oneid-color-picker__panel.oneid-is-disabled .oneid-color-picker__gradient-slider .gradient-thumbs__item { cursor: not-allowed; } .oneid-color-picker__panel.oneid-is-disabled .oneid-color-picker__swatches--item:hover { padding: 0; } .oneid-color-picker__select-options > .oneid-popup__content { -webkit-box-shadow: var(--td-shadow-1), var(--td-shadow-inset-top), var(--td-shadow-inset-right), var(--td-shadow-inset-bottom), var(--td-shadow-inset-left); box-shadow: var(--td-shadow-1), var(--td-shadow-inset-top), var(--td-shadow-inset-right), var(--td-shadow-inset-bottom), var(--td-shadow-inset-left); } .oneid-card { font: var(--td-font-body-medium); margin: 0; padding: 0; list-style: none; position: relative; -webkit-box-sizing: border-box; box-sizing: border-box; border-radius: var(--td-radius-medium); background-color: var(--td-bg-color-container); color: var(--td-text-color-primary); -webkit-transition: -webkit-box-shadow 0.2s cubic-bezier(0.38, 0, 0.24, 1); transition: -webkit-box-shadow 0.2s cubic-bezier(0.38, 0, 0.24, 1); transition: box-shadow 0.2s cubic-bezier(0.38, 0, 0.24, 1); transition: box-shadow 0.2s cubic-bezier(0.38, 0, 0.24, 1), -webkit-box-shadow 0.2s cubic-bezier(0.38, 0, 0.24, 1); } .oneid-card--bordered { border: 1px solid var(--td-component-border); } .oneid-card--shadow-hover:hover, .oneid-card--shadow { -webkit-box-shadow: var(--td-shadow-1); box-shadow: var(--td-shadow-1); } .oneid-card__cover { display: flow-root; } .oneid-card__cover img { display: flow-root; width: 100%; max-height: 100%; border-radius: var(--td-radius-default) var(--td-radius-default) 0 0; } .oneid-card__body { display: flow-root; padding: var(--td-comp-paddingTB-l) var(--td-comp-paddingLR-xl); } .oneid-card__header { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -ms-flex-align: center; align-items: center; padding: var(--td-comp-paddingTB-l) var(--td-comp-paddingLR-xl); position: relative; } .oneid-card__header-wrapper { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .oneid-card__header + .oneid-card__cover img { border-radius: 0; } .oneid-card__footer { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; padding: var(--td-comp-paddingTB-l) var(--td-comp-paddingLR-xl); } .oneid-card__footer-wrapper { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; } .oneid-size-s .oneid-card__body { padding: var(--td-comp-paddingTB-s) var(--td-comp-paddingLR-l); } .oneid-size-s .oneid-card__header { padding: var(--td-comp-paddingTB-s) var(--td-comp-paddingLR-l); } .oneid-size-s .oneid-card__footer { padding: var(--td-comp-paddingTB-s) var(--td-comp-paddingLR-l); } .oneid-card__avatar { margin-right: var(--td-comp-margin-l); width: var(--td-comp-size-xxxl); height: var(--td-comp-size-xxxl); } .oneid-card__title { font: var(--td-font-title-medium); color: var(--td-text-color-primary); margin-right: var(--td-comp-margin-l); word-break: break-all; } .oneid-card__subtitle { font: var(--td-font-body-medium); color: var(--td-text-color-secondary); word-break: break-all; } .oneid-card__description { font: var(--td-font-body-medium); color: var(--td-text-color-secondary); margin-top: var(--td-comp-margin-xs); word-break: break-all; } .oneid-card__actions { float: right; color: var(--td-brand-color); } .oneid-card__title--bordered { border-bottom: 1px solid var(--td-component-border); } .oneid-collapse { font: var(--td-font-body-medium); color: var(--td-text-color-primary); -webkit-box-sizing: border-box; box-sizing: border-box; margin: 0; padding: 0; list-style: none; border: solid 1px var(--td-component-border); border-bottom: 0; background: var(--td-bg-color-container); } .oneid-collapse.oneid--border-less { border: none; } .oneid-collapse.oneid--border-less .oneid-collapse-panel__header { border-bottom: none; } .oneid-collapse.oneid--border-less .oneid-collapse-panel__body { background: var(--td-bg-color-container); border: none; } .oneid-collapse-panel__icon { -webkit-transition: all 0.2s cubic-bezier(0.38, 0, 0.24, 1); transition: all 0.2s cubic-bezier(0.38, 0, 0.24, 1); cursor: pointer; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .oneid-collapse-panel__icon > .oneid-fake-arrow { -webkit-transform: rotate(-90deg); transform: rotate(-90deg); -webkit-transition: all 0.2s cubic-bezier(0.38, 0, 0.24, 1); transition: all 0.2s cubic-bezier(0.38, 0, 0.24, 1); } .oneid-collapse-panel__icon--left { margin-right: var(--td-comp-margin-s); } .oneid-collapse-panel__icon--right { margin-left: var(--td-comp-margin-s); } .oneid-collapse-panel__icon--active > .oneid-fake-arrow { -webkit-transform: rotate(0); transform: rotate(0); } .oneid-collapse-panel__icon:hover { background-color: var(--td-bg-color-container-hover); border-radius: var(--td-radius-small); } .oneid-collapse-panel__wrapper { overflow: hidden; } .oneid-collapse-panel__wrapper.oneid--borderless .oneid-collapse-panel__header { border-bottom: none; } .oneid-collapse-panel__wrapper.oneid--borderless .oneid-collapse-panel__body { background: var(--td-bg-color-container); border: none; } .oneid-collapse-panel__wrapper .oneid-collapse-panel__header { padding: var(--td-comp-paddingTB-m) var(--td-comp-paddingLR-l); border-bottom: solid 1px var(--td-component-border); font: var(--td-font-title-small); display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .oneid-collapse-panel__wrapper .oneid-collapse-panel__header--blank { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; } .oneid-collapse-panel__wrapper .oneid-collapse-panel__header.oneid-is-clickable { cursor: pointer; } .oneid-collapse-panel__wrapper .oneid-collapse-panel__header-left, .oneid-collapse-panel__wrapper .oneid-collapse-panel__header-right, .oneid-collapse-panel__wrapper .oneid-collapse-panel__header-right-content { display: -webkit-box; display: -ms-flexbox; display: flex; } .oneid-collapse-panel__wrapper .oneid-collapse-panel__body { border-bottom: solid 1px var(--td-component-border); background: var(--td-bg-color-secondarycontainer); overflow: inherit; } .oneid-collapse-panel__wrapper .oneid-collapse-panel__body--collapsed { border: none; } .oneid-collapse-panel__wrapper .oneid-collapse-panel__content { padding: var(--td-comp-paddingTB-m) var(--td-comp-paddingLR-l) var(--td-comp-paddingTB-m) calc(var(--td-comp-paddingLR-l) + var(--td-comp-margin-xxl)); color: var(--td-text-color-secondary); } .oneid-collapse-panel.oneid-is-disabled .oneid-collapse-panel__header { cursor: not-allowed; color: var(--td-text-color-disabled); } .oneid-collapse-panel.oneid-is-disabled .oneid-collapse-panel__icon { cursor: not-allowed; pointer-events: none; } .oneid-collapse-panel.oneid-is-disabled .oneid-collapse-panel__body { background: var(--td-bg-color-component-disabled); } .oneid-collapse-panel.oneid-is-disabled .oneid-collapse-panel__content { color: var(--td-text-color-disabled); } .oneid-watermark { position: relative; } .oneid-timeline { font: var(--td-font-body-medium); color: var(--td-text-color-primary); -webkit-box-sizing: border-box; box-sizing: border-box; margin: 0; padding: 0; list-style: none; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } .oneid-timeline-item { min-height: 72px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; position: relative; } .oneid-timeline-item__label.oneid-timeline-item__label--alternate { position: absolute; } .oneid-timeline-item__wrapper { width: 8px; position: relative; } .oneid-timeline-item__wrapper .oneid-timeline-item__dot { -webkit-box-sizing: unset; box-sizing: unset; position: absolute; width: 4px; height: 4px; border: 2px solid transparent; border-radius: 50%; top: 8px; } .oneid-timeline-item__wrapper .oneid-timeline-item__dot--primary { border-color: var(--td-brand-color); } .oneid-timeline-item__wrapper .oneid-timeline-item__dot--default { border-color: var(--td-component-border); } .oneid-timeline-item__wrapper .oneid-timeline-item__dot--success { border-color: var(--td-success-color); } .oneid-timeline-item__wrapper .oneid-timeline-item__dot--warning { border-color: var(--td-warning-color); } .oneid-timeline-item__wrapper .oneid-timeline-item__dot--error { border-color: var(--td-error-color); } .oneid-timeline-item__wrapper .oneid-timeline-item__dot--custom { position: relative; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); top: 4px; border: 0; } .oneid-timeline-item__wrapper .oneid-timeline-item__dot--custom .oneid-timeline-item__dot-content { position: absolute; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); top: 0; } .oneid-timeline-item__wrapper .oneid-timeline-item__tail { position: absolute; border-left: 2px solid transparent; left: 50%; height: calc(100% - 24px); bottom: 0; -webkit-transform: translateX(-50%); transform: translateX(-50%); padding-bottom: var(--td-comp-size-s); border-color: var(--td-component-border); -webkit-box-sizing: border-box; box-sizing: border-box; } .oneid-timeline-item__wrapper .oneid-timeline-item__tail--theme-dot { border-style: dashed; border-right: 0; } .oneid-timeline-item__label { color: var(--td-text-color-secondary); font-size: var(--td-font-size-body-medium); } .oneid-timeline-item__content { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; padding-left: var(--td-comp-margin-l); font-size: var(--td-font-size-body-large); } .oneid-timeline-item--last .oneid-timeline-item__tail { display: none; } .oneid-timeline-label.oneid-timeline-label--alternate.oneid-timeline-left .oneid-timeline-item__label { text-align: right; left: 0; } .oneid-timeline-label.oneid-timeline-label--alternate.oneid-timeline-left .oneid-timeline-item__wrapper { margin-left: 100px; } .oneid-timeline-label.oneid-timeline-label--alternate.oneid-timeline-right .oneid-timeline-item__label { text-align: left; right: 0; } .oneid-timeline-label.oneid-timeline-label--alternate.oneid-timeline-right .oneid-timeline-item__wrapper { margin-right: 100px; } .oneid-timeline-right .oneid-timeline-item { -webkit-box-orient: horizontal; -webkit-box-direction: reverse; -ms-flex-direction: row-reverse; flex-direction: row-reverse; } .oneid-timeline-right .oneid-timeline-item__content { text-align: right; padding-left: 0; padding-right: var(--td-comp-margin-l); } .oneid-timeline-alternate .oneid-timeline-item-left { margin-left: calc(50% - 4px); } .oneid-timeline-alternate .oneid-timeline-item-right { text-align: right; -webkit-box-orient: horizontal; -webkit-box-direction: reverse; -ms-flex-direction: row-reverse; flex-direction: row-reverse; margin-right: calc(50% - 4px); } .oneid-timeline-alternate .oneid-timeline-item-right .oneid-timeline-item__content { padding-right: var(--td-comp-margin-l); padding-left: 0; } .oneid-timeline-label.oneid-timeline-alternate .oneid-timeline-item__label { width: 100%; } .oneid-timeline-label.oneid-timeline-alternate .oneid-timeline-item-left .oneid-timeline-item__label--alternate { left: 0; -webkit-transform: translateX(-100%); transform: translateX(-100%); text-align: right; padding-right: var(--td-comp-margin-l); } .oneid-timeline-label.oneid-timeline-alternate .oneid-timeline-item-right .oneid-timeline-item__label--alternate { right: 0; -webkit-transform: translateX(100%); transform: translateX(100%); text-align: left; padding-left: var(--td-comp-margin-l); } .oneid-timeline-horizontal { min-height: 200px; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .oneid-timeline-horizontal .oneid-timeline-item { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; padding-right: 8px; min-width: 160px; } .oneid-timeline-horizontal .oneid-timeline-item__wrapper { width: 100%; height: 8px; } .oneid-timeline-horizontal .oneid-timeline-item__wrapper .oneid-timeline-item__dot { position: absolute; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); left: unset; width: 4px; height: 4px; border-radius: 50%; } .oneid-timeline-horizontal .oneid-timeline-item__wrapper .oneid-timeline-item__dot--custom { position: relative; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); border: 0; } .oneid-timeline-horizontal .oneid-timeline-item__wrapper .oneid-timeline-item__dot--custom .oneid-timeline-item__dot-content { position: absolute; left: 0; -webkit-transform: translateY(-50%); transform: translateY(-50%); top: 50%; } .oneid-timeline-horizontal .oneid-timeline-item__wrapper .oneid-timeline-item__tail { left: calc(8px + var(--td-comp-margin-s)); top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); width: calc(100% - (8px + var(--td-comp-margin-s))); border: 0; border-top: 2px solid transparent; padding-bottom: 0; border-color: var(--td-component-border); } .oneid-timeline-horizontal .oneid-timeline-item__wrapper .oneid-timeline-item__tail--theme-dot { border-style: dashed; border-right: 0; } .oneid-timeline-horizontal .oneid-timeline-item__content { padding-left: unset; padding-top: var(--td-comp-margin-l); -webkit-box-flex: unset; -ms-flex: unset; flex: unset; } .oneid-timeline-vertical .oneid-timeline-item__content { padding-bottom: var(--td-comp-margin-l); } .oneid-timeline-label.oneid-timeline-horizontal.oneid-timeline-top .oneid-timeline-item__label--alternate { top: 0; width: 100%; -webkit-transform: translateY(-100%); transform: translateY(-100%); padding-bottom: 0; } .oneid-timeline-label.oneid-timeline-horizontal.oneid-timeline-bottom .oneid-timeline-item { -webkit-box-orient: vertical; -webkit-box-direction: reverse; -ms-flex-direction: column-reverse; flex-direction: column-reverse; } .oneid-timeline-label.oneid-timeline-horizontal.oneid-timeline-bottom .oneid-timeline-item__wrapper { padding-top: 0; } .oneid-timeline-label.oneid-timeline-horizontal.oneid-timeline-bottom .oneid-timeline-item__label--alternate { padding-top: var(--td-comp-margin-l); bottom: 0; width: 100%; -webkit-transform: translateY(100%); transform: translateY(100%); } .oneid-timeline-label.oneid-timeline-horizontal.oneid-timeline-bottom .oneid-timeline-item__content { padding-top: 0; padding-bottom: var(--td-comp-margin-l); } .oneid-timeline-label.oneid-timeline-horizontal.oneid-timeline-alternate .oneid-timeline-item-top .oneid-timeline-item__label--alternate { top: 0; width: 100%; -webkit-transform: translateY(-100%); transform: translateY(-100%); padding-bottom: var(--td-comp-margin-l); } .oneid-timeline-label.oneid-timeline-horizontal.oneid-timeline-alternate .oneid-timeline-item-bottom { -webkit-box-orient: vertical; -webkit-box-direction: reverse; -ms-flex-direction: column-reverse; flex-direction: column-reverse; position: relative; -webkit-transform: translateY(calc(-100% + 8px)); transform: translateY(calc(-100% + 8px)); } .oneid-timeline-label.oneid-timeline-horizontal.oneid-timeline-alternate .oneid-timeline-item-bottom .oneid-timeline-item__content { padding-bottom: var(--td-comp-margin-l); padding-top: unset; } .oneid-timeline-label.oneid-timeline-horizontal.oneid-timeline-alternate .oneid-timeline-item-bottom .oneid-timeline-item__label--alternate { bottom: 0; -webkit-transform: translateY(100%); transform: translateY(100%); padding-top: var(--td-comp-margin-l); } .oneid-rate { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .oneid-rate .oneid-rate__star-top { position: absolute; width: 0; height: 100%; left: 0; top: 0; overflow: hidden; -webkit-transition: all 0.2s cubic-bezier(0.38, 0, 0.24, 1); transition: all 0.2s cubic-bezier(0.38, 0, 0.24, 1); } .oneid-rate .oneid-rate__star-top, .oneid-rate .oneid-rate__star-bottom { display: grid; } .oneid-rate__list { display: -webkit-box; display: -ms-flexbox; display: flex; list-style: none; padding: 0; margin: 0; } .oneid-rate__item { position: relative; cursor: pointer; -webkit-transition: all 0.2s cubic-bezier(0.38, 0, 0.24, 1); transition: all 0.2s cubic-bezier(0.38, 0, 0.24, 1); } .oneid-rate__item:hover { -webkit-transform: scale(1.33); transform: scale(1.33); } .oneid-rate__item--half .oneid-rate__star-top { width: 50%; } .oneid-rate__item--full .oneid-rate__star-top { width: 100%; } .oneid-rate__text { color: var(--td-text-color-primary); font: var(--td-font-mark-medium); margin-left: var(--td-comp-margin-l); } .oneid-guide { font: var(--td-font-body-medium); color: var(--td-text-color-primary); -webkit-box-sizing: border-box; box-sizing: border-box; margin: 0; padding: 0; list-style: none; } .oneid-guide--lock { overflow: hidden; } .oneid-guide--absolute { position: absolute; } .oneid-guide--fixed { position: fixed; } .oneid-guide__overlay { position: fixed; top: 0; bottom: 0; left: 0; right: 0; z-index: 999997; } .oneid-guide__highlight { z-index: 999998; -webkit-transition: 0.2s cubic-bezier(0, 0, 0.15, 1); transition: 0.2s cubic-bezier(0, 0, 0.15, 1); border-radius: var(--td-radius-default); } .oneid-guide__highlight--dialog { border-radius: var(--td-radius-large); } .oneid-guide__highlight--mask { -webkit-box-shadow: 0 0 0 0 var(--td-mask-active), var(--td-mask-active) 0 0 0 5000px; box-shadow: 0 0 0 0 var(--td-mask-active), var(--td-mask-active) 0 0 0 5000px; } .oneid-guide__highlight--nomask { border-radius: var(--td-radius-medium); border: 2px solid var(--td-brand-color); -webkit-box-sizing: border-box; box-sizing: border-box; } .oneid-guide__reference { z-index: 999999; } .oneid-guide__wrapper { position: fixed; left: 0; right: 0; top: 0; bottom: 0; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; z-index: 999999; padding-top: 20vh; } .oneid-guide__wrapper--center { padding-top: 0; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .oneid-guide__dialog { min-width: 320px; max-width: 500px; padding: var(--td-comp-paddingTB-xxl) var(--td-comp-paddingLR-xxl); border-radius: var(--td-radius-large); background: var(--td-bg-color-container); -webkit-animation: tGuideDialogFadeIn 0.3s ease-out; animation: tGuideDialogFadeIn 0.3s ease-out; -webkit-box-sizing: border-box; box-sizing: border-box; } .oneid-guide__dialog--nomask { border: 1px solid var(--td-component-border); } .oneid-guide__dialog .oneid-guide__title { font: var(--td-font-title-medium); font-weight: 700; } .oneid-guide__dialog .oneid-guide__desc { margin-top: var(--td-comp-margin-l); font: var(--td-font-body-medium); } .oneid-guide__tooltip { padding: var(--td-comp-paddingTB-m) var(--td-comp-paddingLR-s); min-width: 240px; max-width: 600px; max-height: 300px; } .oneid-guide__title { text-align: left; color: var(--td-text-color-primary); font: var(--td-font-title-small); font-weight: 700; } .oneid-guide__desc { margin-top: var(--td-comp-margin-s); text-align: left; color: var(--td-text-color-secondary); font: var(--td-font-body-small); } .oneid-guide__action { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .oneid-guide__action button { margin-right: var(--td-comp-margin-s); } .oneid-guide__action button:last-child { margin-right: 0; } .oneid-guide__footer { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .oneid-guide__footer--popup { margin-top: var(--td-comp-margin-l); } .oneid-guide__footer--dialog { margin-top: 24px; } .oneid-guide__footer--dialog .oneid-guide__action { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .oneid-guide__counter { color: var(--td-text-color-placeholder); text-align: left; font: var(--td-font-body-small); -webkit-box-flex: 1; -ms-flex: 1; flex: 1; } .oneid-guide__popup .oneid-guide__popup--content { background: none; -webkit-box-shadow: none; box-shadow: none; padding: 0; } @-webkit-keyframes tGuideDialogFadeIn { 0% { opacity: 0; } 100% { opacity: 1; } } @keyframes tGuideDialogFadeIn { 0% { opacity: 0; } 100% { opacity: 1; } } .oneid-back-top { position: fixed; z-index: 300; overflow: hidden; outline: none; border-color: transparent; background-color: transparent; cursor: pointer; display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; vertical-align: middle; white-space: nowrap; border-width: 0.5px; border-style: solid; -webkit-transition: background 0.2s linear, border 0.2s linear, color 0.2s linear, opacity 0.2s linear, visibility 0.2s linear; transition: background 0.2s linear, border 0.2s linear, color 0.2s linear, opacity 0.2s linear, visibility 0.2s linear; -ms-touch-action: manipulation; touch-action: manipulation; -webkit-box-shadow: var(--td-shadow-3); box-shadow: var(--td-shadow-3); visibility: hidden; opacity: 0; color: var(--td-text-color-primary); } .oneid-back-top__text { font: var(--td-font-body-small); text-align: center; margin-top: var(--td-comp-margin-xxs); } .oneid-back-top__icon { font-size: var(--td-font-headline-small); } .oneid-back-top.oneid-size-m .oneid-back-top__icon { margin-top: 2px; } .oneid-back-top--show { visibility: visible; opacity: 1; } .oneid-back-top--theme-light { border-color: var(--td-component-border); background-color: var(--td-bg-color-container); } .oneid-back-top--theme-light:hover { border-color: var(--td-bg-color-container-hover); background-color: var(--td-bg-color-container-hover); } .oneid-back-top--theme-light .oneid-back-top__text { color: var(--td-text-color-secondary); } .oneid-back-top--theme-light .oneid-back-top__icon { color: var(--td-text-color-primary); } .oneid-back-top--theme-primary { border-color: var(--td-brand-color); background-color: var(--td-brand-color); } .oneid-back-top--theme-primary:hover { border-color: var(--td-brand-color-hover); background-color: var(--td-brand-color-hover); } .oneid-back-top--theme-primary .oneid-back-top__text { color: var(--td-text-color-anti); } .oneid-back-top--theme-primary .oneid-back-top__icon { color: var(--td-text-color-anti); } .oneid-back-top--theme-dark { border-color: rgba(0, 0, 0, 0.9); background-color: rgba(0, 0, 0, 0.9); } .oneid-back-top--theme-dark:hover { border-color: rgba(0, 0, 0, 0.6); background-color: rgba(0, 0, 0, 0.6); } .oneid-back-top--theme-dark .oneid-back-top__text { color: var(--td-text-color-anti); } .oneid-back-top--theme-dark .oneid-back-top__icon { color: var(--td-text-color-anti); } .oneid-back-top.oneid-size-s { width: var(--td-comp-size-xxl); height: var(--td-comp-size-xxl); } .oneid-back-top.oneid-size-s .oneid-back-top__text { display: none; } .oneid-back-top.oneid-size-m { width: var(--td-comp-size-xxxxl); height: var(--td-comp-size-xxxxl); } .oneid-back-top.oneid-size-m .oneid-back-top__text { display: block; } .oneid-back-top--circle { border-radius: var(--td-radius-circle); } .oneid-back-top--square { border-radius: var(--td-radius-medium); } .oneid-statistic { display: inline-block; font-size: var(--td-font-size-body-medium); line-height: var(--td-line-height-body-medium); color: var(--td-text-color-secondary); } .oneid-statistic-title { font-size: var(--td-font-body-medium); margin-bottom: var(--td-comp-margin-s); } .oneid-statistic-content { display: inline-block; color: var(--td-text-color-primary); text-align: left; white-space: nowrap; } .oneid-statistic-content-value { font-size: var(--td-font-size-headline-medium); line-height: var(--td-line-height-headline-medium); font-family: TCloudNumber, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Hiragino Sans GB, Microsoft YaHei UI, Microsoft YaHei, Source Han Sans CN, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol; } .oneid-statistic-content-unit { font-size: var(--td-font-size-body-medium); margin-left: var(--td-comp-margin-xs); font-family: TCloudNumber, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Hiragino Sans GB, Microsoft YaHei UI, Microsoft YaHei, Source Han Sans CN, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol; } .oneid-statistic-content-suffix { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; font-size: var(--td-font-size-title-large); margin-left: var(--td-comp-margin-s); } .oneid-statistic-content-prefix { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; font-size: var(--td-font-size-title-large); margin-right: var(--td-comp-margin-s); } .oneid-statistic-content-prefix .oneid-icon { font-size: var(--td-font-size-title-large); } .oneid-statistic-extra { margin-top: 8px; } .oneid-statistic-extra .oneid-space .oneid-space-item { display: -webkit-box; display: -ms-flexbox; display: flex; } .oneid-descriptions { font: var(--td-font-body-medium); color: var(--td-text-color-primary); -webkit-box-sizing: border-box; box-sizing: border-box; margin: 0; padding: 0; list-style: none; } .oneid-descriptions__header { color: var(--td-text-color-primary); font: var(--td-font-title-medium); margin-bottom: var(--td-comp-margin-m); font-weight: 600; } .oneid-descriptions__body { border-collapse: collapse; font: var(--td-font-body-medium); width: 100%; } .oneid-descriptions__body.oneid-size-l > tbody > tr > td { padding: var(--td-comp-paddingTB-l); } .oneid-descriptions__body.oneid-size-m > tbody > tr > td { padding: var(--td-comp-paddingLR-m) var(--td-comp-paddingLR-l); } .oneid-descriptions__body.oneid-size-s > tbody > tr > td { padding: var(--td-comp-paddingLR-s) var(--td-comp-paddingLR-l); } .oneid-descriptions__body .oneid-descriptions__label { color: var(--td-text-color-placeholder); } .oneid-descriptions__body--fixed { table-layout: fixed; } .oneid-descriptions__body--border > tbody > tr > td { border: 1px solid var(--td-component-border); } .oneid-descriptions__body--border .oneid-descriptions__label { background-color: var(--td-bg-color-secondarycontainer); } .oneid-descriptions__body--border .oneid-descriptions__label:hover { background-color: var(--td-bg-color-container-hover); } .oneid-empty { font: var(--td-font-body-medium); color: var(--td-text-color-primary); -webkit-box-sizing: border-box; box-sizing: border-box; margin: 0; list-style: none; padding: 0; text-align: center; } .oneid-empty__image { font-size: 48px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .oneid-empty__title { font: var(--td-font-body-medium); color: var(--td-text-color-secondary); margin-top: var(--td-comp-margin-s); margin-bottom: 0; } .oneid-empty__description { font: var(--td-font-body-medium); color: var(--td-text-color-placeholder); margin-top: var(--td-comp-margin-xs); margin-bottom: 0; } .oneid-empty__action { margin-top: var(--td-comp-margin-xxl); margin-bottom: 0; } .oneid-empty.oneid-size-s .oneid-empty__image { font-size: 20px; } .oneid-empty.oneid-size-s .oneid-empty__title { font: var(--td-font-body-small); margin-top: var(--td-comp-margin-xxs); } .oneid-empty.oneid-size-s .oneid-empty__description { font: var(--td-font-body-small); margin-top: var(--td-comp-margin-xxs); } .oneid-empty.oneid-size-l .oneid-empty__image { font-size: 64px; } .oneid-typography { color: var(--td-text-color-primary); font: var(--td-font-body-medium); margin: var(--td-comp-margin-m) 0; } h1.oneid-typography { font: var(--td-font-headline-large); margin-top: var(--td-comp-margin-xxxxl); margin-bottom: var(--td-comp-margin-l); } h2.oneid-typography { font: var(--td-font-headline-medium); margin-top: var(--td-comp-margin-xxxl); margin-bottom: var(--td-comp-margin-l); } h3.oneid-typography { font: var(--td-font-headline-small); margin-top: var(--td-comp-margin-xxl); margin-bottom: var(--td-comp-margin-m); } h4.oneid-typography { font: var(--td-font-title-large); margin-top: var(--td-comp-margin-xl); margin-bottom: var(--td-comp-margin-m); } h5.oneid-typography { font: var(--td-font-title-medium); margin-top: var(--td-comp-margin-l); margin-bottom: var(--td-comp-margin-m); } h6.oneid-typography { font: var(--td-font-title-small); } .oneid-typography strong { font-weight: 600; } .oneid-typography mark { background-color: #fcdf47; } .oneid-typography code { border-radius: var(--td-radius-default); border: 1px solid var(--td-component-border); margin: 0 var(--td-comp-margin-xs); background-color: var(--td-bg-color-secondarycontainer); padding: 1px var(--td-comp-paddingLR-s); -webkit-transition: background-color 0.2s; transition: background-color 0.2s; white-space: nowrap; font: var(--td-font-body-small); font-family: Source Code Pro, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Hiragino Sans GB, Microsoft YaHei UI, Microsoft YaHei; display: inline-block; } .oneid-typography code:hover { border-radius: var(--td-radius-default); border: 1px solid var(--td-component-border); background-color: var(--td-bg-color-secondarycontainer-hover); } .oneid-typography kbd { border-radius: var(--td-radius-default); border: 1px solid var(--td-component-border); margin: 0 var(--td-comp-margin-xs); background-color: var(--td-bg-color-secondarycontainer); padding: 1px var(--td-comp-paddingLR-s); -webkit-box-shadow: 0 1px 0 0 var(--td-component-border); box-shadow: 0 1px 0 0 var(--td-component-border); font: var(--td-font-body-small); font-family: Source Code Pro, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Hiragino Sans GB, Microsoft YaHei UI, Microsoft YaHei; display: inline-block; } .oneid-typography--disabled { color: var(--td-text-color-disabled); cursor: not-allowed; } .oneid-typography--success { color: var(--td-success-color); } .oneid-typography--warning { color: var(--td-warning-color); } .oneid-typography--error { color: var(--td-error-color); } .oneid-typography--secondary { color: var(--td-text-color-secondary); } .oneid-typography-ellipsis-symbol, .oneid-typography .oneid-icon-copy { color: var(--td-brand-color); cursor: pointer; } .oneid-typography-ellipsis-symbol:hover, .oneid-typography .oneid-icon-copy:hover { color: var(--td-brand-color-hover); } .oneid-typography .oneid-icon-checked { color: var(--td-success-color); } .oneid-common { user-select: none; } .oneid-common a { background-color: transparent; text-decoration: none; color: #457ae5; cursor: pointer; } .oneid-common a:active, .oneid-common a:hover { outline-width: 0; } .oneid-common a:hover { text-decoration: none; } .oneid-common ul { padding: 0; margin: 0; list-style: none; } .oneid-common li::before { content: "·"; margin-right: 4px; } /*---------------- Message ---------------*/ .oneid-message.t-message { background-color: rgba(0, 0, 0, 0.8); color: #fff; border-radius: 8px; box-shadow: none; align-items: center; max-width: 280px; overflow-wrap: break-word; word-break: normal; } .oneid-message.t-message.oneid-is-error .oneid-svg, .oneid-message.t-message.oneid-is-error .t-icon { color: #fa5151; } .oneid-message.t-message .oneid-svg, .oneid-message.t-message .t-icon { font-size: 16px; margin-right: 8px; top: 0; } .oneid-yuanbao { --oneid-color-dark: #1a1a1a; --oneid-color-white: #fff; --oneid-color-light: #ffffffe5; --oneid-color-red: #fa5151; --oneid-color-green: #27d08e; --oneid-color-link: #457ae5; /*---------------- Button ---------------*/ /*---------------- Checkbox ---------------*/ /*---------------- Dialog ---------------*/ /*---------------- 提示类Dialog ---------------*/ /*---------------- Popup ---------------*/ /*---------------- Loading ---------------*/ /*---------------- Form ---------------*/ } .oneid-yuanbao.oneid-mode-light { --oneid-background-color: var(--oneid-color-white); --oneid-color-maintain: #000; --oneid-color-reverse: #fff; --oneid-color-reverse-90: #ffffffe5; --oneid-color-10: #00000014; --oneid-color-15: #00000026; --oneid-color-40: #0006; --oneid-color-60: #0009; --oneid-color-80: #000c; --oneid-color-90: #000000e5; --oneid-avatar-bgcolor: #ebebeb; --oneid-user-bgcolor: #f6f6f6; --oneid-user-hover-bgcolor: #f2f2f2; --oneid-loading-color-border: #20c57d80; --oneid-loading-color-background: #f4fcf8; --oneid-error-color-background: #f7f7f7; --oneid-brand-blue-color: #457ae5; --oneid-btn-bgcolor: #f6f6f6; --oneid-btn-disable-bgcolor: #dadada; } .oneid-yuanbao.oneid-mode-dark { --oneid-background-color: #303030; --oneid-color-maintain: #fff; --oneid-color-reverse: #000; --oneid-color-reverse-90: #000000e5; --oneid-color-10: #ffffff1a; --oneid-color-15: #ffffff26; --oneid-color-40: #fff6; --oneid-color-60: #fff9; --oneid-color-80: #000c; --oneid-color-90: #ffffffe5; --oneid-avatar-bgcolor: #444; --oneid-user-bgcolor: #3b3b3b; --oneid-user-hover-bgcolor: #424242; --oneid-loading-color-border: #1db472; --oneid-loading-color-background: #2d453c; --oneid-error-color-background: #3b3b3b; --oneid-brand-blue-color: #38f; --oneid-btn-bgcolor: #1d1d1d; --oneid-btn-disable-bgcolor: #3b3b3b; --oneid-scrollbar-color: #444; } .oneid-yuanbao .oneid-button { border-width: 0; border-radius: 8px; background-color: var(--oneid-color-90) !important; border-color: var(--oneid-color-90) !important; --td-brand-color-hover: var(--oneid-font-color); } .oneid-yuanbao .oneid-button .oneid-ripple { display: none; } .oneid-yuanbao .oneid-button.oneid-is-disabled { background-color: var(--oneid-btn-disable-bgcolor) !important; color: var(--oneid-color-white) !important; } .oneid-yuanbao .oneid-checkbox { align-items: flex-start; } .oneid-yuanbao .oneid-checkbox .oneid-checkbox__input { opacity: 0.3; border-color: var(--oneid-color-60); border-radius: 4px; background-color: var(--oneid-background-color); } .oneid-yuanbao .oneid-checkbox.oneid-is-checked .oneid-checkbox__input { opacity: 1; background-color: var(--oneid-color-90); border-color: var(--oneid-color-90); } .oneid-yuanbao .oneid-checkbox.oneid-is-checked .oneid-checkbox__input::after { border-color: var(--oneid-color-reverse-90); } .oneid-yuanbao .oneid-checkbox .oneid-checkbox__label { color: var(--oneid-color-40) !important; margin-left: 3px; line-height: 16px; } .oneid-yuanbao .oneid-checkbox:hover .oneid-checkbox__input { opacity: 1; border-color: var(--oneid-color-90); } .oneid-yuanbao .oneid-checkbox.oneid-is-disabled .oneid-checkbox__input { opacity: 0.3; border-color: var(--oneid-color-60) !important; background-color: var(--oneid-color-40); } .oneid-yuanbao .oneid-checkbox.oneid-is-disabled .oneid-checkbox__input::after { border-color: var(--oneid-color-60) !important; } .oneid-yuanbao .oneid-checkbox.oneid-is-disabled a { color: var(--oneid-color-60); } .oneid-yuanbao .oneid-dialog__position { padding: 0 !important; } .oneid-yuanbao .oneid-dialog { border-radius: 12px; padding: 0; border: none; background-color: var(--oneid-background-color); } .oneid-yuanbao .oneid-dialog__header { color: var(--oneid-color-90); height: 32px; } .oneid-yuanbao .oneid-dialog__body { padding: 0 24px 16px; } .oneid-yuanbao .oneid-dialog__close { width: 24px; height: 24px; padding: 0; margin: 16px 16px 0 0; color: var(--oneid-color-60); } .oneid-yuanbao .oneid-dialog__close:hover { background: none; } .oneid-yuanbao.oneid-prompt-dialog .oneid-dialog { width: 360px; } .oneid-yuanbao.oneid-prompt-dialog .oneid-dialog__header { height: 24px; } .oneid-yuanbao.oneid-prompt-dialog .oneid-dialog__body { padding: 0 24px 24px; } .oneid-yuanbao.oneid-prompt-dialog .oneid-dialog__body .wrapper .header { color: var(--oneid-color-90); font-weight: 600; font-size: 16px; display: flex; align-items: center; } .oneid-yuanbao.oneid-prompt-dialog .oneid-dialog__body .wrapper .header svg { color: #00b259; font-size: 20px; } .oneid-yuanbao.oneid-prompt-dialog .oneid-dialog__body .wrapper .content { padding-top: 16px; color: var(--oneid-color-90); } .oneid-yuanbao.oneid-prompt-dialog .oneid-dialog__footer { box-sizing: border-box; padding: 0 24px 24px 0; } .oneid-yuanbao.oneid-prompt-dialog .oneid-dialog__footer button { width: 88px; height: 36px; color: var(--oneid-color-reverse-90); } .oneid-yuanbao.oneid-prompt-dialog .oneid-dialog__footer button:first-child { color: var(--oneid-color-90); background-color: var(--oneid-user-hover-bgcolor) !important; } .oneid-yuanbao .oneid-popup__content { box-shadow: 0px 8px 12px 0px rgba(0, 0, 0, 0.1019607843); } .oneid-yuanbao .oneid-popup[data-popper-placement^=top] .oneid-popup__content { margin-bottom: 4px; } .oneid-yuanbao .oneid-loading { color: var(--oneid-color-green); font-size: 18px; position: absolute; border-radius: 12px; } .oneid-yuanbao .oneid-loading .oneid-loading--center { position: absolute; top: 28px; border: 1px solid var(--oneid-loading-color-border); padding: 7px 11px; border-radius: 8px; background-color: var(--oneid-loading-color-background); box-shadow: 0px 8px 20px 0px rgba(65, 77, 96, 0.08); } .oneid-yuanbao .oneid-loading__text { color: var(--oneid-color-90); } .oneid-yuanbao .oneid-loading__overlay { background-color: transparent; } .oneid-yuanbao .oneid-form__item { margin-bottom: 16px !important; } .oneid-yuanbao .oneid-form__item-with-extra { margin-bottom: 16px; } .oneid-yuanbao .oneid-form__label { color: var(--oneid-color-90); font-weight: 500; margin-bottom: 8px; line-height: 22px; min-height: auto; } .oneid-yuanbao .oneid-form .oneid-is-error .oneid-input { border-color: var(--oneid-color-red) !important; } .oneid-yuanbao .oneid-form .oneid-input { height: 48px; border-radius: 8px; border: 1px solid var(--oneid-color-10) !important; background-color: transparent; font-size: 16px; padding: 13px 0 13px 12px; caret-color: var(--oneid-color-90); } .oneid-yuanbao .oneid-form .oneid-input input:-webkit-autofill, .oneid-yuanbao .oneid-form .oneid-input input:-webkit-autofill:hover, .oneid-yuanbao .oneid-form .oneid-input input:-webkit-autofill:focus, .oneid-yuanbao .oneid-form .oneid-input input:-webkit-autofill:active { -webkit-text-fill-color: var(--oneid-color-90); box-shadow: 0 0 0px 1000px var(--oneid-background-color) inset; border: 0 none; background-color: transparent; } .oneid-yuanbao .oneid-form .oneid-input.oneid-is-focused { box-shadow: none; } .oneid-yuanbao .oneid-form .oneid-input input { color: var(--oneid-color-90); } .oneid-yuanbao .oneid-form .oneid-input input::placeholder { color: var(--oneid-color-40); } .oneid-yuanbao .oneid-form .oneid-input__suffix { color: var(--oneid-color-90); } .oneid-yuanbao .oneid-form .oneid-input__extra { display: none; } .oneid-upload-avatar__wrapper { border-radius: 16px; display: flex; align-items: center; justify-content: center; overflow: hidden; cursor: pointer; background-color: var(--oneid-avatar-bgcolor); width: 64px; height: 64px; border: none; position: relative; } .oneid-upload-avatar__wrapper:hover { background-color: var(--oneid-btn-disable-bgcolor); } .oneid-upload-avatar__wrapper:hover .oneid-upload-avatar__wrapper--hover-cover { display: flex !important; } .oneid-upload-avatar__avatar-upload-icon { color: #7b818f; } .oneid-upload-avatar__wrapper--hover-cover { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5019607843); display: none !important; cursor: pointer; } .oneid-upload-avatar__wrapper--hover-cover .oneid-svg { color: white !important; } .oneid-upload-avatar__avatar-update-icon { display: flex; align-items: center; justify-content: center; } .oneid-upload-avatar__avatar-update-icon .oneid-svg { width: 24px; height: 24px; font-size: 24px; color: #4e5461; } .oneid-upload-avatar__avatar { height: 100%; } .oneid-upload-avatar-image__upload { display: none; } .oneid-upload-avatar-image__rotate-icon { padding: 4.25px; border-radius: 4px; width: 32.5px; height: 32.5px; display: flex; align-items: center; justify-content: center; box-sizing: border-box; } .oneid-upload-avatar-image__rotate-icon:hover { background-color: #e6e8eb; } .oneid-upload-avatar-image__cropper-wrapper { flex-direction: column; display: flex; align-items: center; } .oneid-upload-avatar-image__cropper { height: 320px; width: 320px; cursor: pointer; } .oneid-upload-avatar-image__error { box-sizing: border-box; height: 320px; display: flex; flex-direction: column; align-items: center; justify-content: center; color: #ff3c33; font-weight: 400; font-size: 14px; border-radius: 4px; background-color: rgba(14, 14, 17, 0.04); border: 1px solid #ff3c33; } .oneid-upload-avatar-image__error i { margin-bottom: 6px; } .oneid-upload-avatar-image__error p { line-height: 20px; } .oneid-upload-avatar-image__error-icon { color: #ff3c33; } .oneid-upload-avatar-image__dialog .cropper-point.point-se { height: 5px !important; width: 5px !important; } .oneid-upload-avatar-image__dialog .oneid-dialog { border: 0; border-radius: 16px; background-color: var(--oneid-background-color); padding: 0; } .oneid-upload-avatar-image__dialog .oneid-dialog__header { height: 30px; border-radius: 16px; } .oneid-upload-avatar-image__dialog .oneid-dialog__body { height: 356px; padding: 0 !important; background-color: var(--oneid-background-color); } .oneid-upload-avatar-image__dialog .oneid-dialog__body .header { line-height: 20px; margin-bottom: 16px; margin: 0 0 16px 40px; color: var(--oneid-color-90); } .oneid-upload-avatar-image__dialog .oneid-dialog__footer { box-sizing: border-box; background-color: var(--oneid-background-color); height: auto; padding: 16px 24px 24px 24px; width: auto; display: flex; border-radius: 16px; justify-content: space-between; } .oneid-upload-avatar-image__dialog .oneid-dialog__footer:has(:only-child) { justify-content: flex-end; } .oneid-upload-avatar-image__dialog .oneid-icon-close { color: #0e0e11; } .oneid-upload-avatar-image__dialog .cropper-face { opacity: 0.5; } .oneid-upload-avatar-image__dialog .advanced-cropper { background-color: var(--oneid-color-80); } .oneid-upload-avatar-image__dialog .advanced-cropper-circle-stencil__preview { border: 0; } .oneid-upload-avatar-image__dialog .advanced-cropper-simple-line { border: 1px solid #d3d6db; } .oneid-upload-avatar-image__dialog .cropper-line { opacity: 0; } .oneid-upload-avatar-image__dialog .cropper-view-box { outline-color: #006eff; } .oneid-upload-avatar-image__dialog .cropper-point { background-color: #006eff; } .oneid-upload-avatar-image__btn { width: 88px; height: 40px !important; box-shadow: none !important; font-size: 14px !important; font-weight: 400; } .oneid-upload-avatar-image__reload-btn.oneid-button.oneid-button--theme-primary { background-color: var(--oneid-btn-bgcolor) !important; color: var(--oneid-color-60) !important; } .oneid-upload-avatar-image__confirm-btn { background-color: var(--oneid-color-90) !important; color: var(--oneid-color-reverse-90) !important; margin-left: 16px !important; } .advanced-cropper-line-wrapper--north, .advanced-cropper-line-wrapper--south { height: 12px; width: 100%; } .advanced-cropper-line-wrapper--north { cursor: n-resize; } .advanced-cropper-line-wrapper--south { cursor: s-resize; } .advanced-cropper-line-wrapper--east, .advanced-cropper-line-wrapper--west { width: 12px; height: 100%; } .advanced-cropper-line-wrapper--east { cursor: e-resize; } .advanced-cropper-line-wrapper--west { cursor: w-resize; } .advanced-cropper-line-wrapper--disabled { cursor: auto; } .advanced-cropper-line-wrapper__content { position: absolute; } .advanced-cropper-line-wrapper__content--east, .advanced-cropper-line-wrapper__content--west { height: 100%; } .advanced-cropper-line-wrapper__content--north, .advanced-cropper-line-wrapper__content--south { width: 100%; } .advanced-cropper-line-wrapper__content--east { left: 50%; -webkit-transform: translateX(-100%); transform: translateX(-100%); } .advanced-cropper-line-wrapper__content--west { right: 50%; -webkit-transform: translateX(100%); transform: translateX(100%); } .advanced-cropper-line-wrapper__content--north { top: 50%; } .advanced-cropper-line-wrapper__content--south { bottom: 50%; } .advanced-cropper-handler-wrapper { position: absolute; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); width: 30px; height: 30px; } .advanced-cropper-handler-wrapper__draggable { width: 100%; height: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .advanced-cropper-handler-wrapper--west-north { cursor: nw-resize; } .advanced-cropper-handler-wrapper--north { cursor: n-resize; } .advanced-cropper-handler-wrapper--east-north { cursor: ne-resize; } .advanced-cropper-handler-wrapper--east { cursor: e-resize; } .advanced-cropper-handler-wrapper--east-south { cursor: se-resize; } .advanced-cropper-handler-wrapper--south { cursor: s-resize; } .advanced-cropper-handler-wrapper--west-south { cursor: sw-resize; } .advanced-cropper-handler-wrapper--west { cursor: w-resize; } .advanced-cropper-handler-wrapper--disabled { cursor: auto; } .advanced-cropper-bounding-box { position: relative; height: 100%; width: 100%; } .advanced-cropper-bounding-box__handler-wrapper { position: absolute; } .advanced-cropper-bounding-box__handler-wrapper--east, .advanced-cropper-bounding-box__handler-wrapper--west { top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); height: 100%; } .advanced-cropper-bounding-box__handler-wrapper--south, .advanced-cropper-bounding-box__handler-wrapper--north { left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); width: 100%; } .advanced-cropper-bounding-box__handler-wrapper--west, .advanced-cropper-bounding-box__handler-wrapper--west-north, .advanced-cropper-bounding-box__handler-wrapper--west-south { left: 0; } .advanced-cropper-bounding-box__handler-wrapper--east, .advanced-cropper-bounding-box__handler-wrapper--east-north, .advanced-cropper-bounding-box__handler-wrapper--east-south { left: 100%; } .advanced-cropper-bounding-box__handler-wrapper--north, .advanced-cropper-bounding-box__handler-wrapper--west-north, .advanced-cropper-bounding-box__handler-wrapper--east-north { top: 0; } .advanced-cropper-bounding-box__handler-wrapper--south, .advanced-cropper-bounding-box__handler-wrapper--west-south, .advanced-cropper-bounding-box__handler-wrapper--east-south { top: 100%; } .advanced-cropper-bounding-box__handler { position: absolute; } .advanced-cropper-bounding-box__handler--west-north { left: 0; top: 0; } .advanced-cropper-bounding-box__handler--north { left: 50%; top: 0; } .advanced-cropper-bounding-box__handler--east-north { left: 100%; top: 0; } .advanced-cropper-bounding-box__handler--east { left: 100%; top: 50%; } .advanced-cropper-bounding-box__handler--east-south { left: 100%; top: 100%; } .advanced-cropper-bounding-box__handler--south { left: 50%; top: 100%; } .advanced-cropper-bounding-box__handler--west-south { left: 0; top: 100%; } .advanced-cropper-bounding-box__handler--west { left: 0; top: 50%; } .advanced-cropper-bounding-box__line { position: absolute; } .advanced-cropper-bounding-box__line--north, .advanced-cropper-bounding-box__line--south { left: 0; -webkit-transform: translateY(-50%); transform: translateY(-50%); } .advanced-cropper-bounding-box__line--north { top: 0; } .advanced-cropper-bounding-box__line--south { top: 100%; } .advanced-cropper-bounding-box__line--west, .advanced-cropper-bounding-box__line--east { top: 0; -webkit-transform: translateX(-50%); transform: translateX(-50%); } .advanced-cropper-bounding-box__line--west { left: 0; } .advanced-cropper-bounding-box__line--east { left: 100%; } .advanced-cropper-artificial-transition { will-change: transform; } .advanced-cropper-background-image { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; position: absolute; -webkit-transform-origin: center; transform-origin: center; pointer-events: none; max-width: none !important; } .advanced-cropper-canvas { display: none; } .advanced-cropper-source { width: 1px; height: 1px; visibility: hidden; position: absolute; opacity: 0; } .advanced-cropper-fade { visibility: hidden; opacity: 0; -webkit-transition: 0.5s; transition: 0.5s; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } .advanced-cropper-fade--visible { opacity: 1; visibility: visible; } .advanced-cropper-wrapper__fade { -webkit-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1; min-height: 0; } .advanced-cropper-stencil-grid { display: table; border-collapse: collapse; table-layout: fixed; opacity: 0; -webkit-transition: opacity 0.3s; transition: opacity 0.3s; } .advanced-cropper-stencil-grid--visible { opacity: 1; } .advanced-cropper-stencil-grid__row { display: table-row; } .advanced-cropper-stencil-grid__cell { display: table-cell; width: 1%; height: 1%; border: currentColor solid 1px; } .advanced-cropper-stencil-grid__cell--top { border-top-color: transparent; } .advanced-cropper-stencil-grid__cell--left { border-left-color: transparent; } .advanced-cropper-stencil-grid__cell--right { border-right-color: transparent; } .advanced-cropper-stencil-grid__cell--bottom { border-bottom-color: transparent; } .advanced-cropper-stencil-overlay { -webkit-box-sizing: content-box; box-sizing: content-box; -webkit-box-shadow: 0 0 0 1000px currentColor; box-shadow: 0 0 0 1000px currentColor; pointer-events: none; width: 100%; height: 100%; position: absolute; -webkit-backface-visibility: hidden; } .advanced-cropper-stencil-wrapper { will-change: transform; } .advanced-cropper-boundary { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; direction: ltr; position: relative; } .advanced-cropper-boundary__content { width: 100%; height: 100%; position: absolute; top: 0; left: 0; } .advanced-cropper-boundary__stretcher { pointer-events: none; position: relative; max-width: 100%; max-height: 100%; } .advanced-cropper-circle-stencil { position: absolute; height: 100%; width: 100%; -webkit-box-sizing: content-box; box-sizing: content-box; -webkit-backface-visibility: hidden; -webkit-transform-style: preserve-3d; } .advanced-cropper-circle-stencil__overlay { border-radius: 50%; overflow: hidden; } .advanced-cropper-circle-stencil__preview { border-radius: 50%; } .advanced-cropper-circle-stencil__draggable-area, .advanced-cropper-circle-stencil__overlay, .advanced-cropper-circle-stencil__preview, .advanced-cropper-circle-stencil__grid { position: absolute; height: 100%; width: 100%; } .advanced-cropper-circle-stencil--movable { cursor: move; } .advanced-cropper-rectangle-stencil { position: absolute; height: 100%; width: 100%; -webkit-box-sizing: border-box; box-sizing: border-box; -webkit-backface-visibility: hidden; -webkit-transform-style: preserve-3d; } .advanced-cropper-rectangle-stencil__draggable-area, .advanced-cropper-rectangle-stencil__overlay, .advanced-cropper-rectangle-stencil__preview, .advanced-cropper-rectangle-stencil__grid { position: absolute; height: 100%; width: 100%; } .advanced-cropper-rectangle-stencil--movable { cursor: move; } .advanced-cropper-simple-line { background: none; border-width: 0; } .advanced-cropper-simple-line--south, .advanced-cropper-simple-line--north { height: 0; width: 100%; } .advanced-cropper-simple-line--east, .advanced-cropper-simple-line--west { height: 100%; width: 0; } .advanced-cropper-simple-line--east { border-right-width: 1px; } .advanced-cropper-simple-line--west { border-left-width: 1px; } .advanced-cropper-simple-line--south { border-bottom-width: 1px; } .advanced-cropper-simple-line--north { border-top-width: 1px; } .advanced-cropper-simple-handler { display: block; } .advanced-cropper-preview { overflow: hidden; -webkit-box-sizing: border-box; box-sizing: border-box; position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } .advanced-cropper-preview__content { overflow: hidden; position: absolute; left: 50%; top: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } .advanced-cropper-preview__image { display: none; pointer-events: none; position: absolute; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -webkit-transform-origin: center; transform-origin: center; max-width: none !important; } .advanced-cropper-preview__image--visible { display: block; } .advanced-cropper-preview__boundary { -webkit-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1; min-height: 0; min-width: 0; } .cropper-preview-wrapper__fade { -webkit-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1; min-height: 0; width: 100%; } .advanced-cropper { overflow: hidden; max-height: 100%; background: black; position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; color: white; } .advanced-cropper__boundary { -webkit-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1; min-height: 0; min-width: 0; } .advanced-cropper__wrapper, .advanced-cropper__background-wrapper { left: 0; top: 0; right: 0; bottom: 0; position: absolute; } .advanced-cropper__stencil-wrapper { position: absolute; } .advanced-cropper * { -webkit-box-sizing: border-box; box-sizing: border-box; } .advanced-cropper-simple-handler { background: currentColor; height: 10px; width: 10px; } .advanced-cropper-simple-line { -webkit-transition: border 0.5s; transition: border 0.5s; border-color: rgba(255, 255, 255, 0.3); border-style: solid; } .advanced-cropper-simple-line--hover { border-color: white; } .advanced-cropper-circle-stencil__preview { border: solid 2px rgba(255, 255, 255, 0.2); } .advanced-cropper-stencil-overlay { color: rgba(0, 0, 0, 0.5); } .advanced-cropper-stencil-grid { color: rgba(255, 255, 255, 0.4); } .advanced-cropper-simple-line { border-color: rgba(255, 255, 255, 0.7); } .advanced-cropper-simple-line--east { border-right-width: 2px; } .advanced-cropper-simple-line--west { border-left-width: 2px; } .advanced-cropper-simple-line--south { border-bottom-width: 2px; } .advanced-cropper-simple-line--north { border-top-width: 2px; } .advanced-cropper-simple-line--hover { border-color: white; } .advanced-cropper-bounding-box__handler { width: 24px; height: 24px; } .advanced-cropper-bounding-box__handler--west-north { -webkit-transform: translate(-5px, -5px); transform: translate(-5px, -5px); } .advanced-cropper-bounding-box__handler--east-south { -webkit-transform: translate(-19px, -19px); transform: translate(-19px, -19px); } .advanced-cropper-bounding-box__handler--west-south { -webkit-transform: translate(-5px, -19px); transform: translate(-5px, -19px); } .advanced-cropper-bounding-box__handler--east-north { -webkit-transform: translate(-19px, -5px); transform: translate(-19px, -5px); } .advanced-cropper-simple-handler { display: block; position: relative; -ms-flex-negative: 0; flex-shrink: 0; -webkit-transition: opacity 0.5s; transition: opacity 0.5s; border: none; background: currentColor; top: auto; left: auto; height: 0px; width: 0px; opacity: 0; } .advanced-cropper-simple-handler--west-north, .advanced-cropper-simple-handler--east-south, .advanced-cropper-simple-handler--west-south, .advanced-cropper-simple-handler--east-north { display: block; height: 16px; width: 16px; background: none; opacity: 1; } .advanced-cropper-simple-handler--west-north { border-left: solid 3px currentColor; border-top: solid 3px currentColor; } .advanced-cropper-simple-handler--east-south { border-right: solid 3px currentColor; border-bottom: solid 3px currentColor; } .advanced-cropper-simple-handler--west-south { border-left: solid 3px currentColor; border-bottom: solid 3px currentColor; } .advanced-cropper-simple-handler--east-north { border-right: solid 3px currentColor; border-top: solid 3px currentColor; } .advanced-cropper-simple-handler--hover { opacity: 1; } .advanced-cropper-circle-stencil { border-color: rgba(255, 255, 255, 0.4); } .advanced-cropper-stencil-grid { color: rgba(255, 255, 255, 0.5); } .oneid-prompt-dialog { width: 400px; } .oneid-prompt-dialog .oneid-dialog__body .wrapper .content .oneid-agreement { font-size: 14px; } .oneid-prompt-dialog.oneid-cancelbtn-red .oneid-dialog__footer button:nth-of-type(2) { background-color: var(--oneid-color-red) !important; } @charset "UTF-8"; .oneid-yuanbao { --oneid-color-dark: #1a1a1a; --oneid-color-white: #fff; --oneid-color-light: #ffffffe5; --oneid-color-red: #fa5151; --oneid-color-green: #27d08e; --oneid-color-link: #457ae5; /*---------------- Button ---------------*/ /*---------------- Checkbox ---------------*/ /*---------------- Dialog ---------------*/ /*---------------- 提示类Dialog ---------------*/ /*---------------- Popup ---------------*/ /*---------------- Loading ---------------*/ /*---------------- Form ---------------*/ } .oneid-yuanbao.oneid-mode-light { --oneid-background-color: var(--oneid-color-white); --oneid-color-maintain: #000; --oneid-color-reverse: #fff; --oneid-color-reverse-90: #ffffffe5; --oneid-color-10: #00000014; --oneid-color-15: #00000026; --oneid-color-40: #0006; --oneid-color-60: #0009; --oneid-color-80: #000c; --oneid-color-90: #000000e5; --oneid-avatar-bgcolor: #ebebeb; --oneid-user-bgcolor: #f6f6f6; --oneid-user-hover-bgcolor: #f2f2f2; --oneid-loading-color-border: #20c57d80; --oneid-loading-color-background: #f4fcf8; --oneid-error-color-background: #f7f7f7; --oneid-brand-blue-color: #457ae5; --oneid-btn-bgcolor: #f6f6f6; --oneid-btn-disable-bgcolor: #dadada; } .oneid-yuanbao.oneid-mode-dark { --oneid-background-color: #303030; --oneid-color-maintain: #fff; --oneid-color-reverse: #000; --oneid-color-reverse-90: #000000e5; --oneid-color-10: #ffffff1a; --oneid-color-15: #ffffff26; --oneid-color-40: #fff6; --oneid-color-60: #fff9; --oneid-color-80: #000c; --oneid-color-90: #ffffffe5; --oneid-avatar-bgcolor: #444; --oneid-user-bgcolor: #3b3b3b; --oneid-user-hover-bgcolor: #424242; --oneid-loading-color-border: #1db472; --oneid-loading-color-background: #2d453c; --oneid-error-color-background: #3b3b3b; --oneid-brand-blue-color: #38f; --oneid-btn-bgcolor: #1d1d1d; --oneid-btn-disable-bgcolor: #3b3b3b; --oneid-scrollbar-color: #444; } .oneid-yuanbao .oneid-button { border-width: 0; border-radius: 8px; background-color: var(--oneid-color-90) !important; border-color: var(--oneid-color-90) !important; --td-brand-color-hover: var(--oneid-font-color); } .oneid-yuanbao .oneid-button .oneid-ripple { display: none; } .oneid-yuanbao .oneid-button.oneid-is-disabled { background-color: var(--oneid-btn-disable-bgcolor) !important; color: var(--oneid-color-white) !important; } .oneid-yuanbao .oneid-checkbox { align-items: flex-start; } .oneid-yuanbao .oneid-checkbox .oneid-checkbox__input { opacity: 0.3; border-color: var(--oneid-color-60); border-radius: 4px; background-color: var(--oneid-background-color); } .oneid-yuanbao .oneid-checkbox.oneid-is-checked .oneid-checkbox__input { opacity: 1; background-color: var(--oneid-color-90); border-color: var(--oneid-color-90); } .oneid-yuanbao .oneid-checkbox.oneid-is-checked .oneid-checkbox__input::after { border-color: var(--oneid-color-reverse-90); } .oneid-yuanbao .oneid-checkbox .oneid-checkbox__label { color: var(--oneid-color-40) !important; margin-left: 3px; line-height: 16px; } .oneid-yuanbao .oneid-checkbox:hover .oneid-checkbox__input { opacity: 1; border-color: var(--oneid-color-90); } .oneid-yuanbao .oneid-checkbox.oneid-is-disabled .oneid-checkbox__input { opacity: 0.3; border-color: var(--oneid-color-60) !important; background-color: var(--oneid-color-40); } .oneid-yuanbao .oneid-checkbox.oneid-is-disabled .oneid-checkbox__input::after { border-color: var(--oneid-color-60) !important; } .oneid-yuanbao .oneid-checkbox.oneid-is-disabled a { color: var(--oneid-color-60); } .oneid-yuanbao .oneid-dialog__position { padding: 0 !important; } .oneid-yuanbao .oneid-dialog { border-radius: 12px; padding: 0; border: none; background-color: var(--oneid-background-color); } .oneid-yuanbao .oneid-dialog__header { color: var(--oneid-color-90); height: 32px; } .oneid-yuanbao .oneid-dialog__body { padding: 0 24px 16px; } .oneid-yuanbao .oneid-dialog__close { width: 24px; height: 24px; padding: 0; margin: 16px 16px 0 0; color: var(--oneid-color-60); } .oneid-yuanbao .oneid-dialog__close:hover { background: none; } .oneid-yuanbao.oneid-prompt-dialog .oneid-dialog { width: 360px; } .oneid-yuanbao.oneid-prompt-dialog .oneid-dialog__header { height: 24px; } .oneid-yuanbao.oneid-prompt-dialog .oneid-dialog__body { padding: 0 24px 24px; } .oneid-yuanbao.oneid-prompt-dialog .oneid-dialog__body .wrapper .header { color: var(--oneid-color-90); font-weight: 600; font-size: 16px; display: flex; align-items: center; } .oneid-yuanbao.oneid-prompt-dialog .oneid-dialog__body .wrapper .header svg { color: #00b259; font-size: 20px; } .oneid-yuanbao.oneid-prompt-dialog .oneid-dialog__body .wrapper .content { padding-top: 16px; color: var(--oneid-color-90); } .oneid-yuanbao.oneid-prompt-dialog .oneid-dialog__footer { box-sizing: border-box; padding: 0 24px 24px 0; } .oneid-yuanbao.oneid-prompt-dialog .oneid-dialog__footer button { width: 88px; height: 36px; color: var(--oneid-color-reverse-90); } .oneid-yuanbao.oneid-prompt-dialog .oneid-dialog__footer button:first-child { color: var(--oneid-color-90); background-color: var(--oneid-user-hover-bgcolor) !important; } .oneid-yuanbao .oneid-popup__content { box-shadow: 0px 8px 12px 0px rgba(0, 0, 0, 0.1019607843); } .oneid-yuanbao .oneid-popup[data-popper-placement^=top] .oneid-popup__content { margin-bottom: 4px; } .oneid-yuanbao .oneid-loading { color: var(--oneid-color-green); font-size: 18px; position: absolute; border-radius: 12px; } .oneid-yuanbao .oneid-loading .oneid-loading--center { position: absolute; top: 28px; border: 1px solid var(--oneid-loading-color-border); padding: 7px 11px; border-radius: 8px; background-color: var(--oneid-loading-color-background); box-shadow: 0px 8px 20px 0px rgba(65, 77, 96, 0.08); } .oneid-yuanbao .oneid-loading__text { color: var(--oneid-color-90); } .oneid-yuanbao .oneid-loading__overlay { background-color: transparent; } .oneid-yuanbao .oneid-form__item { margin-bottom: 16px !important; } .oneid-yuanbao .oneid-form__item-with-extra { margin-bottom: 16px; } .oneid-yuanbao .oneid-form__label { color: var(--oneid-color-90); font-weight: 500; margin-bottom: 8px; line-height: 22px; min-height: auto; } .oneid-yuanbao .oneid-form .oneid-is-error .oneid-input { border-color: var(--oneid-color-red) !important; } .oneid-yuanbao .oneid-form .oneid-input { height: 48px; border-radius: 8px; border: 1px solid var(--oneid-color-10) !important; background-color: transparent; font-size: 16px; padding: 13px 0 13px 12px; caret-color: var(--oneid-color-90); } .oneid-yuanbao .oneid-form .oneid-input input:-webkit-autofill, .oneid-yuanbao .oneid-form .oneid-input input:-webkit-autofill:hover, .oneid-yuanbao .oneid-form .oneid-input input:-webkit-autofill:focus, .oneid-yuanbao .oneid-form .oneid-input input:-webkit-autofill:active { -webkit-text-fill-color: var(--oneid-color-90); box-shadow: 0 0 0px 1000px var(--oneid-background-color) inset; border: 0 none; background-color: transparent; } .oneid-yuanbao .oneid-form .oneid-input.oneid-is-focused { box-shadow: none; } .oneid-yuanbao .oneid-form .oneid-input input { color: var(--oneid-color-90); } .oneid-yuanbao .oneid-form .oneid-input input::placeholder { color: var(--oneid-color-40); } .oneid-yuanbao .oneid-form .oneid-input__suffix { color: var(--oneid-color-90); } .oneid-yuanbao .oneid-form .oneid-input__extra { display: none; } .oneid-select-account-dialog .oneid-dialog { display: flex !important; flex-direction: column; width: 400px; min-height: 400px; max-height: 666px; } .oneid-select-account-dialog .oneid-dialog__header { height: 24px !important; } .oneid-select-account-dialog .oneid-dialog__body { flex: 1; display: flex; flex-direction: column; } .oneid-select-account-dialog .oneid-dialog .oneid-footer { margin-top: 16px; } .oneid-select-account-dialog .header { color: var(--oneid-color-90); cursor: pointer; display: flex; width: fit-content; } .oneid-select-account-dialog .header .title { font-size: 16px; font-weight: 500; } .oneid-account-dialog .oneid-dialog__body { padding-right: 11px !important; } .oneid-select-account-list { display: flex; flex-direction: column; margin-bottom: 32px; padding: 0 3px 0 16px; height: calc(100vh - 30px); } .oneid-select-account-list .list-header { position: relative; display: flex; justify-content: center; align-items: center; color: var(--oneid-color-90); padding: 15px 13px 11px 0; } .oneid-select-account-list .list-header svg { position: absolute; left: 4.5px; } .oneid-select-account-list .list-header .list-title { line-height: 22px; font-size: 20px; font-weight: 600; } .oneid-select-account-list .oneid-account-list__content { margin-top: 8px !important; } .oneid-select-account-list .oneid-footer { margin: 16px 0; } @media (max-width: 320px) { .oneid-prompt-dialog.oneid-yuanbao .oneid-dialog { width: 280px !important; } .oneid-select-account-list .oneid-account-invite__content { padding: 0 21px 0 8px; } .oneid-select-account-list .oneid-account-invite__content .tip { margin-top: 58px; } .oneid-select-account-list .oneid-account-invite__content button.accept-btn { margin-top: 58px; } .oneid-select-account-list .list-header .list-title { font-size: 16px; } } .oneid-account-invite__content { flex: 1; flex-direction: column; display: flex; justify-content: center; } .oneid-account-invite__content .tip { color: var(--oneid-color-90); font-size: 16px; text-align: center; margin-top: 48px; display: flex; justify-content: center; flex-wrap: wrap; line-height: 22px; } .oneid-account-invite__content .tip .tip-active { font-weight: 600; margin-right: 6px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; max-width: calc(100vw - 48px); } .oneid-account-invite__content .account-info { align-self: center; gap: 12px; margin-top: 24px; display: flex; align-items: center; } .oneid-account-invite__content .account-info .logo { align-self: center; width: 40px; height: 40px; border-radius: 50%; } .oneid-account-invite__content .account-info .name { color: var(--oneid-color-90); font-size: 22px; font-weight: 600; text-align: center; line-height: 31px; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; } .oneid-account-invite__content .btn { border-radius: 12px; border: none; font-weight: 500; height: 48px; } .oneid-account-invite__content button.accept-btn { margin-top: 48px; background-color: var(--oneid-color-90); color: var(--oneid-color-reverse-90); } .oneid-account-invite__content button.reject-btn { margin-top: 16px; margin-bottom: 16px; background-color: var(--oneid-user-hover-bgcolor) !important; color: var(--oneid-color-90); } .oneid-account-list__content { flex: 1; display: flex; flex-direction: column; gap: 16px; margin-top: 24px; padding-right: 13px; overflow-y: hidden; } .oneid-account-list__content:hover { overflow-y: scroll; padding-right: 3px; } .oneid-account-list__content::-webkit-scrollbar { width: 10px; } .oneid-account-list__content::-webkit-scrollbar-track { background: transparent; } .oneid-account-list__content::-webkit-scrollbar-thumb { border-width: 3px; border-radius: 10px; border-style: dashed; border-color: transparent; background-color: var(--oneid-scrollbar-color, rgba(0, 0, 0, 0.0784313725)); background-clip: padding-box; } .oneid-account-item__container { background-color: var(--oneid-error-color-background); padding: 16px; gap: 16px; border-radius: 8px; cursor: pointer; display: flex; align-items: center; } .oneid-account-item__container .logo { width: 40px; height: 40px; border-radius: 50%; } .oneid-account-item__container .content { flex: 1; display: flex; align-items: center; } .oneid-account-item__container .content .info { flex: 1; display: flex; flex-direction: column; } .oneid-account-item__container .content .info .name { color: var(--oneid-color-90); font-size: 16px; font-weight: 500; line-height: 22px; } .oneid-account-item__container .content .info .type { color: var(--oneid-color-60); font-size: 12px; line-height: 17px; } .oneid-account-item__container .content .action-name { color: var(--oneid-color-40); font-size: 12px; } .oneid-account-item__container .content .action-icon { color: var(--oneid-color-40); font-size: 16px; } .oneid-account-item__container .content .action-wrapper { display: flex; align-items: center; } .oneid-account-item__container .content .action-wrapper .action-name { color: var(--oneid-brand-blue-color); } .oneid-account-item__container .content .action-wrapper .action-icon { color: var(--oneid-brand-blue-color); } .oneid-account-item__container--disabled .content .info .type { color: var(--oneid-color-15); } .oneid-account-item__container--disabled .content .info .name { color: var(--oneid-color-15); } @charset "UTF-8"; .oneid-yuanbao { --oneid-color-dark: #1a1a1a; --oneid-color-white: #fff; --oneid-color-light: #ffffffe5; --oneid-color-red: #fa5151; --oneid-color-green: #27d08e; --oneid-color-link: #457ae5; /*---------------- Button ---------------*/ /*---------------- Checkbox ---------------*/ /*---------------- Dialog ---------------*/ /*---------------- 提示类Dialog ---------------*/ /*---------------- Popup ---------------*/ /*---------------- Loading ---------------*/ /*---------------- Form ---------------*/ } .oneid-yuanbao.oneid-mode-light { --oneid-background-color: var(--oneid-color-white); --oneid-color-maintain: #000; --oneid-color-reverse: #fff; --oneid-color-reverse-90: #ffffffe5; --oneid-color-10: #00000014; --oneid-color-15: #00000026; --oneid-color-40: #0006; --oneid-color-60: #0009; --oneid-color-80: #000c; --oneid-color-90: #000000e5; --oneid-avatar-bgcolor: #ebebeb; --oneid-user-bgcolor: #f6f6f6; --oneid-user-hover-bgcolor: #f2f2f2; --oneid-loading-color-border: #20c57d80; --oneid-loading-color-background: #f4fcf8; --oneid-error-color-background: #f7f7f7; --oneid-brand-blue-color: #457ae5; --oneid-btn-bgcolor: #f6f6f6; --oneid-btn-disable-bgcolor: #dadada; } .oneid-yuanbao.oneid-mode-dark { --oneid-background-color: #303030; --oneid-color-maintain: #fff; --oneid-color-reverse: #000; --oneid-color-reverse-90: #000000e5; --oneid-color-10: #ffffff1a; --oneid-color-15: #ffffff26; --oneid-color-40: #fff6; --oneid-color-60: #fff9; --oneid-color-80: #000c; --oneid-color-90: #ffffffe5; --oneid-avatar-bgcolor: #444; --oneid-user-bgcolor: #3b3b3b; --oneid-user-hover-bgcolor: #424242; --oneid-loading-color-border: #1db472; --oneid-loading-color-background: #2d453c; --oneid-error-color-background: #3b3b3b; --oneid-brand-blue-color: #38f; --oneid-btn-bgcolor: #1d1d1d; --oneid-btn-disable-bgcolor: #3b3b3b; --oneid-scrollbar-color: #444; } .oneid-yuanbao .oneid-button { border-width: 0; border-radius: 8px; background-color: var(--oneid-color-90) !important; border-color: var(--oneid-color-90) !important; --td-brand-color-hover: var(--oneid-font-color); } .oneid-yuanbao .oneid-button .oneid-ripple { display: none; } .oneid-yuanbao .oneid-button.oneid-is-disabled { background-color: var(--oneid-btn-disable-bgcolor) !important; color: var(--oneid-color-white) !important; } .oneid-yuanbao .oneid-checkbox { align-items: flex-start; } .oneid-yuanbao .oneid-checkbox .oneid-checkbox__input { opacity: 0.3; border-color: var(--oneid-color-60); border-radius: 4px; background-color: var(--oneid-background-color); } .oneid-yuanbao .oneid-checkbox.oneid-is-checked .oneid-checkbox__input { opacity: 1; background-color: var(--oneid-color-90); border-color: var(--oneid-color-90); } .oneid-yuanbao .oneid-checkbox.oneid-is-checked .oneid-checkbox__input::after { border-color: var(--oneid-color-reverse-90); } .oneid-yuanbao .oneid-checkbox .oneid-checkbox__label { color: var(--oneid-color-40) !important; margin-left: 3px; line-height: 16px; } .oneid-yuanbao .oneid-checkbox:hover .oneid-checkbox__input { opacity: 1; border-color: var(--oneid-color-90); } .oneid-yuanbao .oneid-checkbox.oneid-is-disabled .oneid-checkbox__input { opacity: 0.3; border-color: var(--oneid-color-60) !important; background-color: var(--oneid-color-40); } .oneid-yuanbao .oneid-checkbox.oneid-is-disabled .oneid-checkbox__input::after { border-color: var(--oneid-color-60) !important; } .oneid-yuanbao .oneid-checkbox.oneid-is-disabled a { color: var(--oneid-color-60); } .oneid-yuanbao .oneid-dialog__position { padding: 0 !important; } .oneid-yuanbao .oneid-dialog { border-radius: 12px; padding: 0; border: none; background-color: var(--oneid-background-color); } .oneid-yuanbao .oneid-dialog__header { color: var(--oneid-color-90); height: 32px; } .oneid-yuanbao .oneid-dialog__body { padding: 0 24px 16px; } .oneid-yuanbao .oneid-dialog__close { width: 24px; height: 24px; padding: 0; margin: 16px 16px 0 0; color: var(--oneid-color-60); } .oneid-yuanbao .oneid-dialog__close:hover { background: none; } .oneid-yuanbao.oneid-prompt-dialog .oneid-dialog { width: 360px; } .oneid-yuanbao.oneid-prompt-dialog .oneid-dialog__header { height: 24px; } .oneid-yuanbao.oneid-prompt-dialog .oneid-dialog__body { padding: 0 24px 24px; } .oneid-yuanbao.oneid-prompt-dialog .oneid-dialog__body .wrapper .header { color: var(--oneid-color-90); font-weight: 600; font-size: 16px; display: flex; align-items: center; } .oneid-yuanbao.oneid-prompt-dialog .oneid-dialog__body .wrapper .header svg { color: #00b259; font-size: 20px; } .oneid-yuanbao.oneid-prompt-dialog .oneid-dialog__body .wrapper .content { padding-top: 16px; color: var(--oneid-color-90); } .oneid-yuanbao.oneid-prompt-dialog .oneid-dialog__footer { box-sizing: border-box; padding: 0 24px 24px 0; } .oneid-yuanbao.oneid-prompt-dialog .oneid-dialog__footer button { width: 88px; height: 36px; color: var(--oneid-color-reverse-90); } .oneid-yuanbao.oneid-prompt-dialog .oneid-dialog__footer button:first-child { color: var(--oneid-color-90); background-color: var(--oneid-user-hover-bgcolor) !important; } .oneid-yuanbao .oneid-popup__content { box-shadow: 0px 8px 12px 0px rgba(0, 0, 0, 0.1019607843); } .oneid-yuanbao .oneid-popup[data-popper-placement^=top] .oneid-popup__content { margin-bottom: 4px; } .oneid-yuanbao .oneid-loading { color: var(--oneid-color-green); font-size: 18px; position: absolute; border-radius: 12px; } .oneid-yuanbao .oneid-loading .oneid-loading--center { position: absolute; top: 28px; border: 1px solid var(--oneid-loading-color-border); padding: 7px 11px; border-radius: 8px; background-color: var(--oneid-loading-color-background); box-shadow: 0px 8px 20px 0px rgba(65, 77, 96, 0.08); } .oneid-yuanbao .oneid-loading__text { color: var(--oneid-color-90); } .oneid-yuanbao .oneid-loading__overlay { background-color: transparent; } .oneid-yuanbao .oneid-form__item { margin-bottom: 16px !important; } .oneid-yuanbao .oneid-form__item-with-extra { margin-bottom: 16px; } .oneid-yuanbao .oneid-form__label { color: var(--oneid-color-90); font-weight: 500; margin-bottom: 8px; line-height: 22px; min-height: auto; } .oneid-yuanbao .oneid-form .oneid-is-error .oneid-input { border-color: var(--oneid-color-red) !important; } .oneid-yuanbao .oneid-form .oneid-input { height: 48px; border-radius: 8px; border: 1px solid var(--oneid-color-10) !important; background-color: transparent; font-size: 16px; padding: 13px 0 13px 12px; caret-color: var(--oneid-color-90); } .oneid-yuanbao .oneid-form .oneid-input input:-webkit-autofill, .oneid-yuanbao .oneid-form .oneid-input input:-webkit-autofill:hover, .oneid-yuanbao .oneid-form .oneid-input input:-webkit-autofill:focus, .oneid-yuanbao .oneid-form .oneid-input input:-webkit-autofill:active { -webkit-text-fill-color: var(--oneid-color-90); box-shadow: 0 0 0px 1000px var(--oneid-background-color) inset; border: 0 none; background-color: transparent; } .oneid-yuanbao .oneid-form .oneid-input.oneid-is-focused { box-shadow: none; } .oneid-yuanbao .oneid-form .oneid-input input { color: var(--oneid-color-90); } .oneid-yuanbao .oneid-form .oneid-input input::placeholder { color: var(--oneid-color-40); } .oneid-yuanbao .oneid-form .oneid-input__suffix { color: var(--oneid-color-90); } .oneid-yuanbao .oneid-form .oneid-input__extra { display: none; } .oneid-verify-phone-dialog .oneid-dialog { width: 400px; min-height: 340px; } .oneid-verify-phone-dialog .oneid-dialog__header { height: 40px; } .oneid-verify-phone-dialog .oneid-dialog .header { color: var(--oneid-color-90); margin-bottom: 16px; font-weight: 500; font-size: 16px; } .oneid-verify-phone-dialog .oneid-dialog .content { flex-direction: column; display: flex; align-items: center; } .oneid-verify-phone-dialog .oneid-dialog .content .oneid-input { border: none; font-size: 16px; } .oneid-verify-phone-dialog .oneid-dialog .content .oneid-input { background-color: transparent; } .oneid-verify-phone-dialog .oneid-dialog .content .oneid-input__suffix { color: var(--oneid-color-90); } .oneid-verify-phone-dialog .oneid-dialog .content input { color: var(--oneid-color-90); } .oneid-verify-phone-dialog .oneid-dialog .content input::placeholder { color: var(--oneid-color-40); } .oneid-verify-phone-dialog .oneid-dialog .content .oneid-input--focused { box-shadow: none; } .oneid-verify-phone-dialog .oneid-dialog .content .next { margin: 24px 0 32px; height: 48px; font-weight: 500; color: var(--oneid-color-reverse-90); } .oneid-phone-input { position: relative; width: 100%; min-height: 64px; } .oneid-phone-input .wrap { width: 100%; box-sizing: border-box; border-radius: 8px; border: 1px solid var(--oneid-color-10); } .oneid-phone-input .wrap_showList { position: absolute; z-index: 1; background-color: var(--oneid-background-color); } .oneid-phone-input .wrap__formitem { padding: 8px 12px; box-sizing: border-box; border-radius: 8px; width: 100%; display: flex; align-items: center; } .oneid-phone-input .wrap__formitem__areaCode { cursor: pointer; font-size: 16px; color: var(--oneid-color-90); white-space: nowrap; display: flex; align-items: center; } .oneid-phone-input .wrap__formitem__areaCode_disabled { cursor: default !important; } .oneid-phone-input .wrap__arealist__item { cursor: pointer; padding: 8px 10px; margin: 5px 6px; font-size: 16px; line-height: 22px; color: var(--oneid-color-90); } .oneid-phone-input .wrap__arealist__item__icon { display: none !important; } .oneid-phone-input .wrap__arealist__item--active { justify-content: space-between; border-radius: 6px; background: var(--oneid-user-hover-bgcolor); display: flex; align-items: center; } .oneid-phone-input .wrap__arealist__item--active .wrap__arealist__item__icon { display: block !important; } .oneid-phone-input .wrap__arealist__item:hover { justify-content: space-between; border-radius: 6px; background: var(--oneid-user-hover-bgcolor); display: flex; align-items: center; } .oneid-verify-code { width: 100%; } .oneid-verify-code .input-row { position: relative; padding: 7px 12px 7px 4px; border-radius: 8px; border: 1px solid var(--oneid-color-10); justify-content: space-between; display: flex; align-items: center; } .oneid-verify-code .input-row .oneid-input__wrap { flex: 1; } .oneid-verify-code .send-code { cursor: pointer; position: relative; padding-left: 12px; color: var(--oneid-color-90); font-size: 13px; } .oneid-verify-code .send-code::before { position: absolute; content: ""; left: 0; top: 3px; width: 1px; height: 16px; background-color: var(--oneid-color-10); } .oneid-verify-code .countdown { color: var(--oneid-color-40); width: 92px; } .PhotoView-Portal{direction:ltr;height:100%;left:0;overflow:hidden;position:fixed;top:0;touch-action:none;width:100%;z-index:2000}@keyframes PhotoView__rotate{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}@keyframes PhotoView__delayIn{0%,50%{opacity:0}to{opacity:1}}.PhotoView__Spinner{animation:PhotoView__delayIn .4s linear both}.PhotoView__Spinner svg{animation:PhotoView__rotate .6s linear infinite}.PhotoView__Photo{cursor:grab;max-width:none;-webkit-user-select:none;-moz-user-select:none;user-select:none}.PhotoView__Photo:active{cursor:grabbing}.PhotoView__icon{display:inline-block;left:0;position:absolute;top:0;transform:translate(-50%,-50%)}.PhotoView__PhotoBox,.PhotoView__PhotoWrap{bottom:0;direction:ltr;left:0;position:absolute;right:0;top:0;touch-action:none;width:100%}.PhotoView__PhotoWrap{overflow:hidden;z-index:10}.PhotoView__PhotoBox{transform-origin:left top}@keyframes PhotoView__fade{0%{opacity:0}to{opacity:1}}.PhotoView-Slider__clean .PhotoView-Slider__ArrowLeft,.PhotoView-Slider__clean .PhotoView-Slider__ArrowRight,.PhotoView-Slider__clean .PhotoView-Slider__BannerWrap,.PhotoView-Slider__clean .PhotoView-Slider__Overlay,.PhotoView-Slider__willClose .PhotoView-Slider__BannerWrap:hover{opacity:0}.PhotoView-Slider__Backdrop{background:#000;height:100%;left:0;position:absolute;top:0;transition-property:background-color;width:100%;z-index:-1}.PhotoView-Slider__fadeIn{animation:PhotoView__fade linear both;opacity:0}.PhotoView-Slider__fadeOut{animation:PhotoView__fade linear reverse both;opacity:0}.PhotoView-Slider__BannerWrap{align-items:center;background-color:rgba(0,0,0,.5);color:#fff;display:flex;height:44px;justify-content:space-between;left:0;position:absolute;top:0;transition:opacity .2s ease-out;width:100%;z-index:20}.PhotoView-Slider__BannerWrap:hover{opacity:1}.PhotoView-Slider__Counter{font-size:14px;opacity:.75;padding:0 10px}.PhotoView-Slider__BannerRight{align-items:center;display:flex;height:100%}.PhotoView-Slider__toolbarIcon{fill:#fff;box-sizing:border-box;cursor:pointer;opacity:.75;padding:10px;transition:opacity .2s linear}.PhotoView-Slider__toolbarIcon:hover{opacity:1}.PhotoView-Slider__ArrowLeft,.PhotoView-Slider__ArrowRight{align-items:center;bottom:0;cursor:pointer;display:flex;height:100px;justify-content:center;margin:auto;opacity:.75;position:absolute;top:0;transition:opacity .2s linear;-webkit-user-select:none;-moz-user-select:none;user-select:none;width:70px;z-index:20}.PhotoView-Slider__ArrowLeft:hover,.PhotoView-Slider__ArrowRight:hover{opacity:1}.PhotoView-Slider__ArrowLeft svg,.PhotoView-Slider__ArrowRight svg{fill:#fff;background:rgba(0,0,0,.3);box-sizing:content-box;height:24px;padding:10px;width:24px}.PhotoView-Slider__ArrowLeft{left:0}.PhotoView-Slider__ArrowRight{right:0} .PhotoView-Portal{direction:ltr;height:100%;left:0;overflow:hidden;position:fixed;top:0;touch-action:none;width:100%;z-index:2000}@keyframes PhotoView__rotate{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}@keyframes PhotoView__delayIn{0%,50%{opacity:0}to{opacity:1}}.PhotoView__Spinner{animation:PhotoView__delayIn .4s linear both}.PhotoView__Spinner svg{animation:PhotoView__rotate .6s linear infinite}.PhotoView__Photo{cursor:grab;max-width:none;-webkit-user-select:none;-moz-user-select:none;user-select:none}.PhotoView__Photo:active{cursor:grabbing}.PhotoView__icon{display:inline-block;left:0;position:absolute;top:0;transform:translate(-50%,-50%)}.PhotoView__PhotoBox,.PhotoView__PhotoWrap{bottom:0;direction:ltr;left:0;position:absolute;right:0;top:0;touch-action:none;width:100%}.PhotoView__PhotoWrap{overflow:hidden;z-index:10}.PhotoView__PhotoBox{transform-origin:left top}@keyframes PhotoView__fade{0%{opacity:0}to{opacity:1}}.PhotoView-Slider__clean .PhotoView-Slider__ArrowLeft,.PhotoView-Slider__clean .PhotoView-Slider__ArrowRight,.PhotoView-Slider__clean .PhotoView-Slider__BannerWrap,.PhotoView-Slider__clean .PhotoView-Slider__Overlay,.PhotoView-Slider__willClose .PhotoView-Slider__BannerWrap:hover{opacity:0}.PhotoView-Slider__Backdrop{background:#000;height:100%;left:0;position:absolute;top:0;transition-property:background-color;width:100%;z-index:-1}.PhotoView-Slider__fadeIn{animation:PhotoView__fade linear both;opacity:0}.PhotoView-Slider__fadeOut{animation:PhotoView__fade linear reverse both;opacity:0}.PhotoView-Slider__BannerWrap{align-items:center;background-color:rgba(0,0,0,.5);color:#fff;display:flex;height:44px;justify-content:space-between;left:0;position:absolute;top:0;transition:opacity .2s ease-out;width:100%;z-index:20}.PhotoView-Slider__BannerWrap:hover{opacity:1}.PhotoView-Slider__Counter{font-size:14px;opacity:.75;padding:0 10px}.PhotoView-Slider__BannerRight{align-items:center;display:flex;height:100%}.PhotoView-Slider__toolbarIcon{fill:#fff;box-sizing:border-box;cursor:pointer;opacity:.75;padding:10px;transition:opacity .2s linear}.PhotoView-Slider__toolbarIcon:hover{opacity:1}.PhotoView-Slider__ArrowLeft,.PhotoView-Slider__ArrowRight{align-items:center;bottom:0;cursor:pointer;display:flex;height:100px;justify-content:center;margin:auto;opacity:.75;position:absolute;top:0;transition:opacity .2s linear;-webkit-user-select:none;-moz-user-select:none;user-select:none;width:70px;z-index:20}.PhotoView-Slider__ArrowLeft:hover,.PhotoView-Slider__ArrowRight:hover{opacity:1}.PhotoView-Slider__ArrowLeft svg,.PhotoView-Slider__ArrowRight svg{fill:#fff;background:rgba(0,0,0,.3);box-sizing:content-box;height:24px;padding:10px;width:24px}.PhotoView-Slider__ArrowLeft{left:0}.PhotoView-Slider__ArrowRight{right:0} /** * Swiper 11.2.6 * Most modern mobile touch slider and framework with hardware accelerated transitions * https://swiperjs.com * * Copyright 2014-2025 Vladimir Kharlampidi * * Released under the MIT License * * Released on: March 19, 2025 */ /* FONT_START */ @font-face { font-family: 'swiper-icons'; src: url("data:application/font-woff;charset=utf-8;base64, d09GRgABAAAAAAZgABAAAAAADAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABGRlRNAAAGRAAAABoAAAAci6qHkUdERUYAAAWgAAAAIwAAACQAYABXR1BPUwAABhQAAAAuAAAANuAY7+xHU1VCAAAFxAAAAFAAAABm2fPczU9TLzIAAAHcAAAASgAAAGBP9V5RY21hcAAAAkQAAACIAAABYt6F0cBjdnQgAAACzAAAAAQAAAAEABEBRGdhc3AAAAWYAAAACAAAAAj//wADZ2x5ZgAAAywAAADMAAAD2MHtryVoZWFkAAABbAAAADAAAAA2E2+eoWhoZWEAAAGcAAAAHwAAACQC9gDzaG10eAAAAigAAAAZAAAArgJkABFsb2NhAAAC0AAAAFoAAABaFQAUGG1heHAAAAG8AAAAHwAAACAAcABAbmFtZQAAA/gAAAE5AAACXvFdBwlwb3N0AAAFNAAAAGIAAACE5s74hXjaY2BkYGAAYpf5Hu/j+W2+MnAzMYDAzaX6QjD6/4//Bxj5GA8AuRwMYGkAPywL13jaY2BkYGA88P8Agx4j+/8fQDYfA1AEBWgDAIB2BOoAeNpjYGRgYNBh4GdgYgABEMnIABJzYNADCQAACWgAsQB42mNgYfzCOIGBlYGB0YcxjYGBwR1Kf2WQZGhhYGBiYGVmgAFGBiQQkOaawtDAoMBQxXjg/wEGPcYDDA4wNUA2CCgwsAAAO4EL6gAAeNpj2M0gyAACqxgGNWBkZ2D4/wMA+xkDdgAAAHjaY2BgYGaAYBkGRgYQiAHyGMF8FgYHIM3DwMHABGQrMOgyWDLEM1T9/w8UBfEMgLzE////P/5//f/V/xv+r4eaAAeMbAxwIUYmIMHEgKYAYjUcsDAwsLKxc3BycfPw8jEQA/gZBASFhEVExcQlJKWkZWTl5BUUlZRVVNXUNTQZBgMAAMR+E+gAEQFEAAAAKgAqACoANAA+AEgAUgBcAGYAcAB6AIQAjgCYAKIArAC2AMAAygDUAN4A6ADyAPwBBgEQARoBJAEuATgBQgFMAVYBYAFqAXQBfgGIAZIBnAGmAbIBzgHsAAB42u2NMQ6CUAyGW568x9AneYYgm4MJbhKFaExIOAVX8ApewSt4Bic4AfeAid3VOBixDxfPYEza5O+Xfi04YADggiUIULCuEJK8VhO4bSvpdnktHI5QCYtdi2sl8ZnXaHlqUrNKzdKcT8cjlq+rwZSvIVczNiezsfnP/uznmfPFBNODM2K7MTQ45YEAZqGP81AmGGcF3iPqOop0r1SPTaTbVkfUe4HXj97wYE+yNwWYxwWu4v1ugWHgo3S1XdZEVqWM7ET0cfnLGxWfkgR42o2PvWrDMBSFj/IHLaF0zKjRgdiVMwScNRAoWUoH78Y2icB/yIY09An6AH2Bdu/UB+yxopYshQiEvnvu0dURgDt8QeC8PDw7Fpji3fEA4z/PEJ6YOB5hKh4dj3EvXhxPqH/SKUY3rJ7srZ4FZnh1PMAtPhwP6fl2PMJMPDgeQ4rY8YT6Gzao0eAEA409DuggmTnFnOcSCiEiLMgxCiTI6Cq5DZUd3Qmp10vO0LaLTd2cjN4fOumlc7lUYbSQcZFkutRG7g6JKZKy0RmdLY680CDnEJ+UMkpFFe1RN7nxdVpXrC4aTtnaurOnYercZg2YVmLN/d/gczfEimrE/fs/bOuq29Zmn8tloORaXgZgGa78yO9/cnXm2BpaGvq25Dv9S4E9+5SIc9PqupJKhYFSSl47+Qcr1mYNAAAAeNptw0cKwkAAAMDZJA8Q7OUJvkLsPfZ6zFVERPy8qHh2YER+3i/BP83vIBLLySsoKimrqKqpa2hp6+jq6RsYGhmbmJqZSy0sraxtbO3sHRydnEMU4uR6yx7JJXveP7WrDycAAAAAAAH//wACeNpjYGRgYOABYhkgZgJCZgZNBkYGLQZtIJsFLMYAAAw3ALgAeNolizEKgDAQBCchRbC2sFER0YD6qVQiBCv/H9ezGI6Z5XBAw8CBK/m5iQQVauVbXLnOrMZv2oLdKFa8Pjuru2hJzGabmOSLzNMzvutpB3N42mNgZGBg4GKQYzBhYMxJLMlj4GBgAYow/P/PAJJhLM6sSoWKfWCAAwDAjgbRAAB42mNgYGBkAIIbCZo5IPrmUn0hGA0AO8EFTQAA"); font-weight: 400; font-style: normal; } /* FONT_END */ :root { --swiper-theme-color: #007aff; /* --swiper-preloader-color: var(--swiper-theme-color); --swiper-wrapper-transition-timing-function: initial; */ } :host { position: relative; display: block; margin-left: auto; margin-right: auto; z-index: 1; } .swiper { margin-left: auto; margin-right: auto; position: relative; overflow: hidden; list-style: none; padding: 0; /* Fix of Webkit flickering */ z-index: 1; display: block; } .swiper-vertical > .swiper-wrapper { flex-direction: column; } .swiper-wrapper { position: relative; width: 100%; height: 100%; z-index: 1; display: flex; transition-property: transform; transition-timing-function: var(--swiper-wrapper-transition-timing-function, initial); box-sizing: content-box; } .swiper-android .swiper-slide, .swiper-ios .swiper-slide, .swiper-wrapper { transform: translate3d(0px, 0, 0); } .swiper-horizontal { touch-action: pan-y; } .swiper-vertical { touch-action: pan-x; } .swiper-slide { flex-shrink: 0; width: 100%; height: 100%; position: relative; transition-property: transform; display: block; } .swiper-slide-invisible-blank { visibility: hidden; } /* Auto Height */ .swiper-autoheight, .swiper-autoheight .swiper-slide { height: auto; } .swiper-autoheight .swiper-wrapper { align-items: flex-start; transition-property: transform, height; } .swiper-backface-hidden .swiper-slide { transform: translateZ(0); -webkit-backface-visibility: hidden; backface-visibility: hidden; } /* 3D Effects */ .swiper-3d.swiper-css-mode .swiper-wrapper { perspective: 1200px; } .swiper-3d .swiper-wrapper { transform-style: preserve-3d; } .swiper-3d { perspective: 1200px; } .swiper-3d .swiper-slide, .swiper-3d .swiper-cube-shadow { transform-style: preserve-3d; } /* CSS Mode */ .swiper-css-mode > .swiper-wrapper { overflow: auto; scrollbar-width: none; /* For Firefox */ -ms-overflow-style: none; /* For Internet Explorer and Edge */ } .swiper-css-mode > .swiper-wrapper::-webkit-scrollbar { display: none; } .swiper-css-mode > .swiper-wrapper > .swiper-slide { scroll-snap-align: start start; } .swiper-css-mode.swiper-horizontal > .swiper-wrapper { scroll-snap-type: x mandatory; } .swiper-css-mode.swiper-vertical > .swiper-wrapper { scroll-snap-type: y mandatory; } .swiper-css-mode.swiper-free-mode > .swiper-wrapper { scroll-snap-type: none; } .swiper-css-mode.swiper-free-mode > .swiper-wrapper > .swiper-slide { scroll-snap-align: none; } .swiper-css-mode.swiper-centered > .swiper-wrapper::before { content: ''; flex-shrink: 0; order: 9999; } .swiper-css-mode.swiper-centered > .swiper-wrapper > .swiper-slide { scroll-snap-align: center center; scroll-snap-stop: always; } .swiper-css-mode.swiper-centered.swiper-horizontal > .swiper-wrapper > .swiper-slide:first-child { margin-inline-start: var(--swiper-centered-offset-before); } .swiper-css-mode.swiper-centered.swiper-horizontal > .swiper-wrapper::before { height: 100%; min-height: 1px; width: var(--swiper-centered-offset-after); } .swiper-css-mode.swiper-centered.swiper-vertical > .swiper-wrapper > .swiper-slide:first-child { margin-block-start: var(--swiper-centered-offset-before); } .swiper-css-mode.swiper-centered.swiper-vertical > .swiper-wrapper::before { width: 100%; min-width: 1px; height: var(--swiper-centered-offset-after); } /* Slide styles start */ /* 3D Shadows */ .swiper-3d .swiper-slide-shadow, .swiper-3d .swiper-slide-shadow-left, .swiper-3d .swiper-slide-shadow-right, .swiper-3d .swiper-slide-shadow-top, .swiper-3d .swiper-slide-shadow-bottom, .swiper-3d .swiper-slide-shadow, .swiper-3d .swiper-slide-shadow-left, .swiper-3d .swiper-slide-shadow-right, .swiper-3d .swiper-slide-shadow-top, .swiper-3d .swiper-slide-shadow-bottom { position: absolute; left: 0; top: 0; width: 100%; height: 100%; pointer-events: none; z-index: 10; } .swiper-3d .swiper-slide-shadow { background: rgba(0, 0, 0, 0.15); } .swiper-3d .swiper-slide-shadow-left { background-image: linear-gradient(to left, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)); } .swiper-3d .swiper-slide-shadow-right { background-image: linear-gradient(to right, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)); } .swiper-3d .swiper-slide-shadow-top { background-image: linear-gradient(to top, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)); } .swiper-3d .swiper-slide-shadow-bottom { background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)); } .swiper-lazy-preloader { width: 42px; height: 42px; position: absolute; left: 50%; top: 50%; margin-left: -21px; margin-top: -21px; z-index: 10; transform-origin: 50%; box-sizing: border-box; border: 4px solid var(--swiper-preloader-color, var(--swiper-theme-color)); border-radius: 50%; border-top-color: transparent; } .swiper:not(.swiper-watch-progress) .swiper-lazy-preloader, .swiper-watch-progress .swiper-slide-visible .swiper-lazy-preloader { animation: swiper-preloader-spin 1s infinite linear; } .swiper-lazy-preloader-white { --swiper-preloader-color: #fff; } .swiper-lazy-preloader-black { --swiper-preloader-color: #000; } @keyframes swiper-preloader-spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } /* Slide styles end */ :root { /* --swiper-pagination-color: var(--swiper-theme-color); --swiper-pagination-left: auto; --swiper-pagination-right: 8px; --swiper-pagination-bottom: 8px; --swiper-pagination-top: auto; --swiper-pagination-fraction-color: inherit; --swiper-pagination-progressbar-bg-color: rgba(0,0,0,0.25); --swiper-pagination-progressbar-size: 4px; --swiper-pagination-bullet-size: 8px; --swiper-pagination-bullet-width: 8px; --swiper-pagination-bullet-height: 8px; --swiper-pagination-bullet-border-radius: 50%; --swiper-pagination-bullet-inactive-color: #000; --swiper-pagination-bullet-inactive-opacity: 0.2; --swiper-pagination-bullet-opacity: 1; --swiper-pagination-bullet-horizontal-gap: 4px; --swiper-pagination-bullet-vertical-gap: 6px; */ } .swiper-pagination { position: absolute; text-align: center; transition: 300ms opacity; transform: translate3d(0, 0, 0); z-index: 10; } .swiper-pagination.swiper-pagination-hidden { opacity: 0; } .swiper-pagination-disabled > .swiper-pagination, .swiper-pagination.swiper-pagination-disabled { display: none !important; } /* Common Styles */ .swiper-pagination-fraction, .swiper-pagination-custom, .swiper-horizontal > .swiper-pagination-bullets, .swiper-pagination-bullets.swiper-pagination-horizontal { bottom: var(--swiper-pagination-bottom, 8px); top: var(--swiper-pagination-top, auto); left: 0; width: 100%; } /* Bullets */ .swiper-pagination-bullets-dynamic { overflow: hidden; font-size: 0; } .swiper-pagination-bullets-dynamic .swiper-pagination-bullet { transform: scale(0.33); position: relative; } .swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active { transform: scale(1); } .swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-main { transform: scale(1); } .swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev { transform: scale(0.66); } .swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev-prev { transform: scale(0.33); } .swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next { transform: scale(0.66); } .swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next-next { transform: scale(0.33); } .swiper-pagination-bullet { width: var(--swiper-pagination-bullet-width, var(--swiper-pagination-bullet-size, 8px)); height: var(--swiper-pagination-bullet-height, var(--swiper-pagination-bullet-size, 8px)); display: inline-block; border-radius: var(--swiper-pagination-bullet-border-radius, 50%); background: var(--swiper-pagination-bullet-inactive-color, #000); opacity: var(--swiper-pagination-bullet-inactive-opacity, 0.2); } button.swiper-pagination-bullet { border: none; margin: 0; padding: 0; box-shadow: none; -webkit-appearance: none; appearance: none; } .swiper-pagination-clickable .swiper-pagination-bullet { cursor: pointer; } .swiper-pagination-bullet:only-child { display: none !important; } .swiper-pagination-bullet-active { opacity: var(--swiper-pagination-bullet-opacity, 1); background: var(--swiper-pagination-color, var(--swiper-theme-color)); } .swiper-vertical > .swiper-pagination-bullets, .swiper-pagination-vertical.swiper-pagination-bullets { right: var(--swiper-pagination-right, 8px); left: var(--swiper-pagination-left, auto); top: 50%; transform: translate3d(0px, -50%, 0); } .swiper-vertical > .swiper-pagination-bullets .swiper-pagination-bullet, .swiper-pagination-vertical.swiper-pagination-bullets .swiper-pagination-bullet { margin: var(--swiper-pagination-bullet-vertical-gap, 6px) 0; display: block; } .swiper-vertical > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic, .swiper-pagination-vertical.swiper-pagination-bullets.swiper-pagination-bullets-dynamic { top: 50%; transform: translateY(-50%); width: 8px; } .swiper-vertical > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet, .swiper-pagination-vertical.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet { display: inline-block; transition: 200ms transform, 200ms top; } .swiper-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet, .swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet { margin: 0 var(--swiper-pagination-bullet-horizontal-gap, 4px); } .swiper-horizontal > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic, .swiper-pagination-horizontal.swiper-pagination-bullets.swiper-pagination-bullets-dynamic { left: 50%; transform: translateX(-50%); white-space: nowrap; } .swiper-horizontal > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet, .swiper-pagination-horizontal.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet { transition: 200ms transform, 200ms left; } .swiper-horizontal.swiper-rtl > .swiper-pagination-bullets-dynamic .swiper-pagination-bullet { transition: 200ms transform, 200ms right; } /* Fraction */ .swiper-pagination-fraction { color: var(--swiper-pagination-fraction-color, inherit); } /* Progress */ .swiper-pagination-progressbar { background: var(--swiper-pagination-progressbar-bg-color, rgba(0, 0, 0, 0.25)); position: absolute; } .swiper-pagination-progressbar .swiper-pagination-progressbar-fill { background: var(--swiper-pagination-color, var(--swiper-theme-color)); position: absolute; left: 0; top: 0; width: 100%; height: 100%; transform: scale(0); transform-origin: left top; } .swiper-rtl .swiper-pagination-progressbar .swiper-pagination-progressbar-fill { transform-origin: right top; } .swiper-horizontal > .swiper-pagination-progressbar, .swiper-pagination-progressbar.swiper-pagination-horizontal, .swiper-vertical > .swiper-pagination-progressbar.swiper-pagination-progressbar-opposite, .swiper-pagination-progressbar.swiper-pagination-vertical.swiper-pagination-progressbar-opposite { width: 100%; height: var(--swiper-pagination-progressbar-size, 4px); left: 0; top: 0; } .swiper-vertical > .swiper-pagination-progressbar, .swiper-pagination-progressbar.swiper-pagination-vertical, .swiper-horizontal > .swiper-pagination-progressbar.swiper-pagination-progressbar-opposite, .swiper-pagination-progressbar.swiper-pagination-horizontal.swiper-pagination-progressbar-opposite { width: var(--swiper-pagination-progressbar-size, 4px); height: 100%; left: 0; top: 0; } .swiper-pagination-lock { display: none; } @font-face{font-family:KaTeX_AMS;font-style:normal;font-weight:400;src:url(https://cdn-bot.hunyuan.tencent.com/assets/73ea273a72f4aca30ca5.woff2) format("woff2"),url(https://cdn-bot.hunyuan.tencent.com/assets/d562e886c52f12660a41.woff) format("woff"),url(https://cdn-bot.hunyuan.tencent.com/assets/853be92419a6c3766b9a.ttf) format("truetype")}@font-face{font-family:KaTeX_Caligraphic;font-style:normal;font-weight:700;src:url(https://cdn-bot.hunyuan.tencent.com/assets/a1abf90dfd72792a577a.woff2) format("woff2"),url(https://cdn-bot.hunyuan.tencent.com/assets/d757c535a2e5902f1325.woff) format("woff"),url(https://cdn-bot.hunyuan.tencent.com/assets/7489a2fbfb9bfe704420.ttf) format("truetype")}@font-face{font-family:KaTeX_Caligraphic;font-style:normal;font-weight:400;src:url(https://cdn-bot.hunyuan.tencent.com/assets/d6484fce1ef428d5bd94.woff2) format("woff2"),url(https://cdn-bot.hunyuan.tencent.com/assets/db074fa22cf224af93d7.woff) format("woff"),url(https://cdn-bot.hunyuan.tencent.com/assets/7e873d3833eb108a0758.ttf) format("truetype")}@font-face{font-family:KaTeX_Fraktur;font-style:normal;font-weight:700;src:url(https://cdn-bot.hunyuan.tencent.com/assets/931d67ea207ab37ee693.woff2) format("woff2"),url(https://cdn-bot.hunyuan.tencent.com/assets/354501bac435c3264834.woff) format("woff"),url(https://cdn-bot.hunyuan.tencent.com/assets/4c761b3711973ab04edf.ttf) format("truetype")}@font-face{font-family:KaTeX_Fraktur;font-style:normal;font-weight:400;src:url(https://cdn-bot.hunyuan.tencent.com/assets/172d3529b26f8cedef6b.woff2) format("woff2"),url(https://cdn-bot.hunyuan.tencent.com/assets/6fdf0ac577be0ba82a4c.woff) format("woff"),url(https://cdn-bot.hunyuan.tencent.com/assets/ed305b5434865e06ffde.ttf) format("truetype")}@font-face{font-family:KaTeX_Main;font-style:normal;font-weight:700;src:url(https://cdn-bot.hunyuan.tencent.com/assets/39890742bc957b368704.woff2) format("woff2"),url(https://cdn-bot.hunyuan.tencent.com/assets/0c3b8929d377c0e9b2f3.woff) format("woff"),url(https://cdn-bot.hunyuan.tencent.com/assets/8169508bf58f8bd92ad8.ttf) format("truetype")}@font-face{font-family:KaTeX_Main;font-style:italic;font-weight:700;src:url(https://cdn-bot.hunyuan.tencent.com/assets/20f389c4120be058d80a.woff2) format("woff2"),url(https://cdn-bot.hunyuan.tencent.com/assets/428978dc7837d46de091.woff) format("woff"),url(https://cdn-bot.hunyuan.tencent.com/assets/828abcb200061cffbaae.ttf) format("truetype")}@font-face{font-family:KaTeX_Main;font-style:italic;font-weight:400;src:url(https://cdn-bot.hunyuan.tencent.com/assets/fe2176f79edaa716e621.woff2) format("woff2"),url(https://cdn-bot.hunyuan.tencent.com/assets/fd947498bc16392e76c2.woff) format("woff"),url(https://cdn-bot.hunyuan.tencent.com/assets/fa675e5e4bec9eb250b6.ttf) format("truetype")}@font-face{font-family:KaTeX_Main;font-style:normal;font-weight:400;src:url(https://cdn-bot.hunyuan.tencent.com/assets/f650f111a3b890d116f1.woff2) format("woff2"),url(https://cdn-bot.hunyuan.tencent.com/assets/4f35fbcc9ee8614c2bcc.woff) format("woff"),url(https://cdn-bot.hunyuan.tencent.com/assets/9eba1d77abcf2aa6e94e.ttf) format("truetype")}@font-face{font-family:KaTeX_Math;font-style:italic;font-weight:700;src:url(https://cdn-bot.hunyuan.tencent.com/assets/dcbcbd93bac0470b462d.woff2) format("woff2"),url(https://cdn-bot.hunyuan.tencent.com/assets/3f07ed67f06c720120ce.woff) format("woff"),url(https://cdn-bot.hunyuan.tencent.com/assets/bf2d440b3a42ea78a998.ttf) format("truetype")}@font-face{font-family:KaTeX_Math;font-style:italic;font-weight:400;src:url(https://cdn-bot.hunyuan.tencent.com/assets/6d3d25f4820d0da8f01f.woff2) format("woff2"),url(https://cdn-bot.hunyuan.tencent.com/assets/96759856b4e70f3a8338.woff) format("woff"),url(https://cdn-bot.hunyuan.tencent.com/assets/8a5f936332e8028c7278.ttf) format("truetype")}@font-face{font-family:"KaTeX_SansSerif";font-style:normal;font-weight:700;src:url(https://cdn-bot.hunyuan.tencent.com/assets/95591a929f0d32aa282a.woff2) format("woff2"),url(https://cdn-bot.hunyuan.tencent.com/assets/b9cd458ac6d5889ff9c3.woff) format("woff"),url(https://cdn-bot.hunyuan.tencent.com/assets/5b49f4993ae22d7975b4.ttf) format("truetype")}@font-face{font-family:"KaTeX_SansSerif";font-style:italic;font-weight:400;src:url(https://cdn-bot.hunyuan.tencent.com/assets/7d393d382f3e7fb1c637.woff2) format("woff2"),url(https://cdn-bot.hunyuan.tencent.com/assets/8d593cfaa96238d5e2f8.woff) format("woff"),url(https://cdn-bot.hunyuan.tencent.com/assets/b257a18c016f37ee4543.ttf) format("truetype")}@font-face{font-family:"KaTeX_SansSerif";font-style:normal;font-weight:400;src:url(https://cdn-bot.hunyuan.tencent.com/assets/cd5e231e0cc53b2cb2c0.woff2) format("woff2"),url(https://cdn-bot.hunyuan.tencent.com/assets/02271ec5cb9f5b4588ac.woff) format("woff"),url(https://cdn-bot.hunyuan.tencent.com/assets/2f7bc363fc5424ebda59.ttf) format("truetype")}@font-face{font-family:KaTeX_Script;font-style:normal;font-weight:400;src:url(https://cdn-bot.hunyuan.tencent.com/assets/c81d1b2a4b75d3eded60.woff2) format("woff2"),url(https://cdn-bot.hunyuan.tencent.com/assets/073b3402d036714b4370.woff) format("woff"),url(https://cdn-bot.hunyuan.tencent.com/assets/fc9ba5249878cd8f8d88.ttf) format("truetype")}@font-face{font-family:KaTeX_Size1;font-style:normal;font-weight:400;src:url(https://cdn-bot.hunyuan.tencent.com/assets/6eec866c69313624be60.woff2) format("woff2"),url(https://cdn-bot.hunyuan.tencent.com/assets/0108e89c9003e8c14ea3.woff) format("woff"),url(https://cdn-bot.hunyuan.tencent.com/assets/6de7d4b539221a49e9e2.ttf) format("truetype")}@font-face{font-family:KaTeX_Size2;font-style:normal;font-weight:400;src:url(https://cdn-bot.hunyuan.tencent.com/assets/2960900c4f271311eb36.woff2) format("woff2"),url(https://cdn-bot.hunyuan.tencent.com/assets/3a99e70aee4076660d38.woff) format("woff"),url(https://cdn-bot.hunyuan.tencent.com/assets/57f5c1837853986ea1db.ttf) format("truetype")}@font-face{font-family:KaTeX_Size3;font-style:normal;font-weight:400;src:url(https://cdn-bot.hunyuan.tencent.com/assets/e1951519f6f0596f7356.woff2) format("woff2"),url(https://cdn-bot.hunyuan.tencent.com/assets/7947224e8a9914fa332b.woff) format("woff"),url(https://cdn-bot.hunyuan.tencent.com/assets/8d6b6822586eea3d3b20.ttf) format("truetype")}@font-face{font-family:KaTeX_Size4;font-style:normal;font-weight:400;src:url(https://cdn-bot.hunyuan.tencent.com/assets/e418bf257af1052628d8.woff2) format("woff2"),url(https://cdn-bot.hunyuan.tencent.com/assets/aeffd8025cba3647f1a6.woff) format("woff"),url(https://cdn-bot.hunyuan.tencent.com/assets/4ad7c7e8bb8d10a34bb7.ttf) format("truetype")}@font-face{font-family:KaTeX_Typewriter;font-style:normal;font-weight:400;src:url(https://cdn-bot.hunyuan.tencent.com/assets/c295e7f71970f03c0549.woff2) format("woff2"),url(https://cdn-bot.hunyuan.tencent.com/assets/4c6b94fd1d07f8beff7c.woff) format("woff"),url(https://cdn-bot.hunyuan.tencent.com/assets/c5c02d763c89380dcb4e.ttf) format("truetype")}.katex{font:normal 1.21em KaTeX_Main,Times New Roman,serif;line-height:1.2;text-indent:0;text-rendering:auto}.katex *{-ms-high-contrast-adjust:none!important;border-color:currentColor}.katex .katex-version:after{content:"0.16.22"}.katex .katex-mathml{clip:rect(1px,1px,1px,1px);border:0;height:1px;overflow:hidden;padding:0;position:absolute;width:1px}.katex .katex-html>.newline{display:block}.katex .base{position:relative;white-space:nowrap;width:-webkit-min-content;width:-moz-min-content;width:min-content}.katex .base,.katex .strut{display:inline-block}.katex .textbf{font-weight:700}.katex .textit{font-style:italic}.katex .textrm{font-family:KaTeX_Main}.katex .textsf{font-family:KaTeX_SansSerif}.katex .texttt{font-family:KaTeX_Typewriter}.katex .mathnormal{font-family:KaTeX_Math;font-style:italic}.katex .mathit{font-family:KaTeX_Main;font-style:italic}.katex .mathrm{font-style:normal}.katex .mathbf{font-family:KaTeX_Main;font-weight:700}.katex .boldsymbol{font-family:KaTeX_Math;font-style:italic;font-weight:700}.katex .amsrm,.katex .mathbb,.katex .textbb{font-family:KaTeX_AMS}.katex .mathcal{font-family:KaTeX_Caligraphic}.katex .mathfrak,.katex .textfrak{font-family:KaTeX_Fraktur}.katex .mathboldfrak,.katex .textboldfrak{font-family:KaTeX_Fraktur;font-weight:700}.katex .mathtt{font-family:KaTeX_Typewriter}.katex .mathscr,.katex .textscr{font-family:KaTeX_Script}.katex .mathsf,.katex .textsf{font-family:KaTeX_SansSerif}.katex .mathboldsf,.katex .textboldsf{font-family:KaTeX_SansSerif;font-weight:700}.katex .mathitsf,.katex .mathsfit,.katex .textitsf{font-family:KaTeX_SansSerif;font-style:italic}.katex .mainrm{font-family:KaTeX_Main;font-style:normal}.katex .vlist-t{border-collapse:collapse;display:inline-table;table-layout:fixed}.katex .vlist-r{display:table-row}.katex .vlist{display:table-cell;position:relative;vertical-align:bottom}.katex .vlist>span{display:block;height:0;position:relative}.katex .vlist>span>span{display:inline-block}.katex .vlist>span>.pstrut{overflow:hidden;width:0}.katex .vlist-t2{margin-right:-2px}.katex .vlist-s{display:table-cell;font-size:1px;min-width:2px;vertical-align:bottom;width:2px}.katex .vbox{align-items:baseline;display:inline-flex;flex-direction:column}.katex .hbox{width:100%}.katex .hbox,.katex .thinbox{display:inline-flex;flex-direction:row}.katex .thinbox{max-width:0;width:0}.katex .msupsub{text-align:left}.katex .mfrac>span>span{text-align:center}.katex .mfrac .frac-line{border-bottom-style:solid;display:inline-block;width:100%}.katex .hdashline,.katex .hline,.katex .mfrac .frac-line,.katex .overline .overline-line,.katex .rule,.katex .underline .underline-line{min-height:1px}.katex .mspace{display:inline-block}.katex .clap,.katex .llap,.katex .rlap{position:relative;width:0}.katex .clap>.inner,.katex .llap>.inner,.katex .rlap>.inner{position:absolute}.katex .clap>.fix,.katex .llap>.fix,.katex .rlap>.fix{display:inline-block}.katex .llap>.inner{right:0}.katex .clap>.inner,.katex .rlap>.inner{left:0}.katex .clap>.inner>span{margin-left:-50%;margin-right:50%}.katex .rule{border:0 solid;display:inline-block;position:relative}.katex .hline,.katex .overline .overline-line,.katex .underline .underline-line{border-bottom-style:solid;display:inline-block;width:100%}.katex .hdashline{border-bottom-style:dashed;display:inline-block;width:100%}.katex .sqrt>.root{margin-left:.2777777778em;margin-right:-.5555555556em}.katex .fontsize-ensurer.reset-size1.size1,.katex .sizing.reset-size1.size1{font-size:1em}.katex .fontsize-ensurer.reset-size1.size2,.katex .sizing.reset-size1.size2{font-size:1.2em}.katex .fontsize-ensurer.reset-size1.size3,.katex .sizing.reset-size1.size3{font-size:1.4em}.katex .fontsize-ensurer.reset-size1.size4,.katex .sizing.reset-size1.size4{font-size:1.6em}.katex .fontsize-ensurer.reset-size1.size5,.katex .sizing.reset-size1.size5{font-size:1.8em}.katex .fontsize-ensurer.reset-size1.size6,.katex .sizing.reset-size1.size6{font-size:2em}.katex .fontsize-ensurer.reset-size1.size7,.katex .sizing.reset-size1.size7{font-size:2.4em}.katex .fontsize-ensurer.reset-size1.size8,.katex .sizing.reset-size1.size8{font-size:2.88em}.katex .fontsize-ensurer.reset-size1.size9,.katex .sizing.reset-size1.size9{font-size:3.456em}.katex .fontsize-ensurer.reset-size1.size10,.katex .sizing.reset-size1.size10{font-size:4.148em}.katex .fontsize-ensurer.reset-size1.size11,.katex .sizing.reset-size1.size11{font-size:4.976em}.katex .fontsize-ensurer.reset-size2.size1,.katex .sizing.reset-size2.size1{font-size:.8333333333em}.katex .fontsize-ensurer.reset-size2.size2,.katex .sizing.reset-size2.size2{font-size:1em}.katex .fontsize-ensurer.reset-size2.size3,.katex .sizing.reset-size2.size3{font-size:1.1666666667em}.katex .fontsize-ensurer.reset-size2.size4,.katex .sizing.reset-size2.size4{font-size:1.3333333333em}.katex .fontsize-ensurer.reset-size2.size5,.katex .sizing.reset-size2.size5{font-size:1.5em}.katex .fontsize-ensurer.reset-size2.size6,.katex .sizing.reset-size2.size6{font-size:1.6666666667em}.katex .fontsize-ensurer.reset-size2.size7,.katex .sizing.reset-size2.size7{font-size:2em}.katex .fontsize-ensurer.reset-size2.size8,.katex .sizing.reset-size2.size8{font-size:2.4em}.katex .fontsize-ensurer.reset-size2.size9,.katex .sizing.reset-size2.size9{font-size:2.88em}.katex .fontsize-ensurer.reset-size2.size10,.katex .sizing.reset-size2.size10{font-size:3.4566666667em}.katex .fontsize-ensurer.reset-size2.size11,.katex .sizing.reset-size2.size11{font-size:4.1466666667em}.katex .fontsize-ensurer.reset-size3.size1,.katex .sizing.reset-size3.size1{font-size:.7142857143em}.katex .fontsize-ensurer.reset-size3.size2,.katex .sizing.reset-size3.size2{font-size:.8571428571em}.katex .fontsize-ensurer.reset-size3.size3,.katex .sizing.reset-size3.size3{font-size:1em}.katex .fontsize-ensurer.reset-size3.size4,.katex .sizing.reset-size3.size4{font-size:1.1428571429em}.katex .fontsize-ensurer.reset-size3.size5,.katex .sizing.reset-size3.size5{font-size:1.2857142857em}.katex .fontsize-ensurer.reset-size3.size6,.katex .sizing.reset-size3.size6{font-size:1.4285714286em}.katex .fontsize-ensurer.reset-size3.size7,.katex .sizing.reset-size3.size7{font-size:1.7142857143em}.katex .fontsize-ensurer.reset-size3.size8,.katex .sizing.reset-size3.size8{font-size:2.0571428571em}.katex .fontsize-ensurer.reset-size3.size9,.katex .sizing.reset-size3.size9{font-size:2.4685714286em}.katex .fontsize-ensurer.reset-size3.size10,.katex .sizing.reset-size3.size10{font-size:2.9628571429em}.katex .fontsize-ensurer.reset-size3.size11,.katex .sizing.reset-size3.size11{font-size:3.5542857143em}.katex .fontsize-ensurer.reset-size4.size1,.katex .sizing.reset-size4.size1{font-size:.625em}.katex .fontsize-ensurer.reset-size4.size2,.katex .sizing.reset-size4.size2{font-size:.75em}.katex .fontsize-ensurer.reset-size4.size3,.katex .sizing.reset-size4.size3{font-size:.875em}.katex .fontsize-ensurer.reset-size4.size4,.katex .sizing.reset-size4.size4{font-size:1em}.katex .fontsize-ensurer.reset-size4.size5,.katex .sizing.reset-size4.size5{font-size:1.125em}.katex .fontsize-ensurer.reset-size4.size6,.katex .sizing.reset-size4.size6{font-size:1.25em}.katex .fontsize-ensurer.reset-size4.size7,.katex .sizing.reset-size4.size7{font-size:1.5em}.katex .fontsize-ensurer.reset-size4.size8,.katex .sizing.reset-size4.size8{font-size:1.8em}.katex .fontsize-ensurer.reset-size4.size9,.katex .sizing.reset-size4.size9{font-size:2.16em}.katex .fontsize-ensurer.reset-size4.size10,.katex .sizing.reset-size4.size10{font-size:2.5925em}.katex .fontsize-ensurer.reset-size4.size11,.katex .sizing.reset-size4.size11{font-size:3.11em}.katex .fontsize-ensurer.reset-size5.size1,.katex .sizing.reset-size5.size1{font-size:.5555555556em}.katex .fontsize-ensurer.reset-size5.size2,.katex .sizing.reset-size5.size2{font-size:.6666666667em}.katex .fontsize-ensurer.reset-size5.size3,.katex .sizing.reset-size5.size3{font-size:.7777777778em}.katex .fontsize-ensurer.reset-size5.size4,.katex .sizing.reset-size5.size4{font-size:.8888888889em}.katex .fontsize-ensurer.reset-size5.size5,.katex .sizing.reset-size5.size5{font-size:1em}.katex .fontsize-ensurer.reset-size5.size6,.katex .sizing.reset-size5.size6{font-size:1.1111111111em}.katex .fontsize-ensurer.reset-size5.size7,.katex .sizing.reset-size5.size7{font-size:1.3333333333em}.katex .fontsize-ensurer.reset-size5.size8,.katex .sizing.reset-size5.size8{font-size:1.6em}.katex .fontsize-ensurer.reset-size5.size9,.katex .sizing.reset-size5.size9{font-size:1.92em}.katex .fontsize-ensurer.reset-size5.size10,.katex .sizing.reset-size5.size10{font-size:2.3044444444em}.katex .fontsize-ensurer.reset-size5.size11,.katex .sizing.reset-size5.size11{font-size:2.7644444444em}.katex .fontsize-ensurer.reset-size6.size1,.katex .sizing.reset-size6.size1{font-size:.5em}.katex .fontsize-ensurer.reset-size6.size2,.katex .sizing.reset-size6.size2{font-size:.6em}.katex .fontsize-ensurer.reset-size6.size3,.katex .sizing.reset-size6.size3{font-size:.7em}.katex .fontsize-ensurer.reset-size6.size4,.katex .sizing.reset-size6.size4{font-size:.8em}.katex .fontsize-ensurer.reset-size6.size5,.katex .sizing.reset-size6.size5{font-size:.9em}.katex .fontsize-ensurer.reset-size6.size6,.katex .sizing.reset-size6.size6{font-size:1em}.katex .fontsize-ensurer.reset-size6.size7,.katex .sizing.reset-size6.size7{font-size:1.2em}.katex .fontsize-ensurer.reset-size6.size8,.katex .sizing.reset-size6.size8{font-size:1.44em}.katex .fontsize-ensurer.reset-size6.size9,.katex .sizing.reset-size6.size9{font-size:1.728em}.katex .fontsize-ensurer.reset-size6.size10,.katex .sizing.reset-size6.size10{font-size:2.074em}.katex .fontsize-ensurer.reset-size6.size11,.katex .sizing.reset-size6.size11{font-size:2.488em}.katex .fontsize-ensurer.reset-size7.size1,.katex .sizing.reset-size7.size1{font-size:.4166666667em}.katex .fontsize-ensurer.reset-size7.size2,.katex .sizing.reset-size7.size2{font-size:.5em}.katex .fontsize-ensurer.reset-size7.size3,.katex .sizing.reset-size7.size3{font-size:.5833333333em}.katex .fontsize-ensurer.reset-size7.size4,.katex .sizing.reset-size7.size4{font-size:.6666666667em}.katex .fontsize-ensurer.reset-size7.size5,.katex .sizing.reset-size7.size5{font-size:.75em}.katex .fontsize-ensurer.reset-size7.size6,.katex .sizing.reset-size7.size6{font-size:.8333333333em}.katex .fontsize-ensurer.reset-size7.size7,.katex .sizing.reset-size7.size7{font-size:1em}.katex .fontsize-ensurer.reset-size7.size8,.katex .sizing.reset-size7.size8{font-size:1.2em}.katex .fontsize-ensurer.reset-size7.size9,.katex .sizing.reset-size7.size9{font-size:1.44em}.katex .fontsize-ensurer.reset-size7.size10,.katex .sizing.reset-size7.size10{font-size:1.7283333333em}.katex .fontsize-ensurer.reset-size7.size11,.katex .sizing.reset-size7.size11{font-size:2.0733333333em}.katex .fontsize-ensurer.reset-size8.size1,.katex .sizing.reset-size8.size1{font-size:.3472222222em}.katex .fontsize-ensurer.reset-size8.size2,.katex .sizing.reset-size8.size2{font-size:.4166666667em}.katex .fontsize-ensurer.reset-size8.size3,.katex .sizing.reset-size8.size3{font-size:.4861111111em}.katex .fontsize-ensurer.reset-size8.size4,.katex .sizing.reset-size8.size4{font-size:.5555555556em}.katex .fontsize-ensurer.reset-size8.size5,.katex .sizing.reset-size8.size5{font-size:.625em}.katex .fontsize-ensurer.reset-size8.size6,.katex .sizing.reset-size8.size6{font-size:.6944444444em}.katex .fontsize-ensurer.reset-size8.size7,.katex .sizing.reset-size8.size7{font-size:.8333333333em}.katex .fontsize-ensurer.reset-size8.size8,.katex .sizing.reset-size8.size8{font-size:1em}.katex .fontsize-ensurer.reset-size8.size9,.katex .sizing.reset-size8.size9{font-size:1.2em}.katex .fontsize-ensurer.reset-size8.size10,.katex .sizing.reset-size8.size10{font-size:1.4402777778em}.katex .fontsize-ensurer.reset-size8.size11,.katex .sizing.reset-size8.size11{font-size:1.7277777778em}.katex .fontsize-ensurer.reset-size9.size1,.katex .sizing.reset-size9.size1{font-size:.2893518519em}.katex .fontsize-ensurer.reset-size9.size2,.katex .sizing.reset-size9.size2{font-size:.3472222222em}.katex .fontsize-ensurer.reset-size9.size3,.katex .sizing.reset-size9.size3{font-size:.4050925926em}.katex .fontsize-ensurer.reset-size9.size4,.katex .sizing.reset-size9.size4{font-size:.462962963em}.katex .fontsize-ensurer.reset-size9.size5,.katex .sizing.reset-size9.size5{font-size:.5208333333em}.katex .fontsize-ensurer.reset-size9.size6,.katex .sizing.reset-size9.size6{font-size:.5787037037em}.katex .fontsize-ensurer.reset-size9.size7,.katex .sizing.reset-size9.size7{font-size:.6944444444em}.katex .fontsize-ensurer.reset-size9.size8,.katex .sizing.reset-size9.size8{font-size:.8333333333em}.katex .fontsize-ensurer.reset-size9.size9,.katex .sizing.reset-size9.size9{font-size:1em}.katex .fontsize-ensurer.reset-size9.size10,.katex .sizing.reset-size9.size10{font-size:1.2002314815em}.katex .fontsize-ensurer.reset-size9.size11,.katex .sizing.reset-size9.size11{font-size:1.4398148148em}.katex .fontsize-ensurer.reset-size10.size1,.katex .sizing.reset-size10.size1{font-size:.2410800386em}.katex .fontsize-ensurer.reset-size10.size2,.katex .sizing.reset-size10.size2{font-size:.2892960463em}.katex .fontsize-ensurer.reset-size10.size3,.katex .sizing.reset-size10.size3{font-size:.337512054em}.katex .fontsize-ensurer.reset-size10.size4,.katex .sizing.reset-size10.size4{font-size:.3857280617em}.katex .fontsize-ensurer.reset-size10.size5,.katex .sizing.reset-size10.size5{font-size:.4339440694em}.katex .fontsize-ensurer.reset-size10.size6,.katex .sizing.reset-size10.size6{font-size:.4821600771em}.katex .fontsize-ensurer.reset-size10.size7,.katex .sizing.reset-size10.size7{font-size:.5785920926em}.katex .fontsize-ensurer.reset-size10.size8,.katex .sizing.reset-size10.size8{font-size:.6943105111em}.katex .fontsize-ensurer.reset-size10.size9,.katex .sizing.reset-size10.size9{font-size:.8331726133em}.katex .fontsize-ensurer.reset-size10.size10,.katex .sizing.reset-size10.size10{font-size:1em}.katex .fontsize-ensurer.reset-size10.size11,.katex .sizing.reset-size10.size11{font-size:1.1996142719em}.katex .fontsize-ensurer.reset-size11.size1,.katex .sizing.reset-size11.size1{font-size:.2009646302em}.katex .fontsize-ensurer.reset-size11.size2,.katex .sizing.reset-size11.size2{font-size:.2411575563em}.katex .fontsize-ensurer.reset-size11.size3,.katex .sizing.reset-size11.size3{font-size:.2813504823em}.katex .fontsize-ensurer.reset-size11.size4,.katex .sizing.reset-size11.size4{font-size:.3215434084em}.katex .fontsize-ensurer.reset-size11.size5,.katex .sizing.reset-size11.size5{font-size:.3617363344em}.katex .fontsize-ensurer.reset-size11.size6,.katex .sizing.reset-size11.size6{font-size:.4019292605em}.katex .fontsize-ensurer.reset-size11.size7,.katex .sizing.reset-size11.size7{font-size:.4823151125em}.katex .fontsize-ensurer.reset-size11.size8,.katex .sizing.reset-size11.size8{font-size:.578778135em}.katex .fontsize-ensurer.reset-size11.size9,.katex .sizing.reset-size11.size9{font-size:.6945337621em}.katex .fontsize-ensurer.reset-size11.size10,.katex .sizing.reset-size11.size10{font-size:.8336012862em}.katex .fontsize-ensurer.reset-size11.size11,.katex .sizing.reset-size11.size11{font-size:1em}.katex .delimsizing.size1{font-family:KaTeX_Size1}.katex .delimsizing.size2{font-family:KaTeX_Size2}.katex .delimsizing.size3{font-family:KaTeX_Size3}.katex .delimsizing.size4{font-family:KaTeX_Size4}.katex .delimsizing.mult .delim-size1>span{font-family:KaTeX_Size1}.katex .delimsizing.mult .delim-size4>span{font-family:KaTeX_Size4}.katex .nulldelimiter{display:inline-block;width:.12em}.katex .delimcenter,.katex .op-symbol{position:relative}.katex .op-symbol.small-op{font-family:KaTeX_Size1}.katex .op-symbol.large-op{font-family:KaTeX_Size2}.katex .accent>.vlist-t,.katex .op-limits>.vlist-t{text-align:center}.katex .accent .accent-body{position:relative}.katex .accent .accent-body:not(.accent-full){width:0}.katex .overlay{display:block}.katex .mtable .vertical-separator{display:inline-block;min-width:1px}.katex .mtable .arraycolsep{display:inline-block}.katex .mtable .col-align-c>.vlist-t{text-align:center}.katex .mtable .col-align-l>.vlist-t{text-align:left}.katex .mtable .col-align-r>.vlist-t{text-align:right}.katex .svg-align{text-align:left}.katex svg{fill:currentColor;stroke:currentColor;fill-rule:nonzero;fill-opacity:1;stroke-width:1;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;display:block;height:inherit;position:absolute;width:100%}.katex svg path{stroke:none}.katex img{border-style:none;max-height:none;max-width:none;min-height:0;min-width:0}.katex .stretchy{display:block;overflow:hidden;position:relative;width:100%}.katex .stretchy:after,.katex .stretchy:before{content:""}.katex .hide-tail{overflow:hidden;position:relative;width:100%}.katex .halfarrow-left{left:0;overflow:hidden;position:absolute;width:50.2%}.katex .halfarrow-right{overflow:hidden;position:absolute;right:0;width:50.2%}.katex .brace-left{left:0;overflow:hidden;position:absolute;width:25.1%}.katex .brace-center{left:25%;overflow:hidden;position:absolute;width:50%}.katex .brace-right{overflow:hidden;position:absolute;right:0;width:25.1%}.katex .x-arrow-pad{padding:0 .5em}.katex .cd-arrow-pad{padding:0 .55556em 0 .27778em}.katex .mover,.katex .munder,.katex .x-arrow{text-align:center}.katex .boxpad{padding:0 .3em}.katex .fbox,.katex .fcolorbox{border:.04em solid;box-sizing:border-box}.katex .cancel-pad{padding:0 .2em}.katex .cancel-lap{margin-left:-.2em;margin-right:-.2em}.katex .sout{border-bottom-style:solid;border-bottom-width:.08em}.katex .angl{border-right:.049em solid;border-top:.049em solid;box-sizing:border-box;margin-right:.03889em}.katex .anglpad{padding:0 .03889em}.katex .eqn-num:before{content:"(" counter(katexEqnNo) ")";counter-increment:katexEqnNo}.katex .mml-eqn-num:before{content:"(" counter(mmlEqnNo) ")";counter-increment:mmlEqnNo}.katex .mtr-glue{width:50%}.katex .cd-vert-arrow{display:inline-block;position:relative}.katex .cd-label-left{display:inline-block;position:absolute;right:calc(50% + .3em);text-align:left}.katex .cd-label-right{display:inline-block;left:calc(50% + .3em);position:absolute;text-align:right}.katex-display{display:block;margin:1em 0;text-align:center}.katex-display>.katex{display:block;text-align:center;white-space:nowrap}.katex-display>.katex>.katex-html{display:block;position:relative}.katex-display>.katex>.katex-html>.tag{position:absolute;right:0}.katex-display.leqno>.katex>.katex-html>.tag{left:0;right:auto}.katex-display.fleqn>.katex{padding-left:2em;text-align:left}body{counter-reset:katexEqnNo mmlEqnNo} pre code.hljs { display: block; overflow-x: auto; padding: 1em } code.hljs { padding: 3px 5px } /* Atom One Light by Daniel Gamage Original One Light Syntax theme from https://github.com/atom/one-light-syntax base: #fafafa mono-1: #383a42 mono-2: #686b77 mono-3: #a0a1a7 hue-1: #0184bb hue-2: #4078f2 hue-3: #a626a4 hue-4: #50a14f hue-5: #e45649 hue-5-2: #c91243 hue-6: #986801 hue-6-2: #c18401 */ .hljs { color: #383a42; background: #fafafa } .hljs-comment, .hljs-quote { color: #a0a1a7; font-style: italic } .hljs-doctag, .hljs-keyword, .hljs-formula { color: #a626a4 } .hljs-section, .hljs-name, .hljs-selector-tag, .hljs-deletion, .hljs-subst { color: #e45649 } .hljs-literal { color: #0184bb } .hljs-string, .hljs-regexp, .hljs-addition, .hljs-attribute, .hljs-meta .hljs-string { color: #50a14f } .hljs-attr, .hljs-variable, .hljs-template-variable, .hljs-type, .hljs-selector-class, .hljs-selector-attr, .hljs-selector-pseudo, .hljs-number { color: #986801 } .hljs-symbol, .hljs-bullet, .hljs-link, .hljs-meta, .hljs-selector-id, .hljs-title { color: #4078f2 } .hljs-built_in, .hljs-title.class_, .hljs-class .hljs-title { color: #c18401 } .hljs-emphasis { font-style: italic } .hljs-strong { font-weight: bold } .hljs-link { text-decoration: underline } .index-module__chatCodeCard___psARc{border-radius:.75rem;border:.5px solid var(--widget-line, rgba(0, 0, 0, .08));background-color:var(--background-bubble, #FFF);box-shadow:0 4px 12px #0000000a;padding:.75rem;max-width:17.5rem;min-width:10rem;height:2.75rem;width:fit-content;cursor:pointer;transform-origin:left top;box-sizing:border-box;overflow:hidden;display:flex;flex-direction:column;font-family:ui-monospace,SFMono-Regular,SF Mono,Menlo,Consolas,Liberation Mono,monospace!important}.index-module__chatCodeCard___psARc:hover{border-color:var(--text-text_disabled, rgba(0, 0, 0, .15));box-shadow:0 4px 24px #0000000f}.index-module__chatCodeCard___psARc:active,.index-module__chatCodeCard___psARc:focus,.index-module__chatCodeCard___psARc.index-module__selected___1WzVK{border-color:var(--text-text_tertiary, rgba(0, 0, 0, .4))}.index-module__chatCodeCard___psARc.index-module__animate___-EhiK{transition:max-width .3s ease-in-out,max-height .5s ease-in-out,width .3s ease-in-out,height .6s ease-in-out}:root[theme-mode=dark] .index-module__chatCodeCard___psARc{box-shadow:0 4px 12px #00000024}:root[theme-mode=dark] .index-module__chatCodeCard___psARc:hover{box-shadow:0 4px 24px #00000029}.index-module__chatCodeCardFull___BihTI{width:17.5rem!important;height:13.125rem!important}.index-module__chatCodeCardHeader___E3NqH{display:flex;line-height:1;align-items:center;justify-content:center;padding-left:.125rem}.index-module__chatCodeCardTxt___sX9Hm{flex:1;overflow:hidden;color:var(--text-text_primary, rgba(0, 0, 0, .9));text-overflow:ellipsis;font-family:PingFang SC;font-size:.8125rem;font-style:normal;font-weight:600;line-height:initial;padding-left:.375rem;padding-right:.75rem;white-space:nowrap}.index-module__chatCodeCardTxtFlash___Z1468{background-image:linear-gradient(90deg,var(--text-text_primary, rgba(0, 0, 0, .9)) 0%,var(--text-text_tertiary, rgba(0, 0, 0, .4)) 50%,var(--text-text_primary, rgba(0, 0, 0, .9)) 100%);background-size:200% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:index-module__a-deepthink-box-flash___4c3y- 1.2s linear infinite}@keyframes index-module__a-deepthink-box-flash___4c3y-{0%{background-position:200%}to{background-position:0}}.index-module__rightIcon___mmLro{color:var(--text-text_tertiary, rgba(0, 0, 0, .4))}.index-module__preCode___myq4d{font-size:.375rem;line-height:.625rem;height:100%;overflow:hidden;font-family:ui-monospace,SFMono-Regular,SF Mono,Menlo,Consolas,Liberation Mono,monospace!important}.index-module__preCode___myq4d *{font-family:ui-monospace,SFMono-Regular,SF Mono,Menlo,Consolas,Liberation Mono,monospace}pre code.hljs{display:block;overflow-x:auto;padding:1em}code.hljs{padding:3px 5px}.hljs{color:#383a42;background:#fafafa}.hljs-comment,.hljs-quote{color:#a0a1a7;font-style:italic}.hljs-doctag,.hljs-keyword,.hljs-formula{color:#a626a4}.hljs-section,.hljs-name,.hljs-selector-tag,.hljs-deletion,.hljs-subst{color:#e45649}.hljs-literal{color:#0184bb}.hljs-string,.hljs-regexp,.hljs-addition,.hljs-attribute,.hljs-meta .hljs-string{color:#50a14f}.hljs-attr,.hljs-variable,.hljs-template-variable,.hljs-type,.hljs-selector-class,.hljs-selector-attr,.hljs-selector-pseudo,.hljs-number{color:#986801}.hljs-symbol,.hljs-bullet,.hljs-link,.hljs-meta,.hljs-selector-id,.hljs-title{color:#4078f2}.hljs-built_in,.hljs-title.class_,.hljs-class .hljs-title{color:#c18401}.hljs-emphasis{font-style:italic}.hljs-strong{font-weight:700}.hljs-link{text-decoration:underline}.index-module__container___P2JeZ{position:relative;padding-left:1.005rem;padding-right:.38rem;padding-bottom:.25rem;margin-top:.75rem;overflow:hidden;white-space:pre;box-sizing:border-box}.index-module__container___P2JeZ:before{position:absolute;left:.38rem;top:0;height:calc(100% - .25rem);border-radius:1px;background:var(--widget-btn_hover_2, #F2F2F2);width:.125rem;content:" "}.hyc-common-markdown.hyc-common-markdown-style:has(.yb-ai-coding-card) span[data-gradient=true]{opacity:1!important} /*# sourceMappingURL=sourcemap/vendor.375a10e4c810e1d71cbe.css.map*/