UNPKG

@douyinfe/semi-ui

Version:

A modern, comprehensive, flexible design system and UI library. Connect DesignOps & DevOps. Quickly build beautiful React apps. Maintained by Douyin-fe team.

1,675 lines (1,633 loc) 696 kB
/* shadow */ /* sizing */ /* spacing */ body, body .semi-always-light, :host, :host .semi-always-light { --semi-amber-0: 254,251,235; --semi-amber-1: 252,245,206; --semi-amber-2: 249,232,158; --semi-amber-3: 246,216,111; --semi-amber-4: 243,198,65; --semi-amber-5: 240,177,20; --semi-amber-6: 200,138,15; --semi-amber-7: 160,102,10; --semi-amber-8: 120,70,6; --semi-amber-9: 80,43,3; --semi-black: 0,0,0; --semi-blue-0: 234,245,255; --semi-blue-1: 203,231,254; --semi-blue-2: 152,205,253; --semi-blue-3: 101,178,252; --semi-blue-4: 50,149,251; --semi-blue-5: 0,100,250; --semi-blue-6: 0,98,214; --semi-blue-7: 0,79,179; --semi-blue-8: 0,61,143; --semi-blue-9: 0,44,107; --semi-cyan-0: 229,247,248; --semi-cyan-1: 194,239,240; --semi-cyan-2: 138,221,226; --semi-cyan-3: 88,203,211; --semi-cyan-4: 44,184,197; --semi-cyan-5: 5,164,182; --semi-cyan-6: 3,134,152; --semi-cyan-7: 1,105,121; --semi-cyan-8: 0,77,91; --semi-cyan-9: 0,50,61; --semi-green-0: 236,247,236; --semi-green-1: 208,240,209; --semi-green-2: 164,224,167; --semi-green-3: 125,209,130; --semi-green-4: 90,194,98; --semi-green-5: 59,179,70; --semi-green-6: 48,149,59; --semi-green-7: 37,119,47; --semi-green-8: 27,89,36; --semi-green-9: 17,60,24; --semi-grey-0: 249,249,249; --semi-grey-1: 230,232,234; --semi-grey-2: 198,202,205; --semi-grey-3: 167,171,176; --semi-grey-4: 136,141,146; --semi-grey-5: 107,112,117; --semi-grey-6: 85,91,97; --semi-grey-7: 65,70,76; --semi-grey-8: 46,50,56; --semi-grey-9: 28,31,35; --semi-indigo-0: 236,239,248; --semi-indigo-1: 209,216,240; --semi-indigo-2: 167,179,225; --semi-indigo-3: 128,144,211; --semi-indigo-4: 94,111,196; --semi-indigo-5: 63,81,181; --semi-indigo-6: 51,66,161; --semi-indigo-7: 40,52,140; --semi-indigo-8: 31,40,120; --semi-indigo-9: 23,29,99; --semi-light-blue-0: 233,247,253; --semi-light-blue-1: 201,236,252; --semi-light-blue-2: 149,216,248; --semi-light-blue-3: 98,195,245; --semi-light-blue-4: 48,172,241; --semi-light-blue-5: 0,149,238; --semi-light-blue-6: 0,123,202; --semi-light-blue-7: 0,99,167; --semi-light-blue-8: 0,75,131; --semi-light-blue-9: 0,53,95; --semi-light-green-0: 243,248,236; --semi-light-green-1: 227,240,208; --semi-light-green-2: 200,226,165; --semi-light-green-3: 173,211,126; --semi-light-green-4: 147,197,91; --semi-light-green-5: 123,182,60; --semi-light-green-6: 100,152,48; --semi-light-green-7: 78,121,38; --semi-light-green-8: 57,91,27; --semi-light-green-9: 37,61,18; --semi-lime-0: 242,250,230; --semi-lime-1: 227,246,197; --semi-lime-2: 203,237,142; --semi-lime-3: 183,227,91; --semi-lime-4: 167,218,44; --semi-lime-5: 155,209,0; --semi-lime-6: 126,174,0; --semi-lime-7: 99,139,0; --semi-lime-8: 72,104,0; --semi-lime-9: 47,70,0; --semi-orange-0: 255,248,234; --semi-orange-1: 254,238,204; --semi-orange-2: 254,217,152; --semi-orange-3: 253,193,101; --semi-orange-4: 253,166,51; --semi-orange-5: 252,136,0; --semi-orange-6: 210,103,0; --semi-orange-7: 168,74,0; --semi-orange-8: 126,49,0; --semi-orange-9: 84,29,0; --semi-pink-0: 253,236,239; --semi-pink-1: 251,207,216; --semi-pink-2: 246,160,181; --semi-pink-3: 242,115,150; --semi-pink-4: 237,72,123; --semi-pink-5: 233,30,99; --semi-pink-6: 197,19,86; --semi-pink-7: 162,11,72; --semi-pink-8: 126,5,58; --semi-pink-9: 90,1,43; --semi-purple-0: 247,233,247; --semi-purple-1: 239,202,240; --semi-purple-2: 221,155,224; --semi-purple-3: 201,111,209; --semi-purple-4: 180,73,194; --semi-purple-5: 158,40,179; --semi-purple-6: 135,30,158; --semi-purple-7: 113,22,138; --semi-purple-8: 92,15,117; --semi-purple-9: 73,10,97; --semi-red-0: 254,242,237; --semi-red-1: 254,221,210; --semi-red-2: 253,183,165; --semi-red-3: 251,144,120; --semi-red-4: 250,102,76; --semi-red-5: 249,57,32; --semi-red-6: 213,37,21; --semi-red-7: 178,20,12; --semi-red-8: 142,8,5; --semi-red-9: 106,1,3; --semi-teal-0: 228,247,244; --semi-teal-1: 192,240,232; --semi-teal-2: 135,224,211; --semi-teal-3: 84,209,193; --semi-teal-4: 39,194,176; --semi-teal-5: 0,179,161; --semi-teal-6: 0,149,137; --semi-teal-7: 0,119,111; --semi-teal-8: 0,89,85; --semi-teal-9: 0,60,58; --semi-violet-0: 243,237,249; --semi-violet-1: 226,209,244; --semi-violet-2: 196,167,233; --semi-violet-3: 166,127,221; --semi-violet-4: 136,91,210; --semi-violet-5: 106,58,199; --semi-violet-6: 87,47,179; --semi-violet-7: 70,37,158; --semi-violet-8: 54,28,138; --semi-violet-9: 40,20,117; --semi-white: 255,255,255; --semi-yellow-0: 255,253,234; --semi-yellow-1: 254,251,203; --semi-yellow-2: 253,243,152; --semi-yellow-3: 252,232,101; --semi-yellow-4: 251,218,50; --semi-yellow-5: 250,200,0; --semi-yellow-6: 208,170,0; --semi-yellow-7: 167,139,0; --semi-yellow-8: 125,106,0; --semi-yellow-9: 83,72,0; } body[theme-mode=dark], body .semi-always-dark, :host([theme-mode=dark]), :host .semi-always-dark { --semi-red-0: 108,9,11; --semi-red-1: 144,17,16; --semi-red-2: 180,32,25; --semi-red-3: 215,51,36; --semi-red-4: 251,73,50; --semi-red-5: 252,114,90; --semi-red-6: 253,153,131; --semi-red-7: 253,190,172; --semi-red-8: 254,224,213; --semi-red-9: 255,243,239; --semi-pink-0: 92,7,48; --semi-pink-1: 128,14,65; --semi-pink-2: 164,23,81; --semi-pink-3: 199,34,97; --semi-pink-4: 235,47,113; --semi-pink-5: 239,86,134; --semi-pink-6: 243,126,159; --semi-pink-7: 247,168,188; --semi-pink-8: 251,211,220; --semi-pink-9: 253,238,241; --semi-purple-0: 74,16,97; --semi-purple-1: 94,23,118; --semi-purple-2: 115,31,138; --semi-purple-3: 137,40,159; --semi-purple-4: 160,51,179; --semi-purple-5: 181,83,194; --semi-purple-6: 202,120,209; --semi-purple-7: 221,160,225; --semi-purple-8: 239,206,240; --semi-purple-9: 247,235,247; --semi-violet-0: 64,27,119; --semi-violet-1: 76,36,140; --semi-violet-2: 88,46,160; --semi-violet-3: 100,57,181; --semi-violet-4: 114,70,201; --semi-violet-5: 136,101,212; --semi-violet-6: 162,136,223; --semi-violet-7: 190,173,233; --semi-violet-8: 221,212,244; --semi-violet-9: 241,238,250; --semi-indigo-0: 23,30,101; --semi-indigo-1: 32,41,122; --semi-indigo-2: 41,54,142; --semi-indigo-3: 52,68,163; --semi-indigo-4: 64,83,183; --semi-indigo-5: 95,113,197; --semi-indigo-6: 129,145,212; --semi-indigo-7: 167,180,226; --semi-indigo-8: 209,216,241; --semi-indigo-9: 237,239,248; --semi-blue-0: 5,49,112; --semi-blue-1: 10,70,148; --semi-blue-2: 19,92,184; --semi-blue-3: 29,117,219; --semi-blue-4: 41,144,255; --semi-blue-5: 84,169,255; --semi-blue-6: 127,193,255; --semi-blue-7: 169,215,255; --semi-blue-8: 212,236,255; --semi-blue-9: 239,248,255; --semi-light-blue-0: 0,55,97; --semi-light-blue-1: 0,77,133; --semi-light-blue-2: 3,102,169; --semi-light-blue-3: 10,129,204; --semi-light-blue-4: 19,159,240; --semi-light-blue-5: 64,180,243; --semi-light-blue-6: 110,200,246; --semi-light-blue-7: 157,220,249; --semi-light-blue-8: 206,238,252; --semi-light-blue-9: 235,248,254; --semi-cyan-0: 4,52,61; --semi-cyan-1: 7,79,92; --semi-cyan-2: 10,108,123; --semi-cyan-3: 14,137,153; --semi-cyan-4: 19,168,184; --semi-cyan-5: 56,187,198; --semi-cyan-6: 98,205,212; --semi-cyan-7: 145,223,227; --semi-cyan-8: 198,239,241; --semi-cyan-9: 231,247,248; --semi-teal-0: 2,60,57; --semi-teal-1: 4,90,85; --semi-teal-2: 7,119,111; --semi-teal-3: 10,149,136; --semi-teal-4: 14,179,161; --semi-teal-5: 51,194,176; --semi-teal-6: 94,209,193; --semi-teal-7: 142,225,211; --semi-teal-8: 196,240,232; --semi-teal-9: 230,247,244; --semi-green-0: 18,60,25; --semi-green-1: 28,90,37; --semi-green-2: 39,119,49; --semi-green-3: 50,149,61; --semi-green-4: 62,179,73; --semi-green-5: 93,194,100; --semi-green-6: 127,209,132; --semi-green-7: 166,225,168; --semi-green-8: 208,240,209; --semi-green-9: 236,247,236; --semi-light-green-0: 38,61,19; --semi-light-green-1: 59,92,29; --semi-light-green-2: 81,123,40; --semi-light-green-3: 103,153,52; --semi-light-green-4: 127,184,64; --semi-light-green-5: 151,198,95; --semi-light-green-6: 176,212,129; --semi-light-green-7: 201,227,167; --semi-light-green-8: 228,241,209; --semi-light-green-9: 243,248,237; --semi-lime-0: 49,70,3; --semi-lime-1: 75,105,5; --semi-lime-2: 103,141,9; --semi-lime-3: 132,176,12; --semi-lime-4: 162,211,17; --semi-lime-5: 174,220,58; --semi-lime-6: 189,229,102; --semi-lime-7: 207,237,150; --semi-lime-8: 229,246,201; --semi-lime-9: 243,251,233; --semi-yellow-0: 84,73,3; --semi-yellow-1: 126,108,6; --semi-yellow-2: 168,142,10; --semi-yellow-3: 210,175,15; --semi-yellow-4: 252,206,20; --semi-yellow-5: 253,222,67; --semi-yellow-6: 253,235,113; --semi-yellow-7: 254,245,160; --semi-yellow-8: 254,251,208; --semi-yellow-9: 255,254,236; --semi-amber-0: 81,46,9; --semi-amber-1: 121,75,15; --semi-amber-2: 161,107,22; --semi-amber-3: 202,143,30; --semi-amber-4: 242,183,38; --semi-amber-5: 245,202,80; --semi-amber-6: 247,219,122; --semi-amber-7: 250,234,166; --semi-amber-8: 252,246,210; --semi-amber-9: 254,251,237; --semi-orange-0: 85,31,3; --semi-orange-1: 128,53,6; --semi-orange-2: 170,80,10; --semi-orange-3: 213,111,15; --semi-orange-4: 255,146,20; --semi-orange-5: 255,174,67; --semi-orange-6: 255,199,114; --semi-orange-7: 255,221,161; --semi-orange-8: 255,239,208; --semi-orange-9: 255,249,237; --semi-grey-0: 28,31,35; --semi-grey-1: 46,50,56; --semi-grey-2: 65,70,76; --semi-grey-3: 85,91,97; --semi-grey-4: 107,112,117; --semi-grey-5: 136,141,146; --semi-grey-6: 167,171,176; --semi-grey-7: 198,202,205; --semi-grey-8: 230,232,234; --semi-grey-9: 249,249,249; --semi-white: 255, 255, 255; --semi-black: 0, 0, 0; } body, body[theme-mode=dark] .semi-always-light, :host, :host .semi-always-light { font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; --semi-color-white: rgba(var(--semi-white), 1); --semi-color-black: rgba(var(--semi-black), 1); --semi-color-primary: rgba(var(--semi-blue-5), 1); --semi-color-primary-hover: rgba(var(--semi-blue-6), 1); --semi-color-primary-active: rgba(var(--semi-blue-7), 1); --semi-color-primary-disabled: rgba(var(--semi-blue-2), 1); --semi-color-primary-light-default: rgba(var(--semi-blue-0), 1); --semi-color-primary-light-hover: rgba(var(--semi-blue-1), 1); --semi-color-primary-light-active: rgba(var(--semi-blue-2), 1); --semi-color-secondary: rgba(var(--semi-light-blue-5), 1); --semi-color-secondary-hover: rgba(var(--semi-light-blue-6), 1); --semi-color-secondary-active: rgba(var(--semi-light-blue-7), 1); --semi-color-secondary-disabled: rgba(var(--semi-light-blue-2), 1); --semi-color-secondary-light-default: rgba(var(--semi-light-blue-0), 1); --semi-color-secondary-light-hover: rgba(var(--semi-light-blue-1), 1); --semi-color-secondary-light-active: rgba(var(--semi-light-blue-2), 1); --semi-color-tertiary: rgba(var(--semi-grey-5), 1); --semi-color-tertiary-hover: rgba(var(--semi-grey-6), 1); --semi-color-tertiary-active: rgba(var(--semi-grey-7), 1); --semi-color-tertiary-light-default: rgba(var(--semi-grey-0), 1); --semi-color-tertiary-light-hover: rgba(var(--semi-grey-1), 1); --semi-color-tertiary-light-active: rgba(var(--semi-grey-2), 1); --semi-color-default: rgba(var(--semi-grey-0), 1); --semi-color-default-hover: rgba(var(--semi-grey-1), 1); --semi-color-default-active: rgba(var(--semi-grey-2), 1); --semi-color-info: rgba(var(--semi-blue-5), 1); --semi-color-info-hover: rgba(var(--semi-blue-6), 1); --semi-color-info-active: rgba(var(--semi-blue-7), 1); --semi-color-info-disabled: rgba(var(--semi-blue-2), 1); --semi-color-info-light-default: rgba(var(--semi-blue-0), 1); --semi-color-info-light-hover: rgba(var(--semi-blue-1), 1); --semi-color-info-light-active: rgba(var(--semi-blue-2), 1); --semi-color-success: rgba(var(--semi-green-5), 1); --semi-color-success-hover: rgba(var(--semi-green-6), 1); --semi-color-success-active: rgba(var(--semi-green-7), 1); --semi-color-success-disabled: rgba(var(--semi-green-2), 1); --semi-color-success-light-default: rgba(var(--semi-green-0), 1); --semi-color-success-light-hover: rgba(var(--semi-green-1), 1); --semi-color-success-light-active: rgba(var(--semi-green-2), 1); --semi-color-danger: rgba(var(--semi-red-5), 1); --semi-color-danger-hover: rgba(var(--semi-red-6), 1); --semi-color-danger-active: rgba(var(--semi-red-7), 1); --semi-color-danger-light-default: rgba(var(--semi-red-0), 1); --semi-color-danger-light-hover: rgba(var(--semi-red-1), 1); --semi-color-danger-light-active: rgba(var(--semi-red-2), 1); --semi-color-warning: rgba(var(--semi-orange-5), 1); --semi-color-warning-hover: rgba(var(--semi-orange-6), 1); --semi-color-warning-active: rgba(var(--semi-orange-7), 1); --semi-color-warning-light-default: rgba(var(--semi-orange-0), 1); --semi-color-warning-light-hover: rgba(var(--semi-orange-1), 1); --semi-color-warning-light-active: rgba(var(--semi-orange-2), 1); --semi-color-focus-border: rgba(var(--semi-blue-5), 1); --semi-color-disabled-text: rgba(var(--semi-grey-9), .35); --semi-color-disabled-border: rgba(var(--semi-grey-1), 1); --semi-color-disabled-bg: rgba(var(--semi-grey-1), 1); --semi-color-disabled-fill: rgba(var(--semi-grey-8), .04); --semi-color-shadow: rgba(var(--semi-black), .04); --semi-color-link: rgba(var(--semi-blue-5), 1); --semi-color-link-hover: rgba(var(--semi-blue-6), 1); --semi-color-link-active: rgba(var(--semi-blue-7), 1); --semi-color-link-visited: rgba(var(--semi-blue-5), 1); --semi-color-border: rgba(var(--semi-grey-9), .08); --semi-color-nav-bg: rgba(var(--semi-white), 1); --semi-color-overlay-bg: rgba(22, 22, 26, .6); --semi-color-fill-0: rgba(var(--semi-grey-8), .05); --semi-color-fill-1: rgba(var(--semi-grey-8), .09); --semi-color-fill-2: rgba(var(--semi-grey-8), .13); --semi-color-bg-0: rgba(var(--semi-white), 1); --semi-color-bg-1: rgba(var(--semi-white), 1); --semi-color-bg-2: rgba(var(--semi-white), 1); --semi-color-bg-3: rgba(var(--semi-white), 1); --semi-color-bg-4: rgba(var(--semi-white), 1); --semi-color-text-0: rgba(var(--semi-grey-9), 1); --semi-color-text-1: rgba(var(--semi-grey-9), .8); --semi-color-text-2: rgba(var(--semi-grey-9), .62); --semi-color-text-3: rgba(var(--semi-grey-9), .35); --semi-shadow-elevated: 0 0 1px rgba(0, 0, 0, .3), 0 4px 14px rgba(0, 0, 0, .1); --semi-border-radius-extra-small: 3px; --semi-border-radius-small: 3px; --semi-border-radius-medium: 6px; --semi-border-radius-large: 12px; --semi-border-radius-circle: 50%; --semi-border-radius-full: 9999px; --semi-color-highlight-bg: rgba(var(--semi-yellow-4), 1); --semi-color-highlight: rgba(var(--semi-black), 1); --semi-color-data-0: rgba(87, 105, 255, 1); --semi-color-data-1: rgba(142, 212, 231, 1); --semi-color-data-2: rgba(245, 135, 0, 1); --semi-color-data-3: rgba(220, 183, 252, 1); --semi-color-data-4: rgba(74, 156, 247, 1); --semi-color-data-5: rgba(243, 204, 53, 1); --semi-color-data-6: rgba(254, 128, 144, 1); --semi-color-data-7: rgba(139, 215, 210, 1); --semi-color-data-8: rgba(131, 176, 35, 1); --semi-color-data-9: rgba(233, 165, 229, 1); --semi-color-data-10: rgba(48, 167, 206, 1); --semi-color-data-11: rgba(249, 192, 100, 1); --semi-color-data-12: rgba(177, 113, 249, 1); --semi-color-data-13: rgba(119, 182, 249, 1); --semi-color-data-14: rgba(200, 143, 2, 1); --semi-color-data-15: rgba(255, 170, 178, 1); --semi-color-data-16: rgba(51, 176, 171, 1); --semi-color-data-17: rgba(182, 215, 129, 1); --semi-color-data-18: rgba(212, 88, 212, 1); --semi-color-data-19: rgba(188, 198, 255, 1); } body[theme-mode=dark], body .semi-always-dark, :host([theme-mode=dark]), :host .semi-always-dark { font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; --semi-color-white: rgba(228, 231, 245, 1); --semi-color-black: rgba(var(--semi-black), 1); --semi-color-primary: rgba(var(--semi-blue-5), 1); --semi-color-primary-hover: rgba(var(--semi-blue-6), 1); --semi-color-primary-active: rgba(var(--semi-blue-7), 1); --semi-color-primary-disabled: rgba(var(--semi-blue-2), 1); --semi-color-primary-light-default: rgba(var(--semi-blue-5), .2); --semi-color-primary-light-hover: rgba(var(--semi-blue-5), .3); --semi-color-primary-light-active: rgba(var(--semi-blue-5), .4); --semi-color-secondary: rgba(var(--semi-light-blue-5), 1); --semi-color-secondary-hover: rgba(var(--semi-light-blue-6), 1); --semi-color-secondary-active: rgba(var(--semi-light-blue-7), 1); --semi-color-secondary-disabled: rgba(var(--semi-light-blue-2), 1); --semi-color-secondary-light-default: rgba(var(--semi-light-blue-5), .2); --semi-color-secondary-light-hover: rgba(var(--semi-light-blue-5), .3); --semi-color-secondary-light-active: rgba(var(--semi-light-blue-5), .4); --semi-color-tertiary: rgba(var(--semi-grey-5), 1); --semi-color-tertiary-hover: rgba(var(--semi-grey-6), 1); --semi-color-tertiary-active: rgba(var(--semi-grey-7), 1); --semi-color-tertiary-light-default: rgba(var(--semi-grey-5), .2); --semi-color-tertiary-light-hover: rgba(var(--semi-grey-5), .3); --semi-color-tertiary-light-active: rgba(var(--semi-grey-5), .4); --semi-color-default: rgba(var(--semi-grey-0), 1); --semi-color-default-hover: rgba(var(--semi-grey-1), 1); --semi-color-default-active: rgba(var(--semi-grey-2), 1); --semi-color-info: rgba(var(--semi-blue-5), 1); --semi-color-info-hover: rgba(var(--semi-blue-6), 1); --semi-color-info-active: rgba(var(--semi-blue-7), 1); --semi-color-info-disabled: rgba(var(--semi-blue-2), 1); --semi-color-info-light-default: rgba(var(--semi-blue-5), .2); --semi-color-info-light-hover: rgba(var(--semi-blue-5), .3); --semi-color-info-light-active: rgba(var(--semi-blue-5), .4); --semi-color-success: rgba(var(--semi-green-5), 1); --semi-color-success-hover: rgba(var(--semi-green-6), 1); --semi-color-success-active: rgba(var(--semi-green-7), 1); --semi-color-success-disabled: rgba(var(--semi-green-2), 1); --semi-color-success-light-default: rgba(var(--semi-green-5), .2); --semi-color-success-light-hover: rgba(var(--semi-green-5), .3); --semi-color-success-light-active: rgba(var(--semi-green-5), .4); --semi-color-danger: rgba(var(--semi-red-5), 1); --semi-color-danger-hover: rgba(var(--semi-red-6), 1); --semi-color-danger-active: rgba(var(--semi-red-7), 1); --semi-color-danger-light-default: rgba(var(--semi-red-5), .2); --semi-color-danger-light-hover: rgba(var(--semi-red-5), .3); --semi-color-danger-light-active: rgba(var(--semi-red-5), .4); --semi-color-warning: rgba(var(--semi-orange-5), 1); --semi-color-warning-hover: rgba(var(--semi-orange-6), 1); --semi-color-warning-active: rgba(var(--semi-orange-7), 1); --semi-color-warning-light-default: rgba(var(--semi-orange-5), .2); --semi-color-warning-light-hover: rgba(var(--semi-orange-5), .3); --semi-color-warning-light-active: rgba(var(--semi-orange-5), .4); --semi-color-focus-border: rgba(var(--semi-blue-5), 1); --semi-color-disabled-text: rgba(var(--semi-grey-9), .35); --semi-color-disabled-border: rgba(var(--semi-grey-1), 1); --semi-color-disabled-bg: rgba(var(--semi-grey-1), 1); --semi-color-disabled-fill: rgba(var(--semi-grey-8), .04); --semi-color-link: rgba(var(--semi-blue-5), 1); --semi-color-link-hover: rgba(var(--semi-blue-6), 1); --semi-color-link-active: rgba(var(--semi-blue-7), 1); --semi-color-link-visited: rgba(var(--semi-blue-5), 1); --semi-color-nav-bg: rgba(35, 36, 41, 1); --semi-shadow-elevated: inset 0 0 0 1px rgba(255, 255, 255, .1), 0 4px 14px rgba(0, 0, 0, .25); --semi-color-overlay-bg: rgba(22, 22, 26, .6); --semi-color-fill-0: rgba(var(--semi-white), .12); --semi-color-fill-1: rgba(var(--semi-white), .16); --semi-color-fill-2: rgba(var(--semi-white), .20); --semi-color-border: rgba(var(--semi-white), .08); --semi-color-shadow: rgba(var(--semi-black), .04); --semi-color-bg-0: rgba(22, 22, 26, 1); --semi-color-bg-1: rgba(35, 36, 41, 1); --semi-color-bg-2: rgba(53, 54, 60, 1); --semi-color-bg-3: rgba(67, 68, 74, 1); --semi-color-bg-4: rgba(79, 81, 89, 1); --semi-color-text-0: rgba(var(--semi-grey-9), 1); --semi-color-text-1: rgba(var(--semi-grey-9), .8); --semi-color-text-2: rgba(var(--semi-grey-9), .6); --semi-color-text-3: rgba(var(--semi-grey-9), .35); --semi-border-radius-extra-small: 3px; --semi-border-radius-small: 3px; --semi-border-radius-medium: 6px; --semi-border-radius-large: 12px; --semi-border-radius-circle: 50%; --semi-border-radius-full: 9999px; --semi-color-highlight-bg: rgba(var(--semi-yellow-2), 1); --semi-color-highlight: rgba(var(--semi-white), 1); --semi-color-data-0: rgba(94, 109, 194, 1); --semi-color-data-1: rgba(8, 104, 120, 1); --semi-color-data-2: rgba(250, 173, 63, 1); --semi-color-data-3: rgba(76, 43, 156, 1); --semi-color-data-4: rgba(16, 125, 248, 1); --semi-color-data-5: rgba(248, 202, 16, 1); --semi-color-data-6: rgba(195, 30, 87, 1); --semi-color-data-7: rgba(5, 119, 115, 1); --semi-color-data-8: rgba(154, 207, 13, 1); --semi-color-data-9: rgba(117, 29, 138, 1); --semi-color-data-10: rgba(16, 162, 180, 1); --semi-color-data-11: rgba(208, 110, 11, 1); --semi-color-data-12: rgba(113, 66, 197, 1); --semi-color-data-13: rgba(7, 100, 212, 1); --semi-color-data-14: rgba(251, 232, 110, 1); --semi-color-data-15: rgba(160, 19, 73, 1); --semi-color-data-16: rgba(11, 179, 167, 1); --semi-color-data-17: rgba(98, 138, 6, 1); --semi-color-data-18: rgba(162, 48, 179, 1); --semi-color-data-19: rgba(40, 51, 138, 1); } body, :host { --semi-transition_duration-slowest:0ms; --semi-transition_duration-slower:0ms; --semi-transition_duration-slow:0ms; --semi-transition_duration-normal:0ms; --semi-transition_duration-fast:0ms; --semi-transition_duration-faster:0ms; --semi-transition_duration-fastest:0ms; --semi-transition_duration-none:0ms; --semi-transition_function-linear:linear; --semi-transition_function-ease:ease; --semi-transition_function-easeIn:ease-in; --semi-transition_function-easeOut:ease-out; --semi-transition_function-easeInIOut:ease-in-out; --semi-transition_delay-none: 0ms; --semi-transition_delay-slowest:0ms; --semi-transition_delay-slower:0ms; --semi-transition_delay-slow:0ms; --semi-transition_delay-normal:0ms; --semi-transition_delay-fast:0ms; --semi-transition_delay-faster:0ms; --semi-transition_delay-fastest:0ms; --semi-transform_scale-none:scale(1,1); --semi-transform_scale-small:scale(1,1); --semi-transform_scale-medium:scale(1,1); --semi-transform_scale-large:scale(1,1); --semi-transform-rotate-none:rotate(0deg); --semi-transform_rotate-clockwise90deg:rotate(90deg); --semi-transform_rotate-clockwise180deg:rotate(180deg); --semi-transform_rotate-clockwise270deg:rotate(270deg); --semi-transform_rotate-clockwise360deg:rotate(360deg); --semi-transform_rotate-anticlockwise90deg:rotate(-90deg); --semi-transform_rotate-anticlockwise180deg:rotate(-180deg); --semi-transform_rotate-anticlockwise270deg:rotate(-270deg); --semi-transform_rotate-anticlockwise360deg:rotate(-360deg); } .semi-portal { position: absolute; top: 0; left: 0; width: 100%; z-index: 1; } .semi-portal-inner { position: absolute; background-color: transparent; min-width: max-content; } .semi-anchor { font-size: 14px; line-height: 20px; font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif; overflow-y: auto; overflow-x: hidden; position: relative; } .semi-anchor-size-small { font-size: 12px; line-height: 16px; font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif; } .semi-anchor-slide { position: absolute; left: 0; top: 0; height: 100%; } .semi-anchor-slide-muted { display: none; } .semi-anchor-slide-bar { display: none; position: absolute; top: 0; width: 2px; border-radius: 1px; } .semi-anchor-slide-bar-active { display: inline-block; } .semi-anchor-slide-bar-default { height: 28px; } .semi-anchor-slide-bar-small { height: 24px; } .semi-anchor-slide-bar-primary { background-color: var(--semi-color-primary); } .semi-anchor-slide-bar-tertiary { background-color: var(--semi-color-tertiary); } .semi-anchor-slide::before { position: absolute; display: block; width: 2px; height: 100%; background-color: var(--semi-color-border); border-radius: 1px; content: " "; } .semi-anchor-link-title { cursor: pointer; color: var(--semi-color-text-2); padding-top: 4px; padding-bottom: 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; border-radius: 3px; transition: color var(--semi-transition_duration-none) var(--semi-transition_function-easeIn) var(--semi-transition_delay-none); transform: scale(var(--semi-transform_scale-none)); background: transparent; } .semi-anchor-link-title:hover { color: var(--semi-color-tertiary-hover); } .semi-anchor-link-title-active { color: var(--semi-color-text-0); background: transparent; } .semi-anchor-link-title-active:hover { color: var(--semi-color-tertiary-hover); } .semi-anchor-link-title:focus-visible { outline: 2px solid var(--semi-color-primary-light-active); outline-offset: -2px; } .semi-anchor-link-title-disabled { color: var(--semi-color-disabled-text); cursor: not-allowed; } .semi-anchor-link-title-disabled:hover { color: var(--semi-color-disabled-text); } .semi-anchor-link-tooltip { cursor: pointer; color: var(--semi-color-text-2) !important; } .semi-anchor-link-tooltip-small { font-size: 12px; line-height: 16px; font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif; } .semi-anchor-link-tooltip:hover { color: var(--semi-color-tertiary-hover) !important; } .semi-anchor-link-tooltip-active { color: var(--semi-color-text-0) !important; } .semi-anchor-link-tooltip-disabled { color: var(--semi-color-disabled-text) !important; cursor: not-allowed; } .semi-anchor-link-tooltip-disabled:hover { color: var(--semi-color-disabled-text) !important; } .semi-rtl .semi-anchor, .semi-portal-rtl .semi-anchor { direction: rtl; } .semi-rtl .semi-anchor-slide, .semi-portal-rtl .semi-anchor-slide { right: 0; left: auto; } .semi-rtl .semi-anchor-link, .semi-portal-rtl .semi-anchor-link { padding-left: auto; } .semi-audio-player { display: flex; align-items: center; justify-content: center; gap: 24px; max-width: 1440px; height: 78px; background: rgba(var(--semi-grey-9), 0.8); } .semi-audio-player-control { display: flex; align-items: center; gap: 16px; } .semi-audio-player-control-button-icon { color: var(--semi-color-bg-0); } .semi-audio-player-control-button-play { background: var(--semi-color-bg-0) !important; color: var(--semi-color-text-0) !important; } .semi-audio-player-control-button-play-disabled { background: rgba(var(--semi-grey-0), 0.35) !important; color: var(--semi-color-grey-7) !important; } .semi-audio-player-slider-container { width: 323px; height: 100%; } .semi-audio-player-info-container { display: flex; align-items: center; gap: 16px; } .semi-audio-player-info { display: flex; flex-direction: column; gap: 4px; } .semi-audio-player-info-title { font-size: 14px; color: var(--semi-color-bg-0); font-weight: 600; display: flex; align-items: center; } .semi-audio-player-info-time { width: 100%; height: 22px; font-size: 14px; color: var(--semi-color-bg-0); display: flex; align-items: center; justify-content: space-between; gap: 4px; user-select: none; } .semi-audio-player-control-speed { width: 40px; height: 24px; display: flex; align-items: center; justify-content: center; gap: 4px; background: rgba(var(--semi-grey-8), 1); border-radius: 3px; font-size: 12px; line-height: 16px; color: var(--semi-color-default); font-weight: 600; user-select: none; } .semi-audio-player-control-speed-menu { background: rgba(var(--semi-grey-8), 1); width: 65px; } .semi-audio-player-control-speed-menu-item { color: var(--semi-color-default); } .semi-audio-player-control-speed-menu-item:hover { background: var(--semi-color-tertiary-active) !important; } .semi-audio-player-control-volume { width: 43px; height: 164px; background: rgba(var(--semi-grey-8), 1); border-radius: 4px; padding: 4px 0; display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 8px; } .semi-audio-player-control-volume-title { font-size: 12px; line-height: 16px; color: var(--semi-color-default); font-weight: 600; user-select: none; } .semi-audio-player-error { display: flex; align-items: center; gap: 4px; margin-left: 4px; color: var(--semi-color-danger); } .semi-audio-player-light { background: var(--semi-color-bg-0); border: 1px solid var(--semi-color-border); } .semi-audio-player-light .semi-audio-player-control-button-icon { color: rgba(var(--semi-grey-9), 1); } .semi-audio-player-light .semi-audio-player-control-button-play { background: rgba(var(--semi-grey-9), 1) !important; color: var(--semi-color-bg-0) !important; } .semi-audio-player-light .semi-audio-player-control-button-play-disabled { background: var(--semi-color-disabled-text) !important; color: rgba(var(--semi-white), 1) !important; } .semi-audio-player-light .semi-audio-player-info-title, .semi-audio-player-light .semi-audio-player-info-time { color: rgba(var(--semi-grey-9), 1); } .semi-audio-player-light .semi-audio-player-control-speed-menu-item, .semi-audio-player-light .semi-audio-player-control-volume-title { color: rgba(var(--semi-grey-9), 1); } .semi-audio-player-light .semi-audio-player-control-speed-menu-item:hover { background: rgba(var(--semi-grey-1), 1) !important; } .semi-audio-player-slider { background: rgba(var(--semi-grey-5), 1); border-radius: 9999px; position: relative; } .semi-audio-player-slider-light { background: rgba(var(--semi-grey-2), 1); } .semi-audio-player-slider-wrapper { position: relative; cursor: pointer; display: flex; align-items: center; justify-content: center; } .semi-audio-player-slider-wrapper-vertical { width: 100%; } .semi-audio-player-slider-wrapper-horizontal { height: 100%; } .semi-audio-player-slider-vertical { width: 4px; height: 100%; } .semi-audio-player-slider-horizontal { width: 100%; height: 4px; } .semi-audio-player-slider-progress { position: absolute; background: rgba(var(--semi-blue-4), 1); border-radius: 9999px; } .semi-audio-player-slider-progress-vertical { bottom: 0; } .semi-audio-player-slider-progress-horizontal { left: 0; } .semi-audio-player-slider-dot { position: absolute; width: 16px; height: 16px; background: rgba(var(--semi-white), 1); border: 1px solid var(--semi-color-primary); box-shadow: 0px 0px 4px 0px var(--semi-color-shadow); border-radius: 50%; transition: opacity 0.2s; } .semi-autocomplete-option { font-size: 14px; line-height: 20px; font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif; word-break: break-all; padding-left: 12px; padding-right: 12px; padding-top: 8px; padding-bottom: 8px; color: var(--semi-color-text-0); border-radius: 0px; position: relative; display: flex; flex-wrap: nowrap; align-items: center; cursor: pointer; box-sizing: border-box; transition: background-color var(--semi-transition_duration-none) var(--semi-transition_function-easeIn) var(--semi-transition_delay-none); } .semi-autocomplete-option-icon { width: 12px; color: transparent; visibility: hidden; margin-right: 8px; display: flex; justify-content: center; align-content: center; } .semi-autocomplete-option-text { display: flex; flex-wrap: wrap; white-space: pre; } .semi-autocomplete-option-keyword { color: var(--semi-color-primary); background-color: inherit; font-weight: 600; } .semi-autocomplete-option:active { background-color: var(--semi-color-fill-1); } .semi-autocomplete-option-empty { cursor: not-allowed; color: var(--semi-color-disabled-text); justify-content: center; } .semi-autocomplete-option-empty:hover { background-color: inherit; } .semi-autocomplete-option-empty:active { background-color: inherit; } .semi-autocomplete-option-disabled { color: var(--semi-color-disabled-text); cursor: not-allowed; } .semi-autocomplete-option-disabled:hover { background-color: var(--semi-color-fill-0); } .semi-autocomplete-option-selected { font-weight: 600; } .semi-autocomplete-option-selected .semi-autocomplete-option-icon { visibility: visible; color: var(--semi-color-text-2); } .semi-autocomplete-option-focused { background-color: var(--semi-color-fill-0); } .semi-autocomplete-option:first-of-type { margin-top: 4px; } .semi-autocomplete-option:last-of-type { margin-bottom: 4px; } .semi-autocomplete { cursor: text; display: inline-flex; vertical-align: middle; box-sizing: border-box; } .semi-autocomplete-option-list { overflow-x: hidden; overflow-y: auto; } .semi-autocomplete-option-list-chosen .semi-autocomplete-option-icon { display: flex; } .semi-autocomplete-loading-wrapper { padding-top: 8px; padding-bottom: 8px; cursor: not-allowed; height: 20px; } .semi-autocomplete-loading-wrapper .semi-spin { width: 100%; } .semi-rtl .semi-autocomplete, .semi-portal-rtl .semi-autocomplete { direction: rtl; } .semi-avatar { position: relative; display: inline-flex; overflow: hidden; align-items: center; justify-content: center; white-space: nowrap; text-align: center; vertical-align: middle; } .semi-avatar:focus-visible { outline: 2px solid var(--semi-color-primary-light-active); } .semi-avatar-focus { outline: 2px solid var(--semi-color-primary-light-active); } .semi-avatar-no-focus-visible:focus-visible { outline: none; } .semi-avatar .semi-avatar-label { display: flex; align-items: center; font-size: 14px; line-height: 20px; font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 600; } .semi-avatar-content { user-select: none; } .semi-avatar-extra-extra-small { width: 20px; height: 20px; border-radius: 3px; } .semi-avatar-extra-extra-small .semi-avatar-content { transform-origin: center; transform: scale(0.8); } .semi-avatar-extra-extra-small .semi-avatar-label { font-size: 10px; line-height: 15px; } .semi-avatar-extra-small { width: 24px; height: 24px; border-radius: 3px; } .semi-avatar-extra-small .semi-avatar-content { transform-origin: center; transform: scale(0.8); } .semi-avatar-extra-small .semi-avatar-label { font-size: 10px; line-height: 15px; } .semi-avatar-small { width: 32px; height: 32px; border-radius: 3px; } .semi-avatar-small .semi-avatar-label { font-size: 12px; line-height: 16px; font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif; } .semi-avatar-default { width: 40px; height: 40px; border-radius: 3px; } .semi-avatar-default .semi-avatar-label { font-size: 18px; line-height: 24px; font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif; } .semi-avatar-medium { width: 48px; height: 48px; border-radius: 3px; } .semi-avatar-medium .semi-avatar-label { font-size: 20px; line-height: 28px; font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif; } .semi-avatar-large { width: 72px; height: 72px; border-radius: 6px; } .semi-avatar-large .semi-avatar-label { font-size: 32px; line-height: 44px; font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif; } .semi-avatar-extra-large { width: 128px; height: 128px; border-radius: 12px; } .semi-avatar-extra-large .semi-avatar-label { font-size: 64px; line-height: 77px; } .semi-avatar-circle { border-radius: var(--semi-border-radius-circle); } .semi-avatar-image { background-color: transparent; } .semi-avatar > img { display: block; width: 100%; height: 100%; object-fit: cover; } .semi-avatar-hover { position: absolute; left: 0; top: 0; width: 100%; height: 100%; } .semi-avatar:hover { cursor: pointer; } .semi-avatar-wrapper { position: relative; display: inline-flex; flex-direction: column; align-items: center; width: fit-content; } .semi-avatar-wrapper .semi-avatar-top_slot-bg { position: absolute; display: flex; justify-content: center; border-radius: 50%; overflow: hidden; } .semi-avatar-wrapper .semi-avatar-top_slot-bg-small { width: 32px; height: 32px; } .semi-avatar-wrapper .semi-avatar-top_slot-bg-default { width: 40px; height: 40px; } .semi-avatar-wrapper .semi-avatar-top_slot-bg-medium { width: 48px; height: 48px; } .semi-avatar-wrapper .semi-avatar-top_slot-bg-large { width: 72px; height: 72px; } .semi-avatar-wrapper .semi-avatar-top_slot-bg-extra-large { width: 128px; height: 128px; } .semi-avatar-wrapper .semi-avatar-top_slot-bg-svg { position: absolute; } .semi-avatar-wrapper .semi-avatar-top_slot-bg-svg-small { top: -28px; scale: 0.4; } .semi-avatar-wrapper .semi-avatar-top_slot-bg-svg-default { top: -32px; scale: 0.7; } .semi-avatar-wrapper .semi-avatar-top_slot-bg-svg-medium { top: -30px; scale: 0.8; } .semi-avatar-wrapper .semi-avatar-top_slot-bg-svg-large { top: -30px; scale: 1.1; } .semi-avatar-wrapper .semi-avatar-top_slot-bg-svg-extra-large { top: -32px; scale: 1.4; } .semi-avatar-wrapper .semi-avatar-top_slot-wrapper { position: absolute; display: flex; justify-content: center; } .semi-avatar-wrapper .semi-avatar-top_slot-wrapper .semi-avatar-top_slot { color: var(--semi-color-bg-0); font-weight: 600; } .semi-avatar-wrapper .semi-avatar-top_slot-wrapper .semi-avatar-top_slot-content { user-select: none; position: relative; line-height: normal; } .semi-avatar-wrapper .semi-avatar-top_slot-wrapper .semi-avatar-top_slot-content-small { font-size: 5px; margin-top: 0px; } .semi-avatar-wrapper .semi-avatar-top_slot-wrapper .semi-avatar-top_slot-content-default { font-size: 6px; margin-top: -2px; } .semi-avatar-wrapper .semi-avatar-top_slot-wrapper .semi-avatar-top_slot-content-medium { font-size: 8px; margin-top: 0px; } .semi-avatar-wrapper .semi-avatar-top_slot-wrapper .semi-avatar-top_slot-content-large { font-size: 14px; margin-top: 0px; } .semi-avatar-wrapper .semi-avatar-top_slot-wrapper .semi-avatar-top_slot-content-extra-large { font-size: 16px; margin-top: 0px; } .semi-avatar-wrapper .semi-avatar-bottom_slot { color: var(--semi-color-bg-0); position: absolute; cursor: pointer; bottom: 3.5px; transform: translateY(50%); user-select: none; } .semi-avatar-wrapper .semi-avatar-bottom_slot-shape_circle { display: flex; justify-content: center; align-items: center; background: var(--semi-color-primary); border-radius: var(--semi-border-radius-circle); line-height: normal; } .semi-avatar-wrapper .semi-avatar-bottom_slot-shape_circle-extra-small { width: 12px; height: 12px; font-size: 5px; } .semi-avatar-wrapper .semi-avatar-bottom_slot-shape_circle-small { width: 12px; height: 12px; font-size: 5px; } .semi-avatar-wrapper .semi-avatar-bottom_slot-shape_circle-default { width: 16px; height: 16px; font-size: 12px; } .semi-avatar-wrapper .semi-avatar-bottom_slot-shape_circle-medium { width: 18px; height: 18px; font-size: 12px; } .semi-avatar-wrapper .semi-avatar-bottom_slot-shape_circle-large { width: 28px; height: 28px; font-size: 12px; } .semi-avatar-wrapper .semi-avatar-bottom_slot-shape_circle-extra-large { width: 28px; height: 28px; font-size: 14px; } .semi-avatar-wrapper .semi-avatar-bottom_slot-shape_square { display: flex; justify-content: center; align-items: center; background: var(--semi-color-primary); border-radius: 4px; padding: 1px 4px; font-weight: 600; border-style: solid; border-color: var(--semi-color-bg-0); } .semi-avatar-wrapper .semi-avatar-bottom_slot-shape_square-extra_small { font-size: 5px; border-width: 2px; } .semi-avatar-wrapper .semi-avatar-bottom_slot-shape_square-small { font-size: 5px; border-width: 2px; } .semi-avatar-wrapper .semi-avatar-bottom_slot-shape_square-default { font-size: 12px; border-width: 2px; } .semi-avatar-wrapper .semi-avatar-bottom_slot-shape_square-medium { font-size: 12px; border-width: 2px; } .semi-avatar-wrapper .semi-avatar-bottom_slot-shape_square-large { font-size: 12px; border-width: 2px; } .semi-avatar-wrapper .semi-avatar-bottom_slot-shape_square-extra-large { font-size: 14px; border-width: 2px; } .semi-avatar-group { display: inline-block; } .semi-avatar-group .semi-avatar { box-sizing: border-box; } .semi-avatar-group .semi-avatar:first-child { margin-left: 0; } .semi-avatar-group .semi-avatar-extra-large { border: 3px var(--semi-color-bg-1) solid; margin-left: -32px; } .semi-avatar-group .semi-avatar-large { border: 3px var(--semi-color-bg-1) solid; margin-left: -18px; } .semi-avatar-group .semi-avatar-medium { border: 2px var(--semi-color-bg-1) solid; margin-left: -12px; } .semi-avatar-group .semi-avatar-default { border: 2px var(--semi-color-bg-1) solid; margin-left: -12px; } .semi-avatar-group .semi-avatar-small { border: 2px var(--semi-color-bg-1) solid; margin-left: -12px; } .semi-avatar-group .semi-avatar-extra-small { border: 1px var(--semi-color-bg-1) solid; margin-left: -10px; } .semi-avatar-group .semi-avatar-extra-extra-small { border: 1px var(--semi-color-bg-1) solid; margin-left: -4px; } .semi-avatar-group .semi-avatar-item-start-0 { z-index: 100; } .semi-avatar-group .semi-avatar-item-end-0 { z-index: 80; } .semi-avatar-group .semi-avatar-item-start-1 { z-index: 99; } .semi-avatar-group .semi-avatar-item-end-1 { z-index: 81; } .semi-avatar-group .semi-avatar-item-start-2 { z-index: 98; } .semi-avatar-group .semi-avatar-item-end-2 { z-index: 82; } .semi-avatar-group .semi-avatar-item-start-3 { z-index: 97; } .semi-avatar-group .semi-avatar-item-end-3 { z-index: 83; } .semi-avatar-group .semi-avatar-item-start-4 { z-index: 96; } .semi-avatar-group .semi-avatar-item-end-4 { z-index: 84; } .semi-avatar-group .semi-avatar-item-start-5 { z-index: 95; } .semi-avatar-group .semi-avatar-item-end-5 { z-index: 85; } .semi-avatar-group .semi-avatar-item-start-6 { z-index: 94; } .semi-avatar-group .semi-avatar-item-end-6 { z-index: 86; } .semi-avatar-group .semi-avatar-item-start-7 { z-index: 93; } .semi-avatar-group .semi-avatar-item-end-7 { z-index: 87; } .semi-avatar-group .semi-avatar-item-start-8 { z-index: 92; } .semi-avatar-group .semi-avatar-item-end-8 { z-index: 88; } .semi-avatar-group .semi-avatar-item-start-9 { z-index: 91; } .semi-avatar-group .semi-avatar-item-end-9 { z-index: 89; } .semi-avatar-group .semi-avatar-item-start-10 { z-index: 90; } .semi-avatar-group .semi-avatar-item-end-10 { z-index: 90; } .semi-avatar-group .semi-avatar-item-start-11 { z-index: 89; } .semi-avatar-group .semi-avatar-item-end-11 { z-index: 91; } .semi-avatar-group .semi-avatar-item-start-12 { z-index: 88; } .semi-avatar-group .semi-avatar-item-end-12 { z-index: 92; } .semi-avatar-group .semi-avatar-item-start-13 { z-index: 87; } .semi-avatar-group .semi-avatar-item-end-13 { z-index: 93; } .semi-avatar-group .semi-avatar-item-start-14 { z-index: 86; } .semi-avatar-group .semi-avatar-item-end-14 { z-index: 94; } .semi-avatar-group .semi-avatar-item-start-15 { z-index: 85; } .semi-avatar-group .semi-avatar-item-end-15 { z-index: 95; } .semi-avatar-group .semi-avatar-item-start-16 { z-index: 84; } .semi-avatar-group .semi-avatar-item-end-16 { z-index: 96; } .semi-avatar-group .semi-avatar-item-start-17 { z-index: 83; } .semi-avatar-group .semi-avatar-item-end-17 { z-index: 97; } .semi-avatar-group .semi-avatar-item-start-18 { z-index: 82; } .semi-avatar-group .semi-avatar-item-end-18 { z-index: 98; } .semi-avatar-group .semi-avatar-item-start-19 { z-index: 81; } .semi-avatar-group .semi-avatar-item-end-19 { z-index: 99; } .semi-avatar-group .semi-avatar-item-start-20 { z-index: 80; } .semi-avatar-group .semi-avatar-item-end-20 { z-index: 100; } .semi-avatar-group .semi-avatar-item-more { background-color: rgba(var(--semi-grey-5), 1); } .semi-avatar-amber { background-color: rgba(var(--semi-amber-3), 1); color: rgba(var(--semi-white), 1); } .semi-avatar-blue { background-color: rgba(var(--semi-blue-3), 1); color: rgba(var(--semi-white), 1); } .semi-avatar-cyan { background-color: rgba(var(--semi-cyan-3), 1); color: rgba(var(--semi-white), 1); } .semi-avatar-green { background-color: rgba(var(--semi-green-3), 1); color: rgba(var(--semi-white), 1); } .semi-avatar-grey { background-color: rgba(var(--semi-grey-3), 1); color: rgba(var(--semi-white), 1); } .semi-avatar-indigo { background-color: rgba(var(--semi-indigo-3), 1); color: rgba(var(--semi-white), 1); } .semi-avatar-light-blue { background-color: rgba(var(--semi-light-blue-3), 1); color: rgba(var(--semi-white), 1); } .semi-avatar-light-green { background-color: rgba(var(--semi-light-green-3), 1); color: rgba(var(--semi-white), 1); } .semi-avatar-lime { background-color: rgba(var(--semi-lime-3), 1); color: rgba(var(--semi-white), 1); } .semi-avatar-orange { background-color: rgba(var(--semi-orange-3), 1); color: rgba(var(--semi-white), 1); } .semi-avatar-pink { background-color: rgba(var(--semi-pink-3), 1); color: rgba(var(--semi-white), 1); } .semi-avatar-purple { background-color: rgba(var(--semi-purple-3), 1); color: rgba(var(--semi-white), 1); } .semi-avatar-red { background-color: rgba(var(--semi-red-3), 1); color: rgba(var(--semi-white), 1); } .semi-avatar-teal { background-color: rgba(var(--semi-teal-3), 1); color: rgba(var(--semi-white), 1); } .semi-avatar-violet { background-color: rgba(var(--semi-violet-3), 1); color: rgba(var(--semi-white), 1); } .semi-avatar-yellow { background-color: rgba(var(--semi-yellow-3), 1); color: rgba(var(--semi-white), 1); } .semi-avatar-additionalBorder { border-style: solid; border-color: var(--semi-color-primary); display: inline-block; box-sizing: border-box; position: absolute; border-width: 1.5px; top: -3.5px; left: -3.5px; } .semi-avatar-additionalBorder-extra-extra-small { width: 27px; height: 27px; } .semi-avatar-additionalBorder-extra-small { width: 31px; height: 31px; } .semi-avatar-additionalBorder-small { width: 39px; height: 39px; } .semi-avatar-additionalBorder-default { width: 47px; height: 47px; } .semi-avatar-additionalBorder-medium { width: 55px; height: 55px; } .semi-avatar-additionalBorder-large { width: 79px; height: 79px; } .semi-avatar-additionalBorder-extra-large { width: 135px; height: 135px; } .semi-avatar-square.semi-avatar-additionalBorder-extra_extra_small { border-radius: 3px; } .semi-avatar-square.semi-avatar-additionalBorder-extra_small { border-radius: 3px; } .semi-avatar-square.semi-avatar-additionalBorder-small { border-radius: 3px; } .semi-avatar-square.semi-avatar-additionalBorder-default { border-radius: 3px; } .semi-avatar-square.semi-avatar-additionalBorder-medium { border-radius: 3px; } .semi-avatar-square.semi-avatar-additionalBorder-large { border-radius: 6px; } .semi-avatar-additionalBorder-circle { border-radius: var(--semi-border-radius-circle); } .semi-avatar-additionalBorder-animated { animation: 800ms linear infinite semi-avatar-additionalBorder; } .semi-avatar-animated { animation: 1000ms linear infinite semi-avatar-content; } @keyframes semi-avatar-additionalBorder { 0% { opacity: 1; transform: scale(1); } to { border-width: 0; opacity: 0; transform: scale(1.15); } } @keyframes semi-avatar-content { 0% { transform: scale(1); } 50% { transform: scale(0.9); } to { transform: scale(1); } } .semi-rtl .semi-avatar, .semi-portal-rtl .semi-avatar { direction: rtl; } .semi-rtl .semi-avatar-extra-extra-small .semi-avatar-content, .semi-portal-rtl .semi-avatar-extra-extra-small .semi-avatar-content { transform: scale(0.8); } .semi-rtl .semi-avatar-extra-small .semi-avatar-content, .semi-portal-rtl .semi-avatar-extra-small .semi-avatar-content { transform: scale(0.8); } .s