:host, :host[theme-mode='light'] { --td-brand-color-1: #ecf2fe; --td-brand-color-2: #d4e3fc; --td-brand-color-3: #bbd3fb; --td-brand-color-4: #96bbf8; --td-brand-color-5: #699ef5; --td-brand-color-6: #4787f0; --td-brand-color-7: #266fe8; --td-brand-color-8: #0052d9; --td-brand-color-9: #0034b5; --td-brand-color-10: #001f97; --td-warning-color-1: #fef3e6; --td-warning-color-2: #f9e0c7; --td-warning-color-3: #f7c797; --td-warning-color-4: #f2995f; --td-warning-color-5: #ed7b2f; --td-warning-color-6: #d35a21; --td-warning-color-7: #ba431b; --td-warning-color-8: #9e3610; --td-warning-color-9: #842b0b; --td-warning-color-10: #5a1907; --td-error-color-1: #fdecee; --td-error-color-2: #f9d7d9; --td-error-color-3: #f8b9be; --td-error-color-4: #f78d94; --td-error-color-5: #f36d78; --td-error-color-6: #e34d59; --td-error-color-7: #c9353f; --td-error-color-8: #b11f26; --td-error-color-9: #951114; --td-error-color-10: #680506; --td-success-color-1: #e8f8f2; --td-success-color-2: #bcebdc; --td-success-color-3: #85dbbe; --td-success-color-4: #48c79c; --td-success-color-5: #00a870; --td-success-color-6: #078d5c; --td-success-color-7: #067945; --td-success-color-8: #056334; --td-success-color-9: #044f2a; --td-success-color-10: #033017; --td-gray-color-1: #f3f3f3; --td-gray-color-2: #eee; --td-gray-color-3: #e7e7e7; --td-gray-color-4: #dcdcdc; --td-gray-color-5: #c5c5c5; --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: #383838; --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-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-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-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-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-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-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-8); --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, 8%), 0 2px 4px -1px rgba(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, 6%), 0 5px 5px -3px rgba(0, 0, 0, 10%); --td-shadow-3: 0 6px 30px 5px rgba(0, 0, 0, 0.05), 0 16px 24px 2px rgba(0, 0, 0, 4%), 0 8px 10px -5px rgba(0, 0, 0, 8%); --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; } :host[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: #e7e7e7; --td-gray-color-4: #dcdcdc; --td-gray-color-5: #c5c5c5; --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: #383838; --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-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-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-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-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-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, 8%), 0 2px 4px rgba(0, 0, 0, 12%); --td-shadow-2: 0 8px 10px rgba(0, 0, 0, 0.12), 0 3px 14px rgba(0, 0, 0, 10%), 0 5px 5px rgba(0, 0, 0, 16%); --td-shadow-3: 0 16px 24px rgba(0, 0, 0, 0.14), 0 6px 30px rgba(0, 0, 0, 12%), 0 8px 10px rgba(0, 0, 0, 20%); --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; } :host { --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%; } :host { --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); } .transmart-crx-btn { -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; cursor: default; font-size: 11px; font-weight: bold; text-align: center; white-space: nowrap; margin-right: 16px; height: 27px; line-height: 27px; min-width: 54px; outline: 0px; padding: 0 8px; } .transmart-ctx-select { width: 170px; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; background-color: #f5f5f5; background-image: -webkit-linear-gradient(top, #f5f5f5, #f1f1f1); background-image: -moz-linear-gradient(top, #f5f5f5, #f1f1f1); background-image: -ms-linear-gradient(top, #f5f5f5, #f1f1f1); background-image: -o-linear-gradient(top, #f5f5f5, #f1f1f1); background-image: linear-gradient(top, #f5f5f5, #f1f1f1); color: #444; border: 1px solid #dcdcdc; border: 1px solid rgba(0, 0, 0, 0.1); } .transmart-ctx-select:focus { border: 1px solid #4d90fe; outline: none; } .transmart-ctx-select:active { -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1); -moz-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1); box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1); background: #f8f8f8; color: #333; } .transmart-ctx-select:focus-visible { outline-offset: 0px; } .transmart-crx-checkbox { display: flex; align-items: center; font-size: 13px; cursor: pointer; user-select: none; } .transmart-crx-checkbox input { width: 16px; height: 16px; margin-right: 4px; } .transmart-crx-option-picker { display: table-cell; font-size: 13px; } .transmart-crx-option-picker .transmart-crx-option-title { margin: 10px 0; } .transmart-crx-option-picker .transmart-crx-option-radio-button { user-select: none; outline: none; padding: 5px 7px; position: relative; display: block; margin-left: -7px; margin-top: 6px; } .transmart-crx-option-picker .transmart-crx-option-radio-button:hover .transmart-crx-option-radio { -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.1); -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.1); box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.1); border-color: #b6b6b6; } .transmart-crx-option-picker .transmart-crx-option-radio-button-checked .transmart-crx-option-radio::after { -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; background: #606060; border: 2px solid #606060; box-sizing: border-box; content: ''; display: block; height: 7px; left: 3px; position: relative; top: 3px; width: 7px; } .transmart-crx-option-picker .transmart-crx-option-radio-button .transmart-crx-option-radio { -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABUAAAAVCAYAAACpF6WWAAAAIGNIUk0AAG2YAABzjgAA+3UAAITUAAB6swAA/2cAADBbAAAQhVDPV6EAAAC7SURBVDjL5ZS9DoMgFEZPxEU7yIYJMyYt+v6PZ5fPxnQArnFp+iUMwM3J/Wffd+4+/Cb0Sz0wAwuQgQ1YgQQE/X/UAp0EisAIOL073SPwkl0T1ANPYKCsUXZTDdrLgxrw0CD7vgSdFZpFEQglaFJYFj2AVILmU1Fa1QG5BF25pq3maWcEupqnSTmy5nQpQcPF6s8tfTre2afHiFomyrfOvpcHUTlzp/Y5z763LJQjFUHFy2o3+5b6v83/BisCjaXyoAL6AAAAAElFTkSuQmCC) -3px -3px; background: rgba(255, 255, 255, 0); border: 1px solid #c6c6c6; height: 15px; left: 7px; margin: 0; outline: none; position: absolute; text-align: left; top: 6px; width: 15px; } .transmart-crx-option-picker .transmart-crx-option-radio-button .transmart-crx-option-label { display: block; cursor: default; margin-left: 22px; line-height: 16px; } .transmart-crx-option-picker .transmart-crx-option-radio-button .transmart-crx-option-tip { display: inline-block; margin-top: 8px; margin-left: 23px; line-height: 15px; color: #777; font-size: 11px; } :host { --td-screen-xs: 320px; --td-screen-sm: 768px; --td-screen-md: 992px; --td-screen-lg: 1200px; --td-screen-xl: 1400px; --td-screen-xxl: 1880px; } .trans-ctx--narrow-scrollbar::-webkit-scrollbar { width: 8px; height: 8px; background: transparent; } .trans-ctx--narrow-scrollbar::-webkit-scrollbar-thumb { border-radius: var(--td-radius-medium); border: 2px solid transparent; background-clip: content-box; background-color: var(--td-scrollbar-color); } .trans-ctx--t-fake-arrow path { -webkit-transition: d 0.2s; transition: d 0.2s; stroke: currentcolor; } .trans-ctx--t-fake-arrow--active path { d: path('M3.75 10.2002L7.99274 5.7998L12.2361 10.0425'); } .t-portal-wrapper .t-popup { z-index: 9999999999; } @font-face { font-family: 'TencentSans'; src: url(../../static/fonts/TencentSans.woff2) format('woff'); font-weight: normal; font-style: normal; } .trans-ctx--banner-translate { box-sizing: border-box; height: 100%; display: flex; flex-direction: column; justify-content: space-between; align-items: center; font: 18px TencentSans; color: #0052d9; padding: 11px 5px; } .trans-ctx--banner-translate .trans-ctx--icon-title, .trans-ctx--banner-translate .trans-ctx--icon-loading.t-loading { width: 24px; height: 24px; margin-bottom: 2px; } .trans-ctx--banner-translate .trans-ctx--flag-lang, .trans-ctx--banner-translate .trans-ctx--flag-show { display: inline-block; width: 30px; text-align: center; } .trans-ctx--action-page-translate { position: fixed; top: 100px; right: 0; padding: 0; height: 110px; background-color: #fff; border: 1px solid #d9d9d9; border-top-left-radius: 8px; border-bottom-left-radius: 8px; z-index: 999999; transition: all 0.3s linear; box-shadow: rgba(0, 0, 0, 0.05) 0px 3px 14px 2px; } .trans-ctx--action-page-translate:hover .trans-ctx--banner-translate, .trans-ctx--action-page-translate:focus .trans-ctx--banner-translate, .trans-ctx--action-page-translate.trans-ctx--focused .trans-ctx--banner-translate { display: none; } .trans-ctx--action-page-translate:hover .trans-ctx--panel-page-translate, .trans-ctx--action-page-translate:focus .trans-ctx--panel-page-translate, .trans-ctx--action-page-translate.trans-ctx--focused .trans-ctx--panel-page-translate { display: block; } .trans-ctx--action-page-translate .trans-ctx--container-icon { display: flex; align-items: center; justify-content: center; width: 24px; height: 24px; cursor: pointer; } .trans-ctx--action-page-translate .trans-ctx--icon-loading, .trans-ctx--action-page-translate .trans-ctx--icon-translate { width: 100%; height: 100%; } .trans-ctx--action-page-translate .trans-ctx--icon-loading .t-icon-loading, .trans-ctx--action-page-translate .trans-ctx--icon-translate .t-icon-loading { width: 100%; height: 100%; } .trans-ctx--action-page-translate .trans-ctx--icon-translate { opacity: 0.65; background-color: #0052d9; transition: opacity 0.3s; } .trans-ctx--action-page-translate .trans-ctx--icon-translate:hover { opacity: 1; } .trans-ctx--action-page-translate .trans-ctx--text-translate { margin-left: 10px; color: #fff; } .trans-ctx--panel-page-translate { display: none; position: relative; border-radius: 6px; box-sizing: border-box; transition: all 0.3s; padding: 21px 24px; } .trans-ctx--panel-page-translate .trans-ctx--container-icon-close { position: absolute; top: 8px; right: 8px; display: flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 3px; cursor: pointer; } .trans-ctx--panel-page-translate .trans-ctx--container-icon-close:hover { background-color: #f3f3f3; } .trans-ctx--panel-page-translate .trans-ctx--icon-close { font-size: 20px; color: rgba(0, 0, 0, 0.6); } .trans-ctx--panel-page-translate .trans-ctx--translator { display: flex; align-items: center; margin-bottom: 15px; } .trans-ctx--panel-page-translate .trans-ctx--lang-selector { width: 130px; margin-right: 10px; } .trans-ctx--btn-translate { min-width: 90px; } .trans-ctx--btn-reset-translate { width: 100%; } .trans-ctx--page-translate-options { display: flex; align-items: center; justify-content: space-between; } .trans-ctx--page-translate-options .trans-ctx--page-translate-options-left { display: flex; align-items: center; } .trans-ctx--page-translate-options .trans-ctx--btn-close-page-translate { margin-left: 30px; color: #5f6368; font-size: 12px; cursor: pointer; } .trans-ctx--radio-page-show-func.t-radio-group { width: 100%; margin: 4px 0; } .trans-ctx--radio-page-show-func.t-radio-group.t-size-m .t-radio-button { height: 30px; width: 33%; justify-content: center; } .trans-ctx--btn-feedback { margin-left: 6px; font-size: 12px; color: #5f6368; text-decoration: underline; cursor: pointer; } .trans-ctx--icon-setting { width: 18px; height: 18px; margin-left: 4px; cursor: pointer; } .trans-ctx--icon-setting > svg { width: 100%; height: 100%; } :root { --td-screen-xs: 320px; --td-screen-sm: 768px; --td-screen-md: 992px; --td-screen-lg: 1200px; --td-screen-xl: 1400px; --td-screen-xxl: 1880px; } .narrow-scrollbar::-webkit-scrollbar { width: 8px; height: 8px; background: transparent; } .narrow-scrollbar::-webkit-scrollbar-thumb { border-radius: var(--td-radius-medium); border: 2px solid transparent; background-clip: content-box; background-color: var(--td-scrollbar-color); } .t-fake-arrow path { -webkit-transition: d 0.2s; transition: d 0.2s; stroke: currentcolor; } .t-fake-arrow--active path { d: path("M3.75 10.2002L7.99274 5.7998L12.2361 10.0425"); } :root, :root[theme-mode="light"] { --td-brand-color-1: #ecf2fe; --td-brand-color-2: #d4e3fc; --td-brand-color-3: #bbd3fb; --td-brand-color-4: #96bbf8; --td-brand-color-5: #699ef5; --td-brand-color-6: #4787f0; --td-brand-color-7: #266fe8; --td-brand-color-8: #0052d9; --td-brand-color-9: #0034b5; --td-brand-color-10: #001f97; --td-warning-color-1: #fef3e6; --td-warning-color-2: #f9e0c7; --td-warning-color-3: #f7c797; --td-warning-color-4: #f2995f; --td-warning-color-5: #ed7b2f; --td-warning-color-6: #d35a21; --td-warning-color-7: #ba431b; --td-warning-color-8: #9e3610; --td-warning-color-9: #842b0b; --td-warning-color-10: #5a1907; --td-error-color-1: #fdecee; --td-error-color-2: #f9d7d9; --td-error-color-3: #f8b9be; --td-error-color-4: #f78d94; --td-error-color-5: #f36d78; --td-error-color-6: #e34d59; --td-error-color-7: #c9353f; --td-error-color-8: #b11f26; --td-error-color-9: #951114; --td-error-color-10: #680506; --td-success-color-1: #e8f8f2; --td-success-color-2: #bcebdc; --td-success-color-3: #85dbbe; --td-success-color-4: #48c79c; --td-success-color-5: #00a870; --td-success-color-6: #078d5c; --td-success-color-7: #067945; --td-success-color-8: #056334; --td-success-color-9: #044f2a; --td-success-color-10: #033017; --td-gray-color-1: #f3f3f3; --td-gray-color-2: #eee; --td-gray-color-3: #e7e7e7; --td-gray-color-4: #dcdcdc; --td-gray-color-5: #c5c5c5; --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: #383838; --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-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-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-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-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-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-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-8); --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, 8%), 0 2px 4px -1px rgba(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, 6%), 0 5px 5px -3px rgba(0, 0, 0, 10%); --td-shadow-3: 0 6px 30px 5px rgba(0, 0, 0, 0.05), 0 16px 24px 2px rgba(0, 0, 0, 4%), 0 8px 10px -5px rgba(0, 0, 0, 8%); --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; } :root[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: #e7e7e7; --td-gray-color-4: #dcdcdc; --td-gray-color-5: #c5c5c5; --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: #383838; --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-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-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-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-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-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, 8%), 0 2px 4px rgba(0, 0, 0, 12%); --td-shadow-2: 0 8px 10px rgba(0, 0, 0, 0.12), 0 3px 14px rgba(0, 0, 0, 10%), 0 5px 5px rgba(0, 0, 0, 16%); --td-shadow-3: 0 16px 24px rgba(0, 0, 0, 0.14), 0 6px 30px rgba(0, 0, 0, 12%), 0 8px 10px rgba(0, 0, 0, 20%); --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; } :root { --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%; } :root { --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); } @-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); } } .t-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); } } .t-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-font-size-headline-large); } .t-loading--lock { overflow: hidden; } .t-loading.t-size-s { font-size: var(--td-font-size-body-large); } .t-loading.t-size-l { font-size: 56px; } .t-loading__parent--relative { position: relative !important; } .t-loading__fullscreen { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 3500; } .t-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; } .t-loading__content { position: absolute; left: 48%; top: 20%; } .t-loading--inherit-color { color: inherit; } .t-loading__parent { position: relative; } .t-loading__overlay { background-color: var(--td-mask-disabled); } /** 仅用于作为包裹元素时 */ .t-loading--full { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .t-loading--hidden { visibility: hidden; } .t-loading--visible { visibility: visible; } .t-loading__text { width: auto; display: inline-block; vertical-align: middle; font: var(--td-font-body-medium); margin-left: 5px; } .t-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; } .t-loading__gradient-conic { width: 100%; height: 100%; background: conic-gradient(from 90deg at 50% 50%, #fff 0deg, currentcolor 360deg); border-radius: var(--td-radius-circle); /* stylelint-disable-next-line */ -webkit-mask: radial-gradient(transparent calc(50% - 0.5px), #fff 50%); /* stylelint-disable-next-line */ mask: radial-gradient(transparent calc(50% - 0.5px), #fff 50%); } .t-select-polyfill { border: 1px solid var(--td-border-level-2-color); border-radius: var(--td-radius-default); padding: 0 26px 0 4px; display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; } .t-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; position: relative; width: 100%; vertical-align: middle; line-height: 30px; background: var(--td-bg-color-specialcomponent); -webkit-transition: border-color 0.2s cubic-bezier(0.38, 0, 0.24, 1); transition: border-color 0.2s cubic-bezier(0.38, 0, 0.24, 1); -ms-flex-wrap: wrap; flex-wrap: wrap; } .t-select:hover:not(.t-is-disabled), .t-select :active:not(.t-is-disabled) { cursor: pointer; border-color: var(--td-brand-color); } .t-select:hover:not(.t-is-disabled) > .t-select__right-icon:not(.t-select__right-icon-clear), .t-select :active:not(.t-is-disabled) > .t-select__right-icon:not(.t-select__right-icon-clear) { color: var(--td-brand-color); opacity: 1; } .t-select.t-no-border { line-height: 32px; } .t-select .t-select__placeholder { margin-left: 8px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; } .t-select:not(.t-is-disabled) .t-select__placeholder { color: var(--td-text-color-placeholder); } .t-select .t-select__single { margin-left: 4px; display: block; color: var(--td-text-color-primary); white-space: nowrap; word-wrap: normal; overflow: hidden; text-overflow: ellipsis; } .t-select .t-select__right-icon { -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); } .t-select .t-select__right-icon-polyfill { position: absolute; height: 100%; margin: 0 8px; right: 0; top: 0; color: var(--td-text-color-placeholder); } .t-select .t-select__active-icon { color: var(--td-brand-color); } .t-select .t-select__right-icon.t-is-visible { -webkit-transform: scaleY(-1); transform: scaleY(-1); -webkit-transition: -webkit-transform 0.2s cubic-bezier(0.38, 0, 0.24, 1); transition: -webkit-transform 0.2s cubic-bezier(0.38, 0, 0.24, 1); transition: transform 0.2s cubic-bezier(0.38, 0, 0.24, 1); transition: transform 0.2s cubic-bezier(0.38, 0, 0.24, 1), -webkit-transform 0.2s cubic-bezier(0.38, 0, 0.24, 1); /* IE */ -webkit-filter: flipv; filter: flipv; } .t-select .t-select__left-icon { position: absolute; height: 100%; margin: 0 8px; left: 0; top: 0; color: var(--td-text-color-placeholder); -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); display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .t-select .t-input__wrap { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; } .t-select .t-tag + .t-input__wrap { margin-left: 4px; } .t-select .t-tag + .t-input__wrap .t-input__inner { width: 100%; } .t-select .t-select__input .t-input { height: auto; border: 0; padding: 0; } .t-select .t-select__input .t-input--focused { -webkit-box-shadow: none; box-shadow: none; border-color: transparent; } .t-select .t-select__input:focus, .t-select .t-select__input :hover { border: 0; } .t-select .t-select__input input { height: 30px; line-height: 30px; } .t-select .t-select__input .t-input.t-input--prefix > .t-input__prefix { font: var(--td-font-body-large); } .t-select .t-tag, .t-select + .t-tag { margin: 4px 4px 4px 0; } .t-select .t-tag { height: 22px; line-height: 20px; } .t-select.t-is-active:not(.t-is-disabled) { border-color: var(--td-brand-color); } .t-select.t-is-active:not(.t-is-disabled):not(.t-no-border) { -webkit-box-shadow: 0 0 0 2px var(--td-brand-color-focus); box-shadow: 0 0 0 2px var(--td-brand-color-focus); } .t-select.t-is-active:not(.t-is-disabled) .t-select__right-icon:not(.t-select__right-icon-clear) { color: var(--td-brand-color); opacity: 1; } .t-select.t-has-prefix { padding-left: 26px; } .t-select.t-no-border { border: 0; width: auto; -webkit-transition: background-color 0.2s linear; transition: background-color 0.2s linear; } .t-select.t-no-border:hover { background-color: var(--td-bg-color-container-hover); } .t-select.t-no-border:active { background-color: var(--td-bg-color-container-active); } .t-select.t-no-border > .t-select__single { margin-right: 8px; } .t-select.t-size-l { font: var(--td-font-body-large); } .t-select.t-size-l .t-select__input { line-height: 38px; height: 38px; } .t-select.t-size-l .t-select__input .t-input__inner { height: 38px; line-height: 38px; } .t-select.t-size-l .t-tag.t-size-l { height: 30px; line-height: 28px; } .t-select.t-size-s { font: var(--td-font-body-small); } .t-select.t-size-s .t-select__input { line-height: 22px; height: 22px; } .t-select.t-size-s .t-select__input .t-input__inner { height: 22px; line-height: 22px; } .t-select.t-size-s .t-tag.t-size-s { height: 18px; line-height: 16px; } .t-select.t-is-disabled { cursor: not-allowed; background-color: var(--td-bg-color-component-disabled); color: var(--td-text-color-disabled); border-color: var(--td-border-level-2-color); } .t-select.t-is-disabled > .t-select__right-icon { color: var(--td-text-color-disabled); } .t-select.t-is-disabled > .t-select__left-icon { color: var(--td-text-color-disabled); } .t-select.t-is-disabled > .t-select__single { color: var(--td-text-color-disabled); } .t-select__wrap { width: 100%; } .t-select__dropdown .t-popup__content { scrollbar-color: var(--td-scrollbar-color); scrollbar-width: thin; margin: 8px 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); } .t-select__dropdown .t-popup__content::-webkit-scrollbar { width: 8px; height: 8px; } .t-select__dropdown .t-popup__content::-webkit-scrollbar-thumb { border: 2px solid transparent; background-clip: content-box; background-color: var(--td-scrollbar-color); border-radius: 15px; } .t-select__dropdown .t-popup__content::-webkit-scrollbar-thumb:vertical:hover, .t-select__dropdown .t-popup__content::-webkit-scrollbar-thumb:horizontal:hover { background-color: var(--td-scrollbar-hover-color); } .t-select__dropdown-inner .t-select__list, .t-select__dropdown-inner .t-tree { padding: 6px; } .t-select__dropdown-inner--size-s .t-select__list, .t-select__dropdown-inner--size-s .t-tree { padding: 4px; } .t-select__dropdown-inner--size-l .t-select__list, .t-select__dropdown-inner--size-l .t-tree { padding: 8px; } .t-select__list { margin: 0; padding: 0; list-style: none; } .t-select__dropdown.t-popup { padding: 0; } .t-select__empty.t-size-s { line-height: 24px; } .t-select__empty { text-align: center; color: var(--td-text-color-disabled); line-height: 32px; padding: 0 8px; } .t-select__empty.t-size-l { line-height: 40px; } .t-select__loading-tips.t-size-s { line-height: 24px; } .t-select__loading-tips { text-align: center; line-height: 32px; color: var(--td-text-color-disabled); } .t-select__loading-tips.t-size-l { line-height: 40px; } .t-select-option-group + .t-select-option-group { padding-top: 7px; margin-top: 7px; } .t-select-option-group__divider + .t-select-option-group__divider { border-top: 1px var(--td-border-level-1-color) solid; } ul.t-select-option-group__header, .t-select-option-group__header { color: var(--td-text-color-placeholder); display: block; height: 28px; line-height: 20px; padding: 0px 8px; -webkit-box-sizing: border-box; box-sizing: border-box; white-space: nowrap; word-wrap: normal; overflow: hidden; text-overflow: ellipsis; } .t-select-option-group__header.t-size-l { height: 36px; padding: 7px 12px; } .t-select-option-group__header.t-size-s { height: 20px; padding: 0 8px; } .t-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: 28px; line-height: 20px; cursor: pointer; padding: 0px 8px; 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); } .t-select-option span { position: relative; white-space: nowrap; word-wrap: normal; overflow: hidden; text-overflow: ellipsis; } .t-select-option:not(.t-is-disabled):not(.t-is-selected):hover { background-color: var(--td-bg-color-container-hover); } .t-select-option:not(.t-is-disabled):not(.t-is-selected):hover .t-checkbox__label { color: inherit; } .t-select-option:not(.t-is-disabled):not(.t-is-selected):hover .t-checkbox__input { border-color: var(--td-brand-color); } .t-select-option .t-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; } .t-select-option .t-checkbox { width: 100%; } .t-select-option.t-is-disabled { cursor: not-allowed; color: var(--td-text-color-disabled); background: var(--td-bg-color-specialcomponent); } .t-select-option.t-is-disabled:hover, .t-select-option.t-is-disabled :active { background: var(--td-bg-color-specialcomponent); } .t-select-option.t-size-l { height: 36px; padding: 7px 12px; font: var(--td-font-body-large); } .t-select-option.t-size-m { line-height: 22px; } .t-select-option.t-size-s { height: 20px; padding: 0 8px; font: var(--td-font-body-small); } .t-select-option.t-is-selected { color: var(--td-brand-color); background-color: var(--td-brand-color-light); -webkit-transition: all 0.2s linear; transition: all 0.2s linear; } .t-select-option.t-is-selected .t-checkbox__label { color: var(--td-brand-color); } .t-select-option.t-is-selected:hover { background-color: var(--td-brand-color-light); } .t-select-option.t-select-option__hover:not(.t-is-disabled).t-select-option.t-select-option__hover:not(.t-is-selected) { background-color: var(--td-bg-color-container-hover); } .t-select-option.t-select-option__hover:not(.t-is-disabled).t-select-option.t-select-option__hover:not(.t-is-selected) .t-checkbox__input { border-color: var(--td-brand-color); } .t-select-option.t-select-option__hover .t-checkbox__label { color: inherit; } .t-select-option + .t-select-option { margin-top: 2px; } .t-select.t-select-input--borderless .t-select__right-icon { position: relative; margin: 0; } .t-select .t-fake-arrow { color: var(--td-text-color-placeholder); } .t-select .t-fake-arrow--active { color: var(--td-brand-color); } .content-placement-top .t-popup[data-popper-placement^="top"] .t-popup__content { margin-bottom: 8px; } .content-placement-top .t-popup[data-popper-placement^="top"] .t-popup__content--arrow { margin-bottom: 16px; } .content-placement-bottom .t-popup[data-popper-placement^="bottom"] .t-popup__content { margin-top: 8px; } .content-placement-bottom .t-popup[data-popper-placement^="bottom"] .t-popup__content--arrow { margin-top: 16px; } .content-placement-left .t-popup[data-popper-placement^="left"] .t-popup__content { margin-right: 8px; } .content-placement-left .t-popup[data-popper-placement^="left"] .t-popup__content--arrow { margin-right: 16px; } .content-placement-left .t-popup[data-popper-placement^="left"] .t-popup__content--text { max-width: 480px; } .content-placement-right .t-popup[data-popper-placement^="right"] .t-popup__content { margin-left: 8px; } .content-placement-right .t-popup[data-popper-placement^="right"] .t-popup__content--arrow { margin-left: 16px; } .content-placement-right .t-popup[data-popper-placement^="right"] .t-popup__content--text { max-width: 480px; } .t-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; } .t-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: 4px 8px; font-size: var(--td-font-size-body-medium); line-height: 22px; -webkit-box-sizing: border-box; box-sizing: border-box; word-break: break-all; } .t-popup__arrow { position: absolute; z-index: 1; width: 8px; height: 8px; } .t-popup__arrow::before { position: absolute; content: ""; width: 8px; height: 8px; -webkit-transform: rotate(45deg); transform: rotate(45deg); background: var(--td-bg-color-container); } .t-popup[data-popper-placement^="top"] .t-popup__content { margin-bottom: 8px; } .t-popup[data-popper-placement^="top"] .t-popup__content--arrow { margin-bottom: 16px; } .t-popup[data-popper-placement^="bottom"] .t-popup__content { margin-top: 8px; } .t-popup[data-popper-placement^="bottom"] .t-popup__content--arrow { margin-top: 16px; } .t-popup[data-popper-placement^="left"] .t-popup__content { margin-right: 8px; } .t-popup[data-popper-placement^="left"] .t-popup__content--arrow { margin-right: 16px; } .t-popup[data-popper-placement^="left"] .t-popup__content--text { max-width: 480px; } .t-popup[data-popper-placement^="right"] .t-popup__content { margin-left: 8px; } .t-popup[data-popper-placement^="right"] .t-popup__content--arrow { margin-left: 16px; } .t-popup[data-popper-placement^="right"] .t-popup__content--text { max-width: 480px; } .t-popup[data-popper-placement^="top"] .t-popup__arrow { bottom: calc(-8px / 2); } .t-popup[data-popper-placement^="top"] .t-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); } .t-popup[data-popper-placement="top-start"] .t-popup__arrow { left: 8px; } .t-popup[data-popper-placement="top"] .t-popup__arrow { left: 50%; margin-left: calc(-8px / 2); } .t-popup[data-popper-placement="top-end"] .t-popup__arrow { left: calc(100% - 8px * 2); } .t-popup[data-popper-placement^="bottom"] .t-popup__arrow { top: calc(-8px / 2); } .t-popup[data-popper-placement^="bottom"] .t-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); } .t-popup[data-popper-placement="bottom-start"] .t-popup__arrow { left: 8px; } .t-popup[data-popper-placement="bottom"] .t-popup__arrow { left: 50%; margin-left: calc(-8px / 2); } .t-popup[data-popper-placement="bottom-end"] .t-popup__arrow { left: calc(100% - 8px * 2); } .t-popup[data-popper-placement^="left"] .t-popup__arrow { right: calc(-8px / 2); } .t-popup[data-popper-placement^="left"] .t-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); } .t-popup[data-popper-placement="left-start"] .t-popup__arrow { top: 8px; } .t-popup[data-popper-placement="left"] .t-popup__arrow { top: 50%; margin-top: calc(-8px / 2); } .t-popup[data-popper-placement="left-end"] .t-popup__arrow { top: calc(100% - 8px * 2); } .t-popup[data-popper-placement^="right"] .t-popup__arrow { left: calc(-8px / 2); } .t-popup[data-popper-placement^="right"] .t-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); } .t-popup[data-popper-placement="right-start"] .t-popup__arrow { top: 8px; } .t-popup[data-popper-placement="right"] .t-popup__arrow { top: 50%; margin-top: calc(-8px / 2); } .t-popup[data-popper-placement="right-end"] .t-popup__arrow { top: calc(100% - 8px * 2); } .t-popup--animation-enter, .t-popup--animation-enter-from, .t-popup--animation-exiting, .t-popup--animation-leave-to { opacity: 0; visibility: hidden; } .t-popup--animation-enter-to, .t-popup--animation-entering, .t-popup--animation-leave-from, .t-popup--animation-leave { opacity: 1; visibility: visible; -webkit-transform: none; transform: none; } .t-popup--animation-enter-active { -webkit-transition: opacity 0.2s linear; transition: opacity 0.2s linear; } .t-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); } .t-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; } .t-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%); } } .t-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; } .t-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); } } .input-readonly.t-is-readonly { color: var(--td-text-color-primary); background-color: var(--td-bg-color-specialcomponent); } .input-readonly.t-is-readonly .t-input__inner { cursor: pointer; } .input-disabled.t-is-disabled { color: var(--td-text-color-disabled); background-color: var(--td-bg-color-component-disabled); } .input-disabled.t-is-disabled:hover { border-color: var(--td-border-level-2-color); } .input-disabled.t-is-disabled .t-input__inner { cursor: not-allowed; color: var(--td-text-color-disabled); } .input-disabled.t-is-disabled .t-input__inner::-webkit-input-placeholder { color: var(--td-text-color-disabled); } .input-disabled.t-is-disabled .t-input__inner::-moz-placeholder { color: var(--td-text-color-disabled); } .input-disabled.t-is-disabled .t-input__inner:-ms-input-placeholder { color: var(--td-text-color-disabled); } .input-disabled.t-is-disabled .t-input__inner::-ms-input-placeholder { color: var(--td-text-color-disabled); } .input-disabled.t-is-disabled .t-input__inner::placeholder { color: var(--td-text-color-disabled); } .input-disabled.t-is-disabled > .t-input__prefix .t-icon, .input-disabled.t-is-disabled > .t-input__suffix .t-icon { color: var(--td-text-color-disabled); } .t-input { margin: 0; padding: 0; list-style: none; position: relative; height: 32px; border-width: 1px; border-style: solid; border-radius: var(--td-radius-default); border-color: var(--td-border-level-2-color); padding: 0 8px; 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: 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-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; overflow: hidden; line-height: 32px; } .t-input:hover { border-color: var(--td-brand-color); } .t-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); } .t-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; } .t-input :focus-visible { outline: none; } .t-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; } .t-input__inner::-webkit-input-placeholder { color: var(--td-text-color-placeholder); } .t-input__inner::-moz-placeholder { color: var(--td-text-color-placeholder); } .t-input__inner:-ms-input-placeholder { color: var(--td-text-color-placeholder); } .t-input__inner::-ms-input-placeholder { color: var(--td-text-color-placeholder); } .t-input__inner::placeholder { color: var(--td-text-color-placeholder); } .t-input__inner:-moz-placeholder-shown { text-overflow: ellipsis; width: 100%; } .t-input__inner:-ms-input-placeholder { text-overflow: ellipsis; width: 100%; } .t-input__inner:placeholder-shown { text-overflow: ellipsis; width: 100%; } .t-input__inner[type="search"]::-webkit-search-decoration, .t-input__inner[type="search"]::-webkit-search-cancel-button, .t-input__inner[type="search"]::-webkit-search-results-button, .t-input__inner[type="search"]::-webkit-search-results-decoration { -webkit-appearance: none; appearance: none; } .t-input__extra { font: var(--td-font-body-small); color: var(--td-text-color-placeholder); } .t-input__status { position: absolute; right: -24px; top: 0; } .t-input.t-input--suffix > span.t-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; } .t-input.t-input--suffix:hover > span.t-input__clear { opacity: 1; visibility: visible; } .t-input.t-is-success { border-color: var(--td-success-color); } .t-input.t-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); } .t-input.t-is-success.t-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); } .t-input.t-is-success > .t-input__extra { color: var(--td-success-color); } .t-input.t-is-warning { border-color: var(--td-warning-color); } .t-input.t-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); } .t-input.t-is-warning.t-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); } .t-input.t-is-warning > .t-input__extra { color: var(--td-warning-color); } .t-input.t-is-error { border-color: var(--td-error-color); } .t-input.t-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); } .t-input.t-is-error.t-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); } .t-input.t-is-error > .t-input__extra { color: var(--td-error-color); } .t-input.t-is-readonly { color: var(--td-text-color-primary); background-color: var(--td-bg-color-specialcomponent); } .t-input.t-is-readonly .t-input__inner { cursor: pointer; } .t-input.t-is-disabled { color: var(--td-text-color-disabled); background-color: var(--td-bg-color-component-disabled); } .t-input.t-is-disabled:hover { border-color: var(--td-border-level-2-color); } .t-input.t-is-disabled .t-input__inner { cursor: not-allowed; color: var(--td-text-color-disabled); } .t-input.t-is-disabled .t-input__inner::-webkit-input-placeholder { color: var(--td-text-color-disabled); } .t-input.t-is-disabled .t-input__inner::-moz-placeholder { color: var(--td-text-color-disabled); } .t-input.t-is-disabled .t-input__inner:-ms-input-placeholder { color: var(--td-text-color-disabled); } .t-input.t-is-disabled .t-input__inner::-ms-input-placeholder { color: var(--td-text-color-disabled); } .t-input.t-is-disabled .t-input__inner::placeholder { color: var(--td-text-color-disabled); } .t-input.t-is-disabled > .t-input__prefix .t-icon, .t-input.t-is-disabled > .t-input__suffix .t-icon { color: var(--td-text-color-disabled); } .t-input.t-input--prefix > .t-input__prefix-icon { padding-right: 8px; } .t-input.t-input--prefix > .t-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; font-size: var(--td-font-size-body-medium); } .t-input.t-input--prefix > .t-input__prefix-icon { font-size: var(--td-font-size-body-large); } .t-input.t-input--suffix > .t-input__suffix-icon { padding-left: 8px; } .t-input.t-input--suffix > .t-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; font-size: var(--td-font-size-body-medium); } .t-input.t-input--suffix > .t-input__suffix-icon { font-size: var(--td-font-size-body-large); } .t-input .t-input__suffix-clear { cursor: pointer; } .t-input.t-size-l { height: 40px; font: var(--td-font-body-large); padding-top: 8px; padding-bottom: 8px; } .t-input.t-size-s { height: 24px; font: var(--td-font-body-small); padding-top: 2px; padding-bottom: 2px; } .t-input .t-input__prefix > .t-icon, .t-input .t-input__suffix > .t-icon { font-size: inherit; } .t-input .t-input__prefix > .t-icon { color: var(--td-text-color-placeholder); } .t-input .t-input__suffix > .t-icon { color: var(--td-text-color-placeholder); } .t-input.t-is-focused .t-input__prefix > .t-icon { color: var(--td-brand-color); } .t-input.t-is-focused .t-input__suffix > .t-icon-time, .t-input.t-is-focused .t-input__suffix .t-icon-calendar { color: var(--td-brand-color); } .t-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; } .t-input-group .t-input__wrap { border-radius: 0; } .t-input-group .t-input__wrap:first-child { border-radius: var(--td-radius-default) 0 0 var(--td-radius-default); } .t-input-group .t-input__wrap:last-child { border-radius: 0 var(--td-radius-default) var(--td-radius-default) 0; } .t-input-group .t-button, .t-input-group .t-select { border-radius: 0; } .t-input-group .t-button:not(:first-child), .t-input-group .t-select:not(:first-child) { margin-left: -1px; } .t-input-group .t-input__wrap:not(:first-child) .t-input { margin-left: -1px; } .t-input-group .t-input__wrap:first-child .t-input { border-radius: var(--td-radius-default) 0 0 var(--td-radius-default); } .t-input-group .t-input__wrap:last-child .t-input { border-radius: 0 var(--td-radius-default) var(--td-radius-default) 0; } .t-input-group .t-button:first-child, .t-input-group .t-select:first-child { border-radius: var(--td-radius-default) 0 0 var(--td-radius-default); } .t-input-group .t-button:last-child, .t-input-group .t-select:last-child { border-radius: 0 var(--td-radius-default) var(--td-radius-default) 0; } .t-input-group--separate .t-input__wrap + .t-input__wrap { margin-left: 8px; } .t-input-group--separate .t-button, .t-input-group--separate .t-select { border-radius: var(--td-radius-default); } .t-input-group--separate .t-button:first-child, .t-input-group--separate .t-select:first-child { border-radius: var(--td-radius-default) 0 0 var(--td-radius-default); } .t-input-group--separate .t-button:last-child, .t-input-group--separate .t-select:last-child { border-radius: 0 var(--td-radius-default) var(--td-radius-default) 0; } .t-input-group--separate .t-input__wrap .t-input { border-radius: var(--td-radius-default); } .t-input-group--separate .t-input__wrap .t-input:first-child { border-radius: var(--td-radius-default); } .t-input-group--separate .t-input__wrap .t-input:last-child { border-radius: var(--td-radius-default); } .t-input-group .t-input__inner, .t-input-group .t-button, .t-input-group .t-select { position: relative; z-index: 0; } .t-input-group .t-input__inner:hover, .t-input-group .t-button:hover, .t-input-group .t-select:hover, .t-input-group .t-input__inner:focus, .t-input-group .t-button:focus, .t-input-group .t-select:focus, .t-input-group .t-input__inner:active, .t-input-group .t-button:active, .t-input-group .t-select:active { z-index: 1; } .t-input__wrap { width: 100%; } .t-input__tips { height: auto; min-height: 20px; font: var(--td-font-body-small); position: absolute; } .t-input__tips--default { color: var(--td-text-color-placeholder); } .t-input__tips--success { color: var(--td-success-color); } .t-input__tips--warning { color: var(--td-warning-color); } .t-input__tips--error { color: var(--td-error-color); } .t-align-center > .t-input__inner { text-align: center; } .t-align-right > .t-input__inner { text-align: right; } .t-input__input-pre { position: absolute; visibility: hidden; white-space: pre; display: block; } .t-input--auto-width { width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; min-width: 60px; } .t-input__limit-number { font: var(--td-font-body-medium); color: var(--td-text-color-placeholder); background: var(--td-bg-color-specialcomponent); } .t-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 8px; height: 24px; 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; } .t-tag .t-icon { margin-right: 4px; width: 16px; height: 16px; -ms-flex-negative: 0; flex-shrink: 0; } .t-tag .t-tag__icon-close { margin-right: 0; margin-left: 8px; 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); } .t-tag ::-moz-selection { background: transparent; } .t-tag ::selection { background: transparent; } .t-tag--default { color: var(--td-text-color-primary); background-color: var(--td-bg-color-component); } .t-tag--default .t-tag__icon-close { color: var(--td-text-color-placeholder); } .t-tag--default .t-tag__icon-close:hover { color: var(--td-text-color-primary); } .t-tag--default.t-tag--checked { color: var(--td-text-color-anti); background-color: var(--td-brand-color); } .t-tag--default.t-tag--checked:hover { background-color: var(--td-brand-color-hover); } .t-tag--default:active { cursor: default; } .t-tag--default.t-tag--check { -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; } .t-tag--default.t-tag--check:hover:not(.t-tag--checked):not(.t-tag--disabled) { background-color: var(--td-bg-color-component-hover); } .t-tag--default.t-tag--disabled { color: var(--td-text-color-disabled); background-color: var(--td-bg-color-component-disabled); cursor: not-allowed; } .t-tag--default.t-tag--disabled:hover { color: var(--td-text-color-disabled); background-color: var(--td-bg-color-component-disabled); } .t-tag--default.t-tag--disabled .t-icon:hover { cursor: pointer; } .t-tag--default.t-tag--outline { border-color: var(--td-border-level-2-color); } .t-tag--default.t-tag--light { background-color: var(--td-gray-color-1); } .t-tag--default.t-tag--light-outline { border-color: var(--td-border-level-2-color); background-color: var(--td-gray-color-1); } .t-tag--primary { background-color: var(--td-brand-color); } .t-tag--primary.t-tag--outline { border-color: var(--td-brand-color); } .t-tag--primary.t-tag--light { background-color: var(--td-brand-color-light); } .t-tag--primary.t-tag--light-outline { border-color: var(--td-brand-color); background-color: var(--td-brand-color-light); } .t-tag--primary.t-tag--light, .t-tag--primary.t-tag--outline, .t-tag--primary.t-tag--light-outline { color: var(--td-brand-color); } .t-tag--primary.t-tag--light .t-tag__icon-close:hover, .t-tag--primary.t-tag--outline .t-tag__icon-close:hover, .t-tag--primary.t-tag--light-outline .t-tag__icon-close:hover { color: var(--td-brand-color-hover); } .t-tag--success { background-color: var(--td-success-color); } .t-tag--success.t-tag--outline { border-color: var(--td-success-color); } .t-tag--success.t-tag--light { background-color: var(--td-success-color-1); } .t-tag--success.t-tag--light-outline { border-color: var(--td-success-color); background-color: var(--td-success-color-1); } .t-tag--success.t-tag--light, .t-tag--success.t-tag--outline, .t-tag--success.t-tag--light-outline { color: var(--td-success-color); } .t-tag--success.t-tag--light .t-tag__icon-close:hover, .t-tag--success.t-tag--outline .t-tag__icon-close:hover, .t-tag--success.t-tag--light-outline .t-tag__icon-close:hover { color: var(--td-success-color-hover); } .t-tag--warning { background-color: var(--td-warning-color); } .t-tag--warning.t-tag--outline { border-color: var(--td-warning-color); } .t-tag--warning.t-tag--light { background-color: var(--td-warning-color-1); } .t-tag--warning.t-tag--light-outline { border-color: var(--td-warning-color); background-color: var(--td-warning-color-1); } .t-tag--warning.t-tag--light, .t-tag--warning.t-tag--outline, .t-tag--warning.t-tag--light-outline { color: var(--td-warning-color); } .t-tag--warning.t-tag--light .t-tag__icon-close:hover, .t-tag--warning.t-tag--outline .t-tag__icon-close:hover, .t-tag--warning.t-tag--light-outline .t-tag__icon-close:hover { color: var(--td-warning-color-hover); } .t-tag--danger { background-color: var(--td-error-color); } .t-tag--danger.t-tag--outline { border-color: var(--td-error-color); } .t-tag--danger.t-tag--light { background-color: var(--td-error-color-1); } .t-tag--danger.t-tag--light-outline { border-color: var(--td-error-color); background-color: var(--td-error-color-1); } .t-tag--danger .t-tag__icon-close { fill: var(--td-error-color); } .t-tag--danger .t-tag__icon-close:hover { fill: var(--td-error-color-hover); } .t-tag--danger.t-tag--light, .t-tag--danger.t-tag--outline, .t-tag--danger.t-tag--light-outline { color: var(--td-error-color); } .t-tag--danger.t-tag--light .t-tag__icon-close:hover, .t-tag--danger.t-tag--outline .t-tag__icon-close:hover, .t-tag--danger.t-tag--light-outline .t-tag__icon-close:hover { color: var(--td-error-color-hover); } .t-tag--dark.t-tag:not(.t-tag--default) .t-tag__icon-close { fill: var(--td-font-white-1); } .t-tag--dark.t-tag:not(.t-tag--default) .t-tag__icon-close:hover { fill: var(--td-font-white-2); } .t-tag.t-tag--outline { background: transparent; } .t-tag.t-size-s { padding: 0px 4px; height: 22px; font: var(--td-font-body-small); } .t-tag.t-size-s .t-icon { font-size: var(--td-font-body-small); } .t-tag.t-size-l { padding: 0px 12px; height: 32px; font: var(--td-font-body-medium); } .t-tag.t-size-l .t-icon { font: var(--td-font-body-medium); } .t-tag.t-tag--round { border-radius: var(--td-radius-extraLarge); } .t-tag.t-tag--mark { border-radius: 0 var(--td-radius-extraLarge) var(--td-radius-extraLarge) 0; } .t-tag.t-tag--ellipsis .t-tag--text { display: inline-block; white-space: nowrap; word-wrap: normal; overflow: hidden; text-overflow: ellipsis; } a .t-tag { cursor: pointer; -webkit-transition: all 0.2s linear; transition: all 0.2s linear; } a .t-tag:hover { color: var(--td-brand-color); background-color: var(--td-bg-color-component-hover); } a .t-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); } } .t-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); } } .t-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; } .t-tag-input .t-tag { margin-right: 4px; -webkit-animation: t-fade-in 0.1s ease-in-out; animation: t-fade-in 0.1s ease-in-out; } .t-tag-input .t-input { padding-left: 4px; overflow: hidden; } .t-tag-input .t-input.t-size-s { padding-left: 2px; } .t-tag-input:hover .t-input__inner, .t-tag-input .t-input--focused .t-input__inner { min-width: 20px; } .t-tag-input .t-tag-input__prefix, .t-tag-input .t-input__prefix:not(:empty) { margin-left: 4px; } .t-tag-input .t-input--auto-width { padding-right: 4px; } .t-tag-input__suffix-clear { cursor: pointer; } .t-tag-input--break-line .t-input { display: block; height: auto; padding-right: 24px; } .t-tag-input--break-line .t-input.t-input--prefix > .t-input__prefix { display: inline; text-align: left; } .t-tag-input--break-line .t-input .t-input__suffix-icon { position: absolute; right: 8px; bottom: 0; } .t-tag-input__prefix { width: -webkit-max-content; width: -moz-max-content; width: max-content; display: inline-block; margin-right: 8px; } .t-select-input, .t-select-input__wrap { 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; } /** 无边框模式 */ .t-select-input--borderless { /** 无边框模式的多选 */ } .t-select-input--borderless .t-input { border: 0; -webkit-box-shadow: none; box-shadow: none; -webkit-transition: background-color 0.2s linear; transition: background-color 0.2s linear; } .t-select-input--borderless .t-input:hover { background-color: var(--td-bg-color-container-hover); border-radius: var(--td-radius-default); } .t-select-input--borderless .t-input--focused { background-color: var(--td-bg-color-container-hover); } .t-select-input--borderless.t-select-input--multiple:not(.t-select-input--empty).t-select-input--popup-visible input { display: inline-block; } .t-select-input--borderless.t-select-input--multiple:not(.t-select-input--empty).t-select-input--popup-visible .t-input { background-color: var(--td-bg-color-container-hover); } .t-select-input--borderless.t-tag-input { border: 0; -webkit-box-shadow: none; box-shadow: none; -webkit-transition: background-color 0.2s linear; transition: background-color 0.2s linear; } .t-select-input--borderless.t-tag-input:hover { background-color: var(--td-bg-color-container-hover); border-radius: var(--td-radius-default); } @keyframes t-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } .t-icon { display: inline-block; vertical-align: middle; width: 1em; height: 1em; } .t-icon::before { font-family: unset; } .t-icon-loading { animation: t-spin 1s linear infinite; } .t-icon { fill: currentColor; } .t-icon.t-size-s, i.t-size-s { font-size: 14px; } .t-icon.t-size-m, i.t-size-m { font-size: 16px; } .t-icon.t-size-l, i.t-size-l { font-size: 18px; } .t-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; } .t-button .t-button__text, .t-button .t-icon { position: relative; z-index: 1; } .t-button .t-icon { font-size: var(--td-font-size-body-large); } .t-button .t-loading { font-size: var(--td-font-size-body-large); } .t-button .t-icon + .t-button__text:not(:empty) { margin-left: 8px; } .t-button .t-loading + .t-button__text:not(:empty) { margin-left: 8px; } .t-button .t-button__suffix:not(:empty) { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; margin-left: 8px; } .t-button--variant-base { color: var(--td-text-color-anti); height: 32px; font: var(--td-font-body-medium); padding-left: 15px; padding-right: 15px; background-color: var(--td-bg-color-component); border-color: var(--td-bg-color-component); color: var(--td-text-color-primary); } .t-button--variant-base .t-icon, .t-button--variant-base .t-loading { font-size: var(--td-font-size-body-large); } .t-button--variant-base:hover { background-color: var(--td-bg-color-component-hover); } .t-button--variant-base.t-is-loading { background-color: var(--td-bg-color-component); } .t-button--variant-base.t-is-disabled { background-color: var(--td-bg-color-component-disabled); } .t-button--variant-base:hover { border-color: var(--td-bg-color-component-hover); } .t-button--variant-base.t-is-loading { border-color: var(--td-bg-color-component); } .t-button--variant-base.t-is-disabled { border-color: var(--td-bg-color-component-disabled); } .t-button--variant-base:hover { color: var(--td-text-color-primary); } .t-button--variant-base.t-is-loading { color: var(--td-text-color-primary); } .t-button--variant-base.t-is-disabled { color: var(--td-text-color-disabled); } .t-button--variant-base.t-button--theme-primary { color: var(--td-text-color-anti); background-color: var(--td-brand-color); border-color: var(--td-brand-color); } .t-button--variant-base.t-button--theme-primary:hover { background-color: var(--td-brand-color-hover); } .t-button--variant-base.t-button--theme-primary.t-is-loading { background-color: var(--td-brand-color); } .t-button--variant-base.t-button--theme-primary.t-is-disabled { background-color: var(--td-brand-color-disabled); } .t-button--variant-base.t-button--theme-primary:hover { border-color: var(--td-brand-color-hover); } .t-button--variant-base.t-button--theme-primary.t-is-loading { border-color: var(--td-brand-color); } .t-button--variant-base.t-button--theme-primary.t-is-disabled { border-color: var(--td-brand-color-disabled); } .t-button--variant-base.t-button--theme-success { color: var(--td-text-color-anti); background-color: var(--td-success-color); border-color: var(--td-success-color); } .t-button--variant-base.t-button--theme-success:hover { background-color: var(--td-success-color-hover); } .t-button--variant-base.t-button--theme-success.t-is-loading { background-color: var(--td-success-color); } .t-button--variant-base.t-button--theme-success.t-is-disabled { background-color: var(--td-success-color-disabled); } .t-button--variant-base.t-button--theme-success:hover { border-color: var(--td-success-color-hover); } .t-button--variant-base.t-button--theme-success.t-is-loading { border-color: var(--td-success-color); } .t-button--variant-base.t-button--theme-success.t-is-disabled { border-color: var(--td-success-color-disabled); } .t-button--variant-base.t-button--theme-warning { color: var(--td-text-color-anti); background-color: var(--td-warning-color); border-color: var(--td-warning-color); } .t-button--variant-base.t-button--theme-warning:hover { background-color: var(--td-warning-color-hover); } .t-button--variant-base.t-button--theme-warning.t-is-loading { background-color: var(--td-warning-color); } .t-button--variant-base.t-button--theme-warning.t-is-disabled { background-color: var(--td-warning-color-disabled); } .t-button--variant-base.t-button--theme-warning:hover { border-color: var(--td-warning-color-hover); } .t-button--variant-base.t-button--theme-warning.t-is-loading { border-color: var(--td-warning-color); } .t-button--variant-base.t-button--theme-warning.t-is-disabled { border-color: var(--td-warning-color-disabled); } .t-button--variant-base.t-button--theme-danger { color: var(--td-text-color-anti); background-color: var(--td-error-color); border-color: var(--td-error-color); } .t-button--variant-base.t-button--theme-danger:hover { background-color: var(--td-error-color-hover); } .t-button--variant-base.t-button--theme-danger.t-is-loading { background-color: var(--td-error-color); } .t-button--variant-base.t-button--theme-danger.t-is-disabled { background-color: var(--td-error-color-disabled); } .t-button--variant-base.t-button--theme-danger:hover { border-color: var(--td-error-color-hover); } .t-button--variant-base.t-button--theme-danger.t-is-loading { border-color: var(--td-error-color); } .t-button--variant-base.t-button--theme-danger.t-is-disabled { border-color: var(--td-error-color-disabled); } .t-button--variant-base.t-button--ghost { background-color: transparent; color: var(--td-text-color-anti); border-color: var(--td-text-color-anti); } .t-button--variant-base.t-button--ghost:hover { background-color: transparent; } .t-button--variant-base.t-button--ghost:active { background-color: transparent; } .t-button--variant-base.t-button--ghost.t-is-loading { background-color: transparent; } .t-button--variant-base.t-button--ghost.t-is-disabled { background-color: rgba(255, 255, 255, 0.22); background-color: transparent; } .t-button--variant-base.t-button--ghost:hover { color: var(--td-brand-color-hover); } .t-button--variant-base.t-button--ghost:active { color: var(--td-brand-color-active); } .t-button--variant-base.t-button--ghost.t-is-loading { color: var(--td-text-color-anti); } .t-button--variant-base.t-button--ghost.t-is-disabled { color: rgba(255, 255, 255, 0.22); background-color: transparent; } .t-button--variant-base.t-button--ghost:hover { border-color: var(--td-brand-color-hover); } .t-button--variant-base.t-button--ghost:active { border-color: var(--td-brand-color-active); } .t-button--variant-base.t-button--ghost.t-is-loading { border-color: var(--td-text-color-anti); } .t-button--variant-base.t-button--ghost.t-is-disabled { border-color: rgba(255, 255, 255, 0.22); background-color: transparent; } .t-button--variant-base.t-button--ghost.t-button--theme-primary { color: var(--td-brand-color); border-color: var(--td-brand-color); } .t-button--variant-base.t-button--ghost.t-button--theme-primary:hover { color: var(--td-brand-color-hover); } .t-button--variant-base.t-button--ghost.t-button--theme-primary:active { color: var(--td-brand-color-active); } .t-button--variant-base.t-button--ghost.t-button--theme-primary.t-is-loading { color: var(--td-brand-color); } .t-button--variant-base.t-button--ghost.t-button--theme-primary.t-is-disabled { color: rgba(255, 255, 255, 0.22); background-color: transparent; } .t-button--variant-base.t-button--ghost.t-button--theme-primary:hover { border-color: var(--td-brand-color-hover); } .t-button--variant-base.t-button--ghost.t-button--theme-primary:active { border-color: var(--td-brand-color-active); } .t-button--variant-base.t-button--ghost.t-button--theme-primary.t-is-loading { border-color: var(--td-brand-color); } .t-button--variant-base.t-button--ghost.t-button--theme-primary.t-is-disabled { border-color: rgba(255, 255, 255, 0.22); background-color: transparent; } .t-button--variant-base.t-button--ghost.t-button--theme-success { color: var(--td-success-color); border-color: var(--td-success-color); } .t-button--variant-base.t-button--ghost.t-button--theme-success:hover { color: var(--td-success-color-hover); } .t-button--variant-base.t-button--ghost.t-button--theme-success:active { color: var(--td-success-color-active); } .t-button--variant-base.t-button--ghost.t-button--theme-success.t-is-loading { color: var(--td-success-color); } .t-button--variant-base.t-button--ghost.t-button--theme-success.t-is-disabled { color: rgba(255, 255, 255, 0.22); background-color: transparent; } .t-button--variant-base.t-button--ghost.t-button--theme-success:hover { border-color: var(--td-success-color-hover); } .t-button--variant-base.t-button--ghost.t-button--theme-success:active { border-color: var(--td-success-color-active); } .t-button--variant-base.t-button--ghost.t-button--theme-success.t-is-loading { border-color: var(--td-success-color); } .t-button--variant-base.t-button--ghost.t-button--theme-success.t-is-disabled { border-color: rgba(255, 255, 255, 0.22); background-color: transparent; } .t-button--variant-base.t-button--ghost.t-button--theme-warning { color: var(--td-warning-color); border-color: var(--td-warning-color); } .t-button--variant-base.t-button--ghost.t-button--theme-warning:hover { color: var(--td-warning-color-hover); } .t-button--variant-base.t-button--ghost.t-button--theme-warning:active { color: var(--td-warning-color-active); } .t-button--variant-base.t-button--ghost.t-button--theme-warning.t-is-loading { color: var(--td-warning-color); } .t-button--variant-base.t-button--ghost.t-button--theme-warning.t-is-disabled { color: rgba(255, 255, 255, 0.22); background-color: transparent; } .t-button--variant-base.t-button--ghost.t-button--theme-warning:hover { border-color: var(--td-warning-color-hover); } .t-button--variant-base.t-button--ghost.t-button--theme-warning:active { border-color: var(--td-warning-color-active); } .t-button--variant-base.t-button--ghost.t-button--theme-warning.t-is-loading { border-color: var(--td-warning-color); } .t-button--variant-base.t-button--ghost.t-button--theme-warning.t-is-disabled { border-color: rgba(255, 255, 255, 0.22); background-color: transparent; } .t-button--variant-base.t-button--ghost.t-button--theme-danger { color: var(--td-error-color); border-color: var(--td-error-color); } .t-button--variant-base.t-button--ghost.t-button--theme-danger:hover { color: var(--td-error-color-hover); } .t-button--variant-base.t-button--ghost.t-button--theme-danger:active { color: var(--td-error-color-active); } .t-button--variant-base.t-button--ghost.t-button--theme-danger.t-is-loading { color: var(--td-error-color); } .t-button--variant-base.t-button--ghost.t-button--theme-danger.t-is-disabled { color: rgba(255, 255, 255, 0.22); background-color: transparent; } .t-button--variant-base.t-button--ghost.t-button--theme-danger:hover { border-color: var(--td-error-color-hover); } .t-button--variant-base.t-button--ghost.t-button--theme-danger:active { border-color: var(--td-error-color-active); } .t-button--variant-base.t-button--ghost.t-button--theme-danger.t-is-loading { border-color: var(--td-error-color); } .t-button--variant-base.t-button--ghost.t-button--theme-danger.t-is-disabled { border-color: rgba(255, 255, 255, 0.22); background-color: transparent; } .t-button--variant-outline { height: 32px; font: var(--td-font-body-medium); padding-left: 15px; padding-right: 15px; color: var(--td-text-color-primary); background-color: var(--td-bg-color-specialcomponent); border-color: var(--td-border-level-2-color); } .t-button--variant-outline .t-icon, .t-button--variant-outline .t-loading { font-size: var(--td-font-size-body-large); } .t-button--variant-outline:hover { color: var(--td-brand-color-hover); } .t-button--variant-outline.t-is-loading { color: var(--td-text-color-primary); } .t-button--variant-outline.t-is-disabled { color: var(--td-text-color-disabled); } .t-button--variant-outline:hover { background-color: var(--td-bg-color-specialcomponent); } .t-button--variant-outline.t-is-loading { background-color: var(--td-bg-color-specialcomponent); } .t-button--variant-outline.t-is-disabled { background-color: var(--td-bg-color-component-disabled); } .t-button--variant-outline:hover { border-color: var(--td-brand-color-hover); } .t-button--variant-outline.t-is-loading { border-color: var(--td-border-level-2-color); } .t-button--variant-outline.t-is-disabled { border-color: var(--td-border-level-2-color); } .t-button--variant-outline.t-button--theme-primary { color: var(--td-brand-color); border-color: var(--td-brand-color); } .t-button--variant-outline.t-button--theme-primary:hover { color: var(--td-brand-color-hover); } .t-button--variant-outline.t-button--theme-primary.t-is-loading { color: var(--td-brand-color); } .t-button--variant-outline.t-button--theme-primary.t-is-disabled { color: var(--td-brand-color-disabled); } .t-button--variant-outline.t-button--theme-primary:hover { border-color: var(--td-brand-color-hover); } .t-button--variant-outline.t-button--theme-primary.t-is-loading { border-color: var(--td-brand-color); } .t-button--variant-outline.t-button--theme-primary.t-is-disabled { border-color: var(--td-brand-color-disabled); } .t-button--variant-outline.t-button--theme-success { color: var(--td-success-color); border-color: var(--td-success-color); } .t-button--variant-outline.t-button--theme-success:hover { color: var(--td-success-color-hover); } .t-button--variant-outline.t-button--theme-success.t-is-loading { color: var(--td-success-color); } .t-button--variant-outline.t-button--theme-success.t-is-disabled { color: var(--td-success-color-disabled); } .t-button--variant-outline.t-button--theme-success:hover { border-color: var(--td-success-color-hover); } .t-button--variant-outline.t-button--theme-success.t-is-loading { border-color: var(--td-success-color); } .t-button--variant-outline.t-button--theme-success.t-is-disabled { border-color: var(--td-success-color-disabled); } .t-button--variant-outline.t-button--theme-warning { color: var(--td-warning-color); border-color: var(--td-warning-color); } .t-button--variant-outline.t-button--theme-warning:hover { color: var(--td-warning-color-hover); } .t-button--variant-outline.t-button--theme-warning.t-is-loading { color: var(--td-warning-color); } .t-button--variant-outline.t-button--theme-warning.t-is-disabled { color: var(--td-warning-color-disabled); } .t-button--variant-outline.t-button--theme-warning:hover { border-color: var(--td-warning-color-hover); } .t-button--variant-outline.t-button--theme-warning.t-is-loading { border-color: var(--td-warning-color); } .t-button--variant-outline.t-button--theme-warning.t-is-disabled { border-color: var(--td-warning-color-disabled); } .t-button--variant-outline.t-button--theme-danger { color: var(--td-error-color); border-color: var(--td-error-color); } .t-button--variant-outline.t-button--theme-danger:hover { color: var(--td-error-color-hover); } .t-button--variant-outline.t-button--theme-danger.t-is-loading { color: var(--td-error-color); } .t-button--variant-outline.t-button--theme-danger.t-is-disabled { color: var(--td-error-color-disabled); } .t-button--variant-outline.t-button--theme-danger:hover { border-color: var(--td-error-color-hover); } .t-button--variant-outline.t-button--theme-danger.t-is-loading { border-color: var(--td-error-color); } .t-button--variant-outline.t-button--theme-danger.t-is-disabled { border-color: var(--td-error-color-disabled); } .t-button--variant-outline.t-button--ghost { background-color: transparent; color: var(--td-text-color-anti); border-color: var(--td-text-color-anti); } .t-button--variant-outline.t-button--ghost:hover { background-color: transparent; } .t-button--variant-outline.t-button--ghost:active { background-color: transparent; } .t-button--variant-outline.t-button--ghost.t-is-loading { background-color: transparent; } .t-button--variant-outline.t-button--ghost.t-is-disabled { background-color: rgba(255, 255, 255, 0.22); background-color: transparent; } .t-button--variant-outline.t-button--ghost:hover { color: var(--td-brand-color-hover); } .t-button--variant-outline.t-button--ghost:active { color: var(--td-brand-color-active); } .t-button--variant-outline.t-button--ghost.t-is-loading { color: var(--td-text-color-anti); } .t-button--variant-outline.t-button--ghost.t-is-disabled { color: rgba(255, 255, 255, 0.22); background-color: transparent; } .t-button--variant-outline.t-button--ghost:hover { border-color: var(--td-brand-color-hover); } .t-button--variant-outline.t-button--ghost:active { border-color: var(--td-brand-color-active); } .t-button--variant-outline.t-button--ghost.t-is-loading { border-color: var(--td-text-color-anti); } .t-button--variant-outline.t-button--ghost.t-is-disabled { border-color: rgba(255, 255, 255, 0.22); background-color: transparent; } .t-button--variant-outline.t-button--ghost.t-button--theme-primary { color: var(--td-brand-color); border-color: var(--td-brand-color); } .t-button--variant-outline.t-button--ghost.t-button--theme-primary:hover { color: var(--td-brand-color-hover); } .t-button--variant-outline.t-button--ghost.t-button--theme-primary:active { color: var(--td-brand-color-active); } .t-button--variant-outline.t-button--ghost.t-button--theme-primary.t-is-loading { color: var(--td-brand-color); } .t-button--variant-outline.t-button--ghost.t-button--theme-primary.t-is-disabled { color: rgba(255, 255, 255, 0.22); background-color: transparent; } .t-button--variant-outline.t-button--ghost.t-button--theme-primary:hover { border-color: var(--td-brand-color-hover); } .t-button--variant-outline.t-button--ghost.t-button--theme-primary:active { border-color: var(--td-brand-color-active); } .t-button--variant-outline.t-button--ghost.t-button--theme-primary.t-is-loading { border-color: var(--td-brand-color); } .t-button--variant-outline.t-button--ghost.t-button--theme-primary.t-is-disabled { border-color: rgba(255, 255, 255, 0.22); background-color: transparent; } .t-button--variant-outline.t-button--ghost.t-button--theme-success { color: var(--td-success-color); border-color: var(--td-success-color); } .t-button--variant-outline.t-button--ghost.t-button--theme-success:hover { color: var(--td-success-color-hover); } .t-button--variant-outline.t-button--ghost.t-button--theme-success:active { color: var(--td-success-color-active); } .t-button--variant-outline.t-button--ghost.t-button--theme-success.t-is-loading { color: var(--td-success-color); } .t-button--variant-outline.t-button--ghost.t-button--theme-success.t-is-disabled { color: rgba(255, 255, 255, 0.22); background-color: transparent; } .t-button--variant-outline.t-button--ghost.t-button--theme-success:hover { border-color: var(--td-success-color-hover); } .t-button--variant-outline.t-button--ghost.t-button--theme-success:active { border-color: var(--td-success-color-active); } .t-button--variant-outline.t-button--ghost.t-button--theme-success.t-is-loading { border-color: var(--td-success-color); } .t-button--variant-outline.t-button--ghost.t-button--theme-success.t-is-disabled { border-color: rgba(255, 255, 255, 0.22); background-color: transparent; } .t-button--variant-outline.t-button--ghost.t-button--theme-warning { color: var(--td-warning-color); border-color: var(--td-warning-color); } .t-button--variant-outline.t-button--ghost.t-button--theme-warning:hover { color: var(--td-warning-color-hover); } .t-button--variant-outline.t-button--ghost.t-button--theme-warning:active { color: var(--td-warning-color-active); } .t-button--variant-outline.t-button--ghost.t-button--theme-warning.t-is-loading { color: var(--td-warning-color); } .t-button--variant-outline.t-button--ghost.t-button--theme-warning.t-is-disabled { color: rgba(255, 255, 255, 0.22); background-color: transparent; } .t-button--variant-outline.t-button--ghost.t-button--theme-warning:hover { border-color: var(--td-warning-color-hover); } .t-button--variant-outline.t-button--ghost.t-button--theme-warning:active { border-color: var(--td-warning-color-active); } .t-button--variant-outline.t-button--ghost.t-button--theme-warning.t-is-loading { border-color: var(--td-warning-color); } .t-button--variant-outline.t-button--ghost.t-button--theme-warning.t-is-disabled { border-color: rgba(255, 255, 255, 0.22); background-color: transparent; } .t-button--variant-outline.t-button--ghost.t-button--theme-danger { color: var(--td-error-color); border-color: var(--td-error-color); } .t-button--variant-outline.t-button--ghost.t-button--theme-danger:hover { color: var(--td-error-color-hover); } .t-button--variant-outline.t-button--ghost.t-button--theme-danger:active { color: var(--td-error-color-active); } .t-button--variant-outline.t-button--ghost.t-button--theme-danger.t-is-loading { color: var(--td-error-color); } .t-button--variant-outline.t-button--ghost.t-button--theme-danger.t-is-disabled { color: rgba(255, 255, 255, 0.22); background-color: transparent; } .t-button--variant-outline.t-button--ghost.t-button--theme-danger:hover { border-color: var(--td-error-color-hover); } .t-button--variant-outline.t-button--ghost.t-button--theme-danger:active { border-color: var(--td-error-color-active); } .t-button--variant-outline.t-button--ghost.t-button--theme-danger.t-is-loading { border-color: var(--td-error-color); } .t-button--variant-outline.t-button--ghost.t-button--theme-danger.t-is-disabled { border-color: rgba(255, 255, 255, 0.22); background-color: transparent; } .t-button--variant-dashed { height: 32px; font: var(--td-font-body-medium); padding-left: 15px; padding-right: 15px; color: var(--td-text-color-primary); background-color: var(--td-bg-color-specialcomponent); border-color: var(--td-border-level-2-color); border-style: dashed; } .t-button--variant-dashed .t-icon, .t-button--variant-dashed .t-loading { font-size: var(--td-font-size-body-large); } .t-button--variant-dashed:hover { color: var(--td-brand-color-hover); } .t-button--variant-dashed.t-is-loading { color: var(--td-text-color-primary); } .t-button--variant-dashed.t-is-disabled { color: var(--td-text-color-disabled); } .t-button--variant-dashed:hover { background-color: var(--td-bg-color-specialcomponent); } .t-button--variant-dashed.t-is-loading { background-color: var(--td-bg-color-specialcomponent); } .t-button--variant-dashed.t-is-disabled { background-color: var(--td-bg-color-component-disabled); } .t-button--variant-dashed:hover { border-color: var(--td-brand-color-hover); } .t-button--variant-dashed.t-is-loading { border-color: var(--td-border-level-2-color); } .t-button--variant-dashed.t-is-disabled { border-color: var(--td-border-level-2-color); } .t-button--variant-dashed.t-button--theme-primary { color: var(--td-brand-color); border-color: var(--td-brand-color); } .t-button--variant-dashed.t-button--theme-primary:hover { color: var(--td-brand-color-hover); } .t-button--variant-dashed.t-button--theme-primary.t-is-loading { color: var(--td-brand-color); } .t-button--variant-dashed.t-button--theme-primary.t-is-disabled { color: var(--td-brand-color-disabled); } .t-button--variant-dashed.t-button--theme-primary:hover { border-color: var(--td-brand-color-hover); } .t-button--variant-dashed.t-button--theme-primary.t-is-loading { border-color: var(--td-brand-color); } .t-button--variant-dashed.t-button--theme-primary.t-is-disabled { border-color: var(--td-brand-color-disabled); } .t-button--variant-dashed.t-button--theme-success { color: var(--td-success-color); border-color: var(--td-success-color); } .t-button--variant-dashed.t-button--theme-success:hover { color: var(--td-success-color-hover); } .t-button--variant-dashed.t-button--theme-success.t-is-loading { color: var(--td-success-color); } .t-button--variant-dashed.t-button--theme-success.t-is-disabled { color: var(--td-success-color-disabled); } .t-button--variant-dashed.t-button--theme-success:hover { border-color: var(--td-success-color-hover); } .t-button--variant-dashed.t-button--theme-success.t-is-loading { border-color: var(--td-success-color); } .t-button--variant-dashed.t-button--theme-success.t-is-disabled { border-color: var(--td-success-color-disabled); } .t-button--variant-dashed.t-button--theme-warning { color: var(--td-warning-color); border-color: var(--td-warning-color); } .t-button--variant-dashed.t-button--theme-warning:hover { color: var(--td-warning-color-hover); } .t-button--variant-dashed.t-button--theme-warning.t-is-loading { color: var(--td-warning-color); } .t-button--variant-dashed.t-button--theme-warning.t-is-disabled { color: var(--td-warning-color-disabled); } .t-button--variant-dashed.t-button--theme-warning:hover { border-color: var(--td-warning-color-hover); } .t-button--variant-dashed.t-button--theme-warning.t-is-loading { border-color: var(--td-warning-color); } .t-button--variant-dashed.t-button--theme-warning.t-is-disabled { border-color: var(--td-warning-color-disabled); } .t-button--variant-dashed.t-button--theme-danger { color: var(--td-error-color); border-color: var(--td-error-color); } .t-button--variant-dashed.t-button--theme-danger:hover { color: var(--td-error-color-hover); } .t-button--variant-dashed.t-button--theme-danger.t-is-loading { color: var(--td-error-color); } .t-button--variant-dashed.t-button--theme-danger.t-is-disabled { color: var(--td-error-color-disabled); } .t-button--variant-dashed.t-button--theme-danger:hover { border-color: var(--td-error-color-hover); } .t-button--variant-dashed.t-button--theme-danger.t-is-loading { border-color: var(--td-error-color); } .t-button--variant-dashed.t-button--theme-danger.t-is-disabled { border-color: var(--td-error-color-disabled); } .t-button--variant-dashed.t-button--ghost { background-color: transparent; color: var(--td-text-color-anti); border-color: var(--td-text-color-anti); } .t-button--variant-dashed.t-button--ghost:hover { background-color: transparent; } .t-button--variant-dashed.t-button--ghost:active { background-color: transparent; } .t-button--variant-dashed.t-button--ghost.t-is-loading { background-color: transparent; } .t-button--variant-dashed.t-button--ghost.t-is-disabled { background-color: rgba(255, 255, 255, 0.22); background-color: transparent; } .t-button--variant-dashed.t-button--ghost:hover { color: var(--td-brand-color-hover); } .t-button--variant-dashed.t-button--ghost:active { color: var(--td-brand-color-active); } .t-button--variant-dashed.t-button--ghost.t-is-loading { color: var(--td-text-color-anti); } .t-button--variant-dashed.t-button--ghost.t-is-disabled { color: rgba(255, 255, 255, 0.22); background-color: transparent; } .t-button--variant-dashed.t-button--ghost:hover { border-color: var(--td-brand-color-hover); } .t-button--variant-dashed.t-button--ghost:active { border-color: var(--td-brand-color-active); } .t-button--variant-dashed.t-button--ghost.t-is-loading { border-color: var(--td-text-color-anti); } .t-button--variant-dashed.t-button--ghost.t-is-disabled { border-color: rgba(255, 255, 255, 0.22); background-color: transparent; } .t-button--variant-dashed.t-button--ghost.t-button--theme-primary { color: var(--td-brand-color); border-color: var(--td-brand-color); } .t-button--variant-dashed.t-button--ghost.t-button--theme-primary:hover { color: var(--td-brand-color-hover); } .t-button--variant-dashed.t-button--ghost.t-button--theme-primary:active { color: var(--td-brand-color-active); } .t-button--variant-dashed.t-button--ghost.t-button--theme-primary.t-is-loading { color: var(--td-brand-color); } .t-button--variant-dashed.t-button--ghost.t-button--theme-primary.t-is-disabled { color: rgba(255, 255, 255, 0.22); background-color: transparent; } .t-button--variant-dashed.t-button--ghost.t-button--theme-primary:hover { border-color: var(--td-brand-color-hover); } .t-button--variant-dashed.t-button--ghost.t-button--theme-primary:active { border-color: var(--td-brand-color-active); } .t-button--variant-dashed.t-button--ghost.t-button--theme-primary.t-is-loading { border-color: var(--td-brand-color); } .t-button--variant-dashed.t-button--ghost.t-button--theme-primary.t-is-disabled { border-color: rgba(255, 255, 255, 0.22); background-color: transparent; } .t-button--variant-dashed.t-button--ghost.t-button--theme-success { color: var(--td-success-color); border-color: var(--td-success-color); } .t-button--variant-dashed.t-button--ghost.t-button--theme-success:hover { color: var(--td-success-color-hover); } .t-button--variant-dashed.t-button--ghost.t-button--theme-success:active { color: var(--td-success-color-active); } .t-button--variant-dashed.t-button--ghost.t-button--theme-success.t-is-loading { color: var(--td-success-color); } .t-button--variant-dashed.t-button--ghost.t-button--theme-success.t-is-disabled { color: rgba(255, 255, 255, 0.22); background-color: transparent; } .t-button--variant-dashed.t-button--ghost.t-button--theme-success:hover { border-color: var(--td-success-color-hover); } .t-button--variant-dashed.t-button--ghost.t-button--theme-success:active { border-color: var(--td-success-color-active); } .t-button--variant-dashed.t-button--ghost.t-button--theme-success.t-is-loading { border-color: var(--td-success-color); } .t-button--variant-dashed.t-button--ghost.t-button--theme-success.t-is-disabled { border-color: rgba(255, 255, 255, 0.22); background-color: transparent; } .t-button--variant-dashed.t-button--ghost.t-button--theme-warning { color: var(--td-warning-color); border-color: var(--td-warning-color); } .t-button--variant-dashed.t-button--ghost.t-button--theme-warning:hover { color: var(--td-warning-color-hover); } .t-button--variant-dashed.t-button--ghost.t-button--theme-warning:active { color: var(--td-warning-color-active); } .t-button--variant-dashed.t-button--ghost.t-button--theme-warning.t-is-loading { color: var(--td-warning-color); } .t-button--variant-dashed.t-button--ghost.t-button--theme-warning.t-is-disabled { color: rgba(255, 255, 255, 0.22); background-color: transparent; } .t-button--variant-dashed.t-button--ghost.t-button--theme-warning:hover { border-color: var(--td-warning-color-hover); } .t-button--variant-dashed.t-button--ghost.t-button--theme-warning:active { border-color: var(--td-warning-color-active); } .t-button--variant-dashed.t-button--ghost.t-button--theme-warning.t-is-loading { border-color: var(--td-warning-color); } .t-button--variant-dashed.t-button--ghost.t-button--theme-warning.t-is-disabled { border-color: rgba(255, 255, 255, 0.22); background-color: transparent; } .t-button--variant-dashed.t-button--ghost.t-button--theme-danger { color: var(--td-error-color); border-color: var(--td-error-color); } .t-button--variant-dashed.t-button--ghost.t-button--theme-danger:hover { color: var(--td-error-color-hover); } .t-button--variant-dashed.t-button--ghost.t-button--theme-danger:active { color: var(--td-error-color-active); } .t-button--variant-dashed.t-button--ghost.t-button--theme-danger.t-is-loading { color: var(--td-error-color); } .t-button--variant-dashed.t-button--ghost.t-button--theme-danger.t-is-disabled { color: rgba(255, 255, 255, 0.22); background-color: transparent; } .t-button--variant-dashed.t-button--ghost.t-button--theme-danger:hover { border-color: var(--td-error-color-hover); } .t-button--variant-dashed.t-button--ghost.t-button--theme-danger:active { border-color: var(--td-error-color-active); } .t-button--variant-dashed.t-button--ghost.t-button--theme-danger.t-is-loading { border-color: var(--td-error-color); } .t-button--variant-dashed.t-button--ghost.t-button--theme-danger.t-is-disabled { border-color: rgba(255, 255, 255, 0.22); background-color: transparent; } .t-button--variant-text { height: 32px; font: var(--td-font-body-medium); padding-left: 15px; padding-right: 15px; color: var(--td-text-color-primary); background-color: transparent; border-color: transparent; } .t-button--variant-text .t-icon, .t-button--variant-text .t-loading { font-size: var(--td-font-size-body-large); } .t-button--variant-text:hover { color: var(--td-text-color-primary); } .t-button--variant-text.t-is-loading { color: var(--td-text-color-primary); } .t-button--variant-text.t-is-disabled { color: var(--td-text-color-disabled); } .t-button--variant-text:hover { background-color: var(--td-bg-color-container-hover); } .t-button--variant-text.t-is-loading { background-color: transparent; } .t-button--variant-text.t-is-disabled { background-color: transparent; } .t-button--variant-text:hover { border-color: var(--td-bg-color-container-hover); } .t-button--variant-text.t-is-loading { border-color: transparent; } .t-button--variant-text.t-is-disabled { border-color: transparent; } .t-button--variant-text.t-button--theme-primary { color: var(--td-brand-color); } .t-button--variant-text.t-button--theme-primary:hover { color: var(--td-brand-color-hover); } .t-button--variant-text.t-button--theme-primary.t-is-loading { color: var(--td-brand-color); } .t-button--variant-text.t-button--theme-primary.t-is-disabled { color: var(--td-brand-color-disabled); } .t-button--variant-text.t-button--theme-success { color: var(--td-success-color); } .t-button--variant-text.t-button--theme-success:hover { color: var(--td-success-color-hover); } .t-button--variant-text.t-button--theme-success.t-is-loading { color: var(--td-success-color); } .t-button--variant-text.t-button--theme-success.t-is-disabled { color: var(--td-success-color-disabled); } .t-button--variant-text.t-button--theme-warning { color: var(--td-warning-color); } .t-button--variant-text.t-button--theme-warning:hover { color: var(--td-warning-color-hover); } .t-button--variant-text.t-button--theme-warning.t-is-loading { color: var(--td-warning-color); } .t-button--variant-text.t-button--theme-warning.t-is-disabled { color: var(--td-warning-color-disabled); } .t-button--variant-text.t-button--theme-danger { color: var(--td-error-color); } .t-button--variant-text.t-button--theme-danger:hover { color: var(--td-error-color-hover); } .t-button--variant-text.t-button--theme-danger.t-is-loading { color: var(--td-error-color); } .t-button--variant-text.t-button--theme-danger.t-is-disabled { color: var(--td-error-color-disabled); } .t-button--variant-text.t-button--ghost { background: none; color: var(--td-text-color-anti); } .t-button--variant-text.t-button--ghost:hover { color: var(--td-brand-color-hover); } .t-button--variant-text.t-button--ghost:active { color: var(--td-brand-color-active); } .t-button--variant-text.t-button--ghost.t-is-loading { color: var(--td-text-color-anti); } .t-button--variant-text.t-button--ghost.t-is-disabled { color: rgba(255, 255, 255, 0.22); background-color: transparent; } .t-button--variant-text.t-button--ghost.t-button--theme-primary { color: var(--td-brand-color); } .t-button--variant-text.t-button--ghost.t-button--theme-primary:hover { color: var(--td-brand-color-hover); } .t-button--variant-text.t-button--ghost.t-button--theme-primary:active { color: var(--td-brand-color-active); } .t-button--variant-text.t-button--ghost.t-button--theme-primary.t-is-loading { color: var(--td-brand-color); } .t-button--variant-text.t-button--ghost.t-button--theme-primary.t-is-disabled { color: rgba(255, 255, 255, 0.22); background-color: transparent; } .t-button--variant-text.t-button--ghost.t-button--theme-success { color: var(--td-success-color); } .t-button--variant-text.t-button--ghost.t-button--theme-success:hover { color: var(--td-success-color-hover); } .t-button--variant-text.t-button--ghost.t-button--theme-success:active { color: var(--td-success-color-active); } .t-button--variant-text.t-button--ghost.t-button--theme-success.t-is-loading { color: var(--td-success-color); } .t-button--variant-text.t-button--ghost.t-button--theme-success.t-is-disabled { color: rgba(255, 255, 255, 0.22); background-color: transparent; } .t-button--variant-text.t-button--ghost.t-button--theme-warning { color: var(--td-warning-color); } .t-button--variant-text.t-button--ghost.t-button--theme-warning:hover { color: var(--td-warning-color-hover); } .t-button--variant-text.t-button--ghost.t-button--theme-warning:active { color: var(--td-warning-color-active); } .t-button--variant-text.t-button--ghost.t-button--theme-warning.t-is-loading { color: var(--td-warning-color); } .t-button--variant-text.t-button--ghost.t-button--theme-warning.t-is-disabled { color: rgba(255, 255, 255, 0.22); background-color: transparent; } .t-button--variant-text.t-button--ghost.t-button--theme-danger { color: var(--td-error-color); } .t-button--variant-text.t-button--ghost.t-button--theme-danger:hover { color: var(--td-error-color-hover); } .t-button--variant-text.t-button--ghost.t-button--theme-danger:active { color: var(--td-error-color-active); } .t-button--variant-text.t-button--ghost.t-button--theme-danger.t-is-loading { color: var(--td-error-color); } .t-button--variant-text.t-button--ghost.t-button--theme-danger.t-is-disabled { color: rgba(255, 255, 255, 0.22); background-color: transparent; } .t-button.t-is-loading, .t-button.t-is-disabled { cursor: not-allowed; } .t-button.t-size-s { height: 24px; font: var(--td-font-body-small); padding-left: 7px; padding-right: 7px; } .t-button.t-size-s .t-icon, .t-button.t-size-s .t-loading { font-size: var(--td-font-size-body-medium); } .t-button.t-size-l { height: 40px; font: var(--td-font-body-large); padding-left: 23px; padding-right: 23px; } .t-button.t-size-l .t-icon, .t-button.t-size-l .t-loading { font-size: var(--td-font-size-title-large); } .t-button.t-size-full-width { display: block; width: 100%; } .t-button--shape-square { width: 32px; padding: 0; } .t-button--shape-square.t-size-s { width: 24px; padding: 0; } .t-button--shape-square.t-size-l { width: 40px; padding: 0; } .t-button--shape-round { border-radius: var(--td-radius-round); } .t-button--shape-round.t-size-s { border-radius: 12px; } .t-button--shape-round.t-size-l { border-radius: 20px; } .t-button--shape-circle { width: 32px; padding: 0; text-align: center; border-radius: 16px; } .t-button--shape-circle .t-icon { font-size: var(--td-font-size-body-large); } .t-button--shape-circle .t-loading { font-size: var(--td-font-size-body-large); } .t-button--shape-circle.t-size-s { width: 24px; border-radius: 12px; } .t-button--shape-circle.t-size-l { width: 40px; padding: 0; border-radius: 20px; } .t-button--ghost { --ripple-color: var(--td-gray-color-10); } .t-button:not(.t-is-disabled):not(.t-button--ghost) { --ripple-color: var(--td-bg-color-container-active); } .t-button--variant-base:not(.t-is-disabled):not(.t-button--ghost) { --ripple-color: var(--td-bg-color-component-active); } .t-button--variant-base.t-button--theme-primary:not(.t-is-disabled):not(.t-button--ghost) { --ripple-color: var(--td-brand-color-active); } .t-button--variant-base.t-button--theme-success:not(.t-is-disabled):not(.t-button--ghost) { --ripple-color: var(--td-success-color-active); } .t-button--variant-base.t-button--theme-warning:not(.t-is-disabled):not(.t-button--ghost) { --ripple-color: var(--td-warning-color-active); } .t-button--variant-base.t-button--theme-danger:not(.t-is-disabled):not(.t-button--ghost) { --ripple-color: var(--td-error-color-active); } .t-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; } .t-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); } .t-checkbox + .t-checkbox { margin-left: inherit; } .t-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; } .t-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; } .t-checkbox__input::after { content: ""; position: absolute; opacity: 0; -webkit-box-sizing: border-box; box-sizing: border-box; } .t-checkbox__label { display: inline-block; margin-left: 8px; vertical-align: middle; font: var(--td-font-body-medium); } .t-checkbox:hover .t-checkbox__input { border-color: var(--td-brand-color); -webkit-transition: border-color 0.2s linear; transition: border-color 0.2s linear; } .t-checkbox.t-is-checked .t-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); } .t-checkbox.t-is-checked .t-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; } .t-checkbox.t-is-indeterminate .t-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); } .t-checkbox.t-is-indeterminate .t-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); } .t-checkbox.t-is-disabled { cursor: not-allowed; } .t-checkbox.t-is-disabled .t-checkbox__label { color: var(--td-text-color-disabled); } .t-checkbox.t-is-disabled .t-checkbox__input { background-color: var(--td-bg-color-component-disabled); } .t-checkbox.t-is-disabled:hover .t-checkbox__input { border-color: var(--td-border-level-2-color); } .t-checkbox.t-is-disabled.t-is-checked .t-checkbox__input { border-color: var(--td-border-level-2-color); } .t-checkbox.t-is-disabled.t-is-checked .t-checkbox__input::after { border-color: var(--td-text-color-disabled); } .t-checkbox.t-is-disabled.t-is-indeterminate .t-checkbox__input { border-color: var(--td-border-level-2-color); } .t-checkbox.t-is-disabled.t-is-indeterminate .t-checkbox__input::after { background-color: var(--td-text-color-disabled); } .trans-ctx--icon-trans { width: 20px; padding: 2px; border-radius: 2px; height: auto; cursor: pointer; display: none; opacity: 0; background-color: #0052d9; } .trans-ctx--icon-trans.trans-ctx--visible { opacity: 1; display: inline-block; } .trans-ctx--container-popup { position: fixed; opacity: 0; z-index: 99999999; display: none; } .trans-ctx--container-popup.trans-ctx--visible { opacity: 1; display: block; } .trans-ctx--panel-result { position: relative; width: 488px; color: rgba(0, 0, 0, 0.9); background-color: #fff; border-radius: 4px; display: none; opacity: 0; transition: all 0.3s ease; box-shadow: rgba(0, 0, 0, 0.8) 0 4px 23px -6px; } .trans-ctx--panel-result.trans-ctx--visible { display: block; opacity: 1; } .trans-ctx--panel-result .trans-ctx--container-title { position: relative; display: flex; align-items: center; padding: 8px 16px; border-bottom: 1px solid #eee; } .trans-ctx--panel-result .trans-ctx--container-title .trans-ctx--title-text { cursor: move; margin-right: 10px; } .trans-ctx--panel-result .trans-ctx--container-title .trans-ctx--icon-close { display: inline-block; position: absolute; right: 16px; top: 17px; width: 10px; height: auto; cursor: pointer; } .trans-ctx--panel-result .trans-ctx--container-title .trans-ctx--btn-more { margin-left: 10px; margin-right: 4px; font-size: 12px; cursor: pointer; color: #0052d9; text-decoration: underline; } .trans-ctx--panel-result .trans-ctx--container-title .trans-ctx--btn-more .trans-ctx--icon-more { position: relative; top: 1px; width: 12px; height: 12px; } .trans-ctx--panel-result .trans-ctx--icon-setting { position: relative; top: 3.5px; width: 18px; height: 18px; cursor: pointer; } .trans-ctx--panel-result .trans-ctx--content { padding: 16px; } .trans-ctx--panel-result .trans-ctx--content .trans-ctx--result-section:not(:last-child) { padding-bottom: 8px; margin-bottom: 8px; border-bottom: 1px solid #eee; } .trans-ctx--panel-result .trans-ctx--content .trans-ctx--label { display: flex; align-items: center; margin-bottom: 4px; color: #333; } .trans-ctx--panel-result .trans-ctx--content .trans-ctx--container-collapsed-text { display: flex; align-items: center; justify-content: space-between; } .trans-ctx--panel-result .trans-ctx--content .trans-ctx--trs-content-collapsed { position: relative; flex: 1; overflow: hidden; word-break: break-all; white-space: nowrap; text-overflow: ellipsis; } .trans-ctx--panel-result .trans-ctx--content .trans-ctx--trs-content-collapsed::after { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; background: linear-gradient(90deg, rgba(255, 255, 255, 0) 50%, #fff 99%); pointer-events: none; } .trans-ctx--panel-result .trans-ctx--content .trans-ctx--btn-expand { margin-left: 4px; font-size: 12px; color: #0052d9; cursor: pointer; text-decoration: underline; } .trans-ctx--panel-result .trans-ctx--content .trans-ctx--trs-content { position: relative; max-height: 280px; padding-left: 4px; line-height: 30px; overflow-y: auto; white-space: pre-wrap; word-break: break-word; -webkit-font-smoothing: antialiased; } .trans-ctx--panel-result .trans-ctx--content .trans-ctx--trs-content.trans-ctx--source { max-height: 75px; } .trans-ctx--panel-result .trans-ctx--content .trans-ctx--trs-content .trans-ctx--collapsed-target { position: relative; max-height: 180px; overflow: hidden; } .trans-ctx--panel-result .trans-ctx--content .trans-ctx--trs-content .trans-ctx--collapsed-target .trans-ctx--btn-expand { position: absolute; left: 0; bottom: 0; width: 100%; height: 50px; border: none; background: linear-gradient(rgba(255, 255, 255, 0) 40%, rgba(255, 255, 255, 0.5) 60%, #fff 100%); cursor: pointer; user-select: none; } .trans-ctx--panel-result .trans-ctx--content .trans-ctx--trs-content .trans-ctx--collapsed-target .trans-ctx--btn-expand .trans-ctx--icon-expand { position: absolute; bottom: 0; left: 50%; font-size: 24px; color: #0052d9; transform: translate(-50%, 0); } .trans-ctx--panel-result .trans-ctx--content .trans-ctx--trs-content .trans-ctx--error-tip { color: #e34d59; } .trans-ctx--panel-result .trans-ctx--content .trans-ctx--trs-content .trans-ctx--btn-retry { margin-left: 4px; font-size: 12px; color: #0052d9; cursor: pointer; text-decoration: underline; } .trans-ctx--selector-lang { width: 120px; margin: 0 4px; height: 28px; line-height: 18px; outline: none; background-color: #fff; border: solid 1px #b0bac5; padding: 3px 6px; color: rgba(0, 0, 0, 0.9); /* 清除默认的箭头样式 */ } .trans-ctx--selector-lang:focus { border: 1px solid #3582fb; } .trans-ctx--icon-copy { position: relative; top: 1.5px; width: 14px; height: auto; color: rgba(0, 0, 0, 0.6); cursor: pointer; }