@charset "UTF-8";/* 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); } } .loading-icon[data-v-93a4fb2d] { width: 30px; }/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */ /* Document ========================================================================== */ /** * 1. Correct the line height in all browsers. * 2. Prevent adjustments of font size after orientation changes in iOS. */ html { line-height: 1.15; /* 1 */ -webkit-text-size-adjust: 100%; /* 2 */ -webkit-font-smoothing: antialiased; /* chrome、safari */ -moz-osx-font-smoothing: grayscale; /* firefox */ } /* Sections ========================================================================== */ /** * Remove the margin in all browsers. */ body { margin: 0; } /** * Render the `main` element consistently in IE. */ main { display: block; } /** * Correct the font size and margin on `h1` elements within `section` and * `article` contexts in Chrome, Firefox, and Safari. */ h1 { margin: 0.67em 0; font-size: 2em; } /* Grouping content ========================================================================== */ /** * 1. Add the correct box sizing in Firefox. * 2. Show the overflow in Edge and IE. */ hr { box-sizing: content-box; /* 1 */ height: 0; /* 1 */ overflow: visible; /* 2 */ } /** * 1. Correct the inheritance and scaling of font size in all browsers. * 2. Correct the odd `em` font sizing in all browsers. */ pre { font-size: 1em; /* 2 */ font-family: monospace, monospace; /* 1 */ } /* Text-level semantics ========================================================================== */ /** * Remove the gray background on active links in IE 10. */ a { background-color: transparent; } /** * 1. Remove the bottom border in Chrome 57- * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari. */ abbr[title] { text-decoration: underline; /* 2 */ text-decoration: underline dotted; /* 2 */ border-bottom: none; /* 1 */ } /** * Add the correct font weight in Chrome, Edge, and Safari. */ b, strong { font-weight: bolder; } /** * 1. Correct the inheritance and scaling of font size in all browsers. * 2. Correct the odd `em` font sizing in all browsers. */ code, kbd, samp { font-size: 1em; /* 2 */ font-family: monospace, monospace; /* 1 */ } /** * Add the correct font size in all browsers. */ small { font-size: 80%; } /** * Prevent `sub` and `sup` elements from affecting the line height in * all browsers. */ sub, sup { position: relative; font-size: 75%; line-height: 0; vertical-align: baseline; } sub { bottom: -0.25em; } sup { top: -0.5em; } /* Embedded content ========================================================================== */ /** * Remove the border on images inside links in IE 10. */ img { border-style: none; } /* Forms ========================================================================== */ /** * 1. Change the font styles in all browsers. * 2. Remove the margin in Firefox and Safari. */ button, input, optgroup, select, textarea { margin: 0; /* 2 */ font-size: 100%; /* 1 */ font-family: inherit; /* 1 */ line-height: 1.15; /* 1 */ } /** * Show the overflow in IE. * 1. Show the overflow in Edge. */ button, input { /* 1 */ overflow: visible; } /** * Remove the inheritance of text transform in Edge, Firefox, and IE. * 1. Remove the inheritance of text transform in Firefox. */ button, select { /* 1 */ text-transform: none; } /** * Correct the inability to style clickable types in iOS and Safari. */ button, [type='button'], [type='reset'], [type='submit'] { -webkit-appearance: button; } /** * Remove the inner border and padding in Firefox. */ button::-moz-focus-inner, [type='button']::-moz-focus-inner, [type='reset']::-moz-focus-inner, [type='submit']::-moz-focus-inner { padding: 0; border-style: none; } /** * Restore the focus styles unset by the previous rule. */ button:-moz-focusring, [type='button']:-moz-focusring, [type='reset']:-moz-focusring, [type='submit']:-moz-focusring { outline: 1px dotted ButtonText; } /** * Correct the padding in Firefox. */ fieldset { padding: 0.35em 0.75em 0.625em; } /** * 1. Correct the text wrapping in Edge and IE. * 2. Correct the color inheritance from `fieldset` elements in IE. * 3. Remove the padding so developers are not caught out when they zero out * `fieldset` elements in all browsers. */ legend { display: table; /* 1 */ box-sizing: border-box; /* 1 */ max-width: 100%; /* 1 */ padding: 0; /* 3 */ color: inherit; /* 2 */ white-space: normal; /* 1 */ } /** * Add the correct vertical alignment in Chrome, Firefox, and Opera. */ progress { vertical-align: baseline; } /** * Remove the default vertical scrollbar in IE 10+. */ textarea { overflow: auto; } /** * 1. Add the correct box sizing in IE 10. * 2. Remove the padding in IE 10. */ [type='checkbox'], [type='radio'] { box-sizing: border-box; /* 1 */ padding: 0; /* 2 */ } /** * Correct the cursor style of increment and decrement buttons in Chrome. */ [type='number']::-webkit-inner-spin-button, [type='number']::-webkit-outer-spin-button { height: auto; } /** * 1. Correct the odd appearance in Chrome and Safari. * 2. Correct the outline style in Safari. */ [type='search'] { outline-offset: -2px; /* 2 */ -webkit-appearance: textfield; /* 1 */ } /** * Remove the inner padding in Chrome and Safari on macOS. */ [type='search']::-webkit-search-decoration { -webkit-appearance: none; } /** * 1. Correct the inability to style clickable types in iOS and Safari. * 2. Change font properties to `inherit` in Safari. */ ::-webkit-file-upload-button { font: inherit; /* 2 */ -webkit-appearance: button; /* 1 */ } /* Interactive ========================================================================== */ /* * Add the correct display in Edge, IE 10+, and Firefox. */ details { display: block; } /* * Add the correct display in all browsers. */ summary { display: list-item; } /* Misc ========================================================================== */ /** * Add the correct display in IE 10+. */ template { display: none; } /** * Add the correct display in IE 10. */ [hidden] { display: none; } .arco-icon { display: inline-block; width: 1em; height: 1em; color: inherit; font-style: normal; vertical-align: -2px; outline: none; stroke: currentColor; } .arco-icon-loading, .arco-icon-spin { animation: arco-loading-circle 1s infinite cubic-bezier(0, 0, 1, 1); } @keyframes arco-loading-circle { 0% { transform: rotate(0); } 100% { transform: rotate(360deg); } } .arco-icon-hover { position: relative; display: inline-block; cursor: pointer; line-height: 12px; } .arco-icon-hover .arco-icon { position: relative; } .arco-icon-hover::before { position: absolute; display: block; box-sizing: border-box; background-color: transparent; border-radius: var(--border-radius-circle); transition: background-color 0.1s cubic-bezier(0, 0, 1, 1); content: ''; } .arco-icon-hover:hover::before { background-color: var(--color-fill-2); } .arco-icon-hover.arco-icon-hover-disabled::before { opacity: 0; } .arco-icon-hover::before { top: 50%; left: 50%; width: 20px; height: 20px; transform: translate(-50%, -50%); } .arco-icon-hover-size-mini { line-height: 12px; } .arco-icon-hover-size-mini::before { top: 50%; left: 50%; width: 20px; height: 20px; transform: translate(-50%, -50%); } .arco-icon-hover-size-small { line-height: 12px; } .arco-icon-hover-size-small::before { top: 50%; left: 50%; width: 20px; height: 20px; transform: translate(-50%, -50%); } .arco-icon-hover-size-large { line-height: 12px; } .arco-icon-hover-size-large::before { top: 50%; left: 50%; width: 24px; height: 24px; transform: translate(-50%, -50%); } .arco-icon-hover-size-huge { line-height: 12px; } .arco-icon-hover-size-huge::before { top: 50%; left: 50%; width: 24px; height: 24px; transform: translate(-50%, -50%); } .fade-in-standard-enter-from, .fade-in-standard-appear-from { opacity: 0; } .fade-in-standard-enter-to, .fade-in-standard-appear-to { opacity: 1; } .fade-in-standard-enter-active, .fade-in-standard-appear-active { transition: opacity 0.3s cubic-bezier(0.34, 0.69, 0.1, 1); } .fade-in-standard-leave-from { opacity: 1; } .fade-in-standard-leave-to { opacity: 0; } .fade-in-standard-leave-active { transition: opacity 0.3s cubic-bezier(0.34, 0.69, 0.1, 1); } .fade-in-enter-from, .fade-in-appear-from { opacity: 0; } .fade-in-enter-to, .fade-in-appear-to { opacity: 1; } .fade-in-enter-active, .fade-in-appear-active { transition: opacity 0.1s cubic-bezier(0, 0, 1, 1); } .fade-in-leave-from { opacity: 1; } .fade-in-leave-to { opacity: 0; } .fade-in-leave-active { transition: opacity 0.1s cubic-bezier(0, 0, 1, 1); } .zoom-in-enter-from, .zoom-in-appear-from { transform: scale(0.5, 0.5); opacity: 0; } .zoom-in-enter-to, .zoom-in-appear-to { transform: scale(1, 1); opacity: 1; } .zoom-in-enter-active, .zoom-in-appear-active { transition: opacity 0.3s cubic-bezier(0.34, 0.69, 0.1, 1), transform 0.3s cubic-bezier(0.34, 0.69, 0.1, 1); } .zoom-in-leave-from { transform: scale(1, 1); opacity: 1; } .zoom-in-leave-to { transform: scale(0.5, 0.5); opacity: 0; } .zoom-in-leave-active { transition: opacity 0.3s cubic-bezier(0.34, 0.69, 0.1, 1), transform 0.3s cubic-bezier(0.34, 0.69, 0.1, 1); } .zoom-in-fade-out-enter-from, .zoom-in-fade-out-appear-from { transform: scale(0.5, 0.5); opacity: 0; } .zoom-in-fade-out-enter-to, .zoom-in-fade-out-appear-to { transform: scale(1, 1); opacity: 1; } .zoom-in-fade-out-enter-active, .zoom-in-fade-out-appear-active { transition: opacity 0.3s cubic-bezier(0.3, 1.3, 0.3, 1), transform 0.3s cubic-bezier(0.3, 1.3, 0.3, 1); } .zoom-in-fade-out-leave-from { transform: scale(1, 1); opacity: 1; } .zoom-in-fade-out-leave-to { transform: scale(0.5, 0.5); opacity: 0; } .zoom-in-fade-out-leave-active { transition: opacity 0.3s cubic-bezier(0.3, 1.3, 0.3, 1), transform 0.3s cubic-bezier(0.3, 1.3, 0.3, 1); } .zoom-in-big-enter-from, .zoom-in-big-appear-from { transform: scale(0.5, 0.5); opacity: 0; } .zoom-in-big-enter-to, .zoom-in-big-appear-to { transform: scale(1, 1); opacity: 1; } .zoom-in-big-enter-active, .zoom-in-big-appear-active { transition: opacity 0.2s cubic-bezier(0, 0, 1, 1), transform 0.2s cubic-bezier(0, 0, 1, 1); } .zoom-in-big-leave-from { transform: scale(1, 1); opacity: 1; } .zoom-in-big-leave-to { transform: scale(0.2, 0.2); opacity: 0; } .zoom-in-big-leave-active { transition: opacity 0.2s cubic-bezier(0, 0, 1, 1), transform 0.2s cubic-bezier(0, 0, 1, 1); } .zoom-in-left-enter-from, .zoom-in-left-appear-from { transform: scale(0.1, 0.1); opacity: 0.1; } .zoom-in-left-enter-to, .zoom-in-left-appear-to { transform: scale(1, 1); opacity: 1; } .zoom-in-left-enter-active, .zoom-in-left-appear-active { transform-origin: 0 50%; transition: opacity 0.3s cubic-bezier(0, 0, 1, 1), transform 0.3s cubic-bezier(0.3, 1.3, 0.3, 1); } .zoom-in-left-leave-from { transform: scale(1, 1); opacity: 1; } .zoom-in-left-leave-to { transform: scale(0.1, 0.1); opacity: 0.1; } .zoom-in-left-leave-active { transform-origin: 0 50%; transition: opacity 0.3s cubic-bezier(0, 0, 1, 1), transform 0.3s cubic-bezier(0.3, 1.3, 0.3, 1); } .zoom-in-top-enter-from, .zoom-in-top-appear-from { transform: scaleY(0.8) translateZ(0); opacity: 0; } .zoom-in-top-enter-to, .zoom-in-top-appear-to { transform: scaleY(1) translateZ(0); opacity: 1; } .zoom-in-top-enter-active, .zoom-in-top-appear-active { transform-origin: 0 0; transition: transform 0.3s cubic-bezier(0.3, 1.3, 0.3, 1), opacity 0.3s cubic-bezier(0.3, 1.3, 0.3, 1); } .zoom-in-top-leave-from { transform: scaleY(1) translateZ(0); opacity: 1; } .zoom-in-top-leave-to { transform: scaleY(0.8) translateZ(0); opacity: 0; } .zoom-in-top-leave-active { transform-origin: 0 0; transition: transform 0.3s cubic-bezier(0.3, 1.3, 0.3, 1), opacity 0.3s cubic-bezier(0.3, 1.3, 0.3, 1); } .zoom-in-bottom-enter-from, .zoom-in-bottom-appear-from { transform: scaleY(0.8) translateZ(0); opacity: 0; } .zoom-in-bottom-enter-to, .zoom-in-bottom-appear-to { transform: scaleY(1) translateZ(0); opacity: 1; } .zoom-in-bottom-enter-active, .zoom-in-bottom-appear-active { transform-origin: 100% 100%; transition: transform 0.3s cubic-bezier(0.3, 1.3, 0.3, 1), opacity 0.3s cubic-bezier(0.3, 1.3, 0.3, 1); } .zoom-in-bottom-leave-from { transform: scaleY(1) translateZ(0); opacity: 1; } .zoom-in-bottom-leave-to { transform: scaleY(0.8) translateZ(0); opacity: 0; } .zoom-in-bottom-leave-active { transform-origin: 100% 100%; transition: transform 0.3s cubic-bezier(0.3, 1.3, 0.3, 1), opacity 0.3s cubic-bezier(0.3, 1.3, 0.3, 1); } .slide-dynamic-origin-enter-from, .slide-dynamic-origin-appear-from { transform: scaleY(0.9); transform-origin: 0 0; opacity: 0; } .slide-dynamic-origin-enter-to, .slide-dynamic-origin-appear-to { transform: scaleY(1); transform-origin: 0 0; opacity: 1; } .slide-dynamic-origin-enter-active, .slide-dynamic-origin-appear-active { transition: transform 0.2s cubic-bezier(0.34, 0.69, 0.1, 1), opacity 0.2s cubic-bezier(0.34, 0.69, 0.1, 1); } .slide-dynamic-origin-leave-from { transform: scaleY(1); transform-origin: 0 0; opacity: 1; } .slide-dynamic-origin-leave-to { transform: scaleY(0.9); transform-origin: 0 0; opacity: 0; } .slide-dynamic-origin-leave-active { transition: transform 0.2s cubic-bezier(0.34, 0.69, 0.1, 1), opacity 0.2s cubic-bezier(0.34, 0.69, 0.1, 1); } .slide-left-enter-from, .slide-left-appear-from { transform: translateX(-100%); } .slide-left-enter-to, .slide-left-appear-to { transform: translateX(0); } .slide-left-enter-active, .slide-left-appear-active { transition: transform 0.3s cubic-bezier(0.34, 0.69, 0.1, 1); } .slide-left-leave-from { transform: translateX(0); } .slide-left-leave-to { transform: translateX(-100%); } .slide-left-leave-active { transition: transform 0.3s cubic-bezier(0.34, 0.69, 0.1, 1); } .slide-right-enter-from, .slide-right-appear-from { transform: translateX(100%); } .slide-right-enter-to, .slide-right-appear-to { transform: translateX(0); } .slide-right-enter-active, .slide-right-appear-active { transition: transform 0.3s cubic-bezier(0.34, 0.69, 0.1, 1); } .slide-right-leave-from { transform: translateX(0); } .slide-right-leave-to { transform: translateX(100%); } .slide-right-leave-active { transition: transform 0.3s cubic-bezier(0.34, 0.69, 0.1, 1); } .slide-top-enter-from, .slide-top-appear-from { transform: translateY(-100%); } .slide-top-enter-to, .slide-top-appear-to { transform: translateY(0); } .slide-top-enter-active, .slide-top-appear-active { transition: transform 0.3s cubic-bezier(0.34, 0.69, 0.1, 1); } .slide-top-leave-from { transform: translateY(0); } .slide-top-leave-to { transform: translateY(-100%); } .slide-top-leave-active { transition: transform 0.3s cubic-bezier(0.34, 0.69, 0.1, 1); } .slide-bottom-enter-from, .slide-bottom-appear-from { transform: translateY(100%); } .slide-bottom-enter-to, .slide-bottom-appear-to { transform: translateY(0); } .slide-bottom-enter-active, .slide-bottom-appear-active { transition: transform 0.3s cubic-bezier(0.34, 0.69, 0.1, 1); } .slide-bottom-leave-from { transform: translateY(0); } .slide-bottom-leave-to { transform: translateY(100%); } .slide-bottom-leave-active { transition: transform 0.3s cubic-bezier(0.34, 0.69, 0.1, 1); } /******** borderSize *******/ /******** borderStyle *******/ /******** radius *******/ /******** shadow distance *******/ /******** size *******/ /******** spacing *******/ /******** shadow *******/ /******** opacity *******/ /******** fontSize *******/ /******** fontWeight ********/ /******** Primary *******/ /******** success *******/ /******** warning *******/ /******** danger *******/ /******** link *******/ /******** radius *******/ /********* icon hover *********/ body { --red-1: 255,236,232; --red-2: 253,205,197; --red-3: 251,172,163; --red-4: 249,137,129; --red-5: 247,101,96; --red-6: 245,63,63; --red-7: 203,39,45; --red-8: 161,21,30; --red-9: 119,8,19; --red-10: 77,0,10; --orangered-1: 255,243,232; --orangered-2: 253,221,195; --orangered-3: 252,197,159; --orangered-4: 250,172,123; --orangered-5: 249,144,87; --orangered-6: 247,114,52; --orangered-7: 204,81,32; --orangered-8: 162,53,17; --orangered-9: 119,31,6; --orangered-10: 77,14,0; --orange-1: 255,247,232; --orange-2: 255,228,186; --orange-3: 255,207,139; --orange-4: 255,182,93; --orange-5: 255,154,46; --orange-6: 255,125,0; --orange-7: 210,95,0; --orange-8: 166,69,0; --orange-9: 121,46,0; --orange-10: 77,27,0; --gold-1: 255,252,232; --gold-2: 253,244,191; --gold-3: 252,233,150; --gold-4: 250,220,109; --gold-5: 249,204,69; --gold-6: 247,186,30; --gold-7: 204,146,19; --gold-8: 162,109,10; --gold-9: 119,75,4; --gold-10: 77,45,0; --yellow-1: 254,255,232; --yellow-2: 254,254,190; --yellow-3: 253,250,148; --yellow-4: 252,242,107; --yellow-5: 251,232,66; --yellow-6: 250,220,25; --yellow-7: 207,175,15; --yellow-8: 163,132,8; --yellow-9: 120,93,3; --yellow-10: 77,56,0; --lime-1: 252,255,232; --lime-2: 237,248,187; --lime-3: 220,241,144; --lime-4: 201,233,104; --lime-5: 181,226,65; --lime-6: 159,219,29; --lime-7: 126,183,18; --lime-8: 95,148,10; --lime-9: 67,112,4; --lime-10: 42,77,0; --green-1: 232,255,234; --green-2: 175,240,181; --green-3: 123,225,136; --green-4: 76,210,99; --green-5: 35,195,67; --green-6: 0,180,42; --green-7: 0,154,41; --green-8: 0,128,38; --green-9: 0,102,34; --green-10: 0,77,28; --cyan-1: 232,255,251; --cyan-2: 183,244,236; --cyan-3: 137,233,224; --cyan-4: 94,223,214; --cyan-5: 55,212,207; --cyan-6: 20,201,201; --cyan-7: 13,165,170; --cyan-8: 7,130,139; --cyan-9: 3,97,108; --cyan-10: 0,66,77; --blue-1: 232,247,255; --blue-2: 195,231,254; --blue-3: 159,212,253; --blue-4: 123,192,252; --blue-5: 87,169,251; --blue-6: 52,145,250; --blue-7: 32,108,207; --blue-8: 17,75,163; --blue-9: 6,48,120; --blue-10: 0,26,77; --arcoblue-1: 232,243,255; --arcoblue-2: 190,218,255; --arcoblue-3: 148,191,255; --arcoblue-4: 106,161,255; --arcoblue-5: 64,128,255; --arcoblue-6: 22,93,255; --arcoblue-7: 14,66,210; --arcoblue-8: 7,44,166; --arcoblue-9: 3,26,121; --arcoblue-10: 0,13,77; --purple-1: 245,232,255; --purple-2: 221,190,246; --purple-3: 195,150,237; --purple-4: 168,113,227; --purple-5: 141,78,218; --purple-6: 114,46,209; --purple-7: 85,29,176; --purple-8: 60,16,143; --purple-9: 39,6,110; --purple-10: 22,0,77; --pinkpurple-1: 255,232,251; --pinkpurple-2: 247,186,239; --pinkpurple-3: 240,142,230; --pinkpurple-4: 232,101,223; --pinkpurple-5: 225,62,219; --pinkpurple-6: 217,26,217; --pinkpurple-7: 176,16,182; --pinkpurple-8: 138,9,147; --pinkpurple-9: 101,3,112; --pinkpurple-10: 66,0,77; --magenta-1: 255,232,241; --magenta-2: 253,194,219; --magenta-3: 251,157,199; --magenta-4: 249,121,183; --magenta-5: 247,84,168; --magenta-6: 245,49,157; --magenta-7: 203,30,131; --magenta-8: 161,16,105; --magenta-9: 119,6,79; --magenta-10: 77,0,52; --gray-1: 247,248,250; --gray-2: 242,243,245; --gray-3: 229,230,235; --gray-4: 201,205,212; --gray-5: 169,174,184; --gray-6: 134,144,156; --gray-7: 107,119,133; --gray-8: 78,89,105; --gray-9: 39,46,59; --gray-10: 29,33,41; --success-1: var(--green-1); --success-2: var(--green-2); --success-3: var(--green-3); --success-4: var(--green-4); --success-5: var(--green-5); --success-6: var(--green-6); --success-7: var(--green-7); --success-8: var(--green-8); --success-9: var(--green-9); --success-10: var(--green-10); --primary-1: var(--arcoblue-1); --primary-2: var(--arcoblue-2); --primary-3: var(--arcoblue-3); --primary-4: var(--arcoblue-4); --primary-5: var(--arcoblue-5); --primary-6: var(--arcoblue-6); --primary-7: var(--arcoblue-7); --primary-8: var(--arcoblue-8); --primary-9: var(--arcoblue-9); --primary-10: var(--arcoblue-10); --danger-1: var(--red-1); --danger-2: var(--red-2); --danger-3: var(--red-3); --danger-4: var(--red-4); --danger-5: var(--red-5); --danger-6: var(--red-6); --danger-7: var(--red-7); --danger-8: var(--red-8); --danger-9: var(--red-9); --danger-10: var(--red-10); --warning-1: var(--orange-1); --warning-2: var(--orange-2); --warning-3: var(--orange-3); --warning-4: var(--orange-4); --warning-5: var(--orange-5); --warning-6: var(--orange-6); --warning-7: var(--orange-7); --warning-8: var(--orange-8); --warning-9: var(--orange-9); --warning-10: var(--orange-10); --link-1: var(--arcoblue-1); --link-2: var(--arcoblue-2); --link-3: var(--arcoblue-3); --link-4: var(--arcoblue-4); --link-5: var(--arcoblue-5); --link-6: var(--arcoblue-6); --link-7: var(--arcoblue-7); --link-8: var(--arcoblue-8); --link-9: var(--arcoblue-9); --link-10: var(--arcoblue-10); } body[arco-theme='dark'], .app-menu-dark { --red-1: 77,0,10; --red-2: 119,6,17; --red-3: 161,22,31; --red-4: 203,46,52; --red-5: 245,78,78; --red-6: 247,105,101; --red-7: 249,141,134; --red-8: 251,176,167; --red-9: 253,209,202; --red-10: 255,240,236; --orangered-1: 77,14,0; --orangered-2: 119,30,5; --orangered-3: 162,55,20; --orangered-4: 204,87,41; --orangered-5: 247,126,69; --orangered-6: 249,146,90; --orangered-7: 250,173,125; --orangered-8: 252,198,161; --orangered-9: 253,222,197; --orangered-10: 255,244,235; --orange-1: 77,27,0; --orange-2: 121,48,4; --orange-3: 166,75,10; --orange-4: 210,105,19; --orange-5: 255,141,31; --orange-6: 255,150,38; --orange-7: 255,179,87; --orange-8: 255,205,135; --orange-9: 255,227,184; --orange-10: 255,247,232; --gold-1: 77,45,0; --gold-2: 119,75,4; --gold-3: 162,111,15; --gold-4: 204,150,31; --gold-5: 247,192,52; --gold-6: 249,204,68; --gold-7: 250,220,108; --gold-8: 252,233,149; --gold-9: 253,244,190; --gold-10: 255,252,232; --yellow-1: 77,56,0; --yellow-2: 120,94,7; --yellow-3: 163,134,20; --yellow-4: 207,179,37; --yellow-5: 250,225,60; --yellow-6: 251,233,75; --yellow-7: 252,243,116; --yellow-8: 253,250,157; --yellow-9: 254,254,198; --yellow-10: 254,255,240; --lime-1: 42,77,0; --lime-2: 68,112,6; --lime-3: 98,148,18; --lime-4: 132,183,35; --lime-5: 168,219,57; --lime-6: 184,226,75; --lime-7: 203,233,112; --lime-8: 222,241,152; --lime-9: 238,248,194; --lime-10: 253,255,238; --green-1: 0,77,28; --green-2: 4,102,37; --green-3: 10,128,45; --green-4: 18,154,55; --green-5: 29,180,64; --green-6: 39,195,70; --green-7: 80,210,102; --green-8: 126,225,139; --green-9: 178,240,183; --green-10: 235,255,236; --cyan-1: 0,66,77; --cyan-2: 6,97,108; --cyan-3: 17,131,139; --cyan-4: 31,166,170; --cyan-5: 48,201,201; --cyan-6: 63,212,207; --cyan-7: 102,223,215; --cyan-8: 144,233,225; --cyan-9: 190,244,237; --cyan-10: 240,255,252; --blue-1: 0,26,77; --blue-2: 5,47,120; --blue-3: 19,76,163; --blue-4: 41,113,207; --blue-5: 70,154,250; --blue-6: 90,170,251; --blue-7: 125,193,252; --blue-8: 161,213,253; --blue-9: 198,232,254; --blue-10: 234,248,255; --arcoblue-1: 0,13,77; --arcoblue-2: 4,27,121; --arcoblue-3: 14,50,166; --arcoblue-4: 29,77,210; --arcoblue-5: 48,111,255; --arcoblue-6: 60,126,255; --arcoblue-7: 104,159,255; --arcoblue-8: 147,190,255; --arcoblue-9: 190,218,255; --arcoblue-10: 234,244,255; --purple-1: 22,0,77; --purple-2: 39,6,110; --purple-3: 62,19,143; --purple-4: 90,37,176; --purple-5: 123,61,209; --purple-6: 142,81,218; --purple-7: 169,116,227; --purple-8: 197,154,237; --purple-9: 223,194,246; --purple-10: 247,237,255; --pinkpurple-1: 66,0,77; --pinkpurple-2: 101,3,112; --pinkpurple-3: 138,13,147; --pinkpurple-4: 176,27,182; --pinkpurple-5: 217,46,217; --pinkpurple-6: 225,61,219; --pinkpurple-7: 232,102,223; --pinkpurple-8: 240,146,230; --pinkpurple-9: 247,193,240; --pinkpurple-10: 255,242,253; --magenta-1: 77,0,52; --magenta-2: 119,8,80; --magenta-3: 161,23,108; --magenta-4: 203,43,136; --magenta-5: 245,69,166; --magenta-6: 247,86,169; --magenta-7: 249,122,184; --magenta-8: 251,158,200; --magenta-9: 253,195,219; --magenta-10: 255,232,241; --gray-1: 23,23,26; --gray-2: 46,46,48; --gray-3: 72,72,73; --gray-4: 95,95,96; --gray-5: 120,120,122; --gray-6: 146,146,147; --gray-7: 171,171,172; --gray-8: 197,197,197; --gray-9: 223,223,223; --gray-10: 246,246,246; --primary-1: var(--arcoblue-1); --primary-2: var(--arcoblue-2); --primary-3: var(--arcoblue-3); --primary-4: var(--arcoblue-4); --primary-5: var(--arcoblue-5); --primary-6: var(--arcoblue-6); --primary-7: var(--arcoblue-7); --primary-8: var(--arcoblue-8); --primary-9: var(--arcoblue-9); --primary-10: var(--arcoblue-10); --success-1: var(--green-1); --success-2: var(--green-2); --success-3: var(--green-3); --success-4: var(--green-4); --success-5: var(--green-5); --success-6: var(--green-6); --success-7: var(--green-7); --success-8: var(--green-8); --success-9: var(--green-9); --success-10: var(--green-10); --danger-1: var(--red-1); --danger-2: var(--red-2); --danger-3: var(--red-3); --danger-4: var(--red-4); --danger-5: var(--red-5); --danger-6: var(--red-6); --danger-7: var(--red-7); --danger-8: var(--red-8); --danger-9: var(--red-9); --danger-10: var(--red-10); --warning-1: var(--orange-1); --warning-2: var(--orange-2); --warning-3: var(--orange-3); --warning-4: var(--orange-4); --warning-5: var(--orange-5); --warning-6: var(--orange-6); --warning-7: var(--orange-7); --warning-8: var(--orange-8); --warning-9: var(--orange-9); --warning-10: var(--orange-10); --link-1: var(--arcoblue-1); --link-2: var(--arcoblue-2); --link-3: var(--arcoblue-3); --link-4: var(--arcoblue-4); --link-5: var(--arcoblue-5); --link-6: var(--arcoblue-6); --link-7: var(--arcoblue-7); --link-8: var(--arcoblue-8); --link-9: var(--arcoblue-9); --link-10: var(--arcoblue-10); } body { --color-white: #ffffff; --color-black: #000000; --color-border: rgb(var(--gray-3)); --color-bg-popup: var(--color-bg-5); --color-bg-1: #ffffff; --color-bg-2: #ffffff; --color-bg-3: #ffffff; --color-bg-4: #ffffff; --color-bg-5: #ffffff; --color-bg-white: #ffffff; --color-neutral-1: rgb(var(--gray-1)); --color-neutral-2: rgb(var(--gray-2)); --color-neutral-3: rgb(var(--gray-3)); --color-neutral-4: rgb(var(--gray-4)); --color-neutral-5: rgb(var(--gray-5)); --color-neutral-6: rgb(var(--gray-6)); --color-neutral-7: rgb(var(--gray-7)); --color-neutral-8: rgb(var(--gray-8)); --color-neutral-9: rgb(var(--gray-9)); --color-neutral-10: rgb(var(--gray-10)); --color-text-1: #121314; --color-text-2: #5c5c5c; --color-text-3: #909399; --color-text-4: #c2c2c2; --color-border-1: #ebeef5; --color-border-2: #e5e6eb; --color-border-3: #dcdfe6; --color-border-4: #cdd0d6; --color-fill-1: #fafafa; --color-fill-2: var(--color-neutral-2); --color-fill-3: var(--color-neutral-3); --color-fill-4: var(--color-neutral-4); --color-primary-light-1: rgb(var(--primary-1)); --color-primary-light-2: rgb(var(--primary-2)); --color-primary-light-3: rgb(var(--primary-3)); --color-primary-light-4: rgb(var(--primary-4)); --color-link-light-1: rgb(var(--link-1)); --color-link-light-2: rgb(var(--link-2)); --color-link-light-3: rgb(var(--link-3)); --color-link-light-4: rgb(var(--link-4)); --color-secondary: var(--color-neutral-2); --color-secondary-hover: var(--color-neutral-3); --color-secondary-active: var(--color-neutral-4); --color-secondary-disabled: var(--color-neutral-1); --color-danger-light-1: rgb(var(--danger-1)); --color-danger-light-2: rgb(var(--danger-2)); --color-danger-light-3: rgb(var(--danger-3)); --color-danger-light-4: rgb(var(--danger-4)); --color-success-light-1: rgb(var(--success-1)); --color-success-light-2: rgb(var(--success-2)); --color-success-light-3: rgb(var(--success-3)); --color-success-light-4: rgb(var(--success-4)); --color-warning-light-1: rgb(var(--warning-1)); --color-warning-light-2: rgb(var(--warning-2)); --color-warning-light-3: rgb(var(--warning-3)); --color-warning-light-4: rgb(var(--warning-4)); --border-radius-none: 0; --border-radius-small: 4px; --border-radius-medium: 6px; --border-radius-large: 8px; --border-radius-circle: 50%; --color-tooltip-bg: rgb(var(--gray-10)); --color-spin-layer-bg: rgba(255, 255, 255, 0.6); --color-menu-dark-bg: #232324; --color-menu-light-bg: #ffffff; --color-menu-dark-hover: rgba(255, 255, 255, 0.04); --color-mask-bg: rgba(29, 33, 41, 0.6); } body[arco-theme='dark'], .app-menu-dark { --color-white: rgba(255, 255, 255, 0.9); --color-black: #000000; --color-border: #333335; --color-bg-1: #17171A; --color-bg-2: #232324; --color-bg-3: #2a2a2b; --color-bg-4: #313132; --color-bg-5: #373739; --color-bg-white: #f6f6f6; --color-text-1: rgba(255, 255, 255, 0.9); --color-text-2: rgba(255, 255, 255, 0.7); --color-text-3: rgba(255, 255, 255, 0.5); --color-text-4: rgba(255, 255, 255, 0.3); --color-fill-1: rgba(255, 255, 255, 0.04); --color-fill-2: rgba(255, 255, 255, 0.08); --color-fill-3: rgba(255, 255, 255, 0.12); --color-fill-4: rgba(255, 255, 255, 0.16); --color-primary-light-1: rgba(var(--primary-6), 0.2); --color-primary-light-2: rgba(var(--primary-6), 0.35); --color-primary-light-3: rgba(var(--primary-6), 0.5); --color-primary-light-4: rgba(var(--primary-6), 0.65); --color-secondary: rgba(var(--gray-9), 0.08); --color-secondary-hover: rgba(var(--gray-8), 0.16); --color-secondary-active: rgba(var(--gray-7), 0.24); --color-secondary-disabled: rgba(var(--gray-9), 0.08); --color-danger-light-1: rgba(var(--danger-6), 0.2); --color-danger-light-2: rgba(var(--danger-6), 0.35); --color-danger-light-3: rgba(var(--danger-6), 0.5); --color-danger-light-4: rgba(var(--danger-6), 0.65); --color-success-light-1: rgb(var(--success-6), 0.2); --color-success-light-2: rgb(var(--success-6), 0.35); --color-success-light-3: rgb(var(--success-6), 0.5); --color-success-light-4: rgb(var(--success-6), 0.65); --color-warning-light-1: rgb(var(--warning-6), 0.2); --color-warning-light-2: rgb(var(--warning-6), 0.35); --color-warning-light-3: rgb(var(--warning-6), 0.5); --color-warning-light-4: rgb(var(--warning-6), 0.65); --color-link-light-1: rgba(var(--link-6), 0.2); --color-link-light-2: rgba(var(--link-6), 0.35); --color-link-light-3: rgba(var(--link-6), 0.5); --color-link-light-4: rgba(var(--link-6), 0.65); --color-tooltip-bg: #373739; --color-spin-layer-bg: rgba(51, 51, 51, 0.6); --color-menu-dark-bg: #232324; --color-menu-light-bg: #232324; --color-menu-dark-hover: var(--color-fill-2); --color-mask-bg: rgba(23, 23, 26, 0.6); } body { font-size: 14px; font-family: Inter, -apple-system, BlinkMacSystemFont, PingFang SC, Hiragino Sans GB, noto sans, Microsoft YaHei, Helvetica Neue, Helvetica, Arial, sans-serif; } .arco-trigger-wrapper { display: inline-block; } .arco-trigger-popup { position: absolute; z-index: 1000; } .arco-trigger-arrow { position: absolute; z-index: -1; display: block; box-sizing: border-box; width: 8px; height: 8px; background-color: var(--color-bg-5); content: ''; } .arco-trigger-popup[trigger-placement='top'] .arco-trigger-arrow, .arco-trigger-popup[trigger-placement='tl'] .arco-trigger-arrow, .arco-trigger-popup[trigger-placement='tr'] .arco-trigger-arrow { border-top: none; border-left: none; border-bottom-right-radius: var(--border-radius-small); } .arco-trigger-popup[trigger-placement='bottom'] .arco-trigger-arrow, .arco-trigger-popup[trigger-placement='bl'] .arco-trigger-arrow, .arco-trigger-popup[trigger-placement='br'] .arco-trigger-arrow { border-right: none; border-bottom: none; border-top-left-radius: var(--border-radius-small); } .arco-trigger-popup[trigger-placement='left'] .arco-trigger-arrow, .arco-trigger-popup[trigger-placement='lt'] .arco-trigger-arrow, .arco-trigger-popup[trigger-placement='lb'] .arco-trigger-arrow { border-bottom: none; border-left: none; border-top-right-radius: var(--border-radius-small); } .arco-trigger-popup[trigger-placement='right'] .arco-trigger-arrow, .arco-trigger-popup[trigger-placement='rt'] .arco-trigger-arrow, .arco-trigger-popup[trigger-placement='rb'] .arco-trigger-arrow { border-top: none; border-right: none; border-bottom-left-radius: var(--border-radius-small); } .arco-auto-tooltip { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .arco-input-label { display: inline-flex; box-sizing: border-box; width: 100%; padding-right: 12px; padding-left: 12px; color: var(--color-text-1); font-size: 14px; background-color: transparent; border: 1px solid var(--color-border-3); border-radius: var(--border-radius-small); cursor: text; transition: color 0.1s cubic-bezier(0, 0, 1, 1), border-color 0.1s cubic-bezier(0, 0, 1, 1), background-color 0.1s cubic-bezier(0, 0, 1, 1); cursor: pointer; } .arco-input-label.arco-input-label-search { cursor: text; } .arco-input-label.arco-input-label-search .arco-input-label-value { pointer-events: none; } .arco-input-label:hover { background-color: transparent; border-color: var(--color-border-4); } .arco-input-label:focus-within, .arco-input-label.arco-input-label-focus { z-index: 1; background-color: var(--color-bg-2); border-color: rgb(var(--primary-6)); box-shadow: 0 0 0 0 var(--color-primary-light-2); } .arco-input-label.arco-input-label-disabled { color: var(--color-text-4); background-color: var(--color-fill-1); border-color: var(--color-border-2); cursor: not-allowed; } .arco-input-label.arco-input-label-disabled:hover { color: var(--color-text-4); background-color: var(--color-fill-1); border-color: var(--color-border-2); } .arco-input-label.arco-input-label-disabled .arco-input-label-prefix, .arco-input-label.arco-input-label-disabled .arco-input-label-suffix { color: inherit; } .arco-input-label.arco-input-label-error { background-color: var(--color-bg-2); border-color: rgb(var(--danger-6)); } .arco-input-label.arco-input-label-error:hover { background-color: var(--color-bg-2); border-color: rgb(var(--danger-5)); } .arco-input-label.arco-input-label-error:focus-within, .arco-input-label.arco-input-label-error.arco-input-label-focus { z-index: 1; background-color: var(--color-bg-2); border-color: rgb(var(--danger-6)); box-shadow: 0 0 0 0 var(--color-danger-light-2); } .arco-input-label .arco-input-label-prefix, .arco-input-label .arco-input-label-suffix { display: inline-flex; flex-shrink: 0; align-items: center; white-space: nowrap; user-select: none; } .arco-input-label .arco-input-label-prefix > svg, .arco-input-label .arco-input-label-suffix > svg { font-size: 14px; } .arco-input-label .arco-input-label-prefix { padding-right: 12px; color: var(--color-text-2); } .arco-input-label .arco-input-label-suffix { padding-left: 12px; color: var(--color-text-2); } .arco-input-label .arco-input-label-suffix .arco-feedback-icon { display: inline-flex; } .arco-input-label .arco-input-label-suffix .arco-feedback-icon-status-validating { color: rgb(var(--primary-6)); } .arco-input-label .arco-input-label-suffix .arco-feedback-icon-status-success { color: rgb(var(--success-6)); } .arco-input-label .arco-input-label-suffix .arco-feedback-icon-status-warning { color: rgb(var(--warning-6)); } .arco-input-label .arco-input-label-suffix .arco-feedback-icon-status-error { color: rgb(var(--danger-6)); } .arco-input-label .arco-input-label-clear-btn { align-self: center; color: var(--color-text-2); font-size: 12px; visibility: hidden; cursor: pointer; } .arco-input-label .arco-input-label-clear-btn > svg { position: relative; transition: color 0.1s cubic-bezier(0, 0, 1, 1); } .arco-input-label:hover .arco-input-label-clear-btn { visibility: visible; } .arco-input-label:not(.arco-input-label-focus) .arco-input-label-icon-hover:hover::before { background-color: var(--color-fill-4); } .arco-input-label .arco-input-label-input { width: 100%; padding-right: 0; padding-left: 0; color: inherit; line-height: 1.5715; background: none; border: none; border-radius: 0; outline: none; cursor: inherit; -webkit-appearance: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } .arco-input-label .arco-input-label-input::placeholder { color: var(--color-text-4); } .arco-input-label .arco-input-label-input[disabled]::placeholder { color: var(--color-text-4); } .arco-input-label .arco-input-label-input[disabled] { -webkit-text-fill-color: var(--color-text-4); } .arco-input-label .arco-input-label-input-hidden { position: absolute; width: 0 !important; } .arco-input-label .arco-input-label-value { display: flex; align-items: center; box-sizing: border-box; width: 100%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .arco-input-label .arco-input-label-value::after { font-size: 0; line-height: 0; visibility: hidden; content: '.'; } .arco-input-label .arco-input-label-value-hidden { display: none; } .arco-input-label.arco-input-label-size-mini .arco-input-label-input, .arco-input-label.arco-input-label-size-mini .arco-input-label-value { /* prettier-ignore */ padding-top: 1px; /* prettier-ignore */ padding-bottom: 1px; font-size: 12px; line-height: 1.667; } .arco-input-label.arco-input-label-size-mini .arco-input-label-value { min-height: 22px; } .arco-input-label.arco-input-label-size-medium .arco-input-label-input, .arco-input-label.arco-input-label-size-medium .arco-input-label-value { /* prettier-ignore */ padding-top: 4px; /* prettier-ignore */ padding-bottom: 4px; font-size: 14px; line-height: 1.5715; } .arco-input-label.arco-input-label-size-medium .arco-input-label-value { min-height: 30px; } .arco-input-label.arco-input-label-size-small .arco-input-label-input, .arco-input-label.arco-input-label-size-small .arco-input-label-value { /* prettier-ignore */ padding-top: 2px; /* prettier-ignore */ padding-bottom: 2px; font-size: 14px; line-height: 1.5715; } .arco-input-label.arco-input-label-size-small .arco-input-label-value { min-height: 26px; } .arco-input-label.arco-input-label-size-large .arco-input-label-input, .arco-input-label.arco-input-label-size-large .arco-input-label-value { /* prettier-ignore */ padding-top: 6px; /* prettier-ignore */ padding-bottom: 6px; font-size: 14px; line-height: 1.5715; } .arco-input-label.arco-input-label-size-large .arco-input-label-value { min-height: 34px; } .arco-picker { position: relative; display: inline-flex; align-items: center; box-sizing: border-box; padding: 4px 11px 4px 4px; line-height: 1.5715; background-color: transparent; border: 1px solid var(--color-border-3); border-radius: var(--border-radius-small); transition: all 0.1s cubic-bezier(0, 0, 1, 1); } .arco-picker-input { display: inline-flex; flex: 1; } .arco-picker input { width: 100%; padding: 0; padding-left: 8px; color: var(--color-text-1); line-height: 1.5715; text-align: left; background-color: transparent; border: none; outline: none; transition: all 0.1s cubic-bezier(0, 0, 1, 1); } .arco-picker input::placeholder { color: var(--color-text-4); } .arco-picker input[disabled] { -webkit-text-fill-color: var(--color-text-4); } .arco-picker-has-prefix { padding-left: 12px; } .arco-picker-prefix { padding-right: 4px; color: var(--color-text-2); font-size: 14px; } .arco-picker-suffix { display: inline-flex; align-items: center; margin-left: 4px; } .arco-picker-suffix .arco-feedback-icon { display: inline-flex; } .arco-picker-suffix .arco-feedback-icon-status-validating { color: rgb(var(--primary-6)); } .arco-picker-suffix .arco-feedback-icon-status-success { color: rgb(var(--success-6)); } .arco-picker-suffix .arco-feedback-icon-status-warning { color: rgb(var(--warning-6)); } .arco-picker-suffix .arco-feedback-icon-status-error { color: rgb(var(--danger-6)); } .arco-picker-suffix .arco-feedback-icon { margin-left: 4px; } .arco-picker-suffix-icon { color: var(--color-text-2); } .arco-picker .arco-picker-clear-icon { display: none; color: var(--color-text-2); font-size: 12px; } .arco-picker:hover { background-color: transparent; border-color: var(--color-border-4); } .arco-picker:not(.arco-picker-disabled):hover .arco-picker-clear-icon { display: inline-block; } .arco-picker:not(.arco-picker-disabled):hover .arco-picker-suffix .arco-picker-clear-icon + span { display: none; } .arco-picker input[disabled] { color: var(--color-text-4); cursor: not-allowed; } .arco-picker input[disabled]::placeholder { color: var(--color-text-4); } .arco-picker-error { background-color: var(--color-danger-light-1); border-color: transparent; } .arco-picker-error:hover { background-color: var(--color-danger-light-2); border-color: transparent; } .arco-picker-focused { box-shadow: 0 0 0 0 var(--color-primary-light-2); } .arco-picker-focused, .arco-picker-focused:hover { background-color: transparent; border-color: rgb(var(--primary-6)); } .arco-picker-focused.arco-picker-error { border-color: rgb(var(--danger-6)); box-shadow: 0 0 0 0 var(--color-danger-light-2); } .arco-picker-focused .arco-picker-input-active input, .arco-picker-focused:hover .arco-picker-input-active input { background: var(--color-fill-2); } .arco-picker-disabled, .arco-picker-disabled:hover { color: var(--color-text-4); background-color: var(--color-fill-1); border-color: var(--color-border-2); cursor: not-allowed; } .arco-picker-disabled input[disabled], .arco-picker-disabled:hover input[disabled] { color: var(--color-text-4); cursor: not-allowed; } .arco-picker-disabled input[disabled]::placeholder, .arco-picker-disabled:hover input[disabled]::placeholder { color: var(--color-text-4); } .arco-picker-separator { min-width: 10px; padding: 0 8px; color: var(--color-text-3); } .arco-picker-disabled .arco-picker-separator { color: var(--color-text-4); } .arco-picker-disabled .arco-picker-suffix-icon { color: var(--color-text-4); } .arco-picker-size-mini { height: 24px; } .arco-picker-size-mini input { font-size: 12px; } .arco-picker-size-small { height: 28px; } .arco-picker-size-small input { font-size: 14px; } .arco-picker-size-medium { height: 32px; } .arco-picker-size-medium input { font-size: 14px; } .arco-picker-size-large { height: 36px; } .arco-picker-size-large input { font-size: 14px; } /********************************************** * size: mini / small / default / large **********************************************/ /**************************************************** * status: default / error / disabled _ (hover / focus) ****************************************************/ .arco-select-view-single { display: inline-flex; box-sizing: border-box; width: 100%; padding-right: 12px; padding-left: 12px; color: var(--color-text-1); font-size: 14px; background-color: transparent; border: 1px solid var(--color-border-3); border-radius: var(--border-radius-small); cursor: text; transition: color 0.1s cubic-bezier(0, 0, 1, 1), border-color 0.1s cubic-bezier(0, 0, 1, 1), background-color 0.1s cubic-bezier(0, 0, 1, 1); cursor: pointer; } .arco-select-view-single.arco-select-view-search { cursor: text; } .arco-select-view-single.arco-select-view-search .arco-select-view-value { pointer-events: none; } .arco-select-view-single:hover { background-color: transparent; border-color: var(--color-border-4); } .arco-select-view-single:focus-within, .arco-select-view-single.arco-select-view-focus { z-index: 1; background-color: var(--color-bg-2); border-color: rgb(var(--primary-6)); box-shadow: 0 0 0 0 var(--color-primary-light-2); } .arco-select-view-single.arco-select-view-disabled { color: var(--color-text-4); background-color: var(--color-fill-1); border-color: var(--color-border-2); cursor: not-allowed; } .arco-select-view-single.arco-select-view-disabled:hover { color: var(--color-text-4); background-color: var(--color-fill-1); border-color: var(--color-border-2); } .arco-select-view-single.arco-select-view-disabled .arco-select-view-prefix, .arco-select-view-single.arco-select-view-disabled .arco-select-view-suffix { color: inherit; } .arco-select-view-single.arco-select-view-error { background-color: var(--color-bg-2); border-color: rgb(var(--danger-6)); } .arco-select-view-single.arco-select-view-error:hover { background-color: var(--color-bg-2); border-color: rgb(var(--danger-5)); } .arco-select-view-single.arco-select-view-error:focus-within, .arco-select-view-single.arco-select-view-error.arco-select-view-single-focus { z-index: 1; background-color: var(--color-bg-2); border-color: rgb(var(--danger-6)); box-shadow: 0 0 0 0 var(--color-danger-light-2); } .arco-select-view-single .arco-select-view-prefix, .arco-select-view-single .arco-select-view-suffix { display: inline-flex; flex-shrink: 0; align-items: center; white-space: nowrap; user-select: none; } .arco-select-view-single .arco-select-view-prefix > svg, .arco-select-view-single .arco-select-view-suffix > svg { font-size: 14px; } .arco-select-view-single .arco-select-view-prefix { padding-right: 12px; color: var(--color-text-2); } .arco-select-view-single .arco-select-view-suffix { padding-left: 12px; color: var(--color-text-2); } .arco-select-view-single .arco-select-view-suffix .arco-feedback-icon { display: inline-flex; } .arco-select-view-single .arco-select-view-suffix .arco-feedback-icon-status-validating { color: rgb(var(--primary-6)); } .arco-select-view-single .arco-select-view-suffix .arco-feedback-icon-status-success { color: rgb(var(--success-6)); } .arco-select-view-single .arco-select-view-suffix .arco-feedback-icon-status-warning { color: rgb(var(--warning-6)); } .arco-select-view-single .arco-select-view-suffix .arco-feedback-icon-status-error { color: rgb(var(--danger-6)); } .arco-select-view-single .arco-select-view-clear-btn { align-self: center; color: var(--color-text-2); font-size: 12px; visibility: hidden; cursor: pointer; } .arco-select-view-single .arco-select-view-clear-btn > svg { position: relative; transition: color 0.1s cubic-bezier(0, 0, 1, 1); } .arco-select-view-single:hover .arco-select-view-clear-btn { visibility: visible; } .arco-select-view-single:not(.arco-select-view-focus) .arco-select-view-icon-hover:hover::before { background-color: var(--color-fill-4); } .arco-select-view-single .arco-select-view-input { width: 100%; padding-right: 0; padding-left: 0; color: inherit; line-height: 1.5715; background: none; border: none; border-radius: 0; outline: none; cursor: inherit; -webkit-appearance: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } .arco-select-view-single .arco-select-view-input::placeholder { color: var(--color-text-4); } .arco-select-view-single .arco-select-view-input[disabled]::placeholder { color: var(--color-text-4); } .arco-select-view-single .arco-select-view-input[disabled] { -webkit-text-fill-color: var(--color-text-4); } .arco-select-view-single .arco-select-view-input-hidden { position: absolute; width: 0 !important; } .arco-select-view-single .arco-select-view-value { display: flex; align-items: center; box-sizing: border-box; width: 100%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .arco-select-view-single .arco-select-view-value::after { font-size: 0; line-height: 0; visibility: hidden; content: '.'; } .arco-select-view-single .arco-select-view-value-hidden { display: none; } .arco-select-view-single.arco-select-view-size-mini .arco-select-view-input, .arco-select-view-single.arco-select-view-size-mini .arco-select-view-value { /* prettier-ignore */ padding-top: 1px; /* prettier-ignore */ padding-bottom: 1px; font-size: 12px; line-height: 1.667; } .arco-select-view-single.arco-select-view-size-mini .arco-select-view-value { min-height: 22px; } .arco-select-view-single.arco-select-view-size-medium .arco-select-view-input, .arco-select-view-single.arco-select-view-size-medium .arco-select-view-value { /* prettier-ignore */ padding-top: 4px; /* prettier-ignore */ padding-bottom: 4px; font-size: 14px; line-height: 1.5715; } .arco-select-view-single.arco-select-view-size-medium .arco-select-view-value { min-height: 30px; } .arco-select-view-single.arco-select-view-size-small .arco-select-view-input, .arco-select-view-single.arco-select-view-size-small .arco-select-view-value { /* prettier-ignore */ padding-top: 2px; /* prettier-ignore */ padding-bottom: 2px; font-size: 14px; line-height: 1.5715; } .arco-select-view-single.arco-select-view-size-small .arco-select-view-value { min-height: 26px; } .arco-select-view-single.arco-select-view-size-large .arco-select-view-input, .arco-select-view-single.arco-select-view-size-large .arco-select-view-value { /* prettier-ignore */ padding-top: 6px; /* prettier-ignore */ padding-bottom: 6px; font-size: 14px; line-height: 1.5715; } .arco-select-view-single.arco-select-view-size-large .arco-select-view-value { min-height: 34px; } .arco-select-view-multiple { display: inline-flex; box-sizing: border-box; width: 100%; padding-right: 12px; padding-left: 12px; color: var(--color-text-1); font-size: 14px; background-color: transparent; border: 1px solid var(--color-border-3); border-radius: var(--border-radius-small); cursor: text; transition: color 0.1s cubic-bezier(0, 0, 1, 1), border-color 0.1s cubic-bezier(0, 0, 1, 1), background-color 0.1s cubic-bezier(0, 0, 1, 1); } .arco-select-view-multiple:hover { background-color: transparent; border-color: var(--color-border-4); } .arco-select-view-multiple:focus-within, .arco-select-view-multiple.arco-select-view-focus { z-index: 1; background-color: var(--color-bg-2); border-color: rgb(var(--primary-6)); box-shadow: 0 0 0 0 var(--color-primary-light-2); } .arco-select-view-multiple.arco-select-view-disabled { color: var(--color-text-4); background-color: var(--color-fill-1); border-color: var(--color-border-2); cursor: not-allowed; } .arco-select-view-multiple.arco-select-view-disabled:hover { color: var(--color-text-4); background-color: var(--color-fill-1); border-color: var(--color-border-2); } .arco-select-view-multiple.arco-select-view-disabled .arco-select-view-prefix, .arco-select-view-multiple.arco-select-view-disabled .arco-select-view-suffix { color: inherit; } .arco-select-view-multiple.arco-select-view-error { background-color: var(--color-bg-2); border-color: rgb(var(--danger-6)); } .arco-select-view-multiple.arco-select-view-error:hover { background-color: var(--color-bg-2); border-color: rgb(var(--danger-5)); } .arco-select-view-multiple.arco-select-view-error:focus-within, .arco-select-view-multiple.arco-select-view-error.arco-select-view-multiple-focus { z-index: 1; background-color: var(--color-bg-2); border-color: rgb(var(--danger-6)); box-shadow: 0 0 0 0 var(--color-danger-light-2); } .arco-select-view-multiple .arco-select-view-prefix, .arco-select-view-multiple .arco-select-view-suffix { display: inline-flex; flex-shrink: 0; align-items: center; white-space: nowrap; user-select: none; } .arco-select-view-multiple .arco-select-view-prefix > svg, .arco-select-view-multiple .arco-select-view-suffix > svg { font-size: 14px; } .arco-select-view-multiple .arco-select-view-prefix { padding-right: 12px; color: var(--color-text-2); } .arco-select-view-multiple .arco-select-view-suffix { padding-left: 12px; color: var(--color-text-2); } .arco-select-view-multiple .arco-select-view-suffix .arco-feedback-icon { display: inline-flex; } .arco-select-view-multiple .arco-select-view-suffix .arco-feedback-icon-status-validating { color: rgb(var(--primary-6)); } .arco-select-view-multiple .arco-select-view-suffix .arco-feedback-icon-status-success { color: rgb(var(--success-6)); } .arco-select-view-multiple .arco-select-view-suffix .arco-feedback-icon-status-warning { color: rgb(var(--warning-6)); } .arco-select-view-multiple .arco-select-view-suffix .arco-feedback-icon-status-error { color: rgb(var(--danger-6)); } .arco-select-view-multiple .arco-select-view-clear-btn { align-self: center; color: var(--color-text-2); font-size: 12px; visibility: hidden; cursor: pointer; } .arco-select-view-multiple .arco-select-view-clear-btn > svg { position: relative; transition: color 0.1s cubic-bezier(0, 0, 1, 1); } .arco-select-view-multiple:hover .arco-select-view-clear-btn { visibility: visible; } .arco-select-view-multiple:not(.arco-select-view-focus) .arco-select-view-icon-hover:hover::before { background-color: var(--color-fill-4); } .arco-select-view-multiple.arco-select-view-has-tag { padding-right: 4px; padding-left: 4px; } .arco-select-view-multiple.arco-select-view-has-prefix { padding-left: 12px; } .arco-select-view-multiple.arco-select-view-has-suffix { padding-right: 12px; } .arco-select-view-multiple .arco-select-view-inner { flex: 1; overflow: hidden; line-height: 0; } .arco-select-view-multiple .arco-select-view-inner.arco-select-view-nowrap { display: flex; flex-wrap: wrap; } .arco-select-view-multiple .arco-select-view-inner .arco-select-view-tag { display: inline-flex; align-items: center; margin-right: 4px; color: var(--color-text-1); font-size: 12px; white-space: pre-wrap; word-break: break-word; background-color: var(--color-bg-2); border-color: var(--color-fill-3); } .arco-select-view-multiple .arco-select-view-inner .arco-select-view-tag .arco-icon-hover:hover::before { background-color: var(--color-fill-2); } .arco-select-view-multiple .arco-select-view-inner .arco-select-view-tag.arco-tag-custom-color { color: var(--color-white); } .arco-select-view-multiple .arco-select-view-inner .arco-select-view-tag.arco-tag-custom-color .arco-icon-hover.arco-tag-icon-hover:hover::before { background-color: rgba(255, 255, 255, 0.2); } .arco-select-view-multiple .arco-select-view-inner .arco-select-view-input { width: 100%; padding-right: 0; padding-left: 0; color: inherit; line-height: 1.5715; background: none; border: none; border-radius: 0; outline: none; cursor: inherit; -webkit-appearance: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; } .arco-select-view-multiple .arco-select-view-inner .arco-select-view-input::placeholder { color: var(--color-text-4); } .arco-select-view-multiple .arco-select-view-inner .arco-select-view-input[disabled]::placeholder { color: var(--color-text-4); } .arco-select-view-multiple .arco-select-view-inner .arco-select-view-input[disabled] { -webkit-text-fill-color: var(--color-text-4); } .arco-select-view-multiple .arco-select-view-mirror { position: absolute; top: 0; left: 0; white-space: pre; visibility: hidden; pointer-events: none; } .arco-select-view-multiple.arco-select-view-focus .arco-select-view-tag { background-color: transparent; border-color: var(--color-fill-3); } .arco-select-view-multiple.arco-select-view-focus .arco-select-view-tag .arco-icon-hover:hover::before { background-color: var(--color-fill-3); } .arco-select-view-multiple.arco-select-view-disabled .arco-select-view-tag { color: var(--color-text-4); background-color: var(--color-fill-2); border-color: var(--color-fill-3); } .arco-select-view-multiple.arco-select-view-readonly, .arco-select-view-multiple.arco-select-view-disabled-input { cursor: default; } .arco-select-view-multiple.arco-select-view-size-mini { font-size: 12px; } .arco-select-view-multiple.arco-select-view-size-mini .arco-select-view-inner { padding-top: 0px; padding-bottom: 0px; } .arco-select-view-multiple.arco-select-view-size-mini .arco-select-view-tag, .arco-select-view-multiple.arco-select-view-size-mini .arco-select-view-input { margin-top: 1px; margin-bottom: 1px; line-height: 18px; vertical-align: middle; } .arco-select-view-multiple.arco-select-view-size-mini .arco-select-view-tag, .arco-select-view-multiple.arco-select-view-size-mini .arco-select-view-input { height: auto; min-height: 20px; } .arco-select-view-multiple.arco-select-view-size-medium { font-size: 14px; } .arco-select-view-multiple.arco-select-view-size-medium .arco-select-view-inner { padding-top: 2px; padding-bottom: 2px; } .arco-select-view-multiple.arco-select-view-size-medium .arco-select-view-tag, .arco-select-view-multiple.arco-select-view-size-medium .arco-select-view-input { margin-top: 1px; margin-bottom: 1px; line-height: 22px; vertical-align: middle; } .arco-select-view-multiple.arco-select-view-size-medium .arco-select-view-tag, .arco-select-view-multiple.arco-select-view-size-medium .arco-select-view-input { height: auto; min-height: 24px; } .arco-select-view-multiple.arco-select-view-size-small { font-size: 14px; } .arco-select-view-multiple.arco-select-view-size-small .arco-select-view-inner { padding-top: 2px; padding-bottom: 2px; } .arco-select-view-multiple.arco-select-view-size-small .arco-select-view-tag, .arco-select-view-multiple.arco-select-view-size-small .arco-select-view-input { margin-top: 1px; margin-bottom: 1px; line-height: 18px; vertical-align: middle; } .arco-select-view-multiple.arco-select-view-size-small .arco-select-view-tag, .arco-select-view-multiple.arco-select-view-size-small .arco-select-view-input { height: auto; min-height: 20px; } .arco-select-view-multiple.arco-select-view-size-large { font-size: 14px; } .arco-select-view-multiple.arco-select-view-size-large .arco-select-view-inner { padding-top: 2px; padding-bottom: 2px; } .arco-select-view-multiple.arco-select-view-size-large .arco-select-view-tag, .arco-select-view-multiple.arco-select-view-size-large .arco-select-view-input { margin-top: 1px; margin-bottom: 1px; line-height: 26px; vertical-align: middle; } .arco-select-view-multiple.arco-select-view-size-large .arco-select-view-tag, .arco-select-view-multiple.arco-select-view-size-large .arco-select-view-input { height: auto; min-height: 28px; } .arco-select-view-multiple.arco-select-view-disabled-input { cursor: pointer; } .arco-select-view.arco-select-view-borderless { background: none !important; border: none !important; box-shadow: none !important; } .arco-select-view-suffix .arco-feedback-icon { margin-left: 4px; } .arco-select-view-clear-btn svg, .arco-select-view-icon svg { display: block; font-size: 12px; } .arco-select-view-opened .arco-select-view-arrow-icon { transform: rotateZ(180deg); } .arco-select-view-expand-icon { transform: rotate(-45deg); } .arco-select-view-clear-btn { display: none; cursor: pointer; } .arco-select-view:hover .arco-select-view-clear-btn { display: block; } .arco-select-view:hover .arco-select-view-clear-btn ~ * { display: none; } .arco-affix { position: fixed; z-index: 999; } /***************************************************** * type: info / warning / error /success *****************************************************/ .arco-alert { display: flex; align-items: center; box-sizing: border-box; width: 100%; padding: 8px 15px; overflow: hidden; font-size: 14px; line-height: 1.5715; text-align: left; border-radius: var(--border-radius-small); } .arco-alert-with-title { align-items: flex-start; padding: 15px 15px; } .arco-alert-center { justify-content: center; } .arco-alert-center .arco-alert-body { flex: initial; } .arco-alert-normal { background-color: var(--color-neutral-2); border: 1px solid transparent; } .arco-alert-info { background-color: var(--color-primary-light-1); border: 1px solid transparent; } .arco-alert-success { background-color: var(--color-success-light-1); border: 1px solid transparent; } .arco-alert-warning { background-color: var(--color-warning-light-1); border: 1px solid transparent; } .arco-alert-error { background-color: var(--color-danger-light-1); border: 1px solid transparent; } .arco-alert-banner { border: none; border-radius: 0; } .arco-alert-body { position: relative; flex: 1; } .arco-alert-title { margin-bottom: 4px; font-weight: 500; font-size: 16px; line-height: 1.5; } .arco-alert-normal .arco-alert-title { color: var(--color-text-1); } .arco-alert-normal .arco-alert-content { color: var(--color-text-1); } .arco-alert-normal.arco-alert-with-title .arco-alert-content { color: var(--color-text-2); } .arco-alert-info .arco-alert-title { color: var(--color-text-1); } .arco-alert-info .arco-alert-content { color: var(--color-text-1); } .arco-alert-info.arco-alert-with-title .arco-alert-content { color: var(--color-text-2); } .arco-alert-success .arco-alert-title { color: var(--color-text-1); } .arco-alert-success .arco-alert-content { color: var(--color-text-1); } .arco-alert-success.arco-alert-with-title .arco-alert-content { color: var(--color-text-2); } .arco-alert-warning .arco-alert-title { color: var(--color-text-1); } .arco-alert-warning .arco-alert-content { color: var(--color-text-1); } .arco-alert-warning.arco-alert-with-title .arco-alert-content { color: var(--color-text-2); } .arco-alert-error .arco-alert-title { color: var(--color-text-1); } .arco-alert-error .arco-alert-content { color: var(--color-text-1); } .arco-alert-error.arco-alert-with-title .arco-alert-content { color: var(--color-text-2); } .arco-alert-icon { margin-right: 8px; } .arco-alert-icon svg { font-size: 16px; vertical-align: -3px; } .arco-alert-with-title .arco-alert-icon svg { font-size: 18px; vertical-align: -5px; } .arco-alert-normal .arco-alert-icon svg { color: var(--color-neutral-4); } .arco-alert-info .arco-alert-icon svg { color: rgb(var(--primary-6)); } .arco-alert-success .arco-alert-icon svg { color: rgb(var(--success-6)); } .arco-alert-warning .arco-alert-icon svg { color: rgb(var(--warning-6)); } .arco-alert-error .arco-alert-icon svg { color: rgb(var(--danger-6)); } .arco-alert-close-btn { top: 4px; right: 0; box-sizing: border-box; margin-left: 8px; padding: 0; color: var(--color-text-2); font-size: 12px; background-color: transparent; border: none; outline: none; cursor: pointer; transition: color 0.1s cubic-bezier(0, 0, 1, 1); } .arco-alert-close-btn:hover { color: var(--color-text-1); } .arco-alert-action + .arco-alert-close-btn { margin-left: 8px; } .arco-alert-action { margin-left: 8px; } .arco-alert-with-title .arco-alert-close-btn { margin-top: 0; margin-right: 0; } .arco-anchor { position: relative; width: 150px; overflow: auto; } .arco-anchor-line-slider { position: absolute; top: 0; left: 0; z-index: 1; width: 2px; height: 12px; margin-top: 9.0005px; background-color: rgb(var(--primary-6)); transition: top 0.2s cubic-bezier(0.34, 0.69, 0.1, 1); } .arco-anchor-list { position: relative; margin-top: 0; margin-bottom: 0; margin-left: 4px; padding-left: 0; list-style: none; } .arco-anchor-list::before { position: absolute; left: -4px; width: 2px; height: 100%; background-color: var(--color-fill-3); content: ''; } .arco-anchor-sublist { margin-top: 0; margin-bottom: 0; padding-left: 0; list-style: none; } .arco-anchor-link-item { margin-bottom: 2px; } .arco-anchor-link-item .arco-anchor-link { display: block; margin-bottom: 2px; padding: 4px 8px; overflow: hidden; color: var(--color-text-2); font-size: 14px; line-height: 1.5715; white-space: nowrap; text-decoration: none; text-overflow: ellipsis; border-radius: var(--border-radius-small); cursor: pointer; } .arco-anchor-link-item .arco-anchor-link:hover { color: var(--color-text-1); font-weight: 500; background-color: var(--color-fill-2); } .arco-anchor-link-active > .arco-anchor-link { color: var(--color-text-1); font-weight: 500; transition: all 0.1s cubic-bezier(0, 0, 1, 1); } .arco-anchor-link-item .arco-anchor-link-item { margin-left: 16px; } .arco-anchor-line-less .arco-anchor-list { margin-left: 0; } .arco-anchor-line-less .arco-anchor-list::before { display: none; } .arco-anchor-line-less .arco-anchor-link-active > .arco-anchor-link { color: rgb(var(--primary-6)); font-weight: 500; background-color: var(--color-fill-2); } /********************************************** * Popup Box **********************************************/ /********************************************** * Popup Options * status: default / disabled / selected / hover **********************************************/ .arco-autocomplete-popup .arco-select-popup { background-color: var(--color-bg-popup); border: 1px solid var(--color-fill-3); border-radius: var(--border-radius-medium); box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); } .arco-autocomplete-popup .arco-select-popup .arco-select-popup-inner { max-height: 200px; padding: 4px 0; } .arco-autocomplete-popup .arco-select-popup .arco-select-option { height: 36px; padding: 0 12px; font-size: 14px; line-height: 36px; color: var(--color-text-1); background-color: var(--color-bg-popup); } .arco-autocomplete-popup .arco-select-popup .arco-select-option-selected { color: var(--color-text-1); background-color: var(--color-bg-popup); } .arco-autocomplete-popup .arco-select-popup .arco-select-option-hover { color: var(--color-text-1); background-color: var(--color-fill-2); } .arco-autocomplete-popup .arco-select-popup .arco-select-option-disabled { color: var(--color-text-4); background-color: var(--color-bg-popup); } .arco-autocomplete-popup .arco-select-popup .arco-select-option-selected { font-weight: 500; } .arco-avatar { position: relative; display: inline-flex; align-items: center; box-sizing: border-box; width: 40px; height: 40px; color: var(--color-white); font-size: 20px; white-space: nowrap; vertical-align: middle; background-color: var(--color-neutral-3); } .arco-avatar-circle { border-radius: var(--border-radius-circle); } .arco-avatar-circle .arco-avatar-image { overflow: hidden; border-radius: var(--border-radius-circle); } .arco-avatar-square { border-radius: var(--border-radius-medium); } .arco-avatar-square .arco-avatar-image { overflow: hidden; border-radius: var(--border-radius-medium); } .arco-avatar-text { position: absolute; left: 50%; font-weight: 500; line-height: 1; transform: translateX(-50%); transform-origin: 0 center; } .arco-avatar-image { display: inline-block; width: 100%; height: 100%; } .arco-avatar-image-icon { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; } .arco-avatar-image img, .arco-avatar-image picture { width: 100%; height: 100%; } .arco-avatar-trigger-icon-button { position: absolute; right: -4px; bottom: -4px; z-index: 1; width: 20px; height: 20px; color: var(--color-fill-4); font-size: 12px; line-height: 20px; text-align: center; background-color: var(--color-neutral-2); border-radius: var(--border-radius-circle); transition: background-color 0.1s cubic-bezier(0, 0, 1, 1); } .arco-avatar-trigger-icon-mask { position: absolute; top: 0; left: 0; z-index: 0; display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; color: var(--color-white); font-size: 16px; background-color: rgba(29, 33, 41, 0.6); border-radius: var(--border-radius-medium); opacity: 0; transition: all 0.1s cubic-bezier(0, 0, 1, 1); } .arco-avatar-circle .arco-avatar-trigger-icon-mask { border-radius: var(--border-radius-circle); } .arco-avatar-with-trigger-icon { cursor: pointer; } .arco-avatar-with-trigger-icon:hover .arco-avatar-trigger-icon-mask { z-index: 2; opacity: 1; } .arco-avatar-with-trigger-icon:hover .arco-avatar-trigger-icon-button { background-color: var(--color-neutral-3); } .arco-avatar-rtl { direction: rtl; } .arco-avatar-rtl .arco-avatar-trigger-icon-button { right: unset; left: -4px; } .arco-avatar-group { display: inline-block; line-height: 0; } .arco-avatar-group-max-count-avatar { color: var(--color-white); font-size: 20px; cursor: default; } .arco-avatar-group-rtl { direction: rtl; } .arco-avatar-group .arco-avatar { border: 2px solid var(--color-bg-2); } .arco-avatar-group .arco-avatar:not(:first-child) { margin-left: -10px; } .arco-avatar-group-popover .arco-avatar:not(:first-child) { margin-left: 4px; } .arco-back-top { position: fixed; right: 24px; bottom: 24px; z-index: 100; } .arco-back-top-btn { width: 40px; height: 40px; color: var(--color-white); font-size: 12px; text-align: center; background-color: rgb(var(--primary-6)); border: none; border-radius: var(--border-radius-circle); outline: none; cursor: pointer; transition: all 0.2s cubic-bezier(0, 0, 1, 1); } .arco-back-top-btn:hover { background-color: rgb(var(--primary-5)); } .arco-back-top-btn svg { font-size: 14px; } .arco-badge { position: relative; display: inline-block; line-height: 1; } .arco-badge-rtl { direction: rtl; } .arco-badge-number, .arco-badge-dot, .arco-badge-text, .arco-badge-custom-dot { position: absolute; top: 2px; right: 2px; z-index: 2; box-sizing: border-box; overflow: hidden; text-align: center; border-radius: 16px; transform: translate(50%, -50%); transform-origin: 100% 0%; } .arco-badge-rtl .arco-badge-number, .arco-badge-rtl .arco-badge-dot, .arco-badge-rtl .arco-badge-text, .arco-badge-rtl .arco-badge-custom-dot { right: unset; } .arco-badge-custom-dot { background-color: var(--color-bg-2); } .arco-badge-number, .arco-badge-text { min-width: 16px; height: 16px; padding: 0 6px; color: var(--color-white); font-weight: 500; font-size: 12px; line-height: 16px; background-color: rgb(var(--danger-6)); box-shadow: 0 0 0 2px var(--color-bg-2); } .arco-badge-dot { width: 6px; height: 6px; background-color: rgb(var(--danger-6)); border-radius: var(--border-radius-circle); box-shadow: 0 0 0 2px var(--color-bg-2); } .arco-badge-no-children .arco-badge-dot, .arco-badge-no-children .arco-badge-number, .arco-badge-no-children .arco-badge-text { position: relative; top: unset; right: unset; display: inline-block; transform: none; } .arco-badge-status-wrapper { display: inline-flex; align-items: center; } .arco-badge-status-dot { display: inline-block; width: 6px; height: 6px; border-radius: var(--border-radius-circle); } .arco-badge-status-normal { background-color: var(--color-fill-4); } .arco-badge-status-processing { background-color: rgb(var(--primary-6)); } .arco-badge-status-success { background-color: rgb(var(--success-6)); } .arco-badge-status-warning { background-color: rgb(var(--warning-6)); } .arco-badge-status-danger { background-color: rgb(var(--danger-6)); } .arco-badge-color-red { background-color: rgb(var(--danger-6)); } .arco-badge-color-orangered { background-color: #f77234; } .arco-badge-color-orange { background-color: rgb(var(--orange-6)); } .arco-badge-color-gold { background-color: rgb(var(--gold-6)); } .arco-badge-color-lime { background-color: rgb(var(--lime-6)); } .arco-badge-color-green { background-color: rgb(var(--success-6)); } .arco-badge-color-cyan { background-color: rgb(var(--cyan-6)); } .arco-badge-color-arcoblue { background-color: rgb(var(--primary-6)); } .arco-badge-color-purple { background-color: rgb(var(--purple-6)); } .arco-badge-color-pinkpurple { background-color: rgb(var(--pinkpurple-6)); } .arco-badge-color-magenta { background-color: rgb(var(--magenta-6)); } .arco-badge-color-gray { background-color: rgb(var(--gray-4)); } .arco-badge .arco-badge-status-text { margin-left: 8px; color: var(--color-text-1); font-size: 12px; line-height: 1.5715; } .arco-badge-rtl .arco-badge-status-text { margin-right: 8px; margin-left: 0; } .arco-badge-number-text { display: inline-block; animation: arco-badge-scale 0.5s cubic-bezier(0.3, 1.3, 0.3, 1); } @keyframes arco-badge-scale { from { transform: scale(0, 0); } to { transform: scale(1, 1); } } .badge-zoom-enter, .badge-zoom-appear { transform: translate(50%, -50%) scale(0.2, 0.2); transform-origin: center; } .badge-zoom-enter-active, .badge-zoom-appear-active { transform: translate(50%, -50%) scale(1, 1); transform-origin: center; opacity: 1; transition: opacity 0.3s cubic-bezier(0.3, 1.3, 0.3, 1), transform 0.3s cubic-bezier(0.3, 1.3, 0.3, 1); } .badge-zoom-exit { transform: translate(50%, -50%) scale(1, 1); transform-origin: center; opacity: 1; } .badge-zoom-exit-active { transform: translate(50%, -50%) scale(0.2, 0.2); transform-origin: center; opacity: 0; transition: opacity 0.3s cubic-bezier(0.3, 1.3, 0.3, 1), transform 0.3s cubic-bezier(0.3, 1.3, 0.3, 1); } .arco-breadcrumb { display: inline-flex; align-items: center; color: var(--color-text-2); font-size: 14px; } .arco-breadcrumb-icon { color: var(--color-text-2); } .arco-breadcrumb-item { display: inline-block; padding: 0 4px; color: var(--color-text-2); line-height: 24px; vertical-align: middle; } .arco-breadcrumb-item > .arco-icon { color: var(--color-text-3); } .arco-breadcrumb-item a { display: inline-block; margin: 0 -4px; padding: 0 4px; color: var(--color-text-2); text-decoration: none; border-radius: var(--border-radius-small); background-color: transparent; } .arco-breadcrumb-item a:hover { color: rgb(var(--link-6)); background-color: var(--color-fill-2); } .arco-breadcrumb-item:last-child { color: var(--color-text-1); font-weight: 500; } .arco-breadcrumb-item-ellipses { position: relative; top: -3px; display: inline-block; padding: 0 4px; color: var(--color-text-2); } .arco-breadcrumb-item-separator { display: inline-block; margin: 0 4px; color: var(--color-text-4); line-height: 24px; vertical-align: middle; } .arco-breadcrumb-item-with-dropdown { cursor: pointer; } .arco-breadcrumb-item-dropdown-icon { margin-left: 4px; color: var(--color-text-2); font-size: 12px; } .arco-breadcrumb-item-dropdown-icon-active svg { transform: rotate(180deg); } /***** Outline *****/ /***** Primary *****/ /***** Secondary *****/ /***** Dashed *****/ /***** Text *****/ /***** focus-visible *****/ .arco-btn { position: relative; display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; font-weight: 400; line-height: 1.5715; white-space: nowrap; outline: none; cursor: pointer; transition: all 0.1s cubic-bezier(0, 0, 1, 1); -webkit-appearance: none; user-select: none; } .arco-btn > a:only-child { color: currentColor; } .arco-btn:active { transition: none; } .arco-btn-long { display: flex; width: 100%; } .arco-btn-link { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; } .arco-btn-link:not([href]) { color: var(--color-text-4); } .arco-btn-link:hover { text-decoration: none; } .arco-btn-link.arco-btn-only-icon { display: inline-flex; align-items: center; justify-content: center; vertical-align: top; } .arco-btn.arco-btn-only-icon .arco-btn-icon { display: flex; justify-content: center; } .arco-btn-loading { position: relative; cursor: default; } .arco-btn-loading::before { position: absolute; top: -1px; right: -1px; bottom: -1px; left: -1px; z-index: 1; display: block; background: #fff; border-radius: inherit; opacity: 0.4; transition: opacity 0.1s cubic-bezier(0, 0, 1, 1); content: ''; pointer-events: none; } .arco-btn-loading-fixed-width { transition: none; } .arco-btn-two-chinese-chars > *:not(svg) { margin-right: -0.3em; letter-spacing: 0.3em; } .arco-btn-outline, .arco-btn-outline[type='button'], .arco-btn-outline[type='submit'] { color: rgb(var(--primary-6)); background-color: rgb(var(--primary-1)); border: 1px solid rgb(var(--primary-3)); } .arco-btn-outline:hover, .arco-btn-outline[type='button']:hover, .arco-btn-outline[type='submit']:hover { color: var(--color-white); background-color: rgb(var(--primary-6)); border-color: rgb(var(--primary-6)); } .arco-btn-outline:focus-visible, .arco-btn-outline[type='button']:focus-visible, .arco-btn-outline[type='submit']:focus-visible { box-shadow: 0 0 0 0.25em rgb(var(--primary-3)); } .arco-btn-outline:active, .arco-btn-outline[type='button']:active, .arco-btn-outline[type='submit']:active { color: var(--color-white); background-color: rgb(var(--primary-7)); border-color: rgb(var(--primary-7)); } .arco-btn-outline.arco-btn-loading, .arco-btn-outline[type='button'].arco-btn-loading, .arco-btn-outline[type='submit'].arco-btn-loading { color: rgb(var(--primary-6)); background-color: rgb(var(--primary-1)); border: 1px solid rgb(var(--primary-3)); } .arco-btn-outline.arco-btn-disabled, .arco-btn-outline[type='button'].arco-btn-disabled, .arco-btn-outline[type='submit'].arco-btn-disabled { color: rgb(var(--primary-3)); background-color: transparent; border: 1px solid rgb(var(--primary-3)); cursor: not-allowed; } .arco-btn-outline.arco-btn-status-warning { color: rgb(var(--warning-6)); background-color: rgb(var(--warning-1)); border-color: rgb(var(--warning-3)); } .arco-btn-outline.arco-btn-status-warning:hover { color: var(--color-white); background-color: rgb(var(--warning-6)); border-color: rgb(var(--warning-6)); } .arco-btn-outline.arco-btn-status-warning:focus-visible { box-shadow: 0 0 0 0.25em rgb(var(--warning-3)); } .arco-btn-outline.arco-btn-status-warning:active { color: var(--color-white); background-color: rgb(var(--warning-7)); border-color: rgb(var(--warning-7)); } .arco-btn-outline.arco-btn-status-warning.arco-btn-loading { color: rgb(var(--warning-6)); background-color: rgb(var(--warning-1)); border-color: rgb(var(--warning-3)); } .arco-btn-outline.arco-btn-status-warning.arco-btn-disabled { color: rgb(var(--warning-3)); background-color: transparent; border: 1px solid rgb(var(--warning-3)); } .arco-btn-outline.arco-btn-status-danger { color: rgb(var(--danger-6)); background-color: rgb(var(--danger-1)); border-color: rgb(var(--danger-3)); } .arco-btn-outline.arco-btn-status-danger:hover { color: var(--color-white); background-color: rgb(var(--danger-6)); border-color: rgb(var(--danger-6)); } .arco-btn-outline.arco-btn-status-danger:focus-visible { box-shadow: 0 0 0 0.25em rgb(var(--danger-3)); } .arco-btn-outline.arco-btn-status-danger:active { color: var(--color-white); background-color: rgb(var(--danger-7)); border-color: rgb(var(--danger-7)); } .arco-btn-outline.arco-btn-status-danger.arco-btn-loading { color: rgb(var(--danger-6)); background-color: rgb(var(--danger-1)); border-color: rgb(var(--danger-3)); } .arco-btn-outline.arco-btn-status-danger.arco-btn-disabled { color: rgb(var(--danger-3)); background-color: transparent; border: 1px solid rgb(var(--danger-3)); } .arco-btn-outline.arco-btn-status-success { color: rgb(var(--success-6)); background-color: rgb(var(--success-1)); border-color: rgb(var(--success-3)); } .arco-btn-outline.arco-btn-status-success:hover { color: var(--color-white); background-color: rgb(var(--success-6)); border-color: rgb(var(--success-6)); } .arco-btn-outline.arco-btn-status-success:focus-visible { box-shadow: 0 0 0 0.25em rgb(var(--success-3)); } .arco-btn-outline.arco-btn-status-success:active { color: var(--color-white); background-color: rgb(var(--success-7)); border-color: rgb(var(--success-7)); } .arco-btn-outline.arco-btn-status-success.arco-btn-loading { color: rgb(var(--success-6)); background-color: rgb(var(--success-1)); border-color: rgb(var(--success-3)); } .arco-btn-outline.arco-btn-status-success.arco-btn-disabled { color: rgb(var(--success-3)); background-color: transparent; border: 1px solid rgb(var(--success-3)); } .arco-btn-primary, .arco-btn-primary[type='button'], .arco-btn-primary[type='submit'] { color: #fff; background-color: rgb(var(--primary-6)); border: 1px solid transparent; } .arco-btn-primary:hover, .arco-btn-primary[type='button']:hover, .arco-btn-primary[type='submit']:hover { color: #fff; background-color: rgb(var(--primary-5)); border-color: transparent; } .arco-btn-primary:focus-visible, .arco-btn-primary[type='button']:focus-visible, .arco-btn-primary[type='submit']:focus-visible { box-shadow: 0 0 0 0.25em rgb(var(--primary-3)); } .arco-btn-primary:active, .arco-btn-primary[type='button']:active, .arco-btn-primary[type='submit']:active { color: #fff; background-color: rgb(var(--primary-7)); border-color: transparent; } .arco-btn-primary.arco-btn-loading, .arco-btn-primary[type='button'].arco-btn-loading, .arco-btn-primary[type='submit'].arco-btn-loading { color: #fff; background-color: rgb(var(--primary-6)); border: 1px solid transparent; } .arco-btn-primary.arco-btn-disabled, .arco-btn-primary[type='button'].arco-btn-disabled, .arco-btn-primary[type='submit'].arco-btn-disabled { color: #fff; background-color: var(--color-primary-light-3); border: 1px solid transparent; cursor: not-allowed; } .arco-btn-primary.arco-btn-status-warning { color: #fff; background-color: rgb(var(--warning-6)); border-color: transparent; } .arco-btn-primary.arco-btn-status-warning:hover { color: #fff; background-color: rgb(var(--warning-5)); border-color: transparent; } .arco-btn-primary.arco-btn-status-warning:focus-visible { box-shadow: 0 0 0 0.25em rgb(var(--warning-3)); } .arco-btn-primary.arco-btn-status-warning:active { color: #fff; background-color: rgb(var(--warning-7)); border-color: transparent; } .arco-btn-primary.arco-btn-status-warning.arco-btn-loading { color: #fff; background-color: rgb(var(--warning-6)); border-color: transparent; } .arco-btn-primary.arco-btn-status-warning.arco-btn-disabled { color: #fff; background-color: var(--color-warning-light-3); border: 1px solid transparent; } .arco-btn-primary.arco-btn-status-danger { color: #fff; background-color: rgb(var(--danger-6)); border-color: transparent; } .arco-btn-primary.arco-btn-status-danger:hover { color: #fff; background-color: rgb(var(--danger-5)); border-color: transparent; } .arco-btn-primary.arco-btn-status-danger:focus-visible { box-shadow: 0 0 0 0.25em rgb(var(--danger-3)); } .arco-btn-primary.arco-btn-status-danger:active { color: #fff; background-color: rgb(var(--danger-7)); border-color: transparent; } .arco-btn-primary.arco-btn-status-danger.arco-btn-loading { color: #fff; background-color: rgb(var(--danger-6)); border-color: transparent; } .arco-btn-primary.arco-btn-status-danger.arco-btn-disabled { color: #fff; background-color: var(--color-danger-light-3); border: 1px solid transparent; } .arco-btn-primary.arco-btn-status-success { color: #fff; background-color: rgb(var(--success-6)); border-color: transparent; } .arco-btn-primary.arco-btn-status-success:hover { color: #fff; background-color: rgb(var(--success-5)); border-color: transparent; } .arco-btn-primary.arco-btn-status-success:focus-visible { box-shadow: 0 0 0 0.25em rgb(var(--success-3)); } .arco-btn-primary.arco-btn-status-success:active { color: #fff; background-color: rgb(var(--success-7)); border-color: transparent; } .arco-btn-primary.arco-btn-status-success.arco-btn-loading { color: #fff; background-color: rgb(var(--success-6)); border-color: transparent; } .arco-btn-primary.arco-btn-status-success.arco-btn-disabled { color: #fff; background-color: var(--color-success-light-3); border: 1px solid transparent; } .arco-btn-secondary, .arco-btn-secondary[type='button'], .arco-btn-secondary[type='submit'] { color: var(--color-text-1); background-color: transparent; border: 1px solid var(--color-border-3); } .arco-btn-secondary:hover, .arco-btn-secondary[type='button']:hover, .arco-btn-secondary[type='submit']:hover { color: var(--color-text-2); background-color: transparent; border-color: var(--color-border-3); } .arco-btn-secondary:focus-visible, .arco-btn-secondary[type='button']:focus-visible, .arco-btn-secondary[type='submit']:focus-visible { box-shadow: 0 0 0 0.25em var(--color-neutral-4); } .arco-btn-secondary:active, .arco-btn-secondary[type='button']:active, .arco-btn-secondary[type='submit']:active { color: var(--color-text-1); background-color: var(--color-fill-2); border-color: var(--color-border-4); } .arco-btn-secondary.arco-btn-loading, .arco-btn-secondary[type='button'].arco-btn-loading, .arco-btn-secondary[type='submit'].arco-btn-loading { color: var(--color-text-1); background-color: transparent; border: 1px solid var(--color-border-3); } .arco-btn-secondary.arco-btn-disabled, .arco-btn-secondary[type='button'].arco-btn-disabled, .arco-btn-secondary[type='submit'].arco-btn-disabled { color: var(--color-text-4); background-color: var(--color-fill-1); border: 1px solid var(--color-border-2); cursor: not-allowed; } .arco-btn-secondary.arco-btn-status-warning { color: rgb(var(--warning-6)); background-color: var(--color-warning-light-1); border-color: transparent; } .arco-btn-secondary.arco-btn-status-warning:hover { color: rgb(var(--warning-6)); background-color: var(--color-warning-light-2); border-color: transparent; } .arco-btn-secondary.arco-btn-status-warning:focus-visible { box-shadow: 0 0 0 0.25em rgb(var(--warning-3)); } .arco-btn-secondary.arco-btn-status-warning:active { color: rgb(var(--warning-6)); background-color: var(--color-warning-light-3); border-color: transparent; } .arco-btn-secondary.arco-btn-status-warning.arco-btn-loading { color: rgb(var(--warning-6)); background-color: var(--color-warning-light-1); border-color: transparent; } .arco-btn-secondary.arco-btn-status-warning.arco-btn-disabled { color: var(--color-warning-light-3); background-color: var(--color-warning-light-1); border: 1px solid transparent; } .arco-btn-secondary.arco-btn-status-danger { color: rgb(var(--danger-6)); background-color: var(--color-danger-light-1); border-color: transparent; } .arco-btn-secondary.arco-btn-status-danger:hover { color: rgb(var(--danger-6)); background-color: var(--color-danger-light-2); border-color: transparent; } .arco-btn-secondary.arco-btn-status-danger:focus-visible { box-shadow: 0 0 0 0.25em rgb(var(--danger-3)); } .arco-btn-secondary.arco-btn-status-danger:active { color: rgb(var(--danger-6)); background-color: var(--color-danger-light-3); border-color: transparent; } .arco-btn-secondary.arco-btn-status-danger.arco-btn-loading { color: rgb(var(--danger-6)); background-color: var(--color-danger-light-1); border-color: transparent; } .arco-btn-secondary.arco-btn-status-danger.arco-btn-disabled { color: var(--color-danger-light-3); background-color: var(--color-danger-light-1); border: 1px solid transparent; } .arco-btn-secondary.arco-btn-status-success { color: rgb(var(--success-6)); background-color: var(--color-success-light-1); border-color: transparent; } .arco-btn-secondary.arco-btn-status-success:hover { color: rgb(var(--success-6)); background-color: var(--color-success-light-2); border-color: transparent; } .arco-btn-secondary.arco-btn-status-success:focus-visible { box-shadow: 0 0 0 0.25em rgb(var(--success-3)); } .arco-btn-secondary.arco-btn-status-success:active { color: rgb(var(--success-6)); background-color: var(--color-success-light-3); border-color: transparent; } .arco-btn-secondary.arco-btn-status-success.arco-btn-loading { color: rgb(var(--success-6)); background-color: var(--color-success-light-1); border-color: transparent; } .arco-btn-secondary.arco-btn-status-success.arco-btn-disabled { color: var(--color-success-light-3); background-color: var(--color-success-light-1); border: 1px solid transparent; } .arco-btn-dashed, .arco-btn-dashed[type='button'], .arco-btn-dashed[type='submit'] { color: rgb(var(--primary-6)); background-color: transparent; border: 1px dashed rgb(var(--primary-6)); } .arco-btn-dashed:hover, .arco-btn-dashed[type='button']:hover, .arco-btn-dashed[type='submit']:hover { color: rgb(var(--primary-5)); background-color: transparent; border-color: rgb(var(--primary-5)); } .arco-btn-dashed:focus-visible, .arco-btn-dashed[type='button']:focus-visible, .arco-btn-dashed[type='submit']:focus-visible { box-shadow: 0 0 0 0.25em var(--color-neutral-4); } .arco-btn-dashed:active, .arco-btn-dashed[type='button']:active, .arco-btn-dashed[type='submit']:active { color: rgb(var(--primary-7)); background-color: rgb(var(--primary-1)); border-color: rgb(var(--primary-7)); } .arco-btn-dashed.arco-btn-loading, .arco-btn-dashed[type='button'].arco-btn-loading, .arco-btn-dashed[type='submit'].arco-btn-loading { color: rgb(var(--primary-6)); background-color: transparent; border: 1px dashed rgb(var(--primary-6)); } .arco-btn-dashed.arco-btn-disabled, .arco-btn-dashed[type='button'].arco-btn-disabled, .arco-btn-dashed[type='submit'].arco-btn-disabled { color: var(--color-primary-light-3); background-color: transparent; border: 1px dashed var(--color-primary-light-4); cursor: not-allowed; } .arco-btn-dashed.arco-btn-status-warning { color: rgb(var(--warning-6)); background-color: transparent; border-color: rgb(var(--warning-6)); } .arco-btn-dashed.arco-btn-status-warning:hover { color: rgb(var(--warning-5)); background-color: transparent; border-color: rgb(var(--warning-5)); } .arco-btn-dashed.arco-btn-status-warning:focus-visible { box-shadow: 0 0 0 0.25em rgb(var(--warning-3)); } .arco-btn-dashed.arco-btn-status-warning:active { color: rgb(var(--warning-7)); background-color: rgb(var(--warning-1)); border-color: rgb(var(--warning-7)); } .arco-btn-dashed.arco-btn-status-warning.arco-btn-loading { color: rgb(var(--warning-6)); background-color: transparent; border-color: rgb(var(--warning-6)); } .arco-btn-dashed.arco-btn-status-warning.arco-btn-disabled { color: var(--color-warning-light-3); background-color: transparent; border: 1px dashed var(--color-warning-light-3); } .arco-btn-dashed.arco-btn-status-danger { color: rgb(var(--danger-6)); background-color: transparent; border-color: rgb(var(--danger-6)); } .arco-btn-dashed.arco-btn-status-danger:hover { color: rgb(var(--danger-5)); background-color: transparent; border-color: rgb(var(--danger-5)); } .arco-btn-dashed.arco-btn-status-danger:focus-visible { box-shadow: 0 0 0 0.25em rgb(var(--danger-3)); } .arco-btn-dashed.arco-btn-status-danger:active { color: rgb(var(--danger-7)); background-color: var(--color-danger-light-1); border-color: rgb(var(--danger-7)); } .arco-btn-dashed.arco-btn-status-danger.arco-btn-loading { color: rgb(var(--danger-6)); background-color: transparent; border-color: rgb(var(--danger-6)); } .arco-btn-dashed.arco-btn-status-danger.arco-btn-disabled { color: var(--color-danger-light-3); background-color: transparent; border: 1px dashed var(--color-danger-light-2); } .arco-btn-dashed.arco-btn-status-success { color: rgb(var(--success-6)); background-color: transparent; border-color: rgb(var(--success-6)); } .arco-btn-dashed.arco-btn-status-success:hover { color: rgb(var(--success-5)); background-color: transparent; border-color: rgb(var(--success-5)); } .arco-btn-dashed.arco-btn-status-success:focus-visible { box-shadow: 0 0 0 0.25em rgb(var(--success-3)); } .arco-btn-dashed.arco-btn-status-success:active { color: rgb(var(--success-7)); background-color: rgb(var(--success-1)); border-color: rgb(var(--success-7)); } .arco-btn-dashed.arco-btn-status-success.arco-btn-loading { color: rgb(var(--success-6)); background-color: transparent; border-color: rgb(var(--success-6)); } .arco-btn-dashed.arco-btn-status-success.arco-btn-disabled { color: var(--color-success-light-3); background-color: transparent; border: 1px dashed var(--color-success-light-2); } .arco-btn-text, .arco-btn-text[type='button'], .arco-btn-text[type='submit'] { color: rgb(var(--primary-6)); background-color: transparent; border: 1px solid transparent; } .arco-btn-text:hover, .arco-btn-text[type='button']:hover, .arco-btn-text[type='submit']:hover { color: rgb(var(--primary-6)); background-color: var(--color-fill-2); border-color: transparent; } .arco-btn-text:focus-visible, .arco-btn-text[type='button']:focus-visible, .arco-btn-text[type='submit']:focus-visible { box-shadow: 0 0 0 0.25em var(--color-neutral-4); } .arco-btn-text:active, .arco-btn-text[type='button']:active, .arco-btn-text[type='submit']:active { color: rgb(var(--primary-6)); background-color: var(--color-fill-3); border-color: transparent; } .arco-btn-text.arco-btn-loading, .arco-btn-text[type='button'].arco-btn-loading, .arco-btn-text[type='submit'].arco-btn-loading { color: rgb(var(--primary-6)); background-color: transparent; border: 1px solid transparent; } .arco-btn-text.arco-btn-disabled, .arco-btn-text[type='button'].arco-btn-disabled, .arco-btn-text[type='submit'].arco-btn-disabled { color: var(--color-primary-light-3); background-color: transparent; border: 1px solid transparent; cursor: not-allowed; } .arco-btn-text.arco-btn-status-warning { color: rgb(var(--warning-6)); background-color: transparent; border-color: transparent; } .arco-btn-text.arco-btn-status-warning:hover { color: rgb(var(--warning-6)); background-color: var(--color-fill-2); border-color: transparent; } .arco-btn-text.arco-btn-status-warning:focus-visible { box-shadow: 0 0 0 0.25em rgb(var(--warning-3)); } .arco-btn-text.arco-btn-status-warning:active { color: rgb(var(--warning-6)); background-color: var(--color-fill-3); border-color: transparent; } .arco-btn-text.arco-btn-status-warning.arco-btn-loading { color: rgb(var(--warning-6)); background-color: transparent; border-color: transparent; } .arco-btn-text.arco-btn-status-warning.arco-btn-disabled { color: var(--color-warning-light-3); background-color: transparent; border: 1px solid transparent; } .arco-btn-text.arco-btn-status-danger { color: rgb(var(--danger-6)); background-color: transparent; border-color: transparent; } .arco-btn-text.arco-btn-status-danger:hover { color: rgb(var(--danger-6)); background-color: var(--color-fill-2); border-color: transparent; } .arco-btn-text.arco-btn-status-danger:focus-visible { box-shadow: 0 0 0 0.25em rgb(var(--danger-3)); } .arco-btn-text.arco-btn-status-danger:active { color: rgb(var(--danger-6)); background-color: var(--color-fill-3); border-color: transparent; } .arco-btn-text.arco-btn-status-danger.arco-btn-loading { color: rgb(var(--danger-6)); background-color: transparent; border-color: transparent; } .arco-btn-text.arco-btn-status-danger.arco-btn-disabled { color: var(--color-danger-light-3); background-color: transparent; border: 1px solid transparent; } .arco-btn-text.arco-btn-status-success { color: rgb(var(--success-6)); background-color: transparent; border-color: transparent; } .arco-btn-text.arco-btn-status-success:hover { color: rgb(var(--success-6)); background-color: var(--color-fill-2); border-color: transparent; } .arco-btn-text.arco-btn-status-success:focus-visible { box-shadow: 0 0 0 0.25em rgb(var(--success-3)); } .arco-btn-text.arco-btn-status-success:active { color: rgb(var(--success-6)); background-color: var(--color-fill-3); border-color: transparent; } .arco-btn-text.arco-btn-status-success.arco-btn-loading { color: rgb(var(--success-6)); background-color: transparent; border-color: transparent; } .arco-btn-text.arco-btn-status-success.arco-btn-disabled { color: var(--color-success-light-3); background-color: transparent; border: 1px solid transparent; } .arco-btn-size-mini { height: 24px; padding: 0 11px; font-size: 12px; border-radius: var(--border-radius-small); } .arco-btn-size-mini:not(.arco-btn-only-icon) .arco-btn-icon { margin-right: 6px; } .arco-btn-size-mini svg { vertical-align: -1px; } .arco-btn-size-mini.arco-btn-loading-fixed-width.arco-btn-loading { padding-right: 2px; padding-left: 2px; } .arco-btn-size-mini.arco-btn-only-icon { width: 24px; height: 24px; padding: 0; } .arco-btn-size-mini.arco-btn-shape-circle { width: 24px; height: 24px; padding: 0; text-align: center; border-radius: var(--border-radius-circle); } .arco-btn-size-mini.arco-btn-shape-round { border-radius: calc(24px * 0.5); } .arco-btn-size-small { height: 28px; padding: 0 15px; font-size: 14px; border-radius: var(--border-radius-small); } .arco-btn-size-small:not(.arco-btn-only-icon) .arco-btn-icon { margin-right: 4px; } .arco-btn-size-small svg { vertical-align: -2px; } .arco-btn-size-small.arco-btn-loading-fixed-width.arco-btn-loading { padding-right: 6px; padding-left: 6px; } .arco-btn-size-small.arco-btn-only-icon { width: 28px; height: 28px; padding: 0; } .arco-btn-size-small.arco-btn-shape-circle { width: 28px; height: 28px; padding: 0; text-align: center; border-radius: var(--border-radius-circle); } .arco-btn-size-small.arco-btn-shape-round { border-radius: calc(28px * 0.5); } .arco-btn-size-medium { height: 32px; padding: 0 15px; font-size: 14px; border-radius: var(--border-radius-small); } .arco-btn-size-medium:not(.arco-btn-only-icon) .arco-btn-icon { margin-right: 8px; } .arco-btn-size-medium svg { vertical-align: -2px; } .arco-btn-size-medium.arco-btn-loading-fixed-width.arco-btn-loading { padding-right: 4px; padding-left: 4px; } .arco-btn-size-medium.arco-btn-only-icon { width: 32px; height: 32px; padding: 0; } .arco-btn-size-medium.arco-btn-shape-circle { width: 32px; height: 32px; padding: 0; text-align: center; border-radius: var(--border-radius-circle); } .arco-btn-size-medium.arco-btn-shape-round { border-radius: calc(32px * 0.5); } .arco-btn-size-large { height: 36px; padding: 0 19px; font-size: 14px; border-radius: var(--border-radius-small); } .arco-btn-size-large:not(.arco-btn-only-icon) .arco-btn-icon { margin-right: 8px; } .arco-btn-size-large svg { vertical-align: -2px; } .arco-btn-size-large.arco-btn-loading-fixed-width.arco-btn-loading { padding-right: 8px; padding-left: 8px; } .arco-btn-size-large.arco-btn-only-icon { width: 36px; height: 36px; padding: 0; } .arco-btn-size-large.arco-btn-shape-circle { width: 36px; height: 36px; padding: 0; text-align: center; border-radius: var(--border-radius-circle); } .arco-btn-size-large.arco-btn-shape-round { border-radius: calc(36px * 0.5); } .arco-btn-group { display: inline-flex; align-items: center; } .arco-btn-group .arco-btn-outline:not(:first-child), .arco-btn-group .arco-btn-dashed:not(:first-child) { margin-left: -1px; } .arco-btn-group .arco-btn-primary:not(:last-child) { border-right: 1px solid rgb(var(--primary-5)); } .arco-btn-group .arco-btn-secondary:not(:last-child) { border-right: 1px solid transparent; } .arco-btn-group .arco-btn-status-warning:not(:last-child) { border-right: 1px solid rgb(var(--warning-5)); } .arco-btn-group .arco-btn-status-danger:not(:last-child) { border-right: 1px solid rgb(var(--danger-5)); } .arco-btn-group .arco-btn-status-success:not(:last-child) { border-right: 1px solid rgb(var(--success-5)); } .arco-btn-group .arco-btn-outline:hover, .arco-btn-group .arco-btn-dashed:hover, .arco-btn-group .arco-btn-outline:active, .arco-btn-group .arco-btn-dashed:active { z-index: 2; } .arco-btn-group .arco-btn:first-child { border-top-right-radius: 0; border-bottom-right-radius: 0; } .arco-btn-group .arco-btn:last-child { border-top-left-radius: 0; border-bottom-left-radius: 0; } .arco-btn-group .arco-btn:not(:first-child):not(:last-child) { border-radius: 0; } body[arco-theme='dark'] .arco-btn-primary.arco-btn-disabled { color: rgba(255, 255, 255, 0.3); } .arco-calendar { box-sizing: border-box; border: 1px solid var(--color-neutral-3); } .arco-calendar-header { display: flex; padding: 24px 24px; } .arco-calendar-header-left { position: relative; display: flex; flex: 1; align-items: center; height: 28px; line-height: 28px; } .arco-calendar-header-right { position: relative; height: 28px; } .arco-calendar-header-value { color: var(--color-text-1); font-weight: 500; font-size: 20px; } .arco-calendar-header-icon { width: 28px; height: 28px; margin-right: 12px; color: var(--color-text-2); font-size: 12px; line-height: 28px; text-align: center; background-color: var(--color-bg-5); border-radius: 50%; transition: all 0.1s cubic-bezier(0, 0, 1, 1); user-select: none; } .arco-calendar-header-icon:not(:first-child) { margin: 0 12px; } .arco-calendar-header-icon:focus-visible { box-shadow: 0 0 0 2px var(--color-primary-light-3); } .arco-calendar-header-icon:not(.arco-calendar-header-icon-hidden) { cursor: pointer; } .arco-calendar-header-icon:not(.arco-calendar-header-icon-hidden):hover { background-color: var(--color-fill-3); } .arco-calendar .arco-calendar-header-value-year { width: 100px; margin-right: 8px; } .arco-calendar .arco-calendar-header-value-month { width: 76px; margin-right: 32px; } .arco-calendar-month { width: 100%; } .arco-calendar-month-row { display: flex; height: 100px; } .arco-calendar-month-row .arco-calendar-cell { flex: 1; overflow: hidden; border-bottom: 1px solid var(--color-neutral-3); } .arco-calendar-month-row:last-child .arco-calendar-cell { border-bottom: unset; } .arco-calendar-month-cell-body { box-sizing: border-box; } .arco-calendar-mode-month:not(.arco-calendar-panel) .arco-calendar-cell:not(:last-child) { border-right: 1px solid var(--color-neutral-3); } .arco-calendar-week-list { display: flex; box-sizing: border-box; width: 100%; padding: 0; border-bottom: 1px solid var(--color-neutral-3); } .arco-calendar-week-list-item { flex: 1; padding: 20px 16px; color: #7d7d7f; text-align: left; } .arco-calendar-cell .arco-calendar-date { box-sizing: border-box; width: 100%; height: 100%; padding: 10px; cursor: pointer; } .arco-calendar-cell .arco-calendar-date-circle { display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; } .arco-calendar-date-content { height: 70px; overflow-y: auto; } .arco-calendar-cell-today .arco-calendar-date-circle { box-sizing: border-box; border: 1px solid rgb(var(--primary-6)); } .arco-calendar-date-value { color: var(--color-text-4); font-weight: 500; font-size: 16px; } .arco-calendar-cell-in-view .arco-calendar-date-value { color: var(--color-text-1); } .arco-calendar-mode-month .arco-calendar-cell-selected .arco-calendar-date-circle { box-sizing: border-box; color: #fff; background-color: rgb(var(--primary-6)); border: 1px solid rgb(var(--primary-6)); } .arco-calendar-mode-year .arco-calendar-cell-selected .arco-calendar-cell-selected .arco-calendar-date-circle { box-sizing: border-box; color: #fff; background-color: rgb(var(--primary-6)); border: 1px solid rgb(var(--primary-6)); } .arco-calendar-mode-year:not(.arco-calendar-panel) { min-width: 820px; } .arco-calendar-mode-year .arco-calendar-header { border-bottom: 1px solid var(--color-neutral-3); } .arco-calendar-mode-year .arco-calendar-body { padding: 12px; } .arco-calendar-mode-year .arco-calendar-year-row { display: flex; } .arco-calendar-year-row > .arco-calendar-cell { flex: 1; padding: 20px 8px; } .arco-calendar-year-row > .arco-calendar-cell:not(:last-child) { border-right: 1px solid var(--color-neutral-3); } .arco-calendar-year-row:not(:last-child) > .arco-calendar-cell { border-bottom: 1px solid var(--color-neutral-3); } .arco-calendar-month-with-days .arco-calendar-month-row { height: 26px; } .arco-calendar-month-with-days .arco-calendar-cell { border-bottom: 0; } .arco-calendar-month-with-days .arco-calendar-month-cell-body { padding: 0; } .arco-calendar-month-with-days .arco-calendar-month-title { padding: 10px 6px; color: var(--color-text-1); font-weight: 500; font-size: 16px; } .arco-calendar-month-cell { width: 100%; font-size: 12px; } .arco-calendar-month-cell .arco-calendar-week-list { padding: 0; border-bottom: unset; } .arco-calendar-month-cell .arco-calendar-week-list-item { padding: 6px; color: #7d7d7f; text-align: center; } .arco-calendar-month-cell .arco-calendar-cell { text-align: center; } .arco-calendar-month-cell .arco-calendar-date { padding: 2px; } .arco-calendar-month-cell .arco-calendar-date-value { font-size: 14px; } .arco-calendar-month-cell .arco-calendar-date-circle { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; } .arco-calendar-panel { background-color: var(--color-bg-5); border: 1px solid var(--color-neutral-3); } .arco-calendar-panel .arco-calendar-header { padding: 8px 16px; border-bottom: 1px solid var(--color-neutral-3); } .arco-calendar-panel .arco-calendar-header-value { flex: 1; font-size: 14px; line-height: 24px; text-align: center; } .arco-calendar-panel .arco-calendar-header-icon { width: 24px; height: 24px; margin-right: 2px; margin-left: 2px; line-height: 24px; } .arco-calendar-panel .arco-calendar-body { padding: 14px 16px; } .arco-calendar-panel .arco-calendar-month-cell-body { padding: 0; } .arco-calendar-panel .arco-calendar-month-row { height: unset; } .arco-calendar-panel .arco-calendar-week-list { padding: 0; border-bottom: unset; } .arco-calendar-panel .arco-calendar-week-list-item { height: 32px; padding: 0; font-weight: 400; line-height: 32px; text-align: center; } .arco-calendar-panel .arco-calendar-cell, .arco-calendar-panel .arco-calendar-year-row .arco-calendar-cell { box-sizing: border-box; padding: 2px 0; text-align: center; border-right: 0; border-bottom: 0; } .arco-calendar-panel .arco-calendar-cell .arco-calendar-date { display: flex; justify-content: center; padding: 4px 0; } .arco-calendar-panel .arco-calendar-cell .arco-calendar-date-value { min-width: 24px; height: 24px; font-size: 14px; line-height: 24px; cursor: pointer; } .arco-calendar-panel.arco-calendar-mode-year .arco-calendar-cell { padding: 4px 0; } .arco-calendar-panel.arco-calendar-mode-year .arco-calendar-cell .arco-calendar-date { padding: 4px; } .arco-calendar-panel.arco-calendar-mode-year .arco-calendar-cell .arco-calendar-date-value { width: 100%; border-radius: 12px; } .arco-calendar-panel .arco-calendar-cell-selected .arco-calendar-date-value { color: var(--color-white); background-color: rgb(var(--primary-6)); border-radius: 50%; } .arco-calendar-panel .arco-calendar-cell:not(.arco-calendar-cell-selected):not(.arco-calendar-cell-range-start):not(.arco-calendar-cell-range-end):not(.arco-calendar-cell-hover-range-start):not(.arco-calendar-cell-hover-range-end):not(.arco-calendar-cell-disabled):not(.arco-calendar-cell-week) .arco-calendar-date-value:hover { color: rgb(var(--primary-6)); background-color: var(--color-primary-light-1); border-radius: 50%; } .arco-calendar-panel.arco-calendar-mode-year .arco-calendar-cell:not(.arco-calendar-cell-selected):not(.arco-calendar-cell-range-start):not(.arco-calendar-cell-range-end):not(.arco-calendar-cell-hover-range-start):not(.arco-calendar-cell-hover-range-end):not(.arco-calendar-cell-disabled) .arco-calendar-date-value:hover { border-radius: 12px; } .arco-calendar-panel .arco-calendar-cell-today { position: relative; } .arco-calendar-panel .arco-calendar-cell-today::after { position: absolute; bottom: 0; left: 50%; display: block; width: 4px; height: 4px; margin-left: -2px; background-color: rgb(var(--primary-6)); border-radius: 50%; content: ''; } .arco-calendar-cell-in-range .arco-calendar-date { background-color: var(--color-primary-light-1); } .arco-calendar-cell-range-start .arco-calendar-date { border-radius: 16px 0 0 16px; } .arco-calendar-cell-range-end .arco-calendar-date { border-radius: 0 16px 16px 0; } .arco-calendar-cell-in-range-near-hover .arco-calendar-date { border-radius: 0; } .arco-calendar-cell-range-start .arco-calendar-date-value, .arco-calendar-cell-range-end .arco-calendar-date-value { color: var(--color-white); background-color: rgb(var(--primary-6)); border-radius: 50%; } .arco-calendar-cell-hover-in-range .arco-calendar-date { background-color: var(--color-primary-light-1); } .arco-calendar-cell-hover-range-start .arco-calendar-date { border-radius: 16px 0 0 16px; } .arco-calendar-cell-hover-range-end .arco-calendar-date { border-radius: 0 16px 16px 0; } .arco-calendar-cell-hover-range-start .arco-calendar-date-value, .arco-calendar-cell-hover-range-end .arco-calendar-date-value { color: var(--color-text-1); background-color: var(--color-primary-light-2); border-radius: 50%; } .arco-calendar-panel .arco-calendar-cell-disabled > .arco-calendar-date { background-color: var(--color-fill-1); cursor: not-allowed; } .arco-calendar-panel .arco-calendar-cell-disabled > .arco-calendar-date > .arco-calendar-date-value { color: var(--color-text-4); background-color: var(--color-fill-1); cursor: not-allowed; } .arco-calendar-panel .arco-calendar-footer-btn-wrapper { height: 38px; color: var(--color-text-1); line-height: 38px; text-align: center; border-top: 1px solid var(--color-neutral-3); cursor: pointer; } .arco-calendar-rtl { direction: rtl; } .arco-calendar-rtl .arco-calendar-header-icon { margin-right: 0; margin-left: 12px; transform: scaleX(-1); } .arco-calendar-rtl .arco-calendar-week-list-item { text-align: right; } .arco-calendar-rtl.arco-calendar-mode-month:not(.arco-calendar-panel) .arco-calendar-cell:not(:last-child) { border-right: 0; border-left: 1px solid var(--color-neutral-3); } .arco-calendar-rtl .arco-calendar-header-value-year { margin-right: 0; margin-left: 8px; } .arco-calendar-rtl .arco-calendar-header-value-month { margin-right: 0; margin-left: 32px; } .arco-card { position: relative; background: var(--color-bg-1); border-radius: 4px; transition: box-shadow 0.2s cubic-bezier(0, 0, 1, 1); } .arco-card-header { position: relative; display: flex; align-items: center; justify-content: space-between; box-sizing: border-box; overflow: hidden; border-bottom: 1px solid var(--color-border-2); } .arco-card-header-no-title::before { display: block; content: ' '; } .arco-card-header-title { flex: 1; color: var(--color-text-1); font-weight: 500; line-height: 1.5715; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .arco-card-header-extra { color: rgb(var(--primary-6)); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .arco-card-body { color: var(--color-text-2); } .arco-card-cover { overflow: hidden; } .arco-card-cover > * { display: block; width: 100%; } .arco-card-actions { display: flex; align-items: center; justify-content: space-between; margin-top: 20px; } .arco-card-actions::before { visibility: hidden; content: ''; } .arco-card-actions-right { display: flex; align-items: center; } .arco-card-actions-item { display: flex; align-items: center; justify-content: center; color: var(--color-text-2); cursor: pointer; transition: color 0.2s cubic-bezier(0, 0, 1, 1); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .arco-card-actions-item:hover { color: rgb(var(--primary-6)); } .arco-card-actions-item:not(:last-child) { margin-right: 12px; } .arco-card-meta-footer { display: flex; align-items: center; justify-content: space-between; } .arco-card-meta-footer:last-child { margin-top: 20px; } .arco-card-meta-footer-only-actions::before { visibility: hidden; content: ''; } .arco-card-meta-footer .arco-card-actions { margin-top: 0; } .arco-card-meta-title { color: var(--color-text-1); font-weight: 500; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .arco-card-meta-description:not(:first-child) { margin-top: 4px; } .arco-card-grid { position: relative; box-sizing: border-box; width: 33.33%; box-shadow: 1px 0 0 0 var(--color-border-2), 0 1px 0 0 var(--color-border-2), 1px 1px 0 0 var(--color-border-2), 1px 0 0 0 var(--color-border-2) inset, 0 1px 0 0 var(--color-border-2) inset; } .arco-card-grid::before { position: absolute; top: 0; right: 0; bottom: 0; left: 0; transition: box-shadow 0.2s cubic-bezier(0, 0, 1, 1); content: ''; pointer-events: none; } .arco-card-grid-hoverable:hover { z-index: 1; } .arco-card-grid-hoverable:hover::before { box-shadow: 0 4px 10px rgb(var(--gray-2)); } .arco-card-grid .arco-card { background: none; box-shadow: none; } .arco-card-contain-grid:not(.arco-card-loading) > .arco-card-body { display: flex; flex-wrap: wrap; margin: 0 -1px; padding: 0; } .arco-card-hoverable:hover { box-shadow: 0 4px 10px rgb(var(--gray-2)); } .arco-card-bordered { border: 1px solid var(--color-border-2); border-radius: var(--border-radius-small); } .arco-card-bordered .arco-card-cover { border-radius: var(--border-radius-small) var(--border-radius-small) 0 0; } .arco-card-loading .arco-card-body { overflow: hidden; text-align: center; } .arco-card-size-medium { font-size: 14px; } .arco-card-size-medium .arco-card-header { height: 44px; padding: 10px 16px; } .arco-card-size-medium .arco-card-header-title, .arco-card-size-medium .arco-card-meta-title { font-size: 16px; } .arco-card-size-medium .arco-card-header-extra { font-size: 14px; } .arco-card-size-medium .arco-card-body { padding: 16px 16px; } .arco-card-size-small { font-size: 14px; } .arco-card-size-small .arco-card-header { height: 40px; padding: 8px 16px; } .arco-card-size-small .arco-card-header-title, .arco-card-size-small .arco-card-meta-title { font-size: 14px; } .arco-card-size-small .arco-card-header-extra { font-size: 14px; } .arco-card-size-small .arco-card-body { padding: 12px 16px; } body[arco-theme='dark'] .arco-card-grid-hoverable:hover::before, body[arco-theme='dark'] .arco-card-hoverable:hover { box-shadow: 0 4px 10px rgba(var(--gray-1), 40%); } @keyframes arco-carousel-slide-x-in { from { transform: translateX(100%); } to { transform: translateX(0); } } @keyframes arco-carousel-slide-x-out { from { transform: translateX(0); } to { transform: translateX(-100%); } } @keyframes arco-carousel-slide-x-in-reverse { from { transform: translateX(-100%); } to { transform: translateX(0); } } @keyframes arco-carousel-slide-x-out-reverse { from { transform: translateX(0); } to { transform: translateX(100%); } } @keyframes arco-carousel-slide-y-in { from { transform: translateY(100%); } to { transform: translateY(0); } } @keyframes arco-carousel-slide-y-out { from { transform: translateY(0); } to { transform: translateY(-100%); } } @keyframes arco-carousel-slide-y-in-reverse { from { transform: translateY(-100%); } to { transform: translateY(0); } } @keyframes arco-carousel-slide-y-out-reverse { from { transform: translateY(0); } to { transform: translateY(100%); } } @keyframes arco-carousel-card-bottom-to-middle { from { transform: translateX(0%) translateZ(-400px); opacity: 0; } to { transform: translateX(0%) translateZ(-200px); opacity: 0.4; } } @keyframes arco-carousel-card-middle-to-bottom { from { transform: translateX(-100%) translateZ(-200px); opacity: 0.4; } to { transform: translateX(-100%) translateZ(-400px); opacity: 0; } } @keyframes arco-carousel-card-top-to-middle { from { transform: translateX(-50%) translateZ(0); opacity: 1; } to { transform: translateX(-100%) translateZ(-200px); opacity: 0.4; } } @keyframes arco-carousel-card-middle-to-top { from { transform: translateX(0) translateZ(-200px); opacity: 0.4; } to { transform: translateX(-50%) translateZ(0); opacity: 1; } } @keyframes arco-carousel-card-bottom-to-middle-reverse { from { transform: translateX(-100%) translateZ(-400px); opacity: 0; } to { transform: translateX(-100%) translateZ(-200px); opacity: 0.4; } } @keyframes arco-carousel-card-middle-to-bottom-reverse { from { transform: translateX(0%) translateZ(-200px); opacity: 0.4; } to { transform: translateX(0%) translateZ(-400px); opacity: 0; } } @keyframes arco-carousel-card-top-to-middle-reverse { from { transform: translateX(-50%) translateZ(0); opacity: 1; } to { transform: translateX(0%) translateZ(-200px); opacity: 0.4; } } @keyframes arco-carousel-card-middle-to-top-reverse { from { transform: translateX(-100%) translateZ(-200px); opacity: 0.4; } to { transform: translateX(-50%) translateZ(0); opacity: 1; } } .arco-carousel { position: relative; } .arco-carousel-indicator-position-outer { margin-bottom: 30px; } .arco-carousel-slide, .arco-carousel-card, .arco-carousel-fade { position: relative; width: 100%; height: 100%; overflow: hidden; } .arco-carousel-slide > *, .arco-carousel-card > *, .arco-carousel-fade > * { position: absolute; top: 0; left: 0; width: 100%; height: 100%; overflow: hidden; } .arco-carousel-item-current { z-index: 1; } .arco-carousel-slide > *:not(.arco-carousel-item-current) { display: none; visibility: hidden; } .arco-carousel-slide.arco-carousel-horizontal .arco-carousel-item-slide-out { display: block; animation: arco-carousel-slide-x-out; } .arco-carousel-slide.arco-carousel-horizontal .arco-carousel-item-slide-in { display: block; animation: arco-carousel-slide-x-in; } .arco-carousel-slide.arco-carousel-horizontal.arco-carousel-negative .arco-carousel-item-slide-out { animation: arco-carousel-slide-x-out-reverse; } .arco-carousel-slide.arco-carousel-horizontal.arco-carousel-negative .arco-carousel-item-slide-in { animation: arco-carousel-slide-x-in-reverse; } .arco-carousel-slide.arco-carousel-vertical .arco-carousel-item-slide-out { display: block; animation: arco-carousel-slide-y-out; } .arco-carousel-slide.arco-carousel-vertical .arco-carousel-item-slide-in { display: block; animation: arco-carousel-slide-y-in; } .arco-carousel-slide.arco-carousel-vertical.arco-carousel-negative .arco-carousel-item-slide-out { animation: arco-carousel-slide-y-out-reverse; } .arco-carousel-slide.arco-carousel-vertical.arco-carousel-negative .arco-carousel-item-slide-in { animation: arco-carousel-slide-y-in-reverse; } .arco-carousel-card { perspective: 800px; } .arco-carousel-card > * { left: 50%; transform: translateX(-50%) translateZ(-400px); opacity: 0; animation: arco-carousel-card-middle-to-bottom; } .arco-carousel-card .arco-carousel-item-prev { transform: translateX(-100%) translateZ(-200px); opacity: 0.4; animation: arco-carousel-card-top-to-middle; } .arco-carousel-card .arco-carousel-item-next { transform: translateX(0%) translateZ(-200px); opacity: 0.4; animation: arco-carousel-card-bottom-to-middle; } .arco-carousel-card .arco-carousel-item-current { transform: translateX(-50%) translateZ(0); opacity: 1; animation: arco-carousel-card-middle-to-top; } .arco-carousel-card.arco-carousel-negative > * { animation: arco-carousel-card-middle-to-bottom-reverse; } .arco-carousel-card.arco-carousel-negative .arco-carousel-item-prev { animation: arco-carousel-card-bottom-to-middle-reverse; } .arco-carousel-card.arco-carousel-negative .arco-carousel-item-next { animation: arco-carousel-card-top-to-middle-reverse; } .arco-carousel-card.arco-carousel-negative .arco-carousel-item-current { animation: arco-carousel-card-middle-to-top-reverse; } .arco-carousel-fade > * { left: 50%; transform: translateX(-50%); opacity: 0; } .arco-carousel-fade .arco-carousel-item-current { opacity: 1; } .arco-carousel-indicator { position: absolute; display: flex; margin: 0; padding: 0; } .arco-carousel-indicator-wrapper { position: absolute; z-index: 2; } .arco-carousel-indicator-wrapper-top { top: 0; right: 0; left: 0; height: 48px; background: linear-gradient(180deg, rgba(0, 0, 0, 0.15) 0%, rgba(0, 0, 0, 0) 87%); } .arco-carousel-indicator-wrapper-bottom { right: 0; bottom: 0; left: 0; height: 48px; background: linear-gradient(180deg, rgba(0, 0, 0, 0) 13%, rgba(0, 0, 0, 0.15) 100%); } .arco-carousel-indicator-wrapper-left { top: 0; left: 0; width: 48px; height: 100%; background: linear-gradient(90deg, rgba(0, 0, 0, 0.15) 0%, rgba(0, 0, 0, 0) 87%); } .arco-carousel-indicator-wrapper-right { top: 0; right: 0; width: 48px; height: 100%; background: linear-gradient(90deg, rgba(0, 0, 0, 0) 13%, rgba(0, 0, 0, 0.15) 100%); } .arco-carousel-indicator-wrapper-outer { right: 0; left: 0; background: none; } .arco-carousel-indicator-bottom { bottom: 12px; left: 50%; transform: translateX(-50%); } .arco-carousel-indicator-top { top: 12px; left: 50%; transform: translateX(-50%); } .arco-carousel-indicator-left { top: 50%; left: 12px; transform: translate(-50%, -50%) rotate(90deg); } .arco-carousel-indicator-right { top: 50%; right: 12px; transform: translate(50%, -50%) rotate(90deg); } .arco-carousel-indicator-outer { left: 50%; padding: 4px; background-color: transparent; border-radius: 20px; transform: translateX(-50%); } .arco-carousel-indicator-outer.arco-carousel-indicator-dot { bottom: -22px; } .arco-carousel-indicator-outer.arco-carousel-indicator-line { bottom: -20px; } .arco-carousel-indicator-outer.arco-carousel-indicator-slider { bottom: -16px; padding: 0; background-color: rgba(var(--gray-4), 0.5); } .arco-carousel-indicator-outer .arco-carousel-indicator-item { background-color: rgba(var(--gray-4), 0.5); } .arco-carousel-indicator-outer .arco-carousel-indicator-item:hover, .arco-carousel-indicator-outer .arco-carousel-indicator-item-active { background-color: var(--color-fill-4); } .arco-carousel-indicator-item { display: inline-block; background-color: rgba(255, 255, 255, 0.3); border-radius: var(--border-radius-medium); cursor: pointer; } .arco-carousel-indicator-item:hover, .arco-carousel-indicator-item-active { background-color: var(--color-white); } .arco-carousel-indicator-dot .arco-carousel-indicator-item { width: 6px; height: 6px; border-radius: 50%; } .arco-carousel-indicator-dot .arco-carousel-indicator-item:not(:last-child) { margin-right: 8px; } .arco-carousel-indicator-line .arco-carousel-indicator-item { width: 12px; height: 4px; } .arco-carousel-indicator-line .arco-carousel-indicator-item:not(:last-child) { margin-right: 8px; } .arco-carousel-indicator-slider { width: 48px; height: 4px; background-color: rgba(255, 255, 255, 0.3); border-radius: var(--border-radius-medium); cursor: pointer; } .arco-carousel-indicator-slider .arco-carousel-indicator-item { position: absolute; top: 0; height: 100%; transition: left 0.3s; } .arco-carousel-arrow > div { position: absolute; z-index: 2; display: flex; align-items: center; justify-content: center; width: 24px; height: 24px; color: var(--color-white); background-color: rgba(255, 255, 255, 0.3); border-radius: 50%; cursor: pointer; } .arco-carousel-arrow > div > svg { color: var(--color-white); font-size: 14px; } .arco-carousel-arrow > div:hover { background-color: rgba(255, 255, 255, 0.5); } .arco-carousel-arrow-left { top: 50%; left: 12px; transform: translateY(-50%); } .arco-carousel-arrow-right { top: 50%; right: 12px; transform: translateY(-50%); } .arco-carousel-arrow-top { top: 12px; left: 50%; transform: translateX(-50%); } .arco-carousel-arrow-bottom { bottom: 12px; left: 50%; transform: translateX(-50%); } .arco-carousel-arrow-hover div { opacity: 0; transition: all 0.3s; } .arco-carousel:hover .arco-carousel-arrow-hover div { opacity: 1; } body[arco-theme='dark'] .arco-carousel-arrow > div { background-color: rgba(23, 23, 26, 0.3); } body[arco-theme='dark'] .arco-carousel-arrow > div:hover { background-color: rgba(23, 23, 26, 0.5); } body[arco-theme='dark'] .arco-carousel-indicator-item, body[arco-theme='dark'] .arco-carousel-indicator-slider { background-color: rgba(23, 23, 26, 0.3); } body[arco-theme='dark'] .arco-carousel-indicator-item-active, body[arco-theme='dark'] .arco-carousel-indicator-item:hover { background-color: var(--color-white); } body[arco-theme='dark'] .arco-carousel-indicator-outer.arco-carousel-indicator-slider { background-color: rgba(var(--gray-4), 0.5); } body[arco-theme='dark'] .arco-carousel-indicator-outer .arco-carousel-indicator-item:hover, body[arco-theme='dark'] .arco-carousel-indicator-outer .arco-carousel-indicator-item-active { background-color: var(--color-fill-4); } .arco-cascader-panel { display: inline-flex; box-sizing: border-box; height: 200px; overflow: hidden; white-space: nowrap; list-style: none; background-color: var(--color-bg-popup); border: 1px solid var(--color-fill-3); border-radius: var(--border-radius-medium); box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); } .arco-cascader-search-panel { justify-content: flex-start; width: 100%; overflow: auto; } .arco-cascader-popup-trigger-hover .arco-cascader-list-item { transition: fontweight 0s; } .arco-cascader-highlight { font-weight: 500; } .arco-cascader-panel-column { position: relative; display: inline-flex; flex-direction: column; min-width: 120px; height: 100%; max-height: 200px; background-color: var(--color-bg-popup); } .arco-cascader-panel-column-loading { display: inline-flex; align-items: center; justify-content: center; } .arco-cascader-panel-column:not(:last-of-type) { border-right: 1px solid var(--color-fill-3); } .arco-cascader-column-content { flex: 1; max-height: 200px; overflow-y: auto; } .arco-cascader-list-wrapper { position: relative; display: flex; flex-direction: column; box-sizing: border-box; height: 100%; padding: 4px 0; } .arco-cascader-list-wrapper-with-footer { padding-bottom: 0; } .arco-cascader-list-empty { display: flex; align-items: center; width: 100%; height: 100%; } .arco-cascader-list { flex: 1; box-sizing: border-box; margin: 0; padding: 0; list-style: none; } .arco-cascader-list-multiple .arco-cascader-option-label, .arco-cascader-list-strictly .arco-cascader-option-label { padding-left: 0; } .arco-cascader-list-multiple .arco-cascader-option, .arco-cascader-list-strictly .arco-cascader-option { padding-left: 12px; } .arco-cascader-list-multiple .arco-cascader-option .arco-checkbox, .arco-cascader-list-strictly .arco-cascader-option .arco-checkbox, .arco-cascader-list-multiple .arco-cascader-option .arco-radio, .arco-cascader-list-strictly .arco-cascader-option .arco-radio { margin-right: 8px; padding-left: 0; } .arco-cascader-search-list.arco-cascader-list-multiple .arco-cascader-option-label { padding-right: 12px; } .arco-cascader-list-footer { box-sizing: border-box; height: 36px; padding-left: 12px; line-height: 36px; border-top: 1px solid var(--color-fill-3); } .arco-cascader-option, .arco-cascader-search-option { position: relative; display: flex; box-sizing: border-box; min-width: 100px; height: 36px; color: var(--color-text-1); font-size: 14px; line-height: 36px; background-color: transparent; cursor: pointer; } .arco-cascader-option-label, .arco-cascader-search-option-label { flex-grow: 1; padding-right: 34px; padding-left: 12px; } .arco-cascader-option .arco-icon-right, .arco-cascader-search-option .arco-icon-right, .arco-cascader-option .arco-icon-check, .arco-cascader-search-option .arco-icon-check { position: absolute; top: 50%; right: 10px; color: var(--color-text-2); font-size: 12px; transform: translateY(-50%); } .arco-cascader-option .arco-icon-check, .arco-cascader-search-option .arco-icon-check { color: rgb(var(--primary-6)); } .arco-cascader-option .arco-icon-loading, .arco-cascader-search-option .arco-icon-loading { position: absolute; top: 50%; right: 10px; margin-top: -6px; color: rgb(var(--primary-6)); font-size: 12px; } .arco-cascader-option:hover, .arco-cascader-search-option-hover { color: var(--color-text-1); background-color: var(--color-fill-2); } .arco-cascader-option:hover .arco-checkbox:not(.arco-checkbox-disabled):not(.arco-checkbox-checked):hover .arco-checkbox-icon-hover::before, .arco-cascader-search-option-hover .arco-checkbox:not(.arco-checkbox-disabled):not(.arco-checkbox-checked):hover .arco-checkbox-icon-hover::before { background-color: var(--color-fill-3); } .arco-cascader-option:hover .arco-radio:not(.arco-radio-disabled):not(.arco-radio-checked):hover .arco-radio-icon-hover::before, .arco-cascader-search-option-hover .arco-radio:not(.arco-radio-disabled):not(.arco-radio-checked):hover .arco-radio-icon-hover::before { background-color: var(--color-fill-3); } .arco-cascader-option-disabled, .arco-cascader-search-option-disabled, .arco-cascader-option-disabled:hover, .arco-cascader-search-option-disabled:hover { color: var(--color-text-4); background-color: transparent; cursor: not-allowed; } .arco-cascader-option-disabled .arco-icon-right, .arco-cascader-search-option-disabled .arco-icon-right, .arco-cascader-option-disabled:hover .arco-icon-right, .arco-cascader-search-option-disabled:hover .arco-icon-right { color: inherit; } .arco-cascader-option-disabled .arco-icon-check, .arco-cascader-search-option-disabled .arco-icon-check, .arco-cascader-option-disabled:hover .arco-icon-check, .arco-cascader-search-option-disabled:hover .arco-icon-check { color: var(--color-primary-light-3); } .arco-cascader-option-active { color: var(--color-text-1); background-color: var(--color-fill-2); transition: all 0.2s cubic-bezier(0, 0, 1, 1); } .arco-cascader-option-active:hover { color: var(--color-text-1); background-color: var(--color-fill-2); } .arco-cascader-option-active.arco-cascader-option-disabled, .arco-cascader-option-active.arco-cascader-option-disabled:hover { color: var(--color-text-4); background-color: var(--color-fill-2); } .cascader-slide-enter-active, .cascader-slide-leave-active { transition: margin 0.3s cubic-bezier(0.34, 0.69, 0.1, 1); } .cascader-slide-enter-from, .cascader-slide-leave-to { margin-left: -120px; } .cascader-slide-enter-to, .cascader-slide-leave-from { margin-left: 0; } .arco-icon-hover.arco-checkbox-icon-hover::before { width: 24px; height: 24px; } .arco-checkbox { position: relative; display: inline-flex; align-items: center; box-sizing: border-box; padding-left: 4px; font-size: 14px; line-height: unset; cursor: pointer; } .arco-checkbox > input[type='checkbox'] { position: absolute; top: 0; left: 0; width: 0; height: 0; opacity: 0; } .arco-checkbox > input[type='checkbox']:focus-visible + .arco-checkbox-icon-hover::before { background-color: var(--color-fill-2); } .arco-checkbox:hover .arco-checkbox-icon-hover::before { background-color: var(--color-fill-2); } .arco-checkbox-label { margin-left: 8px; color: var(--color-text-1); } .arco-checkbox-icon { position: relative; box-sizing: border-box; width: 16px; height: 16px; background-color: var(--color-bg-2); border: 1px solid var(--color-border-2); border-radius: 4px; user-select: none; } .arco-checkbox-icon::after { position: absolute; top: 50%; left: 50%; display: block; width: 6px; height: 2px; background: var(--color-white); border-radius: 0.5px; transform: translateX(-50%) translateY(-50%) scale(0); content: ''; } .arco-checkbox-icon-check { position: relative; display: block; width: 8px; height: 100%; margin: 0 auto; color: var(--color-white); transform: scale(0); transform-origin: center 75%; } .arco-checkbox:hover .arco-checkbox-icon { border-color: var(--color-border-3); transition: border-color 0.1s cubic-bezier(0, 0, 1, 1), transform 0.3s cubic-bezier(0.3, 1.3, 0.3, 1); } .arco-checkbox-checked:hover .arco-checkbox-icon, .arco-checkbox-indeterminate:hover .arco-checkbox-icon { transition: transform 0.3s cubic-bezier(0.3, 1.3, 0.3, 1); } .arco-checkbox-checked .arco-checkbox-icon { background-color: rgb(var(--primary-6)); border-color: transparent; } .arco-checkbox-checked .arco-checkbox-icon-check { transform: scale(1); transition: transform 0.3s cubic-bezier(0.3, 1.3, 0.3, 1); } .arco-checkbox-indeterminate .arco-checkbox-icon { background-color: rgb(var(--primary-6)); border-color: transparent; } .arco-checkbox-indeterminate .arco-checkbox-icon svg { transform: scale(0); } .arco-checkbox-indeterminate .arco-checkbox-icon::after { transform: translateX(-50%) translateY(-50%) scale(1); transition: transform 0.3s cubic-bezier(0.3, 1.3, 0.3, 1); } .arco-checkbox.arco-checkbox-disabled { cursor: not-allowed; } .arco-checkbox.arco-checkbox-disabled .arco-checkbox-icon-hover { cursor: not-allowed; } .arco-checkbox.arco-checkbox-disabled:hover .arco-checkbox-mask { border-color: var(--color-border-2); } .arco-checkbox-checked:hover .arco-checkbox-icon, .arco-checkbox-indeterminate:hover .arco-checkbox-icon { border-color: transparent; } .arco-checkbox-disabled .arco-checkbox-icon { background-color: var(--color-fill-2); border-color: var(--color-border-2); } .arco-checkbox-disabled.arco-checkbox-checked .arco-checkbox-icon, .arco-checkbox-disabled.arco-checkbox-checked:hover .arco-checkbox-icon { background-color: var(--color-primary-light-3); border-color: transparent; } .arco-checkbox-disabled:hover .arco-checkbox-icon-hover::before, .arco-checkbox-checked:hover .arco-checkbox-icon-hover::before, .arco-checkbox-indeterminate:hover .arco-checkbox-icon-hover::before { background-color: transparent; } .arco-checkbox-disabled:hover .arco-checkbox-icon { border-color: var(--color-border-2); } .arco-checkbox-disabled .arco-checkbox-label { color: var(--color-text-4); } .arco-checkbox-disabled .arco-checkbox-icon-check { color: var(--color-fill-3); } .arco-checkbox-group { display: inline-block; } .arco-checkbox-group .arco-checkbox { margin-right: 16px; } .arco-checkbox-group-direction-vertical .arco-checkbox { display: flex; margin-right: 0; line-height: 32px; } .arco-icon-hover.arco-collapse-item-icon-hover::before { width: 16px; height: 16px; } .arco-icon-hover.arco-collapse-item-icon-hover:hover::before { background-color: var(--color-fill-2); } .arco-collapse { overflow: hidden; line-height: 1.5715; border: 1px solid var(--color-border-2); border-radius: 4px; } .arco-collapse-item { box-sizing: border-box; border-bottom: 1px solid var(--color-border-2); } .arco-collapse-item-active > .arco-collapse-item-header { background-color: var(--color-bg-2); border-color: var(--color-border-2); transition: border-color 0s ease 0s; } .arco-collapse-item-active > .arco-collapse-item-header .arco-collapse-item-header-title { font-weight: 500; } .arco-collapse-item-active > .arco-collapse-item-header .arco-collapse-item-expand-icon { transform: rotate(90deg); } .arco-collapse-item-active > .arco-collapse-item-header .arco-collapse-item-icon-right .arco-collapse-item-expand-icon { transform: rotate(-90deg); } .arco-collapse-item-header { position: relative; display: flex; align-items: center; justify-content: space-between; box-sizing: border-box; padding-top: 8px; padding-bottom: 8px; overflow: hidden; color: var(--color-text-1); font-size: 14px; line-height: 24px; background-color: var(--color-bg-2); border-bottom: 1px solid transparent; cursor: pointer; transition: border-color 0s ease 0.19s; } .arco-collapse-item-header-left { padding-right: 12px; padding-left: 33px; } .arco-collapse-item-header-right { padding-right: 33px; padding-left: 12px; } .arco-collapse-item-header-right + .arco-collapse-item-content { padding-left: 12px; } .arco-collapse-item-header-disabled { color: var(--color-text-4); background-color: var(--color-bg-2); cursor: not-allowed; } .arco-collapse-item-header-disabled .arco-collapse-item-header-icon { color: var(--color-text-4); } .arco-collapse-item-header-title { display: inline; } .arco-collapse-item-header-extra { float: right; } .arco-collapse-item .arco-collapse-item-icon-hover { position: absolute; top: 50%; left: 12px; text-align: center; transform: translateY(-50%); } .arco-collapse-item .arco-collapse-item-icon-right { right: 12px; left: unset; } .arco-collapse-item .arco-collapse-item-icon-right > .arco-collapse-item-header-icon-down { transform: rotate(-90deg); } .arco-collapse-item .arco-collapse-item-expand-icon { position: relative; display: block; color: var(--color-neutral-7); font-size: 14px; vertical-align: middle; transition: transform 0.2s cubic-bezier(0.34, 0.69, 0.1, 1); } .arco-collapse-item-content { position: relative; padding-right: 12px; padding-left: 33px; overflow: hidden; color: var(--color-text-1); font-size: 14px; background-color: var(--color-bg-5); } .arco-collapse-item-content-expanded { display: block; height: auto; } .arco-collapse-item-content-box { padding: 8px 0; } .arco-collapse-item.arco-collapse-item-disabled > .arco-collapse-item-content { color: var(--color-text-4); } .arco-collapse-item-no-icon > .arco-collapse-item-header { padding-right: 12px; padding-left: 12px; } .arco-collapse-item:last-of-type { border-bottom: none; } .arco-collapse.arco-collapse-borderless { border: none; } .arco-collapse::after { display: table; clear: both; content: ''; } .collapse-slider-enter-from, .collapse-slider-leave-to { height: 0; } .collapse-slider-enter-active, .collapse-slider-leave-active { transition: height 0.2s cubic-bezier(0.34, 0.69, 0.1, 1); } .arco-color-picker { display: inline-flex; align-items: center; box-sizing: border-box; background-color: var(--color-fill-2); border-radius: 4px; } .arco-color-picker-preview { box-sizing: border-box; border: 1px solid var(--color-border-2); } .arco-color-picker-value { margin-left: 4px; color: var(--color-text-1); font-weight: 400; } .arco-color-picker-input { display: none; } .arco-color-picker:hover { background-color: var(--color-fill-3); cursor: pointer; } .arco-color-picker-size-medium { height: 32px; padding: 4px 4px; } .arco-color-picker-size-medium .arco-color-picker-preview { width: 24px; height: 24px; } .arco-color-picker-size-medium .arco-color-picker-value { font-size: 14px; } .arco-color-picker-size-mini { height: 24px; padding: 4px 4px; } .arco-color-picker-size-mini .arco-color-picker-preview { width: 16px; height: 16px; } .arco-color-picker-size-mini .arco-color-picker-value { font-size: 12px; } .arco-color-picker-size-small { height: 28px; padding: 3px 4px; } .arco-color-picker-size-small .arco-color-picker-preview { width: 22px; height: 22px; } .arco-color-picker-size-small .arco-color-picker-value { font-size: 14px; } .arco-color-picker-size-large { height: 36px; padding: 5px 5px; } .arco-color-picker-size-large .arco-color-picker-preview { width: 26px; height: 26px; } .arco-color-picker-size-large .arco-color-picker-value { font-size: 14px; } .arco-color-picker.arco-color-picker-disabled { background-color: var(--color-fill-2); cursor: not-allowed; } .arco-color-picker.arco-color-picker-disabled .arco-color-picker-value { color: var(--color-text-4); } .arco-color-picker-panel { width: 260px; background-color: var(--color-bg-1); border-radius: 4px; box-shadow: 0 8px 20px 0 rgba(0, 0, 0, 0.1); } .arco-color-picker-panel .arco-color-picker-palette { position: relative; box-sizing: border-box; width: 100%; height: 178px; overflow: hidden; background-image: linear-gradient(0deg, #000000, transparent), linear-gradient(90deg, #ffffff, rgba(255, 255, 255, 0)); border-top: 1px solid var(--color-border-2); border-right: 1px solid var(--color-border-2); border-left: 1px solid var(--color-border-2); cursor: pointer; } .arco-color-picker-panel .arco-color-picker-palette .arco-color-picker-handler { position: absolute; box-sizing: border-box; width: 16px; height: 16px; background-color: transparent; border: 2px solid var(--color-bg-white); border-radius: 50%; transform: translate(-50%, -50%); } .arco-color-picker-panel .arco-color-picker-panel-control { padding: 12px; } .arco-color-picker-panel .arco-color-picker-panel-control .arco-color-picker-control-wrapper { display: flex; align-items: center; } .arco-color-picker-panel .arco-color-picker-panel-control .arco-color-picker-control-wrapper .arco-color-picker-preview { display: flex; align-items: center; justify-content: center; box-sizing: border-box; width: 40px; height: 40px; margin-left: auto; color: #fff; font-size: 20px; border: 1px solid var(--color-border-2); border-radius: 6px; } .arco-color-picker-panel .arco-color-picker-panel-control .arco-color-picker-control-wrapper .arco-color-picker-control-bar-alpha { margin-top: 12px; } .arco-color-picker-panel .arco-color-picker-panel-control .arco-color-picker-input-wrapper { display: flex; margin-top: 12px; } .arco-color-picker-panel .arco-color-picker-panel-control .arco-color-picker-input-wrapper .arco-color-picker-group-wrapper { display: flex; flex: 1; margin-left: 12px; } .arco-color-picker-panel .arco-color-picker-panel-control .arco-color-picker-input-wrapper .arco-select-view, .arco-color-picker-panel .arco-color-picker-panel-control .arco-color-picker-input-wrapper .arco-input-wrapper { margin-right: 0; padding: 0 6px; } .arco-color-picker-panel .arco-color-picker-panel-control .arco-color-picker-input-wrapper .arco-input-suffix, .arco-color-picker-panel .arco-color-picker-panel-control .arco-color-picker-input-wrapper .arco-input-prefix, .arco-color-picker-panel .arco-color-picker-panel-control .arco-color-picker-input-wrapper .arco-select-view-suffix { padding: 0; font-size: 12px; } .arco-color-picker-panel .arco-color-picker-panel-colors { padding: 12px; border-top: 1px solid var(--color-fill-3); } .arco-color-picker-panel .arco-color-picker-panel-colors .arco-color-picker-colors-section:not(:first-child) { margin-top: 12px; } .arco-color-picker-panel .arco-color-picker-panel-colors .arco-color-picker-colors-text { color: var(--color-text-1); font-weight: 400; font-size: 12px; } .arco-color-picker-panel .arco-color-picker-panel-colors .arco-color-picker-colors-empty { margin: 12px 0; color: var(--color-text-3); font-size: 12px; } .arco-color-picker-panel .arco-color-picker-panel-colors .arco-color-picker-colors-wrapper { margin-top: 8px; } .arco-color-picker-panel .arco-color-picker-panel-colors .arco-color-picker-colors-list { display: flex; flex-wrap: wrap; margin: -8px -4px 0; } .arco-color-picker-panel .arco-color-picker-panel-colors .arco-color-picker-color-block { width: 16px; height: 16px; margin: 6px 3px 0; overflow: hidden; background-image: conic-gradient(rgba(0, 0, 0, 0.06) 0 25%, transparent 0 50%, rgba(0, 0, 0, 0.06) 0 75%, transparent 0); background-size: 8px 8px; border-radius: 2px; cursor: pointer; transition: transform ease-out 60ms; } .arco-color-picker-panel .arco-color-picker-panel-colors .arco-color-picker-color-block .arco-color-picker-block { width: 100%; height: 100%; } .arco-color-picker-panel .arco-color-picker-panel-colors .arco-color-picker-color-block:hover { transform: scale(1.1); } .arco-color-picker-panel .arco-color-picker-control-bar-bg { background-image: conic-gradient(rgba(0, 0, 0, 0.06) 0 25%, transparent 0 50%, rgba(0, 0, 0, 0.06) 0 75%, transparent 0); background-size: 8px 8px; border-radius: 10px; } .arco-color-picker-panel .arco-color-picker-control-bar { position: relative; box-sizing: border-box; width: 182px; height: 14px; border: 1px solid var(--color-border-2); border-radius: 10px; cursor: pointer; } .arco-color-picker-panel .arco-color-picker-control-bar .arco-color-picker-handler { position: absolute; top: -2px; box-sizing: border-box; width: 16px; height: 16px; background-color: var(--color-bg-white); border: 1px solid var(--color-border-2); border-radius: 50%; transform: translateX(-50%); } .arco-color-picker-panel .arco-color-picker-control-bar .arco-color-picker-handler::before { display: block; width: 100%; height: 100%; background: var(--color-bg-white); border-radius: 50%; content: ''; } .arco-color-picker-panel .arco-color-picker-control-bar .arco-color-picker-handler::after { position: absolute; top: 50%; left: 50%; width: 8px; height: 8px; background: currentColor; border-radius: 50%; transform: translate(-50%, -50%); content: ''; } .arco-color-picker-panel .arco-color-picker-control-bar-hue { background: linear-gradient(90deg, #f00 0, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, #f00); } .arco-color-picker-panel .arco-color-picker-select { width: 58px; } .arco-color-picker-panel .arco-color-picker-input-alpha { flex: 0 0 auto; width: 52px; } .arco-color-picker-panel .arco-color-picker-input-hex .arco-input { padding-left: 4px; } .arco-color-picker-panel.arco-color-picker-panel-disabled .arco-color-picker-palette, .arco-color-picker-panel.arco-color-picker-panel-disabled .arco-color-picker-control-bar, .arco-color-picker-panel.arco-color-picker-panel-disabled .arco-color-picker-color-block, .arco-color-picker-panel.arco-color-picker-panel-disabled .arco-color-picker-preview { cursor: not-allowed; opacity: 0.8; } .arco-color-picker-select-popup .arco-select-option { font-size: 12px !important; line-height: 24px !important; } .arco-comment { display: flex; flex-wrap: nowrap; font-size: 14px; line-height: 1.5715; } .arco-comment:not(:first-of-type), .arco-comment-inner-comment { margin-top: 20px; } .arco-comment-inner { flex: 1; } .arco-comment-avatar { flex-shrink: 0; margin-right: 12px; cursor: pointer; } .arco-comment-avatar > img { width: 32px; height: 32px; border-radius: var(--border-radius-circle); } .arco-comment-author { margin-right: 8px; color: var(--color-text-2); font-size: 14px; } .arco-comment-datetime { color: var(--color-text-3); font-size: 12px; } .arco-comment-content { color: var(--color-text-1); } .arco-comment-title-align-right { display: flex; justify-content: space-between; } .arco-comment-actions { margin-top: 8px; color: var(--color-text-2); font-size: 14px; } .arco-comment-actions > *:not(:last-child) { margin-right: 8px; } .arco-comment-actions-align-right { display: flex; justify-content: flex-end; } .arco-picker-container, .arco-picker-range-container { box-sizing: border-box; min-height: 60px; overflow: hidden; background-color: var(--color-bg-popup); border: 1px solid var(--color-neutral-3); border-radius: var(--border-radius-medium); box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); } .arco-picker-container-shortcuts-placement-left, .arco-picker-range-container-shortcuts-placement-left, .arco-picker-container-shortcuts-placement-right, .arco-picker-range-container-shortcuts-placement-right { display: flex; align-items: flex-start; } .arco-picker-container-shortcuts-placement-left > .arco-picker-shortcuts, .arco-picker-range-container-shortcuts-placement-left > .arco-picker-shortcuts, .arco-picker-container-shortcuts-placement-right > .arco-picker-shortcuts, .arco-picker-range-container-shortcuts-placement-right > .arco-picker-shortcuts { display: flex; flex-direction: column; box-sizing: border-box; padding: 5px 8px; overflow-x: hidden; overflow-y: auto; } .arco-picker-container-shortcuts-placement-left > .arco-picker-shortcuts > *, .arco-picker-range-container-shortcuts-placement-left > .arco-picker-shortcuts > *, .arco-picker-container-shortcuts-placement-right > .arco-picker-shortcuts > *, .arco-picker-range-container-shortcuts-placement-right > .arco-picker-shortcuts > * { margin: 5px 0; } .arco-picker-container-shortcuts-placement-left .arco-picker-panel-wrapper, .arco-picker-range-container-shortcuts-placement-left .arco-picker-panel-wrapper, .arco-picker-container-shortcuts-placement-left .arco-picker-range-panel-wrapper, .arco-picker-range-container-shortcuts-placement-left .arco-picker-range-panel-wrapper { border-left: 1px solid var(--color-neutral-3); } .arco-picker-container-shortcuts-placement-right .arco-picker-panel-wrapper, .arco-picker-range-container-shortcuts-placement-right .arco-picker-panel-wrapper, .arco-picker-container-shortcuts-placement-right .arco-picker-range-panel-wrapper, .arco-picker-range-container-shortcuts-placement-right .arco-picker-range-panel-wrapper { border-right: 1px solid var(--color-neutral-3); } .arco-picker-container-panel-only, .arco-picker-range-container-panel-only { box-shadow: none; } .arco-picker-container-panel-only .arco-panel-date-inner, .arco-picker-range-container-panel-only .arco-panel-date-inner { width: 100%; } .arco-picker-range-container-panel-only .arco-panel-date { width: 100%; } .arco-picker-header { display: flex; padding: 8px 16px; border-bottom: 1px solid var(--color-neutral-3); } .arco-picker-header-title { flex: 1; color: var(--color-text-1); font-size: 14px; line-height: 24px; text-align: center; } .arco-picker-header-icon { width: 24px; height: 24px; margin-right: 2px; margin-left: 2px; color: var(--color-text-2); font-size: 12px; line-height: 24px; text-align: center; background-color: var(--color-bg-popup); border-radius: 50%; transition: all 0.1s cubic-bezier(0, 0, 1, 1); user-select: none; } .arco-picker-header-icon:not(.arco-picker-header-icon-hidden) { cursor: pointer; } .arco-picker-header-icon:not(.arco-picker-header-icon-hidden):hover { background-color: var(--color-fill-3); } .arco-picker-header-label { padding: 2px; border-radius: 2px; cursor: pointer; transition: all 0.1s; } .arco-picker-header-label:hover { background-color: var(--color-fill-3); } .arco-picker-body { padding: 14px 16px; } .arco-picker-week-list { display: flex; box-sizing: border-box; width: 100%; padding: 14px 16px 0 16px; } .arco-picker-week-list-item { flex: 1; height: 32px; padding: 0; color: #7d7d7f; font-weight: 400; line-height: 32px; text-align: center; } .arco-picker-row { display: flex; padding: 2px 0; } .arco-picker-cell { flex: 1; } .arco-picker-cell .arco-picker-date { display: flex; justify-content: center; box-sizing: border-box; width: 100%; height: 100%; padding: 4px 0; cursor: pointer; } .arco-picker-date-value { min-width: 24px; height: 24px; color: var(--color-text-4); font-size: 14px; line-height: 24px; text-align: center; border-radius: var(--border-radius-circle); cursor: pointer; } .arco-picker-cell-in-view .arco-picker-date-value { color: var(--color-text-1); font-weight: 500; } .arco-picker-cell-selected .arco-picker-date-value { color: var(--color-white); background-color: rgb(var(--primary-6)); transition: background-color 0.1s cubic-bezier(0, 0, 1, 1); } .arco-picker-cell-in-view:not(.arco-picker-cell-selected):not(.arco-picker-cell-range-start):not(.arco-picker-cell-range-end):not(.arco-picker-cell-disabled):not(.arco-picker-cell-week) .arco-picker-date-value:hover { color: var(--color-text-1); background-color: var(--color-fill-3); } .arco-picker-cell-today { position: relative; } .arco-picker-cell-today::after { position: absolute; bottom: -2px; left: 50%; display: block; width: 4px; height: 4px; margin-left: -2px; background-color: rgb(var(--primary-6)); border-radius: 50%; content: ''; } .arco-picker-cell-in-range .arco-picker-date { background-color: var(--color-primary-light-1); } .arco-picker-cell-range-start .arco-picker-date { border-top-left-radius: 24px; border-bottom-left-radius: 24px; } .arco-picker-cell-range-end .arco-picker-date { border-top-right-radius: 24px; border-bottom-right-radius: 24px; } .arco-picker-cell-in-range-near-hover .arco-picker-date { border-radius: 0; } .arco-picker-cell-range-start .arco-picker-date-value, .arco-picker-cell-range-end .arco-picker-date-value { color: var(--color-white); background-color: rgb(var(--primary-6)); border-radius: var(--border-radius-circle); } .arco-picker-cell-hover-in-range .arco-picker-date { background-color: var(--color-primary-light-1); } .arco-picker-cell-hover-range-start .arco-picker-date { border-radius: 24px 0 0 24px; } .arco-picker-cell-hover-range-end .arco-picker-date { border-radius: 0 24px 24px 0; } .arco-picker-cell-hover-range-start .arco-picker-date-value, .arco-picker-cell-hover-range-end .arco-picker-date-value { color: var(--color-text-1); background-color: var(--color-primary-light-2); border-radius: 50%; } .arco-picker-cell-disabled .arco-picker-date { background-color: var(--color-fill-1); cursor: not-allowed; } .arco-picker-cell-disabled .arco-picker-date-value { color: var(--color-text-4); background-color: transparent; cursor: not-allowed; } .arco-picker-footer { width: min-content; min-width: 100%; } .arco-picker-footer-btn-wrapper { display: flex; align-items: center; justify-content: space-between; box-sizing: border-box; padding: 3px 8px; border-top: 1px solid var(--color-neutral-3); } .arco-picker-footer-btn-wrapper :only-child { margin-left: auto; } .arco-picker-footer-extra-wrapper { box-sizing: border-box; padding: 8px 24px; color: var(--color-text-1); font-size: 12px; border-top: 1px solid var(--color-neutral-3); } .arco-picker-footer-now-wrapper { box-sizing: border-box; height: 36px; line-height: 36px; text-align: center; border-top: 1px solid var(--color-neutral-3); } .arco-picker-btn-confirm { margin: 5px 0; } .arco-picker-shortcuts { flex: 1; } .arco-picker-shortcuts > * { margin: 5px 10px 5px 0; } .arco-panel-date { display: flex; box-sizing: border-box; } .arco-panel-date-inner { width: 265px; } .arco-panel-date-inner .arco-picker-body { padding-top: 0; } .arco-panel-date-timepicker { display: flex; flex-direction: column; border-left: 1px solid var(--color-neutral-3); } .arco-panel-date-timepicker-title { width: 100%; height: 40px; color: var(--color-text-1); font-weight: 400; font-size: 14px; line-height: 40px; text-align: center; border-bottom: 1px solid var(--color-neutral-3); } .arco-panel-date-timepicker .arco-timepicker { height: 276px; padding: 0 6px; overflow: hidden; } .arco-panel-date-timepicker .arco-timepicker-column { box-sizing: border-box; width: auto; height: 100%; padding: 0 4px; } .arco-panel-date-timepicker .arco-timepicker-column::-webkit-scrollbar { width: 0; } .arco-panel-date-timepicker .arco-timepicker-column:not(:last-child) { border-right: 0; } .arco-panel-date-timepicker .arco-timepicker ul::after { height: 244px; } .arco-panel-date-timepicker .arco-timepicker-cell { width: 36px; } .arco-panel-date-timepicker .arco-timepicker-cell-inner { padding-left: 10px; } .arco-panel-date-footer { border-right: 1px solid var(--color-neutral-3); } .arco-panel-date-with-view-tabs { flex-direction: column; min-width: 265px; } .arco-panel-date-with-view-tabs .arco-panel-date-timepicker .arco-timepicker-column { flex: 1; } .arco-panel-date-with-view-tabs .arco-panel-date-timepicker .arco-timepicker-column::-webkit-scrollbar { width: 0; } .arco-panel-date-with-view-tabs .arco-panel-date-timepicker .arco-timepicker-cell { width: 100%; text-align: center; } .arco-panel-date-with-view-tabs .arco-panel-date-timepicker .arco-timepicker-cell-inner { padding-left: 0; } .arco-panel-date-view-tabs { display: flex; border-top: 1px solid var(--color-neutral-3); } .arco-panel-date-view-tab-pane { flex: 1; height: 50px; color: var(--color-text-4); font-size: 14px; line-height: 50px; text-align: center; border-right: 1px solid var(--color-neutral-3); cursor: pointer; } .arco-panel-date-view-tab-pane:last-child { border-right: none; } .arco-panel-date-view-tab-pane-text { margin-left: 8px; } .arco-panel-date-view-tab-pane-active { color: var(--color-text-1); } .arco-panel-month, .arco-panel-quarter, .arco-panel-year { box-sizing: border-box; width: 265px; } .arco-panel-month .arco-picker-date, .arco-panel-quarter .arco-picker-date, .arco-panel-year .arco-picker-date { padding: 4px; } .arco-panel-month .arco-picker-date-value, .arco-panel-quarter .arco-picker-date-value, .arco-panel-year .arco-picker-date-value { width: 100%; border-radius: 24px; } .arco-panel-month .arco-picker-cell:not(.arco-picker-cell-selected):not(.arco-picker-cell-range-start):not(.arco-picker-cell-range-end):not(.arco-picker-cell-disabled):not(.arco-picker-cell-week) .arco-picker-date-value:hover, .arco-panel-quarter .arco-picker-cell:not(.arco-picker-cell-selected):not(.arco-picker-cell-range-start):not(.arco-picker-cell-range-end):not(.arco-picker-cell-disabled):not(.arco-picker-cell-week) .arco-picker-date-value:hover, .arco-panel-year .arco-picker-cell:not(.arco-picker-cell-selected):not(.arco-picker-cell-range-start):not(.arco-picker-cell-range-end):not(.arco-picker-cell-disabled):not(.arco-picker-cell-week) .arco-picker-date-value:hover { border-radius: 24px; } .arco-panel-year { box-sizing: border-box; width: 265px; } .arco-panel-week { box-sizing: border-box; } .arco-panel-week-wrapper { display: flex; } .arco-panel-week-inner { width: 298px; } .arco-panel-week-inner .arco-picker-body { padding-top: 0; } .arco-panel-week .arco-picker-row-week { cursor: pointer; } .arco-panel-week .arco-picker-row-week .arco-picker-date-value { width: 100%; border-radius: 0; } .arco-panel-week .arco-picker-cell .arco-picker-date { border-radius: 0; } .arco-panel-week .arco-picker-cell:nth-child(2) .arco-picker-date { padding-left: 4px; border-top-left-radius: 24px; border-bottom-left-radius: 24px; } .arco-panel-week .arco-picker-cell:nth-child(2) .arco-picker-date .arco-picker-date-value { border-top-left-radius: 24px; border-bottom-left-radius: 24px; } .arco-panel-week .arco-picker-cell:nth-child(8) .arco-picker-date { padding-right: 4px; border-top-right-radius: 24px; border-bottom-right-radius: 24px; } .arco-panel-week .arco-picker-cell:nth-child(8) .arco-picker-date .arco-picker-date-value { border-top-right-radius: 24px; border-bottom-right-radius: 24px; } .arco-panel-week .arco-picker-row-week:hover .arco-picker-cell:not(.arco-picker-cell-week):not(.arco-picker-cell-selected):not(.arco-picker-cell-range-start):not(.arco-picker-cell-range-end) .arco-picker-date-value { background-color: var(--color-fill-3); } .arco-panel-quarter { box-sizing: border-box; width: 265px; } .arco-picker-range-wrapper { display: flex; } .arco-datepicker-shortcuts-wrapper { box-sizing: border-box; width: 106px; height: 100%; max-height: 300px; margin: 10px 0 0 0; padding: 0; overflow-y: auto; list-style: none; } .arco-datepicker-shortcuts-wrapper > li { box-sizing: border-box; width: 100%; padding: 6px 16px; cursor: pointer; } .arco-datepicker-shortcuts-wrapper > li:hover { color: rgb(var(--primary-6)); } .arco-descriptions-table { width: 100%; border-collapse: collapse; } .arco-descriptions-table-layout-fixed table { table-layout: fixed; } .arco-descriptions-title { margin-bottom: 16px; color: var(--color-text-1); font-weight: 500; font-size: 16px; line-height: 1.5715; } .arco-descriptions-item, .arco-descriptions-item-label, .arco-descriptions-item-value { box-sizing: border-box; font-size: 14px; line-height: 1.5715; text-align: left; } .arco-descriptions-table-layout-fixed .arco-descriptions-item-label { width: auto; } .arco-descriptions-item-label-block { width: 1px; padding: 0 4px 12px 0; color: var(--color-text-3); font-weight: 500; white-space: nowrap; } .arco-descriptions-item-value-block { padding: 0 4px 12px 0; color: var(--color-text-1); font-weight: 400; white-space: pre-wrap; word-break: break-word; } .arco-descriptions-item-label-inline, .arco-descriptions-item-value-inline { box-sizing: border-box; font-size: 14px; line-height: 1.5715; text-align: left; } .arco-descriptions-item-label-inline { margin-bottom: 2px; color: var(--color-text-3); font-weight: 500; } .arco-descriptions-item-value-inline { color: var(--color-text-1); font-weight: 400; } .arco-descriptions-layout-inline-horizontal .arco-descriptions-item-label-inline { margin-right: 4px; } .arco-descriptions-layout-inline-horizontal .arco-descriptions-item-label-inline, .arco-descriptions-layout-inline-horizontal .arco-descriptions-item-value-inline { display: inline-block; margin-bottom: 0; } .arco-descriptions-border.arco-descriptions-layout-inline-vertical .arco-descriptions-item { padding: 12px 20px; } .arco-descriptions-border .arco-descriptions-body { overflow: hidden; border: 1px solid var(--color-border-2); border-radius: 4px; } .arco-descriptions-border .arco-descriptions-row:not(:last-child) { border-bottom: 1px solid var(--color-border-2); } .arco-descriptions-border .arco-descriptions-item, .arco-descriptions-border .arco-descriptions-item-label-block, .arco-descriptions-border .arco-descriptions-item-value-block { padding: 7px 20px; border-right: 1px solid var(--color-border-2); } .arco-descriptions-border .arco-descriptions-item-label-block { background-color: var(--color-fill-1); } .arco-descriptions-border .arco-descriptions-item-value-block:last-child { border-right: none; } .arco-descriptions-border .arco-descriptions-item:last-child { border-right: none; } .arco-descriptions-border.arco-descriptions-layout-vertical .arco-descriptions-item-label-block:last-child { border-right: none; } .arco-descriptions-layout-vertical:not(.arco-descriptions-border) .arco-descriptions-item-value-block:first-child { padding-left: 0; } .arco-descriptions-size-mini .arco-descriptions-title { margin-bottom: 6px; } .arco-descriptions-size-mini .arco-descriptions-item-label-block, .arco-descriptions-size-mini .arco-descriptions-item-value-block { padding-right: 20px; padding-bottom: 2px; font-size: 12px; } .arco-descriptions-size-mini.arco-descriptions-border .arco-descriptions-item-label-block, .arco-descriptions-size-mini.arco-descriptions-border .arco-descriptions-item-value-block { padding: 3px 20px; } .arco-descriptions-size-mini.arco-descriptions-border.arco-descriptions-layout-inline-vertical .arco-descriptions-item { padding: 8px 20px; } .arco-descriptions-size-small .arco-descriptions-title { margin-bottom: 8px; } .arco-descriptions-size-small .arco-descriptions-item-label-block, .arco-descriptions-size-small .arco-descriptions-item-value-block { padding-right: 20px; padding-bottom: 4px; font-size: 14px; } .arco-descriptions-size-small.arco-descriptions-border .arco-descriptions-item-label-block, .arco-descriptions-size-small.arco-descriptions-border .arco-descriptions-item-value-block { padding: 3px 20px; } .arco-descriptions-size-small.arco-descriptions-border.arco-descriptions-layout-inline-vertical .arco-descriptions-item { padding: 8px 20px; } .arco-descriptions-size-medium .arco-descriptions-title { margin-bottom: 12px; } .arco-descriptions-size-medium .arco-descriptions-item-label-block, .arco-descriptions-size-medium .arco-descriptions-item-value-block { padding-right: 20px; padding-bottom: 8px; font-size: 14px; } .arco-descriptions-size-medium.arco-descriptions-border .arco-descriptions-item-label-block, .arco-descriptions-size-medium.arco-descriptions-border .arco-descriptions-item-value-block { padding: 5px 20px; } .arco-descriptions-size-medium.arco-descriptions-border.arco-descriptions-layout-inline-vertical .arco-descriptions-item { padding: 10px 20px; } .arco-descriptions-size-large .arco-descriptions-title { margin-bottom: 20px; } .arco-descriptions-size-large .arco-descriptions-item-label-block, .arco-descriptions-size-large .arco-descriptions-item-value-block { padding-right: 20px; padding-bottom: 16px; font-size: 14px; } .arco-descriptions-size-large.arco-descriptions-border .arco-descriptions-item-label-block, .arco-descriptions-size-large.arco-descriptions-border .arco-descriptions-item-value-block { padding: 9px 20px; } .arco-descriptions-size-large.arco-descriptions-border.arco-descriptions-layout-inline-vertical .arco-descriptions-item { padding: 14px 20px; } .arco-divider-horizontal { position: relative; clear: both; width: 100%; min-width: 100%; max-width: 100%; margin: 20px 0; border-bottom: 1px solid var(--color-border-2); } .arco-divider-horizontal.arco-divider-with-text { margin: 20px 0; } .arco-divider-vertical { display: inline-block; min-width: 1px; max-width: 1px; min-height: 1em; margin: 0 12px; vertical-align: middle; border-left: 1px solid var(--color-border-2); } .arco-divider-text { position: absolute; top: 50%; box-sizing: border-box; padding: 0 16px; color: var(--color-text-1); font-weight: 500; font-size: 14px; line-height: 2; background: var(--color-bg-2); transform: translateY(-50%); } .arco-divider-text-center { left: 50%; transform: translate(-50%, -50%); } .arco-divider-text-left { left: 24px; } .arco-divider-text-right { right: 24px; } .arco-drawer-container { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 1001; } .arco-drawer-mask { position: absolute; top: 0; right: 0; bottom: 0; left: 0; background-color: var(--color-mask-bg); } .arco-drawer { position: absolute; display: flex; flex-direction: column; width: 100%; height: 100%; overflow: auto; line-height: 1.5715; background-color: var(--color-bg-3); } .arco-drawer-header { display: flex; flex-shrink: 0; align-items: center; box-sizing: border-box; width: 100%; height: 48px; padding: 0 16px; border-bottom: 1px solid var(--color-border-2); } .arco-drawer-header .arco-drawer-title { margin-right: auto; color: var(--color-text-1); font-weight: 500; font-size: 16px; text-align: left; } .arco-drawer-header .arco-drawer-close-btn { margin-left: 8px; color: var(--color-text-1); font-size: 12px; cursor: pointer; } .arco-drawer-footer { flex-shrink: 0; box-sizing: border-box; padding: 10px 16px; text-align: right; border-top: 1px solid var(--color-border-2); } .arco-drawer-footer > .arco-btn { margin-left: 12px; } .arco-drawer-body { position: relative; flex: 1; box-sizing: border-box; height: 100%; padding: 12px 16px; overflow: auto; color: var(--color-text-1); } .arco-drawer-penetrable { pointer-events: none; } .arco-drawer-penetrable .arco-drawer { pointer-events: auto; } .fade-drawer-enter-from, .fade-drawer-appear-from { opacity: 0; } .fade-drawer-enter-to, .fade-drawer-appear-to { opacity: 1; } .fade-drawer-enter-active, .fade-drawer-appear-active { transition: opacity 0.3s cubic-bezier(0.34, 0.69, 0.1, 1); } .fade-drawer-leave-from { opacity: 1; } .fade-drawer-leave-to { opacity: 0; } .fade-drawer-leave-active { transition: opacity 0.3s cubic-bezier(0.34, 0.69, 0.1, 1); } .slide-left-drawer-enter-from, .slide-left-drawer-appear-from { transform: translateX(-100%); } .slide-left-drawer-enter-to, .slide-left-drawer-appear-to { transform: translateX(0); } .slide-left-drawer-enter-active, .slide-left-drawer-appear-active { transition: transform 0.3s cubic-bezier(0.34, 0.69, 0.1, 1); } .slide-left-drawer-leave-from { transform: translateX(0); } .slide-left-drawer-leave-to { transform: translateX(-100%); } .slide-left-drawer-leave-active { transition: transform 0.3s cubic-bezier(0.34, 0.69, 0.1, 1); } .slide-right-drawer-enter-from, .slide-right-drawer-appear-from { transform: translateX(100%); } .slide-right-drawer-enter-to, .slide-right-drawer-appear-to { transform: translateX(0); } .slide-right-drawer-enter-active, .slide-right-drawer-appear-active { transition: transform 0.3s cubic-bezier(0.34, 0.69, 0.1, 1); } .slide-right-drawer-leave-from { transform: translateX(0); } .slide-right-drawer-leave-to { transform: translateX(100%); } .slide-right-drawer-leave-active { transition: transform 0.3s cubic-bezier(0.34, 0.69, 0.1, 1); } .slide-top-drawer-enter, .slide-top-drawer-appear { transform: translateY(-100%); } .slide-top-drawer-enter-from, .slide-top-drawer-appear-from { transform: translateY(-100%); } .slide-top-drawer-enter-to, .slide-top-drawer-appear-to { transform: translateY(0); } .slide-top-drawer-enter-active, .slide-top-drawer-appear-active { transition: transform 0.3s cubic-bezier(0.34, 0.69, 0.1, 1); } .slide-top-drawer-leave-from { transform: translateY(0); } .slide-top-drawer-leave-to { transform: translateY(-100%); } .slide-top-drawer-leave-active { transition: transform 0.3s cubic-bezier(0.34, 0.69, 0.1, 1); } .slide-bottom-drawer-enter-from, .slide-bottom-drawer-appear-from { transform: translateY(100%); } .slide-bottom-drawer-enter-to, .slide-bottom-drawer-appear-to { transform: translateY(0); } .slide-bottom-drawer-enter-active, .slide-bottom-drawer-appear-active { transition: transform 0.3s cubic-bezier(0.34, 0.69, 0.1, 1); } .slide-bottom-drawer-leave-from { transform: translateY(0); } .slide-bottom-drawer-leave-to { transform: translateY(100%); } .slide-bottom-drawer-leave-active { transition: transform 0.3s cubic-bezier(0.34, 0.69, 0.1, 1); } /********************************************** * Popup Box **********************************************/ /********************************************** * Popup Options * status: default / disabled / selected / hover **********************************************/ .arco-dropdown { box-sizing: border-box; padding: 4px 0; background-color: var(--color-bg-popup); border: 1px solid var(--color-fill-3); border-radius: var(--border-radius-medium); box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); } .arco-dropdown-list { margin-top: 0; margin-bottom: 0; padding-left: 0; list-style: none; } .arco-dropdown-list-wrapper { max-height: 200px; overflow-y: auto; } .arco-dropdown-option { position: relative; z-index: 1; display: flex; align-items: center; box-sizing: border-box; width: 100%; padding: 0 12px; color: var(--color-text-1); font-size: 14px; line-height: 36px; text-align: left; background-color: transparent; cursor: pointer; } .arco-dropdown-option-content { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .arco-dropdown-option-has-suffix { justify-content: space-between; } .arco-dropdown-option-active, .arco-dropdown-option:not(.arco-dropdown-option-disabled):hover { color: var(--color-text-1); background-color: var(--color-fill-2); transition: all 0.1s cubic-bezier(0, 0, 1, 1); } .arco-dropdown-option-disabled { color: var(--color-text-4); background-color: transparent; cursor: not-allowed; } .arco-dropdown-option-icon { display: inline-flex; margin-right: 8px; } .arco-dropdown-option-suffix { margin-left: 12px; } .arco-dropdown-group:first-child .arco-dropdown-group-title { margin-top: 8px; } .arco-dropdown-group-title { box-sizing: border-box; width: 100%; margin-top: 8px; padding: 0 12px; color: var(--color-text-3); font-size: 12px; line-height: 20px; cursor: default; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .arco-dropdown-submenu { margin-top: -4px; } .arco-dropdown.arco-dropdown-has-footer { padding-bottom: 0; } .arco-dropdown-footer { border-top: 1px solid var(--color-fill-3); } .arco-empty { box-sizing: border-box; width: 100%; padding: 10px 0; text-align: center; } .arco-empty-image { margin-bottom: 4px; color: var(--color-text-4); font-size: 48px; line-height: 1; } .arco-empty-image img { height: 80px; } .arco-empty .arco-empty-description { color: var(--color-text-4); font-size: 14px; } .arco-form-item-status-validating .arco-input-wrapper:not(.arco-input-disabled), .arco-form-item-status-validating .arco-textarea-wrapper:not(.arco-textarea-disabled) { background-color: var(--color-bg-2); border-color: var(--color-border-3); } .arco-form-item-status-validating .arco-input-wrapper:not(.arco-input-disabled):hover, .arco-form-item-status-validating .arco-textarea-wrapper:not(.arco-textarea-disabled):hover { background-color: var(--color-fill-3); border-color: transparent; } .arco-form-item-status-validating .arco-input-wrapper:not(.arco-input-disabled).arco-input-focus, .arco-form-item-status-validating .arco-textarea-wrapper:not(.arco-textarea-disabled).arco-textarea-focus { background-color: var(--color-bg-2); border-color: rgb(var(--primary-6)); box-shadow: 0 0 0 0 var(--color-primary-light-2); } .arco-form-item-status-validating .arco-select-view:not(.arco-select-view-disabled), .arco-form-item-status-validating .arco-input-tag:not(.arco-input-tag-disabled) { background-color: var(--color-bg-2); border-color: var(--color-border-3); } .arco-form-item-status-validating .arco-select-view:not(.arco-select-view-disabled):hover, .arco-form-item-status-validating .arco-input-tag:not(.arco-input-tag-disabled):hover { background-color: var(--color-fill-3); border-color: transparent; } .arco-form-item-status-validating .arco-select-view:not(.arco-select-view-disabled).arco-select-view-focus, .arco-form-item-status-validating .arco-input-tag:not(.arco-input-tag-disabled).arco-input-tag-focus { background-color: var(--color-bg-2); border-color: rgb(var(--primary-6)); box-shadow: 0 0 0 0 var(--color-primary-light-2); } .arco-form-item-status-validating .arco-picker:not(.arco-picker-disabled) { border-color: var(--color-border-3); background-color: var(--color-bg-2); } .arco-form-item-status-validating .arco-picker:not(.arco-picker-disabled):hover { border-color: transparent; background-color: var(--color-fill-3); } .arco-form-item-status-validating .arco-picker-focused:not(.arco-picker-disabled), .arco-form-item-status-validating .arco-picker-focused:not(.arco-picker-disabled):hover { border-color: rgb(var(--primary-6)); background-color: var(--color-bg-2); box-shadow: 0 0 0 0 var(--color-primary-light-2); } .arco-form-item-status-validating .arco-form-item-message-help { color: rgb(var(--primary-6)); } .arco-form-item-status-validating .arco-form-item-feedback { color: rgb(var(--primary-6)); } .arco-form-item-status-success .arco-input-wrapper:not(.arco-input-disabled), .arco-form-item-status-success .arco-textarea-wrapper:not(.arco-textarea-disabled) { background-color: var(--color-bg-2); border-color: var(--color-border-3); } .arco-form-item-status-success .arco-input-wrapper:not(.arco-input-disabled):hover, .arco-form-item-status-success .arco-textarea-wrapper:not(.arco-textarea-disabled):hover { background-color: var(--color-fill-3); border-color: transparent; } .arco-form-item-status-success .arco-input-wrapper:not(.arco-input-disabled).arco-input-focus, .arco-form-item-status-success .arco-textarea-wrapper:not(.arco-textarea-disabled).arco-textarea-focus { background-color: var(--color-bg-2); border-color: rgb(var(--success-6)); box-shadow: 0 0 0 0 var(--color-success-light-2); } .arco-form-item-status-success .arco-select-view:not(.arco-select-view-disabled), .arco-form-item-status-success .arco-input-tag:not(.arco-input-tag-disabled) { background-color: var(--color-bg-2); border-color: var(--color-border-3); } .arco-form-item-status-success .arco-select-view:not(.arco-select-view-disabled):hover, .arco-form-item-status-success .arco-input-tag:not(.arco-input-tag-disabled):hover { background-color: var(--color-fill-3); border-color: transparent; } .arco-form-item-status-success .arco-select-view:not(.arco-select-view-disabled).arco-select-view-focus, .arco-form-item-status-success .arco-input-tag:not(.arco-input-tag-disabled).arco-input-tag-focus { background-color: var(--color-bg-2); border-color: rgb(var(--success-6)); box-shadow: 0 0 0 0 var(--color-success-light-2); } .arco-form-item-status-success .arco-picker:not(.arco-picker-disabled) { border-color: var(--color-border-3); background-color: var(--color-bg-2); } .arco-form-item-status-success .arco-picker:not(.arco-picker-disabled):hover { border-color: transparent; background-color: var(--color-fill-3); } .arco-form-item-status-success .arco-picker-focused:not(.arco-picker-disabled), .arco-form-item-status-success .arco-picker-focused:not(.arco-picker-disabled):hover { border-color: rgb(var(--success-6)); background-color: var(--color-bg-2); box-shadow: 0 0 0 0 var(--color-success-light-2); } .arco-form-item-status-success .arco-form-item-message-help { color: rgb(var(--success-6)); } .arco-form-item-status-success .arco-form-item-feedback { color: rgb(var(--success-6)); } .arco-form-item-status-warning .arco-input-wrapper:not(.arco-input-disabled), .arco-form-item-status-warning .arco-textarea-wrapper:not(.arco-textarea-disabled) { background-color: var(--color-bg-2); border-color: rgb(var(--warning-6)); } .arco-form-item-status-warning .arco-input-wrapper:not(.arco-input-disabled):hover, .arco-form-item-status-warning .arco-textarea-wrapper:not(.arco-textarea-disabled):hover { background-color: var(--color-bg-2); border-color: rgb(var(--warning-5)); } .arco-form-item-status-warning .arco-input-wrapper:not(.arco-input-disabled).arco-input-focus, .arco-form-item-status-warning .arco-textarea-wrapper:not(.arco-textarea-disabled).arco-textarea-focus { background-color: var(--color-bg-2); border-color: rgb(var(--warning-6)); box-shadow: 0 0 0 0 var(--color-warning-light-2); } .arco-form-item-status-warning .arco-select-view:not(.arco-select-view-disabled), .arco-form-item-status-warning .arco-input-tag:not(.arco-input-tag-disabled) { background-color: var(--color-bg-2); border-color: rgb(var(--warning-6)); } .arco-form-item-status-warning .arco-select-view:not(.arco-select-view-disabled):hover, .arco-form-item-status-warning .arco-input-tag:not(.arco-input-tag-disabled):hover { background-color: var(--color-bg-2); border-color: rgb(var(--warning-5)); } .arco-form-item-status-warning .arco-select-view:not(.arco-select-view-disabled).arco-select-view-focus, .arco-form-item-status-warning .arco-input-tag:not(.arco-input-tag-disabled).arco-input-tag-focus { background-color: var(--color-bg-2); border-color: rgb(var(--warning-6)); box-shadow: 0 0 0 0 var(--color-warning-light-2); } .arco-form-item-status-warning .arco-picker:not(.arco-picker-disabled) { border-color: rgb(var(--warning-6)); background-color: var(--color-bg-2); } .arco-form-item-status-warning .arco-picker:not(.arco-picker-disabled):hover { border-color: rgb(var(--warning-5)); background-color: var(--color-bg-2); } .arco-form-item-status-warning .arco-picker-focused:not(.arco-picker-disabled), .arco-form-item-status-warning .arco-picker-focused:not(.arco-picker-disabled):hover { border-color: rgb(var(--warning-6)); background-color: var(--color-bg-2); box-shadow: 0 0 0 0 var(--color-warning-light-2); } .arco-form-item-status-warning .arco-form-item-message-help { color: rgb(var(--warning-6)); } .arco-form-item-status-warning .arco-form-item-feedback { color: rgb(var(--warning-6)); } .arco-form-item-status-error .arco-input-wrapper:not(.arco-input-disabled), .arco-form-item-status-error .arco-textarea-wrapper:not(.arco-textarea-disabled) { background-color: var(--color-bg-2); border-color: rgb(var(--danger-6)); } .arco-form-item-status-error .arco-input-wrapper:not(.arco-input-disabled):hover, .arco-form-item-status-error .arco-textarea-wrapper:not(.arco-textarea-disabled):hover { background-color: var(--color-bg-2); border-color: rgb(var(--danger-5)); } .arco-form-item-status-error .arco-input-wrapper:not(.arco-input-disabled).arco-input-focus, .arco-form-item-status-error .arco-textarea-wrapper:not(.arco-textarea-disabled).arco-textarea-focus { background-color: var(--color-bg-2); border-color: rgb(var(--danger-6)); box-shadow: 0 0 0 0 var(--color-danger-light-2); } .arco-form-item-status-error .arco-select-view:not(.arco-select-view-disabled), .arco-form-item-status-error .arco-input-tag:not(.arco-input-tag-disabled) { background-color: var(--color-bg-2); border-color: rgb(var(--danger-6)); } .arco-form-item-status-error .arco-select-view:not(.arco-select-view-disabled):hover, .arco-form-item-status-error .arco-input-tag:not(.arco-input-tag-disabled):hover { background-color: var(--color-bg-2); border-color: rgb(var(--danger-5)); } .arco-form-item-status-error .arco-select-view:not(.arco-select-view-disabled).arco-select-view-focus, .arco-form-item-status-error .arco-input-tag:not(.arco-input-tag-disabled).arco-input-tag-focus { background-color: var(--color-bg-2); border-color: rgb(var(--danger-6)); box-shadow: 0 0 0 0 var(--color-danger-light-2); } .arco-form-item-status-error .arco-picker:not(.arco-picker-disabled) { border-color: rgb(var(--danger-6)); background-color: var(--color-bg-2); } .arco-form-item-status-error .arco-picker:not(.arco-picker-disabled):hover { border-color: rgb(var(--danger-5)); background-color: var(--color-bg-2); } .arco-form-item-status-error .arco-picker-focused:not(.arco-picker-disabled), .arco-form-item-status-error .arco-picker-focused:not(.arco-picker-disabled):hover { border-color: rgb(var(--danger-6)); background-color: var(--color-bg-2); box-shadow: 0 0 0 0 var(--color-danger-light-2); } .arco-form-item-status-error .arco-form-item-message-help { color: rgb(var(--danger-6)); } .arco-form-item-status-error .arco-form-item-feedback { color: rgb(var(--danger-6)); } .arco-form-item-control-children { position: relative; } .arco-form-item-feedback { position: absolute; top: 50%; right: 9px; font-size: 14px; transform: translateY(-50%); } .arco-form-item-feedback .arco-icon-loading { font-size: 12px; } .arco-form-item-has-feedback .arco-input, .arco-form-item-has-feedback .arco-input-inner-wrapper, .arco-form-item-has-feedback .arco-textarea { padding-right: 28px; } .arco-form-item-has-feedback .arco-input-number-mode-embed .arco-input-number-step-layer { right: 24px; } .arco-form-item-has-feedback .arco-select.arco-select-multiple .arco-select-view, .arco-form-item-has-feedback .arco-select.arco-select-single .arco-select-view { padding-right: 28px; } .arco-form-item-has-feedback .arco-select.arco-select-multiple .arco-select-suffix { padding-right: 0; } .arco-form-item-has-feedback .arco-cascader.arco-cascader-multiple .arco-cascader-view, .arco-form-item-has-feedback .arco-cascader.arco-cascader-single .arco-cascader-view { padding-right: 28px; } .arco-form-item-has-feedback .arco-cascader.arco-cascader-multiple .arco-cascader-suffix { padding-right: 0; } .arco-form-item-has-feedback .arco-tree-select.arco-tree-select-multiple .arco-tree-select-view, .arco-form-item-has-feedback .arco-tree-select.arco-tree-select-single .arco-tree-select-view { padding-right: 28px; } .arco-form-item-has-feedback .arco-tree-select.arco-tree-select-multiple .arco-tree-select-suffix { padding-right: 0; } .arco-form-item-has-feedback .arco-picker { padding-right: 28px; } .arco-form-item-has-feedback .arco-picker-suffix .arco-picker-suffix-icon, .arco-form-item-has-feedback .arco-picker-suffix .arco-picker-clear-icon { margin-right: 0; margin-left: 0; } .arco-form { display: flex; flex-direction: column; width: 100%; /** size style **/ /** slider display: block **/ } .arco-form-layout-inline { flex-direction: row; flex-wrap: wrap; } .arco-form-layout-inline .arco-form-item { width: auto; margin-bottom: 8px; } .arco-form-auto-label-width .arco-form-item-label-col > .arco-form-item-label { white-space: nowrap; } .arco-form-item { display: flex; align-items: flex-start; justify-content: flex-start; width: 100%; margin-bottom: 20px; } .arco-form-item-layout-vertical { display: block; } .arco-form-item-layout-vertical > .arco-form-item-label-col { justify-content: flex-start; margin-bottom: 8px; padding: 0; line-height: 1.5715; white-space: normal; } .arco-form-item-layout-inline { margin-right: 24px; } .arco-form-item-label-col { padding-right: 16px; } .arco-form-item.arco-form-item-error, .arco-form-item.arco-form-item-has-help { margin-bottom: 0; } .arco-form-item-wrapper-flex.arco-col { flex: 1; } .arco-form-size-mini .arco-form-item-label-col { line-height: 24px; } .arco-form-size-mini .arco-form-item-label-col > .arco-form-item-label { font-size: 12px; } .arco-form-size-mini .arco-form-item-content { min-height: 24px; } .arco-form-size-mini .arco-form-item-wrapper-col { min-height: 24px; } .arco-form-size-small .arco-form-item-label-col { line-height: 28px; } .arco-form-size-small .arco-form-item-label-col > .arco-form-item-label { font-size: 14px; } .arco-form-size-small .arco-form-item-content { min-height: 28px; } .arco-form-size-small .arco-form-item-wrapper-col { min-height: 28px; } .arco-form-size-large .arco-form-item-label-col { line-height: 36px; } .arco-form-size-large .arco-form-item-label-col > .arco-form-item-label { font-size: 14px; } .arco-form-size-large .arco-form-item-content { min-height: 36px; } .arco-form-size-large .arco-form-item-wrapper-col { min-height: 36px; } .arco-form-item-extra { margin-top: 4px; color: var(--color-text-3); font-size: 12px; } .arco-form-item-message { min-height: 20px; color: rgb(var(--danger-6)); font-size: 12px; line-height: 20px; } .arco-form-item-message-help { color: var(--color-text-3); } .arco-form-item-message + .arco-form-item-extra { margin-top: 0; margin-bottom: 4px; } .arco-form-item-label-col { display: flex; flex-shrink: 0; justify-content: flex-end; line-height: 32px; white-space: nowrap; } .arco-form-item-label-col-left { justify-content: flex-start; } .arco-form-item-label-col > .arco-form-item-label { max-width: 100%; color: var(--color-text-2); font-size: 14px; white-space: normal; } .arco-form-item-label-col.arco-form-item-label-col-flex { box-sizing: content-box; } .arco-form-item-wrapper-col { display: flex; flex-direction: column; align-items: flex-start; width: 100%; min-width: 0; min-height: 32px; } .arco-form-item-content { flex: 1; max-width: 100%; min-height: 32px; } .arco-form-item-content-wrapper { display: flex; align-items: center; justify-content: flex-start; width: 100%; } .arco-form-item-content-flex { display: flex; align-items: center; justify-content: flex-start; } .arco-form .arco-slider { display: block; } .arco-form-item-label-required-symbol { color: rgb(var(--danger-6)); font-size: 12px; line-height: 1; } .arco-form-item-label-required-symbol svg { display: inline-block; transform: scale(0.5); } .arco-form-item-label-tooltip { margin-left: 4px; color: var(--color-text-4); } .form-blink-enter-from, .form-blink-appear-from { opacity: 0; } .form-blink-enter-to, .form-blink-appear-to { opacity: 1; } .form-blink-enter-active, .form-blink-appear-active { transition: opacity 0.3s cubic-bezier(0, 0, 1, 1); animation: arco-form-blink 0.5s cubic-bezier(0, 0, 1, 1); } @keyframes arco-form-blink { 0% { opacity: 1; } 50% { opacity: 0.2; } 100% { opacity: 1; } } .arco-row { display: flex; flex-flow: row wrap; } .arco-row-nowrap { flex-wrap: nowrap; } .arco-row-align-start { align-items: flex-start; } .arco-row-align-center { align-items: center; } .arco-row-align-end { align-items: flex-end; } .arco-row-justify-start { justify-content: flex-start; } .arco-row-justify-center { justify-content: center; } .arco-row-justify-end { justify-content: flex-end; } .arco-row-justify-space-around { justify-content: space-around; } .arco-row-justify-space-between { justify-content: space-between; } .arco-col { box-sizing: border-box; } .arco-col-1 { flex: 0 0 4.16666667%; width: 4.16666667%; } .arco-col-2 { flex: 0 0 8.33333333%; width: 8.33333333%; } .arco-col-3 { flex: 0 0 12.5%; width: 12.5%; } .arco-col-4 { flex: 0 0 16.66666667%; width: 16.66666667%; } .arco-col-5 { flex: 0 0 20.83333333%; width: 20.83333333%; } .arco-col-6 { flex: 0 0 25%; width: 25%; } .arco-col-7 { flex: 0 0 29.16666667%; width: 29.16666667%; } .arco-col-8 { flex: 0 0 33.33333333%; width: 33.33333333%; } .arco-col-9 { flex: 0 0 37.5%; width: 37.5%; } .arco-col-10 { flex: 0 0 41.66666667%; width: 41.66666667%; } .arco-col-11 { flex: 0 0 45.83333333%; width: 45.83333333%; } .arco-col-12 { flex: 0 0 50%; width: 50%; } .arco-col-13 { flex: 0 0 54.16666667%; width: 54.16666667%; } .arco-col-14 { flex: 0 0 58.33333333%; width: 58.33333333%; } .arco-col-15 { flex: 0 0 62.5%; width: 62.5%; } .arco-col-16 { flex: 0 0 66.66666667%; width: 66.66666667%; } .arco-col-17 { flex: 0 0 70.83333333%; width: 70.83333333%; } .arco-col-18 { flex: 0 0 75%; width: 75%; } .arco-col-19 { flex: 0 0 79.16666667%; width: 79.16666667%; } .arco-col-20 { flex: 0 0 83.33333333%; width: 83.33333333%; } .arco-col-21 { flex: 0 0 87.5%; width: 87.5%; } .arco-col-22 { flex: 0 0 91.66666667%; width: 91.66666667%; } .arco-col-23 { flex: 0 0 95.83333333%; width: 95.83333333%; } .arco-col-24 { flex: 0 0 100%; width: 100%; } .arco-col-offset-1 { margin-left: 4.16666667%; } .arco-col-offset-2 { margin-left: 8.33333333%; } .arco-col-offset-3 { margin-left: 12.5%; } .arco-col-offset-4 { margin-left: 16.66666667%; } .arco-col-offset-5 { margin-left: 20.83333333%; } .arco-col-offset-6 { margin-left: 25%; } .arco-col-offset-7 { margin-left: 29.16666667%; } .arco-col-offset-8 { margin-left: 33.33333333%; } .arco-col-offset-9 { margin-left: 37.5%; } .arco-col-offset-10 { margin-left: 41.66666667%; } .arco-col-offset-11 { margin-left: 45.83333333%; } .arco-col-offset-12 { margin-left: 50%; } .arco-col-offset-13 { margin-left: 54.16666667%; } .arco-col-offset-14 { margin-left: 58.33333333%; } .arco-col-offset-15 { margin-left: 62.5%; } .arco-col-offset-16 { margin-left: 66.66666667%; } .arco-col-offset-17 { margin-left: 70.83333333%; } .arco-col-offset-18 { margin-left: 75%; } .arco-col-offset-19 { margin-left: 79.16666667%; } .arco-col-offset-20 { margin-left: 83.33333333%; } .arco-col-offset-21 { margin-left: 87.5%; } .arco-col-offset-22 { margin-left: 91.66666667%; } .arco-col-offset-23 { margin-left: 95.83333333%; } .arco-col-order-1 { order: 1; } .arco-col-order-2 { order: 2; } .arco-col-order-3 { order: 3; } .arco-col-order-4 { order: 4; } .arco-col-order-5 { order: 5; } .arco-col-order-6 { order: 6; } .arco-col-order-7 { order: 7; } .arco-col-order-8 { order: 8; } .arco-col-order-9 { order: 9; } .arco-col-order-10 { order: 10; } .arco-col-order-11 { order: 11; } .arco-col-order-12 { order: 12; } .arco-col-order-13 { order: 13; } .arco-col-order-14 { order: 14; } .arco-col-order-15 { order: 15; } .arco-col-order-16 { order: 16; } .arco-col-order-17 { order: 17; } .arco-col-order-18 { order: 18; } .arco-col-order-19 { order: 19; } .arco-col-order-20 { order: 20; } .arco-col-order-21 { order: 21; } .arco-col-order-22 { order: 22; } .arco-col-order-23 { order: 23; } .arco-col-order-24 { order: 24; } .arco-col-xs-1 { flex: 0 0 4.16666667%; width: 4.16666667%; } .arco-col-xs-2 { flex: 0 0 8.33333333%; width: 8.33333333%; } .arco-col-xs-3 { flex: 0 0 12.5%; width: 12.5%; } .arco-col-xs-4 { flex: 0 0 16.66666667%; width: 16.66666667%; } .arco-col-xs-5 { flex: 0 0 20.83333333%; width: 20.83333333%; } .arco-col-xs-6 { flex: 0 0 25%; width: 25%; } .arco-col-xs-7 { flex: 0 0 29.16666667%; width: 29.16666667%; } .arco-col-xs-8 { flex: 0 0 33.33333333%; width: 33.33333333%; } .arco-col-xs-9 { flex: 0 0 37.5%; width: 37.5%; } .arco-col-xs-10 { flex: 0 0 41.66666667%; width: 41.66666667%; } .arco-col-xs-11 { flex: 0 0 45.83333333%; width: 45.83333333%; } .arco-col-xs-12 { flex: 0 0 50%; width: 50%; } .arco-col-xs-13 { flex: 0 0 54.16666667%; width: 54.16666667%; } .arco-col-xs-14 { flex: 0 0 58.33333333%; width: 58.33333333%; } .arco-col-xs-15 { flex: 0 0 62.5%; width: 62.5%; } .arco-col-xs-16 { flex: 0 0 66.66666667%; width: 66.66666667%; } .arco-col-xs-17 { flex: 0 0 70.83333333%; width: 70.83333333%; } .arco-col-xs-18 { flex: 0 0 75%; width: 75%; } .arco-col-xs-19 { flex: 0 0 79.16666667%; width: 79.16666667%; } .arco-col-xs-20 { flex: 0 0 83.33333333%; width: 83.33333333%; } .arco-col-xs-21 { flex: 0 0 87.5%; width: 87.5%; } .arco-col-xs-22 { flex: 0 0 91.66666667%; width: 91.66666667%; } .arco-col-xs-23 { flex: 0 0 95.83333333%; width: 95.83333333%; } .arco-col-xs-24 { flex: 0 0 100%; width: 100%; } .arco-col-xs-offset-1 { margin-left: 4.16666667%; } .arco-col-xs-offset-2 { margin-left: 8.33333333%; } .arco-col-xs-offset-3 { margin-left: 12.5%; } .arco-col-xs-offset-4 { margin-left: 16.66666667%; } .arco-col-xs-offset-5 { margin-left: 20.83333333%; } .arco-col-xs-offset-6 { margin-left: 25%; } .arco-col-xs-offset-7 { margin-left: 29.16666667%; } .arco-col-xs-offset-8 { margin-left: 33.33333333%; } .arco-col-xs-offset-9 { margin-left: 37.5%; } .arco-col-xs-offset-10 { margin-left: 41.66666667%; } .arco-col-xs-offset-11 { margin-left: 45.83333333%; } .arco-col-xs-offset-12 { margin-left: 50%; } .arco-col-xs-offset-13 { margin-left: 54.16666667%; } .arco-col-xs-offset-14 { margin-left: 58.33333333%; } .arco-col-xs-offset-15 { margin-left: 62.5%; } .arco-col-xs-offset-16 { margin-left: 66.66666667%; } .arco-col-xs-offset-17 { margin-left: 70.83333333%; } .arco-col-xs-offset-18 { margin-left: 75%; } .arco-col-xs-offset-19 { margin-left: 79.16666667%; } .arco-col-xs-offset-20 { margin-left: 83.33333333%; } .arco-col-xs-offset-21 { margin-left: 87.5%; } .arco-col-xs-offset-22 { margin-left: 91.66666667%; } .arco-col-xs-offset-23 { margin-left: 95.83333333%; } .arco-col-xs-order-1 { order: 1; } .arco-col-xs-order-2 { order: 2; } .arco-col-xs-order-3 { order: 3; } .arco-col-xs-order-4 { order: 4; } .arco-col-xs-order-5 { order: 5; } .arco-col-xs-order-6 { order: 6; } .arco-col-xs-order-7 { order: 7; } .arco-col-xs-order-8 { order: 8; } .arco-col-xs-order-9 { order: 9; } .arco-col-xs-order-10 { order: 10; } .arco-col-xs-order-11 { order: 11; } .arco-col-xs-order-12 { order: 12; } .arco-col-xs-order-13 { order: 13; } .arco-col-xs-order-14 { order: 14; } .arco-col-xs-order-15 { order: 15; } .arco-col-xs-order-16 { order: 16; } .arco-col-xs-order-17 { order: 17; } .arco-col-xs-order-18 { order: 18; } .arco-col-xs-order-19 { order: 19; } .arco-col-xs-order-20 { order: 20; } .arco-col-xs-order-21 { order: 21; } .arco-col-xs-order-22 { order: 22; } .arco-col-xs-order-23 { order: 23; } .arco-col-xs-order-24 { order: 24; } @media (min-width: 576px) { .arco-col-sm-1 { flex: 0 0 4.16666667%; width: 4.16666667%; } .arco-col-sm-2 { flex: 0 0 8.33333333%; width: 8.33333333%; } .arco-col-sm-3 { flex: 0 0 12.5%; width: 12.5%; } .arco-col-sm-4 { flex: 0 0 16.66666667%; width: 16.66666667%; } .arco-col-sm-5 { flex: 0 0 20.83333333%; width: 20.83333333%; } .arco-col-sm-6 { flex: 0 0 25%; width: 25%; } .arco-col-sm-7 { flex: 0 0 29.16666667%; width: 29.16666667%; } .arco-col-sm-8 { flex: 0 0 33.33333333%; width: 33.33333333%; } .arco-col-sm-9 { flex: 0 0 37.5%; width: 37.5%; } .arco-col-sm-10 { flex: 0 0 41.66666667%; width: 41.66666667%; } .arco-col-sm-11 { flex: 0 0 45.83333333%; width: 45.83333333%; } .arco-col-sm-12 { flex: 0 0 50%; width: 50%; } .arco-col-sm-13 { flex: 0 0 54.16666667%; width: 54.16666667%; } .arco-col-sm-14 { flex: 0 0 58.33333333%; width: 58.33333333%; } .arco-col-sm-15 { flex: 0 0 62.5%; width: 62.5%; } .arco-col-sm-16 { flex: 0 0 66.66666667%; width: 66.66666667%; } .arco-col-sm-17 { flex: 0 0 70.83333333%; width: 70.83333333%; } .arco-col-sm-18 { flex: 0 0 75%; width: 75%; } .arco-col-sm-19 { flex: 0 0 79.16666667%; width: 79.16666667%; } .arco-col-sm-20 { flex: 0 0 83.33333333%; width: 83.33333333%; } .arco-col-sm-21 { flex: 0 0 87.5%; width: 87.5%; } .arco-col-sm-22 { flex: 0 0 91.66666667%; width: 91.66666667%; } .arco-col-sm-23 { flex: 0 0 95.83333333%; width: 95.83333333%; } .arco-col-sm-24 { flex: 0 0 100%; width: 100%; } .arco-col-sm-offset-1 { margin-left: 4.16666667%; } .arco-col-sm-offset-2 { margin-left: 8.33333333%; } .arco-col-sm-offset-3 { margin-left: 12.5%; } .arco-col-sm-offset-4 { margin-left: 16.66666667%; } .arco-col-sm-offset-5 { margin-left: 20.83333333%; } .arco-col-sm-offset-6 { margin-left: 25%; } .arco-col-sm-offset-7 { margin-left: 29.16666667%; } .arco-col-sm-offset-8 { margin-left: 33.33333333%; } .arco-col-sm-offset-9 { margin-left: 37.5%; } .arco-col-sm-offset-10 { margin-left: 41.66666667%; } .arco-col-sm-offset-11 { margin-left: 45.83333333%; } .arco-col-sm-offset-12 { margin-left: 50%; } .arco-col-sm-offset-13 { margin-left: 54.16666667%; } .arco-col-sm-offset-14 { margin-left: 58.33333333%; } .arco-col-sm-offset-15 { margin-left: 62.5%; } .arco-col-sm-offset-16 { margin-left: 66.66666667%; } .arco-col-sm-offset-17 { margin-left: 70.83333333%; } .arco-col-sm-offset-18 { margin-left: 75%; } .arco-col-sm-offset-19 { margin-left: 79.16666667%; } .arco-col-sm-offset-20 { margin-left: 83.33333333%; } .arco-col-sm-offset-21 { margin-left: 87.5%; } .arco-col-sm-offset-22 { margin-left: 91.66666667%; } .arco-col-sm-offset-23 { margin-left: 95.83333333%; } .arco-col-sm-order-1 { order: 1; } .arco-col-sm-order-2 { order: 2; } .arco-col-sm-order-3 { order: 3; } .arco-col-sm-order-4 { order: 4; } .arco-col-sm-order-5 { order: 5; } .arco-col-sm-order-6 { order: 6; } .arco-col-sm-order-7 { order: 7; } .arco-col-sm-order-8 { order: 8; } .arco-col-sm-order-9 { order: 9; } .arco-col-sm-order-10 { order: 10; } .arco-col-sm-order-11 { order: 11; } .arco-col-sm-order-12 { order: 12; } .arco-col-sm-order-13 { order: 13; } .arco-col-sm-order-14 { order: 14; } .arco-col-sm-order-15 { order: 15; } .arco-col-sm-order-16 { order: 16; } .arco-col-sm-order-17 { order: 17; } .arco-col-sm-order-18 { order: 18; } .arco-col-sm-order-19 { order: 19; } .arco-col-sm-order-20 { order: 20; } .arco-col-sm-order-21 { order: 21; } .arco-col-sm-order-22 { order: 22; } .arco-col-sm-order-23 { order: 23; } .arco-col-sm-order-24 { order: 24; } } @media (min-width: 768px) { .arco-col-md-1 { flex: 0 0 4.16666667%; width: 4.16666667%; } .arco-col-md-2 { flex: 0 0 8.33333333%; width: 8.33333333%; } .arco-col-md-3 { flex: 0 0 12.5%; width: 12.5%; } .arco-col-md-4 { flex: 0 0 16.66666667%; width: 16.66666667%; } .arco-col-md-5 { flex: 0 0 20.83333333%; width: 20.83333333%; } .arco-col-md-6 { flex: 0 0 25%; width: 25%; } .arco-col-md-7 { flex: 0 0 29.16666667%; width: 29.16666667%; } .arco-col-md-8 { flex: 0 0 33.33333333%; width: 33.33333333%; } .arco-col-md-9 { flex: 0 0 37.5%; width: 37.5%; } .arco-col-md-10 { flex: 0 0 41.66666667%; width: 41.66666667%; } .arco-col-md-11 { flex: 0 0 45.83333333%; width: 45.83333333%; } .arco-col-md-12 { flex: 0 0 50%; width: 50%; } .arco-col-md-13 { flex: 0 0 54.16666667%; width: 54.16666667%; } .arco-col-md-14 { flex: 0 0 58.33333333%; width: 58.33333333%; } .arco-col-md-15 { flex: 0 0 62.5%; width: 62.5%; } .arco-col-md-16 { flex: 0 0 66.66666667%; width: 66.66666667%; } .arco-col-md-17 { flex: 0 0 70.83333333%; width: 70.83333333%; } .arco-col-md-18 { flex: 0 0 75%; width: 75%; } .arco-col-md-19 { flex: 0 0 79.16666667%; width: 79.16666667%; } .arco-col-md-20 { flex: 0 0 83.33333333%; width: 83.33333333%; } .arco-col-md-21 { flex: 0 0 87.5%; width: 87.5%; } .arco-col-md-22 { flex: 0 0 91.66666667%; width: 91.66666667%; } .arco-col-md-23 { flex: 0 0 95.83333333%; width: 95.83333333%; } .arco-col-md-24 { flex: 0 0 100%; width: 100%; } .arco-col-md-offset-1 { margin-left: 4.16666667%; } .arco-col-md-offset-2 { margin-left: 8.33333333%; } .arco-col-md-offset-3 { margin-left: 12.5%; } .arco-col-md-offset-4 { margin-left: 16.66666667%; } .arco-col-md-offset-5 { margin-left: 20.83333333%; } .arco-col-md-offset-6 { margin-left: 25%; } .arco-col-md-offset-7 { margin-left: 29.16666667%; } .arco-col-md-offset-8 { margin-left: 33.33333333%; } .arco-col-md-offset-9 { margin-left: 37.5%; } .arco-col-md-offset-10 { margin-left: 41.66666667%; } .arco-col-md-offset-11 { margin-left: 45.83333333%; } .arco-col-md-offset-12 { margin-left: 50%; } .arco-col-md-offset-13 { margin-left: 54.16666667%; } .arco-col-md-offset-14 { margin-left: 58.33333333%; } .arco-col-md-offset-15 { margin-left: 62.5%; } .arco-col-md-offset-16 { margin-left: 66.66666667%; } .arco-col-md-offset-17 { margin-left: 70.83333333%; } .arco-col-md-offset-18 { margin-left: 75%; } .arco-col-md-offset-19 { margin-left: 79.16666667%; } .arco-col-md-offset-20 { margin-left: 83.33333333%; } .arco-col-md-offset-21 { margin-left: 87.5%; } .arco-col-md-offset-22 { margin-left: 91.66666667%; } .arco-col-md-offset-23 { margin-left: 95.83333333%; } .arco-col-md-order-1 { order: 1; } .arco-col-md-order-2 { order: 2; } .arco-col-md-order-3 { order: 3; } .arco-col-md-order-4 { order: 4; } .arco-col-md-order-5 { order: 5; } .arco-col-md-order-6 { order: 6; } .arco-col-md-order-7 { order: 7; } .arco-col-md-order-8 { order: 8; } .arco-col-md-order-9 { order: 9; } .arco-col-md-order-10 { order: 10; } .arco-col-md-order-11 { order: 11; } .arco-col-md-order-12 { order: 12; } .arco-col-md-order-13 { order: 13; } .arco-col-md-order-14 { order: 14; } .arco-col-md-order-15 { order: 15; } .arco-col-md-order-16 { order: 16; } .arco-col-md-order-17 { order: 17; } .arco-col-md-order-18 { order: 18; } .arco-col-md-order-19 { order: 19; } .arco-col-md-order-20 { order: 20; } .arco-col-md-order-21 { order: 21; } .arco-col-md-order-22 { order: 22; } .arco-col-md-order-23 { order: 23; } .arco-col-md-order-24 { order: 24; } } @media (min-width: 992px) { .arco-col-lg-1 { flex: 0 0 4.16666667%; width: 4.16666667%; } .arco-col-lg-2 { flex: 0 0 8.33333333%; width: 8.33333333%; } .arco-col-lg-3 { flex: 0 0 12.5%; width: 12.5%; } .arco-col-lg-4 { flex: 0 0 16.66666667%; width: 16.66666667%; } .arco-col-lg-5 { flex: 0 0 20.83333333%; width: 20.83333333%; } .arco-col-lg-6 { flex: 0 0 25%; width: 25%; } .arco-col-lg-7 { flex: 0 0 29.16666667%; width: 29.16666667%; } .arco-col-lg-8 { flex: 0 0 33.33333333%; width: 33.33333333%; } .arco-col-lg-9 { flex: 0 0 37.5%; width: 37.5%; } .arco-col-lg-10 { flex: 0 0 41.66666667%; width: 41.66666667%; } .arco-col-lg-11 { flex: 0 0 45.83333333%; width: 45.83333333%; } .arco-col-lg-12 { flex: 0 0 50%; width: 50%; } .arco-col-lg-13 { flex: 0 0 54.16666667%; width: 54.16666667%; } .arco-col-lg-14 { flex: 0 0 58.33333333%; width: 58.33333333%; } .arco-col-lg-15 { flex: 0 0 62.5%; width: 62.5%; } .arco-col-lg-16 { flex: 0 0 66.66666667%; width: 66.66666667%; } .arco-col-lg-17 { flex: 0 0 70.83333333%; width: 70.83333333%; } .arco-col-lg-18 { flex: 0 0 75%; width: 75%; } .arco-col-lg-19 { flex: 0 0 79.16666667%; width: 79.16666667%; } .arco-col-lg-20 { flex: 0 0 83.33333333%; width: 83.33333333%; } .arco-col-lg-21 { flex: 0 0 87.5%; width: 87.5%; } .arco-col-lg-22 { flex: 0 0 91.66666667%; width: 91.66666667%; } .arco-col-lg-23 { flex: 0 0 95.83333333%; width: 95.83333333%; } .arco-col-lg-24 { flex: 0 0 100%; width: 100%; } .arco-col-lg-offset-1 { margin-left: 4.16666667%; } .arco-col-lg-offset-2 { margin-left: 8.33333333%; } .arco-col-lg-offset-3 { margin-left: 12.5%; } .arco-col-lg-offset-4 { margin-left: 16.66666667%; } .arco-col-lg-offset-5 { margin-left: 20.83333333%; } .arco-col-lg-offset-6 { margin-left: 25%; } .arco-col-lg-offset-7 { margin-left: 29.16666667%; } .arco-col-lg-offset-8 { margin-left: 33.33333333%; } .arco-col-lg-offset-9 { margin-left: 37.5%; } .arco-col-lg-offset-10 { margin-left: 41.66666667%; } .arco-col-lg-offset-11 { margin-left: 45.83333333%; } .arco-col-lg-offset-12 { margin-left: 50%; } .arco-col-lg-offset-13 { margin-left: 54.16666667%; } .arco-col-lg-offset-14 { margin-left: 58.33333333%; } .arco-col-lg-offset-15 { margin-left: 62.5%; } .arco-col-lg-offset-16 { margin-left: 66.66666667%; } .arco-col-lg-offset-17 { margin-left: 70.83333333%; } .arco-col-lg-offset-18 { margin-left: 75%; } .arco-col-lg-offset-19 { margin-left: 79.16666667%; } .arco-col-lg-offset-20 { margin-left: 83.33333333%; } .arco-col-lg-offset-21 { margin-left: 87.5%; } .arco-col-lg-offset-22 { margin-left: 91.66666667%; } .arco-col-lg-offset-23 { margin-left: 95.83333333%; } .arco-col-lg-order-1 { order: 1; } .arco-col-lg-order-2 { order: 2; } .arco-col-lg-order-3 { order: 3; } .arco-col-lg-order-4 { order: 4; } .arco-col-lg-order-5 { order: 5; } .arco-col-lg-order-6 { order: 6; } .arco-col-lg-order-7 { order: 7; } .arco-col-lg-order-8 { order: 8; } .arco-col-lg-order-9 { order: 9; } .arco-col-lg-order-10 { order: 10; } .arco-col-lg-order-11 { order: 11; } .arco-col-lg-order-12 { order: 12; } .arco-col-lg-order-13 { order: 13; } .arco-col-lg-order-14 { order: 14; } .arco-col-lg-order-15 { order: 15; } .arco-col-lg-order-16 { order: 16; } .arco-col-lg-order-17 { order: 17; } .arco-col-lg-order-18 { order: 18; } .arco-col-lg-order-19 { order: 19; } .arco-col-lg-order-20 { order: 20; } .arco-col-lg-order-21 { order: 21; } .arco-col-lg-order-22 { order: 22; } .arco-col-lg-order-23 { order: 23; } .arco-col-lg-order-24 { order: 24; } } @media (min-width: 1200px) { .arco-col-xl-1 { flex: 0 0 4.16666667%; width: 4.16666667%; } .arco-col-xl-2 { flex: 0 0 8.33333333%; width: 8.33333333%; } .arco-col-xl-3 { flex: 0 0 12.5%; width: 12.5%; } .arco-col-xl-4 { flex: 0 0 16.66666667%; width: 16.66666667%; } .arco-col-xl-5 { flex: 0 0 20.83333333%; width: 20.83333333%; } .arco-col-xl-6 { flex: 0 0 25%; width: 25%; } .arco-col-xl-7 { flex: 0 0 29.16666667%; width: 29.16666667%; } .arco-col-xl-8 { flex: 0 0 33.33333333%; width: 33.33333333%; } .arco-col-xl-9 { flex: 0 0 37.5%; width: 37.5%; } .arco-col-xl-10 { flex: 0 0 41.66666667%; width: 41.66666667%; } .arco-col-xl-11 { flex: 0 0 45.83333333%; width: 45.83333333%; } .arco-col-xl-12 { flex: 0 0 50%; width: 50%; } .arco-col-xl-13 { flex: 0 0 54.16666667%; width: 54.16666667%; } .arco-col-xl-14 { flex: 0 0 58.33333333%; width: 58.33333333%; } .arco-col-xl-15 { flex: 0 0 62.5%; width: 62.5%; } .arco-col-xl-16 { flex: 0 0 66.66666667%; width: 66.66666667%; } .arco-col-xl-17 { flex: 0 0 70.83333333%; width: 70.83333333%; } .arco-col-xl-18 { flex: 0 0 75%; width: 75%; } .arco-col-xl-19 { flex: 0 0 79.16666667%; width: 79.16666667%; } .arco-col-xl-20 { flex: 0 0 83.33333333%; width: 83.33333333%; } .arco-col-xl-21 { flex: 0 0 87.5%; width: 87.5%; } .arco-col-xl-22 { flex: 0 0 91.66666667%; width: 91.66666667%; } .arco-col-xl-23 { flex: 0 0 95.83333333%; width: 95.83333333%; } .arco-col-xl-24 { flex: 0 0 100%; width: 100%; } .arco-col-xl-offset-1 { margin-left: 4.16666667%; } .arco-col-xl-offset-2 { margin-left: 8.33333333%; } .arco-col-xl-offset-3 { margin-left: 12.5%; } .arco-col-xl-offset-4 { margin-left: 16.66666667%; } .arco-col-xl-offset-5 { margin-left: 20.83333333%; } .arco-col-xl-offset-6 { margin-left: 25%; } .arco-col-xl-offset-7 { margin-left: 29.16666667%; } .arco-col-xl-offset-8 { margin-left: 33.33333333%; } .arco-col-xl-offset-9 { margin-left: 37.5%; } .arco-col-xl-offset-10 { margin-left: 41.66666667%; } .arco-col-xl-offset-11 { margin-left: 45.83333333%; } .arco-col-xl-offset-12 { margin-left: 50%; } .arco-col-xl-offset-13 { margin-left: 54.16666667%; } .arco-col-xl-offset-14 { margin-left: 58.33333333%; } .arco-col-xl-offset-15 { margin-left: 62.5%; } .arco-col-xl-offset-16 { margin-left: 66.66666667%; } .arco-col-xl-offset-17 { margin-left: 70.83333333%; } .arco-col-xl-offset-18 { margin-left: 75%; } .arco-col-xl-offset-19 { margin-left: 79.16666667%; } .arco-col-xl-offset-20 { margin-left: 83.33333333%; } .arco-col-xl-offset-21 { margin-left: 87.5%; } .arco-col-xl-offset-22 { margin-left: 91.66666667%; } .arco-col-xl-offset-23 { margin-left: 95.83333333%; } .arco-col-xl-order-1 { order: 1; } .arco-col-xl-order-2 { order: 2; } .arco-col-xl-order-3 { order: 3; } .arco-col-xl-order-4 { order: 4; } .arco-col-xl-order-5 { order: 5; } .arco-col-xl-order-6 { order: 6; } .arco-col-xl-order-7 { order: 7; } .arco-col-xl-order-8 { order: 8; } .arco-col-xl-order-9 { order: 9; } .arco-col-xl-order-10 { order: 10; } .arco-col-xl-order-11 { order: 11; } .arco-col-xl-order-12 { order: 12; } .arco-col-xl-order-13 { order: 13; } .arco-col-xl-order-14 { order: 14; } .arco-col-xl-order-15 { order: 15; } .arco-col-xl-order-16 { order: 16; } .arco-col-xl-order-17 { order: 17; } .arco-col-xl-order-18 { order: 18; } .arco-col-xl-order-19 { order: 19; } .arco-col-xl-order-20 { order: 20; } .arco-col-xl-order-21 { order: 21; } .arco-col-xl-order-22 { order: 22; } .arco-col-xl-order-23 { order: 23; } .arco-col-xl-order-24 { order: 24; } } @media (min-width: 1600px) { .arco-col-xxl-1 { flex: 0 0 4.16666667%; width: 4.16666667%; } .arco-col-xxl-2 { flex: 0 0 8.33333333%; width: 8.33333333%; } .arco-col-xxl-3 { flex: 0 0 12.5%; width: 12.5%; } .arco-col-xxl-4 { flex: 0 0 16.66666667%; width: 16.66666667%; } .arco-col-xxl-5 { flex: 0 0 20.83333333%; width: 20.83333333%; } .arco-col-xxl-6 { flex: 0 0 25%; width: 25%; } .arco-col-xxl-7 { flex: 0 0 29.16666667%; width: 29.16666667%; } .arco-col-xxl-8 { flex: 0 0 33.33333333%; width: 33.33333333%; } .arco-col-xxl-9 { flex: 0 0 37.5%; width: 37.5%; } .arco-col-xxl-10 { flex: 0 0 41.66666667%; width: 41.66666667%; } .arco-col-xxl-11 { flex: 0 0 45.83333333%; width: 45.83333333%; } .arco-col-xxl-12 { flex: 0 0 50%; width: 50%; } .arco-col-xxl-13 { flex: 0 0 54.16666667%; width: 54.16666667%; } .arco-col-xxl-14 { flex: 0 0 58.33333333%; width: 58.33333333%; } .arco-col-xxl-15 { flex: 0 0 62.5%; width: 62.5%; } .arco-col-xxl-16 { flex: 0 0 66.66666667%; width: 66.66666667%; } .arco-col-xxl-17 { flex: 0 0 70.83333333%; width: 70.83333333%; } .arco-col-xxl-18 { flex: 0 0 75%; width: 75%; } .arco-col-xxl-19 { flex: 0 0 79.16666667%; width: 79.16666667%; } .arco-col-xxl-20 { flex: 0 0 83.33333333%; width: 83.33333333%; } .arco-col-xxl-21 { flex: 0 0 87.5%; width: 87.5%; } .arco-col-xxl-22 { flex: 0 0 91.66666667%; width: 91.66666667%; } .arco-col-xxl-23 { flex: 0 0 95.83333333%; width: 95.83333333%; } .arco-col-xxl-24 { flex: 0 0 100%; width: 100%; } .arco-col-xxl-offset-1 { margin-left: 4.16666667%; } .arco-col-xxl-offset-2 { margin-left: 8.33333333%; } .arco-col-xxl-offset-3 { margin-left: 12.5%; } .arco-col-xxl-offset-4 { margin-left: 16.66666667%; } .arco-col-xxl-offset-5 { margin-left: 20.83333333%; } .arco-col-xxl-offset-6 { margin-left: 25%; } .arco-col-xxl-offset-7 { margin-left: 29.16666667%; } .arco-col-xxl-offset-8 { margin-left: 33.33333333%; } .arco-col-xxl-offset-9 { margin-left: 37.5%; } .arco-col-xxl-offset-10 { margin-left: 41.66666667%; } .arco-col-xxl-offset-11 { margin-left: 45.83333333%; } .arco-col-xxl-offset-12 { margin-left: 50%; } .arco-col-xxl-offset-13 { margin-left: 54.16666667%; } .arco-col-xxl-offset-14 { margin-left: 58.33333333%; } .arco-col-xxl-offset-15 { margin-left: 62.5%; } .arco-col-xxl-offset-16 { margin-left: 66.66666667%; } .arco-col-xxl-offset-17 { margin-left: 70.83333333%; } .arco-col-xxl-offset-18 { margin-left: 75%; } .arco-col-xxl-offset-19 { margin-left: 79.16666667%; } .arco-col-xxl-offset-20 { margin-left: 83.33333333%; } .arco-col-xxl-offset-21 { margin-left: 87.5%; } .arco-col-xxl-offset-22 { margin-left: 91.66666667%; } .arco-col-xxl-offset-23 { margin-left: 95.83333333%; } .arco-col-xxl-order-1 { order: 1; } .arco-col-xxl-order-2 { order: 2; } .arco-col-xxl-order-3 { order: 3; } .arco-col-xxl-order-4 { order: 4; } .arco-col-xxl-order-5 { order: 5; } .arco-col-xxl-order-6 { order: 6; } .arco-col-xxl-order-7 { order: 7; } .arco-col-xxl-order-8 { order: 8; } .arco-col-xxl-order-9 { order: 9; } .arco-col-xxl-order-10 { order: 10; } .arco-col-xxl-order-11 { order: 11; } .arco-col-xxl-order-12 { order: 12; } .arco-col-xxl-order-13 { order: 13; } .arco-col-xxl-order-14 { order: 14; } .arco-col-xxl-order-15 { order: 15; } .arco-col-xxl-order-16 { order: 16; } .arco-col-xxl-order-17 { order: 17; } .arco-col-xxl-order-18 { order: 18; } .arco-col-xxl-order-19 { order: 19; } .arco-col-xxl-order-20 { order: 20; } .arco-col-xxl-order-21 { order: 21; } .arco-col-xxl-order-22 { order: 22; } .arco-col-xxl-order-23 { order: 23; } .arco-col-xxl-order-24 { order: 24; } } .arco-grid { display: grid; } .arco-image-trigger { padding: 6px 4px; background: var(--color-bg-5); border: 1px solid var(--color-neutral-3); border-radius: 4px; } .arco-image-trigger .arco-trigger-arrow { background-color: var(--color-bg-5); border: 1px solid var(--color-neutral-3); } .arco-image { position: relative; display: inline-block; border-radius: var(--border-radius-small); } .arco-image-img { vertical-align: middle; border-radius: inherit; } .arco-image-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .arco-image-footer { display: flex; width: 100%; max-width: 100%; } .arco-image-footer-caption { flex: 1 1 auto; } .arco-image-footer-caption-title { font-weight: 500; font-size: 16px; } .arco-image-footer-caption-description { font-size: 14px; } .arco-image-footer-extra { flex: 0 0 auto; padding-left: 12px; } .arco-image-with-footer-inner .arco-image-footer { position: absolute; bottom: 0; left: 0; align-items: center; box-sizing: border-box; padding: 9px 16px; color: var(--color-white); background: linear-gradient(360deg, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0) 100%); border-bottom-right-radius: var(--border-radius-small); border-bottom-left-radius: var(--border-radius-small); } .arco-image-with-footer-inner .arco-image-footer-caption-title { color: var(--color-white); } .arco-image-with-footer-inner .arco-image-footer-caption-description { color: var(--color-white); } .arco-image-with-footer-outer .arco-image-footer { margin-top: 4px; color: var(--color-neutral-8); } .arco-image-with-footer-outer .arco-image-footer-caption-title { color: var(--color-text-1); } .arco-image-with-footer-outer .arco-image-footer-caption-description { color: var(--color-neutral-6); } .arco-image-error { display: flex; flex-direction: column; align-items: center; justify-content: center; box-sizing: border-box; width: 100%; height: 100%; color: var(--color-neutral-4); background-color: var(--color-neutral-1); } .arco-image-error-icon { width: 60px; max-width: 100%; height: 60px; max-height: 100%; } .arco-image-error-icon > svg { width: 100%; height: 100%; } .arco-image-error-alt { padding: 8px 16px; font-size: 12px; line-height: 1.6667; text-align: center; } .arco-image-loader { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: var(--color-neutral-1); } .arco-image-loader-spin { position: absolute; top: 50%; left: 50%; color: rgb(var(--primary-6)); font-size: 32px; text-align: center; transform: translate(-50%, -50%); } .arco-image-loader-spin-text { color: var(--color-neutral-6); font-size: 16px; } .arco-image-simple.arco-image-with-footer-inner .arco-image-footer { padding: 12px 16px; } .arco-image-loading .arco-image-img, .arco-image-loading-error .arco-image-img { visibility: hidden; } .arco-image-preview { position: fixed; top: 0; left: 0; z-index: 1001; width: 100%; height: 100%; } .arco-image-preview-hide { display: none; } .arco-image-preview-mask, .arco-image-preview-wrapper { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .arco-image-preview-mask { background-color: var(--color-mask-bg); } .arco-image-preview-img-container { width: 100%; height: 100%; text-align: center; } .arco-image-preview-img-container::before { display: inline-block; width: 0; height: 100%; vertical-align: middle; content: ''; } .arco-image-preview-img-container .arco-image-preview-img { display: inline-block; max-width: 100%; max-height: 100%; vertical-align: middle; cursor: grab; user-select: none; } .arco-image-preview-img-container .arco-image-preview-img.arco-image-preview-img-moving { cursor: grabbing; } .arco-image-preview-scale-value { box-sizing: border-box; padding: 7px 10px; color: var(--color-white); font-size: 12px; line-height: initial; background-color: rgba(255, 255, 255, 0.08); position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .arco-image-preview-toolbar { position: absolute; bottom: 46px; left: 50%; display: flex; align-items: flex-start; padding: 4px 16px; background-color: var(--color-bg-2); border-radius: var(--border-radius-medium); transform: translateX(-50%); } .arco-image-preview-toolbar-action { display: flex; align-items: center; color: var(--color-neutral-8); font-size: 14px; background-color: transparent; border-radius: var(--border-radius-small); cursor: pointer; } .arco-image-preview-toolbar-action:not(:last-of-type) { margin-right: 0; } .arco-image-preview-toolbar-action:hover { color: rgb(var(--primary-6)); background-color: var(--color-neutral-2); } .arco-image-preview-toolbar-action-disabled, .arco-image-preview-toolbar-action-disabled:hover { color: var(--color-text-4); background-color: transparent; cursor: not-allowed; } .arco-image-preview-toolbar-action-name { padding-right: 12px; font-size: 12px; } .arco-image-preview-toolbar-action-content { padding: 13px; line-height: 1; } .arco-image-preview-loading { display: flex; align-items: center; justify-content: center; box-sizing: border-box; width: 48px; height: 48px; padding: 10px; color: rgb(var(--primary-6)); font-size: 18px; background-color: #232324; border-radius: var(--border-radius-medium); position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .arco-image-preview-close-btn { position: absolute; top: 36px; right: 36px; display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; color: var(--color-white); font-size: 14px; line-height: 32px; text-align: center; background: rgba(0, 0, 0, 0.5); border-radius: 50%; cursor: pointer; } .arco-image-preview-arrow-left, .arco-image-preview-arrow-right { position: absolute; z-index: 2; display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; color: var(--color-white); background-color: rgba(255, 255, 255, 0.3); border-radius: 50%; cursor: pointer; } .arco-image-preview-arrow-left > svg, .arco-image-preview-arrow-right > svg { color: var(--color-white); font-size: 16px; } .arco-image-preview-arrow-left:hover, .arco-image-preview-arrow-right:hover { background-color: rgba(255, 255, 255, 0.5); } .arco-image-preview-arrow-left { top: 50%; left: 20px; transform: translateY(-50%); } .arco-image-preview-arrow-right { top: 50%; right: 20px; transform: translateY(-50%); } .arco-image-preview-arrow-disabled { color: rgba(255, 255, 255, 0.3); background-color: rgba(255, 255, 255, 0.2); cursor: not-allowed; } .arco-image-preview-arrow-disabled > svg { color: rgba(255, 255, 255, 0.3); } .arco-image-preview-arrow-disabled:hover { background-color: rgba(255, 255, 255, 0.2); } /** mask 动效 */ .image-fade-enter-from, .image-fade-leave-to { opacity: 0; } .image-fade-enter-to, .image-fade-leave-from { opacity: 1; } .image-fade-enter-active { transition: opacity 0.4s cubic-bezier(0.3, 1.3, 0.3, 1); } .image-fade-leave-active { transition: opacity 0.4s cubic-bezier(0.3, 1.3, 0.3, 1); } /******** 基础配置项 end *******/ /******** 基础配置项 end *******/ /******** 高级配置项 *******/ /******** 高级配置项 end *******/ .arco-input-number { position: relative; box-sizing: border-box; width: 100%; border-radius: var(--border-radius-small); } .arco-input-number-step-button { display: flex; align-items: center; justify-content: center; box-sizing: border-box; padding: 0; color: var(--color-text-2); background-color: var(--color-fill-2); cursor: pointer; user-select: none; transition: all 0.1s cubic-bezier(0, 0, 1, 1); } .arco-input-number-step-button:hover { background-color: var(--color-fill-3); border-color: var(--color-fill-3); } .arco-input-number-step-button:active { background-color: var(--color-fill-4); border-color: var(--color-fill-4); } .arco-input-number-step-button:disabled { color: var(--color-text-4); background-color: var(--color-fill-2); cursor: not-allowed; } .arco-input-number-step-button:disabled:hover, .arco-input-number-step-button:disabled:active { background-color: var(--color-fill-2); border-color: var(--color-neutral-3); } .arco-input-number .arco-input-wrapper { position: relative; } .arco-input-number-prefix, .arco-input-number-suffix { transition: all 0.1s cubic-bezier(0, 0, 1, 1); } .arco-input-number-mode-embed .arco-input-number-step { position: absolute; top: 4px; right: 4px; bottom: 4px; width: 18px; overflow: hidden; border-radius: 1px; opacity: 0; transition: all 0.1s cubic-bezier(0, 0, 1, 1); } .arco-input-number-mode-embed .arco-input-number-step .arco-input-number-step-button { width: 100%; height: 50%; font-size: 10px; border: none; border-color: var(--color-neutral-3); } .arco-input-number-mode-embed .arco-input-suffix { justify-content: flex-end; min-width: 6px; } .arco-input-number-mode-embed .arco-input-suffix-has-feedback { min-width: 32px; } .arco-input-number-mode-embed .arco-input-suffix-has-feedback .arco-input-number-step { right: 30px; } .arco-input-number-mode-embed:not(.arco-input-disabled):not(.arco-input-outer-disabled):hover .arco-input-suffix:has(.arco-input-number-suffix), .arco-input-number-mode-embed:not(.arco-input-disabled):not(.arco-input-outer-disabled):focus-within .arco-input-suffix:has(.arco-input-number-suffix) { padding-left: 4px; } .arco-input-number-mode-embed:not(.arco-input-disabled):not(.arco-input-outer-disabled):hover .arco-input-number-step, .arco-input-number-mode-embed:not(.arco-input-disabled):not(.arco-input-outer-disabled):focus-within .arco-input-number-step { opacity: 1; } .arco-input-number-mode-embed:not(.arco-input-disabled):not(.arco-input-outer-disabled):hover .arco-input-number-suffix, .arco-input-number-mode-embed:not(.arco-input-disabled):not(.arco-input-outer-disabled):focus-within .arco-input-number-suffix { opacity: 0; pointer-events: none; } .arco-input-number-mode-embed.arco-input-wrapper:not(.arco-input-focus) .arco-input-number-step-button:not(.arco-input-number-step-button-disabled):hover { background-color: var(--color-fill-4); } .arco-input-number-mode-button .arco-input-prepend, .arco-input-number-mode-button .arco-input-append { padding: 0; border: none; } .arco-input-number-mode-button .arco-input-prepend .arco-input-number-step-button { border-right: 1px solid transparent; border-top-right-radius: 0; border-bottom-right-radius: 0; } .arco-input-number-mode-button .arco-input-prepend .arco-input-number-step-button:not(.arco-input-number-mode-button .arco-input-prepend .arco-input-number-step-button:active) { border-right-color: var(--color-neutral-3); } .arco-input-number-mode-button .arco-input-append .arco-input-number-step-button { border-left: 1px solid transparent; border-top-left-radius: 0; border-bottom-left-radius: 0; } .arco-input-number-mode-button .arco-input-append .arco-input-number-step-button:not(.arco-input-number-mode-button .arco-input-append .arco-input-number-step-button:active) { border-left-color: var(--color-neutral-3); } .arco-input-number-readonly .arco-input-number-step-button { color: var(--color-text-4); pointer-events: none; } .arco-input-tag { display: inline-flex; box-sizing: border-box; width: 100%; padding-right: 12px; padding-left: 12px; color: var(--color-text-1); font-size: 14px; background-color: transparent; border: 1px solid var(--color-border-3); border-radius: var(--border-radius-small); cursor: text; transition: color 0.1s cubic-bezier(0, 0, 1, 1), border-color 0.1s cubic-bezier(0, 0, 1, 1), background-color 0.1s cubic-bezier(0, 0, 1, 1); } .arco-input-tag:hover { background-color: transparent; border-color: var(--color-border-4); } .arco-input-tag:focus-within, .arco-input-tag.arco-input-tag-focus { z-index: 1; background-color: var(--color-bg-2); border-color: rgb(var(--primary-6)); box-shadow: 0 0 0 0 var(--color-primary-light-2); } .arco-input-tag.arco-input-tag-disabled { color: var(--color-text-4); background-color: var(--color-fill-1); border-color: var(--color-border-2); cursor: not-allowed; } .arco-input-tag.arco-input-tag-disabled:hover { color: var(--color-text-4); background-color: var(--color-fill-1); border-color: var(--color-border-2); } .arco-input-tag.arco-input-tag-disabled .arco-input-tag-prefix, .arco-input-tag.arco-input-tag-disabled .arco-input-tag-suffix { color: inherit; } .arco-input-tag.arco-input-tag-error { background-color: var(--color-bg-2); border-color: rgb(var(--danger-6)); } .arco-input-tag.arco-input-tag-error:hover { background-color: var(--color-bg-2); border-color: rgb(var(--danger-5)); } .arco-input-tag.arco-input-tag-error:focus-within, .arco-input-tag.arco-input-tag-error.arco-input-tag-focus { z-index: 1; background-color: var(--color-bg-2); border-color: rgb(var(--danger-6)); box-shadow: 0 0 0 0 var(--color-danger-light-2); } .arco-input-tag .arco-input-tag-prefix, .arco-input-tag .arco-input-tag-suffix { display: inline-flex; flex-shrink: 0; align-items: center; white-space: nowrap; user-select: none; } .arco-input-tag .arco-input-tag-prefix > svg, .arco-input-tag .arco-input-tag-suffix > svg { font-size: 14px; } .arco-input-tag .arco-input-tag-prefix { padding-right: 12px; color: var(--color-text-2); } .arco-input-tag .arco-input-tag-suffix { padding-left: 12px; color: var(--color-text-2); } .arco-input-tag .arco-input-tag-suffix .arco-feedback-icon { display: inline-flex; } .arco-input-tag .arco-input-tag-suffix .arco-feedback-icon-status-validating { color: rgb(var(--primary-6)); } .arco-input-tag .arco-input-tag-suffix .arco-feedback-icon-status-success { color: rgb(var(--success-6)); } .arco-input-tag .arco-input-tag-suffix .arco-feedback-icon-status-warning { color: rgb(var(--warning-6)); } .arco-input-tag .arco-input-tag-suffix .arco-feedback-icon-status-error { color: rgb(var(--danger-6)); } .arco-input-tag .arco-input-tag-clear-btn { align-self: center; color: var(--color-text-2); font-size: 12px; visibility: hidden; cursor: pointer; } .arco-input-tag .arco-input-tag-clear-btn > svg { position: relative; transition: color 0.1s cubic-bezier(0, 0, 1, 1); } .arco-input-tag:hover .arco-input-tag-clear-btn { visibility: visible; } .arco-input-tag:not(.arco-input-tag-focus) .arco-input-tag-icon-hover:hover::before { background-color: var(--color-fill-4); } .arco-input-tag.arco-input-tag-has-tag { padding-right: 4px; padding-left: 4px; } .arco-input-tag.arco-input-tag-has-prefix { padding-left: 12px; } .arco-input-tag.arco-input-tag-has-suffix { padding-right: 12px; } .arco-input-tag .arco-input-tag-inner { flex: 1; overflow: hidden; line-height: 0; } .arco-input-tag .arco-input-tag-inner.arco-input-tag-nowrap { display: flex; flex-wrap: wrap; } .arco-input-tag .arco-input-tag-inner .arco-input-tag-tag { display: inline-flex; align-items: center; margin-right: 4px; color: var(--color-text-1); font-size: 12px; white-space: pre-wrap; word-break: break-word; background-color: var(--color-bg-2); border-color: var(--color-fill-3); } .arco-input-tag .arco-input-tag-inner .arco-input-tag-tag .arco-icon-hover:hover::before { background-color: var(--color-fill-2); } .arco-input-tag .arco-input-tag-inner .arco-input-tag-tag.arco-tag-custom-color { color: var(--color-white); } .arco-input-tag .arco-input-tag-inner .arco-input-tag-tag.arco-tag-custom-color .arco-icon-hover.arco-tag-icon-hover:hover::before { background-color: rgba(255, 255, 255, 0.2); } .arco-input-tag .arco-input-tag-inner .arco-input-tag-input { width: 100%; padding-right: 0; padding-left: 0; color: inherit; line-height: 1.5715; background: none; border: none; border-radius: 0; outline: none; cursor: inherit; -webkit-appearance: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; } .arco-input-tag .arco-input-tag-inner .arco-input-tag-input::placeholder { color: var(--color-text-4); } .arco-input-tag .arco-input-tag-inner .arco-input-tag-input[disabled]::placeholder { color: var(--color-text-4); } .arco-input-tag .arco-input-tag-inner .arco-input-tag-input[disabled] { -webkit-text-fill-color: var(--color-text-4); } .arco-input-tag .arco-input-tag-mirror { position: absolute; top: 0; left: 0; white-space: pre; visibility: hidden; pointer-events: none; } .arco-input-tag.arco-input-tag-focus .arco-input-tag-tag { background-color: transparent; border-color: var(--color-fill-3); } .arco-input-tag.arco-input-tag-focus .arco-input-tag-tag .arco-icon-hover:hover::before { background-color: var(--color-fill-3); } .arco-input-tag.arco-input-tag-disabled .arco-input-tag-tag { color: var(--color-text-4); background-color: var(--color-fill-2); border-color: var(--color-fill-3); } .arco-input-tag.arco-input-tag-readonly, .arco-input-tag.arco-input-tag-disabled-input { cursor: default; } .arco-input-tag.arco-input-tag-size-mini { font-size: 12px; } .arco-input-tag.arco-input-tag-size-mini .arco-input-tag-inner { padding-top: 0px; padding-bottom: 0px; } .arco-input-tag.arco-input-tag-size-mini .arco-input-tag-tag, .arco-input-tag.arco-input-tag-size-mini .arco-input-tag-input { margin-top: 1px; margin-bottom: 1px; line-height: 18px; vertical-align: middle; } .arco-input-tag.arco-input-tag-size-mini .arco-input-tag-tag, .arco-input-tag.arco-input-tag-size-mini .arco-input-tag-input { height: auto; min-height: 20px; } .arco-input-tag.arco-input-tag-size-medium { font-size: 14px; } .arco-input-tag.arco-input-tag-size-medium .arco-input-tag-inner { padding-top: 2px; padding-bottom: 2px; } .arco-input-tag.arco-input-tag-size-medium .arco-input-tag-tag, .arco-input-tag.arco-input-tag-size-medium .arco-input-tag-input { margin-top: 1px; margin-bottom: 1px; line-height: 22px; vertical-align: middle; } .arco-input-tag.arco-input-tag-size-medium .arco-input-tag-tag, .arco-input-tag.arco-input-tag-size-medium .arco-input-tag-input { height: auto; min-height: 24px; } .arco-input-tag.arco-input-tag-size-small { font-size: 14px; } .arco-input-tag.arco-input-tag-size-small .arco-input-tag-inner { padding-top: 2px; padding-bottom: 2px; } .arco-input-tag.arco-input-tag-size-small .arco-input-tag-tag, .arco-input-tag.arco-input-tag-size-small .arco-input-tag-input { margin-top: 1px; margin-bottom: 1px; line-height: 18px; vertical-align: middle; } .arco-input-tag.arco-input-tag-size-small .arco-input-tag-tag, .arco-input-tag.arco-input-tag-size-small .arco-input-tag-input { height: auto; min-height: 20px; } .arco-input-tag.arco-input-tag-size-large { font-size: 14px; } .arco-input-tag.arco-input-tag-size-large .arco-input-tag-inner { padding-top: 2px; padding-bottom: 2px; } .arco-input-tag.arco-input-tag-size-large .arco-input-tag-tag, .arco-input-tag.arco-input-tag-size-large .arco-input-tag-input { margin-top: 1px; margin-bottom: 1px; line-height: 26px; vertical-align: middle; } .arco-input-tag.arco-input-tag-size-large .arco-input-tag-tag, .arco-input-tag.arco-input-tag-size-large .arco-input-tag-input { height: auto; min-height: 28px; } .input-tag-zoom-enter-from { transform: scale(0.5, 0.5); opacity: 0; } .input-tag-zoom-enter-to { transform: scale(1, 1); opacity: 1; } .input-tag-zoom-enter-active { transition: all 0.3s cubic-bezier(0.34, 0.69, 0.1, 1); } .input-tag-zoom-leave-from { transform: scale(1, 1); opacity: 1; } .input-tag-zoom-leave-to { transform: scale(0.5, 0.5); opacity: 0; } .input-tag-zoom-leave-active { position: absolute; transition: all 0.3s cubic-bezier(0.3, 1.3, 0.3, 1); } .input-tag-zoom-move { transition: all 0.3s cubic-bezier(0.3, 1.3, 0.3, 1); } .arco-input-wrapper { display: inline-flex; box-sizing: border-box; width: 100%; padding-right: 12px; padding-left: 12px; color: var(--color-text-1); font-size: 14px; background-color: transparent; border: 1px solid var(--color-border-3); border-radius: var(--border-radius-small); cursor: text; transition: color 0.1s cubic-bezier(0, 0, 1, 1), border-color 0.1s cubic-bezier(0, 0, 1, 1), background-color 0.1s cubic-bezier(0, 0, 1, 1); } .arco-input-wrapper:hover { background-color: transparent; border-color: var(--color-border-4); } .arco-input-wrapper:focus-within, .arco-input-wrapper.arco-input-focus { z-index: 1; background-color: var(--color-bg-2); border-color: rgb(var(--primary-6)); box-shadow: 0 0 0 0 var(--color-primary-light-2); } .arco-input-wrapper.arco-input-disabled { color: var(--color-text-4); background-color: var(--color-fill-1); border-color: var(--color-border-2); cursor: not-allowed; } .arco-input-wrapper.arco-input-disabled:hover { color: var(--color-text-4); background-color: var(--color-fill-1); border-color: var(--color-border-2); } .arco-input-wrapper.arco-input-disabled .arco-input-prefix, .arco-input-wrapper.arco-input-disabled .arco-input-suffix { color: inherit; } .arco-input-wrapper.arco-input-error { background-color: var(--color-bg-2); border-color: rgb(var(--danger-6)); } .arco-input-wrapper.arco-input-error:hover { background-color: var(--color-bg-2); border-color: rgb(var(--danger-5)); } .arco-input-wrapper.arco-input-error:focus-within, .arco-input-wrapper.arco-input-error.arco-input-wrapper-focus { z-index: 1; background-color: var(--color-bg-2); border-color: rgb(var(--danger-6)); box-shadow: 0 0 0 0 var(--color-danger-light-2); } .arco-input-wrapper .arco-input-prefix, .arco-input-wrapper .arco-input-suffix { display: inline-flex; flex-shrink: 0; align-items: center; white-space: nowrap; user-select: none; } .arco-input-wrapper .arco-input-prefix > svg, .arco-input-wrapper .arco-input-suffix > svg { font-size: 14px; } .arco-input-wrapper .arco-input-prefix { padding-right: 12px; color: var(--color-text-2); } .arco-input-wrapper .arco-input-suffix { padding-left: 12px; color: var(--color-text-2); } .arco-input-wrapper .arco-input-suffix .arco-feedback-icon { display: inline-flex; } .arco-input-wrapper .arco-input-suffix .arco-feedback-icon-status-validating { color: rgb(var(--primary-6)); } .arco-input-wrapper .arco-input-suffix .arco-feedback-icon-status-success { color: rgb(var(--success-6)); } .arco-input-wrapper .arco-input-suffix .arco-feedback-icon-status-warning { color: rgb(var(--warning-6)); } .arco-input-wrapper .arco-input-suffix .arco-feedback-icon-status-error { color: rgb(var(--danger-6)); } .arco-input-wrapper .arco-input-clear-btn { align-self: center; color: var(--color-text-2); font-size: 12px; visibility: hidden; cursor: pointer; } .arco-input-wrapper .arco-input-clear-btn > svg { position: relative; transition: color 0.1s cubic-bezier(0, 0, 1, 1); } .arco-input-wrapper:hover .arco-input-clear-btn { visibility: visible; } .arco-input-wrapper:not(.arco-input-focus) .arco-input-icon-hover:hover::before { background-color: var(--color-fill-4); } .arco-input-wrapper .arco-input { width: 100%; padding-right: 0; padding-left: 0; color: inherit; line-height: 1.5715; background: none; border: none; border-radius: 0; outline: none; cursor: inherit; -webkit-appearance: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } .arco-input-wrapper .arco-input::placeholder { color: var(--color-text-4); } .arco-input-wrapper .arco-input[disabled]::placeholder { color: var(--color-text-4); } .arco-input-wrapper .arco-input[disabled] { -webkit-text-fill-color: var(--color-text-4); } .arco-input-wrapper .arco-input.arco-input-size-mini { /* prettier-ignore */ padding-top: 1px; /* prettier-ignore */ padding-bottom: 1px; font-size: 12px; line-height: 1.667; } .arco-input-wrapper .arco-input.arco-input-size-small { /* prettier-ignore */ padding-top: 2px; /* prettier-ignore */ padding-bottom: 2px; font-size: 14px; line-height: 1.5715; } .arco-input-wrapper .arco-input.arco-input-size-medium { /* prettier-ignore */ padding-top: 4px; /* prettier-ignore */ padding-bottom: 4px; font-size: 14px; line-height: 1.5715; } .arco-input-wrapper .arco-input.arco-input-size-large { /* prettier-ignore */ padding-top: 6px; /* prettier-ignore */ padding-bottom: 6px; font-size: 14px; line-height: 1.5715; } .arco-input-wrapper .arco-input-word-limit { color: var(--color-text-3); font-size: 12px; } .arco-input-outer { display: inline-flex; width: 100%; } .arco-input-outer > .arco-input-wrapper { border-radius: 0; } .arco-input-outer > :first-child { border-top-left-radius: var(--border-radius-small); border-bottom-left-radius: var(--border-radius-small); } .arco-input-outer > :last-child { border-top-right-radius: var(--border-radius-small); border-bottom-right-radius: var(--border-radius-small); } .arco-input-outer.arco-input-outer-size-mini .arco-input-outer { font-size: 12px; } .arco-input-outer.arco-input-outer-size-mini .arco-input-wrapper .arco-input-prefix, .arco-input-outer.arco-input-outer-size-mini .arco-input-wrapper .arco-input-suffix { font-size: 12px; } .arco-input-outer.arco-input-outer-size-mini .arco-input-wrapper .arco-input-prefix > svg, .arco-input-outer.arco-input-outer-size-mini .arco-input-wrapper .arco-input-suffix > svg { font-size: 12px; } .arco-input-outer.arco-input-outer-size-mini .arco-input-prepend, .arco-input-outer.arco-input-outer-size-mini .arco-input-append { font-size: 12px; } .arco-input-outer.arco-input-outer-size-mini .arco-input-prepend > svg, .arco-input-outer.arco-input-outer-size-mini .arco-input-append > svg { font-size: 12px; } .arco-input-outer.arco-input-outer-size-mini .arco-input-prepend .arco-input { width: auto; height: 100%; margin-top: -1px; margin-bottom: -1px; margin-right: -13px; margin-left: -12px; border-color: transparent; border-top-left-radius: 0; border-bottom-left-radius: 0; } .arco-input-outer.arco-input-outer-size-mini .arco-input-prepend .arco-select { width: auto; height: 100%; margin-top: -1px; margin-bottom: -1px; margin-right: -13px; margin-left: -12px; } .arco-input-outer.arco-input-outer-size-mini .arco-input-prepend .arco-select .arco-select-view { background-color: inherit; border-color: transparent; border-radius: 0; } .arco-input-outer.arco-input-outer-size-mini .arco-input-prepend .arco-select.arco-select-single .arco-select-view { height: 100%; } .arco-input-outer.arco-input-outer-size-mini .arco-input-append .arco-input { width: auto; height: 100%; margin-top: -1px; margin-bottom: -1px; margin-right: -12px; margin-left: -13px; border-color: transparent; border-top-right-radius: 0; border-bottom-right-radius: 0; } .arco-input-outer.arco-input-outer-size-mini .arco-input-append .arco-select { width: auto; height: 100%; margin-top: -1px; margin-bottom: -1px; margin-right: -12px; margin-left: -13px; } .arco-input-outer.arco-input-outer-size-mini .arco-input-append .arco-select .arco-select-view { background-color: inherit; border-color: transparent; border-radius: 0; } .arco-input-outer.arco-input-outer-size-mini .arco-input-append .arco-select.arco-select-single .arco-select-view { height: 100%; } .arco-input-outer.arco-input-outer-size-small .arco-input-outer { font-size: 14px; } .arco-input-outer.arco-input-outer-size-small .arco-input-wrapper .arco-input-prefix, .arco-input-outer.arco-input-outer-size-small .arco-input-wrapper .arco-input-suffix { font-size: 14px; } .arco-input-outer.arco-input-outer-size-small .arco-input-wrapper .arco-input-prefix > svg, .arco-input-outer.arco-input-outer-size-small .arco-input-wrapper .arco-input-suffix > svg { font-size: 14px; } .arco-input-outer.arco-input-outer-size-small .arco-input-prepend, .arco-input-outer.arco-input-outer-size-small .arco-input-append { font-size: 14px; } .arco-input-outer.arco-input-outer-size-small .arco-input-prepend > svg, .arco-input-outer.arco-input-outer-size-small .arco-input-append > svg { font-size: 14px; } .arco-input-outer.arco-input-outer-size-small .arco-input-prepend .arco-input { width: auto; height: 100%; margin-top: -1px; margin-bottom: -1px; margin-right: -13px; margin-left: -12px; border-color: transparent; border-top-left-radius: 0; border-bottom-left-radius: 0; } .arco-input-outer.arco-input-outer-size-small .arco-input-prepend .arco-select { width: auto; height: 100%; margin-top: -1px; margin-bottom: -1px; margin-right: -13px; margin-left: -12px; } .arco-input-outer.arco-input-outer-size-small .arco-input-prepend .arco-select .arco-select-view { background-color: inherit; border-color: transparent; border-radius: 0; } .arco-input-outer.arco-input-outer-size-small .arco-input-prepend .arco-select.arco-select-single .arco-select-view { height: 100%; } .arco-input-outer.arco-input-outer-size-small .arco-input-append .arco-input { width: auto; height: 100%; margin-top: -1px; margin-bottom: -1px; margin-right: -12px; margin-left: -13px; border-color: transparent; border-top-right-radius: 0; border-bottom-right-radius: 0; } .arco-input-outer.arco-input-outer-size-small .arco-input-append .arco-select { width: auto; height: 100%; margin-top: -1px; margin-bottom: -1px; margin-right: -12px; margin-left: -13px; } .arco-input-outer.arco-input-outer-size-small .arco-input-append .arco-select .arco-select-view { background-color: inherit; border-color: transparent; border-radius: 0; } .arco-input-outer.arco-input-outer-size-small .arco-input-append .arco-select.arco-select-single .arco-select-view { height: 100%; } .arco-input-outer.arco-input-outer-size-large .arco-input-outer { font-size: 14px; } .arco-input-outer.arco-input-outer-size-large .arco-input-wrapper .arco-input-prefix, .arco-input-outer.arco-input-outer-size-large .arco-input-wrapper .arco-input-suffix { font-size: 14px; } .arco-input-outer.arco-input-outer-size-large .arco-input-wrapper .arco-input-prefix > svg, .arco-input-outer.arco-input-outer-size-large .arco-input-wrapper .arco-input-suffix > svg { font-size: 14px; } .arco-input-outer.arco-input-outer-size-large .arco-input-prepend, .arco-input-outer.arco-input-outer-size-large .arco-input-append { font-size: 14px; } .arco-input-outer.arco-input-outer-size-large .arco-input-prepend > svg, .arco-input-outer.arco-input-outer-size-large .arco-input-append > svg { font-size: 14px; } .arco-input-outer.arco-input-outer-size-large .arco-input-prepend .arco-input { width: auto; height: 100%; margin-top: -1px; margin-bottom: -1px; margin-right: -13px; margin-left: -12px; border-color: transparent; border-top-left-radius: 0; border-bottom-left-radius: 0; } .arco-input-outer.arco-input-outer-size-large .arco-input-prepend .arco-select { width: auto; height: 100%; margin-top: -1px; margin-bottom: -1px; margin-right: -13px; margin-left: -12px; } .arco-input-outer.arco-input-outer-size-large .arco-input-prepend .arco-select .arco-select-view { background-color: inherit; border-color: transparent; border-radius: 0; } .arco-input-outer.arco-input-outer-size-large .arco-input-prepend .arco-select.arco-select-single .arco-select-view { height: 100%; } .arco-input-outer.arco-input-outer-size-large .arco-input-append .arco-input { width: auto; height: 100%; margin-top: -1px; margin-bottom: -1px; margin-right: -12px; margin-left: -13px; border-color: transparent; border-top-right-radius: 0; border-bottom-right-radius: 0; } .arco-input-outer.arco-input-outer-size-large .arco-input-append .arco-select { width: auto; height: 100%; margin-top: -1px; margin-bottom: -1px; margin-right: -12px; margin-left: -13px; } .arco-input-outer.arco-input-outer-size-large .arco-input-append .arco-select .arco-select-view { background-color: inherit; border-color: transparent; border-radius: 0; } .arco-input-outer.arco-input-outer-size-large .arco-input-append .arco-select.arco-select-single .arco-select-view { height: 100%; } .arco-input-outer-disabled { cursor: not-allowed; } .arco-input-prepend, .arco-input-append { display: inline-flex; flex-shrink: 0; align-items: center; box-sizing: border-box; padding: 0 12px; color: var(--color-text-1); white-space: nowrap; background-color: transparent; border: 1px solid var(--color-border-3); } .arco-input-prepend > svg, .arco-input-append > svg { font-size: 14px; } .arco-input-prepend { border-right: 1px solid var(--color-neutral-3); } .arco-input-prepend .arco-input { width: auto; height: 100%; margin-top: -1px; margin-bottom: -1px; margin-right: -12px; margin-left: -13px; border-color: transparent; border-top-right-radius: 0; border-bottom-right-radius: 0; } .arco-input-prepend .arco-select { width: auto; height: 100%; margin-top: -1px; margin-bottom: -1px; margin-right: -12px; margin-left: -13px; } .arco-input-prepend .arco-select .arco-select-view { background-color: inherit; border-color: transparent; border-radius: 0; } .arco-input-prepend .arco-select.arco-select-single .arco-select-view { height: 100%; } .arco-input-append { border-left: 1px solid var(--color-neutral-3); } .arco-input-append .arco-input { width: auto; height: 100%; margin-top: -1px; margin-bottom: -1px; margin-right: -13px; margin-left: -12px; border-color: transparent; border-top-left-radius: 0; border-bottom-left-radius: 0; } .arco-input-append .arco-select { width: auto; height: 100%; margin-top: -1px; margin-bottom: -1px; margin-right: -13px; margin-left: -12px; } .arco-input-append .arco-select .arco-select-view { background-color: inherit; border-color: transparent; border-radius: 0; } .arco-input-append .arco-select.arco-select-single .arco-select-view { height: 100%; } .arco-input-group { display: inline-flex; align-items: center; } .arco-input-group > * { border-radius: 0; } .arco-input-group > *.arco-input-outer > :last-child, .arco-input-group > *.arco-input-outer > :first-child { border-radius: 0; } .arco-input-group > *:not(:last-child) { position: relative; box-sizing: border-box; } .arco-input-group > *:first-child, .arco-input-group > *:first-child .arco-input-group > *:first-child { border-top-left-radius: var(--border-radius-small); border-bottom-left-radius: var(--border-radius-small); } .arco-input-group > *:first-child .arco-select-view, .arco-input-group > *:first-child .arco-input-group > *:first-child .arco-select-view { border-top-left-radius: var(--border-radius-small); border-bottom-left-radius: var(--border-radius-small); } .arco-input-group > *:last-child, .arco-input-group > *:last-child .arco-input-outer > *:last-child { border-top-right-radius: var(--border-radius-small); border-bottom-right-radius: var(--border-radius-small); } .arco-input-group > *:last-child .arco-select-view, .arco-input-group > *:last-child .arco-input-outer > *:last-child .arco-select-view { border-top-right-radius: var(--border-radius-small); border-bottom-right-radius: var(--border-radius-small); } .arco-input-group > .arco-input-wrapper:not(:last-child), .arco-input-group > .arco-input-outer:not(:last-child), .arco-input-group > .arco-input-tag:not(:last-child), .arco-input-group > .arco-select-view:not(:last-child) { margin-right: -1px; border-right: 1px solid var(--color-neutral-3); } .arco-input-group > .arco-input-wrapper:not(:last-child):focus-within, .arco-input-group > .arco-input-outer:not(:last-child):focus-within, .arco-input-group > .arco-input-tag:not(:last-child):focus-within, .arco-input-group > .arco-select-view:not(:last-child):focus-within { border-right-color: rgb(var(--primary-6)); } .arco-input-group > .arco-input-wrapper.arco-input-error:not(:last-child):focus-within { border-right-color: rgb(var(--danger-6)); } .size-height-size-mini { /* prettier-ignore */ padding-top: 1px; /* prettier-ignore */ padding-bottom: 1px; font-size: 12px; line-height: 1.667; } .size-height-size-small { /* prettier-ignore */ padding-top: 2px; /* prettier-ignore */ padding-bottom: 2px; font-size: 14px; } .size-height-size-large { /* prettier-ignore */ padding-top: 6px; /* prettier-ignore */ padding-bottom: 6px; font-size: 14px; } .arco-textarea-wrapper { position: relative; display: inline-block; width: 100%; } .arco-textarea-clear-wrapper:hover .arco-textarea-clear-icon { display: inline-block; } .arco-textarea-clear-wrapper .arco-textarea { padding-right: 20px; } .arco-textarea-word-limit { position: absolute; right: 10px; bottom: 6px; color: var(--color-text-3); font-size: 12px; user-select: none; } .arco-textarea-clear-icon { position: absolute; top: 10px; right: 10px; display: none; font-size: 12px; } .arco-input-search .arco-input-append { padding: 0; border: none; } .arco-input-search .arco-input-suffix { color: var(--color-text-2); font-size: 14px; } .arco-input-search .arco-input-search-btn { border-top-left-radius: 0; border-bottom-left-radius: 0; } .arco-input-wrapper.arco-input-password:not(.arco-input-disabled) .arco-input-suffix { color: var(--color-text-2); font-size: 12px; cursor: pointer; } .arco-layout { display: flex; flex: 1; flex-direction: column; margin: 0; padding: 0; } .arco-layout-sider { position: relative; flex: none; width: auto; margin: 0; padding: 0; background: var(--color-menu-dark-bg); transition: width 0.2s cubic-bezier(0.34, 0.69, 0.1, 1); } .arco-layout-sider-children { height: 100%; overflow: auto; } .arco-layout-sider-collapsed .arco-layout-sider-children { /* width */ } .arco-layout-sider-collapsed .arco-layout-sider-children::-webkit-scrollbar { width: 0; } .arco-layout-sider-has-trigger { box-sizing: border-box; padding-bottom: 48px; } .arco-layout-sider-trigger { z-index: 1; display: flex; align-items: center; justify-content: center; box-sizing: border-box; width: 100%; height: 48px; color: var(--color-white); background: rgba(255, 255, 255, 0.2); cursor: pointer; transition: width 0.2s cubic-bezier(0.34, 0.69, 0.1, 1); } .arco-layout-sider-trigger-light { color: var(--color-text-1); background: var(--color-menu-light-bg); border-top: 1px solid var(--color-bg-5); } .arco-layout-sider-light { background: var(--color-menu-light-bg); box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.08); } .arco-layout-header { flex: 0 0 auto; box-sizing: border-box; margin: 0; } .arco-layout-content { flex: 1; } .arco-layout-footer { flex: 0 0 auto; margin: 0; } .arco-layout-has-sider { flex-direction: row; } .arco-layout-has-sider > .arco-layout, .arco-layout-has-sider > .arco-layout-content { overflow-x: hidden; } .arco-link { display: inline-flex; align-items: center; justify-content: center; padding: 1px 4px; color: rgb(var(--link-6)); font-size: 14px; line-height: 1.5715; text-decoration: none; background-color: transparent; border-radius: var(--border-radius-small); cursor: pointer; transition: all 0.1s cubic-bezier(0, 0, 1, 1); } .arco-link:hover { color: rgb(var(--primary-5)); background-color: var(--color-fill-2); } .arco-link:active { color: rgb(var(--link-7)); background-color: var(--color-fill-3); transition: none; } .arco-link.arco-link-hoverless { display: inline; padding: 0; background-color: unset; } .arco-link.arco-link-hoverless:active, .arco-link.arco-link-hoverless:hover { background-color: unset; } .arco-link.arco-link-disabled { color: rgb(var(--link-3)); background: none; cursor: not-allowed; } .arco-link.arco-link-loading { color: var(--color-link-light-3); background: none; cursor: default; } .arco-link-status-success { color: rgb(var(--success-6)); } .arco-link-status-success:hover { color: rgb(var(--success-6)); } .arco-link-status-success:active { color: rgb(var(--success-6)); } .arco-link-status-success.arco-link-disabled { color: var(--color-success-light-3); } .arco-link-status-success.arco-link-loading { color: var(--color-success-light-3); } .arco-link-status-danger { color: rgb(var(--danger-6)); } .arco-link-status-danger:hover { color: rgb(var(--danger-6)); } .arco-link-status-danger:active { color: rgb(var(--danger-6)); } .arco-link-status-danger.arco-link-disabled { color: var(--color-danger-light-3); } .arco-link-status-danger.arco-link-loading { color: var(--color-danger-light-3); } .arco-link-status-warning { color: rgb(var(--warning-6)); } .arco-link-status-warning:hover { color: rgb(var(--warning-6)); } .arco-link-status-warning:active { color: rgb(var(--warning-6)); } .arco-link-status-warning.arco-link-disabled { color: var(--color-warning-light-2); } .arco-link-status-warning.arco-link-loading { color: var(--color-warning-light-2); } .arco-link-icon { margin-right: 6px; font-size: 12px; vertical-align: middle; } /********************************************** * size: small / default / large **********************************************/ .arco-list { display: flex; flex-direction: column; box-sizing: border-box; width: 100%; overflow-y: auto; color: var(--color-text-1); font-size: 14px; line-height: 1.5715; border-radius: 0; } .arco-list-wrapper { overflow: hidden; } .arco-list-wrapper .arco-list-spin { display: block; height: 100%; overflow: hidden; } .arco-list-content { overflow: hidden; } .arco-list-small .arco-list-content-wrapper .arco-list-header { padding: 8px 20px; } .arco-list-small .arco-list-content-wrapper .arco-list-footer, .arco-list-small .arco-list-content-wrapper .arco-list-content > .arco-list-item, .arco-list-small .arco-list-content-wrapper .arco-list-content .arco-list-col > .arco-list-item, .arco-list-small .arco-list-content-wrapper .arco-list-content.arco-list-virtual .arco-list-item { padding: 9px 20px; } .arco-list-medium .arco-list-content-wrapper .arco-list-header { padding: 12px 20px; } .arco-list-medium .arco-list-content-wrapper .arco-list-footer, .arco-list-medium .arco-list-content-wrapper .arco-list-content > .arco-list-item, .arco-list-medium .arco-list-content-wrapper .arco-list-content .arco-list-col > .arco-list-item, .arco-list-medium .arco-list-content-wrapper .arco-list-content.arco-list-virtual .arco-list-item { padding: 13px 20px; } .arco-list-large .arco-list-content-wrapper .arco-list-header { padding: 16px 20px; } .arco-list-large .arco-list-content-wrapper .arco-list-footer, .arco-list-large .arco-list-content-wrapper .arco-list-content > .arco-list-item, .arco-list-large .arco-list-content-wrapper .arco-list-content .arco-list-col > .arco-list-item, .arco-list-large .arco-list-content-wrapper .arco-list-content.arco-list-virtual .arco-list-item { padding: 17px 20px; } .arco-list-bordered { border: 1px solid var(--color-border-2); } .arco-list-split .arco-list-header, .arco-list-split .arco-list-item:not(:last-child) { border-bottom: 1px solid var(--color-border-2); } .arco-list-split .arco-list-footer { border-top: 1px solid var(--color-border-2); } .arco-list-header { color: var(--color-text-1); font-weight: 500; font-size: 16px; line-height: 1.5; } .arco-list-item { display: flex; justify-content: space-between; box-sizing: border-box; width: 100%; overflow: hidden; } .arco-list-item-main { flex: 1; } .arco-list-item-main .arco-list-item-action:not(:first-child) { margin-top: 4px; } .arco-list-item-meta { display: flex; align-items: center; padding: 4px 0; } .arco-list-item-meta-avatar { display: flex; } .arco-list-item-meta-avatar:not(:last-child) { margin-right: 16px; } .arco-list-item-meta-title { color: var(--color-text-1); font-weight: 500; } .arco-list-item-meta-title:not(:last-child) { margin-bottom: 2px; } .arco-list-item-meta-description { color: var(--color-text-2); } .arco-list-item-action { display: flex; flex-wrap: nowrap; align-self: center; margin: 0; padding: 0; list-style: none; } .arco-list-item-action > li { display: inline-block; cursor: pointer; } .arco-list-item-action > li:not(:last-child) { margin-right: 20px; } .arco-list-hover .arco-list-item:hover { background-color: var(--color-fill-1); } .arco-list-pagination { float: right; margin-top: 24px; } .arco-list-pagination::after { display: block; clear: both; height: 0; overflow: hidden; visibility: hidden; content: ''; } .arco-list-scroll-loading { display: flex; align-items: center; justify-content: center; } .arco-list-content { flex: auto; } .arco-list-content .arco-empty { display: flex; align-items: center; justify-content: center; height: 100%; } .arco-mention { position: relative; display: inline-block; box-sizing: border-box; width: 100%; } .arco-mention-measure { position: absolute; top: 0; right: 0; bottom: 0; left: 0; overflow: auto; visibility: hidden; pointer-events: none; } /********************************************** * theme: light / dark * status: default / disabled / selected / hover **********************************************/ /********************************************** * horizontal / vertical **********************************************/ /************************************************ * collapse ***********************************************/ /************************************************ * popButton ***********************************************/ /********************************************** * Theme dark in dropdown **********************************************/ @keyframes arco-menu-selected-item-label-enter { from { opacity: 0; } to { opacity: 1; } } .arco-menu { position: relative; box-sizing: border-box; width: 100%; font-size: 14px; line-height: 1.5715; transition: width 0.2s cubic-bezier(0.34, 0.69, 0.1, 1); } .arco-menu:focus-visible { outline: 3px solid var(--color-primary-light-2); } .arco-menu-indent { display: inline-block; width: 20px; } .arco-menu .arco-menu-item, .arco-menu .arco-menu-group-title, .arco-menu .arco-menu-pop-header, .arco-menu .arco-menu-inline-header { position: relative; box-sizing: border-box; border-radius: var(--border-radius-small); cursor: pointer; } .arco-menu .arco-menu-item.arco-menu-disabled, .arco-menu .arco-menu-group-title.arco-menu-disabled, .arco-menu .arco-menu-pop-header.arco-menu-disabled, .arco-menu .arco-menu-inline-header.arco-menu-disabled { cursor: not-allowed; } .arco-menu .arco-menu-item.arco-menu-selected, .arco-menu .arco-menu-group-title.arco-menu-selected, .arco-menu .arco-menu-pop-header.arco-menu-selected, .arco-menu .arco-menu-inline-header.arco-menu-selected { font-weight: 500; transition: color 0.2s cubic-bezier(0, 0, 1, 1); } .arco-menu .arco-menu-item.arco-menu-selected svg, .arco-menu .arco-menu-group-title.arco-menu-selected svg, .arco-menu .arco-menu-pop-header.arco-menu-selected svg, .arco-menu .arco-menu-inline-header.arco-menu-selected svg { transition: color 0.2s cubic-bezier(0, 0, 1, 1); } .arco-menu .arco-menu-item .arco-icon, .arco-menu .arco-menu-group-title .arco-icon, .arco-menu .arco-menu-pop-header .arco-icon, .arco-menu .arco-menu-inline-header .arco-icon, .arco-menu .arco-menu-item .arco-menu-icon, .arco-menu .arco-menu-group-title .arco-menu-icon, .arco-menu .arco-menu-pop-header .arco-menu-icon, .arco-menu .arco-menu-inline-header .arco-menu-icon { margin-right: 16px; } .arco-menu .arco-menu-item .arco-menu-icon .arco-icon, .arco-menu .arco-menu-group-title .arco-menu-icon .arco-icon, .arco-menu .arco-menu-pop-header .arco-menu-icon .arco-icon, .arco-menu .arco-menu-inline-header .arco-menu-icon .arco-icon { margin-right: 0; } .arco-menu-light { background-color: var(--color-menu-light-bg); } .arco-menu-light .arco-menu-item, .arco-menu-light .arco-menu-group-title, .arco-menu-light .arco-menu-pop-header, .arco-menu-light .arco-menu-inline-header { color: var(--color-text-2); background-color: var(--color-menu-light-bg); } .arco-menu-light .arco-menu-item .arco-icon, .arco-menu-light .arco-menu-group-title .arco-icon, .arco-menu-light .arco-menu-pop-header .arco-icon, .arco-menu-light .arco-menu-inline-header .arco-icon, .arco-menu-light .arco-menu-item .arco-menu-icon, .arco-menu-light .arco-menu-group-title .arco-menu-icon, .arco-menu-light .arco-menu-pop-header .arco-menu-icon, .arco-menu-light .arco-menu-inline-header .arco-menu-icon { color: var(--color-text-3); } .arco-menu-light .arco-menu-item:hover, .arco-menu-light .arco-menu-group-title:hover, .arco-menu-light .arco-menu-pop-header:hover, .arco-menu-light .arco-menu-inline-header:hover { color: var(--color-text-2); background-color: var(--color-fill-2); } .arco-menu-light .arco-menu-item:hover .arco-icon, .arco-menu-light .arco-menu-group-title:hover .arco-icon, .arco-menu-light .arco-menu-pop-header:hover .arco-icon, .arco-menu-light .arco-menu-inline-header:hover .arco-icon, .arco-menu-light .arco-menu-item:hover .arco-menu-icon, .arco-menu-light .arco-menu-group-title:hover .arco-menu-icon, .arco-menu-light .arco-menu-pop-header:hover .arco-menu-icon, .arco-menu-light .arco-menu-inline-header:hover .arco-menu-icon { color: var(--color-text-3); } .arco-menu-light .arco-menu-item.arco-menu-selected, .arco-menu-light .arco-menu-group-title.arco-menu-selected, .arco-menu-light .arco-menu-pop-header.arco-menu-selected, .arco-menu-light .arco-menu-inline-header.arco-menu-selected { color: rgb(var(--primary-6)); } .arco-menu-light .arco-menu-item.arco-menu-selected .arco-icon, .arco-menu-light .arco-menu-group-title.arco-menu-selected .arco-icon, .arco-menu-light .arco-menu-pop-header.arco-menu-selected .arco-icon, .arco-menu-light .arco-menu-inline-header.arco-menu-selected .arco-icon, .arco-menu-light .arco-menu-item.arco-menu-selected .arco-menu-icon, .arco-menu-light .arco-menu-group-title.arco-menu-selected .arco-menu-icon, .arco-menu-light .arco-menu-pop-header.arco-menu-selected .arco-menu-icon, .arco-menu-light .arco-menu-inline-header.arco-menu-selected .arco-menu-icon { color: rgb(var(--primary-6)); } .arco-menu-light .arco-menu-item.arco-menu-disabled, .arco-menu-light .arco-menu-group-title.arco-menu-disabled, .arco-menu-light .arco-menu-pop-header.arco-menu-disabled, .arco-menu-light .arco-menu-inline-header.arco-menu-disabled { color: var(--color-text-4); background-color: var(--color-menu-light-bg); } .arco-menu-light .arco-menu-item.arco-menu-disabled .arco-icon, .arco-menu-light .arco-menu-group-title.arco-menu-disabled .arco-icon, .arco-menu-light .arco-menu-pop-header.arco-menu-disabled .arco-icon, .arco-menu-light .arco-menu-inline-header.arco-menu-disabled .arco-icon, .arco-menu-light .arco-menu-item.arco-menu-disabled .arco-menu-icon, .arco-menu-light .arco-menu-group-title.arco-menu-disabled .arco-menu-icon, .arco-menu-light .arco-menu-pop-header.arco-menu-disabled .arco-menu-icon, .arco-menu-light .arco-menu-inline-header.arco-menu-disabled .arco-menu-icon { color: var(--color-text-4); } .arco-menu-light .arco-menu-item.arco-menu-selected { background-color: var(--color-fill-2); } .arco-menu-light .arco-menu-inline-header.arco-menu-selected { color: rgb(var(--primary-6)); } .arco-menu-light .arco-menu-inline-header.arco-menu-selected .arco-icon, .arco-menu-light .arco-menu-inline-header.arco-menu-selected .arco-menu-icon { color: rgb(var(--primary-6)); } .arco-menu-light .arco-menu-inline-header.arco-menu-selected:hover { background-color: var(--color-fill-2); } .arco-menu-light.arco-menu-horizontal .arco-menu-item.arco-menu-selected, .arco-menu-light.arco-menu-horizontal .arco-menu-group-title.arco-menu-selected, .arco-menu-light.arco-menu-horizontal .arco-menu-pop-header.arco-menu-selected, .arco-menu-light.arco-menu-horizontal .arco-menu-inline-header.arco-menu-selected { background: none; transition: color 0.2s cubic-bezier(0, 0, 1, 1); } .arco-menu-light.arco-menu-horizontal .arco-menu-item.arco-menu-selected:hover, .arco-menu-light.arco-menu-horizontal .arco-menu-group-title.arco-menu-selected:hover, .arco-menu-light.arco-menu-horizontal .arco-menu-pop-header.arco-menu-selected:hover, .arco-menu-light.arco-menu-horizontal .arco-menu-inline-header.arco-menu-selected:hover { background-color: var(--color-fill-2); } .arco-menu-light .arco-menu-group-title { color: var(--color-text-3); pointer-events: none; } .arco-menu-light .arco-menu-collapse-button { color: var(--color-text-3); background-color: var(--color-fill-1); } .arco-menu-light .arco-menu-collapse-button:hover { background-color: var(--color-fill-3); } .arco-menu-dark { background-color: var(--color-menu-dark-bg); } .arco-menu-dark .arco-menu-item, .arco-menu-dark .arco-menu-group-title, .arco-menu-dark .arco-menu-pop-header, .arco-menu-dark .arco-menu-inline-header { color: var(--color-white); background-color: var(--color-menu-dark-bg); } .arco-menu-dark .arco-menu-item .arco-icon, .arco-menu-dark .arco-menu-group-title .arco-icon, .arco-menu-dark .arco-menu-pop-header .arco-icon, .arco-menu-dark .arco-menu-inline-header .arco-icon, .arco-menu-dark .arco-menu-item .arco-menu-icon, .arco-menu-dark .arco-menu-group-title .arco-menu-icon, .arco-menu-dark .arco-menu-pop-header .arco-menu-icon, .arco-menu-dark .arco-menu-inline-header .arco-menu-icon { color: var(--color-text-3); } .arco-menu-dark .arco-menu-item:hover, .arco-menu-dark .arco-menu-group-title:hover, .arco-menu-dark .arco-menu-pop-header:hover, .arco-menu-dark .arco-menu-inline-header:hover { color: var(--color-white); background-color: var(--color-menu-dark-hover); } .arco-menu-dark .arco-menu-item:hover .arco-icon, .arco-menu-dark .arco-menu-group-title:hover .arco-icon, .arco-menu-dark .arco-menu-pop-header:hover .arco-icon, .arco-menu-dark .arco-menu-inline-header:hover .arco-icon, .arco-menu-dark .arco-menu-item:hover .arco-menu-icon, .arco-menu-dark .arco-menu-group-title:hover .arco-menu-icon, .arco-menu-dark .arco-menu-pop-header:hover .arco-menu-icon, .arco-menu-dark .arco-menu-inline-header:hover .arco-menu-icon { color: var(--color-text-3); } .arco-menu-dark .arco-menu-item.arco-menu-selected, .arco-menu-dark .arco-menu-group-title.arco-menu-selected, .arco-menu-dark .arco-menu-pop-header.arco-menu-selected, .arco-menu-dark .arco-menu-inline-header.arco-menu-selected { color: rgb(var(--link-6)); } .arco-menu-dark .arco-menu-item.arco-menu-selected .arco-icon, .arco-menu-dark .arco-menu-group-title.arco-menu-selected .arco-icon, .arco-menu-dark .arco-menu-pop-header.arco-menu-selected .arco-icon, .arco-menu-dark .arco-menu-inline-header.arco-menu-selected .arco-icon, .arco-menu-dark .arco-menu-item.arco-menu-selected .arco-menu-icon, .arco-menu-dark .arco-menu-group-title.arco-menu-selected .arco-menu-icon, .arco-menu-dark .arco-menu-pop-header.arco-menu-selected .arco-menu-icon, .arco-menu-dark .arco-menu-inline-header.arco-menu-selected .arco-menu-icon { color: rgb(var(--link-6)); } .arco-menu-dark .arco-menu-item.arco-menu-disabled, .arco-menu-dark .arco-menu-group-title.arco-menu-disabled, .arco-menu-dark .arco-menu-pop-header.arco-menu-disabled, .arco-menu-dark .arco-menu-inline-header.arco-menu-disabled { color: var(--color-text-4); background-color: var(--color-menu-dark-bg); } .arco-menu-dark .arco-menu-item.arco-menu-disabled .arco-icon, .arco-menu-dark .arco-menu-group-title.arco-menu-disabled .arco-icon, .arco-menu-dark .arco-menu-pop-header.arco-menu-disabled .arco-icon, .arco-menu-dark .arco-menu-inline-header.arco-menu-disabled .arco-icon, .arco-menu-dark .arco-menu-item.arco-menu-disabled .arco-menu-icon, .arco-menu-dark .arco-menu-group-title.arco-menu-disabled .arco-menu-icon, .arco-menu-dark .arco-menu-pop-header.arco-menu-disabled .arco-menu-icon, .arco-menu-dark .arco-menu-inline-header.arco-menu-disabled .arco-menu-icon { color: var(--color-text-4); } .arco-menu-dark .arco-menu-item.arco-menu-selected { background-color: var(--color-menu-dark-hover); } .arco-menu-dark .arco-menu-inline-header.arco-menu-selected { color: rgb(var(--primary-6)); } .arco-menu-dark .arco-menu-inline-header.arco-menu-selected .arco-icon, .arco-menu-dark .arco-menu-inline-header.arco-menu-selected .arco-menu-icon { color: rgb(var(--primary-6)); } .arco-menu-dark .arco-menu-inline-header.arco-menu-selected:hover { background-color: var(--color-menu-dark-hover); } .arco-menu-dark.arco-menu-horizontal .arco-menu-item.arco-menu-selected, .arco-menu-dark.arco-menu-horizontal .arco-menu-group-title.arco-menu-selected, .arco-menu-dark.arco-menu-horizontal .arco-menu-pop-header.arco-menu-selected, .arco-menu-dark.arco-menu-horizontal .arco-menu-inline-header.arco-menu-selected { background: none; transition: color 0.2s cubic-bezier(0, 0, 1, 1); } .arco-menu-dark.arco-menu-horizontal .arco-menu-item.arco-menu-selected:hover, .arco-menu-dark.arco-menu-horizontal .arco-menu-group-title.arco-menu-selected:hover, .arco-menu-dark.arco-menu-horizontal .arco-menu-pop-header.arco-menu-selected:hover, .arco-menu-dark.arco-menu-horizontal .arco-menu-inline-header.arco-menu-selected:hover { background-color: var(--color-menu-dark-hover); } .arco-menu-dark .arco-menu-group-title { color: var(--color-text-3); pointer-events: none; } .arco-menu-dark .arco-menu-collapse-button { color: var(--color-white); background-color: rgb(var(--primary-6)); } .arco-menu-dark .arco-menu-collapse-button:hover { background-color: rgb(var(--primary-7)); } .arco-menu a, .arco-menu a:hover, .arco-menu a:focus, .arco-menu a:active { color: inherit; text-decoration: none; cursor: inherit; } .arco-menu-inner { box-sizing: border-box; width: 100%; height: 100%; overflow: auto; } .arco-menu-icon-suffix.is-open { transform: rotate(180deg); } .arco-menu-vertical .arco-menu-item, .arco-menu-vertical .arco-menu-group-title, .arco-menu-vertical .arco-menu-pop-header, .arco-menu-vertical .arco-menu-inline-header { padding: 0 12px; line-height: 40px; } .arco-menu-vertical .arco-menu-item .arco-menu-icon-suffix .arco-icon, .arco-menu-vertical .arco-menu-group-title .arco-menu-icon-suffix .arco-icon, .arco-menu-vertical .arco-menu-pop-header .arco-menu-icon-suffix .arco-icon, .arco-menu-vertical .arco-menu-inline-header .arco-menu-icon-suffix .arco-icon { margin-right: 0; } .arco-menu-vertical .arco-menu-item, .arco-menu-vertical .arco-menu-group-title, .arco-menu-vertical .arco-menu-pop-header, .arco-menu-vertical .arco-menu-inline-header { margin-bottom: 4px; } .arco-menu-vertical .arco-menu-item:not(.arco-menu-has-icon), .arco-menu-vertical .arco-menu-group-title:not(.arco-menu-has-icon), .arco-menu-vertical .arco-menu-pop-header:not(.arco-menu-has-icon), .arco-menu-vertical .arco-menu-inline-header:not(.arco-menu-has-icon) { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .arco-menu-vertical .arco-menu-item.arco-menu-has-icon, .arco-menu-vertical .arco-menu-group-title.arco-menu-has-icon, .arco-menu-vertical .arco-menu-pop-header.arco-menu-has-icon, .arco-menu-vertical .arco-menu-inline-header.arco-menu-has-icon { display: flex; align-items: center; } .arco-menu-vertical .arco-menu-item.arco-menu-has-icon > .arco-menu-indent-list, .arco-menu-vertical .arco-menu-group-title.arco-menu-has-icon > .arco-menu-indent-list, .arco-menu-vertical .arco-menu-pop-header.arco-menu-has-icon > .arco-menu-indent-list, .arco-menu-vertical .arco-menu-inline-header.arco-menu-has-icon > .arco-menu-indent-list, .arco-menu-vertical .arco-menu-item.arco-menu-has-icon > .arco-menu-icon, .arco-menu-vertical .arco-menu-group-title.arco-menu-has-icon > .arco-menu-icon, .arco-menu-vertical .arco-menu-pop-header.arco-menu-has-icon > .arco-menu-icon, .arco-menu-vertical .arco-menu-inline-header.arco-menu-has-icon > .arco-menu-icon { flex: none; } .arco-menu-vertical .arco-menu-item.arco-menu-has-icon .arco-menu-icon, .arco-menu-vertical .arco-menu-group-title.arco-menu-has-icon .arco-menu-icon, .arco-menu-vertical .arco-menu-pop-header.arco-menu-has-icon .arco-menu-icon, .arco-menu-vertical .arco-menu-inline-header.arco-menu-has-icon .arco-menu-icon { line-height: 1; } .arco-menu-vertical .arco-menu-item.arco-menu-has-icon .arco-menu-title, .arco-menu-vertical .arco-menu-group-title.arco-menu-has-icon .arco-menu-title, .arco-menu-vertical .arco-menu-pop-header.arco-menu-has-icon .arco-menu-title, .arco-menu-vertical .arco-menu-inline-header.arco-menu-has-icon .arco-menu-title { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .arco-menu-vertical .arco-menu-item .arco-menu-item-inner, .arco-menu-vertical .arco-menu-group-title .arco-menu-item-inner, .arco-menu-vertical .arco-menu-pop-header .arco-menu-item-inner, .arco-menu-vertical .arco-menu-inline-header .arco-menu-item-inner { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; width: 100%; } .arco-menu-vertical .arco-menu-item .arco-menu-icon-suffix, .arco-menu-vertical .arco-menu-group-title .arco-menu-icon-suffix, .arco-menu-vertical .arco-menu-pop-header .arco-menu-icon-suffix, .arco-menu-vertical .arco-menu-inline-header .arco-menu-icon-suffix { position: absolute; right: 12px; } .arco-menu-vertical .arco-menu-inner { padding: 4px 8px; } .arco-menu-vertical .arco-menu-item.arco-menu-item-indented { display: flex; } .arco-menu-vertical .arco-menu-pop-header, .arco-menu-vertical .arco-menu-inline-header { padding-right: 28px; } .arco-menu-horizontal { width: 100%; height: auto; } .arco-menu-horizontal .arco-menu-item, .arco-menu-horizontal .arco-menu-group-title, .arco-menu-horizontal .arco-menu-pop-header, .arco-menu-horizontal .arco-menu-inline-header { padding: 0 12px; line-height: 30px; } .arco-menu-horizontal .arco-menu-item .arco-menu-icon-suffix .arco-icon, .arco-menu-horizontal .arco-menu-group-title .arco-menu-icon-suffix .arco-icon, .arco-menu-horizontal .arco-menu-pop-header .arco-menu-icon-suffix .arco-icon, .arco-menu-horizontal .arco-menu-inline-header .arco-menu-icon-suffix .arco-icon { margin-right: 0; } .arco-menu-horizontal .arco-menu-item .arco-icon, .arco-menu-horizontal .arco-menu-group-title .arco-icon, .arco-menu-horizontal .arco-menu-pop-header .arco-icon, .arco-menu-horizontal .arco-menu-inline-header .arco-icon, .arco-menu-horizontal .arco-menu-item .arco-menu-icon, .arco-menu-horizontal .arco-menu-group-title .arco-menu-icon, .arco-menu-horizontal .arco-menu-pop-header .arco-menu-icon, .arco-menu-horizontal .arco-menu-inline-header .arco-menu-icon { margin-right: 16px; } .arco-menu-horizontal .arco-menu-item .arco-menu-icon-suffix, .arco-menu-horizontal .arco-menu-group-title .arco-menu-icon-suffix, .arco-menu-horizontal .arco-menu-pop-header .arco-menu-icon-suffix, .arco-menu-horizontal .arco-menu-inline-header .arco-menu-icon-suffix { margin-left: 6px; } .arco-menu-horizontal .arco-menu-inner { display: flex; align-items: center; padding: 14px 20px; } .arco-menu-horizontal .arco-menu-item, .arco-menu-horizontal .arco-menu-pop { display: inline-block; flex-shrink: 0; vertical-align: middle; } .arco-menu-horizontal .arco-menu-item:not(:first-child), .arco-menu-horizontal .arco-menu-pop:not(:first-child) { margin-left: 12px; } .arco-menu-horizontal .arco-menu-pop::after { position: absolute; bottom: -14px; left: 0; width: 100%; height: 14px; content: ' '; } .arco-menu-overflow-wrap { width: 100%; } .arco-menu-overflow-sub-menu-mirror, .arco-menu-overflow-hidden-menu-item { position: absolute !important; white-space: nowrap; visibility: hidden; pointer-events: none; } .arco-menu-selected-label { position: absolute; right: 12px; bottom: -14px; left: 12px; height: 3px; background-color: rgb(var(--primary-6)); animation: arco-menu-selected-item-label-enter 0.2s cubic-bezier(0, 0, 1, 1); } .arco-menu-pop-button { width: auto; background: none; box-shadow: none; } .arco-menu-pop-button.arco-menu-collapsed { width: auto; } .arco-menu-pop-button .arco-menu-item, .arco-menu-pop-button .arco-menu-group-title, .arco-menu-pop-button .arco-menu-pop-header, .arco-menu-pop-button .arco-menu-inline-header { width: 40px; height: 40px; margin-bottom: 16px; line-height: 40px; border: 1px solid transparent; border-radius: 50%; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); } .arco-menu-collapsed { width: 48px; } .arco-menu-collapsed .arco-menu-inner { padding: 4px 4px; } .arco-menu-collapsed .arco-menu-icon-suffix { display: none; } .arco-menu-collapsed .arco-menu-has-icon > *:not(.arco-menu-icon) { opacity: 0; } .arco-menu-collapsed .arco-menu-item .arco-icon, .arco-menu-collapsed .arco-menu-group-title .arco-icon, .arco-menu-collapsed .arco-menu-pop-header .arco-icon, .arco-menu-collapsed .arco-menu-inline-header .arco-icon { margin-right: 100%; } .arco-menu-collapse-button { position: absolute; right: 12px; bottom: 12px; display: flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: var(--border-radius-small); cursor: pointer; } .arco-menu-inline-content { height: auto; overflow: hidden; transition: height 0.2s cubic-bezier(0.34, 0.69, 0.1, 1); } .arco-menu-inline-content-hide { height: 0; } .arco-menu-item-tooltip a { color: inherit; cursor: text; } .arco-menu-item-tooltip a:hover, .arco-menu-item-tooltip a:focus, .arco-menu-item-tooltip a:active { color: inherit; } .arco-menu-pop-trigger.arco-trigger-position-bl { transform: translateY(14px); } .arco-menu-pop-trigger.arco-trigger-position-bl .arco-trigger-arrow { z-index: 0; border-top: 1px solid var(--color-neutral-3); border-left: 1px solid var(--color-neutral-3); } .arco-menu-pop-trigger.arco-trigger-position-rt { transform: translateX(8px); } .arco-menu-pop-trigger.arco-trigger-position-rt .arco-trigger-arrow { z-index: 0; border-bottom: 1px solid var(--color-neutral-3); border-left: 1px solid var(--color-neutral-3); } .arco-menu-pop-trigger.arco-menu-pop-trigger-dark .arco-trigger-arrow { background-color: var(--color-menu-dark-bg); border-color: var(--color-menu-dark-bg); } .arco-trigger-menu { position: relative; box-sizing: border-box; max-height: 200px; padding: 4px 0; overflow: auto; background-color: var(--color-bg-popup); border: 1px solid var(--color-fill-3); border-radius: var(--border-radius-medium); box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); } .arco-trigger-menu-hidden { display: none; } .arco-trigger-menu-item, .arco-trigger-menu-pop-header { position: relative; z-index: 1; box-sizing: border-box; width: 100%; height: 36px; padding: 0 12px; color: var(--color-text-1); font-size: 14px; line-height: 36px; text-align: left; background-color: transparent; cursor: pointer; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .arco-trigger-menu-item.arco-trigger-menu-selected, .arco-trigger-menu-pop-header.arco-trigger-menu-selected { color: var(--color-text-1); font-weight: 500; background-color: transparent; transition: all 0.1s cubic-bezier(0, 0, 1, 1); } .arco-trigger-menu-item:hover, .arco-trigger-menu-pop-header:hover { color: var(--color-text-1); background-color: var(--color-fill-2); } .arco-trigger-menu-item.arco-trigger-menu-disabled, .arco-trigger-menu-pop-header.arco-trigger-menu-disabled { color: var(--color-text-4); background-color: transparent; cursor: not-allowed; } .arco-trigger-menu .arco-trigger-menu-has-icon { display: flex; align-items: center; } .arco-trigger-menu .arco-trigger-menu-has-icon .arco-trigger-menu-icon { margin-right: 8px; line-height: 1; } .arco-trigger-menu .arco-trigger-menu-has-icon > * { flex: none; } .arco-trigger-menu .arco-trigger-menu-has-icon .arco-trigger-menu-title { flex: auto; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .arco-trigger-menu-pop-header { display: flex; align-items: center; justify-content: space-between; } .arco-trigger-menu-pop-header .arco-trigger-menu-icon-suffix { margin-left: 12px; } .arco-trigger-menu-group:first-child .arco-trigger-menu-group-title { padding-top: 4px; } .arco-trigger-menu-group-title { box-sizing: border-box; width: 100%; padding: 8px 12px 0 12px; color: var(--color-text-3); font-size: 12px; line-height: 20px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .arco-trigger-menu-pop-trigger .arco-trigger-arrow { display: none; } .arco-trigger-menu-dark { background-color: var(--color-menu-dark-bg); border-color: var(--color-menu-dark-bg); } .arco-trigger-menu-dark .arco-trigger-menu-item, .arco-trigger-menu-dark .arco-trigger-menu-pop-header { color: var(--color-text-4); background-color: transparent; } .arco-trigger-menu-dark .arco-trigger-menu-item.arco-trigger-menu-selected, .arco-trigger-menu-dark .arco-trigger-menu-pop-header.arco-trigger-menu-selected { color: var(--color-white); background-color: transparent; } .arco-trigger-menu-dark .arco-trigger-menu-item.arco-trigger-menu-selected:hover, .arco-trigger-menu-dark .arco-trigger-menu-pop-header.arco-trigger-menu-selected:hover { color: var(--color-white); } .arco-trigger-menu-dark .arco-trigger-menu-item:hover, .arco-trigger-menu-dark .arco-trigger-menu-pop-header:hover { color: var(--color-text-4); background-color: var(--color-menu-dark-hover); } .arco-trigger-menu-dark .arco-trigger-menu-item.arco-trigger-menu-disabled, .arco-trigger-menu-dark .arco-trigger-menu-pop-header.arco-trigger-menu-disabled { color: var(--color-text-2); background-color: transparent; } .arco-trigger-menu-dark .arco-trigger-menu-group-title { color: var(--color-text-3); } .arco-message-list { position: fixed; z-index: 1003; display: flex; flex-direction: column; align-items: center; box-sizing: border-box; width: 100%; margin: 0; padding: 0 10px; text-align: center; pointer-events: none; left: 0; } .arco-message-list-top { top: 40px; } .arco-message-list-bottom { bottom: 40px; } .arco-message { position: relative; display: inline-flex; align-items: center; margin-bottom: 16px; padding: 10px 16px 10px 16px; overflow: hidden; line-height: 1; text-align: center; list-style: none; background-color: var(--color-bg-popup); border: 1px solid var(--color-neutral-3); border-radius: 8px; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); transition: all 0.1s cubic-bezier(0, 0, 1, 1); pointer-events: auto; } .arco-message-icon { display: inline-block; margin-right: 8px; color: var(--color-text-1); font-size: 20px; vertical-align: middle; animation: arco-msg-fade 0.1s cubic-bezier(0, 0, 1, 1), arco-msg-fade 0.4s cubic-bezier(0.3, 1.3, 0.3, 1); } .arco-message-content { font-size: 14px; color: var(--color-text-1); vertical-align: middle; } .arco-message-info { background-color: var(--color-bg-popup); border-color: var(--color-neutral-3); } .arco-message-info .arco-message-icon { color: rgb(var(--primary-6)); } .arco-message-info .arco-message-content { color: var(--color-text-1); } .arco-message-success { background-color: var(--color-bg-popup); border-color: var(--color-neutral-3); } .arco-message-success .arco-message-icon { color: rgb(var(--success-6)); } .arco-message-success .arco-message-content { color: var(--color-text-1); } .arco-message-warning { background-color: var(--color-bg-popup); border-color: var(--color-neutral-3); } .arco-message-warning .arco-message-icon { color: rgb(var(--warning-6)); } .arco-message-warning .arco-message-content { color: var(--color-text-1); } .arco-message-error { background-color: var(--color-bg-popup); border-color: var(--color-neutral-3); } .arco-message-error .arco-message-icon { color: rgb(var(--danger-6)); } .arco-message-error .arco-message-content { color: var(--color-text-1); } .arco-message-loading { background-color: var(--color-bg-popup); border-color: var(--color-neutral-3); } .arco-message-loading .arco-message-icon { color: rgb(var(--primary-6)); } .arco-message-loading .arco-message-content { color: var(--color-text-1); } .arco-message-close-btn { margin-left: 8px; color: var(--color-text-1); font-size: 12px; } .arco-message .arco-icon-hover.arco-message-icon-hover::before { width: 20px; height: 20px; } .fade-message-enter-from, .fade-message-appear-from { opacity: 0; } .fade-message-enter-to, .fade-message-appear-to { opacity: 1; } .fade-message-enter-active, .fade-message-appear-active { transition: opacity 0.1s cubic-bezier(0, 0, 1, 1); } .fade-message-leave-from { opacity: 1; } .fade-message-leave-to { opacity: 0; } .fade-message-leave-active { position: absolute; } .flip-list-move { transition: transform 0.8s ease; } @keyframes arco-msg-fade { from { opacity: 0; } to { opacity: 1; } } @keyframes arco-msg-scale { from { transform: scale(0); } to { transform: scale(1); } } .arco-modal-container { position: fixed; top: 0; right: 0; bottom: 0; left: 0; } .arco-modal-mask { position: absolute; top: 0; right: 0; bottom: 0; left: 0; background-color: var(--color-mask-bg); } .arco-modal-wrapper { position: absolute; top: 0; right: 0; bottom: 0; left: 0; overflow: auto; text-align: center; } .arco-modal-wrapper.arco-modal-wrapper-align-center { white-space: nowrap; } .arco-modal-wrapper.arco-modal-wrapper-align-center::after { display: inline-block; width: 0; height: 100%; vertical-align: middle; content: ''; } .arco-modal-wrapper.arco-modal-wrapper-align-center .arco-modal { top: 0; vertical-align: middle; } .arco-modal-wrapper.arco-modal-wrapper-moved { text-align: left; } .arco-modal-wrapper.arco-modal-wrapper-moved .arco-modal { top: 0; vertical-align: top; } .arco-modal { position: relative; top: 100px; display: inline-block; width: 520px; margin: 0 auto; line-height: 1.5715; white-space: initial; text-align: left; background-color: var(--color-bg-3); border-radius: 8px; } .arco-modal-draggable .arco-modal-header { cursor: move; } .arco-modal-header { display: flex; flex-shrink: 0; align-items: center; box-sizing: border-box; width: 100%; height: 48px; padding: 0 20px; border-bottom: 1px solid var(--color-border-3); } .arco-modal-header .arco-modal-title { display: flex; flex: 1; align-items: center; justify-content: center; } .arco-modal-header .arco-modal-title-align-start { justify-content: flex-start; } .arco-modal-header .arco-modal-title-align-center { justify-content: center; } .arco-modal-body { position: relative; padding: 18px 20px; overflow: auto; color: var(--color-text-1); font-size: 14px; } .arco-modal-footer { flex-shrink: 0; box-sizing: border-box; width: 100%; padding: 12px 20px; text-align: right; border-top: 1px solid var(--color-border-3); } .arco-modal-footer > .arco-btn:not(:nth-child(1)) { margin-left: 10px; } .arco-modal-close-btn { margin-left: -12px; color: var(--color-text-1); font-size: 12px; cursor: pointer; } .arco-modal-title { color: var(--color-text-1); font-weight: 500; font-size: 16px; } .arco-modal-title-icon { margin-right: 10px; font-size: 18px; vertical-align: -0.15em; } .arco-modal-title-icon .arco-icon-info-circle-fill { color: rgb(var(--primary-6)); } .arco-modal-title-icon .arco-icon-check-circle-fill { color: rgb(var(--success-6)); } .arco-modal-title-icon .arco-icon-exclamation-circle-fill { color: rgb(var(--warning-6)); } .arco-modal-title-icon .arco-icon-close-circle-fill { color: rgb(var(--danger-6)); } .arco-modal-simple { width: 400px; padding: 24px 32px 24px; } .arco-modal-simple .arco-modal-header, .arco-modal-simple .arco-modal-footer { height: unset; padding: 0; border: none; } .arco-modal-simple .arco-modal-header { margin-bottom: 24px; } .arco-modal-simple .arco-modal-title { justify-content: center; } .arco-modal-simple .arco-modal-title-align-start { justify-content: flex-start; } .arco-modal-simple .arco-modal-title-align-center { justify-content: center; } .arco-modal-simple .arco-modal-footer { margin-top: 20px; text-align: center; } .arco-modal-simple .arco-modal-body { padding: 0; } .arco-modal-fullscreen { top: 0; display: inline-flex; flex-direction: column; box-sizing: border-box; width: 100%; height: 100%; } .arco-modal-fullscreen .arco-modal-footer { margin-top: auto; } .zoom-modal-enter-from, .zoom-modal-appear-from { transform: scale(0.5, 0.5); opacity: 0; } .zoom-modal-enter-to, .zoom-modal-appear-to { transform: scale(1, 1); opacity: 1; } .zoom-modal-enter-active, .zoom-modal-appear-active { transition: opacity 0.4s cubic-bezier(0.3, 1.3, 0.3, 1), transform 0.4s cubic-bezier(0.3, 1.3, 0.3, 1); } .zoom-modal-leave-from { transform: scale(1, 1); opacity: 1; } .zoom-modal-leave-to { transform: scale(0.5, 0.5); opacity: 0; } .zoom-modal-leave-active { transition: opacity 0.4s cubic-bezier(0.3, 1.3, 0.3, 1), transform 0.4s cubic-bezier(0.3, 1.3, 0.3, 1); } .fade-modal-enter-from, .fade-modal-appear-from { opacity: 0; } .fade-modal-enter-to, .fade-modal-appear-to { opacity: 1; } .fade-modal-enter-active, .fade-modal-appear-active { transition: opacity 0.4s cubic-bezier(0.3, 1.3, 0.3, 1); } .fade-modal-leave-from { opacity: 1; } .fade-modal-leave-to { opacity: 0; } .fade-modal-leave-active { transition: opacity 0.4s cubic-bezier(0.3, 1.3, 0.3, 1); } .arco-notification-list { position: fixed; z-index: 1003; margin: 0; padding-left: 0; } .arco-notification-list-top-left { top: 20px; left: 20px; } .arco-notification-list-top-right { top: 20px; right: 20px; } .arco-notification-list-top-right .arco-notification { margin-left: auto; } .arco-notification-list-bottom-left { bottom: 20px; left: 20px; } .arco-notification-list-bottom-right { right: 20px; bottom: 20px; } .arco-notification-list-bottom-right .arco-notification { margin-left: auto; } .arco-notification { position: relative; display: flex; box-sizing: border-box; width: 340px; padding: 20px 20px 20px 20px; overflow: hidden; background-color: var(--color-bg-popup); border: 1px solid var(--color-neutral-3); border-radius: var(--border-radius-medium); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); opacity: 1; transition: opacity 0.2s cubic-bezier(0, 0, 1, 1); } .arco-notification:not(:last-child) { margin-bottom: 20px; } .arco-notification-icon { display: flex; align-items: center; font-size: 24px; } .arco-notification-info { background-color: var(--color-bg-popup); border-color: var(--color-neutral-3); } .arco-notification-info .arco-notification-icon { color: rgb(var(--primary-6)); } .arco-notification-success { background-color: var(--color-bg-popup); border-color: var(--color-neutral-3); } .arco-notification-success .arco-notification-icon { color: rgb(var(--success-6)); } .arco-notification-warning { background-color: var(--color-bg-popup); border-color: var(--color-neutral-3); } .arco-notification-warning .arco-notification-icon { color: rgb(var(--warning-6)); } .arco-notification-error { background-color: var(--color-bg-popup); border-color: var(--color-neutral-3); } .arco-notification-error .arco-notification-icon { color: rgb(var(--danger-6)); } .arco-notification-left { padding-right: 16px; } .arco-notification-right { flex: 1; word-break: break-word; } .arco-notification-title { color: var(--color-text-1); font-weight: 500; font-size: 16px; } .arco-notification-title + .arco-notification-content { margin-top: 4px; } .arco-notification-content { color: var(--color-text-1); font-size: 14px; } .arco-notification-info .arco-notification-title { color: var(--color-text-1); } .arco-notification-info .arco-notification-content { color: var(--color-text-1); } .arco-notification-success .arco-notification-title { color: var(--color-text-1); } .arco-notification-success .arco-notification-content { color: var(--color-text-1); } .arco-notification-warning .arco-notification-title { color: var(--color-text-1); } .arco-notification-warning .arco-notification-content { color: var(--color-text-1); } .arco-notification-error .arco-notification-title { color: var(--color-text-1); } .arco-notification-error .arco-notification-content { color: var(--color-text-1); } .arco-notification-footer { margin-top: 16px; text-align: right; } .arco-notification-close-btn { position: absolute; top: 12px; right: 12px; color: var(--color-text-1); font-size: 12px; cursor: pointer; } .arco-notification-close-btn > svg { position: relative; } .arco-notification .arco-icon-hover.arco-notification-icon-hover::before { width: 20px; height: 20px; } .slide-left-notification-enter-from, .slide-left-notification-appear-from { transform: translateX(-100%); } .slide-left-notification-enter-to, .slide-left-notification-appear-to { transform: translateX(0); } .slide-left-notification-enter-active, .slide-left-notification-appear-active { transition: transform 0.4s cubic-bezier(0.3, 1.3, 0.3, 1); } .slide-left-notification-leave-from { opacity: 1; } .slide-left-notification-leave-to { height: 0; margin-top: 0; margin-bottom: 0; padding-top: 0; padding-bottom: 0; opacity: 0; } .slide-left-notification-leave-active { transition: all 0.3s cubic-bezier(0.34, 0.69, 0.1, 1); } .slide-right-notification-enter-from, .slide-right-notification-appear-from { transform: translateX(100%); } .slide-right-notification-enter-to, .slide-right-notification-appear-to { transform: translateX(0); } .slide-right-notification-enter-active, .slide-right-notification-appear-active { transition: transform 0.4s cubic-bezier(0.3, 1.3, 0.3, 1); } .slide-right-notification-leave-from { opacity: 1; } .slide-right-notification-leave-to { height: 0; margin-top: 0; margin-bottom: 0; padding-top: 0; padding-bottom: 0; opacity: 0; } .slide-right-notification-leave-active { transition: all 0.3s cubic-bezier(0.34, 0.69, 0.1, 1); } .arco-overflow-list { display: flex; align-items: center; justify-content: flex-start; } .arco-overflow-list > *:not(:last-child) { flex-shrink: 0; } .arco-overflow-list-spacer { flex: 1; min-width: 0; height: 1px; } .arco-page-header { padding: 16px 0; } .arco-page-header-breadcrumb + .arco-page-header-header { margin-top: 4px; } .arco-page-header-wrapper { padding-right: 20px; padding-left: 24px; } .arco-page-header-header { display: flex; align-items: center; justify-content: space-between; line-height: 28px; } .arco-page-header-header-left { display: flex; align-items: center; } .arco-page-header-main { display: flex; align-items: center; min-height: 30px; } .arco-page-header-main-with-back { margin-left: -8px; padding-left: 8px; } .arco-page-header-extra { overflow: hidden; white-space: nowrap; } .arco-page-header .arco-icon-hover.arco-page-header-icon-hover::before { width: 30px; height: 30px; } .arco-page-header .arco-icon-hover.arco-page-header-icon-hover:hover::before { background-color: var(--color-fill-2); } .arco-page-header-back-btn { margin-right: 12px; color: var(--color-text-2); font-size: 14px; } .arco-page-header-back-btn-icon { position: relative; } .arco-page-header-title { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; color: var(--color-text-1); font-weight: 600; font-size: 16px; } .arco-page-header-divider { width: 1px; height: 16px; margin-right: 12px; margin-left: 12px; background-color: var(--color-fill-3); } .arco-page-header-subtitle { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; color: var(--color-text-3); font-size: 14px; } .arco-page-header-content { padding: 20px 32px; border-top: 1px solid var(--color-neutral-3); } .arco-page-header-footer { padding: 16px 20px 0 24px; } .arco-page-header-with-breadcrumb { padding: 12px 0; } .arco-page-header-with-breadcrumb .arco-page-header-footer { padding-top: 12px; } .arco-page-header-with-content .arco-page-header-wrapper { padding-bottom: 12px; } .arco-page-header-with-footer { padding-bottom: 0; } .arco-page-header-wrapper .arco-page-header-header { flex-wrap: wrap; } .arco-page-header-wrapper .arco-page-header-header .arco-page-header-head-extra { margin-top: 4px; } .arco-pagination { display: flex; align-items: center; font-size: 14px; /*** 快速跳转 ***/ } .arco-pagination-list { display: inline-block; margin: 0; padding: 0; white-space: nowrap; list-style: none; } .arco-pagination-item { display: inline-block; box-sizing: border-box; padding: 0 8px; color: var(--color-text-2); text-align: center; vertical-align: middle; list-style: none; background-color: transparent; border: 0 solid transparent; border-radius: var(--border-radius-small); outline: 0; cursor: pointer; user-select: none; min-width: 32px; height: 32px; font-size: 14px; line-height: 32px; } .arco-pagination-item-previous, .arco-pagination-item-next { font-size: 12px; } .arco-pagination-item:hover { color: var(--color-text-2); background-color: var(--color-fill-1); border-color: transparent; } .arco-pagination-item-active, .arco-pagination-item-active:hover { color: rgb(var(--primary-6)); background-color: var(--color-primary-light-1); border-color: transparent; transition: color 0.2s cubic-bezier(0, 0, 1, 1), background-color 0.2s cubic-bezier(0, 0, 1, 1); } .arco-pagination-item-disabled, .arco-pagination-item-disabled:hover { color: var(--color-text-4); background-color: transparent; border-color: transparent; cursor: not-allowed; } .arco-pagination-item:not(:last-child) { margin-right: 8px; } .arco-pagination-item-previous, .arco-pagination-item-next { color: var(--color-text-2); font-size: 12px; background-color: transparent; } .arco-pagination-item-previous:not(.arco-pagination-item-disabled):hover, .arco-pagination-item-next:not(.arco-pagination-item-disabled):hover { color: rgb(var(--primary-6)); background-color: var(--color-fill-1); } .arco-pagination-item-previous::after, .arco-pagination-item-next::after { display: inline-block; font-size: 0; vertical-align: middle; content: '.'; } .arco-pagination .arco-pagination-item-previous.arco-pagination-item-disabled, .arco-pagination .arco-pagination-item-next.arco-pagination-item-disabled { color: var(--color-text-4); background-color: transparent; } .arco-pagination-item-jumper { font-size: 16px; } .arco-pagination-jumper { display: flex; align-items: center; margin-left: 8px; } .arco-pagination-jumper > span { font-size: 14px; } .arco-pagination-jumper-text-goto, .arco-pagination-jumper-prepend, .arco-pagination-jumper-append { color: var(--color-text-3); white-space: nowrap; } .arco-pagination-jumper-prepend { margin-right: 8px; } .arco-pagination-jumper-append { margin-left: 8px; } .arco-pagination-jumper .arco-pagination-jumper-input { width: 40px; padding-right: 2px; padding-left: 2px; } .arco-pagination-jumper .arco-pagination-jumper-input input { text-align: center; } .arco-pagination-options { position: relative; display: inline-block; flex: 0 0 auto; min-width: 0; margin-left: 8px; text-align: center; vertical-align: middle; } .arco-pagination-options .arco-select { width: auto; } .arco-pagination-options .arco-select-view-value { padding-right: 6px; overflow: inherit; } .arco-pagination-total { display: inline-block; height: 100%; margin-right: 8px; color: var(--color-text-1); font-size: 14px; line-height: 32px; white-space: nowrap; } .arco-pagination-jumper { flex: 0 0 auto; } .arco-pagination-jumper-separator { padding: 0 12px 0 12px; } .arco-pagination-jumper-total-page { margin-right: 8px; } .arco-pagination-simple { display: flex; align-items: center; } .arco-pagination-simple .arco-pagination-item { margin-right: 0; } .arco-pagination-simple .arco-pagination-jumper { margin: 0 4px; color: var(--color-text-1); } .arco-pagination-simple .arco-pagination-jumper .arco-pagination-jumper-input { width: 40px; margin-left: 0; } .arco-pagination-simple .arco-pagination-item-previous, .arco-pagination-simple .arco-pagination-item-next { color: var(--color-text-2); background-color: transparent; } .arco-pagination-simple .arco-pagination-item-previous:not(.arco-pagination-item-disabled):hover, .arco-pagination-simple .arco-pagination-item-next:not(.arco-pagination-item-disabled):hover { color: rgb(var(--primary-6)); background-color: var(--color-fill-1); } .arco-pagination-simple .arco-pagination-item-previous.arco-pagination-item-disabled, .arco-pagination-simple .arco-pagination-item-next.arco-pagination-item-disabled { color: var(--color-text-4); background-color: transparent; } .arco-pagination-disabled { cursor: not-allowed; } .arco-pagination-disabled .arco-pagination-item, .arco-pagination-disabled .arco-pagination-item:not(.arco-pagination-item-disabled):not(.arco-pagination-item-active):hover { color: var(--color-text-4); background-color: transparent; border-color: transparent; cursor: not-allowed; } .arco-pagination.arco-pagination-disabled .arco-pagination-item-active { color: var(--color-primary-light-3); background-color: var(--color-fill-1); border-color: transparent; } .arco-pagination-size-mini .arco-pagination-item { min-width: 24px; height: 24px; font-size: 12px; line-height: 24px; } .arco-pagination-size-mini .arco-pagination-item-previous, .arco-pagination-size-mini .arco-pagination-item-next { font-size: 12px; } .arco-pagination-size-mini .arco-pagination-total { font-size: 12px; line-height: 24px; } .arco-pagination-size-mini .arco-pagination-option { height: 24px; font-size: 12px; line-height: 0; } .arco-pagination-size-mini .arco-pagination-jumper > span { font-size: 12px; } .arco-pagination-size-small .arco-pagination-item { min-width: 28px; height: 28px; font-size: 14px; line-height: 28px; } .arco-pagination-size-small .arco-pagination-item-previous, .arco-pagination-size-small .arco-pagination-item-next { font-size: 12px; } .arco-pagination-size-small .arco-pagination-total { font-size: 14px; line-height: 28px; } .arco-pagination-size-small .arco-pagination-option { height: 28px; font-size: 14px; line-height: 0; } .arco-pagination-size-small .arco-pagination-jumper > span { font-size: 14px; } .arco-pagination-size-large .arco-pagination-item { min-width: 36px; height: 36px; font-size: 14px; line-height: 36px; } .arco-pagination-size-large .arco-pagination-item-previous, .arco-pagination-size-large .arco-pagination-item-next { font-size: 14px; } .arco-pagination-size-large .arco-pagination-total { font-size: 14px; line-height: 36px; } .arco-pagination-size-large .arco-pagination-option { height: 36px; font-size: 14px; line-height: 0; } .arco-pagination-size-large .arco-pagination-jumper > span { font-size: 14px; } .arco-popconfirm-popup-content { box-sizing: border-box; padding: 14px 16px; color: var(--color-text-2); font-size: 14px; line-height: 1.5715; background-color: var(--color-bg-popup); border: 1px solid var(--color-neutral-3); border-radius: var(--border-radius-medium); box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); } .arco-popconfirm-popup-content .arco-popconfirm-body { position: relative; display: flex; align-items: flex-start; margin-bottom: 16px; color: var(--color-text-1); font-size: 14px; } .arco-popconfirm-popup-content .arco-popconfirm-body .arco-popconfirm-icon { display: inline-flex; align-items: center; height: 22.001px; margin-right: 8px; font-size: 18px; } .arco-popconfirm-popup-content .arco-popconfirm-body .arco-popconfirm-icon .arco-icon-exclamation-circle-fill { color: rgb(var(--warning-6)); } .arco-popconfirm-popup-content .arco-popconfirm-body .arco-popconfirm-icon .arco-icon-check-circle-fill { color: rgb(var(--success-6)); } .arco-popconfirm-popup-content .arco-popconfirm-body .arco-popconfirm-icon .arco-icon-info-circle-fill { color: rgb(var(--primary-6)); } .arco-popconfirm-popup-content .arco-popconfirm-body .arco-popconfirm-icon .arco-icon-close-circle-fill { color: rgb(var(--danger-6)); } .arco-popconfirm-popup-content .arco-popconfirm-body .arco-popconfirm-content { text-align: left; word-wrap: break-word; } .arco-popconfirm-popup-content .arco-popconfirm-footer { text-align: right; } .arco-popconfirm-popup-content .arco-popconfirm-footer > button { margin-left: 8px; } .arco-popconfirm-popup-arrow { z-index: 1; background-color: var(--color-bg-popup); border: 1px solid var(--color-border-2); } .arco-popover-popup-content { box-sizing: border-box; padding: 12px 16px; color: var(--color-text-2); font-size: 14px; line-height: 1.5715; background-color: var(--color-bg-popup); border: 1px solid var(--color-border-2); border-radius: 6px; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); } .arco-popover-title { color: var(--color-text-1); font-weight: 500; font-size: 16px; } .arco-popover-content { text-align: left; word-wrap: break-word; } .arco-popover-title + .arco-popover-content { margin-top: 4px; } .arco-popover-popup-arrow { z-index: 1; background-color: var(--color-bg-popup); border: 1px solid var(--color-border-2); } .arco-progress { position: relative; line-height: 1; font-size: 12px; } .arco-progress-type-line, .arco-progress-type-steps { display: inline-block; max-width: 100%; width: 100%; } .arco-progress-type-line.arco-progress-size-mini { width: auto; } .arco-progress-line-wrapper, .arco-progress-steps-wrapper { display: flex; align-items: center; width: 100%; max-width: 100%; height: 100%; } .arco-progress-line-text, .arco-progress-steps-text { font-size: 12px; margin-left: 16px; color: var(--color-text-2); white-space: nowrap; text-align: right; flex-grow: 1; flex-shrink: 0; min-width: 32px; } .arco-progress-line-text .arco-icon, .arco-progress-steps-text .arco-icon { font-size: 12px; margin-left: 4px; } .arco-progress-line { background-color: var(--color-fill-3); border-radius: 100px; width: 100%; position: relative; display: inline-block; overflow: hidden; } .arco-progress-line-bar { height: 100%; border-radius: 100px; background-color: rgb(var(--primary-6)); position: relative; transition: width 0.6s cubic-bezier(0.34, 0.69, 0.1, 1), background 0.3s cubic-bezier(0.34, 0.69, 0.1, 1); max-width: 100%; } .arco-progress-line-bar-buffer { position: absolute; background-color: var(--color-primary-light-3); height: 100%; top: 0; left: 0; border-radius: 0 100px 100px 0; max-width: 100%; transition: all 0.6s cubic-bezier(0.34, 0.69, 0.1, 1); } .arco-progress-line-bar-animate::after { content: ''; display: block; position: absolute; top: 0; width: 100%; height: 100%; border-radius: inherit; background: linear-gradient(90deg, transparent 25%, rgba(255, 255, 255, 0.5) 50%, transparent 75%); background-size: 400% 100%; animation: arco-progress-loading 1.5s cubic-bezier(0.34, 0.69, 0.1, 1) infinite; } .arco-progress-line-text .arco-icon { color: var(--color-text-2); } .arco-progress-type-steps.arco-progress-size-small { width: auto; } .arco-progress-type-steps.arco-progress-size-small .arco-progress-steps-item { width: 2px; flex: unset; border-radius: 2px; } .arco-progress-type-steps.arco-progress-size-small .arco-progress-steps-item:not(:last-of-type) { margin-right: 3px; } .arco-progress-steps { display: flex; width: 100%; } .arco-progress-steps-text { margin-left: 8px; min-width: unset; } .arco-progress-steps-text .arco-icon { color: var(--color-text-2); } .arco-progress-steps-item { height: 100%; flex: 1; background-color: var(--color-fill-3); position: relative; display: inline-block; } .arco-progress-steps-item:not(:last-of-type) { margin-right: 3px; } .arco-progress-steps-item:last-of-type { border-top-right-radius: 100px; border-bottom-right-radius: 100px; } .arco-progress-steps-item:first-of-type { border-top-left-radius: 100px; border-bottom-left-radius: 100px; } .arco-progress-steps-item-active { background-color: rgb(var(--primary-6)); } .arco-progress-status-warning .arco-progress-line-bar { background-color: rgb(var(--warning-6)); } .arco-progress-status-warning .arco-progress-steps-item-active { background-color: rgb(var(--warning-6)); } .arco-progress-status-warning .arco-progress-line-text .arco-icon, .arco-progress-status-warning .arco-progress-steps-text .arco-icon { color: rgb(var(--warning-6)); } .arco-progress-status-success .arco-progress-line-bar { background-color: rgb(var(--success-6)); } .arco-progress-status-success .arco-progress-steps-item-active { background-color: rgb(var(--success-6)); } .arco-progress-status-success .arco-progress-line-text .arco-icon, .arco-progress-status-success .arco-progress-steps-text .arco-icon { color: rgb(var(--success-6)); } .arco-progress-status-danger .arco-progress-line-bar { background-color: rgb(var(--danger-6)); } .arco-progress-status-danger .arco-progress-steps-item-active { background-color: rgb(var(--danger-6)); } .arco-progress-status-danger .arco-progress-line-text .arco-icon, .arco-progress-status-danger .arco-progress-steps-text .arco-icon { color: rgb(var(--danger-6)); } .arco-progress-size-small .arco-progress-line-text { font-size: 12px; margin-left: 16px; } .arco-progress-size-small .arco-progress-line-text .arco-icon { font-size: 12px; } .arco-progress-size-large .arco-progress-line-text { font-size: 16px; margin-left: 16px; } .arco-progress-size-large .arco-progress-line-text .arco-icon { font-size: 14px; } .arco-progress-type-circle { display: inline-block; } .arco-progress-circle-wrapper { position: relative; text-align: center; line-height: 1; display: inline-block; vertical-align: text-bottom; } .arco-progress-circle-svg { transform: rotate(-90deg); } .arco-progress-circle-text { position: absolute; top: 50%; left: 50%; color: var(--color-text-3); transform: translate(-50%, -50%); font-size: 14px; } .arco-progress-circle-text .arco-icon { font-size: 16px; color: var(--color-text-2); } .arco-progress-circle-bg { stroke: var(--color-fill-3); } .arco-progress-circle-bar { stroke: rgb(var(--primary-6)); transition: stroke-dashoffset 0.6s cubic-bezier(0, 0, 1, 1) 0s, stroke 0.6s cubic-bezier(0, 0, 1, 1); } .arco-progress-size-mini .arco-progress-circle-bg { stroke: var(--color-primary-light-3); } .arco-progress-size-mini .arco-progress-circle-bar { stroke: rgb(var(--primary-6)); } .arco-progress-size-mini.arco-progress-status-warning .arco-progress-circle-bg { stroke: var(--color-warning-light-3); } .arco-progress-size-mini.arco-progress-status-danger .arco-progress-circle-bg { stroke: var(--color-danger-light-3); } .arco-progress-size-mini.arco-progress-status-success .arco-progress-circle-bg { stroke: var(--color-success-light-3); } .arco-progress-size-mini .arco-progress-circle-wrapper .arco-icon-check { position: absolute; top: 50%; left: 50%; transform: translateX(-50%) translateY(-50%); } .arco-progress-size-mini .arco-progress-circle-text { position: static; top: unset; left: unset; transform: unset; } .arco-progress-size-small .arco-progress-circle-text { font-size: 13px; } .arco-progress-size-small .arco-progress-circle-text .arco-icon { font-size: 14px; } .arco-progress-size-large .arco-progress-circle-text { font-size: 16px; } .arco-progress-size-large .arco-progress-circle-text .arco-icon { font-size: 16px; } .arco-progress-status-warning .arco-progress-circle-bar { stroke: rgb(var(--warning-6)); } .arco-progress-status-warning .arco-icon { color: rgb(var(--warning-6)); } .arco-progress-status-success .arco-progress-circle-bar { stroke: rgb(var(--success-6)); } .arco-progress-status-success .arco-icon { color: rgb(var(--success-6)); } .arco-progress-status-danger .arco-progress-circle-bar { stroke: rgb(var(--danger-6)); } .arco-progress-status-danger .arco-icon { color: rgb(var(--danger-6)); } @keyframes arco-progress-loading { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } } .arco-radio > input[type='radio'], .arco-radio-button > input[type='radio'] { position: absolute; top: 0; left: 0; width: 0; height: 0; opacity: 0; } .arco-radio > input[type='radio']:focus + .arco-radio-icon-hover::before, .arco-radio-button > input[type='radio']:focus + .arco-radio-icon-hover::before { background-color: var(--color-fill-2); } .arco-icon-hover.arco-radio-icon-hover::before { width: 24px; height: 24px; } .arco-radio { position: relative; display: inline-flex; align-items: center; padding-left: 4px; font-size: 14px; line-height: unset; cursor: pointer; } .arco-radio-label { margin-left: 6px; color: var(--color-text-1); } .arco-radio-icon { position: relative; display: block; box-sizing: border-box; width: 16px; height: 16px; line-height: 16px; border: 1px solid var(--color-border-2); border-radius: var(--border-radius-circle); } .arco-radio-icon::after { position: absolute; top: 0; left: 0; display: inline-block; box-sizing: border-box; width: 14px; height: 14px; background-color: var(--color-bg-2); border-radius: var(--border-radius-circle); transform: scale(1); transition: transform 0.3s cubic-bezier(0.3, 1.3, 0.3, 1); content: ''; } .arco-radio:hover .arco-radio-icon { border-color: var(--color-border-3); } .arco-radio-checked .arco-radio-icon { background-color: rgb(var(--primary-6)); border-color: rgb(var(--primary-6)); } .arco-radio-checked .arco-radio-icon::after { background-color: var(--color-white); transform: scale(0.4); } .arco-radio-checked:hover .arco-radio-icon { border-color: rgb(var(--primary-6)); } .arco-radio-disabled { cursor: not-allowed; } .arco-radio-disabled .arco-radio-icon-hover { cursor: not-allowed; } .arco-radio-disabled .arco-radio-label { color: var(--color-text-4); } .arco-radio-disabled .arco-radio-icon { border-color: var(--color-border-2); } .arco-radio-disabled .arco-radio-icon::after { background-color: var(--color-fill-2); } .arco-radio-disabled:hover .arco-radio-icon { border-color: var(--color-border-2); } .arco-radio-checked.arco-radio-disabled .arco-radio-icon, .arco-radio-checked.arco-radio-disabled:hover .arco-radio-icon { background-color: var(--color-primary-light-3); border-color: transparent; } .arco-radio-checked.arco-radio-disabled .arco-radio-icon::after { background-color: var(--color-fill-2); } .arco-radio-checked.arco-radio-disabled .arco-radio-label { color: var(--color-text-4); } .arco-radio:hover .arco-radio-icon-hover::before { background-color: var(--color-fill-2); } .arco-radio-group { display: inline-block; box-sizing: border-box; } .arco-radio-group .arco-radio { margin-right: 20px; } .arco-radio-group-button { display: inline-flex; padding: 1.5px; line-height: 26px; background-color: var(--color-fill-2); border-radius: 6px; } .arco-radio-button { position: relative; display: inline-block; margin: 1.5px; color: var(--color-text-2); font-size: 14px; line-height: 26px; background-color: transparent; border-radius: 4px; cursor: pointer; transition: all 0.1s cubic-bezier(0, 0, 1, 1); } .arco-radio-button-content { position: relative; display: block; padding: 0 12px; } .arco-radio-button:not(:first-of-type)::before { position: absolute; top: 50%; left: -2px; display: block; width: 1px; height: 14px; background-color: var(--color-neutral-3); transform: translateY(-50%); transition: all 0.1s cubic-bezier(0, 0, 1, 1); content: ''; } .arco-radio-button:hover::before, .arco-radio-button:hover + .arco-radio-button::before, .arco-radio-button.arco-radio-checked::before, .arco-radio-button.arco-radio-checked + .arco-radio-button::before { opacity: 0; } .arco-radio-button:hover { color: var(--color-text-1); background-color: var(--color-bg-5); } .arco-radio-button.arco-radio-checked { color: rgb(var(--primary-6)); background-color: var(--color-bg-5); } .arco-radio-button.arco-radio-disabled { color: var(--color-text-4); background-color: transparent; cursor: not-allowed; } .arco-radio-button.arco-radio-disabled.arco-radio-checked { color: var(--color-primary-light-3); background-color: var(--color-bg-5); } .arco-radio-group-size-small { line-height: 28px; } .arco-radio-group-size-small.arco-radio-group-button, .arco-radio-group-size-small .arco-radio-button { font-size: 14px; line-height: 22px; } .arco-radio-group-size-large { line-height: 36px; } .arco-radio-group-size-large.arco-radio-group-button, .arco-radio-group-size-large .arco-radio-button { font-size: 14px; line-height: 30px; } .arco-radio-group-size-mini { line-height: 24px; } .arco-radio-group-size-mini.arco-radio-group-button, .arco-radio-group-size-mini .arco-radio-button { font-size: 12px; line-height: 18px; } .arco-radio-group-direction-vertical .arco-radio { display: flex; margin-right: 0; line-height: 32px; } body[arco-theme='dark'] .arco-radio-button.arco-radio-checked, body[arco-theme='dark'] .arco-radio-button:not(.arco-radio-disabled):hover { background-color: var(--color-fill-3); } body[arco-theme='dark'] .arco-radio-button::after { background-color: var(--color-bg-3); } /********************************************** * status: disabled / readonly **********************************************/ .arco-rate { display: inline-flex; align-items: center; min-height: 32px; font-size: 24px; line-height: 1; user-select: none; } .arco-rate-disabled { cursor: not-allowed; } .arco-rate-character { position: relative; color: var(--color-fill-3); transition: transform 0.2s cubic-bezier(0.34, 0.69, 0.1, 1); } .arco-rate-character:not(:last-child) { margin-right: 8px; } .arco-rate-character-left, .arco-rate-character-right { transition: inherit; } .arco-rate-character-left > *, .arco-rate-character-right > * { float: left; } .arco-rate-character-left { position: absolute; top: 0; left: 0; width: 50%; overflow: hidden; white-space: nowrap; opacity: 0; } .arco-rate-character-scale { animation: arco-rate-scale 0.4s cubic-bezier(0.34, 0.69, 0.1, 1); } .arco-rate-character-full .arco-rate-character-right { color: rgb(var(--gold-6)); } .arco-rate-character-half .arco-rate-character-left { color: rgb(var(--gold-6)); opacity: 1; } .arco-rate-character-disabled { cursor: not-allowed; } .arco-rate:not(.arco-rate-readonly):not(.arco-rate-disabled) .arco-rate-character { cursor: pointer; } .arco-rate:not(.arco-rate-readonly):not(.arco-rate-disabled) .arco-rate-character:hover, .arco-rate:not(.arco-rate-readonly):not(.arco-rate-disabled) .arco-rate-character:focus { transform: scale(1.2); } @keyframes arco-rate-scale { 0% { transform: scale(1); } 50% { transform: scale(1.2); } 100% { transform: scale(1); } } .arco-resizebox { position: relative; width: 100%; overflow: hidden; } .arco-resizebox-direction-left, .arco-resizebox-direction-right, .arco-resizebox-direction-top, .arco-resizebox-direction-bottom { position: absolute; top: 0; left: 0; box-sizing: border-box; user-select: none; } .arco-resizebox-direction-right { right: 0; left: unset; } .arco-resizebox-direction-bottom { top: unset; bottom: 0; } .arco-resizebox-trigger-icon-wrapper { display: flex; align-items: center; justify-content: center; height: 100%; color: var(--color-text-1); font-size: 12px; line-height: 1; background-color: var(--color-neutral-3); } .arco-resizebox-trigger-icon { display: inline-block; margin: -3px; } .arco-resizebox-trigger-vertical { height: 100%; cursor: col-resize; } .arco-resizebox-trigger-horizontal { width: 100%; cursor: row-resize; } .arco-result { box-sizing: border-box; width: 100%; padding: 32px 32px 24px; } .arco-result-icon { margin-bottom: 16px; font-size: 20px; text-align: center; } .arco-result-icon-tip { display: flex; width: 45px; height: 45px; align-items: center; justify-content: center; border-radius: 50%; margin: 0 auto; } .arco-result-icon-custom .arco-result-icon-tip { font-size: 45px; color: inherit; width: unset; height: unset; } .arco-result-icon-success .arco-result-icon-tip { color: rgb(var(--success-6)); background-color: var(--color-success-light-1); } .arco-result-icon-error .arco-result-icon-tip { color: rgb(var(--danger-6)); background-color: var(--color-danger-light-1); } .arco-result-icon-info .arco-result-icon-tip { color: rgb(var(--primary-6)); background-color: var(--color-primary-light-1); } .arco-result-icon-warning .arco-result-icon-tip { color: rgb(var(--warning-6)); background-color: var(--color-warning-light-1); } .arco-result-icon-404, .arco-result-icon-403, .arco-result-icon-500 { padding-top: 24px; } .arco-result-icon-404 .arco-result-icon-tip, .arco-result-icon-403 .arco-result-icon-tip, .arco-result-icon-500 .arco-result-icon-tip { width: 92px; height: 92px; line-height: 92px; } .arco-result-title { color: var(--color-text-1); font-weight: 500; font-size: 14px; line-height: 1.5715; text-align: center; } .arco-result-subtitle { color: var(--color-text-2); font-size: 14px; line-height: 1.5715; text-align: center; } .arco-result-extra { margin-top: 20px; text-align: center; } .arco-result-content { margin-top: 20px; } .arco-scrollbar { position: relative; } .arco-scrollbar-container { position: relative; scrollbar-width: none; } .arco-scrollbar-container::-webkit-scrollbar { display: none; } .arco-scrollbar-track { position: absolute; z-index: 100; } .arco-scrollbar-track-direction-horizontal { bottom: 0; left: 0; box-sizing: border-box; width: 100%; height: 15px; } .arco-scrollbar-track-direction-vertical { top: 0; right: 0; box-sizing: border-box; width: 15px; height: 100%; } .arco-scrollbar-thumb { position: absolute; display: block; box-sizing: border-box; } .arco-scrollbar-thumb-bar { width: 100%; height: 100%; background-color: var(--color-neutral-4); border-radius: 6px; } .arco-scrollbar-thumb:hover .arco-scrollbar-thumb-bar, .arco-scrollbar-thumb-dragging .arco-scrollbar-thumb-bar { background-color: var(--color-neutral-6); } .arco-scrollbar-thumb-direction-horizontal .arco-scrollbar-thumb-bar { height: 9px; margin: 3px 0; } .arco-scrollbar-thumb-direction-vertical .arco-scrollbar-thumb-bar { width: 9px; margin: 0 3px; } .arco-scrollbar.arco-scrollbar-type-embed .arco-scrollbar-thumb { opacity: 0; transition: opacity ease 200ms; } .arco-scrollbar.arco-scrollbar-type-embed .arco-scrollbar-thumb-dragging { opacity: 0.8; } .arco-scrollbar.arco-scrollbar-type-embed:hover .arco-scrollbar-thumb { opacity: 0.8; } .arco-scrollbar.arco-scrollbar-type-track .arco-scrollbar-track { background-color: var(--color-neutral-1); } .arco-scrollbar.arco-scrollbar-type-track .arco-scrollbar-track-direction-horizontal { border-top: 1px solid var(--color-neutral-3); border-bottom: 1px solid var(--color-neutral-3); } .arco-scrollbar.arco-scrollbar-type-track .arco-scrollbar-track-direction-vertical { border-right: 1px solid var(--color-neutral-3); border-left: 1px solid var(--color-neutral-3); } .arco-scrollbar.arco-scrollbar-type-track .arco-scrollbar-thumb-direction-horizontal { margin: -1px 0; } .arco-scrollbar.arco-scrollbar-type-track .arco-scrollbar-thumb-direction-vertical { margin: 0 -1px; } .arco-scrollbar.arco-scrollbar-type-track.arco-scrollbar-both .arco-scrollbar-track-direction-vertical::after { position: absolute; right: -1px; bottom: 0; display: block; box-sizing: border-box; width: 15px; height: 15px; background-color: var(--color-neutral-1); border-right: 1px solid var(--color-neutral-3); border-bottom: 1px solid var(--color-neutral-3); content: ''; } /********************************************** * Popup Box **********************************************/ /********************************************** * Popup Options * status: default / disabled / selected / hover **********************************************/ .arco-select-dropdown { box-sizing: border-box; padding: 4px 0; background-color: var(--color-bg-popup); border: 1px solid var(--color-fill-3); border-radius: var(--border-radius-medium); box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); } .arco-select-dropdown .arco-select-dropdown-loading { display: flex; align-items: center; justify-content: center; min-height: 50px; } .arco-select-dropdown-list { margin-top: 0; margin-bottom: 0; padding-left: 0; list-style: none; } .arco-select-dropdown-list-wrapper { max-height: 200px; overflow-y: auto; } .arco-select-dropdown .arco-select-option { position: relative; z-index: 1; display: flex; align-items: center; box-sizing: border-box; width: 100%; padding: 0 12px; color: var(--color-text-1); font-size: 14px; line-height: 36px; text-align: left; background-color: var(--color-bg-popup); cursor: pointer; } .arco-select-dropdown .arco-select-option-content { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .arco-select-dropdown .arco-select-option-checkbox { overflow: hidden; } .arco-select-dropdown .arco-select-option-checkbox .arco-checkbox-label { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .arco-select-dropdown .arco-select-option-has-suffix { justify-content: space-between; } .arco-select-dropdown .arco-select-option-selected { color: var(--color-text-1); font-weight: 500; background-color: var(--color-bg-popup); } .arco-select-dropdown .arco-select-option-active, .arco-select-dropdown .arco-select-option:not(.arco-select-dropdown .arco-select-option-disabled):hover { color: var(--color-text-1); background-color: var(--color-fill-2); transition: all 0.1s cubic-bezier(0, 0, 1, 1); } .arco-select-dropdown .arco-select-option-disabled { color: var(--color-text-4); background-color: var(--color-bg-popup); cursor: not-allowed; } .arco-select-dropdown .arco-select-option-icon { display: inline-flex; margin-right: 8px; } .arco-select-dropdown .arco-select-option-suffix { margin-left: 12px; } .arco-select-dropdown .arco-select-group:first-child .arco-select-dropdown .arco-select-group-title { margin-top: 8px; } .arco-select-dropdown .arco-select-group-title { box-sizing: border-box; width: 100%; margin-top: 8px; padding: 0 12px; color: var(--color-text-3); font-size: 12px; line-height: 20px; cursor: default; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .arco-select-dropdown.arco-select-dropdown-has-header { padding-top: 0; } .arco-select-dropdown-header { border-bottom: 1px solid var(--color-fill-3); } .arco-select-dropdown.arco-select-dropdown-has-footer { padding-bottom: 0; } .arco-select-dropdown-footer { border-top: 1px solid var(--color-fill-3); } .arco-skeleton-shape { width: 48px; height: 48px; background-color: var(--color-fill-2); border-radius: var(--border-radius-small); } .arco-skeleton-shape-circle { border-radius: 50%; } .arco-skeleton-shape-small { width: 36px; height: 36px; } .arco-skeleton-shape-large { width: 60px; height: 60px; } .arco-skeleton-line { margin: 0; padding: 0; list-style: none; } .arco-skeleton-line-row { height: 16px; background-color: var(--color-fill-2); } .arco-skeleton-line-row:not(:last-child) { margin-bottom: 16px; } .arco-skeleton-animation .arco-skeleton-shape, .arco-skeleton-animation .arco-skeleton-line-row { background: linear-gradient(90deg, var(--color-fill-2) 25%, var(--color-fill-3) 37%, var(--color-fill-2) 63%); background-size: 400% 100%; animation: arco-skeleton-circle 1.5s cubic-bezier(0, 0, 1, 1) infinite; } @keyframes arco-skeleton-circle { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } } .arco-slider { display: inline-flex; align-items: center; width: 100%; } .arco-slider-vertical { display: inline-block; width: auto; min-width: 22px; height: auto; } .arco-slider-vertical .arco-slider-wrapper { flex-direction: column; } .arco-slider-with-marks { margin-bottom: 24px; padding: 20px 20px; } .arco-slider-vertical.arco-slider-with-marks { margin-bottom: 0; padding: 0; } .arco-slider-track { position: relative; flex: 1; width: 100%; height: 12px; cursor: pointer; } .arco-slider-track::before { position: absolute; top: 50%; display: block; width: 100%; height: 2px; background-color: var(--color-fill-3); border-radius: 2px; transform: translateY(-50%); content: ''; } .arco-slider-track.arco-slider-track-vertical { width: 12px; max-width: 12px; height: 100%; min-height: 200px; margin-right: 0; margin-bottom: 6px; margin-top: 6px; transform: translateY(0); } .arco-slider-track.arco-slider-track-vertical::before { top: unset; left: 50%; width: 2px; height: 100%; transform: translateX(-50%); } .arco-slider-track.arco-slider-track-disabled::before { background-color: var(--color-fill-2); } .arco-slider-track.arco-slider-track-disabled .arco-slider-bar { background-color: var(--color-fill-3); } .arco-slider-track.arco-slider-track-disabled .arco-slider-btn { cursor: not-allowed; } .arco-slider-track.arco-slider-track-disabled .arco-slider-btn::after { border-color: var(--color-fill-3); } .arco-slider-track.arco-slider-track-disabled .arco-slider-dots .arco-slider-dot { border-color: var(--color-fill-2); } .arco-slider-track.arco-slider-track-disabled .arco-slider-dots .arco-slider-dot-active { border-color: var(--color-fill-3); } .arco-slider-track.arco-slider-track-disabled .arco-slider-ticks .arco-slider-tick { background: var(--color-fill-2); } .arco-slider-track.arco-slider-track-disabled .arco-slider-ticks .arco-slider-tick-active { background: var(--color-fill-3); } .arco-slider-bar { position: absolute; top: 50%; height: 2px; background-color: rgb(var(--primary-6)); border-radius: 2px; transform: translateY(-50%); } .arco-slider-track-vertical .arco-slider-bar { top: unset; left: 50%; width: 2px; height: unset; transform: translateX(-50%); } .arco-slider-btn { position: absolute; top: 0; left: 0; width: 12px; height: 12px; transform: translateX(-50%); } .arco-slider-btn::after { position: absolute; top: 0; left: 0; display: inline-block; box-sizing: border-box; width: 12px; height: 12px; background: var(--color-bg-2); border: 2px solid rgb(var(--primary-6)); border-radius: 50%; transition: all 0.3s cubic-bezier(0.3, 1.3, 0.3, 1); content: ''; } .arco-slider-btn.arco-slider-btn-active::after, .arco-slider-btn:hover::after { box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); transform: scale(1.16666667); } .arco-slider-track-vertical .arco-slider-btn { top: unset; bottom: 0; left: 0; transform: translateY(50%); } .arco-slider-marks { position: absolute; top: 12px; width: 100%; } .arco-slider-marks .arco-slider-mark { position: absolute; color: var(--color-text-3); font-size: 14px; line-height: 1; transform: translateX(-50%); cursor: pointer; } .arco-slider-track-vertical .arco-slider-marks { top: 0; left: 15px; height: 100%; } .arco-slider-track-vertical .arco-slider-marks .arco-slider-mark { transform: translateY(50%); } .arco-slider-dots { height: 100%; } .arco-slider-dots .arco-slider-dot-wrapper { position: absolute; top: 50%; font-size: 12px; transform: translate(-50%, -50%); } .arco-slider-track-vertical .arco-slider-dots .arco-slider-dot-wrapper { top: unset; left: 50%; transform: translate(-50%, 50%); } .arco-slider-dots .arco-slider-dot-wrapper .arco-slider-dot { box-sizing: border-box; width: 8px; height: 8px; background-color: var(--color-bg-2); border: 2px solid var(--color-fill-3); border-radius: 50%; } .arco-slider-dots .arco-slider-dot-wrapper .arco-slider-dot-active { border-color: rgb(var(--primary-6)); } .arco-slider-ticks .arco-slider-tick { position: absolute; top: 50%; width: 1px; height: 3px; margin-top: -1px; background: var(--color-fill-3); transform: translate(-50%, -100%); } .arco-slider-ticks .arco-slider-tick-active { background: rgb(var(--primary-6)); } .arco-slider-vertical .arco-slider-ticks .arco-slider-tick { top: unset; left: 50%; width: 3px; height: 1px; margin-top: unset; transform: translate(1px, 50%); } .arco-slider-input { display: flex; align-items: center; margin-left: 20px; } .arco-slider-vertical .arco-slider-input { margin-left: 0; } .arco-slider-input > .arco-input-number { width: 60px; height: 32px; overflow: visible; line-height: normal; } .arco-slider-input > .arco-input-number input { text-align: center; } .arco-slider-input-hyphens { /* prettier-ignore */ margin: 0 6px; width: 8px; height: 2px; background: rgb(var(--gray-6)); } .arco-space { display: inline-flex; } .arco-space .arco-space-item:empty { display: none; } .arco-space-horizontal .arco-space-item { display: flex; align-items: center; } .arco-space-vertical { flex-direction: column; } .arco-space-align-baseline { align-items: baseline; } .arco-space-align-start { align-items: flex-start; } .arco-space-align-end { align-items: flex-end; } .arco-space-align-center { align-items: center; } .arco-space-wrap { flex-wrap: wrap; } .arco-space-fill { display: flex; } .arco-space-rtl { direction: rtl; } .arco-dot-loading { position: relative; display: inline-block; width: 56px; height: 8px; transform-style: preserve-3d; perspective: 200px; } .arco-dot-loading-item { position: absolute; top: 0; left: 50%; width: 8px; height: 8px; background-color: rgb(var(--primary-6)); border-radius: var(--border-radius-circle); transform: translateX(-50%) scale(0); animation: arco-dot-loading 2s cubic-bezier(0, 0, 1, 1) infinite forwards; } .arco-dot-loading-item:nth-child(2) { background-color: rgb(var(--primary-5)); animation-delay: 400ms; } .arco-dot-loading-item:nth-child(3) { background-color: rgb(var(--primary-4)); animation-delay: 800ms; } .arco-dot-loading-item:nth-child(4) { background-color: rgb(var(--primary-4)); animation-delay: 1200ms; } .arco-dot-loading-item:nth-child(5) { background-color: rgb(var(--primary-2)); animation-delay: 1600ms; } /* prettier-ignore */ @keyframes arco-dot-loading { /* prettier-ignore */ 0% { transform: translate3D(-48.621%, 0, -0.985px) scale(0.511); } 2.778% { transform: translate3D(-95.766%, 0, -0.94px) scale(0.545); } 5.556% { transform: translate3D(-140%, 0, -0.866px) scale(0.6); } 8.333% { transform: translate3D(-179.981%, 0, -0.766px) scale(0.675); } 11.111% { transform: translate3D(-214.492%, 0, -0.643px) scale(0.768); } 13.889% { transform: translate3D(-242.487%, 0, -0.5px) scale(0.875); } 16.667% { transform: translate3D(-263.114%, 0, -0.342px) scale(0.993); } 19.444% { transform: translate3D(-275.746%, 0, -0.174px) scale(1.12); } 22.222% { transform: translate3D(-280%, 0, 0px) scale(1.25); } 25% { transform: translate3D(-275.746%, 0, 0.174px) scale(1.38); } 27.778% { transform: translate3D(-263.114%, 0, 0.342px) scale(1.507); } 30.556% { transform: translate3D(-242.487%, 0, 0.5px) scale(1.625); } 33.333% { transform: translate3D(-214.492%, 0, 0.643px) scale(1.732); } 36.111% { transform: translate3D(-179.981%, 0, 0.766px) scale(1.825); } 38.889% { transform: translate3D(-140%, 0, 0.866px) scale(1.9); } 41.667% { transform: translate3D(-95.766%, 0, 0.94px) scale(1.955); } 44.444% { transform: translate3D(-48.621%, 0, 0.985px) scale(1.989); } 47.222% { transform: translate3D(0%, 0, 1px) scale(2); } 50% { transform: translate3D(48.621%, 0, 0.985px) scale(1.989); } 52.778% { transform: translate3D(95.766%, 0, 0.94px) scale(1.955); } 55.556% { transform: translate3D(140%, 0, 0.866px) scale(1.9); } 58.333% { transform: translate3D(179.981%, 0, 0.766px) scale(1.825); } 61.111% { transform: translate3D(214.492%, 0, 0.643px) scale(1.732); } 63.889% { transform: translate3D(242.487%, 0, 0.5px) scale(1.625); } 66.667% { transform: translate3D(263.114%, 0, 0.342px) scale(1.507); } 69.444% { transform: translate3D(275.746%, 0, 0.174px) scale(1.38); } 72.222% { transform: translate3D(280%, 0, 0px) scale(1.25); } 75% { transform: translate3D(275.746%, 0, -0.174px) scale(1.12); } 77.778% { transform: translate3D(263.114%, 0, -0.342px) scale(0.993); } 80.556% { transform: translate3D(242.487%, 0, -0.5px) scale(0.875); } 83.333% { transform: translate3D(214.492%, 0, -0.643px) scale(0.768); } 86.111% { transform: translate3D(179.981%, 0, -0.766px) scale(0.675); } 88.889% { transform: translate3D(140%, 0, -0.866px) scale(0.6); } 91.667% { transform: translate3D(95.766%, 0, -0.94px) scale(0.545); } 94.444% { transform: translate3D(48.621%, 0, -0.985px) scale(0.511); } 97.222% { transform: translate3D(0%, 0, -1px) scale(0.5); } } .arco-spin { display: inline-block; } .arco-spin-with-tip { text-align: center; } .arco-spin-icon { color: rgb(var(--primary-6)); font-size: 20px; } .arco-spin-tip { margin-top: 6px; color: rgb(var(--primary-6)); font-weight: 500; font-size: 14px; } .arco-spin-mask { position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 11; text-align: center; background-color: var(--color-spin-layer-bg); transition: opacity 0.1s cubic-bezier(0, 0, 1, 1); user-select: none; } .arco-spin-loading { position: relative; user-select: none; } .arco-spin-loading .arco-spin-mask-icon { position: absolute; top: 50%; left: 50%; z-index: 12; transform: translate(-50%, -50%); } .arco-spin-loading .arco-spin-children::after { opacity: 1; pointer-events: auto; } .arco-split { display: flex; } .arco-split-pane { overflow: auto; } .arco-split-pane-second { flex: 1; } .arco-split-horizontal { flex-direction: row; } .arco-split-vertical { flex-direction: column; } .arco-split-trigger-icon-wrapper { display: flex; align-items: center; justify-content: center; height: 100%; color: var(--color-text-1); font-size: 12px; line-height: 1; background-color: var(--color-neutral-3); } .arco-split-trigger-icon { display: inline-block; margin: -3px; } .arco-split-trigger-vertical { height: 100%; cursor: col-resize; } .arco-split-trigger-horizontal { width: 100%; cursor: row-resize; } .arco-statistic { display: inline-block; color: var(--color-text-2); line-height: 1.5715; } .arco-statistic-title { margin-bottom: 8px; color: var(--color-text-2); font-size: 14px; } .arco-statistic-content .arco-statistic-value { color: var(--color-text-1); font-weight: 500; font-size: 26px; white-space: nowrap; } .arco-statistic-content .arco-statistic-value-integer { font-size: inherit; white-space: nowrap; } .arco-statistic-content .arco-statistic-value-decimal { display: inline-block; font-size: inherit; } .arco-statistic-prefix { font-size: 14px; } .arco-statistic-suffix { font-size: 14px; } .arco-statistic-extra { margin-top: 8px; color: var(--color-text-2); } .arco-steps-item { position: relative; flex: 1; margin-right: 12px; overflow: hidden; white-space: nowrap; text-align: left; } .arco-steps-item:last-child { flex: none; margin-right: 0; } .arco-steps-item-active .arco-steps-item-title { font-weight: 500; } .arco-steps-item-node { display: inline-block; margin-right: 12px; font-weight: 500; font-size: 16px; vertical-align: top; } .arco-steps-icon { box-sizing: border-box; width: 24px; height: 24px; line-height: 22px; text-align: center; border-radius: var(--border-radius-circle); font-size: 14px; } .arco-steps-item-wait .arco-steps-icon { color: var(--color-text-2); background-color: var(--color-fill-2); border: 1px solid transparent; } .arco-steps-item-process .arco-steps-icon { color: var(--color-white); background-color: rgb(var(--primary-6)); border: 1px solid transparent; } .arco-steps-item-finish .arco-steps-icon { color: rgb(var(--primary-6)); background-color: var(--color-primary-light-1); border: 1px solid transparent; } .arco-steps-item-error .arco-steps-icon { color: var(--color-white); background-color: rgb(var(--danger-6)); border: 1px solid transparent; } .arco-steps-item-title { position: relative; display: inline-block; padding-right: 12px; color: var(--color-text-2); font-size: 16px; line-height: 24px; white-space: nowrap; } .arco-steps-item-wait .arco-steps-item-title { color: var(--color-text-2); } .arco-steps-item-process .arco-steps-item-title { color: var(--color-text-1); } .arco-steps-item-finish .arco-steps-item-title { color: var(--color-text-1); } .arco-steps-item-error .arco-steps-item-title { color: var(--color-text-1); } .arco-steps-item-content { display: inline-block; } .arco-steps-item-description { max-width: 140px; margin-top: 2px; color: var(--color-text-3); font-size: 12px; white-space: normal; } .arco-steps-item-wait .arco-steps-item-description { color: var(--color-text-3); } .arco-steps-item-process .arco-steps-item-description { color: var(--color-text-3); } .arco-steps-item-finish .arco-steps-item-description { color: var(--color-text-3); } .arco-steps-item-error .arco-steps-item-description { color: var(--color-text-3); } .arco-steps-label-horizontal .arco-steps-item:not(:last-child) .arco-steps-item-title::after { position: absolute; top: 11.5px; left: 100%; display: block; box-sizing: border-box; width: 5000px; height: 1px; background-color: var(--color-neutral-3); content: ''; } .arco-steps-label-horizontal .arco-steps-item.arco-steps-item-process .arco-steps-item-title::after { background-color: var(--color-neutral-3); } .arco-steps-label-horizontal .arco-steps-item.arco-steps-item-finish .arco-steps-item-title::after { background-color: rgb(var(--primary-6)); } .arco-steps-label-horizontal .arco-steps-item.arco-steps-item-next-error .arco-steps-item-title::after { background-color: rgb(var(--danger-6)); } .arco-steps-item:not(:last-child) .arco-steps-item-tail { position: absolute; top: 11.5px; box-sizing: border-box; width: 100%; height: 1px; } .arco-steps-item:not(:last-child) .arco-steps-item-tail::after { display: block; width: 100%; height: 100%; background-color: var(--color-neutral-3); content: ''; } .arco-steps-vertical .arco-steps-item:not(:last-child) .arco-steps-item-tail { position: absolute; top: 0; left: 11.5px; box-sizing: border-box; width: 1px; height: 100%; padding: 30px 0 6px; } .arco-steps-vertical .arco-steps-item:not(:last-child) .arco-steps-item-tail::after { display: block; width: 100%; height: 100%; background-color: var(--color-neutral-3); content: ''; } .arco-steps-size-small.arco-steps-vertical .arco-steps-item:not(:last-child) .arco-steps-item-tail { left: 9.5px; padding: 26px 0 6px; } .arco-steps-item:not(:last-child).arco-steps-item-finish .arco-steps-item-tail::after { background-color: rgb(var(--primary-6)); } .arco-steps-item:not(:last-child).arco-steps-item-next-error .arco-steps-item-tail::after { background-color: rgb(var(--danger-6)); } .arco-steps-size-small:not(.arco-steps-vertical) .arco-steps-item:not(:last-child) .arco-steps-item-tail { top: 9.5px; } .arco-steps-size-small .arco-steps-item-node { font-size: 14px; } .arco-steps-size-small .arco-steps-item-title { font-size: 14px; line-height: 20px; } .arco-steps-size-small .arco-steps-item-description { font-size: 12px; } .arco-steps-size-small .arco-steps-icon { width: 20px; height: 20px; font-size: 12px; line-height: 18px; } .arco-steps-size-small.arco-steps-label-horizontal .arco-steps-item:not(:last-child) .arco-steps-item-title::after { top: 9.5px; } .arco-steps-label-vertical .arco-steps-item { overflow: visible; } .arco-steps-label-vertical .arco-steps-item-title { margin-top: 2px; padding-right: 0; } .arco-steps-label-vertical .arco-steps-item-node { margin-left: 58px; } .arco-steps-label-vertical .arco-steps-item-tail { left: 94px; padding-right: 36px; } .arco-steps-label-vertical.arco-steps-size-small .arco-steps-item-node { margin-left: 60px; } .arco-steps-label-vertical.arco-steps-size-small .arco-steps-item-tail { left: 92px; padding-right: 32px; } .arco-steps-mode-dot .arco-steps-item { position: relative; flex: 1; margin-right: 16px; overflow: visible; white-space: nowrap; text-align: left; } .arco-steps-mode-dot .arco-steps-item:last-child { flex: none; margin-right: 0; } .arco-steps-mode-dot .arco-steps-item-active .arco-steps-item-title { font-weight: 500; } .arco-steps-mode-dot .arco-steps-item-node { display: inline-block; box-sizing: border-box; width: 8px; height: 8px; vertical-align: top; border-radius: var(--border-radius-circle); } .arco-steps-mode-dot .arco-steps-item-active .arco-steps-item-node { width: 10px; height: 10px; } .arco-steps-mode-dot .arco-steps-item-wait .arco-steps-item-node { background-color: var(--color-fill-4); border-color: var(--color-fill-4); } .arco-steps-mode-dot .arco-steps-item-process .arco-steps-item-node { background-color: rgb(var(--primary-6)); border-color: rgb(var(--primary-6)); } .arco-steps-mode-dot .arco-steps-item-finish .arco-steps-item-node { background-color: rgb(var(--primary-6)); border-color: rgb(var(--primary-6)); } .arco-steps-mode-dot .arco-steps-item-error .arco-steps-item-node { background-color: rgb(var(--danger-6)); border-color: rgb(var(--danger-6)); } .arco-steps-mode-dot.arco-steps-horizontal .arco-steps-item-node { margin-left: 66px; } .arco-steps-mode-dot.arco-steps-horizontal .arco-steps-item-active .arco-steps-item-node { margin-top: -1px; margin-left: 65px; } .arco-steps-mode-dot .arco-steps-item-content { display: inline-block; } .arco-steps-mode-dot .arco-steps-item-title { position: relative; display: inline-block; margin-top: 4px; font-size: 16px; } .arco-steps-mode-dot .arco-steps-item-wait .arco-steps-item-title { color: var(--color-text-2); } .arco-steps-mode-dot .arco-steps-item-process .arco-steps-item-title { color: var(--color-text-1); } .arco-steps-mode-dot .arco-steps-item-finish .arco-steps-item-title { color: var(--color-text-1); } .arco-steps-mode-dot .arco-steps-item-error .arco-steps-item-title { color: var(--color-text-1); } .arco-steps-mode-dot .arco-steps-item-description { margin-top: 4px; font-size: 12px; white-space: normal; } .arco-steps-mode-dot .arco-steps-item-wait .arco-steps-item-description { color: var(--color-text-3); } .arco-steps-mode-dot .arco-steps-item-process .arco-steps-item-description { color: var(--color-text-3); } .arco-steps-mode-dot .arco-steps-item-finish .arco-steps-item-description { color: var(--color-text-3); } .arco-steps-mode-dot .arco-steps-item-error .arco-steps-item-description { color: var(--color-text-3); } .arco-steps-mode-dot .arco-steps-item:not(:last-child) .arco-steps-item-tail { position: absolute; top: 3.5px; left: 78px; box-sizing: border-box; width: 100%; height: 1px; background-color: var(--color-neutral-3); } .arco-steps-mode-dot .arco-steps-item:not(:last-child).arco-steps-item-process .arco-steps-item-tail { background-color: var(--color-neutral-3); } .arco-steps-mode-dot .arco-steps-item:not(:last-child).arco-steps-item-finish .arco-steps-item-tail { background-color: rgb(var(--primary-6)); } .arco-steps-mode-dot .arco-steps-item:not(:last-child).arco-steps-item-next-error .arco-steps-item-tail { background-color: rgb(var(--danger-6)); } .arco-steps-mode-dot.arco-steps-vertical .arco-steps-item-node { margin-right: 16px; } .arco-steps-mode-dot.arco-steps-vertical .arco-steps-item-content { overflow: hidden; } .arco-steps-mode-dot.arco-steps-vertical .arco-steps-item-title { margin-top: 0px; } .arco-steps-mode-dot.arco-steps-vertical .arco-steps-item-description { margin-top: 4px; } .arco-steps-mode-dot.arco-steps-vertical .arco-steps-item:not(:last-child) .arco-steps-item-tail { position: absolute; bottom: 0; left: 4px; box-sizing: border-box; width: 1px; height: 100%; padding-top: 16px; padding-bottom: 2px; background-color: transparent; transform: translateX(-50%); } .arco-steps-mode-dot.arco-steps-vertical .arco-steps-item:not(:last-child) .arco-steps-item-tail::after { display: block; width: 100%; height: 100%; background-color: var(--color-neutral-3); content: ''; } .arco-steps-mode-dot.arco-steps-vertical .arco-steps-item:not(:last-child).arco-steps-item-process .arco-steps-item-tail::after { background-color: var(--color-neutral-3); } .arco-steps-mode-dot.arco-steps-vertical .arco-steps-item:not(:last-child).arco-steps-item-finish .arco-steps-item-tail::after { background-color: rgb(var(--primary-6)); } .arco-steps-mode-dot.arco-steps-vertical .arco-steps-item:not(:last-child).arco-steps-item-next-error .arco-steps-item-tail::after { background-color: rgb(var(--danger-6)); } .arco-steps-mode-dot.arco-steps-vertical .arco-steps-item .arco-steps-item-node { margin-top: 8px; } .arco-steps-mode-dot.arco-steps-vertical .arco-steps-item-active .arco-steps-item-node { margin-top: 6px; margin-left: -1px; } .arco-steps-mode-arrow .arco-steps-item { position: relative; display: flex; flex: 1; align-items: center; height: 72px; overflow: visible; white-space: nowrap; } .arco-steps-mode-arrow .arco-steps-item:not(:last-child) { margin-right: 4px; } .arco-steps-mode-arrow .arco-steps-item-wait { background-color: var(--color-fill-1); } .arco-steps-mode-arrow .arco-steps-item-process { background-color: rgb(var(--primary-6)); } .arco-steps-mode-arrow .arco-steps-item-finish { background-color: var(--color-primary-light-1); } .arco-steps-mode-arrow .arco-steps-item-error { background-color: rgb(var(--danger-6)); } .arco-steps-mode-arrow .arco-steps-item-content { display: inline-block; box-sizing: border-box; } .arco-steps-mode-arrow .arco-steps-item:first-child .arco-steps-item-content { padding-left: 16px; } .arco-steps-mode-arrow .arco-steps-item:not(:first-child) .arco-steps-item-content { padding-left: 52px; } .arco-steps-mode-arrow .arco-steps-item-title { position: relative; display: inline-block; font-size: 16px; white-space: nowrap; } .arco-steps-mode-arrow .arco-steps-item-title::after { display: none !important; } .arco-steps-mode-arrow .arco-steps-item-wait .arco-steps-item-title { color: var(--color-text-2); } .arco-steps-mode-arrow .arco-steps-item-process .arco-steps-item-title { color: var(--color-white); } .arco-steps-mode-arrow .arco-steps-item-finish .arco-steps-item-title { color: var(--color-text-1); } .arco-steps-mode-arrow .arco-steps-item-error .arco-steps-item-title { color: var(--color-white); } .arco-steps-mode-arrow .arco-steps-item-active .arco-steps-item-title { font-weight: 500; } .arco-steps-mode-arrow .arco-steps-item-description { max-width: none; margin-top: 0; font-size: 12px; white-space: nowrap; } .arco-steps-mode-arrow .arco-steps-item-wait .arco-steps-item-description { color: var(--color-text-3); } .arco-steps-mode-arrow .arco-steps-item-process .arco-steps-item-description { color: var(--color-white); } .arco-steps-mode-arrow .arco-steps-item-finish .arco-steps-item-description { color: var(--color-text-3); } .arco-steps-mode-arrow .arco-steps-item-error .arco-steps-item-description { color: var(--color-white); } .arco-steps-mode-arrow .arco-steps-item:not(:first-child)::before { position: absolute; top: 0; left: 0; z-index: 1; display: block; width: 0; height: 0; border-top: 36px solid transparent; border-bottom: 36px solid transparent; border-left: 36px solid var(--color-bg-2); content: ''; } .arco-steps-mode-arrow .arco-steps-item:not(:last-child)::after { position: absolute; top: 0; right: -36px; z-index: 2; display: block; clear: both; width: 0; height: 0; border-top: 36px solid transparent; border-bottom: 36px solid transparent; content: ''; } .arco-steps-mode-arrow .arco-steps-item:not(:last-child).arco-steps-item-wait::after { border-left: 36px solid var(--color-fill-1); } .arco-steps-mode-arrow .arco-steps-item:not(:last-child).arco-steps-item-process::after { border-left: 36px solid rgb(var(--primary-6)); } .arco-steps-mode-arrow .arco-steps-item:not(:last-child).arco-steps-item-error::after { border-left: 36px solid rgb(var(--danger-6)); } .arco-steps-mode-arrow .arco-steps-item:not(:last-child).arco-steps-item-finish::after { border-left: 36px solid var(--color-primary-light-1); } .arco-steps-mode-arrow.arco-steps-size-small .arco-steps-item { height: 40px; } .arco-steps-mode-arrow.arco-steps-size-small .arco-steps-item-title { font-size: 14px; } .arco-steps-mode-arrow.arco-steps-size-small .arco-steps-item-description { display: none; } .arco-steps-mode-arrow.arco-steps-size-small .arco-steps-item:not(:first-child)::before { border-top: 20px solid transparent; border-bottom: 20px solid transparent; border-left: 20px solid var(--color-bg-2); } .arco-steps-mode-arrow.arco-steps-size-small .arco-steps-item:not(:last-child)::after { right: -20px; border-top: 20px solid transparent; border-bottom: 20px solid transparent; border-left: 20px solid var(--color-fill-1); } .arco-steps-mode-arrow.arco-steps-size-small .arco-steps-item:first-child .arco-steps-item-content { padding-left: 20px; } .arco-steps-mode-arrow.arco-steps-size-small .arco-steps-item:not(:first-child) .arco-steps-item-content { padding-left: 40px; } .arco-steps-mode-arrow.arco-steps-size-small .arco-steps-item-error:not(:last-child)::after { border-left: 20px solid rgb(var(--danger-6)); } .arco-steps-mode-arrow.arco-steps-size-small .arco-steps-item:not(:last-child).arco-steps-item-wait::after { border-left: 20px solid var(--color-fill-1); } .arco-steps-mode-arrow.arco-steps-size-small .arco-steps-item:not(:last-child).arco-steps-item-process::after { border-left: 20px solid rgb(var(--primary-6)); } .arco-steps-mode-arrow.arco-steps-size-small .arco-steps-item:not(:last-child).arco-steps-item-finish::after { border-left: 20px solid var(--color-primary-light-1); } .arco-steps-mode-navigation.arco-steps-label-horizontal .arco-steps-item:not(:last-child) .arco-steps-item-title::after { display: none; } .arco-steps-mode-navigation .arco-steps-item { padding-left: 20px; padding-right: 10px; margin-right: 32px; } .arco-steps-mode-navigation .arco-steps-item:last-child { flex: 1; } .arco-steps-mode-navigation .arco-steps-item-content { margin-bottom: 20px; } .arco-steps-mode-navigation .arco-steps-item-description { padding-right: 20px; } .arco-steps-mode-navigation .arco-steps-item-active::after { content: ''; position: absolute; display: block; height: 2px; left: 0; right: 30px; bottom: 0; background-color: rgb(var(--primary-6)); } .arco-steps-mode-navigation .arco-steps-item-active:last-child::after { width: 100%; } .arco-steps-mode-navigation .arco-steps-item:not(:last-child) .arco-steps-item-content::after { position: absolute; top: 10px; right: 30px; display: inline-block; width: 6px; height: 6px; background-color: var(--color-bg-2); border: 2px solid var(--color-text-4); border-bottom: none; border-left: none; -webkit-transform: rotate(45deg); transform: rotate(45deg); content: ''; } .arco-steps { display: flex; } .arco-steps-changeable .arco-steps-item-title, .arco-steps-changeable .arco-steps-item-description { transition: all 0.1s cubic-bezier(0, 0, 1, 1); } .arco-steps-changeable .arco-steps-item:not(.arco-steps-item-active):not(.arco-steps-item-disabled) { cursor: pointer; } .arco-steps-changeable .arco-steps-item:not(.arco-steps-item-active):not(.arco-steps-item-disabled):hover .arco-steps-item-content .arco-steps-item-title, .arco-steps-changeable .arco-steps-item:not(.arco-steps-item-active):not(.arco-steps-item-disabled):hover .arco-steps-item-content .arco-steps-item-description { color: rgb(var(--primary-6)); } .arco-steps-line-less .arco-steps-item-title::after { display: none !important; } .arco-steps-vertical { flex-direction: column; } .arco-steps-vertical .arco-steps-item:not(:last-child) { min-height: 90px; } .arco-steps-vertical .arco-steps-item-title::after { display: none !important; } .arco-steps-vertical .arco-steps-item-description { max-width: none; } .arco-steps-label-vertical .arco-steps-item-content { display: block; width: 140px; text-align: center; } .arco-steps-label-vertical .arco-steps-item-description { max-width: none; } .switch-slide-text-enter-from { left: -100% !important; } .switch-slide-text-enter-to { left: 8px !important; } .switch-slide-text-enter-active { transition: left 0.2s cubic-bezier(0.34, 0.69, 0.1, 1); } .switch-slide-text-leave-from { left: 100% !important; } .switch-slide-text-leave-to { left: 26px !important; } .switch-slide-text-leave-active { transition: left 0.2s cubic-bezier(0.34, 0.69, 0.1, 1); } .arco-switch { position: relative; box-sizing: border-box; min-width: 44px; height: 24px; padding: 0; overflow: hidden; line-height: 24px; vertical-align: middle; background-color: var(--color-fill-4); border: none; border-radius: 12px; outline: none; cursor: pointer; transition: background-color 0.2s cubic-bezier(0.34, 0.69, 0.1, 1); } .arco-switch-handle { position: absolute; top: 4px; left: 4px; display: flex; align-items: center; justify-content: center; width: 16px; height: 16px; color: var(--color-neutral-3); font-size: 12px; background-color: var(--color-bg-white); border-radius: 50%; transition: all 0.2s cubic-bezier(0.34, 0.69, 0.1, 1); } .arco-switch-checked { background-color: rgb(var(--primary-6)); } .arco-switch-checked .arco-switch-handle { left: calc(100% - 16px - 4px); color: rgb(var(--primary-6)); } .arco-switch[disabled] .arco-switch-handle { color: var(--color-fill-2); } .arco-switch[disabled].arco-switch-checked .arco-switch-handle { color: var(--color-primary-light-3); } .arco-switch[disabled] .arco-switch-handle { color: var(--color-fill-2); } .arco-switch[disabled].arco-switch-checked .arco-switch-handle { color: var(--color-primary-light-3); } .arco-switch-text-holder { margin: 0 8px 0 26px; font-size: 12px; opacity: 0; } .arco-switch-text { position: absolute; top: 0; left: 26px; color: var(--color-white); font-size: 12px; } .arco-switch-checked .arco-switch-text-holder { margin: 0 26px 0 8px; } .arco-switch-checked .arco-switch-text { left: 8px; color: var(--color-white); } .arco-switch[disabled] { background-color: var(--color-fill-2); cursor: not-allowed; } .arco-switch[disabled] .arco-switch-text { color: var(--color-white); } .arco-switch[disabled].arco-switch-checked { background-color: var(--color-primary-light-3); } .arco-switch[disabled].arco-switch-checked .arco-switch-text { color: var(--color-white); } .arco-switch-loading { background-color: var(--color-fill-2); } .arco-switch-loading .arco-switch-handle { color: var(--color-neutral-3); } .arco-switch-loading .arco-switch-text { color: var(--color-white); } .arco-switch-loading.arco-switch-checked { background-color: var(--color-primary-light-3); } .arco-switch-loading.arco-switch-checked .arco-switch-handle { color: var(--color-primary-light-3); } .arco-switch-loading.arco-switch-checked .arco-switch-text { color: var(--color-primary-light-1); } .arco-switch-small { min-width: 28px; height: 16px; line-height: 16px; } .arco-switch-small.arco-switch-checked { padding-left: -2px; } .arco-switch-small .arco-switch-handle { top: 2px; left: 2px; width: 12px; height: 12px; border-radius: 8px; } .arco-switch-small .arco-switch-handle-icon { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) scale(0.66667); } .arco-switch-small.arco-switch-checked .arco-switch-handle { left: calc(100% - 12px - 2px); } .arco-switch-type-round { min-width: 44px; border-radius: var(--border-radius-small); } .arco-switch-type-round .arco-switch-handle { border-radius: 2px; } .arco-switch-type-round.arco-switch-small { min-width: 28px; height: 16px; line-height: 16px; border-radius: 2px; } .arco-switch-type-round.arco-switch-small .arco-switch-handle { border-radius: 1px; } .arco-switch-type-line { min-width: 36px; overflow: unset; background-color: transparent; } .arco-switch-type-line::after { display: block; width: 100%; height: 6px; background-color: var(--color-fill-4); border-radius: 3px; transition: background-color 0.2s cubic-bezier(0.34, 0.69, 0.1, 1); content: ''; } .arco-switch-type-line .arco-switch-handle { top: 2px; left: 0; width: 20px; height: 20px; background-color: var(--color-bg-white); border-radius: 10px; box-shadow: 0 1px 3px var(--color-neutral-6); } .arco-switch-type-line.arco-switch-checked { background-color: transparent; } .arco-switch-type-line.arco-switch-checked::after { background-color: rgb(var(--primary-6)); } .arco-switch-type-line.arco-switch-custom-color { --custom-color: var(--color-fill-4); } .arco-switch-type-line.arco-switch-custom-color::after { background-color: var(--custom-color); } .arco-switch-type-line.arco-switch-custom-color.arco-switch-checked { --custom-color: rgb(var(--primary-6)); } .arco-switch-type-line.arco-switch-checked .arco-switch-handle { left: calc(100% - 20px); } .arco-switch-type-line[disabled] { background-color: transparent; cursor: not-allowed; } .arco-switch-type-line[disabled]::after { background-color: var(--color-fill-2); } .arco-switch-type-line[disabled].arco-switch-checked { background-color: transparent; } .arco-switch-type-line[disabled].arco-switch-checked::after { background-color: var(--color-primary-light-3); } .arco-switch-type-line.arco-switch-loading { background-color: transparent; } .arco-switch-type-line.arco-switch-loading::after { background-color: var(--color-fill-2); } .arco-switch-type-line.arco-switch-loading.arco-switch-checked { background-color: transparent; } .arco-switch-type-line.arco-switch-loading.arco-switch-checked::after { background-color: var(--color-primary-light-3); } .arco-switch-type-line.arco-switch-small { min-width: 28px; height: 16px; line-height: 16px; } .arco-switch-type-line.arco-switch-small.arco-switch-checked { padding-left: 0px; } .arco-switch-type-line.arco-switch-small .arco-switch-handle { top: 0px; width: 16px; height: 16px; border-radius: 8px; } .arco-switch-type-line.arco-switch-small .arco-switch-handle-icon { transform: translate(-50%, -50%) scale(1); } .arco-switch-type-line.arco-switch-small.arco-switch-checked .arco-switch-handle { left: calc(100% - 16px - 0px); } .arco-table-filters-content { box-sizing: border-box; min-width: 100px; background: var(--color-bg-5); border: 1px solid var(--color-neutral-3); border-radius: var(--border-radius-medium); box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); } .arco-table-filters-list { max-height: 200px; padding: 4px 0; overflow-y: auto; } .arco-table-filters-item { height: 32px; padding: 0 12px; font-size: 14px; line-height: 32px; } .arco-table-filters-text { width: 100%; max-width: 160px; height: 34px; margin-right: 0; padding-left: 10px; overflow: hidden; line-height: 32px; white-space: nowrap; text-overflow: ellipsis; cursor: pointer; } .arco-table-filters-bottom { box-sizing: border-box; height: 38px; padding: 0 12px; overflow: hidden; line-height: 38px; border-top: 1px solid var(--color-border-2); } .arco-table-filters-bottom > *:not(*:last-child) { margin-right: 8px; } .arco-table { position: relative; /* ---- Table sorter, filter, checkbox, radio (End) ---- */ } .arco-table-column-handle { position: absolute; top: 0; right: -4px; z-index: 1; width: 8px; height: 100%; cursor: col-resize; } .arco-table .arco-spin { display: flex; flex-direction: column; height: 100%; } .arco-table > .arco-spin > .arco-spin-children::after { z-index: 2; } .arco-table-footer { border-radius: 0 0 0 0; } .arco-table-scroll-position-right .arco-table-col-fixed-left-last::after, .arco-table-scroll-position-middle .arco-table-col-fixed-left-last::after { box-shadow: inset 6px 0 8px -3px rgba(0, 0, 0, 0.15); } .arco-table-scroll-position-left .arco-table-col-fixed-right-first::after, .arco-table-scroll-position-middle .arco-table-col-fixed-right-first::after { box-shadow: inset -6px 0 8px -3px rgba(0, 0, 0, 0.15); } .arco-table-layout-fixed .arco-table-element { table-layout: fixed; } .arco-table .arco-table-element { width: 100%; min-width: 100%; margin: 0; border-collapse: separate; border-spacing: 0; } .arco-table-th { position: relative; box-sizing: border-box; color: var(--color-text-3); font-weight: 600; line-height: 1.5715; text-align: left; background-color: var(--color-fill-1); } .arco-table-th[colspan] { text-align: center; } .arco-table-th-align-right { text-align: right; } .arco-table-th-align-right .arco-table-cell-with-sorter { justify-content: flex-end; } .arco-table-th-align-center { text-align: center; } .arco-table-th-align-center .arco-table-cell-with-sorter { justify-content: center; } .arco-table-td { box-sizing: border-box; color: var(--color-text-1); line-height: 1.5715; text-align: left; word-break: break-all; background-color: var(--color-bg-2); border-bottom: 1px solid var(--color-border-2); } .arco-table-td-align-right { text-align: right; } .arco-table-td-align-center { text-align: center; } .arco-table-td.arco-table-drag-handle { cursor: move; } .arco-table-cell { display: flex; align-items: center; } .arco-table-cell-align-right { justify-content: flex-end; text-align: right; } .arco-table-cell-align-center { justify-content: center; text-align: center; } .arco-table-text-ellipsis { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .arco-table-td-content { display: block; width: 100%; } .arco-table-th.arco-table-col-sorted { background-color: var(--color-neutral-3); } .arco-table-td.arco-table-col-sorted { background-color: var(--color-fill-1); } .arco-table-col-fixed-left, .arco-table-col-fixed-right { position: sticky; z-index: 10; } .arco-table-col-fixed-left-last::after, .arco-table-col-fixed-right-first::after { position: absolute; top: 0; bottom: -1px; left: 0; width: 10px; box-shadow: none; transform: translateX(-100%); transition: box-shadow 0.1s cubic-bezier(0, 0, 1, 1); content: ''; pointer-events: none; } .arco-table-col-fixed-left-last::after { right: 0; left: unset; transform: translateX(100%); } .arco-table-cell-text-ellipsis { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .arco-table-editable-row .arco-table-cell-wrap-value { border: 1px solid var(--color-white); border-radius: 0; cursor: pointer; transition: all 0.1s cubic-bezier(0, 0, 1, 1); } .arco-table-editable-row:hover .arco-table-cell-wrap-value { border: 1px solid var(--color-border-2); } .arco-table .arco-table-expand-btn { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; padding: 0; color: var(--color-text-2); font-size: 10px; line-height: 16px; background-color: var(--color-neutral-3); border: 2px solid transparent; border-radius: 4px; outline: none; cursor: pointer; transition: background-color 0.1s cubic-bezier(0, 0, 1, 1); } .arco-table .arco-table-expand-btn:hover { color: var(--color-text-1); background-color: var(--color-neutral-4); border-color: transparent; } .arco-table-cell-expand-icon { display: flex; align-items: center; } .arco-table-cell-expand-icon .arco-table-cell-inline-icon { display: inline-flex; margin-right: 10px; } .arco-table-cell-expand-icon .arco-table-cell-inline-icon .arco-icon-loading { color: rgb(var(--primary-6)); } .arco-table-cell-expand-icon-hidden { display: inline-block; width: 16px; height: 16px; margin-right: 10px; } .arco-table-tr-expand .arco-table-td { background-color: var(--color-fill-1); } .arco-table-cell-fixed-expand { position: sticky; left: 0; box-sizing: border-box; } .arco-table-tr-expand .arco-table-td .arco-table .arco-table-container { border: none; } .arco-table-tr-expand .arco-table-td .arco-table .arco-table-th { border-bottom: 1px solid var(--color-border-2); } .arco-table-tr-expand .arco-table-td .arco-table .arco-table-th, .arco-table-tr-expand .arco-table-td .arco-table .arco-table-td { background-color: transparent; } .arco-table-tr-expand .arco-table-td .arco-table .arco-table-pagination { margin-bottom: 12px; } .arco-table-th.arco-table-operation, .arco-table-td.arco-table-operation { text-align: center; } .arco-table-th.arco-table-operation .arco-table-cell, .arco-table-td.arco-table-operation .arco-table-cell { display: flex; justify-content: center; padding: 0; } .arco-table-radio, .arco-table-checkbox { justify-content: center; } .arco-table-checkbox .arco-checkbox, .arco-table-radio .arco-radio { padding-left: 0; } .arco-table-selection-checkbox-col, .arco-table-selection-radio-col { width: 40px; min-width: 40px; max-width: 40px; } .arco-table-expand-col { width: 40px; min-width: 40px; max-width: 40px; } .arco-table-drag-handle-col { width: 40px; min-width: 40px; max-width: 40px; } .arco-table-th { transition: background-color 0.1s cubic-bezier(0, 0, 1, 1); } .arco-table-cell-with-sorter { display: flex; align-items: center; cursor: pointer; } .arco-table-cell-with-sorter:hover { background-color: rgba(var(--gray-4), 0.5); } .arco-table-cell-with-filter { display: flex; align-items: center; } .arco-table-cell-next-ascend .arco-table-sorter-icon .arco-icon-caret-up { color: var(--color-neutral-6); } .arco-table-cell-next-descend .arco-table-sorter-icon .arco-icon-caret-down { color: var(--color-neutral-6); } .arco-table-sorter { display: inline-block; margin-left: 8px; vertical-align: -3px; } .arco-table-sorter.arco-table-sorter-direction-one { vertical-align: 0; } .arco-table-sorter-icon { position: relative; width: 14px; height: 8px; overflow: hidden; line-height: 8px; } .arco-table-sorter-icon .arco-icon-caret-up, .arco-table-sorter-icon .arco-icon-caret-down { position: absolute; top: 50%; color: var(--color-neutral-5); font-size: 12px; transition: all 0.1s cubic-bezier(0, 0, 1, 1); } .arco-table-sorter-icon .arco-icon-caret-up { top: -2px; left: 1px; } .arco-table-sorter-icon .arco-icon-caret-down { top: -3px; left: 1px; } .arco-table-sorter-icon.arco-table-sorter-icon-active svg { color: rgb(var(--primary-6)); } .arco-table-filters { position: absolute; top: 0; right: 0; display: flex; align-items: center; justify-content: center; width: 24px; height: 100%; line-height: 1; vertical-align: 0; background-color: transparent; cursor: pointer; transition: all 0.1s cubic-bezier(0, 0, 1, 1); } .arco-table-filters:hover, .arco-table-filters-open { background-color: var(--color-neutral-4); } .arco-table-filters svg { color: var(--color-text-2); font-size: 16px; transition: all 0.1s cubic-bezier(0, 0, 1, 1); } .arco-table-filters-active svg { color: rgb(var(--primary-6)); } .arco-table-filters-align-left { position: relative; width: auto; margin-left: 8px; } .arco-table-filters-align-left svg { font-size: 12px; } .arco-table-filters-align-left:hover, .arco-table-filters-align-left-open { background: none; } .arco-table-filters-align-left:hover::before, .arco-table-filters-align-left.arco-table-filters-open::before { background: var(--color-fill-4); } .arco-table-container { position: relative; border-radius: 0 0 0 0; } .arco-table-header { flex-shrink: 0; border-radius: 0 0 0 0; } .arco-table-container { box-sizing: border-box; width: 100%; min-height: 0; } .arco-table-container .arco-table-content { display: flex; flex-direction: column; width: auto; height: 100%; } .arco-table-container .arco-table-content-scroll-x { overflow-x: auto; overflow-y: hidden; } .arco-table-container::before, .arco-table-container::after { position: absolute; z-index: 1; width: 10px; height: 100%; box-shadow: none; transition: box-shadow 0.1s cubic-bezier(0, 0, 1, 1); content: ''; pointer-events: none; } .arco-table-container::before { top: 0; left: 0; border-top-left-radius: 0; } .arco-table-container::after { top: 0; right: 0; border-top-right-radius: 0; } .arco-table-container:not(.arco-table-has-fixed-col-left).arco-table-scroll-position-right::before, .arco-table-container:not(.arco-table-has-fixed-col-left).arco-table-scroll-position-middle::before { box-shadow: inset 6px 0 8px -3px rgba(0, 0, 0, 0.15); } .arco-table-container:not(.arco-table-has-fixed-col-right).arco-table-scroll-position-left::after, .arco-table-container:not(.arco-table-has-fixed-col-right).arco-table-scroll-position-middle::after { box-shadow: inset -6px 0 8px -3px rgba(0, 0, 0, 0.15); } .arco-table-header { overflow-x: hidden; overflow-y: hidden; background-color: var(--color-fill-1); scrollbar-color: transparent transparent; } .arco-table-header-sticky { position: sticky; top: 0; z-index: 100; } .arco-table:not(.arco-table-empty) .arco-table-header::-webkit-scrollbar { height: 0; background-color: transparent; } .arco-table.arco-table-empty .arco-table-header { overflow-x: auto; } .arco-table-body { position: relative; width: 100%; min-height: 40px; overflow: auto; background-color: var(--color-bg-2); } .arco-table-border .arco-table-container { border-top: 1px solid var(--color-border-2); border-left: 1px solid var(--color-border-2); } .arco-table-border .arco-table-scroll-y { border-bottom: 1px solid var(--color-border-2); } .arco-table-border .arco-table-scroll-y .arco-table-body .arco-table-tr:last-of-type .arco-table-td, .arco-table-border .arco-table-scroll-y tfoot .arco-table-tr:last-of-type .arco-table-td { border-bottom: none; } .arco-table-border .arco-table-scroll-y .arco-table-body .arco-table-tr:last-of-type .arco-table-td.arco-table-col-fixed-left-last::after, .arco-table-border .arco-table-scroll-y tfoot .arco-table-tr:last-of-type .arco-table-td.arco-table-col-fixed-left-last::after, .arco-table-border .arco-table-scroll-y .arco-table-body .arco-table-tr:last-of-type .arco-table-td.arco-table-col-fixed-right-first::after, .arco-table-border .arco-table-scroll-y tfoot .arco-table-tr:last-of-type .arco-table-td.arco-table-col-fixed-right-first::after { bottom: 0; } .arco-table-border .arco-table-tr .arco-table-th { border-bottom: 1px solid var(--color-border-2); } .arco-table-border .arco-table-footer { border: 1px solid var(--color-border-2); border-top: 0; } .arco-table-border:not(.arco-table-border-cell) .arco-table-container { border-right: 1px solid var(--color-border-2); } .arco-table-border-cell .arco-table-th, .arco-table-border-cell .arco-table-td:not(.arco-table-tr-expand) { border-right: 1px solid var(--color-border-2); } .arco-table-border-cell .arco-table-th-resizing, .arco-table-border-cell .arco-table-td-resizing:not(.arco-table-tr-expand) { border-right-color: rgb(var(--primary-6)); } .arco-table-border-header-cell .arco-table-th { border-right: 1px solid var(--color-border-2); border-bottom: 1px solid var(--color-border-2); } .arco-table-border-header-cell .arco-table-th-resizing, .arco-table-border-header-cell .arco-table-td-resizing:not(.arco-table-tr-expand) { border-right-color: rgb(var(--primary-6)); } .arco-table-border.arco-table-border-header-cell thead .arco-table-tr:first-child .arco-table-th:last-child { border-right: 0; } .arco-table-border-body-cell .arco-table-td:not(:last-child):not(.arco-table-tr-expand) { border-right: 1px solid var(--color-border-2); } .arco-table-stripe:not(.arco-table-dragging) .arco-table-tr:not(.arco-table-tr-empty):not(.arco-table-tr-summary):nth-child(even) .arco-table-td:not(.arco-table-col-fixed-left):not(.arco-table-col-fixed-right), .arco-table-stripe .arco-table-tr-drag .arco-table-td:not(.arco-table-col-fixed-left):not(.arco-table-col-fixed-right) { background-color: var(--color-fill-1); } .arco-table-stripe:not(.arco-table-dragging) .arco-table-tr:not(.arco-table-tr-empty):not(.arco-table-tr-summary):nth-child(even) .arco-table-td.arco-table-col-fixed-left::before, .arco-table-stripe .arco-table-tr-drag .arco-table-td.arco-table-col-fixed-left::before, .arco-table-stripe:not(.arco-table-dragging) .arco-table-tr:not(.arco-table-tr-empty):not(.arco-table-tr-summary):nth-child(even) .arco-table-td.arco-table-col-fixed-right::before, .arco-table-stripe .arco-table-tr-drag .arco-table-td.arco-table-col-fixed-right::before { position: absolute; top: 0; left: 0; z-index: -1; width: 100%; height: 100%; background-color: var(--color-fill-1); content: ''; } .arco-table .arco-table-tr-draggable { cursor: move; } .arco-table-hover:not(.arco-table-dragging) .arco-table-tr:not(.arco-table-tr-empty):not(.arco-table-tr-summary):hover .arco-table-td:not(.arco-table-col-fixed-left):not(.arco-table-col-fixed-right), .arco-table-hover .arco-table-tr-drag .arco-table-td:not(.arco-table-col-fixed-left):not(.arco-table-col-fixed-right) { background-color: var(--color-fill-1); } .arco-table-hover:not(.arco-table-dragging) .arco-table-tr:not(.arco-table-tr-empty):not(.arco-table-tr-summary):hover .arco-table-td.arco-table-col-fixed-left::before, .arco-table-hover .arco-table-tr-drag .arco-table-td.arco-table-col-fixed-left::before, .arco-table-hover:not(.arco-table-dragging) .arco-table-tr:not(.arco-table-tr-empty):not(.arco-table-tr-summary):hover .arco-table-td.arco-table-col-fixed-right::before, .arco-table-hover .arco-table-tr-drag .arco-table-td.arco-table-col-fixed-right::before { position: absolute; top: 0; left: 0; z-index: -1; width: 100%; height: 100%; background-color: var(--color-fill-1); content: ''; } .arco-table-hover .arco-table-tr-expand:not(.arco-table-tr-empty):hover .arco-table-td:not(.arco-table-col-fixed-left):not(.arco-table-col-fixed-right) { background-color: var(--color-fill-1); } .arco-table-tr-expand .arco-table-td .arco-table-hover .arco-table-tr:not(.arco-table-tr-empty) .arco-table-td:not(.arco-table-col-fixed-left):not(.arco-table-col-fixed-right) { background-color: transparent; } .arco-table-tr-expand .arco-table-td .arco-table-hover .arco-table-tr:not(.arco-table-tr-empty) .arco-table-td.arco-table-col-fixed-left::before, .arco-table-tr-expand .arco-table-td .arco-table-hover .arco-table-tr:not(.arco-table-tr-empty) .arco-table-td.arco-table-col-fixed-right::before { background-color: transparent; } .arco-table-tfoot { position: relative; z-index: 1; flex-shrink: 0; width: 100%; overflow-x: auto; background-color: var(--color-neutral-2); box-shadow: 0 -1px 0 var(--color-border-2); scrollbar-color: transparent transparent; } .arco-table-tfoot::-webkit-scrollbar { height: 0; background-color: transparent; } .arco-table tfoot .arco-table-td { background-color: var(--color-neutral-2); } .arco-table-tr-checked .arco-table-td { background-color: var(--color-fill-1); } .arco-table .arco-table-cell { padding: 10px 16px; } .arco-table .arco-table-th { font-size: 14px; } .arco-table .arco-table-td { font-size: 14px; } .arco-table .arco-table-footer { padding: 10px 16px; } .arco-table .arco-table-tr-expand .arco-table-td .arco-table { margin: -10px -16px calc(-10px - 1px) -16px; } .arco-table .arco-table-editable-row .arco-table-cell-wrap-value { padding: 10px 16px; } .arco-table-size-medium .arco-table-cell { padding: 8px 16px; } .arco-table-size-medium .arco-table-th { font-size: 14px; } .arco-table-size-medium .arco-table-td { font-size: 14px; } .arco-table-size-medium .arco-table-footer { padding: 8px 16px; } .arco-table-size-medium .arco-table-tr-expand .arco-table-td .arco-table { margin: -8px -16px calc(-8px - 1px) -16px; } .arco-table-size-medium .arco-table-editable-row .arco-table-cell-wrap-value { padding: 8px 16px; } .arco-table-size-small .arco-table-cell { padding: 6px 12px; } .arco-table-size-small .arco-table-th { font-size: 14px; } .arco-table-size-small .arco-table-td { font-size: 14px; } .arco-table-size-small .arco-table-footer { padding: 6px 12px; } .arco-table-size-small .arco-table-tr-expand .arco-table-td .arco-table { margin: -6px -12px calc(-6px - 1px) -12px; } .arco-table-size-small .arco-table-editable-row .arco-table-cell-wrap-value { padding: 6px 12px; } .arco-table-size-mini .arco-table-cell { padding: 6px 10px; } .arco-table-size-mini .arco-table-th { font-size: 12px; } .arco-table-size-mini .arco-table-td { font-size: 12px; } .arco-table-size-mini .arco-table-footer { padding: 6px 10px; } .arco-table-size-mini .arco-table-tr-expand .arco-table-td .arco-table { margin: -6px -10px calc(-6px - 1px) -10px; } .arco-table-size-mini .arco-table-editable-row .arco-table-cell-wrap-value { padding: 6px 10px; } .arco-table-virtualized .arco-table-element { table-layout: fixed; } .arco-table-virtualized div.arco-table-body div.arco-table-tr { display: flex; } .arco-table-virtualized div.arco-table-body div.arco-table-td { display: flex; flex: 1; align-items: center; } .arco-table-pagination { display: flex; align-items: center; justify-content: flex-end; margin-top: 12px; } .arco-table-pagination-left { justify-content: flex-start; } .arco-table-pagination-center { justify-content: center; } .arco-table-pagination-top { margin-top: 0; margin-bottom: 12px; } .arco-virtual-list > .arco-table-element { width: auto; } body[arco-theme='dark'] .arco-table-tr-checked .arco-table-td { background-color: var(--color-neutral-2); } .arco-icon-hover.arco-tabs-icon-hover::before { width: 16px; height: 16px; } .arco-tabs .arco-tabs-icon-hover { color: var(--color-text-2); font-size: 12px; user-select: none; } .arco-tabs-dropdown-icon { margin-left: 6px; font-size: 12px; user-select: none; } .arco-tabs-tab-close-btn { margin-left: 8px; user-select: none; } .arco-tabs-nav-add-btn { display: inline-flex; align-items: center; justify-content: center; padding: 0 8px; font-size: 12px; user-select: none; } .arco-tabs-add { position: relative; } .arco-tabs-nav-button-left { margin-right: 6px; margin-left: 10px; } .arco-tabs-nav-button-right { margin-right: 10px; margin-left: 6px; } .arco-tabs-nav-button-up { margin-bottom: 10px; } .arco-tabs-nav-button-down { margin-top: 10px; } .arco-tabs-nav-button-disabled { color: var(--color-text-4); cursor: not-allowed; } .arco-tabs { position: relative; overflow: hidden; } .arco-tabs-nav { position: relative; flex-shrink: 0; } .arco-tabs-nav::before { position: absolute; right: 0; bottom: 0; left: 0; display: block; clear: both; height: 1px; background-color: var(--color-border-2); content: ''; } .arco-tabs-nav-tab { display: flex; flex: 1; overflow: hidden; } .arco-tabs-nav-tab-list { position: relative; display: inline-block; white-space: nowrap; transition: transform 0.2s cubic-bezier(0.34, 0.69, 0.1, 1); } .arco-tabs-nav-extra { display: flex; align-items: center; width: auto; line-height: 32px; } .arco-tabs-nav-extra .arco-tabs-nav-add-btn { padding-left: 0; } .arco-tabs-tab { display: inline-flex; align-items: center; box-sizing: border-box; padding: 4px 0; color: var(--color-text-2); font-size: 14px; line-height: 1.5715; outline: none; cursor: pointer; transition: color 0.2s cubic-bezier(0, 0, 1, 1); } .arco-tabs-tab-title { display: inline-block; } .arco-tabs-tab:hover { color: var(--color-text-1); font-weight: 400; } .arco-tabs-tab-disabled, .arco-tabs-tab-disabled:hover { color: var(--color-text-4); cursor: not-allowed; } .arco-tabs-tab-active, .arco-tabs-tab-active:hover { color: rgb(var(--primary-6)); font-weight: 500; } .arco-tabs-tab-active.arco-tabs-tab-disabled, .arco-tabs-tab-active:hover.arco-tabs-tab-disabled { color: var(--color-primary-light-3); } .arco-tabs-nav-ink { position: absolute; top: initial; right: initial; bottom: 0; height: 1.6px; background-color: rgb(var(--primary-6)); transition: left 0.2s cubic-bezier(0.34, 0.69, 0.1, 1), width 0.2s cubic-bezier(0.34, 0.69, 0.1, 1); } .arco-tabs-nav-ink.arco-tabs-header-ink-no-animation { transition: none; } .arco-tabs-nav-ink-disabled { background-color: var(--color-primary-light-3); } .arco-tabs-nav-type-line .arco-tabs-nav-extra { line-height: 40px; } .arco-tabs-nav-type-line .arco-tabs-tab { margin: 0 16px; padding: 8px 0; line-height: 1.5715; } .arco-tabs-nav-type-line .arco-tabs-tab-title { position: relative; display: inline-block; padding: 1px 0; } .arco-tabs-nav-type-line .arco-tabs-tab-title::before { position: absolute; top: 0; right: -8px; bottom: 0; left: -8px; z-index: -1; background-color: transparent; border-radius: var(--border-radius-small); opacity: 1; transition: background-color 0.2s cubic-bezier(0, 0, 1, 1), opacity 0.2s cubic-bezier(0, 0, 1, 1); content: ''; } .arco-tabs-nav-type-line .arco-tabs-tab:hover .arco-tabs-tab-title::before { background-color: var(--color-neutral-2); } .arco-tabs-nav-type-line .arco-tabs-tab-active .arco-tabs-tab-title::before, .arco-tabs-nav-type-line .arco-tabs-tab-active:hover .arco-tabs-tab-title::before { background-color: transparent; } .arco-tabs-nav-type-line .arco-tabs-tab-disabled .arco-tabs-tab-title::before, .arco-tabs-nav-type-line .arco-tabs-tab-disabled:hover .arco-tabs-tab-title::before { opacity: 0; } .arco-tabs-nav-type-line .arco-tabs-tab:focus-visible .arco-tabs-tab-title::before { border: 2px solid rgb(var(--primary-6)); } .arco-tabs-nav-type-line.arco-tabs-nav-horizontal > .arco-tabs-tab:first-of-type { margin-left: 16px; } .arco-tabs-nav-type-line.arco-tabs-nav-horizontal .arco-tabs-nav-tab-list-no-padding > .arco-tabs-tab:first-of-type, .arco-tabs-nav-text.arco-tabs-nav-horizontal .arco-tabs-nav-tab-list-no-padding > .arco-tabs-tab:first-of-type { margin-left: 0; } .arco-tabs-nav-type-card .arco-tabs-tab, .arco-tabs-nav-type-card-gutter .arco-tabs-tab { position: relative; padding: 4px 16px; font-size: 14px; border: 1px solid var(--color-neutral-3); transition: padding 0.2s cubic-bezier(0, 0, 1, 1), color 0.2s cubic-bezier(0, 0, 1, 1); } .arco-tabs-nav-type-card .arco-tabs-tab-closable, .arco-tabs-nav-type-card-gutter .arco-tabs-tab-closable { padding-right: 12px; } .arco-tabs-nav-type-card .arco-tabs-tab-closable:not(.arco-tabs-tab-active):hover .arco-icon-hover:hover::before, .arco-tabs-nav-type-card-gutter .arco-tabs-tab-closable:not(.arco-tabs-tab-active):hover .arco-icon-hover:hover::before { background-color: var(--color-fill-4); } .arco-tabs-nav-type-card .arco-tabs-tab:focus-visible::before, .arco-tabs-nav-type-card-gutter .arco-tabs-tab:focus-visible::before { position: absolute; top: -1px; right: 0; bottom: -1px; left: -1px; border: 2px solid rgb(var(--primary-6)); content: ''; } .arco-tabs-nav-type-card .arco-tabs-tab:last-child:focus-visible::before, .arco-tabs-nav-type-card-gutter .arco-tabs-tab:last-child:focus-visible::before { right: -1px; } .arco-tabs-nav-type-card .arco-tabs-nav-add-btn, .arco-tabs-nav-type-card-gutter .arco-tabs-nav-add-btn { height: 32px; } .arco-tabs-nav-type-card .arco-tabs-tab { background-color: transparent; border-right: none; } .arco-tabs-nav-type-card .arco-tabs-tab:last-child { border-right: 1px solid var(--color-neutral-3); border-top-right-radius: var(--border-radius-small); } .arco-tabs-nav-type-card .arco-tabs-tab:first-child { border-top-left-radius: var(--border-radius-small); } .arco-tabs-nav-type-card .arco-tabs-tab:hover { background-color: var(--color-fill-3); } .arco-tabs-nav-type-card .arco-tabs-tab-disabled, .arco-tabs-nav-type-card .arco-tabs-tab-disabled:hover { background-color: transparent; } .arco-tabs-nav-type-card .arco-tabs-tab-active, .arco-tabs-nav-type-card .arco-tabs-tab-active:hover { background-color: transparent; border-bottom-color: var(--color-bg-2); } .arco-tabs-nav-type-card-gutter .arco-tabs-tab { margin-left: 4px; background-color: var(--color-fill-1); border-right: 1px solid var(--color-neutral-3); border-radius: var(--border-radius-small) var(--border-radius-small) 0 0; } .arco-tabs-nav-type-card-gutter .arco-tabs-tab:hover { background-color: var(--color-fill-3); } .arco-tabs-nav-type-card-gutter .arco-tabs-tab-disabled, .arco-tabs-nav-type-card-gutter .arco-tabs-tab-disabled:hover { background-color: var(--color-fill-1); } .arco-tabs-nav-type-card-gutter .arco-tabs-tab-active, .arco-tabs-nav-type-card-gutter .arco-tabs-tab-active:hover { background-color: transparent; border-bottom-color: var(--color-bg-2); } .arco-tabs-nav-type-card-gutter .arco-tabs-tab:first-child { margin-left: 0; } .arco-tabs-nav-type-text::before { display: none; } .arco-tabs-nav-type-text .arco-tabs-tab { position: relative; margin: 0 8.75px; padding: 5px 0; font-size: 14px; line-height: 1.5715; } .arco-tabs-nav-type-text .arco-tabs-tab:not(:first-of-type)::before { position: absolute; top: 50%; left: -8.75px; display: block; width: 1.5px; height: 12px; background-color: var(--color-fill-3); transform: translateY(-50%); content: ''; } .arco-tabs-nav-type-text .arco-tabs-tab-title { padding-right: 8px; padding-left: 8px; background-color: transparent; } .arco-tabs-nav-type-text .arco-tabs-tab-title:hover { background-color: var(--color-fill-2); } .arco-tabs-nav-type-text .arco-tabs-tab-active .arco-tabs-tab-title, .arco-tabs-nav-type-text .arco-tabs-tab-active .arco-tabs-tab-title:hover { background-color: transparent; } .arco-tabs-nav-type-text .arco-tabs-tab-disabled .arco-tabs-tab-title, .arco-tabs-nav-type-text .arco-tabs-tab-disabled .arco-tabs-tab-title:hover { background-color: transparent; } .arco-tabs-nav-type-text .arco-tabs-tab-active.arco-tabs-nav-type-text .arco-tabs-tab-disabled .arco-tabs-tab-title, .arco-tabs-nav-type-text .arco-tabs-tab-active.arco-tabs-nav-type-text .arco-tabs-tab-disabled .arco-tabs-tab-title:hover { background-color: var(--color-primary-light-3); } .arco-tabs-nav-type-text .arco-tabs-tab:focus-visible .arco-tabs-tab-title { margin: -2px; border: 2px solid rgb(var(--primary-6)); } .arco-tabs-nav-type-rounded::before { display: none; } .arco-tabs-nav-type-rounded .arco-tabs-tab { margin: 0 6px; padding: 5px 0; padding-right: 16px; padding-left: 16px; font-size: 14px; background-color: transparent; border-radius: 32px; } .arco-tabs-nav-type-rounded .arco-tabs-tab:hover { background-color: var(--color-fill-2); } .arco-tabs-nav-type-rounded .arco-tabs-tab-disabled:hover { background-color: transparent; } .arco-tabs-nav-type-rounded .arco-tabs-tab-active, .arco-tabs-nav-type-rounded .arco-tabs-tab-active:hover { background-color: var(--color-fill-2); } .arco-tabs-nav-type-rounded .arco-tabs-tab:focus-visible { border-color: rgb(var(--primary-6)); } .arco-tabs-nav-type-capsule::before { display: none; } .arco-tabs-nav-type-capsule .arco-tabs-nav-tab:not(.arco-tabs-nav-tab-scroll) { justify-content: flex-end; } .arco-tabs-nav-type-capsule .arco-tabs-nav-tab-list { padding: 2px 2px; line-height: 1; background-color: var(--color-fill-2); border-radius: var(--border-radius-small); } .arco-tabs-nav-type-capsule .arco-tabs-tab { position: relative; padding: 0 10px; font-size: 14px; line-height: 28px; background-color: transparent; } .arco-tabs-nav-type-capsule .arco-tabs-tab:hover { background-color: var(--color-bg-2); } .arco-tabs-nav-type-capsule .arco-tabs-tab-disabled:hover { background-color: unset; } .arco-tabs-nav-type-capsule .arco-tabs-tab-active, .arco-tabs-nav-type-capsule .arco-tabs-tab-active:hover { background-color: var(--color-bg-2); } .arco-tabs-nav-type-capsule .arco-tabs-tab-active::before, .arco-tabs-nav-type-capsule .arco-tabs-tab-active:hover::before, .arco-tabs-nav-type-capsule .arco-tabs-tab-active + .arco-tabs-tab::before, .arco-tabs-nav-type-capsule .arco-tabs-tab-active:hover + .arco-tabs-tab::before { opacity: 0; } .arco-tabs-nav-type-capsule .arco-tabs-tab:focus-visible { border-color: rgb(var(--primary-6)); } .arco-tabs-nav-type-capsule.arco-tabs-nav-horizontal .arco-tabs-tab:not(:first-of-type) { margin-left: 3px; } .arco-tabs-nav-type-capsule.arco-tabs-nav-horizontal .arco-tabs-tab:not(:first-of-type)::before { position: absolute; top: 50%; left: -4px; display: block; width: 1px; height: 14px; background-color: var(--color-fill-3); transform: translateY(-50%); transition: all 0.2s cubic-bezier(0, 0, 1, 1); content: ''; } .arco-tabs-nav { position: relative; display: flex; align-items: center; overflow: hidden; } .arco-tabs-content { box-sizing: border-box; width: 100%; padding-top: 16px; overflow: hidden; } .arco-tabs-content-hide { display: none; } .arco-tabs-content .arco-tabs-content-list { display: flex; width: 100%; } .arco-tabs-content .arco-tabs-content-item { flex-shrink: 0; width: 100%; height: 0; overflow: hidden; } .arco-tabs-content .arco-tabs-content-item.arco-tabs-content-item-active { height: auto; } .arco-tabs-type-card > .arco-tabs-content, .arco-tabs-type-card-gutter > .arco-tabs-content { border: 1px solid var(--color-border-2); border-top: none; } .arco-tabs-content-animation { transition: all 0.2s cubic-bezier(0.34, 0.69, 0.1, 1); } .arco-tabs-horizontal.arco-tabs-justify { display: flex; flex-direction: column; height: 100%; } .arco-tabs-horizontal.arco-tabs-justify .arco-tabs-content, .arco-tabs-horizontal.arco-tabs-justify .arco-tabs-content-list, .arco-tabs-horizontal.arco-tabs-justify .arco-tabs-pane { height: 100%; } .arco-tabs-nav-size-mini.arco-tabs-nav-type-line .arco-tabs-nav-extra { font-size: 12px; line-height: 32px; } .arco-tabs-nav-size-mini.arco-tabs-nav-type-line .arco-tabs-tab { padding-top: 6px; padding-bottom: 6px; font-size: 12px; } .arco-tabs-nav-size-mini.arco-tabs-nav-type-line .arco-tabs-nav-extra { font-size: 12px; line-height: 32px; } .arco-tabs-nav-size-mini.arco-tabs-nav-type-card .arco-tabs-tab, .arco-tabs-nav-size-mini.arco-tabs-nav-type-card-gutter .arco-tabs-tab { padding-top: 1px; padding-bottom: 1px; font-size: 12px; } .arco-tabs-nav-size-mini.arco-tabs-nav-type-card .arco-tabs-nav-extra, .arco-tabs-nav-size-mini.arco-tabs-nav-type-card-gutter .arco-tabs-nav-extra { font-size: 12px; line-height: 24px; } .arco-tabs-nav-size-mini.arco-tabs-nav-type-card .arco-tabs-nav-add-btn, .arco-tabs-nav-size-mini.arco-tabs-nav-type-card-gutter .arco-tabs-nav-add-btn { height: 24px; } .arco-tabs-nav-size-mini.arco-tabs-nav-type-capsule .arco-tabs-tab { font-size: 12px; line-height: 20px; } .arco-tabs-nav-size-mini.arco-tabs-nav-type-capsule .arco-tabs-nav-extra { font-size: 12px; line-height: 24px; } .arco-tabs-nav-size-mini.arco-tabs-nav-type-rounded .arco-tabs-tab { padding-top: 3px; padding-bottom: 3px; font-size: 12px; } .arco-tabs-nav-size-mini.arco-tabs-nav-type-rounded .arco-tabs-nav-extra { font-size: 12px; line-height: 24px; } .arco-tabs-nav-size-small.arco-tabs-nav-type-line .arco-tabs-nav-extra { font-size: 14px; line-height: 36px; } .arco-tabs-nav-size-small.arco-tabs-nav-type-line .arco-tabs-tab { padding-top: 6px; padding-bottom: 6px; font-size: 14px; } .arco-tabs-nav-size-small.arco-tabs-nav-type-line .arco-tabs-nav-extra { font-size: 14px; line-height: 36px; } .arco-tabs-nav-size-small.arco-tabs-nav-type-card .arco-tabs-tab, .arco-tabs-nav-size-small.arco-tabs-nav-type-card-gutter .arco-tabs-tab { padding-top: 1px; padding-bottom: 1px; font-size: 14px; } .arco-tabs-nav-size-small.arco-tabs-nav-type-card .arco-tabs-nav-extra, .arco-tabs-nav-size-small.arco-tabs-nav-type-card-gutter .arco-tabs-nav-extra { font-size: 14px; line-height: 28px; } .arco-tabs-nav-size-small.arco-tabs-nav-type-card .arco-tabs-nav-add-btn, .arco-tabs-nav-size-small.arco-tabs-nav-type-card-gutter .arco-tabs-nav-add-btn { height: 28px; } .arco-tabs-nav-size-small.arco-tabs-nav-type-capsule .arco-tabs-tab { font-size: 14px; line-height: 24px; } .arco-tabs-nav-size-small.arco-tabs-nav-type-capsule .arco-tabs-nav-extra { font-size: 14px; line-height: 28px; } .arco-tabs-nav-size-small.arco-tabs-nav-type-rounded .arco-tabs-tab { padding-top: 3px; padding-bottom: 3px; font-size: 14px; } .arco-tabs-nav-size-small.arco-tabs-nav-type-rounded .arco-tabs-nav-extra { font-size: 14px; line-height: 28px; } .arco-tabs-nav-size-large.arco-tabs-nav-type-line .arco-tabs-nav-extra { font-size: 14px; line-height: 44px; } .arco-tabs-nav-size-large.arco-tabs-nav-type-line .arco-tabs-tab { padding-top: 10px; padding-bottom: 10px; font-size: 14px; } .arco-tabs-nav-size-large.arco-tabs-nav-type-line .arco-tabs-nav-extra { font-size: 14px; line-height: 44px; } .arco-tabs-nav-size-large.arco-tabs-nav-type-card .arco-tabs-tab, .arco-tabs-nav-size-large.arco-tabs-nav-type-card-gutter .arco-tabs-tab { padding-top: 5px; padding-bottom: 5px; font-size: 14px; } .arco-tabs-nav-size-large.arco-tabs-nav-type-card .arco-tabs-nav-extra, .arco-tabs-nav-size-large.arco-tabs-nav-type-card-gutter .arco-tabs-nav-extra { font-size: 14px; line-height: 36px; } .arco-tabs-nav-size-large.arco-tabs-nav-type-card .arco-tabs-nav-add-btn, .arco-tabs-nav-size-large.arco-tabs-nav-type-card-gutter .arco-tabs-nav-add-btn { height: 36px; } .arco-tabs-nav-size-large.arco-tabs-nav-type-capsule .arco-tabs-tab { font-size: 14px; line-height: 32px; } .arco-tabs-nav-size-large.arco-tabs-nav-type-capsule .arco-tabs-nav-extra { font-size: 14px; line-height: 36px; } .arco-tabs-nav-size-large.arco-tabs-nav-type-rounded .arco-tabs-tab { padding-top: 7px; padding-bottom: 7px; font-size: 14px; } .arco-tabs-nav-size-large.arco-tabs-nav-type-rounded .arco-tabs-nav-extra { font-size: 14px; line-height: 36px; } /* Vertical */ .arco-tabs-nav-vertical { float: left; height: 100%; } .arco-tabs-nav-vertical::before { position: absolute; top: 0; right: 0; bottom: 0; left: initial; clear: both; width: 1px; height: 100%; } .arco-tabs-nav-vertical .arco-tabs-nav-add-btn { height: auto; margin-top: 8px; margin-left: 0; padding: 0 16px; } .arco-tabs-nav-right { float: right; } .arco-tabs-nav-vertical { flex-direction: column; } .arco-tabs-nav-vertical .arco-tabs-nav-tab { flex-direction: column; height: 100%; } .arco-tabs-nav-vertical .arco-tabs-nav-ink { position: absolute; right: 0; bottom: initial; left: initial; width: 1.6px; transition: top 0.2s cubic-bezier(0.34, 0.69, 0.1, 1), height 0.2s cubic-bezier(0.34, 0.69, 0.1, 1); } .arco-tabs-nav-vertical .arco-tabs-nav-tab-list { height: auto; } .arco-tabs-nav-vertical .arco-tabs-nav-tab-list-overflow-scroll { padding: 6px 0; } .arco-tabs-nav-vertical .arco-tabs-tab { display: block; margin: 0; margin-top: 12px; white-space: nowrap; } .arco-tabs-nav-vertical .arco-tabs-tab:first-of-type { margin-top: 0; } .arco-tabs-nav-right::before { right: unset; left: 0; } .arco-tabs-nav-right .arco-tabs-nav-ink { right: unset; left: 0; } .arco-tabs-nav-vertical { position: relative; box-sizing: border-box; height: 100%; } .arco-tabs-nav-vertical.arco-tabs-nav-type-line .arco-tabs-tab { padding: 0 20px; } .arco-tabs-nav-vertical.arco-tabs-nav-type-card .arco-tabs-tab { position: relative; margin: 0; border: 1px solid var(--color-neutral-3); border-bottom-color: transparent; } .arco-tabs-nav-vertical.arco-tabs-nav-type-card .arco-tabs-tab:first-child { border-top-left-radius: var(--border-radius-small); } .arco-tabs-nav-vertical.arco-tabs-nav-type-card .arco-tabs-tab-active, .arco-tabs-nav-vertical.arco-tabs-nav-type-card .arco-tabs-tab-active:hover { border-right-color: var(--color-bg-2); border-bottom-color: transparent; } .arco-tabs-nav-vertical.arco-tabs-nav-type-card .arco-tabs-tab:last-child { border-bottom: 1px solid var(--color-neutral-3); border-bottom-left-radius: var(--border-radius-small); } .arco-tabs-nav-vertical.arco-tabs-nav-type-card-gutter .arco-tabs-tab { position: relative; margin-left: 0; border-radius: var(--border-radius-small) 0 0 var(--border-radius-small); } .arco-tabs-nav-vertical.arco-tabs-nav-type-card-gutter .arco-tabs-tab:not(:first-of-type) { margin-top: 4px; } .arco-tabs-nav-vertical.arco-tabs-nav-type-card-gutter .arco-tabs-tab-active, .arco-tabs-nav-vertical.arco-tabs-nav-type-card-gutter .arco-tabs-tab-active:hover { border-right-color: var(--color-bg-2); border-bottom-color: var(--color-neutral-3); } .arco-tabs-vertical .arco-tabs-content { width: auto; height: 100%; padding: 0; } .arco-tabs-right.arco-tabs-vertical .arco-tabs-content { padding-right: 16px; } .arco-tabs-left.arco-tabs-vertical .arco-tabs-content { padding-left: 16px; } .arco-tabs-vertical.arco-tabs-type-card > .arco-tabs-content, .arco-tabs-vertical.arco-tabs-type-card-gutter > .arco-tabs-content { border: 1px solid var(--color-border-2); border-left: none; } .arco-tabs-rtl { direction: rtl; } .arco-tabs-rtl.arco-tabs-left { flex-direction: row-reverse; } .arco-tabs-rtl.arco-tabs-right { flex-direction: row; } .arco-tabs-rtl .arco-tabs-close-icon { margin-right: 8px; margin-left: 0; } .arco-tabs-rtl .arco-tabs-left-icon, .arco-tabs-rtl .arco-tabs-right-icon { margin-right: 10px; margin-left: 6px; } .arco-tabs-rtl .arco-tabs-nav-type-line > .arco-tabs-nav-type-horizontal .arco-tabs-header-scroll > .arco-tabs-header-title:first-of-type { margin-right: 0; } .arco-tabs-rtl .arco-tabs-nav-type-line > .arco-tabs-nav-type-horizontal .arco-tabs-header-no-padding > .arco-tabs-header-title:first-of-type, .arco-tabs-rtl .arco-tabs-nav-type-text > .arco-tabs-nav-type-horizontal .arco-tabs-header-no-padding > .arco-tabs-header-title:first-of-type { margin-right: 0; } .arco-tabs-rtl .arco-tabs-nav-type-card .arco-tabs-header-title-editable, .arco-tabs-rtl .arco-tabs-nav-type-card-gutter .arco-tabs-header-title-editable { padding-right: 16px; padding-left: 12px; } .arco-tabs-rtl .arco-tabs-nav-type-card .arco-tabs-header-title { border-right: 1px solid var(--color-neutral-3); border-left: none; } .arco-tabs-rtl .arco-tabs-nav-type-card .arco-tabs-header-title:last-child { border-left: 1px solid var(--color-neutral-3); border-top-left-radius: var(--border-radius-small); border-top-right-radius: 0; } .arco-tabs-rtl .arco-tabs-nav-type-card .arco-tabs-header-title:first-child { border-top-left-radius: 0; border-top-right-radius: var(--border-radius-small); } .arco-tabs-rtl .arco-tabs-nav-type-card-gutter .arco-tabs-header-title { margin-right: 4px; } .arco-tabs-rtl .arco-tabs-nav-type-card-gutter .arco-tabs-header-title:first-child { margin-right: 0; } .arco-tabs-rtl .arco-tabs-nav-type-text .arco-tabs-header-title:not(:first-of-type)::before { right: -8.75px; left: initial; } .arco-tabs-rtl .arco-tabs-nav-type-capsule.arco-tabs-nav-type-horizontal .arco-tabs-header-title:not(:first-of-type) { margin-right: 3px; margin-left: 0; } .arco-tabs-rtl .arco-tabs-nav-type-capsule.arco-tabs-nav-type-horizontal .arco-tabs-header-title:not(:first-of-type)::before { right: -2px; left: initial; } body[arco-theme='dark'] .arco-tabs-nav-type-capsule .arco-tabs-tab-active { background-color: var(--color-fill-3); } body[arco-theme='dark'] .arco-tabs-nav-type-capsule .arco-tabs-tab:hover { background-color: var(--color-fill-3); } .arco-tag { display: inline-flex; align-items: center; box-sizing: border-box; height: 24px; padding: 0 8px; color: var(--color-text-1); font-weight: 500; font-size: 12px; line-height: 22px; vertical-align: middle; border: 1px solid transparent; border-radius: var(--border-radius-small); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .arco-tag .arco-icon-hover.arco-tag-icon-hover::before { width: 16px; height: 16px; } .arco-tag .arco-icon-hover.arco-tag-icon-hover:hover::before { background-color: var(--color-fill-3); } .arco-tag-checkable { cursor: pointer; transition: all 0.1s cubic-bezier(0, 0, 1, 1); } .arco-tag-checkable:hover { background-color: var(--color-fill-2); } .arco-tag-checked { background-color: var(--color-fill-2); border-color: transparent; } .arco-tag-checkable.arco-tag-checked:hover { background-color: var(--color-fill-3); border-color: transparent; } .arco-tag-bordered, .arco-tag-checkable.arco-tag-checked.arco-tag-bordered:hover { border-color: var(--color-border-3); } .arco-tag-size-small { height: 20px; font-size: 12px; line-height: 18px; } .arco-tag-size-medium { height: 24px; font-size: 12px; line-height: 22px; } .arco-tag-size-large { height: 32px; font-size: 14px; line-height: 30px; } .arco-tag-hide { display: none; } .arco-tag-loading { cursor: default; opacity: 0.8; } .arco-tag-icon { margin-right: 4px; color: var(--color-text-2); } .arco-tag-text { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .arco-tag.arco-tag-checked.arco-tag-red { color: rgb(var(--red-6)); background-color: rgb(var(--red-1)); border: 1px solid transparent; } .arco-tag.arco-tag-checked.arco-tag-red .arco-icon-hover.arco-tag-icon-hover:hover::before { background-color: rgb(var(--red-2)); } .arco-tag.arco-tag-checkable.arco-tag-checked.arco-tag-red.arco-tag:hover { background-color: rgb(var(--red-2)); border-color: transparent; } .arco-tag-checked.arco-tag-red.arco-tag-bordered, .arco-tag-checked.arco-tag-red.arco-tag-bordered:hover { border-color: rgb(var(--red-6)); } .arco-tag.arco-tag-checked.arco-tag-red .arco-tag-icon, .arco-tag.arco-tag-checked.arco-tag-red .arco-tag-close-btn, .arco-tag.arco-tag-checked.arco-tag-red .arco-tag-loading-icon { color: rgb(var(--red-6)); } .arco-tag.arco-tag-checked.arco-tag-orangered { color: rgb(var(--orangered-6)); background-color: rgb(var(--orangered-1)); border: 1px solid transparent; } .arco-tag.arco-tag-checked.arco-tag-orangered .arco-icon-hover.arco-tag-icon-hover:hover::before { background-color: rgb(var(--orangered-2)); } .arco-tag.arco-tag-checkable.arco-tag-checked.arco-tag-orangered.arco-tag:hover { background-color: rgb(var(--orangered-2)); border-color: transparent; } .arco-tag-checked.arco-tag-orangered.arco-tag-bordered, .arco-tag-checked.arco-tag-orangered.arco-tag-bordered:hover { border-color: rgb(var(--orangered-6)); } .arco-tag.arco-tag-checked.arco-tag-orangered .arco-tag-icon, .arco-tag.arco-tag-checked.arco-tag-orangered .arco-tag-close-btn, .arco-tag.arco-tag-checked.arco-tag-orangered .arco-tag-loading-icon { color: rgb(var(--orangered-6)); } .arco-tag.arco-tag-checked.arco-tag-orange { color: rgb(var(--orange-6)); background-color: rgb(var(--orange-1)); border: 1px solid transparent; } .arco-tag.arco-tag-checked.arco-tag-orange .arco-icon-hover.arco-tag-icon-hover:hover::before { background-color: rgb(var(--orange-2)); } .arco-tag.arco-tag-checkable.arco-tag-checked.arco-tag-orange.arco-tag:hover { background-color: rgb(var(--orange-2)); border-color: transparent; } .arco-tag-checked.arco-tag-orange.arco-tag-bordered, .arco-tag-checked.arco-tag-orange.arco-tag-bordered:hover { border-color: rgb(var(--orange-6)); } .arco-tag.arco-tag-checked.arco-tag-orange .arco-tag-icon, .arco-tag.arco-tag-checked.arco-tag-orange .arco-tag-close-btn, .arco-tag.arco-tag-checked.arco-tag-orange .arco-tag-loading-icon { color: rgb(var(--orange-6)); } .arco-tag.arco-tag-checked.arco-tag-gold { color: rgb(var(--gold-6)); background-color: rgb(var(--gold-1)); border: 1px solid transparent; } .arco-tag.arco-tag-checked.arco-tag-gold .arco-icon-hover.arco-tag-icon-hover:hover::before { background-color: rgb(var(--gold-2)); } .arco-tag.arco-tag-checkable.arco-tag-checked.arco-tag-gold.arco-tag:hover { background-color: rgb(var(--gold-3)); border-color: transparent; } .arco-tag-checked.arco-tag-gold.arco-tag-bordered, .arco-tag-checked.arco-tag-gold.arco-tag-bordered:hover { border-color: rgb(var(--gold-6)); } .arco-tag.arco-tag-checked.arco-tag-gold .arco-tag-icon, .arco-tag.arco-tag-checked.arco-tag-gold .arco-tag-close-btn, .arco-tag.arco-tag-checked.arco-tag-gold .arco-tag-loading-icon { color: rgb(var(--gold-6)); } .arco-tag.arco-tag-checked.arco-tag-lime { color: rgb(var(--lime-6)); background-color: rgb(var(--lime-1)); border: 1px solid transparent; } .arco-tag.arco-tag-checked.arco-tag-lime .arco-icon-hover.arco-tag-icon-hover:hover::before { background-color: rgb(var(--lime-2)); } .arco-tag.arco-tag-checkable.arco-tag-checked.arco-tag-lime.arco-tag:hover { background-color: rgb(var(--lime-2)); border-color: transparent; } .arco-tag-checked.arco-tag-lime.arco-tag-bordered, .arco-tag-checked.arco-tag-lime.arco-tag-bordered:hover { border-color: rgb(var(--lime-6)); } .arco-tag.arco-tag-checked.arco-tag-lime .arco-tag-icon, .arco-tag.arco-tag-checked.arco-tag-lime .arco-tag-close-btn, .arco-tag.arco-tag-checked.arco-tag-lime .arco-tag-loading-icon { color: rgb(var(--lime-6)); } .arco-tag.arco-tag-checked.arco-tag-green { color: rgb(var(--green-6)); background-color: rgb(var(--green-1)); border: 1px solid transparent; } .arco-tag.arco-tag-checked.arco-tag-green .arco-icon-hover.arco-tag-icon-hover:hover::before { background-color: rgb(var(--green-2)); } .arco-tag.arco-tag-checkable.arco-tag-checked.arco-tag-green.arco-tag:hover { background-color: rgb(var(--green-2)); border-color: transparent; } .arco-tag-checked.arco-tag-green.arco-tag-bordered, .arco-tag-checked.arco-tag-green.arco-tag-bordered:hover { border-color: rgb(var(--green-6)); } .arco-tag.arco-tag-checked.arco-tag-green .arco-tag-icon, .arco-tag.arco-tag-checked.arco-tag-green .arco-tag-close-btn, .arco-tag.arco-tag-checked.arco-tag-green .arco-tag-loading-icon { color: rgb(var(--green-6)); } .arco-tag.arco-tag-checked.arco-tag-cyan { color: rgb(var(--cyan-6)); background-color: rgb(var(--cyan-1)); border: 1px solid transparent; } .arco-tag.arco-tag-checked.arco-tag-cyan .arco-icon-hover.arco-tag-icon-hover:hover::before { background-color: rgb(var(--cyan-2)); } .arco-tag.arco-tag-checkable.arco-tag-checked.arco-tag-cyan.arco-tag:hover { background-color: rgb(var(--cyan-2)); border-color: transparent; } .arco-tag-checked.arco-tag-cyan.arco-tag-bordered, .arco-tag-checked.arco-tag-cyan.arco-tag-bordered:hover { border-color: rgb(var(--cyan-6)); } .arco-tag.arco-tag-checked.arco-tag-cyan .arco-tag-icon, .arco-tag.arco-tag-checked.arco-tag-cyan .arco-tag-close-btn, .arco-tag.arco-tag-checked.arco-tag-cyan .arco-tag-loading-icon { color: rgb(var(--cyan-6)); } .arco-tag.arco-tag-checked.arco-tag-blue { color: rgb(var(--blue-6)); background-color: rgb(var(--blue-1)); border: 1px solid transparent; } .arco-tag.arco-tag-checked.arco-tag-blue .arco-icon-hover.arco-tag-icon-hover:hover::before { background-color: rgb(var(--blue-2)); } .arco-tag.arco-tag-checkable.arco-tag-checked.arco-tag-blue.arco-tag:hover { background-color: rgb(var(--blue-2)); border-color: transparent; } .arco-tag-checked.arco-tag-blue.arco-tag-bordered, .arco-tag-checked.arco-tag-blue.arco-tag-bordered:hover { border-color: rgb(var(--blue-6)); } .arco-tag.arco-tag-checked.arco-tag-blue .arco-tag-icon, .arco-tag.arco-tag-checked.arco-tag-blue .arco-tag-close-btn, .arco-tag.arco-tag-checked.arco-tag-blue .arco-tag-loading-icon { color: rgb(var(--blue-6)); } .arco-tag.arco-tag-checked.arco-tag-arcoblue { color: rgb(var(--arcoblue-6)); background-color: rgb(var(--arcoblue-1)); border: 1px solid transparent; } .arco-tag.arco-tag-checked.arco-tag-arcoblue .arco-icon-hover.arco-tag-icon-hover:hover::before { background-color: rgb(var(--arcoblue-2)); } .arco-tag.arco-tag-checkable.arco-tag-checked.arco-tag-arcoblue.arco-tag:hover { background-color: rgb(var(--arcoblue-2)); border-color: transparent; } .arco-tag-checked.arco-tag-arcoblue.arco-tag-bordered, .arco-tag-checked.arco-tag-arcoblue.arco-tag-bordered:hover { border-color: rgb(var(--arcoblue-6)); } .arco-tag.arco-tag-checked.arco-tag-arcoblue .arco-tag-icon, .arco-tag.arco-tag-checked.arco-tag-arcoblue .arco-tag-close-btn, .arco-tag.arco-tag-checked.arco-tag-arcoblue .arco-tag-loading-icon { color: rgb(var(--arcoblue-6)); } .arco-tag.arco-tag-checked.arco-tag-purple { color: rgb(var(--purple-6)); background-color: rgb(var(--purple-1)); border: 1px solid transparent; } .arco-tag.arco-tag-checked.arco-tag-purple .arco-icon-hover.arco-tag-icon-hover:hover::before { background-color: rgb(var(--purple-2)); } .arco-tag.arco-tag-checkable.arco-tag-checked.arco-tag-purple.arco-tag:hover { background-color: rgb(var(--purple-2)); border-color: transparent; } .arco-tag-checked.arco-tag-purple.arco-tag-bordered, .arco-tag-checked.arco-tag-purple.arco-tag-bordered:hover { border-color: rgb(var(--purple-6)); } .arco-tag.arco-tag-checked.arco-tag-purple .arco-tag-icon, .arco-tag.arco-tag-checked.arco-tag-purple .arco-tag-close-btn, .arco-tag.arco-tag-checked.arco-tag-purple .arco-tag-loading-icon { color: rgb(var(--purple-6)); } .arco-tag.arco-tag-checked.arco-tag-pinkpurple { color: rgb(var(--pinkpurple-6)); background-color: rgb(var(--pinkpurple-1)); border: 1px solid transparent; } .arco-tag.arco-tag-checked.arco-tag-pinkpurple .arco-icon-hover.arco-tag-icon-hover:hover::before { background-color: rgb(var(--pinkpurple-2)); } .arco-tag.arco-tag-checkable.arco-tag-checked.arco-tag-pinkpurple.arco-tag:hover { background-color: rgb(var(--pinkpurple-2)); border-color: transparent; } .arco-tag-checked.arco-tag-pinkpurple.arco-tag-bordered, .arco-tag-checked.arco-tag-pinkpurple.arco-tag-bordered:hover { border-color: rgb(var(--pinkpurple-6)); } .arco-tag.arco-tag-checked.arco-tag-pinkpurple .arco-tag-icon, .arco-tag.arco-tag-checked.arco-tag-pinkpurple .arco-tag-close-btn, .arco-tag.arco-tag-checked.arco-tag-pinkpurple .arco-tag-loading-icon { color: rgb(var(--pinkpurple-6)); } .arco-tag.arco-tag-checked.arco-tag-magenta { color: rgb(var(--magenta-6)); background-color: rgb(var(--magenta-1)); border: 1px solid transparent; } .arco-tag.arco-tag-checked.arco-tag-magenta .arco-icon-hover.arco-tag-icon-hover:hover::before { background-color: rgb(var(--magenta-2)); } .arco-tag.arco-tag-checkable.arco-tag-checked.arco-tag-magenta.arco-tag:hover { background-color: rgb(var(--magenta-2)); border-color: transparent; } .arco-tag-checked.arco-tag-magenta.arco-tag-bordered, .arco-tag-checked.arco-tag-magenta.arco-tag-bordered:hover { border-color: rgb(var(--magenta-6)); } .arco-tag.arco-tag-checked.arco-tag-magenta .arco-tag-icon, .arco-tag.arco-tag-checked.arco-tag-magenta .arco-tag-close-btn, .arco-tag.arco-tag-checked.arco-tag-magenta .arco-tag-loading-icon { color: rgb(var(--magenta-6)); } .arco-tag.arco-tag-checked.arco-tag-gray { color: rgb(var(--gray-6)); background-color: rgb(var(--gray-2)); border: 1px solid transparent; } .arco-tag.arco-tag-checked.arco-tag-gray .arco-icon-hover.arco-tag-icon-hover:hover::before { background-color: rgb(var(--gray-3)); } .arco-tag.arco-tag-checkable.arco-tag-checked.arco-tag-gray.arco-tag:hover { background-color: rgb(var(--gray-3)); border-color: transparent; } .arco-tag-checked.arco-tag-gray.arco-tag-bordered, .arco-tag-checked.arco-tag-gray.arco-tag-bordered:hover { border-color: rgb(var(--gray-6)); } .arco-tag.arco-tag-checked.arco-tag-gray .arco-tag-icon, .arco-tag.arco-tag-checked.arco-tag-gray .arco-tag-close-btn, .arco-tag.arco-tag-checked.arco-tag-gray .arco-tag-loading-icon { color: rgb(var(--gray-6)); } .arco-tag.arco-tag-custom-color { color: var(--color-white); } .arco-tag.arco-tag-custom-color .arco-icon-hover.arco-tag-icon-hover:hover::before { background-color: rgba(255, 255, 255, 0.2); } .arco-tag .arco-tag-close-btn { margin-left: 4px; font-size: 12px; } .arco-tag .arco-tag-close-btn > svg { position: relative; } .arco-tag .arco-tag-loading-icon { margin-left: 4px; font-size: 12px; } body[arco-theme='dark'] .arco-tag-checked { color: rgba(255, 255, 255, 0.9); } body[arco-theme='dark'] .arco-tag-checked.arco-tag-red { background-color: rgba(var(--red-6), 0.2); } body[arco-theme='dark'] .arco-tag-checked.arco-tag-red .arco-icon-hover.arco-tag-icon-hover:hover::before { background-color: rgba(var(--red-6), 0.35); } body[arco-theme='dark'] .arco-tag-checkable.arco-tag-checked.arco-tag-red:hover { background-color: rgba(var(--red-6), 0.35); } body[arco-theme='dark'] .arco-tag-checked.arco-tag-orangered { background-color: rgba(var(--orangered-6), 0.2); } body[arco-theme='dark'] .arco-tag-checked.arco-tag-orangered .arco-icon-hover.arco-tag-icon-hover:hover::before { background-color: rgba(var(--orangered-6), 0.35); } body[arco-theme='dark'] .arco-tag-checkable.arco-tag-checked.arco-tag-orangered:hover { background-color: rgba(var(--orangered-6), 0.35); } body[arco-theme='dark'] .arco-tag-checked.arco-tag-orange { background-color: rgba(var(--orange-6), 0.2); } body[arco-theme='dark'] .arco-tag-checked.arco-tag-orange .arco-icon-hover.arco-tag-icon-hover:hover::before { background-color: rgba(var(--orange-6), 0.35); } body[arco-theme='dark'] .arco-tag-checkable.arco-tag-checked.arco-tag-orange:hover { background-color: rgba(var(--orange-6), 0.35); } body[arco-theme='dark'] .arco-tag-checked.arco-tag-gold { background-color: rgba(var(--gold-6), 0.2); } body[arco-theme='dark'] .arco-tag-checked.arco-tag-gold .arco-icon-hover.arco-tag-icon-hover:hover::before { background-color: rgba(var(--gold-6), 0.35); } body[arco-theme='dark'] .arco-tag-checkable.arco-tag-checked.arco-tag-gold:hover { background-color: rgba(var(--gold-6), 0.35); } body[arco-theme='dark'] .arco-tag-checked.arco-tag-lime { background-color: rgba(var(--lime-6), 0.2); } body[arco-theme='dark'] .arco-tag-checked.arco-tag-lime .arco-icon-hover.arco-tag-icon-hover:hover::before { background-color: rgba(var(--lime-6), 0.35); } body[arco-theme='dark'] .arco-tag-checkable.arco-tag-checked.arco-tag-lime:hover { background-color: rgba(var(--lime-6), 0.35); } body[arco-theme='dark'] .arco-tag-checked.arco-tag-green { background-color: rgba(var(--green-6), 0.2); } body[arco-theme='dark'] .arco-tag-checked.arco-tag-green .arco-icon-hover.arco-tag-icon-hover:hover::before { background-color: rgba(var(--green-6), 0.35); } body[arco-theme='dark'] .arco-tag-checkable.arco-tag-checked.arco-tag-green:hover { background-color: rgba(var(--green-6), 0.35); } body[arco-theme='dark'] .arco-tag-checked.arco-tag-cyan { background-color: rgba(var(--cyan-6), 0.2); } body[arco-theme='dark'] .arco-tag-checked.arco-tag-cyan .arco-icon-hover.arco-tag-icon-hover:hover::before { background-color: rgba(var(--cyan-6), 0.35); } body[arco-theme='dark'] .arco-tag-checkable.arco-tag-checked.arco-tag-cyan:hover { background-color: rgba(var(--cyan-6), 0.35); } body[arco-theme='dark'] .arco-tag-checked.arco-tag-blue { background-color: rgba(var(--blue-6), 0.2); } body[arco-theme='dark'] .arco-tag-checked.arco-tag-blue .arco-icon-hover.arco-tag-icon-hover:hover::before { background-color: rgba(var(--blue-6), 0.35); } body[arco-theme='dark'] .arco-tag-checkable.arco-tag-checked.arco-tag-blue:hover { background-color: rgba(var(--blue-6), 0.35); } body[arco-theme='dark'] .arco-tag-checked.arco-tag-arcoblue { background-color: rgba(var(--arcoblue-6), 0.2); } body[arco-theme='dark'] .arco-tag-checked.arco-tag-arcoblue .arco-icon-hover.arco-tag-icon-hover:hover::before { background-color: rgba(var(--arcoblue-6), 0.35); } body[arco-theme='dark'] .arco-tag-checkable.arco-tag-checked.arco-tag-arcoblue:hover { background-color: rgba(var(--arcoblue-6), 0.35); } body[arco-theme='dark'] .arco-tag-checked.arco-tag-purple { background-color: rgba(var(--purple-6), 0.2); } body[arco-theme='dark'] .arco-tag-checked.arco-tag-purple .arco-icon-hover.arco-tag-icon-hover:hover::before { background-color: rgba(var(--purple-6), 0.35); } body[arco-theme='dark'] .arco-tag-checkable.arco-tag-checked.arco-tag-purple:hover { background-color: rgba(var(--purple-6), 0.35); } body[arco-theme='dark'] .arco-tag-checked.arco-tag-pinkpurple { background-color: rgba(var(--pinkpurple-6), 0.2); } body[arco-theme='dark'] .arco-tag-checked.arco-tag-pinkpurple .arco-icon-hover.arco-tag-icon-hover:hover::before { background-color: rgba(var(--pinkpurple-6), 0.35); } body[arco-theme='dark'] .arco-tag-checkable.arco-tag-checked.arco-tag-pinkpurple:hover { background-color: rgba(var(--pinkpurple-6), 0.35); } body[arco-theme='dark'] .arco-tag-checked.arco-tag-magenta { background-color: rgba(var(--magenta-6), 0.2); } body[arco-theme='dark'] .arco-tag-checked.arco-tag-magenta .arco-icon-hover.arco-tag-icon-hover:hover::before { background-color: rgba(var(--magenta-6), 0.35); } body[arco-theme='dark'] .arco-tag-checkable.arco-tag-checked.arco-tag-magenta:hover { background-color: rgba(var(--magenta-6), 0.35); } body[arco-theme='dark'] .arco-tag-checked.arco-tag-gray { background-color: rgba(var(--gray-6), 0.2); } body[arco-theme='dark'] .arco-tag-checked.arco-tag-gray .arco-icon-hover.arco-tag-icon-hover:hover::before { background-color: rgba(var(--gray-6), 0.35); } body[arco-theme='dark'] .arco-tag-checkable.arco-tag-checked.arco-tag-gray:hover { background-color: rgba(var(--gray-6), 0.35); } .arco-tag-rtl { direction: rtl; } .arco-tag-rtl .arco-tag-icon { margin-right: 0; margin-left: 4px; } .arco-tag-rtl .arco-tag-close-btn, .arco-tag-rtl .arco-tag-loading-icon { margin-right: 4px; margin-left: 0; } .arco-textarea-wrapper { display: inline-flex; box-sizing: border-box; padding-right: 12px; padding-left: 12px; color: var(--color-text-1); font-size: 14px; background-color: transparent; border: 1px solid var(--color-border-3); border-radius: var(--border-radius-small); cursor: text; transition: color 0.1s cubic-bezier(0, 0, 1, 1), border-color 0.1s cubic-bezier(0, 0, 1, 1), background-color 0.1s cubic-bezier(0, 0, 1, 1); position: relative; display: inline-block; width: 100%; padding-right: 0; padding-left: 0; overflow: hidden; } .arco-textarea-wrapper:hover { background-color: transparent; border-color: var(--color-border-4); } .arco-textarea-wrapper:focus-within, .arco-textarea-wrapper.arco-textarea-focus { z-index: 1; background-color: var(--color-bg-2); border-color: rgb(var(--primary-6)); box-shadow: 0 0 0 0 var(--color-primary-light-2); } .arco-textarea-wrapper.arco-textarea-disabled { color: var(--color-text-4); background-color: var(--color-fill-1); border-color: var(--color-border-2); cursor: not-allowed; } .arco-textarea-wrapper.arco-textarea-disabled:hover { color: var(--color-text-4); background-color: var(--color-fill-1); border-color: var(--color-border-2); } .arco-textarea-wrapper.arco-textarea-disabled .arco-textarea-prefix, .arco-textarea-wrapper.arco-textarea-disabled .arco-textarea-suffix { color: inherit; } .arco-textarea-wrapper.arco-textarea-error { background-color: var(--color-bg-2); border-color: rgb(var(--danger-6)); } .arco-textarea-wrapper.arco-textarea-error:hover { background-color: var(--color-bg-2); border-color: rgb(var(--danger-5)); } .arco-textarea-wrapper.arco-textarea-error:focus-within, .arco-textarea-wrapper.arco-textarea-error.arco-textarea-wrapper-focus { z-index: 1; background-color: var(--color-bg-2); border-color: rgb(var(--danger-6)); box-shadow: 0 0 0 0 var(--color-danger-light-2); } .arco-textarea-wrapper .arco-textarea-prefix, .arco-textarea-wrapper .arco-textarea-suffix { display: inline-flex; flex-shrink: 0; align-items: center; white-space: nowrap; user-select: none; } .arco-textarea-wrapper .arco-textarea-prefix > svg, .arco-textarea-wrapper .arco-textarea-suffix > svg { font-size: 14px; } .arco-textarea-wrapper .arco-textarea-prefix { padding-right: 12px; color: var(--color-text-2); } .arco-textarea-wrapper .arco-textarea-suffix { padding-left: 12px; color: var(--color-text-2); } .arco-textarea-wrapper .arco-textarea-suffix .arco-feedback-icon { display: inline-flex; } .arco-textarea-wrapper .arco-textarea-suffix .arco-feedback-icon-status-validating { color: rgb(var(--primary-6)); } .arco-textarea-wrapper .arco-textarea-suffix .arco-feedback-icon-status-success { color: rgb(var(--success-6)); } .arco-textarea-wrapper .arco-textarea-suffix .arco-feedback-icon-status-warning { color: rgb(var(--warning-6)); } .arco-textarea-wrapper .arco-textarea-suffix .arco-feedback-icon-status-error { color: rgb(var(--danger-6)); } .arco-textarea-wrapper .arco-textarea-clear-btn { align-self: center; color: var(--color-text-2); font-size: 12px; visibility: hidden; cursor: pointer; } .arco-textarea-wrapper .arco-textarea-clear-btn > svg { position: relative; transition: color 0.1s cubic-bezier(0, 0, 1, 1); } .arco-textarea-wrapper:hover .arco-textarea-clear-btn { visibility: visible; } .arco-textarea-wrapper:not(.arco-textarea-focus) .arco-textarea-icon-hover:hover::before { background-color: var(--color-fill-4); } .arco-textarea-wrapper .arco-textarea-word-limit { position: absolute; right: 10px; bottom: 6px; color: var(--color-text-3); font-size: 12px; user-select: none; } .arco-textarea-wrapper.arco-textarea-scroll .arco-textarea-word-limit { right: 25px; } .arco-textarea-wrapper .arco-textarea-clear-btn { position: absolute; top: 50%; right: 10px; transform: translateY(-50%); } .arco-textarea-wrapper.arco-textarea-scroll .arco-textarea-clear-btn { right: 25px; } .arco-textarea-wrapper:hover .arco-textarea-clear-btn { display: block; } .arco-textarea-wrapper .arco-textarea-mirror { position: absolute; visibility: hidden; } .arco-textarea { width: 100%; padding-right: 0; padding-left: 0; color: inherit; background: none; border: none; border-radius: 0; outline: none; cursor: inherit; -webkit-appearance: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); display: block; box-sizing: border-box; height: 100%; min-height: 32px; padding: 4px 12px; font-size: 14px; line-height: 1.5715; vertical-align: top; resize: vertical; } .arco-textarea::placeholder { color: var(--color-text-4); } .arco-textarea[disabled]::placeholder { color: var(--color-text-4); } .arco-textarea[disabled] { -webkit-text-fill-color: var(--color-text-4); } .arco-timepicker { position: relative; display: flex; box-sizing: border-box; padding: 0; } .arco-timepicker-container { overflow: hidden; background-color: var(--color-bg-popup); border: 1px solid var(--color-neutral-3); border-radius: var(--border-radius-medium); box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); } .arco-timepicker-column { box-sizing: border-box; width: 64px; height: 224px; overflow: hidden; } .arco-timepicker-column:not(:last-child) { border-right: 1px solid var(--color-neutral-3); } .arco-timepicker-column:hover { overflow-y: auto; } .arco-timepicker-column ul { box-sizing: border-box; margin: 0; padding: 0; list-style: none; } .arco-timepicker-column ul::after { display: block; width: 100%; height: 192px; content: ''; } .arco-timepicker-cell { padding: 4px 0; color: var(--color-text-1); font-weight: 500; cursor: pointer; } .arco-timepicker-cell-inner { height: 24px; padding-left: 24px; font-size: 14px; line-height: 24px; } .arco-timepicker-cell:not(.arco-timepicker-cell-selected):not(.arco-timepicker-cell-disabled):hover .arco-timepicker-cell-inner { background-color: var(--color-fill-2); } .arco-timepicker-cell-selected .arco-timepicker-cell-inner { font-weight: 500; background-color: var(--color-fill-2); } .arco-timepicker-cell-disabled { color: var(--color-text-4); cursor: not-allowed; } .arco-timepicker-footer-extra-wrapper { padding: 8px; color: var(--color-text-1); font-size: 12px; border-top: 1px solid var(--color-neutral-3); } .arco-timepicker-footer-btn-wrapper { display: flex; justify-content: space-between; padding: 8px; border-top: 1px solid var(--color-neutral-3); } .arco-timepicker-footer-btn-wrapper :only-child { margin-left: auto; } .arco-timeline { display: flex; flex-direction: column; } .arco-timeline-item { position: relative; min-height: 78px; padding-left: 6px; color: var(--color-text-1); font-size: 14px; } .arco-timeline-item-label { color: var(--color-text-3); font-size: 12px; line-height: 1.667; } .arco-timeline-item-content { margin-bottom: 4px; color: var(--color-text-1); font-size: 14px; line-height: 1.5715; } .arco-timeline-item-content-wrapper { position: relative; margin-left: 16px; } .arco-timeline-item.arco-timeline-item-last > .arco-timeline-item-dot-wrapper .arco-timeline-item-dot-line { display: none; } .arco-timeline-item-dot-wrapper { position: absolute; left: 0; height: 100%; text-align: center; } .arco-timeline-item-dot-wrapper .arco-timeline-item-dot-content { position: relative; width: 6px; height: 22.001px; line-height: 22.001px; } .arco-timeline-item-dot { position: relative; top: 50%; box-sizing: border-box; width: 6px; height: 6px; margin-top: -50%; color: rgb(var(--primary-6)); border-radius: var(--border-radius-circle); } .arco-timeline-item-dot-solid { background-color: rgb(var(--primary-6)); } .arco-timeline-item-dot-hollow { background-color: var(--color-bg-2); border: 2px solid rgb(var(--primary-6)); } .arco-timeline-item-dot-custom { position: absolute; top: 50%; left: 50%; display: inline-flex; box-sizing: border-box; color: rgb(var(--primary-6)); background-color: var(--color-bg-2); transform: translateX(-50%) translateY(-50%); transform-origin: center; } .arco-timeline-item-dot-custom svg { color: inherit; } .arco-timeline-item-dot-line { position: absolute; top: 18.0005px; bottom: -4.0005px; left: 50%; box-sizing: border-box; width: 1px; border-color: var(--color-neutral-3); border-left-width: 1px; transform: translateX(-50%); } /* reverse */ .arco-timeline-is-reverse { flex-direction: column-reverse; } /* mode */ .arco-timeline-alternate { overflow: hidden; } .arco-timeline-alternate .arco-timeline-item-vertical-left { padding-left: 0; } .arco-timeline-alternate .arco-timeline-item-vertical-left > .arco-timeline-item-dot-wrapper { left: 50%; } .arco-timeline-alternate .arco-timeline-item-vertical-left > .arco-timeline-item-content-wrapper { left: 50%; width: 50%; margin-left: 22px; padding-right: 22px; } .arco-timeline-alternate .arco-timeline-item-vertical-right { padding-right: 0; } .arco-timeline-alternate .arco-timeline-item-vertical-right > .arco-timeline-item-dot-wrapper { left: 50%; } .arco-timeline-alternate .arco-timeline-item-vertical-right > .arco-timeline-item-content-wrapper { left: 0; width: 50%; margin-right: 0; margin-left: -16px; padding-right: 16px; text-align: right; } .arco-timeline-right .arco-timeline-item-vertical-right { padding-right: 6px; } .arco-timeline-right .arco-timeline-item-vertical-right > .arco-timeline-item-dot-wrapper { right: 0; left: unset; } .arco-timeline-right .arco-timeline-item-vertical-right > .arco-timeline-item-content-wrapper { margin-right: 16px; margin-left: 0; text-align: right; } /* label position */ .arco-timeline-item-label-relative > .arco-timeline-item-label { position: absolute; top: 0; box-sizing: border-box; max-width: 100px; } .arco-timeline-item-vertical-left.arco-timeline-item-label-relative { margin-left: 100px; } .arco-timeline-item-vertical-left.arco-timeline-item-label-relative > .arco-timeline-item-label { left: 0; padding-right: 16px; text-align: right; transform: translateX(-100%); } .arco-timeline-item-vertical-right.arco-timeline-item-label-relative { margin-right: 100px; } .arco-timeline-item-vertical-right.arco-timeline-item-label-relative > .arco-timeline-item-label { right: 0; padding-left: 16px; text-align: left; transform: translateX(100%); } .arco-timeline-item-horizontal-top.arco-timeline-item-label-relative { margin-top: 50px; } .arco-timeline-item-horizontal-top.arco-timeline-item-label-relative > .arco-timeline-item-label { padding-bottom: 16px; transform: translateY(-100%); } .arco-timeline-item-horizontal-top.arco-timeline-item-label-relative > .arco-timeline-item-content { margin-bottom: 0; } .arco-timeline-item-horizontal-bottom.arco-timeline-item-label-relative { margin-bottom: 50px; } .arco-timeline-item-horizontal-bottom.arco-timeline-item-label-relative > .arco-timeline-item-content { margin-bottom: 0; } .arco-timeline-item-horizontal-bottom.arco-timeline-item-label-relative > .arco-timeline-item-label { top: unset; bottom: 0; padding-top: 16px; text-align: left; transform: translateY(100%); } .arco-timeline-alternate .arco-timeline-item-vertical-left.arco-timeline-item-label-relative { margin-left: 0; } .arco-timeline-alternate .arco-timeline-item-vertical-left.arco-timeline-item-label-relative > .arco-timeline-item-label { left: 0; width: 50%; max-width: unset; transform: none; } .arco-timeline-alternate .arco-timeline-item-vertical-right.arco-timeline-item-label-relative { margin-right: 0; } .arco-timeline-alternate .arco-timeline-item-vertical-right.arco-timeline-item-label-relative > .arco-timeline-item-label { right: 0; width: 50%; max-width: unset; transform: none; } .arco-timeline-alternate .arco-timeline-item-horizontal-top.arco-timeline-item-label-relative { margin-top: 0; } .arco-timeline-alternate .arco-timeline-item-horizontal-bottom.arco-timeline-item-label-relative { margin-bottom: 0; } .arco-timeline-direction-horizontal { display: flex; flex-direction: row; } .arco-timeline-direction-horizontal.arco-timeline-is-reverse { flex-direction: row-reverse; } .arco-timeline-item-dot-line-is-horizontal { top: 50%; right: 4px; left: 12px; width: unset; height: 1px; border-top-width: 1px; border-left: none; transform: translateY(-50%); } .arco-timeline-item-horizontal-bottom, .arco-timeline-item-horizontal-top { flex: 1; min-height: unset; padding-right: 0; padding-left: 0; } .arco-timeline-item-horizontal-bottom > .arco-timeline-item-dot-wrapper, .arco-timeline-item-horizontal-top > .arco-timeline-item-dot-wrapper { top: 0; width: 100%; height: auto; } .arco-timeline-item-horizontal-bottom > .arco-timeline-item-dot-wrapper .arco-timeline-item-dot, .arco-timeline-item-horizontal-top > .arco-timeline-item-dot-wrapper .arco-timeline-item-dot { top: unset; margin-top: unset; } .arco-timeline-item-horizontal-bottom > .arco-timeline-item-dot-wrapper .arco-timeline-item-dot-content, .arco-timeline-item-horizontal-top > .arco-timeline-item-dot-wrapper .arco-timeline-item-dot-content { height: 6px; line-height: 6px; } .arco-timeline-item-horizontal-top { padding-top: 6px; } .arco-timeline-item-horizontal-top > .arco-timeline-item-dot-wrapper { top: 0; bottom: unset; } .arco-timeline-item-horizontal-top > .arco-timeline-item-content-wrapper { margin-top: 16px; margin-left: 0; } .arco-timeline-item-horizontal-bottom { padding-bottom: 6px; } .arco-timeline-item-horizontal-bottom > .arco-timeline-item-dot-wrapper { top: unset; bottom: 0; } .arco-timeline-item-horizontal-bottom > .arco-timeline-item-content-wrapper { margin-bottom: 16px; margin-left: 0; } .arco-timeline-alternate.arco-timeline-direction-horizontal { align-items: center; min-height: 200px; overflow: visible; } .arco-timeline-alternate.arco-timeline-direction-horizontal .arco-timeline-item-horizontal-bottom { margin-top: 6px; transform: translateY(-50%); } .arco-timeline-alternate.arco-timeline-direction-horizontal .arco-timeline-item-horizontal-top { margin-top: -6px; transform: translateY(50%); } .arco-tooltip-content { max-width: 350px; padding: 6px 12px; color: #fff; font-size: 14px; line-height: 1.5715; text-align: left; word-wrap: break-word; background-color: var(--color-tooltip-bg); border-radius: 4px; } .arco-tooltip-mini { padding: 4px 10px; font-size: 12px; } .arco-tooltip-popup-arrow { background-color: var(--color-tooltip-bg); } .arco-transfer { display: flex; align-items: center; } .arco-transfer-view { display: flex; flex-direction: column; box-sizing: border-box; width: 200px; height: 250px; border: 1px solid var(--color-border-2); border-radius: var(--border-radius-small); } .arco-transfer-view-search { padding: 8px 12px 4px 12px; } .arco-transfer-view-list { flex: 1; } .arco-transfer-view-custom-list { flex: 1; overflow: auto; } .arco-transfer-view-header { display: flex; align-items: center; padding: 0 10px; } .arco-transfer-view-header > *:first-child { flex: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .arco-transfer-view-header > *:first-child:not(:last-child) { margin-right: 8px; } .arco-transfer-view-header { height: 40px; color: var(--color-text-1); font-weight: 500; font-size: 14px; line-height: 40px; background-color: var(--color-fill-1); } .arco-transfer-view-header-title { display: flex; align-items: center; } .arco-transfer-view-header-title .arco-checkbox { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: inherit; } .arco-transfer-view-header-title .arco-checkbox-text { color: inherit; } .arco-transfer-view-header-title .arco-checkbox-label { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .arco-transfer-view-header-title-simple { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .arco-transfer-view-header-clear-btn { color: var(--color-text-2); font-size: 12px; cursor: pointer; } .arco-transfer-view-header-clear-btn:hover::before { background-color: var(--color-fill-3); } .arco-transfer-view-header-count { margin-right: 2px; color: var(--color-text-3); font-weight: normal; font-size: 12px; } .arco-transfer-view-body { flex: 1 1 auto; overflow: hidden; } .arco-transfer-view-body .arco-transfer-view-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%; } .arco-transfer-view .arco-scrollbar { height: 100%; } .arco-transfer-view .arco-scrollbar-container { height: 100%; overflow: auto; } .arco-transfer-view .arco-list { border-radius: 0; } .arco-transfer-view .arco-list-footer { position: relative; display: flex; align-items: center; box-sizing: border-box; height: 40px; padding: 0 8px; } .arco-transfer-view .arco-list .arco-pagination { position: absolute; top: 50%; right: 8px; margin: 0; transform: translateY(-50%); } .arco-transfer-view .arco-list .arco-pagination-jumper-input { width: 24px; } .arco-transfer-view .arco-list .arco-pagination-jumper-separator { padding: 0 8px; } .arco-transfer-view .arco-checkbox { padding-left: 6px; } .arco-transfer-view .arco-checkbox-wrapper { display: inline; } .arco-transfer-view .arco-checkbox .arco-icon-hover:hover::before { background-color: var(--color-fill-3); } .arco-transfer-list-item { position: relative; display: flex; align-items: center; height: 36px; padding: 0 10px; color: var(--color-text-1); line-height: 36px; list-style: none; background-color: transparent; cursor: default; } .arco-transfer-list-item-content { font-size: 14px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .arco-transfer-list-item-checkbox .arco-checkbox-label { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .arco-transfer-list-item-disabled { color: var(--color-text-4); background-color: transparent; cursor: not-allowed; } .arco-transfer-list-item:not(.arco-transfer-list-item-disabled):hover { color: var(--color-text-1); background-color: var(--color-fill-2); } .arco-transfer-list-item .arco-checkbox { width: 100%; } .arco-transfer-list-item .arco-checkbox-text { color: inherit; } .arco-transfer-list-item-remove-btn { margin-left: auto; color: var(--color-text-2); font-size: 12px; cursor: pointer; } .arco-transfer-list-item-remove-btn:hover::before { background-color: var(--color-fill-3); } .arco-transfer-list-item-draggable::before { position: absolute; right: 0; left: 0; display: block; height: 2px; border-radius: 1px; content: ''; } .arco-transfer-list-item-gap-bottom::before { bottom: -2px; background-color: rgb(var(--primary-6)); } .arco-transfer-list-item-gap-top::before { top: -2px; background-color: rgb(var(--primary-6)); } .arco-transfer-list-item-dragging { color: var(--color-text-4) !important; background-color: var(--color-fill-1) !important; } .arco-transfer-list-item-dragged { animation: arco-transfer-drag-item-blink 0.4s; animation-timing-function: cubic-bezier(0, 0, 1, 1); } .arco-transfer-operations { padding: 0 20px; } .arco-transfer-operations .arco-btn { display: block; } .arco-transfer-operations .arco-btn:last-child { margin-top: 12px; } .arco-transfer-operations-words .arco-btn { width: 100%; padding: 0 12px; text-align: left; } .arco-transfer-simple .arco-transfer-view-source { border-right: none; border-top-right-radius: 0; border-bottom-right-radius: 0; } .arco-transfer-simple .arco-transfer-view-target { border-top-left-radius: 0; border-bottom-left-radius: 0; } .arco-transfer-disabled .arco-transfer-view-header { color: var(--color-text-4); } @keyframes arco-transfer-drag-item-blink { 0% { background-color: var(--color-primary-light-1); } 100% { background-color: transparent; } } .arco-tree-select-popup { box-sizing: border-box; padding: 4px 0; background-color: var(--color-bg-popup); border: 1px solid var(--color-fill-3); border-radius: var(--border-radius-medium); box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); } .arco-tree-select-popup .arco-tree-select-tree-wrapper { height: 100%; max-height: 200px; padding-right: 4px; padding-left: 10px; overflow: auto; } .arco-tree-select-popup .arco-tree-node { padding-left: 0; } .arco-tree-select-highlight { font-weight: 500; } .arco-tree-select-has-header { padding-top: 0; } .arco-tree-select-header { border-bottom: 1px solid var(--color-fill-3); } .arco-tree-select-has-footer { padding-bottom: 0; } .arco-tree-select-footer { border-top: 1px solid var(--color-fill-3); } /******* icon ******/ .arco-icon-hover.arco-tree-node-icon-hover::before { width: 16px; height: 16px; } .arco-tree-node-switcher { position: relative; display: flex; flex-shrink: 0; align-items: center; width: 12px; height: 32px; margin-right: 10px; color: var(--color-text-2); font-size: 12px; cursor: pointer; user-select: none; } .arco-tree-node-switcher-icon { position: relative; margin: 0 auto; } .arco-tree-node-switcher-icon svg { position: relative; transform: rotate(-90deg); transition: transform 0.2s cubic-bezier(0.34, 0.69, 0.1, 1); } .arco-tree-node-expanded .arco-tree-node-switcher-icon svg, .arco-tree-node-is-leaf .arco-tree-node-switcher-icon svg { transform: rotate(0); } .arco-tree-node-drag-icon { margin-left: 120px; color: rgb(var(--primary-6)); opacity: 0; } .arco-tree-node-custom-icon { margin-right: 10px; font-size: inherit; line-height: 1; cursor: pointer; user-select: none; } .arco-tree-node .arco-icon-loading { color: rgb(var(--primary-6)); } .arco-tree-node-minus-icon, .arco-tree-node-plus-icon { position: relative; display: block; width: 16px; height: 16px; background: var(--color-fill-2); border-radius: var(--border-radius-small); cursor: pointer; } .arco-tree-node-minus-icon::after, .arco-tree-node-plus-icon::after { position: absolute; top: 50%; left: 50%; display: block; width: 8px; height: 2px; margin-top: -1px; margin-left: -4px; color: var(--color-text-2); background-color: var(--color-text-2); border-radius: 0.5px; content: ''; } .arco-tree-node-plus-icon::before { position: absolute; top: 50%; left: 50%; display: block; width: 2px; height: 8px; margin-top: -4px; margin-left: -1px; color: var(--color-text-2); background-color: var(--color-text-2); border-radius: 0.5px; content: ''; } /******* tree ***********/ .arco-tree { color: var(--color-text-1); } .arco-tree .arco-checkbox { margin-right: 10px; padding-left: 0; line-height: 32px; } .arco-tree-node { position: relative; display: flex; flex-wrap: nowrap; align-items: center; padding-left: 2px; color: var(--color-text-1); line-height: 1.5715; cursor: pointer; } .arco-tree-node-selected .arco-tree-node-title, .arco-tree-node-selected .arco-tree-node-title:hover { color: rgb(var(--primary-6)); transition: color 0.2s cubic-bezier(0, 0, 1, 1); } .arco-tree-node-disabled-selectable .arco-tree-node-title, .arco-tree-node-disabled .arco-tree-node-title, .arco-tree-node-disabled-selectable .arco-tree-node-title:hover, .arco-tree-node-disabled .arco-tree-node-title:hover { color: var(--color-text-4); background: none; cursor: not-allowed; } .arco-tree-node-disabled.arco-tree-node-selected .arco-tree-node-title { color: var(--color-primary-light-3); } .arco-tree-node-title-block { flex: 1; box-sizing: content-box; } .arco-tree-node-title-block .arco-tree-node-drag-icon { position: absolute; right: 12px; } .arco-tree-node-indent { position: relative; flex-shrink: 0; align-self: stretch; } .arco-tree-node-indent-block { position: relative; display: inline-block; width: 12px; height: 100%; margin-right: 10px; vertical-align: top; } .arco-tree-node-draggable { margin-top: 2px; } .arco-tree-node-title { position: relative; display: flex; align-items: center; margin-left: -4px; padding: 5px 0; padding-right: 4px; padding-left: 4px; font-size: 14px; border-radius: var(--border-radius-small); } .arco-tree-node-title:hover { color: var(--color-text-1); background-color: var(--color-fill-2); } .arco-tree-node-title:hover .arco-tree-node-drag-icon { opacity: 1; } .arco-tree-node-title-draggable::before { position: absolute; top: -2px; right: 0; left: 0; display: block; height: 2px; border-radius: 1px; content: ''; } .arco-tree-node-title-gap-bottom::before { top: unset; bottom: -2px; background-color: rgb(var(--primary-6)); } .arco-tree-node-title-gap-top::before { background-color: rgb(var(--primary-6)); } .arco-tree-node-title-highlight { color: var(--color-text-1); background-color: var(--color-primary-light-1); } .arco-tree-node-title-dragging, .arco-tree-node-title-dragging:hover { color: var(--color-text-4); background-color: var(--color-fill-1); } .arco-tree-show-line { padding-left: 0px; } .arco-tree-show-line .arco-tree-node-switcher { width: 16px; text-align: center; } .arco-tree-show-line .arco-tree-node-switcher .arco-tree-node-icon-hover { width: 100%; } .arco-tree-show-line .arco-tree-node-indent-block { width: 16px; } .arco-tree-show-line .arco-tree-node-indent-block::before { position: absolute; left: 50%; box-sizing: border-box; width: 1px; border-left: 1px solid var(--color-border-2); transform: translateX(-50%); content: ''; top: -4px; bottom: -4px; } .arco-tree-show-line .arco-tree-node-is-leaf:not(.arco-tree-node-is-tail) .arco-tree-node-indent::after { position: absolute; right: -8px; box-sizing: border-box; width: 1px; border-left: 1px solid var(--color-border-2); transform: translateX(50%); content: ''; top: 28px; bottom: -4px; } .arco-tree-show-line .arco-tree-node-indent-block-lineless:before { display: none; } /******** size *******/ .arco-tree-size-mini .arco-tree-node-switcher { height: 24px; } .arco-tree-size-mini .arco-checkbox { line-height: 24px; } .arco-tree-size-mini .arco-tree-node-title { padding-top: 2px; padding-bottom: 2px; font-size: 12px; line-height: 1.667; } .arco-tree-size-mini .arco-tree-node-indent-block::after { top: 24px; bottom: 0px; } .arco-tree-size-mini .arco-tree-node-is-leaf:not(.arco-tree-node-is-tail) .arco-tree-node-indent::before { top: 0px; bottom: 0px; } .arco-tree-size-small .arco-tree-node-switcher { height: 28px; } .arco-tree-size-small .arco-checkbox { line-height: 28px; } .arco-tree-size-small .arco-tree-node-title { padding-top: 3px; padding-bottom: 3px; font-size: 14px; } .arco-tree-size-small .arco-tree-node-indent-block::after { top: 26px; bottom: -2px; } .arco-tree-size-small .arco-tree-node-is-leaf:not(.arco-tree-node-is-tail) .arco-tree-node-indent::before { top: -2px; bottom: -2px; } .arco-tree-size-large .arco-tree-node-switcher { height: 36px; } .arco-tree-size-large .arco-checkbox { line-height: 36px; } .arco-tree-size-large .arco-tree-node-title { padding-top: 7px; padding-bottom: 7px; font-size: 14px; } .arco-tree-size-large .arco-tree-node-indent-block::after { top: 30px; bottom: -6px; } .arco-tree-size-large .arco-tree-node-is-leaf:not(.arco-tree-node-is-tail) .arco-tree-node-indent::before { top: -6px; bottom: -6px; } .arco-tree-node-list { overflow: hidden; transition: height 0.2s cubic-bezier(0.34, 0.69, 0.1, 1); } .arco-typography { color: var(--color-text-1); line-height: 1.5715; white-space: normal; overflow-wrap: anywhere; } h1.arco-typography, h2.arco-typography, h3.arco-typography, h4.arco-typography, h5.arco-typography, h6.arco-typography { margin-top: 1em; margin-bottom: 0.5em; font-weight: 500; } h1.arco-typography { font-size: 36px; line-height: 1.23; } h2.arco-typography { font-size: 32px; line-height: 1.25; } h3.arco-typography { font-size: 28px; line-height: 1.29; } h4.arco-typography { font-size: 24px; line-height: 1.33; } h5.arco-typography { font-size: 20px; line-height: 1.4; } h6.arco-typography { font-size: 16px; line-height: 1.5; } div.arco-typography, p.arco-typography { margin-top: 0; margin-bottom: 1em; } .arco-typography-primary { color: rgb(var(--primary-6)); } .arco-typography-secondary { color: var(--color-text-2); } .arco-typography-success { color: rgb(var(--success-6)); } .arco-typography-warning { color: rgb(var(--warning-6)); } .arco-typography-danger { color: rgb(var(--danger-6)); } .arco-typography-disabled { color: var(--color-text-4); cursor: not-allowed; } .arco-typography mark { background-color: rgb(var(--yellow-4)); } .arco-typography u { text-decoration: underline; } .arco-typography del { text-decoration: line-through; } .arco-typography b { font-weight: 500; } .arco-typography code { margin: 0 2px; padding: 2px 8px; color: var(--color-text-2); font-size: 85%; background-color: var(--color-neutral-2); border: 1px solid var(--color-neutral-3); border-radius: 2px; } .arco-typography blockquote { margin: 0; margin-bottom: 1em; padding-left: 8px; background-color: var(--color-bg-2); border-left: 2px solid var(--color-neutral-6); } .arco-typography ol, .arco-typography ul { margin: 0; padding: 0; } .arco-typography ul li, .arco-typography ol li { margin-left: 20px; } .arco-typography ul { list-style: circle; } .arco-typography-spacing-close { line-height: 1.3; } .arco-typography-operation-copy, .arco-typography-operation-copied { margin-left: 2px; padding: 2px; } .arco-typography-operation-copy { color: var(--color-text-2); background-color: transparent; border-radius: 2px; cursor: pointer; transition: background-color 0.1s cubic-bezier(0, 0, 1, 1); } .arco-typography-operation-copy:hover { color: var(--color-text-2); background-color: var(--color-fill-2); } .arco-typography-operation-copied { color: rgb(var(--success-6)); } .arco-typography-operation-edit { margin-left: 2px; padding: 2px; color: var(--color-text-2); background-color: transparent; border-radius: 2px; cursor: pointer; transition: background-color 0.1s cubic-bezier(0, 0, 1, 1); } .arco-typography-operation-edit:hover { color: var(--color-text-2); background-color: var(--color-fill-2); } .arco-typography-operation-expand { margin: 0 4px; color: rgb(var(--primary-6)); cursor: pointer; } .arco-typography-operation-expand:hover { color: rgb(var(--primary-5)); } .arco-typography-edit-content { position: relative; left: -13px; margin-top: -5px; margin-right: -13px; margin-bottom: calc(1em - 4px - 1px); } .arco-typography-css-operation { margin-top: -1em; margin-bottom: 1em; text-align: right; } .arco-upload { display: inline-block; max-width: 100%; cursor: pointer; } .arco-upload.arco-upload-draggable { width: 100%; } .arco-upload-tip { margin-top: 4px; overflow: hidden; color: var(--color-text-3); font-size: 12px; line-height: 1.5; white-space: nowrap; text-overflow: ellipsis; } .arco-upload-picture-card { display: flex; flex-direction: column; justify-content: center; min-width: 80px; height: 80px; margin-bottom: 0; color: var(--color-text-2); text-align: center; background: var(--color-fill-2); border: 1px dashed var(--color-neutral-3); border-radius: var(--border-radius-small); transition: all 0.1s cubic-bezier(0, 0, 1, 1); } .arco-upload-picture-card:hover { color: var(--color-text-2); background-color: var(--color-fill-3); border-color: var(--color-neutral-4); } .arco-upload-drag { width: 100%; padding: 50px 0; color: var(--color-text-1); text-align: center; background-color: var(--color-fill-1); border: 1px dashed var(--color-neutral-3); border-radius: var(--border-radius-small); transition: all 0.2s ease; } .arco-upload-drag .arco-icon-plus { margin-bottom: 24px; color: var(--color-text-2); font-size: 14px; } .arco-upload-drag:hover { background-color: var(--color-fill-3); border-color: var(--color-neutral-4); } .arco-upload-drag:hover .arco-upload-drag-text { color: var(--color-text-1); } .arco-upload-drag:hover .arco-icon-plus { color: var(--color-text-2); } .arco-upload-drag-active { color: var(--color-text-1); background-color: var(--color-primary-light-1); border-color: rgb(var(--primary-6)); } .arco-upload-drag-active .arco-upload-drag-text { color: var(--color-text-1); } .arco-upload-drag-active .arco-icon-plus { color: rgb(var(--primary-6)); } .arco-upload-drag .arco-upload-tip { margin-top: 0; } .arco-upload-drag-text { color: var(--color-text-1); font-size: 14px; line-height: 1.5; } .arco-upload-wrapper { width: 100%; } .arco-upload-wrapper.arco-upload-wrapper-type-picture-card { display: flex; justify-content: flex-start; } .arco-upload-drag { width: 100%; } .arco-upload-hide { display: none; } .arco-upload-disabled .arco-upload-picture-card, .arco-upload-disabled .arco-upload-picture-card:hover { color: var(--color-text-4); background-color: var(--color-fill-1); border-color: var(--color-neutral-4); cursor: not-allowed; } .arco-upload-disabled .arco-upload-drag, .arco-upload-disabled .arco-upload-drag:hover { background-color: var(--color-fill-1); border-color: var(--color-text-4); cursor: not-allowed; } .arco-upload-disabled .arco-upload-drag .arco-icon-plus, .arco-upload-disabled .arco-upload-drag:hover .arco-icon-plus, .arco-upload-disabled .arco-upload-drag .arco-upload-drag-text, .arco-upload-disabled .arco-upload-drag:hover .arco-upload-drag-text { color: var(--color-text-4); } .arco-upload-disabled .arco-upload-tip { color: var(--color-text-4); } .arco-upload-icon { cursor: pointer; } .arco-upload-icon-error { margin-left: 4px; color: rgb(var(--danger-6)); } .arco-upload-icon-success { color: rgb(var(--success-6)); font-size: 14px; line-height: 14px; } .arco-upload-icon-remove { position: relative; font-size: 14px; } .arco-upload-icon-start, .arco-upload-icon-cancel { position: absolute; top: 50%; left: 50%; color: var(--color-white); font-size: 12px; transform: translateX(-50%) translateY(-50%); } .arco-upload-icon-upload { color: rgb(var(--primary-6)); font-size: 14px; cursor: pointer; transition: all 0.2s ease; } .arco-upload-icon-upload:active, .arco-upload-icon-upload:hover { color: rgb(var(--primary-7)); } .arco-upload-list { margin: 0; padding: 0; list-style: none; /*** listtype is text ****/ /*** end ****/ } .arco-upload-list.arco-upload-list-type-text, .arco-upload-list.arco-upload-list-type-picture { width: 100%; } .arco-upload-list.arco-upload-list-type-text .arco-upload-list-item:first-of-type, .arco-upload-list.arco-upload-list-type-picture .arco-upload-list-item:first-of-type { margin-top: 12px; } .arco-upload-list-item-done .arco-upload-list-item-file-icon { color: rgb(var(--primary-6)); } .arco-upload-list-item { position: relative; display: flex; align-items: center; box-sizing: border-box; margin-top: 8px; } .arco-upload-list-item-content { display: flex; flex: 1; flex-wrap: nowrap; align-items: center; box-sizing: border-box; width: 100%; padding: 8px 0; padding-right: 10px; padding-left: 12px; overflow: hidden; font-size: 14px; background-color: var(--color-fill-1); border-radius: var(--border-radius-small); transition: background-color 0.1s cubic-bezier(0, 0, 1, 1); } .arco-upload-list-item-file-icon { margin-right: 12px; color: rgb(var(--primary-6)); font-size: 16px; line-height: 16px; } .arco-upload-list-item-thumbnail { flex-shrink: 0; width: 40px; height: 40px; margin-right: 12px; } .arco-upload-list-item-thumbnail img { width: 100%; height: 100%; } .arco-upload-list-item-name { display: flex; flex: 1; align-items: center; margin-right: 10px; overflow: hidden; color: var(--color-text-1); font-size: 14px; line-height: 1.4286; white-space: nowrap; text-overflow: ellipsis; } .arco-upload-list-item-name-link { overflow: hidden; color: rgb(var(--link-6)); text-decoration: none; text-overflow: ellipsis; cursor: pointer; } .arco-upload-list-item-name-text { overflow: hidden; text-overflow: ellipsis; cursor: pointer; } .arco-upload-list-item .arco-upload-progress { position: relative; margin-left: auto; line-height: 12px; } .arco-upload-list-item .arco-upload-progress:hover .arco-progress-circle-bg { stroke: rgba(var(--gray-10), 0.2); } .arco-upload-list-item .arco-upload-progress:hover .arco-progress-circle-bar { stroke: rgb(var(--primary-7)); } .arco-upload-list-item-operation { margin-left: 12px; color: var(--color-text-2); font-size: 12px; } .arco-upload-list-item-operation .arco-upload-icon-remove { font-size: inherit; } .arco-upload-list-item-error .arco-upload-list-status, .arco-upload-list-item-done .arco-upload-list-status { display: none; } .arco-upload-list-type-text .arco-upload-list-item-error .arco-upload-list-item-name-link, .arco-upload-list-type-text .arco-upload-list-item-error .arco-upload-list-item-name { color: rgb(var(--danger-6)); } .arco-upload-list.arco-upload-list-type-picture-card { display: flex; flex-wrap: wrap; vertical-align: top; } .arco-upload-list.arco-upload-list-type-picture-card .arco-upload-list-status { top: 50%; margin-left: 0; transform: translateY(-50%); } .arco-upload-list-picture { display: inline-block; margin-top: 0; margin-right: 8px; margin-bottom: 8px; padding-right: 0; overflow: hidden; vertical-align: top; transition: all 0.2s cubic-bezier(0.34, 0.69, 0.1, 1); } .arco-upload-list-picture-status-error .arco-upload-list-picture-mask { opacity: 1; } .arco-upload-list-picture { position: relative; box-sizing: border-box; width: 80px; height: 80px; overflow: hidden; line-height: 80px; text-align: center; vertical-align: top; border-radius: var(--border-radius-small); } .arco-upload-list-picture img { width: 100%; height: 100%; } .arco-upload-list-picture-mask { position: absolute; top: 0; right: 0; bottom: 0; left: 0; color: var(--color-white); font-size: 16px; line-height: 80px; text-align: center; background: rgba(0, 0, 0, 0.5); cursor: pointer; opacity: 0; transition: opacity 0.1s cubic-bezier(0, 0, 1, 1); } .arco-upload-list-picture-operation { display: none; font-size: 14px; } .arco-upload-list-picture-operation .arco-upload-icon-retry { color: var(--color-white); } .arco-upload-list-picture-error-tip .arco-upload-icon-error { color: var(--color-white); font-size: 26px; } .arco-upload-list-picture-mask:hover { opacity: 1; } .arco-upload-list-picture-mask:hover .arco-upload-list-picture-operation { display: flex; justify-content: space-evenly; } .arco-upload-list-picture-mask:hover .arco-upload-list-picture-error-tip { display: none; } .arco-upload-list-type-picture .arco-upload-list-item-content { padding-top: 8px; padding-bottom: 8px; } .arco-upload-list-type-picture .arco-upload-list-item-error .arco-upload-list-item-content { background-color: var(--color-danger-light-1); } .arco-upload-list-type-picture .arco-upload-list-item-error .arco-upload-list-item-name-link, .arco-upload-list-type-picture .arco-upload-list-item-error .arco-upload-list-item-name { color: rgb(var(--danger-6)); } .arco-upload-hide + .arco-upload-list .arco-upload-list-item:first-of-type { margin-top: 0; } .arco-upload-slide-up-enter { opacity: 0; } .arco-upload-slide-up-enter-active { opacity: 1; transition: opacity 0.2s cubic-bezier(0.34, 0.69, 0.1, 1); } .arco-upload-slide-up-exit { opacity: 1; } .arco-upload-slide-up-exit-active { margin: 0; overflow: hidden; opacity: 0; transition: opacity 0.1s cubic-bezier(0, 0, 1, 1), height 0.3s cubic-bezier(0.34, 0.69, 0.1, 1) 0.1s, margin 0.3s cubic-bezier(0.34, 0.69, 0.1, 1) 0.1s; } .arco-upload-list-item.arco-upload-slide-inline-enter { opacity: 0; } .arco-upload-list-item.arco-upload-slide-inline-enter-active { opacity: 1; transition: opacity 0.2s cubic-bezier(0, 0, 1, 1); } .arco-upload-list-item.arco-upload-slide-inline-exit { opacity: 1; } .arco-upload-list-item.arco-upload-slide-inline-exit-active { margin: 0; overflow: hidden; opacity: 0; transition: opacity 0.1s cubic-bezier(0, 0, 1, 1), width 0.3s cubic-bezier(0.34, 0.69, 0.1, 1) 0.1s, margin 0.3s cubic-bezier(0.34, 0.69, 0.1, 1) 0.1s; } .arco-verification-code { display: flex; align-items: center; justify-content: space-between; width: 100%; column-gap: 4px; } .arco-verification-code .arco-input { width: 32px; padding-right: 0; padding-left: 0; text-align: center; } .arco-verification-code .arco-input-size-small { width: 28px; } .arco-verification-code .arco-input-size-mini { width: 24px; } .arco-verification-code .arco-input-size-large { width: 36px; } body { font-family: Inter, -apple-system, BlinkMacSystemFont, PingFang SC, Hiragino Sans GB, noto sans, Microsoft YaHei, Helvetica Neue, Helvetica, Arial, sans-serif; } body { --color-white: #ffffff; --color-black: #000000; --color-border: rgb(var(--gray-3)); --color-bg-popup: var(--color-bg-5); --color-bg-1: #ffffff; --color-bg-2: #ffffff; --color-bg-3: #ffffff; --color-bg-4: #ffffff; --color-bg-5: #ffffff; --color-bg-white: #ffffff; --color-neutral-1: rgb(var(--gray-1)); --color-neutral-2: rgb(var(--gray-2)); --color-neutral-3: rgb(var(--gray-3)); --color-neutral-4: rgb(var(--gray-4)); --color-neutral-5: rgb(var(--gray-5)); --color-neutral-6: rgb(var(--gray-6)); --color-neutral-7: rgb(var(--gray-7)); --color-neutral-8: rgb(var(--gray-8)); --color-neutral-9: rgb(var(--gray-9)); --color-neutral-10: rgb(var(--gray-10)); --color-text-1: #121314; --color-text-2: #5c5c5c; --color-text-3: #909399; --color-text-4: #c2c2c2; --color-fill-1: #fafafa; --color-fill-2: var(--color-neutral-2); --color-fill-3: var(--color-neutral-3); --color-fill-4: var(--color-neutral-4); --color-border-1: #ebeef5; --color-border-2: #e5e6eb; --color-border-3: #dcdfe6; --color-border-4: #cdd0d6; --color-primary-light-1: rgb(var(--primary-1)); --color-primary-light-2: rgb(var(--primary-2)); --color-primary-light-3: rgb(var(--primary-3)); --color-primary-light-4: rgb(var(--primary-4)); --color-secondary: var(--color-neutral-2); --color-secondary-hover: var(--color-neutral-3); --color-secondary-active: var(--color-neutral-4); --color-secondary-disabled: var(--color-neutral-1); --color-danger-light-1: rgb(var(--danger-1)); --color-danger-light-2: rgb(var(--danger-2)); --color-danger-light-3: rgb(var(--danger-3)); --color-danger-light-4: rgb(var(--danger-4)); --color-success-light-1: rgb(var(--success-1)); --color-success-light-2: rgb(var(--success-2)); --color-success-light-3: rgb(var(--success-3)); --color-success-light-4: rgb(var(--success-4)); --color-warning-light-1: rgb(var(--warning-1)); --color-warning-light-2: rgb(var(--warning-2)); --color-warning-light-3: rgb(var(--warning-3)); --color-warning-light-4: rgb(var(--warning-4)); --color-link-light-1: rgb(var(--link-1)); --color-link-light-2: rgb(var(--link-2)); --color-link-light-3: rgb(var(--link-3)); --color-link-light-4: rgb(var(--link-4)); --border-radius-none: 0; --border-radius-small: 4px; --border-radius-medium: 6px; --border-radius-large: 8px; --border-radius-circle: 50%; --color-tooltip-bg: rgb(var(--gray-10)); --color-spin-layer-bg: rgba(255, 255, 255, 0.6); --color-menu-dark-bg: #232324; --color-menu-light-bg: #ffffff; --color-menu-dark-hover: rgba(255, 255, 255, 0.04); --color-mask-bg: rgba(29, 33, 41, 0.6); } body[arco-theme='dark'], .app-menu-dark { --color-black: #000000; --color-border: #333335; --color-bg-1: #17171A; --color-bg-2: #232324; --color-bg-3: #2a2a2b; --color-bg-4: #313132; --color-bg-5: #373739; --color-bg-white: #f6f6f6; --color-text-1: rgba(255, 255, 255, 0.9); --color-text-2: rgba(255, 255, 255, 0.7); --color-text-3: rgba(255, 255, 255, 0.5); --color-text-4: rgba(255, 255, 255, 0.3); --color-fill-1: rgba(255, 255, 255, 0.04); --color-fill-2: rgba(255, 255, 255, 0.08); --color-fill-3: rgba(255, 255, 255, 0.12); --color-fill-4: rgba(255, 255, 255, 0.16); --color-border-1: #2e2e30; --color-border-2: #484849; --color-border-3: #5f5f60; --color-border-4: #929293; --color-primary-light-1: rgba(var(--primary-6), 0.2); --color-primary-light-2: rgba(var(--primary-6), 0.35); --color-primary-light-3: rgba(var(--primary-6), 0.5); --color-primary-light-4: rgba(var(--primary-6), 0.65); --color-secondary: rgba(var(--gray-9), 0.08); --color-secondary-hover: rgba(var(--gray-8), 0.16); --color-secondary-active: rgba(var(--gray-7), 0.24); --color-secondary-disabled: rgba(var(--gray-9), 0.08); --color-danger-light-1: rgba(var(--danger-6), 0.2); --color-danger-light-2: rgba(var(--danger-6), 0.35); --color-danger-light-3: rgba(var(--danger-6), 0.5); --color-danger-light-4: rgba(var(--danger-6), 0.65); --color-success-light-1: rgb(var(--success-6), 0.2); --color-success-light-2: rgb(var(--success-6), 0.35); --color-success-light-3: rgb(var(--success-6), 0.5); --color-success-light-4: rgb(var(--success-6), 0.65); --color-warning-light-1: rgb(var(--warning-6), 0.2); --color-warning-light-2: rgb(var(--warning-6), 0.35); --color-warning-light-3: rgb(var(--warning-6), 0.5); --color-warning-light-4: rgb(var(--warning-6), 0.65); --color-link-light-1: rgba(var(--link-6), 0.2); --color-link-light-2: rgba(var(--link-6), 0.35); --color-link-light-3: rgba(var(--link-6), 0.5); --color-link-light-4: rgba(var(--link-6), 0.65); --color-tooltip-bg: #373739; --color-spin-layer-bg: rgba(51, 51, 51, 0.6); --color-menu-dark-bg: #232324; --color-menu-light-bg: #232324; --color-menu-dark-hover: var(--color-fill-2); --color-mask-bg: rgba(23, 23, 26, 0.6); } body { --red-1: 255, 236, 232; --red-2: 253, 205, 197; --red-3: 251, 172, 163; --red-4: 249, 137, 129; --red-5: 247, 101, 96; --red-6: 245, 63, 63; --red-7: 203, 39, 45; --red-8: 161, 21, 30; --red-9: 119, 8, 19; --red-10: 77, 0, 10; --orangered-1: 255, 243, 232; --orangered-2: 253, 221, 195; --orangered-3: 252, 197, 159; --orangered-4: 250, 172, 123; --orangered-5: 249, 144, 87; --orangered-6: 247, 114, 52; --orangered-7: 204, 81, 32; --orangered-8: 162, 53, 17; --orangered-9: 119, 31, 6; --orangered-10: 77, 14, 0; --orange-1: 255, 247, 232; --orange-2: 255, 228, 186; --orange-3: 255, 207, 139; --orange-4: 255, 182, 93; --orange-5: 255, 154, 46; --orange-6: 255, 125, 0; --orange-7: 210, 95, 0; --orange-8: 166, 69, 0; --orange-9: 121, 46, 0; --orange-10: 77, 27, 0; --gold-1: 255, 252, 232; --gold-2: 253, 244, 191; --gold-3: 252, 233, 150; --gold-4: 250, 220, 109; --gold-5: 249, 204, 69; --gold-6: 247, 186, 30; --gold-7: 204, 146, 19; --gold-8: 162, 109, 10; --gold-9: 119, 75, 4; --gold-10: 77, 45, 0; --yellow-1: 254, 255, 232; --yellow-2: 254, 254, 190; --yellow-3: 253, 250, 148; --yellow-4: 252, 242, 107; --yellow-5: 251, 232, 66; --yellow-6: 250, 220, 25; --yellow-7: 207, 175, 15; --yellow-8: 163, 132, 8; --yellow-9: 120, 93, 3; --yellow-10: 77, 56, 0; --lime-1: 252, 255, 232; --lime-2: 237, 248, 187; --lime-3: 220, 241, 144; --lime-4: 201, 233, 104; --lime-5: 181, 226, 65; --lime-6: 159, 219, 29; --lime-7: 126, 183, 18; --lime-8: 95, 148, 10; --lime-9: 67, 112, 4; --lime-10: 42, 77, 0; --green-1: 232, 255, 234; --green-2: 175, 240, 181; --green-3: 123, 225, 136; --green-4: 76, 210, 99; --green-5: 35, 195, 67; --green-6: 0, 180, 42; --green-7: 0, 154, 41; --green-8: 0, 128, 38; --green-9: 0, 102, 34; --green-10: 0, 77, 28; --cyan-1: 232, 255, 251; --cyan-2: 183, 244, 236; --cyan-3: 137, 233, 224; --cyan-4: 94, 223, 214; --cyan-5: 55, 212, 207; --cyan-6: 20, 201, 201; --cyan-7: 13, 165, 170; --cyan-8: 7, 130, 139; --cyan-9: 3, 97, 108; --cyan-10: 0, 66, 77; --blue-1: 232, 247, 255; --blue-2: 195, 231, 254; --blue-3: 159, 212, 253; --blue-4: 123, 192, 252; --blue-5: 87, 169, 251; --blue-6: 52, 145, 250; --blue-7: 32, 108, 207; --blue-8: 17, 75, 163; --blue-9: 6, 48, 120; --blue-10: 0, 26, 77; --arcoblue-1: 232, 243, 255; --arcoblue-2: 190, 218, 255; --arcoblue-3: 148, 191, 255; --arcoblue-4: 106, 161, 255; --arcoblue-5: 64, 128, 255; --arcoblue-6: 22, 93, 255; --arcoblue-7: 14, 66, 210; --arcoblue-8: 7, 44, 166; --arcoblue-9: 3, 26, 121; --arcoblue-10: 0, 13, 77; --purple-1: 245, 232, 255; --purple-2: 221, 190, 246; --purple-3: 195, 150, 237; --purple-4: 168, 113, 227; --purple-5: 141, 78, 218; --purple-6: 114, 46, 209; --purple-7: 85, 29, 176; --purple-8: 60, 16, 143; --purple-9: 39, 6, 110; --purple-10: 22, 0, 77; --pinkpurple-1: 255, 232, 251; --pinkpurple-2: 247, 186, 239; --pinkpurple-3: 240, 142, 230; --pinkpurple-4: 232, 101, 223; --pinkpurple-5: 225, 62, 219; --pinkpurple-6: 217, 26, 217; --pinkpurple-7: 176, 16, 182; --pinkpurple-8: 138, 9, 147; --pinkpurple-9: 101, 3, 112; --pinkpurple-10: 66, 0, 77; --magenta-1: 255, 232, 241; --magenta-2: 253, 194, 219; --magenta-3: 251, 157, 199; --magenta-4: 249, 121, 183; --magenta-5: 247, 84, 168; --magenta-6: 245, 49, 157; --magenta-7: 203, 30, 131; --magenta-8: 161, 16, 105; --magenta-9: 119, 6, 79; --magenta-10: 77, 0, 52; --gray-1: 247, 248, 250; --gray-2: 242, 243, 245; --gray-3: 229, 230, 235; --gray-4: 201, 205, 212; --gray-5: 169, 174, 184; --gray-6: 134, 144, 156; --gray-7: 107, 119, 133; --gray-8: 78, 89, 105; --gray-9: 39, 46, 59; --gray-10: 29, 33, 41; --primary-1: var(--arcoblue-1); --primary-2: var(--arcoblue-2); --primary-3: var(--arcoblue-3); --primary-4: var(--arcoblue-4); --primary-5: var(--arcoblue-5); --primary-6: var(--arcoblue-6); --primary-7: var(--arcoblue-7); --primary-8: var(--arcoblue-8); --primary-9: var(--arcoblue-9); --primary-10: var(--arcoblue-10); --link-1: var(--arcoblue-1); --link-2: var(--arcoblue-2); --link-3: var(--arcoblue-3); --link-4: var(--arcoblue-4); --link-5: var(--arcoblue-5); --link-6: var(--arcoblue-6); --link-7: var(--arcoblue-7); --link-8: var(--arcoblue-8); --link-9: var(--arcoblue-9); --link-10: var(--arcoblue-10); --success-1: var(--green-1); --success-2: var(--green-2); --success-3: var(--green-3); --success-4: var(--green-4); --success-5: var(--green-5); --success-6: var(--green-6); --success-7: var(--green-7); --success-8: var(--green-8); --success-9: var(--green-9); --success-10: var(--green-10); --danger-1: var(--red-1); --danger-2: var(--red-2); --danger-3: var(--red-3); --danger-4: var(--red-4); --danger-5: var(--red-5); --danger-6: var(--red-6); --danger-7: var(--red-7); --danger-8: var(--red-8); --danger-9: var(--red-9); --danger-10: var(--red-10); --warning-1: var(--orange-1); --warning-2: var(--orange-2); --warning-3: var(--orange-3); --warning-4: var(--orange-4); --warning-5: var(--orange-5); --warning-6: var(--orange-6); --warning-7: var(--orange-7); --warning-8: var(--orange-8); --warning-9: var(--orange-9); --warning-10: var(--orange-10); } body[arco-theme='dark'], .app-menu-dark { --red-1: 77, 0, 10; --red-2: 119, 6, 17; --red-3: 161, 22, 31; --red-4: 203, 46, 52; --red-5: 245, 78, 78; --red-6: 247, 105, 101; --red-7: 249, 141, 134; --red-8: 251, 176, 167; --red-9: 253, 209, 202; --red-10: 255, 240, 236; --orangered-1: 77, 14, 0; --orangered-2: 119, 30, 5; --orangered-3: 162, 55, 20; --orangered-4: 204, 87, 41; --orangered-5: 247, 126, 69; --orangered-6: 249, 146, 90; --orangered-7: 250, 173, 125; --orangered-8: 252, 198, 161; --orangered-9: 253, 222, 197; --orangered-10: 255, 244, 235; --orange-1: 77, 27, 0; --orange-2: 121, 48, 4; --orange-3: 166, 75, 10; --orange-4: 210, 105, 19; --orange-5: 255, 141, 31; --orange-6: 255, 150, 38; --orange-7: 255, 179, 87; --orange-8: 255, 205, 135; --orange-9: 255, 227, 184; --orange-10: 255, 247, 232; --gold-1: 77, 45, 0; --gold-2: 119, 75, 4; --gold-3: 162, 111, 15; --gold-4: 204, 150, 31; --gold-5: 247, 192, 52; --gold-6: 249, 204, 68; --gold-7: 250, 220, 108; --gold-8: 252, 233, 149; --gold-9: 253, 244, 190; --gold-10: 255, 252, 232; --yellow-1: 77, 56, 0; --yellow-2: 120, 94, 7; --yellow-3: 163, 134, 20; --yellow-4: 207, 179, 37; --yellow-5: 250, 225, 60; --yellow-6: 251, 233, 75; --yellow-7: 252, 243, 116; --yellow-8: 253, 250, 157; --yellow-9: 254, 254, 198; --yellow-10: 254, 255, 240; --lime-1: 42, 77, 0; --lime-2: 68, 112, 6; --lime-3: 98, 148, 18; --lime-4: 132, 183, 35; --lime-5: 168, 219, 57; --lime-6: 184, 226, 75; --lime-7: 203, 233, 112; --lime-8: 222, 241, 152; --lime-9: 238, 248, 194; --lime-10: 253, 255, 238; --green-1: 0, 77, 28; --green-2: 4, 102, 37; --green-3: 10, 128, 45; --green-4: 18, 154, 55; --green-5: 29, 180, 64; --green-6: 39, 195, 70; --green-7: 80, 210, 102; --green-8: 126, 225, 139; --green-9: 178, 240, 183; --green-10: 235, 255, 236; --cyan-1: 0, 66, 77; --cyan-2: 6, 97, 108; --cyan-3: 17, 131, 139; --cyan-4: 31, 166, 170; --cyan-5: 48, 201, 201; --cyan-6: 63, 212, 207; --cyan-7: 102, 223, 215; --cyan-8: 144, 233, 225; --cyan-9: 190, 244, 237; --cyan-10: 240, 255, 252; --blue-1: 0, 26, 77; --blue-2: 5, 47, 120; --blue-3: 19, 76, 163; --blue-4: 41, 113, 207; --blue-5: 70, 154, 250; --blue-6: 90, 170, 251; --blue-7: 125, 193, 252; --blue-8: 161, 213, 253; --blue-9: 198, 232, 254; --blue-10: 234, 248, 255; --arcoblue-1: 0, 13, 77; --arcoblue-2: 4, 27, 121; --arcoblue-3: 14, 50, 166; --arcoblue-4: 29, 77, 210; --arcoblue-5: 48, 111, 255; --arcoblue-6: 60, 126, 255; --arcoblue-7: 104, 159, 255; --arcoblue-8: 147, 190, 255; --arcoblue-9: 190, 218, 255; --arcoblue-10: 234, 244, 255; --purple-1: 22, 0, 77; --purple-2: 39, 6, 110; --purple-3: 62, 19, 143; --purple-4: 90, 37, 176; --purple-5: 123, 61, 209; --purple-6: 142, 81, 218; --purple-7: 169, 116, 227; --purple-8: 197, 154, 237; --purple-9: 223, 194, 246; --purple-10: 247, 237, 255; --pinkpurple-1: 66, 0, 77; --pinkpurple-2: 101, 3, 112; --pinkpurple-3: 138, 13, 147; --pinkpurple-4: 176, 27, 182; --pinkpurple-5: 217, 46, 217; --pinkpurple-6: 225, 61, 219; --pinkpurple-7: 232, 102, 223; --pinkpurple-8: 240, 146, 230; --pinkpurple-9: 247, 193, 240; --pinkpurple-10: 255, 242, 253; --magenta-1: 77, 0, 52; --magenta-2: 119, 8, 80; --magenta-3: 161, 23, 108; --magenta-4: 203, 43, 136; --magenta-5: 245, 69, 166; --magenta-6: 247, 86, 169; --magenta-7: 249, 122, 184; --magenta-8: 251, 158, 200; --magenta-9: 253, 195, 219; --magenta-10: 255, 232, 241; --gray-1: 23, 23, 26; --gray-2: 46, 46, 48; --gray-3: 72, 72, 73; --gray-4: 95, 95, 96; --gray-5: 120, 120, 122; --gray-6: 146, 146, 147; --gray-7: 171, 171, 172; --gray-8: 197, 197, 197; --gray-9: 223, 223, 223; --gray-10: 246, 246, 246; --primary-1: var(--arcoblue-1); --primary-2: var(--arcoblue-2); --primary-3: var(--arcoblue-3); --primary-4: var(--arcoblue-4); --primary-5: var(--arcoblue-5); --primary-6: var(--arcoblue-6); --primary-7: var(--arcoblue-7); --primary-8: var(--arcoblue-8); --primary-9: var(--arcoblue-9); --primary-10: var(--arcoblue-10); --link-1: var(--arcoblue-1); --link-2: var(--arcoblue-2); --link-3: var(--arcoblue-3); --link-4: var(--arcoblue-4); --link-5: var(--arcoblue-5); --link-6: var(--arcoblue-6); --link-7: var(--arcoblue-7); --link-8: var(--arcoblue-8); --link-9: var(--arcoblue-9); --link-10: var(--arcoblue-10); --success-1: var(--green-1); --success-2: var(--green-2); --success-3: var(--green-3); --success-4: var(--green-4); --success-5: var(--green-5); --success-6: var(--green-6); --success-7: var(--green-7); --success-8: var(--green-8); --success-9: var(--green-9); --success-10: var(--green-10); --danger-1: var(--red-1); --danger-2: var(--red-2); --danger-3: var(--red-3); --danger-4: var(--red-4); --danger-5: var(--red-5); --danger-6: var(--red-6); --danger-7: var(--red-7); --danger-8: var(--red-8); --danger-9: var(--red-9); --danger-10: var(--red-10); --warning-1: var(--orange-1); --warning-2: var(--orange-2); --warning-3: var(--orange-3); --warning-4: var(--orange-4); --warning-5: var(--orange-5); --warning-6: var(--orange-6); --warning-7: var(--orange-7); --warning-8: var(--orange-8); --warning-9: var(--orange-9); --warning-10: var(--orange-10); } /* 自定义组件样式 */ .arco-alert { flex-shrink: 0; } .arco-color-picker-panel .arco-color-picker-panel-control .arco-color-picker-input-wrapper .arco-select-view, .arco-color-picker-panel .arco-color-picker-panel-control .arco-color-picker-input-wrapper .arco-input-wrapper { padding-right: 0; } .arco-color-picker-panel .arco-color-picker-input-alpha { flex: none; width: 70px; } .arco-color-picker-panel .arco-color-picker-input-alpha .arco-input-number-step { width: 20px; margin-left: 4px; } .arco-color-picker-panel .arco-color-picker-input-alpha:not(.arco-input-disabled):not(.arco-input-outer-disabled):hover .arco-input-number-suffix, .arco-color-picker-panel .arco-color-picker-input-alpha:not(.arco-input-disabled):not(.arco-input-outer-disabled):focus-within .arco-input-number-suffix { opacity: 1; } .arco-descriptions-layout-inline-horizontal.arco-descriptions-size-medium .arco-descriptions-item { padding-bottom: 8px; } .arco-descriptions-layout-inline-horizontal .arco-descriptions-item-label-inline { margin-right: 10px; } .form-blink-enter-from, .form-blink-appear-from { opacity: inherit; } .form-blink-enter-to, .form-blink-appear-to { opacity: inherit; } .form-blink-enter-active, .form-blink-appear-active { transition: none; animation: none; } .form-blink-enter-active, .form-blink-leave-active { opacity: 1; transform: scaleY(1); transition: transform 0.3s cubic-bezier(0.23, 1, 0.32, 1), opacity 0.1s cubic-bezier(0.23, 1, 0.32, 1); transform-origin: center top; } .form-blink-enter-from, .form-blink-leave-active { opacity: 0; transform: scaleY(0); } .arco-input-number.arco-input-number-mode-button .arco-input-prepend .arco-btn { border-right: 0; } .arco-input-number.arco-input-number-mode-button .arco-input-append .arco-btn { border-left: 0; } .arco-input-number-mode-embed { padding-right: 0; overflow: hidden; } .arco-input-number-mode-embed.arco-input-wrapper:not(.arco-input-focus) .arco-input-number-step-button:not(.arco-input-number-step-button-disabled):hover { background-color: var(--color-fill-2); } .arco-input-number-mode-embed .arco-input-number-step { top: 0; right: 0; bottom: 0; position: static; display: flex; flex-direction: column; width: 34px; height: 100%; opacity: 1; visibility: visible; transform: none; border-left: 1px solid var(--color-border-2); } .arco-input-number-mode-embed .arco-input-number-step-button { display: flex; flex: 1; align-items: center; justify-content: center; width: 100%; height: auto; min-height: 0; border-left: 1px solid var(--color-border-2); } .arco-input-number-mode-embed .arco-input-number-step-button:not(.arco-input-number-step-button-disabled):hover .arco-icon { color: rgb(var(--primary-6)); } .arco-input-number-mode-embed .arco-input-number-step-button:hover, .arco-input-number-mode-embed .arco-input-number-step-button:active { background-color: var(--color-fill-2); } .arco-input-number-mode-embed .arco-input-number-step-button + .arco-input-number-step-button { border-top: 1px solid var(--color-border-2); } .arco-input-number-mode-embed .arco-input-number-input { padding-right: 34px; } .arco-input-prepend { border-right: none; } .arco-input-append { border-left: none; } .arco-trigger-menu-item.arco-trigger-menu-selected, .arco-trigger-menu-pop-header.arco-trigger-menu-selected { color: rgb(var(--primary-6)); } .arco-menu-icon-suffix { transition: all 0.2s; } .arco-menu-horizontal .arco-menu-pop { display: inline-flex; } .arco-menu-icon { display: inline-flex; justify-content: center; align-items: center; } .fade-message-enter-from { opacity: 0; transform: translate3d(0, -100%, 0); } .fade-message-enter-to { opacity: 1; transform: translate3d(0, 0, 0); } .fade-message-enter-active, .fade-message-appear-active { transition: opacity 0.3s, transform 0.4s; } .fade-message-leave-from { opacity: 1; transform: translate3d(0, 0, 0); } .fade-message-leave-to { opacity: 0; transform: translate3d(0, -100%, 0); } .fade-message-leave-active { position: absolute; } .arco-modal-title .arco-icon-exclamation-circle-fill { font-size: 24px; } .arco-modal-title-icon { display: flex; justify-content: center; align-items: center; margin-right: 4px; } .arco-modal-simple { width: 90%; max-width: 320px; padding: 20px; box-sizing: border-box; border-radius: 20px; } .arco-modal-simple .arco-modal-header { margin-bottom: 0; } .arco-modal-simple .arco-modal-header .arco-modal-title { font-size: 18px; } .arco-modal-simple .arco-modal-body { padding: 20px 0; font-size: 16px; text-align: center; } .arco-modal-simple .arco-modal-footer { margin-top: 0; display: flex; } .arco-modal-simple .arco-modal-footer > .arco-btn { flex: 1; height: 38px; border-radius: 100px; font-weight: bold; } .arco-page-header { padding: 8px 0; background: var(--color-bg-1); border-bottom: 1px solid var(--color-border-2); box-sizing: border-box; } .arco-pagination-item { padding: 0 6px; border: 1px solid var(--color-border-3); background-color: var(--color-bg-2); border-radius: var(--border-radius-small); display: inline-flex; justify-content: center; align-items: center; transition: none; box-sizing: border-box; } .arco-pagination-item:hover { color: rgb(var(--primary-6)); border: 1px solid rgb(var(--primary-6)); background-color: rgba(var(--primary-6), 0.1); } .arco-pagination-item:active { color: #fff; background-color: rgb(var(--primary-6)); border: 1px solid rgb(var(--primary-6)); } .arco-pagination-item-active { color: #fff; background-color: rgb(var(--primary-6)); border: 1px solid rgb(var(--primary-6)); } .arco-pagination-item-active:hover { color: #fff; background-color: rgb(var(--primary-6)); border: 1px solid rgb(var(--primary-6)); } .arco-pagination .arco-pagination-item-previous.arco-pagination-item-disabled, .arco-pagination .arco-pagination-item-next.arco-pagination-item-disabled { border-color: var(--color-border-2); } .arco-pagination .arco-pagination-item-previous.arco-pagination-item-disabled:hover, .arco-pagination .arco-pagination-item-next.arco-pagination-item-disabled:hover { border-color: var(--color-border-2); } .arco-picker { width: 100%; } .arco-radio-button-content { white-space: nowrap; } .arco-scrollbar-track-direction-vertical { width: 8px; } .arco-scrollbar-thumb-direction-vertical .arco-scrollbar-thumb-bar { width: 6px; margin: 0 1px; } .arco-scrollbar-track-direction-horizontal { height: 8px; } .arco-scrollbar-thumb-direction-horizontal .arco-scrollbar-thumb-bar { height: 6px; margin: 1px 0; } .arco-scrollbar-thumb-bar { background-color: var(--color-fill-3); } .arco-steps-item-process .arco-steps-icon { display: flex; justify-content: center; align-items: center; } .arco-switch-type-round.arco-switch-small { border-radius: 3px; } .arco-switch-type-round.arco-switch-small .arco-switch-handle { border-radius: 2px; } .arco-table-th-title { font-size: 13px; font-weight: 600; } .arco-table-container { border-radius: var(--border-radius-small); overflow: hidden; } .arco-tabs-nav-extra:not(:empty) { margin-right: var(--padding); } .arco-tabs { background: var(--color-bg-1); } .arco-tabs-nav-type-rounded .arco-tabs-tab { margin: 4px; padding: 2px 12px; } .arco-tabs-nav-type-card .arco-tabs-tab:first-child, .arco-tabs-nav-type-card .arco-tabs-tab:last-child { border-radius: 0; } .arco-tree-show-line .arco-tree-node-is-leaf:not(.arco-tree-node-is-tail) .arco-tree-node-indent::after, .arco-tree-show-line .arco-tree-node-indent-block::before { transform: translateX(0); border-color: var(--color-border-3); flex-shrink: 0; } .arco-tree-node-minus-icon, .arco-tree-node-plus-icon { border: 1px solid var(--color-border-3); box-sizing: border-box; border-radius: 4px; } .arco-tree-node-switcher-icon { display: flex; justify-content: center; align-items: center; } .arco-tree-node-title { white-space: nowrap; } .app-menu-dark { --color-menu-dark-bg: #222222; } .arco-link, .arco-menu-title, .arco-menu-item-inner, .arco-tabs-tab-title, .arco-breadcrumb-item, .arco-checkbox-label { user-select: none; } .arco-menu .arco-menu-item { display: inline-flex; } /*! * animate.css - https://animate.style/ * Version - 4.1.1 * Licensed under the MIT license - http://opensource.org/licenses/MIT * * Copyright (c) 2020 Animate.css */:root{--animate-duration:1s;--animate-delay:1s;--animate-repeat:1}.animate__animated{-webkit-animation-duration:1s;animation-duration:1s;-webkit-animation-duration:var(--animate-duration);animation-duration:var(--animate-duration);-webkit-animation-fill-mode:both;animation-fill-mode:both}.animate__animated.animate__infinite{-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite}.animate__animated.animate__repeat-1{-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-iteration-count:var(--animate-repeat);animation-iteration-count:var(--animate-repeat)}.animate__animated.animate__repeat-2{-webkit-animation-iteration-count:2;animation-iteration-count:2;-webkit-animation-iteration-count:calc(var(--animate-repeat)*2);animation-iteration-count:calc(var(--animate-repeat)*2)}.animate__animated.animate__repeat-3{-webkit-animation-iteration-count:3;animation-iteration-count:3;-webkit-animation-iteration-count:calc(var(--animate-repeat)*3);animation-iteration-count:calc(var(--animate-repeat)*3)}.animate__animated.animate__delay-1s{-webkit-animation-delay:1s;animation-delay:1s;-webkit-animation-delay:var(--animate-delay);animation-delay:var(--animate-delay)}.animate__animated.animate__delay-2s{-webkit-animation-delay:2s;animation-delay:2s;-webkit-animation-delay:calc(var(--animate-delay)*2);animation-delay:calc(var(--animate-delay)*2)}.animate__animated.animate__delay-3s{-webkit-animation-delay:3s;animation-delay:3s;-webkit-animation-delay:calc(var(--animate-delay)*3);animation-delay:calc(var(--animate-delay)*3)}.animate__animated.animate__delay-4s{-webkit-animation-delay:4s;animation-delay:4s;-webkit-animation-delay:calc(var(--animate-delay)*4);animation-delay:calc(var(--animate-delay)*4)}.animate__animated.animate__delay-5s{-webkit-animation-delay:5s;animation-delay:5s;-webkit-animation-delay:calc(var(--animate-delay)*5);animation-delay:calc(var(--animate-delay)*5)}.animate__animated.animate__faster{-webkit-animation-duration:.5s;animation-duration:.5s;-webkit-animation-duration:calc(var(--animate-duration)/2);animation-duration:calc(var(--animate-duration)/2)}.animate__animated.animate__fast{-webkit-animation-duration:.8s;animation-duration:.8s;-webkit-animation-duration:calc(var(--animate-duration)*0.8);animation-duration:calc(var(--animate-duration)*0.8)}.animate__animated.animate__slow{-webkit-animation-duration:2s;animation-duration:2s;-webkit-animation-duration:calc(var(--animate-duration)*2);animation-duration:calc(var(--animate-duration)*2)}.animate__animated.animate__slower{-webkit-animation-duration:3s;animation-duration:3s;-webkit-animation-duration:calc(var(--animate-duration)*3);animation-duration:calc(var(--animate-duration)*3)}@media (prefers-reduced-motion:reduce),print{.animate__animated{-webkit-animation-duration:1ms!important;animation-duration:1ms!important;-webkit-transition-duration:1ms!important;transition-duration:1ms!important;-webkit-animation-iteration-count:1!important;animation-iteration-count:1!important}.animate__animated[class*=Out]{opacity:0}}@-webkit-keyframes bounce{0%,20%,53%,to{-webkit-animation-timing-function:cubic-bezier(.215,.61,.355,1);animation-timing-function:cubic-bezier(.215,.61,.355,1);-webkit-transform:translateZ(0);transform:translateZ(0)}40%,43%{-webkit-animation-timing-function:cubic-bezier(.755,.05,.855,.06);animation-timing-function:cubic-bezier(.755,.05,.855,.06);-webkit-transform:translate3d(0,-30px,0) scaleY(1.1);transform:translate3d(0,-30px,0) scaleY(1.1)}70%{-webkit-animation-timing-function:cubic-bezier(.755,.05,.855,.06);animation-timing-function:cubic-bezier(.755,.05,.855,.06);-webkit-transform:translate3d(0,-15px,0) scaleY(1.05);transform:translate3d(0,-15px,0) scaleY(1.05)}80%{-webkit-transition-timing-function:cubic-bezier(.215,.61,.355,1);transition-timing-function:cubic-bezier(.215,.61,.355,1);-webkit-transform:translateZ(0) scaleY(.95);transform:translateZ(0) scaleY(.95)}90%{-webkit-transform:translate3d(0,-4px,0) scaleY(1.02);transform:translate3d(0,-4px,0) scaleY(1.02)}}@keyframes bounce{0%,20%,53%,to{-webkit-animation-timing-function:cubic-bezier(.215,.61,.355,1);animation-timing-function:cubic-bezier(.215,.61,.355,1);-webkit-transform:translateZ(0);transform:translateZ(0)}40%,43%{-webkit-animation-timing-function:cubic-bezier(.755,.05,.855,.06);animation-timing-function:cubic-bezier(.755,.05,.855,.06);-webkit-transform:translate3d(0,-30px,0) scaleY(1.1);transform:translate3d(0,-30px,0) scaleY(1.1)}70%{-webkit-animation-timing-function:cubic-bezier(.755,.05,.855,.06);animation-timing-function:cubic-bezier(.755,.05,.855,.06);-webkit-transform:translate3d(0,-15px,0) scaleY(1.05);transform:translate3d(0,-15px,0) scaleY(1.05)}80%{-webkit-transition-timing-function:cubic-bezier(.215,.61,.355,1);transition-timing-function:cubic-bezier(.215,.61,.355,1);-webkit-transform:translateZ(0) scaleY(.95);transform:translateZ(0) scaleY(.95)}90%{-webkit-transform:translate3d(0,-4px,0) scaleY(1.02);transform:translate3d(0,-4px,0) scaleY(1.02)}}.animate__bounce{-webkit-animation-name:bounce;animation-name:bounce;-webkit-transform-origin:center bottom;transform-origin:center bottom}@-webkit-keyframes flash{0%,50%,to{opacity:1}25%,75%{opacity:0}}@keyframes flash{0%,50%,to{opacity:1}25%,75%{opacity:0}}.animate__flash{-webkit-animation-name:flash;animation-name:flash}@-webkit-keyframes pulse{0%{-webkit-transform:scaleX(1);transform:scaleX(1)}50%{-webkit-transform:scale3d(1.05,1.05,1.05);transform:scale3d(1.05,1.05,1.05)}to{-webkit-transform:scaleX(1);transform:scaleX(1)}}@keyframes pulse{0%{-webkit-transform:scaleX(1);transform:scaleX(1)}50%{-webkit-transform:scale3d(1.05,1.05,1.05);transform:scale3d(1.05,1.05,1.05)}to{-webkit-transform:scaleX(1);transform:scaleX(1)}}.animate__pulse{-webkit-animation-name:pulse;animation-name:pulse;-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out}@-webkit-keyframes rubberBand{0%{-webkit-transform:scaleX(1);transform:scaleX(1)}30%{-webkit-transform:scale3d(1.25,.75,1);transform:scale3d(1.25,.75,1)}40%{-webkit-transform:scale3d(.75,1.25,1);transform:scale3d(.75,1.25,1)}50%{-webkit-transform:scale3d(1.15,.85,1);transform:scale3d(1.15,.85,1)}65%{-webkit-transform:scale3d(.95,1.05,1);transform:scale3d(.95,1.05,1)}75%{-webkit-transform:scale3d(1.05,.95,1);transform:scale3d(1.05,.95,1)}to{-webkit-transform:scaleX(1);transform:scaleX(1)}}@keyframes rubberBand{0%{-webkit-transform:scaleX(1);transform:scaleX(1)}30%{-webkit-transform:scale3d(1.25,.75,1);transform:scale3d(1.25,.75,1)}40%{-webkit-transform:scale3d(.75,1.25,1);transform:scale3d(.75,1.25,1)}50%{-webkit-transform:scale3d(1.15,.85,1);transform:scale3d(1.15,.85,1)}65%{-webkit-transform:scale3d(.95,1.05,1);transform:scale3d(.95,1.05,1)}75%{-webkit-transform:scale3d(1.05,.95,1);transform:scale3d(1.05,.95,1)}to{-webkit-transform:scaleX(1);transform:scaleX(1)}}.animate__rubberBand{-webkit-animation-name:rubberBand;animation-name:rubberBand}@-webkit-keyframes shakeX{0%,to{-webkit-transform:translateZ(0);transform:translateZ(0)}10%,30%,50%,70%,90%{-webkit-transform:translate3d(-10px,0,0);transform:translate3d(-10px,0,0)}20%,40%,60%,80%{-webkit-transform:translate3d(10px,0,0);transform:translate3d(10px,0,0)}}@keyframes shakeX{0%,to{-webkit-transform:translateZ(0);transform:translateZ(0)}10%,30%,50%,70%,90%{-webkit-transform:translate3d(-10px,0,0);transform:translate3d(-10px,0,0)}20%,40%,60%,80%{-webkit-transform:translate3d(10px,0,0);transform:translate3d(10px,0,0)}}.animate__shakeX{-webkit-animation-name:shakeX;animation-name:shakeX}@-webkit-keyframes shakeY{0%,to{-webkit-transform:translateZ(0);transform:translateZ(0)}10%,30%,50%,70%,90%{-webkit-transform:translate3d(0,-10px,0);transform:translate3d(0,-10px,0)}20%,40%,60%,80%{-webkit-transform:translate3d(0,10px,0);transform:translate3d(0,10px,0)}}@keyframes shakeY{0%,to{-webkit-transform:translateZ(0);transform:translateZ(0)}10%,30%,50%,70%,90%{-webkit-transform:translate3d(0,-10px,0);transform:translate3d(0,-10px,0)}20%,40%,60%,80%{-webkit-transform:translate3d(0,10px,0);transform:translate3d(0,10px,0)}}.animate__shakeY{-webkit-animation-name:shakeY;animation-name:shakeY}@-webkit-keyframes headShake{0%{-webkit-transform:translateX(0);transform:translateX(0)}6.5%{-webkit-transform:translateX(-6px) rotateY(-9deg);transform:translateX(-6px) rotateY(-9deg)}18.5%{-webkit-transform:translateX(5px) rotateY(7deg);transform:translateX(5px) rotateY(7deg)}31.5%{-webkit-transform:translateX(-3px) rotateY(-5deg);transform:translateX(-3px) rotateY(-5deg)}43.5%{-webkit-transform:translateX(2px) rotateY(3deg);transform:translateX(2px) rotateY(3deg)}50%{-webkit-transform:translateX(0);transform:translateX(0)}}@keyframes headShake{0%{-webkit-transform:translateX(0);transform:translateX(0)}6.5%{-webkit-transform:translateX(-6px) rotateY(-9deg);transform:translateX(-6px) rotateY(-9deg)}18.5%{-webkit-transform:translateX(5px) rotateY(7deg);transform:translateX(5px) rotateY(7deg)}31.5%{-webkit-transform:translateX(-3px) rotateY(-5deg);transform:translateX(-3px) rotateY(-5deg)}43.5%{-webkit-transform:translateX(2px) rotateY(3deg);transform:translateX(2px) rotateY(3deg)}50%{-webkit-transform:translateX(0);transform:translateX(0)}}.animate__headShake{-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out;-webkit-animation-name:headShake;animation-name:headShake}@-webkit-keyframes swing{20%{-webkit-transform:rotate(15deg);transform:rotate(15deg)}40%{-webkit-transform:rotate(-10deg);transform:rotate(-10deg)}60%{-webkit-transform:rotate(5deg);transform:rotate(5deg)}80%{-webkit-transform:rotate(-5deg);transform:rotate(-5deg)}to{-webkit-transform:rotate(0deg);transform:rotate(0deg)}}@keyframes swing{20%{-webkit-transform:rotate(15deg);transform:rotate(15deg)}40%{-webkit-transform:rotate(-10deg);transform:rotate(-10deg)}60%{-webkit-transform:rotate(5deg);transform:rotate(5deg)}80%{-webkit-transform:rotate(-5deg);transform:rotate(-5deg)}to{-webkit-transform:rotate(0deg);transform:rotate(0deg)}}.animate__swing{-webkit-transform-origin:top center;transform-origin:top center;-webkit-animation-name:swing;animation-name:swing}@-webkit-keyframes tada{0%{-webkit-transform:scaleX(1);transform:scaleX(1)}10%,20%{-webkit-transform:scale3d(.9,.9,.9) rotate(-3deg);transform:scale3d(.9,.9,.9) rotate(-3deg)}30%,50%,70%,90%{-webkit-transform:scale3d(1.1,1.1,1.1) rotate(3deg);transform:scale3d(1.1,1.1,1.1) rotate(3deg)}40%,60%,80%{-webkit-transform:scale3d(1.1,1.1,1.1) rotate(-3deg);transform:scale3d(1.1,1.1,1.1) rotate(-3deg)}to{-webkit-transform:scaleX(1);transform:scaleX(1)}}@keyframes tada{0%{-webkit-transform:scaleX(1);transform:scaleX(1)}10%,20%{-webkit-transform:scale3d(.9,.9,.9) rotate(-3deg);transform:scale3d(.9,.9,.9) rotate(-3deg)}30%,50%,70%,90%{-webkit-transform:scale3d(1.1,1.1,1.1) rotate(3deg);transform:scale3d(1.1,1.1,1.1) rotate(3deg)}40%,60%,80%{-webkit-transform:scale3d(1.1,1.1,1.1) rotate(-3deg);transform:scale3d(1.1,1.1,1.1) rotate(-3deg)}to{-webkit-transform:scaleX(1);transform:scaleX(1)}}.animate__tada{-webkit-animation-name:tada;animation-name:tada}@-webkit-keyframes wobble{0%{-webkit-transform:translateZ(0);transform:translateZ(0)}15%{-webkit-transform:translate3d(-25%,0,0) rotate(-5deg);transform:translate3d(-25%,0,0) rotate(-5deg)}30%{-webkit-transform:translate3d(20%,0,0) rotate(3deg);transform:translate3d(20%,0,0) rotate(3deg)}45%{-webkit-transform:translate3d(-15%,0,0) rotate(-3deg);transform:translate3d(-15%,0,0) rotate(-3deg)}60%{-webkit-transform:translate3d(10%,0,0) rotate(2deg);transform:translate3d(10%,0,0) rotate(2deg)}75%{-webkit-transform:translate3d(-5%,0,0) rotate(-1deg);transform:translate3d(-5%,0,0) rotate(-1deg)}to{-webkit-transform:translateZ(0);transform:translateZ(0)}}@keyframes wobble{0%{-webkit-transform:translateZ(0);transform:translateZ(0)}15%{-webkit-transform:translate3d(-25%,0,0) rotate(-5deg);transform:translate3d(-25%,0,0) rotate(-5deg)}30%{-webkit-transform:translate3d(20%,0,0) rotate(3deg);transform:translate3d(20%,0,0) rotate(3deg)}45%{-webkit-transform:translate3d(-15%,0,0) rotate(-3deg);transform:translate3d(-15%,0,0) rotate(-3deg)}60%{-webkit-transform:translate3d(10%,0,0) rotate(2deg);transform:translate3d(10%,0,0) rotate(2deg)}75%{-webkit-transform:translate3d(-5%,0,0) rotate(-1deg);transform:translate3d(-5%,0,0) rotate(-1deg)}to{-webkit-transform:translateZ(0);transform:translateZ(0)}}.animate__wobble{-webkit-animation-name:wobble;animation-name:wobble}@-webkit-keyframes jello{0%,11.1%,to{-webkit-transform:translateZ(0);transform:translateZ(0)}22.2%{-webkit-transform:skewX(-12.5deg) skewY(-12.5deg);transform:skewX(-12.5deg) skewY(-12.5deg)}33.3%{-webkit-transform:skewX(6.25deg) skewY(6.25deg);transform:skewX(6.25deg) skewY(6.25deg)}44.4%{-webkit-transform:skewX(-3.125deg) skewY(-3.125deg);transform:skewX(-3.125deg) skewY(-3.125deg)}55.5%{-webkit-transform:skewX(1.5625deg) skewY(1.5625deg);transform:skewX(1.5625deg) skewY(1.5625deg)}66.6%{-webkit-transform:skewX(-.78125deg) skewY(-.78125deg);transform:skewX(-.78125deg) skewY(-.78125deg)}77.7%{-webkit-transform:skewX(.390625deg) skewY(.390625deg);transform:skewX(.390625deg) skewY(.390625deg)}88.8%{-webkit-transform:skewX(-.1953125deg) skewY(-.1953125deg);transform:skewX(-.1953125deg) skewY(-.1953125deg)}}@keyframes jello{0%,11.1%,to{-webkit-transform:translateZ(0);transform:translateZ(0)}22.2%{-webkit-transform:skewX(-12.5deg) skewY(-12.5deg);transform:skewX(-12.5deg) skewY(-12.5deg)}33.3%{-webkit-transform:skewX(6.25deg) skewY(6.25deg);transform:skewX(6.25deg) skewY(6.25deg)}44.4%{-webkit-transform:skewX(-3.125deg) skewY(-3.125deg);transform:skewX(-3.125deg) skewY(-3.125deg)}55.5%{-webkit-transform:skewX(1.5625deg) skewY(1.5625deg);transform:skewX(1.5625deg) skewY(1.5625deg)}66.6%{-webkit-transform:skewX(-.78125deg) skewY(-.78125deg);transform:skewX(-.78125deg) skewY(-.78125deg)}77.7%{-webkit-transform:skewX(.390625deg) skewY(.390625deg);transform:skewX(.390625deg) skewY(.390625deg)}88.8%{-webkit-transform:skewX(-.1953125deg) skewY(-.1953125deg);transform:skewX(-.1953125deg) skewY(-.1953125deg)}}.animate__jello{-webkit-animation-name:jello;animation-name:jello;-webkit-transform-origin:center;transform-origin:center}@-webkit-keyframes heartBeat{0%{-webkit-transform:scale(1);transform:scale(1)}14%{-webkit-transform:scale(1.3);transform:scale(1.3)}28%{-webkit-transform:scale(1);transform:scale(1)}42%{-webkit-transform:scale(1.3);transform:scale(1.3)}70%{-webkit-transform:scale(1);transform:scale(1)}}@keyframes heartBeat{0%{-webkit-transform:scale(1);transform:scale(1)}14%{-webkit-transform:scale(1.3);transform:scale(1.3)}28%{-webkit-transform:scale(1);transform:scale(1)}42%{-webkit-transform:scale(1.3);transform:scale(1.3)}70%{-webkit-transform:scale(1);transform:scale(1)}}.animate__heartBeat{-webkit-animation-name:heartBeat;animation-name:heartBeat;-webkit-animation-duration:1.3s;animation-duration:1.3s;-webkit-animation-duration:calc(var(--animate-duration)*1.3);animation-duration:calc(var(--animate-duration)*1.3);-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out}@-webkit-keyframes backInDown{0%{-webkit-transform:translateY(-1200px) scale(.7);transform:translateY(-1200px) scale(.7);opacity:.7}80%{-webkit-transform:translateY(0) scale(.7);transform:translateY(0) scale(.7);opacity:.7}to{-webkit-transform:scale(1);transform:scale(1);opacity:1}}@keyframes backInDown{0%{-webkit-transform:translateY(-1200px) scale(.7);transform:translateY(-1200px) scale(.7);opacity:.7}80%{-webkit-transform:translateY(0) scale(.7);transform:translateY(0) scale(.7);opacity:.7}to{-webkit-transform:scale(1);transform:scale(1);opacity:1}}.animate__backInDown{-webkit-animation-name:backInDown;animation-name:backInDown}@-webkit-keyframes backInLeft{0%{-webkit-transform:translateX(-2000px) scale(.7);transform:translateX(-2000px) scale(.7);opacity:.7}80%{-webkit-transform:translateX(0) scale(.7);transform:translateX(0) scale(.7);opacity:.7}to{-webkit-transform:scale(1);transform:scale(1);opacity:1}}@keyframes backInLeft{0%{-webkit-transform:translateX(-2000px) scale(.7);transform:translateX(-2000px) scale(.7);opacity:.7}80%{-webkit-transform:translateX(0) scale(.7);transform:translateX(0) scale(.7);opacity:.7}to{-webkit-transform:scale(1);transform:scale(1);opacity:1}}.animate__backInLeft{-webkit-animation-name:backInLeft;animation-name:backInLeft}@-webkit-keyframes backInRight{0%{-webkit-transform:translateX(2000px) scale(.7);transform:translateX(2000px) scale(.7);opacity:.7}80%{-webkit-transform:translateX(0) scale(.7);transform:translateX(0) scale(.7);opacity:.7}to{-webkit-transform:scale(1);transform:scale(1);opacity:1}}@keyframes backInRight{0%{-webkit-transform:translateX(2000px) scale(.7);transform:translateX(2000px) scale(.7);opacity:.7}80%{-webkit-transform:translateX(0) scale(.7);transform:translateX(0) scale(.7);opacity:.7}to{-webkit-transform:scale(1);transform:scale(1);opacity:1}}.animate__backInRight{-webkit-animation-name:backInRight;animation-name:backInRight}@-webkit-keyframes backInUp{0%{-webkit-transform:translateY(1200px) scale(.7);transform:translateY(1200px) scale(.7);opacity:.7}80%{-webkit-transform:translateY(0) scale(.7);transform:translateY(0) scale(.7);opacity:.7}to{-webkit-transform:scale(1);transform:scale(1);opacity:1}}@keyframes backInUp{0%{-webkit-transform:translateY(1200px) scale(.7);transform:translateY(1200px) scale(.7);opacity:.7}80%{-webkit-transform:translateY(0) scale(.7);transform:translateY(0) scale(.7);opacity:.7}to{-webkit-transform:scale(1);transform:scale(1);opacity:1}}.animate__backInUp{-webkit-animation-name:backInUp;animation-name:backInUp}@-webkit-keyframes backOutDown{0%{-webkit-transform:scale(1);transform:scale(1);opacity:1}20%{-webkit-transform:translateY(0) scale(.7);transform:translateY(0) scale(.7);opacity:.7}to{-webkit-transform:translateY(700px) scale(.7);transform:translateY(700px) scale(.7);opacity:.7}}@keyframes backOutDown{0%{-webkit-transform:scale(1);transform:scale(1);opacity:1}20%{-webkit-transform:translateY(0) scale(.7);transform:translateY(0) scale(.7);opacity:.7}to{-webkit-transform:translateY(700px) scale(.7);transform:translateY(700px) scale(.7);opacity:.7}}.animate__backOutDown{-webkit-animation-name:backOutDown;animation-name:backOutDown}@-webkit-keyframes backOutLeft{0%{-webkit-transform:scale(1);transform:scale(1);opacity:1}20%{-webkit-transform:translateX(0) scale(.7);transform:translateX(0) scale(.7);opacity:.7}to{-webkit-transform:translateX(-2000px) scale(.7);transform:translateX(-2000px) scale(.7);opacity:.7}}@keyframes backOutLeft{0%{-webkit-transform:scale(1);transform:scale(1);opacity:1}20%{-webkit-transform:translateX(0) scale(.7);transform:translateX(0) scale(.7);opacity:.7}to{-webkit-transform:translateX(-2000px) scale(.7);transform:translateX(-2000px) scale(.7);opacity:.7}}.animate__backOutLeft{-webkit-animation-name:backOutLeft;animation-name:backOutLeft}@-webkit-keyframes backOutRight{0%{-webkit-transform:scale(1);transform:scale(1);opacity:1}20%{-webkit-transform:translateX(0) scale(.7);transform:translateX(0) scale(.7);opacity:.7}to{-webkit-transform:translateX(2000px) scale(.7);transform:translateX(2000px) scale(.7);opacity:.7}}@keyframes backOutRight{0%{-webkit-transform:scale(1);transform:scale(1);opacity:1}20%{-webkit-transform:translateX(0) scale(.7);transform:translateX(0) scale(.7);opacity:.7}to{-webkit-transform:translateX(2000px) scale(.7);transform:translateX(2000px) scale(.7);opacity:.7}}.animate__backOutRight{-webkit-animation-name:backOutRight;animation-name:backOutRight}@-webkit-keyframes backOutUp{0%{-webkit-transform:scale(1);transform:scale(1);opacity:1}20%{-webkit-transform:translateY(0) scale(.7);transform:translateY(0) scale(.7);opacity:.7}to{-webkit-transform:translateY(-700px) scale(.7);transform:translateY(-700px) scale(.7);opacity:.7}}@keyframes backOutUp{0%{-webkit-transform:scale(1);transform:scale(1);opacity:1}20%{-webkit-transform:translateY(0) scale(.7);transform:translateY(0) scale(.7);opacity:.7}to{-webkit-transform:translateY(-700px) scale(.7);transform:translateY(-700px) scale(.7);opacity:.7}}.animate__backOutUp{-webkit-animation-name:backOutUp;animation-name:backOutUp}@-webkit-keyframes bounceIn{0%,20%,40%,60%,80%,to{-webkit-animation-timing-function:cubic-bezier(.215,.61,.355,1);animation-timing-function:cubic-bezier(.215,.61,.355,1)}0%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}20%{-webkit-transform:scale3d(1.1,1.1,1.1);transform:scale3d(1.1,1.1,1.1)}40%{-webkit-transform:scale3d(.9,.9,.9);transform:scale3d(.9,.9,.9)}60%{opacity:1;-webkit-transform:scale3d(1.03,1.03,1.03);transform:scale3d(1.03,1.03,1.03)}80%{-webkit-transform:scale3d(.97,.97,.97);transform:scale3d(.97,.97,.97)}to{opacity:1;-webkit-transform:scaleX(1);transform:scaleX(1)}}@keyframes bounceIn{0%,20%,40%,60%,80%,to{-webkit-animation-timing-function:cubic-bezier(.215,.61,.355,1);animation-timing-function:cubic-bezier(.215,.61,.355,1)}0%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}20%{-webkit-transform:scale3d(1.1,1.1,1.1);transform:scale3d(1.1,1.1,1.1)}40%{-webkit-transform:scale3d(.9,.9,.9);transform:scale3d(.9,.9,.9)}60%{opacity:1;-webkit-transform:scale3d(1.03,1.03,1.03);transform:scale3d(1.03,1.03,1.03)}80%{-webkit-transform:scale3d(.97,.97,.97);transform:scale3d(.97,.97,.97)}to{opacity:1;-webkit-transform:scaleX(1);transform:scaleX(1)}}.animate__bounceIn{-webkit-animation-duration:.75s;animation-duration:.75s;-webkit-animation-duration:calc(var(--animate-duration)*0.75);animation-duration:calc(var(--animate-duration)*0.75);-webkit-animation-name:bounceIn;animation-name:bounceIn}@-webkit-keyframes bounceInDown{0%,60%,75%,90%,to{-webkit-animation-timing-function:cubic-bezier(.215,.61,.355,1);animation-timing-function:cubic-bezier(.215,.61,.355,1)}0%{opacity:0;-webkit-transform:translate3d(0,-3000px,0) scaleY(3);transform:translate3d(0,-3000px,0) scaleY(3)}60%{opacity:1;-webkit-transform:translate3d(0,25px,0) scaleY(.9);transform:translate3d(0,25px,0) scaleY(.9)}75%{-webkit-transform:translate3d(0,-10px,0) scaleY(.95);transform:translate3d(0,-10px,0) scaleY(.95)}90%{-webkit-transform:translate3d(0,5px,0) scaleY(.985);transform:translate3d(0,5px,0) scaleY(.985)}to{-webkit-transform:translateZ(0);transform:translateZ(0)}}@keyframes bounceInDown{0%,60%,75%,90%,to{-webkit-animation-timing-function:cubic-bezier(.215,.61,.355,1);animation-timing-function:cubic-bezier(.215,.61,.355,1)}0%{opacity:0;-webkit-transform:translate3d(0,-3000px,0) scaleY(3);transform:translate3d(0,-3000px,0) scaleY(3)}60%{opacity:1;-webkit-transform:translate3d(0,25px,0) scaleY(.9);transform:translate3d(0,25px,0) scaleY(.9)}75%{-webkit-transform:translate3d(0,-10px,0) scaleY(.95);transform:translate3d(0,-10px,0) scaleY(.95)}90%{-webkit-transform:translate3d(0,5px,0) scaleY(.985);transform:translate3d(0,5px,0) scaleY(.985)}to{-webkit-transform:translateZ(0);transform:translateZ(0)}}.animate__bounceInDown{-webkit-animation-name:bounceInDown;animation-name:bounceInDown}@-webkit-keyframes bounceInLeft{0%,60%,75%,90%,to{-webkit-animation-timing-function:cubic-bezier(.215,.61,.355,1);animation-timing-function:cubic-bezier(.215,.61,.355,1)}0%{opacity:0;-webkit-transform:translate3d(-3000px,0,0) scaleX(3);transform:translate3d(-3000px,0,0) scaleX(3)}60%{opacity:1;-webkit-transform:translate3d(25px,0,0) scaleX(1);transform:translate3d(25px,0,0) scaleX(1)}75%{-webkit-transform:translate3d(-10px,0,0) scaleX(.98);transform:translate3d(-10px,0,0) scaleX(.98)}90%{-webkit-transform:translate3d(5px,0,0) scaleX(.995);transform:translate3d(5px,0,0) scaleX(.995)}to{-webkit-transform:translateZ(0);transform:translateZ(0)}}@keyframes bounceInLeft{0%,60%,75%,90%,to{-webkit-animation-timing-function:cubic-bezier(.215,.61,.355,1);animation-timing-function:cubic-bezier(.215,.61,.355,1)}0%{opacity:0;-webkit-transform:translate3d(-3000px,0,0) scaleX(3);transform:translate3d(-3000px,0,0) scaleX(3)}60%{opacity:1;-webkit-transform:translate3d(25px,0,0) scaleX(1);transform:translate3d(25px,0,0) scaleX(1)}75%{-webkit-transform:translate3d(-10px,0,0) scaleX(.98);transform:translate3d(-10px,0,0) scaleX(.98)}90%{-webkit-transform:translate3d(5px,0,0) scaleX(.995);transform:translate3d(5px,0,0) scaleX(.995)}to{-webkit-transform:translateZ(0);transform:translateZ(0)}}.animate__bounceInLeft{-webkit-animation-name:bounceInLeft;animation-name:bounceInLeft}@-webkit-keyframes bounceInRight{0%,60%,75%,90%,to{-webkit-animation-timing-function:cubic-bezier(.215,.61,.355,1);animation-timing-function:cubic-bezier(.215,.61,.355,1)}0%{opacity:0;-webkit-transform:translate3d(3000px,0,0) scaleX(3);transform:translate3d(3000px,0,0) scaleX(3)}60%{opacity:1;-webkit-transform:translate3d(-25px,0,0) scaleX(1);transform:translate3d(-25px,0,0) scaleX(1)}75%{-webkit-transform:translate3d(10px,0,0) scaleX(.98);transform:translate3d(10px,0,0) scaleX(.98)}90%{-webkit-transform:translate3d(-5px,0,0) scaleX(.995);transform:translate3d(-5px,0,0) scaleX(.995)}to{-webkit-transform:translateZ(0);transform:translateZ(0)}}@keyframes bounceInRight{0%,60%,75%,90%,to{-webkit-animation-timing-function:cubic-bezier(.215,.61,.355,1);animation-timing-function:cubic-bezier(.215,.61,.355,1)}0%{opacity:0;-webkit-transform:translate3d(3000px,0,0) scaleX(3);transform:translate3d(3000px,0,0) scaleX(3)}60%{opacity:1;-webkit-transform:translate3d(-25px,0,0) scaleX(1);transform:translate3d(-25px,0,0) scaleX(1)}75%{-webkit-transform:translate3d(10px,0,0) scaleX(.98);transform:translate3d(10px,0,0) scaleX(.98)}90%{-webkit-transform:translate3d(-5px,0,0) scaleX(.995);transform:translate3d(-5px,0,0) scaleX(.995)}to{-webkit-transform:translateZ(0);transform:translateZ(0)}}.animate__bounceInRight{-webkit-animation-name:bounceInRight;animation-name:bounceInRight}@-webkit-keyframes bounceInUp{0%,60%,75%,90%,to{-webkit-animation-timing-function:cubic-bezier(.215,.61,.355,1);animation-timing-function:cubic-bezier(.215,.61,.355,1)}0%{opacity:0;-webkit-transform:translate3d(0,3000px,0) scaleY(5);transform:translate3d(0,3000px,0) scaleY(5)}60%{opacity:1;-webkit-transform:translate3d(0,-20px,0) scaleY(.9);transform:translate3d(0,-20px,0) scaleY(.9)}75%{-webkit-transform:translate3d(0,10px,0) scaleY(.95);transform:translate3d(0,10px,0) scaleY(.95)}90%{-webkit-transform:translate3d(0,-5px,0) scaleY(.985);transform:translate3d(0,-5px,0) scaleY(.985)}to{-webkit-transform:translateZ(0);transform:translateZ(0)}}@keyframes bounceInUp{0%,60%,75%,90%,to{-webkit-animation-timing-function:cubic-bezier(.215,.61,.355,1);animation-timing-function:cubic-bezier(.215,.61,.355,1)}0%{opacity:0;-webkit-transform:translate3d(0,3000px,0) scaleY(5);transform:translate3d(0,3000px,0) scaleY(5)}60%{opacity:1;-webkit-transform:translate3d(0,-20px,0) scaleY(.9);transform:translate3d(0,-20px,0) scaleY(.9)}75%{-webkit-transform:translate3d(0,10px,0) scaleY(.95);transform:translate3d(0,10px,0) scaleY(.95)}90%{-webkit-transform:translate3d(0,-5px,0) scaleY(.985);transform:translate3d(0,-5px,0) scaleY(.985)}to{-webkit-transform:translateZ(0);transform:translateZ(0)}}.animate__bounceInUp{-webkit-animation-name:bounceInUp;animation-name:bounceInUp}@-webkit-keyframes bounceOut{20%{-webkit-transform:scale3d(.9,.9,.9);transform:scale3d(.9,.9,.9)}50%,55%{opacity:1;-webkit-transform:scale3d(1.1,1.1,1.1);transform:scale3d(1.1,1.1,1.1)}to{opacity:0;-webkit-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}}@keyframes bounceOut{20%{-webkit-transform:scale3d(.9,.9,.9);transform:scale3d(.9,.9,.9)}50%,55%{opacity:1;-webkit-transform:scale3d(1.1,1.1,1.1);transform:scale3d(1.1,1.1,1.1)}to{opacity:0;-webkit-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}}.animate__bounceOut{-webkit-animation-duration:.75s;animation-duration:.75s;-webkit-animation-duration:calc(var(--animate-duration)*0.75);animation-duration:calc(var(--animate-duration)*0.75);-webkit-animation-name:bounceOut;animation-name:bounceOut}@-webkit-keyframes bounceOutDown{20%{-webkit-transform:translate3d(0,10px,0) scaleY(.985);transform:translate3d(0,10px,0) scaleY(.985)}40%,45%{opacity:1;-webkit-transform:translate3d(0,-20px,0) scaleY(.9);transform:translate3d(0,-20px,0) scaleY(.9)}to{opacity:0;-webkit-transform:translate3d(0,2000px,0) scaleY(3);transform:translate3d(0,2000px,0) scaleY(3)}}@keyframes bounceOutDown{20%{-webkit-transform:translate3d(0,10px,0) scaleY(.985);transform:translate3d(0,10px,0) scaleY(.985)}40%,45%{opacity:1;-webkit-transform:translate3d(0,-20px,0) scaleY(.9);transform:translate3d(0,-20px,0) scaleY(.9)}to{opacity:0;-webkit-transform:translate3d(0,2000px,0) scaleY(3);transform:translate3d(0,2000px,0) scaleY(3)}}.animate__bounceOutDown{-webkit-animation-name:bounceOutDown;animation-name:bounceOutDown}@-webkit-keyframes bounceOutLeft{20%{opacity:1;-webkit-transform:translate3d(20px,0,0) scaleX(.9);transform:translate3d(20px,0,0) scaleX(.9)}to{opacity:0;-webkit-transform:translate3d(-2000px,0,0) scaleX(2);transform:translate3d(-2000px,0,0) scaleX(2)}}@keyframes bounceOutLeft{20%{opacity:1;-webkit-transform:translate3d(20px,0,0) scaleX(.9);transform:translate3d(20px,0,0) scaleX(.9)}to{opacity:0;-webkit-transform:translate3d(-2000px,0,0) scaleX(2);transform:translate3d(-2000px,0,0) scaleX(2)}}.animate__bounceOutLeft{-webkit-animation-name:bounceOutLeft;animation-name:bounceOutLeft}@-webkit-keyframes bounceOutRight{20%{opacity:1;-webkit-transform:translate3d(-20px,0,0) scaleX(.9);transform:translate3d(-20px,0,0) scaleX(.9)}to{opacity:0;-webkit-transform:translate3d(2000px,0,0) scaleX(2);transform:translate3d(2000px,0,0) scaleX(2)}}@keyframes bounceOutRight{20%{opacity:1;-webkit-transform:translate3d(-20px,0,0) scaleX(.9);transform:translate3d(-20px,0,0) scaleX(.9)}to{opacity:0;-webkit-transform:translate3d(2000px,0,0) scaleX(2);transform:translate3d(2000px,0,0) scaleX(2)}}.animate__bounceOutRight{-webkit-animation-name:bounceOutRight;animation-name:bounceOutRight}@-webkit-keyframes bounceOutUp{20%{-webkit-transform:translate3d(0,-10px,0) scaleY(.985);transform:translate3d(0,-10px,0) scaleY(.985)}40%,45%{opacity:1;-webkit-transform:translate3d(0,20px,0) scaleY(.9);transform:translate3d(0,20px,0) scaleY(.9)}to{opacity:0;-webkit-transform:translate3d(0,-2000px,0) scaleY(3);transform:translate3d(0,-2000px,0) scaleY(3)}}@keyframes bounceOutUp{20%{-webkit-transform:translate3d(0,-10px,0) scaleY(.985);transform:translate3d(0,-10px,0) scaleY(.985)}40%,45%{opacity:1;-webkit-transform:translate3d(0,20px,0) scaleY(.9);transform:translate3d(0,20px,0) scaleY(.9)}to{opacity:0;-webkit-transform:translate3d(0,-2000px,0) scaleY(3);transform:translate3d(0,-2000px,0) scaleY(3)}}.animate__bounceOutUp{-webkit-animation-name:bounceOutUp;animation-name:bounceOutUp}@-webkit-keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.animate__fadeIn{-webkit-animation-name:fadeIn;animation-name:fadeIn}@-webkit-keyframes fadeInDown{0%{opacity:0;-webkit-transform:translate3d(0,-100%,0);transform:translate3d(0,-100%,0)}to{opacity:1;-webkit-transform:translateZ(0);transform:translateZ(0)}}@keyframes fadeInDown{0%{opacity:0;-webkit-transform:translate3d(0,-100%,0);transform:translate3d(0,-100%,0)}to{opacity:1;-webkit-transform:translateZ(0);transform:translateZ(0)}}.animate__fadeInDown{-webkit-animation-name:fadeInDown;animation-name:fadeInDown}@-webkit-keyframes fadeInDownBig{0%{opacity:0;-webkit-transform:translate3d(0,-2000px,0);transform:translate3d(0,-2000px,0)}to{opacity:1;-webkit-transform:translateZ(0);transform:translateZ(0)}}@keyframes fadeInDownBig{0%{opacity:0;-webkit-transform:translate3d(0,-2000px,0);transform:translate3d(0,-2000px,0)}to{opacity:1;-webkit-transform:translateZ(0);transform:translateZ(0)}}.animate__fadeInDownBig{-webkit-animation-name:fadeInDownBig;animation-name:fadeInDownBig}@-webkit-keyframes fadeInLeft{0%{opacity:0;-webkit-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0)}to{opacity:1;-webkit-transform:translateZ(0);transform:translateZ(0)}}@keyframes fadeInLeft{0%{opacity:0;-webkit-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0)}to{opacity:1;-webkit-transform:translateZ(0);transform:translateZ(0)}}.animate__fadeInLeft{-webkit-animation-name:fadeInLeft;animation-name:fadeInLeft}@-webkit-keyframes fadeInLeftBig{0%{opacity:0;-webkit-transform:translate3d(-2000px,0,0);transform:translate3d(-2000px,0,0)}to{opacity:1;-webkit-transform:translateZ(0);transform:translateZ(0)}}@keyframes fadeInLeftBig{0%{opacity:0;-webkit-transform:translate3d(-2000px,0,0);transform:translate3d(-2000px,0,0)}to{opacity:1;-webkit-transform:translateZ(0);transform:translateZ(0)}}.animate__fadeInLeftBig{-webkit-animation-name:fadeInLeftBig;animation-name:fadeInLeftBig}@-webkit-keyframes fadeInRight{0%{opacity:0;-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0)}to{opacity:1;-webkit-transform:translateZ(0);transform:translateZ(0)}}@keyframes fadeInRight{0%{opacity:0;-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0)}to{opacity:1;-webkit-transform:translateZ(0);transform:translateZ(0)}}.animate__fadeInRight{-webkit-animation-name:fadeInRight;animation-name:fadeInRight}@-webkit-keyframes fadeInRightBig{0%{opacity:0;-webkit-transform:translate3d(2000px,0,0);transform:translate3d(2000px,0,0)}to{opacity:1;-webkit-transform:translateZ(0);transform:translateZ(0)}}@keyframes fadeInRightBig{0%{opacity:0;-webkit-transform:translate3d(2000px,0,0);transform:translate3d(2000px,0,0)}to{opacity:1;-webkit-transform:translateZ(0);transform:translateZ(0)}}.animate__fadeInRightBig{-webkit-animation-name:fadeInRightBig;animation-name:fadeInRightBig}@-webkit-keyframes fadeInUp{0%{opacity:0;-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0)}to{opacity:1;-webkit-transform:translateZ(0);transform:translateZ(0)}}@keyframes fadeInUp{0%{opacity:0;-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0)}to{opacity:1;-webkit-transform:translateZ(0);transform:translateZ(0)}}.animate__fadeInUp{-webkit-animation-name:fadeInUp;animation-name:fadeInUp}@-webkit-keyframes fadeInUpBig{0%{opacity:0;-webkit-transform:translate3d(0,2000px,0);transform:translate3d(0,2000px,0)}to{opacity:1;-webkit-transform:translateZ(0);transform:translateZ(0)}}@keyframes fadeInUpBig{0%{opacity:0;-webkit-transform:translate3d(0,2000px,0);transform:translate3d(0,2000px,0)}to{opacity:1;-webkit-transform:translateZ(0);transform:translateZ(0)}}.animate__fadeInUpBig{-webkit-animation-name:fadeInUpBig;animation-name:fadeInUpBig}@-webkit-keyframes fadeInTopLeft{0%{opacity:0;-webkit-transform:translate3d(-100%,-100%,0);transform:translate3d(-100%,-100%,0)}to{opacity:1;-webkit-transform:translateZ(0);transform:translateZ(0)}}@keyframes fadeInTopLeft{0%{opacity:0;-webkit-transform:translate3d(-100%,-100%,0);transform:translate3d(-100%,-100%,0)}to{opacity:1;-webkit-transform:translateZ(0);transform:translateZ(0)}}.animate__fadeInTopLeft{-webkit-animation-name:fadeInTopLeft;animation-name:fadeInTopLeft}@-webkit-keyframes fadeInTopRight{0%{opacity:0;-webkit-transform:translate3d(100%,-100%,0);transform:translate3d(100%,-100%,0)}to{opacity:1;-webkit-transform:translateZ(0);transform:translateZ(0)}}@keyframes fadeInTopRight{0%{opacity:0;-webkit-transform:translate3d(100%,-100%,0);transform:translate3d(100%,-100%,0)}to{opacity:1;-webkit-transform:translateZ(0);transform:translateZ(0)}}.animate__fadeInTopRight{-webkit-animation-name:fadeInTopRight;animation-name:fadeInTopRight}@-webkit-keyframes fadeInBottomLeft{0%{opacity:0;-webkit-transform:translate3d(-100%,100%,0);transform:translate3d(-100%,100%,0)}to{opacity:1;-webkit-transform:translateZ(0);transform:translateZ(0)}}@keyframes fadeInBottomLeft{0%{opacity:0;-webkit-transform:translate3d(-100%,100%,0);transform:translate3d(-100%,100%,0)}to{opacity:1;-webkit-transform:translateZ(0);transform:translateZ(0)}}.animate__fadeInBottomLeft{-webkit-animation-name:fadeInBottomLeft;animation-name:fadeInBottomLeft}@-webkit-keyframes fadeInBottomRight{0%{opacity:0;-webkit-transform:translate3d(100%,100%,0);transform:translate3d(100%,100%,0)}to{opacity:1;-webkit-transform:translateZ(0);transform:translateZ(0)}}@keyframes fadeInBottomRight{0%{opacity:0;-webkit-transform:translate3d(100%,100%,0);transform:translate3d(100%,100%,0)}to{opacity:1;-webkit-transform:translateZ(0);transform:translateZ(0)}}.animate__fadeInBottomRight{-webkit-animation-name:fadeInBottomRight;animation-name:fadeInBottomRight}@-webkit-keyframes fadeOut{0%{opacity:1}to{opacity:0}}@keyframes fadeOut{0%{opacity:1}to{opacity:0}}.animate__fadeOut{-webkit-animation-name:fadeOut;animation-name:fadeOut}@-webkit-keyframes fadeOutDown{0%{opacity:1}to{opacity:0;-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0)}}@keyframes fadeOutDown{0%{opacity:1}to{opacity:0;-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0)}}.animate__fadeOutDown{-webkit-animation-name:fadeOutDown;animation-name:fadeOutDown}@-webkit-keyframes fadeOutDownBig{0%{opacity:1}to{opacity:0;-webkit-transform:translate3d(0,2000px,0);transform:translate3d(0,2000px,0)}}@keyframes fadeOutDownBig{0%{opacity:1}to{opacity:0;-webkit-transform:translate3d(0,2000px,0);transform:translate3d(0,2000px,0)}}.animate__fadeOutDownBig{-webkit-animation-name:fadeOutDownBig;animation-name:fadeOutDownBig}@-webkit-keyframes fadeOutLeft{0%{opacity:1}to{opacity:0;-webkit-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0)}}@keyframes fadeOutLeft{0%{opacity:1}to{opacity:0;-webkit-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0)}}.animate__fadeOutLeft{-webkit-animation-name:fadeOutLeft;animation-name:fadeOutLeft}@-webkit-keyframes fadeOutLeftBig{0%{opacity:1}to{opacity:0;-webkit-transform:translate3d(-2000px,0,0);transform:translate3d(-2000px,0,0)}}@keyframes fadeOutLeftBig{0%{opacity:1}to{opacity:0;-webkit-transform:translate3d(-2000px,0,0);transform:translate3d(-2000px,0,0)}}.animate__fadeOutLeftBig{-webkit-animation-name:fadeOutLeftBig;animation-name:fadeOutLeftBig}@-webkit-keyframes fadeOutRight{0%{opacity:1}to{opacity:0;-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0)}}@keyframes fadeOutRight{0%{opacity:1}to{opacity:0;-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0)}}.animate__fadeOutRight{-webkit-animation-name:fadeOutRight;animation-name:fadeOutRight}@-webkit-keyframes fadeOutRightBig{0%{opacity:1}to{opacity:0;-webkit-transform:translate3d(2000px,0,0);transform:translate3d(2000px,0,0)}}@keyframes fadeOutRightBig{0%{opacity:1}to{opacity:0;-webkit-transform:translate3d(2000px,0,0);transform:translate3d(2000px,0,0)}}.animate__fadeOutRightBig{-webkit-animation-name:fadeOutRightBig;animation-name:fadeOutRightBig}@-webkit-keyframes fadeOutUp{0%{opacity:1}to{opacity:0;-webkit-transform:translate3d(0,-100%,0);transform:translate3d(0,-100%,0)}}@keyframes fadeOutUp{0%{opacity:1}to{opacity:0;-webkit-transform:translate3d(0,-100%,0);transform:translate3d(0,-100%,0)}}.animate__fadeOutUp{-webkit-animation-name:fadeOutUp;animation-name:fadeOutUp}@-webkit-keyframes fadeOutUpBig{0%{opacity:1}to{opacity:0;-webkit-transform:translate3d(0,-2000px,0);transform:translate3d(0,-2000px,0)}}@keyframes fadeOutUpBig{0%{opacity:1}to{opacity:0;-webkit-transform:translate3d(0,-2000px,0);transform:translate3d(0,-2000px,0)}}.animate__fadeOutUpBig{-webkit-animation-name:fadeOutUpBig;animation-name:fadeOutUpBig}@-webkit-keyframes fadeOutTopLeft{0%{opacity:1;-webkit-transform:translateZ(0);transform:translateZ(0)}to{opacity:0;-webkit-transform:translate3d(-100%,-100%,0);transform:translate3d(-100%,-100%,0)}}@keyframes fadeOutTopLeft{0%{opacity:1;-webkit-transform:translateZ(0);transform:translateZ(0)}to{opacity:0;-webkit-transform:translate3d(-100%,-100%,0);transform:translate3d(-100%,-100%,0)}}.animate__fadeOutTopLeft{-webkit-animation-name:fadeOutTopLeft;animation-name:fadeOutTopLeft}@-webkit-keyframes fadeOutTopRight{0%{opacity:1;-webkit-transform:translateZ(0);transform:translateZ(0)}to{opacity:0;-webkit-transform:translate3d(100%,-100%,0);transform:translate3d(100%,-100%,0)}}@keyframes fadeOutTopRight{0%{opacity:1;-webkit-transform:translateZ(0);transform:translateZ(0)}to{opacity:0;-webkit-transform:translate3d(100%,-100%,0);transform:translate3d(100%,-100%,0)}}.animate__fadeOutTopRight{-webkit-animation-name:fadeOutTopRight;animation-name:fadeOutTopRight}@-webkit-keyframes fadeOutBottomRight{0%{opacity:1;-webkit-transform:translateZ(0);transform:translateZ(0)}to{opacity:0;-webkit-transform:translate3d(100%,100%,0);transform:translate3d(100%,100%,0)}}@keyframes fadeOutBottomRight{0%{opacity:1;-webkit-transform:translateZ(0);transform:translateZ(0)}to{opacity:0;-webkit-transform:translate3d(100%,100%,0);transform:translate3d(100%,100%,0)}}.animate__fadeOutBottomRight{-webkit-animation-name:fadeOutBottomRight;animation-name:fadeOutBottomRight}@-webkit-keyframes fadeOutBottomLeft{0%{opacity:1;-webkit-transform:translateZ(0);transform:translateZ(0)}to{opacity:0;-webkit-transform:translate3d(-100%,100%,0);transform:translate3d(-100%,100%,0)}}@keyframes fadeOutBottomLeft{0%{opacity:1;-webkit-transform:translateZ(0);transform:translateZ(0)}to{opacity:0;-webkit-transform:translate3d(-100%,100%,0);transform:translate3d(-100%,100%,0)}}.animate__fadeOutBottomLeft{-webkit-animation-name:fadeOutBottomLeft;animation-name:fadeOutBottomLeft}@-webkit-keyframes flip{0%{-webkit-transform:perspective(400px) scaleX(1) translateZ(0) rotateY(-1turn);transform:perspective(400px) scaleX(1) translateZ(0) rotateY(-1turn);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}40%{-webkit-transform:perspective(400px) scaleX(1) translateZ(150px) rotateY(-190deg);transform:perspective(400px) scaleX(1) translateZ(150px) rotateY(-190deg);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}50%{-webkit-transform:perspective(400px) scaleX(1) translateZ(150px) rotateY(-170deg);transform:perspective(400px) scaleX(1) translateZ(150px) rotateY(-170deg);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}80%{-webkit-transform:perspective(400px) scale3d(.95,.95,.95) translateZ(0) rotateY(0deg);transform:perspective(400px) scale3d(.95,.95,.95) translateZ(0) rotateY(0deg);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}to{-webkit-transform:perspective(400px) scaleX(1) translateZ(0) rotateY(0deg);transform:perspective(400px) scaleX(1) translateZ(0) rotateY(0deg);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}}@keyframes flip{0%{-webkit-transform:perspective(400px) scaleX(1) translateZ(0) rotateY(-1turn);transform:perspective(400px) scaleX(1) translateZ(0) rotateY(-1turn);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}40%{-webkit-transform:perspective(400px) scaleX(1) translateZ(150px) rotateY(-190deg);transform:perspective(400px) scaleX(1) translateZ(150px) rotateY(-190deg);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}50%{-webkit-transform:perspective(400px) scaleX(1) translateZ(150px) rotateY(-170deg);transform:perspective(400px) scaleX(1) translateZ(150px) rotateY(-170deg);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}80%{-webkit-transform:perspective(400px) scale3d(.95,.95,.95) translateZ(0) rotateY(0deg);transform:perspective(400px) scale3d(.95,.95,.95) translateZ(0) rotateY(0deg);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}to{-webkit-transform:perspective(400px) scaleX(1) translateZ(0) rotateY(0deg);transform:perspective(400px) scaleX(1) translateZ(0) rotateY(0deg);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}}.animate__animated.animate__flip{-webkit-backface-visibility:visible;backface-visibility:visible;-webkit-animation-name:flip;animation-name:flip}@-webkit-keyframes flipInX{0%{-webkit-transform:perspective(400px) rotateX(90deg);transform:perspective(400px) rotateX(90deg);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in;opacity:0}40%{-webkit-transform:perspective(400px) rotateX(-20deg);transform:perspective(400px) rotateX(-20deg);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}60%{-webkit-transform:perspective(400px) rotateX(10deg);transform:perspective(400px) rotateX(10deg);opacity:1}80%{-webkit-transform:perspective(400px) rotateX(-5deg);transform:perspective(400px) rotateX(-5deg)}to{-webkit-transform:perspective(400px);transform:perspective(400px)}}@keyframes flipInX{0%{-webkit-transform:perspective(400px) rotateX(90deg);transform:perspective(400px) rotateX(90deg);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in;opacity:0}40%{-webkit-transform:perspective(400px) rotateX(-20deg);transform:perspective(400px) rotateX(-20deg);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}60%{-webkit-transform:perspective(400px) rotateX(10deg);transform:perspective(400px) rotateX(10deg);opacity:1}80%{-webkit-transform:perspective(400px) rotateX(-5deg);transform:perspective(400px) rotateX(-5deg)}to{-webkit-transform:perspective(400px);transform:perspective(400px)}}.animate__flipInX{-webkit-backface-visibility:visible!important;backface-visibility:visible!important;-webkit-animation-name:flipInX;animation-name:flipInX}@-webkit-keyframes flipInY{0%{-webkit-transform:perspective(400px) rotateY(90deg);transform:perspective(400px) rotateY(90deg);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in;opacity:0}40%{-webkit-transform:perspective(400px) rotateY(-20deg);transform:perspective(400px) rotateY(-20deg);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}60%{-webkit-transform:perspective(400px) rotateY(10deg);transform:perspective(400px) rotateY(10deg);opacity:1}80%{-webkit-transform:perspective(400px) rotateY(-5deg);transform:perspective(400px) rotateY(-5deg)}to{-webkit-transform:perspective(400px);transform:perspective(400px)}}@keyframes flipInY{0%{-webkit-transform:perspective(400px) rotateY(90deg);transform:perspective(400px) rotateY(90deg);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in;opacity:0}40%{-webkit-transform:perspective(400px) rotateY(-20deg);transform:perspective(400px) rotateY(-20deg);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}60%{-webkit-transform:perspective(400px) rotateY(10deg);transform:perspective(400px) rotateY(10deg);opacity:1}80%{-webkit-transform:perspective(400px) rotateY(-5deg);transform:perspective(400px) rotateY(-5deg)}to{-webkit-transform:perspective(400px);transform:perspective(400px)}}.animate__flipInY{-webkit-backface-visibility:visible!important;backface-visibility:visible!important;-webkit-animation-name:flipInY;animation-name:flipInY}@-webkit-keyframes flipOutX{0%{-webkit-transform:perspective(400px);transform:perspective(400px)}30%{-webkit-transform:perspective(400px) rotateX(-20deg);transform:perspective(400px) rotateX(-20deg);opacity:1}to{-webkit-transform:perspective(400px) rotateX(90deg);transform:perspective(400px) rotateX(90deg);opacity:0}}@keyframes flipOutX{0%{-webkit-transform:perspective(400px);transform:perspective(400px)}30%{-webkit-transform:perspective(400px) rotateX(-20deg);transform:perspective(400px) rotateX(-20deg);opacity:1}to{-webkit-transform:perspective(400px) rotateX(90deg);transform:perspective(400px) rotateX(90deg);opacity:0}}.animate__flipOutX{-webkit-animation-duration:.75s;animation-duration:.75s;-webkit-animation-duration:calc(var(--animate-duration)*0.75);animation-duration:calc(var(--animate-duration)*0.75);-webkit-animation-name:flipOutX;animation-name:flipOutX;-webkit-backface-visibility:visible!important;backface-visibility:visible!important}@-webkit-keyframes flipOutY{0%{-webkit-transform:perspective(400px);transform:perspective(400px)}30%{-webkit-transform:perspective(400px) rotateY(-15deg);transform:perspective(400px) rotateY(-15deg);opacity:1}to{-webkit-transform:perspective(400px) rotateY(90deg);transform:perspective(400px) rotateY(90deg);opacity:0}}@keyframes flipOutY{0%{-webkit-transform:perspective(400px);transform:perspective(400px)}30%{-webkit-transform:perspective(400px) rotateY(-15deg);transform:perspective(400px) rotateY(-15deg);opacity:1}to{-webkit-transform:perspective(400px) rotateY(90deg);transform:perspective(400px) rotateY(90deg);opacity:0}}.animate__flipOutY{-webkit-animation-duration:.75s;animation-duration:.75s;-webkit-animation-duration:calc(var(--animate-duration)*0.75);animation-duration:calc(var(--animate-duration)*0.75);-webkit-backface-visibility:visible!important;backface-visibility:visible!important;-webkit-animation-name:flipOutY;animation-name:flipOutY}@-webkit-keyframes lightSpeedInRight{0%{-webkit-transform:translate3d(100%,0,0) skewX(-30deg);transform:translate3d(100%,0,0) skewX(-30deg);opacity:0}60%{-webkit-transform:skewX(20deg);transform:skewX(20deg);opacity:1}80%{-webkit-transform:skewX(-5deg);transform:skewX(-5deg)}to{-webkit-transform:translateZ(0);transform:translateZ(0)}}@keyframes lightSpeedInRight{0%{-webkit-transform:translate3d(100%,0,0) skewX(-30deg);transform:translate3d(100%,0,0) skewX(-30deg);opacity:0}60%{-webkit-transform:skewX(20deg);transform:skewX(20deg);opacity:1}80%{-webkit-transform:skewX(-5deg);transform:skewX(-5deg)}to{-webkit-transform:translateZ(0);transform:translateZ(0)}}.animate__lightSpeedInRight{-webkit-animation-name:lightSpeedInRight;animation-name:lightSpeedInRight;-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}@-webkit-keyframes lightSpeedInLeft{0%{-webkit-transform:translate3d(-100%,0,0) skewX(30deg);transform:translate3d(-100%,0,0) skewX(30deg);opacity:0}60%{-webkit-transform:skewX(-20deg);transform:skewX(-20deg);opacity:1}80%{-webkit-transform:skewX(5deg);transform:skewX(5deg)}to{-webkit-transform:translateZ(0);transform:translateZ(0)}}@keyframes lightSpeedInLeft{0%{-webkit-transform:translate3d(-100%,0,0) skewX(30deg);transform:translate3d(-100%,0,0) skewX(30deg);opacity:0}60%{-webkit-transform:skewX(-20deg);transform:skewX(-20deg);opacity:1}80%{-webkit-transform:skewX(5deg);transform:skewX(5deg)}to{-webkit-transform:translateZ(0);transform:translateZ(0)}}.animate__lightSpeedInLeft{-webkit-animation-name:lightSpeedInLeft;animation-name:lightSpeedInLeft;-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}@-webkit-keyframes lightSpeedOutRight{0%{opacity:1}to{-webkit-transform:translate3d(100%,0,0) skewX(30deg);transform:translate3d(100%,0,0) skewX(30deg);opacity:0}}@keyframes lightSpeedOutRight{0%{opacity:1}to{-webkit-transform:translate3d(100%,0,0) skewX(30deg);transform:translate3d(100%,0,0) skewX(30deg);opacity:0}}.animate__lightSpeedOutRight{-webkit-animation-name:lightSpeedOutRight;animation-name:lightSpeedOutRight;-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}@-webkit-keyframes lightSpeedOutLeft{0%{opacity:1}to{-webkit-transform:translate3d(-100%,0,0) skewX(-30deg);transform:translate3d(-100%,0,0) skewX(-30deg);opacity:0}}@keyframes lightSpeedOutLeft{0%{opacity:1}to{-webkit-transform:translate3d(-100%,0,0) skewX(-30deg);transform:translate3d(-100%,0,0) skewX(-30deg);opacity:0}}.animate__lightSpeedOutLeft{-webkit-animation-name:lightSpeedOutLeft;animation-name:lightSpeedOutLeft;-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}@-webkit-keyframes rotateIn{0%{-webkit-transform:rotate(-200deg);transform:rotate(-200deg);opacity:0}to{-webkit-transform:translateZ(0);transform:translateZ(0);opacity:1}}@keyframes rotateIn{0%{-webkit-transform:rotate(-200deg);transform:rotate(-200deg);opacity:0}to{-webkit-transform:translateZ(0);transform:translateZ(0);opacity:1}}.animate__rotateIn{-webkit-animation-name:rotateIn;animation-name:rotateIn;-webkit-transform-origin:center;transform-origin:center}@-webkit-keyframes rotateInDownLeft{0%{-webkit-transform:rotate(-45deg);transform:rotate(-45deg);opacity:0}to{-webkit-transform:translateZ(0);transform:translateZ(0);opacity:1}}@keyframes rotateInDownLeft{0%{-webkit-transform:rotate(-45deg);transform:rotate(-45deg);opacity:0}to{-webkit-transform:translateZ(0);transform:translateZ(0);opacity:1}}.animate__rotateInDownLeft{-webkit-animation-name:rotateInDownLeft;animation-name:rotateInDownLeft;-webkit-transform-origin:left bottom;transform-origin:left bottom}@-webkit-keyframes rotateInDownRight{0%{-webkit-transform:rotate(45deg);transform:rotate(45deg);opacity:0}to{-webkit-transform:translateZ(0);transform:translateZ(0);opacity:1}}@keyframes rotateInDownRight{0%{-webkit-transform:rotate(45deg);transform:rotate(45deg);opacity:0}to{-webkit-transform:translateZ(0);transform:translateZ(0);opacity:1}}.animate__rotateInDownRight{-webkit-animation-name:rotateInDownRight;animation-name:rotateInDownRight;-webkit-transform-origin:right bottom;transform-origin:right bottom}@-webkit-keyframes rotateInUpLeft{0%{-webkit-transform:rotate(45deg);transform:rotate(45deg);opacity:0}to{-webkit-transform:translateZ(0);transform:translateZ(0);opacity:1}}@keyframes rotateInUpLeft{0%{-webkit-transform:rotate(45deg);transform:rotate(45deg);opacity:0}to{-webkit-transform:translateZ(0);transform:translateZ(0);opacity:1}}.animate__rotateInUpLeft{-webkit-animation-name:rotateInUpLeft;animation-name:rotateInUpLeft;-webkit-transform-origin:left bottom;transform-origin:left bottom}@-webkit-keyframes rotateInUpRight{0%{-webkit-transform:rotate(-90deg);transform:rotate(-90deg);opacity:0}to{-webkit-transform:translateZ(0);transform:translateZ(0);opacity:1}}@keyframes rotateInUpRight{0%{-webkit-transform:rotate(-90deg);transform:rotate(-90deg);opacity:0}to{-webkit-transform:translateZ(0);transform:translateZ(0);opacity:1}}.animate__rotateInUpRight{-webkit-animation-name:rotateInUpRight;animation-name:rotateInUpRight;-webkit-transform-origin:right bottom;transform-origin:right bottom}@-webkit-keyframes rotateOut{0%{opacity:1}to{-webkit-transform:rotate(200deg);transform:rotate(200deg);opacity:0}}@keyframes rotateOut{0%{opacity:1}to{-webkit-transform:rotate(200deg);transform:rotate(200deg);opacity:0}}.animate__rotateOut{-webkit-animation-name:rotateOut;animation-name:rotateOut;-webkit-transform-origin:center;transform-origin:center}@-webkit-keyframes rotateOutDownLeft{0%{opacity:1}to{-webkit-transform:rotate(45deg);transform:rotate(45deg);opacity:0}}@keyframes rotateOutDownLeft{0%{opacity:1}to{-webkit-transform:rotate(45deg);transform:rotate(45deg);opacity:0}}.animate__rotateOutDownLeft{-webkit-animation-name:rotateOutDownLeft;animation-name:rotateOutDownLeft;-webkit-transform-origin:left bottom;transform-origin:left bottom}@-webkit-keyframes rotateOutDownRight{0%{opacity:1}to{-webkit-transform:rotate(-45deg);transform:rotate(-45deg);opacity:0}}@keyframes rotateOutDownRight{0%{opacity:1}to{-webkit-transform:rotate(-45deg);transform:rotate(-45deg);opacity:0}}.animate__rotateOutDownRight{-webkit-animation-name:rotateOutDownRight;animation-name:rotateOutDownRight;-webkit-transform-origin:right bottom;transform-origin:right bottom}@-webkit-keyframes rotateOutUpLeft{0%{opacity:1}to{-webkit-transform:rotate(-45deg);transform:rotate(-45deg);opacity:0}}@keyframes rotateOutUpLeft{0%{opacity:1}to{-webkit-transform:rotate(-45deg);transform:rotate(-45deg);opacity:0}}.animate__rotateOutUpLeft{-webkit-animation-name:rotateOutUpLeft;animation-name:rotateOutUpLeft;-webkit-transform-origin:left bottom;transform-origin:left bottom}@-webkit-keyframes rotateOutUpRight{0%{opacity:1}to{-webkit-transform:rotate(90deg);transform:rotate(90deg);opacity:0}}@keyframes rotateOutUpRight{0%{opacity:1}to{-webkit-transform:rotate(90deg);transform:rotate(90deg);opacity:0}}.animate__rotateOutUpRight{-webkit-animation-name:rotateOutUpRight;animation-name:rotateOutUpRight;-webkit-transform-origin:right bottom;transform-origin:right bottom}@-webkit-keyframes hinge{0%{-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out}20%,60%{-webkit-transform:rotate(80deg);transform:rotate(80deg);-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out}40%,80%{-webkit-transform:rotate(60deg);transform:rotate(60deg);-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out;opacity:1}to{-webkit-transform:translate3d(0,700px,0);transform:translate3d(0,700px,0);opacity:0}}@keyframes hinge{0%{-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out}20%,60%{-webkit-transform:rotate(80deg);transform:rotate(80deg);-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out}40%,80%{-webkit-transform:rotate(60deg);transform:rotate(60deg);-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out;opacity:1}to{-webkit-transform:translate3d(0,700px,0);transform:translate3d(0,700px,0);opacity:0}}.animate__hinge{-webkit-animation-duration:2s;animation-duration:2s;-webkit-animation-duration:calc(var(--animate-duration)*2);animation-duration:calc(var(--animate-duration)*2);-webkit-animation-name:hinge;animation-name:hinge;-webkit-transform-origin:top left;transform-origin:top left}@-webkit-keyframes jackInTheBox{0%{opacity:0;-webkit-transform:scale(.1) rotate(30deg);transform:scale(.1) rotate(30deg);-webkit-transform-origin:center bottom;transform-origin:center bottom}50%{-webkit-transform:rotate(-10deg);transform:rotate(-10deg)}70%{-webkit-transform:rotate(3deg);transform:rotate(3deg)}to{opacity:1;-webkit-transform:scale(1);transform:scale(1)}}@keyframes jackInTheBox{0%{opacity:0;-webkit-transform:scale(.1) rotate(30deg);transform:scale(.1) rotate(30deg);-webkit-transform-origin:center bottom;transform-origin:center bottom}50%{-webkit-transform:rotate(-10deg);transform:rotate(-10deg)}70%{-webkit-transform:rotate(3deg);transform:rotate(3deg)}to{opacity:1;-webkit-transform:scale(1);transform:scale(1)}}.animate__jackInTheBox{-webkit-animation-name:jackInTheBox;animation-name:jackInTheBox}@-webkit-keyframes rollIn{0%{opacity:0;-webkit-transform:translate3d(-100%,0,0) rotate(-120deg);transform:translate3d(-100%,0,0) rotate(-120deg)}to{opacity:1;-webkit-transform:translateZ(0);transform:translateZ(0)}}@keyframes rollIn{0%{opacity:0;-webkit-transform:translate3d(-100%,0,0) rotate(-120deg);transform:translate3d(-100%,0,0) rotate(-120deg)}to{opacity:1;-webkit-transform:translateZ(0);transform:translateZ(0)}}.animate__rollIn{-webkit-animation-name:rollIn;animation-name:rollIn}@-webkit-keyframes rollOut{0%{opacity:1}to{opacity:0;-webkit-transform:translate3d(100%,0,0) rotate(120deg);transform:translate3d(100%,0,0) rotate(120deg)}}@keyframes rollOut{0%{opacity:1}to{opacity:0;-webkit-transform:translate3d(100%,0,0) rotate(120deg);transform:translate3d(100%,0,0) rotate(120deg)}}.animate__rollOut{-webkit-animation-name:rollOut;animation-name:rollOut}@-webkit-keyframes zoomIn{0%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}50%{opacity:1}}@keyframes zoomIn{0%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}50%{opacity:1}}.animate__zoomIn{-webkit-animation-name:zoomIn;animation-name:zoomIn}@-webkit-keyframes zoomInDown{0%{opacity:0;-webkit-transform:scale3d(.1,.1,.1) translate3d(0,-1000px,0);transform:scale3d(.1,.1,.1) translate3d(0,-1000px,0);-webkit-animation-timing-function:cubic-bezier(.55,.055,.675,.19);animation-timing-function:cubic-bezier(.55,.055,.675,.19)}60%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(0,60px,0);transform:scale3d(.475,.475,.475) translate3d(0,60px,0);-webkit-animation-timing-function:cubic-bezier(.175,.885,.32,1);animation-timing-function:cubic-bezier(.175,.885,.32,1)}}@keyframes zoomInDown{0%{opacity:0;-webkit-transform:scale3d(.1,.1,.1) translate3d(0,-1000px,0);transform:scale3d(.1,.1,.1) translate3d(0,-1000px,0);-webkit-animation-timing-function:cubic-bezier(.55,.055,.675,.19);animation-timing-function:cubic-bezier(.55,.055,.675,.19)}60%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(0,60px,0);transform:scale3d(.475,.475,.475) translate3d(0,60px,0);-webkit-animation-timing-function:cubic-bezier(.175,.885,.32,1);animation-timing-function:cubic-bezier(.175,.885,.32,1)}}.animate__zoomInDown{-webkit-animation-name:zoomInDown;animation-name:zoomInDown}@-webkit-keyframes zoomInLeft{0%{opacity:0;-webkit-transform:scale3d(.1,.1,.1) translate3d(-1000px,0,0);transform:scale3d(.1,.1,.1) translate3d(-1000px,0,0);-webkit-animation-timing-function:cubic-bezier(.55,.055,.675,.19);animation-timing-function:cubic-bezier(.55,.055,.675,.19)}60%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(10px,0,0);transform:scale3d(.475,.475,.475) translate3d(10px,0,0);-webkit-animation-timing-function:cubic-bezier(.175,.885,.32,1);animation-timing-function:cubic-bezier(.175,.885,.32,1)}}@keyframes zoomInLeft{0%{opacity:0;-webkit-transform:scale3d(.1,.1,.1) translate3d(-1000px,0,0);transform:scale3d(.1,.1,.1) translate3d(-1000px,0,0);-webkit-animation-timing-function:cubic-bezier(.55,.055,.675,.19);animation-timing-function:cubic-bezier(.55,.055,.675,.19)}60%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(10px,0,0);transform:scale3d(.475,.475,.475) translate3d(10px,0,0);-webkit-animation-timing-function:cubic-bezier(.175,.885,.32,1);animation-timing-function:cubic-bezier(.175,.885,.32,1)}}.animate__zoomInLeft{-webkit-animation-name:zoomInLeft;animation-name:zoomInLeft}@-webkit-keyframes zoomInRight{0%{opacity:0;-webkit-transform:scale3d(.1,.1,.1) translate3d(1000px,0,0);transform:scale3d(.1,.1,.1) translate3d(1000px,0,0);-webkit-animation-timing-function:cubic-bezier(.55,.055,.675,.19);animation-timing-function:cubic-bezier(.55,.055,.675,.19)}60%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(-10px,0,0);transform:scale3d(.475,.475,.475) translate3d(-10px,0,0);-webkit-animation-timing-function:cubic-bezier(.175,.885,.32,1);animation-timing-function:cubic-bezier(.175,.885,.32,1)}}@keyframes zoomInRight{0%{opacity:0;-webkit-transform:scale3d(.1,.1,.1) translate3d(1000px,0,0);transform:scale3d(.1,.1,.1) translate3d(1000px,0,0);-webkit-animation-timing-function:cubic-bezier(.55,.055,.675,.19);animation-timing-function:cubic-bezier(.55,.055,.675,.19)}60%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(-10px,0,0);transform:scale3d(.475,.475,.475) translate3d(-10px,0,0);-webkit-animation-timing-function:cubic-bezier(.175,.885,.32,1);animation-timing-function:cubic-bezier(.175,.885,.32,1)}}.animate__zoomInRight{-webkit-animation-name:zoomInRight;animation-name:zoomInRight}@-webkit-keyframes zoomInUp{0%{opacity:0;-webkit-transform:scale3d(.1,.1,.1) translate3d(0,1000px,0);transform:scale3d(.1,.1,.1) translate3d(0,1000px,0);-webkit-animation-timing-function:cubic-bezier(.55,.055,.675,.19);animation-timing-function:cubic-bezier(.55,.055,.675,.19)}60%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(0,-60px,0);transform:scale3d(.475,.475,.475) translate3d(0,-60px,0);-webkit-animation-timing-function:cubic-bezier(.175,.885,.32,1);animation-timing-function:cubic-bezier(.175,.885,.32,1)}}@keyframes zoomInUp{0%{opacity:0;-webkit-transform:scale3d(.1,.1,.1) translate3d(0,1000px,0);transform:scale3d(.1,.1,.1) translate3d(0,1000px,0);-webkit-animation-timing-function:cubic-bezier(.55,.055,.675,.19);animation-timing-function:cubic-bezier(.55,.055,.675,.19)}60%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(0,-60px,0);transform:scale3d(.475,.475,.475) translate3d(0,-60px,0);-webkit-animation-timing-function:cubic-bezier(.175,.885,.32,1);animation-timing-function:cubic-bezier(.175,.885,.32,1)}}.animate__zoomInUp{-webkit-animation-name:zoomInUp;animation-name:zoomInUp}@-webkit-keyframes zoomOut{0%{opacity:1}50%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}to{opacity:0}}@keyframes zoomOut{0%{opacity:1}50%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}to{opacity:0}}.animate__zoomOut{-webkit-animation-name:zoomOut;animation-name:zoomOut}@-webkit-keyframes zoomOutDown{40%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(0,-60px,0);transform:scale3d(.475,.475,.475) translate3d(0,-60px,0);-webkit-animation-timing-function:cubic-bezier(.55,.055,.675,.19);animation-timing-function:cubic-bezier(.55,.055,.675,.19)}to{opacity:0;-webkit-transform:scale3d(.1,.1,.1) translate3d(0,2000px,0);transform:scale3d(.1,.1,.1) translate3d(0,2000px,0);-webkit-animation-timing-function:cubic-bezier(.175,.885,.32,1);animation-timing-function:cubic-bezier(.175,.885,.32,1)}}@keyframes zoomOutDown{40%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(0,-60px,0);transform:scale3d(.475,.475,.475) translate3d(0,-60px,0);-webkit-animation-timing-function:cubic-bezier(.55,.055,.675,.19);animation-timing-function:cubic-bezier(.55,.055,.675,.19)}to{opacity:0;-webkit-transform:scale3d(.1,.1,.1) translate3d(0,2000px,0);transform:scale3d(.1,.1,.1) translate3d(0,2000px,0);-webkit-animation-timing-function:cubic-bezier(.175,.885,.32,1);animation-timing-function:cubic-bezier(.175,.885,.32,1)}}.animate__zoomOutDown{-webkit-animation-name:zoomOutDown;animation-name:zoomOutDown;-webkit-transform-origin:center bottom;transform-origin:center bottom}@-webkit-keyframes zoomOutLeft{40%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(42px,0,0);transform:scale3d(.475,.475,.475) translate3d(42px,0,0)}to{opacity:0;-webkit-transform:scale(.1) translate3d(-2000px,0,0);transform:scale(.1) translate3d(-2000px,0,0)}}@keyframes zoomOutLeft{40%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(42px,0,0);transform:scale3d(.475,.475,.475) translate3d(42px,0,0)}to{opacity:0;-webkit-transform:scale(.1) translate3d(-2000px,0,0);transform:scale(.1) translate3d(-2000px,0,0)}}.animate__zoomOutLeft{-webkit-animation-name:zoomOutLeft;animation-name:zoomOutLeft;-webkit-transform-origin:left center;transform-origin:left center}@-webkit-keyframes zoomOutRight{40%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(-42px,0,0);transform:scale3d(.475,.475,.475) translate3d(-42px,0,0)}to{opacity:0;-webkit-transform:scale(.1) translate3d(2000px,0,0);transform:scale(.1) translate3d(2000px,0,0)}}@keyframes zoomOutRight{40%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(-42px,0,0);transform:scale3d(.475,.475,.475) translate3d(-42px,0,0)}to{opacity:0;-webkit-transform:scale(.1) translate3d(2000px,0,0);transform:scale(.1) translate3d(2000px,0,0)}}.animate__zoomOutRight{-webkit-animation-name:zoomOutRight;animation-name:zoomOutRight;-webkit-transform-origin:right center;transform-origin:right center}@-webkit-keyframes zoomOutUp{40%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(0,60px,0);transform:scale3d(.475,.475,.475) translate3d(0,60px,0);-webkit-animation-timing-function:cubic-bezier(.55,.055,.675,.19);animation-timing-function:cubic-bezier(.55,.055,.675,.19)}to{opacity:0;-webkit-transform:scale3d(.1,.1,.1) translate3d(0,-2000px,0);transform:scale3d(.1,.1,.1) translate3d(0,-2000px,0);-webkit-animation-timing-function:cubic-bezier(.175,.885,.32,1);animation-timing-function:cubic-bezier(.175,.885,.32,1)}}@keyframes zoomOutUp{40%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(0,60px,0);transform:scale3d(.475,.475,.475) translate3d(0,60px,0);-webkit-animation-timing-function:cubic-bezier(.55,.055,.675,.19);animation-timing-function:cubic-bezier(.55,.055,.675,.19)}to{opacity:0;-webkit-transform:scale3d(.1,.1,.1) translate3d(0,-2000px,0);transform:scale3d(.1,.1,.1) translate3d(0,-2000px,0);-webkit-animation-timing-function:cubic-bezier(.175,.885,.32,1);animation-timing-function:cubic-bezier(.175,.885,.32,1)}}.animate__zoomOutUp{-webkit-animation-name:zoomOutUp;animation-name:zoomOutUp;-webkit-transform-origin:center bottom;transform-origin:center bottom}@-webkit-keyframes slideInDown{0%{-webkit-transform:translate3d(0,-100%,0);transform:translate3d(0,-100%,0);visibility:visible}to{-webkit-transform:translateZ(0);transform:translateZ(0)}}@keyframes slideInDown{0%{-webkit-transform:translate3d(0,-100%,0);transform:translate3d(0,-100%,0);visibility:visible}to{-webkit-transform:translateZ(0);transform:translateZ(0)}}.animate__slideInDown{-webkit-animation-name:slideInDown;animation-name:slideInDown}@-webkit-keyframes slideInLeft{0%{-webkit-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0);visibility:visible}to{-webkit-transform:translateZ(0);transform:translateZ(0)}}@keyframes slideInLeft{0%{-webkit-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0);visibility:visible}to{-webkit-transform:translateZ(0);transform:translateZ(0)}}.animate__slideInLeft{-webkit-animation-name:slideInLeft;animation-name:slideInLeft}@-webkit-keyframes slideInRight{0%{-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0);visibility:visible}to{-webkit-transform:translateZ(0);transform:translateZ(0)}}@keyframes slideInRight{0%{-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0);visibility:visible}to{-webkit-transform:translateZ(0);transform:translateZ(0)}}.animate__slideInRight{-webkit-animation-name:slideInRight;animation-name:slideInRight}@-webkit-keyframes slideInUp{0%{-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0);visibility:visible}to{-webkit-transform:translateZ(0);transform:translateZ(0)}}@keyframes slideInUp{0%{-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0);visibility:visible}to{-webkit-transform:translateZ(0);transform:translateZ(0)}}.animate__slideInUp{-webkit-animation-name:slideInUp;animation-name:slideInUp}@-webkit-keyframes slideOutDown{0%{-webkit-transform:translateZ(0);transform:translateZ(0)}to{visibility:hidden;-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0)}}@keyframes slideOutDown{0%{-webkit-transform:translateZ(0);transform:translateZ(0)}to{visibility:hidden;-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0)}}.animate__slideOutDown{-webkit-animation-name:slideOutDown;animation-name:slideOutDown}@-webkit-keyframes slideOutLeft{0%{-webkit-transform:translateZ(0);transform:translateZ(0)}to{visibility:hidden;-webkit-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0)}}@keyframes slideOutLeft{0%{-webkit-transform:translateZ(0);transform:translateZ(0)}to{visibility:hidden;-webkit-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0)}}.animate__slideOutLeft{-webkit-animation-name:slideOutLeft;animation-name:slideOutLeft}@-webkit-keyframes slideOutRight{0%{-webkit-transform:translateZ(0);transform:translateZ(0)}to{visibility:hidden;-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0)}}@keyframes slideOutRight{0%{-webkit-transform:translateZ(0);transform:translateZ(0)}to{visibility:hidden;-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0)}}.animate__slideOutRight{-webkit-animation-name:slideOutRight;animation-name:slideOutRight}@-webkit-keyframes slideOutUp{0%{-webkit-transform:translateZ(0);transform:translateZ(0)}to{visibility:hidden;-webkit-transform:translate3d(0,-100%,0);transform:translate3d(0,-100%,0)}}@keyframes slideOutUp{0%{-webkit-transform:translateZ(0);transform:translateZ(0)}to{visibility:hidden;-webkit-transform:translate3d(0,-100%,0);transform:translate3d(0,-100%,0)}}.animate__slideOutUp{-webkit-animation-name:slideOutUp;animation-name:slideOutUp}/* fade */ .fade-enter-active, .fade-leave-active { transition: opacity 0.3s ease-in-out; } .fade-enter-from, .fade-leave-to { opacity: 0; } /* fade-slide */ .fade-slide-leave-active, .fade-slide-enter-active { transition: all 0.3s; } .fade-slide-enter-from { opacity: 0; transform: translateX(-30px); } .fade-slide-leave-to { opacity: 0; transform: translateX(30px); } /* fade-bottom */ .fade-bottom-enter-active, .fade-bottom-leave-active { transition: opacity 0.25s, transform 0.3s; } .fade-bottom-enter-from { opacity: 0; transform: translateY(-10%); } .fade-bottom-leave-to { opacity: 0; transform: translateY(10%); } /* fade-scale */ .fade-scale-leave-active, .fade-scale-enter-active { transition: all 0.28s; } .fade-scale-enter-from { opacity: 0; transform: scale(1.2); } .fade-scale-leave-to { opacity: 0; transform: scale(0.8); } /* zoom-fade */ .zoom-fade-enter-active, .zoom-fade-leave-active { transition: transform 0.2s, opacity 0.3s ease-out; } .zoom-fade-enter-from { opacity: 0; transform: scale(0.92); } .zoom-fade-leave-to { opacity: 0; transform: scale(1.06); } /* zoom-out */ .zoom-out-enter-active, .zoom-out-leave-active { transition: opacity 0.1s ease-in-out, transform 0.15s ease-out; } .zoom-out-enter-from, .zoom-out-leave-to { opacity: 0; transform: scale(0); } /* elementUI 的 Dialog 动画 */ @keyframes dialog-fade-in { 0% { opacity: 0; transform: translate3d(0, -20px, 0); } 100% { opacity: 1; transform: translate3d(0, 0, 0); } } @keyframes dialog-fade-out { 0% { opacity: 1; transform: translate3d(0, 0, 0); } 100% { opacity: 0; transform: translate3d(0, -20px, 0); } } @keyframes modal-fade-in { 0% { opacity: 0; } 100% { opacity: 1; } } @keyframes modal-fade-out { 0% { opacity: 1; } 100% { opacity: 0; } } .el-dialog-enter-active { animation: dialog-fade-in 0.3s; } .el-dialog-leave-active { animation: dialog-fade-out 0.3s; } .el-mask-enter-active { animation: modal-fade-in 0.3s; } .el-mask-leave-active { animation: modal-fade-out 0.3s; } /* el-fade-bottom */ .el-fade-enter-active, .el-fade-leave-active { transition: all 0.3s; } .el-fade-enter-from { opacity: 0; transform: scale(1.1, 0.2); } .el-fade-leave-to { opacity: 0; transform: scale(1.1, 0.2); } * { padding: 0; margin: 0; } html, body, #app { height: 100%; padding: 0; margin: 0; } html { font-size: 14px; } body { --margin: 14px; --padding: 16px; overflow: hidden; color: var(--color-text-2); background-color: #f5f7fd; text-rendering: optimizelegibility; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } body[arco-theme=dark] { background-color: #373739; } #app { width: 100vw; height: 100vh; overflow: hidden; } ul { margin-bottom: 0; list-style: none !important; } a, a:focus, a:hover { color: inherit; text-decoration: none; cursor: pointer; } /* 全局样式 */ .g-hover-btn { background-color: transparent; border: 0 !important; } .g-hover-btn:hover { background: var(--color-secondary-hover) !important; } .g-hover-btn:active { background: var(--color-secondary-active) !important; } .g-card { box-sizing: border-box; display: flex; flex-direction: column; overflow: hidden; } .g-card .arco-card-body { box-sizing: border-box; display: flex; flex: 1; flex-direction: column; overflow: hidden; } .g-page-card { box-sizing: border-box; display: flex; flex: 1; flex-direction: column; margin: var(--margin); overflow: hidden; } .g-page-card .arco-card-body { box-sizing: border-box; display: flex; flex: 1; flex-direction: column; overflow: hidden; } .g-gradient-bg { background-image: linear-gradient(to right top, transparent, transparent, color-mix(in oklab, rgb(var(--primary-6)) 12%, transparent), color-mix(in oklab, rgb(var(--primary-6)) 12%, transparent)); } .g-card-title .arco-card-header-title::before { position: absolute; top: 50%; left: 0; width: 4px; height: 50%; content: ""; background-color: rgb(var(--warning-5)); border-radius: 0 4px 4px 0; transform: translateY(-50%); } .g-page { box-sizing: border-box; flex: 1; padding: var(--margin); overflow-y: auto; } .g-table { display: flex; flex: 1; flex-direction: column; overflow: hidden; } .g-table > .arco-spin { height: auto; max-height: 100%; overflow: hidden; } .g-full-table { display: flex; flex: 1; flex-direction: column; overflow: hidden; } .g-full-table .arco-table-container { flex: 1; overflow: hidden; } .g-full-table .arco-table-scroll-y { border-right: 1px solid var(--color-border-1); } .g-full-table .arco-table-tr .arco-table-td:last-child, .g-full-table .arco-table-tr .arco-table-th:last-child { border-right: none; } .g-full-table .arco-table-content .arco-scrollbar:last-child { flex: 1; } .g-full-table .arco-table-content .arco-scrollbar:last-child:not(.arco-scrollbar-both) .arco-table-element { border-bottom: 1px solid var(--color-border-1); } .g-full-tabs { display: flex; flex: 1; flex-direction: column; } .g-full-tabs .arco-tabs-content { flex: 1; padding-top: 0; } .g-full-tabs .arco-tabs-content .arco-tabs-content-list { height: 100%; } .g-full-tabs .arco-tabs-content .arco-tabs-pane { height: 100%; overflow-y: auto; } .g-column-require .arco-table-th-title::before { padding-right: 2px; color: red; content: "*"; } .g-full-column { box-sizing: border-box; display: flex; flex: 1; flex-direction: column; overflow: hidden; } .g-badge-primary .arco-badge-number { background-color: rgb(var(--primary-5)); } .g-badge-success .arco-badge-number { background-color: rgb(var(--success-5)); } .g-badge-warning .arco-badge-number { background-color: rgb(var(--warning-5)); } .g-row-tool { gap: 8px; margin-bottom: 12px; } .g-mt { margin-top: var(--margin); } .g-mb { margin-bottom: var(--margin); } .g-ml { margin-left: var(--margin); } .g-mr { margin-right: var(--margin); } .g-mx { margin-right: var(--margin); margin-left: var(--margin); } .g-my { margin-top: var(--margin); margin-bottom: var(--margin); } .g-m0 { margin: 0; } .g-pt { padding-top: var(--margin); } .g-pb { padding-bottom: var(--margin); } .g-pl { padding-left: var(--margin); } .g-pr { padding-right: var(--margin); } .g-px { padding-right: var(--padding); padding-left: var(--padding); } .g-py { padding-top: var(--padding); padding-bottom: var(--padding); } .g-p0 { padding: 0; } .g-round { border-radius: 100px; } .w-full { width: 100%; } .h-full { height: 100%; } .overflow-hidden { overflow: hidden; } .flex-1 { flex: 1; } .flex-column { flex-direction: column; overflow: hidden; } .g-margin { margin: var(--margin); } .g-padding { padding: var(--padding); } .g-select-input { flex-shrink: 0; width: 100px; } .g-search-input { flex-shrink: 0; width: 250px; } .g-line-1 { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .g-line-2 { -webkit-line-clamp: 2; line-clamp: 2; } .g-line-3 { -webkit-line-clamp: 3; line-clamp: 3; } .g-line-4 { -webkit-line-clamp: 4; line-clamp: 4; } .g-line-5 { -webkit-line-clamp: 5; line-clamp: 5; } .g-line-2, .g-line-3, .g-line-4, .g-line-5 { display: -webkit-box; /* 弹性伸缩盒 */ overflow: hidden; text-overflow: ellipsis; word-break: break-all; -webkit-box-orient: vertical; /* 设置伸缩盒子元素排列方式 */ } /* 美化滚动条 */ ::-webkit-scrollbar { width: 6px; height: 6px; } ::-webkit-scrollbar-thumb { width: 6px; background-color: var(--color-neutral-3); border-radius: 6px; } ::-webkit-scrollbar-thumb:hover { width: 6px; background-color: var(--color-neutral-4); } ::-ms-scrollbar-thumb { width: 6px; background-color: var(--color-neutral-3); border-radius: 6px; } #nprogress .bar { background: rgb(var(--primary-6), 0.5) !important; } body { --w-e-textarea-bg-color: #fff; --w-e-textarea-color: #333; --w-e-textarea-border-color: #ccc; --w-e-textarea-slight-border-color: #e8e8e8; --w-e-textarea-slight-color: #d4d4d4; --w-e-textarea-slight-bg-color: #f5f2f0; --w-e-textarea-selected-border-color: #b4d5ff; --w-e-textarea-handler-bg-color: #4290f7; --w-e-toolbar-color: #595959; --w-e-toolbar-bg-color: #fff; --w-e-toolbar-active-color: #333; --w-e-toolbar-active-bg-color: #f1f1f1; --w-e-toolbar-disabled-color: #999; --w-e-toolbar-border-color: #e8e8e8; --w-e-modal-button-bg-color: #fafafa; --w-e-modal-button-border-color: #d9d9d9; } body[arco-theme=dark] { --w-e-textarea-bg-color: var(--color-bg-2); --w-e-textarea-color: var(--color-text-1); --w-e-textarea-border-color: var(--color-border); --w-e-textarea-slight-border-color: var(--color-border-2); --w-e-textarea-slight-color: var(--color-text-4); --w-e-textarea-slight-bg-color: var(--color-bg-2); --w-e-textarea-selected-border-color: var(--color-primary-light-1); --w-e-textarea-handler-bg-color: var(--color-primary-light-4); --w-e-toolbar-color: #ccc; --w-e-toolbar-bg-color: var(--color-bg-2); --w-e-toolbar-active-color: #fff; --w-e-toolbar-active-bg-color: var(--color-secondary-active); --w-e-toolbar-disabled-color: var(--color-text-4); --w-e-toolbar-border-color: var(--color-border); --w-e-modal-button-bg-color: var(--color-fill-2); --w-e-modal-button-border-color: var(--color-border); } @keyframes fade-up { 0% { opacity: 0; transform: translateY(60px); } 100% { opacity: 1; transform: translateY(0); } } .animated-fade-up-0 { opacity: 0; animation-name: fade-up; animation-duration: 0.5s; animation-delay: 0s; animation-fill-mode: forwards; } .animated-fade-up-1 { opacity: 0; animation-name: fade-up; animation-duration: 0.5s; animation-delay: 0.1s; animation-fill-mode: forwards; } .animated-fade-up-2 { opacity: 0; animation-name: fade-up; animation-duration: 0.5s; animation-delay: 0.2s; animation-fill-mode: forwards; } .animated-fade-up-3 { opacity: 0; animation-name: fade-up; animation-duration: 0.5s; animation-delay: 0.3s; animation-fill-mode: forwards; } .animated-fade-up-4 { opacity: 0; animation-name: fade-up; animation-duration: 0.5s; animation-delay: 0.4s; animation-fill-mode: forwards; } .animated-fade-up-5 { opacity: 0; animation-name: fade-up; animation-duration: 0.5s; animation-delay: 0.5s; animation-fill-mode: forwards; } .animated-fade-up-6 { opacity: 0; animation-name: fade-up; animation-duration: 0.5s; animation-delay: 0.6s; animation-fill-mode: forwards; } .animated-fade-up-7 { opacity: 0; animation-name: fade-up; animation-duration: 0.5s; animation-delay: 0.7s; animation-fill-mode: forwards; } .animated-fade-up-8 { opacity: 0; animation-name: fade-up; animation-duration: 0.5s; animation-delay: 0.8s; animation-fill-mode: forwards; } .animated-fade-up-9 { opacity: 0; animation-name: fade-up; animation-duration: 0.5s; animation-delay: 0.9s; animation-fill-mode: forwards; } .animated-fade-up-10 { opacity: 0; animation-name: fade-up; animation-duration: 0.5s; animation-delay: 1s; animation-fill-mode: forwards; } .animated-fade-up-11 { opacity: 0; animation-name: fade-up; animation-duration: 0.5s; animation-delay: 1.1s; animation-fill-mode: forwards; } .animated-fade-up-12 { opacity: 0; animation-name: fade-up; animation-duration: 0.5s; animation-delay: 1.2s; animation-fill-mode: forwards; }