UNPKG

@tuoyuan/web

Version:
1,872 lines 475 kB
/*! 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 */ -webkit-text-decoration: underline dotted; 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); } body { --red-1: 255,235,232; --red-2: 254,201,195; --red-3: 253,165,158; --red-4: 252,126,122; --red-5: 251,86,86; --red-6: 250,50,57; --red-7: 207,31,43; --red-8: 163,16,31; --red-9: 120,6,21; --red-10: 77,0,13; --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,233,194; --orange-3: 255,216,157; --orange-4: 255,196,119; --orange-5: 255,174,82; --orange-6: 255,149,44; --orange-7: 210,113,27; --orange-8: 166,80,14; --orange-9: 121,52,5; --orange-10: 77,28,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: 234,255,232; --green-2: 181,242,177; --green-3: 130,229,126; --green-4: 80,217,80; --green-5: 39,204,44; --green-6: 2,191,15; --green-7: 1,162,17; --green-8: 1,134,18; --green-9: 0,105,18; --green-10: 0,77,15; --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,255,243; --arcoblue-2: 186,240,213; --arcoblue-3: 144,225,188; --arcoblue-4: 107,211,166; --arcoblue-5: 73,196,147; --arcoblue-6: 43,181,131; --arcoblue-7: 28,155,112; --arcoblue-8: 15,129,95; --arcoblue-9: 6,103,77; --arcoblue-10: 0,77,59; --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'] { --red-1: 77,0,13; --red-2: 120,8,23; --red-3: 163,23,37; --red-4: 207,43,55; --red-5: 250,70,76; --red-6: 251,88,88; --red-7: 252,127,123; --red-8: 253,166,159; --red-9: 254,202,196; --red-10: 255,235,232; --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,28,0; --orange-2: 121,52,5; --orange-3: 166,83,19; --orange-4: 210,119,38; --orange-5: 255,159,64; --orange-6: 255,174,82; --orange-7: 255,197,121; --orange-8: 255,217,159; --orange-9: 255,234,197; --orange-10: 255,248,235; --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,15; --green-2: 1,105,19; --green-3: 8,134,24; --green-4: 18,162,32; --green-5: 31,191,42; --green-6: 43,204,48; --green-7: 85,217,85; --green-8: 134,229,131; --green-9: 185,242,182; --green-10: 239,255,237; --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,77,59; --arcoblue-2: 8,103,78; --arcoblue-3: 22,129,97; --arcoblue-4: 40,155,116; --arcoblue-5: 63,181,138; --arcoblue-6: 86,196,152; --arcoblue-7: 118,211,171; --arcoblue-8: 152,225,192; --arcoblue-9: 191,240,216; --arcoblue-10: 234,255,244; --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: #fff; --color-bg-2: #fff; --color-bg-3: #fff; --color-bg-4: #fff; --color-bg-5: #fff; --color-bg-white: #fff; --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: var(--color-neutral-10); --color-text-2: var(--color-neutral-8); --color-text-3: var(--color-neutral-6); --color-text-4: var(--color-neutral-4); --color-border-1: var(--color-neutral-2); --color-border-2: var(--color-neutral-3); --color-border-3: var(--color-neutral-4); --color-border-4: var(--color-neutral-6); --color-fill-1: var(--color-neutral-1); --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: 2px; --border-radius-medium: 4px; --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'] { --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: rgb(var(--link-6), 0.2); --color-link-light-2: rgb(var(--link-6), 0.35); --color-link-light-3: rgb(var(--link-6), 0.5); --color-link-light-4: rgb(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: 'PingFang SC', 'Microsoft YaHei UI', 'Microsoft YaHei'; } .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); } /******** borderSize *******/ /******** borderStyle *******/ /******** radius *******/ /******** shadow distance *******/ /******** size *******/ /******** spacing *******/ /******** shadow *******/ /******** opacity *******/ /******** fontSize *******/ /******** fontWeight ********/ /******** Primary *******/ /******** success *******/ /******** warning *******/ /******** danger *******/ /******** link *******/ /******** radius *******/ /********* icon hover *********/ .arco-auto-tooltip { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } /******** 基础配置项 end *******/ /******** 基础配置项 end *******/ /******** 高级配置项 *******/ /******** 高级配置项 end *******/ .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: #ffffff; border: 1px solid rgba(0, 0, 0, 0.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: #ffffff; border-color: rgba(0, 0, 0, 0.7); } .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-2); border-color: rgba(0, 0, 0, 0.08); cursor: not-allowed; } .arco-input-label.arco-input-label-disabled:hover { color: var(--color-text-4); background-color: var(--color-fill-2); border-color: rgba(0, 0, 0, 0.08); } .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: #ffffff; border-color: rgb(var(--danger-6)); } .arco-input-label.arco-input-label-error:hover { background-color: #ffffff; border-color: rgb(var(--danger-6)); } .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; -webkit-user-select: none; -moz-user-select: none; 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::-moz-placeholder { color: var(--color-text-3); } .arco-input-label .arco-input-label-input::placeholder { color: var(--color-text-3); } .arco-input-label .arco-input-label-input[disabled]::-moz-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: #ffffff; border: 1px solid rgba(0, 0, 0, 0.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-2); 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::-moz-placeholder { color: var(--color-text-3); } .arco-picker input::placeholder { color: var(--color-text-3); } .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: #ffffff; border-color: rgba(0, 0, 0, 0.3); } .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]::-moz-placeholder { color: var(--color-text-4); } .arco-picker input[disabled]::placeholder { color: var(--color-text-4); } .arco-picker-error { background-color: #ffffff; border-color: rgb(var(--danger-6)); } .arco-picker-error:hover { background-color: #ffffff; border-color: rgb(var(--danger-6)); } .arco-picker-focused { box-shadow: 0 0 0 0 var(--color-primary-light-2); } .arco-picker-focused, .arco-picker-focused:hover { background-color: var(--color-bg-2); 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-2); border-color: rgba(0, 0, 0, 0.08); 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]::-moz-placeholder, .arco-picker-disabled:hover input[disabled]::-moz-placeholder { color: var(--color-text-4); } .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: #ffffff; border: 1px solid rgba(0, 0, 0, 0.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: #ffffff; border-color: rgba(0, 0, 0, 0.7); } .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-2); border-color: rgba(0, 0, 0, 0.08); cursor: not-allowed; } .arco-select-view-single.arco-select-view-disabled:hover { color: var(--color-text-4); background-color: var(--color-fill-2); border-color: rgba(0, 0, 0, 0.08); } .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: #ffffff; border-color: rgb(var(--danger-6)); } .arco-select-view-single.arco-select-view-error:hover { background-color: #ffffff; border-color: rgb(var(--danger-6)); } .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; -webkit-user-select: none; -moz-user-select: none; 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::-moz-placeholder { color: var(--color-text-3); } .arco-select-view-single .arco-select-view-input::placeholder { color: var(--color-text-3); } .arco-select-view-single .arco-select-view-input[disabled]::-moz-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: