*,::before,::after{--un-rotate:0;--un-rotate-x:0;--un-rotate-y:0;--un-rotate-z:0;--un-scale-x:1;--un-scale-y:1;--un-scale-z:1;--un-skew-x:0;--un-skew-y:0;--un-translate-x:0;--un-translate-y:0;--un-translate-z:0;--un-pan-x: ;--un-pan-y: ;--un-pinch-zoom: ;--un-scroll-snap-strictness:proximity;--un-ordinal: ;--un-slashed-zero: ;--un-numeric-figure: ;--un-numeric-spacing: ;--un-numeric-fraction: ;--un-border-spacing-x:0;--un-border-spacing-y:0;--un-ring-offset-shadow:0 0 rgb(0 0 0 / 0);--un-ring-shadow:0 0 rgb(0 0 0 / 0);--un-shadow-inset: ;--un-shadow:0 0 rgb(0 0 0 / 0);--un-ring-inset: ;--un-ring-offset-width:0px;--un-ring-offset-color:#fff;--un-ring-width:0px;--un-ring-color:rgb(147 197 253 / 0.5);--un-blur: ;--un-brightness: ;--un-contrast: ;--un-drop-shadow: ;--un-grayscale: ;--un-hue-rotate: ;--un-invert: ;--un-saturate: ;--un-sepia: ;--un-backdrop-blur: ;--un-backdrop-brightness: ;--un-backdrop-contrast: ;--un-backdrop-grayscale: ;--un-backdrop-hue-rotate: ;--un-backdrop-invert: ;--un-backdrop-opacity: ;--un-backdrop-saturate: ;--un-backdrop-sepia: ;}::backdrop{--un-rotate:0;--un-rotate-x:0;--un-rotate-y:0;--un-rotate-z:0;--un-scale-x:1;--un-scale-y:1;--un-scale-z:1;--un-skew-x:0;--un-skew-y:0;--un-translate-x:0;--un-translate-y:0;--un-translate-z:0;--un-pan-x: ;--un-pan-y: ;--un-pinch-zoom: ;--un-scroll-snap-strictness:proximity;--un-ordinal: ;--un-slashed-zero: ;--un-numeric-figure: ;--un-numeric-spacing: ;--un-numeric-fraction: ;--un-border-spacing-x:0;--un-border-spacing-y:0;--un-ring-offset-shadow:0 0 rgb(0 0 0 / 0);--un-ring-shadow:0 0 rgb(0 0 0 / 0);--un-shadow-inset: ;--un-shadow:0 0 rgb(0 0 0 / 0);--un-ring-inset: ;--un-ring-offset-width:0px;--un-ring-offset-color:#fff;--un-ring-width:0px;--un-ring-color:rgb(147 197 253 / 0.5);--un-blur: ;--un-brightness: ;--un-contrast: ;--un-drop-shadow: ;--un-grayscale: ;--un-hue-rotate: ;--un-invert: ;--un-saturate: ;--un-sepia: ;--un-backdrop-blur: ;--un-backdrop-brightness: ;--un-backdrop-contrast: ;--un-backdrop-grayscale: ;--un-backdrop-hue-rotate: ;--un-backdrop-invert: ;--un-backdrop-opacity: ;--un-backdrop-saturate: ;--un-backdrop-sepia: ;}.container{width:100%;}@media (min-width: 640px){.container{max-width:640px;}}@media (min-width: 768px){.container{max-width:768px;}}@media (min-width: 1024px){.container{max-width:1024px;}}@media (min-width: 1280px){.container{max-width:1280px;}}@media (min-width: 1536px){.container{max-width:1536px;}}.visible{visibility:visible;}.absolute{position:absolute;}.fixed{position:fixed;}.relative{position:relative;}.sticky{position:sticky;}.static{position:static;}.isolate{isolation:isolate;}.grid{display:grid;}.mb-2px{margin-bottom:2px;}.inline{display:inline;}.block{display:block;}.inline-block{display:inline-block;}.contents{display:contents;}.hidden{display:none;}.h-\[calc\(100vh-88px\)\]{height:calc(100vh - 88px);}.h1{height:0.25rem;}.h2{height:0.5rem;}.h3{height:0.75rem;}.h4{height:1rem;}.h5{height:1.25rem;}.h70vh{height:70vh;}.max-h-500px{max-height:500px;}.w-full,.w100\%{width:100%;}.flex{display:flex;}.inline-flex{display:inline-flex;}.flex-shrink{flex-shrink:1;}.flex-grow{flex-grow:1;}.flex-wrap{flex-wrap:wrap;}.table{display:table;}.border-collapse{border-collapse:collapse;}.transform{transform:translateX(var(--un-translate-x)) translateY(var(--un-translate-y)) translateZ(var(--un-translate-z)) rotate(var(--un-rotate)) rotateX(var(--un-rotate-x)) rotateY(var(--un-rotate-y)) rotateZ(var(--un-rotate-z)) skewX(var(--un-skew-x)) skewY(var(--un-skew-y)) scaleX(var(--un-scale-x)) scaleY(var(--un-scale-y)) scaleZ(var(--un-scale-z));}.resize{resize:both;}.overflow-y-auto{overflow-y:auto;}.break-all{word-break:break-all;}.b,.border{border-width:1px;}.p\[dir\=\'rtl\'\]{padding:dir='rtl';}.px{padding-left:1rem;padding-right:1rem;}.pie{padding-inline-end:1rem;}.indent{text-indent:1.5rem;}.color-red{--un-text-opacity:1;color:rgb(248 113 113 / var(--un-text-opacity)) /* #f87171 */;}.uppercase{text-transform:uppercase;}.italic{font-style:italic;}.underline{text-decoration-line:underline;}.tab{-moz-tab-size:4;-o-tab-size:4;tab-size:4;}.hover-shadow:hover{--un-shadow:var(--un-shadow-inset) 0 1px 3px 0 var(--un-shadow-color, rgb(0 0 0 / 0.1)),var(--un-shadow-inset) 0 1px 2px -1px var(--un-shadow-color, rgb(0 0 0 / 0.1));box-shadow:var(--un-ring-offset-shadow), var(--un-ring-shadow), var(--un-shadow);}.light .light-outline,.outline{outline-style:solid;}.blur{--un-blur:blur(8px);filter:var(--un-blur) var(--un-brightness) var(--un-contrast) var(--un-drop-shadow) var(--un-grayscale) var(--un-hue-rotate) var(--un-invert) var(--un-saturate) var(--un-sepia);}.filter{filter:var(--un-blur) var(--un-brightness) var(--un-contrast) var(--un-drop-shadow) var(--un-grayscale) var(--un-hue-rotate) var(--un-invert) var(--un-saturate) var(--un-sepia);}.backdrop-filter{-webkit-backdrop-filter:var(--un-backdrop-blur) var(--un-backdrop-brightness) var(--un-backdrop-contrast) var(--un-backdrop-grayscale) var(--un-backdrop-hue-rotate) var(--un-backdrop-invert) var(--un-backdrop-opacity) var(--un-backdrop-saturate) var(--un-backdrop-sepia);backdrop-filter:var(--un-backdrop-blur) var(--un-backdrop-brightness) var(--un-backdrop-contrast) var(--un-backdrop-grayscale) var(--un-backdrop-hue-rotate) var(--un-backdrop-invert) var(--un-backdrop-opacity) var(--un-backdrop-saturate) var(--un-backdrop-sepia);}.transition{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms;}.ease{transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);}.\@container{container-type:inline-size;} :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; } @-moz-document url-prefix() { .narrow-scrollbar { scrollbar-color: var(--td-scrollbar-color) transparent; scrollbar-width: thin; } } .narrow-scrollbar::-webkit-scrollbar { width: 8px; height: 8px; } .narrow-scrollbar::-webkit-scrollbar-thumb { border: 2px solid transparent; background-clip: content-box; background-color: var(--td-scrollbar-color); border-radius: 15px; } .narrow-scrollbar::-webkit-scrollbar-thumb:vertical:hover, .narrow-scrollbar::-webkit-scrollbar-thumb:horizontal:hover { background-color: var(--td-scrollbar-hover-color); } .t-fake-arrow path { transition: d 0.2s; stroke: currentcolor; } .t-fake-arrow--active path { d: path("M3.75 10.2002L7.99274 5.7998L12.2361 10.0425"); } .t-slide-down-enter-active, .t-slide-down-leave-active { transition: height 0.2s cubic-bezier(0.38, 0, 0.24, 1), max-height 0.2s cubic-bezier(0.38, 0, 0.24, 1); } :root, :root[theme-mode="light"] { --td-brand-color-1: #f2f3ff; --td-brand-color-2: #d9e1ff; --td-brand-color-3: #b5c7ff; --td-brand-color-4: #8eabff; --td-brand-color-5: #618dff; --td-brand-color-6: #366ef4; --td-brand-color-7: #0052d9; --td-brand-color-8: #003cab; --td-brand-color-9: #002a7c; --td-brand-color-10: #001a57; --td-warning-color-1: #fff1e9; --td-warning-color-2: #ffd9c2; --td-warning-color-3: #ffb98c; --td-warning-color-4: #fa9550; --td-warning-color-5: #e37318; --td-warning-color-6: #be5a00; --td-warning-color-7: #954500; --td-warning-color-8: #713300; --td-warning-color-9: #532300; --td-warning-color-10: #3b1700; --td-error-color-1: #fff0ed; --td-error-color-2: #ffd8d2; --td-error-color-3: #ffb9b0; --td-error-color-4: #ff9285; --td-error-color-5: #f6685d; --td-error-color-6: #d54941; --td-error-color-7: #ad352f; --td-error-color-8: #881f1c; --td-error-color-9: #68070a; --td-error-color-10: #490002; --td-success-color-1: #e3f9e9; --td-success-color-2: #c6f3d7; --td-success-color-3: #92dab2; --td-success-color-4: #56c08d; --td-success-color-5: #2ba471; --td-success-color-6: #008858; --td-success-color-7: #006c45; --td-success-color-8: #005334; --td-success-color-9: #003b23; --td-success-color-10: #002515; --td-gray-color-1: #f3f3f3; --td-gray-color-2: #eee; --td-gray-color-3: #e8e8e8; --td-gray-color-4: #ddd; --td-gray-color-5: #c6c6c6; --td-gray-color-6: #a6a6a6; --td-gray-color-7: #8b8b8b; --td-gray-color-8: #777; --td-gray-color-9: #5e5e5e; --td-gray-color-10: #4b4b4b; --td-gray-color-11: #393939; --td-gray-color-12: #2c2c2c; --td-gray-color-13: #242424; --td-gray-color-14: #181818; --td-font-white-1: #ffffff; --td-font-white-2: rgba(255, 255, 255, 0.55); --td-font-white-3: rgba(255, 255, 255, 0.35); --td-font-white-4: rgba(255, 255, 255, 0.22); --td-font-gray-1: rgba(0, 0, 0, 0.9); --td-font-gray-2: rgba(0, 0, 0, 0.6); --td-font-gray-3: rgba(0, 0, 0, 0.4); --td-font-gray-4: rgba(0, 0, 0, 0.26); --td-brand-color: var(--td-brand-color-7); --td-warning-color: var(--td-warning-color-5); --td-error-color: var(--td-error-color-6); --td-success-color: var(--td-success-color-5); --td-brand-color-hover: var(--td-brand-color-6); --td-brand-color-focus: var(--td-brand-color-2); --td-brand-color-active: var(--td-brand-color-8); --td-brand-color-disabled: var(--td-brand-color-3); --td-brand-color-light: var(--td-brand-color-1); --td-brand-color-light-hover: var(--td-brand-color-2); --td-warning-color-hover: var(--td-warning-color-4); --td-warning-color-focus: var(--td-warning-color-2); --td-warning-color-active: var(--td-warning-color-6); --td-warning-color-disabled: var(--td-warning-color-3); --td-warning-color-light: var(--td-warning-color-1); --td-warning-color-light-hover: var(--td-warning-color-2); --td-error-color-hover: var(--td-error-color-5); --td-error-color-focus: var(--td-error-color-2); --td-error-color-active: var(--td-error-color-7); --td-error-color-disabled: var(--td-error-color-3); --td-error-color-light: var(--td-error-color-1); --td-error-color-light-hover: var(--td-error-color-2); --td-success-color-hover: var(--td-success-color-4); --td-success-color-focus: var(--td-success-color-2); --td-success-color-active: var(--td-success-color-6); --td-success-color-disabled: var(--td-success-color-3); --td-success-color-light: var(--td-success-color-1); --td-success-color-light-hover: var(--td-success-color-2); --td-mask-active: rgba(0, 0, 0, 0.6); --td-mask-disabled: rgba(255, 255, 255, 0.6); --td-mask-background: rgba(255, 255, 255, 0.96); --td-bg-color-page: var(--td-gray-color-2); --td-bg-color-container: #fff; --td-bg-color-container-hover: var(--td-gray-color-1); --td-bg-color-container-active: var(--td-gray-color-3); --td-bg-color-container-select: #fff; --td-bg-color-secondarycontainer: var(--td-gray-color-1); --td-bg-color-secondarycontainer-hover: var(--td-gray-color-2); --td-bg-color-secondarycontainer-active: var(--td-gray-color-4); --td-bg-color-component: var(--td-gray-color-3); --td-bg-color-component-hover: var(--td-gray-color-4); --td-bg-color-component-active: var(--td-gray-color-6); --td-bg-color-secondarycomponent: var(--td-gray-color-4); --td-bg-color-secondarycomponent-hover: var(--td-gray-color-5); --td-bg-color-secondarycomponent-active: var(--td-gray-color-6); --td-bg-color-component-disabled: var(--td-gray-color-2); --td-bg-color-specialcomponent: #fff; --td-text-color-primary: var(--td-font-gray-1); --td-text-color-secondary: var(--td-font-gray-2); --td-text-color-placeholder: var(--td-font-gray-3); --td-text-color-disabled: var(--td-font-gray-4); --td-text-color-anti: #fff; --td-text-color-brand: var(--td-brand-color-7); --td-text-color-link: var(--td-brand-color-8); --td-border-level-1-color: var(--td-gray-color-3); --td-component-stroke: var(--td-gray-color-3); --td-border-level-2-color: var(--td-gray-color-4); --td-component-border: var(--td-gray-color-4); --td-shadow-1: 0 1px 10px rgba(0, 0, 0, 0.05), 0 4px 5px rgba(0, 0, 0, 0.08), 0 2px 4px -1px rgba(0, 0, 0, 0.12); --td-shadow-2: 0 3px 14px 2px rgba(0, 0, 0, 0.05), 0 8px 10px 1px rgba(0, 0, 0, 0.06), 0 5px 5px -3px rgba(0, 0, 0, 0.1); --td-shadow-3: 0 6px 30px 5px rgba(0, 0, 0, 0.05), 0 16px 24px 2px rgba(0, 0, 0, 0.04), 0 8px 10px -5px rgba(0, 0, 0, 0.08); --td-shadow-inset-top: inset 0 0.5px 0 #dcdcdc; --td-shadow-inset-right: inset 0.5px 0 0 #dcdcdc; --td-shadow-inset-bottom: inset 0 -0.5px 0 #dcdcdc; --td-shadow-inset-left: inset -0.5px 0 0 #dcdcdc; --td-table-shadow-color: rgba(0, 0, 0, 0.08); --td-scrollbar-color: rgba(0, 0, 0, 0.1); --td-scrollbar-hover-color: rgba(0, 0, 0, 0.3); --td-scroll-track-color: #fff; } :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: #e8e8e8; --td-gray-color-4: #ddd; --td-gray-color-5: #c6c6c6; --td-gray-color-6: #a6a6a6; --td-gray-color-7: #8b8b8b; --td-gray-color-8: #777; --td-gray-color-9: #5e5e5e; --td-gray-color-10: #4b4b4b; --td-gray-color-11: #393939; --td-gray-color-12: #2c2c2c; --td-gray-color-13: #242424; --td-gray-color-14: #181818; --td-font-white-1: rgba(255, 255, 255, 0.9); --td-font-white-2: rgba(255, 255, 255, 0.55); --td-font-white-3: rgba(255, 255, 255, 0.35); --td-font-white-4: rgba(255, 255, 255, 0.22); --td-font-gray-1: rgba(0, 0, 0, 0.9); --td-font-gray-2: rgba(0, 0, 0, 0.6); --td-font-gray-3: rgba(0, 0, 0, 0.4); --td-font-gray-4: rgba(0, 0, 0, 0.26); --td-brand-color: var(--td-brand-color-8); --td-warning-color: var(--td-warning-color-5); --td-error-color: var(--td-error-color-6); --td-success-color: var(--td-success-color-5); --td-brand-color-hover: var(--td-brand-color-7); --td-brand-color-focus: var(--td-brand-color-2); --td-brand-color-active: var(--td-brand-color-9); --td-brand-color-disabled: var(--td-brand-color-3); --td-brand-color-light: var(--td-brand-color-1); --td-brand-color-light-hover: var(--td-brand-color-2); --td-warning-color-hover: var(--td-warning-color-4); --td-warning-color-focus: var(--td-warning-color-2); --td-warning-color-active: var(--td-warning-color-6); --td-warning-color-disabled: var(--td-warning-color-3); --td-warning-color-light: var(--td-warning-color-1); --td-warning-color-light-hover: var(--td-warning-color-2); --td-error-color-hover: var(--td-error-color-5); --td-error-color-focus: var(--td-error-color-2); --td-error-color-active: var(--td-error-color-7); --td-error-color-disabled: var(--td-error-color-3); --td-error-color-light: var(--td-error-color-1); --td-error-color-light-hover: var(--td-error-color-2); --td-success-color-hover: var(--td-success-color-4); --td-success-color-focus: var(--td-success-color-2); --td-success-color-active: var(--td-success-color-6); --td-success-color-disabled: var(--td-success-color-3); --td-success-color-light: var(--td-success-color-1); --td-success-color-light-hover: var(--td-success-color-2); --td-mask-active: rgba(0, 0, 0, 0.4); --td-mask-disabled: rgba(0, 0, 0, 0.6); --td-mask-background: rgba(36, 36, 36, 0.96); --td-bg-color-page: var(--td-gray-color-14); --td-bg-color-container: var(--td-gray-color-13); --td-bg-color-container-hover: var(--td-gray-color-12); --td-bg-color-container-active: var(--td-gray-color-10); --td-bg-color-container-select: var(--td-gray-color-9); --td-bg-color-secondarycontainer: var(--td-gray-color-12); --td-bg-color-secondarycontainer-hover: var(--td-gray-color-11); --td-bg-color-secondarycontainer-active: var(--td-gray-color-9); --td-bg-color-component: var(--td-gray-color-11); --td-bg-color-component-hover: var(--td-gray-color-10); --td-bg-color-component-active: var(--td-gray-color-9); --td-bg-color-secondarycomponent: var(--td-gray-color-10); --td-bg-color-secondarycomponent-hover: var(--td-gray-color-9); --td-bg-color-secondarycomponent-active: var(--td-gray-color-8); --td-bg-color-component-disabled: var(--td-gray-color-12); --td-bg-color-specialcomponent: transparent; --td-text-color-primary: var(--td-font-white-1); --td-text-color-secondary: var(--td-font-white-2); --td-text-color-placeholder: var(--td-font-white-3); --td-text-color-disabled: var(--td-font-white-4); --td-text-color-anti: #fff; --td-text-color-brand: var(--td-brand-color-8); --td-text-color-link: var(--td-brand-color-8); --td-border-level-1-color: var(--td-gray-color-11); --td-component-stroke: var(--td-gray-color-11); --td-border-level-2-color: var(--td-gray-color-9); --td-component-border: var(--td-gray-color-9); --td-shadow-1: 0 4px 6px rgba(0, 0, 0, 0.06), 0 1px 10px rgba(0, 0, 0, 0.08), 0 2px 4px rgba(0, 0, 0, 0.12); --td-shadow-2: 0 8px 10px rgba(0, 0, 0, 0.12), 0 3px 14px rgba(0, 0, 0, 0.1), 0 5px 5px rgba(0, 0, 0, 0.16); --td-shadow-3: 0 16px 24px rgba(0, 0, 0, 0.14), 0 6px 30px rgba(0, 0, 0, 0.12), 0 8px 10px rgba(0, 0, 0, 0.2); --td-shadow-inset-top: inset 0 0.5px 0 #5e5e5e; --td-shadow-inset-right: inset 0.5px 0 0 #5e5e5e; --td-shadow-inset-bottom: inset 0 -0.5px 0 #5e5e5e; --td-shadow-inset-left: inset -0.5px 0 0 #5e5e5e; --td-table-shadow-color: rgba(0, 0, 0, 0.55); --td-scrollbar-color: rgba(255, 255, 255, 0.1); --td-scrollbar-hover-color: rgba(255, 255, 255, 0.3); --td-scroll-track-color: #333; } :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: 18px; --td-font-size-title-extraLarge: 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: 26px; --td-line-height-title-extraLarge: 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-title-extraLarge: 600 var(--td-font-size-title-extraLarge) / var(--td-line-height-title-extraLarge) 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); } :root { --td-size-1: 2px; --td-size-2: 4px; --td-size-3: 6px; --td-size-4: 8px; --td-size-5: 12px; --td-size-6: 16px; --td-size-7: 20px; --td-size-8: 24px; --td-size-9: 28px; --td-size-10: 32px; --td-size-11: 36px; --td-size-12: 40px; --td-size-13: 48px; --td-size-14: 56px; --td-size-15: 64px; --td-size-16: 72px; --td-comp-size-xxxs: var(--td-size-6); --td-comp-size-xxs: var(--td-size-7); --td-comp-size-xs: var(--td-size-8); --td-comp-size-s: var(--td-size-9); --td-comp-size-m: var(--td-size-10); --td-comp-size-l: var(--td-size-11); --td-comp-size-xl: var(--td-size-12); --td-comp-size-xxl: var(--td-size-13); --td-comp-size-xxxl: var(--td-size-14); --td-comp-size-xxxxl: var(--td-size-15); --td-comp-size-xxxxxl: var(--td-size-16); --td-pop-padding-s: var(--td-size-2); --td-pop-padding-m: var(--td-size-3); --td-pop-padding-l: var(--td-size-4); --td-pop-padding-xl: var(--td-size-5); --td-pop-padding-xxl: var(--td-size-6); --td-comp-paddingLR-xxs: var(--td-size-1); --td-comp-paddingLR-xs: var(--td-size-2); --td-comp-paddingLR-s: var(--td-size-4); --td-comp-paddingLR-m: var(--td-size-5); --td-comp-paddingLR-l: var(--td-size-6); --td-comp-paddingLR-xl: var(--td-size-8); --td-comp-paddingLR-xxl: var(--td-size-10); --td-comp-paddingTB-xxs: var(--td-size-1); --td-comp-paddingTB-xs: var(--td-size-2); --td-comp-paddingTB-s: var(--td-size-4); --td-comp-paddingTB-m: var(--td-size-5); --td-comp-paddingTB-l: var(--td-size-6); --td-comp-paddingTB-xl: var(--td-size-8); --td-comp-paddingTB-xxl: var(--td-size-10); --td-comp-margin-xxs: var(--td-size-1); --td-comp-margin-xs: var(--td-size-2); --td-comp-margin-s: var(--td-size-4); --td-comp-margin-m: var(--td-size-5); --td-comp-margin-l: var(--td-size-6); --td-comp-margin-xl: var(--td-size-7); --td-comp-margin-xxl: var(--td-size-8); --td-comp-margin-xxxl: var(--td-size-10); --td-comp-margin-xxxxl: var(--td-size-12); } @font-face { font-family: 'TencentSansW7'; src: url('data:application/font-woff;charset=utf-8;base64,d09GRgABAAAAAAusAA4AAAAAEJQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABGRlRNAAALkAAAABwAAAAchqPqzUdERUYAAAtwAAAAHgAAAB4AKQAbT1MvMgAAAbgAAABZAAAAYGmceoNjbWFwAAACYAAAAJcAAAHsPmfPZmdhc3AAAAtkAAAADAAAAAwACAAbZ2x5ZgAAAywAAAW8AAAG/Ivn/ztoZWFkAAABRAAAADYAAAA2E+AL5GhoZWEAAAF8AAAAIAAAACQIawJ9aG10eAAAAhQAAABMAAAATCG/Auxsb2NhAAADAAAAACwAAAAsDjIQIm1heHAAAAGcAAAAGgAAACAAfgBDbmFtZQAACOgAAAIUAAAEm0zGvtJwb3N0AAAK/AAAAGYAAAB/4wuGdnByZXAAAAL4AAAACAAAAAhwAgESAAEAAAABBR/xlpGAXw889QALA+gAAAAA2Ac3gwAAAADY+IxB//L/HAPPAwAAAAAIAAIAAAAAAAB42mNgZGBgWf7vFAMD84v/n/7vZD7PABRBAYIAwxQH7XjaY2BkYGAQZXBiYGEAAUYGGEiBUAAMEQDCAAB42mNgYepm2sPAysDA1MUUwcDA4A2hGeMYjBjNgKI8HMxMTCz8TCwLGJj2CzCAgRiI8PX382d0YGBMEmQ2+u/FcIJlOVA9CwMjSI6JlekwkFJgYAQAR1kL+QAAAAJYAHYAAAAAAU0AAAEEAAACUAAhAlYAFQJUACACKgAdAZUANgEUABUBYAAkA5wAFQINABsBqAA0AnAAKgJYACoD6ACF//YANP/yACN42mNgYGBmgGAZBkYGEHgG5DGC+SwMp4C0HIMAUISPQYEhiSGNIZMhl6GUoZJhgeIkfS6/N4GpQQuSBP//B+tMZEgByucwFGOT/7/4/6L/C/7P+z/z/7T/yffqLrJvVFu3Zm3xPJBtcgz4ADPFkIGRDWgMIcBAIWBhZWBj52Bg4GRg4OIGi/Dw8gFJfgYqA/JcCgA99Se8ALgB/4W4AAGNAAAAFAAUABQAFABSAIIAsgD6ASIBOAFYAYIBxgHwAhQCRAJaAogCygMYA3542k1Ua2xTZRj+LmtP23Vdz2lPz3pZb2dr1+u2nq2H0d3Z2OhI5mC4AZMBo0gM98E0oRn1AqgoIYDG4BAkakDkJ4iyiCZGAiISUH8YjIQfEhNUMCoJrme+bTfkx/nxveec53ne533eDxE0Nn0V/0V2I4oYhATWw1ZKrDiGx5Vfzp6NkXPZ7mH8ECGCPNNXiZWokANVIYRjFt7MUI83iuvrWnAzTWA5Xl/nC2G/SZJFr7oUq3mzBaf7F5S0Kt+F59i1aq0j0tbwJmXcwUtsz3HHhEtQaYr0RFUbL0sqB8yRClvcG2uwa7hKg4VLKdFjZmeEN5SwwM0Dd4DcRaXAXuAuxQYqekwSIxRoqRRrxjLevrK/RNCUhXt7lYevpQMf6StjW1sz/gCrIqqm+Z7krsjCmJU67/zexrvMykE+CniA7wb8oUf4EhW9vtm2qGQSvQY808+t9Ov/5ih0zlhfyytfbGodd/ht2rJiH7k7dTtP0NQTYpUo3qDzSnsSVpc5j18O+DzRIzeqyel34nwDOISZHGoCM6I3SvKMRJppKM8pxeIy3tbU4S4y6Oc231Sp3OFLgXMV7dV2xq8L9K9IUZvY5XAZi4wfms2U6K21PoHvnVfvchitXEorhH2O4K253RUTnIYt0Xv4ITanB6M4zPwm9GuBQ4GIEaloEmVJzvXM4JeqXaxWfYg7tCi9qIddqNZZg53yKEv2lLgkEWaDr6fERHfEnEL5/mA+uJzcLmTIJEsMNUl0t5AR7o+kR8jqTCa7nsjZS3nuCvg2DtwcpC3ftQzfgg1ODMRfBjt8eiP8ZLAE7HNDsRJPUKhYTmqy13osvJGm4H/gomsgh8Ksk2oGpM+kAHqAh0wmuitpSWO6SWer2NOX7vu8D2SouFCACSSVk3hgjmBllRp8Takhck6THTT9DZjVoMkPprfgmSE8igHzKNOJ//MX4X4rN6m0VF022lan02g4R11DNngDahqoPQe1YoZ31SRiKWN5fammqNgddMiRcNheAoXIbKGlKsoXo7w3daDjFDmNbOAiM+uJOONSbjoSIzEPI1owpyO0oL6twlAcSbI9zrTzKIePTdeaeZamOHe4zJtA06kTJ3J+BSF7vdCbKZ/swsbGZzyHZvCN9BrlzmN+vUVU2UsFq/CAcjJnVV5bcNpB2gCnPI9jILDquZ1rwflleQzwqx1ri8PJzh+4K3GnUcPsg32pSdfAJmYA+dPm+a61rBj0N3Z5ktio3Gu1uAqZ3IVW0R2Ar4GDwIiyp97jJ5MXLuzbn71IGvYT1fXrR545kvdp+p/pNB0nvyI7QiqR+A2UEZupLPmjOK/KIlg4On741U6xf3hj49Ha0e2bov3tVFd6oOx2uVvb9dlLeOTjxt1797XUvDBx+snTOv1Sk/2y0g7YRTCDNP2WIqSHhLqQCHQGnEuYmpHhhvFYBNHnV8UsUPJLpjjwYZNA8ZC+yv7Uxu5QiG/vMWOfNzzq9uH7XqFoyz3byRWUv1ClnNowsoqi+CYp248fhN0TC94YXrSkYyRod03dWkYOmpdOfUAetGWTiE7/CRomQYML+VG0kHOG5AjjpjjE0kAYMc7JubMsqZnK3GvqMQmNOHcR4u9t5Woai31t3xXxYVrcaZQXt+5cOWZZV7ZXp94Io6u1C5Q+rZzY+pP62YEdZEmpx6QcUb4ZnMJ2nXbs2uWtb+P57w6sSoYytQYnl62juhVEnT1e2HURtF0EbQnUBsrAD9AADglwhfgLHkWxX2TiMqPOeyQzftinXHjhbVwuJVIdiOY9fvBRstDzyh9Ys6B6W2h0HnvO85DbvMsa2xJhNPgiPzBkaN4W/NF+0PaOd/ug7Yz+DNfVp3/v5+Jx8yRdT3F5dLMorLXik6PrnhhYfKAxM/hyb0Oanycm3+86bHMPC6JyZfB8YJnN8sngi4xqqdq3nN0//vzOTNXq5YsR+g8984WfeNq1Us1qFEEQ/npnk0X8IQGJIjnUSRLYLLt7MMlFCHvNKRvMuTPTmZ1kdib0zAY3ePMFfAAvigi5+Ry+gA8iiOLFr3tbTFZWcnGgu76qrvqqpqoAPMQ3KMy+A3wMWOGBehRwAy31LOAIayoPuEmfdwEv4Z76HPAy7quvAbfwqvEz4BXcjd4EvIpG9J5sqnmH2gfP7LDCOn4E3CD/04AjtNXzgJtYV68DXsJj9SngZTxRXwJu4XtDBbyCtehlwKtoRm8xQIlzTGGRIcUINQRXPH100cMOtgLape0QBgVif9dBjxlTkCPnSckj2MCQNudzGeQmrS5PB22ifcYmxII9RuWUf3JXXjOUhvKCt/PEoDyf2iwd1XIl/W5vZ4vXrhyaIjZFTRmPijIv06lsDEemuOTZlEHZact+nXRkL8/FR1diTWXshUnIefNnhtCULv0Rtvk4ox7qopKjbbcNhhVOWK1mXTgw6STX9t8kMh91k1RuRfJXJS98Zyp2rKSbcDIdzqfPB2OrrCyk1+n2F3HOMzrC+aFmPrcOg0i9XvukbhhCbPmaUBv73zqjrcTJf1gPV7PL6PK4yGN6L6oq882IvaWm/0w/ZfOt9014x3yZta1yS/V7fbJKNBcjzaraWJNIbXVixtqeSXly6x3TRSJjPZVjc50qKyQ2ttaUpxObVUkW15xRtXD9rg8Hs3FxRr8ATJnl93jaY2BiAIP/zQxGDNiAKBAzMjAxMjG4MLgyuDN4MHgy+DD4MwQwhDGEM0QwxDAyM7IwsjKyMbKzl+ZlGhgYGHIlFhXllxdlpmeUgISM3AwcQbSJq6sziDY1cjQA0WZGhoYAgBwU3AAAAAEAAgAIAAr//wAPAAEAAAAMAAAAFgAAAAIAAQADABQAAQAEAAAAAgAAAAAAAAABAAAAANWkJwgAAAAA2Ac3gwAAAADY+IxB') format('woff'); font-weight: normal; font-style: normal; } body { color: var(--td-text-color-secondary); font: var(--td-font-body-medium); font-family: -apple-system, BlinkMacSystemFont, var(--td-font-family); -webkit-font-smoothing: antialiased; padding: 0; margin: 0; } pre { font-family: var(--td-font-family); } ul, dl, li, dd, dt { margin: 0; padding: 0; list-style: none; } figure, h1, h2, h3, h4, h5, h6, p { margin: 0; } * { box-sizing: border-box; } .text-center { text-align: center; } .list-group-striped > .list-group-item { border-left: 0; border-right: 0; border-radius: 0; padding-left: 0; padding-right: 0; } .list-group { padding-left: 0; list-style: none; } .list-group-item { border-bottom: 1px solid #e7eaec; border-top: 1px solid #e7eaec; margin-bottom: -1px; padding: 11px 0; font-size: 13px; } .pull-right { float: right !important; } .clearfix::after { visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0; } /* tree border */ .tree-border { margin-top: 5px; border: 1px solid #e5e6e7; background: #FFF none; border-radius: 4px; width: 100%; } .overlay-options { display: inline-block !important; font-size: 18px !important; } .content-scrollbar { overflow-y: scroll; } .content-scrollbar::-webkit-scrollbar { width: 12px; background: transparent; } .content-scrollbar::-webkit-scrollbar-thumb { min-height: 40px; border-radius: 6px; border: 3px solid transparent; background-clip: content-box; background-color: var(--td-scrollbar-color); } .dialog-content-max-height { max-height: calc(100vh - var(--td-comp-paddingTB-xxl) - var(--td-comp-paddingTB-l) - 24px - 140px); } .gen-option > span { width: 100%; } .tox-tinymce-aux { z-index: 3000 !important; } .form-detail .t-form__label { color: var(--td-text-color-placeholder); } .t-image-viewer-preview-image .t-image-viewer__modal-pic .t-image-viewer__modal-box .t-image-viewer__modal-image { -webkit-user-select: none; /* Safari */ -moz-user-select: none; /* Firefox */ -ms-user-select: none; /* IE10+/Edge */ user-select: none; /* Standard syntax */ } /* 悬浮底部操作栏样式 - 在容器内悬浮 */ .floating-action-footer { position: sticky; /* 使用 sticky 定位 */ bottom: 1px; left: 0; right: 0; background: var(--td-bg-color-container); border: 1px solid var(--td-border-level-1-color); border-radius: 8px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); margin-top: 20px; z-index: 100; width: 100%; /* 宽度100% */ } .floating-action-footer .action-content { padding: 16px 20px; display: flex; justify-content: space-between; align-items: center; gap: 16px; } .t-dialog__wrap .t-dialog__position.t-dialog--top { padding-top: 18vh !important; } /* Make clicks pass-through */ #nprogress { pointer-events: none; } #nprogress .bar { background: #29d; position: fixed; z-index: 1031; top: 0; left: 0; width: 100%; height: 2px; } /* Fancy blur effect */ #nprogress .peg { display: block; position: absolute; right: 0px; width: 100px; height: 100%; box-shadow: 0 0 10px #29d, 0 0 5px #29d; opacity: 1.0; -webkit-transform: rotate(3deg) translate(0px, -4px); -ms-transform: rotate(3deg) translate(0px, -4px); transform: rotate(3deg) translate(0px, -4px); } /* Remove these to get rid of the spinner */ #nprogress .spinner { display: block; position: fixed; z-index: 1031; top: 15px; right: 15px; } #nprogress .spinner-icon { width: 18px; height: 18px; box-sizing: border-box; border: solid 2px transparent; border-top-color: #29d; border-left-color: #29d; border-radius: 50%; -webkit-animation: nprogress-spinner 400ms linear infinite; animation: nprogress-spinner 400ms linear infinite; } .nprogress-custom-parent { overflow: hidden; position: relative; } .nprogress-custom-parent #nprogress .spinner, .nprogress-custom-parent #nprogress .bar { position: absolute; } @-webkit-keyframes nprogress-spinner { 0% { -webkit-transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); } } @keyframes nprogress-spinner { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } @keyframes t-fade-in { from { opacity: 0; } to { opacity: 1; } } @keyframes t-fade-out { from { opacity: 1; } to { opacity: 0; } } @keyframes t-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } .t-icon-loading { animation: t-spin 1s linear infinite; } @keyframes t-zoom-out { from { transform: scale(0.2); } to { transform: scale(1); } } .t-loading { font: var(--td-font-body-medium); color: var(--td-text-color-primary); box-sizing: border-box; margin: 0; padding: 0; list-style: none; position: relative; color: var(--td-brand-color); font-size: var(--td-comp-size-l); } .t-loading--lock { overflow: hidden; } .t-loading.t-size-s { font-size: var(--td-comp-size-xxxs); } .t-loading.t-size-l { font-size: var(--td-comp-size-xxxl); } .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: inline-flex; align-items: center; vertical-align: middle; 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%; z-index: 3500; } .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: var(--td-comp-margin-xs); } .t-loading__gradient { display: inline-flex; justify-content: center; align-items: center; vertical-align: middle; } .t-loading__gradient-conic { width: 100%; height: 100%; border-radius: var(--td-radius-circle); /* stylelint-disable-next-line color-no-hex */ background: conic-gradient(from 90deg at 50% 50%, #fff 0deg, currentcolor 360deg); /* stylelint-disable-next-line */ -webkit-mask: radial-gradient(transparent calc(50% - 0.5px), #fff 50%); /* stylelint-disable-next-line color-no-hex */ mask: radial-gradient(transparent calc(50% - 0.5px), #fff 50%); } .t-button { font: var(--td-font-body-medium); color: var(--td-text-color-primary); 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: inline-flex; align-items: center; justify-content: center; vertical-align: middle; white-space: nowrap; border-radius: var(--td-radius-default); transition: all 0.2s linear; touch-action: manipulation; text-decoration: none; } .t-button .t-button__text, .t-button .t-icon { position: relative; z-index: 1; display: inline-flex; } .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: inline-flex; margin-left: 8px; } .t-button--variant-base { color: var(--td-text-color-anti); height: var(--td-comp-size-m); font: var(--td-font-body-medium); padding-left: calc(var(--td-comp-paddingLR-l) - 1px); padding-right: calc(var(--td-comp-paddingLR-l) - 1px); background-color: var(--td-bg-color-component); border-color: var(--td-bg-color-component); color: var(--td-text-color-primary); } .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, .t-button--variant-base:focus-visible { background-color: var(--td-bg-color-component-hover); } .t-button--variant-base.t-is-loading { background-color: var(--td-bg-color-component-disabled); } .t-button--variant-base.t-is-disabled { background-color: var(--td-bg-color-component-disabled); } .t-button--variant-base:hover, .t-button--variant-base:focus-visible { border-color: var(--td-bg-color-component-hover); } .t-button--variant-base.t-is-loading { border-color: var(--td-bg-color-component-disabled); } .t-button--variant-base.t-is-disabled { border-color: var(--td-bg-color-component-disabled); } .t-button--variant-base:hover, .t-button--variant-base:focus-visible { color: var(--td-text-color-primary); } .t-button--variant-base.t-is-loading { color: var(--td-text-color-disabled); } .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, .t-button--variant-base.t-button--theme-primary:focus-visible { background-color: var(--td-brand-color-hover); } .t-button--variant-base.t-button--theme-primary.t-is-loading { background-color: var(--td-brand-color-disabled); } .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, .t-button--variant-base.t-button--theme-primary:focus-visible { border-color: var(--td-brand-color-hover); } .t-button--variant-base.t-button--theme-primary.t-is-loading { border-color: var(--td-brand-color-disabled); } .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, .t-button--variant-base.t-button--theme-success:focus-visible { background-color: var(--td-success-color-hover); } .t-button--variant-base.t-button--theme-success.t-is-loading { background-color: var(--td-success-color-disabled); } .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, .t-button--variant-base.t-button--theme-success:focus-visible { border-color: var(--td-success-color-hover); } .t-button--variant-base.t-button--theme-success.t-is-loading { border-color: var(--td-success-color-disabled); } .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, .t-button--variant-base.t-button--theme-warning:focus-visible { background-color: var(--td-warning-color-hover); } .t-button--variant-base.t-button--theme-warning.t-is-loading { background-color: var(--td-warning-color-disabled); } .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, .t-button--variant-base.t-button--theme-warning:focus-visible { border-color: var(--td-warning-color-hover); } .t-button--variant-base.t-button--theme-warning.t-is-loading { border-color: var(--td-warning-color-disabled); } .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, .t-button--variant-base.t-button--theme-danger:focus-visible { background-color: var(--td-error-color-hover); } .t-button--variant-base.t-button--theme-danger.t-is-loading { background-color: var(--td-error-color-disabled); } .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, .t-button--variant-base.t-button--theme-danger:focus-visible { border-color: var(--td-error-color-hover); } .t-button--variant-base.t-button--theme-danger.t-is-loading { border-color: var(--td-error-color-disabled); } .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, .t-button--variant-base.t-button--ghost:focus-visible { 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, .t-button--variant-base.t-button--ghost:focus-visible { 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, .t-button--variant-base.t-button--ghost:focus-visible { 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, .t-button--variant-base.t-button--ghost.t-button--theme-primary:focus-visible { 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, .t-button--variant-base.t-button--ghost.t-button--theme-primary:focus-visible { 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, .t-button--variant-base.t-button--ghost.t-button--theme-success:focus-visible { 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, .t-button--variant-base.t-button--ghost.t-button--theme-success:focus-visible { 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, .t-button--variant-base.t-button--ghost.t-button--theme-warning:focus-visible { 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, .t-button--variant-base.t-button--ghost.t-button--theme-warning:focus-visible { 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, .t-button--variant-base.t-button--ghost.t-button--theme-danger:focus-visible { 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, .t-button--variant-base.t-button--ghost.t-button--theme-danger:focus-visible { 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-base.t-is-loading:not(.t-button--variant-base.t-button--ghost).t-button--theme-default { color: var(--td-text-color-primary); } .t-button--variant-outline { height: var(--td-comp-size-m); font: var(--td-font-body-medium); padding-left: calc(var(--td-comp-paddingLR-l) - 1px); padding-right: calc(var(--td-comp-paddingLR-l) - 1px); color: var(--td-text-color-primary); background-color: var(--td-bg-color-specialcomponent); border-color: var(--td-border-level-2-color); } .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, .t-button--variant-outline:focus-visible { color: var(--td-brand-color-hover); } .t-button--variant-outline.t-is-loading { color: var(--td-text-color-disabled); } .t-button--variant-outline.t-is-disabled { color: var(--td-text-color-disabled); } .t-button--variant-outline:hover, .t-button--variant-outline:focus-visible { background-color: var(--td-bg-color-specialcomponent); } .t-button--variant-outline.t-is-loading { background-color: var(--td-bg-color-component-disabled); } .t-button--variant-outline.t-is-disabled { background-color: var(--td-bg-color-component-disabled); } .t-button--variant-outline:hover, .t-button--variant-outline:focus-visible { 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, .t-button--variant-outline.t-button--theme-primary:focus-visible { color: var(--td-brand-color-hover); } .t-button--variant-outline.t-button--theme-primary.t-is-loading { color: var(--td-brand-color-disabled); } .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, .t-button--variant-outline.t-button--theme-primary:focus-visible { border-color: var(--td-brand-color-hover); } .t-button--variant-outline.t-button--theme-primary.t-is-loading { border-color: var(--td-brand-color-disabled); } .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, .t-button--variant-outline.t-button--theme-success:focus-visible { color: var(--td-success-color-hover); } .t-button--variant-outline.t-button--theme-success.t-is-loading { color: var(--td-success-color-disabled); } .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, .t-button--variant-outline.t-button--theme-success:focus-visible { border-color: var(--td-success-color-hover); } .t-button--variant-outline.t-button--theme-success.t-is-loading { border-color: var(--td-success-color-disabled); } .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, .t-button--variant-outline.t-button--theme-warning:focus-visible { color: var(--td-warning-color-hover); } .t-button--variant-outline.t-button--theme-warning.t-is-loading { color: var(--td-warning-color-disabled); } .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, .t-button--variant-outline.t-button--theme-warning:focus-visible { border-color: var(--td-warning-color-hover); } .t-button--variant-outline.t-button--theme-warning.t-is-loading { border-color: var(--td-warning-color-disabled); } .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, .t-button--variant-outline.t-button--theme-danger:focus-visible { color: var(--td-error-color-hover); } .t-button--variant-outline.t-button--theme-danger.t-is-loading { color: var(--td-error-color-disabled); } .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, .t-button--variant-outline.t-button--theme-danger:focus-visible { border-color: var(--td-error-color-hover); } .t-button--variant-outline.t-button--theme-danger.t-is-loading { border-color: var(--td-error-color-disabled); } .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, .t-button--variant-outline.t-button--ghost:focus-visible { 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, .t-button--variant-outline.t-button--ghost:focus-visible { 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, .t-button--variant-outline.t-button--ghost:focus-visible { 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, .t-button--variant-outline.t-button--ghost.t-button--theme-primary:focus-visible { 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, .t-button--variant-outline.t-button--ghost.t-button--theme-primary:focus-visible { 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, .t-button--variant-outline.t-button--ghost.t-button--theme-success:focus-visible { 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, .t-button--variant-outline.t-button--ghost.t-button--theme-success:focus-visible { 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, .t-button--variant-outline.t-button--ghost.t-button--theme-warning:focus-visible { 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, .t-button--variant-outline.t-button--ghost.t-button--theme-warning:focus-visible { 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, .t-button--variant-outline.t-button--ghost.t-button--theme-danger:focus-visible { 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, .t-button--variant-outline.t-button--ghost.t-button--theme-danger:focus-visible { 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-outline.t-is-loading:not(.t-button--variant-outline.t-button--ghost) { color: var(--td-text-color-primary); } .t-button--variant-outline.t-is-loading:not(.t-button--variant-outline.t-button--ghost).t-button--theme-primary { color: var(--td-brand-color); background-color: transparent; } .t-button--variant-outline.t-is-loading:not(.t-button--variant-outline.t-button--ghost).t-button--theme-success { color: var(--td-success-color); background-color: transparent; } .t-button--variant-outline.t-is-loading:not(.t-button--variant-outline.t-button--ghost).t-button--theme-warning { color: var(--td-warning-color); background-color: transparent; } .t-button--variant-outline.t-is-loading:not(.t-button--variant-outline.t-button--ghost).t-button--theme-danger { color: var(--td-error-color); background-color: transparent; } .t-button--variant-dashed { height: var(--td-comp-size-m); font: var(--td-font-body-medium); padding-left: calc(var(--td-comp-paddingLR-l) - 1px); padding-right: calc(var(--td-comp-paddingLR-l) - 1px); color: var(--td-text-color-primary); background-color: var(--td-bg-color-specialcomponent); border-color: var(--td-border-level-2-color); border-style: dashed; } .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, .t-button--variant-dashed:focus-visible { color: var(--td-brand-color-hover); } .t-button--variant-dashed.t-is-loading { color: var(--td-text-color-disabled); } .t-button--variant-dashed.t-is-disabled { color: var(--td-text-color-disabled); } .t-button--variant-dashed:hover, .t-button--variant-dashed:focus-visible { background-color: var(--td-bg-color-specialcomponent); } .t-button--variant-dashed.t-is-loading { background-color: var(--td-bg-color-component-disabled); } .t-button--variant-dashed.t-is-disabled { background-color: var(--td-bg-color-component-disabled); } .t-button--variant-dashed:hover, .t-button--variant-dashed:focus-visible { 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, .t-button--variant-dashed.t-button--theme-primary:focus-visible { color: var(--td-brand-color-hover); } .t-button--variant-dashed.t-button--theme-primary.t-is-loading { color: var(--td-brand-color-disabled); } .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, .t-button--variant-dashed.t-button--theme-primary:focus-visible { border-color: var(--td-brand-color-hover); } .t-button--variant-dashed.t-button--theme-primary.t-is-loading { border-color: var(--td-brand-color-disabled); } .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, .t-button--variant-dashed.t-button--theme-success:focus-visible { color: var(--td-success-color-hover); } .t-button--variant-dashed.t-button--theme-success.t-is-loading { color: var(--td-success-color-disabled); } .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, .t-button--variant-dashed.t-button--theme-success:focus-visible { border-color: var(--td-success-color-hover); } .t-button--variant-dashed.t-button--theme-success.t-is-loading { border-color: var(--td-success-color-disabled); } .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, .t-button--variant-dashed.t-button--theme-warning:focus-visible { color: var(--td-warning-color-hover); } .t-button--variant-dashed.t-button--theme-warning.t-is-loading { color: var(--td-warning-color-disabled); } .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, .t-button--variant-dashed.t-button--theme-warning:focus-visible { border-color: var(--td-warning-color-hover); } .t-button--variant-dashed.t-button--theme-warning.t-is-loading { border-color: var(--td-warning-color-disabled); } .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, .t-button--variant-dashed.t-button--theme-danger:focus-visible { color: var(--td-error-color-hover); } .t-button--variant-dashed.t-button--theme-danger.t-is-loading { color: var(--td-error-color-disabled); } .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, .t-button--variant-dashed.t-button--theme-danger:focus-visible { border-color: var(--td-error-color-hover); } .t-button--variant-dashed.t-button--theme-danger.t-is-loading { border-color: var(--td-error-color-disabled); } .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, .t-button--variant-dashed.t-button--ghost:focus-visible { 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, .t-button--variant-dashed.t-button--ghost:focus-visible { 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, .t-button--variant-dashed.t-button--ghost:focus-visible { 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, .t-button--variant-dashed.t-button--ghost.t-button--theme-primary:focus-visible { 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, .t-button--variant-dashed.t-button--ghost.t-button--theme-primary:focus-visible { 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, .t-button--variant-dashed.t-button--ghost.t-button--theme-success:focus-visible { 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, .t-button--variant-dashed.t-button--ghost.t-button--theme-success:focus-visible { 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, .t-button--variant-dashed.t-button--ghost.t-button--theme-warning:focus-visible { 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, .t-button--variant-dashed.t-button--ghost.t-button--theme-warning:focus-visible { 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, .t-button--variant-dashed.t-button--ghost.t-button--theme-danger:focus-visible { 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, .t-button--variant-dashed.t-button--ghost.t-button--theme-danger:focus-visible { 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-dashed.t-is-loading:not(.t-button--variant-dashed.t-button--ghost) { color: var(--td-text-color-primary); } .t-button--variant-dashed.t-is-loading:not(.t-button--variant-dashed.t-button--ghost).t-button--theme-primary { color: var(--td-brand-color); background-color: transparent; } .t-button--variant-dashed.t-is-loading:not(.t-button--variant-dashed.t-button--ghost).t-button--theme-success { color: var(--td-success-color); background-color: transparent; } .t-button--variant-dashed.t-is-loading:not(.t-button--variant-dashed.t-button--ghost).t-button--theme-warning { color: var(--td-warning-color); background-color: transparent; } .t-button--variant-dashed.t-is-loading:not(.t-button--variant-dashed.t-button--ghost).t-button--theme-danger { color: var(--td-error-color); background-color: transparent; } .t-button--variant-text { height: var(--td-comp-size-m); font: var(--td-font-body-medium); padding-left: calc(var(--td-comp-paddingLR-l) - 1px); padding-right: calc(var(--td-comp-paddingLR-l) - 1px); color: var(--td-text-color-primary); background-color: transparent; border-color: transparent; } .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, .t-button--variant-text:focus-visible { color: var(--td-text-color-primary); } .t-button--variant-text.t-is-loading { color: var(--td-text-color-disabled); } .t-button--variant-text.t-is-disabled { color: var(--td-text-color-disabled); } .t-button--variant-text:hover, .t-button--variant-text:focus-visible { 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, .t-button--variant-text:focus-visible { 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, .t-button--variant-text.t-button--theme-primary:focus-visible { color: var(--td-brand-color-hover); } .t-button--variant-text.t-button--theme-primary.t-is-loading { color: var(--td-brand-color-disabled); } .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, .t-button--variant-text.t-button--theme-success:focus-visible { color: var(--td-success-color-hover); } .t-button--variant-text.t-button--theme-success.t-is-loading { color: var(--td-success-color-disabled); } .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, .t-button--variant-text.t-button--theme-warning:focus-visible { color: var(--td-warning-color-hover); } .t-button--variant-text.t-button--theme-warning.t-is-loading { color: var(--td-warning-color-disabled); } .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, .t-button--variant-text.t-button--theme-danger:focus-visible { color: var(--td-error-color-hover); } .t-button--variant-text.t-button--theme-danger.t-is-loading { color: var(--td-error-color-disabled); } .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, .t-button--variant-text.t-button--ghost:focus-visible { 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, .t-button--variant-text.t-button--ghost.t-button--theme-primary:focus-visible { 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, .t-button--variant-text.t-button--ghost.t-button--theme-success:focus-visible { 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, .t-button--variant-text.t-button--ghost.t-button--theme-warning:focus-visible { 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, .t-button--variant-text.t-button--ghost.t-button--theme-danger:focus-visible { 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--variant-text.t-is-loading:not(.t-button--variant-text.t-button--ghost) { color: var(--td-text-color-primary); } .t-button--variant-text.t-is-loading:not(.t-button--variant-text.t-button--ghost).t-button--theme-primary { color: var(--td-brand-color); } .t-button--variant-text.t-is-loading:not(.t-button--variant-text.t-button--ghost).t-button--theme-success { color: var(--td-success-color); } .t-button--variant-text.t-is-loading:not(.t-button--variant-text.t-button--ghost).t-button--theme-warning { color: var(--td-warning-color); } .t-button--variant-text.t-is-loading:not(.t-button--variant-text.t-button--ghost).t-button--theme-danger { color: var(--td-error-color); } .t-button.t-is-loading, .t-button.t-is-disabled { cursor: not-allowed; } .t-button.t-size-s { height: var(--td-comp-size-xs); font: var(--td-font-body-small); padding-left: calc(var(--td-comp-paddingLR-s) - 1px); padding-right: calc(var(--td-comp-paddingLR-s) - 1px); } .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: var(--td-comp-size-xl); font: var(--td-font-body-large); padding-left: calc(var(--td-comp-paddingLR-xl) - 1px); padding-right: calc(var(--td-comp-paddingLR-xl) - 1px); } .t-button.t-size-l .t-icon, .t-button.t-size-l .t-loading { font-size: var(--td-font-size-title-large); } .t-button--shape-square { width: var(--td-comp-size-m); padding: 0; } .t-button--shape-square.t-size-s { width: var(--td-comp-size-xs); padding: 0; } .t-button--shape-square.t-size-l { width: var(--td-comp-size-xl); padding: 0; } .t-button--shape-round { border-radius: var(--td-radius-round); } .t-button--shape-round.t-size-s { border-radius: calc(var(--td-comp-size-xs) / 2); } .t-button--shape-round.t-size-l { border-radius: calc(var(--td-comp-size-xl) / 2); } .t-button--shape-circle { width: var(--td-comp-size-m); padding: 0; text-align: center; border-radius: calc(var(--td-comp-size-m) / 2); } .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: var(--td-comp-size-xs); border-radius: calc(var(--td-comp-size-xs) / 2); } .t-button--shape-circle.t-size-l { width: var(--td-comp-size-xl); padding: 0; border-radius: calc(var(--td-comp-size-xl) / 2); } .t-button.t-size-full-width { display: flex; width: 100%; } .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); } @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-link { display: inline-flex; cursor: pointer; align-items: center; position: relative; text-decoration: none; outline: none; padding: 0; transition: all 0.2s linear; font: var(--td-font-link-medium); } .t-link .t-link__prefix-icon { margin-right: var(--td-comp-margin-s); display: flex; } .t-link .t-link__suffix-icon { margin-left: var(--td-comp-margin-s); display: flex; } .t-link.t-size-s { font: var(--td-font-link-small); } .t-link.t-size-s .t-link__prefix-icon { margin-right: var(--td-comp-margin-xs); display: flex; } .t-link.t-size-s .t-link__suffix-icon { margin-left: var(--td-comp-margin-xs); display: flex; } .t-link.t-size-l { font: var(--td-font-link-large); } .t-link.t-size-l .t-link__prefix-icon { margin-right: var(--td-comp-margin-m); display: flex; } .t-link.t-size-l .t-link__suffix-icon { margin-left: var(--td-comp-margin-m); display: flex; } .t-link--theme-default { color: var(--td-text-color-primary); } .t-link--theme-default:active { color: var(--td-brand-color-active); } .t-link--theme-default.t-link--hover-underline::after { content: ""; position: absolute; left: 0; right: 0; height: 0; bottom: 0; border-bottom: 1px solid var(--td-text-color-primary); opacity: 0; transition: all 0.2s linear; } .t-link--theme-default.t-link--hover-underline:hover::after { opacity: 1; } .t-link--theme-default.t-link--hover-underline:active::after { opacity: 1; border-color: var(--td-brand-color-active); } .t-link--theme-default.t-link--hover-color:hover { color: var(--td-brand-color-hover); } .t-link--theme-default.t-link--hover-color.t-is-underline:hover::after { border-color: var(--td-brand-color-hover); } .t-link--theme-default.t-link--hover-color.t-is-underline:active::after { border-color: var(--td-brand-color-active); } .t-link--theme-default.t-link--hover-color:active { color: var(--td-brand-color-active); } .t-link--theme-default.t-is-underline::after { content: ""; position: absolute; left: 0; right: 0; height: 0; bottom: 0; opacity: 1; border-bottom: 1px solid var(--td-text-color-primary); transition: all 0.2s linear; } .t-link--theme-default.t-is-disabled { cursor: not-allowed; color: var(--td-text-color-disabled); } .t-link--theme-default.t-is-disabled:hover, .t-link--theme-default.t-is-disabled:active { color: var(--td-text-color-disabled); } .t-link--theme-default.t-is-disabled.t-is-underline::after { border-color: var(--td-text-color-disabled); } .t-link--theme-primary { color: var(--td-brand-color); } .t-link--theme-primary:active { color: var(--td-brand-color-active); } .t-link--theme-primary.t-link--hover-underline::after { content: ""; position: absolute; left: 0; right: 0; height: 0; bottom: 0; border-bottom: 1px solid var(--td-brand-color); opacity: 0; transition: all 0.2s linear; } .t-link--theme-primary.t-link--hover-underline:hover::after { opacity: 1; } .t-link--theme-primary.t-link--hover-underline:active::after { opacity: 1; border-color: var(--td-brand-color-active); } .t-link--theme-primary.t-link--hover-color:hover { color: var(--td-brand-color-hover); } .t-link--theme-primary.t-link--hover-color.t-is-underline:hover::after { border-color: var(--td-brand-color-hover); } .t-link--theme-primary.t-link--hover-color.t-is-underline:active::after { border-color: var(--td-brand-color-active); } .t-link--theme-primary.t-link--hover-color:active { color: var(--td-brand-color-active); } .t-link--theme-primary.t-is-underline::after { content: ""; position: absolute; left: 0; right: 0; height: 0; bottom: 0; opacity: 1; border-bottom: 1px solid var(--td-brand-color); transition: all 0.2s linear; } .t-link--theme-primary.t-is-disabled { cursor: not-allowed; color: var(--td-brand-color-disabled); } .t-link--theme-primary.t-is-disabled:hover, .t-link--theme-primary.t-is-disabled:active { color: var(--td-brand-color-disabled); } .t-link--theme-primary.t-is-disabled.t-is-underline::after { border-color: var(--td-brand-color-disabled); } .t-link--theme-success { color: var(--td-success-color); } .t-link--theme-success:active { color: var(--td-success-color-active); } .t-link--theme-success.t-link--hover-underline::after { content: ""; position: absolute; left: 0; right: 0; height: 0; bottom: 0; border-bottom: 1px solid var(--td-success-color); opacity: 0; transition: all 0.2s linear; } .t-link--theme-success.t-link--hover-underline:hover::after { opacity: 1; } .t-link--theme-success.t-link--hover-underline:active::after { opacity: 1; border-color: var(--td-success-color-active); } .t-link--theme-success.t-link--hover-color:hover { color: var(--td-success-color-hover); } .t-link--theme-success.t-link--hover-color.t-is-underline:hover::after { border-color: var(--td-success-color-hover); } .t-link--theme-success.t-link--hover-color.t-is-underline:active::after { border-color: var(--td-success-color-active); } .t-link--theme-success.t-link--hover-color:active { color: var(--td-success-color-active); } .t-link--theme-success.t-is-underline::after { content: ""; position: absolute; left: 0; right: 0; height: 0; bottom: 0; opacity: 1; border-bottom: 1px solid var(--td-success-color); transition: all 0.2s linear; } .t-link--theme-success.t-is-disabled { cursor: not-allowed; color: var(--td-success-color-disabled); } .t-link--theme-success.t-is-disabled:hover, .t-link--theme-success.t-is-disabled:active { color: var(--td-success-color-disabled); } .t-link--theme-success.t-is-disabled.t-is-underline::after { border-color: var(--td-success-color-disabled); } .t-link--theme-danger { color: var(--td-error-color); } .t-link--theme-danger:active { color: var(--td-error-color-active); } .t-link--theme-danger.t-link--hover-underline::after { content: ""; position: absolute; left: 0; right: 0; height: 0; bottom: 0; border-bottom: 1px solid var(--td-error-color); opacity: 0; transition: all 0.2s linear; } .t-link--theme-danger.t-link--hover-underline:hover::after { opacity: 1; } .t-link--theme-danger.t-link--hover-underline:active::after { opacity: 1; border-color: var(--td-error-color-active); } .t-link--theme-danger.t-link--hover-color:hover { color: var(--td-error-color-hover); } .t-link--theme-danger.t-link--hover-color.t-is-underline:hover::after { border-color: var(--td-error-color-hover); } .t-link--theme-danger.t-link--hover-color.t-is-underline:active::after { border-color: var(--td-error-color-active); } .t-link--theme-danger.t-link--hover-color:active { color: var(--td-error-color-active); } .t-link--theme-danger.t-is-underline::after { content: ""; position: absolute; left: 0; right: 0; height: 0; bottom: 0; opacity: 1; border-bottom: 1px solid var(--td-error-color); transition: all 0.2s linear; } .t-link--theme-danger.t-is-disabled { cursor: not-allowed; color: var(--td-error-color-disabled); } .t-link--theme-danger.t-is-disabled:hover, .t-link--theme-danger.t-is-disabled:active { color: var(--td-error-color-disabled); } .t-link--theme-danger.t-is-disabled.t-is-underline::after { border-color: var(--td-error-color-disabled); } .t-link--theme-warning { color: var(--td-warning-color); } .t-link--theme-warning:active { color: var(--td-warning-color-active); } .t-link--theme-warning.t-link--hover-underline::after { content: ""; position: absolute; left: 0; right: 0; height: 0; bottom: 0; border-bottom: 1px solid var(--td-warning-color); opacity: 0; transition: all 0.2s linear; } .t-link--theme-warning.t-link--hover-underline:hover::after { opacity: 1; } .t-link--theme-warning.t-link--hover-underline:active::after { opacity: 1; border-color: var(--td-warning-color-active); } .t-link--theme-warning.t-link--hover-color:hover { color: var(--td-warning-color-hover); } .t-link--theme-warning.t-link--hover-color.t-is-underline:hover::after { border-color: var(--td-warning-color-hover); } .t-link--theme-warning.t-link--hover-color.t-is-underline:active::after { border-color: var(--td-warning-color-active); } .t-link--theme-warning.t-link--hover-color:active { color: var(--td-warning-color-active); } .t-link--theme-warning.t-is-underline::after { content: ""; position: absolute; left: 0; right: 0; height: 0; bottom: 0; opacity: 1; border-bottom: 1px solid var(--td-warning-color); transition: all 0.2s linear; } .t-link--theme-warning.t-is-disabled { cursor: not-allowed; color: var(--td-warning-color-disabled); } .t-link--theme-warning.t-is-disabled:hover, .t-link--theme-warning.t-is-disabled:active { color: var(--td-warning-color-disabled); } .t-link--theme-warning.t-is-disabled.t-is-underline::after { border-color: var(--td-warning-color-disabled); } .t-row { font: var(--td-font-body-medium); color: var(--td-text-color-primary); box-sizing: border-box; margin: 0; padding: 0; list-style: none; display: flex; flex-flow: row wrap; } .t-row--start { justify-content: flex-start; } .t-row--center { justify-content: center; } .t-row--end { justify-content: flex-end; } .t-row--space-between { justify-content: space-between; } .t-row--space-around { justify-content: space-around; } .t-row--top { align-items: flex-start; } .t-row--middle { align-items: center; } .t-row--bottom { align-items: flex-end; } .t-row--align-top, .t-row--align-start { align-items: flex-start; } .t-row--align-middle, .t-row--align-center { align-items: center; } .t-row--align-bottom, .t-row--align-end { align-items: flex-end; } .t-row--align-stretch { align-items: stretch; } .t-row--align-baseline { align-items: baseline; } .t-col { position: relative; max-width: 100%; min-height: 1px; box-sizing: border-box; } .t-col-12 { display: block; flex: 0 0 100%; max-width: 100%; } .t-col-push-12 { left: 100%; } .t-col-pull-12 { right: 100%; } .t-col-offset-12 { margin-left: 100%; } .t-col-order-12 { order: 12; } .t-col-11 { display: block; flex: 0 0 91.66666667%; max-width: 91.66666667%; } .t-col-push-11 { left: 91.66666667%; } .t-col-pull-11 { right: 91.66666667%; } .t-col-offset-11 { margin-left: 91.66666667%; } .t-col-order-11 { order: 11; } .t-col-10 { display: block; flex: 0 0 83.33333333%; max-width: 83.33333333%; } .t-col-push-10 { left: 83.33333333%; } .t-col-pull-10 { right: 83.33333333%; } .t-col-offset-10 { margin-left: 83.33333333%; } .t-col-order-10 { order: 10; } .t-col-9 { display: block; flex: 0 0 75%; max-width: 75%; } .t-col-push-9 { left: 75%; } .t-col-pull-9 { right: 75%; } .t-col-offset-9 { margin-left: 75%; } .t-col-order-9 { order: 9; } .t-col-8 { display: block; flex: 0 0 66.66666667%; max-width: 66.66666667%; } .t-col-push-8 { left: 66.66666667%; } .t-col-pull-8 { right: 66.66666667%; } .t-col-offset-8 { margin-left: 66.66666667%; } .t-col-order-8 { order: 8; } .t-col-7 { display: block; flex: 0 0 58.33333333%; max-width: 58.33333333%; } .t-col-push-7 { left: 58.33333333%; } .t-col-pull-7 { right: 58.33333333%; } .t-col-offset-7 { margin-left: 58.33333333%; } .t-col-order-7 { order: 7; } .t-col-6 { display: block; flex: 0 0 50%; max-width: 50%; } .t-col-push-6 { left: 50%; } .t-col-pull-6 { right: 50%; } .t-col-offset-6 { margin-left: 50%; } .t-col-order-6 { order: 6; } .t-col-5 { display: block; flex: 0 0 41.66666667%; max-width: 41.66666667%; } .t-col-push-5 { left: 41.66666667%; } .t-col-pull-5 { right: 41.66666667%; } .t-col-offset-5 { margin-left: 41.66666667%; } .t-col-order-5 { order: 5; } .t-col-4 { display: block; flex: 0 0 33.33333333%; max-width: 33.33333333%; } .t-col-push-4 { left: 33.33333333%; } .t-col-pull-4 { right: 33.33333333%; } .t-col-offset-4 { margin-left: 33.33333333%; } .t-col-order-4 { order: 4; } .t-col-3 { display: block; flex: 0 0 25%; max-width: 25%; } .t-col-push-3 { left: 25%; } .t-col-pull-3 { right: 25%; } .t-col-offset-3 { margin-left: 25%; } .t-col-order-3 { order: 3; } .t-col-2 { display: block; flex: 0 0 16.66666667%; max-width: 16.66666667%; } .t-col-push-2 { left: 16.66666667%; } .t-col-pull-2 { right: 16.66666667%; } .t-col-offset-2 { margin-left: 16.66666667%; } .t-col-order-2 { order: 2; } .t-col-1 { display: block; flex: 0 0 8.33333333%; max-width: 8.33333333%; } .t-col-push-1 { left: 8.33333333%; } .t-col-pull-1 { right: 8.33333333%; } .t-col-offset-1 { margin-left: 8.33333333%; } .t-col-order-1 { order: 1; } .t-col-0 { display: none; } .t-col-push-0 { left: auto; } .t-col-pull-0 { right: auto; } .t-col-push-0 { left: auto; } .t-col-pull-0 { right: auto; } .t-col-offset-0 { margin-left: 0; } .t-col-order-0 { order: 0; } .t-col-xs-12 { display: block; flex: 0 0 100%; max-width: 100%; } .t-col-xs-push-12 { left: 100%; } .t-col-xs-pull-12 { right: 100%; } .t-col-xs-offset-12 { margin-left: 100%; } .t-col-xs-order-12 { order: 12; } .t-col-xs-11 { display: block; flex: 0 0 91.66666667%; max-width: 91.66666667%; } .t-col-xs-push-11 { left: 91.66666667%; } .t-col-xs-pull-11 { right: 91.66666667%; } .t-col-xs-offset-11 { margin-left: 91.66666667%; } .t-col-xs-order-11 { order: 11; } .t-col-xs-10 { display: block; flex: 0 0 83.33333333%; max-width: 83.33333333%; } .t-col-xs-push-10 { left: 83.33333333%; } .t-col-xs-pull-10 { right: 83.33333333%; } .t-col-xs-offset-10 { margin-left: 83.33333333%; } .t-col-xs-order-10 { order: 10; } .t-col-xs-9 { display: block; flex: 0 0 75%; max-width: 75%; } .t-col-xs-push-9 { left: 75%; } .t-col-xs-pull-9 { right: 75%; } .t-col-xs-offset-9 { margin-left: 75%; } .t-col-xs-order-9 { order: 9; } .t-col-xs-8 { display: block; flex: 0 0 66.66666667%; max-width: 66.66666667%; } .t-col-xs-push-8 { left: 66.66666667%; } .t-col-xs-pull-8 { right: 66.66666667%; } .t-col-xs-offset-8 { margin-left: 66.66666667%; } .t-col-xs-order-8 { order: 8; } .t-col-xs-7 { display: block; flex: 0 0 58.33333333%; max-width: 58.33333333%; } .t-col-xs-push-7 { left: 58.33333333%; } .t-col-xs-pull-7 { right: 58.33333333%; } .t-col-xs-offset-7 { margin-left: 58.33333333%; } .t-col-xs-order-7 { order: 7; } .t-col-xs-6 { display: block; flex: 0 0 50%; max-width: 50%; } .t-col-xs-push-6 { left: 50%; } .t-col-xs-pull-6 { right: 50%; } .t-col-xs-offset-6 { margin-left: 50%; } .t-col-xs-order-6 { order: 6; } .t-col-xs-5 { display: block; flex: 0 0 41.66666667%; max-width: 41.66666667%; } .t-col-xs-push-5 { left: 41.66666667%; } .t-col-xs-pull-5 { right: 41.66666667%; } .t-col-xs-offset-5 { margin-left: 41.66666667%; } .t-col-xs-order-5 { order: 5; } .t-col-xs-4 { display: block; flex: 0 0 33.33333333%; max-width: 33.33333333%; } .t-col-xs-push-4 { left: 33.33333333%; } .t-col-xs-pull-4 { right: 33.33333333%; } .t-col-xs-offset-4 { margin-left: 33.33333333%; } .t-col-xs-order-4 { order: 4; } .t-col-xs-3 { display: block; flex: 0 0 25%; max-width: 25%; } .t-col-xs-push-3 { left: 25%; } .t-col-xs-pull-3 { right: 25%; } .t-col-xs-offset-3 { margin-left: 25%; } .t-col-xs-order-3 { order: 3; } .t-col-xs-2 { display: block; flex: 0 0 16.66666667%; max-width: 16.66666667%; } .t-col-xs-push-2 { left: 16.66666667%; } .t-col-xs-pull-2 { right: 16.66666667%; } .t-col-xs-offset-2 { margin-left: 16.66666667%; } .t-col-xs-order-2 { order: 2; } .t-col-xs-1 { display: block; flex: 0 0 8.33333333%; max-width: 8.33333333%; } .t-col-xs-push-1 { left: 8.33333333%; } .t-col-xs-pull-1 { right: 8.33333333%; } .t-col-xs-offset-1 { margin-left: 8.33333333%; } .t-col-xs-order-1 { order: 1; } .t-col-xs-0 { display: none; } .t-col-push-0 { left: auto; } .t-col-pull-0 { right: auto; } .t-col-xs-push-0 { left: auto; } .t-col-xs-pull-0 { right: auto; } .t-col-xs-offset-0 { margin-left: 0; } .t-col-xs-order-0 { order: 0; } @media (min-width: 768px) { .t-col-sm-12 { display: block; flex: 0 0 100%; max-width: 100%; } .t-col-sm-push-12 { left: 100%; } .t-col-sm-pull-12 { right: 100%; } .t-col-sm-offset-12 { margin-left: 100%; } .t-col-sm-order-12 { order: 12; } .t-col-sm-11 { display: block; flex: 0 0 91.66666667%; max-width: 91.66666667%; } .t-col-sm-push-11 { left: 91.66666667%; } .t-col-sm-pull-11 { right: 91.66666667%; } .t-col-sm-offset-11 { margin-left: 91.66666667%; } .t-col-sm-order-11 { order: 11; } .t-col-sm-10 { display: block; flex: 0 0 83.33333333%; max-width: 83.33333333%; } .t-col-sm-push-10 { left: 83.33333333%; } .t-col-sm-pull-10 { right: 83.33333333%; } .t-col-sm-offset-10 { margin-left: 83.33333333%; } .t-col-sm-order-10 { order: 10; } .t-col-sm-9 { display: block; flex: 0 0 75%; max-width: 75%; } .t-col-sm-push-9 { left: 75%; } .t-col-sm-pull-9 { right: 75%; } .t-col-sm-offset-9 { margin-left: 75%; } .t-col-sm-order-9 { order: 9; } .t-col-sm-8 { display: block; flex: 0 0 66.66666667%; max-width: 66.66666667%; } .t-col-sm-push-8 { left: 66.66666667%; } .t-col-sm-pull-8 { right: 66.66666667%; } .t-col-sm-offset-8 { margin-left: 66.66666667%; } .t-col-sm-order-8 { order: 8; } .t-col-sm-7 { display: block; flex: 0 0 58.33333333%; max-width: 58.33333333%; } .t-col-sm-push-7 { left: 58.33333333%; } .t-col-sm-pull-7 { right: 58.33333333%; } .t-col-sm-offset-7 { margin-left: 58.33333333%; } .t-col-sm-order-7 { order: 7; } .t-col-sm-6 { display: block; flex: 0 0 50%; max-width: 50%; } .t-col-sm-push-6 { left: 50%; } .t-col-sm-pull-6 { right: 50%; } .t-col-sm-offset-6 { margin-left: 50%; } .t-col-sm-order-6 { order: 6; } .t-col-sm-5 { display: block; flex: 0 0 41.66666667%; max-width: 41.66666667%; } .t-col-sm-push-5 { left: 41.66666667%; } .t-col-sm-pull-5 { right: 41.66666667%; } .t-col-sm-offset-5 { margin-left: 41.66666667%; } .t-col-sm-order-5 { order: 5; } .t-col-sm-4 { display: block; flex: 0 0 33.33333333%; max-width: 33.33333333%; } .t-col-sm-push-4 { left: 33.33333333%; } .t-col-sm-pull-4 { right: 33.33333333%; } .t-col-sm-offset-4 { margin-left: 33.33333333%; } .t-col-sm-order-4 { order: 4; } .t-col-sm-3 { display: block; flex: 0 0 25%; max-width: 25%; } .t-col-sm-push-3 { left: 25%; } .t-col-sm-pull-3 { right: 25%; } .t-col-sm-offset-3 { margin-left: 25%; } .t-col-sm-order-3 { order: 3; } .t-col-sm-2 { display: block; flex: 0 0 16.66666667%; max-width: 16.66666667%; } .t-col-sm-push-2 { left: 16.66666667%; } .t-col-sm-pull-2 { right: 16.66666667%; } .t-col-sm-offset-2 { margin-left: 16.66666667%; } .t-col-sm-order-2 { order: 2; } .t-col-sm-1 { display: block; flex: 0 0 8.33333333%; max-width: 8.33333333%; } .t-col-sm-push-1 { left: 8.33333333%; } .t-col-sm-pull-1 { right: 8.33333333%; } .t-col-sm-offset-1 { margin-left: 8.33333333%; } .t-col-sm-order-1 { order: 1; } .t-col-sm-0 { display: none; } .t-col-push-0 { left: auto; } .t-col-pull-0 { right: auto; } .t-col-sm-push-0 { left: auto; } .t-col-sm-pull-0 { right: auto; } .t-col-sm-offset-0 { margin-left: 0; } .t-col-sm-order-0 { order: 0; } } @media (min-width: 992px) { .t-col-md-12 { display: block; flex: 0 0 100%; max-width: 100%; } .t-col-md-push-12 { left: 100%; } .t-col-md-pull-12 { right: 100%; } .t-col-md-offset-12 { margin-left: 100%; } .t-col-md-order-12 { order: 12; } .t-col-md-11 { display: block; flex: 0 0 91.66666667%; max-width: 91.66666667%; } .t-col-md-push-11 { left: 91.66666667%; } .t-col-md-pull-11 { right: 91.66666667%; } .t-col-md-offset-11 { margin-left: 91.66666667%; } .t-col-md-order-11 { order: 11; } .t-col-md-10 { display: block; flex: 0 0 83.33333333%; max-width: 83.33333333%; } .t-col-md-push-10 { left: 83.33333333%; } .t-col-md-pull-10 { right: 83.33333333%; } .t-col-md-offset-10 { margin-left: 83.33333333%; } .t-col-md-order-10 { order: 10; } .t-col-md-9 { display: block; flex: 0 0 75%; max-width: 75%; } .t-col-md-push-9 { left: 75%; } .t-col-md-pull-9 { right: 75%; } .t-col-md-offset-9 { margin-left: 75%; } .t-col-md-order-9 { order: 9; } .t-col-md-8 { display: block; flex: 0 0 66.66666667%; max-width: 66.66666667%; } .t-col-md-push-8 { left: 66.66666667%; } .t-col-md-pull-8 { right: 66.66666667%; } .t-col-md-offset-8 { margin-left: 66.66666667%; } .t-col-md-order-8 { order: 8; } .t-col-md-7 { display: block; flex: 0 0 58.33333333%; max-width: 58.33333333%; } .t-col-md-push-7 { left: 58.33333333%; } .t-col-md-pull-7 { right: 58.33333333%; } .t-col-md-offset-7 { margin-left: 58.33333333%; } .t-col-md-order-7 { order: 7; } .t-col-md-6 { display: block; flex: 0 0 50%; max-width: 50%; } .t-col-md-push-6 { left: 50%; } .t-col-md-pull-6 { right: 50%; } .t-col-md-offset-6 { margin-left: 50%; } .t-col-md-order-6 { order: 6; } .t-col-md-5 { display: block; flex: 0 0 41.66666667%; max-width: 41.66666667%; } .t-col-md-push-5 { left: 41.66666667%; } .t-col-md-pull-5 { right: 41.66666667%; } .t-col-md-offset-5 { margin-left: 41.66666667%; } .t-col-md-order-5 { order: 5; } .t-col-md-4 { display: block; flex: 0 0 33.33333333%; max-width: 33.33333333%; } .t-col-md-push-4 { left: 33.33333333%; } .t-col-md-pull-4 { right: 33.33333333%; } .t-col-md-offset-4 { margin-left: 33.33333333%; } .t-col-md-order-4 { order: 4; } .t-col-md-3 { display: block; flex: 0 0 25%; max-width: 25%; } .t-col-md-push-3 { left: 25%; } .t-col-md-pull-3 { right: 25%; } .t-col-md-offset-3 { margin-left: 25%; } .t-col-md-order-3 { order: 3; } .t-col-md-2 { display: block; flex: 0 0 16.66666667%; max-width: 16.66666667%; } .t-col-md-push-2 { left: 16.66666667%; } .t-col-md-pull-2 { right: 16.66666667%; } .t-col-md-offset-2 { margin-left: 16.66666667%; } .t-col-md-order-2 { order: 2; } .t-col-md-1 { display: block; flex: 0 0 8.33333333%; max-width: 8.33333333%; } .t-col-md-push-1 { left: 8.33333333%; } .t-col-md-pull-1 { right: 8.33333333%; } .t-col-md-offset-1 { margin-left: 8.33333333%; } .t-col-md-order-1 { order: 1; } .t-col-md-0 { display: none; } .t-col-push-0 { left: auto; } .t-col-pull-0 { right: auto; } .t-col-md-push-0 { left: auto; } .t-col-md-pull-0 { right: auto; } .t-col-md-offset-0 { margin-left: 0; } .t-col-md-order-0 { order: 0; } } @media (min-width: 1200px) { .t-col-lg-12 { display: block; flex: 0 0 100%; max-width: 100%; } .t-col-lg-push-12 { left: 100%; } .t-col-lg-pull-12 { right: 100%; } .t-col-lg-offset-12 { margin-left: 100%; } .t-col-lg-order-12 { order: 12; } .t-col-lg-11 { display: block; flex: 0 0 91.66666667%; max-width: 91.66666667%; } .t-col-lg-push-11 { left: 91.66666667%; } .t-col-lg-pull-11 { right: 91.66666667%; } .t-col-lg-offset-11 { margin-left: 91.66666667%; } .t-col-lg-order-11 { order: 11; } .t-col-lg-10 { display: block; flex: 0 0 83.33333333%; max-width: 83.33333333%; } .t-col-lg-push-10 { left: 83.33333333%; } .t-col-lg-pull-10 { right: 83.33333333%; } .t-col-lg-offset-10 { margin-left: 83.33333333%; } .t-col-lg-order-10 { order: 10; } .t-col-lg-9 { display: block; flex: 0 0 75%; max-width: 75%; } .t-col-lg-push-9 { left: 75%; } .t-col-lg-pull-9 { right: 75%; } .t-col-lg-offset-9 { margin-left: 75%; } .t-col-lg-order-9 { order: 9; } .t-col-lg-8 { display: block; flex: 0 0 66.66666667%; max-width: 66.66666667%; } .t-col-lg-push-8 { left: 66.66666667%; } .t-col-lg-pull-8 { right: 66.66666667%; } .t-col-lg-offset-8 { margin-left: 66.66666667%; } .t-col-lg-order-8 { order: 8; } .t-col-lg-7 { display: block; flex: 0 0 58.33333333%; max-width: 58.33333333%; } .t-col-lg-push-7 { left: 58.33333333%; } .t-col-lg-pull-7 { right: 58.33333333%; } .t-col-lg-offset-7 { margin-left: 58.33333333%; } .t-col-lg-order-7 { order: 7; } .t-col-lg-6 { display: block; flex: 0 0 50%; max-width: 50%; } .t-col-lg-push-6 { left: 50%; } .t-col-lg-pull-6 { right: 50%; } .t-col-lg-offset-6 { margin-left: 50%; } .t-col-lg-order-6 { order: 6; } .t-col-lg-5 { display: block; flex: 0 0 41.66666667%; max-width: 41.66666667%; } .t-col-lg-push-5 { left: 41.66666667%; } .t-col-lg-pull-5 { right: 41.66666667%; } .t-col-lg-offset-5 { margin-left: 41.66666667%; } .t-col-lg-order-5 { order: 5; } .t-col-lg-4 { display: block; flex: 0 0 33.33333333%; max-width: 33.33333333%; } .t-col-lg-push-4 { left: 33.33333333%; } .t-col-lg-pull-4 { right: 33.33333333%; } .t-col-lg-offset-4 { margin-left: 33.33333333%; } .t-col-lg-order-4 { order: 4; } .t-col-lg-3 { display: block; flex: 0 0 25%; max-width: 25%; } .t-col-lg-push-3 { left: 25%; } .t-col-lg-pull-3 { right: 25%; } .t-col-lg-offset-3 { margin-left: 25%; } .t-col-lg-order-3 { order: 3; } .t-col-lg-2 { display: block; flex: 0 0 16.66666667%; max-width: 16.66666667%; } .t-col-lg-push-2 { left: 16.66666667%; } .t-col-lg-pull-2 { right: 16.66666667%; } .t-col-lg-offset-2 { margin-left: 16.66666667%; } .t-col-lg-order-2 { order: 2; } .t-col-lg-1 { display: block; flex: 0 0 8.33333333%; max-width: 8.33333333%; } .t-col-lg-push-1 { left: 8.33333333%; } .t-col-lg-pull-1 { right: 8.33333333%; } .t-col-lg-offset-1 { margin-left: 8.33333333%; } .t-col-lg-order-1 { order: 1; } .t-col-lg-0 { display: none; } .t-col-push-0 { left: auto; } .t-col-pull-0 { right: auto; } .t-col-lg-push-0 { left: auto; } .t-col-lg-pull-0 { right: auto; } .t-col-lg-offset-0 { margin-left: 0; } .t-col-lg-order-0 { order: 0; } } @media (min-width: 1400px) { .t-col-xl-12 { display: block; flex: 0 0 100%; max-width: 100%; } .t-col-xl-push-12 { left: 100%; } .t-col-xl-pull-12 { right: 100%; } .t-col-xl-offset-12 { margin-left: 100%; } .t-col-xl-order-12 { order: 12; } .t-col-xl-11 { display: block; flex: 0 0 91.66666667%; max-width: 91.66666667%; } .t-col-xl-push-11 { left: 91.66666667%; } .t-col-xl-pull-11 { right: 91.66666667%; } .t-col-xl-offset-11 { margin-left: 91.66666667%; } .t-col-xl-order-11 { order: 11; } .t-col-xl-10 { display: block; flex: 0 0 83.33333333%; max-width: 83.33333333%; } .t-col-xl-push-10 { left: 83.33333333%; } .t-col-xl-pull-10 { right: 83.33333333%; } .t-col-xl-offset-10 { margin-left: 83.33333333%; } .t-col-xl-order-10 { order: 10; } .t-col-xl-9 { display: block; flex: 0 0 75%; max-width: 75%; } .t-col-xl-push-9 { left: 75%; } .t-col-xl-pull-9 { right: 75%; } .t-col-xl-offset-9 { margin-left: 75%; } .t-col-xl-order-9 { order: 9; } .t-col-xl-8 { display: block; flex: 0 0 66.66666667%; max-width: 66.66666667%; } .t-col-xl-push-8 { left: 66.66666667%; } .t-col-xl-pull-8 { right: 66.66666667%; } .t-col-xl-offset-8 { margin-left: 66.66666667%; } .t-col-xl-order-8 { order: 8; } .t-col-xl-7 { display: block; flex: 0 0 58.33333333%; max-width: 58.33333333%; } .t-col-xl-push-7 { left: 58.33333333%; } .t-col-xl-pull-7 { right: 58.33333333%; } .t-col-xl-offset-7 { margin-left: 58.33333333%; } .t-col-xl-order-7 { order: 7; } .t-col-xl-6 { display: block; flex: 0 0 50%; max-width: 50%; } .t-col-xl-push-6 { left: 50%; } .t-col-xl-pull-6 { right: 50%; } .t-col-xl-offset-6 { margin-left: 50%; } .t-col-xl-order-6 { order: 6; } .t-col-xl-5 { display: block; flex: 0 0 41.66666667%; max-width: 41.66666667%; } .t-col-xl-push-5 { left: 41.66666667%; } .t-col-xl-pull-5 { right: 41.66666667%; } .t-col-xl-offset-5 { margin-left: 41.66666667%; } .t-col-xl-order-5 { order: 5; } .t-col-xl-4 { display: block; flex: 0 0 33.33333333%; max-width: 33.33333333%; } .t-col-xl-push-4 { left: 33.33333333%; } .t-col-xl-pull-4 { right: 33.33333333%; } .t-col-xl-offset-4 { margin-left: 33.33333333%; } .t-col-xl-order-4 { order: 4; } .t-col-xl-3 { display: block; flex: 0 0 25%; max-width: 25%; } .t-col-xl-push-3 { left: 25%; } .t-col-xl-pull-3 { right: 25%; } .t-col-xl-offset-3 { margin-left: 25%; } .t-col-xl-order-3 { order: 3; } .t-col-xl-2 { display: block; flex: 0 0 16.66666667%; max-width: 16.66666667%; } .t-col-xl-push-2 { left: 16.66666667%; } .t-col-xl-pull-2 { right: 16.66666667%; } .t-col-xl-offset-2 { margin-left: 16.66666667%; } .t-col-xl-order-2 { order: 2; } .t-col-xl-1 { display: block; flex: 0 0 8.33333333%; max-width: 8.33333333%; } .t-col-xl-push-1 { left: 8.33333333%; } .t-col-xl-pull-1 { right: 8.33333333%; } .t-col-xl-offset-1 { margin-left: 8.33333333%; } .t-col-xl-order-1 { order: 1; } .t-col-xl-0 { display: none; } .t-col-push-0 { left: auto; } .t-col-pull-0 { right: auto; } .t-col-xl-push-0 { left: auto; } .t-col-xl-pull-0 { right: auto; } .t-col-xl-offset-0 { margin-left: 0; } .t-col-xl-order-0 { order: 0; } } @media (min-width: 1880px) { .t-col-xxl-12 { display: block; flex: 0 0 100%; max-width: 100%; } .t-col-xxl-push-12 { left: 100%; } .t-col-xxl-pull-12 { right: 100%; } .t-col-xxl-offset-12 { margin-left: 100%; } .t-col-xxl-order-12 { order: 12; } .t-col-xxl-11 { display: block; flex: 0 0 91.66666667%; max-width: 91.66666667%; } .t-col-xxl-push-11 { left: 91.66666667%; } .t-col-xxl-pull-11 { right: 91.66666667%; } .t-col-xxl-offset-11 { margin-left: 91.66666667%; } .t-col-xxl-order-11 { order: 11; } .t-col-xxl-10 { display: block; flex: 0 0 83.33333333%; max-width: 83.33333333%; } .t-col-xxl-push-10 { left: 83.33333333%; } .t-col-xxl-pull-10 { right: 83.33333333%; } .t-col-xxl-offset-10 { margin-left: 83.33333333%; } .t-col-xxl-order-10 { order: 10; } .t-col-xxl-9 { display: block; flex: 0 0 75%; max-width: 75%; } .t-col-xxl-push-9 { left: 75%; } .t-col-xxl-pull-9 { right: 75%; } .t-col-xxl-offset-9 { margin-left: 75%; } .t-col-xxl-order-9 { order: 9; } .t-col-xxl-8 { display: block; flex: 0 0 66.66666667%; max-width: 66.66666667%; } .t-col-xxl-push-8 { left: 66.66666667%; } .t-col-xxl-pull-8 { right: 66.66666667%; } .t-col-xxl-offset-8 { margin-left: 66.66666667%; } .t-col-xxl-order-8 { order: 8; } .t-col-xxl-7 { display: block; flex: 0 0 58.33333333%; max-width: 58.33333333%; } .t-col-xxl-push-7 { left: 58.33333333%; } .t-col-xxl-pull-7 { right: 58.33333333%; } .t-col-xxl-offset-7 { margin-left: 58.33333333%; } .t-col-xxl-order-7 { order: 7; } .t-col-xxl-6 { display: block; flex: 0 0 50%; max-width: 50%; } .t-col-xxl-push-6 { left: 50%; } .t-col-xxl-pull-6 { right: 50%; } .t-col-xxl-offset-6 { margin-left: 50%; } .t-col-xxl-order-6 { order: 6; } .t-col-xxl-5 { display: block; flex: 0 0 41.66666667%; max-width: 41.66666667%; } .t-col-xxl-push-5 { left: 41.66666667%; } .t-col-xxl-pull-5 { right: 41.66666667%; } .t-col-xxl-offset-5 { margin-left: 41.66666667%; } .t-col-xxl-order-5 { order: 5; } .t-col-xxl-4 { display: block; flex: 0 0 33.33333333%; max-width: 33.33333333%; } .t-col-xxl-push-4 { left: 33.33333333%; } .t-col-xxl-pull-4 { right: 33.33333333%; } .t-col-xxl-offset-4 { margin-left: 33.33333333%; } .t-col-xxl-order-4 { order: 4; } .t-col-xxl-3 { display: block; flex: 0 0 25%; max-width: 25%; } .t-col-xxl-push-3 { left: 25%; } .t-col-xxl-pull-3 { right: 25%; } .t-col-xxl-offset-3 { margin-left: 25%; } .t-col-xxl-order-3 { order: 3; } .t-col-xxl-2 { display: block; flex: 0 0 16.66666667%; max-width: 16.66666667%; } .t-col-xxl-push-2 { left: 16.66666667%; } .t-col-xxl-pull-2 { right: 16.66666667%; } .t-col-xxl-offset-2 { margin-left: 16.66666667%; } .t-col-xxl-order-2 { order: 2; } .t-col-xxl-1 { display: block; flex: 0 0 8.33333333%; max-width: 8.33333333%; } .t-col-xxl-push-1 { left: 8.33333333%; } .t-col-xxl-pull-1 { right: 8.33333333%; } .t-col-xxl-offset-1 { margin-left: 8.33333333%; } .t-col-xxl-order-1 { order: 1; } .t-col-xxl-0 { display: none; } .t-col-push-0 { left: auto; } .t-col-pull-0 { right: auto; } .t-col-xxl-push-0 { left: auto; } .t-col-xxl-pull-0 { right: auto; } .t-col-xxl-offset-0 { margin-left: 0; } .t-col-xxl-order-0 { order: 0; } } .t-layout { font: var(--td-font-body-medium); color: var(--td-text-color-primary); box-sizing: border-box; margin: 0; padding: 0; list-style: none; } .t-layout, .t-layout__direction-vertical { display: flex; flex-direction: column; background: var(--td-bg-color-page); flex: auto; } .t-layout--with-sider, .t-layout__direction-horizontal { flex-direction: row; } .t-layout__header { height: var(--td-comp-size-xxxl); background-color: var(--td-bg-color-container); } .t-layout__content { flex: auto; } .t-layout__sider { position: relative; transition: all 0.2s; background: var(--td-bg-color-container); width: 232px; } .t-layout__footer { color: var(--td-text-color-placeholder); padding: 24px; } .t-divider { margin: 0; padding: 0; list-style: none; font: var(--td-font-body-medium); margin: var(--td-comp-margin-xxl) 0; border-top: 1px solid var(--td-border-level-1-color); color: var(--td-text-color-primary); box-sizing: border-box; } .t-divider--dashed { border-top-style: dashed; } .t-divider--horizontal { width: 100%; display: flex; } .t-divider--vertical { border-top: 0; display: inline-block; margin: 0 var(--td-comp-margin-m); border-left: 1px solid var(--td-border-level-1-color); height: 0.9em; vertical-align: middle; } .t-divider--with-text { display: flex; border-top: 0; white-space: nowrap; align-items: center; } .t-divider--with-text .t-divider__inner-text:not(:empty) { padding: 0 1em; display: inline-block; } .t-divider--with-text::before, .t-divider--with-text::after { content: ""; width: 50%; border-top: 1px solid var(--td-border-level-1-color); } .t-divider--with-text-left::before { width: 5%; } .t-divider--with-text-left::after { width: 95%; } .t-divider--with-text-right::before { width: 95%; } .t-divider--with-text-right::after { width: 5%; } .t-divider--dashed::before, .t-divider--dashed::after { border-top: 1px dashed var(--td-border-level-1-color); } .t-divider--vertical.t-divider--dashed { border-left: 1px dashed var(--td-border-level-1-color); } .t-space { display: inline-flex; } .t-space .t-space-item { width: inherit; } .t-space-align-start { align-items: flex-start; } .t-space-align-end { align-items: flex-end; } .t-space-align-baseline { align-items: baseline; } .t-space-align-center { align-items: center; } .t-space-vertical { flex-direction: column; } .t-space-vertical > .t-space-item-separator { width: 100%; } .t-space.t-space--break-line { flex-wrap: wrap; } .t-space.t-space--polyfill { display: flex; } .t-space.t-space--polyfill.t-space-horizontal, .t-space.t-space--polyfill.t-space--break-line { margin-left: calc(-1 * var(--td-space-column-gap, 0)); } .t-space.t-space--polyfill.t-space-vertical, .t-space.t-space--polyfill.t-space--break-line { margin-top: calc(-1 * var(--td-space-row-gap, 0)); } .t-space.t-space--polyfill.t-space-horizontal > *, .t-space.t-space--polyfill.t-space--break-line > * { margin-left: var(--td-space-column-gap); } .t-space.t-space--polyfill.t-space-vertical > *, .t-space.t-space--polyfill.t-space--break-line > * { margin-top: var(--td-space-row-gap); } .t-descriptions { font: var(--td-font-body-medium); color: var(--td-text-color-primary); box-sizing: border-box; margin: 0; padding: 0; list-style: none; } .t-descriptions__header { color: var(--td-text-color-primary); font: var(--td-font-title-medium); margin-bottom: var(--td-comp-margin-m); font-weight: 600; } .t-descriptions__body { border-collapse: collapse; font: var(--td-font-body-medium); width: 100%; } .t-descriptions__body.t-size-l > tbody > tr > td { padding: var(--td-comp-paddingTB-l) 0; } .t-descriptions__body.t-size-m > tbody > tr > td { padding: var(--td-comp-paddingTB-m) 0; } .t-descriptions__body.t-size-s > tbody > tr > td { padding: var(--td-comp-paddingTB-s) 0; } .t-descriptions__body .t-descriptions__label { color: var(--td-text-color-placeholder); } .t-descriptions__body--fixed { table-layout: fixed; } .t-descriptions__body--border > tbody > tr > td { border: 1px solid var(--td-component-border); } .t-descriptions__body--border.t-size-l > tbody > tr > td { padding: var(--td-comp-paddingTB-l); } .t-descriptions__body--border.t-size-m > tbody > tr > td { padding: var(--td-comp-paddingLR-m) var(--td-comp-paddingLR-l); } .t-descriptions__body--border.t-size-s > tbody > tr > td { padding: var(--td-comp-paddingLR-s) var(--td-comp-paddingLR-l); } .t-descriptions__body--border .t-descriptions__label { background-color: var(--td-bg-color-secondarycontainer); } .t-descriptions__body--border .t-descriptions__label:hover { background-color: var(--td-bg-color-container-hover); } .t-message { margin: 0; padding: 0; list-style: none; width: fit-content; outline: 0; border-radius: var(--td-radius-medium); background-color: var(--td-bg-color-container); box-shadow: var(--td-shadow-3), var(--td-shadow-inset-top), var(--td-shadow-inset-right), var(--td-shadow-inset-bottom), var(--td-shadow-inset-left); box-sizing: border-box; display: flex; align-items: center; color: var(--td-text-color-primary); font: var(--td-font-body-medium); padding: var(--td-comp-paddingTB-m) var(--td-comp-paddingLR-l); } .t-message > .t-icon, .t-message > [data-t-icon] > .t-icon, .t-message .t-loading { color: var(--td-brand-color); margin-right: var(--td-comp-margin-s); flex-shrink: 0; font-size: calc(var(--td-font-size-body-medium) + 6px); } .t-message.t-is-success > .t-icon, .t-message.t-is-success > [data-t-icon] > .t-icon, .t-message.t-is-success .t-loading { color: var(--td-success-color); } .t-message.t-is-warning > .t-icon, .t-message.t-is-warning > [data-t-icon] > .t-icon, .t-message.t-is-warning .t-loading { color: var(--td-warning-color); } .t-message.t-is-error > .t-icon, .t-message.t-is-error > [data-t-icon] > .t-icon, .t-message.t-is-error .t-loading { color: var(--td-error-color); } .t-message.t-is-closable .t-message__close { display: inline-flex; margin-right: 0; margin-left: var(--td-comp-margin-xxl); cursor: pointer; color: var(--td-text-color-secondary); } .t-message.t-is-closable .t-message__close .t-icon-close { font-size: calc(var(--td-font-size-body-medium) + 2px); border-radius: var(--td-radius-default); transition: all 0.2s linear; } .t-message.t-is-closable .t-message__close .t-icon-close:hover { background: var(--td-bg-color-container-hover); } .t-message.t-is-closable .t-message__close .t-icon-close:active { background: var(--td-bg-color-container-active); } .t-message__list { position: fixed; z-index: 6000; pointer-events: none; } .t-message__list .t-message { margin-bottom: var(--td-comp-margin-s); word-break: break-all; pointer-events: auto; } .content-placement-top .t-popup[data-popper-placement^="top"] .t-popup__content { margin-bottom: var(--td-comp-margin-s); } .content-placement-top .t-popup[data-popper-placement^="top"] .t-popup__content--arrow { margin-bottom: var(--td-comp-margin-l); } .content-placement-bottom .t-popup[data-popper-placement^="bottom"] .t-popup__content { margin-top: var(--td-comp-margin-s); } .content-placement-bottom .t-popup[data-popper-placement^="bottom"] .t-popup__content--arrow { margin-top: var(--td-comp-margin-l); } .content-placement-left .t-popup[data-popper-placement^="left"] .t-popup__content { margin-right: var(--td-comp-margin-s); } .content-placement-left .t-popup[data-popper-placement^="left"] .t-popup__content--arrow { margin-right: var(--td-comp-margin-l); } .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: var(--td-comp-margin-s); } .content-placement-right .t-popup[data-popper-placement^="right"] .t-popup__content--arrow { margin-left: var(--td-comp-margin-l); } .content-placement-right .t-popup[data-popper-placement^="right"] .t-popup__content--text { max-width: 480px; } .t-popup { font: var(--td-font-body-medium); 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); box-shadow: var(--td-shadow-2), var(--td-shadow-inset-top), var(--td-shadow-inset-right), var(--td-shadow-inset-bottom), var(--td-shadow-inset-left); border-radius: var(--td-radius-medium); padding: var(--td-comp-paddingTB-xs) var(--td-comp-paddingLR-s); font-size: var(--td-font-size-body-medium); line-height: var(--td-line-height-body-medium); 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; transform: rotate(45deg); background: var(--td-bg-color-container); } .t-popup[data-popper-placement^="top"] .t-popup__content { margin-bottom: var(--td-comp-margin-s); } .t-popup[data-popper-placement^="top"] .t-popup__content--arrow { margin-bottom: var(--td-comp-margin-l); } .t-popup[data-popper-placement^="bottom"] .t-popup__content { margin-top: var(--td-comp-margin-s); } .t-popup[data-popper-placement^="bottom"] .t-popup__content--arrow { margin-top: var(--td-comp-margin-l); } .t-popup[data-popper-placement^="left"] .t-popup__content { margin-right: var(--td-comp-margin-s); } .t-popup[data-popper-placement^="left"] .t-popup__content--arrow { margin-right: var(--td-comp-margin-l); } .t-popup[data-popper-placement^="left"] .t-popup__content--text { max-width: 480px; } .t-popup[data-popper-placement^="right"] .t-popup__content { margin-left: var(--td-comp-margin-s); } .t-popup[data-popper-placement^="right"] .t-popup__content--arrow { margin-left: var(--td-comp-margin-l); } .t-popup[data-popper-placement^="right"] .t-popup__content--text { max-width: 480px; } .t-popup[data-popper-placement^="top"] .t-popup__arrow::before { border-top-left-radius: 100%; 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%; 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 { 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 { 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; transform: none; } .t-popup--animation-enter-active { transition: opacity 0.2s linear; } .t-popup--animation-leave-active { 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] { 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] { 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); } @keyframes t-popup-animation-expand-in-top { 0% { clip-path: polygon(-20% 120%, 120% 120%, 120% 120%, -20% 120%); } 100% { clip-path: polygon(-20% 0, 120% 0, 120% 120%, -20% 120%); } } @keyframes t-popup-animation-expand-out-top { 0% { clip-path: polygon(-20% 0, 120% 0, 120% 120%, -20% 120%); } 100% { clip-path: polygon(-20% 120%, 120% 120%, 120% 120%, -20% 120%); } } .t-popup--animation-expand-enter-active[data-popper-placement^=bottom] { 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] { 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); } @keyframes t-popup-animation-expand-in-bottom { 0% { clip-path: polygon(-20% 0, 120% 0, 120% 0, -20% 0); } 100% { clip-path: polygon(-20% 0, 120% 0, 120% 120%, -20% 120%); } } @keyframes t-popup-animation-expand-out-bottom { 0% { clip-path: polygon(-20% 0, 120% 0, 120% 120%, -20% 120%); } 100% { clip-path: polygon(-20% 0, 120% 0, 120% 0, -20% 0); } } .t-tooltip .t-popup__content { display: inline-block; border: 0; z-index: 5600; margin-bottom: 1px; max-width: 480px; word-break: break-word; box-sizing: border-box; border-radius: var(--td-radius-medium); color: var(--td-text-color-primary); } .t-tooltip--default .t-popup__content { color: var(--td-text-color-anti); background: var(--td-gray-color-13); box-shadow: inset 0 0.5px 0 var(--td-gray-color-9), inset 0.5px 0 0 var(--td-gray-color-9), inset 0 -0.5px 0 var(--td-gray-color-9), inset -0.5px 0 0 var(--td-gray-color-9); } .t-tooltip--default[data-popper-placement^="left"] .t-popup__arrow:before { box-shadow: inset -0.5px 0 0 var(--td-gray-color-9), inset 0 0.5px 0 var(--td-gray-color-9); } .t-tooltip--default[data-popper-placement^="right"] .t-popup__arrow:before { box-shadow: inset 0.5px 0 0 var(--td-gray-color-9), inset 0 -0.5px 0 var(--td-gray-color-9); } .t-tooltip--default[data-popper-placement^="top"] .t-popup__arrow:before { box-shadow: inset 0 -0.5px 0 var(--td-gray-color-9), inset -0.5px 0 0 var(--td-gray-color-9); } .t-tooltip--default[data-popper-placement^="bottom"] .t-popup__arrow:before { box-shadow: inset 0.5px 0 0 var(--td-gray-color-9), inset 0 0.5px 0 var(--td-gray-color-9); } .t-tooltip--primary .t-popup__content { color: var(--td-brand-color); background: var(--td-brand-color-light); } .t-tooltip--success .t-popup__content { color: var(--td-success-color); background: var(--td-success-color-light); } .t-tooltip--danger .t-popup__content { color: var(--td-error-color); background: var(--td-error-color-light); } .t-tooltip--warning .t-popup__content { color: var(--td-warning-color); background: var(--td-warning-color-light); } .t-tooltip .t-popup__arrow { background: inherit; height: auto; } .t-tooltip .t-popup__arrow::before { background: inherit; } .t-tooltip--noshadow .t-popup__content, .t-tooltip--noshadow[data-popper-placement] .t-popup__arrow:before { box-shadow: none; } @keyframes changeColor { from { color: var(--td-brand-color-hover); } to { color: var(--td-brand-color-active); } } .t-breadcrumb { color: var(--td-text-color-primary); box-sizing: border-box; margin: 0; padding: 0; list-style: none; font: var(--td-font-body-medium); display: flex; align-items: center; } .t-breadcrumb__separator { margin: 0 var(--td-comp-margin-xs); display: flex; align-items: center; } .t-breadcrumb__separator .t-icon { color: var(--td-text-color-placeholder); } .t-breadcrumb__item { display: flex; align-items: center; color: var(--td-text-color-placeholder); text-decoration: none; } .t-breadcrumb__item.t-is-current { color: var(--td-text-color-primary); } .t-breadcrumb__item.t-is-current .t-icon { color: var(--td-text-color-placeholder); } .t-breadcrumb__item:last-child { color: var(--td-text-color-primary); } .t-breadcrumb__item:last-child .t-breadcrumb__separator { display: none; } .t-breadcrumb__item .t-icon { font-size: var(--td-font-size-body-large); } .t-breadcrumb__item .t-link { color: inherit; text-decoration: none; } .t-breadcrumb__item .t-link:hover { color: var(--td-brand-color); } .t-breadcrumb__item .t-is-disabled { cursor: not-allowed; } .t-breadcrumb__item .t-is-disabled .t-breadcrumb__inner { color: var(--td-text-color-disabled); } .t-breadcrumb__item .t-is-disabled .t-breadcrumb__inner:hover { color: var(--td-text-color-disabled); cursor: not-allowed; } .t-breadcrumb__item .t-is-disabled .t-breadcrumb__inner:active { animation: none; } .t-breadcrumb__item--arrow { margin: 0 var(--td-comp-margin-xs); line-height: 0; color: var(--td-text-color-placeholder); display: inline-block; vertical-align: middle; } .t-breadcrumb__item--slash { margin: 0 var(--td-comp-margin-xs); line-height: 0; color: var(--td-text-color-placeholder); display: inline-block; vertical-align: middle; } .t-breadcrumb__inner { font: var(--td-font-body-medium); word-break: break-all; display: inline-block; vertical-align: middle; } .t-breadcrumb__inner .t-icon { margin: 0 var(--td-comp-margin-xs); } .t-breadcrumb__select { position: relative; } .t-breadcrumb__select:hover .t-breadcrumb__option { display: block; } .t-breadcrumb__select-item:hover .t-icon { color: var(--td-brand-color); } .t-breadcrumb__option { display: none; position: absolute; top: 28px; left: 50%; transform: translateX(-50%); max-width: 120px; background: var(--td-bg-color-container); box-shadow: var(--td-shadow-2); z-index: 20; } .t-breadcrumb__option-item { padding: 8px; font: var(--td-font-body-medium); color: var(--td-text-color-primary); text-overflow: ellipsis; overflow: hidden; white-space: nowrap; } .t-breadcrumb__option-item:hover { color: var(--td-brand-color); } .t-breadcrumb__option-item.t-is-active { color: var(--td-brand-color); } .t-breadcrumb__inner-msg { display: none; position: absolute; left: 50%; bottom: 30px; transform: translateX(-50%); width: 300px; padding: 8px; color: var(--td-text-color-primary); background: var(--td-bg-color-container); border-radius: calc(var(--td-radius-default) * 0.5); box-shadow: var(--td-shadow-2); z-index: 20; } .t-breadcrumb__inner-msg::before { content: ""; position: absolute; bottom: -8px; left: 50%; margin-left: -4px; width: 0; height: 0; border-style: solid; border-width: 8px 6px 0; border-color: var(--td-bg-color-container) transparent transparent transparent; z-index: 20; } .t-breadcrumb--text-overflow { position: relative; display: flex; align-items: center; } .t-breadcrumb--text-overflow:hover .t-breadcrumb__inner-msg { display: block; } .t-breadcrumb--text-overflow .t-breadcrumb__inner { max-width: 120px; display: flex; align-items: center; transition: color 0.2s linear; } .t-breadcrumb--text-overflow .t-breadcrumb__inner-text { text-overflow: ellipsis; overflow: hidden; white-space: nowrap; } .t-breadcrumb--text-overflow .t-breadcrumb__inner:hover { color: var(--td-brand-color); cursor: pointer; } .t-breadcrumb--text-overflow .t-breadcrumb__inner:active { animation: 0.2s linear changeColor; } .t-dropdown { font: var(--td-font-body-medium); box-sizing: border-box; margin: 0; padding: 0; list-style: none; background-color: var(--td-bg-color-container); font-size: var(--td-font-size-body-medium); color: var(--td-text-color-primary); position: relative; box-shadow: var(--td-shadow-2); border: 0.5px solid var(--td-component-border); border-radius: var(--td-radius-medium); } .t-dropdown__menu { display: flex; justify-content: flex-start; flex-direction: column; border-radius: var(--td-radius-medium); padding: var(--td-pop-padding-m); gap: 2px; overflow-y: auto; overflow-x: hidden; } @-moz-document url-prefix() { .t-dropdown__menu { scrollbar-color: var(--td-scrollbar-color) transparent; scrollbar-width: thin; } } .t-dropdown__menu::-webkit-scrollbar { width: 8px; height: 8px; } .t-dropdown__menu::-webkit-scrollbar-thumb { border: 2px solid transparent; background-clip: content-box; background-color: var(--td-scrollbar-color); border-radius: 15px; } .t-dropdown__menu::-webkit-scrollbar-thumb:vertical:hover, .t-dropdown__menu::-webkit-scrollbar-thumb:horizontal:hover { background-color: var(--td-scrollbar-hover-color); } .t-dropdown__menu .t-divider { margin: var(--td-comp-margin-xs) var(--td-comp-margin-s) var(--td-comp-margin-xxs) var(--td-comp-margin-s); color: var(--td-brand-color-light); width: calc(100% - var(--td-comp-margin-s) * 2); } .t-dropdown__menu .t-dropdown__item-direction { margin: 0 0 0 var(--td-comp-margin-s); } .t-dropdown__menu--overflow .t-dropdown__submenu-wrapper--right { left: calc(100% - 14px); } .t-dropdown__menu--overflow .t-dropdown__submenu-wrapper--left { right: calc(100% - 14px); } .t-dropdown__submenu { background-color: var(--td-bg-color-container); box-shadow: var(--td-shadow-2); border-radius: var(--td-radius-medium); border: 0.5px solid var(--td-component-border); z-index: 1100; position: absolute; padding: var(--td-pop-padding-m); display: none; overflow-y: auto; overflow-x: visible; } @-moz-document url-prefix() { .t-dropdown__submenu { scrollbar-color: var(--td-scrollbar-color) transparent; scrollbar-width: thin; } } .t-dropdown__submenu::-webkit-scrollbar { width: 8px; height: 8px; } .t-dropdown__submenu::-webkit-scrollbar-thumb { border: 2px solid transparent; background-clip: content-box; background-color: var(--td-scrollbar-color); border-radius: 15px; } .t-dropdown__submenu::-webkit-scrollbar-thumb:vertical:hover, .t-dropdown__submenu::-webkit-scrollbar-thumb:horizontal:hover { background-color: var(--td-scrollbar-hover-color); } .t-dropdown__submenu ul { font: var(--td-font-body-medium); color: var(--td-text-color-primary); box-sizing: border-box; margin: 0; padding: 0; list-style: none; display: grid; gap: 2px; } .t-dropdown__submenu--disabled { visibility: hidden; } .t-dropdown__submenu .t-dropdown__item-direction { margin: 0 0 0 var(--td-comp-margin-s); } .t-dropdown__submenu-wrapper--right { left: calc(100% - 6px); } .t-dropdown__submenu-wrapper--left { right: calc(100% - 6px); } .t-dropdown__item { font: var(--td-font-body-medium); color: var(--td-text-color-primary); box-sizing: border-box; margin: 0; padding: 0; list-style: none; border-radius: var(--td-radius-default); cursor: pointer; user-select: none; outline: none; transition: background-color 0.2s cubic-bezier(0.82, 0, 1, 0.9); white-space: nowrap; display: flex; align-items: center; padding: calc(var(--td-comp-paddingTB-xs) - 1px) var(--td-comp-paddingLR-s); --ripple-color: var(--td-bg-color-container-active); } .t-dropdown__item-icon { display: flex; color: currentcolor; margin-right: var(--td-comp-margin-s); font-size: var(--td-font-size-body-large); } .t-dropdown__item:hover > div > div { display: flex; } .t-dropdown__item--disabled { cursor: not-allowed; } .t-dropdown__item-content { display: flex; flex: 1; align-items: center; justify-content: space-between; max-width: 100%; } .t-dropdown__item-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; } .t-dropdown__item.t-dropdown__item--suffix .t-dropdown__item-sub-icon { color: currentcolor; font-size: var(--td-font-size-body-large); flex-shrink: 0; } .t-dropdown__item--theme-default { color: var(--td-text-color-primary); } .t-dropdown__item--theme-default:hover { background-color: var(--td-bg-color-container-hover); } .t-dropdown__item--theme-default:active { background-color: var(--td-bg-color-container-active); } .t-dropdown__item--theme-default.t-dropdown__item--active { color: var(--td-brand-color); background-color: var(--td-brand-color-light); } .t-dropdown__item--theme-default.t-dropdown__item--active:hover { background-color: var(--td-bg-color-container-hover); } .t-dropdown__item--theme-default.t-dropdown__item--active:active { background-color: var(--td-bg-color-container-active); } .t-dropdown__item--theme-default.t-dropdown__item--disabled { color: var(--td-text-color-disabled); } .t-dropdown__item--theme-default.t-dropdown__item--disabled:hover { background-color: var(--td-bg-color-container-hover); } .t-dropdown__item--theme-default.t-dropdown__item--suffix:hover { background-color: var(--td-brand-color-light); color: var(--td-brand-color); } .t-dropdown__item--theme-success { color: var(--td-success-color); } .t-dropdown__item--theme-success:hover { background-color: var(--td-bg-color-container-hover); } .t-dropdown__item--theme-success:active { background-color: var(--td-bg-color-container-active); } .t-dropdown__item--theme-success.t-dropdown__item--active { background-color: var(--td-success-color-light); } .t-dropdown__item--theme-success.t-dropdown__item--active:hover { background-color: var(--td-bg-color-container-hover); } .t-dropdown__item--theme-success.t-dropdown__item--active:active { background-color: var(--td-bg-color-container-active); } .t-dropdown__item--theme-success.t-dropdown__item-disabled { color: var(--td-text-color-disabled); } .t-dropdown__item--theme-success.t-dropdown__item-disabled:hover { background-color: var(--td-bg-color-container-hover); } .t-dropdown__item--theme-success.t-dropdown__item--suffix:hover { background-color: var(--td-success-color-light); } .t-dropdown__item--theme-error { color: var(--td-error-color); } .t-dropdown__item--theme-error:hover { background-color: var(--td-bg-color-container-hover); } .t-dropdown__item--theme-error:active { background-color: var(--td-bg-color-container-active); } .t-dropdown__item--theme-error.t-dropdown__item--active { background-color: var(--td-error-color-light); } .t-dropdown__item--theme-error.t-dropdown__item--active:hover { background-color: var(--td-bg-color-container-hover); } .t-dropdown__item--theme-error.t-dropdown__item--active:active { background-color: var(--td-bg-color-container-active); } .t-dropdown__item--theme-error.t-dropdown__item--disabled { color: var(--td-text-color-disabled); } .t-dropdown__item--theme-error.t-dropdown__item--disabled:hover { background-color: var(--td-bg-color-container-hover); } .t-dropdown__item--theme-error.t-dropdown__item--suffix:hover { background-color: var(--td-error-color-light); } .t-dropdown__item--theme-warning { color: var(--td-warning-color); } .t-dropdown__item--theme-warning:hover { background-color: var(--td-bg-color-container-hover); } .t-dropdown__item--theme-warning:active { background-color: var(--td-bg-color-container-active); } .t-dropdown__item--theme-warning.t-dropdown__item--active { background-color: var(--td-warning-color-light); } .t-dropdown__item--theme-warning.t-dropdown__item--active:hover { background-color: var(--td-bg-color-container-hover); } .t-dropdown__item--theme-warning.t-dropdown__item--active:active { background-color: var(--td-bg-color-container-active); } .t-dropdown__item--theme-warning.t-dropdown__item--disabled { color: var(--td-text-color-disabled); } .t-dropdown__item--theme-warning.t-dropdown__item--disabled:hover { background-color: var(--td-bg-color-container-hover); } .t-dropdown__item--theme-warning.t-dropdown__item--suffix:hover { background-color: var(--td-warning-color-light); } .t-tabs { font: var(--td-font-body-medium); color: var(--td-text-color-primary); box-sizing: border-box; margin: 0; padding: 0; list-style: none; overflow: hidden; background-color: var(--td-bg-color-container); } .t-tabs__header.t-is-left { float: left; } .t-tabs__header.t-is-right { float: right; } .t-tabs__header .t-icon { font-size: var(--td-font-size-body-large); } .t-tabs__nav { position: relative; overflow: hidden; user-select: none; } .t-tabs__operations { display: flex; flex-direction: row; position: absolute; border-bottom: 1px solid var(--td-component-stroke); background-color: var(--td-bg-color-container); } .t-tabs__operations--left { left: 0; z-index: 2; } .t-tabs__operations--right { right: 0; z-index: 2; } .t-tabs__operations--right .t-tabs__btn:first-child { box-shadow: -10px 0 20px 5px rgba(0, 0, 0, 0.05); } .t-tabs__operations--right .t-tabs__nav-action { display: flex; align-items: center; width: 100%; flex: 1; } .t-tabs__btn { width: 40px; height: 100%; display: flex; align-items: center; justify-content: center; background-color: var(--td-bg-color-secondarycontainer); border-left: 1px solid var(--td-component-stroke); cursor: pointer; color: var(--td-text-color-secondary); font: var(--td-font-body-large); transition: all 0.24s cubic-bezier(0.38, 0, 0.24, 1); z-index: 1; opacity: 1; } .t-tabs__btn:hover { background-color: var(--td-bg-color-secondarycontainer-hover); } .t-tabs__btn.t-size-m { height: var(--td-comp-size-xxl); line-height: var(--td-comp-size-xxl); } .t-tabs__btn.t-size-l { height: var(--td-comp-size-xxxxl); line-height: var(--td-comp-size-xxxxl); } .t-tabs__btn--left { border-right: 1px solid var(--td-component-stroke); box-shadow: 10px 0px 20px 5px rgba(0, 0, 0, 0.05); } .t-tabs__btn--left.fade-enter, .t-tabs__btn--left.fade-enter-from, .t-tabs__btn--left.fade-leave-to { transform: translateX(-50px); } .t-tabs__btn--right.fade-enter, .t-tabs__btn--right.fade-enter-from, .t-tabs__btn--right.fade-leave-to { transform: translateX(50px); } .t-tabs__nav-container { position: relative; } .t-tabs__nav-container.t-is-top::after { content: ""; width: 100%; height: 1px; position: absolute; top: auto; right: auto; bottom: 0; left: 0; background-color: var(--td-component-stroke); } .t-tabs__nav-container.t-is-bottom::after { content: ""; width: 100%; height: 1px; position: absolute; top: 0; right: auto; bottom: auto; left: 0; background-color: var(--td-component-stroke); } .t-tabs__nav-container.t-is-left::after { content: ""; width: 1px; height: 100%; position: absolute; top: 0; right: 0; bottom: auto; left: auto; background-color: var(--td-component-stroke); } .t-tabs__nav-container.t-is-right::after { content: ""; width: 1px; height: 100%; position: absolute; top: 0; right: auto; bottom: auto; left: 0; background-color: var(--td-component-stroke); } .t-tabs__nav-container.t-is-addable { margin-right: 40px; } .t-tabs__nav-container.t-tabs__nav--card::after { content: ""; background-color: transparent; } .t-tabs__scroll-btn { position: absolute; z-index: 1; width: 40px; height: 100%; display: block; background-color: var(--td-bg-color-secondarycontainer); text-align: center; border-bottom: 1px solid var(--td-component-stroke); cursor: pointer; color: var(--td-text-color-secondary); font: var(--td-font-body-large); } .t-tabs__scroll-btn.t-size-m { height: var(--td-comp-size-xxl); line-height: var(--td-comp-size-xxl); } .t-tabs__scroll-btn.t-size-l { height: var(--td-comp-size-xxxxl); line-height: var(--td-comp-size-xxxxl); } .t-tabs__nav-scroll { position: relative; display: inline-block; display: flex; flex: auto; align-self: stretch; overflow: hidden; white-space: nowrap; transform: translate(0); z-index: 1; } .t-tabs__nav-wrap { position: relative; display: flex; font-size: 0; } .t-tabs__nav-wrap.t-is-smooth { transition: transform 0.24s cubic-bezier(0, 0, 0.15, 1); } .t-tabs__nav-wrap.t-is-vertical { flex-direction: column; } .t-tabs__bar { position: absolute; background-color: var(--td-brand-color); z-index: 1; transition: all 0.24s cubic-bezier(0.38, 0, 0.24, 1); border-radius: var(--td-radius-small); } .t-tabs__bar.t-is-top { bottom: 0; left: 0; height: 3px; } .t-tabs__bar.t-is-bottom { top: 0; left: 0; height: 3px; } .t-tabs__bar.t-is-left { top: 0; right: 0; width: 3px; } .t-tabs__bar.t-is-right { top: 0; left: 0; width: 3px; } .t-tabs__nav-item { display: inline-flex; align-items: center; font: var(--td-font-body-medium); color: var(--td-text-color-secondary); position: relative; overflow: hidden; z-index: 0; cursor: pointer; flex-shrink: 0; transition: background-color cubic-bezier(0.38, 0, 0.24, 1) 0.2s; --ripple-color: var(--td-bg-color-container-active); } .t-tabs__nav-item-wrapper { display: flex; align-items: center; height: var(--td-comp-size-m); padding: 0 var(--td-comp-paddingLR-s); margin-left: var(--td-comp-margin-s); margin-right: var(--td-comp-margin-s); border-radius: var(--td-radius-default); transition: background-color cubic-bezier(0.38, 0, 0.24, 1) 0.2s; --ripple-color: var(--td-bg-color-container-active); } .t-tabs__nav-item.t-size-l { font: var(--td-font-body-large); } .t-tabs__nav-item.t-size-l .t-tabs__nav-item-wrapper { height: var(--td-comp-size-xxl); padding: 0 var(--td-comp-paddingLR-m); } .t-tabs__nav-item-text-wrapper { position: relative; display: flex; align-items: center; } .t-tabs__nav-item:not(.t-is-disabled):not(.t-is-active):hover .t-tabs__nav-item-wrapper { background-color: var(--td-bg-color-container-hover); } .t-tabs__nav-item.t-is-left, .t-tabs__nav-item.t-is-right { display: flex; align-items: center; } .t-tabs__nav-item.t-size-m { height: var(--td-comp-size-xxl); line-height: var(--td-comp-size-xxl); } .t-tabs__nav-item.t-size-l { height: var(--td-comp-size-xxxxl); line-height: var(--td-comp-size-xxxxl); } .t-tabs__nav-item.t-is-active { color: var(--td-brand-color); text-shadow: 0 0 0.3px currentcolor; } .t-tabs__nav-item.t-is-disabled { color: var(--td-text-color-disabled); cursor: not-allowed; } .t-tabs__nav-item > .remove-btn { margin-left: var(--td-comp-margin-s); transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1); } .t-tabs__nav--card { background-color: var(--td-bg-color-secondarycontainer); } .t-tabs__nav--card.t-tabs__nav-item { padding-right: var(--td-comp-paddingLR-l); padding-left: var(--td-comp-paddingLR-l); border-bottom: 1px solid var(--td-component-stroke); } .t-tabs__nav--card.t-tabs__nav-item::after { display: none; } .t-tabs__nav--card.t-tabs__nav-item:not(.t-is-disabled):not(.t-is-active):hover { background-color: var(--td-bg-color-secondarycontainer-hover); } .t-tabs__nav--card.t-tabs__nav-item:not(:first-of-type) { border-left: 1px solid var(--td-component-stroke); } .t-tabs__nav--card.t-tabs__nav-item:last-of-type { border-right: 1px solid var(--td-component-stroke); } .t-tabs__nav--card.t-tabs__nav-item.t-is-active { color: var(--td-brand-color); background-color: var(--td-bg-color-container); border-bottom-color: var(--td-bg-color-container); } .t-tabs__nav--card.t-tabs__nav-item.t-size-l { padding-left: var(--td-comp-paddingLR-xl); padding-right: var(--td-comp-paddingLR-xl); } .t-tabs__nav--card .t-icon-close { color: var(--td-text-color-secondary); transition: color cubic-bezier(0.38, 0, 0.24, 1) 0.2s; } .t-tabs__nav--card .t-icon-close:hover { color: var(--td-text-color-primary); } .t-tabs__content { overflow: hidden; position: relative; } .t-tab-panel.t-is-hidden { display: none; } a.t-menu__item { text-decoration: none; color: unset; } a.t-menu__item:hover, a.t-menu__item:active { color: inherit; } .t-menu__logo > * { margin-left: var(--td-comp-margin-xxl); } .t-head-menu { font: var(--td-font-body-medium); color: var(--td-text-color-primary); box-sizing: border-box; margin: 0; padding: 0; list-style: none; position: relative; width: 100%; background-color: var(--td-bg-color-container); } .t-head-menu__inner { display: flex; height: var(--td-comp-size-xxxl); } .t-head-menu__inner li + li { margin-left: var(--td-comp-margin-s); } .t-head-menu__inner .t-menu:first-child { margin-left: var(--td-comp-margin-xxl); } .t-head-menu .t-menu__logo:not(:empty) { height: 100%; margin-right: var(--td-comp-margin-xxxl); } .t-head-menu .t-menu { flex: 1; display: flex; align-items: center; } .t-head-menu .t-menu__operations:not(:empty) { position: relative; display: flex; align-items: center; height: var(--td-comp-size-xxxl); line-height: 64px; text-align: right; margin-right: var(--td-comp-margin-s); overflow: hidden; } .t-head-menu .t-menu__operations-icon { width: var(--td-comp-size-m); height: var(--td-comp-size-m); padding: var(--td-comp-paddingTB-s) var(--td-comp-paddingLR-s); line-height: var(--td-comp-size-m); box-sizing: border-box; } .t-head-menu .t-submenu > .t-menu__item { overflow: unset; } .t-head-menu .t-submenu > .t-menu__item::before { content: ""; display: block; position: absolute; bottom: -20px; left: 0; right: 0; height: 20px; } .t-head-menu .t-menu__item { height: var(--td-comp-size-m); line-height: var(--td-comp-size-m); padding: 0 var(--td-comp-paddingLR-l); justify-content: center; transition: all 0.28s cubic-bezier(0.645, 0.045, 0.355, 1); gap: var(--td-comp-margin-m); } .t-head-menu__submenu { border-top: 1px solid var(--td-component-stroke); padding-left: 0; } .t-default-menu { font: var(--td-font-body-medium); color: var(--td-text-color-primary); box-sizing: border-box; margin: 0; padding: 0; list-style: none; position: relative; width: 232px; display: inline-block; background: var(--td-bg-color-container); transition: width 0.28s cubic-bezier(0.645, 0.045, 0.355, 1); white-space: nowrap; } .t-default-menu .t-menu__item { color: var(--td-text-color-secondary); } .t-default-menu.t-is-collapsed { width: 64px; } .t-default-menu.t-is-collapsed .t-menu__logo > * { margin-left: var(--td-comp-margin-l); } .t-default-menu.t-is-collapsed .t-menu .t-menu__item { padding: 0 14px; justify-content: center; } .t-default-menu.t-is-collapsed .t-menu .t-menu__item .t-menu__item-link { margin-left: 0; opacity: 0; content: ""; position: absolute; top: 0; bottom: 0; left: 0; right: 0; } .t-default-menu.t-is-collapsed .t-fake-arrow { display: none; } .t-default-menu.t-is-collapsed .t-menu__item { text-overflow: initial; } .t-default-menu.t-is-collapsed .t-menu__item.t-is-active.t-is-opened { color: var(--td-brand-color); background-color: var(--td-brand-color-light); } .t-default-menu.t-is-collapsed .t-menu__item.t-is-active.t-is-opened .t-icon { color: var(--td-brand-color); } .t-default-menu.t-is-collapsed .t-menu__item.t-menu__item--plain::after { content: ""; } .t-default-menu.t-is-collapsed .t-menu__item span { display: none; } .t-default-menu.t-is-collapsed .t-menu__item .t-icon { margin-right: initial; } .t-default-menu.t-is-collapsed .t-submenu-icon { display: none; } .t-default-menu.t-is-collapsed .t-submenu > .t-menu__item { min-width: initial; } .t-default-menu.t-is-collapsed .t-submenu > .t-menu__item::after { content: ""; display: block; position: absolute; right: -20px; top: 0; bottom: 0; width: 20px; } .t-default-menu.t-is-collapsed .t-menu-group:first-child .t-menu-group__title { display: none; } .t-default-menu.t-is-collapsed .t-menu-group:first-child .t-menu-group__title + * { margin-top: 0; } .t-default-menu.t-is-collapsed .t-menu-group__title { padding: 0; font-size: 0; } .t-default-menu.t-is-collapsed .t-menu-group__title::after { content: ""; display: block; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); height: 1px; width: 20px; background: var(--td-component-stroke); } .t-default-menu.t-is-collapsed .t-menu__operations { text-align: center; } .t-default-menu.t-is-collapsed .t-menu__operations-icon { display: block; } .t-default-menu.t-is-collapsed .t-menu__log > * { margin: 0 auto; } .t-default-menu__inner { display: flex; flex-direction: column; height: 100%; } .t-default-menu__inner .t-menu__logo:not(:empty) { box-sizing: border-box; width: 100%; height: var(--td-comp-size-xxxl); border-bottom: 1px solid var(--td-component-stroke); } .t-default-menu__inner .t-menu { padding: var(--td-comp-paddingTB-l) var(--td-comp-paddingLR-s); position: relative; flex: 1; } .t-default-menu__inner .t-menu--scroll { overflow-y: auto; overflow-x: hidden; } @-moz-document url-prefix() { .t-default-menu__inner .t-menu--scroll { scrollbar-color: var(--td-scrollbar-color) transparent; scrollbar-width: thin; } } .t-default-menu__inner .t-menu--scroll::-webkit-scrollbar { width: 6px; height: 6px; } .t-default-menu__inner .t-menu--scroll::-webkit-scrollbar-thumb { border: 0px solid transparent; background-clip: content-box; background-color: var(--td-scrollbar-color); border-radius: 11px; } .t-default-menu__inner .t-menu--scroll::-webkit-scrollbar-thumb:vertical:hover, .t-default-menu__inner .t-menu--scroll::-webkit-scrollbar-thumb:horizontal:hover { background-color: var(--td-scrollbar-hover-color); } .t-default-menu__inner .t-menu > *:not(.t-menu-group):not(:first-child) { margin-top: var(--td-comp-margin-xs); } .t-default-menu__inner .t-menu .t-menu-group > *:not(:first-child), .t-default-menu__inner .t-menu .t-menu__sub > *:not(:first-child), .t-default-menu__inner .t-menu .t-submenu > *:not(:first-child) { margin-top: var(--td-comp-margin-xs); } .t-default-menu__inner .t-menu-group__title { position: relative; padding: var(--td-comp-paddingTB-l) var(--td-comp-paddingLR-l) var(--td-comp-paddingTB-xs) var(--td-comp-paddingLR-l); color: var(--td-text-color-placeholder); font-size: var(--td-font-body-small); box-sizing: border-box; } .t-default-menu .t-submenu { position: relative; } .t-default-menu .t-menu__operations:not(:empty) { width: 100%; position: relative; padding: var(--td-comp-paddingTB-s) var(--td-comp-paddingLR-l); top: 0; left: 0; text-align: left; border-top: solid 1px var(--td-component-stroke); box-sizing: border-box; } .t-default-menu .t-menu__operations-icon { width: 32px; height: 32px; padding: var(--td-comp-paddingTB-s) var(--td-comp-paddingLR-s); cursor: pointer; color: var(--td-text-color-primary); box-sizing: border-box; } .t-default-menu .t-menu__item.t-is-opened { color: var(--td-text-color-primary); background-color: unset; } .t-default-menu .t-menu__item.t-is-opened .t-icon { color: var(--td-text-color-primary); } .t-default-menu .t-menu__sub { padding: 0; overflow: hidden; } .t-default-menu .t-menu__sub .t-menu__item { padding-left: var(--padding-left, 32px); } .t-default-menu .t-slide-down-enter-active .t-menu__sub { height: 100%; } .t-default-menu .t-menu__item { position: relative; padding: 0 10px 0 16px; height: var(--td-comp-size-l); line-height: var(--td-comp-size-l); border-bottom: 0; text-align: left; border-radius: var(--td-radius-default); transition: background-color 0.28s cubic-bezier(0.38, 0, 0.24, 1), padding 0.28s cubic-bezier(0.38, 0, 0.24, 1); box-sizing: border-box; } .t-default-menu .t-menu__item .t-icon { width: 20px; height: 20px; flex-shrink: 0; margin-right: var(--td-comp-margin-s); } .t-default-menu .t-menu__item .t-fake-arrow { margin-left: auto; min-width: 16px; } .t-default-menu .t-menu__item.t-is-active:not(.t-is-opened) { color: var(--td-brand-color); background-color: var(--td-brand-color-light); } .t-default-menu .t-menu__item.t-is-active:not(.t-is-opened) .t-icon { color: var(--td-brand-color); } .t-default-menu .t-menu__item:hover:not(.t-is-active):not(.t-is-disabled) { background: var(--td-bg-color-secondarycontainer-hover); } .t-default-menu.t-menu--dark { background: var(--td-gray-color-13); } .t-default-menu.t-menu--dark .t-menu__item { color: var(--td-font-white-2); } .t-default-menu.t-menu--dark .t-menu__logo:not(:empty) { border-bottom-color: var(--td-gray-color-10); } .t-default-menu.t-menu--dark .t-menu__operations:not(:empty) { border-top-color: var(--td-gray-color-10); } .t-default-menu.t-menu--dark .t-menu__item:hover:not(.t-is-active):not(.t-is-disabled) { background-color: var(--td-gray-color-10); } .t-default-menu.t-menu--dark .t-menu__item.t-is-active:not(.t-is-opened) { color: var(--td-text-color-anti); background-color: var(--td-brand-color); } .t-default-menu.t-menu--dark .t-menu__item.t-is-active:not(.t-is-opened) .t-icon { color: var(--td-text-color-anti); } .t-default-menu.t-menu--dark .t-menu__item.t-is-opened.t-is-active { background-color: transparent; } .t-default-menu.t-menu--dark .t-menu-group__title { color: var(--td-font-white-3); } .t-default-menu.t-menu--dark.t-is-collapsed .t-menu-group__title:after { background-color: var(--td-gray-color-10); } .t-default-menu.t-menu--dark.t-is-collapsed .t-menu__item.t-is-active.t-is-opened { background-color: var(--td-brand-color); color: var(--td-text-color-anti); } .t-default-menu.t-menu--dark.t-is-collapsed .t-menu__item.t-is-active.t-is-opened .t-icon { color: var(--td-text-color-anti); } .t-menu { color: var(--td-text-color-primary); font: var(--td-font-body-medium); list-style: none; padding: 0; margin: 0; } .t-menu--dark { color: var(--td-font-white-2); } .t-menu__logo:not(:empty) { display: flex; align-items: center; } .t-menu .t-submenu { position: relative; } .t-menu .t-submenu.t-is-active > .t-menu__item { color: var(--td-gray-color-13); } .t-menu .t-submenu.t-is-active > .t-menu__item .t-icon { color: var(--td-gray-color-13); } .t-menu .t-submenu .t-submenu-icon { width: 16px; height: 16px; } .t-menu .t-submenu.t-is-opened .t-submenu-icon { transform: scaleY(-1); } .t-menu__spacer::before { content: ""; display: block; position: absolute; z-index: 1; } .t-menu__spacer--left::before { left: -16px; width: 16px; top: 0; bottom: 0; } .t-menu__spacer--top::before { top: -20px; left: 0; right: 0; height: 20px; } .t-menu__item { position: relative; display: flex; align-items: center; height: 40px; line-height: 40px; text-align: center; color: var(--td-text-color-primary); cursor: pointer; text-overflow: ellipsis; border-radius: var(--td-radius-default); --ripple-color: var(--td-bg-color-container-active); } .t-menu__item ::selection { background: transparent; } .t-menu__item-spacer { overflow: unset; } .t-menu__item-spacer::before { content: ""; display: block; position: absolute; z-index: 1; } .t-menu__item-spacer--right::before { right: -16px; width: 16px; top: 0; bottom: 0; } .t-menu__item-spacer--bottom::before { bottom: -20px; left: 0; right: 0; height: 20px; } .t-menu__item a { color: unset; text-decoration: none; } .t-menu__item a.t-menu__item-link { color: unset; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; } .t-menu__item a.t-menu__item-link::before { content: ""; position: absolute; top: 0; bottom: 0; left: 0; right: 0; } .t-menu__item.t-is-active { color: var(--td-brand-color); background-color: var(--td-brand-color-light); } .t-menu__item.t-is-opened { color: var(--td-brand-color); } .t-menu__item:hover:not(.t-is-active):not(.t-is-opened):not(.t-is-disabled) { background-color: var(--td-bg-color-container-hover); } .t-menu__item.t-is-disabled { color: var(--td-text-color-disabled); cursor: not-allowed; } .t-menu__content { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .t-menu--dark.t-head-menu { background-color: var(--td-gray-color-13); } .t-menu--dark .t-menu__item { color: var(--td-text-color-anti); --ripple-color: var(--td-gray-color-11); } .t-menu--dark .t-menu__item.t-is-active { color: var(--td-text-color-anti); background-color: var(--td-brand-color); } .t-menu--dark .t-menu__item.t-is-opened { color: var(--td-text-color-anti); } .t-menu--dark .t-menu__item.t-is-opened .t-icon { color: var(--td-text-color-anti); } .t-menu--dark .t-menu__item.t-is-disabled { color: var(--td-font-white-4); } .t-menu--dark .t-menu__item:hover:not(.t-is-active):not(.t-is-opened):not(.t-is-disabled) { background-color: var(--td-gray-color-10); } .t-menu--dark .t-menu__popup { background: var(--td-gray-color-13); border: solid 0.5px var(--td-gray-color-10); } .t-menu--dark .t-menu__popup .t-menu__item { color: var(--td-text-color-anti); border-radius: var(--td-radius-default); } .t-menu--dark .t-menu__popup .t-menu__item.t-is-active { color: var(--td-text-color-anti); background-color: var(--td-brand-color); } .t-menu--dark .t-menu__popup .t-menu__item:hover:not(.t-is-active) { background-color: var(--td-gray-color-10); } .t-menu--dark .t-head-menu__submenu { border-top: 1px solid transparent; } .t-menu--dark .t-menu__operations-icon { color: var(--td-bg-color-container); } .t-menu--dark .t-menu__operations-icon:hover { background-color: var(--td-brand-color); } .t-menu__popup { overflow: hidden; background: var(--td-bg-color-container); z-index: 1000; border-radius: var(--td-radius-medium); opacity: 0; list-style: none; padding: 0; margin: 0; } .t-menu__popup.t-popup__content { position: absolute; } .t-menu__popup-wrapper { padding: var(--td-pop-padding-m); height: 100%; list-style: none; margin: 0; } @-moz-document url-prefix() { .t-menu__popup-wrapper { scrollbar-color: var(--td-scrollbar-color) transparent; scrollbar-width: thin; } } .t-menu__popup-wrapper::-webkit-scrollbar { width: 8px; height: 8px; } .t-menu__popup-wrapper::-webkit-scrollbar-thumb { border: 2px solid transparent; background-clip: content-box; background-color: var(--td-scrollbar-color); border-radius: 15px; } .t-menu__popup-wrapper::-webkit-scrollbar-thumb:vertical:hover, .t-menu__popup-wrapper::-webkit-scrollbar-thumb:horizontal:hover { background-color: var(--td-scrollbar-hover-color); } .t-menu__popup .t-fake-arrow { margin-left: auto; } .t-menu__popup .t-menu__item { padding-left: var(--td-comp-paddingLR-l); padding-right: var(--td-comp-paddingLR-l); } .t-menu__popup.t-is-vertical { min-width: var(--popup-width, 160px); } .t-menu__popup.t-is-horizontal .t-menu__item { white-space: nowrap; } .t-menu__popup.t-is-horizontal li + li { margin-top: var(--td-comp-margin-xs); } .t-menu__popup.t-is-opened { opacity: 1; box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.1), 0 8px 10px 1px rgba(0, 0, 0, 0.06), 0 3px 14px 6px rgba(0, 0, 0, 0.05); overflow: visible; } .t-menu__popup .t-menu__item { color: var(--td-text-color-primary); height: var(--td-comp-size-s); line-height: var(--td-comp-size-s); } .t-menu__popup .t-menu__item + .t-menu__item { margin-left: 0; } .t-menu__popup .t-menu__item:hover:not(.t-is-active) { background-color: var(--td-bg-color-container-hover); } .t-menu__popup .t-is-disabled { color: var(--td-text-color-disabled); } .t-menu__operations-icon { margin-right: var(--td-comp-margin-l); border-radius: var(--td-radius-default); color: var(--td-text-color-primary); transition: background-color 0.24s cubic-bezier(0.38, 0, 0.24, 1); } .t-menu__operations-icon:hover { background-color: var(--td-brand-color-light); } .t-opacity-transition { transition: opacity 0.28s cubic-bezier(0.55, 0, 0.1, 1); } .horizontal-collapse-transition .t-submenu__title .t-submenu__icon-arrow { transition: 0.2s; opacity: 0; } .t-menu__popup { top: 0; left: calc(100% - var(--td-pop-padding-m)); } .t-menu__popup .t-menu__item:not(:first-child), .t-menu__popup .t-submenu:not(:first-child) { margin-top: var(--td-comp-margin-xxs); } .t-is-head-menu .t-menu__popup { margin-top: calc((var(--td-comp-size-xxxl) - var(--td-comp-size-m)) / 2) !important; } .t-menu-is-nested .t-menu__popup { margin-top: calc(0px - var(--td-pop-padding-m)) !important; } .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); text-overflow: initial; } .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); } .input-disabled.t-is-disabled > .t-input__prefix .t-icon:hover, .input-disabled.t-is-disabled > .t-input__suffix .t-icon:hover { color: var(--td-text-color-disabled); } .t-tips { font-size: var(--td-font-size-body-small); } .t-tips.t-is-default { color: var(--td-text-color-placeholder); } .t-tips.t-is-error { color: var(--td-error-color); } .t-tips.t-is-warning { color: var(--td-warning-color); } .t-tips.t-is-success { color: var(--td-success-color); } .t-input { margin: 0; padding: 0; list-style: none; position: relative; height: var(--td-comp-size-m); border-width: 1px; border-style: solid; border-radius: var(--td-radius-default); border-color: var(--td-border-level-2-color); padding: 0 var(--td-comp-paddingLR-s); background-color: var(--td-bg-color-specialcomponent); outline: none; color: var(--td-text-color-primary); font: var(--td-font-body-medium); width: 100%; box-sizing: border-box; transition: border cubic-bezier(0.38, 0, 0.24, 1) 0.2s, box-shadow cubic-bezier(0.38, 0, 0.24, 1) 0.2s, background-color cubic-bezier(0.38, 0, 0.24, 1) 0.2s; display: flex; align-items: center; overflow: hidden; } .t-input:hover { border-color: var(--td-brand-color); } .t-input:focus { z-index: 1; border-color: var(--td-brand-color); box-shadow: 0 0 0 2px var(--td-brand-color-focus); } .t-input--borderless:not(.t-input--focused) { border-color: transparent; transition: border cubic-bezier(0.38, 0, 0.24, 1) 0.2s, box-shadow cubic-bezier(0.38, 0, 0.24, 1) 0.2s, background-color cubic-bezier(0.38, 0, 0.24, 1) 0.2s; } .t-input--borderless:not(.t-input--focused):hover { border-color: var(--td-component-border); background-color: var(--td-bg-color-container-hover); cursor: pointer; } .t-input--borderless:not(.t-input--focused).t-is-disabled { border: none; background-color: var(--td-bg-color-component-disabled); } .t-input--focused { border-color: var(--td-brand-color); box-shadow: 0 0 0 2px var(--td-brand-color-focus); z-index: 1; } .t-input :focus-visible { outline: none; } .t-input__inner { 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; box-sizing: border-box; white-space: nowrap; word-wrap: normal; overflow: hidden; text-overflow: ellipsis; } .t-input__inner::placeholder { color: var(--td-text-color-placeholder); } .t-input__inner:placeholder-shown { text-overflow: ellipsis; width: 100%; } .t-input__inner[type="password"]::-ms-reveal { display: none; } .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 { appearance: none; } .t-input__inner.t-input--soft-hidden { width: 0; } .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; transition: border cubic-bezier(0.38, 0, 0.24, 1) 0.2s, box-shadow cubic-bezier(0.38, 0, 0.24, 1) 0.2s, background-color cubic-bezier(0.38, 0, 0.24, 1) 0.2s; } .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 { box-shadow: 0 0 0 2px var(--td-success-color-focus); } .t-input.t-is-success.t-input--focused { 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 { box-shadow: 0 0 0 2px var(--td-warning-color-focus); } .t-input.t-is-warning.t-input--focused { 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 { box-shadow: 0 0 0 2px var(--td-error-color-focus); } .t-input.t-is-error.t-input--focused { 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); text-overflow: initial; } .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-is-disabled > .t-input__prefix .t-icon:hover, .t-input.t-is-disabled > .t-input__suffix .t-icon:hover { color: var(--td-text-color-disabled); } .t-input.t-input--prefix > .t-input__prefix { z-index: 2; height: 100%; text-align: center; display: flex; align-items: center; } .t-input.t-input--prefix > .t-input__prefix-icon { font-size: var(--td-font-size-body-large); } .t-input.t-input--prefix.t-size-s .t-input__prefix-icon { font-size: var(--td-font-size-body-medium); } .t-input.t-input--prefix.t-size-l .t-input__prefix-icon { font-size: var(--td-font-size-title-large); } .t-input.t-input--suffix > .t-input__suffix { z-index: 2; height: 100%; text-align: center; display: flex; align-items: center; } .t-input.t-input--suffix > .t-input__suffix-icon { font-size: var(--td-font-size-body-large); } .t-input.t-input--suffix.t-size-s .t-input__suffix-icon { font-size: var(--td-font-size-body-medium); } .t-input.t-input--suffix.t-size-l .t-input__suffix-icon { font-size: var(--td-font-size-title-large); } .t-input .t-input__suffix-clear { cursor: pointer; } .t-input.t-size-l { height: var(--td-comp-size-xl); font: var(--td-font-body-large); padding: var(--td-comp-paddingTB-m) var(--td-comp-paddingLR-m); } .t-input.t-size-s { height: var(--td-comp-size-xs); font: var(--td-font-body-small); } .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__prefix:not(:empty) { margin-right: var(--td-comp-margin-s); } .t-input .t-input__suffix > .t-icon { color: var(--td-text-color-placeholder); transition: all 0.2s linear; } .t-input .t-input__suffix > .t-icon:hover { color: var(--td-text-color-secondary); transition: all 0.2s linear; } .t-input .t-input__suffix:not(:empty) { margin-left: var(--td-comp-margin-s); } .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: inline-flex; 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: var(--td-comp-margin-xxxl); } .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: var(--td-line-height-body-small); 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: 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-input__limit-number.t-is-disabled { background: var(--td-bg-color-component-disabled); } @keyframes t-fade-in { from { opacity: 0; } to { opacity: 1; } } @keyframes t-fade-out { from { opacity: 1; } to { opacity: 0; } } @keyframes t-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } .t-icon-loading { animation: t-spin 1s linear infinite; } @keyframes t-zoom-out { from { transform: scale(0.2); } to { transform: scale(1); } } .t-input-number { font: var(--td-font-body-medium); color: var(--td-text-color-primary); margin: 0; padding: 0; list-style: none; display: inline-block; position: relative; box-sizing: border-box; padding: 0 var(--td-comp-size-m); user-select: none; width: 144px; } .t-input-number:not(.t-input-number--column) > .t-input-number__decrease + .t-input__wrap { margin-left: var(--td-comp-margin-xs); } .t-input-number input::-webkit-outer-spin-button, .t-input-number input::-webkit-inner-spin-button { appearance: none; } .t-input-number input[type="number"] { appearance: textfield; } .t-input-number > .t-input__tips { position: absolute; left: 0; } .t-input-number input + .t-input__suffix { margin-left: var(--td-comp-paddingLR-s); } .t-input-number .t-input__prefix { margin-right: var(--td-comp-paddingLR-s); } .t-input-number .t-input { color: var(--td-text-color-primary); } .t-input-number.t-input-number--auto-width { width: auto; } .t-input-number.t-input-number--auto-width.t-is-controls-right { min-width: auto; width: auto; } .t-input-number.t-input-number--auto-width .t-input__inner { min-width: 42px; } .t-input-number .t-input-number__decrease, .t-input-number .t-input-number__increase { width: var(--td-comp-size-m); height: var(--td-comp-size-m); position: absolute; top: 0; border: 1px solid var(--td-border-level-2-color); box-sizing: border-box; border-radius: var(--td-radius-default); background-color: transparent; display: flex; justify-content: center; align-items: center; z-index: 1; cursor: pointer; transition: all cubic-bezier(0.38, 0, 0.24, 1) 0.2s; } .t-input-number .t-input-number__decrease:hover, .t-input-number .t-input-number__increase:hover { color: var(--td-brand-color); border-color: var(--td-brand-color); } .t-input-number .t-input-number__decrease:hover .t-icon, .t-input-number .t-input-number__increase:hover .t-icon { color: var(--td-brand-color); } .t-input-number .t-input-number__decrease:active, .t-input-number .t-input-number__increase:active { color: var(--td-brand-color); background-color: var(--td-bg-color-container-hover); } .t-input-number .t-input-number__decrease .t-icon, .t-input-number .t-input-number__increase .t-icon { position: relative; z-index: 1; font-size: var(--td-font-size-body-large); color: var(--td-text-color-secondary); } .t-input-number .t-input-number__decrease.t-is-disabled, .t-input-number .t-input-number__increase.t-is-disabled { color: var(--td-text-color-disabled); cursor: no-drop; background-color: var(--td-bg-color-component-disabled); } .t-input-number .t-input-number__decrease.t-is-disabled .t-icon, .t-input-number .t-input-number__increase.t-is-disabled .t-icon { color: var(--td-text-color-disabled); } .t-input-number .t-input-number__decrease.t-is-disabled:hover, .t-input-number .t-input-number__increase.t-is-disabled:hover { border-color: var(--td-border-level-2-color); } .t-input-number .t-input-number__decrease.t-is-disabled:hover .t-icon, .t-input-number .t-input-number__increase.t-is-disabled:hover .t-icon { color: var(--td-text-color-disabled); } .t-input-number .t-input-number__decrease.t-is-disabled::placeholder, .t-input-number .t-input-number__increase.t-is-disabled::placeholder { color: var(--td-text-color-disabled); } .t-input-number .t-input-number__decrease { left: 0; } .t-input-number .t-input-number__increase { right: -8px; } .t-input-number.t-is-disabled .t-input { cursor: no-drop; background-color: var(--td-bg-color-component-disabled); color: var(--td-text-color-disabled); } .t-input-number.t-is-disabled .t-input:hover, .t-input-number.t-is-disabled .t-input:focus, .t-input-number.t-is-disabled .t-input:active { border-color: var(--td-border-level-2-color); } .t-input-number.t-is-disabled .t-input-number__decrease, .t-input-number.t-is-disabled .t-input-number__increase { color: var(--td-text-color-disabled); cursor: no-drop; background-color: var(--td-bg-color-component-disabled); } .t-input-number.t-is-disabled .t-input-number__decrease .t-icon, .t-input-number.t-is-disabled .t-input-number__increase .t-icon { color: var(--td-text-color-secondary); } .t-input-number.t-size-s { width: 120px; padding: 0 var(--td-comp-size-xs); } .t-input-number.t-size-s .t-input { font-size: var(--td-font-size-body-small); height: var(--td-comp-size-xs); line-height: var(--td-comp-size-xs); } .t-input-number.t-size-s .t-input-number__decrease, .t-input-number.t-size-s .t-input-number__increase { font-size: var(--td-font-size-body-medium); width: var(--td-comp-size-xs); height: var(--td-comp-size-xs); } .t-input-number.t-size-l { width: 168px; padding: 0 var(--td-comp-size-xl); } .t-input-number.t-size-l .t-input { height: var(--td-comp-size-xl); line-height: var(--td-comp-size-xl); } .t-input-number.t-size-l .t-input-number__decrease, .t-input-number.t-size-l .t-input-number__increase { font-size: 18px; width: var(--td-comp-size-xl); height: var(--td-comp-size-xl); } .t-input-number.t-size-l.t-is-controls-right .t-input { height: var(--td-comp-size-xl); line-height: var(--td-comp-size-xl); padding-right: calc(var(--td-comp-size-xl) + var(--td-comp-paddingLR-s)); } .t-input-number.t-size-l.t-is-controls-right .t-input-number__decrease, .t-input-number.t-size-l.t-is-controls-right .t-input-number__increase { width: var(--td-comp-size-xl); font-size: var(--td-font-size-body-large); } .t-input-number.t-size-l .t-input--prefix { font: var(--td-font-body-large); padding: 0 var(--td-comp-paddingLR-m); } .t-input-number.t-input-number--normal { padding: 0; border-radius: var(--td-radius-default); } .t-input-number.t-input-number--normal.t-is-disabled { cursor: no-drop; color: var(--td-text-color-disabled); } .t-input-number.t-input-number--normal.t-is-disabled:hover .t-input { border-color: var(--td-border-level-2-color); } .t-input-number.t-input-number--normal.t-is-disabled::placeholder { color: var(--td-text-color-disabled); } .t-input-number.t-input-number--normal.t-is-disabled .t-input:focus { box-shadow: none; } .t-input-number.t-is-controls-right { width: 96px; padding: 0; } .t-input-number.t-is-controls-right:hover .t-input-number__decrease, .t-input-number.t-is-controls-right:hover .t-input-number__increase { opacity: 1; visibility: visible; } .t-input-number.t-is-controls-right .t-input { width: 100%; box-sizing: border-box; margin: 0; padding-right: calc(var(--td-comp-size-m) + var(--td-comp-paddingLR-s)); border-radius: var(--td-radius-default); } .t-input-number.t-is-controls-right .t-input-number__decrease, .t-input-number.t-is-controls-right .t-input-number__increase { width: var(--td-comp-size-m); height: calc(calc(var(--td-comp-size-m) / 2) - 2px); border: 0; left: initial; top: initial; right: 1px; border-radius: 0; background: var(--td-bg-color-secondarycontainer); opacity: 0; visibility: hidden; z-index: 2; } .t-input-number.t-is-controls-right .t-input-number__decrease .t-icon, .t-input-number.t-is-controls-right .t-input-number__increase .t-icon { font-size: var(--td-font-size-body-small); } .t-input-number.t-is-controls-right .t-input-number__decrease:hover, .t-input-number.t-is-controls-right .t-input-number__increase:hover { background: var(--td-bg-color-component-hover); } .t-input-number.t-is-controls-right .t-input-number__decrease:hover .t-icon, .t-input-number.t-is-controls-right .t-input-number__increase:hover .t-icon { color: var(--td-text-color-primary); } .t-input-number.t-is-controls-right .t-input-number__decrease.t-is-disabled, .t-input-number.t-is-controls-right .t-input-number__increase.t-is-disabled { color: var(--td-text-color-disabled); cursor: no-drop; background-color: var(--td-bg-color-component-disabled); } .t-input-number.t-is-controls-right .t-input-number__decrease.t-is-disabled .t-icon, .t-input-number.t-is-controls-right .t-input-number__increase.t-is-disabled .t-icon { color: var(--td-text-color-disabled); } .t-input-number.t-is-controls-right .t-input-number__decrease.t-is-disabled:hover, .t-input-number.t-is-controls-right .t-input-number__increase.t-is-disabled:hover { border-color: var(--td-border-level-2-color); } .t-input-number.t-is-controls-right .t-input-number__decrease.t-is-disabled:hover .t-icon, .t-input-number.t-is-controls-right .t-input-number__increase.t-is-disabled:hover .t-icon { color: var(--td-text-color-disabled); } .t-input-number.t-is-controls-right .t-input-number__decrease.t-is-disabled::placeholder, .t-input-number.t-is-controls-right .t-input-number__increase.t-is-disabled::placeholder { color: var(--td-text-color-disabled); } .t-input-number.t-is-controls-right .t-input-number__increase { top: 1px; border-top-right-radius: calc(var(--td-radius-default) - 1px); } .t-input-number.t-is-controls-right .t-input-number__decrease { top: calc(calc(calc(var(--td-comp-size-m) / 2) - 2px) + 3px); border-bottom-right-radius: calc(var(--td-radius-default) - 1px); } .t-input-number.t-is-controls-right.t-size-l { width: 120px; } .t-input-number.t-is-controls-right.t-size-l .t-input-number__increase, .t-input-number.t-is-controls-right.t-size-l .t-input-number__decrease { height: calc(calc(var(--td-comp-size-xl) / 2) - 2px); } .t-input-number.t-is-controls-right.t-size-l .t-input-number__decrease { top: calc(calc(calc(var(--td-comp-size-xl) / 2) - 2px) + 3px); } .t-input-number.t-is-controls-right.t-size-s { width: 88px; } .t-input-number.t-is-controls-right.t-size-s .t-input-number__increase, .t-input-number.t-is-controls-right.t-size-s .t-input-number__decrease { height: calc(calc(var(--td-comp-size-xs) / 2) - 2px); } .t-input-number.t-is-controls-right.t-size-s .t-input-number__decrease { top: calc(calc(calc(var(--td-comp-size-xs) / 2) - 2px) + 3px); } .t-input-number--row .t-input__wrap { width: initial; margin-right: var(--td-comp-margin-xs); } .t-input-number--row .t-input-number__increase { right: 0; } .t-tag { font: var(--td-font-body-medium); color: var(--td-text-color-primary); box-sizing: border-box; margin: 0; padding: 0; list-style: none; display: inline-flex; align-items: center; flex-direction: row; padding: 0px var(--td-comp-paddingLR-s); height: var(--td-comp-size-xs); font: var(--td-font-body-small); color: var(--td-text-color-anti); border-radius: var(--td-radius-default); border: 1px solid transparent; white-space: nowrap; } .t-tag .t-icon { margin-right: var(--td-comp-margin-xs); width: calc(var(--td-font-size-body-medium) + 2px); height: calc(var(--td-font-size-body-medium) + 2px); flex-shrink: 0; } .t-tag .t-tag__icon-close { margin-right: 0; margin-left: var(--td-comp-margin-s); font: var(--td-font-body-medium); cursor: pointer; transition: color 0.2s cubic-bezier(0.38, 0, 0.24, 1); } .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:active { cursor: default; } .t-tag--default.t-tag--disabled { color: var(--td-text-color-disabled); background-color: var(--td-bg-color-component-disabled); border-color: var(--td-component-border); cursor: not-allowed; } .t-tag--default.t-tag--disabled:hover { cursor: not-allowed; } .t-tag--default.t-tag--disabled .t-icon:hover { cursor: pointer; } .t-tag--default.t-tag--outline { border-color: var(--td-component-border); } .t-tag--default.t-tag--light { background-color: var(--td-bg-color-secondarycontainer); } .t-tag--default.t-tag--light-outline { border-color: var(--td-component-border); background-color: var(--td-bg-color-secondarycontainer); } .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-light); } .t-tag--success.t-tag--light-outline { border-color: var(--td-success-color); background-color: var(--td-success-color-light); } .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-light); } .t-tag--warning.t-tag--light-outline { border-color: var(--td-warning-color); background-color: var(--td-warning-color-light); } .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-light); } .t-tag--danger.t-tag--light-outline { border-color: var(--td-error-color); background-color: var(--td-error-color-light); } .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 { color: var(--td-font-white-2); } .t-tag--dark.t-tag:not(.t-tag--default) .t-tag__icon-close:hover { color: var(--td-font-white-1); } .t-tag.t-tag--outline { background: transparent; } .t-tag.t-size-s { padding: 0px var(--td-comp-paddingLR-xs); height: var(--td-comp-size-xxs); 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 var(--td-comp-paddingLR-m); height: var(--td-comp-size-m); 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; } .t-tag.t-tag--check:not(.t-tag--disabled) { transition: background-color 0.2s cubic-bezier(0.38, 0, 0.24, 1); cursor: pointer; } .t-tag.t-tag--check:not(.t-tag--disabled).t-tag--default.t-tag--dark:not(.t-tag--checked):hover { background-color: var(--td-bg-color-component-hover); } .t-tag.t-tag--check:not(.t-tag--disabled).t-tag--primary.t-tag--dark.t-tag--checked:hover { background-color: var(--td-brand-color-hover); } .t-tag.t-tag--check:not(.t-tag--disabled).t-tag--default.t-tag--outline:not(.t-tag--checked):hover { color: var(--td-brand-color-hover); } .t-tag--check.t-tag--disabled.t-tag--primary.t-tag--dark { background-color: var(--td-brand-color-disabled); cursor: not-allowed; } .t-tag--check.t-tag--disabled.t-tag--primary.t-tag--outline { color: var(--td-text-color-disabled); background-color: var(--td-bg-color-component-disabled); border-color: var(--td-text-color-disabled); cursor: not-allowed; } .t-check-tag-group .t-tag:not(:last-child) { margin-right: var(--td-comp-margin-s); } a .t-tag { cursor: pointer; 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); } @keyframes t-fade-in { from { opacity: 0; } to { opacity: 1; } } @keyframes t-fade-out { from { opacity: 1; } to { opacity: 0; } } @keyframes t-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } .t-icon-loading { animation: t-spin 1s linear infinite; } @keyframes t-zoom-out { from { transform: scale(0.2); } to { transform: scale(1); } } .t-tag-input { font: var(--td-font-body-medium); color: var(--td-text-color-primary); box-sizing: border-box; margin: 0; padding: 0; list-style: none; /** 设计稿：未填充标签场景，边距和已填充不同 */ } .t-tag-input .t-tag { vertical-align: middle; animation: t-fade-in 0.2s ease-in-out; margin: 3px var(--td-comp-margin-xs) 3px 0; } .t-tag-input .t-tag-input__drag_wrapper + .t-tag-input__drag_wrapper { margin-left: var(--td-comp-margin-xs); } .t-tag-input .t-input { overflow: hidden; min-height: var(--td-comp-size-m); height: fit-content; padding: 0 var(--td-comp-paddingLR-s) 0 var(--td-comp-margin-xs); } .t-tag-input .t-input .t-input__suffix-icon { right: var(--td-comp-margin-s); } .t-tag-input .t-input.t-size-s { padding: 0 var(--td-comp-paddingLR-s) 0 var(--td-comp-margin-xs); min-height: var(--td-comp-size-xs); } .t-tag-input .t-input.t-size-s .t-tag { margin: 1px var(--td-comp-margin-xs) 1px 0; } .t-tag-input .t-input.t-size-l { min-height: var(--td-comp-size-xl); padding: 0 var(--td-comp-paddingLR-m) 0 var(--td-comp-margin-s); } .t-tag-input .t-input.t-size-l .t-input__suffix-icon { right: var(--td-comp-margin-m); } .t-tag-input.t-is-empty .t-input__inner { margin-left: var(--td-comp-margin-xs); } .t-tag-input:hover .t-input__inner:not(.t-input--soft-hidden), .t-tag-input .t-input--focused .t-input__inner:not(.t-input--soft-hidden) { min-width: 20px; } .t-tag-input .t-tag-input__prefix { margin-left: var(--td-comp-margin-xs); line-height: 1; } .t-tag-input .t-tag-input__prefix > .t-icon { color: var(--td-text-color-placeholder); } .t-tag-input .t-input .t-input__prefix:not(:empty) { margin-right: 0; } .t-tag-input.t-input--auto-width .t-input.t-input--focused { padding-right: calc(var(--td-comp-paddingLR-xxl) + var(--td-comp-paddingLR-xxs)); } .t-tag-input.t-input--auto-width .t-input__prefix { white-space: nowrap; } .t-tag-input .t-input__prefix--scrollable { overflow-y: hidden; overflow-x: auto; } @-moz-document url-prefix() { .t-tag-input .t-input__prefix--scrollable { scrollbar-color: var(--td-scrollbar-color) transparent; scrollbar-width: thin; } } .t-tag-input .t-input__prefix--scrollable::-webkit-scrollbar { width: 6px; height: 6px; } .t-tag-input .t-input__prefix--scrollable::-webkit-scrollbar-thumb { border: 0px solid transparent; background-clip: content-box; background-color: var(--td-scrollbar-color); border-radius: 11px; } .t-tag-input .t-input__prefix--scrollable::-webkit-scrollbar-thumb:vertical:hover, .t-tag-input .t-input__prefix--scrollable::-webkit-scrollbar-thumb:horizontal:hover { background-color: var(--td-scrollbar-hover-color); } .t-tag-input__suffix-clear { cursor: pointer; } .t-tag-input--drag-sort .t-input__prefix .t-tag { cursor: move; } .t-tag-input--break-line:not(.t-is-empty) .t-input { display: block; } .t-tag-input--break-line:not(.t-is-empty) .t-input.t-input--prefix > .t-input__prefix { display: inline; text-align: left; } .t-tag-input--break-line:not(.t-is-empty) .t-input .t-input__suffix-icon { position: absolute; bottom: 0; } .t-tag-input--break-line:not(.t-is-empty) .t-tag-input__prefix { vertical-align: middle; } .t-tag-input__prefix { width: max-content; display: inline-block; margin-right: var(--td-comp-margin-s); } /** 换行模式避免标签和右侧图标重合，需保留图标宽度 22px 和左侧距离标签间距 8px */ .t-tag-input--break-line.t-tag-input--with-tag:not(.t-input--auto-width) .t-input, .t-tag-input.t-input--auto-width:hover .t-input { padding-right: calc(var(--td-comp-paddingLR-xxl) + var(--td-comp-paddingLR-xxs)); } .t-tag-input--break-line.t-tag-input--with-tag:not(.t-input--auto-width) .t-size-l .t-input, .t-tag-input.t-input--auto-width:hover .t-size-l .t-input { padding-right: calc(var(--td-comp-paddingLR-xxl) + var(--td-comp-paddingLR-xs)); } /** auto-width 模式，左右边距相同 */ .t-tag-input.t-input--auto-width .t-input { padding-right: 0; } /** max-rows模式，限制最大高度 */ .t-tag-input--max-rows .t-input { max-height: calc(var(--max-rows, 1) * (var(--td-comp-size-m) - 2px)); overflow-y: scroll; } .t-tag-input--max-rows .t-input.t-size-s { max-height: calc(var(--max-rows, 1) * var(--td-comp-size-xs)); } .t-tag-input--max-rows .t-input.t-size-l { max-height: calc(var(--max-rows, 1) * (var(--td-comp-size-xl) - 2px)); } .t-select-input { font: var(--td-font-body-medium); color: var(--td-text-color-primary); box-sizing: border-box; margin: 0; padding: 0; list-style: none; width: 100%; display: inline-block; vertical-align: middle; } /** 宽度自适应场景，多选，预留图标的位置。带标签和不带标签的布局不同，故而间距不同 */ .t-select-input--multiple .t-input--auto-width.t-tag-input__with-suffix-icon.t-tag-input--with-tag .t-input { padding-right: var(--td-comp-paddingLR-xl); } .t-select-input--multiple .t-input--auto-width.t-tag-input__with-suffix-icon.t-tag-input--with-tag .t-input.t-size-l { padding-right: calc(var(--td-comp-paddingLR-xl) + var(--td-comp-paddingLR-s)); } .t-select-input--multiple .t-input--auto-width.t-tag-input__with-suffix-icon.t-is-empty .t-input { padding-right: var(--td-comp-paddingLR-s); } .t-select-input--multiple .t-input--auto-width.t-tag-input__with-suffix-icon.t-is-empty .t-input.t-size-l { padding-right: var(--td-comp-paddingLR-m); } /** 无边框模式 */ .t-select-input--borderless { /** 无边框模式的多选 */ } .t-select-input--borderless .t-input { box-shadow: none; border: 1px solid transparent; background: transparent; transition: all 0.2s linear; } .t-select-input--borderless .t-input:hover:not(.t-input--focused) { border-color: var(--td-component-border); background-color: var(--td-bg-color-container-hover); border-radius: var(--td-radius-default); } .t-select-input--borderless .t-input--focused { border-color: var(--td-brand-color); box-shadow: 0 0 0 2px var(--td-brand-color-focus); background-color: var(--td-bg-color-specialcomponent); } .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; box-shadow: none; background: transparent; 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); } .t-checkbox-group { font: var(--td-font-body-medium); color: var(--td-text-color-primary); box-sizing: border-box; margin: 0; padding: 0; list-style: none; display: inline-flex; flex-wrap: wrap; gap: 16px; } .t-checkbox { font: var(--td-font-body-medium); box-sizing: border-box; margin: 0; padding: 0; list-style: none; display: inline-flex; 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; 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); box-sizing: border-box; flex-shrink: 0; } .t-checkbox__input::after { content: ""; position: absolute; opacity: 0; 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); 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); 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; 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); 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; 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); } .t-checkbox:focus-visible:focus-visible { outline: 2px solid var(--td-brand-color); outline-offset: var(--td-comp-paddingTB-xs); border-radius: 0; } .t-select__wrap { width: 100%; } .t-select__dropdown .t-popup__content { margin: var(--td-comp-paddingTB-s) 0; padding: 0; max-height: 300px; overflow-y: auto; overscroll-behavior: contain; box-shadow: var(--td-shadow-2); } @-moz-document url-prefix() { .t-select__dropdown .t-popup__content { scrollbar-color: var(--td-scrollbar-color) transparent; scrollbar-width: thin; } } .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 { min-height: var(--td-comp-size-m); } .t-select__dropdown-inner .t-select__list .t-select__list { padding: 0; } .t-select__dropdown-inner .t-select__list, .t-select__dropdown-inner .t-tree { padding: var(--td-pop-padding-m); } .t-select__dropdown-inner--size-s { min-height: var(--td-comp-size-xs); } .t-select__dropdown-inner--size-s .t-select__list, .t-select__dropdown-inner--size-s .t-tree { padding: var(--td-pop-padding-s); } .t-select__dropdown-inner--size-l { min-height: var(--td-comp-size-xl); } .t-select__dropdown-inner--size-l .t-select__list, .t-select__dropdown-inner--size-l .t-tree { padding: var(--td-pop-padding-l); } .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: var(--td-comp-size-xs); } .t-select__empty { text-align: center; color: var(--td-text-color-disabled); line-height: var(--td-comp-size-m); padding: 0 var(--td-comp-paddingLR-s); } .t-select__empty.t-size-l { line-height: var(--td-comp-size-xl); } .t-select__loading-tips.t-size-s { min-height: var(--td-comp-size-xs); line-height: var(--td-comp-size-xs); } .t-select__loading-tips { position: fixed; top: var(--td-comp-paddingTB-s); left: 0; bottom: var(--td-comp-paddingTB-s); right: 0; display: flex; align-items: center; justify-content: center; background-color: var(--td-bg-color-container); border-radius: var(--td-radius-default); min-height: var(--td-comp-size-m); line-height: var(--td-comp-size-m); color: var(--td-text-color-disabled); z-index: 1000; } .t-select__loading-tips.t-size-l { min-height: var(--td-comp-size-xl); line-height: var(--td-comp-size-xl); } .t-select-option-group + .t-select-option-group { padding-top: var(--td-comp-margin-xs); margin-top: var(--td-comp-margin-xs); } .t-select-option-group__divider + .t-select-option-group__divider { position: relative; } .t-select-option-group__divider + .t-select-option-group__divider::before { content: ""; width: 100%; height: 1px; padding: 0 var(--td-comp-paddingLR-s); position: absolute; top: 0; left: 0; box-sizing: border-box; background-color: var(--td-border-level-1-color); background-clip: content-box; } ul.t-select-option-group__header, .t-select-option-group__header { color: var(--td-text-color-placeholder); display: block; height: var(--td-comp-size-s); line-height: var(--td-comp-size-s); padding: 0 var(--td-comp-paddingLR-s); box-sizing: border-box; white-space: nowrap; word-wrap: normal; overflow: hidden; text-overflow: ellipsis; } .t-select-option-group__header.t-size-l { height: var(--td-comp-size-l); line-height: var(--td-comp-size-l); padding: 0 var(--td-comp-paddingLR-m); } .t-select-option-group__header.t-size-s { height: var(--td-comp-size-xxs); line-height: var(--td-comp-size-xxs); padding: 0 var(--td-comp-paddingLR-s); } .t-select-option { display: flex; align-items: center; border-radius: var(--td-radius-default); height: var(--td-comp-size-s); font: var(--td-font-body-medium); cursor: pointer; padding: 0 var(--td-comp-paddingLR-s); color: var(--td-text-color-primary); transition: background-color 0.2s cubic-bezier(0.38, 0, 0.24, 1); 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); 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: var(--td-comp-size-l); padding: 0 var(--td-comp-paddingLR-m); font: var(--td-font-body-large); } .t-select-option.t-size-m { font: var(--td-font-body-medium); } .t-select-option.t-size-s { height: var(--td-comp-size-xxs); padding: 0 var(--td-comp-paddingLR-s); font: var(--td-font-body-small); } .t-select-option.t-is-selected:not(.t-is-disabled) { color: var(--td-brand-color); background-color: var(--td-brand-color-light); transition: all 0.2s linear; } .t-select-option.t-is-selected:not(.t-is-disabled) .t-checkbox__label { color: var(--td-brand-color); } .t-select-option.t-is-selected:not(.t-is-disabled):hover { background-color: var(--td-brand-color-light); } /** 规范 CSS 类名为 --hover */ .t-select-option.t-select-option__hover:not(.t-is-disabled).t-select-option.t-select-option__hover:not(.t-is-selected), .t-select-option.t-select-option__hover:not(.t-is-disabled).t-select-option.t-select-option--hover:not(.t-is-selected), .t-select-option.t-select-option--hover:not(.t-is-disabled).t-select-option.t-select-option__hover:not(.t-is-selected), .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, .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, .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, .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, .t-select-option.t-select-option--hover .t-checkbox__label { color: inherit; } .t-select-option + .t-select-option { margin-top: var(--td-comp-paddingTB-xxs); } .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); } .t-is-selected.t-select-option__hover { background-color: var(--td-brand-color-light-hover); } .t-is-selected.t-select-option__hover .t-checkbox__label { color: var(--td-brand-color); } .t-input-adornment { font: var(--td-font-body-medium); color: var(--td-text-color-primary); box-sizing: border-box; margin: 0; padding: 0; list-style: none; display: flex; } .t-input-adornment__prepend .t-input, .t-input-adornment__append .t-input, .t-input-adornment__prepend .t-textarea__inner, .t-input-adornment__append .t-textarea__inner { background-color: transparent; } .t-input-adornment__prepend { background-color: var(--td-bg-color-secondarycontainer); color: var(--td-text-color-primary); word-break: keep-all; margin-right: -1px; } .t-input-adornment__append { background-color: var(--td-bg-color-secondarycontainer); color: var(--td-text-color-primary); word-break: keep-all; margin-left: -1px; } .t-input-adornment__text { display: inline-flex; height: 100%; align-items: center; box-sizing: border-box; white-space: nowrap; padding: 0 var(--td-comp-paddingLR-s); border: 1px solid var(--td-border-level-2-color); } .t-input-adornment > :first-child { border-radius: var(--td-radius-default) 0 0 var(--td-radius-default); } .t-input-adornment > :first-child .t-input, .t-input-adornment > :first-child .t-input-adornment__text, .t-input-adornment > :first-child .t-textarea__inner { border-radius: var(--td-radius-default) 0 0 var(--td-radius-default); } .t-input-adornment > :last-child { border-radius: 0 var(--td-radius-default) var(--td-radius-default) 0; } .t-input-adornment > :last-child .t-input, .t-input-adornment > :last-child .t-input-adornment__text, .t-input-adornment > :last-child .t-textarea__inner { border-radius: 0 var(--td-radius-default) var(--td-radius-default) 0; } .t-input-adornment > :not(:last-child):hover { z-index: 2; } .t-input-adornment > :not(:first-child):not(:last-child) .t-input, .t-input-adornment > :not(:first-child):not(:last-child) .t-textarea__inner { border-radius: 0; } .t-pagination-mini { font: var(--td-font-body-medium); color: var(--td-text-color-primary); box-sizing: border-box; margin: 0; padding: 0; list-style: none; } .t-pagination-mini--outline .t-pagination-mini__prev { border-top-right-radius: 0; border-bottom-right-radius: 0; position: relative; z-index: 1; } .t-pagination-mini--outline .t-pagination-mini__current { border-radius: 0; position: relative; margin-left: -1px; } .t-pagination-mini--outline .t-pagination-mini__current:hover { z-index: 1; } .t-pagination-mini--outline .t-pagination-mini__next { border-top-left-radius: 0; border-bottom-left-radius: 0; position: relative; margin-left: -1px; } .t-pagination-mini--outline .t-pagination-mini__next:hover { z-index: 1; } .t-pagination { font: var(--td-font-body-medium); color: var(--td-text-color-primary); box-sizing: border-box; margin: 0; padding: 0; list-style: none; width: 100%; display: flex; align-items: center; justify-content: flex-end; white-space: nowrap; color: var(--td-text-color-secondary); user-select: none; } .t-pagination.t-is-disabled { color: var(--td-text-color-disabled); } .t-pagination__total { font: var(--td-font-body-medium); flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .t-pagination .t-select__wrap { width: auto; } .t-pagination__select { flex-shrink: 0; margin-right: var(--td-comp-margin-l); height: var(--td-comp-size-m); font-size: var(--td-font-size-body-medium); color: var(--td-text-color-secondary); } .t-pagination__btn { display: inline-flex; justify-content: center; align-items: center; flex-shrink: 0; cursor: pointer; color: var(--td-text-color-secondary); border-radius: var(--td-radius-default); font: var(--td-font-body-large); width: var(--td-comp-size-m); height: var(--td-comp-size-m); line-height: var(--td-comp-size-m); } .t-pagination__btn:hover { background-color: var(--td-bg-color-secondarycontainer-hover); transition: all 0.2s cubic-bezier(0.82, 0, 1, 0.9); } .t-pagination__btn:active { background-color: var(--td-bg-color-secondarycontainer-active); } .t-pagination__btn.t-is-disabled, .t-pagination__btn.t-is-disabled:hover, .t-pagination__btn.t-is-disabled:active { background: none; color: var(--td-text-color-disabled); } .t-pagination__btn.t-is-disabled { cursor: not-allowed; } .t-pagination__btn-prev { margin-right: var(--td-comp-margin-s); } .t-pagination__btn-next { margin-left: var(--td-comp-margin-s); } .t-pagination__btn + .t-pagination__select { margin-right: 0; } .t-pagination__pager { flex-shrink: 0; display: inline-flex; vertical-align: middle; list-style: none; padding: 0; margin: 0; } .t-pagination__pager li:not(:last-child) { margin-right: var(--td-comp-margin-s); } .t-pagination__number { display: inline-block; border: 1px solid var(--td-component-border); text-align: center; border-radius: var(--td-radius-default); cursor: pointer; background-color: var(--td-bg-color-container); box-sizing: border-box; height: var(--td-comp-size-m); min-width: var(--td-comp-size-m); line-height: calc(var(--td-comp-size-m) - 2px); font-size: var(--td-font-body-medium); padding-left: var(--td-comp-paddingLR-xs); padding-right: var(--td-comp-paddingLR-xs); } .t-pagination__number:hover { color: var(--td-brand-color-hover); border-color: var(--td-brand-color-hover); transition: all 0.2s cubic-bezier(0.82, 0, 1, 0.9); } .t-pagination__number:active { background-color: var(--td-brand-color); color: var(--td-text-color-anti); border-color: var(--td-brand-color); } .t-pagination__number.t-is-current { background-color: var(--td-brand-color); color: var(--td-text-color-anti); border-color: var(--td-brand-color); } .t-pagination__number.t-is-current.t-is-disabled, .t-pagination__number.t-is-current.t-is-disabled:hover, .t-pagination__number.t-is-current.t-is-disabled:active { background-color: var(--td-brand-color-focus); color: var(--td-text-color-anti); border-color: var(--td-brand-color-focus); } .t-pagination__number.t-is-disabled { cursor: auto; background-color: var(--td-bg-color-component-disabled); color: var(--td-text-color-disabled); } .t-pagination__number.t-is-disabled:hover, .t-pagination__number.t-is-disabled:active { background-color: var(--td-bg-color-component-disabled); color: var(--td-text-color-disabled); border-color: var(--td-component-border); } .t-pagination__number--more { border: 0 none; padding: 0; } .t-pagination__number--more:hover { color: var(--td-text-color-primary); background-color: var(--td-bg-color-secondarycontainer-hover); transition: all 0.2s cubic-bezier(0.82, 0, 1, 0.9); } .t-pagination__number--more:active { color: var(--td-text-color-primary); background-color: var(--td-bg-color-secondarycontainer-active); } .t-pagination__number--more.t-is-disabled, .t-pagination__number--more.t-is-disabled:hover, .t-pagination__number--more.t-is-disabled:active { background: none; } .t-pagination__number--more .t-icon-more { transform: rotate(90deg); color: var(--td-text-color-disabled); } .t-pagination__jump { display: inline-flex; align-items: center; flex-shrink: 0; margin-left: var(--td-comp-margin-s); font-size: var(--td-font-body-medium); gap: var(--td-comp-margin-s); background-color: var(--td-bg-color-secondarycontainer); height: var(--td-comp-size-m); padding-left: var(--td-comp-margin-s); border-radius: var(--td-radius-default); } .t-pagination .t-input-adornment__append { border: none; height: calc(var(--td-comp-size-m) - 4px); color: var(--td-text-color-secondary); background-color: transparent; } .t-pagination .t-input-adornment__append .t-input-adornment__text { border: none; } .t-pagination .t-input-number { width: 56px; } .t-pagination .t-input-number .t-input { height: calc(var(--td-comp-size-m) - 4px); border-radius: var(--td-radius-default); } .t-pagination .t-input-number .t-input__inner { text-align: center; } .t-pagination.t-size-s { font: var(--td-font-body-small); } .t-pagination.t-size-s .t-pagination__jump { height: var(--td-comp-size-xs); } .t-pagination.t-size-s .t-input-adornment__append { height: calc(var(--td-comp-size-xs) - 4px); font: var(--td-font-body-small); } .t-pagination.t-size-s .t-input-number { width: 48px; } .t-pagination.t-size-s .t-input-number .t-input { height: calc(var(--td-comp-size-xs) - 4px); } .t-pagination.t-size-s .t-pagination__total { font: var(--td-font-body-small); } .t-pagination.t-size-s .t-pagination__select { height: var(--td-comp-size-xs); font-size: var(--td-font-size-body-small); } .t-pagination.t-size-s .t-pagination__number { border: 0 none; height: var(--td-comp-size-xs); min-width: var(--td-comp-size-xs); line-height: var(--td-comp-size-xs); font-size: var(--td-font-body-small); padding-left: var(--td-comp-paddingLR-xxs); padding-right: var(--td-comp-paddingLR-xxs); } .t-pagination.t-size-s .t-pagination__number:hover:not(.t-pagination.t-size-s .t-pagination__number.t-is-current) { color: var(--td-text-color-primary); background-color: var(--td-bg-color-secondarycontainer-hover); transition: all 0.2s cubic-bezier(0.82, 0, 1, 0.9); } .t-pagination.t-size-s .t-pagination__number:active:not(.t-pagination.t-size-s .t-pagination__number.t-is-current) { color: var(--td-text-color-primary); background-color: var(--td-bg-color-secondarycontainer-active); } .t-pagination.t-size-s .t-pagination__number.t-is-disabled { background: none; color: var(--td-text-color-disabled); } .t-pagination.t-size-s .t-pagination__number.t-is-current.t-is-disabled { background-color: var(--td-brand-color-focus); color: var(--td-text-color-anti); border-color: var(--td-brand-color-focus); } .t-pagination.t-size-s .t-pagination__btn { border: 0 none; background: none; width: var(--td-comp-size-xs); height: var(--td-comp-size-xs); line-height: var(--td-comp-size-xs); } .t-pagination.t-size-s .t-pagination__btn:hover { background-color: var(--td-bg-color-secondarycontainer-hover); transition: all 0.2s cubic-bezier(0.82, 0, 1, 0.9); } .t-pagination.t-size-s .t-pagination__btn:active { background-color: var(--td-bg-color-secondarycontainer-active); } .t-pagination.t-size-s .t-pagination__btn.t-is-disabled, .t-pagination.t-size-s .t-pagination__btn.t-is-disabled:hover, .t-pagination.t-size-s .t-pagination__btn.t-is-disabled:active { background: none; color: var(--td-text-color-disabled); } /** IE 兼容 **/ .t-pagination-ie { /** 在 IE11 以下浏览器，input autoWidth 计算无法依赖 observer，因而加上最小宽度，避免分页信息出现 0 的情况 */ } .t-pagination-ie .t-select .t-input__inner { min-width: 54px; } .t-select__wrap { width: 100%; } .t-select__dropdown .t-popup__content { margin: var(--td-comp-paddingTB-s) 0; padding: 0; max-height: 300px; overflow-y: auto; overscroll-behavior: contain; box-shadow: var(--td-shadow-2); } @-moz-document url-prefix() { .t-select__dropdown .t-popup__content { scrollbar-color: var(--td-scrollbar-color) transparent; scrollbar-width: thin; } } .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 { min-height: var(--td-comp-size-m); } .t-select__dropdown-inner .t-select__list .t-select__list { padding: 0; } .t-select__dropdown-inner .t-select__list, .t-select__dropdown-inner .t-tree { padding: var(--td-pop-padding-m); } .t-select__dropdown-inner--size-s { min-height: var(--td-comp-size-xs); } .t-select__dropdown-inner--size-s .t-select__list, .t-select__dropdown-inner--size-s .t-tree { padding: var(--td-pop-padding-s); } .t-select__dropdown-inner--size-l { min-height: var(--td-comp-size-xl); } .t-select__dropdown-inner--size-l .t-select__list, .t-select__dropdown-inner--size-l .t-tree { padding: var(--td-pop-padding-l); } .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: var(--td-comp-size-xs); } .t-select__empty { text-align: center; color: var(--td-text-color-disabled); line-height: var(--td-comp-size-m); padding: 0 var(--td-comp-paddingLR-s); } .t-select__empty.t-size-l { line-height: var(--td-comp-size-xl); } .t-select__loading-tips.t-size-s { min-height: var(--td-comp-size-xs); line-height: var(--td-comp-size-xs); } .t-select__loading-tips { position: fixed; top: var(--td-comp-paddingTB-s); left: 0; bottom: var(--td-comp-paddingTB-s); right: 0; display: flex; align-items: center; justify-content: center; background-color: var(--td-bg-color-container); border-radius: var(--td-radius-default); min-height: var(--td-comp-size-m); line-height: var(--td-comp-size-m); color: var(--td-text-color-disabled); z-index: 1000; } .t-select__loading-tips.t-size-l { min-height: var(--td-comp-size-xl); line-height: var(--td-comp-size-xl); } .t-select-option-group + .t-select-option-group { padding-top: var(--td-comp-margin-xs); margin-top: var(--td-comp-margin-xs); } .t-select-option-group__divider + .t-select-option-group__divider { position: relative; } .t-select-option-group__divider + .t-select-option-group__divider::before { content: ""; width: 100%; height: 1px; padding: 0 var(--td-comp-paddingLR-s); position: absolute; top: 0; left: 0; box-sizing: border-box; background-color: var(--td-border-level-1-color); background-clip: content-box; } ul.t-select-option-group__header, .t-select-option-group__header { color: var(--td-text-color-placeholder); display: block; height: var(--td-comp-size-s); line-height: var(--td-comp-size-s); padding: 0 var(--td-comp-paddingLR-s); box-sizing: border-box; white-space: nowrap; word-wrap: normal; overflow: hidden; text-overflow: ellipsis; } .t-select-option-group__header.t-size-l { height: var(--td-comp-size-l); line-height: var(--td-comp-size-l); padding: 0 var(--td-comp-paddingLR-m); } .t-select-option-group__header.t-size-s { height: var(--td-comp-size-xxs); line-height: var(--td-comp-size-xxs); padding: 0 var(--td-comp-paddingLR-s); } .t-select-option { display: flex; align-items: center; border-radius: var(--td-radius-default); height: var(--td-comp-size-s); font: var(--td-font-body-medium); cursor: pointer; padding: 0 var(--td-comp-paddingLR-s); color: var(--td-text-color-primary); transition: background-color 0.2s cubic-bezier(0.38, 0, 0.24, 1); 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); 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: var(--td-comp-size-l); padding: 0 var(--td-comp-paddingLR-m); font: var(--td-font-body-large); } .t-select-option.t-size-m { font: var(--td-font-body-medium); } .t-select-option.t-size-s { height: var(--td-comp-size-xxs); padding: 0 var(--td-comp-paddingLR-s); font: var(--td-font-body-small); } .t-select-option.t-is-selected:not(.t-is-disabled) { color: var(--td-brand-color); background-color: var(--td-brand-color-light); transition: all 0.2s linear; } .t-select-option.t-is-selected:not(.t-is-disabled) .t-checkbox__label { color: var(--td-brand-color); } .t-select-option.t-is-selected:not(.t-is-disabled):hover { background-color: var(--td-brand-color-light); } /** 规范 CSS 类名为 --hover */ .t-select-option.t-select-option__hover:not(.t-is-disabled).t-select-option.t-select-option__hover:not(.t-is-selected), .t-select-option.t-select-option__hover:not(.t-is-disabled).t-select-option.t-select-option--hover:not(.t-is-selected), .t-select-option.t-select-option--hover:not(.t-is-disabled).t-select-option.t-select-option__hover:not(.t-is-selected), .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, .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, .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, .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, .t-select-option.t-select-option--hover .t-checkbox__label { color: inherit; } .t-select-option + .t-select-option { margin-top: var(--td-comp-paddingTB-xxs); } .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); } .t-is-selected.t-select-option__hover { background-color: var(--td-brand-color-light-hover); } .t-is-selected.t-select-option__hover .t-checkbox__label { color: var(--td-brand-color); } .t-select-option__highlight-item .t-is-highlight { color: var(--td-brand-color); } .t-auto-complete { width: 100%; } .t-auto-complete .t-input__suffix-clear { display: none; } .t-auto-complete:hover .t-input__suffix-clear { display: inline-block; } .t-auto-complete__panel--empty { height: var(--td-comp-size-m); line-height: var(--td-comp-size-m); color: var(--td-text-color-disabled); text-align: center; } .t-form { color: var(--td-text-color-primary); box-sizing: border-box; margin: 0; padding: 0; list-style: none; font: var(--td-font-body-medium); } .t-form:not(.t-form-inline) .t-form__item:last-of-type { margin: 0; } .t-form__item { margin-bottom: var(--td-comp-margin-xxl); } .t-form__item.t-form__item-with-help { margin-bottom: var(--td-comp-margin-xs); } .t-form__item.t-form__item-with-extra { margin-bottom: var(--td-comp-margin-xxl); } .t-form__label { float: left; padding-right: var(--td-comp-paddingLR-xl); vertical-align: middle; line-height: var(--td-comp-margin-xxxl); color: var(--td-text-color-primary); box-sizing: border-box; white-space: nowrap; } .t-form__label--top { float: none; min-height: var(--td-comp-margin-xxxl); } .t-form__label--left { text-align: left; } .t-form__label--right { text-align: right; } .t-form__label--required:not(.t-form__label--required-right) label::before { display: inline-block; margin-right: var(--td-comp-margin-xs); color: var(--td-error-color); line-height: var(--td-line-height-body-medium); content: "*"; } .t-form__label--required-right label::after { display: inline-block; margin-left: var(--td-comp-margin-xs); color: var(--td-error-color); line-height: var(--td-line-height-body-medium); content: "*"; } .t-form__label--colon label::after { content: ":"; position: relative; margin: 0 var(--td-comp-margin-xxs); } .t-form__controls { min-height: var(--td-comp-margin-xxxl); display: flow-root; position: relative; } .t-form__controls-content { display: flex; align-items: center; min-height: var(--td-comp-margin-xxxl); } .t-form__controls .t-form__item { margin-bottom: 0; margin-right: var(--td-comp-margin-xxl); } .t-form__controls.t-is-success .t-form__status .t-icon { color: var(--td-success-color); } .t-form__controls.t-is-success .t-input__extra { color: var(--td-success-color); } .t-form__controls.t-form--success-border.t-is-success .t-input__extra { color: var(--td-success-color); } .t-form__controls.t-form--success-border.t-is-success .t-form__controls-content .t-input, .t-form__controls.t-form--success-border.t-is-success .t-form__controls-content .t-select, .t-form__controls.t-form--success-border.t-is-success .t-form__controls-content .t-radio-button, .t-form__controls.t-form--success-border.t-is-success .t-form__controls-content .t-cascader, .t-form__controls.t-form--success-border.t-is-success .t-form__controls-content .t-range-input, .t-form__controls.t-form--success-border.t-is-success .t-form__controls-content .t-textarea__inner { border-color: var(--td-success-color); } .t-form__controls.t-form--success-border.t-is-success .t-form__controls-content .t-input--focused, .t-form__controls.t-form--success-border.t-is-success .t-form__controls-content .t-select--focused, .t-form__controls.t-form--success-border.t-is-success .t-form__controls-content .t-radio-button--focused, .t-form__controls.t-form--success-border.t-is-success .t-form__controls-content .t-cascader--focused, .t-form__controls.t-form--success-border.t-is-success .t-form__controls-content .t-range-input--focused, .t-form__controls.t-form--success-border.t-is-success .t-form__controls-content .t-textarea__inner--focused { box-shadow: 0 0 0 2px var(--td-success-color-focus); } .t-form__controls.t-form--success-border.t-is-success .t-form__controls-content .t-input .t-icon, .t-form__controls.t-form--success-border.t-is-success .t-form__controls-content .t-select .t-icon, .t-form__controls.t-form--success-border.t-is-success .t-form__controls-content .t-radio-button .t-icon, .t-form__controls.t-form--success-border.t-is-success .t-form__controls-content .t-cascader .t-icon, .t-form__controls.t-form--success-border.t-is-success .t-form__controls-content .t-range-input .t-icon, .t-form__controls.t-form--success-border.t-is-success .t-form__controls-content .t-textarea__inner .t-icon, .t-form__controls.t-form--success-border.t-is-success .t-form__controls-content .t-input .t-fake-arrow, .t-form__controls.t-form--success-border.t-is-success .t-form__controls-content .t-select .t-fake-arrow, .t-form__controls.t-form--success-border.t-is-success .t-form__controls-content .t-radio-button .t-fake-arrow, .t-form__controls.t-form--success-border.t-is-success .t-form__controls-content .t-cascader .t-fake-arrow, .t-form__controls.t-form--success-border.t-is-success .t-form__controls-content .t-range-input .t-fake-arrow, .t-form__controls.t-form--success-border.t-is-success .t-form__controls-content .t-textarea__inner .t-fake-arrow { color: var(--td-success-color); } .t-form__controls.t-form--success-border.t-is-success .t-form__controls-content .t-select > .t-select__right-icon:not(.t-select__right-icon-clear) { color: var(--td-success-color); } .t-form__controls.t-form--success-border.t-is-success .t-form__controls-content .t-radio-button:last-child { border-right-color: var(--td-success-color); } .t-form__controls.t-form--success-border.t-is-success .t-form__controls-content .t-textarea__inner.t-is-focused { box-shadow: 0 0 0 2px var(--td-success-color-focus); } .t-form__controls.t-form--success-border.t-is-success .t-form__controls-content .t-cascader.t-is-active, .t-form__controls.t-form--success-border.t-is-success .t-form__controls-content .t-select.t-is-active { box-shadow: 0 0 0 2px var(--td-success-color-focus); } .t-form__controls.t-form--success-border.t-is-success .t-form__controls-content .t-form__status .t-icon { color: var(--td-success-color); } .t-form__status { display: flex; margin: 0 var(--td-comp-margin-s); } .t-form__status > .t-icon { font-size: var(--td-comp-size-xxxs); } .t-form__status-without-icon { width: 25px; height: 25px; } .t-form__status button { width: var(--td-comp-size-m); } .t-form__status button + button { margin-left: var(--td-comp-margin-s); } .t-form-inline { display: flex; flex-wrap: wrap; row-gap: var(--td-comp-margin-l); } .t-form-inline .t-form__item { margin: 0; min-width: 200px; display: inline-block; margin-right: var(--td-comp-margin-xxl); } .t-input__extra, .t-input__help { margin: 0; width: 100%; height: auto; min-height: var(--td-line-height-body-small); font: var(--td-font-body-small); color: var(--td-text-color-placeholder); } .t-input__extra { position: absolute; bottom: calc(0px - var(--td-line-height-body-small)); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .t-is-warning .t-input__extra { color: var(--td-warning-color); } .t-is-warning .t-form__controls-content .t-input, .t-is-warning .t-form__controls-content .t-select, .t-is-warning .t-form__controls-content .t-radio-button, .t-is-warning .t-form__controls-content .t-cascader, .t-is-warning .t-form__controls-content .t-range-input, .t-is-warning .t-form__controls-content .t-textarea__inner { border-color: var(--td-warning-color); } .t-is-warning .t-form__controls-content .t-input--focused, .t-is-warning .t-form__controls-content .t-select--focused, .t-is-warning .t-form__controls-content .t-radio-button--focused, .t-is-warning .t-form__controls-content .t-cascader--focused, .t-is-warning .t-form__controls-content .t-range-input--focused, .t-is-warning .t-form__controls-content .t-textarea__inner--focused { box-shadow: 0 0 0 2px var(--td-warning-color-focus); } .t-is-warning .t-form__controls-content .t-input .t-icon, .t-is-warning .t-form__controls-content .t-select .t-icon, .t-is-warning .t-form__controls-content .t-radio-button .t-icon, .t-is-warning .t-form__controls-content .t-cascader .t-icon, .t-is-warning .t-form__controls-content .t-range-input .t-icon, .t-is-warning .t-form__controls-content .t-textarea__inner .t-icon, .t-is-warning .t-form__controls-content .t-input .t-fake-arrow, .t-is-warning .t-form__controls-content .t-select .t-fake-arrow, .t-is-warning .t-form__controls-content .t-radio-button .t-fake-arrow, .t-is-warning .t-form__controls-content .t-cascader .t-fake-arrow, .t-is-warning .t-form__controls-content .t-range-input .t-fake-arrow, .t-is-warning .t-form__controls-content .t-textarea__inner .t-fake-arrow { color: var(--td-warning-color); } .t-is-warning .t-form__controls-content .t-select > .t-select__right-icon:not(.t-select__right-icon-clear) { color: var(--td-warning-color); } .t-is-warning .t-form__controls-content .t-radio-button:last-child { border-right-color: var(--td-warning-color); } .t-is-warning .t-form__controls-content .t-textarea__inner.t-is-focused { box-shadow: 0 0 0 2px var(--td-warning-color-focus); } .t-is-warning .t-form__controls-content .t-cascader.t-is-active, .t-is-warning .t-form__controls-content .t-select.t-is-active { box-shadow: 0 0 0 2px var(--td-warning-color-focus); } .t-is-warning .t-form__controls-content .t-form__status .t-icon { color: var(--td-warning-color); } .t-is-error .t-input__extra { color: var(--td-error-color); } .t-is-error .t-form__controls-content .t-input, .t-is-error .t-form__controls-content .t-select, .t-is-error .t-form__controls-content .t-radio-button, .t-is-error .t-form__controls-content .t-cascader, .t-is-error .t-form__controls-content .t-range-input, .t-is-error .t-form__controls-content .t-textarea__inner { border-color: var(--td-error-color); } .t-is-error .t-form__controls-content .t-input--focused, .t-is-error .t-form__controls-content .t-select--focused, .t-is-error .t-form__controls-content .t-radio-button--focused, .t-is-error .t-form__controls-content .t-cascader--focused, .t-is-error .t-form__controls-content .t-range-input--focused, .t-is-error .t-form__controls-content .t-textarea__inner--focused { box-shadow: 0 0 0 2px var(--td-error-color-focus); } .t-is-error .t-form__controls-content .t-input .t-icon, .t-is-error .t-form__controls-content .t-select .t-icon, .t-is-error .t-form__controls-content .t-radio-button .t-icon, .t-is-error .t-form__controls-content .t-cascader .t-icon, .t-is-error .t-form__controls-content .t-range-input .t-icon, .t-is-error .t-form__controls-content .t-textarea__inner .t-icon, .t-is-error .t-form__controls-content .t-input .t-fake-arrow, .t-is-error .t-form__controls-content .t-select .t-fake-arrow, .t-is-error .t-form__controls-content .t-radio-button .t-fake-arrow, .t-is-error .t-form__controls-content .t-cascader .t-fake-arrow, .t-is-error .t-form__controls-content .t-range-input .t-fake-arrow, .t-is-error .t-form__controls-content .t-textarea__inner .t-fake-arrow { color: var(--td-error-color); } .t-is-error .t-form__controls-content .t-select > .t-select__right-icon:not(.t-select__right-icon-clear) { color: var(--td-error-color); } .t-is-error .t-form__controls-content .t-radio-button:last-child { border-right-color: var(--td-error-color); } .t-is-error .t-form__controls-content .t-textarea__inner.t-is-focused { box-shadow: 0 0 0 2px var(--td-error-color-focus); } .t-is-error .t-form__controls-content .t-cascader.t-is-active, .t-is-error .t-form__controls-content .t-select.t-is-active { box-shadow: 0 0 0 2px var(--td-error-color-focus); } .t-is-error .t-form__controls-content .t-form__status .t-icon { color: var(--td-error-color); } .t-radio-group { font: var(--td-font-body-medium); color: var(--td-text-color-primary); box-sizing: border-box; margin: 0; padding: 0; list-style: none; display: inline-flex; align-items: center; width: fit-content; max-width: 100%; border-radius: var(--td-radius-default); flex-wrap: wrap; } @-moz-document url-prefix() { .t-radio-group { scrollbar-color: var(--td-scrollbar-color) transparent; scrollbar-width: thin; } } .t-radio-group::-webkit-scrollbar { width: 4px; height: 4px; } .t-radio-group::-webkit-scrollbar-thumb { border: 0px solid transparent; background-clip: content-box; background-color: var(--td-scrollbar-color); border-radius: 7px; } .t-radio-group::-webkit-scrollbar-thumb:vertical:hover, .t-radio-group::-webkit-scrollbar-thumb:horizontal:hover { background-color: var(--td-scrollbar-hover-color); } .t-radio-group .t-radio { margin-right: var(--td-comp-margin-xxl); } .t-radio-group.t-radio-group__outline { flex-wrap: wrap; row-gap: var(--td-comp-margin-xs); } .t-radio-group.t-radio-group__outline.t-size-s .t-radio-button { height: var(--td-comp-size-xs); } .t-radio-group.t-radio-group__outline.t-size-m .t-radio-button { height: var(--td-comp-size-m); } .t-radio-group.t-radio-group__outline.t-size-l .t-radio-button { height: var(--td-comp-size-xl); } .t-radio-group.t-radio-group__outline .t-radio-button:first-child { border-radius: var(--td-radius-default) 0 0 var(--td-radius-default); } .t-radio-group.t-radio-group__outline .t-radio-button:last-child { border-radius: 0 var(--td-radius-default) var(--td-radius-default) 0; } .t-radio-group.t-radio-group__outline .t-radio-button:only-child { border-radius: var(--td-radius-default); } .t-radio-group.t-radio-group__outline .t-radio-button.t-is-checked { color: var(--td-brand-color); } .t-radio-group.t-radio-group__outline .t-radio-button.t-is-disabled.t-is-checked { color: var(--td-brand-color-disabled); border-color: var(--td-brand-color-disabled); background-color: var(--td-bg-color-specialcomponent); } .t-radio-group.t-radio-group--filled { border-color: var(--td-bg-color-component); padding: var(--td-comp-paddingTB-xxs) var(--td-comp-paddingLR-xxs); border-radius: var(--td-radius-default); background-color: var(--td-bg-color-component); position: relative; } .t-radio-group.t-radio-group--filled .t-radio-group__bg-block { position: absolute; left: 2px; top: 2px; width: 0; height: calc(100% - 4px); background-color: var(--td-bg-color-container-select); transition: all 0.2s cubic-bezier(0.38, 0, 0.24, 1); border-radius: var(--td-radius-small); } .t-radio-group.t-radio-group--filled .t-radio-button { color: var(--td-text-color-secondary); border: 0; background-color: transparent; } .t-radio-group.t-radio-group--filled .t-radio-button:hover { color: var(--td-text-color-primary); } .t-radio-group.t-radio-group--filled .t-radio-button::before { content: ""; position: absolute; left: 0px; top: 50%; transform: translateY(-50%); width: 1px; height: calc(100% - 16px); background-color: var(--td-component-border); transition: opacity 0.2s cubic-bezier(0, 0, 0.15, 1); } .t-radio-group.t-radio-group--filled .t-radio-button:first-child::before { opacity: 0; } .t-radio-group.t-radio-group--filled .t-radio-button.t-is-checked { position: relative; color: var(--td-text-color-primary); z-index: 1; border: 0; transition: color 0.2s linear; } .t-radio-group.t-radio-group--filled .t-radio-button.t-is-checked::before { opacity: 0; } .t-radio-group.t-radio-group--filled .t-radio-button.t-is-checked + label::before { opacity: 0; } .t-radio-group.t-radio-group--filled .t-radio-button.t-is-disabled { background-color: transparent; } .t-radio-group.t-radio-group--filled .t-radio-button.t-is-disabled.t-is-checked { color: var(--td-text-color-disabled); } .t-radio-group.t-radio-group--filled .t-radio-button.t-is-disabled.t-is-checked ~ .t-radio-group__bg-block { background-color: var(--td-bg-color-component-disabled); } .t-radio-group.t-radio-group--primary-filled .t-radio-group__bg-block { background-color: var(--td-brand-color); } .t-radio-group.t-radio-group--primary-filled .t-radio-button.t-is-checked { color: var(--td-text-color-anti); } .t-radio-group.t-radio-group--primary-filled .t-radio-button.t-is-disabled.t-is-checked { color: var(--td-text-color-anti); } .t-radio-group.t-radio-group--primary-filled .t-radio-button.t-is-disabled.t-is-checked ~ .t-radio-group__bg-block { background-color: var(--td-brand-color-disabled); } .t-radio-group.t-size-s .t-radio-button { height: calc(var(--td-comp-size-xs) - (var(--td-comp-paddingTB-xxs) * 2)); padding: 0px var(--td-comp-paddingLR-s); font: var(--td-font-body-small); } .t-radio-group.t-size-s .t-radio-button::before { height: calc(100% - 16px); } .t-radio-group.t-size-m .t-radio-button { height: calc(var(--td-comp-size-m) - (var(--td-comp-paddingTB-xxs) * 2)); padding: var(--td-comp-paddingTB-xs) var(--td-comp-paddingLR-l); font: var(--td-font-body-medium); } .t-radio-group.t-size-m .t-radio-button::before { height: calc(100% - 20px); } .t-radio-group.t-size-l .t-radio-button { height: calc(var(--td-comp-size-xl) - (var(--td-comp-paddingTB-xxs) * 2)); padding: var(--td-comp-paddingTB-s) var(--td-comp-paddingLR-xl); font: var(--td-font-body-large); } .t-radio-group.t-size-l .t-radio-button::before { height: calc(100% - 24px); } .t-radio-group .t-radio-button { cursor: pointer; position: relative; border: 1px solid; border-color: var(--td-border-level-2-color); border-right: 0; display: inline-flex; align-items: center; transition: color 0.2s cubic-bezier(0, 0, 0.15, 1); color: var(--td-text-color-primary); white-space: nowrap; box-sizing: border-box; } .t-radio-group .t-radio-button:first-child { border-radius: var(--td-radius-small) 0 0 var(--td-radius-small); } .t-radio-group .t-radio-button:last-child { border-right: 1px solid; border-right-color: var(--td-border-level-2-color); border-radius: 0 var(--td-radius-small) var(--td-radius-small) 0; } .t-radio-group .t-radio-button__former { opacity: 0; height: 0; width: 0; font: var(--td-font-body-medium); color: var(--td-text-color-primary); box-sizing: border-box; margin: 0; padding: 0; list-style: none; } .t-radio-group .t-radio-button:hover { color: var(--td-brand-color); } .t-radio-group .t-radio-button.t-is-checked { border-right: 1px solid; border-color: var(--td-brand-color); transition: border-color 0.2s cubic-bezier(0, 0, 0.15, 1); } .t-radio-group .t-radio-button.t-is-checked + .t-radio-button { border-left: 0; } .t-radio-group .t-radio-button.t-is-disabled { cursor: not-allowed; color: var(--td-text-color-disabled); background-color: var(--td-bg-color-component-disabled); } .t-radio-group .t-radio-button.t-is-disabled:hover { border-color: var(--td-border-level-2-color); color: var(--td-text-color-disabled); } .t-radio-group .t-radio-button.t-is-disabled:hover::after { width: 0; } .t-radio-group .t-radio-button.t-is-disabled.t-is-checked { color: var(--td-text-color-disabled); } .t-radio-group .t-radio-button.t-is-disabled.t-is-checked::after { width: 0; } .t-radio { font: var(--td-font-body-medium); color: var(--td-text-color-primary); box-sizing: border-box; margin: 0; padding: 0; list-style: none; position: relative; cursor: pointer; display: inline-block; } .t-radio__former { font: var(--td-font-body-medium); color: var(--td-text-color-primary); box-sizing: border-box; margin: 0; padding: 0; list-style: none; opacity: 0; position: absolute; } .t-radio__input { position: relative; display: inline-block; width: 16px; height: 16px; vertical-align: middle; border-radius: var(--td-radius-circle); border: 1px solid var(--td-border-level-2-color); background-color: var(--td-bg-color-container); transition: border 0.2s cubic-bezier(0, 0, 0.15, 1); } .t-radio__input::after { content: ""; position: absolute; top: 50%; left: 50%; width: 16px; height: 16px; margin-top: -8px; margin-left: -8px; transform: scale(0.5); opacity: 0; border-radius: var(--td-radius-circle); background-color: var(--td-brand-color); transition: all 0.2s cubic-bezier(0, 0, 0.15, 1); } .t-radio__label { display: inline-block; margin-left: var(--td-comp-margin-s); color: var(--td-text-color-primary); vertical-align: middle; font: var(--td-font-body-medium); white-space: nowrap; } .t-radio:hover .t-radio__input { border-color: var(--td-brand-color); } .t-radio.t-is-checked .t-radio__input { border-color: var(--td-brand-color); } .t-radio.t-is-checked .t-radio__input::after { opacity: 1; } .t-radio.t-is-disabled { cursor: not-allowed; } .t-radio.t-is-disabled .t-radio__label { color: var(--td-text-color-disabled); } .t-radio.t-is-disabled .t-radio__input { background-color: var(--td-bg-color-component-disabled); } .t-radio.t-is-disabled:hover .t-radio__input { border-color: var(--td-border-level-2-color); } .t-radio.t-is-disabled.t-is-checked .t-radio__input { border-color: var(--td-border-level-2-color); } .t-radio.t-is-disabled.t-is-checked .t-radio__input::after { background-color: var(--td-text-color-disabled); } .t-radio:focus-visible:focus-visible { outline: 2px solid var(--td-brand-color); outline-offset: var(--td-comp-paddingTB-xs); border-radius: 0; } .t-switch { font: var(--td-font-body-medium); color: var(--td-text-color-primary); box-sizing: border-box; list-style: none; position: relative; display: inline-flex; vertical-align: middle; align-items: center; outline: none; border: 0; padding: 0; margin: 0; height: var(--td-comp-size-xxs); line-height: var(--td-comp-size-xxs); border-radius: var(--td-radius-round); min-width: calc(var(--td-comp-size-xxs) / 0.618); transition: all 0.2s cubic-bezier(0.38, 0, 0.24, 1); background-color: var(--td-bg-color-secondarycomponent); cursor: pointer; user-select: none; } .t-switch:hover { background-color: var(--td-bg-color-secondarycomponent-hover); } .t-switch__handle { position: absolute; display: flex; align-items: center; justify-content: center; top: 4px; left: 4px; width: calc(var(--td-comp-size-xxs) - 2 * 4px); height: calc(var(--td-comp-size-xxs) - 2 * 4px); border-radius: var(--td-radius-round); transition: all 0.2s cubic-bezier(0.38, 0, 0.24, 1); box-shadow: var(--td-shadow-1); } .t-switch__handle .t-icon { font-size: calc(var(--td-comp-size-xxs) - 4px); color: transparent; } .t-switch__handle::before { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; border-radius: var(--td-radius-round); background-color: #fff; transition: all 0.2s cubic-bezier(0.38, 0, 0.24, 1); } .t-switch:active:not(.t-is-disabled):not(.t-is-loading) .t-switch__handle::before { left: 0; right: -6px; } .t-switch:active:not(.t-is-disabled):not(.t-is-loading).t-is-checked .t-switch__handle::before { right: 0; left: -6px; } .t-switch:active:not(.t-is-disabled):not(.t-is-loading) .t-switch__content { opacity: 0; } .t-switch__content { box-sizing: border-box; display: inline-flex; align-items: center; color: var(--td-text-color-anti); padding: 0 var(--td-comp-margin-xs) 0 calc(calc(var(--td-comp-size-xxs) / 0.618) / 2 + 2px); font-size: var(--td-font-size-body-small); min-width: calc(var(--td-comp-size-xxs) / 0.618); transition: padding 0.2s cubic-bezier(0.38, 0, 0.24, 1), opacity 0.2s linear; } .t-switch__content .t-icon { font-size: var(--td-font-size-body-large); } .t-switch.t-is-checked { background-color: var(--td-brand-color); } .t-switch.t-is-checked:hover { background-color: var(--td-brand-color-hover); } .t-switch.t-is-checked .t-switch__handle { left: calc(100% - 2.5px); transform: translate(-100%, 0); width: calc(var(--td-comp-size-xxs) - 2 * 2.5px); height: calc(var(--td-comp-size-xxs) - 2 * 2.5px); top: 2.5px; } .t-switch.t-is-checked .t-switch__content { padding: 0 calc(calc(var(--td-comp-size-xxs) / 0.618) / 2 + 2px) 0 var(--td-comp-margin-xs); color: var(--td-text-color-anti); } .t-switch.t-is-loading { cursor: not-allowed; background-color: var(--td-bg-color-component-disabled); } .t-switch.t-is-loading .t-loading { display: inline-flex; } .t-switch.t-is-loading .t-switch__handle .t-icon { color: var(--td-bg-color-component-disabled); } .t-switch.t-is-loading.t-is-checked { background-color: var(--td-brand-color-focus); } .t-switch.t-is-loading.t-is-checked .t-switch__handle .t-icon { color: var(--td-brand-color-focus); } .t-switch.t-is-disabled { cursor: not-allowed; background-color: var(--td-bg-color-component-disabled); } .t-switch.t-is-disabled .t-switch__handle { box-shadow: none; } .t-switch.t-is-disabled.t-is-checked { background-color: var(--td-brand-color-disabled); } .t-switch.t-is-disabled.t-is-checked .t-switch__handle { box-shadow: none; } .t-switch.t-is-disabled.t-is-checked .t-switch__handle .t-icon { color: var(--td-brand-color-disabled); } .t-switch.t-size-l { min-width: calc(var(--td-comp-size-xs) / 0.618); height: var(--td-comp-size-xs); line-height: var(--td-comp-size-xs); border-radius: var(--td-radius-round); } .t-switch.t-size-l:active:not(.t-is-disabled):not(.t-is-loading) .t-switch__handle::before { left: 0; right: -8px; } .t-switch.t-size-l:active:not(.t-is-disabled):not(.t-is-loading).t-is-checked .t-switch__handle::before { right: 0; left: -8px; } .t-switch.t-size-l .t-switch__handle { top: 5px; left: 5px; width: calc(var(--td-comp-size-xs) - 2 * 5px); height: calc(var(--td-comp-size-xs) - 2 * 5px); } .t-switch.t-size-l .t-switch__handle .t-icon { font-size: calc(var(--td-comp-size-xs) - 4px); } .t-switch.t-size-l .t-switch__content { padding: 0 var(--td-comp-margin-s) 0 calc(calc(var(--td-comp-size-xs) / 0.618) / 2 + 4px); min-width: calc(var(--td-comp-size-xs) / 0.618); font-size: var(--td-font-size-body-large); } .t-switch.t-size-l .t-switch__content .t-icon { font-size: var(--td-font-size-body-large); } .t-switch.t-size-l.t-is-checked .t-switch__handle { left: calc(100% - 3px); top: 3px; width: calc(var(--td-comp-size-xs) - 2 * 3px); height: calc(var(--td-comp-size-xs) - 2 * 3px); } .t-switch.t-size-l.t-is-checked .t-switch__content { padding: 0 calc(calc(var(--td-comp-size-xs) / 0.618) / 2 + 4px) 0 var(--td-comp-margin-s); } .t-switch.t-size-s { min-width: calc(var(--td-comp-size-xxxs) / 0.618); height: var(--td-comp-size-xxxs); line-height: var(--td-comp-size-xxxs); border-radius: var(--td-radius-round); } .t-switch.t-size-s:active:not(.t-is-disabled):not(.t-is-loading) .t-switch__handle::before { left: 0; right: -4px; } .t-switch.t-size-s:active:not(.t-is-disabled):not(.t-is-loading).t-is-checked .t-switch__handle::before { right: 0; left: -4px; } .t-switch.t-size-s .t-switch__handle { top: 3px; left: 3px; width: calc(var(--td-comp-size-xxxs) - 2 * 3px); height: calc(var(--td-comp-size-xxxs) - 2 * 3px); } .t-switch.t-size-s .t-switch__handle .t-icon { font-size: calc(var(--td-comp-size-xxxs) - 4px); } .t-switch.t-size-s .t-switch__content { padding: 0 var(--td-comp-margin-xxs) 0 calc(calc(var(--td-comp-size-xxxs) / 0.618) / 2 + 2px); min-width: calc(var(--td-comp-size-xxxs) / 0.618); font-size: 9px; } .t-switch.t-size-s .t-switch__content .t-icon { font-size: var(--td-font-size-body-large); } .t-switch.t-size-s.t-is-checked .t-switch__handle { left: calc(100% - 2px); top: 2px; width: calc(var(--td-comp-size-xxxs) - 2 * 2px); height: calc(var(--td-comp-size-xxxs) - 2 * 2px); } .t-switch.t-size-s.t-is-checked .t-switch__content { padding: 0 calc(calc(var(--td-comp-size-xxxs) / 0.618) / 2 + 2px) 0 var(--td-comp-margin-xxs); } .t-textarea { font: var(--td-font-body-medium); color: var(--td-text-color-primary); box-sizing: border-box; margin: 0; padding: 0; list-style: none; position: relative; width: 100%; } .t-textarea__inner { display: flex; width: 100%; height: var(--td-comp-size-xxxl); border: 1px solid var(--td-border-level-2-color); border-radius: var(--td-radius-default); padding: calc(calc(var(--td-comp-size-m) - var(--td-line-height-body-medium)) / 2) var(--td-comp-paddingLR-s); background-color: var(--td-bg-color-specialcomponent); font: var(--td-font-body-medium); color: var(--td-text-color-primary); resize: vertical; outline: none; transition: all cubic-bezier(0.38, 0, 0.24, 1) 0.2s, height 0s; box-sizing: border-box; } @-moz-document url-prefix() { .t-textarea__inner { scrollbar-color: var(--td-scrollbar-color) transparent; scrollbar-width: thin; } } .t-textarea__inner::-webkit-scrollbar { width: 6px; height: 6px; } .t-textarea__inner::-webkit-scrollbar-thumb { border: 0px solid transparent; background-clip: content-box; background-color: var(--td-scrollbar-color); border-radius: 11px; } .t-textarea__inner::-webkit-scrollbar-thumb:vertical:hover, .t-textarea__inner::-webkit-scrollbar-thumb:horizontal:hover { background-color: var(--td-scrollbar-hover-color); } .t-textarea__inner:hover { border-color: var(--td-brand-color); } .t-textarea__inner:focus { border-color: var(--td-brand-color); box-shadow: 0 0 0 2px var(--td-brand-color-focus); } .t-textarea__inner::placeholder { color: var(--td-text-color-placeholder); } .t-textarea__inner.t-is-success { border-color: var(--td-success-color); } .t-textarea__inner.t-is-success:focus { box-shadow: 0 0 0 2px var(--td-success-color-focus); } .t-textarea__inner.t-is-warning { border-color: var(--td-warning-color); } .t-textarea__inner.t-is-warning:focus { box-shadow: 0 0 0 2px var(--td-warning-color-focus); } .t-textarea__inner.t-is-error { border-color: var(--td-error-color); } .t-textarea__inner.t-is-error:focus { box-shadow: 0 0 0 2px var(--td-error-color-focus); } .t-textarea__info_wrapper { display: flex; column-gap: var(--td-comp-margin-s); justify-content: space-between; } .t-textarea__info_wrapper_align { justify-content: end; } .t-textarea__limit { font: var(--td-font-body-small); color: var(--td-text-color-placeholder); } .t-textarea .t-is-disabled { color: var(--td-text-color-disabled); background-color: var(--td-bg-color-component-disabled); cursor: not-allowed; } .t-textarea .t-is-disabled:hover { border-color: var(--td-border-level-2-color); } .t-textarea .t-is-disabled::placeholder { color: var(--td-text-color-disabled); } .t-textarea .t-resize-none { resize: none; } .t-textarea__tips { height: auto; min-height: var(--td-comp-size-xs); font: var(--td-font-body-small); display: inline-block; } .t-textarea__tips--normal { color: var(--td-text-color-placeholder); } .t-textarea__tips--success { color: var(--td-success-color); } .t-textarea__tips--warning { color: var(--td-warning-color); } .t-textarea__tips--error { color: var(--td-error-color); } .t-tree { box-sizing: border-box; margin: 0; padding: 0; list-style: none; font: var(--td-font-body-medium); color: var(--td-text-color-primary); position: relative; } .t-tree.t-is-disabled { color: var(--td-text-color-disabled); } .t-tree.t-is-disabled .t-icon { color: var(--td-text-color-disabled); } .t-tree.t-is-disabled .t-tree__item.t-is-active { background-color: var(--td-bg-color-container-hover); color: var(--td-text-color-disabled); } .t-tree.t-is-disabled .t-tree__item .t-icon { color: var(--td-text-color-secondary); } .t-tree__empty { color: var(--td-text-color-disabled); } .t-tree__branch { display: block; } .t-tree__item { --level: 0; --hscale: 2; will-change: opacity, max-height; position: relative; display: flex; flex-wrap: nowrap; align-items: center; padding: 0 0 0 calc(var(--td-comp-margin-xxl) * var(--level)); cursor: default; transform: translateZ(0); backface-visibility: hidden; perspective: 1000; } .t-tree__item .t-icon, .t-tree__item .t-loading { display: inline-block; position: relative; z-index: 2; font-size: calc(var(--td-font-size-body-medium) + 2px); } .t-tree__item .t-icon { color: var(--td-text-color-secondary); } .t-tree__item .t-checkbox { align-items: center; font-size: 0; } .t-tree__item .t-checkbox__input { flex-shrink: 0; } .t-tree__item .t-checkbox__label { overflow: hidden; text-overflow: ellipsis; } .t-tree__item .t-tree__icon--default .t-icon { transform: rotate(0); } .t-tree__item--open .t-icon { color: var(--td-text-color-brand); } .t-tree__item--open .t-tree__icon--default .t-icon { transform: rotate(90deg); } .t-tree__item--clickable { cursor: pointer; } .t-tree__item--locked { color: var(--td-text-color-disabled); } .t-tree__item--matched { color: inherit; } .t-tree__item--draggable { cursor: pointer; } .t-tree__item--draggable:hover { background-color: var(--td-bg-color-container-hover); background-clip: content-box; } .t-tree__item--draggable::after { position: absolute; top: -1px; right: 0; left: 0; display: block; height: 2px; border-radius: 1px; content: ""; padding: inherit; background-clip: content-box; } .t-tree__item--tip-top::after { background-color: var(--td-brand-color); } .t-tree__item--tip-bottom::after { top: unset; bottom: -1px; background-color: var(--td-brand-color); } .t-tree__item--tip-highlight { background-color: var(--td-brand-color-light); background-clip: content-box; } .t-tree__item::before { content: ""; display: block; width: 0; flex: 0 0 auto; height: calc(var(--td-comp-size-m) + 2px); } .t-tree--block-node .t-tree__label { flex: 1; } .t-tree--hoverable .t-tree__label:not(.t-is-active):not(.t-is-checked):hover { background-color: var(--td-bg-color-container-hover); } .t-tree__line { --level: 0; --color: var(--td-border-level-1-color); --space: var(--td-comp-margin-xxl); --iconSize: 16px; position: absolute; left: calc(var(--td-comp-margin-xxl) * var(--level) - var(--td-comp-margin-l)); bottom: var(--td-comp-margin-l); width: 1px; height: calc(var(--td-comp-size-m) + 2px); pointer-events: none; } .t-tree__line::before { content: ""; position: absolute; bottom: 0; left: 0; display: block; height: calc(var(--td-comp-size-m) + 2px); width: var(--td-comp-margin-m); border-left: 1px solid var(--color); border-bottom: 1px solid var(--color); } .t-tree__line--first::before { height: var(--td-line-height-body-medium); } .t-tree__line--leaf::before { width: var(--td-comp-margin-m); } .t-tree__icon { position: relative; flex: none; display: inline-flex; align-items: center; text-align: center; width: calc(var(--td-font-size-body-medium) + 2px); font-size: 0; user-select: none; cursor: pointer; } .t-tree__icon::after { content: ""; display: block; position: absolute; left: -2px; top: -2px; width: calc(calc(var(--td-font-size-body-medium) + 2px) + 4px); height: calc(calc(var(--td-font-size-body-medium) + 2px) + 4px); border-radius: var(--td-radius-default); } .t-tree__icon:not(:empty):hover { background-color: var(--td-bg-color-container-hover); } .t-tree__icon:empty { cursor: initial; } .t-tree__label { --ripple-color: var(--td-bg-color-container-active); flex-wrap: nowrap; flex: 1; padding: var(--td-comp-paddingTB-xxs) var(--td-comp-paddingLR-xs); margin-left: var(--td-comp-margin-xs); border-radius: var(--td-radius-default); cursor: pointer; white-space: nowrap; word-wrap: normal; overflow: hidden; text-overflow: ellipsis; } .t-tree__label.t-is-checked { font-weight: 500; color: var(--td-text-color-primary); background-color: var(--td-brand-color-light); } .t-tree__label::selection { background-color: transparent; } .t-is-active .t-tree__label { font-weight: 500; color: var(--td-text-color-primary); background-color: var(--td-brand-color-light); } .t-tree__space { display: block; flex: 1 0 auto; } .t-tree__operations { display: flex; flex: 0 0 auto; justify-content: flex-end; align-items: center; margin-left: auto; } .t-tree__operations .t-icon { cursor: pointer; } .t-tree__item.t-is-disabled { color: var(--td-text-color-disabled); cursor: default; } .t-tree__item.t-is-disabled .t-checkbox { cursor: default; } .t-tree__item--hidden { display: none; } .t-tree--transition .t-tree__label { transition: background-color 0.24s cubic-bezier(0.38, 0, 0.24, 1); } .t-tree--transition .t-tree__icon { transition: color, transform 0.24s cubic-bezier(0.38, 0, 0.24, 1); } .t-tree--transition .t-tree__icon::after { transition: 0.2s linear; } .t-tree--transition .t-tree__icon:not(:empty):hover { transition: 0.2s linear; } .t-tree--transition .t-tree__icon--default .t-icon { transition: color, transform cubic-bezier(0.38, 0, 0.24, 1) 0.2s; } .t-tree--transition .t-tree__item--visible { display: flex; max-height: calc(calc(var(--td-comp-size-m) + 2px) * var(--hscale) + 0px); opacity: 1; transition: opacity 150ms linear 150ms, max-height 150ms linear 0s; } .t-tree--transition .t-tree__item--hidden { display: flex; max-height: 0; opacity: 0; overflow: hidden; pointer-events: none; user-select: none; animation: initial; transition: opacity 150ms linear 0s, max-height 150ms linear 150ms; } .t-tree--transition .t-tree__item--enter-active { animation: t-tree-toggle 300ms linear; } .t-tree--transition .t-tree__item--leave-active { animation: t-tree-toggle 300ms reverse linear forwards; } .t-tree__vscroll { overflow-y: auto; } .t-tree__lazyload { overflow-y: auto; } .t-tree__vscroll-cursor { position: absolute; width: 1px; height: 1px; transition: transform 0.2s; } .t-tree--scrolling .t-tree__item { will-change: initial; } .t-tree--scrolling .v-enter, .t-tree--scrolling .v-leave, .t-tree--scrolling .t-tree__item--visible, .t-tree--scrolling .t-tree__item--hidden, .t-tree--scrolling .t-tree__item--enter, .t-tree--scrolling .t-tree__item--enter-active, .t-tree--scrolling .t-tree__item--enter-to, .t-tree--scrolling .t-tree__item--leave, .t-tree--scrolling .t-tree__item--leave-active .t-tree__item--leave-to { animation: none; transition: none; } .t-tree--scrolling .t-tree__item--visible { max-height: initial; } .t-tree--scrolling .t-tree__item--enter-to, .t-tree--scrolling .t-tree__item--enter-active { max-height: initial; } .t-tree--scrolling .t-tree__item--leave-to, .t-tree--scrolling .t-tree__item--leave-active { max-height: 0; } @keyframes t-tree-toggle { 0% { opacity: 0; max-height: 0; } 50% { opacity: 0; max-height: calc(calc(var(--td-comp-size-m) + 2px) * var(--hscale) + 0px); } 100% { opacity: 1; max-height: calc(calc(var(--td-comp-size-m) + 2px) * var(--hscale) + 0px); } } .t-tree-select { font: var(--td-font-body-medium); color: var(--td-text-color-primary); box-sizing: border-box; margin: 0; padding: 0; list-style: none; } .t-tree-select--without-input input { display: none; } .t-tree-select--without-input .t-input__suffix-icon { margin-left: auto; } .t-tree-select .t-fake-arrow { transition: color 0.2s cubic-bezier(0.38, 0, 0.24, 1); color: var(--td-text-color-placeholder); } .t-tree-select .t-fake-arrow--highlight { color: var(--td-text-color-brand); } .t-tree-select .t-fake-arrow--disable { color: var(--td-text-color-disabled); } .t-tree-select--placeholder { color: var(--td-text-color-placeholder); } .t-tree-select.t-single-suffix { padding-right: 20px; } .t-tree-select.t-tag-prefix { padding-left: 4px; } .t-tree-select-popup .t-popup__content { padding: var(--td-pop-padding-m); max-height: 300px; overflow-y: auto; } @-moz-document url-prefix() { .t-tree-select-popup .t-popup__content { scrollbar-color: var(--td-scrollbar-color) transparent; scrollbar-width: thin; } } .t-tree-select-popup .t-popup__content::-webkit-scrollbar { width: 8px; height: 8px; } .t-tree-select-popup .t-popup__content::-webkit-scrollbar-thumb { border: 2px solid transparent; background-clip: content-box; background-color: var(--td-scrollbar-color); border-radius: 15px; } .t-tree-select-popup .t-popup__content::-webkit-scrollbar-thumb:vertical:hover, .t-tree-select-popup .t-popup__content::-webkit-scrollbar-thumb:horizontal:hover { background-color: var(--td-scrollbar-hover-color); } .t-color-picker__panel { padding: 0; width: 256px; background: var(--td-bg-color-container); 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); user-select: none; } .t-popup__content .t-color-picker__panel { background: transparent; box-shadow: unset; } .t-color-picker { font: var(--td-font-body-medium); color: var(--td-text-color-primary); box-sizing: border-box; margin: 0; padding: 0; list-style: none; } .t-color-picker.t-popup__content { 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); } .t-color-picker__icon { display: flex; align-items: center; justify-content: center; font-size: var(--td-comp-size-xxxs); background: transparent; transition: 0.2s linear; color: var(--td-text-color-secondary); border-radius: var(--td-radius-default); cursor: pointer; } .t-color-picker__icon:hover { background: var(--td-bg-color-container-hover); transition: 0.2s linear; } .t-color-picker__icon.t-is-disabled { color: var(--td-text-color-disabled); pointer-events: none; } .t-color-picker__head { display: flex; align-items: center; justify-content: space-between; padding: var(--td-pop-padding-xl); position: relative; z-index: 2; } .t-color-picker__head .t-color-picker__close { flex-shrink: 0; } .t-color-picker__head + .t-color-picker__body { padding-top: 0; } .t-color-picker__body { padding: var(--td-pop-padding-xl); padding-bottom: calc(var(--td-pop-padding-xl) - 4px); } .t-color-picker__thumb { position: absolute; z-index: 1; outline: none; border-color: currentcolor; width: calc(var(--td-comp-size-xxxs) + var(--td-size-1)); height: calc(var(--td-comp-size-xxxs) + var(--td-size-1)); border-radius: var(--td-radius-circle); box-shadow: var(--td-shadow-1); background: var(--td-text-color-anti); color: var(--td-text-color-brand); padding: 2px; box-sizing: border-box; } .t-color-picker__thumb::before { content: ""; width: 100%; height: 100%; background: currentcolor; border-radius: var(--td-radius-circle); display: block; } .t-color-picker__saturation { height: 160px; border-radius: var(--td-radius-default); position: relative; overflow: hidden; background: transparent; } .t-color-picker__saturation::before, .t-color-picker__saturation::after { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .t-color-picker__saturation::before { /* stylelint-disable-next-line color-no-hex */ background: linear-gradient(90deg, #fff, transparent); } .t-color-picker__saturation::after { /* stylelint-disable-next-line color-no-hex */ background: linear-gradient(0deg, #000, transparent); } .t-color-picker__saturation .t-color-picker__thumb { width: calc(var(--td-comp-size-xxxs) + var(--td-size-1)); height: calc(var(--td-comp-size-xxxs) + var(--td-size-1)); border-radius: var(--td-radius-circle); transform: translate(-50%, -50%); } .t-color-picker__slider-wrapper { border-radius: calc(8px / 2); padding: 0 calc(calc(var(--td-comp-size-xxxs) + var(--td-size-1)) / 2); position: relative; } .t-color-picker__slider-wrapper--hue-type { /* stylelint-disable-next-line color-named */ background: red; } .t-color-picker__slider-wrapper--alpha-type { background: var(--td-text-color-anti); /* stylelint-disable-next-line color-no-hex */ background-image: linear-gradient(45deg, #c5c5c5 25%, transparent 0, transparent 75%, #c5c5c5 0, #c5c5c5), linear-gradient(45deg, #c5c5c5 25%, transparent 0, transparent 75%, #c5c5c5 0, #c5c5c5); background-size: 6px 6px; background-position: 0 0, 3px 3px; } .t-color-picker__slider-padding { position: absolute; left: 0; top: 0; width: 100%; height: 8px; border-radius: calc(8px / 2); } .t-color-picker__slider { height: 8px; position: relative; border-radius: calc(8px / 2); cursor: pointer; color: transparent; outline: none; z-index: 1; } .t-color-picker__slider .t-color-picker__thumb { transform: translate(calc(calc(var(--td-comp-size-xxxs) + var(--td-size-1)) * -0.5), -50%); top: 50%; } .t-color-picker__slider .t-color-picker__rail { position: absolute; top: 0; left: 0; width: 100%; height: 100%; overflow: hidden; border-radius: inherit; } .t-color-picker__alpha, .t-color-picker__format { margin: var(--td-comp-margin-m) 0 0 0; } .t-color-picker__hue { /* stylelint-disable color-no-hex, color-named */ background: linear-gradient(90deg, red, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, red); } .t-color-picker__alpha .t-color-picker__rail { background: linear-gradient(to right, transparent, currentcolor); } .t-color-picker__sliders-wrapper { display: flex; align-items: center; margin: var(--td-comp-margin-m) 0; } .t-color-picker__sliders { width: 100%; } .t-color-picker__sliders-preview { flex-shrink: 0; margin-left: var(--td-comp-margin-m); width: var(--td-comp-size-s); height: var(--td-comp-size-s); border-radius: var(--td-radius-default); overflow: hidden; background: var(--td-text-color-anti); /* stylelint-disable-next-line color-no-hex */ background-image: linear-gradient(45deg, #c5c5c5 25%, transparent 0, transparent 75%, #c5c5c5 0, #c5c5c5), linear-gradient(45deg, #c5c5c5 25%, transparent 0, transparent 75%, #c5c5c5 0, #c5c5c5); background-size: 6px 6px; background-position: 0 0, 3px 3px; } .t-color-picker__sliders-preview-inner { display: block; width: 100%; height: 100%; } .t-color-picker__gradient { padding: 0; display: flex; align-items: center; margin-bottom: var(--td-comp-margin-m); } .t-color-picker__gradient-slider { flex: 1; } .t-color-picker__gradient-degree { position: relative; flex-shrink: 0; margin-left: var(--td-comp-margin-m); width: var(--td-comp-size-xxl); } .t-color-picker__gradient-degree .t-input { margin: 0; font: var(--td-font-body-small); } .t-color-picker__gradient-degree .t-input-number { width: 100%; padding: 0; } .t-color-picker__gradient .gradient-thumbs { position: absolute; width: 100%; height: 100%; top: 0; left: 0; margin: 0; padding: 0; list-style: none; border-radius: inherit; cursor: pointer; } .t-color-picker__gradient .gradient-thumbs__item { top: 50%; left: 0; transform: translate(-50%, -50%); z-index: 0; cursor: pointer; } .t-color-picker__gradient .gradient-thumbs__item::before { display: none; } .t-color-picker__gradient .gradient-thumbs__item.t-is-active { z-index: 1; outline: 2px solid var(--td-component-border); } .t-color-picker__gradient .gradient-thumbs__item-inner { display: block; width: 100%; height: 100%; border-radius: var(--td-radius-circle); overflow: hidden; } .t-color-picker__gradient .gradient-thumbs__item-inner::before { content: ""; width: 100%; height: 100%; display: block; background-color: currentcolor; } .t-color-picker__format { display: flex; align-items: center; justify-content: space-between; } .t-color-picker__format--item:first-child { flex-shrink: 0; } .t-color-picker__format--item:last-child { flex: 1; } .t-color-picker__format--item .t-size-m, .t-color-picker__format--item .t-input.t-size-m { font: var(--td-font-body-small); } .t-color-picker__format--item .t-input-number .t-input { margin: 0; } .t-color-picker__format--item .input-group { display: flex; align-items: center; justify-content: space-around; margin-left: var(--td-comp-margin-s); } .t-color-picker__format--item .input-group__item { flex: 1; width: 0; margin-left: -1px; } .t-color-picker__format--item .input-group__item .t-input { padding: 0 1px; } .t-color-picker__format--item .input-group__item .t-input:focus, .t-color-picker__format--item .input-group__item .t-input:focus-within, .t-color-picker__format--item .input-group__item .t-input:hover { z-index: 1; } .t-color-picker__format--item .input-group__item:not(:first-child):not(:last-child) .t-input { border-radius: 0; } .t-color-picker__format--item .input-group__item:first-child:not(:last-child) .t-input { border-top-right-radius: 0; border-bottom-right-radius: 0; } .t-color-picker__format--item .input-group__item:last-child:not(:first-child) .t-input { border-top-left-radius: 0; border-bottom-left-radius: 0; } .t-color-picker__format--item .input-group .t-input-number { width: 100%; padding: 0; max-width: 100%; } .t-color-picker__format-mode-select { width: 72px; display: flex; } .t-color-picker__format-mode-select .t-select, .t-color-picker__format-mode-select .t-input { padding-right: 0; } .t-color-picker__format-mode-select .t-input--prefix > .t-input__suffix { padding-left: 0; } .t-color-picker__format-mode-select .t-select__right-icon { margin-right: var(--td-comp-margin-xs); } .t-color-picker__swatches-wrap { margin-top: var(--td-comp-margin-m); position: relative; } .t-color-picker__swatches-wrap .t-color-picker__swatches + .t-color-picker__swatches { margin-top: var(--td-comp-margin-m); } .t-color-picker__swatches-wrap .t-color-picker__swatches--title { font: var(--td-font-body-small); padding: 0; color: var(--td-text-color-primary); display: flex; align-items: center; justify-content: space-between; } .t-color-picker__swatches-wrap .t-color-picker__swatches--actions { margin-left: auto; display: flex; align-items: center; font-size: 0; } .t-color-picker__swatches-wrap .t-color-picker__swatches--actions .t-color-picker__icon { width: var(--td-comp-size-xxxs); height: var(--td-comp-size-xxxs); margin-left: var(--td-comp-margin-s); } .t-color-picker__swatches-wrap .t-color-picker__swatches--items { width: 100%; list-style: none; display: grid; grid-template-columns: repeat(10, var(--td-comp-size-xxxs)); gap: calc(calc(256px - calc(calc(var(--td-pop-padding-xl) * 2) + calc(var(--td-comp-size-xxxs) * 10))) / 9) calc(calc(256px - calc(calc(var(--td-pop-padding-xl) * 2) + calc(var(--td-comp-size-xxxs) * 10))) / 9); max-height: calc(4 * calc(var(--td-comp-size-xxxs) + calc(calc(256px - calc(calc(var(--td-pop-padding-xl) * 2) + calc(var(--td-comp-size-xxxs) * 10))) / 9))); overflow-x: hidden; overflow-y: auto; padding: calc(var(--td-pop-padding-xl) - 8px); position: relative; left: calc(0px - calc(var(--td-pop-padding-xl) - 8px)); box-sizing: content-box; } .t-color-picker__swatches-wrap .t-color-picker__swatches--item { display: flex; width: var(--td-comp-size-xxxs); height: var(--td-comp-size-xxxs); border-radius: var(--td-radius-default); padding: 0; overflow: hidden; cursor: pointer; align-items: center; justify-content: center; position: relative; transform-origin: center; transition: all 0.2s cubic-bezier(0.38, 0, 0.24, 1); box-sizing: border-box; } .t-color-picker__swatches-wrap .t-color-picker__swatches--item:hover { transform: scale(1.25); transform-origin: center; } .t-color-picker__swatches-wrap .t-color-picker__swatches--item__color { width: 100%; height: 100%; position: relative; overflow: hidden; border: 1px solid var(--td-component-border); border-radius: var(--td-radius-default); flex-shrink: 0; } .t-color-picker__swatches-wrap .t-color-picker__swatches--item__inner { width: 100%; height: 100%; display: block; } .t-color-picker__swatches-wrap .t-color-picker__swatches--item:not(.t-is-active):hover { padding: 0; } .t-color-picker__swatches-wrap .t-color-picker__swatches--item.t-is-active .t-color-picker__swatches--item__color, .t-color-picker__swatches-wrap .t-color-picker__swatches--item.t-is-active .t-color-picker__swatches--color { border-color: var(--td-text-color-brand); } .t-color-picker__swatches-wrap .t-color-picker__swatches--color { width: 100%; height: 100%; position: relative; overflow: hidden; border-radius: var(--td-radius-default); box-sizing: border-box; } .t-color-picker__swatches-wrap .t-color-picker__swatches--inner { width: 100%; height: 100%; display: block; border-radius: var(--td-radius-default); box-shadow: var(--td-shadow-inset-top), var(--td-shadow-inset-right), var(--td-shadow-inset-bottom), var(--td-shadow-inset-left); } .t-color-picker__trigger--default { display: inline-flex; align-items: center; } .t-color-picker__trigger--default > .t-input { width: fit-content; } .t-color-picker__trigger--default .t-input { padding: 0 var(--td-comp-paddingLR-s) 0 var(--td-comp-paddingLR-xs); } .t-color-picker__trigger--default__color { width: 100%; height: 100%; box-sizing: border-box; display: flex; align-items: center; } .t-color-picker__trigger--default__color .color-inner { border: 1px solid var(--td-scrollbar-color); display: block; width: calc(var(--td-comp-size-xs) - 2px); height: calc(var(--td-comp-size-xs) - 2px); color: transparent; position: relative; border-radius: var(--td-radius-small); } .t-color-picker__trigger--default__color .color-inner.t-size-s { width: calc(var(--td-comp-size-xxs) - 2px); height: calc(var(--td-comp-size-xxs) - 2px); } .t-color-picker__trigger--default__color .color-inner.t-size-l { width: calc(var(--td-comp-size-s) - 2px); height: calc(var(--td-comp-size-s) - 2px); } .t-color-picker__gradient-slider { padding: 0 calc(calc(var(--td-comp-size-xxxs) + var(--td-size-1)) / 2); border-radius: calc(8px / 2); } .t-color-picker__gradient-slider .t-color-picker--bg-alpha { background: var(--td-text-color-anti); /* stylelint-disable-next-line color-no-hex */ background-image: linear-gradient(45deg, #c5c5c5 25%, transparent 0, transparent 75%, #c5c5c5 0, #c5c5c5), linear-gradient(45deg, #c5c5c5 25%, transparent 0, transparent 75%, #c5c5c5 0, #c5c5c5); background-size: 6px 6px; background-position: 0 0, 3px 3px; } .t-color-picker__panel.t-is-disabled .t-color-picker__saturation, .t-color-picker__panel.t-is-disabled .t-color-picker__slider, .t-color-picker__panel.t-is-disabled .t-color-picker__swatches--item { opacity: 0.8; cursor: not-allowed; } .t-color-picker__panel.t-is-disabled .t-color-picker__gradient-slider .gradient-thumbs, .t-color-picker__panel.t-is-disabled .t-color-picker__gradient-slider .gradient-thumbs__item { cursor: not-allowed; } .t-color-picker__panel.t-is-disabled .t-color-picker__swatches--item:hover { padding: 0; } .t-color-picker__select-options > .t-popup__content { box-shadow: var(--td-shadow-1), var(--td-shadow-inset-top), var(--td-shadow-inset-right), var(--td-shadow-inset-bottom), var(--td-shadow-inset-left); } .t-image__wrapper { position: relative; background: var(--td-bg-color-secondarycontainer); z-index: 1; } .t-image__wrapper--shape-square { border-radius: 0; } .t-image__wrapper--shape-round { border-radius: var(--td-radius-medium); } .t-image__wrapper--shape-circle { border-radius: 50%; } .t-image__wrapper--gallery { border-radius: var(--td-radius-medium); } .t-image__wrapper--gallery .t-image { position: relative; z-index: 5; } .t-image__wrapper--need-hover { cursor: pointer; } .t-image { width: 100%; height: 100%; border-radius: inherit; position: relative; z-index: inherit; } .t-image--fit-fill { object-fit: fill; } .t-image--fit-contain { object-fit: contain; } .t-image--fit-cover { object-fit: cover; } .t-image--fit-scale-down { object-fit: scale-down; } .t-image--fit-none { object-fit: none; } .t-image--position-center { object-position: center; } .t-image--position-bottom { object-position: bottom; } .t-image--position-top { object-position: top; } .t-image--position-left { object-position: left; } .t-image--position-right { object-position: right; } .t-image__gallery-shadow { position: absolute; left: 0; right: -24px; top: 24px; bottom: 24px; background: rgba(238, 238, 238, 0.26); border-radius: var(--td-radius-medium); z-index: calc(5 - 2); } .t-image__gallery-shadow::before, .t-image__gallery-shadow::after { content: ""; position: absolute; left: 0; border-radius: var(--td-radius-medium); } .t-image__gallery-shadow::after { top: -16px; right: 16px; bottom: -16px; background: rgba(238, 238, 238, 0.8); z-index: calc(5 - 1); } .t-image__gallery-shadow::before { top: -8px; right: 8px; bottom: -8px; background: rgba(238, 238, 238, 0.5); z-index: calc(5 - 3); } .t-image__placeholder { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; z-index: 0; } .t-image__overlay-content { position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: calc(5 + 1); opacity: 1; visibility: visible; transition: visibility 0s, opacity 0.2s linear; } .t-image__overlay-content--hidden { visibility: hidden; opacity: 0; } .t-image__loading, .t-image__error { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; z-index: calc(0 + 1); } .t-image__loading { color: var(--td-text-color-secondary); } .t-image__error { color: var(--td-text-color-disabled); } .t-avatar { font: var(--td-font-body-medium); color: var(--td-text-color-primary); box-sizing: border-box; margin: 0; padding: 0; list-style: none; position: relative; display: inline-flex; background: var(--td-brand-color-focus); color: var(--td-text-color-brand); overflow: hidden; white-space: nowrap; vertical-align: middle; justify-content: center; align-items: center; box-sizing: content-box; width: var(--td-comp-size-m); height: var(--td-comp-size-m); font-size: var(--td-font-size-body-large); line-height: var(--td-comp-size-m); } .t-avatar.t-avatar__icon { font-size: var(--td-comp-size-xxs); } .t-avatar--circle { border-radius: var(--td-radius-circle); } .t-avatar--round { border-radius: var(--td-radius-default); } .t-avatar.t-size-s { width: var(--td-comp-size-xs); height: var(--td-comp-size-xs); font-size: var(--td-font-size-body-medium); line-height: var(--td-comp-size-xs); } .t-avatar.t-size-s.t-avatar__icon { font-size: var(--td-comp-size-xxxs); } .t-avatar.t-size-l { width: var(--td-comp-size-xl); height: var(--td-comp-size-xl); font-size: var(--td-font-size-title-large); line-height: var(--td-comp-size-xl); } .t-avatar.t-size-l.t-avatar__icon { font-size: var(--td-comp-size-xs); } .t-avatar > .t-image__wrapper { max-width: 100%; max-height: 100%; } .t-avatar-group { display: inline-flex; align-items: center; } .t-avatar-group .t-avatar { border: 2px solid var(--td-bg-color-container); } .t-avatar-group.t-avatar--offset-right .t-avatar:not(:last-child) { margin-right: calc(0px - var(--td-size-3)); } .t-avatar-group.t-avatar--offset-right .t-avatar:not(:last-child).t-size-s { margin-right: calc(0px - var(--td-size-2)); } .t-avatar-group.t-avatar--offset-right .t-avatar:not(:last-child).t-size-l { margin-right: calc(0px - var(--td-size-4)); } .t-avatar-group.t-avatar--offset-left .t-avatar:nth-child(1) { z-index: 49; } .t-avatar-group.t-avatar--offset-left .t-avatar:nth-child(2) { z-index: 48; } .t-avatar-group.t-avatar--offset-left .t-avatar:nth-child(3) { z-index: 47; } .t-avatar-group.t-avatar--offset-left .t-avatar:nth-child(4) { z-index: 46; } .t-avatar-group.t-avatar--offset-left .t-avatar:nth-child(5) { z-index: 45; } .t-avatar-group.t-avatar--offset-left .t-avatar:nth-child(6) { z-index: 44; } .t-avatar-group.t-avatar--offset-left .t-avatar:nth-child(7) { z-index: 43; } .t-avatar-group.t-avatar--offset-left .t-avatar:nth-child(8) { z-index: 42; } .t-avatar-group.t-avatar--offset-left .t-avatar:nth-child(9) { z-index: 41; } .t-avatar-group.t-avatar--offset-left .t-avatar:nth-child(10) { z-index: 40; } .t-avatar-group.t-avatar--offset-left .t-avatar:nth-child(11) { z-index: 39; } .t-avatar-group.t-avatar--offset-left .t-avatar:nth-child(12) { z-index: 38; } .t-avatar-group.t-avatar--offset-left .t-avatar:nth-child(13) { z-index: 37; } .t-avatar-group.t-avatar--offset-left .t-avatar:nth-child(14) { z-index: 36; } .t-avatar-group.t-avatar--offset-left .t-avatar:nth-child(15) { z-index: 35; } .t-avatar-group.t-avatar--offset-left .t-avatar:nth-child(16) { z-index: 34; } .t-avatar-group.t-avatar--offset-left .t-avatar:nth-child(17) { z-index: 33; } .t-avatar-group.t-avatar--offset-left .t-avatar:nth-child(18) { z-index: 32; } .t-avatar-group.t-avatar--offset-left .t-avatar:nth-child(19) { z-index: 31; } .t-avatar-group.t-avatar--offset-left .t-avatar:nth-child(20) { z-index: 30; } .t-avatar-group.t-avatar--offset-left .t-avatar:nth-child(21) { z-index: 29; } .t-avatar-group.t-avatar--offset-left .t-avatar:nth-child(22) { z-index: 28; } .t-avatar-group.t-avatar--offset-left .t-avatar:nth-child(23) { z-index: 27; } .t-avatar-group.t-avatar--offset-left .t-avatar:nth-child(24) { z-index: 26; } .t-avatar-group.t-avatar--offset-left .t-avatar:nth-child(25) { z-index: 25; } .t-avatar-group.t-avatar--offset-left .t-avatar:nth-child(26) { z-index: 24; } .t-avatar-group.t-avatar--offset-left .t-avatar:nth-child(27) { z-index: 23; } .t-avatar-group.t-avatar--offset-left .t-avatar:nth-child(28) { z-index: 22; } .t-avatar-group.t-avatar--offset-left .t-avatar:nth-child(29) { z-index: 21; } .t-avatar-group.t-avatar--offset-left .t-avatar:nth-child(30) { z-index: 20; } .t-avatar-group.t-avatar--offset-left .t-avatar:nth-child(31) { z-index: 19; } .t-avatar-group.t-avatar--offset-left .t-avatar:nth-child(32) { z-index: 18; } .t-avatar-group.t-avatar--offset-left .t-avatar:nth-child(33) { z-index: 17; } .t-avatar-group.t-avatar--offset-left .t-avatar:nth-child(34) { z-index: 16; } .t-avatar-group.t-avatar--offset-left .t-avatar:nth-child(35) { z-index: 15; } .t-avatar-group.t-avatar--offset-left .t-avatar:nth-child(36) { z-index: 14; } .t-avatar-group.t-avatar--offset-left .t-avatar:nth-child(37) { z-index: 13; } .t-avatar-group.t-avatar--offset-left .t-avatar:nth-child(38) { z-index: 12; } .t-avatar-group.t-avatar--offset-left .t-avatar:nth-child(39) { z-index: 11; } .t-avatar-group.t-avatar--offset-left .t-avatar:nth-child(40) { z-index: 10; } .t-avatar-group.t-avatar--offset-left .t-avatar:nth-child(41) { z-index: 9; } .t-avatar-group.t-avatar--offset-left .t-avatar:nth-child(42) { z-index: 8; } .t-avatar-group.t-avatar--offset-left .t-avatar:nth-child(43) { z-index: 7; } .t-avatar-group.t-avatar--offset-left .t-avatar:nth-child(44) { z-index: 6; } .t-avatar-group.t-avatar--offset-left .t-avatar:nth-child(45) { z-index: 5; } .t-avatar-group.t-avatar--offset-left .t-avatar:nth-child(46) { z-index: 4; } .t-avatar-group.t-avatar--offset-left .t-avatar:nth-child(47) { z-index: 3; } .t-avatar-group.t-avatar--offset-left .t-avatar:nth-child(48) { z-index: 2; } .t-avatar-group.t-avatar--offset-left .t-avatar:nth-child(49) { z-index: 1; } .t-avatar-group.t-avatar--offset-left .t-avatar:nth-child(50) { z-index: 0; } .t-avatar-group.t-avatar--offset-left .t-avatar:not(:first-child) { margin-left: calc(0px - var(--td-size-3)); } .t-avatar-group.t-avatar--offset-left .t-avatar:not(:first-child).t-size-s { margin-left: calc(0px - var(--td-size-2)); } .t-avatar-group.t-avatar--offset-left .t-avatar:not(:first-child).t-size-l { margin-left: calc(0px - var(--td-size-4)); } .t-badge { font: var(--td-font-body-medium); color: var(--td-text-color-primary); box-sizing: border-box; margin: 0; padding: 0; list-style: none; position: relative; display: inline-block; } .t-badge--dot, .t-badge--circle, .t-badge--round { position: absolute; top: 0; right: 0; color: var(--td-text-color-anti); text-align: center; font: var(--td-font-body-small); transform: translate(50%, -50%); transform-origin: 100% 0; box-sizing: content-box; } .t-badge--static { position: static; display: inline-block; transform: none; } .t-badge--dot { right: 1px; margin-top: 1px; width: 6px; height: 6px; border-radius: var(--td-radius-circle); background-color: var(--td-error-color); } .t-badge--circle, .t-badge--round { padding-right: calc((var(--td-comp-size-xxs) - 8px) / 2); padding-left: calc((var(--td-comp-size-xxs) - 8px) / 2); min-width: 8px; height: var(--td-comp-size-xxs); background-color: var(--td-error-color); line-height: var(--td-comp-size-xxs); } .t-badge--circle.t-size-s, .t-badge--round.t-size-s { padding-right: calc((var(--td-comp-size-xxxs) - 8px) / 2); padding-left: calc((var(--td-comp-size-xxxs) - 8px) / 2); min-width: 8px; height: var(--td-comp-size-xxxs); line-height: var(--td-comp-size-xxxs); } .t-badge--circle { border-radius: calc(var(--td-comp-size-xxs) / 2); } .t-badge--round { border-radius: var(--td-radius-default); } .t-card { font: var(--td-font-body-medium); margin: 0; padding: 0; list-style: none; position: relative; box-sizing: border-box; border-radius: var(--td-radius-medium); background-color: var(--td-bg-color-container); color: var(--td-text-color-primary); transition: box-shadow 0.2s cubic-bezier(0.38, 0, 0.24, 1); } .t-card--bordered { border: 1px solid var(--td-component-border); } .t-card--shadow-hover:hover, .t-card--shadow { box-shadow: var(--td-shadow-1); } .t-card__cover { display: flow-root; } .t-card__cover img { display: flow-root; width: 100%; max-height: 100%; border-radius: var(--td-radius-default) var(--td-radius-default) 0 0; } .t-card__body { display: flow-root; padding: var(--td-comp-paddingTB-l) var(--td-comp-paddingLR-xl); } .t-card__header { display: flex; justify-content: space-between; align-items: center; padding: var(--td-comp-paddingTB-l) var(--td-comp-paddingLR-xl); position: relative; } .t-card__header-wrapper { flex: 1; display: flex; align-items: center; } .t-card__header + .t-card__cover img { border-radius: 0; } .t-card__footer { display: flex; align-items: center; justify-content: space-between; padding: var(--td-comp-paddingTB-l) var(--td-comp-paddingLR-xl); } .t-card__footer-wrapper { flex: 1; } .t-size-s .t-card__body { padding: var(--td-comp-paddingTB-s) var(--td-comp-paddingLR-l); } .t-size-s .t-card__header { padding: var(--td-comp-paddingTB-s) var(--td-comp-paddingLR-l); } .t-size-s .t-card__footer { padding: var(--td-comp-paddingTB-s) var(--td-comp-paddingLR-l); } .t-card__avatar { margin-right: var(--td-comp-margin-l); width: var(--td-comp-size-xxxl); height: var(--td-comp-size-xxxl); } .t-card__title { font: var(--td-font-title-medium); color: var(--td-text-color-primary); margin-right: var(--td-comp-margin-l); word-break: break-all; } .t-card__subtitle { font: var(--td-font-body-medium); color: var(--td-text-color-secondary); word-break: break-all; } .t-card__description { font: var(--td-font-body-medium); color: var(--td-text-color-secondary); margin-top: var(--td-comp-margin-xs); word-break: break-all; } .t-card__actions { float: right; color: var(--td-brand-color); } .t-card__title--bordered { border-bottom: 1px solid var(--td-component-border); } @keyframes tDialogZoomIn { 0% { opacity: 0; transform: scale(0.01); } 100% { opacity: 1; } } @keyframes tDialogZoomOut { from { opacity: 1; } to { opacity: 0; transform: scale(0.01); } } @keyframes tDialogMaskIn { from { opacity: 0; } to { opacity: 1; } } @keyframes tDialogMaskOut { from { opacity: 1; } to { opacity: 0; } } .t-dialog-zoom .animation-enter { animation-duration: 0.2s; animation-fill-mode: both; animation-timing-function: cubic-bezier(0, 0, 0.15, 1); animation-play-state: paused; } .t-dialog-zoom .animation-exit { animation-duration: 0.2s; animation-fill-mode: both; animation-timing-function: cubic-bezier(0.38, 0, 0.24, 1); animation-play-state: paused; } .t-dialog-zoom .animation-active { animation-play-state: running; animation-fill-mode: both; } .t-dialog-zoom-enter, .t-dialog-zoom-enter-from, .t-dialog-zoom-appear { animation-duration: 0.2s; animation-fill-mode: both; animation-timing-function: cubic-bezier(0, 0, 0.15, 1); animation-play-state: paused; } .t-dialog-zoom-exit { animation-duration: 0.2s; animation-fill-mode: both; animation-timing-function: cubic-bezier(0.38, 0, 0.24, 1); animation-play-state: paused; } .t-dialog-zoom-enter-active, .t-dialog-zoom-appear-active { animation-name: tDialogZoomIn; animation-play-state: running; animation-fill-mode: both; } .t-dialog-zoom-exit-active { animation-name: tDialogZoomOut; animation-play-state: running; animation-fill-mode: both; } .t-dialog-zoom__vue-enter-active .t-dialog { animation-name: tDialogZoomIn; animation-duration: 0.2s; animation-fill-mode: both; animation-timing-function: cubic-bezier(0, 0, 0.15, 1); animation-play-state: paused; } .t-dialog-zoom__vue-enter-active .t-dialog__mask { animation-name: tDialogMaskIn; animation-duration: 0.2s; animation-timing-function: linear; animation-play-state: running; animation-fill-mode: both; } .t-dialog-zoom__vue-leave-active .t-dialog { animation-name: tDialogZoomOut; animation-duration: 0.2s; animation-fill-mode: both; animation-timing-function: cubic-bezier(0.38, 0, 0.24, 1); animation-play-state: paused; } .t-dialog-zoom__vue-leave-active .t-dialog__mask { animation-name: tDialogMaskOut; animation-duration: 0.2s; animation-timing-function: linear; animation-play-state: running; animation-fill-mode: both; } .t-dialog-zoom__vue-enter-to .t-dialog { animation-play-state: running; animation-fill-mode: both; } .t-dialog-zoom__vue-leave-to .t-dialog { animation-play-state: running; animation-fill-mode: both; } .t-dialog-fade-enter, .t-dialog-fade-appear { opacity: 0; animation-duration: 0.2s; animation-fill-mode: both; animation-timing-function: cubic-bezier(0, 0, 0.15, 1); animation-play-state: paused; } .t-dialog-fade-exit { animation-duration: 0.2s; animation-fill-mode: both; animation-timing-function: cubic-bezier(0, 0, 0.15, 1); animation-play-state: paused; } .t-dialog-fade-enter.t-dialog-fade-enter-active, .t-dialog-fade-appear.t-dialog-fade-appear-active { animation-name: tDialogFadeIn; animation-play-state: running; } .t-dialog-fade-exit.t-dialog-fade-exit-active { animation-name: tDialogFadeOut; animation-play-state: running; } @keyframes tDialogFadeIn { 0% { opacity: 0; } 100% { opacity: 1; } } @keyframes tDialogFadeOut { 0% { opacity: 1; } 100% { opacity: 0; } } .t-dialog { font: var(--td-font-body-medium); color: var(--td-text-color-primary); box-sizing: border-box; margin: 0; padding: 0; list-style: none; width: 480px; background-color: var(--td-bg-color-container); position: relative; border: 1px solid var(--td-border-level-1-color); border-radius: var(--td-radius-large); } .t-dialog .t-icon.t-is-info { color: var(--td-brand-color); } .t-dialog .t-icon.t-is-success { color: var(--td-success-color); } .t-dialog .t-icon.t-is-warning { color: var(--td-warning-color); } .t-dialog .t-icon.t-is-error { color: var(--td-error-color); } .t-dialog--lock { overflow: hidden; } .t-dialog__header { color: var(--td-text-color-primary); font: var(--td-font-title-medium); font-weight: 600; display: flex; align-items: center; word-break: break-word; gap: var(--td-comp-margin-s); box-sizing: border-box; } .t-dialog__header .t-dialog__header-content { display: flex; align-items: flex-start; width: 100%; } .t-dialog__header .t-icon:not(.t-icon-close) { font-size: calc(var(--td-font-size-body-large) + 8px); display: inline-flex; align-items: center; margin-right: var(--td-comp-margin-s); flex-shrink: 0; } .t-dialog__header--fullscreen { background-color: var(--td-bg-color-secondarycontainer); min-height: var(--td-comp-size-xxxl); justify-content: flex-end; display: flex; align-items: center; flex-direction: row; padding: 0 var(--td-comp-paddingLR-xxl); } .t-dialog__header--fullscreen .t-dialog__header-content { box-sizing: border-box; display: flex; justify-content: center; align-items: center; } .t-dialog__body { color: var(--td-text-color-secondary); font: var(--td-font-body-medium); overflow: auto; padding: var(--td-comp-paddingTB-l) 0; word-break: break-word; } @-moz-document url-prefix() { .t-dialog__body { scrollbar-color: var(--td-scrollbar-color) transparent; scrollbar-width: thin; } } .t-dialog__body::-webkit-scrollbar { width: 6px; height: 6px; } .t-dialog__body::-webkit-scrollbar-thumb { border: 0px solid transparent; background-clip: content-box; background-color: var(--td-scrollbar-color); border-radius: 11px; } .t-dialog__body::-webkit-scrollbar-thumb:vertical:hover, .t-dialog__body::-webkit-scrollbar-thumb:horizontal:hover { background-color: var(--td-scrollbar-hover-color); } .t-dialog__body__icon, .t-dialog__body--icon { padding: var(--td-comp-paddingTB-l) 0; } .t-dialog__body--fullscreen { box-sizing: border-box; padding: var(--td-comp-paddingTB-xl) var(--td-comp-paddingLR-xxl); height: calc(100% - var(--td-comp-size-xxxl) - var(--td-comp-size-xxxxl)); overflow: auto; } @-moz-document url-prefix() { .t-dialog__body--fullscreen { scrollbar-color: var(--td-scrollbar-color) transparent; scrollbar-width: thin; } } .t-dialog__body--fullscreen::-webkit-scrollbar { width: 6px; height: 6px; } .t-dialog__body--fullscreen::-webkit-scrollbar-thumb { border: 0px solid transparent; background-clip: content-box; background-color: var(--td-scrollbar-color); border-radius: 11px; } .t-dialog__body--fullscreen::-webkit-scrollbar-thumb:vertical:hover, .t-dialog__body--fullscreen::-webkit-scrollbar-thumb:horizontal:hover { background-color: var(--td-scrollbar-hover-color); } .t-dialog__body--fullscreen--without-footer { box-sizing: border-box; padding: var(--td-comp-paddingTB-xl) var(--td-comp-paddingLR-xxl); height: calc(100% - var(--td-comp-size-xxxl)); overflow: auto; } .t-dialog__footer { width: 100%; text-align: right; padding: var(--td-comp-paddingTB-l) 0 0; } .t-dialog__footer .t-button + .t-button { margin-left: var(--td-comp-margin-s); } .t-dialog__footer--fullscreen { min-height: var(--td-comp-size-xxxxl); padding: 0 var(--td-comp-paddingLR-xxl) var(--td-comp-paddingTB-xxl); box-sizing: border-box; } .t-dialog--default { padding: var(--td-comp-paddingTB-xxl) var(--td-comp-paddingLR-xxl); } .t-dialog__close { font-size: calc(var(--td-font-size-body-large) + 4px); color: var(--td-text-color-secondary); display: flex; width: calc(var(--td-font-size-body-large) + 4px); height: calc(var(--td-font-size-body-large) + 4px); align-items: center; border-radius: var(--td-radius-default); transition: all 0.2s linear; padding: var(--td-comp-paddingTB-xxs) var(--td-comp-paddingLR-xxs); } .t-dialog__close:hover { cursor: pointer; background: var(--td-bg-color-container-hover); } .t-dialog__close:active { background: var(--td-bg-color-container-active); } .t-dialog__close--fullscreen { display: flex; background: transparent; } .t-dialog__close--fullscreen:hover { cursor: pointer; background: var(--td-bg-color-secondarycontainer-hover); } .t-dialog__close--fullscreen:active { background: var(--td-bg-color-secondarycontainer-active); } .t-dialog.t-dialog--draggable:hover { cursor: move; } .t-dialog.t-dialog--draggable .t-dialog__header:hover, .t-dialog.t-dialog--draggable .t-dialog__body:hover, .t-dialog.t-dialog--draggable .t-dialog__footer:hover { cursor: auto; } .t-dialog__fullscreen { width: 100%; border-radius: 0; } .t-dialog__ctx { pointer-events: auto; outline: none; top: 0; left: 0; width: 100%; height: 100%; } .t-dialog__ctx.t-dialog__ctx--modeless { pointer-events: none; } .t-dialog__ctx.t-dialog__ctx--fixed { position: fixed; z-index: 2500; } .t-dialog__ctx.t-dialog__ctx--absolute { position: absolute; } .t-dialog__ctx.t-dialog__ctx--absolute .t-dialog__mask { position: absolute; } .t-dialog__ctx.t-dialog__ctx--absolute .t-dialog__wrap { position: absolute; } .t-dialog__ctx.t-is-visible { visibility: visible; } .t-dialog__ctx.t-is-hidden { visibility: hidden; } .t-dialog__ctx.t-is-display { display: block; } .t-dialog__ctx.t-not-display { display: none; } .t-dialog__ctx .t-dialog__mask { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; background: var(--td-mask-active); pointer-events: auto; } .t-dialog__ctx .t-dialog__wrap { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; overflow: auto; } @-moz-document url-prefix() { .t-dialog__ctx .t-dialog__wrap { scrollbar-color: var(--td-scrollbar-color) transparent; scrollbar-width: thin; } } .t-dialog__ctx .t-dialog__wrap::-webkit-scrollbar { width: 8px; height: 8px; } .t-dialog__ctx .t-dialog__wrap::-webkit-scrollbar-thumb { border: 2px solid transparent; background-clip: content-box; background-color: var(--td-scrollbar-color); border-radius: 15px; } .t-dialog__ctx .t-dialog__wrap::-webkit-scrollbar-thumb:vertical:hover, .t-dialog__ctx .t-dialog__wrap::-webkit-scrollbar-thumb:horizontal:hover { background-color: var(--td-scrollbar-hover-color); } .t-dialog__ctx .t-dialog__position { display: flex; justify-content: center; min-height: 100%; width: 100%; position: relative; padding: 48px 0; box-sizing: border-box; } .t-dialog__ctx .t-dialog__position.t-dialog--top { align-items: flex-start; padding-top: 20vh; } .t-dialog__ctx .t-dialog__position.t-dialog--center { align-items: center; } .t-dialog__ctx .t-dialog__position_fullscreen { display: flex; justify-content: center; min-height: 100%; width: 100%; position: relative; box-sizing: border-box; } .t-dialog__ctx .t-is-hidden { background: none; } .t-dialog__ctx .t-dialog { pointer-events: auto; z-index: 2500; } .t-dialog__ctx.t-dialog__ctx--modeless .t-dialog { box-shadow: var(--td-shadow-3); } .t-image-viewer__img-error { height: 440px; width: 440px; background-color: var(--td-bg-color-component-disabled); border-radius: 4px; color: #000000; cursor: inherit; } .t-image-viewer__img-error .t-image-viewer__img-error-content { height: 100%; width: 100%; display: flex; flex-wrap: wrap; flex-direction: column; justify-content: center; align-items: center; align-content: center; font: var(--td-font-body-medium); } .t-image-viewer__img-error .t-image-viewer__img-error-content .t-image-viewer__img-error-text { margin-top: var(--td-comp-margin-s); } @keyframes modal-image-show { 0% { transform: scale(0); } to { transform: scale(1); } } @keyframes modal-image-hide { 0% { transform: scale(1); } to { transform: scale(0); } } @keyframes modal-mask-show { 0% { opacity: 0; } to { opacity: 1; } } @keyframes modal-mask-hide { 0% { opacity: 1; } to { opacity: 0; } } .t-image-viewer-preview-image { position: fixed; top: 0; bottom: 0; left: 0; right: 0; z-index: 3000; overflow: hidden; animation: 0.2s cubic-bezier(0.82, 0, 1, 0.9) modal-mask-show; } .t-image-viewer-preview-image.t-is-hide { animation: 0.2s cubic-bezier(0, 0, 0.15, 1) modal-mask-hide forwards; } .t-image-viewer-preview-image.t-is-hide .t-image-viewer__modal-pic .t-image-viewer__modal-box { animation: 0.2s cubic-bezier(0, 0, 0.15, 1) modal-image-hide forwards; } .t-image-viewer-preview-image .t-image-viewer__modal-index { text-align: center; font-size: var(--td-font-size-body-medium); color: var(--td-text-color-anti); position: absolute; top: 92px; left: 50%; transform: translateX(-50%); background: rgba(0, 0, 0, 0.4); border-radius: var(--td-radius-default); padding: var(--td-comp-paddingTB-xs) var(--td-comp-paddingLR-s); z-index: 1; } .t-image-viewer-preview-image .t-image-viewer__modal-mask { position: fixed; top: 0; bottom: 0; left: 0; right: 0; background-color: var(--td-mask-active); height: 100%; width: 100%; transition: all 0.2s ease; opacity: 1; } .t-image-viewer-preview-image .t-image-viewer__modal-pic { position: absolute; transform: translate(-50%, -50%); top: 50%; left: 50%; } .t-image-viewer-preview-image .t-image-viewer__modal-pic .t-image-viewer__modal-box { width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; animation: 0.2s cubic-bezier(0.38, 0, 0.24, 1) modal-image-show; } .t-image-viewer-preview-image .t-image-viewer__modal-pic .t-image-viewer__modal-box .t-image-viewer__modal-image { display: block; max-width: min(90vw, 1000px); max-height: min(90vh, 800px); transition: all 0.2s cubic-bezier(0.38, 0, 0.24, 1); transform: rotate(0deg); object-fit: contain; } .t-image-viewer-preview-image .t-image-viewer__modal-header { width: 100%; position: absolute; top: 0; z-index: 1; height: auto; display: flex; align-items: center; justify-content: center; background-color: var(--td-bg-color-container); padding: 0 0 12px 0; } .t-image-viewer-preview-image .t-image-viewer__modal-header.t-is-show { padding: 12px 0; } @keyframes preview-icon-range { 0% { transform: translate(-50%, 50%) rotateZ(0); } to { transform: translate(-50%, 50%) rotateZ(-180deg); } } @keyframes preview-icon-unrange { 0% { transform: translate(-50%, 50%) rotateZ(-180deg); } to { transform: translate(-50%, 50%) rotateZ(0); } } .t-image-viewer-preview-image .t-image-viewer__modal-header .t-image-viewer__header-pre-bt { width: var(--td-comp-size-xxs); height: var(--td-comp-size-xxs); display: inline-flex; justify-content: center; align-items: center; position: absolute; left: 50%; bottom: 0; transform: translate(-50%, 50%); background-color: var(--td-bg-color-container); color: var(--td-text-color-primary); border-radius: 50%; box-shadow: var(--td-shadow-inset-top), var(--td-shadow-inset-right), var(--td-shadow-inset-bottom), var(--td-shadow-inset-left); animation: 0.2s cubic-bezier(0.38, 0, 0.24, 1) 0s 1 normal forwards running preview-icon-unrange; } .t-image-viewer-preview-image .t-image-viewer__modal-header .t-image-viewer__header-pre-bt .t-icon { font-size: var(--td-font-size-body-large); } .t-image-viewer-preview-image .t-image-viewer__modal-header .t-image-viewer__header-pre-bt:hover { background-color: inherit; } @keyframes preview-image-show { 0% { height: 0; } to { height: 40px; } } @keyframes preview-image-hide { 0% { height: 40px; } to { height: 0; } } .t-image-viewer-preview-image .t-image-viewer__modal-header.t-is-show .t-image-viewer__header-prev { animation: 0.2s cubic-bezier(0.38, 0, 0.24, 1) 0s 1 normal forwards running preview-image-show; } .t-image-viewer-preview-image .t-image-viewer__modal-header.t-is-show .t-image-viewer__header-pre-bt { animation: 0.2s cubic-bezier(0.38, 0, 0.24, 1) 0s 1 normal forwards running preview-icon-range; } .t-image-viewer-preview-image .t-image-viewer__modal-header .t-image-viewer__header-prev { width: calc(40px / 9 * 16 * 7 + 4px * 6); animation: 0.2s cubic-bezier(0.38, 0, 0.24, 1) 0s 1 normal forwards running preview-image-hide; display: flex; position: relative; overflow: hidden; } .t-image-viewer-preview-image .t-image-viewer__modal-header .t-image-viewer__header-prev::before, .t-image-viewer-preview-image .t-image-viewer__modal-header .t-image-viewer__header-prev::after { content: ""; position: absolute; height: 100%; z-index: 1; width: calc(40px / 9 * 16); pointer-events: none; } .t-image-viewer-preview-image .t-image-viewer__modal-header .t-image-viewer__header-prev::before { left: 0; background-image: linear-gradient(to right, var(--td-bg-color-container), rgba(255, 255, 255, 0)); } .t-image-viewer-preview-image .t-image-viewer__modal-header .t-image-viewer__header-prev::after { right: 0; background-image: linear-gradient(to right, rgba(255, 255, 255, 0), var(--td-bg-color-container)); } .t-image-viewer-preview-image .t-image-viewer__header-trans { height: 100%; transition: transform 0.2s; display: flex; align-items: center; justify-content: center; gap: 4px; margin-left: calc(40px / 9 * 16 * 3 + 4px * 3); } .t-image-viewer-preview-image .t-image-viewer__header-box { box-sizing: border-box; width: calc(40px / 9 * 16); height: 40px; position: relative; transition: 0.2s; overflow: hidden; border-radius: var(--td-radius-default); display: flex; align-items: center; justify-content: center; border: 1px solid transparent; background-color: var(--td-bg-color-secondarycontainer); } .t-image-viewer-preview-image .t-image-viewer__header-box .t-image-viewer__header-img { width: auto; height: 100%; } .t-image-viewer-preview-image .t-image-viewer__header-box:hover, .t-image-viewer-preview-image .t-image-viewer__header-box.t-is-active { border-color: var(--td-brand-color); } .t-image-viewer-preview-image .t-image-viewer__modal-icon { cursor: pointer; color: var(--td-text-color-primary); border-radius: var(--td-radius-default); transition: 0.2s; } .t-image-viewer-preview-image .t-image-viewer__modal-icon.t-image-viewer__modal-close-bt { top: 100px; right: 40px; } .t-image-viewer-preview-image .t-image-viewer__modal-icon.t-image-viewer__modal-next-bt, .t-image-viewer-preview-image .t-image-viewer__modal-icon.t-image-viewer__modal-prev-bt { top: 50%; transform: translateY(-50%); } .t-image-viewer-preview-image .t-image-viewer__modal-icon.t-image-viewer__modal-prev-bt { left: 40px; } .t-image-viewer-preview-image .t-image-viewer__modal-icon.t-image-viewer__modal-next-bt { right: 40px; } .t-image-viewer-preview-image .t-image-viewer__modal-icon.t-image-viewer__modal-close-bt, .t-image-viewer-preview-image .t-image-viewer__modal-icon.t-image-viewer__modal-prev-bt, .t-image-viewer-preview-image .t-image-viewer__modal-icon.t-image-viewer__modal-next-bt { position: fixed; z-index: 10; color: var(--td-text-color-anti); background-color: rgba(0, 0, 0, 0.4); border-radius: 50%; width: var(--td-comp-size-xl); height: var(--td-comp-size-xl); display: flex; justify-content: center; align-items: center; } .t-image-viewer-preview-image .t-image-viewer__modal-icon .t-image-viewer__modal-icon-label { margin-left: 2px; } .t-image-viewer-preview-image .t-image-viewer__modal-icon.t-is-disabled { color: rgba(255, 255, 255, 0.22); } .t-image-viewer-preview-image .t-image-viewer__modal-icon.t-is-disabled:hover { background-color: rgba(0, 0, 0, 0.4); } .t-image-viewer-preview-image .t-image-viewer__modal-icon:hover { background-color: rgba(0, 0, 0, 0.2); } .t-image-viewer__mask { width: 100vh; height: 100vh; left: 0; top: 0; z-index: 99; position: fixed; background-color: transparent; } .t-image-viewer__utils { width: 100%; position: absolute; bottom: 32px; z-index: 1; height: auto; display: flex; align-items: center; justify-content: center; color: var(--td-text-color-primary); user-select: none; } .t-image-viewer__utils .t-image-viewer__utils-content { display: inline-flex; align-items: center; justify-content: center; height: 50px; line-height: 100%; background: var(--td-bg-color-container); border-radius: var(--td-radius-medium); padding: 0 var(--td-comp-paddingLR-xs); } .t-image-viewer__utils .t-image-viewer__utils-content .t-image-viewer__modal-icon { cursor: pointer; margin: 0 var(--td-comp-margin-xs); width: var(--td-comp-size-m); height: var(--td-comp-size-m); display: flex; justify-content: center; align-items: center; border-radius: var(--td-radius-default); transition: 0.2s; } .t-image-viewer__utils .t-image-viewer__utils-content .t-image-viewer__modal-icon:hover { background-color: var(--td-bg-color-container-hover); } .t-image-viewer__utils .t-image-viewer__utils-content .t-image-viewer__utils-scale { width: var(--td-comp-size-xl); text-align: center; cursor: inherit; } .t-image-viewer__utils .t-image-viewer__utils-content .t-image-viewer__utils-scale:hover { background-color: var(--td-bg-color-container); } .t-image-viewer-mini__footer .t-image-viewer__utils { position: inherit; } .t-image-viewer-mini__content { max-width: min(90vw, 1000px); max-height: min(90vh, 800px); } @keyframes modal-image-show { 0% { transform: scale(0); } to { transform: scale(1); } } .t-image-viewer-mini__content .t-image-viewer__modal-pic .t-image-viewer__modal-box { width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; } .t-image-viewer-mini__content .t-image-viewer__modal-pic .t-image-viewer__modal-box .t-image-viewer__modal-image { display: block; max-width: min(80vw, 800px); max-height: min(80vh, 600px); transition: all 0.2s ease; transform: rotate(0deg); object-fit: contain; } .t-image-viewer__dialog.t-dialog__ctx--fixed { z-index: 3000; } .t-image-viewer__dialog .t-dialog__header { padding: 0 var(--td-comp-paddingLR-s); pointer-events: none; } .t-image-viewer__dialog .t-dialog__header .t-image-viewer__dialog-title { pointer-events: all; } .t-image-viewer__dialog .t-dialog__header .t-dialog__close { pointer-events: auto; } .t-image-viewer__dialog .t-dialog { border-color: var(--td-component-border); overflow: hidden; padding: 0; box-shadow: var(--td-shadow-3); } .t-image-viewer__dialog .t-dialog__header { height: 40px; width: 100%; font-size: var(--td-font-size-body-medium); background-color: var(--td-bg-color-secondarycontainer); } .t-image-viewer__dialog .t-dialog__header-content { margin-left: 32px; justify-content: center; } .t-image-viewer__dialog .t-dialog__close:hover { background-color: var(--td-bg-color-secondarycontainer-hover); } .t-list { font: var(--td-font-body-medium); box-sizing: border-box; margin: 0; padding: 0; list-style: none; overflow: auto; color: var(--td-text-color-primary); background: var(--td-bg-color-container); } @-moz-document url-prefix() { .t-list { scrollbar-color: var(--td-scrollbar-color) transparent; scrollbar-width: thin; } } .t-list::-webkit-scrollbar { width: 6px; height: 6px; } .t-list::-webkit-scrollbar-thumb { border: 0px solid transparent; background-clip: content-box; background-color: var(--td-scrollbar-color); border-radius: 11px; } .t-list::-webkit-scrollbar-thumb:vertical:hover, .t-list::-webkit-scrollbar-thumb:horizontal:hover { background-color: var(--td-scrollbar-hover-color); } .t-list__inner { list-style: none; padding: 0; margin: 0; } .t-list-item { font: var(--td-font-body-medium); padding: var(--td-comp-paddingTB-m) var(--td-comp-paddingLR-l); display: flex; justify-content: space-between; align-items: center; position: relative; } .t-list-item::after { content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 1px; } .t-list-item-main { display: flex; align-items: center; justify-content: space-between; width: 100%; flex: 1; } .t-list-item__meta { display: flex; } .t-list-item__meta-avatar { width: var(--td-comp-size-xxxl); height: var(--td-comp-size-xxxl); border-radius: calc(var(--td-comp-size-xxxl) / 2); overflow: hidden; background: var(--td-bg-color-page); margin-right: var(--td-comp-margin-l); flex-shrink: 0; } .t-list-item__meta-avatar img { max-width: 100%; width: 100%; height: 100%; } .t-list-item__meta-title { padding: 0; font: var(--td-font-title-medium); margin: 0 0 var(--td-comp-margin-s); color: var(--td-text-color-primary); } .t-list-item__meta-description { margin-right: var(--td-comp-margin-xxl); color: var(--td-text-color-primary); } .t-list-item__action { list-style: none; padding: 0; flex-shrink: 0; } .t-list-item__action > li { display: inline-block; } .t-list-item__action > li:not(:last-child) { margin-right: var(--td-comp-margin-l); } .t-list-item__action > li .t-icon { color: var(--td-text-color-secondary); font-size: var(--td-comp-size-xxxs); } .t-list-item__action > li .t-icon:hover { color: var(--td-text-color-link); cursor: pointer; } .t-list-item__action > li > a { text-decoration: none; color: var(--td-brand-color); } .t-list--split .t-list-item::after { background: var(--td-border-level-1-color); } .t-list--stripe .t-list-item:nth-child(even) { background: var(--td-bg-color-secondarycontainer); } .t-list--vertical-action .t-list-item { flex-direction: column; } .t-list.t-size-s .t-list-item { padding: var(--td-comp-paddingTB-s) var(--td-comp-paddingLR-m); } .t-list.t-size-l .t-list-item { padding: var(--td-comp-paddingTB-l) var(--td-comp-paddingLR-xl); } .t-list__header, .t-list__footer { background: var(--td-bg-color-container); padding: var(--td-comp-paddingTB-m) var(--td-comp-paddingLR-l); } .t-list__load { background: var(--td-bg-color-container); text-align: center; line-height: var(--td-line-height-body-medium); } .t-list__load > div { display: flex; align-items: center; justify-content: center; } .t-list__load:not(:empty) { padding: var(--td-comp-paddingTB-m) var(--td-comp-paddingLR-l); } .t-list__load .t-loading { font-size: var(--td-comp-size-xxxs); margin-right: var(--td-comp-margin-s); } .t-list__load .t-loading.t-is-load-more { cursor: pointer; } :root, :root[theme-mode="light"] { --skeleton-animation-gradient: rgba(0, 0, 0, 0.04); } :root[theme-mode="dark"] { --skeleton-animation-gradient: rgba(255, 255, 255, 0.06); } .t-skeleton { font: var(--td-font-body-medium); color: var(--td-text-color-primary); box-sizing: border-box; margin: 0; padding: 0; list-style: none; } .t-skeleton__row { display: flex; margin-bottom: var(--td-comp-margin-l); align-items: center; } .t-skeleton__row:only-child, .t-skeleton__row:last-child { margin-bottom: 0; } .t-skeleton__col { display: flex; align-items: center; justify-content: center; background-color: var(--td-bg-color-secondarycontainer); color: var(--td-text-color-disabled); margin-right: var(--td-comp-margin-l); } .t-skeleton__col:first-child:last-child, .t-skeleton__col:last-child { margin-right: 0; } .t-skeleton--type-text { width: 100%; height: var(--td-font-size-body-large); border-radius: var(--td-radius-default); } .t-skeleton--type-rect { width: 120px; height: 88px; border-radius: var(--td-radius-default); } .t-skeleton--type-circle { width: 32px; height: 32px; border-radius: var(--td-radius-circle); flex-shrink: 0; } .t-skeleton--animation-gradient { position: relative; overflow-x: hidden; } .t-skeleton--animation-gradient::after { content: " "; position: absolute; bottom: 0; left: 0; right: 0; top: 0; background: linear-gradient(90deg, rgba(255, 255, 255, 0), var(--skeleton-animation-gradient), rgba(255, 255, 255, 0)); animation: t-skeleton--gradient 1.5s linear 2s infinite; } .t-skeleton--animation-flashed { animation: t-skeleton--flashed 2s linear 2s infinite; } @keyframes t-skeleton--gradient { 0% { transform: translateX(-100%) skewX(-15deg); } 100% { transform: translateX(100%) skewX(-15deg); } } @keyframes t-skeleton--flashed { 0% { opacity: 1; } 50% { background-color: rgba(230, 230, 230, 0.3); opacity: 0.3; } 100% { opacity: 1; } } /** * 颜色 */ /** * 尺寸 */ /** * 字体 */ /** * 动画 */ /** * 间距 */ /** * 位置 */ /** * 边框弧度 */ .t-drawer-fade-enter, .t-drawer-fade-appear { opacity: 0; animation-duration: 0.2s; animation-fill-mode: both; animation-timing-function: linear; animation-play-state: paused; } .t-drawer-fade-exit { animation-duration: 0.2s; animation-fill-mode: both; animation-timing-function: linear; animation-play-state: paused; } .t-drawer-fade-enter.t-drawer-fade-enter-active, .t-drawer-fade-enter.t-drawer-fade-enter-active.t-drawer-fade-enter-to, .t-drawer-fade-appear.t-drawer-fade-appear-active, .t-drawer-fade-appear.t-drawer-fade-appear-active.t-drawer-fade-appear-to { animation-name: tDrawerFadeIn; animation-duration: 0.2s; animation-play-state: running; } .t-drawer-fade-exit.t-drawer-fade-exit-active, .t-drawer-fade-leave-active.t-drawer-fade-leave-to { animation-name: tDrawerFadeOut; animation-duration: 0.2s; animation-play-state: running; } @keyframes tDrawerFadeIn { 0% { opacity: 0; } 100% { opacity: 1; } } @keyframes tDrawerFadeOut { 0% { opacity: 1; } 100% { opacity: 0; } } .t-drawer { font: var(--td-font-body-medium); color: var(--td-text-color-primary); box-sizing: border-box; margin: 0; padding: 0; list-style: none; position: fixed; z-index: 1500; width: 100%; height: 100%; pointer-events: none; overflow: hidden; outline: none; } .t-drawer--lock { overflow: hidden; } .t-drawer--attach { position: absolute; } .t-drawer--left, .t-drawer--right { top: 0; } .t-drawer--left { left: 0; } .t-drawer--right { right: 0; } .t-drawer--top, .t-drawer--bottom { left: 0; } .t-drawer--top { top: 0; } .t-drawer--bottom { bottom: 0; } .t-drawer__mask { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: var(--td-mask-active); transition: opacity 0.2s cubic-bezier(0.38, 0, 0.24, 1); opacity: 0; } .t-drawer__content-wrapper { display: flex; flex-direction: column; background: var(--td-bg-color-container); width: 16px; height: 16px; font-size: var(--td-font-body-medium); color: var(--td-text-color-secondary); box-shadow: var(--td-shadow-2); overflow: hidden; pointer-events: auto; transition: transform 0.28s cubic-bezier(0.38, 0, 0.24, 1), visibility 0.28s cubic-bezier(0.38, 0, 0.24, 1); position: relative; } .t-drawer .t-drawer__content-wrapper { position: absolute; width: 100%; height: 100%; visibility: hidden; } .t-drawer .t-drawer__content-wrapper--left, .t-drawer .t-drawer__content-wrapper--right { top: 0; } .t-drawer .t-drawer__content-wrapper--left { left: 0; transform: translateX(-100%); } .t-drawer .t-drawer__content-wrapper--right { right: 0; transform: translateX(100%); } .t-drawer .t-drawer__content-wrapper--top, .t-drawer .t-drawer__content-wrapper--bottom { left: 0; } .t-drawer .t-drawer__content-wrapper--top { top: 0; transform: translateY(-100%); } .t-drawer .t-drawer__content-wrapper--bottom { bottom: 0; transform: translateY(100%); } .t-drawer__header { display: flex; align-items: center; min-height: var(--td-comp-size-xxxl); padding: 0 var(--td-comp-paddingLR-l); font: var(--td-font-title-medium); color: var(--td-text-color-primary); border-bottom: 1px solid var(--td-border-level-1-color); border-radius: var(--td-radius-small) var(--td-radius-small) 0 0; box-sizing: border-box; } .t-drawer__body { padding: var(--td-comp-paddingTB-l) var(--td-comp-paddingLR-l); overflow: auto; flex: 1; } .t-drawer__footer { width: 100%; padding: var(--td-comp-paddingTB-l) var(--td-comp-paddingLR-l); text-align: left; border-top: 1px solid var(--td-border-level-1-color); background-color: var(--td-bg-color-container); box-sizing: border-box; } .t-drawer__footer .t-button { margin-left: var(--td-comp-margin-s); } .t-drawer__footer .t-button:first-child { margin-left: 0; } .t-drawer__close-btn { position: absolute; display: flex; justify-content: center; align-items: center; width: var(--td-comp-size-xs); height: var(--td-comp-size-xs); top: calc((var(--td-comp-size-xxxl) - var(--td-comp-size-xs)) / 2); right: var(--td-comp-margin-s); color: var(--td-text-color-primary); background-color: var(--td-bg-color-container); border-radius: var(--td-radius-default); cursor: pointer; transition: background-color 0.2s; } .t-drawer__close-btn:hover { background-color: var(--td-bg-color-container-hover); } .t-drawer__close-btn:active { background-color: var(--td-bg-color-container-active); } .t-drawer__close-btn .t-icon { font-size: calc(var(--td-font-size-body-medium) + 2px); vertical-align: unset; } .t-drawer--open { width: 100%; height: 100%; pointer-events: auto; } .t-drawer--open > .t-drawer__content-wrapper { visibility: visible; } .t-drawer--open > .t-drawer__mask { opacity: 1; width: 100%; height: 100%; } .t-drawer--without-mask { pointer-events: none; } [tabindex="-1"]:focus { outline: none !important; /* stylelint-disable-line */ } .t-notification { color: var(--td-text-color-primary); margin: 0; padding: 0; list-style: none; font: var(--td-font-body-medium); outline: 0; border: 0; background-color: var(--td-bg-color-container); display: flex; 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-sizing: border-box; border-radius: var(--td-radius-medium); width: 360px; padding: var(--td-comp-paddingTB-l) var(--td-comp-paddingLR-l); } .t-notification__icon { width: calc(var(--td-font-size-body-large) + 8px); text-align: center; margin-right: var(--td-comp-margin-s); } .t-notification__icon .t-icon { font-size: calc(var(--td-font-size-body-large) + 8px); } .t-notification .t-icon.t-is-info { color: var(--td-brand-color); } .t-notification .t-icon.t-is-success { color: var(--td-success-color); } .t-notification .t-icon.t-is-warning { color: var(--td-warning-color); } .t-notification .t-icon.t-is-error { color: var(--td-error-color-6); } .t-notification__main { flex: 1; } .t-notification__title__wrap { display: flex; justify-content: space-between; } .t-notification__title { font: var(--td-font-title-medium); color: var(--td-text-color-primary); } .t-notification .t-icon-close { cursor: pointer; font-size: var(--td-font-size-body-large); border-radius: var(--td-radius-default); color: var(--td-text-color-secondary); } .t-notification .t-icon-close:hover { background: var(--td-bg-color-container-hover); } .t-notification .t-icon-close:active { background: var(--td-bg-color-container-active); } .t-notification__content { font: var(--td-font-body-medium); color: var(--td-text-color-secondary); margin-top: var(--td-comp-margin-s); max-height: 66px; overflow: hidden; text-overflow: ellipsis; word-break: break-all; /* stylelint-disable-next-line */ display: -webkit-box; -webkit-line-clamp: 3; /* stylelint-disable-next-line */ -webkit-box-orient: vertical; } .t-notification__detail { margin-top: var(--td-comp-margin-l); text-align: right; font: var(--td-font-body-medium); } .t-notification__detail-item { cursor: pointer; } .t-notification__detail-item:hover { color: inherit; background: var(--td-bg-color-container-hover); } .t-notification__detail-item:active { color: inherit; background: var(--td-bg-color-container-active); } .t-notification__detail-item + .t-notification__detail-item { margin-left: var(--td-comp-margin-s); } .t-notification__detail-item.t-is-active { color: var(--td-brand-color); } .t-notification__show--top-left { position: fixed; top: 0; left: 0; } .t-notification__show--top-left > .t-notification { animation-duration: 0.3s; animation-name: slidein-top-left; } @keyframes slidein-top-left { from { opacity: 0; transform: translate3d(-100%, 0, 0); } to { opacity: 1; transform: translate3d(0, 0, 0); } } .t-notification__show--top-right { position: fixed; top: 0; right: 0; } .t-notification__show--top-right > .t-notification { animation-duration: 0.3s; animation-name: slidein-top-right; } @keyframes slidein-top-right { from { opacity: 0; transform: translate3d(100%, 0, 0); } to { opacity: 1; transform: translate3d(0, 0, 0); } } .t-notification__show--bottom-left { position: fixed; bottom: 0; left: 0; display: flex; flex-direction: column-reverse; } .t-notification__show--bottom-left > .t-notification { animation-duration: 0.3s; animation-name: slidein-bottom-left; } @keyframes slidein-bottom-left { from { opacity: 0; transform: translate3d(-100%, 0, 0); } to { opacity: 1; transform: translate3d(0, 0, 0); } } .t-notification__show--bottom-right { position: fixed; bottom: 0; right: 0; display: flex; flex-direction: column-reverse; } .t-notification__show--bottom-right > .t-notification { animation-duration: 0.3s; animation-name: slidein-bottom-right; } @keyframes slidein-bottom-right { from { opacity: 0; transform: translate3d(100%, 0, 0); } to { opacity: 1; transform: translate3d(0, 0, 0); } } .t-notification-list__show { position: fixed; } .t-upload { font: var(--td-font-body-medium); color: var(--td-text-color-primary); box-sizing: border-box; margin: 0; padding: 0; list-style: none; } .t-upload .t-is-bordered { border: 1px solid var(--td-component-border); } .t-upload .t-upload__trigger { display: inline-block; } .t-upload .t-icon { font-size: calc(var(--td-font-size-body-medium) + 2px); flex-shrink: 0; } .t-upload .t-icon-check-circle-filled { color: var(--td-success-color); } .t-upload .t-icon-error-circle-filled { color: var(--td-error-color); } .t-upload .t-icon-time-filled { color: var(--td-text-color-placeholder); } .t-upload .t-icon-add { color: var(--td-text-color-primary); } .t-upload__list-file { display: flex; align-items: center; justify-content: center; width: 100px; height: 100px; margin-right: var(--td-comp-margin-m); overflow: hidden; } .t-upload__list-file .t-icon { font-size: var(--td-comp-size-xl); color: var(--td-brand-color); } .t-upload__list-item { display: flex; justify-content: space-between; align-items: center; margin-top: var(--td-comp-margin-m); width: 496px; height: 124px; padding: var(--td-comp-paddingTB-m) var(--td-comp-paddingLR-m); border: 1px solid var(--td-component-border); border-radius: var(--td-radius-default); font: var(--td-font-body-medium); } .t-upload__list-item.t-is--error .t-upload__list-name { color: var(--td-error-color); } .t-upload__list-item.t-is--error .t-upload__list-file .t-icon { color: var(--td-error-color); } .t-upload__list-content { display: flex; align-items: center; } .t-upload-list__control { cursor: pointer; } .t-upload-list__control:hover { color: var(--td-error-color); } .t-upload__list-img { object-fit: cover; max-width: 100%; max-height: 100%; cursor: pointer; } .t-upload__list-name { max-width: 200px; white-space: nowrap; word-wrap: normal; overflow: hidden; text-overflow: ellipsis; } .t-upload--highlight { color: var(--td-text-color-brand); } .t-upload__single-name { margin-right: var(--td-comp-margin-s); } .t-upload__card { font: var(--td-font-body-small); overflow: hidden; width: 100%; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--td-comp-margin-s); } .t-upload__card .t-is-disabled :hover { cursor: not-allowed; } .t-upload__card-item { cursor: pointer; box-sizing: border-box; list-style: none; } .t-upload__card-item::after { content: ""; display: block; } .t-upload__card-item:hover .t-upload__card-mask { opacity: 1; transition: opacity 0.2s linear; } .t-upload__card-item.t-is--error .t-icon-warning_fill { color: var(--td-error-color); margin-bottom: var(--td-comp-margin-s); } .t-upload__card-item.t-is--error .t-upload__card-status { color: var(--td-error-color); } .t-upload__card-item.t-is-background { transition: border-color 0.2s linear; } .t-upload__card .t-icon-loading { margin-bottom: var(--td-comp-margin-s); } .t-upload__card-name { max-width: 100%; margin-top: var(--td-comp-margin-s); white-space: nowrap; word-wrap: normal; overflow: hidden; text-overflow: ellipsis; } .t-upload__card-content { position: relative; width: 110px; height: 110px; overflow: hidden; display: flex; align-items: center; justify-content: center; box-sizing: border-box; background-color: var(--td-bg-color-secondarycontainer); border: 1px dashed var(--td-component-border); padding: var(--td-comp-paddingTB-s) var(--td-comp-paddingLR-s); border-radius: var(--td-radius-default); } .t-upload__card-container { width: 110px; height: 110px; display: flex; align-items: center; justify-content: center; flex-direction: column; background-color: var(--td-bg-color-secondarycontainer); border: 1px dashed var(--td-component-border); box-sizing: border-box; position: relative; border-radius: var(--td-radius-default); transition: border 0.2s linear; } .t-upload__card-container:hover:not(.t-is-disabled) { border-color: var(--td-brand-color); transition: border-color 0.2s linear; } .t-upload__card-container > .t-icon { color: var(--td-text-color-placeholder); } .t-upload__card-container > .t-icon, .t-upload__card-container .t-loading { font-size: var(--td-comp-size-xs); margin-bottom: var(--td-comp-margin-s); } .t-upload__card-container > p, .t-upload__card-container .t-upload__add-text { color: var(--td-text-color-placeholder); margin: 0; } .t-upload__card-status-wrap { text-align: center; } .t-upload__card-status-wrap > svg { margin-bottom: var(--td-comp-margin-s); } .t-upload__card-status-wrap .t-icon, .t-upload__card-status-wrap .t-loading { font-size: var(--td-comp-size-xs); } .t-upload__card-image { max-width: 100%; max-height: 100%; width: 100%; height: 100%; } .t-upload__card-status { color: var(--td-text-color-disabled); font: var(--td-font-body-small); } .t-upload__card-mask { background-color: var(--td-mask-active); color: var(--td-text-color-anti); will-change: transform; opacity: 0; z-index: 2; transition: opacity 0.2s linear; display: flex; align-items: center; justify-content: center; position: absolute; left: 0; right: 0; top: 0; bottom: 0; } .t-upload__card-mask-item-divider { margin: 0 var(--td-comp-margin-l); border-left: 1px var(--td-text-color-anti) solid; height: var(--td-comp-size-xxxs); } .t-upload__card-mask-item > .t-icon { cursor: pointer; font-size: calc(var(--td-font-size-body-medium) + 2px); } .t-upload__dialog .t-dialog { max-width: 80%; } .t-upload__dialog .t-dialog--default { padding: 32px; } .t-upload__dialog .t-dialog-body { padding-bottom: 0; } .t-upload__dialog .t-dialog-body-img-box img { display: block; max-width: 100%; max-height: 100%; } .t-upload__dragger { display: flex; width: 336px; height: 144px; border: 1px dashed var(--td-component-border); border-radius: var(--td-radius-small); font: var(--td-font-body-medium); color: var(--td-text-color-secondary); cursor: pointer; padding: var(--td-comp-margin-l); position: relative; overflow: auto; box-sizing: border-box; transition: border-color 0.2s linear; } .t-upload__dragger.t-is--active { background-color: var(--td-bg-color-container-active); border-color: var(--td-brand-color); } .t-upload__dragger:hover { border-color: var(--td-brand-color); } .t-upload__dragger-btns { position: absolute; bottom: var(--td-comp-margin-l); } .t-upload__dragger .t-size-s { display: block; } .t-upload__dragger-center { justify-content: center; align-items: center; } .t-upload__dragger-error { border-color: var(--td-error-color); } .t-upload__dragger-error:hover { border-color: var(--td-error-color); } .t-upload__dragger-text { display: flex; align-items: center; font: var(--td-font-body-medium); color: var(--td-text-color-primary); margin-bottom: var(--td-comp-margin-s); max-width: calc(336px - var(--td-comp-margin-l) * 2 - 0); } .t-upload__dragger-text .t-upload__single-name { white-space: nowrap; word-wrap: normal; overflow: hidden; text-overflow: ellipsis; } .t-upload__tips { display: block; color: var(--td-text-color-placeholder); margin-top: var(--td-comp-margin-s); font: var(--td-font-body-small); } .t-upload__tips.t-upload__tips-error { color: var(--td-error-color); } .t-upload__tips.t-upload__tips-warn { color: var(--td-warning-color); } .t-upload__placeholder { color: var(--td-text-color-placeholder); } .t-upload__display-text--margin { margin-top: var(--td-comp-margin-s); } .t-upload__single-display-text { color: var(--td-text-color-secondary); font: var(--td-font-body-small); display: flex; align-items: center; } .t-upload__single-display-text .t-upload__flow-status .t-icon { font-size: calc(var(--td-font-size-body-medium) + 2px); } .t-icon-clear-circle-filled { color: var(--td-text-color-placeholder); margin-top: var(--td-comp-margin-xxs); transition: color 0.2s linear; } .t-icon-clear-circle-filled:hover { color: var(--td-text-color-secondary); cursor: pointer; transition: color 0.2s linear; } .t-upload__single-percent { margin-left: var(--td-comp-margin-xs); } .t-upload__single-progress { color: var(--td-brand-color); display: flex; align-items: center; } .t-upload__single-progress .t-loading { font-size: calc(var(--td-font-size-body-medium) + 2px); flex-shrink: 0; } .t-upload__single-input-delete { margin-left: var(--td-comp-margin-l); font: var(--td-font-body-medium); color: var(--td-brand-color); cursor: pointer; } .t-upload__single-input-preview { display: flex; justify-content: space-between; flex: 1; } .t-upload__single-input-text { display: block; white-space: nowrap; word-wrap: normal; overflow: hidden; text-overflow: ellipsis; } .t-upload__single-file-input { display: flex; align-items: center; } .t-upload__single-file-input .t-upload__trigger { margin-left: var(--td-comp-margin-l); } .t-upload__single-file-input .t-upload__single-progress { white-space: nowrap; } .t-upload__single-file-input .t-input__inner { display: flex; align-items: center; justify-content: space-between; } .t-upload__dragger-progress { width: 100%; display: flex; } .t-upload__dragger-progress .t-icon, .t-upload__dragger-progress .t-loading { font-size: calc(var(--td-font-size-body-medium) + 2px); flex-shrink: 0; } .t-upload__dragger-img-wrap { width: 110px; height: 110px; background-color: var(--td-bg-color-secondarycontainer); border-radius: var(--td-radius-default); display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .t-upload__dragger-img-wrap > .t-image__wrapper--shape-square { width: 100%; } .t-upload__dragger-img-wrap > .t-image__wrapper--shape-square .t-space-item { text-align: center; } .t-upload__dragger-img-wrap > img { max-width: 100%; max-height: 100%; } .t-upload__dragger-img-wrap + .t-upload__dragger-progress-info { margin-left: var(--td-comp-margin-l); max-width: calc(336px - var(--td-comp-margin-l) * 2 - calc(110px + var(--td-comp-margin-l))); } .t-upload__dragger-progress-info { flex: 1; } .t-upload__dragger-progress-info .t-upload__single-display-text { margin-bottom: var(--td-comp-margin-s); } .t-upload__dragger-progress-info .t-button:hover { background-color: transparent; } .t-upload__dragger-progress-cancel, .t-upload__dragger-progress-reupload { margin-right: var(--td-comp-margin-l); } .t-upload__dragger-progress-cancel:hover, .t-upload__dragger-progress-reupload:hover { border-color: transparent; } .t-upload__dragger-delete-btn:hover, .t-upload__dragger-upload-btn:hover { border-color: transparent; } .t-upload__flow-image-flow { width: 498px; } .t-upload__flow { min-width: 498px; max-width: 960px; } .t-upload__flow-placeholder { display: inline-block; margin-left: var(--td-comp-margin-l); } .t-upload__flow-op { display: flex; align-items: center; } .t-upload__flow-bottom { display: flex; justify-content: flex-end; margin-top: var(--td-comp-margin-xxl); } .t-upload__flow-bottom .t-button + .t-button { margin-left: var(--td-comp-margin-s); } .t-upload__flow-empty { width: 100%; height: 184px; display: flex; justify-content: center; align-items: center; color: var(--td-text-color-placeholder); } .t-upload__flow-table { width: 100%; border: 1px dashed var(--td-component-border); margin-top: var(--td-comp-margin-xxl); border-collapse: collapse; } .t-upload__flow-table > thead > tr, .t-upload__flow-table > tbody > tr, .t-upload__flow-table > tfoot > tr, .t-upload__flow-table > tr { border-top: 1px solid var(--td-component-border); } .t-upload__flow-table > thead > tr > th, .t-upload__flow-table > tbody > tr > th, .t-upload__flow-table > tfoot > tr > th, .t-upload__flow-table > tr > th { color: var(--td-text-color-placeholder); font-weight: normal; border: 1px solid var(--td-component-border); text-align: left; background-color: var(--td-bg-color-container); } .t-upload__flow-table > thead > tr > td, .t-upload__flow-table > tbody > tr > td, .t-upload__flow-table > tfoot > tr > td, .t-upload__flow-table > tr > td { color: var(--td-text-color-primary); } .t-upload__flow-table > thead > tr > td, .t-upload__flow-table > tbody > tr > td, .t-upload__flow-table > tfoot > tr > td, .t-upload__flow-table > tr > td, .t-upload__flow-table > thead > tr > th, .t-upload__flow-table > tbody > tr > th, .t-upload__flow-table > tfoot > tr > th, .t-upload__flow-table > tr > th { padding: var(--td-comp-paddingTB-m) var(--td-comp-paddingLR-l); } .t-upload__flow-table__batch-row { border-left: 1px solid var(--td-component-border); } .t-upload__flow-button { color: var(--td-text-color-placeholder); cursor: pointer; transition: color 0.2s linear; } .t-upload__flow-button:hover { color: var(--td-text-color-secondary); } .t-upload__flow-status { display: flex; align-items: center; } .t-upload__flow-status .t-icon, .t-upload__flow-status .t-loading { margin-right: var(--td-comp-margin-s); font-size: calc(var(--td-font-size-body-medium) + 2px); } .t-upload__flow-card-area { border: 1px dashed var(--td-component-border); padding: var(--td-comp-paddingTB-m) var(--td-comp-paddingLR-m); margin-top: var(--td-comp-margin-xxl); transition: border 0.2s linear; } .t-upload__flow-card-area:hover { border-color: var(--td-brand-color); transition: border-color 0.2s linear; } .t-upload__icon-delete, .t-upload__single-input-clear { color: var(--td-text-color-placeholder); cursor: pointer; transition: color 0.2s linear; } .t-upload__icon-delete:hover, .t-upload__single-input-clear:hover { color: var(--td-text-color-secondary); transition: color 0.2s linear; } .t-icon.t-upload__single-input-clear { display: none; } .t-upload__single-input-preview:hover .t-upload__single-input-clear { display: initial; } .t-upload__single-input-preview:hover .t-upload__status-icon { display: none; } .t-upload .t-upload__single-name { color: var(--td-text-color-secondary); } .t-upload .t-upload__file-thumbnail { margin-right: var(--td-comp-paddingLR-s); width: var(--td-comp-size-xxl); height: var(--td-comp-size-xxl); display: flex; justify-content: center; align-items: center; cursor: pointer; } .t-upload .t-upload__file-thumbnail > svg { font-size: var(--td-comp-size-s); color: var(--td-text-color-placeholder); } .t-upload__card-name { margin-top: 8px; } .t-upload--theme-file-input { width: 100%; } .t-upload__dragger-btns > .t-button { padding: 0; } .t-upload__file-info { display: flex; align-items: center; } .t-upload__card-container.t-is-disabled { cursor: not-allowed; } .t-upload__card-container.t-is-disabled .t-upload__add-text { color: var(--td-text-color-disabled); } .t-upload__card-container.t-is-disabled .t-icon { color: var(--td-text-color-disabled); } @font-face { font-family: 'TencentSansW7'; src: url('data:application/font-woff;charset=utf-8;base64,d09GRgABAAAAAAusAA4AAAAAEJQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABGRlRNAAALkAAAABwAAAAchqPqzUdERUYAAAtwAAAAHgAAAB4AKQAbT1MvMgAAAbgAAABZAAAAYGmceoNjbWFwAAACYAAAAJcAAAHsPmfPZmdhc3AAAAtkAAAADAAAAAwACAAbZ2x5ZgAAAywAAAW8AAAG/Ivn/ztoZWFkAAABRAAAADYAAAA2E+AL5GhoZWEAAAF8AAAAIAAAACQIawJ9aG10eAAAAhQAAABMAAAATCG/Auxsb2NhAAADAAAAACwAAAAsDjIQIm1heHAAAAGcAAAAGgAAACAAfgBDbmFtZQAACOgAAAIUAAAEm0zGvtJwb3N0AAAK/AAAAGYAAAB/4wuGdnByZXAAAAL4AAAACAAAAAhwAgESAAEAAAABBR/xlpGAXw889QALA+gAAAAA2Ac3gwAAAADY+IxB//L/HAPPAwAAAAAIAAIAAAAAAAB42mNgZGBgWf7vFAMD84v/n/7vZD7PABRBAYIAwxQH7XjaY2BkYGAQZXBiYGEAAUYGGEiBUAAMEQDCAAB42mNgYepm2sPAysDA1MUUwcDA4A2hGeMYjBjNgKI8HMxMTCz8TCwLGJj2CzCAgRiI8PX382d0YGBMEmQ2+u/FcIJlOVA9CwMjSI6JlekwkFJgYAQAR1kL+QAAAAJYAHYAAAAAAU0AAAEEAAACUAAhAlYAFQJUACACKgAdAZUANgEUABUBYAAkA5wAFQINABsBqAA0AnAAKgJYACoD6ACF//YANP/yACN42mNgYGBmgGAZBkYGEHgG5DGC+SwMp4C0HIMAUISPQYEhiSGNIZMhl6GUoZJhgeIkfS6/N4GpQQuSBP//B+tMZEgByucwFGOT/7/4/6L/C/7P+z/z/7T/yffqLrJvVFu3Zm3xPJBtcgz4ADPFkIGRDWgMIcBAIWBhZWBj52Bg4GRg4OIGi/Dw8gFJfgYqA/JcCgA99Se8ALgB/4W4AAGNAAAAFAAUABQAFABSAIIAsgD6ASIBOAFYAYIBxgHwAhQCRAJaAogCygMYA3542k1Ua2xTZRj+LmtP23Vdz2lPz3pZb2dr1+u2nq2H0d3Z2OhI5mC4AZMBo0gM98E0oRn1AqgoIYDG4BAkakDkJ4iyiCZGAiISUH8YjIQfEhNUMCoJrme+bTfkx/nxveec53ne533eDxE0Nn0V/0V2I4oYhATWw1ZKrDiGx5Vfzp6NkXPZ7mH8ECGCPNNXiZWokANVIYRjFt7MUI83iuvrWnAzTWA5Xl/nC2G/SZJFr7oUq3mzBaf7F5S0Kt+F59i1aq0j0tbwJmXcwUtsz3HHhEtQaYr0RFUbL0sqB8yRClvcG2uwa7hKg4VLKdFjZmeEN5SwwM0Dd4DcRaXAXuAuxQYqekwSIxRoqRRrxjLevrK/RNCUhXt7lYevpQMf6StjW1sz/gCrIqqm+Z7krsjCmJU67/zexrvMykE+CniA7wb8oUf4EhW9vtm2qGQSvQY808+t9Ov/5ih0zlhfyytfbGodd/ht2rJiH7k7dTtP0NQTYpUo3qDzSnsSVpc5j18O+DzRIzeqyel34nwDOISZHGoCM6I3SvKMRJppKM8pxeIy3tbU4S4y6Oc231Sp3OFLgXMV7dV2xq8L9K9IUZvY5XAZi4wfms2U6K21PoHvnVfvchitXEorhH2O4K253RUTnIYt0Xv4ITanB6M4zPwm9GuBQ4GIEaloEmVJzvXM4JeqXaxWfYg7tCi9qIddqNZZg53yKEv2lLgkEWaDr6fERHfEnEL5/mA+uJzcLmTIJEsMNUl0t5AR7o+kR8jqTCa7nsjZS3nuCvg2DtwcpC3ftQzfgg1ODMRfBjt8eiP8ZLAE7HNDsRJPUKhYTmqy13osvJGm4H/gomsgh8Ksk2oGpM+kAHqAh0wmuitpSWO6SWer2NOX7vu8D2SouFCACSSVk3hgjmBllRp8Takhck6THTT9DZjVoMkPprfgmSE8igHzKNOJ//MX4X4rN6m0VF022lan02g4R11DNngDahqoPQe1YoZ31SRiKWN5fammqNgddMiRcNheAoXIbKGlKsoXo7w3daDjFDmNbOAiM+uJOONSbjoSIzEPI1owpyO0oL6twlAcSbI9zrTzKIePTdeaeZamOHe4zJtA06kTJ3J+BSF7vdCbKZ/swsbGZzyHZvCN9BrlzmN+vUVU2UsFq/CAcjJnVV5bcNpB2gCnPI9jILDquZ1rwflleQzwqx1ri8PJzh+4K3GnUcPsg32pSdfAJmYA+dPm+a61rBj0N3Z5ktio3Gu1uAqZ3IVW0R2Ar4GDwIiyp97jJ5MXLuzbn71IGvYT1fXrR545kvdp+p/pNB0nvyI7QiqR+A2UEZupLPmjOK/KIlg4On741U6xf3hj49Ha0e2bov3tVFd6oOx2uVvb9dlLeOTjxt1797XUvDBx+snTOv1Sk/2y0g7YRTCDNP2WIqSHhLqQCHQGnEuYmpHhhvFYBNHnV8UsUPJLpjjwYZNA8ZC+yv7Uxu5QiG/vMWOfNzzq9uH7XqFoyz3byRWUv1ClnNowsoqi+CYp248fhN0TC94YXrSkYyRod03dWkYOmpdOfUAetGWTiE7/CRomQYML+VG0kHOG5AjjpjjE0kAYMc7JubMsqZnK3GvqMQmNOHcR4u9t5Woai31t3xXxYVrcaZQXt+5cOWZZV7ZXp94Io6u1C5Q+rZzY+pP62YEdZEmpx6QcUb4ZnMJ2nXbs2uWtb+P57w6sSoYytQYnl62juhVEnT1e2HURtF0EbQnUBsrAD9AADglwhfgLHkWxX2TiMqPOeyQzftinXHjhbVwuJVIdiOY9fvBRstDzyh9Ys6B6W2h0HnvO85DbvMsa2xJhNPgiPzBkaN4W/NF+0PaOd/ug7Yz+DNfVp3/v5+Jx8yRdT3F5dLMorLXik6PrnhhYfKAxM/hyb0Oanycm3+86bHMPC6JyZfB8YJnN8sngi4xqqdq3nN0//vzOTNXq5YsR+g8984WfeNq1Us1qFEEQ/npnk0X8IQGJIjnUSRLYLLt7MMlFCHvNKRvMuTPTmZ1kdib0zAY3ePMFfAAvigi5+Ry+gA8iiOLFr3tbTFZWcnGgu76qrvqqpqoAPMQ3KMy+A3wMWOGBehRwAy31LOAIayoPuEmfdwEv4Z76HPAy7quvAbfwqvEz4BXcjd4EvIpG9J5sqnmH2gfP7LDCOn4E3CD/04AjtNXzgJtYV68DXsJj9SngZTxRXwJu4XtDBbyCtehlwKtoRm8xQIlzTGGRIcUINQRXPH100cMOtgLape0QBgVif9dBjxlTkCPnSckj2MCQNudzGeQmrS5PB22ifcYmxII9RuWUf3JXXjOUhvKCt/PEoDyf2iwd1XIl/W5vZ4vXrhyaIjZFTRmPijIv06lsDEemuOTZlEHZact+nXRkL8/FR1diTWXshUnIefNnhtCULv0Rtvk4ox7qopKjbbcNhhVOWK1mXTgw6STX9t8kMh91k1RuRfJXJS98Zyp2rKSbcDIdzqfPB2OrrCyk1+n2F3HOMzrC+aFmPrcOg0i9XvukbhhCbPmaUBv73zqjrcTJf1gPV7PL6PK4yGN6L6oq882IvaWm/0w/ZfOt9014x3yZta1yS/V7fbJKNBcjzaraWJNIbXVixtqeSXly6x3TRSJjPZVjc50qKyQ2ttaUpxObVUkW15xRtXD9rg8Hs3FxRr8ATJnl93jaY2BiAIP/zQxGDNiAKBAzMjAxMjG4MLgyuDN4MHgy+DD4MwQwhDGEM0QwxDAyM7IwsjKyMbKzl+ZlGhgYGHIlFhXllxdlpmeUgISM3AwcQbSJq6sziDY1cjQA0WZGhoYAgBwU3AAAAAEAAgAIAAr//wAPAAEAAAAMAAAAFgAAAAIAAQADABQAAQAEAAAAAgAAAAAAAAABAAAAANWkJwgAAAAA2Ac3gwAAAADY+IxB') format('woff'); font-weight: normal; font-style: normal; } .t-layout__sider { width: fit-content; } .t-button + .t-button { margin-left: var(--td-comp-margin-s); } .t-transfer .t-button + .t-button, .t-jumper .t-button + .t-button, .t-pagination-mini .t-button + .t-button { margin-left: 0; } .tdesign-starter-link { color: var(--td-brand-color); text-decoration: none; margin-right: 24px; cursor: pointer; transition: color 0.2s cubic-bezier(0.38, 0, 0.24, 1); } .left-operation-container .t-button + .t-button, .operation-container .t-button + .t-button { margin-left: var(--td-comp-margin-s); } .t-layout.t-layout--with-sider > .t-layout { flex: 1; min-width: 760px; } .t-menu--dark .t-menu__operations .t-icon { color: rgba(255, 255, 255, 0.55); } .t-menu--dark .t-menu__operations .t-icon:hover { cursor: pointer; } .t-default-menu.t-menu--dark { background: var(--td-gray-color-13); } .tdesign-starter-wrapper { height: 100vh; display: flex; flex-direction: column; } .tdesign-starter-main-wrapper { height: 500px; overflow: scroll; } .tdesign-starter-side-nav-layout-relative { height: 100%; } .tdesign-starter-content-layout { padding: var(--td-comp-paddingTB-xl) var(--td-comp-paddingLR-xl); } .tdesign-starter-layout { height: calc(100vh - var(--td-comp-size-xxxl)); overflow-y: scroll; } .tdesign-starter-layout-tabs-nav { max-width: 100%; position: fixed; overflow: visible; z-index: 100; } .tdesign-starter-layout-tabs-nav .t-tabs__nav-item.t-size-m { margin: 3px 1.5px; border-radius: var(--td-radius-default); box-shadow: var(--td-shadow-3); height: var(--td-comp-size-m); line-height: var(--td-comp-size-m); } .tdesign-starter-layout-tabs-nav + .tdesign-starter-content-layout { padding-top: var(--td-comp-paddingTB-xl); } .tdesign-starter-layout::-webkit-scrollbar { width: 12px; background: transparent; } .tdesign-starter-layout::-webkit-scrollbar-thumb { border-radius: 6px; border: 3px solid transparent; background-clip: content-box; background-color: var(--td-scrollbar-color); } .tdesign-starter-footer-layout { padding: 0; margin-bottom: var(--td-comp-margin-xxl); } .tdesign-starter-sidebar-layout { height: 100%; } .tdesign-starter-sidebar-compact { width: 64px; } .tdesign-starter-sidebar-layout-side { z-index: 100; } .tdesign-starter-side-nav { position: fixed; top: 0; bottom: 0; z-index: 200; transition: all 0.3s; min-height: 100%; } .tdesign-starter-side-nav-mix { top: var(--td-comp-size-xxxl); } .tdesign-starter-side-nav-mix-fixed { top: var(--td-comp-size-xxxl); z-index: 0; } .tdesign-starter-side-nav-no-fixed { position: relative; z-index: 1; } .tdesign-starter-side-nav-no-logo { z-index: 1; } .tdesign-starter-side-nav-logo-wrapper { display: flex; align-items: center; justify-content: center; width: 100%; } .tdesign-starter-side-nav-logo-wrapper:hover { cursor: pointer; } .tdesign-starter-side-nav-logo-t-logo { height: var(--td-comp-size-s); width: 100%; } .tdesign-starter-side-nav-logo-tdesign-logo { margin-right: var(--td-comp-margin-xxxl); height: var(--td-comp-size-s); width: 100%; color: var(--td-text-color-primary); } .tdesign-starter-side-nav-logo-normal { color: var(--td-brand-color); font: var(--td-font-body-large); transition: all 0.3s; } .tdesign-starter-side-nav-dark { color: var(--td-font-white-1) !important; } .tdesign-starter-side-nav-placeholder { flex: 1 1 232px; min-width: 232px; transition: all 0.3s; } .tdesign-starter-side-nav-placeholder-hidden { flex: 1 1 72px; min-width: 72px; transition: all 0.3s; } .route-tabs-dropdown .t-icon { margin-right: 8px; } .logo-container { cursor: pointer; display: inline-flex; margin-left: 24px; } .version-container { color: var(--td-text-color-primary); opacity: 0.4; } .t-menu__popup { z-index: 1000; } .container-base-margin-top { margin-top: 16px; } .app-container { background-color: var(--td-bg-color-container); padding: 30px 32px; border-radius: var(--td-radius-default); } .app-container .table-container { margin-top: 30px; } .operation-container { display: flex; justify-content: flex-end; align-items: center; } .operation-container .expand .t-button__text { display: flex; align-items: center; } .operation-container .expand .t-icon { margin-left: 4px; transition: transform 0.3s ease; } .t-dialog__body { overflow: hidden; } .selected-count { display: inline-block; margin-left: var(--td-comp-margin-l); color: var(--td-text-color-secondary); } .tdesign-breadcrumb[data-v-47b5b1dd] { margin-bottom: 24px; } .tdesign-starter-iframe-page__mask[data-v-e393b0bc] { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .tdesign-starter-iframe-page__main[data-v-e393b0bc] { width: 100%; height: 100%; overflow: hidden; background-color: #fff; border: 0; box-sizing: border-box; } .fade-leave-active[data-v-75e0528d], .fade-enter-active[data-v-75e0528d] { transition: opacity 0.28s cubic-bezier(0.38, 0, 0.24, 1); } .fade-enter-from[data-v-75e0528d], .fade-leave-to[data-v-75e0528d] { opacity: 0; } .tdesign-starter-footer[data-v-981497a9] { color: var(--td-text-color-placeholder); line-height: 20px; text-align: center; } .header-msg[data-v-4592e7fe] { width: 400px; margin: calc(0px - var(--td-comp-paddingTB-xs)) calc(0px - var(--td-comp-paddingLR-s)); } .header-msg .empty-list[data-v-4592e7fe] { text-align: center; padding: var(--td-comp-paddingTB-xxl) 0; font: var(--td-font-body-medium); color: var(--td-text-color-secondary); } .header-msg .empty-list img[data-v-4592e7fe] { width: var(--td-comp-size-xxxxl); } .header-msg .empty-list p[data-v-4592e7fe] { margin-top: var(--td-comp-margin-xs); } .header-msg-top[data-v-4592e7fe] { position: relative; font: var(--td-font-title-medium); color: var(--td-text-color-primary); text-align: left; padding: var(--td-comp-paddingTB-l) var(--td-comp-paddingLR-xl) 0; display: flex; align-items: center; justify-content: space-between; } .header-msg-top .clear-btn[data-v-4592e7fe] { right: calc(var(--td-comp-paddingTB-l) - var(--td-comp-paddingLR-xl)); } .header-msg-bottom[data-v-4592e7fe] { align-items: center; display: flex; justify-content: center; padding: var(--td-comp-paddingTB-s) var(--td-comp-paddingLR-s); border-top: 1px solid var(--td-component-stroke); } .header-msg-bottom-link[data-v-4592e7fe] { text-decoration: none; cursor: pointer; color: var(--td-text-color-placeholder); } .header-msg .t-list[data-v-4592e7fe] { height: calc(100% - 104px); padding: var(--td-comp-margin-s) var(--td-comp-margin-s); } .header-msg .t-list-item[data-v-4592e7fe] { overflow: hidden; width: 100%; padding: var(--td-comp-paddingTB-l) var(--td-comp-paddingLR-l); border-radius: var(--td-radius-default); font: var(--td-font-body-medium); color: var(--td-text-color-primary); cursor: pointer; transition: background-color 0.2s linear; } .header-msg .t-list-item[data-v-4592e7fe]:hover { background-color: var(--td-bg-color-container-hover); } .header-msg .t-list-item:hover .msg-content[data-v-4592e7fe] { color: var(--td-brand-color); } .header-msg .t-list-item:hover .t-list-item__action button[data-v-4592e7fe] { bottom: var(--td-comp-margin-l); opacity: 1; } .header-msg .t-list-item:hover .msg-time[data-v-4592e7fe] { bottom: -6px; opacity: 0; } .header-msg .t-list-item .msg-content[data-v-4592e7fe] { margin-bottom: var(--td-comp-margin-s); } .header-msg .t-list-item .msg-type[data-v-4592e7fe] { color: var(--td-text-color-secondary); } .header-msg .t-list-item .t-list-item__action button[data-v-4592e7fe] { opacity: 0; position: absolute; right: var(--td-comp-margin-xxl); bottom: -6px; } .header-msg .t-list-item .msg-time[data-v-4592e7fe] { transition: all 0.2s ease; opacity: 1; position: absolute; right: var(--td-comp-margin-xxl); bottom: var(--td-comp-margin-l); color: var(--td-text-color-secondary); } .search-popup { width: auto !important; } .search-popup .t-auto-complete__panel--empty { padding: 0 16px !important; } .header-menu-search[data-v-78ab3930] { display: flex; margin-left: 16px; } .header-menu-search .hover-active[data-v-78ab3930] { background: var(--td-bg-color-secondarycontainer); } .header-menu-search .t-icon[data-v-78ab3930] { color: var(--td-text-color-primary) !important; } .header-menu-search .header-search[data-v-78ab3930] .t-input { border: none; outline: none; box-shadow: none; transition: background 0.2s linear; } .header-menu-search .header-search[data-v-78ab3930] .t-input .t-input__inner { transition: background 0.2s linear; background: none; } .header-menu-search .header-search[data-v-78ab3930] .t-input:hover { background: var(--td-bg-color-secondarycontainer); } .header-menu-search .header-search[data-v-78ab3930] .t-input:hover .t-input__inner { background: var(--td-bg-color-secondarycontainer); } .t-button[data-v-78ab3930] { margin: 0 8px; transition: opacity 0.2s cubic-bezier(0.38, 0, 0.24, 1); } .t-button .t-icon[data-v-78ab3930] { font-size: 20px; } .t-button .t-icon.general[data-v-78ab3930] { margin-right: 16px; } .search-icon-hide[data-v-78ab3930] { opacity: 0; } .header-menu-search-left[data-v-78ab3930] { display: flex; align-items: center; } .header-menu-search-left .header-search[data-v-78ab3930] { width: 200px; transition: width 0.2s cubic-bezier(0.38, 0, 0.24, 1); } .header-menu-search-left .header-search[data-v-78ab3930] .t-input { border: 0; } .header-menu-search-left .header-search[data-v-78ab3930] .t-input:focus { box-shadow: none; } .header-menu-search-left .header-search.width-zero[data-v-78ab3930] { width: 0; opacity: 0; } .tdesign-starter-header-menu-fixed[data-v-e22ad71b] { position: fixed; top: 0; z-index: 1001; } .tdesign-starter-header-menu-fixed[data-v-e22ad71b] .t-head-menu__inner { padding-right: var(--td-comp-margin-xl); } .tdesign-starter-header-menu-fixed-side[data-v-e22ad71b] { left: 232px; right: 0; z-index: 10; width: auto; transition: all 0.3s; } .tdesign-starter-header-menu-fixed-side-compact[data-v-e22ad71b] { left: 64px; } .tdesign-starter-header-logo-container[data-v-e22ad71b] { cursor: pointer; display: inline-flex; } .tdesign-starter-header-menu-fixed[data-v-e22ad71b] .t-menu { overflow-x: auto; overflow-y: hidden; /* 滚动条轨道 */ /* 滚动条滑块 */ /* 滑块在悬停时的样式 */ } .tdesign-starter-header-menu-fixed[data-v-e22ad71b] .t-menu::-webkit-scrollbar { width: 4px; /* 滚动条的宽度 */ height: 4px; /* 横向滚动条的高度 */ background-color: transparent; } .tdesign-starter-header-menu-fixed[data-v-e22ad71b] .t-menu::-webkit-scrollbar-track { background-color: var(--td-scroll-track-color); /* 轨道的背景色 */ border-radius: 4px; /* 轨道的圆角 */ } .tdesign-starter-header-menu-fixed[data-v-e22ad71b] .t-menu::-webkit-scrollbar-track:hover { background-color: var(--td-scroll-track-color); /* 轨道的背景色 */ } .tdesign-starter-header-menu-fixed[data-v-e22ad71b] .t-menu::-webkit-scrollbar-corner { width: 0; } .tdesign-starter-header-menu-fixed[data-v-e22ad71b] .t-menu::-webkit-scrollbar-thumb { border-radius: calc(4px / 2); /* 滑块的圆角 */ border: calc((4px - 4px) / 2) solid transparent; background-clip: padding-box; background-color: var(--td-scrollbar-color); /* 滑块的背景色 */ } .tdesign-starter-header-menu-fixed[data-v-e22ad71b] .t-menu::-webkit-scrollbar-thumb:hover { background-color: var(--td-scrollbar-hover-color); /* 滑块悬停时的背景色 */ } .header-menu[data-v-e22ad71b] { flex: 1 1 1; display: inline-flex; } .header-menu[data-v-e22ad71b] .t-menu__item { min-width: unset; } .operations-container[data-v-e22ad71b] { display: flex; align-items: center; } .operations-container .t-popup__reference[data-v-e22ad71b] { display: flex; align-items: center; justify-content: center; } .operations-container .t-button[data-v-e22ad71b] { margin-left: var(--td-comp-margin-l); } .header-operate-left[data-v-e22ad71b] { display: flex; align-items: normal; line-height: 0; } .header-logo-container[data-v-e22ad71b] { width: 184px; height: 26px; display: flex; margin-left: 24px; color: var(--td-text-color-primary); } .header-logo-container .t-logo[data-v-e22ad71b] { width: 100%; height: 100%; } .header-logo-container .t-logo[data-v-e22ad71b]:hover { cursor: pointer; } .header-logo-container[data-v-e22ad71b]:hover { cursor: pointer; } .header-user-account[data-v-e22ad71b] { display: inline-flex; align-items: center; color: var(--td-text-color-primary); } [data-v-e22ad71b] .t-head-menu__inner { border-bottom: 1px solid var(--td-component-stroke); } .t-menu--light .header-user-account[data-v-e22ad71b] { color: var(--td-text-color-primary); } .t-menu--dark .t-head-menu__inner[data-v-e22ad71b] { border-bottom: 1px solid var(--td-gray-color-10); } .t-menu--dark .header-user-account[data-v-e22ad71b] { color: rgba(255, 255, 255, 0.55); } .operations-dropdown-container-item[data-v-e22ad71b] { width: 100%; display: flex; align-items: center; } .operations-dropdown-container-item[data-v-e22ad71b] .t-dropdown__item-text { display: flex; align-items: center; } .operations-dropdown-container-item .t-icon[data-v-e22ad71b] { font-size: var(--td-comp-size-xxxs); margin-right: var(--td-comp-margin-s); } .operations-dropdown-container-item[data-v-e22ad71b] .t-dropdown__item { width: 100%; margin-bottom: 0; } .operations-dropdown-container-item[data-v-e22ad71b]:last-child .t-dropdown__item { margin-bottom: 8px; } .operations-dropdown-container-item .t-dropdown__item-text { display: flex; align-items: center; } .color-container[data-v-83eae6cb] { width: 24px; height: 24px; border-radius: var(--td-radius-circle); display: inline-block; } @font-face { font-family: 'TencentSansW7'; src: url('data:application/font-woff;charset=utf-8;base64,d09GRgABAAAAAAusAA4AAAAAEJQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABGRlRNAAALkAAAABwAAAAchqPqzUdERUYAAAtwAAAAHgAAAB4AKQAbT1MvMgAAAbgAAABZAAAAYGmceoNjbWFwAAACYAAAAJcAAAHsPmfPZmdhc3AAAAtkAAAADAAAAAwACAAbZ2x5ZgAAAywAAAW8AAAG/Ivn/ztoZWFkAAABRAAAADYAAAA2E+AL5GhoZWEAAAF8AAAAIAAAACQIawJ9aG10eAAAAhQAAABMAAAATCG/Auxsb2NhAAADAAAAACwAAAAsDjIQIm1heHAAAAGcAAAAGgAAACAAfgBDbmFtZQAACOgAAAIUAAAEm0zGvtJwb3N0AAAK/AAAAGYAAAB/4wuGdnByZXAAAAL4AAAACAAAAAhwAgESAAEAAAABBR/xlpGAXw889QALA+gAAAAA2Ac3gwAAAADY+IxB//L/HAPPAwAAAAAIAAIAAAAAAAB42mNgZGBgWf7vFAMD84v/n/7vZD7PABRBAYIAwxQH7XjaY2BkYGAQZXBiYGEAAUYGGEiBUAAMEQDCAAB42mNgYepm2sPAysDA1MUUwcDA4A2hGeMYjBjNgKI8HMxMTCz8TCwLGJj2CzCAgRiI8PX382d0YGBMEmQ2+u/FcIJlOVA9CwMjSI6JlekwkFJgYAQAR1kL+QAAAAJYAHYAAAAAAU0AAAEEAAACUAAhAlYAFQJUACACKgAdAZUANgEUABUBYAAkA5wAFQINABsBqAA0AnAAKgJYACoD6ACF//YANP/yACN42mNgYGBmgGAZBkYGEHgG5DGC+SwMp4C0HIMAUISPQYEhiSGNIZMhl6GUoZJhgeIkfS6/N4GpQQuSBP//B+tMZEgByucwFGOT/7/4/6L/C/7P+z/z/7T/yffqLrJvVFu3Zm3xPJBtcgz4ADPFkIGRDWgMIcBAIWBhZWBj52Bg4GRg4OIGi/Dw8gFJfgYqA/JcCgA99Se8ALgB/4W4AAGNAAAAFAAUABQAFABSAIIAsgD6ASIBOAFYAYIBxgHwAhQCRAJaAogCygMYA3542k1Ua2xTZRj+LmtP23Vdz2lPz3pZb2dr1+u2nq2H0d3Z2OhI5mC4AZMBo0gM98E0oRn1AqgoIYDG4BAkakDkJ4iyiCZGAiISUH8YjIQfEhNUMCoJrme+bTfkx/nxveec53ne533eDxE0Nn0V/0V2I4oYhATWw1ZKrDiGx5Vfzp6NkXPZ7mH8ECGCPNNXiZWokANVIYRjFt7MUI83iuvrWnAzTWA5Xl/nC2G/SZJFr7oUq3mzBaf7F5S0Kt+F59i1aq0j0tbwJmXcwUtsz3HHhEtQaYr0RFUbL0sqB8yRClvcG2uwa7hKg4VLKdFjZmeEN5SwwM0Dd4DcRaXAXuAuxQYqekwSIxRoqRRrxjLevrK/RNCUhXt7lYevpQMf6StjW1sz/gCrIqqm+Z7krsjCmJU67/zexrvMykE+CniA7wb8oUf4EhW9vtm2qGQSvQY808+t9Ov/5ih0zlhfyytfbGodd/ht2rJiH7k7dTtP0NQTYpUo3qDzSnsSVpc5j18O+DzRIzeqyel34nwDOISZHGoCM6I3SvKMRJppKM8pxeIy3tbU4S4y6Oc231Sp3OFLgXMV7dV2xq8L9K9IUZvY5XAZi4wfms2U6K21PoHvnVfvchitXEorhH2O4K253RUTnIYt0Xv4ITanB6M4zPwm9GuBQ4GIEaloEmVJzvXM4JeqXaxWfYg7tCi9qIddqNZZg53yKEv2lLgkEWaDr6fERHfEnEL5/mA+uJzcLmTIJEsMNUl0t5AR7o+kR8jqTCa7nsjZS3nuCvg2DtwcpC3ftQzfgg1ODMRfBjt8eiP8ZLAE7HNDsRJPUKhYTmqy13osvJGm4H/gomsgh8Ksk2oGpM+kAHqAh0wmuitpSWO6SWer2NOX7vu8D2SouFCACSSVk3hgjmBllRp8Takhck6THTT9DZjVoMkPprfgmSE8igHzKNOJ//MX4X4rN6m0VF022lan02g4R11DNngDahqoPQe1YoZ31SRiKWN5fammqNgddMiRcNheAoXIbKGlKsoXo7w3daDjFDmNbOAiM+uJOONSbjoSIzEPI1owpyO0oL6twlAcSbI9zrTzKIePTdeaeZamOHe4zJtA06kTJ3J+BSF7vdCbKZ/swsbGZzyHZvCN9BrlzmN+vUVU2UsFq/CAcjJnVV5bcNpB2gCnPI9jILDquZ1rwflleQzwqx1ri8PJzh+4K3GnUcPsg32pSdfAJmYA+dPm+a61rBj0N3Z5ktio3Gu1uAqZ3IVW0R2Ar4GDwIiyp97jJ5MXLuzbn71IGvYT1fXrR545kvdp+p/pNB0nvyI7QiqR+A2UEZupLPmjOK/KIlg4On741U6xf3hj49Ha0e2bov3tVFd6oOx2uVvb9dlLeOTjxt1797XUvDBx+snTOv1Sk/2y0g7YRTCDNP2WIqSHhLqQCHQGnEuYmpHhhvFYBNHnV8UsUPJLpjjwYZNA8ZC+yv7Uxu5QiG/vMWOfNzzq9uH7XqFoyz3byRWUv1ClnNowsoqi+CYp248fhN0TC94YXrSkYyRod03dWkYOmpdOfUAetGWTiE7/CRomQYML+VG0kHOG5AjjpjjE0kAYMc7JubMsqZnK3GvqMQmNOHcR4u9t5Woai31t3xXxYVrcaZQXt+5cOWZZV7ZXp94Io6u1C5Q+rZzY+pP62YEdZEmpx6QcUb4ZnMJ2nXbs2uWtb+P57w6sSoYytQYnl62juhVEnT1e2HURtF0EbQnUBsrAD9AADglwhfgLHkWxX2TiMqPOeyQzftinXHjhbVwuJVIdiOY9fvBRstDzyh9Ys6B6W2h0HnvO85DbvMsa2xJhNPgiPzBkaN4W/NF+0PaOd/ug7Yz+DNfVp3/v5+Jx8yRdT3F5dLMorLXik6PrnhhYfKAxM/hyb0Oanycm3+86bHMPC6JyZfB8YJnN8sngi4xqqdq3nN0//vzOTNXq5YsR+g8984WfeNq1Us1qFEEQ/npnk0X8IQGJIjnUSRLYLLt7MMlFCHvNKRvMuTPTmZ1kdib0zAY3ePMFfAAvigi5+Ry+gA8iiOLFr3tbTFZWcnGgu76qrvqqpqoAPMQ3KMy+A3wMWOGBehRwAy31LOAIayoPuEmfdwEv4Z76HPAy7quvAbfwqvEz4BXcjd4EvIpG9J5sqnmH2gfP7LDCOn4E3CD/04AjtNXzgJtYV68DXsJj9SngZTxRXwJu4XtDBbyCtehlwKtoRm8xQIlzTGGRIcUINQRXPH100cMOtgLape0QBgVif9dBjxlTkCPnSckj2MCQNudzGeQmrS5PB22ifcYmxII9RuWUf3JXXjOUhvKCt/PEoDyf2iwd1XIl/W5vZ4vXrhyaIjZFTRmPijIv06lsDEemuOTZlEHZact+nXRkL8/FR1diTWXshUnIefNnhtCULv0Rtvk4ox7qopKjbbcNhhVOWK1mXTgw6STX9t8kMh91k1RuRfJXJS98Zyp2rKSbcDIdzqfPB2OrrCyk1+n2F3HOMzrC+aFmPrcOg0i9XvukbhhCbPmaUBv73zqjrcTJf1gPV7PL6PK4yGN6L6oq882IvaWm/0w/ZfOt9014x3yZta1yS/V7fbJKNBcjzaraWJNIbXVixtqeSXly6x3TRSJjPZVjc50qKyQ2ttaUpxObVUkW15xRtXD9rg8Hs3FxRr8ATJnl93jaY2BiAIP/zQxGDNiAKBAzMjAxMjG4MLgyuDN4MHgy+DD4MwQwhDGEM0QwxDAyM7IwsjKyMbKzl+ZlGhgYGHIlFhXllxdlpmeUgISM3AwcQbSJq6sziDY1cjQA0WZGhoYAgBwU3AAAAAEAAgAIAAr//wAPAAEAAAAMAAAAFgAAAAIAAQADABQAAQAEAAAAAgAAAAAAAAABAAAAANWkJwgAAAAA2Ac3gwAAAADY+IxB') format('woff'); font-weight: normal; font-style: normal; } body[data-v-19ee6841] { color: var(--td-text-color-secondary); font: var(--td-font-body-medium); font-family: -apple-system, BlinkMacSystemFont, var(--td-font-family); -webkit-font-smoothing: antialiased; padding: 0; margin: 0; } pre[data-v-19ee6841] { font-family: var(--td-font-family); } ul[data-v-19ee6841], dl[data-v-19ee6841], li[data-v-19ee6841], dd[data-v-19ee6841], dt[data-v-19ee6841] { margin: 0; padding: 0; list-style: none; } figure[data-v-19ee6841], h1[data-v-19ee6841], h2[data-v-19ee6841], h3[data-v-19ee6841], h4[data-v-19ee6841], h5[data-v-19ee6841], h6[data-v-19ee6841], p[data-v-19ee6841] { margin: 0; } [data-v-19ee6841] { box-sizing: border-box; } .text-center[data-v-19ee6841] { text-align: center; } .list-group-striped > .list-group-item[data-v-19ee6841] { border-left: 0; border-right: 0; border-radius: 0; padding-left: 0; padding-right: 0; } .list-group[data-v-19ee6841] { padding-left: 0; list-style: none; } .list-group-item[data-v-19ee6841] { border-bottom: 1px solid #e7eaec; border-top: 1px solid #e7eaec; margin-bottom: -1px; padding: 11px 0; font-size: 13px; } .pull-right[data-v-19ee6841] { float: right !important; } .clearfix[data-v-19ee6841]::after { visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0; } /* tree border */ .tree-border[data-v-19ee6841] { margin-top: 5px; border: 1px solid #e5e6e7; background: #FFF none; border-radius: 4px; width: 100%; } .overlay-options[data-v-19ee6841] { display: inline-block !important; font-size: 18px !important; } .content-scrollbar[data-v-19ee6841] { overflow-y: scroll; } .content-scrollbar[data-v-19ee6841]::-webkit-scrollbar { width: 12px; background: transparent; } .content-scrollbar[data-v-19ee6841]::-webkit-scrollbar-thumb { min-height: 40px; border-radius: 6px; border: 3px solid transparent; background-clip: content-box; background-color: var(--td-scrollbar-color); } .dialog-content-max-height[data-v-19ee6841] { max-height: calc(100vh - var(--td-comp-paddingTB-xxl) - var(--td-comp-paddingTB-l) - 24px - 140px); } .gen-option > span[data-v-19ee6841] { width: 100%; } .tox-tinymce-aux[data-v-19ee6841] { z-index: 3000 !important; } .form-detail .t-form__label[data-v-19ee6841] { color: var(--td-text-color-placeholder); } .t-image-viewer-preview-image .t-image-viewer__modal-pic .t-image-viewer__modal-box .t-image-viewer__modal-image[data-v-19ee6841] { -webkit-user-select: none; /* Safari */ -moz-user-select: none; /* Firefox */ -ms-user-select: none; /* IE10+/Edge */ user-select: none; /* Standard syntax */ } /* 悬浮底部操作栏样式 - 在容器内悬浮 */ .floating-action-footer[data-v-19ee6841] { position: sticky; /* 使用 sticky 定位 */ bottom: 1px; left: 0; right: 0; background: var(--td-bg-color-container); border: 1px solid var(--td-border-level-1-color); border-radius: 8px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); margin-top: 20px; z-index: 100; width: 100%; /* 宽度100% */ } .floating-action-footer .action-content[data-v-19ee6841] { padding: 16px 20px; display: flex; justify-content: space-between; align-items: center; gap: 16px; } .t-dialog__wrap .t-dialog__position.t-dialog--top[data-v-19ee6841] { padding-top: 18vh !important; } .thumbnail-container[data-v-19ee6841] { display: inline-block; } .thumbnail-circle[data-v-19ee6841] { border-radius: var(--td-radius-circle); } .thumbnail-layout[data-v-19ee6841] { width: 88px; height: 48px; } .tdesign-setting { z-index: 100; position: fixed; bottom: 200px; right: 0; height: 40px; width: 40px; border-radius: 20px 0 0 20px; transition: all 0.3s; } .tdesign-setting .t-icon { margin-left: 8px; } .tdesign-setting .tdesign-setting-text { font-size: 12px; display: none; } .tdesign-setting:hover { width: 96px; } .tdesign-setting:hover .tdesign-setting-text { display: inline-block; } .setting-layout-color-group { display: inline-flex; justify-content: center; align-items: center; border-radius: 50% !important; padding: 6px !important; border: 2px solid transparent !important; } .setting-layout-color-group > .t-radio-button__label { display: inline-flex; } .tdesign-setting-close { position: fixed; bottom: 200px; right: 300px; } .setting-group-title { font-size: 14px; line-height: 22px; margin: 32px 0 24px; text-align: left; font-family: 'PingFang SC', var(--td-font-family); font-style: normal; font-weight: 500; color: var(--td-text-color-primary); } .setting-link { cursor: pointer; color: var(--td-brand-color); margin-bottom: 8px; } .setting-info { position: absolute; padding: 24px; bottom: 0; left: 0; line-height: 20px; font-size: 12px; text-align: center; color: var(--td-text-color-placeholder); width: 100%; background: var(--td-bg-color-container); } .setting-drawer-container .setting-container { padding-bottom: 100px; } .setting-drawer-container .t-radio-group.t-size-m { min-height: 32px; width: 100%; justify-content: space-between; align-items: center; } .setting-drawer-container .t-radio-group.t-size-m.side-mode-radio { justify-content: end; } .setting-drawer-container .t-radio-group.t-size-m .t-radio-button { height: auto; } .setting-drawer-container .setting-layout-drawer { display: flex; flex-direction: column; align-items: center; } .setting-drawer-container .setting-layout-drawer .t-radio-button { display: inline-flex; max-height: 78px; padding: 8px; border-radius: var(--td-radius-default); border: 2px solid var(--td-component-border); } .setting-drawer-container .setting-layout-drawer .t-radio-button > .t-radio-button__label { display: inline-flex; } .setting-drawer-container .setting-layout-drawer .t-is-checked { border: 2px solid var(--td-brand-color) !important; } .setting-drawer-container .setting-layout-drawer .t-form__controls-content { justify-content: end; } .setting-drawer-container .t-form__controls-content { justify-content: end; } .setting-route-theme .t-form__label { min-width: 310px !important; color: var(--td-text-color-secondary); } .setting-color-theme .setting-layout-drawer .t-radio-button { height: 32px; } .setting-color-theme .setting-layout-drawer:last-child { margin-right: 0; } .t-tag + .t-tag[data-v-c66cad7d] { margin-left: 10px; } .my-content-scrollbar[data-v-215d4deb] { overflow: scroll; /* 滚动条轨道 */ /* 滚动条滑块 */ /* 滑块在悬停时的样式 */ } .my-content-scrollbar[data-v-215d4deb]::-webkit-scrollbar { width: var(--v47b1d83a); /* 滚动条的宽度 */ height: var(--v47b1d83a); /* 横向滚动条的高度 */ background-color: transparent; } .my-content-scrollbar[data-v-215d4deb]::-webkit-scrollbar-track { background-color: var(--v7d526329); /* 轨道的背景色 */ border-radius: var(--v47b1d83a); /* 轨道的圆角 */ } .my-content-scrollbar[data-v-215d4deb]::-webkit-scrollbar-track:hover { background-color: var(--v7d526329); /* 轨道的背景色 */ } .my-content-scrollbar[data-v-215d4deb]::-webkit-scrollbar-corner { width: 0; } .my-content-scrollbar[data-v-215d4deb]::-webkit-scrollbar-thumb { border-radius: calc(var(--v47b1d83a) / 2); /* 滑块的圆角 */ border: calc((var(--v47b1d83a) - var(--v6a62f7e2)) / 2) solid transparent; background-clip: padding-box; background-color: var(--v5c3f7d04); /* 滑块的背景色 */ } .my-content-scrollbar[data-v-215d4deb]::-webkit-scrollbar-thumb:hover { background-color: var(--v39783b68); /* 滑块悬停时的背景色 */ } .rect-box[data-v-309beefd] { max-height: calc(100vh - 316px); overflow-x: hidden; position: relative; } .rect-select[data-v-309beefd] { position: absolute; box-sizing: border-box; border: 1px solid var(--td-brand-color); background-color: var(--td-brand-color-hover); opacity: 0.3; /* 边框虚线滚动动画特效 */ } .rect-select-animate[data-v-309beefd] { border: none; background: linear-gradient(90deg, var(--td-brand-color) 60%, transparent 60%) repeat-x left top / 10px 1px, linear-gradient(0deg, var(--td-brand-color) 60%, transparent 60%) repeat-y right top / 1px 10px, linear-gradient(90deg, var(--td-brand-color) 60%, transparent 60%) repeat-x right bottom / 10px 1px, linear-gradient(0deg, var(--td-brand-color) 60%, transparent 60%) repeat-y left bottom / 1px 10px, var(--td-brand-color-hover); animation: border-animate-309beefd 0.382s infinite linear; } @keyframes border-animate-309beefd { 0% { background-position: left top, right top, right bottom, left bottom; } 100% { background-position: left 10px top, right top 10px, right 10px bottom, left bottom 10px; } } .list-card[data-v-ca426770] { height: 100%; } .list-card-gallery[data-v-ca426770] { padding: var(--td-pop-padding-xl); background-color: var(--td-bg-color-container-hover); display: grid; grid-gap: 13.5px; grid-template-columns: repeat(auto-fill, minmax(var(--d004c5b6), 1fr)); -webkit-user-select: none; user-select: none; outline: none; } .list-card-gallery-responsive-image--fit[data-v-ca426770] { width: 100%; height: 100%; } .list-card-gallery-responsive-image[data-v-ca426770] { position: absolute; opacity: 1; } .list-card-gallery-responsive-image__img--cover[data-v-ca426770] { object-fit: cover; } .list-card-gallery-responsive-image__img--fit[data-v-ca426770] { width: 100%; height: 100%; } .list-card-gallery-figure[data-v-ca426770] { height: var(--d004c5b6); cursor: pointer; margin: 0; overflow: hidden; position: relative; } .list-card-gallery-figure__caption[data-v-ca426770] { background-color: hsl(220, 10%, 10%); color: hsl(0, 0%, 100%); font-size: 12px; left: 0; padding: 4px; position: absolute; text-transform: uppercase; line-height: 1; top: 0; z-index: 1; } .list-card-gallery-figure__content[data-v-ca426770] { margin: -1px; height: calc(100% + 1px); width: calc(100% + 1px); display: flex; flex-direction: column; justify-content: center; align-items: center; position: relative; } .list-card-gallery-item[data-v-ca426770] { color: var(--td-text-color-primary); box-sizing: border-box; min-width: var(--d004c5b6); } .list-card-gallery-item[data-v-ca426770]:focus-visible { outline: none; } .list-card-gallery-item__label[data-v-ca426770] { background-color: var(--td-bg-color-container); box-shadow: var(--td-shadow-1); border-radius: var(--td-radius-default); display: block; overflow: hidden; position: relative; outline: 1px solid rgba(0, 0, 0, 0); transition: outline 200ms; } .list-card-gallery-item__label--active[data-v-ca426770] { outline: 1px solid var(--td-brand-color); } .list-card-gallery-item__details[data-v-ca426770] { border-top: 1px solid hsl(220, 10%, 90%); cursor: pointer; display: flex; align-items: center; padding: calc(8px * 0.7) 8px; position: relative; gap: 4px; } .list-card-gallery-item__name[data-v-ca426770] { font-size: 11.2px; overflow: hidden; position: relative; text-overflow: ellipsis; white-space: nowrap; flex-grow: 1; } .list-card-gallery-item__checkmark[data-v-ca426770] { flex-shrink: 0; opacity: 0; color: hsl(220, 10%, 70%); transition: color 200ms, opacity 200ms; isolation: isolate; } .list-card-gallery-item__checkmark--active[data-v-ca426770] { color: var(--td-brand-color); opacity: 1; } .list-card-gallery-item:hover .list-card-gallery-item__checkmark[data-v-ca426770] { opacity: 1; } .gallery-btn--plain[data-v-ca426770]:hover { --btn-background-color: hsla(220, 10%, 60%, 0.1); } .gallery-btn--plain[data-v-ca426770]:active { --btn-background-color: hsla(220, 10%, 60%, 0.2); } .gallery-btn--neutral[data-v-ca426770] { --btn-background-color-plain-hover: hsla(220, 10%, 60%, 0.1); } .gallery-btn[data-v-ca426770] { --btn-border-color: transparent; --btn-padding-vertical: 8px; --btn-padding-horizontal: 12px; --btn-font-size: 13.6px; --btn-line-height: 20px; border-radius: 7px; cursor: pointer; display: inline-flex; justify-content: center; align-items: center; -webkit-user-select: none; user-select: none; gap: 4px; transition: background-color 200ms, opacity 200ms; font-weight: 500; padding: 2.4px; background-color: var(--btn-background-color); border: 1px solid transparent; max-width: 100%; } .gallery-icon--base[data-v-ca426770] { height: 16px; min-width: 16px; } .gallery-icon[data-v-ca426770] { display: block; fill: currentColor; max-width: initial; transition: color 200ms; } .gallery-doc-icon--unknown[data-v-ca426770] { background-color: #f5f5f5; } .gallery-doc-icon--archive[data-v-ca426770] { background-color: #f4e9f5; } .gallery-doc-icon--empty[data-v-ca426770] { background-color: #fff; } .gallery-doc-icon--excel[data-v-ca426770] { background-color: #e8f5ef; } .gallery-doc-icon--image[data-v-ca426770] { background-color: #f5f5f5; } .gallery-doc-icon--video[data-v-ca426770] { background-color: #e5f5f7; } .gallery-doc-icon--audio[data-v-ca426770] { background-color: #fff6ea; } .gallery-doc-icon--pdf[data-v-ca426770] { background-color: #ffeae8; } .gallery-doc-icon--ppt[data-v-ca426770] { background-color: #f9ebe8; } .gallery-doc-icon--text[data-v-ca426770] { background-color: #f8f8fb; } .gallery-doc-icon--word[data-v-ca426770] { background-color: #e9eff7; } .gallery-doc-icon[data-v-ca426770] { height: 100%; width: 100%; display: flex; justify-content: center; align-items: center; } .gallery-doc-icon__icon[data-v-ca426770] { width: 56px; height: 66px; } .left-tree[data-v-c707feb3] .t-tree__empty { display: flex; justify-content: center; min-height: 200px; } .image_animation[data-v-2ceddd4e] img, .image_animation[data-v-2ceddd4e] .overlay { transition: all 0.3s; transform: scale(var(--v04396fb3)); } .image-preview[data-v-2ceddd4e] { cursor: unset; } .image-preview[data-v-2ceddd4e] img { vertical-align: top; } .image-preview .overlay[data-v-2ceddd4e] { container: overlay-container / size; } .image-preview .overlay .preview-text[data-v-2ceddd4e] { display: inline; } @container (width <= 50px) { .image-preview .overlay .preview-text[data-v-2ceddd4e] { display: none; } .image-preview .t-tag .t-icon[data-v-2ceddd4e] { margin-right: 0; } } [data-v-2ceddd4e] .t-image__overlay-content { border-radius: inherit; } #nprogress .bar[data-v-53a23b5d] { background: var(--td-brand-color) !important; }