@tuoyuan/web
Version:
1,872 lines • 475 kB
CSS
/*! 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: