@semi-bot/semi-theme-semi-vision
Version:
Semi theme generated by dsm. https://semi.design/dsm
1,605 lines (1,582 loc) • 700 kB
CSS
/* sizing */
/* spacing */
body, body[theme-mode=dark] .semi-always-light {
--semi-black: 0,0,0;
--semi-red-0: 255,240,235;
--semi-red-1: 255,216,205;
--semi-red-2: 255,173,155;
--semi-red-3: 255,128,106;
--semi-red-4: 255,78,56;
--semi-red-5: 255,26,6;
--semi-red-6: 219,10,0;
--semi-red-7: 184,3,0;
--semi-red-8: 148,0,3;
--semi-red-9: 112,0,6;
--semi-white: 255,255,255;
--semi-Info-0: 240,245,255;
--semi-Info-1: 212,226,255;
--semi-Info-2: 171,196,255;
--semi-Info-3: 130,163,255;
--semi-Info-4: 89,128,255;
--semi-Info-5: 46,85,242;
--semi-Info-6: 29,58,204;
--semi-Info-7: 15,35,166;
--semi-Info-8: 5,17,128;
--semi-Info-9: 3,8,89;
--semi-blue-0: 235,246,255;
--semi-blue-1: 204,232,255;
--semi-blue-2: 153,208,255;
--semi-blue-3: 102,182,255;
--semi-blue-4: 51,154,255;
--semi-blue-5: 0,124,255;
--semi-blue-6: 0,103,219;
--semi-blue-7: 0,83,184;
--semi-blue-8: 0,65,148;
--semi-blue-9: 0,47,112;
--semi-cyan-0: 231,251,251;
--semi-cyan-1: 197,245,247;
--semi-cyan-2: 143,234,238;
--semi-cyan-3: 92,222,230;
--semi-cyan-4: 44,209,221;
--semi-cyan-5: 0,194,213;
--semi-cyan-6: 0,159,178;
--semi-cyan-7: 0,125,142;
--semi-cyan-8: 0,92,107;
--semi-cyan-9: 0,60,71;
--semi-grey-0: 249,249,249;
--semi-grey-1: 230,231,234;
--semi-grey-2: 198,200,205;
--semi-grey-3: 167,169,176;
--semi-grey-4: 136,138,146;
--semi-grey-5: 107,109,117;
--semi-grey-6: 85,87,97;
--semi-grey-7: 65,67,76;
--semi-grey-8: 46,47,56;
--semi-grey-9: 28,29,35;
--semi-lime-0: 246,254,234;
--semi-lime-1: 235,253,202;
--semi-lime-2: 218,251,150;
--semi-lime-3: 205,248,99;
--semi-lime-4: 195,246,49;
--semi-lime-5: 189,244,0;
--semi-lime-6: 154,203,0;
--semi-lime-7: 121,163,0;
--semi-lime-8: 88,122,0;
--semi-lime-9: 58,81,0;
--semi-pink-0: 255,235,240;
--semi-pink-1: 255,205,218;
--semi-pink-2: 255,155,185;
--semi-pink-3: 255,106,155;
--semi-pink-4: 255,56,128;
--semi-pink-5: 255,6,105;
--semi-pink-6: 219,0,95;
--semi-pink-7: 184,0,85;
--semi-pink-8: 148,0,74;
--semi-pink-9: 112,0,60;
--semi-teal-0: 229,249,244;
--semi-teal-1: 194,243,232;
--semi-teal-2: 138,231,212;
--semi-teal-3: 87,218,194;
--semi-teal-4: 41,206,178;
--semi-teal-5: 0,194,164;
--semi-teal-6: 0,162,139;
--semi-teal-7: 0,129,114;
--semi-teal-8: 0,97,87;
--semi-teal-9: 0,65,59;
--semi-Error-0: 255,242,240;
--semi-Error-1: 255,241,240;
--semi-Error-2: 255,204,199;
--semi-Error-3: 255,163,158;
--semi-Error-4: 255,120,117;
--semi-Error-5: 255,77,79;
--semi-Error-6: 217,54,62;
--semi-Error-7: 179,36,48;
--semi-Error-8: 140,21,35;
--semi-Error-9: 102,14,27;
--semi-amber-0: 255,251,236;
--semi-amber-1: 254,245,207;
--semi-amber-2: 253,231,160;
--semi-amber-3: 252,215,113;
--semi-amber-4: 251,195,66;
--semi-amber-5: 250,173,20;
--semi-amber-6: 208,134,15;
--semi-amber-7: 167,99,10;
--semi-amber-8: 125,67,6;
--semi-amber-9: 83,41,3;
--semi-brand-0: 240,245,255;
--semi-brand-1: 212,226,255;
--semi-brand-2: 171,196,255;
--semi-brand-3: 130,163,255;
--semi-brand-4: 89,128,255;
--semi-brand-5: 46,85,242;
--semi-brand-6: 29,58,204;
--semi-brand-7: 15,35,166;
--semi-brand-8: 5,17,128;
--semi-brand-9: 3,8,89;
--semi-green-0: 239,249,232;
--semi-green-1: 218,243,201;
--semi-green-2: 182,231,151;
--semi-green-3: 147,220,105;
--semi-green-4: 114,208,64;
--semi-green-5: 82,196,26;
--semi-green-6: 65,163,20;
--semi-green-7: 49,131,15;
--semi-green-8: 35,98,10;
--semi-green-9: 22,65,6;
--semi-indigo-0: 237,241,251;
--semi-indigo-1: 210,219,246;
--semi-indigo-2: 168,184,238;
--semi-indigo-3: 129,150,229;
--semi-indigo-4: 92,116,221;
--semi-indigo-5: 57,84,212;
--semi-indigo-6: 42,63,176;
--semi-indigo-7: 29,45,141;
--semi-indigo-8: 19,29,105;
--semi-indigo-9: 10,17,69;
--semi-orange-0: 255,248,235;
--semi-orange-1: 255,237,204;
--semi-orange-2: 255,215,153;
--semi-orange-3: 255,190,102;
--semi-orange-4: 255,162,51;
--semi-orange-5: 255,130,0;
--semi-orange-6: 213,98,0;
--semi-orange-7: 170,70,0;
--semi-orange-8: 128,46,0;
--semi-orange-9: 85,26,0;
--semi-purple-0: 250,233,250;
--semi-purple-1: 243,202,245;
--semi-purple-2: 229,153,235;
--semi-purple-3: 212,107,226;
--semi-purple-4: 193,65,216;
--semi-purple-5: 173,26,206;
--semi-purple-6: 137,16,170;
--semi-purple-7: 103,9,135;
--semi-purple-8: 72,4,99;
--semi-purple-9: 43,0,63;
--semi-violet-0: 241,238,253;
--semi-violet-1: 220,211,251;
--semi-violet-2: 188,168,246;
--semi-violet-3: 158,127,242;
--semi-violet-4: 130,87,237;
--semi-violet-5: 104,48,233;
--semi-violet-6: 87,35,197;
--semi-violet-7: 70,24,162;
--semi-violet-8: 54,15,126;
--semi-violet-9: 38,8,90;
--semi-yellow-0: 255,254,235;
--semi-yellow-1: 255,251,204;
--semi-yellow-2: 255,244,153;
--semi-yellow-3: 255,233,102;
--semi-yellow-4: 255,219,51;
--semi-yellow-5: 255,202,0;
--semi-yellow-6: 213,158,0;
--semi-yellow-7: 170,118,0;
--semi-yellow-8: 128,82,0;
--semi-yellow-9: 85,50,0;
--semi-Success-0: 246,255,237;
--semi-Success-1: 217,247,190;
--semi-Success-2: 183,235,143;
--semi-Success-3: 149,222,100;
--semi-Success-4: 115,209,61;
--semi-Success-5: 82,196,26;
--semi-Success-6: 56,158,13;
--semi-Success-7: 35,120,4;
--semi-Success-8: 19,82,0;
--semi-Success-9: 9,43,0;
--semi-Warning-0: 255,251,230;
--semi-Warning-1: 255,241,184;
--semi-Warning-2: 255,229,143;
--semi-Warning-3: 255,214,102;
--semi-Warning-4: 255,197,61;
--semi-Warning-5: 250,173,20;
--semi-Warning-6: 212,136,6;
--semi-Warning-7: 173,104,0;
--semi-Warning-8: 135,77,0;
--semi-Warning-9: 97,52,0;
--semi-light-blue-0: 235,249,255;
--semi-light-blue-1: 204,240,255;
--semi-light-blue-2: 153,224,255;
--semi-light-blue-3: 102,206,255;
--semi-light-blue-4: 51,186,255;
--semi-light-blue-5: 0,165,255;
--semi-light-blue-6: 0,138,219;
--semi-light-blue-7: 0,113,184;
--semi-light-blue-8: 0,88,148;
--semi-light-blue-9: 0,65,112;
--semi-light-green-0: 245,251,237;
--semi-light-green-1: 232,247,210;
--semi-light-green-2: 208,238,167;
--semi-light-green-3: 185,230,126;
--semi-light-green-4: 161,221,88;
--semi-light-green-5: 138,213,53;
--semi-light-green-6: 112,178,42;
--semi-light-green-7: 87,142,32;
--semi-light-green-8: 63,107,23;
--semi-light-green-9: 41,71,15;
}
body[theme-mode=dark], body .semi-always-dark {
--semi-black: 0,0,0;
--semi-red-0: 112,0,6;
--semi-red-1: 148,0,3;
--semi-red-2: 184,3,0;
--semi-red-3: 219,10,0;
--semi-red-4: 255,26,6;
--semi-red-5: 255,78,56;
--semi-red-6: 255,128,106;
--semi-red-7: 255,173,155;
--semi-red-8: 255,216,205;
--semi-red-9: 255,240,235;
--semi-white: 255,255,255;
--semi-blue-0: 0,47,112;
--semi-blue-1: 0,65,148;
--semi-blue-2: 0,83,184;
--semi-blue-3: 0,103,219;
--semi-blue-4: 0,124,255;
--semi-blue-5: 51,154,255;
--semi-blue-6: 102,182,255;
--semi-blue-7: 153,208,255;
--semi-blue-8: 204,232,255;
--semi-blue-9: 235,246,255;
--semi-cyan-0: 0,60,71;
--semi-cyan-1: 0,92,107;
--semi-cyan-2: 0,125,142;
--semi-cyan-3: 0,159,178;
--semi-cyan-4: 0,194,213;
--semi-cyan-5: 44,209,221;
--semi-cyan-6: 92,222,230;
--semi-cyan-7: 143,234,238;
--semi-cyan-8: 197,245,247;
--semi-cyan-9: 231,251,251;
--semi-grey-0: 28,29,35;
--semi-grey-1: 46,47,56;
--semi-grey-2: 65,67,76;
--semi-grey-3: 85,87,97;
--semi-grey-4: 107,109,117;
--semi-grey-5: 136,138,146;
--semi-grey-6: 167,169,176;
--semi-grey-7: 198,200,205;
--semi-grey-8: 230,231,234;
--semi-grey-9: 249,249,249;
--semi-lime-0: 58,81,0;
--semi-lime-1: 88,122,0;
--semi-lime-2: 121,163,0;
--semi-lime-3: 154,203,0;
--semi-lime-4: 189,244,0;
--semi-lime-5: 195,246,49;
--semi-lime-6: 205,248,99;
--semi-lime-7: 218,251,150;
--semi-lime-8: 235,253,202;
--semi-lime-9: 246,254,234;
--semi-pink-0: 112,0,60;
--semi-pink-1: 148,0,74;
--semi-pink-2: 184,0,85;
--semi-pink-3: 219,0,95;
--semi-pink-4: 255,6,105;
--semi-pink-5: 255,56,128;
--semi-pink-6: 255,106,155;
--semi-pink-7: 255,155,185;
--semi-pink-8: 255,205,218;
--semi-pink-9: 255,235,240;
--semi-teal-0: 0,65,59;
--semi-teal-1: 0,97,87;
--semi-teal-2: 0,129,114;
--semi-teal-3: 0,162,139;
--semi-teal-4: 0,194,164;
--semi-teal-5: 41,206,178;
--semi-teal-6: 87,218,194;
--semi-teal-7: 138,231,212;
--semi-teal-8: 194,243,232;
--semi-teal-9: 229,249,244;
--semi-amber-0: 84,44,10;
--semi-amber-1: 127,73,16;
--semi-amber-2: 169,105,23;
--semi-amber-3: 211,141,30;
--semi-amber-4: 250,173,20;
--semi-amber-5: 253,201,82;
--semi-amber-6: 254,219,125;
--semi-amber-7: 254,234,168;
--semi-amber-8: 255,246,212;
--semi-amber-9: 255,252,238;
--semi-brand-0: 7,19,99;
--semi-brand-1: 14,32,135;
--semi-brand-2: 22,47,171;
--semi-brand-3: 33,65,206;
--semi-brand-4: 46,85,242;
--semi-brand-5: 86,120,245;
--semi-brand-6: 127,155,247;
--semi-brand-7: 169,189,250;
--semi-brand-8: 212,222,252;
--semi-brand-9: 238,242,254;
--semi-green-0: 25,66,11;
--semi-green-1: 40,100,17;
--semi-green-2: 56,133,24;
--semi-green-3: 73,166,32;
--semi-green-4: 82,196,26;
--semi-green-5: 122,210,76;
--semi-green-6: 154,221,115;
--semi-green-7: 186,233,158;
--semi-green-8: 220,244,205;
--semi-green-9: 240,249,234;
--semi-indigo-0: 10,17,69;
--semi-indigo-1: 19,29,105;
--semi-indigo-2: 29,45,141;
--semi-indigo-3: 42,63,176;
--semi-indigo-4: 57,84,212;
--semi-indigo-5: 92,116,221;
--semi-indigo-6: 129,150,229;
--semi-indigo-7: 168,184,238;
--semi-indigo-8: 210,219,246;
--semi-indigo-9: 237,241,251;
--semi-orange-0: 85,26,0;
--semi-orange-1: 128,46,0;
--semi-orange-2: 170,70,0;
--semi-orange-3: 213,98,0;
--semi-orange-4: 255,130,0;
--semi-orange-5: 255,162,51;
--semi-orange-6: 255,190,102;
--semi-orange-7: 255,215,153;
--semi-orange-8: 255,237,204;
--semi-orange-9: 255,248,235;
--semi-purple-0: 43,0,63;
--semi-purple-1: 72,4,99;
--semi-purple-2: 103,9,135;
--semi-purple-3: 137,16,170;
--semi-purple-4: 173,26,206;
--semi-purple-5: 193,65,216;
--semi-purple-6: 212,107,226;
--semi-purple-7: 229,153,235;
--semi-purple-8: 243,202,245;
--semi-purple-9: 250,233,250;
--semi-violet-0: 38,8,90;
--semi-violet-1: 54,15,126;
--semi-violet-2: 70,24,162;
--semi-violet-3: 87,35,197;
--semi-violet-4: 104,48,233;
--semi-violet-5: 130,87,237;
--semi-violet-6: 158,127,242;
--semi-violet-7: 188,168,246;
--semi-violet-8: 220,211,251;
--semi-violet-9: 241,238,253;
--semi-yellow-0: 85,50,0;
--semi-yellow-1: 128,82,0;
--semi-yellow-2: 170,118,0;
--semi-yellow-3: 213,158,0;
--semi-yellow-4: 255,202,0;
--semi-yellow-5: 255,219,51;
--semi-yellow-6: 255,233,102;
--semi-yellow-7: 255,244,153;
--semi-yellow-8: 255,251,204;
--semi-yellow-9: 255,254,235;
--semi-light-blue-0: 0,65,112;
--semi-light-blue-1: 0,88,148;
--semi-light-blue-2: 0,113,184;
--semi-light-blue-3: 0,138,219;
--semi-light-blue-4: 0,165,255;
--semi-light-blue-5: 51,186,255;
--semi-light-blue-6: 102,206,255;
--semi-light-blue-7: 153,224,255;
--semi-light-blue-8: 204,240,255;
--semi-light-blue-9: 235,249,255;
--semi-light-green-0: 41,71,15;
--semi-light-green-1: 63,107,23;
--semi-light-green-2: 87,142,32;
--semi-light-green-3: 112,178,42;
--semi-light-green-4: 138,213,53;
--semi-light-green-5: 161,221,88;
--semi-light-green-6: 185,230,126;
--semi-light-green-7: 208,238,167;
--semi-light-green-8: 232,247,210;
--semi-light-green-9: 245,251,237;
}
body, body[theme-mode=dark] .semi-always-light {
--semi-color-bg-0: rgba(255,255,255,1);
--semi-color-bg-1: rgba(255,255,255,1);
--semi-color-bg-2: rgba(255,255,255,1);
--semi-color-bg-3: rgba(255,255,255,1);
--semi-color-bg-4: rgba(255,255,255,1);
--semi-color-bg-5: rgba(245,245,245,1);
--semi-color-info: rgba(var(--semi-brand-5), 1);
--semi-color-link: rgba(var(--semi-brand-5), 1);
--semi-color-nav-bg: rgba(245,245,245,1);
--semi-color-black: rgba(0,0,0,0.88);
--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-fill-0: rgba(0,0,0,0.04);
--semi-color-fill-1: rgba(0,0,0,0.06);
--semi-color-fill-2: rgba(0,0,0,0.15);
--semi-color-text-0: rgba(0,0,0,0.88);
--semi-color-text-1: rgba(0,0,0,0.65);
--semi-color-text-2: rgba(0,0,0,0.45);
--semi-color-text-3: rgba(0,0,0,0.25);
--semi-color-white: rgba(var(--semi-white),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);
--semi-color-info-bg: rgba(var(--semi-brand-0), 1);
--semi-color-border: rgba(0,0,0,0.12);
--semi-color-danger: rgba(var(--semi-Error-5), 1);
--semi-color-shadow: rgba(var(--semi-black),0.04);
--semi-color-default: rgba(var(--semi-grey-0),1);
--semi-color-fill-alter: rgba(0,0,0,0.02);
--semi-color-info-hover: rgba(var(--semi-brand-0), 1);
--semi-color-link-hover: rgba(var(--semi-brand-4),1);
--semi-color-primary: rgba(46,85,242,1);
--semi-color-success: rgba(var(--semi-Success-5), 1);
--semi-color-warning: rgba(var(--semi-Warning-5), 1);
--semi-color-danger-bg: rgba(var(--semi-Error-0),1);
--semi-color-info-active: rgba(var(--semi-brand-6), 1);
--semi-color-info-border: rgba(var(--semi-brand-2), 1);
--semi-color-link-active: rgba(var(--semi-brand-6), 1);
--semi-color-link-visited: rgba(0,0,0,0.25);
--semi-color-tertiary: rgba(var(--semi-grey-5),1);
--semi-color-focus-border: rgba(var(--semi-brand-5), 1);
--semi-color-info-disabled: rgba(var(--semi-brand-2), 1);
--semi-color-overlay-bg: rgba(22,22,26,0.45);
--semi-color-primary-bg: rgba(var(--semi-brand-0), 1);
--semi-color-success-bg: rgba(var(--semi-Success-0), 1);
--semi-color-warning-bg: rgba(var(--semi-Warning-0),1);
--semi-color-danger-hover: rgba(var(--semi-Error-4),1);
--semi-color-highlight: rgba(var(--semi-black), 1);
--semi-color-secondary: rgba(46,85,242,1);
--semi-color-danger-active: rgba(var(--semi-Error-6),1);
--semi-color-danger-border: rgba(var(--semi-Error-2),1);
--semi-color-disabled-bg: rgba(0,0,0,0.15);
--semi-color-default-hover: rgba(var(--semi-grey-1), 1);
--semi-color-primary-hover: rgba(var(--semi-brand-4),1);
--semi-color-success-hover: rgba(var(--semi-Success-2), 1);
--semi-color-warning-hover: rgba(var(--semi-Warning-4), 1);
--semi-color-default-active: rgba(var(--semi-grey-2), 1);
--semi-color-disabled-fill: rgba(0,0,0,0.04);
--semi-color-disabled-text: rgba(0,0,0,0.25);
--semi-color-highlight-bg: rgba(var(--semi-yellow-4), 1);
--semi-color-primary-active: rgba(var(--semi-brand-6), 1);
--semi-color-primary-border: rgba(var(--semi-brand-2),1);
--semi-color-success-active: rgba(var(--semi-Success-6), 1);
--semi-color-success-border: rgba(var(--semi-Success-2),1);
--semi-color-warning-active: rgba(var(--semi-Warning-6), 1);
--semi-color-warning-border: rgba(var(--semi-Warning-2),1);
--semi-color-border-secondary: rgba(0,0,0,0.06);
--semi-color-primary-bgHover: rgba(var(--semi-brand-1), 1);
--semi-color-tertiary-hover: rgba(var(--semi-grey-6), 1);
--semi-color-disabled-border: rgba(0,0,0,0.12);
--semi-color-primary-disabled: rgba(0,0,0,0.04);
--semi-color-success-disabled: rgba(var(--semi-Success-0), 1);
--semi-color-tertiary-active: rgba(var(--semi-grey-7), 1);
--semi-color-secondary-hover: rgba(89,128,255,1);
--semi-color-secondary-active: rgba(29,58,204,1);
--semi-color-info-light-hover: rgba(var(--semi-blue-1), 1);
--semi-color-primary-borderHover: rgba(var(--semi-brand-3), 1);
--semi-color-info-light-active: rgba(var(--semi-blue-2), 1);
--semi-color-secondary-disabled: rgba(0,0,0,0.04);
--semi-color-info-light-default: rgba(var(--semi-blue-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-danger-light-default: rgba(var(--semi-red-0), 1);
--semi-color-primary-light-hover: rgba(var(--semi-brand-1), 1);
--semi-color-success-light-hover: rgba(var(--semi-green-1), 1);
--semi-color-warning-light-hover: rgba(var(--semi-orange-1), 1);
--semi-color-primary-light-active: rgba(var(--semi-brand-2), 1);
--semi-color-success-light-active: rgba(var(--semi-green-2), 1);
--semi-color-warning-light-active: rgba(var(--semi-orange-2), 1);
--semi-color-primary-light-default: rgba(var(--semi-brand-0), 1);
--semi-color-success-light-default: rgba(var(--semi-green-0), 1);
--semi-color-tertiary-light-hover: rgba(var(--semi-grey-1), 1);
--semi-color-warning-light-default: rgba(var(--semi-orange-0), 1);
--semi-color-tertiary-light-active: rgba(var(--semi-grey-2), 1);
--semi-color-secondary-light-hover: rgba(var(--semi-blue-1), 1);
--semi-color-tertiary-light-default: rgba(var(--semi-grey-0), 1);
--semi-color-secondary-light-active: rgba(var(--semi-blue-2), 1);
--semi-color-secondary-light-default: rgba(var(--semi-light-blue-0), 1);
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-shadow-elevated: 0px 12px 48px 16px rgba(0,0,0,0.03),0px 9px 28px 0px rgba(0,0,0,0.05),0px 6px 16px -8px rgba(0,0,0,0.08);
--semi-shadow-0: none;
--semi-shadow-1: 0px 2px 4px 0px rgba(0,0,0,0.02),0px 1px 6px -1px rgba(0,0,0,0.02),0px 1px 2px 0px rgba(0,0,0,0.03);
--semi-shadow-2: 0px 5px 12px 4px rgba(0,0,0,0.09),0px 3px 6px 0px rgba(0,0,0,0.12),0px 1px 2px -2px rgba(0,0,0,0.16);
--semi-shadow-knob: 0px 9px 28px 8px rgba(0,0,0,0.05),0px 6px 16px 0px rgba(0,0,0,0.08),0px 3px 6px -4px rgba(0,0,0,0.12);
--semi-shadow-AI-Modal: 0px 10px 50px 0px rgba(235,239,253,1);
--semi-border-radius-full: 9999px;
--semi-border-radius-large: 16px;
--semi-border-radius-small: 4px;
--semi-border-radius-circle: 50%;
--semi-border-radius-medium: 8px;
--semi-border-radius-extra-small: 2px;
}
body[theme-mode=dark], body .semi-always-dark {
--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-info: rgba(var(--semi-blue-5), 1);
--semi-color-link: rgba(var(--semi-blue-5), 1);
--semi-color-nav-bg: rgba(35, 36, 41, 1);
--semi-color-black: rgba(var(--semi-black), 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-fill-0: rgba(var(--semi-white), 0.05);
--semi-color-fill-1: rgba(var(--semi-white), 0.09);
--semi-color-fill-2: rgba(var(--semi-white), 0.13);
--semi-color-text-0: rgba(var(--semi-grey-9), 1);
--semi-color-text-1: rgba(var(--semi-grey-9), 0.8);
--semi-color-text-2: rgba(var(--semi-grey-9), 0.6);
--semi-color-text-3: rgba(var(--semi-grey-9), 0.35);
--semi-color-white: rgba(228, 231, 245, 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);
--semi-color-border: rgba(var(--semi-white), 0.08);
--semi-color-danger: rgba(var(--semi-red-5), 1);
--semi-color-shadow: rgba(var(--semi-black), 0.04);
--semi-color-default: rgba(var(--semi-grey-0), 1);
--semi-color-info-hover: rgba(var(--semi-blue-6), 1);
--semi-color-link-hover: rgba(var(--semi-blue-6), 1);
--semi-color-primary: rgba(var(--semi-brand-5), 1);
--semi-color-success: rgba(var(--semi-green-5), 1);
--semi-color-warning: rgba(var(--semi-orange-5), 1);
--semi-color-info-active: rgba(var(--semi-blue-7), 1);
--semi-color-link-active: rgba(var(--semi-blue-7), 1);
--semi-color-link-visited: rgba(var(--semi-blue-5), 1);
--semi-color-tertiary: rgba(var(--semi-grey-5), 1);
--semi-color-focus-border: rgba(var(--semi-brand-5), 1);
--semi-color-info-disabled: rgba(var(--semi-blue-2), 1);
--semi-color-overlay-bg: rgba(22, 22, 26, 0.6);
--semi-color-danger-hover: rgba(var(--semi-red-6), 1);
--semi-color-highlight: rgba(var(--semi-white), 1);
--semi-color-secondary: rgba(var(--semi-light-blue-5), 1);
--semi-color-danger-active: rgba(var(--semi-red-7), 1);
--semi-color-disabled-bg: rgba(var(--semi-grey-1), 1);
--semi-color-default-hover: rgba(var(--semi-grey-1), 1);
--semi-color-primary-hover: rgba(var(--semi-brand-6), 1);
--semi-color-success-hover: rgba(var(--semi-green-6), 1);
--semi-color-warning-hover: rgba(var(--semi-orange-6), 1);
--semi-color-default-active: rgba(var(--semi-grey-2), 1);
--semi-color-disabled-fill: rgba(var(--semi-grey-8), 0.04);
--semi-color-disabled-text: rgba(var(--semi-grey-9), 0.35);
--semi-color-highlight-bg: rgba(var(--semi-yellow-2), 1);
--semi-color-primary-active: rgba(var(--semi-brand-7), 1);
--semi-color-success-active: rgba(var(--semi-green-7), 1);
--semi-color-warning-active: rgba(var(--semi-orange-7), 1);
--semi-color-tertiary-hover: rgba(var(--semi-grey-6), 1);
--semi-color-disabled-border: rgba(var(--semi-grey-1), 1);
--semi-color-primary-disabled: rgba(var(--semi-brand-2), 1);
--semi-color-success-disabled: rgba(var(--semi-green-2), 1);
--semi-color-tertiary-active: rgba(var(--semi-grey-7), 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-info-light-hover: rgba(var(--semi-blue-5), 0.3);
--semi-color-info-light-active: rgba(var(--semi-blue-5), 0.4);
--semi-color-secondary-disabled: rgba(var(--semi-light-blue-2), 1);
--semi-color-info-light-default: rgba(var(--semi-blue-5), 0.2);
--semi-color-danger-light-hover: rgba(var(--semi-red-5), 0.3);
--semi-color-danger-light-active: rgba(var(--semi-red-5), 0.4);
--semi-color-danger-light-default: rgba(var(--semi-red-5), 0.2);
--semi-color-primary-light-hover: rgba(var(--semi-brand-5), 0.3);
--semi-color-success-light-hover: rgba(var(--semi-green-5), 0.3);
--semi-color-warning-light-hover: rgba(var(--semi-orange-5), 0.3);
--semi-color-primary-light-active: rgba(var(--semi-brand-5), 0.4);
--semi-color-success-light-active: rgba(var(--semi-green-5), 0.4);
--semi-color-warning-light-active: rgba(var(--semi-orange-5), 0.4);
--semi-color-primary-light-default: rgba(var(--semi-brand-5), 0.2);
--semi-color-success-light-default: rgba(var(--semi-green-5), 0.2);
--semi-color-tertiary-light-hover: rgba(var(--semi-grey-5), 0.3);
--semi-color-warning-light-default: rgba(var(--semi-orange-5), 0.2);
--semi-color-tertiary-light-active: rgba(var(--semi-grey-5), 0.4);
--semi-color-secondary-light-hover: rgba(var(--semi-light-blue-5), 0.3);
--semi-color-tertiary-light-default: rgba(var(--semi-grey-5), 0.2);
--semi-color-secondary-light-active: rgba(var(--semi-light-blue-5), 0.4);
--semi-color-secondary-light-default: rgba(var(--semi-light-blue-5), 0.2);
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-shadow-elevated: 0px 12px 48px 16px rgba(0,0,0,0.03),0px 9px 28px 0px rgba(0,0,0,0.05),0px 6px 16px -8px rgba(0,0,0,0.08);
--semi-shadow-0: none;
--semi-shadow-1: 0px 2px 4px 0px rgba(0,0,0,0.02),0px 1px 6px -1px rgba(0,0,0,0.02),0px 1px 2px 0px rgba(0,0,0,0.03);
--semi-shadow-2: 0px 5px 12px 4px rgba(0,0,0,0.09),0px 3px 6px 0px rgba(0,0,0,0.12),0px 1px 2px -2px rgba(0,0,0,0.16);
--semi-shadow-knob: 0px 9px 28px 8px rgba(0,0,0,0.05),0px 6px 16px 0px rgba(0,0,0,0.08),0px 3px 6px -4px rgba(0,0,0,0.12);
--semi-shadow-AI-Modal: 0px 10px 50px 0px rgba(235,239,253,1);
--semi-border-radius-full: 9999px;
--semi-border-radius-large: 16px;
--semi-border-radius-small: 4px;
--semi-border-radius-circle: 50%;
--semi-border-radius-medium: 8px;
--semi-border-radius-extra-small: 2px;
}
body {
--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-transition_delay-fast:180ms;
--semi-transition_delay-none:0ms;
--semi-transition_delay-slow:1000ms;
--semi-transition_delay-faster:120ms;
--semi-transition_delay-normal:600ms;
--semi-transition_delay-slower:1200ms;
--semi-transition_delay-fastest:90ms;
--semi-transition_delay-slowest:1800ms;
--semi-transition_duration-fast:180ms;
--semi-transition_duration-none:0ms;
--semi-transition_duration-slow:1000ms;
--semi-transition_duration-faster:120ms;
--semi-transition_duration-normal:600ms;
--semi-transition_duration-slower:1200ms;
--semi-transition_duration-fastest:90ms;
--semi-transition_duration-slowest:1800ms;
--semi-transition_function-easeIn:cubic-bezier(0.4, 0, 1, 1);
--semi-transition_function-linear:linear;
--semi-transition_function-easeOut:cubic-bezier(0, 0, 0.2, 1);
--semi-transition_function-easeInOut:cubic-bezier(0.4, 0, 0.2, 1);
}
.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;
font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
line-height: 22px;
overflow-y: auto;
overflow-x: hidden;
position: relative;
}
.semi-anchor-size-small {
font-size: 12px;
font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
line-height: 18px;
}
.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;
font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
line-height: 18px;
}
.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;
font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
line-height: 22px;
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;
font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
line-height: 22px;
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;
font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
line-height: 18px;
}
.semi-avatar-default {
width: 40px;
height: 40px;
border-radius: 3px;
}
.semi-avatar-default .semi-avatar-label {
font-size: 18px;
font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
line-height: 26px;
}
.semi-avatar-medium {
width: 48px;
height: 48px;
border-radius: 3px;
}
.semi-avatar-medium .semi-avatar-label {
font-size: 20px;
font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
line-height: 28px;
}
.semi-avatar-large {
width: 72px;
height: 72px;
border-radius: 6px;
}
.semi-avatar-large .semi-avatar-label {
font-size: 32px;
font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
line-height: 42px;
}
.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